Fix Admin - User Menu Keamanan, Submenu Laporan Kontak Darurat, Laporan Publik

prisma/schema.prisma

@@ -81,8 +81,6 @@ model FileStorage {
   PelayananSuratKeteranganImage  PelayananSuratKeterangan[] @relation("PelayananSuratKeteranganImage")
   PelayananSuratKeteranganImage2 PelayananSuratKeterangan[] @relation("PelayananSuratKeteranganImage2")
   PasarDesa                      PasarDesa[]
-  KontakDaruratKeamanan          KontakDaruratKeamanan[]
-  KontakItem                     KontakItem[]
   Pegawai                        Pegawai[]
   DesaDigital                    DesaDigital[]
   InfoTekno                      InfoTekno[]
@@ -101,6 +99,8 @@ model FileStorage {
   PerbekelDariMasaKeMasa         PerbekelDariMasaKeMasa[]
 
   MitraKolaborasi MitraKolaborasi[]
+
+  ArtikelKesehatan ArtikelKesehatan[]
 }
 
 //========================================= MENU LANDING PAGE ========================================= //
@@ -972,8 +972,10 @@ model ArtikelKesehatan {
   id             String       @id @default(cuid())
   title          String
   content        String
-  introduction   Introduction @relation(fields: [introductionId], references: [id])
+  image          FileStorage? @relation(fields: [imageId], references: [id])
+  imageId        String?
   introductionId String
+  introduction   Introduction @relation(fields: [introductionId], references: [id])
   symptom        Symptom      @relation(fields: [symptomId], references: [id])
   symptomId      String
   prevention     Prevention   @relation(fields: [preventionId], references: [id])
@@ -1218,8 +1220,7 @@ model LayananPolsek {
 model KontakDaruratKeamanan {
   id          String                @id @default(uuid())
   nama        String
-  image       FileStorage?          @relation(fields: [imageId], references: [id])
+  icon        String
-  imageId     String?
   kategori    KontakItem            @relation(fields: [kategoriId], references: [id])
   kategoriId  String
   kontakItems KontakDaruratToItem[]
@@ -1233,8 +1234,7 @@ model KontakItem {
   id                    String                  @id @default(uuid())
   nama                  String
   nomorTelepon          String
-  image                 FileStorage?            @relation(fields: [imageId], references: [id])
+  icon                  String
-  imageId               String?
   createdAt             DateTime                @default(now())
   updatedAt             DateTime                @updatedAt
   deletedAt             DateTime                @default(now())
@@ -1304,11 +1304,13 @@ model LaporanPublik {
   judul        String
   lokasi       String
   tanggalWaktu DateTime
-  status       StatusLaporan
+  status       StatusLaporan             @default(Proses)
   penanganan   PenangananLaporanPublik[]
   kronologi    String? // Optional, bisa diisi detail kronologi
   createdAt    DateTime                  @default(now())
   updatedAt    DateTime                  @updatedAt
+  deletedAt    DateTime                  @default(now())
+  isActive     Boolean                   @default(true)
 }
 
 model PenangananLaporanPublik {

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

@@ -23,6 +23,10 @@ import {
   IconSchool,
   IconShoppingCart,
   IconHospital,
+  IconAmbulance,
+  IconFiretruck,
+  IconBuilding,
+  IconAlertTriangle,
 } from '@tabler/icons-react'
 
 export type IconKey =
@@ -46,6 +50,13 @@ export type IconKey =
   | 'pelatihan'
   | 'subsidi'
   | 'layananKesehatan'
+  | 'polisi'
+  | 'ambulans'
+  | 'pemadam'
+  | 'rumahSakit'
+  | 'bangunan'
+  | 'darurat'
+
 
 const iconMap: Record<IconKey, React.FC<any>> = {
   ekowisata: IconLeaf,
@@ -68,6 +79,12 @@ const iconMap: Record<IconKey, React.FC<any>> = {
   pelatihan: IconSchool,
   subsidi: IconShoppingCart,
   layananKesehatan: IconHospital,
+  polisi: IconShieldFilled,
+  ambulans: IconAmbulance,
+  pemadam: IconFiretruck,
+  rumahSakit: IconHospital,
+  bangunan: IconBuilding,
+  darurat: IconAlertTriangle
 }
 
 type Props = {

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

@@ -3,11 +3,15 @@
 
 import { Box, rem, Select } from '@mantine/core';
 import {
+  IconAlertTriangle,
+  IconAmbulance,
+  IconBuilding,
   IconCash,
   IconChartLine,
   IconChristmasTreeFilled,
   IconClipboardTextFilled,
   IconDroplet,
+  IconFiretruck,
   IconHome,
   IconHomeEco,
   IconHospital,
@@ -47,6 +51,12 @@ const iconMap = {
   pelatihan: { label: 'Pelatihan', icon: IconSchool },
   subsidi: { label: 'Subsidi', icon: IconShoppingCart },
   layananKesehatan: { label: 'Layanan Kesehatan', icon: IconHospital },
+  polisi: { label: 'Polisi', icon: IconShieldFilled },
+  ambulans: { label: 'Ambulans', icon: IconAmbulance },
+  pemadam: { label: 'Pemadam', icon: IconFiretruck },
+  rumahSakit: { label: 'Rumah Sakit', icon: IconHospital },
+  bangunan: { label: 'Bangunan', icon: IconBuilding },
+  darurat: { label: 'Darurat', icon: IconAlertTriangle },
 
 };
 

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

@@ -2,11 +2,13 @@
 
 import { Box, rem, Select } from '@mantine/core';
 import {
+  IconAmbulance,
   IconCash,
   IconChartLine,
   IconChristmasTreeFilled,
   IconClipboardTextFilled,
   IconDroplet,
+  IconFiretruck,
   IconHome,
   IconHomeEco,
   IconHospital,
@@ -22,6 +24,8 @@ import {
   IconTrendingUp,
   IconTrophy,
   IconTruckFilled,
+  IconBuilding,
+  IconAlertTriangle
 } from '@tabler/icons-react';
 
 const iconMap = {
@@ -45,6 +49,12 @@ const iconMap = {
   pelatihan: {label: 'Pelatihan', icon: IconSchool},
   subsidi: {label: 'Subsidi', icon: IconShoppingCart},
   layananKesehatan: {label: 'Layanan Kesehatan', icon: IconHospital},
+  polisi: {label: 'Polisi', icon: IconShieldFilled},
+  ambulans: {label: 'Ambulans', icon: IconAmbulance},
+  pemadam: {label: 'Pemadam', icon: IconFiretruck},
+  rumahSakit: {label: 'Rumah Sakit', icon: IconHospital},
+  bangunan: {label: 'Bangunan', icon: IconBuilding},
+  darurat: {label: 'Darurat', icon: IconAlertTriangle},
 };
 
 type IconKey = keyof typeof iconMap;

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

@@ -7,13 +7,13 @@ import { z } from "zod";
 
 const templateForm = z.object({
   nama: z.string().min(1, "Nama minimal 1 karakter"),
-  imageId: z.string().nonempty(),
+  icon: z.string().nonempty(),
   kategoriId: z.array(z.string()).min(1, "Minimal pilih satu kategori"),
 });
 
 const defaultForm = {
   nama: "",
-  imageId: "",
+  icon: "",
   kategoriId: [] as string[],
 };
 
@@ -54,7 +54,6 @@ const kontakDaruratKeamananState = proxy({
       Prisma.KontakDaruratKeamananGetPayload<{
         include: {
           kategori: true;
-          image: true;
           kontakItems: {
             include: {
               kontakItem: true;
@@ -102,14 +101,9 @@ const kontakDaruratKeamananState = proxy({
       include: {
         kontakItems: {
           include: {
-            kontakItem: {
+            kontakItem: true;
-              include: {
-                image: true;
-              }
-            };
           };
         };
-        image: true;
         kategori: true;
       };
     }> | null,
@@ -192,8 +186,9 @@ const kontakDaruratKeamananState = proxy({
           this.id = data.id;
           this.form = {
             nama: data.nama,
-            imageId: data.imageId || '',
+            icon: data.icon || "",
-            kategoriId: data.kontakItems?.map((item: any) => item.kontakItemId) || []
+            kategoriId:
+              data.kontakItems?.map((item: any) => item.kontakItemId) || [],
           };
           return data;
         } else {
@@ -230,7 +225,7 @@ const kontakDaruratKeamananState = proxy({
             },
             body: JSON.stringify({
               nama: this.form.nama,
-              imageId: this.form.imageId,
+              icon: this.form.icon,
               kategoriId: this.form.kategoriId,
             }),
           }
@@ -271,13 +266,13 @@ const kontakDaruratKeamananState = proxy({
 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(),
+  icon: z.string().nonempty(),
 });
 
 const defaultFormItem = {
   nama: "",
   nomorTelepon: "",
-  imageId: "",
+  icon: "",
 };
 
 const kontakDaruratItem = proxy({
@@ -285,9 +280,7 @@ const kontakDaruratItem = proxy({
     form: { ...defaultFormItem },
     loading: false,
     async create() {
-      const cek = templateFormItem.safeParse(
+      const cek = templateFormItem.safeParse(kontakDaruratItem.create.form);
-        kontakDaruratItem.create.form
-      );
       if (!cek.success) {
         const err = `[${cek.error.issues
           .map((v) => `${v.path.join(".")}`)
@@ -296,9 +289,9 @@ const kontakDaruratItem = proxy({
       }
       try {
         kontakDaruratItem.create.loading = true;
-        const res = await ApiFetch.api.keamanan.kontakitem[
+        const res = await ApiFetch.api.keamanan.kontakitem["create"].post(
-          "create"
+          kontakDaruratItem.create.form
-        ].post(kontakDaruratItem.create.form);
+        );
         if (res.status === 200) {
           kontakDaruratItem.findMany.load();
           return toast.success("success create");
@@ -315,8 +308,8 @@ const kontakDaruratItem = proxy({
   findMany: {
     data: null as Array<
       Prisma.KontakItemGetPayload<{
-        include: {
+        omit: {
-          image: true;
+          isActive: true;
         };
       }>
     > | null,
@@ -333,14 +326,13 @@ const kontakDaruratItem = proxy({
         const query: any = { page, limit };
         if (search) query.search = search;
 
-        const res = await ApiFetch.api.keamanan.kontakitem[
+        const res = await ApiFetch.api.keamanan.kontakitem["find-many"].get({
-          "find-many"
+          query,
-        ].get({ query });
+        });
 
         if (res.status === 200 && res.data?.success) {
           kontakDaruratItem.findMany.data = res.data.data ?? [];
-          kontakDaruratItem.findMany.totalPages =
+          kontakDaruratItem.findMany.totalPages = res.data.totalPages ?? 1;
-            res.data.totalPages ?? 1;
         } else {
           kontakDaruratItem.findMany.data = [];
           kontakDaruratItem.findMany.totalPages = 1;
@@ -356,9 +348,8 @@ const kontakDaruratItem = proxy({
   },
   findUnique: {
     data: null as Prisma.KontakItemGetPayload<{
-      include: {
+      omit: {
-        kategori: true;
+        isActive: true;
-        image: true;
       };
     }> | null,
     loading: false,
@@ -384,15 +375,12 @@ const kontakDaruratItem = proxy({
       if (!id) return toast.warn("ID tidak valid");
       try {
         kontakDaruratItem.delete.loading = true;
-        const response = await fetch(
+        const response = await fetch(`/api/keamanan/kontakitem/del/${id}`, {
-          `/api/keamanan/kontakitem/del/${id}`,
+          method: "DELETE",
-          {
+          headers: {
-            method: "DELETE",
+            "Content-Type": "application/json",
-            headers: {
+          },
-              "Content-Type": "application/json",
+        });
-            },
-          }
-        );
 
         const result = await response.json();
 
@@ -422,15 +410,12 @@ const kontakDaruratItem = proxy({
       }
 
       try {
-        const response = await fetch(
+        const response = await fetch(`/api/keamanan/kontakitem/${id}`, {
-          `/api/keamanan/kontakitem/${id}`,
+          method: "GET",
-          {
+          headers: {
-            method: "GET",
+            "Content-Type": "application/json",
-            headers: {
+          },
-              "Content-Type": "application/json",
+        });
-            },
-          }
-        );
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
         }
@@ -441,7 +426,7 @@ const kontakDaruratItem = proxy({
           this.form = {
             nama: data.nama,
             nomorTelepon: data.nomorTelepon,
-            imageId: data.imageId,
+            icon: data.icon,
           };
           return data;
         } else {
@@ -457,9 +442,7 @@ const kontakDaruratItem = proxy({
     },
 
     async update() {
-      const cek = templateFormItem.safeParse(
+      const cek = templateFormItem.safeParse(kontakDaruratItem.update.form);
-        kontakDaruratItem.update.form
-      );
       if (!cek.success) {
         const err = `[${cek.error.issues
           .map((v) => `${v.path.join(".")}`)
@@ -469,20 +452,17 @@ const kontakDaruratItem = proxy({
 
       try {
         kontakDaruratItem.update.loading = true;
-        const response = await fetch(
+        const response = await fetch(`/api/keamanan/kontakitem/${this.id}`, {
-          `/api/keamanan/kontakitem/${this.id}`,
+          method: "PUT",
-          {
+          headers: {
-            method: "PUT",
+            "Content-Type": "application/json",
-            headers: {
+          },
-              "Content-Type": "application/json",
+          body: JSON.stringify({
-            },
+            nama: this.form.nama,
-            body: JSON.stringify({
+            nomorTelepon: this.form.nomorTelepon,
-              nama: this.form.nama,
+            icon: this.form.icon,
-              nomorTelepon: this.form.nomorTelepon,
+          }),
-              imageId: this.form.imageId,
+        });
-            }),
-          }
-        );
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
           throw new Error(
@@ -514,7 +494,7 @@ const kontakDaruratItem = proxy({
       kontakDaruratItem.update.form = { ...defaultFormItem };
     },
   },
-})
+});
 
 const kontakDarurat = proxy({
   kontakDaruratKeamananState,

src/app/admin/(dashboard)/_state/keamanan/laporan-publik.ts

@@ -11,12 +11,24 @@ const templateForm = z.object({
   judul: z.string().min(3, "Judul minimal 3 karakter"),
   lokasi: z.string().min(3, "Lokasi minimal 3 karakter"),
   tanggalWaktu: z.string().min(3, "Tanggal Waktu minimal 3 karakter"),
-  status: z.enum(["Selesai", "Proses", "Gagal"]),
-  penanganan: z.string(),
   kronologi: z.string().optional(),
 });
 
 interface FormData {
+  judul: string;
+  lokasi: string;
+  tanggalWaktu: string;
+  kronologi: string;
+}
+
+const defaultForm: FormData = {
+  judul: "",
+  lokasi: "",
+  tanggalWaktu: new Date().toISOString(),
+  kronologi: "",
+};
+
+interface FormEditData {
   judul: string;
   lokasi: string;
   tanggalWaktu: string;
@@ -25,15 +37,16 @@ interface FormData {
   kronologi: string;
 }
 
-const defaultForm: FormData = {
+const editForm: FormEditData = {
   judul: "",
   lokasi: "",
   tanggalWaktu: new Date().toISOString(),
+  kronologi: "",
   status: "Proses",
   penanganan: "",
-  kronologi: "",
 };
 
+
 const laporanPublikState = proxy({
   create: {
     form: { ...defaultForm },
@@ -185,7 +198,7 @@ const laporanPublikState = proxy({
   },
   edit: {
     id: "",
-    form: { ...defaultForm },
+    form: { ...editForm },
     loading: false,
     async load(id: string) {
       if (!id) {
@@ -291,7 +304,7 @@ const laporanPublikState = proxy({
          },
          reset() {
            laporanPublikState.edit.id = "";
-           laporanPublikState.edit.form = { ...defaultForm };
+           laporanPublikState.edit.form = { ...editForm };
          },
   }
 });

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

@@ -31,11 +31,13 @@ const templateForm = z.object({
   doctorSign: z.object({
     content: z.string().min(1, "Content harus diisi"),
   }),
+  imageId: z.string().min(1, "Image ID harus diisi"),
 });
 
 const defaultForm = {
   title: "",
   content: "",
+  imageId: "",
   introduction: {
     content: "",
   },
@@ -59,6 +61,7 @@ const defaultForm = {
   doctorSign: {
     content: "",
   },
+
 };
 
 const artikelKesehatanState = proxy({
@@ -112,6 +115,7 @@ const artikelKesehatanState = proxy({
             firstaid: true;
             mythvsfact: true;
             doctorsign: true;
+            image: true;
           };
         }>[]
       | null,
@@ -159,6 +163,7 @@ const artikelKesehatanState = proxy({
         firstaid: true;
         mythvsfact: true;
         doctorsign: true;
+        image: true;
       };
     }> | null,
     loading: false,
@@ -213,6 +218,7 @@ const artikelKesehatanState = proxy({
         doctorSign: {
           content: data.doctorsign.content,
         },
+        imageId: data.imageId,
       };
     },
     async submit() {
@@ -253,6 +259,7 @@ const artikelKesehatanState = proxy({
           doctorSign: {
             content: artikelKesehatanState.edit.form.doctorSign.content,
           },
+          imageId: artikelKesehatanState.edit.form.imageId,
         };
 
         const res = await fetch(

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/create/page.tsx

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

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/page.tsx

@@ -1,13 +1,30 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Pagination } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
 import desaDigitalState from '../../_state/inovasi/desa-digital';
 
 function DesaDigitalSmartVillage() {
@@ -15,8 +32,8 @@ function DesaDigitalSmartVillage() {
   return (
     <Box>
       <HeaderSearch
-        title='Desa Digital Smart Village'
+        title="Desa Digital Smart Village"
-        placeholder='pencarian'
+        placeholder="Cari inovasi digital desa..."
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -27,69 +44,114 @@ function DesaDigitalSmartVillage() {
 }
 
 function ListDesaDigitalSmartVillage({ search }: { search: string }) {
-  const state = useProxy(desaDigitalState)
+  const state = useProxy(desaDigitalState);
-  const router = useRouter()
+  const router = useRouter();
 
-  const {
+  const { data, page, totalPages, loading, load } = state.findMany;
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = state.findMany
 
   useShallowEffect(() => {
-    load(page, 10, search)
+    load(page, 10, search);
-  }, [page, search])
+  }, [page, search]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={600} radius="md" />
       </Stack>
-    )
+    );
   }
+
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <JudulList
+        <Group justify="space-between" mb="md">
-          title='List Desa Digital Smart Village'
+          <Title order={4}>List Desa Digital Smart Village</Title>
-          href='/admin/inovasi/desa-digital-smart-village/create'
+          <Tooltip label="Tambah Inovasi" withArrow>
-        />
+            <Button
-        <Table striped withTableBorder withRowBorders>
+              leftSection={<IconPlus size={18} />}
-          <TableThead>
+              color="blue"
-            <TableTr>
+              variant="light"
-              <TableTh>Nama Inovasi</TableTh>
+              onClick={() =>
-              <TableTh>Deskripsi Singkat Inovasi</TableTh>
+                router.push('/admin/inovasi/desa-digital-smart-village/create')
-              <TableTh>Detail</TableTh>
+              }
-            </TableTr>
+            >
-          </TableThead>
+              Tambah Baru
-          <TableTbody>
+            </Button>
-            {filteredData.map((item) => (
+          </Tooltip>
-              <TableTr key={item.id}>
+        </Group>
-                <TableTd>{item.name}</TableTd>
+        <Box style={{ overflowX: 'auto' }}>
-                <TableTd>
+          <Table highlightOnHover>
-                  <Text lineClamp={1} truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+            <TableThead>
-                </TableTd>
+              <TableTr>
-                <TableTd>
+                <TableTh style={{ width: '30%' }}>Nama Inovasi</TableTh>
-                  <Button onClick={() => router.push(`/admin/inovasi/desa-digital-smart-village/${item.id}`)}>
+                <TableTh style={{ width: '50%' }}>
-                    <IconDeviceImac size={20} />
+                  Deskripsi Singkat Inovasi
-                  </Button>
+                </TableTh>
-                </TableTd>
+                <TableTh style={{ width: '20%' }}>Aksi</TableTh>
               </TableTr>
-            ))}
+            </TableThead>
-          </TableTbody>
+            <TableTbody>
-        </Table>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.name}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text
+                        fz="sm"
+                        c="dimmed"
+                        lineClamp={2}
+                        dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                      />
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() =>
+                          router.push(
+                            `/admin/inovasi/desa-digital-smart-village/${item.id}`
+                          )
+                        }
+                      >
+                        <IconDeviceImac size={20} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={3}>
+                    <Center py={20}>
+                      <Text color="dimmed">
+                        Tidak ada data inovasi digital yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
       <Center>
         <Pagination
           value={page}
-          onChange={(newPage) => load(newPage)} // ini penting!
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/[id]/edit/page.tsx

@@ -134,7 +134,7 @@ function EditProgramKreatifDesa() {
                 setFormData((prev) => ({ ...prev, icon: value }));
                 stateProgramKreatif.update.form.icon = value;
               }}
-/>
+            />
 
 
           </Box>

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

@@ -1,29 +1,36 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+import { IconKey } from '@/app/admin/(dashboard)/_com/iconMap';
+import SelectIconProgramEdit from '@/app/admin/(dashboard)/_com/selectIconEdit';
 import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
 import colors from '@/con/colors';
-import ApiFetch from '@/lib/api-fetch';
+import {
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+  Box,
-import { Dropzone } from '@mantine/dropzone';
+  Button,
-import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-
 function EditKontakItem() {
   const router = useRouter();
-  const kontakState = useProxy(kontakDarurat.kontakDaruratItem)
+  const kontakState = useProxy(kontakDarurat.kontakDaruratItem);
-  const params = useParams()
+  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 || '',
     nomorTelepon: kontakState.update.form.nomorTelepon || '',
-  })
+    icon: kontakState.update.form.icon || '',
+  });
 
   useEffect(() => {
     const loadKontakDarurat = async () => {
@@ -35,17 +42,13 @@ function EditKontakItem() {
         if (data) {
           setFormData({
             name: data.nama || '',
-            imageId: data.imageId || '',
             nomorTelepon: data.nomorTelepon || '',
+            icon: data.icon || '',
           });
-
-          if (data?.image?.link) {
-            setPreviewUtama(data.image.link);
-          }
         }
       } catch (error) {
-        console.error("Error loading kontak darurat:", error);
+        console.error('Error loading kontak darurat:', error);
-        toast.error("Gagal memuat data kontak darurat");
+        toast.error('Gagal memuat data kontak darurat');
       }
     };
 
@@ -57,115 +60,84 @@ function EditKontakItem() {
       kontakState.update.form = {
         ...kontakState.update.form,
         nama: formData.name,
-        imageId: formData.imageId,
         nomorTelepon: formData.nomorTelepon,
-      }
+        icon: formData.icon,
-
+      };
-      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");
-        }
-
-        kontakState.update.form.imageId = uploaded.id;
-      }
-
       await kontakState.update.update();
-      toast.success("Kontak Darurat berhasil diperbarui!");
+      toast.success('Kontak Darurat berhasil diperbarui!');
-      router.push("/admin/keamanan/kontak-darurat/kontak-darurat-item");
+      router.push('/admin/keamanan/kontak-darurat/kontak-darurat-item');
     } catch (error) {
-      console.error("Error updating kontak darurat:", error);
+      console.error('Error updating kontak darurat:', error);
-      toast.error("Terjadi kesalahan saat memperbarui kontak darurat");
+      toast.error('Terjadi kesalahan saat memperbarui kontak darurat');
     }
-  }
+  };
 
   return (
-    <Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      <Box mb={10}>
+      {/* Header */}
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+      <Group mb="md">
-          <IconArrowBack color={colors['blue-button']} size={25} />
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-        </Button>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-      </Box>
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Kontak Darurat Item
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+      {/* Form */}
-        <Stack gap={"xs"}>
+      <Paper
-          <Title order={4}>Edit Kontak Darurat</Title>
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
+            label="Nama Kontak"
+            placeholder="Masukkan nama kontak"
             value={formData.name}
-            onChange={(val) => {
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              setFormData({ ...formData, name: val.target.value });
+            required
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Kontak</Text>}
-            placeholder='Masukkan nama Kontak'
           />
+
           <TextInput
+            label="Nomor Telepon"
+            placeholder="Masukkan nomor telepon"
             value={formData.nomorTelepon}
-            onChange={(val) => {
+            onChange={(e) => setFormData({ ...formData, nomorTelepon: e.target.value })}
-              setFormData({ ...formData, nomorTelepon: val.target.value });
+            required
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Nomor Telepon</Text>}
-            placeholder='Masukkan nomor telepon'
           />
+
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Text fw="bold" fz="sm" mb={6}>
-            <Box>
+              Ikon Program Kreatif Desa
-              <Dropzone
+            </Text>
-                onDrop={(files) => {
+            <SelectIconProgramEdit
-                  const selectedFile = files[0]; // Ambil file pertama
+              value={formData.icon as IconKey}
-                  if (selectedFile) {
+              onChange={(value) => {
-                    setFileUtama(selectedFile);
+                setFormData((prev) => ({ ...prev, icon: value }));
-                    setPreviewUtama(URL.createObjectURL(selectedFile)); // Buat preview
+                kontakState.update.form.icon = value;
-                  }
+              }}
-                }}
+            />
-                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>
-          <Group>
+
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

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

@@ -1,11 +1,12 @@
 'use client'
-import colors from '@/con/colors';
+import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';
-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 colors from '@/con/colors';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
@@ -62,48 +63,31 @@ function DetailKontakDarurat() {
       >
         <Stack gap="md">
           <Text fz="2xl" fw="bold" c={colors['blue-button']}>
-            Detail Kontak Darurat
+            Detail Kontak Darurat Item
           </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="lg" fw="bold">Judul Kontak Darurat Item</Text>
                 <Text fz="md" c="dimmed">{data?.nama || '-'}</Text>
               </Box>
 
               <Box>
-                <Text fz="lg" fw="bold">Judul Kontak Darurat</Text>
+                <Text fz="lg" fw="bold">Nomor Telepon Kontak Darurat Item</Text>
-                <Text fz="md" c="dimmed">{data?.nama || '-'}</Text>
+                <Text fz="md" c="dimmed">{data?.nomorTelepon || '-'}</Text>
               </Box>
 
-              {/* Gambar Utama */}
               <Box>
-                <Text fz="lg" fw="bold">Gambar</Text>
+                <Text fz={"lg"} fw={"bold"}>Ikon Kontak Darurat</Text>
-                <Image
+                {data?.icon && (
-                  w={{ base: 150, md: 490 }}
+                  <IconMapper
-                  src={data?.image?.link}
+                    name={data?.icon as IconKey}
-                  alt="gambar kontak darurat"
+                    size={32}
-                />
+                    color={colors['blue-button']}
-              </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 */}
@@ -126,7 +110,7 @@ function DetailKontakDarurat() {
                 <Tooltip label="Edit Data" withArrow position="top">
                   <Button
                     color="green"
-                    onClick={() => router.push(`/admin/keamanan/kontak-darurat/${data.id}/edit`)}
+                    onClick={() => router.push(`/admin/keamanan/kontak-darurat/kontak-darurat-item/${data.id}/edit`)}
                     variant="light"
                     radius="md"
                     size="md"

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

@@ -1,59 +1,34 @@
 'use client'
+import SelectIconProgram from '@/app/admin/(dashboard)/_com/selectIcon';
 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,
+  Tooltip
 } from '@mantine/core';
-import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack } from '@tabler/icons-react';
-import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { toast } from 'react-toastify';
 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: '',
+      icon: '',
       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');
@@ -109,67 +84,11 @@ function CreateKontakItem() {
             required
           />
 
-          {/* Upload Gambar Kategori */}
           <Box>
-            <Text fz="sm" fw="bold">
+            <Text fz={"sm"} fw={"bold"}>Ikon Kontak Darurat Item</Text>
-              Gambar Kontak Darurat
+            <SelectIconProgram onChange={(value) => kontakState.create.form.icon = value} />
-            </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

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

@@ -1,30 +1,24 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 "use client";
 
+import { IconKey } from "@/app/admin/(dashboard)/_com/iconMap";
+import SelectIconProgramEdit from "@/app/admin/(dashboard)/_com/selectIconEdit";
 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,
+  Tooltip
 } from "@mantine/core";
-import { Dropzone } from "@mantine/dropzone";
 import {
-  IconArrowBack,
+  IconArrowBack
-  IconImageInPicture,
-  IconPhoto,
-  IconUpload,
-  IconX,
 } from "@tabler/icons-react";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -35,12 +29,9 @@ 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 || "",
+    icon: kontakState.update.form.icon || "",
     kategoriId: kontakState.update.form.kategoriId || [],
   });
 
@@ -56,11 +47,9 @@ function EditKontakDaruratKeamanan() {
         if (data) {
           setFormData({
             name: data.nama || "",
-            imageId: data.imageId || "",
+            icon: data.icon || "",
             kategoriId: data.kategoriId || [],
           });
-
-          if (data?.image?.link) setPreviewUtama(data.image.link);
         }
       } catch (error) {
         console.error("Error loading kontak darurat:", error);
@@ -77,20 +66,9 @@ function EditKontakDaruratKeamanan() {
       kontakState.update.form = {
         ...kontakState.update.form,
         nama: formData.name,
-        imageId: formData.imageId,
+        icon: formData.icon,
         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");
@@ -155,52 +133,15 @@ function EditKontakDaruratKeamanan() {
             error={!formData.kategoriId.length ? "Pilih minimal satu kategori" : undefined}
           />
 
-          {/* Gambar utama */}
           <Box>
-            <Text fz="sm" fw="bold">
+            <Text fz={"sm"} fw={"bold"}>Ikon Program Kreatif Desa</Text>
-              Masukkan Gambar
+            <SelectIconProgramEdit
-            </Text>
+              value={formData.icon as IconKey}
-            <Dropzone
+              onChange={(value) => {
-              onDrop={(files) => {
+                setFormData((prev) => ({ ...prev, icon: value }));
-                const selectedFile = files[0];
+                kontakState.update.form.icon = value;
-                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 */}

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

@@ -1,11 +1,12 @@
 'use client'
-import colors from '@/con/colors';
+import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';
-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 colors from '@/con/colors';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
@@ -17,7 +18,7 @@ function DetailKontakDaruratKeamanan() {
   const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
 
   useShallowEffect(() => {
-    kontakDarurat.kontakDaruratItem.findUnique.load(params?.id as string);
+    kontakDarurat.kontakDaruratItem.findMany.load();
     kontakState.findUnique.load(params?.id as string);
   }, []);
 
@@ -74,14 +75,15 @@ function DetailKontakDaruratKeamanan() {
                 <Text fz="md" c="dimmed">{data?.nama || '-'}</Text>
               </Box>
 
-              {/* Gambar Utama */}
               <Box>
-                <Text fz="lg" fw="bold">Gambar</Text>
+                <Text fz={"lg"} fw={"bold"}>Ikon Program Kreatif Desa</Text>
-                <Image
+                {data?.icon && (
-                  w={{ base: 150, md: 490 }}
+                  <IconMapper
-                  src={data?.image?.link}
+                    name={data?.icon as IconKey}
-                  alt="gambar kontak darurat"
+                    size={32}
-                />
+                    color={colors['blue-button']}
+                  />
+                )}
               </Box>
 
               {/* Kontak Items */}
@@ -92,11 +94,11 @@ function DetailKontakDaruratKeamanan() {
                     <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 && (
+                      {item.kontakItem.icon && (
-                        <Image
+                        <IconMapper
-                          w={{ base: 120, md: 200 }}
+                          name={item.kontakItem.icon as IconKey}
-                          src={item.kontakItem.image.link}
+                          size={32}
-                          alt={`gambar kontak`}
+                          color={colors['blue-button']}
                         />
                       )}
                     </Box>

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

@@ -1,35 +1,28 @@
 'use client'
+import SelectIconProgram from '@/app/admin/(dashboard)/_com/selectIcon';
 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,
+  Tooltip
 } from '@mantine/core';
-import { Dropzone } from '@mantine/dropzone';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { IconArrowBack } 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();
   }, []);
@@ -37,29 +30,12 @@ function CreateKontakDaruratKeamanan() {
   const resetForm = () => {
     kontakState.create.form = {
       nama: '',
-      imageId: '',
+      icon: '',
       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');
@@ -105,64 +81,9 @@ function CreateKontakDaruratKeamanan() {
             required
           />
 
-          {/* Upload Gambar Kategori */}
           <Box>
-            <Text fz="sm" fw="bold">
+            <Text fz={"sm"} fw={"bold"}>Ikon Kontak Darurat</Text>
-              Masukkan Gambar
+            <SelectIconProgram onChange={(value) => kontakState.create.form.icon = value} />
-            </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

src/app/admin/(dashboard)/keamanan/laporan-publik/[id]/page.tsx

@@ -73,7 +73,7 @@ function DetailLaporanPublik() {
             Detail Laporan Publik
           </Text>
 
-          <Paper bg={colors['BG-trans']} p="md" radius="md" shadow="xs">
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
             <Stack gap="sm">
               <Box>
                 <Text fz="lg" fw="bold">Judul Laporan Publik</Text>
@@ -96,7 +96,27 @@ function DetailLaporanPublik() {
 
               <Box>
                 <Text fz="lg" fw="bold">Status</Text>
-                <Text fz="md" c="dimmed">{data.status || '-'}</Text>
+                <Box
+                  style={{
+                    display: 'inline-block',
+                    padding: '4px 12px',
+                    borderRadius: '16px',
+                    backgroundColor:
+                     data.status === 'Selesai' ? '#94EF95FF' :
+                       data.status === 'Proses' ? '#F1D295FF' :
+                          '#F38E8EFF',
+                    color:
+                     data.status === 'Selesai' ? '#01BA01FF' :
+                       data.status === 'Proses' ? '#B67A00FF' :
+                          '#AE1700FF',
+                    fontWeight: 900,
+                    fontSize: '0.75rem',
+                    textAlign: 'center',
+                    minWidth: '80px',
+                  }}
+                >
+                  {data.status || '-'}
+                </Box>
               </Box>
 
               <Box>
@@ -109,7 +129,6 @@ function DetailLaporanPublik() {
                 {data.penanganan?.length ? (
                   data.penanganan.map((item, index) => (
                     <Box key={index} pl="sm">
-                      <Text fz="md" fw="bold">Deskripsi Penanganan</Text>
                       <Text
                         fz="md"
                         c="dimmed"

src/app/admin/(dashboard)/keamanan/laporan-publik/create/page.tsx

@@ -5,18 +5,16 @@ import {
   Button,
   Group,
   Paper,
-  Select,
   Stack,
   Text,
   TextInput,
   Title,
-  Tooltip,
+  Tooltip
 } from '@mantine/core';
 import { DateTimePicker } from '@mantine/dates';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
-import CreateEditor from '../../../_com/createEditor';
 import laporanPublikState from '../../../_state/keamanan/laporan-publik';
 
 export type Status = 'Selesai' | 'Proses' | 'Gagal';
@@ -30,8 +28,6 @@ function CreateLaporanPublik() {
       judul: '',
       lokasi: '',
       tanggalWaktu: '',
-      status: 'Proses' as Status,
-      penanganan: '',
       kronologi: '',
     };
   };
@@ -94,18 +90,6 @@ function CreateLaporanPublik() {
             }}
           />
 
-          <Select
-            value={stateLaporan.create.form.status}
-            onChange={(e) => (stateLaporan.create.form.status = e?.valueOf() as Status)}
-            label={<Text fw="bold" fz="sm">Status Laporan Publik</Text>}
-            placeholder="Pilih status laporan publik"
-            data={[
-              { value: 'Selesai', label: 'Selesai' },
-              { value: 'Proses', label: 'Proses' },
-              { value: 'Gagal', label: 'Gagal' },
-            ]}
-          />
-
           <TextInput
             value={stateLaporan.create.form.kronologi}
             onChange={(e) => (stateLaporan.create.form.kronologi = e.target.value)}
@@ -114,16 +98,6 @@ function CreateLaporanPublik() {
             required
           />
 
-          <Box>
-            <Text fw="bold" fz="sm" mb={6}>
-              Penanganan Laporan Publik
-            </Text>
-            <CreateEditor
-              value={stateLaporan.create.form.penanganan}
-              onChange={(e) => (stateLaporan.create.form.penanganan = e)}
-            />
-          </Box>
-
           <Group justify="right">
             <Button
               onClick={handleSubmit}

src/app/admin/(dashboard)/keamanan/laporan-publik/page.tsx

@@ -111,12 +111,34 @@ function ListLaporanPublik({ search }: { search: string }) {
                       </Text>
                     </TableTd>
                     <TableTd>
-                      <Text fz="sm">{item.status}</Text>
+                      <Box
+                        style={{
+                          display: 'inline-block',
+                          padding: '4px 12px',
+                          borderRadius: '16px',
+                          backgroundColor:
+                            item.status === 'Selesai' ? '#94EF95FF' :
+                              item.status === 'Proses' ? '#F1D295FF' :
+                                '#F38E8EFF',
+                          color:
+                            item.status === 'Selesai' ? '#01BA01FF' :
+                              item.status === 'Proses' ? '#B67A00FF' :
+                                '#AE1700FF',
+                          fontWeight: 900,
+                          fontSize: '0.75rem',
+                          textAlign: 'center',
+                          minWidth: '80px',
+                        }}
+                      >
+                        {item.status}
+                      </Box>
                     </TableTd>
                     <TableTd>
-                      <Text truncate fz="sm" c="dimmed" lineClamp={1}>
+                      <Box w={200}>
-                        {item.kronologi}
+                        <Text truncate fz="sm" c="dimmed" lineClamp={1}>
-                      </Text>
+                          {item.kronologi}
+                        </Text>
+                      </Box>
                     </TableTd>
                     <TableTd>
                       <Button

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

@@ -4,10 +4,12 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
 import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
 import {
   Box,
   Button,
   Group,
+  Image,
   Paper,
   Stack,
   Text,
@@ -15,7 +17,8 @@ import {
   Title,
   Tooltip
 } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -24,6 +27,7 @@ import { useProxy } from 'valtio/utils';
 interface ArtikelKesehatanFormBase {
   title: string;
   content: string;
+  imageId: string;
   introduction: { content: string };
   symptom: { title: string; content: string };
   prevention: { title: string; content: string };
@@ -37,29 +41,32 @@ function EditArtikelKesehatan() {
   const router = useRouter();
   const params = useParams();
 
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
   const [formData, setFormData] = useState<ArtikelKesehatanFormBase>({
-    title: stateArtikelKesehatan.edit.form.title || '',
+    title: stateArtikelKesehatan.edit.form.title,
-    content: stateArtikelKesehatan.edit.form.content || '',
+    content: stateArtikelKesehatan.edit.form.content,
-    introduction: { content: stateArtikelKesehatan.edit.form.introduction?.content || '' },
+    imageId: stateArtikelKesehatan.edit.form.imageId,
+    introduction: { content: stateArtikelKesehatan.edit.form.introduction?.content },
     symptom: {
-      title: stateArtikelKesehatan.edit.form.symptom?.title || '',
+      title: stateArtikelKesehatan.edit.form.symptom?.title,
-      content: stateArtikelKesehatan.edit.form.symptom?.content || ''
+      content: stateArtikelKesehatan.edit.form.symptom?.content
     },
     prevention: {
-      title: stateArtikelKesehatan.edit.form.prevention?.title || '',
+      title: stateArtikelKesehatan.edit.form.prevention?.title,
-      content: stateArtikelKesehatan.edit.form.prevention?.content || ''
+      content: stateArtikelKesehatan.edit.form.prevention?.content
     },
     firstAid: {
-      title: stateArtikelKesehatan.edit.form.firstAid?.title || '',
+      title: stateArtikelKesehatan.edit.form.firstAid?.title,
-      content: stateArtikelKesehatan.edit.form.firstAid?.content || ''
+      content: stateArtikelKesehatan.edit.form.firstAid?.content
     },
     mythVsFact: {
-      title: stateArtikelKesehatan.edit.form.mythVsFact?.title || '',
+      title: stateArtikelKesehatan.edit.form.mythVsFact?.title,
-      mitos: stateArtikelKesehatan.edit.form.mythVsFact?.mitos || '',
+      mitos: stateArtikelKesehatan.edit.form.mythVsFact?.mitos,
-      fakta: stateArtikelKesehatan.edit.form.mythVsFact?.fakta || ''
+      fakta: stateArtikelKesehatan.edit.form.mythVsFact?.fakta
     },
     doctorSign: {
-      content: stateArtikelKesehatan.edit.form.doctorSign?.content || ''
+      content: stateArtikelKesehatan.edit.form.doctorSign?.content
     }
   });
 
@@ -76,6 +83,7 @@ function EditArtikelKesehatan() {
             title: form.title,
             content: form.content,
             introduction: { content: form.introduction?.content || '' },
+            imageId: form.imageId,
             symptom: {
               title: form.symptom?.title || '',
               content: form.symptom?.content || ''
@@ -97,6 +105,10 @@ function EditArtikelKesehatan() {
               content: form.doctorSign?.content || ''
             }
           });
+
+          if (form?.imageId) {
+            setPreviewImage(`${process.env.NEXT_PUBLIC_API_URL}/file/${form.imageId}`);
+          }          
         }
       } catch (error) {
         console.error("Error loading artikel kesehatan:", error);
@@ -109,6 +121,20 @@ function EditArtikelKesehatan() {
   const handleSubmit = async () => {
     try {
       stateArtikelKesehatan.edit.form = { ...formData };
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({
+          file,
+          name: file.name,
+        });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        stateArtikelKesehatan.edit.form.imageId = uploaded.id;
+      }
+
       const success = await stateArtikelKesehatan.edit.submit();
       if (success) {
         toast.success("Artikel kesehatan berhasil diperbarui!");
@@ -151,6 +177,60 @@ function EditArtikelKesehatan() {
             onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
             required
           />
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar Berita
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error("File tidak valid, gunakan format gambar")}
+              maxSize={5 * 1024 ** 2}
+              accept={{ "image/*": [] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color={colors["blue-button"]} stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="red" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
+                </Dropzone.Idle>
+                <Stack gap="xs" align="center">
+                  <Text size="md" fw={500}>
+                    Seret gambar atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed">
+                    Maksimal 5MB, format gambar wajib
+                  </Text>
+                </Stack>
+              </Group>
+            </Dropzone>
+
+            {previewImage && (
+              <Box mt="sm" style={{ display: "flex", justifyContent: "center" }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview Gambar"
+                  radius="md"
+                  style={{
+                    maxHeight: 220,
+                    objectFit: "contain",
+                    border: `1px solid ${colors["blue-button"]}`,
+                  }}
+                />
+              </Box>
+            )}
+          </Box>
           <TextInput
             label="Deskripsi"
             placeholder="Masukkan deskripsi artikel"

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

@@ -6,6 +6,7 @@ import {
   Box,
   Button,
   Group,
+  Image,
   Paper,
   Skeleton,
   Stack,
@@ -81,6 +82,22 @@ function DetailArtikelKesehatan() {
                 <Text fz="lg" fw="bold">Judul</Text>
                 <Text fz="md" c="dimmed">{data.title}</Text>
               </Box>
+              {/* Gambar */}
+              <Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                {data.image?.link ? (
+                  <Image
+                    src={data.image.link}
+                    alt={data.title || 'Gambar Berita'}
+                    w={200}
+                    h={200}
+                    radius="md"
+                    fit="cover"
+                  />
+                ) : (
+                  <Text fz="sm" c="dimmed">Tidak ada gambar</Text>
+                )}
+              </Box>
 
               {/* Deskripsi */}
               <Box>

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

@@ -2,10 +2,12 @@
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
 import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
 import {
   Box,
   Button,
   Group,
+  Image,
   Paper,
   Stack,
   Text,
@@ -13,19 +15,24 @@ import {
   Title,
   Tooltip,
 } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+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 CreateArtikelKesehatan() {
   const stateArtikelKesehatan = useProxy(artikelKesehatanState);
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
   const router = useRouter();
 
   const resetForm = () => {
     stateArtikelKesehatan.create.form = {
       title: '',
       content: '',
+      imageId: '',
       introduction: {
         content: '',
       },
@@ -50,10 +57,27 @@ function CreateArtikelKesehatan() {
         content: '',
       },
     };
+    setPreviewImage(null);
+    setFile(null);
   };
 
   const handleSubmit = async (e?: React.FormEvent) => {
     e?.preventDefault();
+    if (!file) {
+      return toast.warn('Silakan pilih file gambar terlebih dahulu');
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    });
+
+    const uploaded = res.data?.data;
+    if (!uploaded?.id) {
+      return toast.error('Gagal mengunggah gambar, silakan coba lagi');
+    }
+
+    stateArtikelKesehatan.create.form.imageId = uploaded.id;
     await stateArtikelKesehatan.create.submit();
     toast.success('Data berhasil disimpan');
     resetForm();
@@ -89,6 +113,56 @@ function CreateArtikelKesehatan() {
         style={{ border: '1px solid #e0e0e0' }}
       >
         <Stack gap="md">
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar Berita
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+              </Group>
+              <Text ta="center" mt="sm" size="sm" color="dimmed">
+                Seret gambar atau klik untuk memilih file (maks 5MB)
+              </Text>
+            </Dropzone>
+
+            {previewImage && (
+              <Box mt="sm" style={{ textAlign: 'center' }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview Gambar"
+                  radius="md"
+                  style={{
+                    maxHeight: 200,
+                    objectFit: 'contain',
+                    border: '1px solid #ddd',
+                  }}
+                />
+              </Box>
+            )}
+          </Box>
+          
           <TextInput
             label={"Judul"}
             placeholder="Masukkan judul"

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

@@ -5,8 +5,8 @@ import {
   Button,
   Center,
   Group,
-  Paper,
   Pagination,
+  Paper,
   Skeleton,
   Stack,
   Table,
@@ -20,26 +20,18 @@ import {
   Tooltip,
 } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
+import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import artikelKesehatanState from '../../../_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
-import { useState } from 'react';
 
 function ArtikelKesehatan() {
-  const router = useRouter();
   const [search, setSearch] = useState("");
 
   return (
     <Box>
-      {/* Tombol Back */}
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors["blue-button"]} size={25} />
-        </Button>
-      </Box>
-
       {/* Header Search */}
       <HeaderSearch
         title='Artikel Kesehatan'

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

@@ -3,7 +3,7 @@ import { Context } from "elysia";
 
 type FormCreate = {
   nama: string;
-  imageId?: string;
+  icon: string;
   kategoriId: string[];
 };
 export default async function kontakDaruratKeamananCreate(context: Context) {
@@ -18,7 +18,7 @@ export default async function kontakDaruratKeamananCreate(context: Context) {
       const kontakDaruratKeamanan = await prisma.kontakDaruratKeamanan.create({
         data: {
           nama: body.nama,
-          imageId: body.imageId,
+          icon: body.icon,
           kategoriId: body.kategoriId[0],
         },
       });
@@ -33,7 +33,6 @@ export default async function kontakDaruratKeamananCreate(context: Context) {
       return await prisma.kontakDaruratKeamanan.findUnique({
         where: { id: kontakDaruratKeamanan.id },
         include: {
-          image: true,
           kategori: true,
           kontakItems: {
             include: {

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

@@ -1,7 +1,5 @@
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
-import fs from "fs/promises";
-import path from "path";
 
 export default async function kontakDaruratKeamananDelete(context: Context) {
   const { params } = context;
@@ -19,9 +17,6 @@ export default async function kontakDaruratKeamananDelete(context: Context) {
 
   const kontakDaruratKeamanan = await prisma.kontakDaruratKeamanan.findUnique({
     where: { id },
-    include: {
-      image: true,
-    },
   });
 
   if (!kontakDaruratKeamanan) {
@@ -31,21 +26,6 @@ export default async function kontakDaruratKeamananDelete(context: Context) {
     };
   }
 
-  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 },
   });

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

@@ -14,7 +14,10 @@ export default async function kontakDaruratKeamananFindMany(context: Context) {
 
   // Tambahkan pencarian (jika ada)
   if (search) {
-    where.OR = [{ nama: { contains: search, mode: "insensitive" } }];
+    where.OR = [
+      { nama: { contains: search, mode: "insensitive" } },
+      { kontakItems: { some: { kontakItem: { nama: { contains: search, mode: "insensitive" } } } } },
+    ];
   }
 
   try {
@@ -27,7 +30,6 @@ export default async function kontakDaruratKeamananFindMany(context: Context) {
               
             },
           },
-          image: true,
           kategori: true,
         },
         skip,

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

@@ -16,15 +16,11 @@ export default async function kontakDaruratKeamananFindUnique(
       include: {
         kontakItems: {
           include: {
-            kontakItem: {
+            kontakItem: true,
-              include: {
-                image: true
-              }
-            },
             
           },
         },
-        image: true,
+        kategori: true,
       },
     });
 

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

@@ -24,7 +24,7 @@ const KontakDaruratKeamanan = new Elysia({
   .post("/create", kontakDaruratKeamananCreate, {
     body: t.Object({
       nama: t.String(),
-      imageId: t.Optional(t.String()),
+      icon: t.String(),
       kategoriId: t.Array(t.String()),
     }),
   })
@@ -41,7 +41,7 @@ const KontakDaruratKeamanan = new Elysia({
       }),
       body: t.Object({
         nama: t.String(),
-        imageId: t.Optional(t.String()),
+        icon: t.String(),
         kategoriId: t.Array(t.String()),
       }),
     }

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

@@ -4,7 +4,7 @@ import { Context } from "elysia";
 type FormCreate = {
   nama: string;
   nomorTelepon: string;
-  imageId?: string;
+  icon: string;
 };
 export default async function kontakItemCreate(context: Context){
     const body = context.body as FormCreate
@@ -13,7 +13,7 @@ export default async function kontakItemCreate(context: Context){
         data: {
             nama: body.nama,
             nomorTelepon: body.nomorTelepon,
-            imageId: body.imageId,
+            icon: body.icon,
         },
     })
     return {

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

@@ -1,7 +1,5 @@
 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;
@@ -15,9 +13,6 @@ export default async function kontakItemDelete(context: Context){
 
     const kontakItem = await prisma.kontakItem.findUnique({
         where: { id },
-        include: {
-            image: true
-        }
     });
 
     if (!kontakItem) {
@@ -27,18 +22,6 @@ export default async function kontakItemDelete(context: Context){
         };
     }
 
-    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 },
     });

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

@@ -22,9 +22,6 @@ export default async function kontakItemFindMany(context: Context) {
   try {
     const [data, total] = await Promise.all([
       prisma.kontakItem.findMany({
-        include: {
-          image: true,
-        },
         skip,
         take: limit,
         orderBy: { createdAt: "desc" },

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

@@ -30,9 +30,6 @@ export default async function kontakItemFindUnique(
 
     const data = await prisma.kontakItem.findUnique({
       where: { id },
-      include: {
-        image: true,
-      },
     });
 
     if (!data) {

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

@@ -17,7 +17,7 @@ const KontakItem = new Elysia({
   .post("/create", kontakItemCreate, {
     body: t.Object({
       nama: t.String(),
-      imageId: t.Optional(t.String()),
+      icon: t.String(),
       nomorTelepon: t.String(),
     }),
   })
@@ -31,7 +31,7 @@ const KontakItem = new Elysia({
     {
       body: t.Object({
         nama: t.String(),
-        imageId: t.Optional(t.String()),
+        icon: t.String(),
         nomorTelepon: t.String(),
 
       }),

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

@@ -4,7 +4,7 @@ import { Context } from "elysia";
 type FormUpdate = {
   nama: string;
   nomorTelepon: string;
-  imageId?: string;
+  icon: string;
 };
 
 export default async function kontakItemUpdate(context: Context){
@@ -18,10 +18,7 @@ export default async function kontakItemUpdate(context: Context){
           data: {
             nama: body.nama,
             nomorTelepon: body.nomorTelepon,
-            imageId: body.imageId,
+            icon: body.icon,
-          },
-          include: {
-            image: true,
           },
         });
       

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

@@ -4,7 +4,7 @@ import { Context } from "elysia";
 type FormUpdate = {
   id: string;
   nama: string;
-  imageId?: string;
+  icon: string;
   kategoriId: string[];
 };
 
@@ -23,7 +23,7 @@ export default async function kontakDaruratKeamananUpdate(context: Context) {
     where: { id: body.id },
     data: {
       nama: body.nama,
-      imageId: body.imageId,
+      icon: body.icon,
       kategoriId: body.kategoriId[0],
     },
   });
@@ -42,7 +42,6 @@ export default async function kontakDaruratKeamananUpdate(context: Context) {
   const updated = await prisma.kontakDaruratKeamanan.findUnique({
     where: { id: body.id },
     include: {
-      image: true,
       kategori: true,
       kontakItems: {
         include: {

src/app/api/[[...slugs]]/_lib/keamanan/laporan-publik/create.ts

@@ -5,13 +5,11 @@ type LaporanPublikInput = {
   judul: string;
   lokasi: string;
   tanggalWaktu: string;
-  status: "Selesai" | "Proses" | "Gagal";
-  penanganan: string;
   kronologi?: string;
 };
 
 const laporanPublikCreate = async (context: Context) => {
-  const { judul, lokasi, tanggalWaktu, status, penanganan, kronologi } =
+  const { judul, lokasi, tanggalWaktu, kronologi } =
     (await context.body) as LaporanPublikInput;
 
     const createdLaporanPublik = await prisma.laporanPublik.create({
@@ -19,16 +17,7 @@ const laporanPublikCreate = async (context: Context) => {
             judul,
             lokasi,
             tanggalWaktu: new Date(tanggalWaktu),
-            status,
-            penanganan: {
-                create: {
-                    deskripsi: penanganan,
-                },
-            },
             kronologi,
-        },
-        include: {
-            penanganan: true,
         }
     })
 

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

@@ -14,12 +14,6 @@ const LaporanPublik = new Elysia({
       judul: t.String(),
       lokasi: t.String(),
       tanggalWaktu: t.String(), // ISO string
-      status: t.Union([
-        t.Literal("Selesai"),
-        t.Literal("Proses"),
-        t.Literal("Gagal"),
-      ]),
-      penanganan: t.String(), // 🛠️ ARRAY of strings
       kronologi: t.Optional(t.String()),
     }),
   })

src/app/api/[[...slugs]]/_lib/keamanan/laporan-publik/updt.ts

@@ -1,13 +1,14 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 type LaporanPublikUpdateInput = {
-  judul: string;
+  judul?: string;
-  lokasi: string;
+  lokasi?: string;
-  tanggalWaktu: string;
+  tanggalWaktu?: string;
-  status: "Selesai" | "Proses" | "Gagal";
+  status?: "Selesai" | "Proses" | "Gagal";
-  penanganan: string;
   kronologi?: string;
+  penanganan?: string;
 };
 
 const LaporanPublikUpdate = async (context: Context) => {
@@ -15,28 +16,35 @@ const LaporanPublikUpdate = async (context: Context) => {
   const { judul, lokasi, tanggalWaktu, status, penanganan, kronologi } =
     (await context.body) as LaporanPublikUpdateInput;
 
-  await prisma.penangananLaporanPublik.deleteMany({
+  // Prepare update data with only provided fields
-    where: {
+  const updateData: any = {};
-      laporanId: id,
-    },
-  });
   
-  const updated = await prisma.laporanPublik.update({
+  if (judul !== undefined) updateData.judul = judul;
-    where: {
+  if (lokasi !== undefined) updateData.lokasi = lokasi;
-      id,
+  if (tanggalWaktu !== undefined) updateData.tanggalWaktu = new Date(tanggalWaktu);
-    },
+  if (status !== undefined) updateData.status = status;
-    data: {
+  if (kronologi !== undefined) updateData.kronologi = kronologi;
-      judul,
+
-      lokasi,
+  // Handle penanganan update if provided
-      tanggalWaktu: new Date(tanggalWaktu),
+  if (penanganan !== undefined) {
-      status,
+    // Delete existing penanganan
-      kronologi,
+    await prisma.penangananLaporanPublik.deleteMany({
-      penanganan: {
+      where: { laporanId: id },
+    });
+
+    // Add new penanganan if not empty
+    if (penanganan.trim()) {
+      updateData.penanganan = {
         create: {
           deskripsi: penanganan,
         },
-      },
+      };
-    },
+    }
+  }
+
+  const updated = await prisma.laporanPublik.update({
+    where: { id },
+    data: updateData,
     include: {
       penanganan: true,
     },

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/create.ts

@@ -4,6 +4,7 @@ import { Context } from "elysia";
 type ArtikelKesehatanInput = {
     title: string;
     content: string;
+    imageId: string;
     introduction: {content: string};
     symptom: {title: string; content: string};
     prevention: {title: string; content: string};
@@ -14,7 +15,7 @@ type ArtikelKesehatanInput = {
 
 const artikelKesehatanCreate = async (context: Context) => {
     const body = await context.body as ArtikelKesehatanInput;
-    const { title, content, introduction, symptom, prevention, firstAid, mythVsFact, doctorSign } = body;
+    const { title, content, introduction, symptom, prevention, firstAid, mythVsFact, doctorSign, imageId } = body;
 
     const [createdIntroduction, createdSymptom, createdPrevention, createdFirstAid, createdMythVsFact, createdDoctorSign] = await Promise.all([
         prisma.introduction.create({ data: introduction }),
@@ -29,6 +30,7 @@ const artikelKesehatanCreate = async (context: Context) => {
         data: {
             title,
             content,
+            imageId,
             introductionId: createdIntroduction.id,
             symptomId: createdSymptom.id,
             preventionId: createdPrevention.id,
@@ -37,6 +39,7 @@ const artikelKesehatanCreate = async (context: Context) => {
             doctorSignId: createdDoctorSign.id,
         },
         include: {
+            image: true,
             introduction: true,
             symptom: true,
             prevention: true,

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/findMany.ts

@@ -37,6 +37,7 @@ export default async function artikelKesehatanFindMany(context: Context) {
           firstaid: true,
           mythvsfact: true,
           doctorsign: true,
+          image: true,
         },
         skip,
         take: limit,

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/findUnique.ts

@@ -29,6 +29,7 @@ export async function artikelKesehatanFindUnique(request: Request) {
                 firstaid: true,
                 mythvsfact: true,
                 doctorsign: true,
+                image: true,
             }
         })
         if (!data) {

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/index.ts

@@ -36,6 +36,7 @@ const ArtikelKesehatan = new Elysia({
       doctorSign: t.Object({
         content: t.String(),
       }),
+      imageId: t.String(),
     }),
   })
   .get("/find-many", artikelKesehatanFindMany)
@@ -79,6 +80,7 @@ const ArtikelKesehatan = new Elysia({
         doctorSign: t.Object({
           content: t.String(),
         }),
+        imageId: t.String(),
       }),
     }
   );

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/artikel_kesehatan/updt.ts

@@ -4,6 +4,7 @@ import { Context } from "elysia";
 type ArtikelKesehatanInput = {
   title: string;
   content: string;
+  imageId: string;
   introduction: { content: string };
   symptom: { title: string; content: string };
   prevention: { title: string; content: string };
@@ -51,6 +52,7 @@ const artikelKesehatanUpdate = async (context: Context) => {
     firstAid,
     mythVsFact,
     doctorSign,
+    imageId,
   } = body;
 
   await Promise.all([
@@ -84,7 +86,8 @@ const artikelKesehatanUpdate = async (context: Context) => {
     where: { id },
     data: {
       title,
-      content
+      content,
+      imageId,
     },
     include: {
       introduction: true,
@@ -93,6 +96,7 @@ const artikelKesehatanUpdate = async (context: Context) => {
       firstaid: true,
       mythvsfact: true,
       doctorsign: true,
+      image: true,
     },
   });
 

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

@@ -1,72 +1,60 @@
+'use client'
+import kontakDarurat from '@/app/admin/(dashboard)/_state/keamanan/kontak-darurat-keamanan';
 import colors from '@/con/colors';
-import { Avatar, Box, Flex, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { Avatar, Box, Center, Flex, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
-import { IconAmbulance, IconBadge, IconBuildingBank, IconBuildingSkyscraper, IconFiretruck, IconFirstAidKit, IconPhoneCall, IconUser } from '@tabler/icons-react';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { IconPhoneCall, IconSearch } from '@tabler/icons-react';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';
 
-const emergencyServices = [
-  {
-    id: 1,
-    name: "Polisi",
-    icon: <IconBadge size={24} color={colors['blue-button']} />,
-    nomor: '081xxxxxxxxx'
-  },
-  {
-    id: 2,
-    name: "Ambulans",
-    icon: <IconAmbulance size={24} color={colors['blue-button']} />,
-    nomor: '081xxxxxxxxx'
-  },
-  {
-    id: 3,
-    name: "Pemadam Kebakaran",
-    icon: <IconFiretruck size={24} color={colors['blue-button']} />,
-    nomor: '081xxxxxxxxx'
-  }
-];
-
-const healthFacilities = [
-  {
-    id: 4,
-    name: "Puskesmas Darmasaba",
-    icon: <IconFirstAidKit size={24} color={colors['blue-button']} />,
-    nomor: '081xxxxxxxxx'
-  },
-  {
-    id: 5,
-    name: "UGD Terdekat",
-    icon: <IconAmbulance size={24} color={colors['blue-button']} />,
-    nomor: '081xxxxxxxxx'
-  }
-];
-
-const villageGovernment = [
-  {
-    id: 6,
-    name: "Kantor Desa Darmasaba",
-    icon: <IconBuildingSkyscraper size={24} color={colors['blue-button']} />,
-    nomor: '081xxxxxxxxx'
-  },
-  {
-    id: 7,
-    name: "Kepala Desa",
-    icon: <IconUser size={24} color={colors['blue-button']} />,
-    nomor: '081xxxxxxxxx'
-  }
-];
 function Page() {
+  const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebouncedValue(search, 500);
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = kontakState.findMany;
+
+  useShallowEffect(() => {
+    load(page, 4, debouncedSearch);
+    kontakDarurat.kontakDaruratItem.findMany.load();
+  }, [page, debouncedSearch]);
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
+    );
+  }
+
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Box>
+      <Group px={{ base: 'md', md: 100 }} justify={'space-between'} align='center'>
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+        <Box>
-          Kontak Darurat
+          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-        </Text>
+            Kontak Darurat
-        <Text px={{ base: 20, md: 150 }} ta={"center"} fz={{ base: "h4", md: "h3" }} >
+          </Text>
-          Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung.
+          <Text fz={{ base: "h4", md: "h3" }} >
-        </Text>
+            Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung.
-      </Box>
+          </Text>
+        </Box>
+        <TextInput
+          placeholder='Cari kontak darurat, nama, atau nomor...'
+          leftSection={<IconSearch size={20} />}
+          value={search}
+          onChange={(e) => setSearch(e.currentTarget.value)}
+        />
+      </Group>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'}>
           <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
@@ -87,71 +75,74 @@ function Page() {
       <Box px={{ base: "md", md: 100 }}>
         <SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl">
           {/* Layanan Darurat */}
-          <Paper p="lg" radius="md" bg={colors['white-trans-1']}>
+          {data.map((item) => (
-            <Group pb="md" align="center">
+            <Paper
-              <Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
+              key={item.id}
-                <IconFirstAidKit size={30} color={colors["blue-button"]} />
+              p="lg"
-              </Avatar>
+              radius="md"
-              <Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
+              bg={colors['white-trans-1']}
-                Layanan Darurat
+            >
-              </Text>
+              <Group pb="md" align="center">
-            </Group>
+                <Avatar radius="xl" size="lg" bg={colors['BG-trans']}>
-
+                  {item.icon && (
-            {emergencyServices.map((v, k) => (
+                    <IconMapper
-              <Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
+                      name={item.icon as IconKey}
-                <Group>
+                      size={32}
-                  {v.icon}
+                      color={colors['blue-button']}
-                  <Text>{v.name}</Text>
+                    />
-                </Group>
+                  )}
-                <Text>{v.nomor}</Text>
+                </Avatar>
+                <Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
+                  {item.nama}
+                </Text>
               </Group>
-            ))}
-          </Paper>
 
-          {/* Fasilitas Kesehatan */}
+              {/* Kontak Items */}
-          <Paper p="lg" radius="md" bg={colors['white-trans-1']}>
+              {item.kontakItems?.map((kontak) => (
-            <Group pb="md" align="center">
+                <Paper
-              <Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
+                  key={kontak.id}
-                <IconBuildingSkyscraper size={30} color={colors["blue-button"]} />
+                  p="lg"
-              </Avatar>
+                  bg={colors['BG-trans']}
-              <Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
+                  radius="md"
-                Fasilitas Kesehatan
+                  shadow="xs"
-              </Text>
+                  mt="sm"
-            </Group>
+                >
-
+                  <Group align="center" justify="space-between">
-            {healthFacilities.map((v, k) => (
+                    <Group align="center">
-              <Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
+                      {kontak.kontakItem?.icon && (
-                <Group>
+                        <IconMapper
-                  {v.icon}
+                          name={kontak.kontakItem.icon as IconKey}
-                  <Text>{v.name}</Text>
+                          size={24}
-                </Group>
+                          color={colors['blue-button']}
-                <Text>{v.nomor}</Text>
+                        />
-              </Group>
+                      )}
-            ))}
+                      <Text fw="bold" fz={{ base: "sm", md: "md" }} c={colors["blue-button"]}>
-          </Paper>
+                        {kontak.kontakItem?.nama}
-
+                      </Text>
-          {/* Pemerintah Desa */}
+                    </Group>
-          <Paper p="lg" radius="md" bg={colors['white-trans-1']}>
+                    <Text fw="bold" fz={{ base: "sm", md: "md" }} c={colors["blue-button"]}>
-            <Group pb="md" align="center">
+                      {kontak.kontakItem?.nomorTelepon}
-              <Avatar radius={"xl"} size={'lg'} bg={colors['BG-trans']}>
+                    </Text>
-                <IconBuildingBank size={30} color={colors["blue-button"]} />
+                  </Group>
-              </Avatar>
+                </Paper>
-              <Text fw="bold" fz={{ base: "lg", md: "xl" }} c={colors["blue-button"]}>
+              ))}
-                Pemerintah Desa
+            </Paper>
-              </Text>
+          ))}
-            </Group>
-
-            {villageGovernment.map((v, k) => (
-              <Group key={k} px="md" py="sm" bg={colors['BG-trans']} mb="xs" justify="space-between" style={{ borderRadius: 8 }}>
-                <Group>
-                  {v.icon}
-                  <Text>{v.name}</Text>
-                </Group>
-                <Text>{v.nomor}</Text>
-              </Group>
-            ))}
-          </Paper>
         </SimpleGrid>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 4, search);
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            }}
+            total={totalPages}
+            mt="md"
+            mb="md"
+            color="blue"
+            radius="md"
+          />
+        </Center>
       </Box>
     </Stack>
   );

src/app/darmasaba/(pages)/keamanan/laporan-publik/[id]/page.tsx

@@ -0,0 +1,163 @@
+'use client'
+import laporanPublikState from '@/app/admin/(dashboard)/_state/keamanan/laporan-publik'
+import colors from '@/con/colors'
+import {
+  Box,
+  Button,
+  Card,
+  Divider,
+  Group,
+  Loader,
+  Paper,
+  Stack,
+  Text,
+  Title,
+  Tooltip
+} from '@mantine/core'
+import { useShallowEffect } from '@mantine/hooks'
+import { IconArrowLeft } from '@tabler/icons-react'
+import { useParams, useRouter } from 'next/navigation'
+import { useProxy } from 'valtio/utils'
+
+function Page() {
+  const stateLaporan = useProxy(laporanPublikState)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    stateLaporan.findUnique.load(params?.id as string)
+  }, [])
+
+  if (!stateLaporan.findUnique.data) {
+    return (
+      <Stack align="center" justify="center" h="70vh">
+        <Loader size="lg" color="blue" />
+        <Text c="dimmed">Memuat detail laporan publik...</Text>
+      </Stack>
+    )
+  }
+
+  const data = stateLaporan.findUnique.data
+
+  return (
+    <Box py="xl" px={{ base: 'md', md: 100 }}>
+      <Group mb="lg">
+        <Tooltip label="Kembali ke daftar laporan">
+          <Button
+            variant="light"
+            color="blue"
+            leftSection={<IconArrowLeft size={20} />}
+            onClick={() => router.back()}
+            radius="xl"
+          >
+            Kembali
+          </Button>
+        </Tooltip>
+      </Group>
+
+      <Paper
+        withBorder
+        p="xl"
+        radius="xl"
+        shadow="md"
+        bg={colors['white-1']}
+      >
+        <Stack gap="lg">
+          <Title order={2} >
+            Detail Laporan Publik
+          </Title>
+
+          <Card withBorder radius="md" shadow="sm" p="md" >
+            <Stack gap="md">
+              <Box>
+                <Text fw={600} fz="lg" >Judul</Text>
+                <Text fz="sm" c="dimmed">{data.judul || '-'}</Text>
+              </Box>
+
+              <Divider />
+
+              <Box>
+                <Text fw={600} fz="lg" >Tanggal</Text>
+                <Text fz="sm" c="dimmed">
+                  {data.tanggalWaktu
+                    ? new Date(data.tanggalWaktu).toLocaleString('id-ID', { dateStyle: 'full', timeStyle: 'short' })
+                    : '-'}
+                </Text>
+              </Box>
+
+              <Divider />
+
+              <Box>
+                <Text fw={600} fz="lg" >Lokasi</Text>
+                <Text fz="sm" c="dimmed">{data.lokasi || '-'}</Text>
+              </Box>
+
+              <Divider />
+
+              <Box>
+                <Text fw={600} fz="lg" >Status</Text>
+                <Box
+                  style={{
+                    display: 'inline-block',
+                    padding: '6px 14px',
+                    borderRadius: '20px',
+                    backgroundColor:
+                      data.status === 'Selesai' ? '#38d9a9' :
+                        data.status === 'Proses' ? '#ffd43b' :
+                          '#ff6b6b',
+                    color: data.status === 'Proses' ? '#2e2e2e' : '#fff',
+                    fontWeight: 600,
+                    fontSize: '0.85rem',
+                    textAlign: 'center',
+                    minWidth: '90px',
+                  }}
+                >
+                  {data.status || '-'}
+                </Box>
+              </Box>
+
+              <Divider />
+
+              <Box>
+                <Text fw={600} fz="lg" >Kronologi</Text>
+                <Text fz="sm" c="dimmed">{data.kronologi || '-'}</Text>
+              </Box>
+
+              <Divider />
+
+              <Box>
+                <Text fw={600} fz="lg" >Penanganan</Text>
+                {data.penanganan?.length ? (
+                  <Stack gap="sm" mt="xs">
+                    {data.penanganan.map((item, index) => (
+                      <Paper
+                        key={index}
+                        p="sm"
+                        radius="md"
+                        shadow="xs"
+                        withBorder
+                        bg="dark.5"
+                      >
+                        <Text
+                          fz="sm"
+                          c="dimmed"
+                          dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }}
+                        />
+                      </Paper>
+                    ))}
+                  </Stack>
+                ) : (
+                  <Text fz="sm" c="dimmed" fs="italic">
+                    Belum ada penanganan
+                  </Text>
+                )}
+              </Box>
+            </Stack>
+          </Card>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default Page

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

@@ -1,56 +1,76 @@
+'use client'
+import laporanPublikState from '@/app/admin/(dashboard)/_state/keamanan/laporan-publik';
 import colors from '@/con/colors';
-import { Stack, Box, Text, Flex, ColorSwatch, SimpleGrid, List, ListItem, Button, Paper, Title } from '@mantine/core';
+import { Box, Button, Center, ColorSwatch, Flex, Group, Modal, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
-import React from 'react';
+import { DateTimePicker } from '@mantine/dates';
+import { useDebouncedValue, useDisclosure, useShallowEffect } from '@mantine/hooks';
+import { IconArrowRight, IconPlus } from '@tabler/icons-react';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
-import { IconArrowRight } from '@tabler/icons-react';
+import { useTransitionRouter } from 'next-view-transitions';
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 
-
-const data = [
-  {
-    id: 1,
-    judul: 'Kasus Pencurian Banjar Tengah',
-    tanggal: '3 Februari 2025, 02:00 WITA',
-    deskripsi: <List>
-      <ListItem>Laporan ke Polsek setempat</ListItem>
-      <ListItem>Penyisiran area oleh Pecalang</ListItem>
-      <ListItem>Koordinasi dengan dealer motor</ListItem>
-      <ListItem>Penyebaran informasi ke grup keamanan</ListItem>
-    </List>,
-    button: <Button fz={'md'} fullWidth bg={'#2A742D'}>Terselesaikan</Button>
-
-  },
-  {
-    id: 2,
-    judul: 'Kasus Narkoba Banjar Kaja',
-    tanggal: '10 Februari 2025, 22:30 WITA',
-    deskripsi: <List>
-      <ListItem>Koordinasi dengan Satres Narkoba</ListItem>
-      <ListItem>Penggerebekan lokasi</ListItem>
-      <ListItem>Pengamanan barang bukti</ListItem>
-      <ListItem>Pemeriksaan saksi</ListItem>
-    </List>,
-    button: <Button fz={'md'} fullWidth bg={'#D1961F'}>Dalam Proses</Button>
-
-  },
-  {
-    id: 3,
-    judul: 'Kasus Tawuran Banjar Kaja',
-    tanggal: '15 Februari 2025, 22:30 WITA',
-    deskripsi: <List>
-      <ListItem>Laporan ke Polsek setempat</ListItem>
-      <ListItem>Penggerebekan lokasi</ListItem>
-      <ListItem>Pengamanan barang bukti</ListItem>
-      <ListItem>Pemeriksaan saksi</ListItem>
-    </List>,
-    button: <Button fz={'md'} fullWidth bg={'#2A742D'}>Terselesaikan</Button>
-
-  },
-]
 function Page() {
+  const [search, setSearch] = useState("");
+  const router = useTransitionRouter()
+  const [debouncedSearch] = useDebouncedValue(search, 500);
+  const [opened, { open, close }] = useDisclosure(false);
+  const stateLaporan = useProxy(laporanPublikState);
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateLaporan.findMany;
+
+  useShallowEffect(() => {
+    load(page, 6, debouncedSearch);
+  }, [page, debouncedSearch]);
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
+    );
+  }
+
+  const resetForm = () => {
+    stateLaporan.create.form = {
+      judul: '',
+      lokasi: '',
+      tanggalWaktu: '',
+      kronologi: '',
+    };
+  };
+
+  const handleSubmit = async () => {
+    await stateLaporan.create.create();
+    resetForm();
+  };
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
-        <BackButton />
+        <Flex justify="space-between" align="center">
+          <BackButton />
+          <Flex gap={"xs"} align={"center"}>
+            <TextInput
+              placeholder="Cari laporan"
+              value={search}
+              onChange={(e) => setSearch(e.currentTarget.value)}
+            />
+            <Button
+              onClick={open}
+              bg={colors['blue-button']}
+              size="md"
+              radius="md"
+            >
+              <IconPlus size={20} />
+            </Button>
+          </Flex>
+        </Flex>
       </Box>
       <Box>
         <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
@@ -88,29 +108,144 @@ function Page() {
             cols={{
               base: 1,
               md: 3
-          }}
+            }}
           >
             {data.map((v, k) => {
               return (
                 <Paper radius={'lg'} key={k} bg={colors['white-trans-1']} p={'xl'}>
                   <Stack>
                     <Title c={colors['blue-button']} order={1}>{v.judul}</Title>
-                    <Text fs={'italic'} fz={'xl'}>{v.tanggal}</Text>
+                    <Text fs={'italic'} fz={'xl'}>
+                      {v.tanggalWaktu
+                        ? new Date(v.tanggalWaktu).toLocaleString('id-ID')
+                        : '-'}
+                    </Text>
                     <Box>
                       <Text fw={'bold'}>Penanganan:</Text>
-                      {v.deskripsi}
+                      {v.penanganan?.length ? (
+                        v.penanganan.map((item, index) => (
+                          <Box key={index}>
+                            <Text
+                              fz="md"
+                              c="dimmed"
+                              dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }}
+                            />
+                          </Box>
+                        ))
+                      ) : (
+                        <Text fz="sm" fs="italic" c="dimmed">
+                          Belum ada penanganan
+                        </Text>
+                      )}
                     </Box>
-                    <Box>
+                    <Box
-                      {v.button}
+                      style={{
+                        display: 'inline-block',
+                        padding: '4px 12px',
+                        borderRadius: '16px',
+                        backgroundColor:
+                          v.status === 'Selesai' ? '#94EF95FF' :
+                            v.status === 'Proses' ? '#F1D295FF' :
+                              '#F38E8EFF',
+                        color:
+                          v.status === 'Selesai' ? '#01BA01FF' :
+                            v.status === 'Proses' ? '#B67A00FF' :
+                              '#AE1700FF',
+                        fontWeight: 900,
+                        fontSize: '0.75rem',
+                        textAlign: 'center',
+                        minWidth: '80px',
+                      }}
+                    >
+                      {v.status}
                     </Box>
-                    <Button bg={colors['blue-button']} rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>Lihat Detail Kronologi</Button>
+                    <Button
+                      bg={colors['blue-button']}
+                      rightSection={<IconArrowRight size={20} color={colors['white-1']} />}
+                      onClick={() => router.push(`/darmasaba/keamanan/laporan-publik/${v.id}`)}
+                    >Lihat Detail Kronologi
+                    </Button>
                   </Stack>
                 </Paper>
               )
             })}
           </SimpleGrid>
+          <Center>
+            <Pagination
+              value={page}
+              onChange={(newPage) => load(newPage)}
+              total={totalPages}
+              my="md"
+            />
+          </Center>
         </Stack>
       </Box>
+      <Modal opened={opened} onClose={close} title="Tambah Laporan Publik">
+        <Paper
+          bg={colors['white-1']}
+          p="lg"
+          radius="md"
+          shadow="sm"
+          style={{ border: '1px solid #e0e0e0' }}
+        >
+          <Stack gap="md">
+            <TextInput
+              value={stateLaporan.create.form.judul}
+              onChange={(e) => (stateLaporan.create.form.judul = e.target.value)}
+              label={<Text fw="bold" fz="sm">Judul Laporan Publik</Text>}
+              placeholder="Masukkan judul laporan publik"
+              required
+            />
+
+            <TextInput
+              value={stateLaporan.create.form.lokasi}
+              onChange={(e) => (stateLaporan.create.form.lokasi = e.target.value)}
+              label={<Text fw="bold" fz="sm">Lokasi Laporan Publik</Text>}
+              placeholder="Masukkan lokasi laporan publik"
+              required
+            />
+
+            <DateTimePicker
+              label={<Text fw="bold" fz="sm">Tanggal Laporan Publik</Text>}
+              value={
+                stateLaporan.create.form.tanggalWaktu
+                  ? new Date(stateLaporan.create.form.tanggalWaktu)
+                  : null
+              }
+              onChange={(val) => {
+                stateLaporan.create.form.tanggalWaktu = val ? val.toString() : '';
+              }}
+            />
+
+            <Box>
+              <Text fz="sm" fw="bold" mb={6}>
+                Kronologi
+              </Text>
+              <CreateEditor
+                value={stateLaporan.create.form.kronologi}
+                onChange={(htmlContent) => {
+                  stateLaporan.create.form.kronologi = htmlContent;
+                }}
+              />
+            </Box>
+
+            <Group justify="right">
+              <Button
+                onClick={handleSubmit}
+                radius="md"
+                size="md"
+                style={{
+                  background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                  color: '#fff',
+                  boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+                }}
+              >
+                Simpan
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Modal>
     </Stack>
   );
 }

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/[id]/page.tsx

@@ -56,6 +56,7 @@ function Page() {
                 </Group>
 
                 <Stack gap="lg">
+                  
                   <Box>
                     <Text fz="h4" fw="bold">Pendahuluan</Text>
                     <Divider my="xs" />

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/page.tsx

@@ -11,11 +11,11 @@ function ArtikelKesehatanPage() {
   const state = useProxy(artikelKesehatanState)
   const router = useRouter()
 
-  useShallowEffect(()=> {
+  useShallowEffect(() => {
     state.findMany.load()
   }, [])
 
-  if(!state.findMany.data){
+  if (!state.findMany.data) {
     return (
       <Box py="xl" ta="center">
         <Loader size="lg" color={colors['blue-button']} />
@@ -24,24 +24,22 @@ function ArtikelKesehatanPage() {
     )
   }
 
-  if(state.findMany.data.length === 0){
-    return (
-      <Box py="xl" ta="center">
-        <Image src="/empty-state.svg" alt="Tidak ada data" w={220} mx="auto" />
-        <Text mt="md" fw="bold" fz="lg">Belum ada artikel kesehatan</Text>
-        <Text c="dimmed" fz="sm">Artikel akan tampil di sini setelah tersedia.</Text>
-      </Box>
-    )
-  }
-
   return (
     <Box>
       <Paper p="xl" bg={colors['white-trans-1']} radius="xl" shadow="md">
-        <Stack gap="xl">
+        <Stack gap="lg">
-          <Title order={2} ta="center" c={colors['blue-button']}>Artikel Kesehatan</Title>
+          <Title order={2} ta="center" c={colors['blue-button']}>
-          <Divider color={colors['blue-button']} />
+            Artikel Kesehatan
-          <Stack gap="lg">
+          </Title>
-            {state.findMany.data.map((item) => (
+          <Divider size="sm" color={colors['blue-button']} />
+          {state.findMany.data.length === 0 ? (
+            <Box py="xl" ta="center">
+              <Text fz="lg" c="dimmed">
+                Belum ada artikel kesehatan yang tersedia
+              </Text>
+            </Box>
+          ) : (
+            state.findMany.data.map((item) => (
               <Card
                 key={item.id}
                 withBorder
@@ -53,7 +51,7 @@ function ArtikelKesehatanPage() {
                 onMouseLeave={(e) => (e.currentTarget.style.transform = 'translateY(0)')}
               >
                 <Card.Section>
-                  <Image src={'/api/img/dbd.png'} alt={item.title} height={200} fit="cover" />
+                  <Image src={item.image?.link} alt={item.title} height={200} fit="cover" />
                 </Card.Section>
                 <Stack gap="xs" mt="md">
                   <Text fw="bold" fz="xl" c="dark">{item.title}</Text>
@@ -68,7 +66,7 @@ function ArtikelKesehatanPage() {
                   </Text>
                   <Tooltip label="Baca artikel lengkap">
                     <Anchor
-                      onClick={()=> router.push(`/darmasaba/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/${item.id}`)} 
+                      onClick={() => router.push(`/darmasaba/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/${item.id}`)}
                       variant="light"
                       c={colors['blue-button']}
                     >
@@ -80,8 +78,8 @@ function ArtikelKesehatanPage() {
                   </Tooltip>
                 </Stack>
               </Card>
-            ))}
+            ))
-          </Stack>
+          )}
         </Stack>
       </Paper>
     </Box>

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/page.tsx

@@ -29,14 +29,21 @@ function FasilitasKesehatanPage() {
 
   return (
     <Box>
-      <Paper p="xl" radius="xl" shadow="md" h="100%" bg="white">
+      <Paper bg={colors['white-trans-1']} p="xl" radius="xl" shadow="md" h="100%">
         <Stack gap="lg">
           <Text ta="center" fw={700} fz="32px" c={colors['blue-button']}>
             Fasilitas Kesehatan
           </Text>
           <Divider size="sm" color={colors['blue-button']} />
           <Stack gap="lg">
-            {state.findMany.data.map((item) => (
+          {state.findMany.data.length === 0 ? (
+            <Box py="xl" ta="center">
+              <Text fz="lg" c="dimmed">
+                Belum ada fasilitas kesehatan yang tersedia
+              </Text>
+            </Box>
+          ) : (
+            state.findMany.data.map((item) => (
               <Card
                 key={item.id}
                 withBorder
@@ -93,7 +100,8 @@ function FasilitasKesehatanPage() {
                   </Anchor>
                 </Stack>
               </Card>
-            ))}
+            ))
+          )}
           </Stack>
         </Stack>
       </Paper>

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/jadwal-kegiatan-page/page.tsx

@@ -25,12 +25,12 @@ function JadwalKegiatanPage() {
 
   return (
     <Box>
-      <Paper p="xl" bg={colors['white-trans-1']} radius="xl" shadow="md" h="auto" mih="100vh">
+      <Paper bg={colors['white-trans-1']} p="xl" radius="xl" shadow="md" h="auto" mih="100vh">
         <Stack gap="lg">
           <Text ta="center" fw={700} fz="32px" c={colors['blue-button']}>
             Jadwal Kegiatan Warga
           </Text>
-
+          <Divider size="sm" color={colors['blue-button']} />
           {state.findMany.data.length === 0 ? (
             <Box py="xl" ta="center">
               <Text fz="lg" c="dimmed">