Fix Compres Gambar && seed gambar profile - landing page

.gitignore

@@ -48,3 +48,5 @@ next-env.d.ts
 
 .env.*
 
+*.tar.gz
+

package.json

@@ -3,11 +3,9 @@
   "version": "0.1.5",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "prisma:seed": "bun run prisma/seed.ts"
+    "dev": "bun --bun next dev",
+    "build": "bun --bun next build",
+    "start": "bun --bun next start"
   },
   "prisma": {
     "seed": "bun run prisma/seed.ts"
@@ -75,15 +73,18 @@
     "prisma": "^6.3.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-international-phone": "^4.6.0",
     "react-leaflet": "^5.0.0",
     "react-simple-toasts": "^6.1.0",
     "react-toastify": "^11.0.5",
     "react-transition-group": "^4.4.5",
     "readdirp": "^4.1.1",
     "recharts": "^2.15.3",
+    "sharp": "^0.34.3",
     "swr": "^2.3.2",
     "uuid": "^11.1.0",
     "valtio": "^2.1.3",
+    "zlib": "^1.0.5",
     "zod": "^3.24.3"
   },
   "devDependencies": {

prisma/data/file-storage.json

@@ -0,0 +1,137 @@
+[
+  {
+    "id": "cmff0rr4z0002vn0twp333m2",
+    "name": "S6RIjFaPvdQm3oq4rM4X9-desktop.webp",
+    "realName": "bares.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/S6RIjFaPvdQm3oq4rM4X9-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff0tnf00003vn0t3kgzi0u0",
+    "name": "_pVNEmThU5ICGa8gv3gh_-desktop.webp",
+    "realName": "bicara-darma.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/_pVNEmThU5ICGa8gv3gh_-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff0uykf0004vn0trmmxpgfh",
+    "name": "bv6rdKvjxkkjUSGLQ0lvB-desktop.webp",
+    "realName": "daves.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/bv6rdKvjxkkjUSGLQ0lvB-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff0z34f0005vn0tjtvq519p",
+    "name": "Z4hWaV04CvoE20MjccQsV-desktop.webp",
+    "realName": "mangan.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/Z4hWaV04CvoE20MjccQsV-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff38cyq000bvn0t9f01cz3f",
+    "name": "LvLAtOqWojx4sn6NjJWB9-desktop.webp",
+    "realName": "gelah-melah.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/LvLAtOqWojx4sn6NjJWB9-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff0zqvd0007vn0tv6o5hjcq",
+    "name": "gR2mcvAQVgJ2-rM5coYJj-desktop.webp",
+    "realName": "inovasi-desa-darmasaba.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/gR2mcvAQVgJ2-rM5coYJj-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff1013m0008vn0th7t0d64d",
+    "name": "JpL-9F8-IGztMn8E2ce02-desktop.webp",
+    "realName": "pdkt.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/JpL-9F8-IGztMn8E2ce02-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff10cwq0009vn0tse8dzu3j",
+    "name": "bxAk4AsGbJTC705_IVdes-desktop.webp",
+    "realName": "sajjiana-dharma-raksaka.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/bxAk4AsGbJTC705_IVdes-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff2w5ly000avn0telhct71k",
+    "name": "Vbj_osnMJUkGEQGDTLwV--desktop.webp",
+    "realName": "perbekel.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/Vbj_osnMJUkGEQGDTLwV--desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff3joae0000vn6h8sgs0ilg",
+    "name": "7hox9spUxj56hY_EBYLnj-desktop.webp",
+    "realName": "youtube.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/7hox9spUxj56hY_EBYLnj-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff3ll130001vn6hkhls3f5y",
+    "name": "ChihV7_1eS-AGtSg9UwMv-desktop.webp",
+    "realName": "gmail.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/ChihV7_1eS-AGtSg9UwMv-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff3mtat0002vn6hs8vyyhdd",
+    "name": "z8v9ZREwOJHKGIRYauROt-desktop.webp",
+    "realName": "facebook.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/z8v9ZREwOJHKGIRYauROt-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff3nv180003vn6h5jvedidq",
+    "name": "BLjMxTKoCNE31uOURR3IU-desktop.webp",
+    "realName": "telephone-call.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/BLjMxTKoCNE31uOURR3IU-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff3oouh0004vn6hd94brzv9",
+    "name": "hkJYAeTNWK_vYaYS20w3I-desktop.webp",
+    "realName": "instagram.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/hkJYAeTNWK_vYaYS20w3I-desktop.webp",
+    "category": "image"
+  },
+  {
+    "id": "cmff3q12g0005vn6h5ojov2qa",
+    "name": "6XEoZ9SFu59COpil03Gya-desktop.webp",
+    "realName": "tiktok.png",
+    "path": "uploads/images",
+    "mimeType": "image/webp",
+    "link": "/api/fileStorage/findUnique/6XEoZ9SFu59COpil03Gya-desktop.webp",
+    "category": "image"
+  }
+]

prisma/data/landing-page/profile/mediaSosial.json

@@ -2,31 +2,37 @@
   {
     "id": "cmds8w2q60002vnbe6i8qhkuo",
     "name": "Telephone Desa Darmasaba",
-    "iconUrl": "081239580000"
+    "iconUrl": "081239580000",
+    "imageId": "cmff3nv180003vn6h5jvedidq"
   },
   {
     "id": "cmds8z7u20005vnbegyyvnbk0",
     "name": "Email Desa Darmasaba",
-    "iconUrl": "desadarmasaba@badungkab.go.id"
+    "iconUrl": "desadarmasaba@badungkab.go.id",
+    "imageId": "cmff3ll130001vn6hkhls3f5y"
   },
   {
     "id": "cmds9023u0008vnbe3oxmhwyf",
     "name": "Desa Darmasaba",
-    "iconUrl": "https://www.youtube.com/channel/UCtPw9WOQO7d2HIKzKgel4Xg"
+    "iconUrl": "https://www.youtube.com/channel/UCtPw9WOQO7d2HIKzKgel4Xg",
+    "imageId": "cmff3joae0000vn6h8sgs0ilg"
   },
   {
     "id": "cmds90oul000bvnbe2bqkptoi",
     "name": "Pemerintah Desa Darmasaba",
-    "iconUrl": "https://www.facebook.com/DarmasabaDesaku"
+    "iconUrl": "https://www.facebook.com/DarmasabaDesaku",
+    "imageId": "cmff3mtat0002vn6hs8vyyhdd"
   },
   {
     "id": "cmds91i4e000evnbe8gtf1gub",
     "name": "ddarmasaba",
-    "iconUrl": "https://www.instagram.com/ddarmasaba/"
+    "iconUrl": "https://www.instagram.com/ddarmasaba/",
+    "imageId": "cmff3oouh0004vn6hd94brzv9"
   },
   {
     "id": "cmds92de5000hvnbemlu6sq5x",
     "name": "desa.darmasaba",
-    "iconUrl": "https://www.tiktok.com/@desa.darmasaba?is_from_webapp=1&sender_device=pc"
+    "iconUrl": "https://www.tiktok.com/@desa.darmasaba?is_from_webapp=1&sender_device=pc",
+    "imageId": "cmff3q12g0005vn6h5ojov2qa"
   }
 ]

prisma/data/landing-page/profile/profile.json

@@ -2,6 +2,7 @@
   {
     "id": "edit",
     "name": "I.B Surya Prabhawa Manuaba, S.H., M.H.",
-    "position": "Perbekel Darmasaba periode 2021-2027"
+    "position": "Perbekel Darmasaba periode 2021-2027",
+    "imageId": "cmff2w5ly000avn0telhct71k"
   }
 ]

prisma/data/landing-page/profile/programInovasi.json

@@ -1,50 +1,51 @@
 [
-  {
-    "id": "cmdr7039z0002vn5rttctt9hn",
-    "name": "Davest",
-    "description": "Darmasaba Village Festval",
-    "link": "https://darmasaba.desa.id/berita/55862-rakor-davest-2024"
-  },
   {
     "id": "cmdr755pf0005vn5rp8tyuubw",
     "name": "Dmangan",
     "description": "Darmasaba Aman Pangan",
-    "link": "https://darmasaba.desa.id/berita/61452-kader-d-mangan-berhasil-meraih-prestasi-dalam-ajang-lomba-banjar-bali-quis-bbq-tahun-2024"
+    "link": "https://darmasaba.desa.id/berita/61452-kader-d-mangan-berhasil-meraih-prestasi-dalam-ajang-lomba-banjar-bali-quis-bbq-tahun-2024",
+    "imageId" : "cmff0z34f0005vn0tjtvq519p"
   },
   {
     "id": "cmdr76nqk0008vn5rdddvcxnr",
     "name": "Bicara Darmasaba",
     "description": "Bicara Darmasaba",
-    "link": "https://darmasaba.desa.id/berita/42506-bicara-darmasaba"
+    "link": "https://darmasaba.desa.id/berita/42506-bicara-darmasaba",
+    "imageId" : "cmff0tnf00003vn0t3kgzi0u0"
   },
   {
     "id": "cmdr77vbw000bvn5rvpmoq31s",
     "name": "Bares",
     "description": "Darmasaba Recycling Stock/Exchange",
-    "link": "http://darmasaba.desa.id/berita/56722-bares"
+    "link": "http://darmasaba.desa.id/berita/56722-bares",
+    "imageId" : "cmff0rr4z0002vn0twp333m2"
   },
   {
     "id": "cmdr7bxtp000evn5rmy85wihx",
     "name": "Sajjana Dharma Raksaka",
     "description": "Sajjana Dharma Raksaka",
-    "link": "https://ppid.badungkab.go.id/storage/dokumen/5RS9dldGkrgzMQq6bKdZsqsVRHI8gffWv4PGfb3r.pdf"
+    "link": "https://ppid.badungkab.go.id/storage/dokumen/5RS9dldGkrgzMQq6bKdZsqsVRHI8gffWv4PGfb3r.pdf",
+    "imageId" : "cmff10cwq0009vn0tse8dzu3j"
   },
   {
     "id": "cmdr7dlnk000hvn5r9lur3z35",
     "name": "PDKT",
     "description": "Perangkat Desa Kuat Teknologi",
-    "link": "https://darmasaba.desa.id/berita/53752-p-d-k-t"
+    "link": "https://darmasaba.desa.id/berita/53752-p-d-k-t",
+    "imageId" : "cmff1013m0008vn0th7t0d64d"
   },
   {
     "id": "cmdr7ftob000mvn5rfhgdtg8v",
     "name": "GM",
     "description": "Galah Melah",
-    "link": "https://darmasaba.desa.id/berita/52880-galah-melah"
+    "link": "https://darmasaba.desa.id/berita/52880-galah-melah",
+    "imageId" : "cmff38cyq000bvn0t9f01cz3f"
   },
   {
     "id": "cmdr7glue000pvn5r6onzslju",
     "name": "Inovasi Desa Darmasaba",
     "description": "Inovasi Desa Darmasaba",
-    "link": "https://darmasaba.desa.id/produk-lokal-desa"
+    "link": "https://darmasaba.desa.id/produk-lokal-desa",
+    "imageId" : "cmff0zqvd0007vn0tv6o5hjcq"
   }
 ]

prisma/schema.prisma

@@ -92,7 +92,7 @@ model FileStorage {
   PejabatDesa                    PejabatDesa[]
   MediaSosial                    MediaSosial[]
   DesaAntiKorupsi                DesaAntiKorupsi[]
-  SDGSDesa                       SDGSDesa[]
+  SDGSDesa                       SdgsDesa[]
   APBDesImage                    APBDes[]                   @relation("APBDesImage")
   APBDesFile                     APBDes[]                   @relation("APBDesFile")
   PrestasiDesa                   PrestasiDesa[]
@@ -168,7 +168,7 @@ model KategoriDesaAntiKorupsi {
 }
 
 //========================================= SDGS Desa ========================================= //
-model SDGSDesa {
+model SdgsDesa {
   id        String       @id @default(cuid())
   name      String       @unique
   jumlah    String
@@ -1216,25 +1216,40 @@ model LayananPolsek {
 
 // ========================================= KONTAK DARURAT ========================================= //
 model KontakDaruratKeamanan {
-  id          String       @id @default(uuid())
-  nama        String // contoh: "Layanan Darurat", "Fasilitas Kesehatan"
-  image       FileStorage? @relation(fields: [imageId], references: [id])
+  id          String                @id @default(uuid())
+  nama        String
+  image       FileStorage?          @relation(fields: [imageId], references: [id])
   imageId     String?
-  kontakItems KontakItem[]
-  createdAt   DateTime     @default(now())
-  updatedAt   DateTime     @updatedAt
+  kategori    KontakItem            @relation(fields: [kategoriId], references: [id])
+  kategoriId  String
+  kontakItems KontakDaruratToItem[]
+  createdAt   DateTime              @default(now())
+  updatedAt   DateTime              @updatedAt
+  deletedAt   DateTime?
+  isActive    Boolean               @default(true)
 }
 
 model KontakItem {
-  id           String                @id @default(uuid())
-  nama         String // contoh: "Polisi", "Ambulans", "Puskesmas Darmasaba"
-  nomorTelepon String
-  image        FileStorage?          @relation(fields: [imageId], references: [id])
-  imageId      String?
-  kategori     KontakDaruratKeamanan @relation(fields: [kategoriId], references: [id])
-  kategoriId   String
-  createdAt    DateTime              @default(now())
-  updatedAt    DateTime              @updatedAt
+  id                    String                  @id @default(uuid())
+  nama                  String
+  nomorTelepon          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)
+  KontakDaruratToItem   KontakDaruratToItem[]
+  KontakDaruratKeamanan KontakDaruratKeamanan[]
+}
+
+model KontakDaruratToItem {
+  id              String                @id @default(uuid())
+  kontakDaruratId String
+  kontakItemId    String
+  kontakDarurat   KontakDaruratKeamanan @relation(fields: [kontakDaruratId], references: [id])
+  kontakItem      KontakItem            @relation(fields: [kontakItemId], references: [id])
+  createdAt       DateTime              @default(now())
 }
 
 // ========================================= PENCEGAHAN KRIMINALITAS ========================================= //
@@ -2106,18 +2121,18 @@ model KategoriBuku {
 // ========================================= USER ========================================= //
 
 model User {
-  id        String    @id @default(cuid())
-  username  String
-  nomor     String    @unique
-  role      Role      @relation(fields: [roleId], references: [id])
-  roleId    String    @default("1")
-  instansi  String?
+  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?
+  isActive    Boolean      @default(true)
+  lastLogin   DateTime?
+  createdAt   DateTime     @default(now())
+  updatedAt   DateTime     @updatedAt
+  deletedAt   DateTime?
 }
 
 model Role {

prisma/seed.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import prisma from "@/lib/prisma";
 import profilePejabatDesa from "./data/landing-page/profile/profile.json";
 import programInovasi from "./data/landing-page/profile/programInovasi.json";
@@ -15,7 +16,7 @@ import posisiOrganisasiPPID from "./data/ppid/struktur-ppid/posisi-organisasi-PP
 import visiMisiPPID from "./data/ppid/visi-misi-ppid/visimisiPPID.json";
 import dasarHukumPPID from "./data/ppid/dasar-hukum-ppid/dasarhukumPPID.json";
 import jenisKelamin from "./data/ppid/ikm/jenis-kelamin/jenis-kelamin.json";
-import daftarInformasiPublik from "./data/ppid/daftar-informasi-publik-desa-darmasaba/daftarInformasi.json"
+import daftarInformasiPublik from "./data/ppid/daftar-informasi-publik-desa-darmasaba/daftarInformasi.json";
 import pilihanRatingResponden from "./data/ppid/ikm/pilihan-rating-responden/rating-responden.json";
 import umurResponden from "./data/ppid/ikm/umur-responden/umur-responden.json";
 import categoryPengumuman from "./data/category-pengumuman.json";
@@ -54,63 +55,90 @@ import programUnggulan from "./data/pendidikan/program-pendidikan-anak/program-u
 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";
+import fileStorage from "./data/file-storage.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;
+  // =========== 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");
 
-  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");
+  // =========== 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");
+
+  // =========== FILE STORAGE ===========
+  console.log("🔄 Seeding file storage...");
+  for (const f of fileStorage) {
+    await prisma.fileStorage.upsert({
+      where: { id: f.id },
+      update: {
+        name: f.name,
+        realName: f.realName,
+        path: f.path,
+        mimeType: f.mimeType,
+        link: f.link,
+        category: f.category,
+      },
+      create: {
+        id: f.id,
+        name: f.name,
+        realName: f.realName,
+        path: f.path,
+        mimeType: f.mimeType,
+        link: f.link,
+        category: f.category,
+      },
+    });
+  }
+  console.log("✅ File storage seeded");
   // =========== LANDING PAGE ===========
   // =========== SUBMENU PROFILE ===========
   // =========== PROFILE PEJABAT DESA ===========
@@ -120,11 +148,13 @@ console.log("✅ Users seeded");
       update: {
         name: p.name,
         position: p.position,
+        imageId: p.imageId,
       },
       create: {
         id: p.id,
         name: p.name,
         position: p.position,
+        imageId: p.imageId,
       },
     });
   }
@@ -134,18 +164,35 @@ console.log("✅ Users seeded");
 
   // =========== PROGRAM INOVASI ===========
   for (const p of programInovasi) {
+    let imageId: string | null = null;
+
+    if (p.imageId) {
+      const imageExists = await prisma.fileStorage.findUnique({
+        where: { id: p.imageId },
+      });
+
+      if (imageExists) {
+        imageId = p.imageId;
+      } else {
+        console.warn(
+          `⚠️ imageId ${p.imageId} tidak ditemukan untuk ProgramInovasi ${p.name}`
+        );
+      }
+    }
     await prisma.programInovasi.upsert({
       where: { id: p.id },
       update: {
         name: p.name,
         description: p.description,
         link: p.link,
+        imageId: p.imageId,
       },
       create: {
         id: p.id,
         name: p.name,
         description: p.description,
         link: p.link,
+        imageId: p.imageId,
       },
     });
   }
@@ -158,11 +205,13 @@ console.log("✅ Users seeded");
       update: {
         name: p.name,
         iconUrl: p.iconUrl,
+        imageId: p.imageId,
       },
       create: {
         id: p.id,
         name: p.name,
         iconUrl: p.iconUrl,
+        imageId: p.imageId,
       },
     });
   }
@@ -308,11 +357,8 @@ console.log("✅ Users seeded");
 
   // =========== SDGSDesa ===========
   for (const l of sdgsDesa) {
-    await prisma.sDGSDesa.upsert({
-      where: {
-        name: l.name,
-        jumlah: l.jumlah,
-      },
+    await prisma.sdgsDesa.upsert({
+      where: { id: l.id },
       update: {
         name: l.name,
         jumlah: l.jumlah,
@@ -558,29 +604,29 @@ console.log("✅ Users seeded");
   }
   console.log("dasar hukum PPID success ...");
 
-    // =========== SUBMENU DAFTAR INFORMASI PUBLIK PPID ===========
-    for (const v of daftarInformasiPublik) {
-      // Convert string date to Date object
-      const tanggal = new Date(v.tanggal);
-      
-      await prisma.daftarInformasiPublik.upsert({
-        where: {
-          id: v.id,
-        },
-        update: {
-          jenisInformasi: v.jenisInformasi,
-          deskripsi: v.deskripsi,
-          tanggal: tanggal,
-        },
-        create: {
-          id: v.id,
-          jenisInformasi: v.jenisInformasi,
-          deskripsi: v.deskripsi,
-          tanggal: tanggal,
-        },
-      });
-    }
-    console.log("daftar informasi publik PPID success ...");
+  // =========== SUBMENU DAFTAR INFORMASI PUBLIK PPID ===========
+  for (const v of daftarInformasiPublik) {
+    // Convert string date to Date object
+    const tanggal = new Date(v.tanggal);
+
+    await prisma.daftarInformasiPublik.upsert({
+      where: {
+        id: v.id,
+      },
+      update: {
+        jenisInformasi: v.jenisInformasi,
+        deskripsi: v.deskripsi,
+        tanggal: tanggal,
+      },
+      create: {
+        id: v.id,
+        jenisInformasi: v.jenisInformasi,
+        deskripsi: v.deskripsi,
+        tanggal: tanggal,
+      },
+    });
+  }
+  console.log("daftar informasi publik PPID success ...");
 
   for (const l of pelayananPerizinanBerusaha) {
     await prisma.pelayananPerizinanBerusaha.upsert({

src/app/_com/SpashScreen.tsx

@@ -23,6 +23,7 @@ export default function SpashScreen() {
       <Paper p={"md"} miw={320}>
         <Flex>
           <Image
+            loading="lazy"
             src={images["darmasaba-icon"]}
             alt="darmasaba"
             w={100}

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -7,25 +8,13 @@ import { z } from "zod";
 const templateForm = z.object({
   nama: z.string().min(1, "Nama minimal 1 karakter"),
   imageId: z.string().nonempty(),
-  kontakItems: z.array(
-    z.object({
-      nama: z.string().min(1, "Nama minimal 1 karakter"),
-      nomorTelepon: z.string().min(1, "Nomor Telepon minimal 1 karakter"),
-      imageId: z.string().nonempty(),
-    })
-  ),
+  kategoriId: z.array(z.string()).min(1, "Minimal pilih satu kategori"),
 });
 
 const defaultForm = {
   nama: "",
   imageId: "",
-  kontakItems: [
-    {
-      nama: "",
-      nomorTelepon: "",
-      imageId: "",
-    },
-  ],
+  kategoriId: [] as string[],
 };
 
 const kontakDaruratKeamananState = proxy({
@@ -61,20 +50,50 @@ const kontakDaruratKeamananState = proxy({
     },
   },
   findMany: {
-    data: null as
-      | Prisma.KontakDaruratKeamananGetPayload<{
-          include: {
-            kontakItems: true;
-            image: true;
+    data: null as Array<
+      Prisma.KontakDaruratKeamananGetPayload<{
+        include: {
+          kategori: true;
+          image: true;
+          kontakItems: {
+            include: {
+              kontakItem: true;
+            };
           };
-        }>[]
-      | null,
-    async load() {
-      const res = await ApiFetch.api.keamanan.kontakdaruratkeamanan[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        kontakDaruratKeamananState.findMany.data = res.data?.data ?? [];
+        };
+      }>
+    > | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      kontakDaruratKeamananState.findMany.loading = true; // ✅ Akses langsung via nama path
+      kontakDaruratKeamananState.findMany.page = page;
+      kontakDaruratKeamananState.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.keamanan.kontakdaruratkeamanan[
+          "findMany"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          kontakDaruratKeamananState.findMany.data = res.data.data ?? [];
+          kontakDaruratKeamananState.findMany.totalPages =
+            res.data.totalPages ?? 1;
+        } else {
+          kontakDaruratKeamananState.findMany.data = [];
+          kontakDaruratKeamananState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch kontak darurat paginated:", err);
+        kontakDaruratKeamananState.findMany.data = [];
+        kontakDaruratKeamananState.findMany.totalPages = 1;
+      } finally {
+        kontakDaruratKeamananState.findMany.loading = false;
       }
     },
   },
@@ -83,10 +102,15 @@ const kontakDaruratKeamananState = proxy({
       include: {
         kontakItems: {
           include: {
-            image: true;
+            kontakItem: {
+              include: {
+                image: true;
+              }
+            };
           };
         };
         image: true;
+        kategori: true;
       };
     }> | null,
     loading: false,
@@ -168,14 +192,8 @@ const kontakDaruratKeamananState = proxy({
           this.id = data.id;
           this.form = {
             nama: data.nama,
-            imageId: data.imageId,
-            kontakItems: [
-              {
-                nama: data.kontakItems.nama,
-                nomorTelepon: data.kontakItems.nomorTelepon,
-                imageId: data.kontakItems.imageId,
-              },
-            ],
+            imageId: data.imageId || '',
+            kategoriId: data.kontakItems?.map((item: any) => item.kontakItemId) || []
           };
           return data;
         } else {
@@ -213,13 +231,7 @@ const kontakDaruratKeamananState = proxy({
             body: JSON.stringify({
               nama: this.form.nama,
               imageId: this.form.imageId,
-              kontakItems: [
-                {
-                  nama: this.form.kontakItems[0].nama,
-                  nomorTelepon: this.form.kontakItems[0].nomorTelepon,
-                  imageId: this.form.kontakItems[0].imageId,
-                },
-              ],
+              kategoriId: this.form.kategoriId,
             }),
           }
         );
@@ -256,4 +268,257 @@ const kontakDaruratKeamananState = proxy({
   },
 });
 
-export default kontakDaruratKeamananState;
+const templateFormItem = z.object({
+  nama: z.string().min(1, "Nama minimal 1 karakter"),
+  nomorTelepon: z.string().min(1, "Nomor Telepon minimal 1 karakter"),
+  imageId: z.string().nonempty(),
+});
+
+const defaultFormItem = {
+  nama: "",
+  nomorTelepon: "",
+  imageId: "",
+};
+
+const kontakDaruratItem = proxy({
+  create: {
+    form: { ...defaultFormItem },
+    loading: false,
+    async create() {
+      const cek = templateFormItem.safeParse(
+        kontakDaruratItem.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        kontakDaruratItem.create.loading = true;
+        const res = await ApiFetch.api.keamanan.kontakitem[
+          "create"
+        ].post(kontakDaruratItem.create.form);
+        if (res.status === 200) {
+          kontakDaruratItem.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        kontakDaruratItem.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<
+      Prisma.KontakItemGetPayload<{
+        include: {
+          image: true;
+        };
+      }>
+    > | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      kontakDaruratItem.findMany.loading = true; // ✅ Akses langsung via nama path
+      kontakDaruratItem.findMany.page = page;
+      kontakDaruratItem.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.keamanan.kontakitem[
+          "find-many"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          kontakDaruratItem.findMany.data = res.data.data ?? [];
+          kontakDaruratItem.findMany.totalPages =
+            res.data.totalPages ?? 1;
+        } else {
+          kontakDaruratItem.findMany.data = [];
+          kontakDaruratItem.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch kontak darurat paginated:", err);
+        kontakDaruratItem.findMany.data = [];
+        kontakDaruratItem.findMany.totalPages = 1;
+      } finally {
+        kontakDaruratItem.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KontakItemGetPayload<{
+      include: {
+        kategori: true;
+        image: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/keamanan/kontakitem/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kontakDaruratItem.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kontakDaruratItem.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        kontakDaruratItem.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        kontakDaruratItem.delete.loading = true;
+        const response = await fetch(
+          `/api/keamanan/kontakitem/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Kontak item berhasil dihapus");
+          await kontakDaruratItem.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus kontak item");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kontak item");
+      } finally {
+        kontakDaruratItem.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultFormItem },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/keamanan/kontakitem/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            nama: data.nama,
+            nomorTelepon: data.nomorTelepon,
+            imageId: data.imageId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading kontak darurat:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateFormItem.safeParse(
+        kontakDaruratItem.update.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kontakDaruratItem.update.loading = true;
+        const response = await fetch(
+          `/api/keamanan/kontakitem/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              nama: this.form.nama,
+              nomorTelepon: this.form.nomorTelepon,
+              imageId: this.form.imageId,
+            }),
+          }
+        );
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success("Berhasil update kontak item");
+          await kontakDaruratItem.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate kontak item");
+        }
+      } catch (error) {
+        console.error("Error updating kontak item:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate kontak item"
+        );
+        return false;
+      } finally {
+        kontakDaruratItem.update.loading = false;
+      }
+    },
+    reset() {
+      kontakDaruratItem.update.id = "";
+      kontakDaruratItem.update.form = { ...defaultFormItem };
+    },
+  },
+})
+
+const kontakDarurat = proxy({
+  kontakDaruratKeamananState,
+  kontakDaruratItem,
+});
+
+export default kontakDarurat;

src/app/admin/(dashboard)/_state/keamanan/pencegahan-kriminalitas.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";
@@ -88,12 +89,37 @@ const pencegahanKriminalitasState = proxy({
           };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.keamanan.pencegahankriminalitas[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        pencegahanKriminalitasState.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      pencegahanKriminalitasState.findMany.loading = true; // ✅ Akses langsung via nama path
+      pencegahanKriminalitasState.findMany.page = page;
+      pencegahanKriminalitasState.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.keamanan.pencegahankriminalitas[
+          "find-many"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          pencegahanKriminalitasState.findMany.data = res.data.data ?? [];
+          pencegahanKriminalitasState.findMany.totalPages =
+            res.data.totalPages ?? 1;
+        } else {
+          pencegahanKriminalitasState.findMany.data = [];
+          pencegahanKriminalitasState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch pencegahan kriminalitas paginated:", err);
+        pencegahanKriminalitasState.findMany.data = [];
+        pencegahanKriminalitasState.findMany.totalPages = 1;
+      } finally {
+        pencegahanKriminalitasState.findMany.loading = false;
       }
     },
   },
@@ -311,4 +337,4 @@ const pencegahanKriminalitasState = proxy({
     },
   },
 });
-export default pencegahanKriminalitasState;
+export default pencegahanKriminalitasState;

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

@@ -115,27 +115,38 @@ const artikelKesehatanState = proxy({
           };
         }>[]
       | null,
+    page: 1,
+    totalPages: 1,
     loading: false,
-    async load() {
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      artikelKesehatanState.findMany.loading = true; // ✅ Akses langsung via nama path
+      artikelKesehatanState.findMany.page = page;
+      artikelKesehatanState.findMany.search = search;
+
       try {
-        this.loading = true;
-        const res = await (ApiFetch.api.kesehatan as any)["artikel-kesehatan"][
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.kesehatan["artikel-kesehatan"][
           "find-many"
-        ].get();
+        ].get({ query });
 
-        if (res.status === 200) {
-          this.data = res.data?.data ?? [];
+        if (res.status === 200 && res.data?.success) {
+          artikelKesehatanState.findMany.data =
+            res.data.data ?? [];
+          artikelKesehatanState.findMany.totalPages =
+            res.data.totalPages ?? 1;
         } else {
-          toast.error("Gagal memuat data artikel kesehatan");
+          artikelKesehatanState.findMany.data = [];
+          artikelKesehatanState.findMany.totalPages = 1;
         }
-
-        return res;
       } catch (err) {
-        toast.error("Terjadi error saat load data");
-        console.error("LOAD ERROR:", err);
-        throw err;
+        console.error("Gagal fetch artikel kesehatan paginated:", err);
+        artikelKesehatanState.findMany.data = [];
+        artikelKesehatanState.findMany.totalPages = 1;
       } finally {
-        this.loading = false;
+        artikelKesehatanState.findMany.loading = false;
       }
     },
   },
@@ -280,12 +291,9 @@ const artikelKesehatanState = proxy({
     async byId(id: string) {
       try {
         artikelKesehatanState.delete.loading = true;
-        const res = await fetch(
-          `/api/kesehatan/artikel-kesehatan/del/${id}`,
-          {
-            method: "DELETE",
-          }
-        );
+        const res = await fetch(`/api/kesehatan/artikel-kesehatan/del/${id}`, {
+          method: "DELETE",
+        });
 
         const result = await res.json();
         if (res.ok && result.success) {

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

@@ -116,27 +116,38 @@ const fasilitasKesehatan = proxy({
           };
         }>[]
       | null,
+    page: 1,
+    totalPages: 1,
     loading: false,
-    async load() {
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      fasilitasKesehatanState.fasilitasKesehatan.findMany.loading = true; // ✅ Akses langsung via nama path
+      fasilitasKesehatanState.fasilitasKesehatan.findMany.page = page;
+      fasilitasKesehatanState.fasilitasKesehatan.findMany.search = search;
+
       try {
-        this.loading = true;
-        const res = await (ApiFetch.api.kesehatan as any)[
-          "fasilitas-kesehatan"
-        ]["find-many"].get();
+        const query: any = { page, limit };
+        if (search) query.search = search;
 
-        if (res.status === 200) {
-          this.data = res.data?.data ?? [];
+        const res = await ApiFetch.api.kesehatan["fasilitas-kesehatan"][
+          "find-many"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          fasilitasKesehatanState.fasilitasKesehatan.findMany.data =
+            res.data.data ?? [];
+          fasilitasKesehatanState.fasilitasKesehatan.findMany.totalPages =
+            res.data.totalPages ?? 1;
         } else {
-          toast.error("Gagal memuat data fasilitas kesehatan");
+          fasilitasKesehatanState.fasilitasKesehatan.findMany.data = [];
+          fasilitasKesehatanState.fasilitasKesehatan.findMany.totalPages = 1;
         }
-
-        return res;
       } catch (err) {
-        toast.error("Terjadi error saat load data");
-        console.error("LOAD ERROR:", err);
-        throw err;
+        console.error("Gagal fetch fasilitas kesehatan paginated:", err);
+        fasilitasKesehatanState.fasilitasKesehatan.findMany.data = [];
+        fasilitasKesehatanState.fasilitasKesehatan.findMany.totalPages = 1;
       } finally {
-        this.loading = false;
+        fasilitasKesehatanState.fasilitasKesehatan.findMany.loading = false;
       }
     },
   },
@@ -558,7 +569,7 @@ const dokter = proxy({
 
 const fasilitasKesehatanState = proxy({
   fasilitasKesehatan,
-  dokter
+  dokter,
 });
 
 export default fasilitasKesehatanState;

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

@@ -120,27 +120,36 @@ const jadwalkegiatanState = proxy({
           };
         }>[]
       | null,
+    page: 1,
+    totalPages: 1,
     loading: false,
-    async load() {
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      jadwalkegiatanState.findMany.loading = true; // ✅ Akses langsung via nama path
+      jadwalkegiatanState.findMany.page = page;
+      jadwalkegiatanState.findMany.search = search;
+
       try {
-        this.loading = true;
-        const res = await (ApiFetch.api.kesehatan as any)[
-          "jadwal-kegiatan"
-        ]["find-many"].get();
+        const query: any = { page, limit };
+        if (search) query.search = search;
 
-        if (res.status === 200) {
-          this.data = res.data?.data ?? [];
+        const res = await ApiFetch.api.kesehatan["jadwal-kegiatan"][
+          "find-many"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          jadwalkegiatanState.findMany.data = res.data.data ?? [];
+          jadwalkegiatanState.findMany.totalPages = res.data.totalPages ?? 1;
         } else {
-          toast.error("Gagal memuat data jadwal kegiatan");
+          jadwalkegiatanState.findMany.data = [];
+          jadwalkegiatanState.findMany.totalPages = 1;
         }
-
-        return res;
       } catch (err) {
-        toast.error("Terjadi error saat load data");
-        console.error("LOAD ERROR:", err);
-        throw err;
+        console.error("Gagal fetch jadwal kegiatan paginated:", err);
+        jadwalkegiatanState.findMany.data = [];
+        jadwalkegiatanState.findMany.totalPages = 1;
       } finally {
-        this.loading = false;
+        jadwalkegiatanState.findMany.loading = false;
       }
     },
   },
@@ -227,29 +236,42 @@ const jadwalkegiatanState = proxy({
           content: jadwalkegiatanState.edit.form.content,
           informasiJadwalKegiatan: {
             name: jadwalkegiatanState.edit.form.informasiJadwalKegiatan.name,
-            tanggal: jadwalkegiatanState.edit.form.informasiJadwalKegiatan.tanggal,
+            tanggal:
+              jadwalkegiatanState.edit.form.informasiJadwalKegiatan.tanggal,
             waktu: jadwalkegiatanState.edit.form.informasiJadwalKegiatan.waktu,
-            lokasi: jadwalkegiatanState.edit.form.informasiJadwalKegiatan.lokasi,
+            lokasi:
+              jadwalkegiatanState.edit.form.informasiJadwalKegiatan.lokasi,
           },
           layananJadwalKegiatan: {
-            content: jadwalkegiatanState.edit.form.layananJadwalKegiatan.content,
+            content:
+              jadwalkegiatanState.edit.form.layananJadwalKegiatan.content,
           },
           deskripsiJadwalKegiatan: {
-            deskripsi: jadwalkegiatanState.edit.form.deskripsiJadwalKegiatan.deskripsi,
+            deskripsi:
+              jadwalkegiatanState.edit.form.deskripsiJadwalKegiatan.deskripsi,
           },
           syaratKetentuanJadwalKegiatan: {
-            content: jadwalkegiatanState.edit.form.syaratKetentuanJadwalKegiatan.content,
+            content:
+              jadwalkegiatanState.edit.form.syaratKetentuanJadwalKegiatan
+                .content,
           },
           dokumenJadwalKegiatan: {
-            content: jadwalkegiatanState.edit.form.dokumenJadwalKegiatan.content,
+            content:
+              jadwalkegiatanState.edit.form.dokumenJadwalKegiatan.content,
           },
           pendaftaranJadwalKegiatan: {
             name: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.name,
-            tanggal: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.tanggal,
-            namaOrangtua: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.namaOrangtua,
-            nomor: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.nomor,
-            alamat: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.alamat,
-            catatan: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.catatan,
+            tanggal:
+              jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.tanggal,
+            namaOrangtua:
+              jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan
+                .namaOrangtua,
+            nomor:
+              jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.nomor,
+            alamat:
+              jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.alamat,
+            catatan:
+              jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.catatan,
           },
         };
 
@@ -286,7 +308,7 @@ const jadwalkegiatanState = proxy({
   },
   delete: {
     loading: false,
-    async byId(id: string){
+    async byId(id: string) {
       try {
         jadwalkegiatanState.delete.loading = true;
         const res = await fetch(`/api/kesehatan/jadwal-kegiatan/del/${id}`, {
@@ -305,7 +327,7 @@ const jadwalkegiatanState = proxy({
       } finally {
         jadwalkegiatanState.delete.loading = false;
       }
-    }
+    },
   },
 });
 

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

@@ -23,7 +23,12 @@ type ProgramInovasiForm = Prisma.ProgramInovasiGetPayload<{
 
 const programInovasi = proxy({
   create: {
-    form: {} as ProgramInovasiForm,
+    form: {
+      name: "",
+      description: "",
+      imageId: "",
+      link: ""
+    } as ProgramInovasiForm,
     loading: false,
     async create() {
       // Ensure all required fields are non-null

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

@@ -72,7 +72,7 @@ const sdgsDesa = proxy({
         ].get({
           query,
         });
-  
+        
         if (res.status === 200 && res.data?.success) {
           sdgsDesa.findMany.data = res.data.data || [];
           sdgsDesa.findMany.total = res.data.total || 0;
@@ -94,7 +94,7 @@ const sdgsDesa = proxy({
     },
   },
   findUnique: {
-    data: null as Prisma.SDGSDesaGetPayload<{
+    data: null as Prisma.SdgsDesaGetPayload<{
       include: {
         image: true;
       };

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

@@ -90,6 +90,32 @@ const userState = proxy({
       }
     },
   },
+  updateActive: {
+    loading: false,
+    async submit(id: string, isActive: boolean) {
+      this.loading = true;
+      try {
+        const res = await fetch(`/api/user/updt`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ id, isActive }),
+        });
+
+        const data = await res.json();
+        if (res.status === 200 && data.success) {
+          toast.success(data.message);
+          userState.findMany.load(userState.findMany.page, 10, userState.findMany.search);
+        } else {
+          toast.error(data.message || "Gagal update status user");
+        }
+      } catch (e) {
+        console.error(e);
+        toast.error("Gagal update status user");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
 });
 
 const templateRole = z.object({

src/app/admin/(dashboard)/auth/login-admin/page.tsx

@@ -0,0 +1,111 @@
+'use client'
+import { apiFetchLogin } from '@/app/admin/auth/_lib/api_fetch_auth';
+import colors from '@/con/colors';
+import { Box, Button, Center, Flex, Image, Paper, Stack, Text, Title } from '@mantine/core';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { PhoneInput } from "react-international-phone";
+import "react-international-phone/style.css";
+import { toast } from 'react-toastify';
+
+
+
+function Login() {
+  const router = useRouter()
+  const [phone, setPhone] = useState("")
+  const [isError, setError] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  async function onLogin() {
+    const nomor = phone.substring(1);
+    if (nomor.length <= 4) return setError(true)
+
+
+    try {
+      setLoading(true);
+      const response = await apiFetchLogin({ nomor: nomor })
+      if (response && response.success) {
+        localStorage.setItem("hipmi_auth_code_id", response.kodeId);
+        toast.success(response.message);
+        router.push("/validasi", { scroll: false });
+      } else {
+        setLoading(false);
+        toast.error(response?.message);
+      }
+    } catch (error) {
+      setLoading(false)
+      console.log("Error Login", error)
+      toast.error("Terjadi kesalahan saat login")
+    }
+  }
+
+  return (
+    <Stack pos={"relative"} bg={colors.Bg}>
+      <Box px={{ base: 'md', md: 100 }} pb={50}>
+        <Stack align='center' justify='center' h={"100vh"}>
+          <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
+            <Stack align='center' gap={"lg"}>
+              <Box>
+                <Title ta={"center"} order={2} fw={'bold'} c={colors['blue-button']}>
+                  Login
+                </Title>
+                <Center>
+                  <Image src={"/darmasaba-icon.png"} alt="" w={80} />
+                </Center>
+              </Box>
+              <Box>
+              {/* <Box mb={10}>
+                <Text c={colors['blue-button']} ta={"center"} fz={"sm"} fw={'bold'}>Masuk Untuk Akses Admin</Text>
+                <TextInput
+                  label='Username'
+                  placeholder='Username'
+                  value={username}
+                  onChange={(e) => setUsername(e.target.value)}
+                  required
+                />
+              </Box> */}
+                <PhoneInput
+                  countrySelectorStyleProps={{
+                    buttonStyle: {
+                      backgroundColor: colors['blue-button'],
+                    },
+                  }}
+                  inputStyle={{ width: "100%"}}
+                  defaultCountry="id"
+                  onChange={(val) => {
+                    setPhone(val);
+                  }}
+                />
+
+                {isError ? (
+                  toast.error("Masukan nomor telepon anda")
+                ) : (
+                  ""
+                )}
+                <Box py={20} >
+                  <Button
+                    fullWidth
+                    bg={colors['blue-button']}
+                    radius={'xl'}
+                    onClick={onLogin}
+                    loading={loading ? true : false}
+                  >Masuk
+                  </Button>
+                </Box>
+                <Flex justify={'center'} align={'center'}>
+                  <Text>Belum punya akun? </Text>
+                  <Button variant='transparent' component={Link} href={'/registrasi'}>
+                    <Text c={colors['blue-button']} fw={'bold'}>Registrasi</Text>
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Login;

src/app/admin/(dashboard)/auth/registrasi-admin/page.tsx

@@ -0,0 +1,121 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+'use client'
+import { apiFetchRegister } from '@/app/admin/auth/_lib/api_fetch_auth';
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
+import { Box, Button, Center, Checkbox, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { PhoneInput } from "react-international-phone";
+import "react-international-phone/style.css";
+import { toast } from 'react-toastify';
+
+function Registrasi() {
+  const [phone, setPhone] = useState("")
+  const router = useRouter()
+  const [value, setValue] = useState("")
+  const [isValue, setIsValue] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  async function onRegistarsi() {
+    if (value.length < 5) {
+      toast.error("Username minimal 5 karakter!");
+      return;
+    }
+  
+    if (value.includes(" ")) {
+      toast.error("Username tidak boleh ada spasi!");
+      return;
+    }
+  
+    if (!phone) {
+      toast.error("Nomor telepon wajib diisi!");
+      return;
+    }
+    
+    try {
+      setLoading(true);
+      const respone = await apiFetchRegister({ nomor: phone, username: value });
+
+      if (respone.success) {
+        router.push("/login", { scroll: false });
+        toast.success(respone.message);
+
+      } else {
+        setLoading(false);
+        toast.error(respone.message);
+      }
+    } catch (error) {
+      setLoading(false);
+      console.log("Error Registrasi", error);
+    }
+  }
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} gap={"22"} py={"xl"} h={"100vh"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }}>
+        <Stack justify='center' align='center' h={"80vh"}>
+          <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
+            <Stack align='center'>
+              <Title order={2} fw={'bold'} c={colors['blue-button']}>
+                Registrasi
+              </Title>
+              <Center>
+                <Image src={"/darmasaba-icon.png"} alt="" w={80} />
+              </Center>
+              <Box>
+                <TextInput placeholder='Username'
+                  label='Username'
+                  maxLength={50}
+
+                  error={
+                    value.length > 0 && value.length < 5
+                      ? "Minimal 5 karakter !"
+                      : value.includes(" ")
+                      ? "Tidak boleh ada spasi"
+                      : isValue
+                      ? "Masukan username anda"
+                      : ""
+                  }
+                  onChange={(val) => {
+                    val.currentTarget.value.length > 0 ? setIsValue(false) : "";
+                    setValue(val.currentTarget.value);
+                  }}
+                  required
+
+                />
+                <Box py={10}>
+                  <Text fz={"sm"} >Nomor Telepon</Text>
+                  <PhoneInput
+                    countrySelectorStyleProps={{
+                      buttonStyle: {
+                        backgroundColor: colors['blue-button'],
+                      },
+                    }}
+                    inputStyle={{ width: "100%" }}
+                    defaultCountry="id"
+                    onChange={(val) => {
+                      setPhone(val);
+                    }}
+                  />
+                </Box>
+                <Box pb={10}>
+                  <Checkbox
+                    label="Saya menyetujui syarat dan ketentuan yang berlaku"
+                  />
+                </Box>
+                <Box pb={20} >
+                  <Button fullWidth bg={colors['blue-button']} radius={'xl'} onClick={onRegistarsi} loading={loading ? true : false}>Daftar</Button>
+                </Box>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Registrasi;

src/app/admin/(dashboard)/auth/validasi-admin/page.tsx

@@ -0,0 +1,38 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, PinInput, Stack, Text, Title } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+
+function Validasi() {
+  const router = useRouter()
+  return (
+    <Stack pos={"relative"} bg={colors.Bg}>
+      <Box px={{ base: 'md', md: 100 }} pb={50}>
+        <Stack align='center' justify='center' h={"100vh"}>
+          <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
+            <Stack align='center' gap={"lg"}>
+              <Box>
+                <Title ta={"center"} order={2} fw={'bold'} c={colors['blue-button']}>
+                  Kode Verifikasi
+                </Title>
+              </Box>
+              <Box>
+                <Box mb={10}>
+                  <Text c={colors['blue-button']} ta={"center"} fz={"sm"} fw={'bold'}>Masukkan Kode Verifikasi</Text>
+                  <PinInput type={/^[0-9]*$/} inputType="tel" inputMode="numeric" />
+                </Box>
+                <Box py={20} >
+                  <Button onClick={() => router.push("/admin/landing-page/profile/program-inovasi")}>
+                    Page
+                  </Button>
+                </Box>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Validasi;

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

@@ -140,7 +140,7 @@ function EditSuratKeterangan() {
           {/* Upload Gambar 1 */}
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
-              Gambar 1
+            Gambar Konten Pelayanan
             </Text>
             <Dropzone
               onDrop={(files) => {
@@ -196,7 +196,7 @@ function EditSuratKeterangan() {
           {/* Upload Gambar 2 */}
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
-              Gambar 2
+              Gambar Alur Pelayanan Surat
             </Text>
             <Dropzone
               onDrop={(files) => {

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

@@ -100,7 +100,7 @@ function DetailSuratKeterangan() {
 
               <Box>
                 <Text fz="lg" fw="bold">
-                  Gambar
+                Gambar Konten Pelayanan
                 </Text>
                 {data?.image?.link ? (
                   <Image
@@ -120,7 +120,7 @@ function DetailSuratKeterangan() {
 
               <Box>
                 <Text fz="lg" fw="bold">
-                  Gambar 2
+                Gambar Alur Pelayanan Surat
                 </Text>
                 {data?.image2?.link ? (
                   <Image

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

@@ -126,10 +126,10 @@ function CreateSuratKeterangan() {
             />
           </Box>
 
-          {/* Gambar Utama */}
+          {/* Gambar Konten Pelayanan */}
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
-              Gambar Utama
+              Gambar Konten Pelayanan
             </Text>
             <Dropzone
               onDrop={(files) => {
@@ -175,10 +175,10 @@ function CreateSuratKeterangan() {
             )}
           </Box>
 
-          {/* Gambar Tambahan */}
+          {/* Gambar Alur Pelayanan Surat */}
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
-              Gambar Tambahan (Opsional)
+              Gambar Alur Pelayanan Surat
             </Text>
             <Dropzone
               onDrop={(files) => {

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

@@ -11,15 +11,21 @@ import {
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
+  Tooltip,
 } from "@mantine/core";
-import { IconArrowBack, IconImageInPicture, IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
+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";
 
-
 import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
 import colors from "@/con/colors";
 import ApiFetch from "@/lib/api-fetch";
@@ -34,24 +40,24 @@ function EditKeamananLingkungan() {
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const [formData, setFormData] = useState({
-    name: keamananState.edit.form.name || '',
-    deskripsi: keamananState.edit.form.deskripsi || '',
-    imageId: keamananState.edit.form.imageId || ''
+    name: keamananState.edit.form.name || "",
+    deskripsi: keamananState.edit.form.deskripsi || "",
+    imageId: keamananState.edit.form.imageId || "",
   });
 
-  // Load berita by id saat pertama kali
+  // Load data by id
   useEffect(() => {
-    const loadBerita = async () => {
+    const loadData = async () => {
       const id = params?.id as string;
       if (!id) return;
 
       try {
-        const data = await keamananState.edit.load(id); // akses langsung, bukan dari proxy
+        const data = await keamananState.edit.load(id);
         if (data) {
           setFormData({
-            name: data.name || '',
-            deskripsi: data.deskripsi || '',
-            imageId: data.imageId || '',
+            name: data.name || "",
+            deskripsi: data.deskripsi || "",
+            imageId: data.imageId || "",
           });
 
           if (data?.image?.link) {
@@ -64,30 +70,29 @@ function EditKeamananLingkungan() {
       }
     };
 
-    loadBerita();
-  }, [params?.id]); // ✅ hapus beritaState dari dependency
+    loadData();
+  }, [params?.id]);
 
   const handleSubmit = async () => {
-
     try {
-      // Update global state with form data
       keamananState.edit.form = {
         ...keamananState.edit.form,
         name: formData.name,
         deskripsi: formData.deskripsi,
-        imageId: formData.imageId // Keep existing imageId if not changed
+        imageId: formData.imageId,
       };
 
-      // 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
         keamananState.edit.form.imageId = uploaded.id;
       }
 
@@ -101,36 +106,72 @@ function EditKeamananLingkungan() {
   };
 
   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 Keamanan Lingkungan</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 Keamanan Lingkungan
+        </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">
           <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
-            accept={{ 'image/*': [] }}
+            onReject={() => toast.error("File tidak valid.")}
+            maxSize={5 * 1024 ** 2}
+            accept={{ "image/*": [] }}
           >
-            <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+            <Group
+              justify="center"
+              gap="xl"
+              mih={220}
+              style={{ pointerEvents: "none" }}
+            >
               <Dropzone.Accept>
-                <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                <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} />
+                <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} />
+                <IconPhoto
+                  size={52}
+                  color="var(--mantine-color-dimmed)"
+                  stroke={1.5}
+                />
               </Dropzone.Idle>
 
               <div>
@@ -151,15 +192,21 @@ function EditKeamananLingkungan() {
               <IconImageInPicture />
             </Center>
           )}
+
           <TextInput
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Judul Keamanan Lingkungan</Text>}
-            placeholder="masukkan judul"
+            onChange={(e) =>
+              setFormData({ ...formData, name: e.target.value })
+            }
+            label="Judul Keamanan Lingkungan"
+            placeholder="Masukkan judul"
+            required
           />
 
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <Text fz="sm" fw="bold">
+              Deskripsi
+            </Text>
             <EditEditor
               value={formData.deskripsi}
               onChange={(htmlContent) => {
@@ -169,7 +216,20 @@ function EditKeamananLingkungan() {
             />
           </Box>
 
-          <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)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/page.tsx

@@ -1,9 +1,9 @@
 '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';
 
@@ -36,64 +36,95 @@ function DetailKeamananLingkungan() {
   if (!keamananState.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={40} />
+        <Skeleton height={500} radius="md" />
       </Stack>
     )
   }
 
+  const data = keamananState.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 Keamanan Lingkungan</Text>
-          {keamananState.findUnique.data ? (
-            <Paper key={keamananState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 490}} src={keamananState.findUnique.data?.image?.link} alt="gambar" />
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Judul Keamanan Lingkungan</Text>
-                  <Text fz={"lg"}>{keamananState.findUnique.data?.name}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: keamananState.findUnique.data?.deskripsi }} />
-                </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>
+
+      {/* Wrapper Detail */}
+      <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 Keamanan Lingkungan
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                <Image
+                  w={{ base: 150, md: 490 }}
+                  src={data?.image?.link}
+                  alt="gambar keamanan lingkungan"
+                />
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Judul Keamanan Lingkungan</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>
+
+              {/* Aksi */}
+              <Group gap="sm">
+                <Tooltip label="Hapus Data" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (keamananState.findUnique.data) {
-                        setSelectedId(keamananState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={keamananState.delete.loading || !keamananState.findUnique.data}
-                    color={"red"}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
-                    <IconX size={20} />
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Data" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (keamananState.findUnique.data) {
-                        router.push(`/admin/keamanan/keamanan-lingkungan-pecalang-patwal/${keamananState.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!keamananState.findUnique.data}
-                    color={"green"}
+                    color="green"
+                    onClick={() =>
+                      router.push(
+                        `/admin/keamanan/keamanan-lingkungan-pecalang-patwal/${data.id}/edit`
+                      )
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
@@ -102,10 +133,10 @@ function DetailKeamananLingkungan() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus keamanan lingkungan ini?'
+        text="Apakah anda yakin ingin menghapus keamanan lingkungan ini?"
       />
     </Box>
   );
 }
 
-export default DetailKeamananLingkungan;
+export default DetailKeamananLingkungan;

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

@@ -1,9 +1,25 @@
 '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 {
+  IconArrowBack,
+  IconPhoto,
+  IconUpload,
+  IconX,
+} from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
@@ -11,37 +27,36 @@ import { useProxy } from 'valtio/utils';
 import CreateEditor from '../../../_com/createEditor';
 import keamananLingkunganState from '../../../_state/keamanan/keamanan-lingkungan';
 
-
 function CreateKeamananLingkungan() {
-  const keamananState = useProxy(keamananLingkunganState)
+  const keamananState = useProxy(keamananLingkunganState);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const router = useRouter();
 
   const resetForm = () => {
     keamananState.create.form = {
-      name: "",
-      deskripsi: "",
-      imageId: "",
-    }
+      name: '',
+      deskripsi: '',
+      imageId: '',
+    };
     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({
       file,
       name: file.name,
-    })
+    });
 
     const uploaded = res.data?.data;
 
     if (!uploaded?.id) {
-      return toast.error("Gagal mengupload file");
+      return toast.error('Gagal mengupload file');
     }
 
     keamananState.create.form.imageId = uploaded.id;
@@ -49,86 +64,127 @@ function CreateKeamananLingkungan() {
     await keamananState.create.create();
 
     resetForm();
-    router.push("/admin/keamanan/keamanan-lingkungan-pecalang-patwal")
-  }
+    router.push('/admin/keamanan/keamanan-lingkungan-pecalang-patwal');
+  };
 
   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 */}
+      <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 Data Keamanan Lingkungan
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Keamanan Lingkungan</Title>
+      {/* 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">
+          {/* 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/*': [] }}
+            <Text fz="sm" fw="bold">
+              Gambar
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+            >
+              <Group
+                justify="center"
+                gap="xl"
+                mih={220}
+                style={{ pointerEvents: 'none' }}
               >
-                <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',
-                    }}
+                <Dropzone.Accept>
+                  <IconUpload
+                    size={52}
+                    color="var(--mantine-color-blue-6)"
+                    stroke={1.5}
                   />
-                </Box>
-              )}
+                </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>
 
-            </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>
+
+            {previewImage && (
+              <Box mt="sm">
+                <Image
+                  src={previewImage}
+                  alt="Preview"
+                  style={{
+                    maxWidth: '100%',
+                    maxHeight: '200px',
+                    objectFit: 'contain',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
+                  }}
+                />
+              </Box>
+            )}
           </Box>
+
+          {/* Input Nama */}
           <TextInput
             value={keamananState.create.form.name}
             onChange={(val) => {
               keamananState.create.form.name = val.target.value;
             }}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Keamanan Lingkungan</Text>}
-            placeholder='Masukkan nama Keamanan Lingkungan'
+            label={<Text fw="bold" fz="sm">Nama Keamanan Lingkungan</Text>}
+            placeholder="Masukkan nama Keamanan Lingkungan"
+            required
           />
+
+          {/* Input Deskripsi */}
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Keamanan Lingkungan</Text>
+            <Text fw="bold" fz="sm">
+              Deskripsi Keamanan Lingkungan
+            </Text>
             <CreateEditor
               value={keamananState.create.form.deskripsi}
               onChange={(val) => {
@@ -136,8 +192,21 @@ function CreateKeamananLingkungan() {
               }}
             />
           </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)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx

@@ -1,26 +1,46 @@
 '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 HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
-import { useRouter } from 'next/navigation';
-import { useProxy } from 'valtio/utils';
-import keamananLingkunganState from '../../_state/keamanan/keamanan-lingkungan';
+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, 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 keamananLingkunganState from '../../_state/keamanan/keamanan-lingkungan';
 
 function KeamananLingkungan() {
   const [search, setSearch] = useState("");
+
   return (
     <Box>
+      {/* Header Search */}
       <HeaderSearch
         title='Keamanan Lingkungan'
-        placeholder='pencarian'
+        placeholder='Cari nama atau deskripsi...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
+
       <ListKeamananLingkungan search={search} />
     </Box>
   );
@@ -47,54 +67,94 @@ function ListKeamananLingkungan({ 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'}>
-        <JudulList
-          title='List Keamanan Lingkungan'
-          href='/admin/keamanan/keamanan-lingkungan-pecalang-patwal/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama Keamanan Lingkungan</TableTh>
-              <TableTh>Deskripsi</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>
-                  <Box w={180}>
-                    <Text fz={"md"} truncate={"end"} lineClamp={1}>{item.name}</Text>
-                  </Box>
-                </TableTd>
-                <TableTd>
-                  <Box w={250}>
-                    <Text fz={"md"} truncate={"end"} lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                  </Box>
-                </TableTd>
-                <TableTd>
-                  <Button onClick={() => router.push(`/admin/keamanan/keamanan-lingkungan-pecalang-patwal/${item.id}`)}>
-                    <IconDeviceImac size={20} />
-                  </Button>
-                </TableTd>
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        {/* Judul + Tombol Tambah */}
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Keamanan Lingkungan</Title>
+          <Tooltip label="Tambah Data Keamanan" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() =>
+                router.push('/admin/keamanan/keamanan-lingkungan-pecalang-patwal/create')
+              }
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        {/* Tabel */}
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama</TableTh>
+                <TableTh>Deskripsi</TableTh>
+                <TableTh>Aksi</TableTh>
               </TableTr>
-            ))}
-          </TableTbody>
-        </Table>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.name}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="sm" c="dimmed" truncate lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/keamanan/keamanan-lingkungan-pecalang-patwal/${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 keamanan lingkungan yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+
+      {/* Pagination */}
       <Center>
         <Pagination
           value={page}
-          onChange={(newPage) => load(newPage)}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
           total={totalPages}
-          my={"md"}
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>

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

@@ -1,117 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image, Skeleton } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
-import { useRouter,useParams } from 'next/navigation';
-import React from 'react';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-import { useProxy } from 'valtio/utils';
-import kontakDaruratKeamananState from '../../../_state/keamanan/kontak-darurat-keamanan';
-import { useShallowEffect } from '@mantine/hooks';
-import { useState } from 'react';
-import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailKontakDarurat() {
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const router = useRouter();
-  const params = useParams()
-  const kontakState = useProxy(kontakDaruratKeamananState)
-
-  useShallowEffect(() => {
-    kontakState.findUnique.load(params?.id as string)
-  }, [])
-
-  const handleDelete = () => {
-    if (selectedId) {
-      kontakState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/keamanan/kontak-darurat")
-    }
-  }
-
-  if (!kontakState.findUnique.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={40} />
-      </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 Kontak Darurat</Text>
-        {kontakState.findUnique.data ? (
-          <Paper key={kontakState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fw={"bold"} fz={"lg"}>Judul Kontak Darurat</Text>
-                <Text fz={"lg"}>{kontakState.findUnique.data?.nama}</Text>
-              </Box>
-              <Box>
-                <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                <Image w={{ base: 150, md: 150, lg: 150 }} src={kontakState.findUnique.data?.image?.link} alt="gambar" />
-              </Box>
-              <Box>
-                <Text fw={"bold"} fz={"lg"}>Kontak</Text>
-                <Stack>
-                  {kontakState.findUnique.data?.kontakItems.map((item, index) => (
-                    <Box key={index}>
-                      <Text fz={"lg"}>{item.nama}</Text>
-                      <Text fz={"lg"}>{item.nomorTelepon}</Text>
-                      <Image w={{ base: 150, md: 150, lg: 150 }} src={item.image?.link} alt="gambar" />
-                    </Box>
-                  ))}
-                </Stack>
-              </Box>
-              <Flex gap={"xs"} mt={10}>
-                <Button
-                  onClick={() => {
-                    if (kontakState.findUnique.data) {
-                      setSelectedId(kontakState.findUnique.data.id);
-                      setModalHapus(true);
-                    }
-                  }}
-                  disabled={kontakState.delete.loading || !kontakState.findUnique.data}
-                  color={"red"}
-                >
-                  <IconX size={20} />
-                </Button>
-                <Button
-                  onClick={() => {
-                    if (kontakState.findUnique.data) {
-                      router.push(`/admin/keamanan/kontak-darurat/${kontakState.findUnique.data.id}/edit`);
-                    }
-                  }}
-                  disabled={!kontakState.findUnique.data}
-                  color={"green"}
-                >
-                  <IconEdit size={20} />
-                </Button>
-              </Flex>
-            </Stack>
-          </Paper>
-        ) : null}
-      </Stack>
-    </Paper>
-
-    {/* Modal Konfirmasi Hapus */}
-    <ModalKonfirmasiHapus
-      opened={modalHapus}
-      onClose={() => setModalHapus(false)}
-      onConfirm={handleDelete}
-      text='Apakah anda yakin ingin menghapus kontak darurat ini?'
-    />
-  </Box>
-  );
-}
-
-export default DetailKontakDarurat;

src/app/admin/(dashboard)/keamanan/kontak-darurat/_lib/layoutTabs.tsx

@@ -0,0 +1,105 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { IconPhone, IconTag } from '@tabler/icons-react';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabs({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const tabs = [
+    {
+      label: "Kontak Darurat Keamanan",
+      value: "kontak-darurat-keamanan",
+      href: "/admin/keamanan/kontak-darurat/kontak-darurat-keamanan",
+      icon: <IconPhone size={18} stroke={1.8} />,
+      tooltip: "Lihat dan kelola kontak darurat keamanan",
+    },
+    {
+      label: "Kontak Darurat Item",
+      value: "kontak-darurat-item",
+      href: "/admin/keamanan/kontak-darurat/kontak-darurat-item",
+      icon: <IconTag size={18} stroke={1.8} />,
+      tooltip: "Kelola data kontak darurat item",
+    }
+  ];
+
+  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]);
+
+  return (
+    <Stack gap="lg">
+      <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+        Kontak Darurat
+      </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}
+          </TabsPanel>
+        ))}
+      </Tabs>
+    </Stack>
+  );
+}
+
+export default LayoutTabs;

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

@@ -1,237 +0,0 @@
-'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 { Dropzone } from '@mantine/dropzone';
-import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
-import kontakDaruratKeamananState from '../../../_state/keamanan/kontak-darurat-keamanan';
-
-
-function CreateKontakDarurat() {
-  const kontakState = useProxy(kontakDaruratKeamananState)
-  const router = useRouter();
-  const [fileUtama, setFileUtama] = useState<File | null>(null);
-  const [previewUtama, setPreviewUtama] = useState<string | null>(null);
-  const [fileItem, setFileItem] = useState<File | null>(null);
-  const [previewItem, setPreviewItem] = useState<string | null>(null);
-
-
-  const resetForm = () => {
-    kontakState.create.form = {
-      nama: "",
-      imageId: "",
-      kontakItems: [
-        {
-          nama: "",
-          nomorTelepon: "",
-          imageId: "",
-        },
-      ],
-    }
-    setPreviewUtama(null);
-    setFileUtama(null);
-    setPreviewItem(null);
-    setFileItem(null);
-  }
-
-  const handleSubmit = async () => {
-    if (!fileUtama) {
-      return toast.warn("Pilih file gambar terlebih dahulu");
-    }
-
-    const res = await ApiFetch.api.fileStorage.create.post({
-      file: fileUtama,
-      name: fileUtama.name,
-    })
-
-    const uploaded = res.data?.data;
-
-    if (!uploaded?.id) {
-      return toast.error("Gagal mengupload file");
-    }
-
-    kontakState.create.form.imageId = uploaded.id;
-
-    if (!fileItem) {
-      return toast.error("Pilih file gambar terlebih dahulu");
-    }
-
-    const resItem = await ApiFetch.api.fileStorage.create.post({
-      file: fileItem,
-      name: fileItem.name,
-    })
-
-    const uploadedItem = resItem.data?.data;
-
-    if (!uploadedItem?.id) {
-      return toast.error("Gagal mengupload file");
-    }
-
-    kontakState.create.form.kontakItems[0].imageId = uploadedItem.id;
-
-    await kontakState.create.create();
-
-    resetForm();
-    router.push('/admin/keamanan/kontak-darurat');
-  }
-  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 Kontak Darurat</Title>
-          <TextInput
-            value={kontakState.create.form.nama}
-            onChange={(val) => {
-              kontakState.create.form.nama = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Darurat</Text>}
-            placeholder='Masukkan nama Kategori Darurat'
-          />
-          <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFileUtama(selectedFile);
-                    setPreviewUtama(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 */}
-              {previewUtama && (
-                <Box mt="sm">
-                  <Image
-                    src={previewUtama}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-
-            </Box>
-          </Box>
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nama Kontak</Text>}
-            placeholder='Masukkan nama Kontak'
-            value={kontakState.create.form.kontakItems[0].nama}
-            onChange={(val) => {
-              kontakState.create.form.kontakItems[0].nama = val.target.value;
-            }}
-          />
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon Kontak</Text>}
-            placeholder='Masukkan nomor telepon Kontak'
-            value={kontakState.create.form.kontakItems[0].nomorTelepon}
-            onChange={(val) => {
-              kontakState.create.form.kontakItems[0].nomorTelepon = val.target.value;
-            }}
-          />
-          <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFileItem(selectedFile);
-                    setPreviewItem(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 */}
-              {previewItem && (
-                <Box mt="sm">
-                  <Image
-                    src={previewItem}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-
-            </Box>
-          </Box>
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default CreateKontakDarurat;

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

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import kontakDaruratKeamananState from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
+import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
 import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
@@ -12,23 +12,17 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 
-function EditKontakDarurat() {
+function EditKontakItem() {
   const router = useRouter();
-  const kontakState = useProxy(kontakDaruratKeamananState)
+  const kontakState = useProxy(kontakDarurat.kontakDaruratItem)
   const params = useParams()
 
   const [previewUtama, setPreviewUtama] = useState<string | null>(null);
   const [fileUtama, setFileUtama] = useState<File | null>(null);
-  const [previewItem, setPreviewItem] = useState<string | null>(null);
-  const [fileItem, setFileItem] = useState<File | null>(null);
   const [formData, setFormData] = useState({
     name: kontakState.update.form.nama || '',
     imageId: kontakState.update.form.imageId || '',
-    kontakItem: {
-      nama: kontakState.update.form.kontakItems[0].nama || '',
-      nomorTelepon: kontakState.update.form.kontakItems[0].nomorTelepon || '',
-      imageId: kontakState.update.form.kontakItems[0].imageId || '',
-    }
+    nomorTelepon: kontakState.update.form.nomorTelepon || '',
   })
 
   useEffect(() => {
@@ -42,19 +36,12 @@ function EditKontakDarurat() {
           setFormData({
             name: data.nama || '',
             imageId: data.imageId || '',
-            kontakItem: {
-              nama: data.kontakItems[0].nama || '',
-              nomorTelepon: data.kontakItems[0].nomorTelepon || '',
-              imageId: data.kontakItems[0].imageId || '',
-            },
+            nomorTelepon: data.nomorTelepon || '',
           });
 
           if (data?.image?.link) {
             setPreviewUtama(data.image.link);
           }
-          if (data?.kontakItems[0].image?.link) {
-            setPreviewItem(data.kontakItems[0].image.link);
-          }
         }
       } catch (error) {
         console.error("Error loading kontak darurat:", error);
@@ -71,16 +58,10 @@ function EditKontakDarurat() {
         ...kontakState.update.form,
         nama: formData.name,
         imageId: formData.imageId,
-        kontakItems: [
-          {
-            nama: formData.kontakItem.nama,
-            nomorTelepon: formData.kontakItem.nomorTelepon,
-            imageId: formData.kontakItem.imageId,
-          },
-        ],
+        nomorTelepon: formData.nomorTelepon,
       }
 
-      if(fileUtama) {
+      if (fileUtama) {
         const res = await ApiFetch.api.fileStorage.create.post({ file: fileUtama, name: fileUtama.name });
         const uploaded = res.data?.data;
 
@@ -90,20 +71,10 @@ function EditKontakDarurat() {
 
         kontakState.update.form.imageId = uploaded.id;
       }
-      if(fileItem) {
-        const res = await ApiFetch.api.fileStorage.create.post({ file: fileItem, name: fileItem.name });
-        const uploaded = res.data?.data;
-
-        if (!uploaded?.id) {
-          return toast.error("Gagal upload gambar");
-        }
-
-        kontakState.update.form.kontakItems[0].imageId = uploaded.id;
-      }
 
       await kontakState.update.update();
       toast.success("Kontak Darurat berhasil diperbarui!");
-      router.push("/admin/keamanan/kontak-darurat");
+      router.push("/admin/keamanan/kontak-darurat/kontak-darurat-item");
     } catch (error) {
       console.error("Error updating kontak darurat:", error);
       toast.error("Terjadi kesalahan saat memperbarui kontak darurat");
@@ -126,8 +97,16 @@ function EditKontakDarurat() {
             onChange={(val) => {
               setFormData({ ...formData, name: val.target.value });
             }}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Darurat</Text>}
-            placeholder='Masukkan nama Kategori Darurat'
+            label={<Text fw={"bold"} fz={"sm"}>Nama Kontak</Text>}
+            placeholder='Masukkan nama Kontak'
+          />
+          <TextInput
+            value={formData.nomorTelepon}
+            onChange={(val) => {
+              setFormData({ ...formData, nomorTelepon: val.target.value });
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon</Text>}
+            placeholder='Masukkan nomor telepon'
           />
           <Box>
             <Text fz={"md"} fw={"bold"}>Gambar</Text>
@@ -185,78 +164,6 @@ function EditKontakDarurat() {
 
             </Box>
           </Box>
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nama Kontak</Text>}
-            placeholder='Masukkan nama Kontak'
-            value={formData.kontakItem.nama}
-            onChange={(val) => {
-              setFormData({ ...formData, kontakItem: { ...formData.kontakItem, nama: val.target.value } });
-            }}
-          />
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon Kontak</Text>}
-            placeholder='Masukkan nomor telepon Kontak'
-            value={formData.kontakItem.nomorTelepon}
-            onChange={(val) => {
-              setFormData({ ...formData, kontakItem: { ...formData.kontakItem, nomorTelepon: val.target.value } });
-            }}
-          />
-          <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFileItem(selectedFile);
-                    setPreviewItem(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 */}
-              {previewItem && (
-                <Box mt="sm">
-                  <Image
-                    src={previewItem}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-
-            </Box>
-          </Box>
           <Group>
             <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
           </Group>
@@ -266,4 +173,4 @@ function EditKontakDarurat() {
   );
 }
 
-export default EditKontakDarurat;
+export default EditKontakItem;

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

@@ -0,0 +1,154 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
+import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function DetailKontakDarurat() {
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const router = useRouter();
+  const params = useParams();
+  const kontakState = useProxy(kontakDarurat.kontakDaruratItem);
+
+  useShallowEffect(() => {
+    kontakState.findUnique.load(params?.id as string);
+  }, []);
+
+  const handleDelete = () => {
+    if (selectedId) {
+      kontakState.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/keamanan/kontak-darurat/kontak-darurat-item");
+    }
+  };
+
+  if (!kontakState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={500} radius="md" />
+      </Stack>
+    );
+  }
+
+  const data = kontakState.findUnique.data;
+
+  return (
+    <Box py={10}>
+      {/* Tombol Back */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Wrapper Detail */}
+      <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 Kontak Darurat
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              {/* Judul */}
+              <Box>
+                <Text fz="lg" fw="bold">Judul Kontak Darurat</Text>
+                <Text fz="md" c="dimmed">{data?.nama || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Judul Kontak Darurat</Text>
+                <Text fz="md" c="dimmed">{data?.nama || '-'}</Text>
+              </Box>
+
+              {/* Gambar Utama */}
+              <Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                <Image
+                  w={{ base: 150, md: 490 }}
+                  src={data?.image?.link}
+                  alt="gambar kontak darurat"
+                />
+              </Box>
+
+              {/* Kontak Item */}
+              <Box>
+                <Text fz="lg" fw="bold">Kontak</Text>
+                <Stack>
+                  <Box>
+                    <Text fz="md" fw="bold">{data.nama}</Text>
+                    <Text fz="md" c="dimmed">{data.nomorTelepon}</Text>
+                    {data.image?.link && (
+                      <Image
+                        w={{ base: 120, md: 200 }}
+                        src={data.image.link}
+                        alt={`gambar kontak ${data.nama}`}
+                      />
+                    )}
+                  </Box>
+                </Stack>
+              </Box>
+
+              {/* Aksi */}
+              <Group gap="sm">
+                <Tooltip label="Hapus Data" 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 Data" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() => router.push(`/admin/keamanan/kontak-darurat/${data.id}/edit`)}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text="Apakah anda yakin ingin menghapus kontak darurat ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailKontakDarurat;

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

@@ -0,0 +1,194 @@
+'use client'
+import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+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';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function CreateKontakItem() {
+  const kontakState = useProxy(kontakDarurat.kontakDaruratItem);
+  const router = useRouter();
+
+  const [fileUtama, setFileUtama] = useState<File | null>(null);
+  const [previewUtama, setPreviewUtama] = useState<string | null>(null);
+
+  const resetForm = () => {
+    kontakState.create.form = {
+      nama: '',
+      imageId: '',
+      nomorTelepon: '',
+    };
+    setPreviewUtama(null);
+    setFileUtama(null);
+  };
+
+  const handleSubmit = async () => {
+    if (!fileUtama) {
+      return toast.warn('Pilih file gambar kategori terlebih dahulu');
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file: fileUtama,
+      name: fileUtama.name,
+    });
+
+    const uploaded = res.data?.data;
+    if (!uploaded?.id) {
+      return toast.error('Gagal mengupload gambar kategori');
+    }
+    kontakState.create.form.imageId = uploaded.id;
+
+    await kontakState.create.create();
+    resetForm();
+    router.push('/admin/keamanan/kontak-darurat/kontak-darurat-item');
+  };
+
+  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 Kontak Darurat Item
+        </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">
+          {/* Input Nama Kategori */}
+          <TextInput
+            value={kontakState.create.form.nama}
+            onChange={(val) => {
+              kontakState.create.form.nama = val.target.value;
+            }}
+            label={<Text fw="bold" fz="sm">Nama Kontak Darurat</Text>}
+            placeholder="Masukkan nama kontak darurat"
+            required
+          />
+
+          <TextInput
+            label={<Text fw="bold" fz="sm">Nomor Telepon Kontak</Text>}
+            placeholder="Masukkan nomor telepon"
+            value={kontakState.create.form.nomorTelepon}
+            onChange={(val) => {
+              kontakState.create.form.nomorTelepon = val.target.value;
+            }}
+            required
+          />
+
+          {/* Upload Gambar Kategori */}
+          <Box>
+            <Text fz="sm" fw="bold">
+              Gambar Kontak Darurat
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFileUtama(selectedFile);
+                  setPreviewUtama(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2}
+              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>
+            {previewUtama && (
+              <Box mt="sm">
+                <Image
+                  src={previewUtama}
+                  alt="Preview"
+                  style={{
+                    maxWidth: '100%',
+                    maxHeight: '200px',
+                    objectFit: 'contain',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
+                  }}
+                />
+              </Box>
+            )}
+          </Box>
+
+
+          {/* 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>
+    </Box>
+  );
+}
+
+export default CreateKontakItem;

src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/page.tsx

@@ -0,0 +1,165 @@
+'use client'
+import colors from '@/con/colors';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+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 kontakDarurat from '../../../_state/keamanan/kontak-darurat-keamanan';
+
+
+function KontakItem() {
+  const [search, setSearch] = useState("");
+
+  return (
+    <Box>
+      {/* Header Search */}
+      <HeaderSearch
+        title='Kontak Darurat Item'
+        placeholder='Cari kontak item, nama, atau nomor...'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+
+      <ListKontakItem search={search} />
+    </Box>
+  );
+}
+
+function ListKontakItem({ search }: { search: string }) {
+  const kontakState = useProxy(kontakDarurat.kontakDaruratItem);
+  const router = useRouter();
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = kontakState.findMany;
+
+  useShallowEffect(() => {
+    load(page, 10, search);
+  }, [page, search]);
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
+    );
+  }
+
+  return (
+    <Box py={10}>
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        {/* Judul + Tombol Tambah */}
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Kontak Darurat Item</Title>
+          <Tooltip label="Tambah Kontak Item" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/keamanan/kontak-darurat/kontak-darurat-item/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        {/* Tabel */}
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama Kontak</TableTh>
+                <TableTh>Nomor Telepon</TableTh>
+                <TableTh>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.nama}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="sm" c="dimmed">
+                        {item.nomorTelepon || "-"}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/keamanan/kontak-darurat/kontak-darurat-item/${item.id}`)}
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">
+                        Tidak ada data kontak darurat item yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
+      </Paper>
+
+      {/* Pagination */}
+      <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>
+    </Box>
+  );
+}
+
+export default KontakItem;

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

@@ -0,0 +1,227 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
+import kontakDarurat from "@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan";
+import colors from "@/con/colors";
+import ApiFetch from "@/lib/api-fetch";
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Image,
+  MultiSelect,
+  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 { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { useProxy } from "valtio/utils";
+
+function EditKontakDaruratKeamanan() {
+  const router = useRouter();
+  const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
+  const params = useParams();
+
+  const [previewUtama, setPreviewUtama] = useState<string | null>(null);
+  const [fileUtama, setFileUtama] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    name: kontakState.update.form.nama || "",
+    imageId: kontakState.update.form.imageId || "",
+    kategoriId: kontakState.update.form.kategoriId || [],
+  });
+
+  // Load data
+  useEffect(() => {
+    kontakDarurat.kontakDaruratItem.findMany.load();
+    const loadKontakDarurat = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await kontakState.update.load(id);
+        if (data) {
+          setFormData({
+            name: data.nama || "",
+            imageId: data.imageId || "",
+            kategoriId: data.kategoriId || [],
+          });
+
+          if (data?.image?.link) setPreviewUtama(data.image.link);
+        }
+      } catch (error) {
+        console.error("Error loading kontak darurat:", error);
+        toast.error("Gagal memuat data kontak darurat");
+      }
+    };
+
+    loadKontakDarurat();
+  }, [params?.id]);
+
+  // Handle submit
+  const handleSubmit = async () => {
+    try {
+      kontakState.update.form = {
+        ...kontakState.update.form,
+        nama: formData.name,
+        imageId: formData.imageId,
+        kategoriId: formData.kategoriId,
+      };
+
+      if (fileUtama) {
+        const res = await ApiFetch.api.fileStorage.create.post({
+          file: fileUtama,
+          name: fileUtama.name,
+        });
+        const uploaded = res.data?.data;
+        if (!uploaded?.id) return toast.error("Gagal upload gambar utama");
+        kontakState.update.form.imageId = uploaded.id;
+      }
+
+      await kontakState.update.update();
+      toast.success("Kontak Darurat berhasil diperbarui!");
+      router.push("/admin/keamanan/kontak-darurat");
+    } catch (error) {
+      console.error("Error updating kontak darurat:", error);
+      toast.error("Terjadi kesalahan saat memperbarui kontak darurat");
+    }
+  };
+
+  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">
+          Edit Kontak Darurat Keamanan
+        </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 kategori */}
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label="Nama Kontak Darurat"
+            placeholder="Masukkan nama kontak darurat"
+            required
+          />
+
+          <MultiSelect
+            value={formData.kategoriId}
+            onChange={(val) => setFormData({ ...formData, kategoriId: val })}
+            label={<Text fw={"bold"} fz={"sm"}>Kontak Item</Text>}
+            placeholder='Pilih kontak item'
+            data={
+              kontakDarurat.kontakDaruratItem.findMany.data?.map((v) => ({
+                value: v.id,  // Make sure this is using the ID
+                label: v.nama
+              })) || []
+            }
+            clearable
+            searchable
+            required
+            error={!formData.kategoriId.length ? "Pilih minimal satu kategori" : undefined}
+          />
+
+          {/* Gambar utama */}
+          <Box>
+            <Text fz="sm" fw="bold">
+              Masukkan Gambar
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFileUtama(selectedFile);
+                  setPreviewUtama(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error("File tidak valid.")}
+              maxSize={5 * 1024 ** 2}
+              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>
+
+            {previewUtama ? (
+              <Image alt="" src={previewUtama} w={200} h={200} mt="sm" />
+            ) : (
+              <Center w={200} h={200} bg={"gray"} mt="sm">
+                <IconImageInPicture />
+              </Center>
+            )}
+          </Box>
+
+          {/* 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>
+  );
+}
+
+export default EditKontakDaruratKeamanan;

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

@@ -0,0 +1,152 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
+import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function DetailKontakDaruratKeamanan() {
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const router = useRouter();
+  const params = useParams();
+  const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
+
+  useShallowEffect(() => {
+    kontakDarurat.kontakDaruratItem.findUnique.load(params?.id as string);
+    kontakState.findUnique.load(params?.id as string);
+  }, []);
+
+  const handleDelete = () => {
+    if (selectedId) {
+      kontakState.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/keamanan/kontak-darurat/kontak-darurat-keamanan");
+    }
+  };
+
+  if (!kontakState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={500} radius="md" />
+      </Stack>
+    );
+  }
+
+  const data = kontakState.findUnique.data;
+
+  return (
+    <Box py={10}>
+      {/* Tombol Back */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Wrapper Detail */}
+      <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 Kontak Darurat Keamanan
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              {/* Judul */}
+              <Box>
+                <Text fz="lg" fw="bold">Judul Kontak Darurat</Text>
+                <Text fz="md" c="dimmed">{data?.nama || '-'}</Text>
+              </Box>
+
+              {/* Gambar Utama */}
+              <Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                <Image
+                  w={{ base: 150, md: 490 }}
+                  src={data?.image?.link}
+                  alt="gambar kontak darurat"
+                />
+              </Box>
+
+              {/* Kontak Items */}
+              <Box>
+                <Text fz="lg" fw="bold">Kontak</Text>
+                <Stack>
+                  {data?.kontakItems.map((item, index) => (
+                    <Box key={index}>
+                      <Text fz="md" fw="bold">{item.kontakItem.nama}</Text>
+                      <Text fz="md" c="dimmed">{item.kontakItem.nomorTelepon}</Text>
+                      {item.kontakItem.image?.link && (
+                        <Image
+                          w={{ base: 120, md: 200 }}
+                          src={item.kontakItem.image.link}
+                          alt={`gambar kontak`}
+                        />
+                      )}
+                    </Box>
+                  ))}
+                </Stack>
+              </Box>
+
+              {/* Aksi */}
+              <Group gap="sm">
+                <Tooltip label="Hapus Data" 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 Data" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() => router.push(`/admin/keamanan/kontak-darurat/kontak-darurat-keamanan/${data.id}/edit`)}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text="Apakah anda yakin ingin menghapus kontak darurat ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailKontakDaruratKeamanan;

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

@@ -0,0 +1,204 @@
+'use client'
+import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  MultiSelect,
+  Paper,
+  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';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function CreateKontakDaruratKeamanan() {
+  const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
+  const router = useRouter();
+
+  const [fileUtama, setFileUtama] = useState<File | null>(null);
+  const [previewUtama, setPreviewUtama] = useState<string | null>(null);
+
+  useShallowEffect(() => {
+    kontakDarurat.kontakDaruratItem.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    kontakState.create.form = {
+      nama: '',
+      imageId: '',
+      kategoriId: []
+    };
+    setPreviewUtama(null);
+    setFileUtama(null);
+  };
+
+  const handleSubmit = async () => {
+    if (!fileUtama) {
+      return toast.warn('Pilih file gambar kategori terlebih dahulu');
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file: fileUtama,
+      name: fileUtama.name,
+    });
+
+    const uploaded = res.data?.data;
+    if (!uploaded?.id) {
+      return toast.error('Gagal mengupload gambar kategori');
+    }
+    kontakState.create.form.imageId = uploaded.id;
+
+    await kontakState.create.create();
+    resetForm();
+    router.push('/admin/keamanan/kontak-darurat/kontak-darurat-keamanan');
+  };
+
+  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 Kontak Darurat Keamanan
+        </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">
+          {/* Input Nama Kategori */}
+          <TextInput
+            value={kontakState.create.form.nama}
+            onChange={(val) => {
+              kontakState.create.form.nama = val.target.value;
+            }}
+            label={<Text fw="bold" fz="sm">Nama Kategori Darurat</Text>}
+            placeholder="Masukkan nama kategori darurat"
+            required
+          />
+
+          {/* Upload Gambar Kategori */}
+          <Box>
+            <Text fz="sm" fw="bold">
+              Masukkan Gambar
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFileUtama(selectedFile);
+                  setPreviewUtama(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2}
+              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>
+            {previewUtama && (
+              <Box mt="sm">
+                <Image
+                  src={previewUtama}
+                  alt="Preview"
+                  style={{
+                    maxWidth: '100%',
+                    maxHeight: '200px',
+                    objectFit: 'contain',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
+                  }}
+                />
+              </Box>
+            )}
+          </Box>
+
+          <MultiSelect
+            value={kontakState.create.form.kategoriId}
+            onChange={(val) => {
+              kontakState.create.form.kategoriId = val;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Kontak Item</Text>}
+            placeholder='Pilih kontak item'
+            data={
+              kontakDarurat.kontakDaruratItem.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.nama
+              })) || []
+            }
+          />
+
+          {/* 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>
+    </Box>
+  );
+}
+
+export default CreateKontakDaruratKeamanan;

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

@@ -0,0 +1,171 @@
+'use client'
+import colors from '@/con/colors';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+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 kontakDarurat from '../../../_state/keamanan/kontak-darurat-keamanan';
+
+function KontakDaruratKeamanan() {
+  const [search, setSearch] = useState("");
+
+  return (
+    <Box>
+      {/* Header Search */}
+      <HeaderSearch
+        title='Kontak Darurat Keamanan'
+        placeholder='Cari kontak darurat, nama, atau nomor...'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+
+      <ListKontakDaruratKeamanan search={search} />
+    </Box>
+  );
+}
+
+function ListKontakDaruratKeamanan({ search }: { search: string }) {
+  const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
+  const router = useRouter();
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = kontakState.findMany;
+
+  useShallowEffect(() => {
+    load(page, 10, search);
+    kontakDarurat.kontakDaruratItem.findMany.load();
+  }, [page, search]);
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
+    );
+  }
+
+  return (
+    <Box py={10}>
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        {/* Judul + Tombol Tambah */}
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Kontak Darurat Keamanan</Title>
+          <Tooltip label="Tambah Kontak Darurat Keamanan" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/keamanan/kontak-darurat/kontak-darurat-keamanan/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        {/* Tabel */}
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>Kontak Darurat</TableTh>
+                <TableTh>Nama Kontak</TableTh>
+                <TableTh>Nomor Telepon</TableTh>
+                <TableTh>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.nama}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="sm" c="dimmed" truncate lineClamp={1}>
+                        {item.kategori?.nama}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="sm" c="dimmed">
+                        {item.kategori?.nomorTelepon || "-"}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/keamanan/kontak-darurat/kontak-darurat-keamanan/${item.id}`)}
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">
+                        Tidak ada data kontak darurat keamanan yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
+      </Paper>
+
+      {/* Pagination */}
+      <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>
+    </Box>
+  );
+}
+
+export default KontakDaruratKeamanan;

src/app/admin/(dashboard)/keamanan/kontak-darurat/layout.tsx

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

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

@@ -1,89 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
-import HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
-import { useRouter } from 'next/navigation';
-import { useProxy } from 'valtio/utils';
-import kontakDaruratKeamananState from '../../_state/keamanan/kontak-darurat-keamanan';
-import { useShallowEffect } from '@mantine/hooks';
-import { useState } from 'react';
-
-function KontakDaurat() {
-  const [search, setSearch] = useState("");
-  return (
-    <Box>
-      <HeaderSearch
-        title='Kontak Darurat'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListKontakDaurat search={search}/>
-    </Box>
-  );
-}
-
-function ListKontakDaurat({ search }: { search: string }) {
-  const kontakState = useProxy(kontakDaruratKeamananState)
-  const router = useRouter();
-
-  useShallowEffect(() => {
-    kontakState.findMany.load()
-  }, [])
-
-  const filteredData = (kontakState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.nama.toLowerCase().includes(keyword) ||
-      item.kontakItems[0].nama.toLowerCase().includes(keyword) ||
-      item.kontakItems[0].nomorTelepon.toLowerCase().includes(keyword)
-    );
-  });
-
-  if (!kontakState.findMany.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={500} />
-      </Stack>
-    )
-  }
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Kontak Darurat'
-          href='/admin/keamanan/kontak-darurat/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama Kategori Darurat</TableTh>
-              <TableTh>Nama Kontak</TableTh>
-              <TableTh>Nomor Kontak</TableTh>
-              <TableTh>Detail</TableTh>
-              </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>{item.nama}</TableTd>
-                <TableTd>{item.kontakItems[0].nama}</TableTd>
-                <TableTd>{item.kontakItems[0].nomorTelepon}</TableTd>
-                <TableTd>
-                  <Button onClick={() => router.push(`/admin/keamanan/kontak-darurat/${item.id}`)}>
-                    <IconDeviceImac size={20} />
-                  </Button>
-                </TableTd>
-              </TableTr>
-            ))}
-          </TableTbody>
-        </Table>  
-      </Paper>
-    </Box>
-  );
-}
-
-export default KontakDaurat;

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

@@ -1,9 +1,26 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import {
+  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 HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import pencegahanKriminalitasState from '../../_state/keamanan/pencegahan-kriminalitas';
@@ -12,16 +29,19 @@ import { useState } from 'react';
 
 function PencegahanKriminalitas() {
   const [search, setSearch] = useState("");
+
   return (
     <Box>
+      {/* Header Search */}
       <HeaderSearch
         title='Pencegahan Kriminalitas'
-        placeholder='pencarian'
+        placeholder='Cari nama, slug, atau deskripsi...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListPencegahanKriminalitas search={search}/>
+
+      <ListPencegahanKriminalitas search={search} />
     </Box>
   );
 }
@@ -30,11 +50,19 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
   const kriminalitasState = useProxy(pencegahanKriminalitasState)
   const router = useRouter();
 
-  useShallowEffect(() => {
-    kriminalitasState.findMany.load()
-  }, [])
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = kriminalitasState.findMany;
 
-  const filteredData = (kriminalitasState.findMany.data || []).filter(item => {
+  useShallowEffect(() => {
+    load(page, 10, search);
+  }, [page, search]);
+
+  const filteredData = (data || []).filter(item => {
     const keyword = search.toLowerCase();
     return (
       item.programKeamanan.nama.toLowerCase().includes(keyword) ||
@@ -43,48 +71,111 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
     );
   });
 
-  if (!kriminalitasState.findMany.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 Pencegahan Kriminalitas'
-          href='/admin/keamanan/pencegahan-kriminalitas/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama Pencegahan Kriminalitas</TableTh>
-              <TableTh>Slug</TableTh>
-              <TableTh>Deskripsi</TableTh>
-              <TableTh>Detail</TableTh>
+    <Box py={10}>
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        {/* Judul + Tombol Tambah */}
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Pencegahan Kriminalitas</Title>
+          <Tooltip label="Tambah Program Pencegahan" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/keamanan/pencegahan-kriminalitas/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        {/* Tabel */}
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama Pencegahan</TableTh>
+                <TableTh>Slug</TableTh>
+                <TableTh>Deskripsi</TableTh>
+                <TableTh>Aksi</TableTh>
               </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>{item.programKeamanan.nama}</TableTd>
-                <TableTd>{item.programKeamanan.slug}</TableTd>
-                <TableTd>
-                  <Text fz={'sm'} dangerouslySetInnerHTML={{__html: item.programKeamanan.deskripsi || ''}} />
-                </TableTd>
-                <TableTd>
-                  <Button onClick={() => router.push(`/admin/keamanan/pencegahan-kriminalitas/${item.id}`)}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
-          ))}
-          </TableTbody>
-        </Table>  
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.programKeamanan.nama}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="sm" c="dimmed" truncate lineClamp={1}>
+                        {item.programKeamanan.slug}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text
+                        fz="sm"
+                        c="dimmed"
+                        truncate
+                        lineClamp={1}
+                        dangerouslySetInnerHTML={{
+                          __html: item.programKeamanan.deskripsi || ''
+                        }}
+                      />
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/keamanan/pencegahan-kriminalitas/${item.id}`)}
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">
+                        Tidak ada data pencegahan kriminalitas yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+
+      {/* Pagination */}
+      <Center>
+        <Pagination
+          value={page}
+          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)/keamanan/polsek-terdekat/[id]/edit/page.tsx

@@ -1,25 +1,43 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Card, Group, Modal, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useProxy } from 'valtio/utils';
+"use client";
 
-import { useEffect, useState } from 'react';
-import { toast } from 'react-toastify';
-import polsekTerdekat from '@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat';
+import colors from "@/con/colors";
+import {
+  Box,
+  Button,
+  Card,
+  Group,
+  Modal,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from "@mantine/core";
+import { IconArrowBack } from "@tabler/icons-react";
+import { useParams, useRouter } from "next/navigation";
+import { useProxy } from "valtio/utils";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import polsekTerdekat from "@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat";
 
-function CreatePolsekTerdekat() {
-  const polsekState = useProxy(polsekTerdekat)
+function EditPolsekTerdekat() {
+  const polsekState = useProxy(polsekTerdekat);
   const params = useParams();
   const router = useRouter();
-  const [layananOptions, setLayananOptions] = useState<{ value: string; label: string }[]>([]);
+
+  const [layananOptions, setLayananOptions] = useState<
+    { value: string; label: string }[]
+  >([]);
   const [modalOpen, setModalOpen] = useState(false);
   const [modalUpdateOpen, setModalUpdateOpen] = useState(false);
   const [namaLayananBaru, setNamaLayananBaru] = useState("");
-  const [selectedLayananId, setSelectedLayananId] = useState<string | null>(null);
+  const [selectedLayananId, setSelectedLayananId] = useState<string | null>(
+    null
+  );
   const [namaLayananUpdate, setNamaLayananUpdate] = useState("");
   const [formData, setFormData] = useState({
     nama: "",
@@ -32,7 +50,7 @@ function CreatePolsekTerdekat() {
     alamatMaps: "",
     linkPetunjukArah: "",
     layananPolsekId: "",
-  })
+  });
 
   useEffect(() => {
     const loadPolsekTerdekat = async () => {
@@ -43,16 +61,16 @@ function CreatePolsekTerdekat() {
         const data = await polsekState.edit.load(id);
         if (data) {
           setFormData({
-            nama: data.nama || '',
-            jarakKeDesa: data.jarakKeDesa || '',
-            alamat: data.alamat || '',
-            nomorTelepon: data.nomorTelepon || '',
-            jamOperasional: data.jamOperasional || '',
-            embedMapUrl: data.embedMapUrl || '',
-            namaTempatMaps: data.namaTempatMaps || '',
-            alamatMaps: data.alamatMaps || '',
-            linkPetunjukArah: data.linkPetunjukArah || '',
-            layananPolsekId: data.layananPolsekId || '',
+            nama: data.nama || "",
+            jarakKeDesa: data.jarakKeDesa || "",
+            alamat: data.alamat || "",
+            nomorTelepon: data.nomorTelepon || "",
+            jamOperasional: data.jamOperasional || "",
+            embedMapUrl: data.embedMapUrl || "",
+            namaTempatMaps: data.namaTempatMaps || "",
+            alamatMaps: data.alamatMaps || "",
+            linkPetunjukArah: data.linkPetunjukArah || "",
+            layananPolsekId: data.layananPolsekId || "",
           });
         }
       } catch (error) {
@@ -64,53 +82,41 @@ function CreatePolsekTerdekat() {
     loadPolsekTerdekat();
   }, [params?.id]);
 
-
   const handleSubmit = async () => {
     try {
       polsekState.edit.form = {
         ...polsekState.edit.form,
-        nama: formData.nama,
-        jarakKeDesa: formData.jarakKeDesa,
-        alamat: formData.alamat,
-        nomorTelepon: formData.nomorTelepon,
-        jamOperasional: formData.jamOperasional,
-        embedMapUrl: formData.embedMapUrl,
-        namaTempatMaps: formData.namaTempatMaps,
-        alamatMaps: formData.alamatMaps,
-        linkPetunjukArah: formData.linkPetunjukArah,
-        layananPolsekId: formData.layananPolsekId,
-      }
-      await polsekState.edit.update()
-      toast.success("Polsek terdekat berhasil diperbarui!")
-      router.push("/admin/keamanan/polsek-terdekat")
+        ...formData,
+      };
+      await polsekState.edit.update();
+      toast.success("Polsek terdekat berhasil diperbarui!");
+      router.push("/admin/keamanan/polsek-terdekat");
     } catch (error) {
       console.error("Error updating polsek terdekat:", error);
-      toast.error("Gagal memuat data polsek terdekat");
+      toast.error("Gagal memperbarui data polsek terdekat");
     }
-  }
+  };
 
   const fetchLayanan = async () => {
     try {
-      const res = await fetch("/api/keamanan/layanan-polsek/find-many")
-      const data = await res.json()
+      const res = await fetch("/api/keamanan/layanan-polsek/find-many");
+      const data = await res.json();
 
       if (data.success) {
-        const options = data.data.map((item: any) => {
-          return {
-            value: item.id,
-            label: item.nama
-          }
-        })
-        setLayananOptions(options)
+        const options = data.data.map((item: any) => ({
+          value: item.id,
+          label: item.nama,
+        }));
+        setLayananOptions(options);
       }
     } catch {
-      toast.error("Gagal memuat layanan polsek")
+      toast.error("Gagal memuat layanan polsek");
     }
-  }
-
+  };
 
   const handleTambahLayanan = async () => {
-    if (!namaLayananBaru.trim()) return toast.warn("Nama layanan tidak boleh kosong");
+    if (!namaLayananBaru.trim())
+      return toast.warn("Nama layanan tidak boleh kosong");
 
     try {
       const res = await fetch("/api/keamanan/layanan-polsek/create", {
@@ -140,7 +146,8 @@ function CreatePolsekTerdekat() {
   };
 
   const handleUpdateLayanan = async (id: string, namaBaru: string) => {
-    if (!namaBaru.trim()) return toast.warn("Nama layanan tidak boleh kosong");
+    if (!namaBaru.trim())
+      return toast.warn("Nama layanan tidak boleh kosong");
 
     try {
       const res = await fetch(`/api/keamanan/layanan-polsek/update/${id}`, {
@@ -151,7 +158,7 @@ function CreatePolsekTerdekat() {
       const data = await res.json();
 
       if (data.success) {
-        await fetchLayanan(); // Refresh list
+        await fetchLayanan();
         toast.success("Layanan berhasil diupdate!");
         setModalUpdateOpen(false);
         setNamaLayananUpdate("");
@@ -174,8 +181,10 @@ function CreatePolsekTerdekat() {
       const data = await res.json();
 
       if (data.success) {
-        await fetchLayanan(); // Refresh list
-        setLayananOptions((prev) => prev.filter((layanan) => layanan.value !== id));
+        await fetchLayanan();
+        setLayananOptions((prev) =>
+          prev.filter((layanan) => layanan.value !== id)
+        );
         toast.success("Layanan berhasil dihapus!");
       } else {
         toast.error(data.message || "Gagal menghapus layanan");
@@ -185,13 +194,13 @@ function CreatePolsekTerdekat() {
     }
   };
 
-
   useEffect(() => {
     fetchLayanan();
   }, []);
 
   return (
-    <Box>
+    <Box px={{ base: "sm", md: "lg" }} py="md">
+      {/* Modal Tambah */}
       <Modal
         opened={modalOpen}
         onClose={() => setModalOpen(false)}
@@ -209,10 +218,11 @@ function CreatePolsekTerdekat() {
         </Stack>
       </Modal>
 
+      {/* Modal Update */}
       <Modal
         opened={modalUpdateOpen}
         onClose={() => setModalUpdateOpen(false)}
-        title="Tambah Layanan Polsek"
+        title="Update Layanan Polsek"
         centered
       >
         <Stack>
@@ -222,148 +232,197 @@ function CreatePolsekTerdekat() {
             value={namaLayananUpdate}
             onChange={(e) => setNamaLayananUpdate(e.currentTarget.value)}
           />
-          <Button onClick={() => {
-            if (!selectedLayananId) return toast.warn("ID layanan tidak ditemukan");
-            handleUpdateLayanan(selectedLayananId, namaLayananUpdate);
-          }}>Simpan</Button>
+          <Button
+            onClick={() => {
+              if (!selectedLayananId)
+                return toast.warn("ID layanan tidak ditemukan");
+              handleUpdateLayanan(selectedLayananId, namaLayananUpdate);
+            }}
+          >
+            Simpan
+          </Button>
         </Stack>
       </Modal>
 
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+      {/* 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 Polsek Terdekat
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Polsek Terdekat</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">
+          {/* Input fields */}
           <TextInput
             value={formData.nama}
-            onChange={(val) => {
-              formData.nama = val.target.value
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Polsek Terdekat</Text>}
-            placeholder='Masukkan nama Polsek Terdekat'
+            onChange={(val) =>
+              setFormData({ ...formData, nama: val.target.value })
+            }
+            label="Nama Polsek Terdekat"
+            placeholder="Masukkan nama Polsek Terdekat"
+            required
           />
           <TextInput
             value={formData.jarakKeDesa}
-            onChange={(val) => {
-              formData.jarakKeDesa = val.target.value
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Jarak Polsek Terdekat</Text>}
-            placeholder='Masukkan jarak Polsek Terdekat'
+            onChange={(val) =>
+              setFormData({ ...formData, jarakKeDesa: val.target.value })
+            }
+            label="Jarak Polsek Terdekat"
+            placeholder="Masukkan jarak Polsek Terdekat"
           />
           <TextInput
             value={formData.alamat}
-            onChange={(val) => {
-              formData.alamat = val.target.value
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Alamat Polsek Terdekat</Text>}
-            placeholder='Masukkan alamat Polsek Terdekat'
+            onChange={(val) =>
+              setFormData({ ...formData, alamat: val.target.value })
+            }
+            label="Alamat Polsek Terdekat"
+            placeholder="Masukkan alamat Polsek Terdekat"
           />
           <TextInput
             value={formData.nomorTelepon}
-            onChange={(val) => {
-              formData.nomorTelepon = val.target.value
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon Polsek Terdekat</Text>}
-            placeholder='Masukkan nomor telepon Polsek Terdekat'
+            onChange={(val) =>
+              setFormData({ ...formData, nomorTelepon: val.target.value })
+            }
+            label="Nomor Telepon"
+            placeholder="Masukkan nomor telepon Polsek Terdekat"
           />
           <TextInput
             value={formData.jamOperasional}
-            onChange={(val) => {
-              formData.jamOperasional = val.target.value
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Jam Operasional Polsek Terdekat</Text>}
-            placeholder='Masukkan jam operasional Polsek Terdekat'
+            onChange={(val) =>
+              setFormData({ ...formData, jamOperasional: val.target.value })
+            }
+            label="Jam Operasional"
+            placeholder="Masukkan jam operasional Polsek Terdekat"
           />
           <TextInput
             value={formData.embedMapUrl}
-            onChange={(val) => {
-              formData.embedMapUrl = val.target.value
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Embed Map URL Polsek Terdekat</Text>}
-            placeholder='Masukkan embed map url Polsek Terdekat'
+            onChange={(val) =>
+              setFormData({ ...formData, embedMapUrl: val.target.value })
+            }
+            label="Embed Map URL"
+            placeholder="Masukkan embed map url"
           />
           <TextInput
             value={formData.namaTempatMaps}
-            onChange={(val) => {
-              formData.namaTempatMaps = val.target.value
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Tempat Maps Polsek Terdekat</Text>}
-            placeholder='Masukkan nama tempat maps Polsek Terdekat'
+            onChange={(val) =>
+              setFormData({ ...formData, namaTempatMaps: val.target.value })
+            }
+            label="Nama Tempat Maps"
+            placeholder="Masukkan nama tempat di maps"
           />
           <TextInput
             value={formData.alamatMaps}
-            onChange={(val) => {
-              formData.alamatMaps = val.target.value
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Alamat Maps Polsek Terdekat</Text>}
-            placeholder='Masukkan alamat maps Polsek Terdekat'
+            onChange={(val) =>
+              setFormData({ ...formData, alamatMaps: val.target.value })
+            }
+            label="Alamat Maps"
+            placeholder="Masukkan alamat di maps"
           />
           <TextInput
             value={formData.linkPetunjukArah}
-            onChange={(val) => {
-              formData.linkPetunjukArah = val.target.value
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Link Petunjuk Arah Polsek Terdekat</Text>}
-            placeholder='Masukkan link petunjuk arah Polsek Terdekat'
+            onChange={(val) =>
+              setFormData({ ...formData, linkPetunjukArah: val.target.value })
+            }
+            label="Link Petunjuk Arah"
+            placeholder="Masukkan link petunjuk arah"
           />
-          {/* Tambah Dropdown Select */}
-          <Select
 
+          {/* Dropdown Layanan */}
+          <Select
             label="Layanan Polsek"
             placeholder="Pilih layanan polsek"
             data={layananOptions}
-
             value={polsekState.create.form.layananPolsekId}
             onChange={(val) => {
               polsekState.create.form.layananPolsekId = val || "";
             }}
           />
-          <Button variant="light" size="xs" onClick={() => setModalOpen(true)}>
+          <Button
+            variant="light"
+            size="xs"
+            onClick={() => setModalOpen(true)}
+          >
             + Tambah Layanan Baru
           </Button>
 
-          <Text>Daftar Layanan Polsek</Text>
+          {/* List layanan */}
+          <Text fw="bold" fz="sm">
+            Daftar Layanan Polsek
+          </Text>
           {layananOptions.map((item) => (
-            <Card style={{border: '1px solid #ccc'}} bg={colors['white-1']} p={'md'} key={item.value}>
-              <Group>
-              <Text>{item.label}</Text>
-              <Button
-                variant="light"
-                size="xs"
-                onClick={() => {
-                  setSelectedLayananId(item.value);
-                  setNamaLayananUpdate(item.label);
-                  setModalUpdateOpen(true);
-                }}
-              >
-                Edit
-              </Button>
-              <Button
-                variant="outline"
-                color="red"
-                size="xs"
-                onClick={() => handleDeleteLayanan(item.value)}
-              >
-                Hapus
-              </Button>
-            </Group>
+            <Card
+              key={item.value}
+              style={{ border: "1px solid #ccc" }}
+              bg={colors["white-1"]}
+              p="md"
+              radius="md"
+              shadow="sm"
+            >
+              <Group justify="space-between">
+                <Text>{item.label}</Text>
+                <Group>
+                  <Button
+                    variant="light"
+                    size="xs"
+                    onClick={() => {
+                      setSelectedLayananId(item.value);
+                      setNamaLayananUpdate(item.label);
+                      setModalUpdateOpen(true);
+                    }}
+                  >
+                    Edit
+                  </Button>
+                  <Button
+                    variant="outline"
+                    color="red"
+                    size="xs"
+                    onClick={() => handleDeleteLayanan(item.value)}
+                  >
+                    Hapus
+                  </Button>
+                </Group>
+              </Group>
             </Card>
           ))}
 
-
-          {/* Tambah field lainnya di sini... */}
-          <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>
-    </Box >
+    </Box>
   );
-
 }
 
-export default CreatePolsekTerdekat;
+export default EditPolsekTerdekat;

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

@@ -1,81 +1,109 @@
 'use client'
 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 polsekTerdekat from '../../../_state/keamanan/polsek-terdekat';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 
 function DetailPolsekTerdekat() {
   const router = useRouter();
-  const polsekState = useProxy(polsekTerdekat)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const [modalHapus, setModalHapus] = useState(false)
-  const params = useParams()
+  const polsekState = useProxy(polsekTerdekat);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [modalHapus, setModalHapus] = useState(false);
+  const params = useParams();
 
   useShallowEffect(() => {
-    polsekState.findUnique.load(params?.id as string)
-  }, [])
+    polsekState.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      polsekState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/keamanan/polsek-terdekat")
+      polsekState.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/keamanan/polsek-terdekat");
     }
-  }
+  };
 
   if (!polsekState.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Polsek Terdekat</Text>
 
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
+  const data = polsekState.findUnique.data;
+
+  return (
+    <Box py={10}>
+      {/* Tombol Back */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Wrapper Detail */}
+      <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 Polsek Terdekat
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              {/* Nama */}
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Polsek Terdekat</Text>
-                <Text fz={"lg"}>{polsekState.findUnique.data?.nama}</Text>
+                <Text fz="lg" fw="bold">Nama Polsek Terdekat</Text>
+                <Text fz="md" c="dimmed">{data?.nama || "-"}</Text>
               </Box>
+
+              {/* Jarak */}
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Jarak Polsek Ke Desa</Text>
-                <Text fz={"lg"}>{polsekState.findUnique.data?.jarakKeDesa}</Text>
+                <Text fz="lg" fw="bold">Jarak Polsek ke Desa</Text>
+                <Text fz="md" c="dimmed">{data?.jarakKeDesa || "-"}</Text>
               </Box>
+
+              {/* Alamat */}
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Alamat Polsek </Text>
-                <Text fz={"lg"}>{polsekState.findUnique.data?.alamat}</Text>
+                <Text fz="lg" fw="bold">Alamat Polsek</Text>
+                <Text fz="md" c="dimmed">{data?.alamat || "-"}</Text>
               </Box>
+
+              {/* Nomor */}
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Nomor Polsek</Text>
-                <Text fz={"lg"}>{polsekState.findUnique.data?.nomorTelepon}</Text>
+                <Text fz="lg" fw="bold">Nomor Polsek</Text>
+                <Text fz="md" c="dimmed">{data?.nomorTelepon || "-"}</Text>
               </Box>
+
+              {/* Jam Operasional */}
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Jam Operasional</Text>
-                <Text fz={"lg"}>{polsekState.findUnique.data?.jamOperasional}</Text>
+                <Text fz="lg" fw="bold">Jam Operasional</Text>
+                <Text fz="md" c="dimmed">{data?.jamOperasional || "-"}</Text>
               </Box>
+
+              {/* Google Maps */}
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Google Maps</Text>
-                {polsekState.findUnique.data?.embedMapUrl ? (
+                <Text fz="lg" fw="bold">Google Maps</Text>
+                {data?.embedMapUrl ? (
                   <Box style={{ position: 'relative', paddingBottom: '56.25%', height: 0, overflow: 'hidden' }}>
                     <iframe
-                      src={polsekState.findUnique.data.embedMapUrl}
+                      src={data.embedMapUrl}
                       width="100%"
                       height="100%"
                       style={{
@@ -94,50 +122,68 @@ function DetailPolsekTerdekat() {
                 )}
               </Box>
 
+              {/* Nama Tempat Maps */}
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Tempat Maps</Text>
-                <Text fz={"lg"}>{polsekState.findUnique.data?.namaTempatMaps}</Text>
+                <Text fz="lg" fw="bold">Nama Tempat Maps</Text>
+                <Text fz="md" c="dimmed">{data?.namaTempatMaps || "-"}</Text>
               </Box>
+
+              {/* Alamat Maps */}
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Alamat Maps</Text>
-                <Text fz={"lg"}>{polsekState.findUnique.data?.alamatMaps}</Text>
+                <Text fz="lg" fw="bold">Alamat Maps</Text>
+                <Text fz="md" c="dimmed">{data?.alamatMaps || "-"}</Text>
               </Box>
+
+              {/* Link Petunjuk Arah */}
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Link Petunjuk Arah</Text>
-                <Text>
+                <Text fz="lg" fw="bold">Link Petunjuk Arah</Text>
+                <Text fz="md">
                   <a
-                    href={polsekState.findUnique.data?.linkPetunjukArah || "#"}
+                    href={data?.linkPetunjukArah || "#"}
                     target="_blank"
                     rel="noopener noreferrer"
                     style={{ color: 'black', textDecoration: 'underline' }}
                   >
-                    {polsekState.findUnique.data?.linkPetunjukArah || "Tidak ada link"}
+                    {data?.linkPetunjukArah || "Tidak ada link"}
                   </a>
                 </Text>
               </Box>
 
+              {/* Layanan Polsek */}
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Layanan Polsek</Text>
-                <Text fz={"lg"}>{polsekState.findUnique.data?.layananPolsek?.nama}</Text>
+                <Text fz="lg" fw="bold">Layanan Polsek</Text>
+                <Text fz="md" c="dimmed">{data?.layananPolsek?.nama || "-"}</Text>
               </Box>
-              <Box>
-                <Flex gap={"xs"}>
+
+              {/* Aksi */}
+              <Group gap="sm">
+                <Tooltip label="Hapus Data" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (polsekState.findUnique.data) {
-                        setSelectedId(polsekState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={polsekState.delete.loading || !polsekState.findUnique.data}
-                    color="red">
-                    <IconX size={20} />
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconTrash size={20} />
                   </Button>
-                  <Button onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${polsekState.findUnique.data?.id}/edit`)} color="green">
+                </Tooltip>
+
+                <Tooltip label="Edit Data" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${data.id}/edit`)}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Box>
+                </Tooltip>
+              </Group>
             </Stack>
           </Paper>
         </Stack>

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

@@ -1,7 +1,19 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Modal, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Modal,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
@@ -10,7 +22,7 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 
 function CreatePolsekTerdekat() {
-  const polsekState = useProxy(polsekTerdekat)
+  const polsekState = useProxy(polsekTerdekat);
   const router = useRouter();
   const [layananOptions, setLayananOptions] = useState<{ value: string; label: string }[]>([]);
   const [modalOpen, setModalOpen] = useState(false);
@@ -28,34 +40,31 @@ function CreatePolsekTerdekat() {
       alamatMaps: "",
       linkPetunjukArah: "",
       layananPolsekId: "",
-    }
-  }
+    };
+  };
 
   const handleSubmit = async () => {
-    await polsekState.create.create()
-    resetForm()
-    router.push("/admin/keamanan/polsek-terdekat")
-  }
+    await polsekState.create.create();
+    resetForm();
+    router.push("/admin/keamanan/polsek-terdekat");
+  };
 
   const fetchLayanan = async () => {
     try {
-      const res = await fetch("/api/keamanan/layanan-polsek/find-many")
-      const data = await res.json()
+      const res = await fetch("/api/keamanan/layanan-polsek/find-many");
+      const data = await res.json();
 
       if (data.success) {
-        const options = data.data.map((item: any) => {
-          return {
-            value: item.id,
-            label: item.nama
-          }
-        })
-        setLayananOptions(options)
+        const options = data.data.map((item: any) => ({
+          value: item.id,
+          label: item.nama,
+        }));
+        setLayananOptions(options);
       }
     } catch {
-      toast.error("Gagal memuat layanan polsek")
-    } 
-  }
-
+      toast.error("Gagal memuat layanan polsek");
+    }
+  };
 
   const handleTambahLayanan = async () => {
     if (!namaLayananBaru.trim()) return toast.warn("Nama layanan tidak boleh kosong");
@@ -67,7 +76,6 @@ function CreatePolsekTerdekat() {
         body: JSON.stringify({ nama: namaLayananBaru }),
       });
       const data = await res.json();
-      console.log("data setelah create:", data);
 
       if (data.success) {
         const newLayanan = {
@@ -83,7 +91,7 @@ function CreatePolsekTerdekat() {
       } else {
         toast.error(data.message || "Gagal menambah layanan");
       }
-    } catch  {
+    } catch {
       toast.error("Error menambah layanan");
     }
   };
@@ -93,8 +101,9 @@ function CreatePolsekTerdekat() {
   }, []);
 
   return (
-    <Box>
-       <Modal
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Modal Tambah Layanan */}
+      <Modal
         opened={modalOpen}
         onClose={() => setModalOpen(false)}
         title="Tambah Layanan Polsek"
@@ -111,112 +120,127 @@ function CreatePolsekTerdekat() {
         </Stack>
       </Modal>
 
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
+      {/* 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 Polsek Terdekat
+        </Title>
+      </Group>
 
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Polsek Terdekat</Title>
+      {/* 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={polsekState.create.form.nama}
-          onChange={(val) => {
-            polsekState.create.form.nama = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Nama Polsek Terdekat</Text>}
-          placeholder='Masukkan nama Polsek Terdekat'
+            value={polsekState.create.form.nama}
+            onChange={(val) => (polsekState.create.form.nama = val.target.value)}
+            label={<Text fw="bold" fz="sm">Nama Polsek Terdekat</Text>}
+            placeholder="Masukkan nama Polsek Terdekat"
+            required
           />
           <TextInput
-          value={polsekState.create.form.jarakKeDesa}
-          onChange={(val) => {
-            polsekState.create.form.jarakKeDesa = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Jarak Polsek Terdekat</Text>}
-          placeholder='Masukkan jarak Polsek Terdekat'
-          />
-           <TextInput
-          value={polsekState.create.form.alamat}
-          onChange={(val) => {
-            polsekState.create.form.alamat = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Alamat Polsek Terdekat</Text>}
-          placeholder='Masukkan alamat Polsek Terdekat'
-          />
-           <TextInput
-          value={polsekState.create.form.nomorTelepon}
-          onChange={(val) => {
-            polsekState.create.form.nomorTelepon = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon Polsek Terdekat</Text>}
-          placeholder='Masukkan nomor telepon Polsek Terdekat'
-          />
-           <TextInput
-          value={polsekState.create.form.jamOperasional}
-          onChange={(val) => {
-            polsekState.create.form.jamOperasional = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Jam Operasional Polsek Terdekat</Text>}
-          placeholder='Masukkan jam operasional Polsek Terdekat'
+            value={polsekState.create.form.jarakKeDesa}
+            onChange={(val) => (polsekState.create.form.jarakKeDesa = val.target.value)}
+            label={<Text fw="bold" fz="sm">Jarak Polsek Terdekat</Text>}
+            placeholder="Masukkan jarak Polsek Terdekat"
+            required
           />
           <TextInput
-          value={polsekState.create.form.embedMapUrl}
-          onChange={(val) => {
-            polsekState.create.form.embedMapUrl = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Embed Map URL Polsek Terdekat</Text>}
-          placeholder='Masukkan embed map url Polsek Terdekat'
+            value={polsekState.create.form.alamat}
+            onChange={(val) => (polsekState.create.form.alamat = val.target.value)}
+            label={<Text fw="bold" fz="sm">Alamat Polsek Terdekat</Text>}
+            placeholder="Masukkan alamat Polsek Terdekat"
+            required
           />
           <TextInput
-          value={polsekState.create.form.namaTempatMaps}
-          onChange={(val) => {
-            polsekState.create.form.namaTempatMaps = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Nama Tempat Maps Polsek Terdekat</Text>}
-          placeholder='Masukkan nama tempat maps Polsek Terdekat'
+            value={polsekState.create.form.nomorTelepon}
+            onChange={(val) => (polsekState.create.form.nomorTelepon = val.target.value)}
+            label={<Text fw="bold" fz="sm">Nomor Telepon Polsek Terdekat</Text>}
+            placeholder="Masukkan nomor telepon Polsek Terdekat"
+            required
           />
           <TextInput
-          value={polsekState.create.form.alamatMaps}
-          onChange={(val) => {
-            polsekState.create.form.alamatMaps = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Alamat Maps Polsek Terdekat</Text>}
-          placeholder='Masukkan alamat maps Polsek Terdekat'
+            value={polsekState.create.form.jamOperasional}
+            onChange={(val) => (polsekState.create.form.jamOperasional = val.target.value)}
+            label={<Text fw="bold" fz="sm">Jam Operasional Polsek Terdekat</Text>}
+            placeholder="Masukkan jam operasional Polsek Terdekat"
           />
           <TextInput
-          value={polsekState.create.form.linkPetunjukArah}
-          onChange={(val) => {
-            polsekState.create.form.linkPetunjukArah = val.target.value
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Link Petunjuk Arah Polsek Terdekat</Text>}
-          placeholder='Masukkan link petunjuk arah Polsek Terdekat'
+            value={polsekState.create.form.embedMapUrl}
+            onChange={(val) => (polsekState.create.form.embedMapUrl = val.target.value)}
+            label={<Text fw="bold" fz="sm">Embed Map URL</Text>}
+            placeholder="Masukkan embed map url"
           />
-         {/* Tambah Dropdown Select */}
+          <TextInput
+            value={polsekState.create.form.namaTempatMaps}
+            onChange={(val) => (polsekState.create.form.namaTempatMaps = val.target.value)}
+            label={<Text fw="bold" fz="sm">Nama Tempat Maps</Text>}
+            placeholder="Masukkan nama tempat maps"
+          />
+          <TextInput
+            value={polsekState.create.form.alamatMaps}
+            onChange={(val) => (polsekState.create.form.alamatMaps = val.target.value)}
+            label={<Text fw="bold" fz="sm">Alamat Maps</Text>}
+            placeholder="Masukkan alamat maps"
+          />
+          <TextInput
+            value={polsekState.create.form.linkPetunjukArah}
+            onChange={(val) => (polsekState.create.form.linkPetunjukArah = val.target.value)}
+            label={<Text fw="bold" fz="sm">Link Petunjuk Arah</Text>}
+            placeholder="Masukkan link petunjuk arah"
+          />
+
+          {/* Dropdown Select */}
           <Select
-          
-            label="Layanan Polsek"
+            label={<Text fw="bold" fz="sm">Layanan Polsek</Text>}
             placeholder="Pilih layanan polsek"
             data={layananOptions}
-            
             value={polsekState.create.form.layananPolsekId}
-            onChange={(val) => {
-              polsekState.create.form.layananPolsekId = val || "";
-            }}
+            onChange={(val) => (polsekState.create.form.layananPolsekId = val || "")}
           />
-          <Button variant="light" size="xs" onClick={() => setModalOpen(true)}>
+          <Button
+            variant="light"
+            size="xs"
+            onClick={() => setModalOpen(true)}
+          >
             + Tambah Layanan Baru
           </Button>
 
-          {/* Tambah field lainnya di sini... */}
-          <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>
+        </Stack>
       </Paper>
-   </Box>
+    </Box>
   );
-
 }
 
 export default CreatePolsekTerdekat;

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

@@ -1,26 +1,45 @@
 '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 { 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 polsekTerdekat from '../../_state/keamanan/polsek-terdekat';
-import { useState } from 'react';
 
 function PolsekTerdekat() {
   const [search, setSearch] = useState("");
+
   return (
     <Box>
       <HeaderSearch
         title='Polsek Terdekat'
-        placeholder='pencarian'
+        placeholder='Cari nama atau alamat...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
+
       <ListPolsekTerdekat search={search} />
     </Box>
   );
@@ -47,60 +66,96 @@ function ListPolsekTerdekat({ 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'}>
-        <JudulList
-          title='List Polsek Terdekat'
-          href='/admin/keamanan/polsek-terdekat/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama Polsek Terdekat</TableTh>
-              <TableTh>Jarak Polsek</TableTh>
-              <TableTh>Alamat</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>
-                  <Box w={180}>
-                    <Text fz='md' truncate={"end"} lineClamp={1}>{item.nama}</Text>
-                  </Box>
-                </TableTd>
-                <TableTd>
-                  <Box w={180}>
-                    <Text fz='md' truncate={"end"} lineClamp={1}>{item.jarakKeDesa}</Text>
-                  </Box>
-                </TableTd>
-                <TableTd>
-                  <Box w={250}>
-                    <Text fz='md' truncate={"end"} lineClamp={1}>{item.alamat}</Text>
-                  </Box>
-                </TableTd>
-                <TableTd>
-                  <Button onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${item.id}`)}>
-                    <IconDeviceImac size={20} />
-                  </Button>
-                </TableTd>
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Polsek Terdekat</Title>
+          <Tooltip label="Tambah Polsek" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/keamanan/polsek-terdekat/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama Polsek</TableTh>
+                <TableTh>Jarak</TableTh>
+                <TableTh>Alamat</TableTh>
+                <TableTh>Aksi</TableTh>
               </TableTr>
-            ))}
-          </TableTbody>
-        </Table>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={150}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.nama}
+                        </Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>{item.jarakKeDesa}</TableTd>
+                      <TableTd>
+                    <Box w={150}>
+                        <Text truncate="end" lineClamp={1}>{item.alamat}</Text>
+                    </Box>
+                      </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${item.id}`)}
+                      >
+                        <IconDeviceImac size={18} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">
+                        Tidak ada data Polsek yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+
+      {/* Pagination */}
       <Center>
         <Pagination
           value={page}
-          onChange={(newPage) => load(newPage)}
+          onChange={(newPage) => {
+            load(newPage, 10, search);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
           total={totalPages}
-          my="md"
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/_lib/layoutTabs.tsx

@@ -1,77 +1,140 @@
 /* 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 { IconActivity, IconBuildingHospital, IconCalendarEvent, IconGauge, IconNotes } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
+
 function LayoutTabs({ children }: { children: React.ReactNode }) {
-    const router = useRouter()
-    const pathname = usePathname()
-    const tabs = [
-        {
-            label: "Presentase Kelahiran & Kematian",
-            value: "presentasekelahiran&kematian",
-            href: "/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian"
-        },
-        {
-            label: "Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik",
-            value: "grafikhasilkepuasan",
-            href: "/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan"
-        },
-        {
-            label: "Fasilitas Kesehatan",
-            value: "fasilitaskesehatan",
-            href: "/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan"
-        },
-        {
-            label: "Jadwal Kegiatan",
-            value: "jadwalkegiatan",
-            href: "/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan"
-        },
-        {
-            label: "Artikel Kesehatan",
-            value: "artikelkesehatan",
-            href: "/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan"
-        },
-    ];
-    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)
-    }
 
-    useEffect(() => {
-        const match = tabs.find(tab => tab.href === pathname)
-        if (match) {
-            setActiveTab(match.value)
-        }
-    }, [pathname])
+ const tabs = [
+   {
+     label: "Presentase Kelahiran & Kematian",
+     value: "presentasekelahiran&kematian",
+     href: "/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian",
+     icon: <IconActivity size={18} stroke={1.8} />,
+     tooltip: "Lihat data kelahiran dan kematian"
+   },
+   {
+     label: "Grafik Hasil Kepuasan Masyarakat",
+     value: "grafikhasilkepuasan",
+     href: "/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan",
+     icon: <IconGauge size={18} stroke={1.8} />,
+     tooltip: "Grafik kepuasan masyarakat terhadap pelayanan"
+   },
+   {
+     label: "Fasilitas Kesehatan",
+     value: "fasilitaskesehatan",
+     href: "/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan",
+     icon: <IconBuildingHospital size={18} stroke={1.8} />,
+     tooltip: "Data fasilitas kesehatan desa"
+   },
+   {
+     label: "Jadwal Kegiatan",
+     value: "jadwalkegiatan",
+     href: "/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan",
+     icon: <IconCalendarEvent size={18} stroke={1.8} />,
+     tooltip: "Atur jadwal kegiatan kesehatan"
+   },
+   {
+     label: "Artikel Kesehatan",
+     value: "artikelkesehatan",
+     href: "/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan",
+     icon: <IconNotes size={18} stroke={1.8} />,
+     tooltip: "Artikel & informasi seputar kesehatan"
+   },
+ ];
 
-    return (
-        <Stack>
-            <Title order={3}>Data Kesehatan Warga</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>
-    );
+
+ 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]);
+
+
+ return (
+   <Stack gap="lg">
+     <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+       Data Kesehatan Warga
+     </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}
+         </TabsPanel>
+       ))}
+     </Tabs>
+   </Stack>
+ );
 }
 
+
 export default LayoutTabs;

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

@@ -4,7 +4,17 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
 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';
@@ -14,29 +24,12 @@ import { useProxy } from 'valtio/utils';
 interface ArtikelKesehatanFormBase {
   title: string;
   content: string;
-  introduction: {
-    content: string;
-  };
-  symptom: {
-    title: string;
-    content: string;
-  };
-  prevention: {
-    title: string;
-    content: string;
-  };
-  firstAid: {
-    title: string;
-    content: string;
-  };
-  mythVsFact: {
-    title: string;
-    mitos: string;
-    fakta: string;
-  };
-  doctorSign: {
-    content: string;
-  };
+  introduction: { content: string };
+  symptom: { title: string; content: string };
+  prevention: { title: string; content: string };
+  firstAid: { title: string; content: string };
+  mythVsFact: { title: string; mitos: string; fakta: string };
+  doctorSign: { content: string };
 }
 
 function EditArtikelKesehatan() {
@@ -47,29 +40,27 @@ function EditArtikelKesehatan() {
   const [formData, setFormData] = useState<ArtikelKesehatanFormBase>({
     title: stateArtikelKesehatan.edit.form.title || '',
     content: stateArtikelKesehatan.edit.form.content || '',
-    introduction: {
-      content: stateArtikelKesehatan.edit.form.introduction?.content || '',
-    },
+    introduction: { content: stateArtikelKesehatan.edit.form.introduction?.content || '' },
     symptom: {
       title: stateArtikelKesehatan.edit.form.symptom?.title || '',
-      content: stateArtikelKesehatan.edit.form.symptom?.content || '',
+      content: stateArtikelKesehatan.edit.form.symptom?.content || ''
     },
     prevention: {
       title: stateArtikelKesehatan.edit.form.prevention?.title || '',
-      content: stateArtikelKesehatan.edit.form.prevention?.content || '',
+      content: stateArtikelKesehatan.edit.form.prevention?.content || ''
     },
     firstAid: {
       title: stateArtikelKesehatan.edit.form.firstAid?.title || '',
-      content: stateArtikelKesehatan.edit.form.firstAid?.content || '',
+      content: stateArtikelKesehatan.edit.form.firstAid?.content || ''
     },
     mythVsFact: {
       title: stateArtikelKesehatan.edit.form.mythVsFact?.title || '',
       mitos: stateArtikelKesehatan.edit.form.mythVsFact?.mitos || '',
-      fakta: stateArtikelKesehatan.edit.form.mythVsFact?.fakta || '',
+      fakta: stateArtikelKesehatan.edit.form.mythVsFact?.fakta || ''
     },
     doctorSign: {
-      content: stateArtikelKesehatan.edit.form.doctorSign?.content || '',
-    },
+      content: stateArtikelKesehatan.edit.form.doctorSign?.content || ''
+    }
   });
 
   useEffect(() => {
@@ -84,29 +75,27 @@ function EditArtikelKesehatan() {
           setFormData({
             title: form.title,
             content: form.content,
-            introduction: {
-              content: form.introduction?.content || '',
-            },
+            introduction: { content: form.introduction?.content || '' },
             symptom: {
               title: form.symptom?.title || '',
-              content: form.symptom?.content || '',
+              content: form.symptom?.content || ''
             },
             prevention: {
               title: form.prevention?.title || '',
-              content: form.prevention?.content || '',
+              content: form.prevention?.content || ''
             },
             firstAid: {
               title: form.firstAid?.title || '',
-              content: form.firstAid?.content || '',
+              content: form.firstAid?.content || ''
             },
             mythVsFact: {
               title: form.mythVsFact?.title || '',
               mitos: form.mythVsFact?.mitos || '',
-              fakta: form.mythVsFact?.fakta || '',
+              fakta: form.mythVsFact?.fakta || ''
             },
             doctorSign: {
-              content: form.doctorSign?.content || '',
-            },
+              content: form.doctorSign?.content || ''
+            }
           });
         }
       } catch (error) {
@@ -119,34 +108,7 @@ function EditArtikelKesehatan() {
 
   const handleSubmit = async () => {
     try {
-      stateArtikelKesehatan.edit.form = {
-        ...stateArtikelKesehatan.edit.form,
-        title: formData.title,
-        content: formData.content,
-        introduction: {
-          content: formData.introduction.content,
-        },
-        symptom: {
-          title: formData.symptom.title,
-          content: formData.symptom.content,
-        },
-        prevention: {
-          title: formData.prevention.title,
-          content: formData.prevention.content,
-        },
-        firstAid: {
-          title: formData.firstAid.title,
-          content: formData.firstAid.content,
-        },
-        mythVsFact: {
-          title: formData.mythVsFact.title,
-          mitos: formData.mythVsFact.mitos,
-          fakta: formData.mythVsFact.fakta,
-        },
-        doctorSign: {
-          content: formData.doctorSign.content,
-        },
-      };
+      stateArtikelKesehatan.edit.form = { ...formData };
       const success = await stateArtikelKesehatan.edit.submit();
       if (success) {
         toast.success("Artikel kesehatan berhasil diperbarui!");
@@ -157,214 +119,196 @@ function EditArtikelKesehatan() {
       toast.error(error instanceof Error ? error.message : "Gagal memperbarui data artikel kesehatan");
     }
   };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant="subtle" color="blue">
-          <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 Artikel Kesehatan</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 Artikel Kesehatan
+        </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">Judul</Text>}
-            placeholder="masukkan judul"
+            label="Judul"
+            placeholder="Masukkan judul artikel"
             value={formData.title}
-            onChange={(e) => {
-              setFormData(prev => ({
-                ...prev,
-                title: e.target.value
-              }));
-            }}
+            onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
+            required
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
+            label="Deskripsi"
+            placeholder="Masukkan deskripsi artikel"
             value={formData.content}
-            onChange={(e) => {
-              setFormData(prev => ({
-                ...prev,
-                content: e.target.value
-              }));
-            }}
+            onChange={(e) => setFormData(prev => ({ ...prev, content: e.target.value }))}
+            required
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Pendahuluan</Text>}
-            placeholder="masukkan pendahuluan"
+            label="Pendahuluan"
+            placeholder="Masukkan pendahuluan"
             value={formData.introduction.content}
-            onChange={(e) => {
+            onChange={(e) =>
               setFormData(prev => ({
                 ...prev,
-                introduction: {
-                  ...prev.introduction,
-                  content: e.target.value
-                }
-              }));
-            }}
+                introduction: { ...prev.introduction, content: e.target.value }
+              }))
+            }
           />
+
+          {/* Gejala */}
           <Box>
-            <Text fz="md" fw="bold">Gejala</Text>
+            <Text fw="bold">Gejala</Text>
             <Stack gap="xs">
               <TextInput
-                label={<Text fz="sm" fw="bold">Judul</Text>}
-                placeholder="masukkan judul gejala penyakit"
+                label="Judul Gejala"
+                placeholder="Masukkan judul gejala"
                 value={formData.symptom.title}
-                onChange={(e) => {
+                onChange={(e) =>
                   setFormData(prev => ({
                     ...prev,
-                    symptom: {
-                      ...prev.symptom,
-                      title: e.target.value
-                    }
-                  }));
-                }}
+                    symptom: { ...prev.symptom, title: e.target.value }
+                  }))
+                }
+              />
+              <EditEditor
+                value={formData.symptom.content}
+                onChange={(e) =>
+                  setFormData(prev => ({
+                    ...prev,
+                    symptom: { ...prev.symptom, content: e }
+                  }))
+                }
               />
-              <Box>
-                <Text fz="sm" fw="bold">Deskripsi Gejala</Text>
-                <EditEditor
-                  value={formData.symptom.content}
-                  onChange={(e) => {
-                    setFormData(prev => ({
-                      ...prev,
-                      symptom: {
-                        ...prev.symptom,
-                        content: e
-                      }
-                    }));
-                  }}
-                />
-              </Box>
             </Stack>
           </Box>
 
+          {/* Pencegahan */}
           <Box>
-            <Text fz="md" fw="bold">Pencegahan</Text>
+            <Text fw="bold">Pencegahan</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
+              label="Judul"
               value={formData.prevention.title}
-              onChange={(e) => {
+              onChange={(e) =>
                 setFormData(prev => ({
                   ...prev,
-                  prevention: {
-                    ...prev.prevention,
-                    title: e.target.value
-                  }
-                }));
-              }}
+                  prevention: { ...prev.prevention, title: e.target.value }
+                }))
+              }
             />
             <EditEditor
               value={formData.prevention.content}
-              onChange={(e) => {
+              onChange={(e) =>
                 setFormData(prev => ({
                   ...prev,
-                  prevention: {
-                    ...prev.prevention,
-                    content: e
-                  }
-                }));
-              }}
+                  prevention: { ...prev.prevention, content: e }
+                }))
+              }
             />
           </Box>
+
+          {/* Pertolongan Pertama */}
           <Box>
-            <Text fz="md" fw="bold">Pertolongan Pertama</Text>
+            <Text fw="bold">Pertolongan Pertama</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
+              label="Judul"
               value={formData.firstAid.title}
-              onChange={(e) => {
+              onChange={(e) =>
                 setFormData(prev => ({
                   ...prev,
-                  firstAid: {
-                    ...prev.firstAid,
-                    title: e.target.value
-                  }
-                }));
-              }}
+                  firstAid: { ...prev.firstAid, title: e.target.value }
+                }))
+              }
             />
             <EditEditor
               value={formData.firstAid.content}
-              onChange={(e) => {
+              onChange={(e) =>
                 setFormData(prev => ({
                   ...prev,
-                  firstAid: {
-                    ...prev.firstAid,
-                    content: e
-                  }
-                }));
-              }}
+                  firstAid: { ...prev.firstAid, content: e }
+                }))
+              }
             />
           </Box>
+
+          {/* Mitos vs Fakta */}
           <Box>
-            <Text fz="md" fw="bold">Mitos dan Fakta</Text>
+            <Text fw="bold">Mitos vs Fakta</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
+              label="Judul"
               value={formData.mythVsFact.title}
-              onChange={(e) => {
+              onChange={(e) =>
                 setFormData(prev => ({
                   ...prev,
-                  mythVsFact: {
-                    ...prev.mythVsFact,
-                    title: e.target.value
-                  }
-                }));
-              }}
+                  mythVsFact: { ...prev.mythVsFact, title: e.target.value }
+                }))
+              }
+            />
+            <Text fw="500">Mitos</Text>
+            <EditEditor
+              value={formData.mythVsFact.mitos}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  mythVsFact: { ...prev.mythVsFact, mitos: e }
+                }))
+              }
+            />
+            <Text fw="500">Fakta</Text>
+            <EditEditor
+              value={formData.mythVsFact.fakta}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  mythVsFact: { ...prev.mythVsFact, fakta: e }
+                }))
+              }
             />
-            <Box>
-              <Text>
-                Mitos
-              </Text>
-              <EditEditor
-                value={formData.mythVsFact.mitos}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    mythVsFact: {
-                      ...prev.mythVsFact,
-                      mitos: e
-                    }
-                  }));
-                }}
-              />
-            </Box>
-            <Box>
-              <Text>
-                Fakta
-              </Text>
-              <EditEditor
-                value={formData.mythVsFact.fakta}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    mythVsFact: {
-                      ...prev.mythVsFact,
-                      fakta: e
-                    }
-                  }));
-                }}
-              />
-            </Box>
           </Box>
+
+          {/* Kapan harus ke dokter */}
           <Box>
-            <Text fz="md" fw="bold">Kapan Harus Ke Dokter</Text>
+            <Text fw="bold">Kapan Harus Ke Dokter</Text>
             <EditEditor
               value={formData.doctorSign.content}
-              onChange={(e) => {
+              onChange={(e) =>
                 setFormData(prev => ({
                   ...prev,
-                  doctorSign: {
-                    ...prev.doctorSign,
-                    content: e
-                  }
-                }));
-              }}
+                  doctorSign: { ...prev.doctorSign, content: e }
+                }))
+              }
             />
           </Box>
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
+
+          {/* Save 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)/kesehatan/data-kesehatan-warga/artikel_kesehatan/[id]/page.tsx

@@ -2,134 +2,181 @@
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
 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 DetailArtikelKesehatan() {
-  const params = useParams()
+  const params = useParams();
   const router = useRouter();
-  const stateArtikelKesehatan = useProxy(artikelKesehatanState)
+  const state = useProxy(artikelKesehatanState);
   const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [selectedId, setSelectedId] = useState<string | null>(null);
 
   useShallowEffect(() => {
-    stateArtikelKesehatan.findUnique.load(params?.id as string)
-  }, [])
+    state.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      stateArtikelKesehatan.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan")
+      state.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push('/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan');
     }
-  }
+  };
 
-  if (!stateArtikelKesehatan.findUnique.data) {
+  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 w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Artikel Kesehatan</Text>
-          {stateArtikelKesehatan.findUnique.data ? (
-            <Paper bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Judul</Text>
-                  <Text fz={"md"}>{stateArtikelKesehatan.findUnique.data.title}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.content }} />
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Pendahuluan</Text>
-                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.introduction.content }} />
-                </Box>
-                <Box>
-                  <Stack gap={"xs"}>
-                    <Text fz={"lg"} fw={"bold"}>Gejala</Text>
-                    <Text fz={"md"} fw={"bold"}>Judul Gejala</Text>
-                    <Text fz={"md"}>{stateArtikelKesehatan.findUnique.data.symptom.title}</Text>
-                    <Text fz={"md"} fw={"bold"}>Deskripsi Gejala</Text>
-                    <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.symptom.content }} />
-                  </Stack>
-                </Box>
-                <Box>
-                  <Stack gap={"xs"}>
-                    <Text fz={"lg"} fw={"bold"}>Pencegahan</Text>
-                    <Text fz={"md"} fw={"bold"}>Judul Pencegahan</Text>
-                    <Text fz={"md"}>{stateArtikelKesehatan.findUnique.data.prevention.title}</Text>
-                    <Text fz={"md"} fw={"bold"}>Deskripsi Pencegahan</Text>
-                    <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.prevention.content }} />
-                  </Stack>
-                </Box>
-                <Box>
-                  <Stack gap={"xs"}>
-                    <Text fz={"lg"} fw={"bold"}>Pertolongan Pertama</Text>
-                    <Text fz={"md"} fw={"bold"}>Judul Pertolongan Pertama</Text>
-                    <Text fz={"md"}>{stateArtikelKesehatan.findUnique.data.firstaid.title}</Text>
-                    <Text fz={"md"} fw={"bold"}>Deskripsi Pertolongan Pertama</Text>
-                    <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.firstaid.content }} />
-                  </Stack>
-                </Box>
-                <Box>
-                  <Stack gap={"xs"}>
-                    <Text fz={"lg"} fw={"bold"}>Mitos dan Fakta</Text>
-                    <Text fz={"md"} fw={"bold"}>Judul Mitos dan Fakta</Text>
-                    <Text fz={"md"}>{stateArtikelKesehatan.findUnique.data.mythvsfact.title}</Text>
-                    <Text fz={"md"} fw={"bold"}>Deskripsi Mitos</Text>
-                    <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.mythvsfact.mitos }} />
-                    <Text fz={"md"} fw={"bold"}>Deskripsi Fakta</Text>
-                    <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.mythvsfact.fakta }} />
-                  </Stack>
-                </Box>
-                <Box>
-                  <Stack gap={"xs"}>
-                    <Text fz={"lg"} fw={"bold"}>Kapan Harus ke Dokter</Text>
-                    <Text fz={"md"} fw={"bold"}>Deskripsi Kapan Harus ke Dokter</Text>
-                    <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateArtikelKesehatan.findUnique.data.doctorsign.content }} />
-                  </Stack>
-                </Box>
-                <Box>
-                  <Flex gap={"xs"}>
-                    <Button color="red" onClick={() => {
-                      if (stateArtikelKesehatan.findUnique.data) {
-                        setSelectedId(stateArtikelKesehatan.findUnique.data.id)
-                        setModalHapus(true)
-                      }
-                    }}>
-                      <IconX size={20} />
-                    </Button>
-                    <Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan/${stateArtikelKesehatan.findUnique.data?.id}/edit`)} color="green">
-                      <IconEdit size={20} />
-                    </Button>
-                  </Flex>
-                </Box>
-              </Stack>
-            </Paper>
-          ) : null}
+    <Box py={10}>
+      {/* Tombol Back */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Wrapper Detail */}
+      <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 Artikel Kesehatan
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              {/* Judul */}
+              <Box>
+                <Text fz="lg" fw="bold">Judul</Text>
+                <Text fz="md" c="dimmed">{data.title}</Text>
+              </Box>
+
+              {/* Deskripsi */}
+              <Box>
+                <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.content }} />
+              </Box>
+
+              {/* Pendahuluan */}
+              <Box>
+                <Text fz="lg" fw="bold">Pendahuluan</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.introduction?.content }} />
+              </Box>
+
+              {/* Gejala */}
+              <Box>
+                <Text fz="lg" fw="bold">Gejala</Text>
+                <Text fz="md" fw="bold">Judul</Text>
+                <Text fz="md" c="dimmed">{data.symptom?.title}</Text>
+                <Text fz="md" fw="bold">Deskripsi</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.symptom?.content }} />
+              </Box>
+
+              {/* Pencegahan */}
+              <Box>
+                <Text fz="lg" fw="bold">Pencegahan</Text>
+                <Text fz="md" fw="bold">Judul</Text>
+                <Text fz="md" c="dimmed">{data.prevention?.title}</Text>
+                <Text fz="md" fw="bold">Deskripsi</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.prevention?.content }} />
+              </Box>
+
+              {/* Pertolongan Pertama */}
+              <Box>
+                <Text fz="lg" fw="bold">Pertolongan Pertama</Text>
+                <Text fz="md" fw="bold">Judul</Text>
+                <Text fz="md" c="dimmed">{data.firstaid?.title}</Text>
+                <Text fz="md" fw="bold">Deskripsi</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.firstaid?.content }} />
+              </Box>
+
+              {/* Mitos vs Fakta */}
+              <Box>
+                <Text fz="lg" fw="bold">Mitos dan Fakta</Text>
+                <Text fz="md" fw="bold">Judul</Text>
+                <Text fz="md" c="dimmed">{data.mythvsfact?.title}</Text>
+                <Text fz="md" fw="bold">Mitos</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.mythvsfact?.mitos }} />
+                <Text fz="md" fw="bold">Fakta</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.mythvsfact?.fakta }} />
+              </Box>
+
+              {/* Kapan ke Dokter */}
+              <Box>
+                <Text fz="lg" fw="bold">Kapan Harus ke Dokter</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.doctorsign?.content }} />
+              </Box>
+
+              {/* Aksi */}
+              <Group gap="sm">
+                <Tooltip label="Hapus Artikel" 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 Artikel" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() =>
+                      router.push(
+                        `/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan/${data.id}/edit`
+                      )
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
-      {/* Modal Hapus */}
+      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}

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

@@ -2,101 +2,129 @@
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
 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 { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-
 function CreateArtikelKesehatan() {
-  const stateArtikelKesehatan = useProxy(artikelKesehatanState)
+  const stateArtikelKesehatan = useProxy(artikelKesehatanState);
   const router = useRouter();
 
-
   const resetForm = () => {
     stateArtikelKesehatan.create.form = {
-      title: "",
-      content: "",
+      title: '',
+      content: '',
       introduction: {
-        content: "",
+        content: '',
       },
       symptom: {
-        title: "",
-        content: "",
+        title: '',
+        content: '',
       },
       prevention: {
-        title: "",
-        content: "",
+        title: '',
+        content: '',
       },
       firstAid: {
-        title: "",
-        content: "",
+        title: '',
+        content: '',
       },
       mythVsFact: {
-        title: "",
-        mitos: "",
-        fakta: "",
+        title: '',
+        mitos: '',
+        fakta: '',
       },
       doctorSign: {
-        content: ""
-      }
+        content: '',
+      },
     };
   };
 
-
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+  const handleSubmit = async (e?: React.FormEvent) => {
+    e?.preventDefault();
     await stateArtikelKesehatan.create.submit();
-
-    toast.success("Data berhasil disimpan");
+    toast.success('Data berhasil disimpan');
     resetForm();
-    // After successful submission, redirect to the list page
     router.push('/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan');
-  }
+  };
 
   return (
-    <Box component="form" onSubmit={handleSubmit}>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md" component="form" onSubmit={handleSubmit}>
+      {/* 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 Artikel Kesehatan
+        </Title>
+      </Group>
 
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Create Artikel Kesehatan</Title>
+      {/* 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">Judul</Text>}
-            placeholder="masukkan judul"
+            label={"Judul"}
+            placeholder="Masukkan judul"
             value={stateArtikelKesehatan.create.form.title}
             onChange={(e) => {
               stateArtikelKesehatan.create.form.title = e.target.value;
             }}
+            required
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
+            label={"Deskripsi"}
+            placeholder="Masukkan deskripsi"
             value={stateArtikelKesehatan.create.form.content}
             onChange={(e) => {
               stateArtikelKesehatan.create.form.content = e.target.value;
             }}
+            required
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Pendahuluan</Text>}
-            placeholder="masukkan pendahuluan"
+            label={"Pendahuluan"}
+            placeholder="Masukkan pendahuluan"
+            required
             value={stateArtikelKesehatan.create.form.introduction.content}
             onChange={(e) => {
               stateArtikelKesehatan.create.form.introduction.content = e.target.value;
             }}
           />
+
+          {/* Gejala */}
           <Box>
-          <Text fz="md" fw="bold">Gejala</Text>
-            <Stack gap="xs">
+            <Text fz="md" fw="bold">Gejala</Text>
+            <Stack gap="sm">
               <TextInput
-                label={<Text fz="sm" fw="bold">Judul</Text>}
-                placeholder="masukkan judul gejala penyakit"
+                label={"Judul Gejala"}
+                required
+                placeholder="Masukkan judul gejala penyakit"
                 value={stateArtikelKesehatan.create.form.symptom.title}
                 onChange={(e) => {
                   stateArtikelKesehatan.create.form.symptom.title = e.target.value;
@@ -114,54 +142,62 @@ function CreateArtikelKesehatan() {
             </Stack>
           </Box>
 
-          <Box>
+          {/* Pencegahan */}
+          <Stack gap="xs">
             <Text fz="md" fw="bold">Pencegahan</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
+              label={"Judul Pencegahan"}
+              required
+              placeholder="Masukkan judul"
               value={stateArtikelKesehatan.create.form.prevention.title}
               onChange={(e) => {
                 stateArtikelKesehatan.create.form.prevention.title = e.target.value;
               }}
             />
+            <Text fz="sm">Deskripsi Pencegahan</Text>
             <CreateEditor
               value={stateArtikelKesehatan.create.form.prevention.content}
               onChange={(e) => {
                 stateArtikelKesehatan.create.form.prevention.content = e;
               }}
             />
-          </Box>
-          <Box>
+          </Stack>
+
+          {/* Pertolongan Pertama */}
+          <Stack gap={"xs"}>
             <Text fz="md" fw="bold">Pertolongan Pertama</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
+              label={"Judul Pertolongan Pertama"}
+              required
+              placeholder="Masukkan judul"
               value={stateArtikelKesehatan.create.form.firstAid.title}
               onChange={(e) => {
                 stateArtikelKesehatan.create.form.firstAid.title = e.target.value;
               }}
             />
+            <Text fz="sm">Deskripsi Pertolongan Pertama</Text>
             <CreateEditor
               value={stateArtikelKesehatan.create.form.firstAid.content}
               onChange={(e) => {
                 stateArtikelKesehatan.create.form.firstAid.content = e;
               }}
             />
-          </Box>
+          </Stack>
+
+          {/* Mitos vs Fakta */}
           <Box>
             <Text fz="md" fw="bold">Mitos dan Fakta</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
+              label={"Judul Mitos dan Fakta"}
+              required
+              placeholder="Masukkan judul"
               value={stateArtikelKesehatan.create.form.mythVsFact.title}
               onChange={(e) => {
                 stateArtikelKesehatan.create.form.mythVsFact.title = e.target.value;
               }}
             />
-            <Box>
-              <Text>
-                Mitos
-              </Text>
+            <Box mt="sm">
+              <Text fz="sm" fw="bold">Mitos</Text>
               <CreateEditor
                 value={stateArtikelKesehatan.create.form.mythVsFact.mitos}
                 onChange={(e) => {
@@ -169,10 +205,8 @@ function CreateArtikelKesehatan() {
                 }}
               />
             </Box>
-            <Box>
-              <Text>
-                Fakta
-              </Text>
+            <Box mt="sm">
+              <Text fz="sm" fw="bold">Fakta</Text>
               <CreateEditor
                 value={stateArtikelKesehatan.create.form.mythVsFact.fakta}
                 onChange={(e) => {
@@ -181,8 +215,10 @@ function CreateArtikelKesehatan() {
               />
             </Box>
           </Box>
+
+          {/* Kapan Harus ke Dokter */}
           <Box>
-            <Text fz="md" fw="bold">Kapan Harus Ke Dokter</Text>
+            <Text fz="md" fw="bold">Kapan Harus ke Dokter</Text>
             <CreateEditor
               value={stateArtikelKesehatan.create.form.doctorSign.content}
               onChange={(e) => {
@@ -191,9 +227,21 @@ function CreateArtikelKesehatan() {
             />
           </Box>
 
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
+          {/* Submit Button */}
+          <Group justify="right">
+            <Button
+              type="submit"
+              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)/kesehatan/data-kesehatan-warga/artikel_kesehatan/page.tsx

@@ -1,99 +1,164 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Paper,
+  Pagination,
+  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 { IconArrowBack, IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import artikelKesehatanState from '../../../_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
 import { useState } from 'react';
 
-
 function ArtikelKesehatan() {
+  const router = useRouter();
   const [search, setSearch] = useState("");
+
   return (
     <Box>
+      {/* Tombol Back */}
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={25} />
+        </Button>
+      </Box>
+
+      {/* Header Search */}
       <HeaderSearch
         title='Artikel Kesehatan'
-        placeholder='pencarian'
+        placeholder='Cari judul atau konten...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
+
       <ListArtikelKesehatan search={search} />
     </Box>
   );
 }
 
 function ListArtikelKesehatan({ search }: { search: string }) {
-  const stateArtikelKesehatan = useProxy(artikelKesehatanState)
+  const stateArtikel = useProxy(artikelKesehatanState);
   const router = useRouter();
 
+  const { data, page, totalPages, loading, load } = stateArtikel.findMany;
+
   useShallowEffect(() => {
-    stateArtikelKesehatan.findMany.load()
-  }, [])
+    load(page, 10, search);
+  }, [page, search]);
 
-  const filteredData = (stateArtikelKesehatan.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
+  const filteredData = data || [];
+
+  if (loading || !data) {
     return (
-      item.title.toLowerCase().includes(keyword) ||
-      item.content.toLowerCase().includes(keyword)
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
     );
-  });
-
-  if (!stateArtikelKesehatan.findMany.data) {
-    return (
-      <Box py={10}>
-        <Skeleton h={500} />
-      </Box>
-    )
   }
+
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Artikel Kesehatan'
-            href='/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan/create'
-          />
-          <Box style={{ overflowX: "auto" }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Judul</TableTh>
-                  <TableTh>Content</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        {/* Judul + Tombol Tambah */}
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Artikel Kesehatan</Title>
+          <Tooltip label="Tambah Artikel Kesehatan" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        {/* Tabel */}
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>Judul</TableTh>
+                <TableTh>Konten</TableTh>
+                <TableTh>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Box w={100}>
-                        <Text truncate={'end'} lineClamp={1} fz={'h5'}>{item.title}</Text>
-                      </Box>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.title}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Box w={200}>
-                        <Text truncate={'end'} lineClamp={1} fz={'h5'}>{item.content}</Text>
-                      </Box>
+                      <Text truncate fz="sm" c="dimmed" lineClamp={1}>
+                        {item.content}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan/${item.id}`)}
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={3}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada artikel yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+
+      {/* Pagination */}
+      <Center>
+        <Pagination
+          value={page}
+          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 ArtikelKesehatan;

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

@@ -4,7 +4,17 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 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';
@@ -18,20 +28,14 @@ interface FasilitasKesehatanFormBase {
     alamat: string;
     jamOperasional: string;
   };
-  layananUnggulan: {
-    content: string;
-  };
+  layananUnggulan: { content: string };
   dokterdanTenagaMedis: {
     name: string;
     specialist: string;
     jadwal: string;
   };
-  fasilitasPendukung: {
-    content: string;
-  };
-  prosedurPendaftaran: {
-    content: string;
-  };
+  fasilitasPendukung: { content: string };
+  prosedurPendaftaran: { content: string };
   tarifDanLayanan: {
     layanan: string;
     tarif: string;
@@ -86,20 +90,14 @@ function EditFasilitasKesehatan() {
               alamat: form.informasiUmum?.alamat || '',
               jamOperasional: form.informasiUmum?.jamOperasional || '',
             },
-            layananUnggulan: {
-              content: form.layananUnggulan?.content || '',
-            },
+            layananUnggulan: { content: form.layananUnggulan?.content || '' },
             dokterdanTenagaMedis: {
               name: form.dokterdanTenagaMedis?.name || '',
               specialist: form.dokterdanTenagaMedis?.specialist || '',
               jadwal: form.dokterdanTenagaMedis?.jadwal || '',
             },
-            fasilitasPendukung: {
-              content: form.fasilitasPendukung?.content || '',
-            },
-            prosedurPendaftaran: {
-              content: form.prosedurPendaftaran?.content || '',
-            },
+            fasilitasPendukung: { content: form.fasilitasPendukung?.content || '' },
+            prosedurPendaftaran: { content: form.prosedurPendaftaran?.content || '' },
             tarifDanLayanan: {
               layanan: form.tarifDanLayanan?.layanan || '',
               tarif: form.tarifDanLayanan?.tarif || '',
@@ -118,30 +116,7 @@ function EditFasilitasKesehatan() {
     try {
       stateFasilitasKesehatan.edit.form = {
         ...stateFasilitasKesehatan.edit.form,
-        name: formData.name,
-        informasiUmum: {
-          fasilitas: formData.informasiUmum.fasilitas,
-          alamat: formData.informasiUmum.alamat,
-          jamOperasional: formData.informasiUmum.jamOperasional,
-        },
-        layananUnggulan: {
-          content: formData.layananUnggulan.content,
-        },
-        dokterdanTenagaMedis: {
-          name: formData.dokterdanTenagaMedis.name,
-          specialist: formData.dokterdanTenagaMedis.specialist,
-          jadwal: formData.dokterdanTenagaMedis.jadwal,
-        },
-        fasilitasPendukung: {
-          content: formData.fasilitasPendukung.content,
-        },
-        prosedurPendaftaran: {
-          content: formData.prosedurPendaftaran.content,
-        },
-        tarifDanLayanan: {
-          layanan: formData.tarifDanLayanan.layanan,
-          tarif: formData.tarifDanLayanan.tarif,
-        },
+        ...formData,
       };
       const success = await stateFasilitasKesehatan.edit.submit();
       if (success) {
@@ -150,208 +125,197 @@ function EditFasilitasKesehatan() {
       }
     } catch (error) {
       console.error("Error updating fasilitas kesehatan:", error);
-      toast.error(error instanceof Error ? error.message : "Gagal memperbarui data fasilitas kesehatan");
+      toast.error("Terjadi kesalahan saat memperbarui data fasilitas kesehatan");
     }
   };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant="subtle" color="blue">
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Stack gap="xs">
-        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-          <Stack gap="xs">
-            <Title order={3}>Edit Fasilitas Kesehatan</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 Fasilitas Kesehatan
+        </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="Nama Fasilitas Kesehatan"
+            placeholder="Masukkan nama fasilitas kesehatan"
+            value={formData.name}
+            onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
+            required
+          />
+
+          {/* Informasi Umum */}
+          <Box>
+            <Text fw="bold" mb={5}>Informasi Umum</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Nama Fasilitas Kesehatan</Text>}
-              placeholder="masukkan nama fasilitas kesehatan"
-              value={formData.name}
-              onChange={(e) => {
+              label="Fasilitas"
+              value={formData.informasiUmum.fasilitas}
+              onChange={(e) =>
                 setFormData(prev => ({
                   ...prev,
-                  name: e.target.value
-                }));
-              }}
+                  informasiUmum: { ...prev.informasiUmum, fasilitas: e.target.value },
+                }))
+              }
             />
-            <Box>
-              <Text fz="md" fw="bold">Informasi Umum</Text>
-              <TextInput
-                label={<Text fz="sm" fw="bold">Fasilitas</Text>}
-                placeholder="masukkan fasilitas"
-                value={formData.informasiUmum.fasilitas}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    informasiUmum: {
-                      ...prev.informasiUmum,
-                      fasilitas: e.target.value
-                    }
-                  }));
-                }}
-              />
-              <TextInput
-                label={<Text fz="sm" fw="bold">Alamat</Text>}
-                placeholder="masukkan alamat"
-                value={formData.informasiUmum.alamat}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    informasiUmum: {
-                      ...prev.informasiUmum,
-                      alamat: e.target.value
-                    }
-                  }));
-                }}
-              />
-              <TextInput
-                label={<Text fz="sm" fw="bold">Jam Operasional</Text>}
-                placeholder="masukkan jam operasional"
-                value={formData.informasiUmum.jamOperasional}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    informasiUmum: {
-                      ...prev.informasiUmum,
-                      jamOperasional: e.target.value
-                    }
-                  }));
-                }}
-              />
-            </Box>
-            <Box>
-              <Text fz="md" fw="bold">Layanan Unggulan</Text>
-              <EditEditor
-                value={formData.layananUnggulan.content}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    layananUnggulan: {
-                      ...prev.layananUnggulan,
-                      content: e
-                    }
-                  }));
-                }}
-              />
-            </Box>
-            <Box>
-              <Text fz="md" fw="bold">Dokter dan Tenaga Medis</Text>
-              <TextInput
-                label={<Text fz="sm" fw="bold">Nama Dokter</Text>}
-                placeholder="masukkan nama dokter"
-                value={formData.dokterdanTenagaMedis.name}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    dokterdanTenagaMedis: {
-                      ...prev.dokterdanTenagaMedis,
-                      name: e.target.value
-                    }
-                  }));
-                }}
-              />
-              <TextInput
-                label={<Text fz="sm" fw="bold">Specialist</Text>}
-                placeholder="masukkan specialist"
-                value={formData.dokterdanTenagaMedis.specialist}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    dokterdanTenagaMedis: {
-                      ...prev.dokterdanTenagaMedis,
-                      specialist: e.target.value
-                    }
-                  }));
-                }}
-              />
-              <TextInput
-                label={<Text fz="sm" fw="bold">Jadwal</Text>}
-                placeholder="masukkan jadwal"
-                value={formData.dokterdanTenagaMedis.jadwal}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    dokterdanTenagaMedis: {
-                      ...prev.dokterdanTenagaMedis,
-                      jadwal: e.target.value
-                    }
-                  }));
-                }}
-              />
-            </Box>
-            <Box>
-              <Text fz="md" fw="bold">Fasilitas Pendukung</Text>
-              <EditEditor
-                value={formData.fasilitasPendukung.content}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    fasilitasPendukung: {
-                      ...prev.fasilitasPendukung,
-                      content: e
-                    }
-                  }));
-                }}
-              />
-            </Box>
-            <Box>
-              <Text fz="md" fw="bold">Prosedur Pendaftaran</Text>
-              <EditEditor
-                value={formData.prosedurPendaftaran.content}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    prosedurPendaftaran: {
-                      ...prev.prosedurPendaftaran,
-                      content: e
-                    }
-                  }));
-                }}
-              />
-            </Box>
-            <Box>
-              <Text fz="md" fw="bold">Tarif dan Layanan</Text>
-              <TextInput
-                label={<Text fz="sm" fw="bold">Tarif</Text>}
-                placeholder="masukkan tarif"
-                value={formData.tarifDanLayanan.tarif}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    tarifDanLayanan: {
-                      ...prev.tarifDanLayanan,
-                      tarif: e.target.value
-                    }
-                  }));
-                }}
-              />
-              <TextInput
-                label={<Text fz="sm" fw="bold">Layanan</Text>}
-                placeholder="masukkan layanan"
-                value={formData.tarifDanLayanan.layanan}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    tarifDanLayanan: {
-                      ...prev.tarifDanLayanan,
-                      layanan: e.target.value
-                    }
-                  }));
-                }}
-              />
-            </Box>
+            <TextInput
+              label="Alamat"
+              value={formData.informasiUmum.alamat}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  informasiUmum: { ...prev.informasiUmum, alamat: e.target.value },
+                }))
+              }
+            />
+            <TextInput
+              label="Jam Operasional"
+              value={formData.informasiUmum.jamOperasional}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  informasiUmum: { ...prev.informasiUmum, jamOperasional: e.target.value },
+                }))
+              }
+            />
+          </Box>
 
-              <Button
-                onClick={handleSubmit}
-                bg={colors['blue-button']}
-                loading={stateFasilitasKesehatan.edit.loading}
-              >
-                Simpan
-              </Button>
-          </Stack>
-        </Paper>
-      </Stack>
+          {/* Layanan Unggulan */}
+          <Box>
+            <Text fw="bold" mb={5}>Layanan Unggulan</Text>
+            <EditEditor
+              value={formData.layananUnggulan.content}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  layananUnggulan: { content: e },
+                }))
+              }
+            />
+          </Box>
+
+          {/* Dokter dan Tenaga Medis */}
+          <Box>
+            <Text fw="bold" mb={5}>Dokter dan Tenaga Medis</Text>
+            <TextInput
+              label="Nama Dokter"
+              value={formData.dokterdanTenagaMedis.name}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  dokterdanTenagaMedis: { ...prev.dokterdanTenagaMedis, name: e.target.value },
+                }))
+              }
+            />
+            <TextInput
+              label="Specialist"
+              value={formData.dokterdanTenagaMedis.specialist}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  dokterdanTenagaMedis: { ...prev.dokterdanTenagaMedis, specialist: e.target.value },
+                }))
+              }
+            />
+            <TextInput
+              label="Jadwal"
+              value={formData.dokterdanTenagaMedis.jadwal}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  dokterdanTenagaMedis: { ...prev.dokterdanTenagaMedis, jadwal: e.target.value },
+                }))
+              }
+            />
+          </Box>
+
+          {/* Fasilitas Pendukung */}
+          <Box>
+            <Text fw="bold" mb={5}>Fasilitas Pendukung</Text>
+            <EditEditor
+              value={formData.fasilitasPendukung.content}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  fasilitasPendukung: { content: e },
+                }))
+              }
+            />
+          </Box>
+
+          {/* Prosedur Pendaftaran */}
+          <Box>
+            <Text fw="bold" mb={5}>Prosedur Pendaftaran</Text>
+            <EditEditor
+              value={formData.prosedurPendaftaran.content}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  prosedurPendaftaran: { content: e },
+                }))
+              }
+            />
+          </Box>
+
+          {/* Tarif dan Layanan */}
+          <Box>
+            <Text fw="bold" mb={5}>Tarif dan Layanan</Text>
+            <TextInput
+              label="Tarif"
+              value={formData.tarifDanLayanan.tarif}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  tarifDanLayanan: { ...prev.tarifDanLayanan, tarif: e.target.value },
+                }))
+              }
+            />
+            <TextInput
+              label="Layanan"
+              value={formData.tarifDanLayanan.layanan}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  tarifDanLayanan: { ...prev.tarifDanLayanan, layanan: e.target.value },
+                }))
+              }
+            />
+          </Box>
+
+          {/* Tombol Simpan */}
+          <Group justify="flex-end">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              loading={stateFasilitasKesehatan.edit.loading}
+              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)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/[id]/page.tsx

@@ -2,133 +2,169 @@
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 import colors from '@/con/colors';
-import { Box, Button, Flex, Grid, GridCol, 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 DetailFasilitasKesehatan() {
-  const params = useParams()
+  const params = useParams();
   const router = useRouter();
-  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState.fasilitasKesehatan)
+  const state = useProxy(fasilitasKesehatanState.fasilitasKesehatan);
   const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [selectedId, setSelectedId] = useState<string | null>(null);
 
   useShallowEffect(() => {
-    stateFasilitasKesehatan.findUnique.load(params?.id as string)
-  }, [])
+    state.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      stateFasilitasKesehatan.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan")
+      state.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push(
+        '/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan'
+      );
     }
-  }
+  };
 
-  if (!stateFasilitasKesehatan.findUnique.data) {
+  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']} p={'md'}>
-        <Stack>
-          <Grid>
-            <GridCol span={12}>
-            <Text fz={"xl"} fw={"bold"}>Detail Fasilitas Kesehatan</Text>
-            </GridCol>
-            {/* <GridCol span={12}>
-              <Flex gap={"xs"}>
-                <Button color={colors['blue-button']} onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/${params?.id}/dokter-tenaga-medis`)}>
-                  Tambah Dokter
-                </Button>
-                <Button color={colors['blue-button']} onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/${params?.id}/layanan-unggulan/create`)}>
-                  Tambah Layanan
-                </Button>
-              </Flex>
-            </GridCol> */}
-          </Grid>
-          {stateFasilitasKesehatan.findUnique.data ? (
-            <Paper bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Nama Fasilitas Kesehatan</Text>
-                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.name}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Informasi Umum</Text>
-                  <Text fz={"md"} fw={"bold"}>Fasilitas</Text>
-                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.informasiumum.fasilitas}</Text>
-                  <Text fz={"md"} fw={"bold"}>Alamat</Text>
-                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.informasiumum.alamat}</Text>
-                  <Text fz={"md"} fw={"bold"}>Jam Operasional</Text>
-                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.informasiumum.jamOperasional}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"md"} fw={"bold"}>Layanan Unggulan</Text>
-                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateFasilitasKesehatan.findUnique.data.layananunggulan.content }} />
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Fasilitas Pendukung</Text>
-                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateFasilitasKesehatan.findUnique.data.fasilitaspendukung.content }} />
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Prosedur Pendaftaran</Text>
-                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateFasilitasKesehatan.findUnique.data.prosedurpendaftaran.content }} />
-                </Box>
-                <Box>
-                  <Text fz={"md"} fw={"bold"}>Dokter dan Tenaga Medis</Text>
-                  <Text fz={"md"} fw={"bold"}>Nama Dokter</Text>
-                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.dokterdantenagamedis.name}</Text>
-                  <Text fz={"md"} fw={"bold"}>Specialist</Text>
-                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.dokterdantenagamedis.specialist}</Text>
-                  <Text fz={"md"} fw={"bold"}>Jadwal</Text>
-                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.dokterdantenagamedis.jadwal}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Tarif dan Layanan</Text>
-                  <Text fz={"md"} fw={"bold"}>Layanan</Text>
-                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.tarifdanlayanan.layanan}</Text>
-                  <Text fz={"md"} fw={"bold"}>Tarif</Text>
-                  <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.tarifdanlayanan.tarif}</Text>
-                </Box>
-                <Box>
-                  <Flex gap={"xs"}>
-                    <Button color="red" onClick={() => {
-                      if (stateFasilitasKesehatan.findUnique.data) {
-                        setSelectedId(stateFasilitasKesehatan.findUnique.data.id)
-                        setModalHapus(true)
-                      }
-                    }}>
-                      <IconX size={20} />
-                    </Button>
-                    <Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/${stateFasilitasKesehatan.findUnique.data?.id}/edit`)} color="green">
-                      <IconEdit size={20} />
-                    </Button>
-                  </Flex>
-                </Box>
-              </Stack>
-            </Paper>
-          ) : null}
-        </Stack>
+    <Box py={10}>
+      {/* Tombol Back */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
 
+      {/* Wrapper Detail */}
+      <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 Fasilitas Kesehatan
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Nama Fasilitas</Text>
+                <Text fz="md" c="dimmed">{data.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Informasi Umum</Text>
+                <Text fz="md" fw="bold">Fasilitas</Text>
+                <Text fz="md" c="dimmed">{data.informasiumum?.fasilitas || '-'}</Text>
+                <Text fz="md" fw="bold">Alamat</Text>
+                <Text fz="md" c="dimmed">{data.informasiumum?.alamat || '-'}</Text>
+                <Text fz="md" fw="bold">Jam Operasional</Text>
+                <Text fz="md" c="dimmed">{data.informasiumum?.jamOperasional || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Layanan Unggulan</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.layananunggulan?.content || '-' }} />
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Fasilitas Pendukung</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.fasilitaspendukung?.content || '-' }} />
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Prosedur Pendaftaran</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.prosedurpendaftaran?.content || '-' }} />
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Dokter & Tenaga Medis</Text>
+                <Text fz="md" fw="bold">Nama</Text>
+                <Text fz="md" c="dimmed">{data.dokterdantenagamedis?.name || '-'}</Text>
+                <Text fz="md" fw="bold">Spesialis</Text>
+                <Text fz="md" c="dimmed">{data.dokterdantenagamedis?.specialist || '-'}</Text>
+                <Text fz="md" fw="bold">Jadwal</Text>
+                <Text fz="md" c="dimmed">{data.dokterdantenagamedis?.jadwal || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Tarif & Layanan</Text>
+                <Text fz="md" fw="bold">Layanan</Text>
+                <Text fz="md" c="dimmed">{data.tarifdanlayanan?.layanan || '-'}</Text>
+                <Text fz="md" fw="bold">Tarif</Text>
+                <Text fz="md" c="dimmed">{data.tarifdanlayanan?.tarif || '-'}</Text>
+              </Box>
+
+              {/* Aksi */}
+              <Group gap="sm">
+                <Tooltip label="Hapus Data" 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 Data" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() =>
+                      router.push(
+                        `/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/${data.id}/edit`
+                      )
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
+        </Stack>
       </Paper>
 
-      {/* Modal Hapus */}
+      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}

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

@@ -2,7 +2,17 @@
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 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 { toast } from 'react-toastify';
@@ -10,174 +20,196 @@ import { useProxy } from 'valtio/utils';
 
 
 function CreateFasilitasKesehatan() {
-  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState.fasilitasKesehatan)
+  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState.fasilitasKesehatan);
   const router = useRouter();
 
-
   const resetForm = () => {
     stateFasilitasKesehatan.create.form = {
-      name: "",
+      name: '',
       informasiUmum: {
-        fasilitas: "",
-        alamat: "",
-        jamOperasional: "",
+        fasilitas: '',
+        alamat: '',
+        jamOperasional: '',
       },
       layananUnggulan: {
-        content: "",
+        content: '',
       },
       dokterdanTenagaMedis: {
-        name: "",
-        specialist: "",
-        jadwal: "",
+        name: '',
+        specialist: '',
+        jadwal: '',
       },
       fasilitasPendukung: {
-        content: "",
+        content: '',
       },
       prosedurPendaftaran: {
-        content: "",
+        content: '',
       },
       tarifDanLayanan: {
-        layanan: "",
-        tarif: "",
+        layanan: '',
+        tarif: '',
       },
     };
   };
 
-
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     await stateFasilitasKesehatan.create.submit();
-
-    toast.success("Data berhasil disimpan");
+    toast.success('Data berhasil disimpan');
     resetForm();
-    // After successful submission, redirect to the list page
     router.push('/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan');
-  }
+  };
 
   return (
-    <Box component="form" onSubmit={handleSubmit}>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md" component="form" onSubmit={handleSubmit}>
+      {/* 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 Data Fasilitas Kesehatan
+        </Title>
+      </Group>
 
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Create Fasilitas Kesehatan</Title>
+      {/* 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 Fasilitas Kesehatan</Text>}
-            placeholder="masukkan nama fasilitas kesehatan"
+            label={"Nama Fasilitas Kesehatan"}
+            placeholder="Masukkan nama fasilitas kesehatan"
             value={stateFasilitasKesehatan.create.form.name}
-            onChange={(e) => {
-              stateFasilitasKesehatan.create.form.name = e.target.value;
-            }}
+            onChange={(e) => (stateFasilitasKesehatan.create.form.name = e.target.value)}
+            required
           />
+
+          {/* Informasi Umum */}
           <Box>
-            <Text fz="md" fw="bold">Informasi Umum</Text>
+            <Text fz="md" fw="bold" mb={5}>Informasi Umum</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Fasilitas</Text>}
-              placeholder="masukkan fasilitas"
+              label="Fasilitas"
+              placeholder="Masukkan fasilitas"
               value={stateFasilitasKesehatan.create.form.informasiUmum.fasilitas}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.informasiUmum.fasilitas = e.target.value;
-              }}
+              onChange={(e) => (stateFasilitasKesehatan.create.form.informasiUmum.fasilitas = e.target.value)}
+              required
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Alamat</Text>}
-              placeholder="masukkan alamat"
+              label="Alamat"
+              placeholder="Masukkan alamat"
               value={stateFasilitasKesehatan.create.form.informasiUmum.alamat}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.informasiUmum.alamat = e.target.value;
-              }}
+              onChange={(e) => (stateFasilitasKesehatan.create.form.informasiUmum.alamat = e.target.value)}
+              required
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Jam Operasional</Text>}
-              placeholder="masukkan jam operasional"
+              label="Jam Operasional"
+              placeholder="Masukkan jam operasional"
               value={stateFasilitasKesehatan.create.form.informasiUmum.jamOperasional}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.informasiUmum.jamOperasional = e.target.value;
-              }}
+              onChange={(e) => (stateFasilitasKesehatan.create.form.informasiUmum.jamOperasional = e.target.value)}
+              required
             />
           </Box>
+
+          {/* Layanan Unggulan */}
           <Box>
-            <Text fz="md" fw="bold">Layanan Unggulan</Text>
+            <Text fz="md" fw="bold" mb={5}>Layanan Unggulan</Text>
             <CreateEditor
               value={stateFasilitasKesehatan.create.form.layananUnggulan.content}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.layananUnggulan.content = e;
-              }}
-            />
-          </Box>
-          <Box>
-            <Text fz="md" fw="bold">Dokter dan Tenaga Medis</Text>
-            <TextInput
-              label={<Text fz="sm" fw="bold">Nama Dokter</Text>}
-              placeholder="masukkan nama dokter"
-              value={stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.name}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.name = e.target.value;
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Specialist</Text>}
-              placeholder="masukkan specialist"
-              value={stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.specialist}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.specialist = e.target.value;
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Jadwal</Text>}
-              placeholder="masukkan jadwal"
-              value={stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.jadwal}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.jadwal = e.target.value;
-              }}
-            />
-          </Box>
-          <Box>
-            <Text fz="md" fw="bold">Fasilitas Pendukung</Text>
-            <CreateEditor
-              value={stateFasilitasKesehatan.create.form.fasilitasPendukung.content}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.fasilitasPendukung.content = e;
-              }}
-            />
-          </Box>
-          <Box>
-            <Text fz="md" fw="bold">Prosedur Pendaftaran</Text>
-            <CreateEditor
-              value={stateFasilitasKesehatan.create.form.prosedurPendaftaran.content}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.prosedurPendaftaran.content = e;
-              }}
-            />
-          </Box>
-          <Box>
-            <Text fz="md" fw="bold">Tarif dan Layanan</Text>
-            <TextInput
-              label={<Text fz="sm" fw="bold">Tarif</Text>}
-              placeholder="masukkan tarif"
-              value={stateFasilitasKesehatan.create.form.tarifDanLayanan.tarif}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.tarifDanLayanan.tarif = e.target.value;
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Layanan</Text>}
-              placeholder="masukkan layanan"
-              value={stateFasilitasKesehatan.create.form.tarifDanLayanan.layanan}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.tarifDanLayanan.layanan = e.target.value;
-              }}
+              onChange={(val) => (stateFasilitasKesehatan.create.form.layananUnggulan.content = val)}
             />
           </Box>
 
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
+          {/* Dokter dan Tenaga Medis */}
+          <Box>
+            <Text fz="md" fw="bold" mb={5}>Dokter dan Tenaga Medis</Text>
+            <TextInput
+              label="Nama Dokter"
+              placeholder="Masukkan nama dokter"
+              value={stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.name}
+              onChange={(e) => (stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.name = e.target.value)}
+              required
+            />
+            <TextInput
+              label="Spesialis"
+              placeholder="Masukkan spesialis"
+              value={stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.specialist}
+              onChange={(e) => (stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.specialist = e.target.value)}
+              required
+            />
+            <TextInput
+              label="Jadwal"
+              placeholder="Masukkan jadwal"
+              value={stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.jadwal}
+              onChange={(e) => (stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.jadwal = e.target.value)}
+              required
+            />
+          </Box>
+
+          {/* Fasilitas Pendukung */}
+          <Box>
+            <Text fz="md" fw="bold" mb={5}>Fasilitas Pendukung</Text>
+            <CreateEditor
+              value={stateFasilitasKesehatan.create.form.fasilitasPendukung.content}
+              onChange={(val) => (stateFasilitasKesehatan.create.form.fasilitasPendukung.content = val)}
+            />
+          </Box>
+
+          {/* Prosedur Pendaftaran */}
+          <Box>
+            <Text fz="md" fw="bold" mb={5}>Prosedur Pendaftaran</Text>
+            <CreateEditor
+              value={stateFasilitasKesehatan.create.form.prosedurPendaftaran.content}
+              onChange={(val) => (stateFasilitasKesehatan.create.form.prosedurPendaftaran.content = val)}
+            />
+          </Box>
+
+          {/* Tarif dan Layanan */}
+          <Box>
+            <Text fz="md" fw="bold" mb={5}>Tarif dan Layanan</Text>
+            <TextInput
+              label="Tarif"
+              placeholder="Masukkan tarif"
+              value={stateFasilitasKesehatan.create.form.tarifDanLayanan.tarif}
+              onChange={(e) => (stateFasilitasKesehatan.create.form.tarifDanLayanan.tarif = e.target.value)}
+              required
+            />
+            <TextInput
+              label="Layanan"
+              placeholder="Masukkan layanan"
+              value={stateFasilitasKesehatan.create.form.tarifDanLayanan.layanan}
+              onChange={(e) => (stateFasilitasKesehatan.create.form.tarifDanLayanan.layanan = e.target.value)}
+              required
+            />
+          </Box>
+
+          {/* Submit */}
+          <Group justify="right" mt="md">
+            <Button
+              type="submit"
+              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)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/page.tsx

@@ -1,114 +1,172 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Paper,
+  Pagination,
+  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 { IconArrowBack, 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 fasilitasKesehatanState from '../../../_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 
 
 function FasilitasKesehatan() {
+  const router = useRouter();
   const [search, setSearch] = useState("");
-  // const router = useRouter();
+
   return (
     <Box>
-      {/* <Grid>
-        <GridCol span={12}>
-          <HeaderSearch
-            title='Fasilitas Kesehatan'
-            placeholder='pencarian'
-            searchIcon={<IconSearch size={20} />}
-            value={search}
-            onChange={(e) => setSearch(e.currentTarget.value)}
-          />
-        </GridCol>
-        <GridCol span={12}>
-          <Flex gap={"xs"}>
-            <Button color={colors['blue-button']} onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/dokter-tenaga-medis`)}>
-              <IconList size={20} /> List Dokter
-            </Button>
-            <Button color={colors['blue-button']} onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/tarif-layanan`)}>
-              <IconList size={20} /> List Layanan
-            </Button>
-          </Flex>
-        </GridCol>
-      </Grid> */}
+      {/* Tombol Back */}
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={25} />
+        </Button>
+      </Box>
+
+      {/* Header Search */}
       <HeaderSearch
         title='Fasilitas Kesehatan'
-        placeholder='pencarian'
+        placeholder='Cari nama, alamat, atau jam operasional...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
+
       <ListFasilitasKesehatan search={search} />
     </Box>
   );
 }
 
+
 function ListFasilitasKesehatan({ search }: { search: string }) {
   const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState.fasilitasKesehatan)
   const router = useRouter();
 
+  const { data, page, totalPages, loading, load } = stateFasilitasKesehatan.findMany;
+
   useShallowEffect(() => {
-    stateFasilitasKesehatan.findMany.load()
-  }, [])
+    load(page, 10, search);
+  }, [page, search]);
 
-  const filteredData = (stateFasilitasKesehatan.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.informasiumum.alamat.toLowerCase().includes(keyword) ||
-      item.informasiumum.jamOperasional.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || [];
 
-  if (!stateFasilitasKesehatan.findMany.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'}>
-        <Stack>
-          <JudulList
-            title='List Fasilitas Kesehatan'
-            href='/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/create'
-          />
-          <Box style={{ overflowX: "auto" }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Fasilitas Kesehatan</TableTh>
-                  <TableTh>Dokter</TableTh>
-                  <TableTh>Layanan</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        {/* Judul + Tombol Tambah */}
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Fasilitas Kesehatan</Title>
+          <Tooltip label="Tambah Fasilitas Kesehatan" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() =>
+                router.push(
+                  '/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/create'
+                )
+              }
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        {/* Tabel */}
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>Fasilitas Kesehatan</TableTh>
+                <TableTh>Dokter</TableTh>
+                <TableTh>Layanan</TableTh>
+                <TableTh>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd>{item.name}</TableTd>
-                    <TableTd>{item.dokterdantenagamedis.name}</TableTd>
-                    <TableTd>{item.tarifdanlayanan.layanan}</TableTd>
                     <TableTd>
-                      <Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.name}
+                      </Text>
+                    </TableTd>
+                    <TableTd>{item.dokterdantenagamedis?.name || '-'}</TableTd>
+                    <TableTd>{item.tarifdanlayanan?.layanan || '-'}</TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() =>
+                          router.push(
+                            `/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/${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 fasilitas kesehatan yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+
+      {/* Pagination */}
+      <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>
     </Box>
   )
 }

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

@@ -2,7 +2,16 @@
 'use client'
 import grafikkepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
 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,9 +19,10 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function EditGrafikHasilKepuasan() {
-  const editState = useProxy(grafikkepuasan)
+  const editState = useProxy(grafikkepuasan);
   const router = useRouter();
   const params = useParams();
+
   const [formData, setFormData] = useState({
     nama: editState.update.form.nama || '',
     tanggal: editState.update.form.tanggal || '',
@@ -22,12 +32,12 @@ function EditGrafikHasilKepuasan() {
   });
 
   useEffect(() => {
-    const loadKelahiran = async () => {
+    const loadData = async () => {
       const id = params?.id as string;
       if (!id) return;
 
       try {
-        const data = await editState.update.load(id); // akses langsung, bukan dari proxy
+        const data = await editState.update.load(id);
         if (data) {
           setFormData({
             nama: data.nama || '',
@@ -43,21 +53,17 @@ function EditGrafikHasilKepuasan() {
       }
     };
 
-    loadKelahiran();
+    loadData();
   }, [params?.id]);
 
   const handleSubmit = async () => {
     try {
       editState.update.form = {
         ...editState.update.form,
-        nama: formData.nama,
-        tanggal: formData.tanggal,
-        jenisKelamin: formData.jenisKelamin,
-        alamat: formData.alamat,
-        penyakit: formData.penyakit,
+        ...formData,
       };
       await editState.update.submit();
-      toast.success('grafik hasil kepuasan berhasil diperbarui!');
+      toast.success('Grafik hasil kepuasan berhasil diperbarui!');
       router.push('/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan');
     } catch (error) {
       console.error('Error updating grafik hasil kepuasan:', error);
@@ -66,47 +72,87 @@ function EditGrafikHasilKepuasan() {
   };
 
   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 grafik hasil kepuasan</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 Grafik Hasil Kepuasan
+        </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={formData.nama}
             onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
-            placeholder="masukkan nama"
+            label="Nama"
+            placeholder="Masukkan nama"
+            required
           />
           <TextInput
-            type='date'
+            type="date"
             value={formData.tanggal}
             onChange={(e) => setFormData({ ...formData, tanggal: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Tanggal</Text>}
-            placeholder="masukkan tanggal"
+            label="Tanggal"
+            placeholder="Masukkan tanggal"
+            required
           />
           <TextInput
             value={formData.jenisKelamin}
-            onChange={(e) => setFormData({ ...formData, jenisKelamin: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Jenis Kelamin</Text>}
-            placeholder="masukkan jenis kelamin"
+            onChange={(e) =>
+              setFormData({ ...formData, jenisKelamin: e.target.value })
+            }
+            label="Jenis Kelamin"
+            placeholder="Masukkan jenis kelamin"
+            required
           />
           <TextInput
             value={formData.alamat}
             onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Alamat</Text>}
-            placeholder="masukkan alamat"
+            label="Alamat"
+            placeholder="Masukkan alamat"
+            required
           />
           <TextInput
             value={formData.penyakit}
             onChange={(e) => setFormData({ ...formData, penyakit: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Penyakit</Text>}
-            placeholder="masukkan penyakit"
+            label="Penyakit"
+            placeholder="Masukkan penyakit"
+            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)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/[id]/page.tsx

@@ -1,9 +1,8 @@
 'use client'
 import { useProxy } from 'valtio/utils';
-
-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';
 
@@ -11,103 +10,130 @@ import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirma
 import grafikkepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
 import colors from '@/con/colors';
 
-
 function DetailGrafikHasilKepuasan() {
-  const state = useProxy(grafikkepuasan)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
+  const state = useProxy(grafikkepuasan);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const params = useParams();
+  const router = useRouter();
 
   useShallowEffect(() => {
-    state.findUnique.load(params?.id as string)
-  }, [])
-
+    state.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      state.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan")
+      state.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan");
     }
-  }
+  };
 
   if (!state.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={40} />
+        <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 Data Grafik Hasil Kepuasan</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</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.nama}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Tanggal</Text>
-                  <Text fz={"lg"}>
-                    {new Date(state.findUnique.data?.tanggal).toLocaleDateString('id-ID', {
-                      day: '2-digit',
-                      month: 'long',
-                      year: 'numeric'
-                    })}
-                  </Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Jenis Kelamin</Text>
-                  <Text fz={"lg"} >{state.findUnique.data?.jenisKelamin}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Alamat</Text>
-                  <Text fz={"lg"} >{state.findUnique.data?.alamat}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Penyakit</Text>
-                  <Text fz={"lg"} >{state.findUnique.data?.penyakit}</Text>
-                </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>
+
+      {/* Wrapper Detail */}
+      <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 Data Grafik Hasil Kepuasan
+          </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.nama || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Tanggal</Text>
+                <Text fz="md" c="dimmed">
+                  {new Date(data.tanggal).toLocaleDateString("id-ID", {
+                    day: "2-digit",
+                    month: "long",
+                    year: "numeric",
+                  })}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Jenis Kelamin</Text>
+                <Text fz="md" c="dimmed">{data.jenisKelamin || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Alamat</Text>
+                <Text fz="md" c="dimmed">{data.alamat || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Penyakit</Text>
+                <Text fz="md" c="dimmed">{data.penyakit || '-'}</Text>
+              </Box>
+
+              {/* Aksi */}
+              <Group gap="sm">
+                <Tooltip label="Hapus Data" 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} />
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Data" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (state.findUnique.data) {
-                        router.push(`/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/${state.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!state.findUnique.data}
-                    color={"green"}
+                    color="green"
+                    onClick={() =>
+                      router.push(
+                        `/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/${data.id}/edit`
+                      )
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
@@ -116,10 +142,10 @@ function DetailGrafikHasilKepuasan() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus data ini?'
+        text="Apakah anda yakin ingin menghapus data ini?"
       />
     </Box>
   );
 }
 
-export default DetailGrafikHasilKepuasan;
+export default DetailGrafikHasilKepuasan;

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

@@ -3,7 +3,17 @@
 'use client'
 import grafikkepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -12,7 +22,7 @@ import { useProxy } from 'valtio/utils';
 function CreateGrafikHasilKepuasanMasyarakat() {
   const stateGrafikKepuasan = useProxy(grafikkepuasan);
   const [chartData, setChartData] = useState<any[]>([]);
-  const router = useRouter()
+  const router = useRouter();
 
   const resetForm = () => {
     stateGrafikKepuasan.create.form = {
@@ -21,82 +31,97 @@ function CreateGrafikHasilKepuasanMasyarakat() {
       jenisKelamin: "",
       alamat: "",
       penyakit: "",
-    }
-  }
+    };
+  };
 
   const handleSubmit = async () => {
     await stateGrafikKepuasan.create.create();
     resetForm();
     router.push("/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan");
-  }
+  };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack size={20} />
-        </Button>
-      </Box>
-      <Box>
-        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-          <Title order={4}>Tambah Grafik Hasil Kepuasan Masyarakat</Title>
-          <Stack gap={"xs"}>
-            <TextInput
-              label="Nama"
-              type="text"
-              value={stateGrafikKepuasan.create.form.nama}
-              placeholder="Masukkan nama"
-              onChange={(val) => {
-                stateGrafikKepuasan.create.form.nama = val.currentTarget.value;
+    <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 Grafik Hasil Kepuasan Masyarakat
+        </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="Nama"
+            placeholder="Masukkan nama"
+            value={stateGrafikKepuasan.create.form.nama}
+            onChange={(e) => (stateGrafikKepuasan.create.form.nama = e.target.value)}
+            required
+          />
+          <TextInput
+            type="date"
+            label="Tanggal"
+            placeholder="Masukkan tanggal"
+            value={stateGrafikKepuasan.create.form.tanggal}
+            onChange={(e) => (stateGrafikKepuasan.create.form.tanggal = e.target.value)}
+            required
+          />
+          <TextInput
+            label="Jenis Kelamin"
+            placeholder="Masukkan jenis kelamin"
+            value={stateGrafikKepuasan.create.form.jenisKelamin}
+            onChange={(e) => (stateGrafikKepuasan.create.form.jenisKelamin = e.target.value)}
+            required
+          />
+          <TextInput
+            label="Alamat"
+            placeholder="Masukkan alamat"
+            value={stateGrafikKepuasan.create.form.alamat}
+            onChange={(e) => (stateGrafikKepuasan.create.form.alamat = e.target.value)}
+            required
+          />
+          <TextInput
+            label="Penyakit"
+            placeholder="Masukkan penyakit"
+            value={stateGrafikKepuasan.create.form.penyakit}
+            onChange={(e) => (stateGrafikKepuasan.create.form.penyakit = e.target.value)}
+            required
+          />
+
+          <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)',
               }}
-            />
-            <TextInput
-              label="Tanggal"
-              type="date"
-              value={stateGrafikKepuasan.create.form.tanggal}
-              placeholder="Masukkan tanggal"
-              onChange={(val) => {
-                stateGrafikKepuasan.create.form.tanggal = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              label="Jenis Kelamin"
-              type="text"
-              value={stateGrafikKepuasan.create.form.jenisKelamin}
-              placeholder="Masukkan jenis kelamin"
-              onChange={(val) => {
-                stateGrafikKepuasan.create.form.jenisKelamin = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              label="Alamat"
-              type="text"
-              value={stateGrafikKepuasan.create.form.alamat}
-              placeholder="Masukkan alamat"
-              onChange={(val) => {
-                stateGrafikKepuasan.create.form.alamat = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              label="Penyakit"
-              type="text"
-              value={stateGrafikKepuasan.create.form.penyakit}
-              placeholder="Masukkan penyakit"
-              onChange={(val) => {
-                stateGrafikKepuasan.create.form.penyakit = val.currentTarget.value;
-              }}
-            />
-            <Group>
-              <Button
-                bg={colors['blue-button']}
-                mt={10}
-                onClick={handleSubmit}
-              >
-                Submit
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Box>
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }

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

@@ -1,99 +1,108 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* 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, Title } 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 { useMediaQuery, useShallowEffect } from '@mantine/hooks';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { IconArrowBack, IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
+import { Bar, BarChart, Tooltip as ChartTooltip, Legend, XAxis, YAxis } from 'recharts';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import grafikkepuasan from '../../../_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
 
 function GrafikHasilKepuasanMasyarakat() {
   const [search, setSearch] = useState("");
+  const router = useRouter();
+
   return (
     <Box>
+      {/* Tombol Back */}
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={25} />
+        </Button>
+      </Box>
+
+      {/* Header Search */}
       <HeaderSearch
         title='Grafik Hasil Kepuasan Masyarakat'
-        placeholder='pencarian'
+        placeholder='Cari nama atau alamat...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
+
       <ListGrafikHasilKepuasanMasyarakat search={search} />
     </Box>
   );
 }
+
 function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
   type PDKMGrafik = {
     id: string;
     nama: string;
-    tanggal: string | Date; // Allow both string and Date types
+    tanggal: string | Date;
     jenisKelamin: string;
     alamat: string;
     penyakit: string;
-    createdAt?: Date;     // Add optional fields that might come from the API
-    updatedAt?: Date;
-    deletedAt?: Date | null;
-  }
+  };
+
   const stateGrafikKepuasan = useProxy(grafikkepuasan);
   const [chartData, setChartData] = useState<PDKMGrafik[]>([]);
-  const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
-  const isTablet = useMediaQuery('(max-width: 1024px)')
-  const isMobile = useMediaQuery('(max-width: 768px)')
+  const [mounted, setMounted] = useState(false);
+  const isTablet = useMediaQuery('(max-width: 1024px)');
+  const isMobile = useMediaQuery('(max-width: 768px)');
   const router = useRouter();
 
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load
-  } = stateGrafikKepuasan.findMany;
+  const { data, page, totalPages, loading, load } = stateGrafikKepuasan.findMany;
 
   useShallowEffect(() => {
-    setMounted(true)
-    load(page, 10, search)
-  }, [page, search])
+    setMounted(true);
+    load(page, 10, search);
+  }, [page, search]);
 
   useEffect(() => {
-    setMounted(true);
     if (data) {
       setChartData(data.map((item) => ({
-        id: item.id,
-        nama: item.nama,
-        tanggal: item.tanggal instanceof Date ? item.tanggal.toISOString() : item.tanggal,
-        jenisKelamin: item.jenisKelamin,
-        alamat: item.alamat,
-        penyakit: item.penyakit,
+        ...item,
+        tanggal: item.tanggal instanceof Date ? item.tanggal.toISOString() : item.tanggal
       })));
     }
   }, [data]);
 
-  // Add this function to process the data
   const processDiseaseData = (data: PDKMGrafik[]) => {
     const diseaseCount: Record<string, number> = {};
-
     data.forEach(item => {
       const penyakit = item.penyakit.trim();
       if (penyakit) {
         diseaseCount[penyakit] = (diseaseCount[penyakit] || 0) + 1;
       }
     });
-
-    return Object.entries(diseaseCount).map(([name, count]) => ({
-      name,
-      count
-    }));
+    return Object.entries(diseaseCount).map(([name, count]) => ({ name, count }));
   };
 
-  // Add this state to store the processed chart data
   const [diseaseChartData, setDiseaseChartData] = useState<{ name: string, count: number }[]>([]);
 
-  // Update the chart data when data changes
   useEffect(() => {
     if (data && data.length > 0) {
       setDiseaseChartData(processDiseaseData(data));
@@ -104,97 +113,136 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
 
   if (loading || !data) {
     return (
-      <Stack>
-        <Skeleton h={500} />
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box>
-      <Stack gap={"xs"}>
-        {/* Form Input */}
-        <Paper bg={colors['white-1']} p={'md'}>
-          <JudulList
-            title='List Grafik Hasil Kepuasan Masyarakat'
-            href='/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/create'
-          />
-          <Table striped withTableBorder withRowBorders>
+    <Box py={10}>
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        {/* Judul + Tombol Tambah */}
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Grafik Hasil Kepuasan Masyarakat</Title>
+          <Tooltip label="Tambah Data" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() =>
+                router.push(
+                  '/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/create'
+                )
+              }
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        {/* Tabel */}
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
             <TableThead>
               <TableTr>
                 <TableTh>Nama</TableTh>
                 <TableTh>Tanggal</TableTh>
                 <TableTh>Jenis Kelamin</TableTh>
                 <TableTh>Penyakit</TableTh>
-                <TableTh>Detail</TableTh>
+                <TableTh>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.nama}</TableTd>
-                  <TableTd>
-                    {new Date(item.tanggal).toLocaleDateString('id-ID', {
-                      day: '2-digit',
-                      month: 'long',
-                      year: 'numeric'
-                    })}
-                  </TableTd>
-                  <TableTd>{item.jenisKelamin}</TableTd>
-                  <TableTd>{item.penyakit}</TableTd>
-                  <TableTd>
-                    <Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/${item.id}`)}>
-                      <IconDeviceImacCog size={20} />
-                    </Button>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{item.nama}</TableTd>
+                    <TableTd>
+                      {new Date(item.tanggal).toLocaleDateString('id-ID', {
+                        day: '2-digit',
+                        month: 'long',
+                        year: 'numeric',
+                      })}
+                    </TableTd>
+                    <TableTd>{item.jenisKelamin}</TableTd>
+                    <TableTd>{item.penyakit}</TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() =>
+                          router.push(
+                            `/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/${item.id}`
+                          )
+                        }
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={5}>
+                    <Center py={20}>
+                      <Text color="dimmed">
+                        Tidak ada data kepuasan masyarakat yang cocok
+                      </Text>
+                    </Center>
                   </TableTd>
                 </TableTr>
-              ))}
+              )}
             </TableTbody>
           </Table>
+        </Box>
+      </Paper>
+
+      {/* Pagination */}
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
+        />
+      </Center>
+
+      {/* Chart */}
+      <Box mt="lg" style={{ width: '100%', minWidth: 300, height: 420, minHeight: 300 }}>
+        <Paper bg={colors['white-1']} p={'md'}>
+          <Title pb={10} order={4}>Grafik Hasil Kepuasan Masyarakat</Title>
+          {mounted && diseaseChartData.length > 0 ? (
+            <BarChart
+              width={isMobile ? 450 : isTablet ? 500 : 550}
+              height={350}
+              data={diseaseChartData}
+            >
+              <XAxis
+                dataKey="name"
+                tick={{ fontSize: 12 }}
+                interval={0}
+                angle={-45}
+                textAnchor="end"
+                height={70}
+              />
+              <YAxis />
+              <ChartTooltip />
+              <Legend />
+              <Bar dataKey="count" fill={colors['blue-button']} name="Jumlah Kasus" />
+            </BarChart>
+          ) : (
+            <Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
+          )}
         </Paper>
-        <Center>
-          <Pagination
-            value={page}
-            onChange={(newPage) => load(newPage)} // ini penting!
-            total={totalPages}
-            mt="md"
-            mb="md"
-          />
-        </Center>
-
-
-        {/* Chart */}
-        {!mounted && !chartData ? (
-          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Title pb={10} order={3}>Grafik Hasil Kepuasan Masyarakat</Title>
-              <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
-            </Paper>
-          </Box>
-        ) : (
-          <Box style={{ width: '100%', minWidth: 300, height: 420, minHeight: 300 }}>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Title pb={10} order={4}>Grafik Hasil Kepuasan Masyarakat</Title>
-              {mounted && diseaseChartData.length > 0 && (
-                <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={diseaseChartData} >
-                  <XAxis
-                    dataKey="name"
-                    tick={{ fontSize: 12 }}
-                    interval={0}
-                    angle={-45}
-                    textAnchor="end"
-                    height={70}
-                  />
-                  <YAxis />
-                  <Tooltip />
-                  <Legend />
-                  <Bar dataKey="count" fill={colors['blue-button']} name="Jumlah Kasus" />
-                </BarChart>
-              )}
-            </Paper>
-          </Box>
-        )}
-      </Stack>
+      </Box>
     </Box>
   );
 }

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

@@ -4,7 +4,17 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import jadwalKegiatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
 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';
@@ -128,33 +138,14 @@ function EditJadwalKegiatan() {
       stateJadwalKegiatan.edit.form = {
         ...stateJadwalKegiatan.edit.form,
         content: formData.content,
-        informasiJadwalKegiatan: {
-          name: formData.informasiJadwalKegiatan.name,
-          tanggal: formData.informasiJadwalKegiatan.tanggal,
-          waktu: formData.informasiJadwalKegiatan.waktu,
-          lokasi: formData.informasiJadwalKegiatan.lokasi,
-        },
-        deskripsiJadwalKegiatan: {
-          deskripsi: formData.deskripsiJadwalKegiatan.deskripsi,
-        },
-        layananJadwalKegiatan: {
-          content: formData.layananJadwalKegiatan.content,
-        },
-        syaratKetentuanJadwalKegiatan: {
-          content: formData.syaratKetentuanJadwalKegiatan.content,
-        },
-        dokumenJadwalKegiatan: {
-          content: formData.dokumenJadwalKegiatan.content,
-        },
-        pendaftaranJadwalKegiatan: {
-          name: formData.pendaftaranJadwalKegiatan.name,
-          tanggal: formData.pendaftaranJadwalKegiatan.tanggal,
-          namaOrangtua: formData.pendaftaranJadwalKegiatan.namaOrangtua,
-          nomor: formData.pendaftaranJadwalKegiatan.nomor,
-          alamat: formData.pendaftaranJadwalKegiatan.alamat,
-          catatan: formData.pendaftaranJadwalKegiatan.catatan,
-        },
+        informasiJadwalKegiatan: { ...formData.informasiJadwalKegiatan },
+        deskripsiJadwalKegiatan: { ...formData.deskripsiJadwalKegiatan },
+        layananJadwalKegiatan: { ...formData.layananJadwalKegiatan },
+        syaratKetentuanJadwalKegiatan: { ...formData.syaratKetentuanJadwalKegiatan },
+        dokumenJadwalKegiatan: { ...formData.dokumenJadwalKegiatan },
+        pendaftaranJadwalKegiatan: { ...formData.pendaftaranJadwalKegiatan },
       };
+
       const success = await stateJadwalKegiatan.edit.submit();
       if (success) {
         toast.success("Jadwal kegiatan berhasil diperbarui!");
@@ -165,241 +156,164 @@ function EditJadwalKegiatan() {
       toast.error(error instanceof Error ? error.message : "Gagal memperbarui data jadwal kegiatan");
     }
   };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant="subtle" color="blue">
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Stack gap="xs">
-        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Edit Jadwal Kegiatan</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 Jadwal Kegiatan
+        </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 Jadwal */}
           <TextInput
-            label={<Text fz="sm" fw="bold">Nama Jadwal Kegiatan</Text>}
-            placeholder="masukkan nama jadwal kegiatan"
+            label="Nama Jadwal Kegiatan"
+            placeholder="Masukkan nama jadwal kegiatan"
             value={formData.content}
-            onChange={(e) => {
-              setFormData(prev => ({
-                ...prev,
-                content: e.target.value
-              }));
-            }}
+            onChange={(e) => setFormData((prev) => ({ ...prev, content: e.target.value }))}
           />
-         <Box>
-         <Text fz="sm" fw="bold">Deskripsi Jadwal Kegiatan</Text>
-          <EditEditor
-            value={formData.deskripsiJadwalKegiatan.deskripsi}
-            onChange={(e) => {
-              setFormData(prev => ({
-                ...prev,
-                deskripsiJadwalKegiatan: {
-                  ...prev.deskripsiJadwalKegiatan,
-                  deskripsi: e
-                }
-              }));
-            }}
-          />
-         </Box>
+
+          {/* Deskripsi */}
           <Box>
-            <Text fz="md" fw="bold">Informasi Jadwal Kegiatan</Text>
-            <TextInput
-              label={<Text fz="sm" fw="bold">Nama</Text>}
-              placeholder="masukkan nama"
-              value={formData.informasiJadwalKegiatan.name}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  informasiJadwalKegiatan: {
-                    ...prev.informasiJadwalKegiatan,
-                    name: e.target.value
-                  }
-                }));
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Tanggal</Text>}
-              placeholder="masukkan tanggal"
-              value={formData.informasiJadwalKegiatan.tanggal}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  informasiJadwalKegiatan: {
-                    ...prev.informasiJadwalKegiatan,
-                    tanggal: e.target.value
-                  }
-                }));
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Waktu</Text>}
-              placeholder="masukkan waktu"
-              value={formData.informasiJadwalKegiatan.waktu}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  informasiJadwalKegiatan: {
-                    ...prev.informasiJadwalKegiatan,
-                    waktu: e.target.value
-                  }
-                }));
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Lokasi</Text>}
-              placeholder="masukkan lokasi"
-              value={formData.informasiJadwalKegiatan.lokasi}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  informasiJadwalKegiatan: {
-                    ...prev.informasiJadwalKegiatan,
-                    lokasi: e.target.value
-                  }
-                }));
-              }}
+            <Text fz="sm" fw="bold">Deskripsi Jadwal Kegiatan</Text>
+            <EditEditor
+              value={formData.deskripsiJadwalKegiatan.deskripsi}
+              onChange={(val) => setFormData((prev) => ({
+                ...prev,
+                deskripsiJadwalKegiatan: { deskripsi: val }
+              }))}
             />
           </Box>
+
+          {/* Informasi Jadwal */}
+          <Box>
+            <Text fz="md" fw="bold">Informasi Jadwal Kegiatan</Text>
+            <TextInput label="Nama" value={formData.informasiJadwalKegiatan.name}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, informasiJadwalKegiatan: { ...prev.informasiJadwalKegiatan, name: e.target.value }
+              }))}
+            />
+            <TextInput type="date" label="Tanggal" value={formData.informasiJadwalKegiatan.tanggal}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, informasiJadwalKegiatan: { ...prev.informasiJadwalKegiatan, tanggal: e.target.value }
+              }))}
+            />
+            <TextInput label="Waktu" value={formData.informasiJadwalKegiatan.waktu}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, informasiJadwalKegiatan: { ...prev.informasiJadwalKegiatan, waktu: e.target.value }
+              }))}
+            />
+            <TextInput label="Lokasi" value={formData.informasiJadwalKegiatan.lokasi}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, informasiJadwalKegiatan: { ...prev.informasiJadwalKegiatan, lokasi: e.target.value }
+              }))}
+            />
+          </Box>
+
+          {/* Layanan */}
           <Box>
             <Text fz="md" fw="bold">Layanan Jadwal Kegiatan</Text>
             <EditEditor
               value={formData.layananJadwalKegiatan.content}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  layananJadwalKegiatan: {
-                    ...prev.layananJadwalKegiatan,
-                    content: e
-                  }
-                }));
-              }}
+              onChange={(val) => setFormData((prev) => ({
+                ...prev,
+                layananJadwalKegiatan: { content: val }
+              }))}
             />
           </Box>
+
+          {/* Syarat */}
           <Box>
-            <Text fz="md" fw="bold">Syarat dan Ketentuan Jadwal Kegiatan</Text>
+            <Text fz="md" fw="bold">Syarat dan Ketentuan</Text>
             <EditEditor
               value={formData.syaratKetentuanJadwalKegiatan.content}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  syaratKetentuanJadwalKegiatan: {
-                    ...prev.syaratKetentuanJadwalKegiatan,
-                    content: e
-                  }
-                }));
-              }}
+              onChange={(val) => setFormData((prev) => ({
+                ...prev,
+                syaratKetentuanJadwalKegiatan: { content: val }
+              }))}
             />
           </Box>
+
+          {/* Dokumen */}
           <Box>
             <Text fz="md" fw="bold">Dokumen Jadwal Kegiatan</Text>
             <EditEditor
               value={formData.dokumenJadwalKegiatan.content}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  dokumenJadwalKegiatan: {
-                    ...prev.dokumenJadwalKegiatan,
-                    content: e
-                  }
-                }));
-              }}
-            />
-          </Box>
-          <Box>
-            <Text fz="md" fw="bold">Pendaftaran Jadwal Kegiatan</Text>
-            <TextInput
-              label={<Text fz="sm" fw="bold">Nama</Text>}
-              placeholder="masukkan nama"
-              value={formData.pendaftaranJadwalKegiatan.name}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  pendaftaranJadwalKegiatan: {
-                    ...prev.pendaftaranJadwalKegiatan,
-                    name: e.target.value
-                  }
-                }));
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Tanggal</Text>}
-              placeholder="masukkan tanggal"
-              value={formData.pendaftaranJadwalKegiatan.tanggal}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  pendaftaranJadwalKegiatan: {
-                    ...prev.pendaftaranJadwalKegiatan,
-                    tanggal: e.target.value
-                  }
-                }));
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Nama Orangtua</Text>}
-              placeholder="masukkan nama orangtua"
-              value={formData.pendaftaranJadwalKegiatan.namaOrangtua}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  pendaftaranJadwalKegiatan: {
-                    ...prev.pendaftaranJadwalKegiatan,
-                    namaOrangtua: e.target.value
-                  }
-                }));
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Nomor</Text>}
-              placeholder="masukkan nomor"
-              value={formData.pendaftaranJadwalKegiatan.nomor}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  pendaftaranJadwalKegiatan: {
-                    ...prev.pendaftaranJadwalKegiatan,
-                    nomor: e.target.value
-                  }
-                }));
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Alamat</Text>}
-              placeholder="masukkan alamat"
-              value={formData.pendaftaranJadwalKegiatan.alamat}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  pendaftaranJadwalKegiatan: {
-                    ...prev.pendaftaranJadwalKegiatan,
-                    alamat: e.target.value
-                  }
-                }));
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Catatan</Text>}
-              placeholder="masukkan catatan"
-              value={formData.pendaftaranJadwalKegiatan.catatan}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  pendaftaranJadwalKegiatan: {
-                    ...prev.pendaftaranJadwalKegiatan,
-                    catatan: e.target.value
-                  }
-                }));
-              }}
+              onChange={(val) => setFormData((prev) => ({
+                ...prev,
+                dokumenJadwalKegiatan: { content: val }
+              }))}
             />
           </Box>
 
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
+          {/* Pendaftaran */}
+          <Box>
+            <Text fz="md" fw="bold">Pendaftaran Jadwal Kegiatan</Text>
+            <TextInput label="Nama" value={formData.pendaftaranJadwalKegiatan.name}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, pendaftaranJadwalKegiatan: { ...prev.pendaftaranJadwalKegiatan, name: e.target.value }
+              }))}
+            />
+            <TextInput type="date" label="Tanggal" value={formData.pendaftaranJadwalKegiatan.tanggal}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, pendaftaranJadwalKegiatan: { ...prev.pendaftaranJadwalKegiatan, tanggal: e.target.value }
+              }))}
+            />
+            <TextInput label="Nama Orangtua" value={formData.pendaftaranJadwalKegiatan.namaOrangtua}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, pendaftaranJadwalKegiatan: { ...prev.pendaftaranJadwalKegiatan, namaOrangtua: e.target.value }
+              }))}
+            />
+            <TextInput label="Nomor" value={formData.pendaftaranJadwalKegiatan.nomor}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, pendaftaranJadwalKegiatan: { ...prev.pendaftaranJadwalKegiatan, nomor: e.target.value }
+              }))}
+            />
+            <TextInput label="Alamat" value={formData.pendaftaranJadwalKegiatan.alamat}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, pendaftaranJadwalKegiatan: { ...prev.pendaftaranJadwalKegiatan, alamat: e.target.value }
+              }))}
+            />
+            <TextInput label="Catatan" value={formData.pendaftaranJadwalKegiatan.catatan}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, pendaftaranJadwalKegiatan: { ...prev.pendaftaranJadwalKegiatan, catatan: e.target.value }
+              }))}
+            />
+          </Box>
+
+          {/* 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>
-      </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/jadwal_kegiatan/[id]/page.tsx

@@ -2,9 +2,9 @@
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import jadwalKegiatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
 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';
@@ -32,83 +32,128 @@ function DetailJadwalKegiatan() {
   if (!stateJadwalKegiatan.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
     )
   }
 
+  const data = stateJadwalKegiatan.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 Jadwal Kegiatan</Text>
-          {stateJadwalKegiatan.findUnique.data ? (
-            <Paper bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Nama Kegiatan</Text>
-                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.content}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Informasi</Text>
-                  <Text fz={"md"} fw={"bold"}>Nama</Text>
-                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.informasijadwalkegiatan.name}</Text>
-                  <Text fz={"md"} fw={"bold"}>Tanggal</Text>
-                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.informasijadwalkegiatan.tanggal}</Text>
-                  <Text fz={"md"} fw={"bold"}>Waktu</Text>
-                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.informasijadwalkegiatan.waktu}</Text>
-                  <Text fz={"md"} fw={"bold"}>Lokasi</Text>
-                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.informasijadwalkegiatan.lokasi}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateJadwalKegiatan.findUnique.data.deskripsijadwalkegiatan.deskripsi }} />
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Layanan</Text>
-                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateJadwalKegiatan.findUnique.data.layananjadwalkegiatan.content }} />
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Syarat Ketentuan</Text>
-                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateJadwalKegiatan.findUnique.data.syaratketentuanjadwalkegiatan.content}} />
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Dokumen</Text>
-                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateJadwalKegiatan.findUnique.data.dokumenjadwalkegiatan.content }} />
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Prosedur Pendaftaran</Text>
-                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.pendaftaranjadwalkegiatan.name}</Text>
-                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.pendaftaranjadwalkegiatan.tanggal}</Text>
-                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.pendaftaranjadwalkegiatan.namaOrangtua}</Text>
-                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.pendaftaranjadwalkegiatan.nomor}</Text>
-                  <Text fz={"md"}>{stateJadwalKegiatan.findUnique.data.pendaftaranjadwalkegiatan.alamat}</Text>
-                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateJadwalKegiatan.findUnique.data.pendaftaranjadwalkegiatan.catatan }} />
-                </Box>
-                <Box>
-                  <Flex gap={"xs"}>
-                    <Button color="red" onClick={() => {
-                      if (stateJadwalKegiatan.findUnique.data) {
-                        setSelectedId(stateJadwalKegiatan.findUnique.data.id)
-                        setModalHapus(true)
-                      }
-                    }}>
-                      <IconX size={20} />
-                    </Button>
-                    <Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan/${stateJadwalKegiatan.findUnique.data?.id}/edit`)} color="green">
-                      <IconEdit size={20} />
-                    </Button>
-                  </Flex>
-                </Box>
-              </Stack>
-            </Paper>
-          ) : null}
+    <Box py={10}>
+      {/* Tombol Back */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Wrapper Detail */}
+      <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 Jadwal Kegiatan
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              {/* Nama Kegiatan */}
+              <Box>
+                <Text fz="lg" fw="bold">Nama Kegiatan</Text>
+                <Text fz="md" c="dimmed">{data.content || '-'}</Text>
+              </Box>
+
+              {/* Informasi */}
+              <Box>
+                <Text fz="lg" fw="bold">Informasi</Text>
+                <Text fz="md" fw="bold">Nama</Text>
+                <Text fz="md" c="dimmed">{data.informasijadwalkegiatan.name || '-'}</Text>
+                <Text fz="md" fw="bold">Tanggal</Text>
+                <Text fz="md" c="dimmed">{data.informasijadwalkegiatan.tanggal || '-'}</Text>
+                <Text fz="md" fw="bold">Waktu</Text>
+                <Text fz="md" c="dimmed">{data.informasijadwalkegiatan.waktu || '-'}</Text>
+                <Text fz="md" fw="bold">Lokasi</Text>
+                <Text fz="md" c="dimmed">{data.informasijadwalkegiatan.lokasi || '-'}</Text>
+              </Box>
+
+              {/* Deskripsi */}
+              <Box>
+                <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.deskripsijadwalkegiatan.deskripsi }} />
+              </Box>
+
+              {/* Layanan */}
+              <Box>
+                <Text fz="lg" fw="bold">Layanan</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.layananjadwalkegiatan.content }} />
+              </Box>
+
+              {/* Syarat Ketentuan */}
+              <Box>
+                <Text fz="lg" fw="bold">Syarat Ketentuan</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.syaratketentuanjadwalkegiatan.content }} />
+              </Box>
+
+              {/* Dokumen */}
+              <Box>
+                <Text fz="lg" fw="bold">Dokumen</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.dokumenjadwalkegiatan.content }} />
+              </Box>
+
+              {/* Prosedur Pendaftaran */}
+              <Box>
+                <Text fz="lg" fw="bold">Prosedur Pendaftaran</Text>
+                <Text fz="md" c="dimmed">{data.pendaftaranjadwalkegiatan.name}</Text>
+                <Text fz="md" c="dimmed">{data.pendaftaranjadwalkegiatan.tanggal}</Text>
+                <Text fz="md" c="dimmed">{data.pendaftaranjadwalkegiatan.namaOrangtua}</Text>
+                <Text fz="md" c="dimmed">{data.pendaftaranjadwalkegiatan.nomor}</Text>
+                <Text fz="md" c="dimmed">{data.pendaftaranjadwalkegiatan.alamat}</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.pendaftaranjadwalkegiatan.catatan }} />
+              </Box>
+
+              {/* Aksi */}
+              <Group gap="sm">
+                <Tooltip label="Hapus Data" 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 Data" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() =>
+                      router.push(`/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan/${data.id}/edit`)
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 

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

@@ -2,127 +2,158 @@
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import jadwalKegiatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
 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 { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-
 function CreateJadwalKegiatan() {
-  const stateJadwalKegiatan = useProxy(jadwalKegiatanState)
+  const stateJadwalKegiatan = useProxy(jadwalKegiatanState);
   const router = useRouter();
 
-
   const resetForm = () => {
-    stateJadwalKegiatan.edit.form = {
-      content: "",
+    stateJadwalKegiatan.create.form = {
+      content: '',
       informasiJadwalKegiatan: {
-        name: "",
-        tanggal: "",
-        waktu: "",
-        lokasi: "",
+        name: '',
+        tanggal: '',
+        waktu: '',
+        lokasi: '',
       },
       deskripsiJadwalKegiatan: {
-        deskripsi: "",
+        deskripsi: '',
       },
       layananJadwalKegiatan: {
-        content: "",
+        content: '',
       },
       syaratKetentuanJadwalKegiatan: {
-        content: "",
+        content: '',
       },
       dokumenJadwalKegiatan: {
-        content: "",
+        content: '',
       },
       pendaftaranJadwalKegiatan: {
-        name: "",
-        tanggal: "",
-        namaOrangtua: "",
-        nomor: "",
-        alamat: "",
-        catatan: "",
+        name: '',
+        tanggal: '',
+        namaOrangtua: '',
+        nomor: '',
+        alamat: '',
+        catatan: '',
       },
     };
   };
 
-
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     await stateJadwalKegiatan.create.submit();
 
-    toast.success("Data berhasil disimpan");
+    toast.success('Data berhasil disimpan');
     resetForm();
-    // After successful submission, redirect to the list page
     router.push('/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan');
-  }
+  };
 
   return (
-    <Box component="form" onSubmit={handleSubmit}>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md" component="form" onSubmit={handleSubmit}>
+      {/* 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 Jadwal Kegiatan
+        </Title>
+      </Group>
 
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Create Jadwal Kegiatan</Title>
+      {/* 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 Jadwal Kegiatan</Text>}
-            placeholder="masukkan nama jadwal kegiatan"
+            label="Nama Jadwal Kegiatan"
+            placeholder="Masukkan nama jadwal kegiatan"
             value={stateJadwalKegiatan.create.form.content}
             onChange={(e) => {
               stateJadwalKegiatan.create.form.content = e.target.value;
             }}
+            required
           />
-         <Box>
-         <Text fz="sm" fw="bold">Deskripsi Jadwal Kegiatan</Text>
-          <CreateEditor
-            value={stateJadwalKegiatan.create.form.deskripsiJadwalKegiatan.deskripsi}
-            onChange={(e) => {
-              stateJadwalKegiatan.create.form.deskripsiJadwalKegiatan.deskripsi = e;
-            }}
-          />
-         </Box>
+
           <Box>
-            <Text fz="md" fw="bold">Informasi Jadwal Kegiatan</Text>
+            <Text fz="sm" fw="bold" mb={4}>Deskripsi Jadwal Kegiatan</Text>
+            <CreateEditor
+              value={stateJadwalKegiatan.create.form.deskripsiJadwalKegiatan.deskripsi}
+              onChange={(e) => {
+                stateJadwalKegiatan.create.form.deskripsiJadwalKegiatan.deskripsi = e;
+              }}
+            />
+          </Box>
+
+          <Box>
+            <Text fz="md" fw="bold" mb="sm">Informasi Jadwal Kegiatan</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Nama</Text>}
-              placeholder="masukkan nama"
+              label="Nama"
+              required
+              placeholder="Masukkan nama"
               value={stateJadwalKegiatan.create.form.informasiJadwalKegiatan.name}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.informasiJadwalKegiatan.name = e.target.value;
               }}
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Tanggal</Text>}
-              placeholder="masukkan tanggal"
+              type="date"
+              required
+              label="Tanggal"
               value={stateJadwalKegiatan.create.form.informasiJadwalKegiatan.tanggal}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.informasiJadwalKegiatan.tanggal = e.target.value;
               }}
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Waktu</Text>}
-              placeholder="masukkan waktu"
+              label="Waktu"
+              required
+              placeholder="Masukkan waktu"
               value={stateJadwalKegiatan.create.form.informasiJadwalKegiatan.waktu}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.informasiJadwalKegiatan.waktu = e.target.value;
               }}
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Lokasi</Text>}
-              placeholder="masukkan lokasi"
+              label="Lokasi"
+              required
+              placeholder="Masukkan lokasi"
               value={stateJadwalKegiatan.create.form.informasiJadwalKegiatan.lokasi}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.informasiJadwalKegiatan.lokasi = e.target.value;
               }}
             />
           </Box>
+
           <Box>
-            <Text fz="md" fw="bold">Layanan Jadwal Kegiatan</Text>
+            <Text fz="md" fw="bold" mb="sm">Layanan Jadwal Kegiatan</Text>
             <CreateEditor
               value={stateJadwalKegiatan.create.form.layananJadwalKegiatan.content}
               onChange={(e) => {
@@ -130,8 +161,9 @@ function CreateJadwalKegiatan() {
               }}
             />
           </Box>
+
           <Box>
-            <Text fz="md" fw="bold">Syarat dan Ketentuan Jadwal Kegiatan</Text>
+            <Text fz="md" fw="bold" mb="sm">Syarat & Ketentuan</Text>
             <CreateEditor
               value={stateJadwalKegiatan.create.form.syaratKetentuanJadwalKegiatan.content}
               onChange={(e) => {
@@ -139,8 +171,9 @@ function CreateJadwalKegiatan() {
               }}
             />
           </Box>
+
           <Box>
-            <Text fz="md" fw="bold">Dokumen Jadwal Kegiatan</Text>
+            <Text fz="md" fw="bold" mb="sm">Dokumen</Text>
             <CreateEditor
               value={stateJadwalKegiatan.create.form.dokumenJadwalKegiatan.content}
               onChange={(e) => {
@@ -148,51 +181,58 @@ function CreateJadwalKegiatan() {
               }}
             />
           </Box>
+
           <Box>
-            <Text fz="md" fw="bold">Pendaftaran Jadwal Kegiatan</Text>
+            <Text fz="md" fw="bold" mb="sm">Pendaftaran Jadwal Kegiatan</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Nama</Text>}
-              placeholder="masukkan nama"
+              label="Nama"
+              required
+              placeholder="Masukkan nama"
               value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.name}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.name = e.target.value;
               }}
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Tanggal</Text>}
-              placeholder="masukkan tanggal"
+              type="date"
+              required
+              label="Tanggal"
               value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.tanggal}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.tanggal = e.target.value;
               }}
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Nama Orangtua</Text>}
-              placeholder="masukkan nama orangtua"
+              label="Nama Orangtua"
+              required
+              placeholder="Masukkan nama orangtua"
               value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.namaOrangtua}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.namaOrangtua = e.target.value;
               }}
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Nomor</Text>}
-              placeholder="masukkan nomor"
+              label="Nomor"
+              required
+              placeholder="Masukkan nomor"
               value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.nomor}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.nomor = e.target.value;
               }}
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Alamat</Text>}
-              placeholder="masukkan alamat"
+              label="Alamat"
+              required
+              placeholder="Masukkan alamat"
               value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.alamat}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.alamat = e.target.value;
               }}
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Catatan</Text>}
-              placeholder="masukkan catatan"
+              label="Catatan"
+              required
+              placeholder="Masukkan catatan"
               value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.catatan}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.catatan = e.target.value;
@@ -200,9 +240,21 @@ function CreateJadwalKegiatan() {
             />
           </Box>
 
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
+          {/* Save Button */}
+          <Group justify="right">
+            <Button
+              type="submit"
+              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)/kesehatan/data-kesehatan-warga/jadwal_kegiatan/page.tsx

@@ -1,96 +1,185 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Paper,
+  Pagination,
+  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 { IconArrowBack, IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import jadwalKegiatanState from '../../../_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
 import { useState } from 'react';
 
 function JadwalKegiatan() {
+  const router = useRouter();
   const [search, setSearch] = useState("");
+
   return (
     <Box>
+      {/* Tombol Back */}
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={25} />
+        </Button>
+      </Box>
+
+      {/* Header Search */}
       <HeaderSearch
-        title='Jadwal Kegiatan'
-        placeholder='pencarian'
+        title="Jadwal Kegiatan"
+        placeholder="Cari nama, tanggal, lokasi..."
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListJadwalKegiatan search={search}/>
+
+      <ListJadwalKegiatan search={search} />
     </Box>
   );
 }
 
 function ListJadwalKegiatan({ search }: { search: string }) {
-  const stateJadwalKegiatan = useProxy(jadwalKegiatanState)
+  const state = useProxy(jadwalKegiatanState);
   const router = useRouter();
 
+  const { data, page, totalPages, loading, load } = state.findMany;
+
   useShallowEffect(() => {
-    stateJadwalKegiatan.findMany.load()
-  }, [])
+    load(page, 10, search);
+  }, [page, search]);
 
-  const filteredData = (stateJadwalKegiatan.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
+  const filteredData = data || [];
+
+  if (loading || !data) {
     return (
-      item.informasijadwalkegiatan.name.toLowerCase().includes(keyword) ||
-      item.informasijadwalkegiatan.tanggal.toLowerCase().includes(keyword) ||
-      item.informasijadwalkegiatan.waktu.toLowerCase().includes(keyword) ||
-      item.informasijadwalkegiatan.lokasi.toLowerCase().includes(keyword)
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
     );
-  });
-
-  if (!stateJadwalKegiatan.findMany.data) {
-    return (
-      <Box py={10}>
-        <Skeleton h={500}/>
-      </Box>
-    )
   }
+
   return (
     <Box py={10}>
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack>
-        <JudulList
-          title='List Jadwal Kegiatan'
-          href='/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan/create'
-        />
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        {/* Judul + Tombol Tambah */}
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Jadwal Kegiatan</Title>
+          <Tooltip label="Tambah Jadwal Kegiatan" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() =>
+                router.push('/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan/create')
+              }
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        {/* Tabel */}
         <Box style={{ overflowX: "auto" }}>
-          <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+          <Table highlightOnHover>
             <TableThead>
               <TableTr>
                 <TableTh>Nama</TableTh>
                 <TableTh>Tanggal</TableTh>
                 <TableTh>Waktu</TableTh>
                 <TableTh>Lokasi</TableTh>
-                <TableTh>Detail</TableTh>
+                <TableTh>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.informasijadwalkegiatan.name}</TableTd>
-                  <TableTd>{item.informasijadwalkegiatan.tanggal}</TableTd>
-                  <TableTd>{item.informasijadwalkegiatan.waktu}</TableTd>
-                  <TableTd>{item.informasijadwalkegiatan.lokasi}</TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan/${item.id}`)}>
-                      <IconDeviceImacCog size={25} />
-                    </Button>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.informasijadwalkegiatan.name}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      {new Date(item.informasijadwalkegiatan.tanggal).toLocaleDateString(
+                        'id-ID',
+                        {
+                          day: '2-digit',
+                          month: 'long',
+                          year: 'numeric',
+                        }
+                      )}
+                    </TableTd>
+                    <TableTd>{item.informasijadwalkegiatan.waktu}</TableTd>
+                    <TableTd>
+                      <Text truncate fz="sm" c="dimmed">
+                        {item.informasijadwalkegiatan.lokasi}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() =>
+                          router.push(
+                            `/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan/${item.id}`
+                          )
+                        }
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={5}>
+                    <Center py={20}>
+                      <Text color="dimmed">
+                        Tidak ada jadwal kegiatan yang cocok
+                      </Text>
+                    </Center>
                   </TableTd>
                 </TableTr>
-              ))}
+              )}
             </TableTbody>
           </Table>
         </Box>
-      </Stack>
-    </Paper>
-  </Box>
-  )
+      </Paper>
+
+      {/* Pagination */}
+      <Center>
+        <Pagination
+          value={page}
+          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 JadwalKegiatan;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/[id]/edit/page.tsx

@@ -2,106 +2,162 @@
 'use client'
 import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
 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';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
+
 function EditKelahiran() {
-  const editState = useProxy(persentaseKelahiranKematian.kelahiran)
-  const router = useRouter();
-  const params = useParams();
-  const [formData, setFormData] = useState({
-    nama: editState.edit.form.nama || '',
-    tanggal: editState.edit.form.tanggal || '',
-    jenisKelamin: editState.edit.form.jenisKelamin || '',
-    alamat: editState.edit.form.alamat || '',
-  });
+ const editState = useProxy(persentaseKelahiranKematian.kelahiran);
+ const router = useRouter();
+ const params = useParams();
 
-  useEffect(() => {
-    const loadKelahiran = async () => {
-      const id = params?.id as string;
-      if (!id) return;
 
-      try {
-        const data = await editState.edit.load(id); // akses langsung, bukan dari proxy
-        if (data) {
-          setFormData({
-            nama: data.nama || '',
-            tanggal: data.tanggal || '',
-            jenisKelamin: data.jenisKelamin || '',
-            alamat: data.alamat || '',
-          });
-        }
-      } catch (error) {
-        console.error("Error loading data kelahiran:", error);
-        toast.error("Gagal memuat data data kelahiran");
-      }
-    };
+ const [formData, setFormData] = useState({
+   nama: editState.edit.form.nama || '',
+   tanggal: editState.edit.form.tanggal || '',
+   jenisKelamin: editState.edit.form.jenisKelamin || '',
+   alamat: editState.edit.form.alamat || '',
+ });
 
-    loadKelahiran();
-  }, [params?.id]);
 
-  const handleSubmit = async () => {
-    try {
-      editState.edit.form = {
-        ...editState.edit.form,
-        nama: formData.nama,
-        tanggal: formData.tanggal,
-        jenisKelamin: formData.jenisKelamin,
-        alamat: formData.alamat,
-      };
-      await editState.edit.update();
-      toast.success('data kelahiran berhasil diperbarui!');
-      router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran');
-    } catch (error) {
-      console.error('Error updating data kelahiran:', error);
-      toast.error('Terjadi kesalahan saat memperbarui data kelahiran');
-    }
-  };
+ useEffect(() => {
+   const loadKelahiran = async () => {
+     const id = params?.id as string;
+     if (!id) return;
 
-  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 data kelahiran</Title>
-          <TextInput
-            value={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
-            placeholder="masukkan nama"
-          />
-          <TextInput
-            type='date'
-            value={formData.tanggal}
-            onChange={(e) => setFormData({ ...formData, tanggal: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Tanggal</Text>}
-            placeholder="masukkan tanggal"
-          />
-          <TextInput
-            value={formData.jenisKelamin}
-            onChange={(e) => setFormData({ ...formData, jenisKelamin: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Jenis Kelamin</Text>}
-            placeholder="masukkan jenis kelamin"
-          />
-          <TextInput
-            value={formData.alamat}
-            onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Alamat</Text>}
-            placeholder="masukkan alamat"
-          />
-          <Button onClick={handleSubmit}>Simpan</Button>
-        </Stack>
-      </Paper>
-    </Box>
-  );
+
+     try {
+       const data = await editState.edit.load(id);
+       if (data) {
+         setFormData({
+           nama: data.nama || '',
+           tanggal: data.tanggal || '',
+           jenisKelamin: data.jenisKelamin || '',
+           alamat: data.alamat || '',
+         });
+       }
+     } catch (error) {
+       console.error('Error loading data kelahiran:', error);
+       toast.error('Gagal memuat data kelahiran');
+     }
+   };
+
+
+   loadKelahiran();
+ }, [params?.id]);
+
+
+ const handleSubmit = async () => {
+   try {
+     editState.edit.form = {
+       ...editState.edit.form,
+       nama: formData.nama,
+       tanggal: formData.tanggal,
+       jenisKelamin: formData.jenisKelamin,
+       alamat: formData.alamat,
+     };
+
+
+     await editState.edit.update();
+     toast.success('Data kelahiran berhasil diperbarui!');
+     router.push(
+       '/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran'
+     );
+   } catch (error) {
+     console.error('Error updating data kelahiran:', error);
+     toast.error('Terjadi kesalahan saat memperbarui data kelahiran');
+   }
+ };
+
+
+ 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">
+         Edit Data Kelahiran
+       </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={formData.nama}
+           onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+           label="Nama"
+           placeholder="Masukkan nama"
+           required
+         />
+         <TextInput
+           type="date"
+           value={formData.tanggal}
+           onChange={(e) => setFormData({ ...formData, tanggal: e.target.value })}
+           label="Tanggal"
+           placeholder="Masukkan tanggal"
+           required
+         />
+         <TextInput
+           value={formData.jenisKelamin}
+           onChange={(e) => setFormData({ ...formData, jenisKelamin: e.target.value })}
+           label="Jenis Kelamin"
+           placeholder="Masukkan jenis kelamin"
+           required
+         />
+         <TextInput
+           value={formData.alamat}
+           onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
+           label="Alamat"
+           placeholder="Masukkan alamat"
+           required
+         />
+
+
+         <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 EditKelahiran;
+
+export default EditKelahiran;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/[id]/page.tsx

@@ -1,11 +1,11 @@
 'use client'
-import { useProxy } from 'valtio/utils';
-
-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';
+
 
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
@@ -13,109 +13,152 @@ import colors from '@/con/colors';
 
 
 function DetailKelahiran() {
-  const state = useProxy(persentaseKelahiranKematian.kelahiran)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
-
-  useShallowEffect(() => {
-    state.findUnique.load(params?.id as string)
-  }, [])
+ const state = useProxy(persentaseKelahiranKematian.kelahiran);
+ const [modalHapus, setModalHapus] = useState(false);
+ const [selectedId, setSelectedId] = useState<string | null>(null);
+ const params = useParams();
+ const router = useRouter();
 
 
-  const handleHapus = () => {
-    if (selectedId) {
-      state.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran")
-    }
-  }
+ useShallowEffect(() => {
+   state.findUnique.load(params?.id as string);
+ }, []);
 
-  if (!state.findUnique.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={40} />
-      </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 Data Kelahiran</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</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.nama}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Tanggal</Text>
-                  <Text fz={"lg"}>
-                    {new Date(state.findUnique.data?.tanggal).toLocaleDateString('id-ID', {
-                      day: '2-digit',
-                      month: 'long',
-                      year: 'numeric'
-                    })}
-                  </Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Jenis Kelamin</Text>
-                  <Text fz={"lg"} >{state.findUnique.data?.jenisKelamin}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Alamat</Text>
-                  <Text fz={"lg"} >{state.findUnique.data?.alamat}</Text>
-                </Box>
-                <Flex gap={"xs"} mt={10}>
-                  <Button
-                    onClick={() => {
-                      if (state.findUnique.data) {
-                        setSelectedId(state.findUnique.data.id);
-                        setModalHapus(true);
-                      }
-                    }}
-                    disabled={state.delete.loading || !state.findUnique.data}
-                    color={"red"}
-                  >
-                    <IconX size={20} />
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      if (state.findUnique.data) {
-                        router.push(`/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/${state.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!state.findUnique.data}
-                    color={"green"}
-                  >
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
-        </Stack>
-      </Paper>
+ const handleHapus = () => {
+   if (selectedId) {
+     state.delete.byId(selectedId);
+     setModalHapus(false);
+     setSelectedId(null);
+     router.push(
+       "/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran"
+     );
+   }
+ };
 
-      {/* Modal Konfirmasi Hapus */}
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus data ini?'
-      />
-    </Box>
-  );
+
+ if (!state.findUnique.data) {
+   return (
+     <Stack py={10}>
+       <Skeleton height={500} radius="md" />
+     </Stack>
+   );
+ }
+
+
+ const data = state.findUnique.data;
+
+
+ return (
+   <Box py={10}>
+     {/* Tombol Back */}
+     <Button
+       variant="subtle"
+       onClick={() => router.back()}
+       leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+       mb={15}
+     >
+       Kembali
+     </Button>
+
+
+     {/* Wrapper Detail */}
+     <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 Data Kelahiran
+         </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.nama || '-'}</Text>
+             </Box>
+
+
+             <Box>
+               <Text fz="lg" fw="bold">Tanggal</Text>
+               <Text fz="md" c="dimmed">
+                 {new Date(data.tanggal).toLocaleDateString("id-ID", {
+                   day: "2-digit",
+                   month: "long",
+                   year: "numeric",
+                 })}
+               </Text>
+             </Box>
+
+
+             <Box>
+               <Text fz="lg" fw="bold">Jenis Kelamin</Text>
+               <Text fz="md" c="dimmed">{data.jenisKelamin || '-'}</Text>
+             </Box>
+
+
+             <Box>
+               <Text fz="lg" fw="bold">Alamat</Text>
+               <Text fz="md" c="dimmed">{data.alamat || '-'}</Text>
+             </Box>
+
+
+             {/* Aksi */}
+             <Group gap="sm">
+               <Tooltip label="Hapus Data" 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 Data" withArrow position="top">
+                 <Button
+                   color="green"
+                   onClick={() =>
+                     router.push(
+                       `/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/${data.id}/edit`
+                     )
+                   }
+                   variant="light"
+                   radius="md"
+                   size="md"
+                 >
+                   <IconEdit size={20} />
+                 </Button>
+               </Tooltip>
+             </Group>
+           </Stack>
+         </Paper>
+       </Stack>
+     </Paper>
+
+
+     {/* Modal Konfirmasi Hapus */}
+     <ModalKonfirmasiHapus
+       opened={modalHapus}
+       onClose={() => setModalHapus(false)}
+       onConfirm={handleHapus}
+       text="Apakah anda yakin ingin menghapus data ini?"
+     />
+   </Box>
+ );
 }
 
+
 export default DetailKelahiran;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/create/page.tsx

@@ -1,83 +1,126 @@
-'use client'
+'use client';
 import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
 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 CreateKelahiran() {
-  const createState = useProxy(persentaseKelahiranKematian.kelahiran)
-  const router = useRouter();
+ const createState = useProxy(persentaseKelahiranKematian.kelahiran);
+ const router = useRouter();
 
-  const resetForm = () => {
-    createState.create.form = {
-      nama: "",
-      tanggal: "",
-      jenisKelamin: "",
-      alamat: "",
-    };
-  };
 
-  const handleSubmit = async () => {
-    await createState.create.create();
-    resetForm();
-    router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran")
-  };
+ const resetForm = () => {
+   createState.create.form = {
+     nama: '',
+     tanggal: '',
+     jenisKelamin: '',
+     alamat: '',
+   };
+ };
 
-  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 Kelahiran</Title>
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
-            placeholder='Masukkan nama'
-            value={createState.create.form.nama}
-            onChange={(val) => {
-              createState.create.form.nama = val.target.value;
-            }}
-          />
-          <TextInput
-            type='date'
-            label={<Text fw={"bold"} fz={"sm"}>Tanggal</Text>}
-            placeholder='Masukkan tanggal'
-            value={createState.create.form.tanggal}
-            onChange={(val) => {
-              createState.create.form.tanggal = val.target.value;
-            }}
-          />
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Jenis Kelamin</Text>}
-            placeholder='Masukkan jenis kelamin'
-            value={createState.create.form.jenisKelamin}
-            onChange={(val) => {
-              createState.create.form.jenisKelamin = val.target.value;
-            }}
-          />
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Alamat</Text>}
-            placeholder='Masukkan alamat'
-            value={createState.create.form.alamat}
-            onChange={(val) => {
-              createState.create.form.alamat = val.target.value;
-            }}
-          />
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  );
+ const handleSubmit = async () => {
+   await createState.create.create();
+   resetForm();
+   router.push(
+     '/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran'
+   );
+ };
+
+
+ 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 Data Kelahiran
+       </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 fw="bold" fz="sm">Nama</Text>}
+           placeholder="Masukkan nama"
+           value={createState.create.form.nama}
+           onChange={(e) => (createState.create.form.nama = e.target.value)}
+           required
+         />
+         <TextInput
+           type="date"
+           label={<Text fw="bold" fz="sm">Tanggal</Text>}
+           placeholder="Masukkan tanggal"
+           value={createState.create.form.tanggal}
+           onChange={(e) => (createState.create.form.tanggal = e.target.value)}
+           required
+         />
+         <TextInput
+           label={<Text fw="bold" fz="sm">Jenis Kelamin</Text>}
+           placeholder="Masukkan jenis kelamin"
+           value={createState.create.form.jenisKelamin}
+           onChange={(e) => (createState.create.form.jenisKelamin = e.target.value)}
+           required
+         />
+         <TextInput
+           label={<Text fw="bold" fz="sm">Alamat</Text>}
+           placeholder="Masukkan alamat"
+           value={createState.create.form.alamat}
+           onChange={(e) => (createState.create.form.alamat = e.target.value)}
+           required
+         />
+
+
+         <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 CreateKelahiran;
+
+export default CreateKelahiran;

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

@@ -1,118 +1,197 @@
 'use client'
 import HeaderSearch from '@/app/admin/(dashboard)/_com/header';
-import JudulList from '@/app/admin/(dashboard)/_com/judulList';
 import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
 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,
+ Paper,
+ Pagination,
+ Skeleton,
+ Stack,
+ Table,
+ TableTbody,
+ TableTd,
+ TableTh,
+ TableThead,
+ TableTr,
+ Text,
+ Title,
+ Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { IconArrowBack, IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
 
 function Kelahiran() {
-  const router = useRouter();
-  const [search, setSearch] = useState("");
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors["blue-button"]} size={30} />
-        </Button>
-      </Box>
-      <HeaderSearch
-        title='Data Kelahiran'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListKelahiran search={search} />
-    </Box>
-  );
+ const router = useRouter();
+ const [search, setSearch] = useState("");
+
+
+ return (
+   <Box>
+     {/* Tombol Back */}
+     <Box mb={10}>
+       <Button variant="subtle" onClick={() => router.back()}>
+         <IconArrowBack color={colors["blue-button"]} size={25} />
+       </Button>
+     </Box>
+
+
+     {/* Header Search */}
+     <HeaderSearch
+       title='Data Kelahiran'
+       placeholder='Cari nama atau alamat...'
+       searchIcon={<IconSearch size={20} />}
+       value={search}
+       onChange={(e) => setSearch(e.currentTarget.value)}
+     />
+
+
+     <ListKelahiran search={search} />
+   </Box>
+ );
 }
+
+
 function ListKelahiran({ search }: { search: string }) {
-  const statePersentase = useProxy(persentasekelahiran.kelahiran);
-  const router = useRouter();
+ const statePersentase = useProxy(persentasekelahiran.kelahiran);
+ const router = useRouter();
 
 
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load
-  } = statePersentase.findMany;
+ const { data, page, totalPages, loading, load } = statePersentase.findMany;
 
-  useShallowEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
 
-  const filteredData = data || []
+ useShallowEffect(() => {
+   load(page, 10, search);
+ }, [page, search]);
 
-  if (loading || !data) {
-    return (
-      <Stack>
-        <Skeleton h={500} />
-      </Stack>
-    )
-  }
 
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        {/* Form Input */}
-        <Paper bg={colors['white-1']} p={'md'}>
-          <JudulList
-            title='List Data Kelahiran'
-            href='/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/create'
-          />
-          <Table striped withTableBorder withRowBorders>
-            <TableThead>
-              <TableTr>
-                <TableTh>Nama</TableTh>
-                <TableTh>Tanggal</TableTh>
-                <TableTh>Jenis Kelamin</TableTh>
-                <TableTh>Alamat</TableTh>
-                <TableTh>Detail</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.nama}</TableTd>
-                  <TableTd>
-                    {new Date(item.tanggal).toLocaleDateString('id-ID', {
-                      day: '2-digit',
-                      month: 'long',
-                      year: 'numeric'
-                    })}
-                  </TableTd>
-                  <TableTd>{item.jenisKelamin}</TableTd>
-                  <TableTd>{item.alamat}</TableTd>
-                  <TableTd>
-                    <Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/${item.id}`)}>
-                      <IconDeviceImacCog size={20} />
-                    </Button>
-                  </TableTd>
-                </TableTr>
-              ))}
-            </TableTbody>
-          </Table>
-        </Paper>
-      </Stack>
-      <Center>
-        <Pagination
-          value={page}
-          onChange={(newPage) => load(newPage)} // ini penting!
-          total={totalPages}
-          mt="md"
-          mb="md"
-        />
-      </Center>
-    </Box>
-  );
+ const filteredData = data || [];
+
+
+ if (loading || !data) {
+   return (
+     <Stack py={10}>
+       <Skeleton height={600} radius="md" />
+     </Stack>
+   );
+ }
+
+
+ return (
+   <Box py={10}>
+     <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+       {/* Judul + Tombol Tambah */}
+       <Group justify="space-between" mb="md">
+         <Title order={4}>Daftar Data Kelahiran</Title>
+         <Tooltip label="Tambah Data Kelahiran" withArrow>
+           <Button
+             leftSection={<IconPlus size={18} />}
+             color="blue"
+             variant="light"
+             onClick={() =>
+               router.push(
+                 '/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/create'
+               )
+             }
+           >
+             Tambah Baru
+           </Button>
+         </Tooltip>
+       </Group>
+
+
+       {/* Tabel */}
+       <Box style={{ overflowX: "auto" }}>
+         <Table highlightOnHover>
+           <TableThead>
+             <TableTr>
+               <TableTh>Nama</TableTh>
+               <TableTh>Tanggal</TableTh>
+               <TableTh>Jenis Kelamin</TableTh>
+               <TableTh>Alamat</TableTh>
+               <TableTh>Aksi</TableTh>
+             </TableTr>
+           </TableThead>
+           <TableTbody>
+             {filteredData.length > 0 ? (
+               filteredData.map((item) => (
+                 <TableTr key={item.id}>
+                   <TableTd>
+                     <Text fw={500} truncate="end" lineClamp={1}>
+                       {item.nama}
+                     </Text>
+                   </TableTd>
+                   <TableTd>
+                     {new Date(item.tanggal).toLocaleDateString('id-ID', {
+                       day: '2-digit',
+                       month: 'long',
+                       year: 'numeric',
+                     })}
+                   </TableTd>
+                   <TableTd>{item.jenisKelamin}</TableTd>
+                   <TableTd>
+                     <Text truncate fz="sm" c="dimmed">
+                       {item.alamat}
+                     </Text>
+                   </TableTd>
+                   <TableTd>
+                     <Button
+                       variant="light"
+                       color="blue"
+                       onClick={() =>
+                         router.push(
+                           `/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/${item.id}`
+                         )
+                       }
+                     >
+                       <IconDeviceImacCog size={20} />
+                       <Text ml={5}>Detail</Text>
+                     </Button>
+                   </TableTd>
+                 </TableTr>
+               ))
+             ) : (
+               <TableTr>
+                 <TableTd colSpan={5}>
+                   <Center py={20}>
+                     <Text color="dimmed">
+                       Tidak ada data kelahiran yang cocok
+                     </Text>
+                   </Center>
+                 </TableTd>
+               </TableTr>
+             )}
+           </TableTbody>
+         </Table>
+       </Box>
+     </Paper>
+
+
+     {/* Pagination */}
+     <Center>
+       <Pagination
+         value={page}
+         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 Kelahiran;
+
+export default Kelahiran;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian/[id]/edit/page.tsx

@@ -3,119 +3,177 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
 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';
 
+
 function EditKematian() {
-  const editState = useProxy(persentaseKelahiranKematian.kematian)
-  const router = useRouter();
-  const params = useParams();
-  const [formData, setFormData] = useState({
-    nama: editState.edit.form.nama || '',
-    tanggal: editState.edit.form.tanggal || '',
-    jenisKelamin: editState.edit.form.jenisKelamin || '',
-    alamat: editState.edit.form.alamat || '',
-    penyebab: editState.edit.form.penyebab || '',
-  });
+ const editState = useProxy(persentaseKelahiranKematian.kematian);
+ const router = useRouter();
+ const params = useParams();
 
-  useEffect(() => {
-    const loadKelahiran = async () => {
-      const id = params?.id as string;
-      if (!id) return;
 
-      try {
-        const data = await editState.edit.load(id); // akses langsung, bukan dari proxy
-        if (data) {
-          setFormData({
-            nama: data.nama || '',
-            tanggal: data.tanggal || '',
-            jenisKelamin: data.jenisKelamin || '',
-            alamat: data.alamat || '',
-            penyebab: data.penyebab || '',
-          });
-        }
-      } catch (error) {
-        console.error("Error loading data kelahiran:", error);
-        toast.error("Gagal memuat data data kelahiran");
-      }
-    };
+ const [formData, setFormData] = useState({
+   nama: editState.edit.form.nama || '',
+   tanggal: editState.edit.form.tanggal || '',
+   jenisKelamin: editState.edit.form.jenisKelamin || '',
+   alamat: editState.edit.form.alamat || '',
+   penyebab: editState.edit.form.penyebab || '',
+ });
 
-    loadKelahiran();
-  }, [params?.id]);
 
-  const handleSubmit = async () => {
-    try {
-      editState.edit.form = {
-        ...editState.edit.form,
-        nama: formData.nama,
-        tanggal: formData.tanggal,
-        jenisKelamin: formData.jenisKelamin,
-        alamat: formData.alamat,
-        penyebab: formData.penyebab,
-      };
-      await editState.edit.update();
-      toast.success('data kelahiran berhasil diperbarui!');
-      router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran');
-    } catch (error) {
-      console.error('Error updating data kelahiran:', error);
-      toast.error('Terjadi kesalahan saat memperbarui data kelahiran');
-    }
-  };
+ useEffect(() => {
+   const loadData = async () => {
+     const id = params?.id as string;
+     if (!id) return;
 
-  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 data kelahiran</Title>
-          <TextInput
-            value={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
-            placeholder="masukkan nama"
-          />
-          <TextInput
-            type='date'
-            value={formData.tanggal}
-            onChange={(e) => setFormData({ ...formData, tanggal: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Tanggal</Text>}
-            placeholder="masukkan tanggal"
-          />
-          <TextInput
-            value={formData.jenisKelamin}
-            onChange={(e) => setFormData({ ...formData, jenisKelamin: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Jenis Kelamin</Text>}
-            placeholder="masukkan jenis kelamin"
-          />
-          <TextInput
-            value={formData.alamat}
-            onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Alamat</Text>}
-            placeholder="masukkan alamat"
-          />
-          <Box>
-            <Text fz={"sm"} fw={"bold"}>Penyebab</Text>
-            <EditEditor
-              value={formData.penyebab}
-              onChange={(htmlContent) => {
-                setFormData((prev) => ({ ...prev, penyebab: htmlContent }));
-                editState.edit.form.penyebab = htmlContent;
-              }}
-            />
-          </Box>
-          <Button onClick={handleSubmit}>Simpan</Button>
-        </Stack>
-      </Paper>
-    </Box>
-  );
+
+     try {
+       const data = await editState.edit.load(id);
+       if (data) {
+         setFormData({
+           nama: data.nama || '',
+           tanggal: data.tanggal || '',
+           jenisKelamin: data.jenisKelamin || '',
+           alamat: data.alamat || '',
+           penyebab: data.penyebab || '',
+         });
+       }
+     } catch (error) {
+       console.error('Error loading data kematian:', error);
+       toast.error('Gagal memuat data kematian');
+     }
+   };
+
+
+   loadData();
+ }, [params?.id]);
+
+
+ const handleSubmit = async () => {
+   try {
+     editState.edit.form = { ...editState.edit.form, ...formData };
+     await editState.edit.update();
+     toast.success('Data kematian berhasil diperbarui!');
+     router.push(
+       '/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian'
+     );
+   } catch (error) {
+     console.error('Error updating data kematian:', error);
+     toast.error('Terjadi kesalahan saat memperbarui data kematian');
+   }
+ };
+
+
+ return (
+   <Box px={{ base: 'sm', md: 'lg' }} py="md">
+     {/* Header dengan tombol back */}
+     <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 Data Kematian
+       </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">
+         <TextInput
+           label="Nama"
+           placeholder="Masukkan nama"
+           value={formData.nama}
+           onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+           required
+         />
+
+
+         <TextInput
+           type="date"
+           label="Tanggal"
+           placeholder="Masukkan tanggal"
+           value={formData.tanggal}
+           onChange={(e) => setFormData({ ...formData, tanggal: e.target.value })}
+           required
+         />
+
+
+         <TextInput
+           label="Jenis Kelamin"
+           placeholder="Masukkan jenis kelamin"
+           value={formData.jenisKelamin}
+           onChange={(e) => setFormData({ ...formData, jenisKelamin: e.target.value })}
+           required
+         />
+
+
+         <TextInput
+           label="Alamat"
+           placeholder="Masukkan alamat"
+           value={formData.alamat}
+           onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
+           required
+         />
+
+
+         <Box>
+           <Text fz="sm" fw="bold" mb={6}>
+             Penyebab
+           </Text>
+           <EditEditor
+             value={formData.penyebab}
+             onChange={(htmlContent) => {
+               setFormData((prev) => ({ ...prev, penyebab: htmlContent }));
+               editState.edit.form.penyebab = 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>
+ );
 }
 
-export default EditKematian;
+
+export default EditKematian;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian/[id]/page.tsx

@@ -1,11 +1,11 @@
 'use client'
-import { useProxy } from 'valtio/utils';
-
-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';
+
 
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
@@ -13,114 +13,153 @@ import colors from '@/con/colors';
 
 
 function DetailKematian() {
-  const state = useProxy(persentaseKelahiranKematian.kematian)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
+ const state = useProxy(persentaseKelahiranKematian.kematian);
+ const [modalHapus, setModalHapus] = useState(false);
+ const [selectedId, setSelectedId] = useState<string | null>(null);
+ const params = useParams();
+ const router = useRouter();
 
-  useShallowEffect(() => {
-    state.findUnique.load(params?.id as string)
-  }, [])
 
-  const handleHapus = () => {
-    if (selectedId) {
-      state.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran")
-    }
-  }
+ useShallowEffect(() => {
+   state.findUnique.load(params?.id as string);
+ }, []);
 
-  if (!state.findUnique.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={40} />
-      </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 Data Kematian</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</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.nama}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Tanggal</Text>
-                  <Text fz={"lg"}>
-                    {state.findUnique.data?.tanggal instanceof Date
-                      ? state.findUnique.data.tanggal.toLocaleDateString('id-ID', {
-                          day: '2-digit',
-                          month: 'long',
-                          year: 'numeric'
-                        })
-                      : state.findUnique.data?.tanggal}
-                  </Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Jenis Kelamin</Text>
-                  <Text fz={"lg"} >{state.findUnique.data?.jenisKelamin}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Alamat</Text>
-                  <Text fz={"lg"} >{state.findUnique.data?.alamat}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Penyebab</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: state.findUnique.data?.penyebab || '' }} />
-                </Box>
-                <Flex gap={"xs"} mt={10}>
-                  <Button
-                    onClick={() => {
-                      if (state.findUnique.data) {
-                        setSelectedId(state.findUnique.data.id);
-                        setModalHapus(true);
-                      }
-                    }}
-                    disabled={state.delete.loading || !state.findUnique.data}
-                    color={"red"}
-                  >
-                    <IconX size={20} />
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      if (state.findUnique.data) {
-                        router.push(`/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/${state.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!state.findUnique.data}
-                    color={"green"}
-                  >
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
-        </Stack>
-      </Paper>
+ const handleHapus = () => {
+   if (selectedId) {
+     state.delete.byId(selectedId);
+     setModalHapus(false);
+     setSelectedId(null);
+     router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran");
+   }
+ };
 
-      {/* Modal Konfirmasi Hapus */}
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus data ini?'
-      />
-    </Box>
-  );
+
+ if (!state.findUnique.data) {
+   return (
+     <Stack py={10}>
+       <Skeleton height={500} radius="md" />
+     </Stack>
+   );
+ }
+
+
+ const data = state.findUnique.data;
+
+
+ return (
+   <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: "50%" }}
+       bg={colors['white-1']}
+       p="lg"
+       radius="md"
+       shadow="sm"
+     >
+       <Stack gap="md">
+         <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+           Detail Data Kematian
+         </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?.nama || '-'}</Text>
+             </Box>
+
+
+             <Box>
+               <Text fz="lg" fw="bold">Tanggal</Text>
+               <Text fz="md" c="dimmed">
+                 {data?.tanggal instanceof Date
+                   ? data.tanggal.toLocaleDateString('id-ID', {
+                       day: '2-digit',
+                       month: 'long',
+                       year: 'numeric'
+                     })
+                   : data?.tanggal || '-'}
+               </Text>
+             </Box>
+
+
+             <Box>
+               <Text fz="lg" fw="bold">Jenis Kelamin</Text>
+               <Text fz="md" c="dimmed">{data?.jenisKelamin || '-'}</Text>
+             </Box>
+
+
+             <Box>
+               <Text fz="lg" fw="bold">Alamat</Text>
+               <Text fz="md" c="dimmed">{data?.alamat || '-'}</Text>
+             </Box>
+
+
+             <Box>
+               <Text fz="lg" fw="bold">Penyebab</Text>
+               <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data?.penyebab || '-' }} />
+             </Box>
+
+
+             <Group gap="sm">
+               <Tooltip label="Hapus Data" 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 Data" withArrow position="top">
+                 <Button
+                   color="green"
+                   onClick={() => router.push(
+                     `/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian/${data.id}/edit`
+                   )}
+                   variant="light"
+                   radius="md"
+                   size="md"
+                 >
+                   <IconEdit size={20} />
+                 </Button>
+               </Tooltip>
+             </Group>
+           </Stack>
+         </Paper>
+       </Stack>
+     </Paper>
+
+
+     <ModalKonfirmasiHapus
+       opened={modalHapus}
+       onClose={() => setModalHapus(false)}
+       onConfirm={handleHapus}
+       text="Apakah Anda yakin ingin menghapus data ini?"
+     />
+   </Box>
+ );
 }
 
+
 export default DetailKematian;