Fix Compres Gambar && seed gambar profile - landing page

package.json

@@ -80,9 +80,11 @@
     "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/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)/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

@@ -103,12 +103,18 @@ function ListPolsekTerdekat({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
-                        {item.nama}
-                      </Text>
+                      <Box w={150}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.nama}
+                        </Text>
+                      </Box>
                     </TableTd>
                     <TableTd>{item.jarakKeDesa}</TableTd>
-                    <TableTd>{item.alamat}</TableTd>
+                      <TableTd>
+                    <Box w={150}>
+                        <Text truncate="end" lineClamp={1}>{item.alamat}</Text>
+                    </Box>
+                      </TableTd>
                     <TableTd>
                       <Button
                         variant="light"

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

@@ -91,7 +91,7 @@ function EditKolaborasiInovasi() {
 
       await sdgsState.edit.update();
       toast.success("sdgs desa berhasil diperbarui!");
-      router.push("/admin/landing-page/sdgs");
+      router.push("/admin/landing-page/sdgs-desa");
     } catch (error) {
       console.error("Error updating sdgs desa:", error);
       toast.error("Terjadi kesalahan saat memperbarui sdgs desa");
@@ -107,7 +107,7 @@ function EditKolaborasiInovasi() {
           </Button>
         </Tooltip>
         <Title order={4} ml="sm" c="dark">
-          Edit SDGs Desa
+          Edit Sdgs Desa
         </Title>
       </Group>
 
@@ -122,7 +122,7 @@ function EditKolaborasiInovasi() {
         <Stack gap="md">
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
-              Gambar SDGs Desa
+              Gambar Sdgs Desa
             </Text>
             <Dropzone
               onDrop={(files) => {
@@ -172,8 +172,8 @@ function EditKolaborasiInovasi() {
           </Box>
 
           <TextInput
-            label="Nama SDGs Desa"
-            placeholder="Masukkan nama SDGs Desa"
+            label="Nama Sdgs Desa"
+            placeholder="Masukkan nama Sdgs Desa"
             value={formData.name}
             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
             required

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

@@ -27,7 +27,7 @@ function DetailSDGSDesa() {
       sdgsState.delete.byId(selectedId)
       setModalHapus(false)
       setSelectedId(null)
-      router.push("/admin/landing-page/sdgs")
+      router.push("/admin/landing-page/sdgs-desa")
     }
   }
 
@@ -62,13 +62,13 @@ function DetailSDGSDesa() {
       >
         <Stack gap="md">
           <Text fz="2xl" fw="bold" c={colors['blue-button']}>
-            Detail SDGs Desa
+            Detail Sdgs Desa
           </Text>
 
           <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
             <Stack gap="md">
               <Box>
-                <Text fz="lg" fw="bold" mb={4}>Nama SDGs Desa</Text>
+                <Text fz="lg" fw="bold" mb={4}>Nama Sdgs Desa</Text>
                 <Text fz="md" c="dimmed">{data.name || '-'}</Text>
               </Box>
 
@@ -82,7 +82,7 @@ function DetailSDGSDesa() {
                 {data.image?.link ? (
                   <Image
                     src={data.image.link}
-                    alt={data.name || 'Gambar SDGs Desa'}
+                    alt={data.name || 'Gambar Sdgs Desa'}
                     w={200}
                     h={200}
                     radius="md"
@@ -94,7 +94,7 @@ function DetailSDGSDesa() {
               </Box>
 
               <Group gap="sm" mt="md">
-                <Tooltip label="Hapus SDGs Desa" withArrow position="top">
+                <Tooltip label="Hapus Sdgs Desa" withArrow position="top">
                   <Button
                     color="red"
                     onClick={() => {
@@ -110,10 +110,10 @@ function DetailSDGSDesa() {
                   </Button>
                 </Tooltip>
 
-                <Tooltip label="Edit SDGs Desa" withArrow position="top">
+                <Tooltip label="Edit Sdgs Desa" withArrow position="top">
                   <Button
                     color="green"
-                    onClick={() => router.push(`/admin/landing-page/sdgs/${data.id}/edit`)}
+                    onClick={() => router.push(`/admin/landing-page/sdgs-desa/${data.id}/edit`)}
                     variant="light"
                     radius="md"
                     size="md"
@@ -131,7 +131,7 @@ function DetailSDGSDesa() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text="Apakah Anda yakin ingin menghapus SDGs Desa ini?"
+        text="Apakah Anda yakin ingin menghapus Sdgs Desa ini?"
       />
     </Box>
   );

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

@@ -53,7 +53,7 @@ function CreateSDGsDesa() {
     await stateSDGSDesa.create.create();
 
     resetForm();
-    router.push("/admin/landing-page/sdgs")
+    router.push("/admin/landing-page/sdgs-desa")
   }
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -64,7 +64,7 @@ function CreateSDGsDesa() {
           </Button>
         </Tooltip>
         <Title order={4} ml="sm" c="dark">
-          Tambah SDGs Desa
+          Tambah Sdgs Desa
         </Title>
       </Group>
 
@@ -79,7 +79,7 @@ function CreateSDGsDesa() {
         <Stack gap="md">
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
-              Gambar SDGs Desa
+              Gambar Sdgs Desa
             </Text>
             <Dropzone
               onDrop={(files) => {
@@ -143,10 +143,10 @@ function CreateSDGsDesa() {
           <TextInput
             label={
               <Text fw="bold" fz="sm" mb={4}>
-                Nama SDGs Desa
+                Nama Sdgs Desa
               </Text>
             }
-            placeholder="Masukkan nama SDGs Desa"
+            placeholder="Masukkan nama Sdgs Desa"
             value={stateSDGSDesa.create.form.name}
             onChange={(val) => {
               stateSDGSDesa.create.form.name = val.target.value;

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

@@ -15,8 +15,8 @@ function SdgsDesa() {
   return (
     <Box>
       <HeaderSearch
-        title='SDGs Desa'
-        placeholder='Cari SDGs Desa...'
+        title='Sdgs Desa'
+        placeholder='Cari Sdgs Desa...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -58,13 +58,13 @@ function ListSdgsDesa({ search }: { search: string }) {
       <Box py={10}>
         <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
           <Group justify="space-between" mb="md">
-            <Title order={4}>Daftar SDGs Desa</Title>
-            <Tooltip label="Tambah SDGs Desa" withArrow>
+            <Title order={4}>Daftar Sdgs Desa</Title>
+            <Tooltip label="Tambah Sdgs Desa" withArrow>
               <Button 
                 leftSection={<IconPlus size={18} />} 
                 color={colors['blue-button']} 
                 variant="light"
-                onClick={() => router.push('/admin/landing-page/sdgs/create')}
+                onClick={() => router.push('/admin/landing-page/sdgs-desa/create')}
               >
                 Tambah Baru
               </Button>
@@ -74,7 +74,7 @@ function ListSdgsDesa({ search }: { search: string }) {
             <Table>
               <TableThead>
                 <TableTr>
-                  <TableTh style={{ width: '60%' }}>Nama SDGs Desa</TableTh>
+                  <TableTh style={{ width: '60%' }}>Nama Sdgs Desa</TableTh>
                   <TableTh style={{ width: '20%' }}>Jumlah</TableTh>
                   <TableTh style={{ width: '20%', textAlign: 'center' }}>Aksi</TableTh>
                 </TableTr>
@@ -82,7 +82,7 @@ function ListSdgsDesa({ search }: { search: string }) {
               <TableTbody>
                 <TableTr>
                   <TableTd colSpan={3} style={{ textAlign: 'center', padding: '2rem' }}>
-                    <Text c="dimmed">Tidak ada data SDGs Desa</Text>
+                    <Text c="dimmed">Tidak ada data Sdgs Desa</Text>
                   </TableTd>
                 </TableTr>
               </TableTbody>
@@ -97,13 +97,13 @@ function ListSdgsDesa({ search }: { search: string }) {
     <Box py={10}>
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar SDGs Desa</Title>
-          <Tooltip label="Tambah SDGs Desa" withArrow>
+          <Title order={4}>Daftar Sdgs Desa</Title>
+          <Tooltip label="Tambah Sdgs Desa" withArrow>
             <Button 
               leftSection={<IconPlus size={18} />} 
               color={colors['blue-button']} 
               variant="light" 
-              onClick={() => router.push('/admin/landing-page/sdgs/create')}
+              onClick={() => router.push('/admin/landing-page/sdgs-desa/create')}
             >
               Tambah Baru
             </Button>
@@ -113,7 +113,7 @@ function ListSdgsDesa({ search }: { search: string }) {
           <Table highlightOnHover>
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '60%' }}>Nama SDGs Desa</TableTh>
+                <TableTh style={{ width: '60%' }}>Nama Sdgs Desa</TableTh>
                 <TableTh style={{ width: '20%' }}>Jumlah</TableTh>
                 <TableTh style={{ width: '20%', textAlign: 'center' }}>Aksi</TableTh>
               </TableTr>
@@ -137,7 +137,7 @@ function ListSdgsDesa({ search }: { search: string }) {
                         variant="light" 
                         color="blue" 
                         size="sm"
-                        onClick={() => router.push(`/admin/landing-page/sdgs/${item.id}`)}
+                        onClick={() => router.push(`/admin/landing-page/sdgs-desa/${item.id}`)}
                       >
                         <IconDeviceImacCog size={18} />
                       </Button>

src/app/admin/_com/list_PageAdmin.tsx

@@ -21,8 +21,8 @@ export const navBar = [
       },
       {
         id: "Landing_Page_4",
-        name: "SDGs Desa",
-        path: "/admin/landing-page/sdgs"
+        name: "Sdgs Desa",
+        path: "/admin/landing-page/sdgs-desa"
       },
       {
         id: "Landing_Page_5",
@@ -188,7 +188,7 @@ export const navBar = [
       {
         id: "Keamanan_3",
         name: "Kontak Darurat",
-        path: "/admin/keamanan/kontak-darurat"
+        path: "/admin/keamanan/kontak-darurat/kontak-darurat-keamanan"
       },
       {
         id: "Keamanan_4",

src/app/admin/page.tsx

@@ -1,9 +1,7 @@
-import { Text } from "@mantine/core";
+import ProgramInovasi from "./(dashboard)/landing-page/profile/program-inovasi/page";
 
 export default function Page() {
     return(
-      <Text>
-        Test
-      </Text>
+      <ProgramInovasi/>
     )
 }

src/app/api/[[...slugs]]/_lib/fileStorage/_lib/create.ts

@@ -3,6 +3,8 @@ import { Context } from "elysia";
 import fs from "fs/promises";
 import path from "path";
 import { nanoid } from "nanoid";
+import sharp from "sharp";
+import zlib from "zlib";
 
 const UPLOAD_DIR = process.env.WIBU_UPLOAD_DIR;
 
@@ -11,6 +13,7 @@ const fileStorageCreate = async (context: Context) => {
     name: string;
     file: File;
   };
+
   const file = body.file;
   const name = body.name;
 
@@ -18,7 +21,6 @@ const fileStorageCreate = async (context: Context) => {
   if (!name) return { status: 400, body: "No name provided" };
   if (!UPLOAD_DIR) return { status: 500, body: "UPLOAD_DIR is not defined" };
 
-  // Tentukan kategori berdasarkan mimeType
   const isImage = file.type.startsWith("image/");
   const category = isImage ? "image" : "document";
 
@@ -26,25 +28,54 @@ const fileStorageCreate = async (context: Context) => {
   const rootPath = path.join(UPLOAD_DIR, pathName);
   await fs.mkdir(rootPath, { recursive: true });
 
-  const ext = file.name.split(".").pop();
-  const newName = nanoid() + "." + ext;
+  // Convert File ke Buffer
+  const buffer = Buffer.from(await file.arrayBuffer());
+  let finalName = nanoid();
+  let finalMimeType = file.type;
+
+  if (isImage) {
+    // Simpan sebagai WebP untuk kompresi maksimal
+    const mobileBuffer = await sharp(buffer)
+      .resize({ width: 720 })
+      .webp({ quality: 80 })
+      .toBuffer();
+
+    const desktopBuffer = await sharp(buffer)
+      .resize({ width: 1920, withoutEnlargement: true })
+      .webp({ quality: 80 })
+      .toBuffer();
+
+    const mobileName = `${finalName}-mobile.webp`;
+    const desktopName = `${finalName}-desktop.webp`;
+
+    await fs.writeFile(path.join(rootPath, mobileName), mobileBuffer);
+    await fs.writeFile(path.join(rootPath, desktopName), desktopBuffer);
+
+    // Simpan metadata untuk versi desktop sebagai default
+    finalName = desktopName;
+    finalMimeType = "image/webp";
+  } else {
+    // Kompres dokumen (opsional pakai gzip)
+    const gzBuffer = zlib.gzipSync(buffer);
+    const docName = `${finalName}.gz`;
+
+    await fs.writeFile(path.join(rootPath, docName), gzBuffer);
+
+    finalName = docName;
+    finalMimeType = "application/gzip";
+  }
 
   const data = await prisma.fileStorage.create({
     data: {
-      name: newName,
+      name: finalName,
       realName: file.name,
       path: rootPath,
-      mimeType: file.type,
+      mimeType: finalMimeType,
       category,
-      link: `/api/fileStorage/findUnique/${newName}`,
+      link: `/api/fileStorage/findUnique/${finalName}`,
     },
   });
 
-  await fs.writeFile(
-    path.join(rootPath, newName),
-    Buffer.from(await file.arrayBuffer())
-  );
-
   return { data };
 };
 

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

@@ -6,6 +6,7 @@ import MenuTipsKeamanan from "./tips-keamanan";
 import LaporanPublik from "./laporan-publik";
 import LayananPolsek from "./layanan-polsek";
 import KontakDaruratKeamanan from "./kontak-darurat-keamanan";
+import KontakItem from "./kontak-darurat-keamanan/kontak-item";
 
 const Keamanan = new Elysia({ prefix: "/api/keamanan", tags: ["Keamanan"] })
 .use(KeamananLingkungan)
@@ -15,4 +16,5 @@ const Keamanan = new Elysia({ prefix: "/api/keamanan", tags: ["Keamanan"] })
 .use(LaporanPublik)
 .use(LayananPolsek)
 .use(KontakDaruratKeamanan)
+.use(KontakItem)
 export default Keamanan;

src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/create.ts

@@ -2,34 +2,55 @@ import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 type FormCreate = {
-        nama: string,
-        imageId?: string,
-        kontakItems: {
-            nama: string,
-            nomorTelepon: string,
-            imageId?: string
-        }[]
-}
-export default async function kontakDaruratKeamananCreate(context: Context){
-    const body = context.body as FormCreate
+  nama: string;
+  imageId?: string;
+  kategoriId: string[];
+};
+export default async function kontakDaruratKeamananCreate(context: Context) {
+  const body = context.body as FormCreate;
 
-    await prisma.kontakDaruratKeamanan.create({
+  if (!body.kategoriId || body.kategoriId.length === 0) {
+    throw new Error("At least one kategoriId is required");
+  }
+
+  try {
+    const result = await prisma.$transaction(async (prisma) => {
+      const kontakDaruratKeamanan = await prisma.kontakDaruratKeamanan.create({
         data: {
-            nama: body.nama,
-            imageId: body.imageId,
-            kontakItems: {
-                create: body.kontakItems,
-            },
+          nama: body.nama,
+          imageId: body.imageId,
+          kategoriId: body.kategoriId[0],
         },
+      });
+
+      await prisma.kontakDaruratToItem.createMany({
+        data: body.kategoriId.map((kategoriId) => ({
+          kontakDaruratId: kontakDaruratKeamanan.id,
+          kontakItemId: kategoriId,
+        })),
+      });
+
+      return await prisma.kontakDaruratKeamanan.findUnique({
+        where: { id: kontakDaruratKeamanan.id },
         include: {
-            kontakItems: true,
-        }
-    })
-    return {
-        success: true,
-        message: "Success create kontak darurat keamanan",
-        data: {
-            ...body,
+          image: true,
+          kategori: true,
+          kontakItems: {
+            include: {
+              kontakItem: true,
+            },
+          },
         },
-    }
-}
+      });
+    });
+
+    return {
+      success: true,
+      message: "Success create kontak darurat keamanan",
+      data: result,
+    };
+  } catch (error) {
+    console.error("Error creating KontakDaruratKeamanan:", error);
+    throw new Error("Failed to create KontakDaruratKeamanan: " + (error as Error).message);
+  }
+}

src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/del.ts

@@ -3,56 +3,56 @@ import { Context } from "elysia";
 import fs from "fs/promises";
 import path from "path";
 
-export default async function kontakDaruratKeamananDelete(context: Context){
-    const id = context.params?.id as string;
+export default async function kontakDaruratKeamananDelete(context: Context) {
+  const { params } = context;
+  const id = params?.id as string;
 
-    if (!id) {
-        return {
-            status: 400,
-            body: "ID tidak diberikan",
-        };
-    }
+  if (!id) {
+    throw new Error("ID tidak diberikan");
+  }
 
-    await prisma.kontakItem.deleteMany({
-        where: {
-          kategoriId: id,
-        },
-      });
+  await prisma.kontakDaruratToItem.deleteMany({
+    where: {
+      kontakDaruratId: id,
+    },
+  });
 
-    const kontakDaruratKeamanan = await prisma.kontakDaruratKeamanan.findUnique({
-        where: { id },
-        include: {
-            kontakItems: true,
-            image: true,
-        }
-    });
-
-    if (!kontakDaruratKeamanan) {
-        return {
-            status: 404,
-            body: "Kontak darurat keamanan tidak ditemukan",
-        };
-    }
-
-    if (kontakDaruratKeamanan.image) {
-        try {
-            const filePath = path.join(kontakDaruratKeamanan.image.path, kontakDaruratKeamanan.image.name);
-            await fs.unlink(filePath);
-            await prisma.fileStorage.delete({
-              where: { id: kontakDaruratKeamanan.image.id },
-            });
-          } catch (err) {
-            console.error("Gagal hapus file image:", err);
-          }
-    }
-
-    await prisma.kontakDaruratKeamanan.delete({
-        where: { id },
-    });
+  const kontakDaruratKeamanan = await prisma.kontakDaruratKeamanan.findUnique({
+    where: { id },
+    include: {
+      image: true,
+    },
+  });
 
+  if (!kontakDaruratKeamanan) {
     return {
-        status: 200,
-        success: true,
-        message: "Kontak darurat keamanan berhasil dihapus",
+      status: 404,
+      body: "Kontak darurat keamanan tidak ditemukan",
     };
-}
+  }
+
+  if (kontakDaruratKeamanan.image) {
+    try {
+      const filePath = path.join(
+        kontakDaruratKeamanan.image.path,
+        kontakDaruratKeamanan.image.name
+      );
+      await fs.unlink(filePath);
+      await prisma.fileStorage.delete({
+        where: { id: kontakDaruratKeamanan.image.id },
+      });
+    } catch (err) {
+      console.error("Gagal hapus file image:", err);
+    }
+  }
+
+  await prisma.kontakDaruratKeamanan.delete({
+    where: { id },
+  });
+
+  return {
+    status: 200,
+    success: true,
+    message: "Kontak darurat keamanan berhasil dihapus",
+  };
+}

src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/findMany.ts

@@ -1,27 +1,56 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function kontakDaruratKeamananFindMany() {
-    try {
-        const data = await prisma.kontakDaruratKeamanan.findMany({
+export default async function kontakDaruratKeamananFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || "";
+  const skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [{ nama: { contains: search, mode: "insensitive" } }];
+  }
+
+  try {
+    const [data, total] = await Promise.all([
+      prisma.kontakDaruratKeamanan.findMany({
+        include: {
+          kontakItems: {
             include: {
-                kontakItems: true,
-                image: true,
+              kontakItem: true,
+              
             },
-            orderBy: {
-                createdAt: "desc",
-            }
-        });
+          },
+          image: true,
+          kategori: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: "desc" },
+      }),
+      prisma.kontakDaruratKeamanan.count({ where }),
+    ]);
 
-        return {
-            success: true,
-            message: "Success fetch kontak darurat keamanan",
-            data,
-        };
-    } catch (e) {
-        console.error("Find many error:", e);
-        return {
-            success: false,
-            message: "Failed fetch kontak darurat keamanan",
-        };
-    }
-}
+    return {
+      success: true,
+      message: "Berhasil ambil kontak darurat keamanan dengan pagination",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (e) {
+    console.error("Find many error:", e);
+    return {
+      success: false,
+      message: "Failed fetch kontak darurat keamanan",
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/findUnique.ts

@@ -1,39 +1,27 @@
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
 export default async function kontakDaruratKeamananFindUnique(
-  request: Request
+  context: Context
 ) {
-  const url = new URL(request.url);
-  const pathSegments = url.pathname.split("/");
-  const id = pathSegments[pathSegments.length - 1];
+  const { params } = context;
+  const id = params?.id as string;
 
   if (!id) {
-    return Response.json(
-      {
-        success: false,
-        message: "ID tidak boleh kosong",
-      },
-      { status: 400 }
-    );
+    throw new Error("ID tidak ditemukan dalam parameter");
   }
 
-  try {
-    if (typeof id !== "string") {
-      return Response.json(
-        {
-          success: false,
-          message: "ID tidak valid",
-        },
-        { status: 400 }
-      );
-    }
-
     const data = await prisma.kontakDaruratKeamanan.findUnique({
       where: { id },
       include: {
         kontakItems: {
           include: {
-            image: true,
+            kontakItem: {
+              include: {
+                image: true
+              }
+            },
+            
           },
         },
         image: true,
@@ -41,33 +29,12 @@ export default async function kontakDaruratKeamananFindUnique(
     });
 
     if (!data) {
-      return Response.json(
-        {
-          success: false,
-          message: "Kontak darurat keamanan tidak ditemukan",
-        },
-        { status: 404 }
-      );
+      throw new Error("Pasar desa tidak ditemukan");
     }
-
-    return Response.json(
-      {
-        success: true,
-        message: "Success fetch kontak darurat keamanan by ID",
-        data,
-      },
-      { status: 200 }
-    );
-  } catch (error) {
-    console.error("Find by ID error:", error);
-    return Response.json(
-      {
-        success: false,
-        message:
-          "Gagal mengambil kontak darurat keamanan: " +
-          (error instanceof Error ? error.message : "Unknown error"),
-      },
-      { status: 500 }
-    );
-  }
+  
+    return {
+      success: true,
+      message: "Data kontak darurat keamanan ditemukan",
+      data,
+    };
 }

src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/index.ts

@@ -9,24 +9,23 @@ const KontakDaruratKeamanan = new Elysia({
   prefix: "/kontakdaruratkeamanan",
   tags: ["Keamanan/Kontak Darurat"],
 })
-  .get("/find-many", kontakDaruratKeamananFindMany)
-  .get("/:id", async (context) => {
-    const response = await kontakDaruratKeamananFindUnique(
-      new Request(context.request)
-    );
-    return response;
-  })
+  .get("/findMany", kontakDaruratKeamananFindMany)
+  .get(
+    "/:id",
+    async (context) => {
+      return await kontakDaruratKeamananFindUnique(context);
+    },
+    {
+      params: t.Object({
+        id: t.String(),
+      }),
+    }
+  )
   .post("/create", kontakDaruratKeamananCreate, {
     body: t.Object({
       nama: t.String(),
       imageId: t.Optional(t.String()),
-      kontakItems: t.Array(
-        t.Object({
-          nama: t.String(),
-          nomorTelepon: t.String(),
-          imageId: t.Optional(t.String()),
-        })
-      ),
+      kategoriId: t.Array(t.String()),
     }),
   })
   .delete("/del/:id", kontakDaruratKeamananDelete)
@@ -37,16 +36,13 @@ const KontakDaruratKeamanan = new Elysia({
       return response;
     },
     {
+      params: t.Object({
+        id: t.String(),
+      }),
       body: t.Object({
         nama: t.String(),
         imageId: t.Optional(t.String()),
-        kontakItems: t.Array(
-          t.Object({
-            nama: t.String(),
-            nomorTelepon: t.String(),
-            imageId: t.Optional(t.String()),
-          })
-        ),
+        kategoriId: t.Array(t.String()),
       }),
     }
   );

src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/kontak-item/create.ts

@@ -0,0 +1,26 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+  nama: string;
+  nomorTelepon: string;
+  imageId?: string;
+};
+export default async function kontakItemCreate(context: Context){
+    const body = context.body as FormCreate
+
+    await prisma.kontakItem.create({
+        data: {
+            nama: body.nama,
+            nomorTelepon: body.nomorTelepon,
+            imageId: body.imageId,
+        },
+    })
+    return {
+        success: true,
+        message: "Success create kontak item",
+        data: {
+            ...body,
+        },
+    }
+}

src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/kontak-item/del.ts

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

src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/kontak-item/findMany.ts

@@ -0,0 +1,51 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+import { Prisma } from "@prisma/client";
+
+export default async function kontakItemFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || "";
+  const skip = (page - 1) * limit;
+
+  // Buat where clause dengan tipe yang benar
+  const where: Prisma.KontakItemWhereInput = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { nama: { contains: search, mode: "insensitive" as const } },
+    ];
+  }
+
+  try {
+    const [data, total] = await Promise.all([
+      prisma.kontakItem.findMany({
+        include: {
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: "desc" },
+      }),
+      prisma.kontakItem.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil kontak item dengan pagination",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (e) {
+    console.error("Find many error:", e);
+    return {
+      success: false,
+      message: "Failed fetch kontak item",
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/kontak-item/findUnique.ts

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

src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/kontak-item/index.ts

@@ -0,0 +1,40 @@
+import Elysia, { t } from "elysia";
+import kontakItemCreate from "./create";
+import kontakItemDelete from "./del";
+import kontakItemFindMany from "./findMany";
+import kontakItemFindUnique from "./findUnique";
+import kontakItemUpdate from "./updt";
+
+const KontakItem = new Elysia({
+  prefix: "/kontakitem",
+  tags: ["Keamanan/Kontak Item"],
+})
+  .get("/find-many", kontakItemFindMany)
+  .get("/:id", async (context) => {
+    const response = await kontakItemFindUnique(new Request(context.request));
+    return response;
+  })
+  .post("/create", kontakItemCreate, {
+    body: t.Object({
+      nama: t.String(),
+      imageId: t.Optional(t.String()),
+      nomorTelepon: t.String(),
+    }),
+  })
+  .delete("/del/:id", kontakItemDelete)
+  .put(
+    "/:id",
+    async (context) => {
+      const response = await kontakItemUpdate(context);
+      return response;
+    },
+    {
+      body: t.Object({
+        nama: t.String(),
+        imageId: t.Optional(t.String()),
+        nomorTelepon: t.String(),
+
+      }),
+    }
+  );
+export default KontakItem;

src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/kontak-item/updt.ts

@@ -0,0 +1,44 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormUpdate = {
+  nama: string;
+  nomorTelepon: string;
+  imageId?: string;
+};
+
+export default async function kontakItemUpdate(context: Context){
+    try {
+        const { id } = context.params as { id: string };
+        const body = context.body as FormUpdate;
+      
+        // Update utama
+        const updated = await prisma.kontakItem.update({
+          where: { id },
+          data: {
+            nama: body.nama,
+            nomorTelepon: body.nomorTelepon,
+            imageId: body.imageId,
+          },
+          include: {
+            image: true,
+          },
+        });
+      
+        return {
+          success: true,
+          message: "Success update kontak item",
+          data: updated,
+        };
+    } catch (error) {
+        console.error("Error updating kontak item:", error);
+        return Response.json({
+            success: false,
+            message: "Terjadi kesalahan saat mengupdate kontak item",
+        }, { status: 500 ,
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+    }
+}

src/app/api/[[...slugs]]/_lib/keamanan/kontak-darurat-keamanan/updt.ts

@@ -2,56 +2,59 @@ import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 type FormUpdate = {
-    nama: string;
-    imageId?: string;
-    kontakItems: {
-      nama: string;
-      nomorTelepon: string;
-      imageId?: string;
-    }[];
-  };
+  id: string;
+  nama: string;
+  imageId?: string;
+  kategoriId: string[];
+};
 
-export default async function kontakDaruratKeamananUpdate(context: Context){
-    try {
-        const { id } = context.params as { id: string };
-        const body = context.body as FormUpdate;
-      
-        // Hapus kontakItems lama
-        await prisma.kontakItem.deleteMany({
-          where: {
-            kategoriId: id,
-          },
-        });
-      
-        // Update utama
-        const updated = await prisma.kontakDaruratKeamanan.update({
-          where: { id },
-          data: {
-            nama: body.nama,
-            imageId: body.imageId,
-            kontakItems: {
-              create: body.kontakItems,
-            },
-          },
-          include: {
-            kontakItems: true,
-          },
-        });
-      
-        return {
-          success: true,
-          message: "Success update kontak darurat keamanan",
-          data: updated,
-        };
-    } catch (error) {
-        console.error("Error updating kontak darurat keamanan:", error);
-        return Response.json({
-            success: false,
-            message: "Terjadi kesalahan saat mengupdate kontak darurat keamanan",
-        }, { status: 500 ,
-            headers: {
-                "Content-Type": "application/json",
-            },
-        });
-    }
-}
+export default async function kontakDaruratKeamananUpdate(context: Context) {
+  const body = context.body as FormUpdate;
+
+  if (!body.id) {
+    throw new Error("ID pasar desa tidak boleh kosong");
+  }
+
+  if (!body.kategoriId || body.kategoriId.length === 0) {
+    throw new Error("Minimal 1 kategori harus dipilih");
+  }
+
+  await prisma.kontakDaruratKeamanan.update({
+    where: { id: body.id },
+    data: {
+      nama: body.nama,
+      imageId: body.imageId,
+      kategoriId: body.kategoriId[0],
+    },
+  });
+
+  await prisma.kontakDaruratToItem.deleteMany({
+    where: { kontakDaruratId: body.id },
+  });
+
+  await prisma.kontakDaruratToItem.createMany({
+    data: body.kategoriId.map((kategoriId) => ({
+      kontakDaruratId: body.id,
+      kontakItemId: kategoriId,
+    })),
+  });
+
+  const updated = await prisma.kontakDaruratKeamanan.findUnique({
+    where: { id: body.id },
+    include: {
+      image: true,
+      kategori: true,
+      kontakItems: {
+        include: {
+          kontakItem: true,
+        },
+      },
+    },
+  });
+
+  return {
+    success: true,
+    message: "Success update kontak darurat keamanan",
+    data: updated,
+  };
+}

src/app/api/[[...slugs]]/_lib/keamanan/pencegahan-kriminalitas/findMany.ts

@@ -1,27 +1,66 @@
 import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
 
-export default async function pencegahanKriminalitasFindMany() {
-    try {
-        const data = await prisma.pencegahanKriminalitas.findMany({
-            where: {
-                isActive: true,
-            },
-            include: {
-                programKeamanan: true,
-                tipsKeamanan: true,
-                videoKeamanan: true,
-            }
-        })
-        return {
-            success: true,
-            message: "Success fetch pencegahan kriminalitas",
-            data,
-        }
-    } catch (error) {
-        console.error("Find many error:", error);
-        return {
-            success: false,
-            message: "Failed fetch pencegahan kriminalitas",
-        }
-    }
-}
+export default async function pencegahanKriminalitasFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || "";
+  const skip = (page - 1) * limit;
+
+  // Buat where clause dengan tipe yang benar
+  const where: Prisma.PencegahanKriminalitasWhereInput = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      {
+        programKeamanan: {
+          nama: { contains: search, mode: "insensitive" as const },
+        },
+      },
+      {
+        tipsKeamanan: {
+          judul: { contains: search, mode: "insensitive" as const },
+        },
+      },
+      {
+        videoKeamanan: {
+          judul: { contains: search, mode: "insensitive" as const },
+        },
+      },
+    ];
+  }
+  try {
+    const [data, total] = await Promise.all([
+      prisma.pencegahanKriminalitas.findMany({
+        where,
+        include: {
+          programKeamanan: true,
+          tipsKeamanan: true,
+          videoKeamanan: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: "desc" },
+      }),
+      prisma.pencegahanKriminalitas.count({ where }),
+    ]);
+    return {
+      success: true,
+      message: "Success fetch pencegahan kriminalitas",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (error) {
+    console.error("Find many error:", error);
+    return {
+      success: false,
+      message: "Failed fetch pencegahan kriminalitas",
+    };
+  }
+}

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

@@ -28,8 +28,8 @@ async function desaAntiKorupsiFindMany(context: Context) {
           kategori: true,
           file: true,
         },
-        skip,
-        take: limit,
+        skip: limit === 0 ? undefined : skip,
+        take: limit === 0 ? undefined : limit,
         orderBy: { name: "asc" }, // opsional, kalau mau urut berdasarkan waktu
       }),
       prisma.desaAntiKorupsi.count({

src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/create.ts

@@ -11,7 +11,7 @@ export default async function sdgsDesaCreate(context: Context) {
   const body = context.body as FormCreate;
 
   try {
-    const result = await prisma.sDGSDesa.create({
+    const result = await prisma.sdgsDesa.create({
       data: {
         name: body.name,
         jumlah: body.jumlah,

src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/del.ts

@@ -9,7 +9,7 @@ export default async function sdgsDesaDelete(context: Context) {
     throw new Error("ID tidak ditemukan dalam parameter");
   }
 
-  const deleted = await prisma.sDGSDesa.delete({
+  const deleted = await prisma.sdgsDesa.delete({
     where: { id },
   });
 

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

@@ -21,7 +21,7 @@ async function sdgsDesaFindMany(context: Context) {
 
   try {
     const [data, total] = await Promise.all([
-      prisma.sDGSDesa.findMany({
+      prisma.sdgsDesa.findMany({
         where,
         include: {
           image: true,
@@ -30,7 +30,7 @@ async function sdgsDesaFindMany(context: Context) {
         take: limit,
         orderBy: { jumlah: "desc" }, // opsional, kalau mau urut berdasarkan waktu
       }),
-      prisma.sDGSDesa.count({
+      prisma.sdgsDesa.count({
         where,
       }),
     ]);

src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/findUnique.ts

@@ -9,7 +9,7 @@ export default async function sdgsDesaFindUnique(context: Context) {
     throw new Error("ID tidak ditemukan dalam parameter");
   }
 
-  const data = await prisma.sDGSDesa.findUnique({
+  const data = await prisma.sdgsDesa.findUnique({
     where: { id },
     include: {
       image: true,

src/app/api/[[...slugs]]/_lib/landing_page/sdgs-desa/updt.ts

@@ -21,7 +21,7 @@ export default async function sdgsDesaUpdate(context: Context) {
   }
 
   try {
-    const updated = await prisma.sDGSDesa.update({
+    const updated = await prisma.sdgsDesa.update({
       where: { id },
       data: {
         name: body.name,

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

@@ -65,7 +65,7 @@ function Page() {
                     <Stack gap="md">
                       <Center>
                         <Image
-                          src={item.imageUrl ? `${item.imageUrl}?t=${Date.now()}` : "/api/img/perbekel.png"}
+                          src={item.image.link ? `${item.image.link}?t=${Date.now()}` : "/perbekel.png"}
                           w={{ base: 220, md: 330 }}
                           alt="Leader photo"
                           radius="md"

src/app/darmasaba/(tambahan)/sdgs-desa/page.tsx

@@ -7,13 +7,13 @@ import BackButton from '../../(pages)/desa/layanan/_com/BackButto';
 import colors from '@/con/colors';
 
 function Page() {
-  const [sdgsDesa, setSdgsDesa] = useState<Prisma.SDGSDesaGetPayload<{ include: { image: true } }>[]>([]);
+  const [sdgsDesa, setSdgsDesa] = useState<Prisma.SdgsDesaGetPayload<{ include: { image: true } }>[]>([]);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const fetchSdgsDesa = async () => {
       try {
-        const response = await fetch('/api/landingpage/sdgsdesa/findMany');
+        const response = await fetch('/api/landingpage/sdgsdesa/findMany?limit=50&page=1');
         if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
         const result = await response.json();
         let data = [];

src/app/darmasaba/_com/Footer.tsx

@@ -46,7 +46,7 @@ function Footer() {
                   <Group justify="apart" align="center" mt="lg">
                     <Text c="#F3F2EC" ta="center" fz="md" fw={700} style={{ fontStyle: 'italic' }}>&quot;Desa Kuat, Warga Sejahtera!&quot;</Text>
                     <ActionIcon size={80} radius="xl" variant="transparent">
-                      <Image src="/api/img/chatbot-removebg-preview.png" alt="Logo Desa" width={80} height={80} />
+                      <Image src="/chatbot-removebg-preview.png" alt="Logo Desa" width={80} height={80} />
                     </ActionIcon>
                   </Group>
                 </Stack>

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

@@ -9,7 +9,7 @@ import { IconMoodSad } from "@tabler/icons-react"
 export default function SDGS() {
   const theme = useMantineTheme()
   const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`)
-  const [sdgsDesa, setSdgsDesa] = useState<Prisma.SDGSDesaGetPayload<{ include: { image: true } }>[] | null>(null)
+  const [sdgsDesa, setSdgsDesa] = useState<Prisma.SdgsDesaGetPayload<{ include: { image: true } }>[] | null>(null)
 
   useEffect(() => {
     const fetchSdgsDesa = async () => {