Fix Package.json Bun

package.json

@@ -3,11 +3,9 @@
   "version": "0.1.5",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "prisma:seed": "bun run prisma/seed.ts"
+    "dev": "bun --bun next dev",
+    "build": "bun --bun next build",
+    "start": "bun --bun next start"
   },
   "prisma": {
     "seed": "bun run prisma/seed.ts"
@@ -57,6 +55,8 @@
     "form-data": "^4.0.2",
     "framer-motion": "^12.23.5",
     "get-port": "^7.1.0",
+    "iron-session": "^8.0.4",
+    "jose": "^6.1.0",
     "jotai": "^2.12.3",
     "jsonwebtoken": "^9.0.2",
     "leaflet": "^1.9.4",
@@ -64,7 +64,7 @@
     "lodash": "^4.17.21",
     "motion": "^12.4.1",
     "nanoid": "^5.1.5",
-    "next": "15.1.6",
+    "next": "^15.5.2",
     "next-view-transitions": "^0.3.4",
     "node-fetch": "^3.3.2",
     "p-limit": "^6.2.0",
@@ -73,6 +73,7 @@
     "prisma": "^6.3.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-international-phone": "^4.6.0",
     "react-leaflet": "^5.0.0",
     "react-simple-toasts": "^6.1.0",
     "react-toastify": "^11.0.5",

prisma/data/user/roles.json

@@ -1,7 +1,7 @@
 [
     {
-      "id": "role_admin_desa",
-      "name": "ADMIN_DESA",
+      "id": "1",
+      "name": "ADMIN DESA",
       "description": "Administrator Desa",
       "permissions": ["manage_users", "manage_content", "view_reports"],
       "isActive": true,
@@ -9,8 +9,8 @@
       "updatedAt": "2025-09-01T00:00:00.000Z"
     },
     {
-      "id": "role_admin_kesehatan",
-      "name": "ADMIN_KESEHATAN",
+      "id": "2",
+      "name": "ADMIN KESEHATAN",
       "description": "Administrator Bidang Kesehatan",
       "permissions": ["manage_health_data", "view_reports"],
       "isActive": true,
@@ -18,8 +18,8 @@
       "updatedAt": "2025-09-01T00:00:00.000Z"
     },
     {
-      "id": "role_admin_sekolah",
-      "name": "ADMIN_SEKOLAH",
+      "id": "3",
+      "name": "ADMIN SEKOLAH",
       "description": "Administrator Sekolah",
       "permissions": ["manage_school_data", "view_reports"],
       "isActive": true,

prisma/data/user/users.json

@@ -1,32 +1,29 @@
 [
     {
-      "id": "user_admin_desa",
+      "id": "1",
       "nama": "Admin Desa",
-      "email": "admin.desa@example.com",
-      "password": "$2b$10$XFDWYOJFxQ7ZM5bA0N4Z0O8u0eKYv58wLsaR7h6XK9bqWJ1YQJQ9q",
-      "roleId": "role_admin_desa",
+      "nomor": "089647037426",
+      "roleId": "1",
       "isActive": true,
       "lastLogin": "2025-08-31T10:00:00.000Z",
       "createdAt": "2025-09-01T00:00:00.000Z",
       "updatedAt": "2025-09-01T00:00:00.000Z"
     },
     {
-      "id": "user_admin_puskesmas",
+      "id": "2",
       "nama": "Admin Kesehatan",
-      "email": "admin.kesehatan@example.com",
-      "password": "$2b$10$XFDWYOJFxQ7ZM5bA0N4Z0O8u0eKYv58wLsaR7h6XK9bqWJ1YQJQ9q",
-      "roleId": "role_admin_kesehatan",
+      "nomor": "082339004198",
+      "roleId": "2",
       "isActive": true,
       "lastLogin": null,
       "createdAt": "2025-09-01T00:00:00.000Z",
       "updatedAt": "2025-09-01T00:00:00.000Z"
     },
     {
-      "id": "user_admin_sekolah",
+      "id": "3",
       "nama": "Admin Sekolah",
-      "email": "admin.sekolah@example.com",
-      "password": "$2b$10$XFDWYOJFxQ7ZM5bA0N4Z0O8u0eKYv58wLsaR7h6XK9bqWJ1YQJQ9q",
-      "roleId": "role_admin_sekolah",
+      "nomor": "085237157222",
+      "roleId": "3",
       "isActive": true,
       "lastLogin": null,
       "createdAt": "2025-09-01T00:00:00.000Z",

prisma/schema.prisma

@@ -2103,14 +2103,16 @@ model KategoriBuku {
   DataPerpustakaan DataPerpustakaan[]
 }
 
+// ========================================= USER ========================================= //
+
 model User {
   id        String    @id @default(cuid())
-  nama      String
-  email     String    @unique
-  password  String?
+  username  String
+  nomor     String    @unique
   role      Role      @relation(fields: [roleId], references: [id])
-  roleId    String
-  instansi  String? // Nama instansi (Puskesmas, Sekolah, dll)
+  roleId    String    @default("1")
+  instansi  String?
+  UserSession UserSession? // Nama instansi (Puskesmas, Sekolah, dll)
   isActive  Boolean   @default(true)
   lastLogin DateTime?
   createdAt DateTime  @default(now())
@@ -2132,6 +2134,15 @@ model Role {
   @@map("roles")
 }
 
+model KodeOtp {
+  id        String   @id @default(cuid())
+  isActive  Boolean  @default(true)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  nomor     String
+  otp       Int
+}
+
 // Tabel untuk menyimpan permission
 model Permission {
   id          String   @id @default(cuid())
@@ -2143,6 +2154,17 @@ model Permission {
   @@map("permissions")
 }
 
+model UserSession {
+  id        String    @id @default(cuid())
+  token     String
+  expires   DateTime?
+  active    Boolean   @default(true)
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @default(now()) @updatedAt
+  User      User      @relation(fields: [userId], references: [id])
+  userId    String    @unique
+}
+
 // ========================================= DATA PENDIDIKAN ========================================= //
 model DataPendidikan {
   id        String   @id @default(cuid())

prisma/seed.ts

@@ -57,47 +57,60 @@ import users from "./data/user/users.json";
 
 (async () => {
   // =========== USER & ROLE ===========
-  for (const r of roles) {
-    await prisma.role.upsert({
-      where: { id: r.id },
-      update: {
-        name: r.name,
-        description: r.description,
-        permissions: r.permissions,
-        isActive: true,
-      },
-      create: {
-        id: r.id,
-        name: r.name,
-        description: r.description,
-        permissions: r.permissions,
-        isActive: true,
-      },
-    });
+  // In your seed.ts
+// =========== ROLES ===========
+console.log("🔄 Seeding roles...");
+for (const r of roles) {
+  await prisma.role.upsert({
+    where: { id: r.id },
+    update: {
+      name: r.name,
+      description: r.description,
+      permissions: r.permissions,
+      isActive: r.isActive,
+    },
+    create: {
+      id: r.id,
+      name: r.name,
+      description: r.description,
+      permissions: r.permissions,
+      isActive: r.isActive,
+    },
+  });
+}
+console.log("✅ Roles seeded");
+
+// =========== USERS ===========
+console.log("🔄 Seeding users...");
+for (const u of users) {
+  // First verify the role exists
+  const roleExists = await prisma.role.findUnique({
+    where: { id: u.roleId }
+  });
+  
+  if (!roleExists) {
+    console.error(`❌ Role with id ${u.roleId} not found for user ${u.nama}`);
+    continue;
   }
-  console.log("✅ Roles seeded");
-  //users
-  for (const u of users) {
-    await prisma.user.upsert({
-      where: { id: u.id },
-      update: {
-        nama: u.nama,
-        email: u.email,
-        password: u.password,
-        roleId: u.roleId,
-        isActive: true,
-      },
-      create: {
-        id: u.id,
-        nama: u.nama,
-        email: u.email,
-        password: u.password,
-        roleId: u.roleId,
-        isActive: true,
-      },
-    });
-  }
-  console.log("✅ Users seeded");
+
+  await prisma.user.upsert({
+    where: { id: u.id },
+    update: {
+      username: u.nama,
+      nomor: u.nomor,
+      roleId: u.roleId,
+      isActive: u.isActive,
+    },
+    create: {
+      id: u.id,
+      username: u.nama,
+      nomor: u.nomor,
+      roleId: u.roleId,
+      isActive: u.isActive,
+    },
+  });
+}
+console.log("✅ Users seeded");
   // =========== LANDING PAGE ===========
   // =========== SUBMENU PROFILE ===========
   // =========== PROFILE PEJABAT DESA ===========

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -11,15 +11,21 @@ import {
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
+  Tooltip,
 } from "@mantine/core";
-import { IconArrowBack, IconImageInPicture, IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
+import {
+  IconArrowBack,
+  IconImageInPicture,
+  IconPhoto,
+  IconUpload,
+  IconX,
+} from "@tabler/icons-react";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useProxy } from "valtio/utils";
 
-
 import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
 import colors from "@/con/colors";
 import ApiFetch from "@/lib/api-fetch";
@@ -34,24 +40,24 @@ function EditKeamananLingkungan() {
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const [formData, setFormData] = useState({
-    name: keamananState.edit.form.name || '',
-    deskripsi: keamananState.edit.form.deskripsi || '',
-    imageId: keamananState.edit.form.imageId || ''
+    name: keamananState.edit.form.name || "",
+    deskripsi: keamananState.edit.form.deskripsi || "",
+    imageId: keamananState.edit.form.imageId || "",
   });
 
-  // Load berita by id saat pertama kali
+  // Load data by id
   useEffect(() => {
-    const loadBerita = async () => {
+    const loadData = async () => {
       const id = params?.id as string;
       if (!id) return;
 
       try {
-        const data = await keamananState.edit.load(id); // akses langsung, bukan dari proxy
+        const data = await keamananState.edit.load(id);
         if (data) {
           setFormData({
-            name: data.name || '',
-            deskripsi: data.deskripsi || '',
-            imageId: data.imageId || '',
+            name: data.name || "",
+            deskripsi: data.deskripsi || "",
+            imageId: data.imageId || "",
           });
 
           if (data?.image?.link) {
@@ -64,30 +70,29 @@ function EditKeamananLingkungan() {
       }
     };
 
-    loadBerita();
-  }, [params?.id]); // ✅ hapus beritaState dari dependency
+    loadData();
+  }, [params?.id]);
 
   const handleSubmit = async () => {
-
     try {
-      // Update global state with form data
       keamananState.edit.form = {
         ...keamananState.edit.form,
         name: formData.name,
         deskripsi: formData.deskripsi,
-        imageId: formData.imageId // Keep existing imageId if not changed
+        imageId: formData.imageId,
       };
 
-      // Jika ada file baru, upload
       if (file) {
-        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const res = await ApiFetch.api.fileStorage.create.post({
+          file,
+          name: file.name,
+        });
         const uploaded = res.data?.data;
 
         if (!uploaded?.id) {
           return toast.error("Gagal upload gambar");
         }
 
-        // Update imageId in global state
         keamananState.edit.form.imageId = uploaded.id;
       }
 
@@ -101,36 +106,72 @@ function EditKeamananLingkungan() {
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors["blue-button"]} size={30} />
-        </Button>
-      </Box>
-      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Edit Keamanan Lingkungan</Title>
+    <Box px={{ base: "sm", md: "lg" }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors["blue-button"]} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Keamanan Lingkungan
+        </Title>
+      </Group>
+
+      {/* Form */}
+      <Paper
+        w={{ base: "100%", md: "50%" }}
+        bg={colors["white-1"]}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: "1px solid #e0e0e0" }}
+      >
+        <Stack gap="md">
           <Dropzone
             onDrop={(files) => {
-              const selectedFile = files[0]; // Ambil file pertama
+              const selectedFile = files[0];
               if (selectedFile) {
                 setFile(selectedFile);
-                setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                setPreviewImage(URL.createObjectURL(selectedFile));
               }
             }}
-            onReject={() => toast.error('File tidak valid.')}
-            maxSize={5 * 1024 ** 2} // Maks 5MB
-            accept={{ 'image/*': [] }}
+            onReject={() => toast.error("File tidak valid.")}
+            maxSize={5 * 1024 ** 2}
+            accept={{ "image/*": [] }}
           >
-            <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+            <Group
+              justify="center"
+              gap="xl"
+              mih={220}
+              style={{ pointerEvents: "none" }}
+            >
               <Dropzone.Accept>
-                <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                <IconUpload
+                  size={52}
+                  color="var(--mantine-color-blue-6)"
+                  stroke={1.5}
+                />
               </Dropzone.Accept>
               <Dropzone.Reject>
-                <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                <IconX
+                  size={52}
+                  color="var(--mantine-color-red-6)"
+                  stroke={1.5}
+                />
               </Dropzone.Reject>
               <Dropzone.Idle>
-                <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                <IconPhoto
+                  size={52}
+                  color="var(--mantine-color-dimmed)"
+                  stroke={1.5}
+                />
               </Dropzone.Idle>
 
               <div>
@@ -151,15 +192,21 @@ function EditKeamananLingkungan() {
               <IconImageInPicture />
             </Center>
           )}
+
           <TextInput
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Judul Keamanan Lingkungan</Text>}
-            placeholder="masukkan judul"
+            onChange={(e) =>
+              setFormData({ ...formData, name: e.target.value })
+            }
+            label="Judul Keamanan Lingkungan"
+            placeholder="Masukkan judul"
+            required
           />
 
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <Text fz="sm" fw="bold">
+              Deskripsi
+            </Text>
             <EditEditor
               value={formData.deskripsi}
               onChange={(htmlContent) => {
@@ -169,7 +216,20 @@ function EditKeamananLingkungan() {
             />
           </Box>
 
-          <Button onClick={handleSubmit}>Simpan</Button>
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors["blue-button"]}, #4facfe)`,
+                color: "#fff",
+                boxShadow: "0 4px 15px rgba(79, 172, 254, 0.4)",
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

@@ -1,9 +1,9 @@
 'use client'
 import { useProxy } from 'valtio/utils';
 
-import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 
@@ -36,64 +36,95 @@ function DetailKeamananLingkungan() {
   if (!keamananState.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={40} />
+        <Skeleton height={500} radius="md" />
       </Stack>
     )
   }
 
+  const data = keamananState.findUnique.data
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Keamanan Lingkungan</Text>
-          {keamananState.findUnique.data ? (
-            <Paper key={keamananState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 490}} src={keamananState.findUnique.data?.image?.link} alt="gambar" />
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Judul Keamanan Lingkungan</Text>
-                  <Text fz={"lg"}>{keamananState.findUnique.data?.name}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: keamananState.findUnique.data?.deskripsi }} />
-                </Box>
-                <Flex gap={"xs"} mt={10}>
+    <Box py={10}>
+      {/* Tombol Back */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Wrapper Detail */}
+      <Paper
+        withBorder
+        w={{ base: "100%", md: "50%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Keamanan Lingkungan
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                <Image
+                  w={{ base: 150, md: 490 }}
+                  src={data?.image?.link}
+                  alt="gambar keamanan lingkungan"
+                />
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Judul Keamanan Lingkungan</Text>
+                <Text fz="md" c="dimmed">{data?.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data?.deskripsi }} />
+              </Box>
+
+              {/* Aksi */}
+              <Group gap="sm">
+                <Tooltip label="Hapus Data" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (keamananState.findUnique.data) {
-                        setSelectedId(keamananState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={keamananState.delete.loading || !keamananState.findUnique.data}
-                    color={"red"}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
-                    <IconX size={20} />
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Data" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (keamananState.findUnique.data) {
-                        router.push(`/admin/keamanan/keamanan-lingkungan-pecalang-patwal/${keamananState.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!keamananState.findUnique.data}
-                    color={"green"}
+                    color="green"
+                    onClick={() =>
+                      router.push(
+                        `/admin/keamanan/keamanan-lingkungan-pecalang-patwal/${data.id}/edit`
+                      )
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
@@ -102,10 +133,10 @@ function DetailKeamananLingkungan() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus keamanan lingkungan ini?'
+        text="Apakah anda yakin ingin menghapus keamanan lingkungan ini?"
       />
     </Box>
   );
 }
 
-export default DetailKeamananLingkungan;
+export default DetailKeamananLingkungan;

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

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

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

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

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

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

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

@@ -1,77 +1,140 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { IconActivity, IconBuildingHospital, IconCalendarEvent, IconGauge, IconNotes } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
+
 function LayoutTabs({ children }: { children: React.ReactNode }) {
-    const router = useRouter()
-    const pathname = usePathname()
-    const tabs = [
-        {
-            label: "Presentase Kelahiran & Kematian",
-            value: "presentasekelahiran&kematian",
-            href: "/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian"
-        },
-        {
-            label: "Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik",
-            value: "grafikhasilkepuasan",
-            href: "/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan"
-        },
-        {
-            label: "Fasilitas Kesehatan",
-            value: "fasilitaskesehatan",
-            href: "/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan"
-        },
-        {
-            label: "Jadwal Kegiatan",
-            value: "jadwalkegiatan",
-            href: "/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan"
-        },
-        {
-            label: "Artikel Kesehatan",
-            value: "artikelkesehatan",
-            href: "/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan"
-        },
-    ];
-    const curentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+ const router = useRouter();
+ const pathname = usePathname();
 
-    const handleTabChange = (value: string | null) => {
-        const tab = tabs.find(t => t.value === value)
-        if (tab) {
-            router.push(tab.href)
-        }
-        setActiveTab(value)
-    }
 
-    useEffect(() => {
-        const match = tabs.find(tab => tab.href === pathname)
-        if (match) {
-            setActiveTab(match.value)
-        }
-    }, [pathname])
+ const tabs = [
+   {
+     label: "Presentase Kelahiran & Kematian",
+     value: "presentasekelahiran&kematian",
+     href: "/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian",
+     icon: <IconActivity size={18} stroke={1.8} />,
+     tooltip: "Lihat data kelahiran dan kematian"
+   },
+   {
+     label: "Grafik Hasil Kepuasan Masyarakat",
+     value: "grafikhasilkepuasan",
+     href: "/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan",
+     icon: <IconGauge size={18} stroke={1.8} />,
+     tooltip: "Grafik kepuasan masyarakat terhadap pelayanan"
+   },
+   {
+     label: "Fasilitas Kesehatan",
+     value: "fasilitaskesehatan",
+     href: "/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan",
+     icon: <IconBuildingHospital size={18} stroke={1.8} />,
+     tooltip: "Data fasilitas kesehatan desa"
+   },
+   {
+     label: "Jadwal Kegiatan",
+     value: "jadwalkegiatan",
+     href: "/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan",
+     icon: <IconCalendarEvent size={18} stroke={1.8} />,
+     tooltip: "Atur jadwal kegiatan kesehatan"
+   },
+   {
+     label: "Artikel Kesehatan",
+     value: "artikelkesehatan",
+     href: "/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan",
+     icon: <IconNotes size={18} stroke={1.8} />,
+     tooltip: "Artikel & informasi seputar kesehatan"
+   },
+ ];
 
-    return (
-        <Stack>
-            <Title order={3}>Data Kesehatan Warga</Title>
-            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
-                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-                    {tabs.map((e, i) => (
-                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
-                    ))}
-                </TabsList>
-                {tabs.map((e, i) => (
-                    <TabsPanel key={i} value={e.value}>
-                        {/* Konten dummy, bisa diganti tergantung routing */}
-                        <></>
-                    </TabsPanel>
-                ))}
-            </Tabs>
-            {children}
-        </Stack>
-    );
+
+ const currentTab = tabs.find(tab => tab.href === pathname);
+ const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
+
+
+ const handleTabChange = (value: string | null) => {
+   const tab = tabs.find(t => t.value === value);
+   if (tab) {
+     router.push(tab.href);
+   }
+   setActiveTab(value);
+ };
+
+
+ useEffect(() => {
+   const match = tabs.find(tab => tab.href === pathname);
+   if (match) {
+     setActiveTab(match.value);
+   }
+ }, [pathname]);
+
+
+ return (
+   <Stack gap="lg">
+     <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+       Data Kesehatan Warga
+     </Title>
+     <Tabs
+       color={colors['blue-button']}
+       variant="pills"
+       value={activeTab}
+       onChange={handleTabChange}
+       radius="lg"
+       keepMounted={false}
+     >
+       <TabsList
+         p="sm"
+         style={{
+           background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+           borderRadius: "1rem",
+           boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+         }}
+       >
+         {tabs.map((tab, i) => (
+           <Tooltip
+             key={i}
+             label={tab.tooltip}
+             position="bottom"
+             withArrow
+             transitionProps={{ transition: 'pop', duration: 200 }}
+           >
+             <TabsTab
+               value={tab.value}
+               leftSection={tab.icon}
+               style={{
+                 fontWeight: 600,
+                 fontSize: "0.9rem",
+                 transition: "all 0.2s ease",
+               }}
+             >
+               {tab.label}
+             </TabsTab>
+           </Tooltip>
+         ))}
+       </TabsList>
+
+
+       {tabs.map((tab, i) => (
+         <TabsPanel
+           key={i}
+           value={tab.value}
+           style={{
+             padding: "1.5rem",
+             background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+             borderRadius: "1rem",
+             boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+           }}
+         >
+           {children}
+         </TabsPanel>
+       ))}
+     </Tabs>
+   </Stack>
+ );
 }
 
+
 export default LayoutTabs;

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

@@ -4,7 +4,17 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -14,29 +24,12 @@ import { useProxy } from 'valtio/utils';
 interface ArtikelKesehatanFormBase {
   title: string;
   content: string;
-  introduction: {
-    content: string;
-  };
-  symptom: {
-    title: string;
-    content: string;
-  };
-  prevention: {
-    title: string;
-    content: string;
-  };
-  firstAid: {
-    title: string;
-    content: string;
-  };
-  mythVsFact: {
-    title: string;
-    mitos: string;
-    fakta: string;
-  };
-  doctorSign: {
-    content: string;
-  };
+  introduction: { content: string };
+  symptom: { title: string; content: string };
+  prevention: { title: string; content: string };
+  firstAid: { title: string; content: string };
+  mythVsFact: { title: string; mitos: string; fakta: string };
+  doctorSign: { content: string };
 }
 
 function EditArtikelKesehatan() {
@@ -47,29 +40,27 @@ function EditArtikelKesehatan() {
   const [formData, setFormData] = useState<ArtikelKesehatanFormBase>({
     title: stateArtikelKesehatan.edit.form.title || '',
     content: stateArtikelKesehatan.edit.form.content || '',
-    introduction: {
-      content: stateArtikelKesehatan.edit.form.introduction?.content || '',
-    },
+    introduction: { content: stateArtikelKesehatan.edit.form.introduction?.content || '' },
     symptom: {
       title: stateArtikelKesehatan.edit.form.symptom?.title || '',
-      content: stateArtikelKesehatan.edit.form.symptom?.content || '',
+      content: stateArtikelKesehatan.edit.form.symptom?.content || ''
     },
     prevention: {
       title: stateArtikelKesehatan.edit.form.prevention?.title || '',
-      content: stateArtikelKesehatan.edit.form.prevention?.content || '',
+      content: stateArtikelKesehatan.edit.form.prevention?.content || ''
     },
     firstAid: {
       title: stateArtikelKesehatan.edit.form.firstAid?.title || '',
-      content: stateArtikelKesehatan.edit.form.firstAid?.content || '',
+      content: stateArtikelKesehatan.edit.form.firstAid?.content || ''
     },
     mythVsFact: {
       title: stateArtikelKesehatan.edit.form.mythVsFact?.title || '',
       mitos: stateArtikelKesehatan.edit.form.mythVsFact?.mitos || '',
-      fakta: stateArtikelKesehatan.edit.form.mythVsFact?.fakta || '',
+      fakta: stateArtikelKesehatan.edit.form.mythVsFact?.fakta || ''
     },
     doctorSign: {
-      content: stateArtikelKesehatan.edit.form.doctorSign?.content || '',
-    },
+      content: stateArtikelKesehatan.edit.form.doctorSign?.content || ''
+    }
   });
 
   useEffect(() => {
@@ -84,29 +75,27 @@ function EditArtikelKesehatan() {
           setFormData({
             title: form.title,
             content: form.content,
-            introduction: {
-              content: form.introduction?.content || '',
-            },
+            introduction: { content: form.introduction?.content || '' },
             symptom: {
               title: form.symptom?.title || '',
-              content: form.symptom?.content || '',
+              content: form.symptom?.content || ''
             },
             prevention: {
               title: form.prevention?.title || '',
-              content: form.prevention?.content || '',
+              content: form.prevention?.content || ''
             },
             firstAid: {
               title: form.firstAid?.title || '',
-              content: form.firstAid?.content || '',
+              content: form.firstAid?.content || ''
             },
             mythVsFact: {
               title: form.mythVsFact?.title || '',
               mitos: form.mythVsFact?.mitos || '',
-              fakta: form.mythVsFact?.fakta || '',
+              fakta: form.mythVsFact?.fakta || ''
             },
             doctorSign: {
-              content: form.doctorSign?.content || '',
-            },
+              content: form.doctorSign?.content || ''
+            }
           });
         }
       } catch (error) {
@@ -119,34 +108,7 @@ function EditArtikelKesehatan() {
 
   const handleSubmit = async () => {
     try {
-      stateArtikelKesehatan.edit.form = {
-        ...stateArtikelKesehatan.edit.form,
-        title: formData.title,
-        content: formData.content,
-        introduction: {
-          content: formData.introduction.content,
-        },
-        symptom: {
-          title: formData.symptom.title,
-          content: formData.symptom.content,
-        },
-        prevention: {
-          title: formData.prevention.title,
-          content: formData.prevention.content,
-        },
-        firstAid: {
-          title: formData.firstAid.title,
-          content: formData.firstAid.content,
-        },
-        mythVsFact: {
-          title: formData.mythVsFact.title,
-          mitos: formData.mythVsFact.mitos,
-          fakta: formData.mythVsFact.fakta,
-        },
-        doctorSign: {
-          content: formData.doctorSign.content,
-        },
-      };
+      stateArtikelKesehatan.edit.form = { ...formData };
       const success = await stateArtikelKesehatan.edit.submit();
       if (success) {
         toast.success("Artikel kesehatan berhasil diperbarui!");
@@ -157,214 +119,196 @@ function EditArtikelKesehatan() {
       toast.error(error instanceof Error ? error.message : "Gagal memperbarui data artikel kesehatan");
     }
   };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant="subtle" color="blue">
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Edit Artikel Kesehatan</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Artikel Kesehatan
+        </Title>
+      </Group>
+
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
+            label="Judul"
+            placeholder="Masukkan judul artikel"
             value={formData.title}
-            onChange={(e) => {
-              setFormData(prev => ({
-                ...prev,
-                title: e.target.value
-              }));
-            }}
+            onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
+            required
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
+            label="Deskripsi"
+            placeholder="Masukkan deskripsi artikel"
             value={formData.content}
-            onChange={(e) => {
-              setFormData(prev => ({
-                ...prev,
-                content: e.target.value
-              }));
-            }}
+            onChange={(e) => setFormData(prev => ({ ...prev, content: e.target.value }))}
+            required
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Pendahuluan</Text>}
-            placeholder="masukkan pendahuluan"
+            label="Pendahuluan"
+            placeholder="Masukkan pendahuluan"
             value={formData.introduction.content}
-            onChange={(e) => {
+            onChange={(e) =>
               setFormData(prev => ({
                 ...prev,
-                introduction: {
-                  ...prev.introduction,
-                  content: e.target.value
-                }
-              }));
-            }}
+                introduction: { ...prev.introduction, content: e.target.value }
+              }))
+            }
           />
+
+          {/* Gejala */}
           <Box>
-            <Text fz="md" fw="bold">Gejala</Text>
+            <Text fw="bold">Gejala</Text>
             <Stack gap="xs">
               <TextInput
-                label={<Text fz="sm" fw="bold">Judul</Text>}
-                placeholder="masukkan judul gejala penyakit"
+                label="Judul Gejala"
+                placeholder="Masukkan judul gejala"
                 value={formData.symptom.title}
-                onChange={(e) => {
+                onChange={(e) =>
                   setFormData(prev => ({
                     ...prev,
-                    symptom: {
-                      ...prev.symptom,
-                      title: e.target.value
-                    }
-                  }));
-                }}
+                    symptom: { ...prev.symptom, title: e.target.value }
+                  }))
+                }
+              />
+              <EditEditor
+                value={formData.symptom.content}
+                onChange={(e) =>
+                  setFormData(prev => ({
+                    ...prev,
+                    symptom: { ...prev.symptom, content: e }
+                  }))
+                }
               />
-              <Box>
-                <Text fz="sm" fw="bold">Deskripsi Gejala</Text>
-                <EditEditor
-                  value={formData.symptom.content}
-                  onChange={(e) => {
-                    setFormData(prev => ({
-                      ...prev,
-                      symptom: {
-                        ...prev.symptom,
-                        content: e
-                      }
-                    }));
-                  }}
-                />
-              </Box>
             </Stack>
           </Box>
 
+          {/* Pencegahan */}
           <Box>
-            <Text fz="md" fw="bold">Pencegahan</Text>
+            <Text fw="bold">Pencegahan</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
+              label="Judul"
               value={formData.prevention.title}
-              onChange={(e) => {
+              onChange={(e) =>
                 setFormData(prev => ({
                   ...prev,
-                  prevention: {
-                    ...prev.prevention,
-                    title: e.target.value
-                  }
-                }));
-              }}
+                  prevention: { ...prev.prevention, title: e.target.value }
+                }))
+              }
             />
             <EditEditor
               value={formData.prevention.content}
-              onChange={(e) => {
+              onChange={(e) =>
                 setFormData(prev => ({
                   ...prev,
-                  prevention: {
-                    ...prev.prevention,
-                    content: e
-                  }
-                }));
-              }}
+                  prevention: { ...prev.prevention, content: e }
+                }))
+              }
             />
           </Box>
+
+          {/* Pertolongan Pertama */}
           <Box>
-            <Text fz="md" fw="bold">Pertolongan Pertama</Text>
+            <Text fw="bold">Pertolongan Pertama</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
+              label="Judul"
               value={formData.firstAid.title}
-              onChange={(e) => {
+              onChange={(e) =>
                 setFormData(prev => ({
                   ...prev,
-                  firstAid: {
-                    ...prev.firstAid,
-                    title: e.target.value
-                  }
-                }));
-              }}
+                  firstAid: { ...prev.firstAid, title: e.target.value }
+                }))
+              }
             />
             <EditEditor
               value={formData.firstAid.content}
-              onChange={(e) => {
+              onChange={(e) =>
                 setFormData(prev => ({
                   ...prev,
-                  firstAid: {
-                    ...prev.firstAid,
-                    content: e
-                  }
-                }));
-              }}
+                  firstAid: { ...prev.firstAid, content: e }
+                }))
+              }
             />
           </Box>
+
+          {/* Mitos vs Fakta */}
           <Box>
-            <Text fz="md" fw="bold">Mitos dan Fakta</Text>
+            <Text fw="bold">Mitos vs Fakta</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
+              label="Judul"
               value={formData.mythVsFact.title}
-              onChange={(e) => {
+              onChange={(e) =>
                 setFormData(prev => ({
                   ...prev,
-                  mythVsFact: {
-                    ...prev.mythVsFact,
-                    title: e.target.value
-                  }
-                }));
-              }}
+                  mythVsFact: { ...prev.mythVsFact, title: e.target.value }
+                }))
+              }
+            />
+            <Text fw="500">Mitos</Text>
+            <EditEditor
+              value={formData.mythVsFact.mitos}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  mythVsFact: { ...prev.mythVsFact, mitos: e }
+                }))
+              }
+            />
+            <Text fw="500">Fakta</Text>
+            <EditEditor
+              value={formData.mythVsFact.fakta}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  mythVsFact: { ...prev.mythVsFact, fakta: e }
+                }))
+              }
             />
-            <Box>
-              <Text>
-                Mitos
-              </Text>
-              <EditEditor
-                value={formData.mythVsFact.mitos}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    mythVsFact: {
-                      ...prev.mythVsFact,
-                      mitos: e
-                    }
-                  }));
-                }}
-              />
-            </Box>
-            <Box>
-              <Text>
-                Fakta
-              </Text>
-              <EditEditor
-                value={formData.mythVsFact.fakta}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    mythVsFact: {
-                      ...prev.mythVsFact,
-                      fakta: e
-                    }
-                  }));
-                }}
-              />
-            </Box>
           </Box>
+
+          {/* Kapan harus ke dokter */}
           <Box>
-            <Text fz="md" fw="bold">Kapan Harus Ke Dokter</Text>
+            <Text fw="bold">Kapan Harus Ke Dokter</Text>
             <EditEditor
               value={formData.doctorSign.content}
-              onChange={(e) => {
+              onChange={(e) =>
                 setFormData(prev => ({
                   ...prev,
-                  doctorSign: {
-                    ...prev.doctorSign,
-                    content: e
-                  }
-                }));
-              }}
+                  doctorSign: { ...prev.doctorSign, content: e }
+                }))
+              }
             />
           </Box>
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
+
+          {/* Save button */}
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)'
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

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

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

@@ -2,101 +2,129 @@
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-
 function CreateArtikelKesehatan() {
-  const stateArtikelKesehatan = useProxy(artikelKesehatanState)
+  const stateArtikelKesehatan = useProxy(artikelKesehatanState);
   const router = useRouter();
 
-
   const resetForm = () => {
     stateArtikelKesehatan.create.form = {
-      title: "",
-      content: "",
+      title: '',
+      content: '',
       introduction: {
-        content: "",
+        content: '',
       },
       symptom: {
-        title: "",
-        content: "",
+        title: '',
+        content: '',
       },
       prevention: {
-        title: "",
-        content: "",
+        title: '',
+        content: '',
       },
       firstAid: {
-        title: "",
-        content: "",
+        title: '',
+        content: '',
       },
       mythVsFact: {
-        title: "",
-        mitos: "",
-        fakta: "",
+        title: '',
+        mitos: '',
+        fakta: '',
       },
       doctorSign: {
-        content: ""
-      }
+        content: '',
+      },
     };
   };
 
-
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
+  const handleSubmit = async (e?: React.FormEvent) => {
+    e?.preventDefault();
     await stateArtikelKesehatan.create.submit();
-
-    toast.success("Data berhasil disimpan");
+    toast.success('Data berhasil disimpan');
     resetForm();
-    // After successful submission, redirect to the list page
     router.push('/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan');
-  }
+  };
 
   return (
-    <Box component="form" onSubmit={handleSubmit}>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md" component="form" onSubmit={handleSubmit}>
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Artikel Kesehatan
+        </Title>
+      </Group>
 
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Create Artikel Kesehatan</Title>
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
+            label={"Judul"}
+            placeholder="Masukkan judul"
             value={stateArtikelKesehatan.create.form.title}
             onChange={(e) => {
               stateArtikelKesehatan.create.form.title = e.target.value;
             }}
+            required
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
+            label={"Deskripsi"}
+            placeholder="Masukkan deskripsi"
             value={stateArtikelKesehatan.create.form.content}
             onChange={(e) => {
               stateArtikelKesehatan.create.form.content = e.target.value;
             }}
+            required
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Pendahuluan</Text>}
-            placeholder="masukkan pendahuluan"
+            label={"Pendahuluan"}
+            placeholder="Masukkan pendahuluan"
+            required
             value={stateArtikelKesehatan.create.form.introduction.content}
             onChange={(e) => {
               stateArtikelKesehatan.create.form.introduction.content = e.target.value;
             }}
           />
+
+          {/* Gejala */}
           <Box>
-          <Text fz="md" fw="bold">Gejala</Text>
-            <Stack gap="xs">
+            <Text fz="md" fw="bold">Gejala</Text>
+            <Stack gap="sm">
               <TextInput
-                label={<Text fz="sm" fw="bold">Judul</Text>}
-                placeholder="masukkan judul gejala penyakit"
+                label={"Judul Gejala"}
+                required
+                placeholder="Masukkan judul gejala penyakit"
                 value={stateArtikelKesehatan.create.form.symptom.title}
                 onChange={(e) => {
                   stateArtikelKesehatan.create.form.symptom.title = e.target.value;
@@ -114,54 +142,62 @@ function CreateArtikelKesehatan() {
             </Stack>
           </Box>
 
-          <Box>
+          {/* Pencegahan */}
+          <Stack gap="xs">
             <Text fz="md" fw="bold">Pencegahan</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
+              label={"Judul Pencegahan"}
+              required
+              placeholder="Masukkan judul"
               value={stateArtikelKesehatan.create.form.prevention.title}
               onChange={(e) => {
                 stateArtikelKesehatan.create.form.prevention.title = e.target.value;
               }}
             />
+            <Text fz="sm">Deskripsi Pencegahan</Text>
             <CreateEditor
               value={stateArtikelKesehatan.create.form.prevention.content}
               onChange={(e) => {
                 stateArtikelKesehatan.create.form.prevention.content = e;
               }}
             />
-          </Box>
-          <Box>
+          </Stack>
+
+          {/* Pertolongan Pertama */}
+          <Stack gap={"xs"}>
             <Text fz="md" fw="bold">Pertolongan Pertama</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
+              label={"Judul Pertolongan Pertama"}
+              required
+              placeholder="Masukkan judul"
               value={stateArtikelKesehatan.create.form.firstAid.title}
               onChange={(e) => {
                 stateArtikelKesehatan.create.form.firstAid.title = e.target.value;
               }}
             />
+            <Text fz="sm">Deskripsi Pertolongan Pertama</Text>
             <CreateEditor
               value={stateArtikelKesehatan.create.form.firstAid.content}
               onChange={(e) => {
                 stateArtikelKesehatan.create.form.firstAid.content = e;
               }}
             />
-          </Box>
+          </Stack>
+
+          {/* Mitos vs Fakta */}
           <Box>
             <Text fz="md" fw="bold">Mitos dan Fakta</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
+              label={"Judul Mitos dan Fakta"}
+              required
+              placeholder="Masukkan judul"
               value={stateArtikelKesehatan.create.form.mythVsFact.title}
               onChange={(e) => {
                 stateArtikelKesehatan.create.form.mythVsFact.title = e.target.value;
               }}
             />
-            <Box>
-              <Text>
-                Mitos
-              </Text>
+            <Box mt="sm">
+              <Text fz="sm" fw="bold">Mitos</Text>
               <CreateEditor
                 value={stateArtikelKesehatan.create.form.mythVsFact.mitos}
                 onChange={(e) => {
@@ -169,10 +205,8 @@ function CreateArtikelKesehatan() {
                 }}
               />
             </Box>
-            <Box>
-              <Text>
-                Fakta
-              </Text>
+            <Box mt="sm">
+              <Text fz="sm" fw="bold">Fakta</Text>
               <CreateEditor
                 value={stateArtikelKesehatan.create.form.mythVsFact.fakta}
                 onChange={(e) => {
@@ -181,8 +215,10 @@ function CreateArtikelKesehatan() {
               />
             </Box>
           </Box>
+
+          {/* Kapan Harus ke Dokter */}
           <Box>
-            <Text fz="md" fw="bold">Kapan Harus Ke Dokter</Text>
+            <Text fz="md" fw="bold">Kapan Harus ke Dokter</Text>
             <CreateEditor
               value={stateArtikelKesehatan.create.form.doctorSign.content}
               onChange={(e) => {
@@ -191,9 +227,21 @@ function CreateArtikelKesehatan() {
             />
           </Box>
 
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
+          {/* Submit Button */}
+          <Group justify="right">
+            <Button
+              type="submit"
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

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

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

@@ -4,7 +4,17 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -18,20 +28,14 @@ interface FasilitasKesehatanFormBase {
     alamat: string;
     jamOperasional: string;
   };
-  layananUnggulan: {
-    content: string;
-  };
+  layananUnggulan: { content: string };
   dokterdanTenagaMedis: {
     name: string;
     specialist: string;
     jadwal: string;
   };
-  fasilitasPendukung: {
-    content: string;
-  };
-  prosedurPendaftaran: {
-    content: string;
-  };
+  fasilitasPendukung: { content: string };
+  prosedurPendaftaran: { content: string };
   tarifDanLayanan: {
     layanan: string;
     tarif: string;
@@ -86,20 +90,14 @@ function EditFasilitasKesehatan() {
               alamat: form.informasiUmum?.alamat || '',
               jamOperasional: form.informasiUmum?.jamOperasional || '',
             },
-            layananUnggulan: {
-              content: form.layananUnggulan?.content || '',
-            },
+            layananUnggulan: { content: form.layananUnggulan?.content || '' },
             dokterdanTenagaMedis: {
               name: form.dokterdanTenagaMedis?.name || '',
               specialist: form.dokterdanTenagaMedis?.specialist || '',
               jadwal: form.dokterdanTenagaMedis?.jadwal || '',
             },
-            fasilitasPendukung: {
-              content: form.fasilitasPendukung?.content || '',
-            },
-            prosedurPendaftaran: {
-              content: form.prosedurPendaftaran?.content || '',
-            },
+            fasilitasPendukung: { content: form.fasilitasPendukung?.content || '' },
+            prosedurPendaftaran: { content: form.prosedurPendaftaran?.content || '' },
             tarifDanLayanan: {
               layanan: form.tarifDanLayanan?.layanan || '',
               tarif: form.tarifDanLayanan?.tarif || '',
@@ -118,30 +116,7 @@ function EditFasilitasKesehatan() {
     try {
       stateFasilitasKesehatan.edit.form = {
         ...stateFasilitasKesehatan.edit.form,
-        name: formData.name,
-        informasiUmum: {
-          fasilitas: formData.informasiUmum.fasilitas,
-          alamat: formData.informasiUmum.alamat,
-          jamOperasional: formData.informasiUmum.jamOperasional,
-        },
-        layananUnggulan: {
-          content: formData.layananUnggulan.content,
-        },
-        dokterdanTenagaMedis: {
-          name: formData.dokterdanTenagaMedis.name,
-          specialist: formData.dokterdanTenagaMedis.specialist,
-          jadwal: formData.dokterdanTenagaMedis.jadwal,
-        },
-        fasilitasPendukung: {
-          content: formData.fasilitasPendukung.content,
-        },
-        prosedurPendaftaran: {
-          content: formData.prosedurPendaftaran.content,
-        },
-        tarifDanLayanan: {
-          layanan: formData.tarifDanLayanan.layanan,
-          tarif: formData.tarifDanLayanan.tarif,
-        },
+        ...formData,
       };
       const success = await stateFasilitasKesehatan.edit.submit();
       if (success) {
@@ -150,208 +125,197 @@ function EditFasilitasKesehatan() {
       }
     } catch (error) {
       console.error("Error updating fasilitas kesehatan:", error);
-      toast.error(error instanceof Error ? error.message : "Gagal memperbarui data fasilitas kesehatan");
+      toast.error("Terjadi kesalahan saat memperbarui data fasilitas kesehatan");
     }
   };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant="subtle" color="blue">
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Stack gap="xs">
-        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-          <Stack gap="xs">
-            <Title order={3}>Edit Fasilitas Kesehatan</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Fasilitas Kesehatan
+        </Title>
+      </Group>
+
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Nama Fasilitas Kesehatan"
+            placeholder="Masukkan nama fasilitas kesehatan"
+            value={formData.name}
+            onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
+            required
+          />
+
+          {/* Informasi Umum */}
+          <Box>
+            <Text fw="bold" mb={5}>Informasi Umum</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Nama Fasilitas Kesehatan</Text>}
-              placeholder="masukkan nama fasilitas kesehatan"
-              value={formData.name}
-              onChange={(e) => {
+              label="Fasilitas"
+              value={formData.informasiUmum.fasilitas}
+              onChange={(e) =>
                 setFormData(prev => ({
                   ...prev,
-                  name: e.target.value
-                }));
-              }}
+                  informasiUmum: { ...prev.informasiUmum, fasilitas: e.target.value },
+                }))
+              }
             />
-            <Box>
-              <Text fz="md" fw="bold">Informasi Umum</Text>
-              <TextInput
-                label={<Text fz="sm" fw="bold">Fasilitas</Text>}
-                placeholder="masukkan fasilitas"
-                value={formData.informasiUmum.fasilitas}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    informasiUmum: {
-                      ...prev.informasiUmum,
-                      fasilitas: e.target.value
-                    }
-                  }));
-                }}
-              />
-              <TextInput
-                label={<Text fz="sm" fw="bold">Alamat</Text>}
-                placeholder="masukkan alamat"
-                value={formData.informasiUmum.alamat}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    informasiUmum: {
-                      ...prev.informasiUmum,
-                      alamat: e.target.value
-                    }
-                  }));
-                }}
-              />
-              <TextInput
-                label={<Text fz="sm" fw="bold">Jam Operasional</Text>}
-                placeholder="masukkan jam operasional"
-                value={formData.informasiUmum.jamOperasional}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    informasiUmum: {
-                      ...prev.informasiUmum,
-                      jamOperasional: e.target.value
-                    }
-                  }));
-                }}
-              />
-            </Box>
-            <Box>
-              <Text fz="md" fw="bold">Layanan Unggulan</Text>
-              <EditEditor
-                value={formData.layananUnggulan.content}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    layananUnggulan: {
-                      ...prev.layananUnggulan,
-                      content: e
-                    }
-                  }));
-                }}
-              />
-            </Box>
-            <Box>
-              <Text fz="md" fw="bold">Dokter dan Tenaga Medis</Text>
-              <TextInput
-                label={<Text fz="sm" fw="bold">Nama Dokter</Text>}
-                placeholder="masukkan nama dokter"
-                value={formData.dokterdanTenagaMedis.name}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    dokterdanTenagaMedis: {
-                      ...prev.dokterdanTenagaMedis,
-                      name: e.target.value
-                    }
-                  }));
-                }}
-              />
-              <TextInput
-                label={<Text fz="sm" fw="bold">Specialist</Text>}
-                placeholder="masukkan specialist"
-                value={formData.dokterdanTenagaMedis.specialist}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    dokterdanTenagaMedis: {
-                      ...prev.dokterdanTenagaMedis,
-                      specialist: e.target.value
-                    }
-                  }));
-                }}
-              />
-              <TextInput
-                label={<Text fz="sm" fw="bold">Jadwal</Text>}
-                placeholder="masukkan jadwal"
-                value={formData.dokterdanTenagaMedis.jadwal}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    dokterdanTenagaMedis: {
-                      ...prev.dokterdanTenagaMedis,
-                      jadwal: e.target.value
-                    }
-                  }));
-                }}
-              />
-            </Box>
-            <Box>
-              <Text fz="md" fw="bold">Fasilitas Pendukung</Text>
-              <EditEditor
-                value={formData.fasilitasPendukung.content}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    fasilitasPendukung: {
-                      ...prev.fasilitasPendukung,
-                      content: e
-                    }
-                  }));
-                }}
-              />
-            </Box>
-            <Box>
-              <Text fz="md" fw="bold">Prosedur Pendaftaran</Text>
-              <EditEditor
-                value={formData.prosedurPendaftaran.content}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    prosedurPendaftaran: {
-                      ...prev.prosedurPendaftaran,
-                      content: e
-                    }
-                  }));
-                }}
-              />
-            </Box>
-            <Box>
-              <Text fz="md" fw="bold">Tarif dan Layanan</Text>
-              <TextInput
-                label={<Text fz="sm" fw="bold">Tarif</Text>}
-                placeholder="masukkan tarif"
-                value={formData.tarifDanLayanan.tarif}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    tarifDanLayanan: {
-                      ...prev.tarifDanLayanan,
-                      tarif: e.target.value
-                    }
-                  }));
-                }}
-              />
-              <TextInput
-                label={<Text fz="sm" fw="bold">Layanan</Text>}
-                placeholder="masukkan layanan"
-                value={formData.tarifDanLayanan.layanan}
-                onChange={(e) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    tarifDanLayanan: {
-                      ...prev.tarifDanLayanan,
-                      layanan: e.target.value
-                    }
-                  }));
-                }}
-              />
-            </Box>
+            <TextInput
+              label="Alamat"
+              value={formData.informasiUmum.alamat}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  informasiUmum: { ...prev.informasiUmum, alamat: e.target.value },
+                }))
+              }
+            />
+            <TextInput
+              label="Jam Operasional"
+              value={formData.informasiUmum.jamOperasional}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  informasiUmum: { ...prev.informasiUmum, jamOperasional: e.target.value },
+                }))
+              }
+            />
+          </Box>
 
-              <Button
-                onClick={handleSubmit}
-                bg={colors['blue-button']}
-                loading={stateFasilitasKesehatan.edit.loading}
-              >
-                Simpan
-              </Button>
-          </Stack>
-        </Paper>
-      </Stack>
+          {/* Layanan Unggulan */}
+          <Box>
+            <Text fw="bold" mb={5}>Layanan Unggulan</Text>
+            <EditEditor
+              value={formData.layananUnggulan.content}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  layananUnggulan: { content: e },
+                }))
+              }
+            />
+          </Box>
+
+          {/* Dokter dan Tenaga Medis */}
+          <Box>
+            <Text fw="bold" mb={5}>Dokter dan Tenaga Medis</Text>
+            <TextInput
+              label="Nama Dokter"
+              value={formData.dokterdanTenagaMedis.name}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  dokterdanTenagaMedis: { ...prev.dokterdanTenagaMedis, name: e.target.value },
+                }))
+              }
+            />
+            <TextInput
+              label="Specialist"
+              value={formData.dokterdanTenagaMedis.specialist}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  dokterdanTenagaMedis: { ...prev.dokterdanTenagaMedis, specialist: e.target.value },
+                }))
+              }
+            />
+            <TextInput
+              label="Jadwal"
+              value={formData.dokterdanTenagaMedis.jadwal}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  dokterdanTenagaMedis: { ...prev.dokterdanTenagaMedis, jadwal: e.target.value },
+                }))
+              }
+            />
+          </Box>
+
+          {/* Fasilitas Pendukung */}
+          <Box>
+            <Text fw="bold" mb={5}>Fasilitas Pendukung</Text>
+            <EditEditor
+              value={formData.fasilitasPendukung.content}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  fasilitasPendukung: { content: e },
+                }))
+              }
+            />
+          </Box>
+
+          {/* Prosedur Pendaftaran */}
+          <Box>
+            <Text fw="bold" mb={5}>Prosedur Pendaftaran</Text>
+            <EditEditor
+              value={formData.prosedurPendaftaran.content}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  prosedurPendaftaran: { content: e },
+                }))
+              }
+            />
+          </Box>
+
+          {/* Tarif dan Layanan */}
+          <Box>
+            <Text fw="bold" mb={5}>Tarif dan Layanan</Text>
+            <TextInput
+              label="Tarif"
+              value={formData.tarifDanLayanan.tarif}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  tarifDanLayanan: { ...prev.tarifDanLayanan, tarif: e.target.value },
+                }))
+              }
+            />
+            <TextInput
+              label="Layanan"
+              value={formData.tarifDanLayanan.layanan}
+              onChange={(e) =>
+                setFormData(prev => ({
+                  ...prev,
+                  tarifDanLayanan: { ...prev.tarifDanLayanan, layanan: e.target.value },
+                }))
+              }
+            />
+          </Box>
+
+          {/* Tombol Simpan */}
+          <Group justify="flex-end">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              loading={stateFasilitasKesehatan.edit.loading}
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }

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

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

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

@@ -2,7 +2,17 @@
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { toast } from 'react-toastify';
@@ -10,174 +20,196 @@ import { useProxy } from 'valtio/utils';
 
 
 function CreateFasilitasKesehatan() {
-  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState.fasilitasKesehatan)
+  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState.fasilitasKesehatan);
   const router = useRouter();
 
-
   const resetForm = () => {
     stateFasilitasKesehatan.create.form = {
-      name: "",
+      name: '',
       informasiUmum: {
-        fasilitas: "",
-        alamat: "",
-        jamOperasional: "",
+        fasilitas: '',
+        alamat: '',
+        jamOperasional: '',
       },
       layananUnggulan: {
-        content: "",
+        content: '',
       },
       dokterdanTenagaMedis: {
-        name: "",
-        specialist: "",
-        jadwal: "",
+        name: '',
+        specialist: '',
+        jadwal: '',
       },
       fasilitasPendukung: {
-        content: "",
+        content: '',
       },
       prosedurPendaftaran: {
-        content: "",
+        content: '',
       },
       tarifDanLayanan: {
-        layanan: "",
-        tarif: "",
+        layanan: '',
+        tarif: '',
       },
     };
   };
 
-
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     await stateFasilitasKesehatan.create.submit();
-
-    toast.success("Data berhasil disimpan");
+    toast.success('Data berhasil disimpan');
     resetForm();
-    // After successful submission, redirect to the list page
     router.push('/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan');
-  }
+  };
 
   return (
-    <Box component="form" onSubmit={handleSubmit}>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md" component="form" onSubmit={handleSubmit}>
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Data Fasilitas Kesehatan
+        </Title>
+      </Group>
 
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Create Fasilitas Kesehatan</Title>
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
-            label={<Text fz="sm" fw="bold">Nama Fasilitas Kesehatan</Text>}
-            placeholder="masukkan nama fasilitas kesehatan"
+            label={"Nama Fasilitas Kesehatan"}
+            placeholder="Masukkan nama fasilitas kesehatan"
             value={stateFasilitasKesehatan.create.form.name}
-            onChange={(e) => {
-              stateFasilitasKesehatan.create.form.name = e.target.value;
-            }}
+            onChange={(e) => (stateFasilitasKesehatan.create.form.name = e.target.value)}
+            required
           />
+
+          {/* Informasi Umum */}
           <Box>
-            <Text fz="md" fw="bold">Informasi Umum</Text>
+            <Text fz="md" fw="bold" mb={5}>Informasi Umum</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Fasilitas</Text>}
-              placeholder="masukkan fasilitas"
+              label="Fasilitas"
+              placeholder="Masukkan fasilitas"
               value={stateFasilitasKesehatan.create.form.informasiUmum.fasilitas}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.informasiUmum.fasilitas = e.target.value;
-              }}
+              onChange={(e) => (stateFasilitasKesehatan.create.form.informasiUmum.fasilitas = e.target.value)}
+              required
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Alamat</Text>}
-              placeholder="masukkan alamat"
+              label="Alamat"
+              placeholder="Masukkan alamat"
               value={stateFasilitasKesehatan.create.form.informasiUmum.alamat}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.informasiUmum.alamat = e.target.value;
-              }}
+              onChange={(e) => (stateFasilitasKesehatan.create.form.informasiUmum.alamat = e.target.value)}
+              required
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Jam Operasional</Text>}
-              placeholder="masukkan jam operasional"
+              label="Jam Operasional"
+              placeholder="Masukkan jam operasional"
               value={stateFasilitasKesehatan.create.form.informasiUmum.jamOperasional}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.informasiUmum.jamOperasional = e.target.value;
-              }}
+              onChange={(e) => (stateFasilitasKesehatan.create.form.informasiUmum.jamOperasional = e.target.value)}
+              required
             />
           </Box>
+
+          {/* Layanan Unggulan */}
           <Box>
-            <Text fz="md" fw="bold">Layanan Unggulan</Text>
+            <Text fz="md" fw="bold" mb={5}>Layanan Unggulan</Text>
             <CreateEditor
               value={stateFasilitasKesehatan.create.form.layananUnggulan.content}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.layananUnggulan.content = e;
-              }}
-            />
-          </Box>
-          <Box>
-            <Text fz="md" fw="bold">Dokter dan Tenaga Medis</Text>
-            <TextInput
-              label={<Text fz="sm" fw="bold">Nama Dokter</Text>}
-              placeholder="masukkan nama dokter"
-              value={stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.name}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.name = e.target.value;
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Specialist</Text>}
-              placeholder="masukkan specialist"
-              value={stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.specialist}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.specialist = e.target.value;
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Jadwal</Text>}
-              placeholder="masukkan jadwal"
-              value={stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.jadwal}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.jadwal = e.target.value;
-              }}
-            />
-          </Box>
-          <Box>
-            <Text fz="md" fw="bold">Fasilitas Pendukung</Text>
-            <CreateEditor
-              value={stateFasilitasKesehatan.create.form.fasilitasPendukung.content}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.fasilitasPendukung.content = e;
-              }}
-            />
-          </Box>
-          <Box>
-            <Text fz="md" fw="bold">Prosedur Pendaftaran</Text>
-            <CreateEditor
-              value={stateFasilitasKesehatan.create.form.prosedurPendaftaran.content}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.prosedurPendaftaran.content = e;
-              }}
-            />
-          </Box>
-          <Box>
-            <Text fz="md" fw="bold">Tarif dan Layanan</Text>
-            <TextInput
-              label={<Text fz="sm" fw="bold">Tarif</Text>}
-              placeholder="masukkan tarif"
-              value={stateFasilitasKesehatan.create.form.tarifDanLayanan.tarif}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.tarifDanLayanan.tarif = e.target.value;
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Layanan</Text>}
-              placeholder="masukkan layanan"
-              value={stateFasilitasKesehatan.create.form.tarifDanLayanan.layanan}
-              onChange={(e) => {
-                stateFasilitasKesehatan.create.form.tarifDanLayanan.layanan = e.target.value;
-              }}
+              onChange={(val) => (stateFasilitasKesehatan.create.form.layananUnggulan.content = val)}
             />
           </Box>
 
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
+          {/* Dokter dan Tenaga Medis */}
+          <Box>
+            <Text fz="md" fw="bold" mb={5}>Dokter dan Tenaga Medis</Text>
+            <TextInput
+              label="Nama Dokter"
+              placeholder="Masukkan nama dokter"
+              value={stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.name}
+              onChange={(e) => (stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.name = e.target.value)}
+              required
+            />
+            <TextInput
+              label="Spesialis"
+              placeholder="Masukkan spesialis"
+              value={stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.specialist}
+              onChange={(e) => (stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.specialist = e.target.value)}
+              required
+            />
+            <TextInput
+              label="Jadwal"
+              placeholder="Masukkan jadwal"
+              value={stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.jadwal}
+              onChange={(e) => (stateFasilitasKesehatan.create.form.dokterdanTenagaMedis.jadwal = e.target.value)}
+              required
+            />
+          </Box>
+
+          {/* Fasilitas Pendukung */}
+          <Box>
+            <Text fz="md" fw="bold" mb={5}>Fasilitas Pendukung</Text>
+            <CreateEditor
+              value={stateFasilitasKesehatan.create.form.fasilitasPendukung.content}
+              onChange={(val) => (stateFasilitasKesehatan.create.form.fasilitasPendukung.content = val)}
+            />
+          </Box>
+
+          {/* Prosedur Pendaftaran */}
+          <Box>
+            <Text fz="md" fw="bold" mb={5}>Prosedur Pendaftaran</Text>
+            <CreateEditor
+              value={stateFasilitasKesehatan.create.form.prosedurPendaftaran.content}
+              onChange={(val) => (stateFasilitasKesehatan.create.form.prosedurPendaftaran.content = val)}
+            />
+          </Box>
+
+          {/* Tarif dan Layanan */}
+          <Box>
+            <Text fz="md" fw="bold" mb={5}>Tarif dan Layanan</Text>
+            <TextInput
+              label="Tarif"
+              placeholder="Masukkan tarif"
+              value={stateFasilitasKesehatan.create.form.tarifDanLayanan.tarif}
+              onChange={(e) => (stateFasilitasKesehatan.create.form.tarifDanLayanan.tarif = e.target.value)}
+              required
+            />
+            <TextInput
+              label="Layanan"
+              placeholder="Masukkan layanan"
+              value={stateFasilitasKesehatan.create.form.tarifDanLayanan.layanan}
+              onChange={(e) => (stateFasilitasKesehatan.create.form.tarifDanLayanan.layanan = e.target.value)}
+              required
+            />
+          </Box>
+
+          {/* Submit */}
+          <Group justify="right" mt="md">
+            <Button
+              type="submit"
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

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

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

@@ -2,7 +2,16 @@
 'use client'
 import grafikkepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -10,9 +19,10 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function EditGrafikHasilKepuasan() {
-  const editState = useProxy(grafikkepuasan)
+  const editState = useProxy(grafikkepuasan);
   const router = useRouter();
   const params = useParams();
+
   const [formData, setFormData] = useState({
     nama: editState.update.form.nama || '',
     tanggal: editState.update.form.tanggal || '',
@@ -22,12 +32,12 @@ function EditGrafikHasilKepuasan() {
   });
 
   useEffect(() => {
-    const loadKelahiran = async () => {
+    const loadData = async () => {
       const id = params?.id as string;
       if (!id) return;
 
       try {
-        const data = await editState.update.load(id); // akses langsung, bukan dari proxy
+        const data = await editState.update.load(id);
         if (data) {
           setFormData({
             nama: data.nama || '',
@@ -43,21 +53,17 @@ function EditGrafikHasilKepuasan() {
       }
     };
 
-    loadKelahiran();
+    loadData();
   }, [params?.id]);
 
   const handleSubmit = async () => {
     try {
       editState.update.form = {
         ...editState.update.form,
-        nama: formData.nama,
-        tanggal: formData.tanggal,
-        jenisKelamin: formData.jenisKelamin,
-        alamat: formData.alamat,
-        penyakit: formData.penyakit,
+        ...formData,
       };
       await editState.update.submit();
-      toast.success('grafik hasil kepuasan berhasil diperbarui!');
+      toast.success('Grafik hasil kepuasan berhasil diperbarui!');
       router.push('/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan');
     } catch (error) {
       console.error('Error updating grafik hasil kepuasan:', error);
@@ -66,47 +72,87 @@ function EditGrafikHasilKepuasan() {
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors["blue-button"]} size={30} />
-        </Button>
-      </Box>
-      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Edit grafik hasil kepuasan</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Grafik Hasil Kepuasan
+        </Title>
+      </Group>
+
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
             value={formData.nama}
             onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
-            placeholder="masukkan nama"
+            label="Nama"
+            placeholder="Masukkan nama"
+            required
           />
           <TextInput
-            type='date'
+            type="date"
             value={formData.tanggal}
             onChange={(e) => setFormData({ ...formData, tanggal: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Tanggal</Text>}
-            placeholder="masukkan tanggal"
+            label="Tanggal"
+            placeholder="Masukkan tanggal"
+            required
           />
           <TextInput
             value={formData.jenisKelamin}
-            onChange={(e) => setFormData({ ...formData, jenisKelamin: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Jenis Kelamin</Text>}
-            placeholder="masukkan jenis kelamin"
+            onChange={(e) =>
+              setFormData({ ...formData, jenisKelamin: e.target.value })
+            }
+            label="Jenis Kelamin"
+            placeholder="Masukkan jenis kelamin"
+            required
           />
           <TextInput
             value={formData.alamat}
             onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Alamat</Text>}
-            placeholder="masukkan alamat"
+            label="Alamat"
+            placeholder="Masukkan alamat"
+            required
           />
           <TextInput
             value={formData.penyakit}
             onChange={(e) => setFormData({ ...formData, penyakit: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Penyakit</Text>}
-            placeholder="masukkan penyakit"
+            label="Penyakit"
+            placeholder="Masukkan penyakit"
+            required
           />
-          <Button onClick={handleSubmit}>Simpan</Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

@@ -1,9 +1,8 @@
 'use client'
 import { useProxy } from 'valtio/utils';
-
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 
@@ -11,103 +10,130 @@ import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirma
 import grafikkepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
 import colors from '@/con/colors';
 
-
 function DetailGrafikHasilKepuasan() {
-  const state = useProxy(grafikkepuasan)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
+  const state = useProxy(grafikkepuasan);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const params = useParams();
+  const router = useRouter();
 
   useShallowEffect(() => {
-    state.findUnique.load(params?.id as string)
-  }, [])
-
+    state.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      state.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan")
+      state.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan");
     }
-  }
+  };
 
   if (!state.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={40} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = state.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Data Grafik Hasil Kepuasan</Text>
-          {state.findUnique.data ? (
-            <Paper key={state.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
-                  <Text fz={"lg"}>{state.findUnique.data?.nama}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Tanggal</Text>
-                  <Text fz={"lg"}>
-                    {new Date(state.findUnique.data?.tanggal).toLocaleDateString('id-ID', {
-                      day: '2-digit',
-                      month: 'long',
-                      year: 'numeric'
-                    })}
-                  </Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Jenis Kelamin</Text>
-                  <Text fz={"lg"} >{state.findUnique.data?.jenisKelamin}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Alamat</Text>
-                  <Text fz={"lg"} >{state.findUnique.data?.alamat}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Penyakit</Text>
-                  <Text fz={"lg"} >{state.findUnique.data?.penyakit}</Text>
-                </Box>
-                <Flex gap={"xs"} mt={10}>
+    <Box py={10}>
+      {/* Tombol Back */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Wrapper Detail */}
+      <Paper
+        withBorder
+        w={{ base: "100%", md: "50%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Data Grafik Hasil Kepuasan
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Nama</Text>
+                <Text fz="md" c="dimmed">{data.nama || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Tanggal</Text>
+                <Text fz="md" c="dimmed">
+                  {new Date(data.tanggal).toLocaleDateString("id-ID", {
+                    day: "2-digit",
+                    month: "long",
+                    year: "numeric",
+                  })}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Jenis Kelamin</Text>
+                <Text fz="md" c="dimmed">{data.jenisKelamin || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Alamat</Text>
+                <Text fz="md" c="dimmed">{data.alamat || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Penyakit</Text>
+                <Text fz="md" c="dimmed">{data.penyakit || '-'}</Text>
+              </Box>
+
+              {/* Aksi */}
+              <Group gap="sm">
+                <Tooltip label="Hapus Data" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (state.findUnique.data) {
-                        setSelectedId(state.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={state.delete.loading || !state.findUnique.data}
-                    color={"red"}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
-                    <IconX size={20} />
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Data" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (state.findUnique.data) {
-                        router.push(`/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/${state.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!state.findUnique.data}
-                    color={"green"}
+                    color="green"
+                    onClick={() =>
+                      router.push(
+                        `/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/${data.id}/edit`
+                      )
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
@@ -116,10 +142,10 @@ function DetailGrafikHasilKepuasan() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus data ini?'
+        text="Apakah anda yakin ingin menghapus data ini?"
       />
     </Box>
   );
 }
 
-export default DetailGrafikHasilKepuasan;
+export default DetailGrafikHasilKepuasan;

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

@@ -3,7 +3,17 @@
 'use client'
 import grafikkepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -12,7 +22,7 @@ import { useProxy } from 'valtio/utils';
 function CreateGrafikHasilKepuasanMasyarakat() {
   const stateGrafikKepuasan = useProxy(grafikkepuasan);
   const [chartData, setChartData] = useState<any[]>([]);
-  const router = useRouter()
+  const router = useRouter();
 
   const resetForm = () => {
     stateGrafikKepuasan.create.form = {
@@ -21,82 +31,97 @@ function CreateGrafikHasilKepuasanMasyarakat() {
       jenisKelamin: "",
       alamat: "",
       penyakit: "",
-    }
-  }
+    };
+  };
 
   const handleSubmit = async () => {
     await stateGrafikKepuasan.create.create();
     resetForm();
     router.push("/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan");
-  }
+  };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack size={20} />
-        </Button>
-      </Box>
-      <Box>
-        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-          <Title order={4}>Tambah Grafik Hasil Kepuasan Masyarakat</Title>
-          <Stack gap={"xs"}>
-            <TextInput
-              label="Nama"
-              type="text"
-              value={stateGrafikKepuasan.create.form.nama}
-              placeholder="Masukkan nama"
-              onChange={(val) => {
-                stateGrafikKepuasan.create.form.nama = val.currentTarget.value;
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Grafik Hasil Kepuasan Masyarakat
+        </Title>
+      </Group>
+
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Nama"
+            placeholder="Masukkan nama"
+            value={stateGrafikKepuasan.create.form.nama}
+            onChange={(e) => (stateGrafikKepuasan.create.form.nama = e.target.value)}
+            required
+          />
+          <TextInput
+            type="date"
+            label="Tanggal"
+            placeholder="Masukkan tanggal"
+            value={stateGrafikKepuasan.create.form.tanggal}
+            onChange={(e) => (stateGrafikKepuasan.create.form.tanggal = e.target.value)}
+            required
+          />
+          <TextInput
+            label="Jenis Kelamin"
+            placeholder="Masukkan jenis kelamin"
+            value={stateGrafikKepuasan.create.form.jenisKelamin}
+            onChange={(e) => (stateGrafikKepuasan.create.form.jenisKelamin = e.target.value)}
+            required
+          />
+          <TextInput
+            label="Alamat"
+            placeholder="Masukkan alamat"
+            value={stateGrafikKepuasan.create.form.alamat}
+            onChange={(e) => (stateGrafikKepuasan.create.form.alamat = e.target.value)}
+            required
+          />
+          <TextInput
+            label="Penyakit"
+            placeholder="Masukkan penyakit"
+            value={stateGrafikKepuasan.create.form.penyakit}
+            onChange={(e) => (stateGrafikKepuasan.create.form.penyakit = e.target.value)}
+            required
+          />
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}
-            />
-            <TextInput
-              label="Tanggal"
-              type="date"
-              value={stateGrafikKepuasan.create.form.tanggal}
-              placeholder="Masukkan tanggal"
-              onChange={(val) => {
-                stateGrafikKepuasan.create.form.tanggal = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              label="Jenis Kelamin"
-              type="text"
-              value={stateGrafikKepuasan.create.form.jenisKelamin}
-              placeholder="Masukkan jenis kelamin"
-              onChange={(val) => {
-                stateGrafikKepuasan.create.form.jenisKelamin = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              label="Alamat"
-              type="text"
-              value={stateGrafikKepuasan.create.form.alamat}
-              placeholder="Masukkan alamat"
-              onChange={(val) => {
-                stateGrafikKepuasan.create.form.alamat = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              label="Penyakit"
-              type="text"
-              value={stateGrafikKepuasan.create.form.penyakit}
-              placeholder="Masukkan penyakit"
-              onChange={(val) => {
-                stateGrafikKepuasan.create.form.penyakit = val.currentTarget.value;
-              }}
-            />
-            <Group>
-              <Button
-                bg={colors['blue-button']}
-                mt={10}
-                onClick={handleSubmit}
-              >
-                Submit
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Box>
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }

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

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

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

@@ -4,7 +4,17 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import jadwalKegiatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -128,33 +138,14 @@ function EditJadwalKegiatan() {
       stateJadwalKegiatan.edit.form = {
         ...stateJadwalKegiatan.edit.form,
         content: formData.content,
-        informasiJadwalKegiatan: {
-          name: formData.informasiJadwalKegiatan.name,
-          tanggal: formData.informasiJadwalKegiatan.tanggal,
-          waktu: formData.informasiJadwalKegiatan.waktu,
-          lokasi: formData.informasiJadwalKegiatan.lokasi,
-        },
-        deskripsiJadwalKegiatan: {
-          deskripsi: formData.deskripsiJadwalKegiatan.deskripsi,
-        },
-        layananJadwalKegiatan: {
-          content: formData.layananJadwalKegiatan.content,
-        },
-        syaratKetentuanJadwalKegiatan: {
-          content: formData.syaratKetentuanJadwalKegiatan.content,
-        },
-        dokumenJadwalKegiatan: {
-          content: formData.dokumenJadwalKegiatan.content,
-        },
-        pendaftaranJadwalKegiatan: {
-          name: formData.pendaftaranJadwalKegiatan.name,
-          tanggal: formData.pendaftaranJadwalKegiatan.tanggal,
-          namaOrangtua: formData.pendaftaranJadwalKegiatan.namaOrangtua,
-          nomor: formData.pendaftaranJadwalKegiatan.nomor,
-          alamat: formData.pendaftaranJadwalKegiatan.alamat,
-          catatan: formData.pendaftaranJadwalKegiatan.catatan,
-        },
+        informasiJadwalKegiatan: { ...formData.informasiJadwalKegiatan },
+        deskripsiJadwalKegiatan: { ...formData.deskripsiJadwalKegiatan },
+        layananJadwalKegiatan: { ...formData.layananJadwalKegiatan },
+        syaratKetentuanJadwalKegiatan: { ...formData.syaratKetentuanJadwalKegiatan },
+        dokumenJadwalKegiatan: { ...formData.dokumenJadwalKegiatan },
+        pendaftaranJadwalKegiatan: { ...formData.pendaftaranJadwalKegiatan },
       };
+
       const success = await stateJadwalKegiatan.edit.submit();
       if (success) {
         toast.success("Jadwal kegiatan berhasil diperbarui!");
@@ -165,241 +156,164 @@ function EditJadwalKegiatan() {
       toast.error(error instanceof Error ? error.message : "Gagal memperbarui data jadwal kegiatan");
     }
   };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant="subtle" color="blue">
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Stack gap="xs">
-        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Edit Jadwal Kegiatan</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Jadwal Kegiatan
+        </Title>
+      </Group>
+
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          {/* Nama Jadwal */}
           <TextInput
-            label={<Text fz="sm" fw="bold">Nama Jadwal Kegiatan</Text>}
-            placeholder="masukkan nama jadwal kegiatan"
+            label="Nama Jadwal Kegiatan"
+            placeholder="Masukkan nama jadwal kegiatan"
             value={formData.content}
-            onChange={(e) => {
-              setFormData(prev => ({
-                ...prev,
-                content: e.target.value
-              }));
-            }}
+            onChange={(e) => setFormData((prev) => ({ ...prev, content: e.target.value }))}
           />
-         <Box>
-         <Text fz="sm" fw="bold">Deskripsi Jadwal Kegiatan</Text>
-          <EditEditor
-            value={formData.deskripsiJadwalKegiatan.deskripsi}
-            onChange={(e) => {
-              setFormData(prev => ({
-                ...prev,
-                deskripsiJadwalKegiatan: {
-                  ...prev.deskripsiJadwalKegiatan,
-                  deskripsi: e
-                }
-              }));
-            }}
-          />
-         </Box>
+
+          {/* Deskripsi */}
           <Box>
-            <Text fz="md" fw="bold">Informasi Jadwal Kegiatan</Text>
-            <TextInput
-              label={<Text fz="sm" fw="bold">Nama</Text>}
-              placeholder="masukkan nama"
-              value={formData.informasiJadwalKegiatan.name}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  informasiJadwalKegiatan: {
-                    ...prev.informasiJadwalKegiatan,
-                    name: e.target.value
-                  }
-                }));
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Tanggal</Text>}
-              placeholder="masukkan tanggal"
-              value={formData.informasiJadwalKegiatan.tanggal}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  informasiJadwalKegiatan: {
-                    ...prev.informasiJadwalKegiatan,
-                    tanggal: e.target.value
-                  }
-                }));
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Waktu</Text>}
-              placeholder="masukkan waktu"
-              value={formData.informasiJadwalKegiatan.waktu}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  informasiJadwalKegiatan: {
-                    ...prev.informasiJadwalKegiatan,
-                    waktu: e.target.value
-                  }
-                }));
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Lokasi</Text>}
-              placeholder="masukkan lokasi"
-              value={formData.informasiJadwalKegiatan.lokasi}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  informasiJadwalKegiatan: {
-                    ...prev.informasiJadwalKegiatan,
-                    lokasi: e.target.value
-                  }
-                }));
-              }}
+            <Text fz="sm" fw="bold">Deskripsi Jadwal Kegiatan</Text>
+            <EditEditor
+              value={formData.deskripsiJadwalKegiatan.deskripsi}
+              onChange={(val) => setFormData((prev) => ({
+                ...prev,
+                deskripsiJadwalKegiatan: { deskripsi: val }
+              }))}
             />
           </Box>
+
+          {/* Informasi Jadwal */}
+          <Box>
+            <Text fz="md" fw="bold">Informasi Jadwal Kegiatan</Text>
+            <TextInput label="Nama" value={formData.informasiJadwalKegiatan.name}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, informasiJadwalKegiatan: { ...prev.informasiJadwalKegiatan, name: e.target.value }
+              }))}
+            />
+            <TextInput type="date" label="Tanggal" value={formData.informasiJadwalKegiatan.tanggal}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, informasiJadwalKegiatan: { ...prev.informasiJadwalKegiatan, tanggal: e.target.value }
+              }))}
+            />
+            <TextInput label="Waktu" value={formData.informasiJadwalKegiatan.waktu}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, informasiJadwalKegiatan: { ...prev.informasiJadwalKegiatan, waktu: e.target.value }
+              }))}
+            />
+            <TextInput label="Lokasi" value={formData.informasiJadwalKegiatan.lokasi}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, informasiJadwalKegiatan: { ...prev.informasiJadwalKegiatan, lokasi: e.target.value }
+              }))}
+            />
+          </Box>
+
+          {/* Layanan */}
           <Box>
             <Text fz="md" fw="bold">Layanan Jadwal Kegiatan</Text>
             <EditEditor
               value={formData.layananJadwalKegiatan.content}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  layananJadwalKegiatan: {
-                    ...prev.layananJadwalKegiatan,
-                    content: e
-                  }
-                }));
-              }}
+              onChange={(val) => setFormData((prev) => ({
+                ...prev,
+                layananJadwalKegiatan: { content: val }
+              }))}
             />
           </Box>
+
+          {/* Syarat */}
           <Box>
-            <Text fz="md" fw="bold">Syarat dan Ketentuan Jadwal Kegiatan</Text>
+            <Text fz="md" fw="bold">Syarat dan Ketentuan</Text>
             <EditEditor
               value={formData.syaratKetentuanJadwalKegiatan.content}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  syaratKetentuanJadwalKegiatan: {
-                    ...prev.syaratKetentuanJadwalKegiatan,
-                    content: e
-                  }
-                }));
-              }}
+              onChange={(val) => setFormData((prev) => ({
+                ...prev,
+                syaratKetentuanJadwalKegiatan: { content: val }
+              }))}
             />
           </Box>
+
+          {/* Dokumen */}
           <Box>
             <Text fz="md" fw="bold">Dokumen Jadwal Kegiatan</Text>
             <EditEditor
               value={formData.dokumenJadwalKegiatan.content}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  dokumenJadwalKegiatan: {
-                    ...prev.dokumenJadwalKegiatan,
-                    content: e
-                  }
-                }));
-              }}
-            />
-          </Box>
-          <Box>
-            <Text fz="md" fw="bold">Pendaftaran Jadwal Kegiatan</Text>
-            <TextInput
-              label={<Text fz="sm" fw="bold">Nama</Text>}
-              placeholder="masukkan nama"
-              value={formData.pendaftaranJadwalKegiatan.name}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  pendaftaranJadwalKegiatan: {
-                    ...prev.pendaftaranJadwalKegiatan,
-                    name: e.target.value
-                  }
-                }));
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Tanggal</Text>}
-              placeholder="masukkan tanggal"
-              value={formData.pendaftaranJadwalKegiatan.tanggal}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  pendaftaranJadwalKegiatan: {
-                    ...prev.pendaftaranJadwalKegiatan,
-                    tanggal: e.target.value
-                  }
-                }));
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Nama Orangtua</Text>}
-              placeholder="masukkan nama orangtua"
-              value={formData.pendaftaranJadwalKegiatan.namaOrangtua}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  pendaftaranJadwalKegiatan: {
-                    ...prev.pendaftaranJadwalKegiatan,
-                    namaOrangtua: e.target.value
-                  }
-                }));
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Nomor</Text>}
-              placeholder="masukkan nomor"
-              value={formData.pendaftaranJadwalKegiatan.nomor}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  pendaftaranJadwalKegiatan: {
-                    ...prev.pendaftaranJadwalKegiatan,
-                    nomor: e.target.value
-                  }
-                }));
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Alamat</Text>}
-              placeholder="masukkan alamat"
-              value={formData.pendaftaranJadwalKegiatan.alamat}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  pendaftaranJadwalKegiatan: {
-                    ...prev.pendaftaranJadwalKegiatan,
-                    alamat: e.target.value
-                  }
-                }));
-              }}
-            />
-            <TextInput
-              label={<Text fz="sm" fw="bold">Catatan</Text>}
-              placeholder="masukkan catatan"
-              value={formData.pendaftaranJadwalKegiatan.catatan}
-              onChange={(e) => {
-                setFormData(prev => ({
-                  ...prev,
-                  pendaftaranJadwalKegiatan: {
-                    ...prev.pendaftaranJadwalKegiatan,
-                    catatan: e.target.value
-                  }
-                }));
-              }}
+              onChange={(val) => setFormData((prev) => ({
+                ...prev,
+                dokumenJadwalKegiatan: { content: val }
+              }))}
             />
           </Box>
 
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
+          {/* Pendaftaran */}
+          <Box>
+            <Text fz="md" fw="bold">Pendaftaran Jadwal Kegiatan</Text>
+            <TextInput label="Nama" value={formData.pendaftaranJadwalKegiatan.name}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, pendaftaranJadwalKegiatan: { ...prev.pendaftaranJadwalKegiatan, name: e.target.value }
+              }))}
+            />
+            <TextInput type="date" label="Tanggal" value={formData.pendaftaranJadwalKegiatan.tanggal}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, pendaftaranJadwalKegiatan: { ...prev.pendaftaranJadwalKegiatan, tanggal: e.target.value }
+              }))}
+            />
+            <TextInput label="Nama Orangtua" value={formData.pendaftaranJadwalKegiatan.namaOrangtua}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, pendaftaranJadwalKegiatan: { ...prev.pendaftaranJadwalKegiatan, namaOrangtua: e.target.value }
+              }))}
+            />
+            <TextInput label="Nomor" value={formData.pendaftaranJadwalKegiatan.nomor}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, pendaftaranJadwalKegiatan: { ...prev.pendaftaranJadwalKegiatan, nomor: e.target.value }
+              }))}
+            />
+            <TextInput label="Alamat" value={formData.pendaftaranJadwalKegiatan.alamat}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, pendaftaranJadwalKegiatan: { ...prev.pendaftaranJadwalKegiatan, alamat: e.target.value }
+              }))}
+            />
+            <TextInput label="Catatan" value={formData.pendaftaranJadwalKegiatan.catatan}
+              onChange={(e) => setFormData((prev) => ({
+                ...prev, pendaftaranJadwalKegiatan: { ...prev.pendaftaranJadwalKegiatan, catatan: e.target.value }
+              }))}
+            />
+          </Box>
+
+          {/* Submit */}
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
-        </Paper>
-      </Stack>
+      </Paper>
     </Box>
   );
 }

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

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

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

@@ -2,127 +2,158 @@
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import jadwalKegiatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-
 function CreateJadwalKegiatan() {
-  const stateJadwalKegiatan = useProxy(jadwalKegiatanState)
+  const stateJadwalKegiatan = useProxy(jadwalKegiatanState);
   const router = useRouter();
 
-
   const resetForm = () => {
-    stateJadwalKegiatan.edit.form = {
-      content: "",
+    stateJadwalKegiatan.create.form = {
+      content: '',
       informasiJadwalKegiatan: {
-        name: "",
-        tanggal: "",
-        waktu: "",
-        lokasi: "",
+        name: '',
+        tanggal: '',
+        waktu: '',
+        lokasi: '',
       },
       deskripsiJadwalKegiatan: {
-        deskripsi: "",
+        deskripsi: '',
       },
       layananJadwalKegiatan: {
-        content: "",
+        content: '',
       },
       syaratKetentuanJadwalKegiatan: {
-        content: "",
+        content: '',
       },
       dokumenJadwalKegiatan: {
-        content: "",
+        content: '',
       },
       pendaftaranJadwalKegiatan: {
-        name: "",
-        tanggal: "",
-        namaOrangtua: "",
-        nomor: "",
-        alamat: "",
-        catatan: "",
+        name: '',
+        tanggal: '',
+        namaOrangtua: '',
+        nomor: '',
+        alamat: '',
+        catatan: '',
       },
     };
   };
 
-
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     await stateJadwalKegiatan.create.submit();
 
-    toast.success("Data berhasil disimpan");
+    toast.success('Data berhasil disimpan');
     resetForm();
-    // After successful submission, redirect to the list page
     router.push('/admin/kesehatan/data-kesehatan-warga/jadwal_kegiatan');
-  }
+  };
 
   return (
-    <Box component="form" onSubmit={handleSubmit}>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md" component="form" onSubmit={handleSubmit}>
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Jadwal Kegiatan
+        </Title>
+      </Group>
 
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Create Jadwal Kegiatan</Title>
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
-            label={<Text fz="sm" fw="bold">Nama Jadwal Kegiatan</Text>}
-            placeholder="masukkan nama jadwal kegiatan"
+            label="Nama Jadwal Kegiatan"
+            placeholder="Masukkan nama jadwal kegiatan"
             value={stateJadwalKegiatan.create.form.content}
             onChange={(e) => {
               stateJadwalKegiatan.create.form.content = e.target.value;
             }}
+            required
           />
-         <Box>
-         <Text fz="sm" fw="bold">Deskripsi Jadwal Kegiatan</Text>
-          <CreateEditor
-            value={stateJadwalKegiatan.create.form.deskripsiJadwalKegiatan.deskripsi}
-            onChange={(e) => {
-              stateJadwalKegiatan.create.form.deskripsiJadwalKegiatan.deskripsi = e;
-            }}
-          />
-         </Box>
+
           <Box>
-            <Text fz="md" fw="bold">Informasi Jadwal Kegiatan</Text>
+            <Text fz="sm" fw="bold" mb={4}>Deskripsi Jadwal Kegiatan</Text>
+            <CreateEditor
+              value={stateJadwalKegiatan.create.form.deskripsiJadwalKegiatan.deskripsi}
+              onChange={(e) => {
+                stateJadwalKegiatan.create.form.deskripsiJadwalKegiatan.deskripsi = e;
+              }}
+            />
+          </Box>
+
+          <Box>
+            <Text fz="md" fw="bold" mb="sm">Informasi Jadwal Kegiatan</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Nama</Text>}
-              placeholder="masukkan nama"
+              label="Nama"
+              required
+              placeholder="Masukkan nama"
               value={stateJadwalKegiatan.create.form.informasiJadwalKegiatan.name}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.informasiJadwalKegiatan.name = e.target.value;
               }}
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Tanggal</Text>}
-              placeholder="masukkan tanggal"
+              type="date"
+              required
+              label="Tanggal"
               value={stateJadwalKegiatan.create.form.informasiJadwalKegiatan.tanggal}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.informasiJadwalKegiatan.tanggal = e.target.value;
               }}
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Waktu</Text>}
-              placeholder="masukkan waktu"
+              label="Waktu"
+              required
+              placeholder="Masukkan waktu"
               value={stateJadwalKegiatan.create.form.informasiJadwalKegiatan.waktu}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.informasiJadwalKegiatan.waktu = e.target.value;
               }}
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Lokasi</Text>}
-              placeholder="masukkan lokasi"
+              label="Lokasi"
+              required
+              placeholder="Masukkan lokasi"
               value={stateJadwalKegiatan.create.form.informasiJadwalKegiatan.lokasi}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.informasiJadwalKegiatan.lokasi = e.target.value;
               }}
             />
           </Box>
+
           <Box>
-            <Text fz="md" fw="bold">Layanan Jadwal Kegiatan</Text>
+            <Text fz="md" fw="bold" mb="sm">Layanan Jadwal Kegiatan</Text>
             <CreateEditor
               value={stateJadwalKegiatan.create.form.layananJadwalKegiatan.content}
               onChange={(e) => {
@@ -130,8 +161,9 @@ function CreateJadwalKegiatan() {
               }}
             />
           </Box>
+
           <Box>
-            <Text fz="md" fw="bold">Syarat dan Ketentuan Jadwal Kegiatan</Text>
+            <Text fz="md" fw="bold" mb="sm">Syarat & Ketentuan</Text>
             <CreateEditor
               value={stateJadwalKegiatan.create.form.syaratKetentuanJadwalKegiatan.content}
               onChange={(e) => {
@@ -139,8 +171,9 @@ function CreateJadwalKegiatan() {
               }}
             />
           </Box>
+
           <Box>
-            <Text fz="md" fw="bold">Dokumen Jadwal Kegiatan</Text>
+            <Text fz="md" fw="bold" mb="sm">Dokumen</Text>
             <CreateEditor
               value={stateJadwalKegiatan.create.form.dokumenJadwalKegiatan.content}
               onChange={(e) => {
@@ -148,51 +181,58 @@ function CreateJadwalKegiatan() {
               }}
             />
           </Box>
+
           <Box>
-            <Text fz="md" fw="bold">Pendaftaran Jadwal Kegiatan</Text>
+            <Text fz="md" fw="bold" mb="sm">Pendaftaran Jadwal Kegiatan</Text>
             <TextInput
-              label={<Text fz="sm" fw="bold">Nama</Text>}
-              placeholder="masukkan nama"
+              label="Nama"
+              required
+              placeholder="Masukkan nama"
               value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.name}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.name = e.target.value;
               }}
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Tanggal</Text>}
-              placeholder="masukkan tanggal"
+              type="date"
+              required
+              label="Tanggal"
               value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.tanggal}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.tanggal = e.target.value;
               }}
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Nama Orangtua</Text>}
-              placeholder="masukkan nama orangtua"
+              label="Nama Orangtua"
+              required
+              placeholder="Masukkan nama orangtua"
               value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.namaOrangtua}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.namaOrangtua = e.target.value;
               }}
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Nomor</Text>}
-              placeholder="masukkan nomor"
+              label="Nomor"
+              required
+              placeholder="Masukkan nomor"
               value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.nomor}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.nomor = e.target.value;
               }}
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Alamat</Text>}
-              placeholder="masukkan alamat"
+              label="Alamat"
+              required
+              placeholder="Masukkan alamat"
               value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.alamat}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.alamat = e.target.value;
               }}
             />
             <TextInput
-              label={<Text fz="sm" fw="bold">Catatan</Text>}
-              placeholder="masukkan catatan"
+              label="Catatan"
+              required
+              placeholder="Masukkan catatan"
               value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.catatan}
               onChange={(e) => {
                 stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.catatan = e.target.value;
@@ -200,9 +240,21 @@ function CreateJadwalKegiatan() {
             />
           </Box>
 
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
+          {/* Save Button */}
+          <Group justify="right">
+            <Button
+              type="submit"
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

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

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

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

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

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

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

@@ -1,83 +1,126 @@
-'use client'
+'use client';
 import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+ Box,
+ Button,
+ Group,
+ Paper,
+ Stack,
+ Text,
+ TextInput,
+ Title,
+ Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 
 
-
 function CreateKelahiran() {
-  const createState = useProxy(persentaseKelahiranKematian.kelahiran)
-  const router = useRouter();
+ const createState = useProxy(persentaseKelahiranKematian.kelahiran);
+ const router = useRouter();
 
-  const resetForm = () => {
-    createState.create.form = {
-      nama: "",
-      tanggal: "",
-      jenisKelamin: "",
-      alamat: "",
-    };
-  };
 
-  const handleSubmit = async () => {
-    await createState.create.create();
-    resetForm();
-    router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran")
-  };
+ const resetForm = () => {
+   createState.create.form = {
+     nama: '',
+     tanggal: '',
+     jenisKelamin: '',
+     alamat: '',
+   };
+ };
 
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Kelahiran</Title>
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
-            placeholder='Masukkan nama'
-            value={createState.create.form.nama}
-            onChange={(val) => {
-              createState.create.form.nama = val.target.value;
-            }}
-          />
-          <TextInput
-            type='date'
-            label={<Text fw={"bold"} fz={"sm"}>Tanggal</Text>}
-            placeholder='Masukkan tanggal'
-            value={createState.create.form.tanggal}
-            onChange={(val) => {
-              createState.create.form.tanggal = val.target.value;
-            }}
-          />
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Jenis Kelamin</Text>}
-            placeholder='Masukkan jenis kelamin'
-            value={createState.create.form.jenisKelamin}
-            onChange={(val) => {
-              createState.create.form.jenisKelamin = val.target.value;
-            }}
-          />
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Alamat</Text>}
-            placeholder='Masukkan alamat'
-            value={createState.create.form.alamat}
-            onChange={(val) => {
-              createState.create.form.alamat = val.target.value;
-            }}
-          />
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  );
+ const handleSubmit = async () => {
+   await createState.create.create();
+   resetForm();
+   router.push(
+     '/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran'
+   );
+ };
+
+
+ return (
+   <Box px={{ base: 'sm', md: 'lg' }} py="md">
+     {/* Header */}
+     <Group mb="md">
+       <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+         <Button
+           variant="subtle"
+           onClick={() => router.back()}
+           p="xs"
+           radius="md"
+         >
+           <IconArrowBack color={colors['blue-button']} size={24} />
+         </Button>
+       </Tooltip>
+       <Title order={4} ml="sm" c="dark">
+         Tambah Data Kelahiran
+       </Title>
+     </Group>
+
+
+     {/* Form */}
+     <Paper
+       w={{ base: '100%', md: '50%' }}
+       bg={colors['white-1']}
+       p="lg"
+       radius="md"
+       shadow="sm"
+       style={{ border: '1px solid #e0e0e0' }}
+     >
+       <Stack gap="md">
+         <TextInput
+           label={<Text fw="bold" fz="sm">Nama</Text>}
+           placeholder="Masukkan nama"
+           value={createState.create.form.nama}
+           onChange={(e) => (createState.create.form.nama = e.target.value)}
+           required
+         />
+         <TextInput
+           type="date"
+           label={<Text fw="bold" fz="sm">Tanggal</Text>}
+           placeholder="Masukkan tanggal"
+           value={createState.create.form.tanggal}
+           onChange={(e) => (createState.create.form.tanggal = e.target.value)}
+           required
+         />
+         <TextInput
+           label={<Text fw="bold" fz="sm">Jenis Kelamin</Text>}
+           placeholder="Masukkan jenis kelamin"
+           value={createState.create.form.jenisKelamin}
+           onChange={(e) => (createState.create.form.jenisKelamin = e.target.value)}
+           required
+         />
+         <TextInput
+           label={<Text fw="bold" fz="sm">Alamat</Text>}
+           placeholder="Masukkan alamat"
+           value={createState.create.form.alamat}
+           onChange={(e) => (createState.create.form.alamat = e.target.value)}
+           required
+         />
+
+
+         <Group justify="right">
+           <Button
+             onClick={handleSubmit}
+             radius="md"
+             size="md"
+             style={{
+               background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+               color: '#fff',
+               boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+             }}
+           >
+             Simpan
+           </Button>
+         </Group>
+       </Stack>
+     </Paper>
+   </Box>
+ );
 }
 
-export default CreateKelahiran;
+
+export default CreateKelahiran;

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

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

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

@@ -3,119 +3,177 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+ Box,
+ Button,
+ Group,
+ Paper,
+ Stack,
+ Text,
+ TextInput,
+ Title,
+ Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
+
 function EditKematian() {
-  const editState = useProxy(persentaseKelahiranKematian.kematian)
-  const router = useRouter();
-  const params = useParams();
-  const [formData, setFormData] = useState({
-    nama: editState.edit.form.nama || '',
-    tanggal: editState.edit.form.tanggal || '',
-    jenisKelamin: editState.edit.form.jenisKelamin || '',
-    alamat: editState.edit.form.alamat || '',
-    penyebab: editState.edit.form.penyebab || '',
-  });
+ const editState = useProxy(persentaseKelahiranKematian.kematian);
+ const router = useRouter();
+ const params = useParams();
 
-  useEffect(() => {
-    const loadKelahiran = async () => {
-      const id = params?.id as string;
-      if (!id) return;
 
-      try {
-        const data = await editState.edit.load(id); // akses langsung, bukan dari proxy
-        if (data) {
-          setFormData({
-            nama: data.nama || '',
-            tanggal: data.tanggal || '',
-            jenisKelamin: data.jenisKelamin || '',
-            alamat: data.alamat || '',
-            penyebab: data.penyebab || '',
-          });
-        }
-      } catch (error) {
-        console.error("Error loading data kelahiran:", error);
-        toast.error("Gagal memuat data data kelahiran");
-      }
-    };
+ const [formData, setFormData] = useState({
+   nama: editState.edit.form.nama || '',
+   tanggal: editState.edit.form.tanggal || '',
+   jenisKelamin: editState.edit.form.jenisKelamin || '',
+   alamat: editState.edit.form.alamat || '',
+   penyebab: editState.edit.form.penyebab || '',
+ });
 
-    loadKelahiran();
-  }, [params?.id]);
 
-  const handleSubmit = async () => {
-    try {
-      editState.edit.form = {
-        ...editState.edit.form,
-        nama: formData.nama,
-        tanggal: formData.tanggal,
-        jenisKelamin: formData.jenisKelamin,
-        alamat: formData.alamat,
-        penyebab: formData.penyebab,
-      };
-      await editState.edit.update();
-      toast.success('data kelahiran berhasil diperbarui!');
-      router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran');
-    } catch (error) {
-      console.error('Error updating data kelahiran:', error);
-      toast.error('Terjadi kesalahan saat memperbarui data kelahiran');
-    }
-  };
+ useEffect(() => {
+   const loadData = async () => {
+     const id = params?.id as string;
+     if (!id) return;
 
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors["blue-button"]} size={30} />
-        </Button>
-      </Box>
-      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Edit data kelahiran</Title>
-          <TextInput
-            value={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
-            placeholder="masukkan nama"
-          />
-          <TextInput
-            type='date'
-            value={formData.tanggal}
-            onChange={(e) => setFormData({ ...formData, tanggal: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Tanggal</Text>}
-            placeholder="masukkan tanggal"
-          />
-          <TextInput
-            value={formData.jenisKelamin}
-            onChange={(e) => setFormData({ ...formData, jenisKelamin: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Jenis Kelamin</Text>}
-            placeholder="masukkan jenis kelamin"
-          />
-          <TextInput
-            value={formData.alamat}
-            onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Alamat</Text>}
-            placeholder="masukkan alamat"
-          />
-          <Box>
-            <Text fz={"sm"} fw={"bold"}>Penyebab</Text>
-            <EditEditor
-              value={formData.penyebab}
-              onChange={(htmlContent) => {
-                setFormData((prev) => ({ ...prev, penyebab: htmlContent }));
-                editState.edit.form.penyebab = htmlContent;
-              }}
-            />
-          </Box>
-          <Button onClick={handleSubmit}>Simpan</Button>
-        </Stack>
-      </Paper>
-    </Box>
-  );
+
+     try {
+       const data = await editState.edit.load(id);
+       if (data) {
+         setFormData({
+           nama: data.nama || '',
+           tanggal: data.tanggal || '',
+           jenisKelamin: data.jenisKelamin || '',
+           alamat: data.alamat || '',
+           penyebab: data.penyebab || '',
+         });
+       }
+     } catch (error) {
+       console.error('Error loading data kematian:', error);
+       toast.error('Gagal memuat data kematian');
+     }
+   };
+
+
+   loadData();
+ }, [params?.id]);
+
+
+ const handleSubmit = async () => {
+   try {
+     editState.edit.form = { ...editState.edit.form, ...formData };
+     await editState.edit.update();
+     toast.success('Data kematian berhasil diperbarui!');
+     router.push(
+       '/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian'
+     );
+   } catch (error) {
+     console.error('Error updating data kematian:', error);
+     toast.error('Terjadi kesalahan saat memperbarui data kematian');
+   }
+ };
+
+
+ return (
+   <Box px={{ base: 'sm', md: 'lg' }} py="md">
+     {/* Header dengan tombol back */}
+     <Group mb="md">
+       <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+           <IconArrowBack color={colors['blue-button']} size={24} />
+         </Button>
+       </Tooltip>
+       <Title order={4} ml="sm" c="dark">
+         Edit Data Kematian
+       </Title>
+     </Group>
+
+
+     {/* Card Form */}
+     <Paper
+       w={{ base: '100%', md: '50%' }}
+       bg={colors['white-1']}
+       p="lg"
+       radius="md"
+       shadow="sm"
+       style={{ border: '1px solid #e0e0e0' }}
+     >
+       <Stack gap="md">
+         <TextInput
+           label="Nama"
+           placeholder="Masukkan nama"
+           value={formData.nama}
+           onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+           required
+         />
+
+
+         <TextInput
+           type="date"
+           label="Tanggal"
+           placeholder="Masukkan tanggal"
+           value={formData.tanggal}
+           onChange={(e) => setFormData({ ...formData, tanggal: e.target.value })}
+           required
+         />
+
+
+         <TextInput
+           label="Jenis Kelamin"
+           placeholder="Masukkan jenis kelamin"
+           value={formData.jenisKelamin}
+           onChange={(e) => setFormData({ ...formData, jenisKelamin: e.target.value })}
+           required
+         />
+
+
+         <TextInput
+           label="Alamat"
+           placeholder="Masukkan alamat"
+           value={formData.alamat}
+           onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
+           required
+         />
+
+
+         <Box>
+           <Text fz="sm" fw="bold" mb={6}>
+             Penyebab
+           </Text>
+           <EditEditor
+             value={formData.penyebab}
+             onChange={(htmlContent) => {
+               setFormData((prev) => ({ ...prev, penyebab: htmlContent }));
+               editState.edit.form.penyebab = htmlContent;
+             }}
+           />
+         </Box>
+
+
+         <Group justify="right">
+           <Button
+             onClick={handleSubmit}
+             radius="md"
+             size="md"
+             style={{
+               background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+               color: '#fff',
+               boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+             }}
+           >
+             Simpan
+           </Button>
+         </Group>
+       </Stack>
+     </Paper>
+   </Box>
+ );
 }
 
-export default EditKematian;
+
+export default EditKematian;

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

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

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

@@ -1,94 +1,146 @@
-'use client'
+'use client';
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+ Box,
+ Button,
+ Group,
+ Paper,
+ Stack,
+ TextInput,
+ Title,
+ Tooltip
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 
 
+
+
+
 function CreateKematian() {
-  const createState = useProxy(persentaseKelahiranKematian.kematian)
-  const router = useRouter();
+ const createState = useProxy(persentaseKelahiranKematian.kematian);
+ const router = useRouter();
 
-  const resetForm = () => {
-    createState.create.form = {
-      nama: "",
-      tanggal: "",
-      jenisKelamin: "",
-      alamat: "",
-      penyebab: "",
-    };
-  };
 
-  const handleSubmit = async () => {
-    await createState.create.create();
-    resetForm();
-    router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian")
-  };
+ const resetForm = () => {
+   createState.create.form = {
+     nama: '',
+     tanggal: '',
+     jenisKelamin: '',
+     alamat: '',
+     penyebab: '',
+   };
+ };
 
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Kematian</Title>
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
-            placeholder='Masukkan nama'
-            value={createState.create.form.nama}
-            onChange={(val) => {
-              createState.create.form.nama = val.target.value;
-            }}
-          />
-          <TextInput
-            type='date'
-            label={<Text fw={"bold"} fz={"sm"}>Tanggal</Text>}
-            placeholder='Masukkan tanggal'
-            value={createState.create.form.tanggal}
-            onChange={(val) => {
-              createState.create.form.tanggal = val.target.value;
-            }}
-          />
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Jenis Kelamin</Text>}
-            placeholder='Masukkan jenis kelamin'
-            value={createState.create.form.jenisKelamin}
-            onChange={(val) => {
-              createState.create.form.jenisKelamin = val.target.value;
-            }}
-          />
-          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Alamat</Text>}
-            placeholder='Masukkan alamat'
-            value={createState.create.form.alamat}
-            onChange={(val) => {
-              createState.create.form.alamat = val.target.value;
-            }}
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Penyebab</Text>
-            <CreateEditor
-              value={createState.create.form.penyebab}
-              onChange={(htmlContent) => {
-                createState.create.form.penyebab = htmlContent;
-              }}
-            />
-          </Box>
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  );
+ const handleSubmit = async () => {
+   if (!createState.create.form.nama) {
+     return toast.warn('Nama wajib diisi');
+   }
+   if (!createState.create.form.tanggal) {
+     return toast.warn('Tanggal wajib diisi');
+   }
+
+
+   await createState.create.create();
+   resetForm();
+   router.push(
+     '/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian'
+   );
+ };
+
+
+ return (
+   <Box px={{ base: 'sm', md: 'lg' }} py="md">
+     {/* Header */}
+     <Group mb="md">
+       <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+           <IconArrowBack color={colors['blue-button']} size={24} />
+         </Button>
+       </Tooltip>
+       <Title order={4} ml="sm" c="dark">
+         Tambah Data Kematian
+       </Title>
+     </Group>
+
+
+     {/* Form Card */}
+     <Paper
+       w={{ base: '100%', md: '50%' }}
+       bg={colors['white-1']}
+       p="lg"
+       radius="md"
+       shadow="sm"
+       style={{ border: '1px solid #e0e0e0' }}
+     >
+       <Stack gap="md">
+         <TextInput
+           label="Nama"
+           placeholder="Masukkan nama"
+           value={createState.create.form.nama}
+           onChange={(e) => (createState.create.form.nama = e.target.value)}
+           required
+         />
+         <TextInput
+           type="date"
+           label="Tanggal"
+           placeholder="Masukkan tanggal"
+           value={createState.create.form.tanggal}
+           onChange={(e) => (createState.create.form.tanggal = e.target.value)}
+           required
+         />
+         <TextInput
+           label="Jenis Kelamin"
+           placeholder="Masukkan jenis kelamin"
+           value={createState.create.form.jenisKelamin}
+           onChange={(e) => (createState.create.form.jenisKelamin = e.target.value)}
+           required
+         />
+         <TextInput
+           label="Alamat"
+           placeholder="Masukkan alamat"
+           value={createState.create.form.alamat}
+           onChange={(e) => (createState.create.form.alamat = e.target.value)}
+           required
+         />
+         <Box>
+           <Title order={6} mb={6}>
+             Penyebab
+           </Title>
+           <CreateEditor
+             value={createState.create.form.penyebab}
+             onChange={(htmlContent) => {
+               createState.create.form.penyebab = htmlContent;
+             }}
+           />
+         </Box>
+
+
+         <Group justify="right">
+           <Button
+             onClick={handleSubmit}
+             radius="md"
+             size="md"
+             style={{
+               background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+               color: '#fff',
+               boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+             }}
+           >
+             Simpan
+           </Button>
+         </Group>
+       </Stack>
+     </Paper>
+   </Box>
+ );
 }
 
-export default CreateKematian;
+
+export default CreateKematian;

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

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

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

@@ -1,228 +1,277 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
 import colors from '@/con/colors';
-import { ActionIcon, Box, Center, Flex, Paper, Select, Skeleton, Stack, Table, Text, Title } from '@mantine/core';
-import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { ActionIcon, Badge, Box, Center, Flex, Tooltip as MantineTooltip, Paper, Select, Skeleton, Stack, Table, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { IconBabyCarriage, IconGrave2 } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { Bar, BarChart, Legend, Tooltip, TooltipProps, XAxis, YAxis } from 'recharts';
+import { Bar, BarChart, Legend, ResponsiveContainer, Tooltip, TooltipProps, XAxis, YAxis } from 'recharts';
 import { useProxy } from 'valtio/utils';
 
+
 type TooltipPayload = {
-  name: string;
-  value: number;
-  payload: any;
-  color: string;
-  dataKey: string;
+ name: string;
+ value: number;
+ payload: any;
+ color: string;
+ dataKey: string;
 };
 
+
 type CustomTooltipProps = TooltipProps<number, string> & {
-  active?: boolean;
-  payload?: TooltipPayload[];
-  label?: string;
+ active?: boolean;
+ payload?: TooltipPayload[];
+ label?: string;
 };
 
+
 function PersentaseDataKelahiranKematian() {
-  return (
-    <Stack gap={"xs"}>
-      <GrafikPersentaseKelahiranKematian />
-    </Stack>
-  );
+ return (
+   <Stack gap="md">
+     <GrafikPersentaseKelahiranKematian />
+   </Stack>
+ );
 }
+
+
 function GrafikPersentaseKelahiranKematian() {
-  const router = useRouter();
-  type DataTahunan = {
-    tahun: string;
-    totalKelahiran: number;
-    totalKematian: number;
-    data: Array<{
-      id: string;
-      bulan: string;
-      kelahiran: number;
-      kematian: number;
-    }>;
-  };
+ const router = useRouter();
 
-  // Count occurrences per year
-  const countByYear = (data: any[], dateField: string) => {
-    const counts: Record<string, number> = {};
-    data?.forEach(item => {
-      const year = new Date(item[dateField]).getFullYear().toString();
-      counts[year] = (counts[year] || 0) + 1;
-    });
-    return counts;
-  };
 
-  const statePersentase = useProxy(persentasekelahiran);
-  const [chartData, setChartData] = useState<DataTahunan[]>([]);
-  const isTablet = useMediaQuery('(max-width: 1024px)');
-  const isMobile = useMediaQuery('(max-width: 768px)');
-  const [selectedYear, setSelectedYear] = useState<string | null>(null);
+ type DataTahunan = {
+   tahun: string;
+   totalKelahiran: number;
+   totalKematian: number;
+   data: Array<{
+     id: string;
+     bulan: string;
+     kelahiran: number;
+     kematian: number;
+   }>;
+ };
 
-  // Format number to Indonesian locale
-  const formatNumber = (num: number) => {
-    return new Intl.NumberFormat('id-ID').format(num);
-  };
 
-  // Format tooltip
-  const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
-    if (active && payload && payload.length) {
-      return (
-        <Paper p="md" shadow="md" withBorder>
-          <Text size="sm" fw={500} mb={5}>Tahun {label}</Text>
-          <Text size="sm" c="blue">Kelahiran: {formatNumber(payload[0].value)}</Text>
-          <Text size="sm" c="red">Kematian: {formatNumber(payload[1].value)}</Text>
-        </Paper>
-      );
-    }
-    return null;
-  };
+ // ✅ Fungsi hitung tahunan + bulanan
+ const countByYearAndMonth = (kelahiran: any[], kematian: any[]): DataTahunan[] => {
+   const dataTahunan: Record<string, DataTahunan> = {};
 
-  useShallowEffect(() => {
-    statePersentase.kelahiran.findMany.load(1, 1000); // Load all kelahiran data
-    statePersentase.kematian.findMany.load(1, 1000); // Load all kematian data
-  }, []);
 
-  useEffect(() => {
-    if (statePersentase.kelahiran.findMany.data && statePersentase.kematian.findMany.data) {
-      // Count kelahiran and kematian by year
-      const kelahiranByYear = countByYear(statePersentase.kelahiran.findMany.data, 'tanggal');
-      const kematianByYear = countByYear(statePersentase.kematian.findMany.data, 'tanggal');
+   const namaBulan = [
+     'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
+     'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
+   ];
 
-      // Get all unique years
-      const allYears = new Set([
-        ...Object.keys(kelahiranByYear),
-        ...Object.keys(kematianByYear)
-      ]);
 
-      // Create data structure for the chart
-      const dataByYear = Array.from(allYears).reduce<Record<string, DataTahunan>>((acc, year) => {
-        acc[year] = {
-          tahun: year,
-          totalKelahiran: kelahiranByYear[year] || 0,
-          totalKematian: kematianByYear[year] || 0,
-          data: []
-        };
-        return acc;
-      }, {});
+   // Proses kelahiran
+   kelahiran?.forEach((item: any) => {
+     const date = new Date(item.tanggal);
+     const tahun = date.getFullYear().toString();
+     const bulanIndex = date.getMonth();
 
-      const sortedData = Object.values(dataByYear).sort((a, b) =>
-        parseInt(a.tahun) - parseInt(b.tahun)
-      );
 
-      setChartData(sortedData);
-      setSelectedYear(sortedData[0]?.tahun || '');
-    }
-  }, [
-    statePersentase.kelahiran.findMany.data,
-    statePersentase.kematian.findMany.data,
-  ]);
+     if (!dataTahunan[tahun]) {
+       dataTahunan[tahun] = {
+         tahun,
+         totalKelahiran: 0,
+         totalKematian: 0,
+         data: namaBulan.map((nama, idx) => ({
+           id: `${tahun}-${idx + 1}`,
+           bulan: nama,
+           kelahiran: 0,
+           kematian: 0
+         }))
+       };
+     }
 
-  if (!statePersentase.kelahiran.findMany.data || !statePersentase.kematian.findMany.data) {
-    return (
-      <Stack>
-        <Skeleton h={500} />
-      </Stack>
-    );
-  }
 
-  const selectedYearData = chartData.find(d => d.tahun === selectedYear);
+     dataTahunan[tahun].totalKelahiran += 1;
+     dataTahunan[tahun].data[bulanIndex].kelahiran += 1;
+   });
 
-  return (
-    <Paper bg={colors['white-1']} p="md">
-      <Stack gap={"xs"}>
-        <Title order={3} mb="md">Statistik Kelahiran & Kematian</Title>
-        <Box>
-          <Flex gap={"xs"}>
-            <Box>
-              <ActionIcon size={30} color={colors['blue-button']} onClick={() => router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran')}>
-                <IconBabyCarriage size={30} color={colors['white-1']} />
-              </ActionIcon>
-            </Box>
-            <Box>
-              <ActionIcon size={30} color={colors['blue-button']} onClick={() => router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian')} >
-                <IconGrave2 size={30} color={colors['white-1']} />
-              </ActionIcon>
-            </Box>
-          </Flex>
-        </Box>
-      </Stack>
 
-      {chartData.length === 0 ? (
-        <Text c="dimmed" ta="center" py="xl">
-          Belum ada data yang tersedia untuk ditampilkan
-        </Text>
-      ) : (
-        <>
-          {/* Year Selector */}
-          <Box mb="md" style={{ maxWidth: '200px' }}>
-            <Select
-              label="Pilih Tahun"
-              placeholder="Pilih Tahun"
-              data={chartData.map((item) => ({
-                value: item.tahun,
-                label: item.tahun
-              }))}
-              value={selectedYear}
-              onChange={(value) => setSelectedYear(value || '')}
-              size="xs"
-            />
-          </Box>
+   // Proses kematian
+   kematian?.forEach((item: any) => {
+     const date = new Date(item.tanggal);
+     const tahun = date.getFullYear().toString();
+     const bulanIndex = date.getMonth();
 
-          {/* Main Chart */}
-          <Center>
-            <Box h={400}>
-              <BarChart
-                width={isMobile ? window.innerWidth * 0.9 : isTablet ? 700 : 800}
-                height={350}
-                data={chartData}
-                margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
-              >
-                <XAxis dataKey="tahun" />
-                <YAxis />
-                <Tooltip content={<CustomTooltip />} />
-                <Legend />
-                <Bar dataKey="totalKelahiran" name="Total Kelahiran" fill="#4dabf7" />
-                <Bar dataKey="totalKematian" name="Total Kematian" fill="#f03e3e" />
-              </BarChart>
-            </Box>
-          </Center>
 
-          {/* Yearly Breakdown */}
-          {selectedYearData && (
-            <Box mt="xl">
-              <Title order={4} mb="md">Rincian Tahun {selectedYear}</Title>
-              <Table striped withTableBorder>
-                <Table.Thead>
-                  <Table.Tr>
-                    <Table.Th>Bulan</Table.Th>
-                    <Table.Th ta="right">Kelahiran</Table.Th>
-                    <Table.Th ta="right">Kematian</Table.Th>
-                  </Table.Tr>
-                </Table.Thead>
-                <Table.Tbody>
-                  {selectedYearData.data.map((item) => (
-                    <Table.Tr key={item.id}>
-                      <Table.Td>{item.bulan}</Table.Td>
-                      <Table.Td ta="right">{formatNumber(item.kelahiran)}</Table.Td>
-                      <Table.Td ta="right">{formatNumber(item.kematian)}</Table.Td>
-                    </Table.Tr>
-                  ))}
-                  <Table.Tr style={{ fontWeight: 'bold' }}>
-                    <Table.Td>Total</Table.Td>
-                    <Table.Td ta="right">{formatNumber(selectedYearData.totalKelahiran)}</Table.Td>
-                    <Table.Td ta="right">{formatNumber(selectedYearData.totalKematian)}</Table.Td>
-                  </Table.Tr>
-                </Table.Tbody>
-              </Table>
-            </Box>
-          )}
-        </>
-      )}
-    </Paper>
-  );
+     if (!dataTahunan[tahun]) {
+       dataTahunan[tahun] = {
+         tahun,
+         totalKelahiran: 0,
+         totalKematian: 0,
+         data: namaBulan.map((nama, idx) => ({
+           id: `${tahun}-${idx + 1}`,
+           bulan: nama,
+           kelahiran: 0,
+           kematian: 0
+         }))
+       };
+     }
+
+
+     dataTahunan[tahun].totalKematian += 1;
+     dataTahunan[tahun].data[bulanIndex].kematian += 1;
+   });
+
+
+   return Object.values(dataTahunan).sort((a, b) => parseInt(a.tahun) - parseInt(b.tahun));
+ };
+
+
+ const statePersentase = useProxy(persentasekelahiran);
+ const [chartData, setChartData] = useState<DataTahunan[]>([]);
+ const [selectedYear, setSelectedYear] = useState<string | null>(null);
+
+
+ const formatNumber = (num: number) => new Intl.NumberFormat('id-ID').format(num);
+
+
+ const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
+   if (active && payload && payload.length) {
+     return (
+       <Paper p="sm" shadow="md" withBorder radius="md">
+         <Text size="sm" fw={600}>Tahun {label}</Text>
+         <Text size="sm" c="blue.6">Kelahiran: {formatNumber(payload[0].value)}</Text>
+         <Text size="sm" c="red.6">Kematian: {formatNumber(payload[1].value)}</Text>
+       </Paper>
+     );
+   }
+   return null;
+ };
+
+
+ useShallowEffect(() => {
+   statePersentase.kelahiran.findMany.load(1, 1000);
+   statePersentase.kematian.findMany.load(1, 1000);
+ }, []);
+
+
+ useEffect(() => {
+   if (statePersentase.kelahiran.findMany.data && statePersentase.kematian.findMany.data) {
+     const hasil = countByYearAndMonth(
+       statePersentase.kelahiran.findMany.data,
+       statePersentase.kematian.findMany.data
+     );
+
+
+     setChartData(hasil);
+     setSelectedYear(hasil[0]?.tahun || null);
+   }
+ }, [statePersentase.kelahiran.findMany.data, statePersentase.kematian.findMany.data]);
+
+
+ if (!statePersentase.kelahiran.findMany.data || !statePersentase.kematian.findMany.data) {
+   return <Skeleton h={400} radius="lg" />;
+ }
+
+
+ const selectedYearData = chartData.find(d => d.tahun === selectedYear);
+
+
+ return (
+   <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+     <Stack gap="lg">
+       <Flex justify="space-between" align="center">
+         <Title order={3} fw={700}>Statistik Kelahiran & Kematian</Title>
+         <Flex gap="sm">
+           <MantineTooltip label="Tambah Data Kelahiran" withArrow>
+             <ActionIcon size="lg" radius="xl" color="blue.6" onClick={() => router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran')}>
+               <IconBabyCarriage size={22} />
+             </ActionIcon>
+           </MantineTooltip>
+           <MantineTooltip label="Tambah Data Kematian" withArrow>
+             <ActionIcon size="lg" radius="xl" color="red.6" onClick={() => router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian')}>
+               <IconGrave2 size={22} />
+             </ActionIcon>
+           </MantineTooltip>
+         </Flex>
+       </Flex>
+
+
+       {chartData.length === 0 ? (
+         <Center py="xl">
+           <Text c="dimmed" fs="italic">Belum ada data untuk ditampilkan</Text>
+         </Center>
+       ) : (
+         <>
+           <Box maw={220}>
+             <Select
+               label="Pilih Tahun"
+               placeholder="Pilih tahun data"
+               data={chartData.map((item) => ({ value: item.tahun, label: item.tahun }))}
+               value={selectedYear}
+               onChange={(value) => setSelectedYear(value || null)}
+               size="sm"
+               radius="md"
+             />
+           </Box>
+
+
+           <Box h={360}>
+             <ResponsiveContainer width="100%" height="100%">
+               <BarChart data={chartData} margin={{ top: 20, right: 30, left: 0, bottom: 10 }}>
+                 <XAxis dataKey="tahun" />
+                 <YAxis />
+                 <Tooltip content={<CustomTooltip />} />
+                 <Legend />
+                 <Bar dataKey="totalKelahiran" name="Kelahiran" fill="#4dabf7" radius={[6, 6, 0, 0]} />
+                 <Bar dataKey="totalKematian" name="Kematian" fill="#f03e3e" radius={[6, 6, 0, 0]} />
+               </BarChart>
+             </ResponsiveContainer>
+           </Box>
+
+
+           {selectedYearData && (
+             <Box>
+               <Flex align="center" gap="sm" mb="md">
+                 <Title order={4} fw={600}>Rincian Tahun {selectedYear}</Title>
+                 <Badge variant="light" color="blue">{formatNumber(selectedYearData.totalKelahiran)} kelahiran</Badge>
+                 <Badge variant="light" color="red">{formatNumber(selectedYearData.totalKematian)} kematian</Badge>
+               </Flex>
+               <Table striped withTableBorder highlightOnHover>
+                 <Table.Thead>
+                   <Table.Tr>
+                     <Table.Th>Bulan</Table.Th>
+                     <Table.Th ta="right">Kelahiran</Table.Th>
+                     <Table.Th ta="right">Kematian</Table.Th>
+                   </Table.Tr>
+                 </Table.Thead>
+                 <Table.Tbody>
+                   {selectedYearData.data.length > 0 ? (
+                     <>
+                       {selectedYearData.data.map((item) => (
+                         <Table.Tr key={item.id}>
+                           <Table.Td>{item.bulan}</Table.Td>
+                           <Table.Td ta="right">{formatNumber(item.kelahiran)}</Table.Td>
+                           <Table.Td ta="right">{formatNumber(item.kematian)}</Table.Td>
+                         </Table.Tr>
+                       ))}
+                       <Table.Tr style={{ fontWeight: 'bold' }}>
+                         <Table.Td>Total</Table.Td>
+                         <Table.Td ta="right">{formatNumber(selectedYearData.totalKelahiran)}</Table.Td>
+                         <Table.Td ta="right">{formatNumber(selectedYearData.totalKematian)}</Table.Td>
+                       </Table.Tr>
+                     </>
+                   ) : (
+                     <Table.Tr>
+                       <Table.Td colSpan={3} ta="center" c="dimmed">Tidak ada rincian bulanan</Table.Td>
+                     </Table.Tr>
+                   )}
+                 </Table.Tbody>
+               </Table>
+             </Box>
+           )}
+         </>
+       )}
+     </Stack>
+   </Paper>
+ );
 }
 
-export default PersentaseDataKelahiranKematian;
+
+export default PersentaseDataKelahiranKematian;

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/[id]/edit/page.tsx

@@ -4,7 +4,18 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import infoWabahPenyakit from '@/app/admin/(dashboard)/_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -12,11 +23,10 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-
 function EditInfoWabahPenyakit() {
-  const infoWabahPenyakitState = useProxy(infoWabahPenyakit)
+  const infoWabahPenyakitState = useProxy(infoWabahPenyakit);
   const router = useRouter();
-  const params = useParams()
+  const params = useParams();
 
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
@@ -25,7 +35,7 @@ function EditInfoWabahPenyakit() {
     deskripsiSingkat: infoWabahPenyakitState.edit.form.deskripsiSingkat || '',
     deskripsi: infoWabahPenyakitState.edit.form.deskripsiLengkap || '',
     imageId: infoWabahPenyakitState.edit.form.imageId || '',
-  })
+  });
 
   useEffect(() => {
     const loadInfoWabahPenyakit = async () => {
@@ -47,8 +57,8 @@ function EditInfoWabahPenyakit() {
           }
         }
       } catch (error) {
-        console.error("Error loading program kesehatan:", error);
-        toast.error("Gagal memuat data program kesehatan");
+        console.error('Error loading info wabah penyakit:', error);
+        toast.error('Gagal memuat data info wabah penyakit');
       }
     };
 
@@ -70,115 +80,143 @@ function EditInfoWabahPenyakit() {
         const uploaded = res.data?.data;
 
         if (!uploaded?.id) {
-          return toast.error("Gagal upload gambar");
+          return toast.error('Gagal upload gambar');
         }
 
         infoWabahPenyakitState.edit.form.imageId = uploaded.id;
       }
 
       await infoWabahPenyakitState.edit.update();
-      toast.success("Info wabah penyakit berhasil diperbarui!");
-      router.push("/admin/kesehatan/info-wabah-penyakit");
+      toast.success('Info wabah penyakit berhasil diperbarui!');
+      router.push('/admin/kesehatan/info-wabah-penyakit');
     } catch (error) {
-      console.error("Error updating info wabah penyakit:", error);
-      toast.error("Gagal memuat data info wabah penyakit");
+      console.error('Error updating info wabah penyakit:', error);
+      toast.error('Terjadi kesalahan saat memperbarui info wabah penyakit');
     }
-  }
+  };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Stack gap={"xs"}>
-        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-          <Stack gap="xs">
-            <Title order={3}>Edit Info Wabah Penyakit</Title>
-            <TextInput
-              value={formData.name}
-              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
-            />
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Info Wabah Penyakit
+        </Title>
+      </Group>
 
-            <TextInput
-              value={formData.deskripsiSingkat}
-              onChange={(e) => setFormData({ ...formData, deskripsiSingkat: e.target.value })}
-              label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
-              placeholder="masukkan deskripsi"
-            />
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label="Judul"
+            placeholder="Masukkan judul"
+            required
+          />
 
-            <Box>
-              <Text fz="sm" fw="bold">Deskripsi</Text>
-              <EditEditor
-                value={formData.deskripsi}
-                onChange={(val) => setFormData({ ...formData, deskripsi: val })}
-              />
-            </Box>
-            <Box>
-              <Text fz={"md"} fw={"bold"}>Gambar</Text>
-              <Box>
-                <Dropzone
-                  onDrop={(files) => {
-                    const selectedFile = files[0]; // Ambil file pertama
-                    if (selectedFile) {
-                      setFile(selectedFile);
-                      setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                    }
+          <TextInput
+            value={formData.deskripsiSingkat}
+            onChange={(e) => setFormData({ ...formData, deskripsiSingkat: e.target.value })}
+            label="Deskripsi Singkat"
+            placeholder="Masukkan deskripsi singkat"
+            required
+          />
+
+          <Box>
+            <Text fz="sm" fw="bold">
+              Deskripsi
+            </Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+            />
+          </Box>
+
+          <Box>
+            <Text fz="sm" fw="bold">
+              Gambar
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+            >
+              <Group justify="center" gap="xl" mih={200} style={{ pointerEvents: 'none' }}>
+                <Dropzone.Accept>
+                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+
+                <div>
+                  <Text size="xl" inline>
+                    Drag gambar ke sini atau klik untuk pilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Maksimal 5MB dan harus format gambar
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
+
+            {previewImage && (
+              <Box mt="sm">
+                <Image
+                  src={previewImage}
+                  alt="Preview"
+                  style={{
+                    maxWidth: '100%',
+                    maxHeight: '200px',
+                    objectFit: 'contain',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
                   }}
-                  onReject={() => toast.error('File tidak valid.')}
-                  maxSize={5 * 1024 ** 2} // Maks 5MB
-                  accept={{ 'image/*': [] }}
-                >
-                  <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                    <Dropzone.Accept>
-                      <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                    </Dropzone.Accept>
-                    <Dropzone.Reject>
-                      <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                    </Dropzone.Reject>
-                    <Dropzone.Idle>
-                      <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                    </Dropzone.Idle>
-
-                    <div>
-                      <Text size="xl" inline>
-                        Drag gambar ke sini atau klik untuk pilih file
-                      </Text>
-                      <Text size="sm" c="dimmed" inline mt={7}>
-                        Maksimal 5MB dan harus format gambar
-                      </Text>
-                    </div>
-                  </Group>
-                </Dropzone>
-
-                {/* Tampilkan preview kalau ada */}
-                {previewImage && (
-                  <Box mt="sm">
-                    <Image
-                      src={previewImage}
-                      alt="Preview"
-                      style={{
-                        maxWidth: '100%',
-                        maxHeight: '200px',
-                        objectFit: 'contain',
-                        borderRadius: '8px',
-                        border: '1px solid #ddd',
-                      }}
-                    />
-                  </Box>
-                )}
-
+                />
               </Box>
-            </Box>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            )}
+          </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>
-          </Stack>
-        </Paper>
-      </Stack>
-    </Box >
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/[id]/page.tsx

@@ -1,7 +1,17 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image, Skeleton } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import {
+  Box,
+  Button,
+  Paper,
+  Stack,
+  Text,
+  Skeleton,
+  Tooltip,
+  Group,
+  Image,
+} from '@mantine/core';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import infoWabahPenyakit from '../../../_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
@@ -10,86 +20,135 @@ import { useShallowEffect } from '@mantine/hooks';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 
 function DetailInfoWabahPenyakit() {
-  const infoWabahPenyakitState = useProxy(infoWabahPenyakit)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const state = useProxy(infoWabahPenyakit);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
   const router = useRouter();
-  const params = useParams()
+  const params = useParams();
 
   useShallowEffect(() => {
-    infoWabahPenyakitState.findUnique.load(params?.id as string)
-  }, [])
+    state.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      infoWabahPenyakitState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/kesehatan/info-wabah-penyakit")
+      state.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push('/admin/kesehatan/info-wabah-penyakit');
     }
-  }
+  };
 
-  if (!infoWabahPenyakitState.findUnique.data) {
+  if (!state.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={400} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = state.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Info Wabah Penyakit</Text>
-          {infoWabahPenyakitState.findUnique.data ? (
-            <Paper bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Judul</Text>
-                  <Text fz={"lg"}>{infoWabahPenyakitState.findUnique.data.name}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Deskripsi Singkat</Text>
-                  <Text fz={"lg"}>{infoWabahPenyakitState.findUnique.data.deskripsiSingkat}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: infoWabahPenyakitState.findUnique.data.deskripsiLengkap }} />
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                  <Image src={infoWabahPenyakitState.findUnique.data.image?.link} alt="gambar" />
-                </Box>
-                <Box>
-                  <Flex gap={"xs"}>
-                    <Button color="red" onClick={() => {
-                      if (infoWabahPenyakitState.findUnique.data) {
-                        setSelectedId(infoWabahPenyakitState.findUnique.data.id)
-                        setModalHapus(true)
-                      }
+    <Box py={10}>
+      {/* Tombol Back */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Wrapper Detail */}
+      <Paper
+        withBorder
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Info Wabah Penyakit
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Judul</Text>
+                <Text fz="md" c="dimmed">{data.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Deskripsi Singkat</Text>
+                <Text fz="md" c="dimmed">{data.deskripsiSingkat || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Deskripsi Lengkap</Text>
+                <Text
+                  fz="md"
+                  c="dimmed"
+                  dangerouslySetInnerHTML={{ __html: data.deskripsiLengkap }}
+                />
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                {data.image?.link ? (
+                  <Image
+                    src={data.image.link}
+                    alt="gambar wabah"
+                    radius="md"
+                    mt="xs"
+                  />
+                ) : (
+                  <Text fz="md" c="dimmed">-</Text>
+                )}
+              </Box>
+
+              {/* Aksi */}
+              <Group gap="sm">
+                <Tooltip label="Hapus Data" withArrow position="top">
+                  <Button
+                    color="red"
+                    onClick={() => {
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                      disabled={infoWabahPenyakitState.delete.loading || !infoWabahPenyakitState.findUnique.data}
-                    >
-                      <IconX size={20} />
-                    </Button>
-                    <Button onClick={() => router.push(`/admin/kesehatan/info-wabah-penyakit/${infoWabahPenyakitState.findUnique.data?.id}/edit`)} color="green">
-                      <IconEdit size={20} />
-                    </Button>
-                  </Flex>
-                </Box>
-              </Stack>
-            </Paper>
-          ) : null}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconTrash size={20} />
+                  </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Data" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() =>
+                      router.push(
+                        `/admin/kesehatan/info-wabah-penyakit/${data.id}/edit`
+                      )
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
-      {/* Modal Hapus */}
+      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/create/page.tsx

@@ -1,7 +1,18 @@
 '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';
@@ -18,15 +29,12 @@ function CreateInfoWabahPenyakit() {
   const [file, setFile] = useState<File | null>(null);
 
   const resetForm = () => {
-    // Reset state di valtio
     infoWabahPenyakitState.create.form = {
       name: "",
       deskripsiSingkat: "",
       deskripsiLengkap: "",
       imageId: "",
     };
-
-    // Reset state lokal
     setPreviewImage(null);
     setFile(null);
   };
@@ -36,7 +44,6 @@ function CreateInfoWabahPenyakit() {
       return toast.warn("Pilih file gambar terlebih dahulu");
     }
 
-    // Upload gambar dulu
     const res = await ApiFetch.api.fileStorage.create.post({
       file,
       name: file.name,
@@ -47,34 +54,50 @@ function CreateInfoWabahPenyakit() {
       return toast.error("Gagal upload gambar");
     }
 
-    // Simpan ID gambar ke form
     infoWabahPenyakitState.create.form.imageId = uploaded.id;
-
-    // Submit data berita
     await infoWabahPenyakitState.create.create();
 
-    // Reset form setelah submit
     resetForm();
     router.push("/admin/kesehatan/info-wabah-penyakit")
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Create Info Wabah Penyakit</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Info Wabah Penyakit
+        </Title>
+      </Group>
+
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
             value={infoWabahPenyakitState.create.form.name}
             onChange={(val) => {
               infoWabahPenyakitState.create.form.name = val.target.value;
             }}
             label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
+            placeholder="Masukkan judul"
+            required
           />
 
           <TextInput
@@ -83,7 +106,8 @@ function CreateInfoWabahPenyakit() {
               infoWabahPenyakitState.create.form.deskripsiSingkat = val.target.value;
             }}
             label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
-            placeholder="masukkan deskripsi"
+            placeholder="Masukkan deskripsi singkat"
+            required
           />
 
           <Box>
@@ -95,65 +119,74 @@ function CreateInfoWabahPenyakit() {
               }}
             />
           </Box>
+
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fz="sm" fw="bold">Gambar</Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+            >
+              <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                <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>
+                <div>
+                  <Text size="xl" inline>
+                    Drag gambar ke sini atau klik untuk pilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Maksimal 5MB dan harus format gambar
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
 
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-
-            </Box>
+            {previewImage && (
+              <Box mt="sm">
+                <Image
+                  src={previewImage}
+                  alt="Preview"
+                  style={{
+                    maxWidth: '100%',
+                    maxHeight: '200px',
+                    objectFit: 'contain',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
+                  }}
+                />
+              </Box>
+            )}
           </Box>
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/page.tsx

@@ -1,8 +1,26 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
-import JudulList from '../../_com/judulList';
+import {
+  Box,
+  Button,
+  Center,
+  Image,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+  Group,
+} from '@mantine/core';
+import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
@@ -14,9 +32,10 @@ function InfoWabahPenyakit() {
   const [search, setSearch] = useState("");
   return (
     <Box>
+      {/* Header Search */}
       <HeaderSearch
         title='Info Wabah Penyakit'
-        placeholder='pencarian'
+        placeholder='Cari judul atau deskripsi...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -46,64 +65,99 @@ function ListInfoWabahPenyakit({ search }: { search: string }) {
 
   if (loading || !data) {
     return (
-      <Box py={10}>
-        <Skeleton h={500} />
-      </Box>
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
     )
   }
+
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Info Wabah Penyakit'
-            href='/admin/kesehatan/info-wabah-penyakit/create'
-          />
-          <Box style={{ overflowX: "auto" }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Judul</TableTh>
-                  <TableTh>Deskripsi Singkat</TableTh>
-                  <TableTh>Image</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        {/* Judul + Tombol Tambah */}
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Info Wabah Penyakit</Title>
+          <Tooltip label="Tambah Info Wabah" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/kesehatan/info-wabah-penyakit/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        {/* Tabel */}
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>Judul</TableTh>
+                <TableTh>Deskripsi Singkat</TableTh>
+                <TableTh>Image</TableTh>
+                <TableTh>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
-                      </Box>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.name}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{item.deskripsiSingkat}</Text>
-                      </Box>
+                      <Text truncate fz="sm" c="dimmed">
+                        {item.deskripsiSingkat}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Image w={100} src={item.image?.link} alt="image" />
+                      <Image w={100} src={item.image?.link} alt="image" radius="md" />
                     </TableTd>
                     <TableTd>
-                      <Button onClick={() => router.push(`/admin/kesehatan/info-wabah-penyakit/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/kesehatan/info-wabah-penyakit/${item.id}`)}
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">
+                        Tidak ada data info wabah penyakit yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+
+      {/* Pagination */}
       <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)/kesehatan/kontak-darurat/[id]/edit/page.tsx

@@ -4,7 +4,18 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import kontakDarurat from '@/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -13,11 +24,10 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 
-
 function EditKontakDarurat() {
-  const kontakDaruratState = useProxy(kontakDarurat)
+  const kontakDaruratState = useProxy(kontakDarurat);
   const router = useRouter();
-  const params = useParams()
+  const params = useParams();
 
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
@@ -25,10 +35,10 @@ function EditKontakDarurat() {
     name: kontakDaruratState.edit.form.name || '',
     deskripsi: kontakDaruratState.edit.form.deskripsi || '',
     imageId: kontakDaruratState.edit.form.imageId || '',
-  })
+  });
 
   useEffect(() => {
-    const loadProgramKesehatan = async () => {
+    const loadKontakDarurat = async () => {
       const id = params?.id as string;
       if (!id) return;
 
@@ -46,12 +56,12 @@ function EditKontakDarurat() {
           }
         }
       } catch (error) {
-        console.error("Error loading program kesehatan:", error);
-        toast.error("Gagal memuat data program kesehatan");
+        console.error("Error loading kontak darurat:", error);
+        toast.error("Gagal memuat data kontak darurat");
       }
     };
 
-    loadProgramKesehatan();
+    loadKontakDarurat();
   }, [params?.id]);
 
   const handleSubmit = async () => {
@@ -79,95 +89,116 @@ function EditKontakDarurat() {
       router.push("/admin/kesehatan/kontak-darurat");
     } catch (error) {
       console.error("Error updating kontak darurat:", error);
-      toast.error("Gagal memuat data kontak darurat");
+      toast.error("Terjadi kesalahan saat memperbarui kontak darurat");
     }
-  }
+  };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Stack gap={"xs"}>
-        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-          <Stack gap="xs">
-            <Title order={3}>Edit Kontak Darurat</Title>
-            <TextInput
-              value={formData.name}
-              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Kontak Darurat
+        </Title>
+      </Group>
+
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label="Judul"
+            placeholder="Masukkan judul"
+            required
+          />
+
+          <Box>
+            <Text fz="sm" fw="bold">Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
             />
-            <Box>
-              <Text fz="sm" fw="bold">Deskripsi</Text>
-              <EditEditor
-                value={formData.deskripsi}
-                onChange={(val) => setFormData({ ...formData, deskripsi: val })}
-              />
-            </Box>
-            <Box>
-              <Text fz={"md"} fw={"bold"}>Gambar</Text>
-              <Box>
-                <Dropzone
-                  onDrop={(files) => {
-                    const selectedFile = files[0]; // Ambil file pertama
-                    if (selectedFile) {
-                      setFile(selectedFile);
-                      setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                    }
+          </Box>
+
+          <Box>
+            <Text fz="sm" fw="bold">Gambar</Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+            >
+              <Group justify="center" gap="xl" mih={200} 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="lg" fw={500}>Drag gambar ke sini atau klik untuk pilih file</Text>
+                  <Text size="sm" c="dimmed" mt={5}>Maksimal 5MB dan format gambar</Text>
+                </div>
+              </Group>
+            </Dropzone>
+
+            {previewImage && (
+              <Box mt="sm">
+                <Image
+                  src={previewImage}
+                  alt="Preview"
+                  style={{
+                    maxWidth: '100%',
+                    maxHeight: '200px',
+                    objectFit: 'contain',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
                   }}
-                  onReject={() => toast.error('File tidak valid.')}
-                  maxSize={5 * 1024 ** 2} // Maks 5MB
-                  accept={{ 'image/*': [] }}
-                >
-                  <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                    <Dropzone.Accept>
-                      <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                    </Dropzone.Accept>
-                    <Dropzone.Reject>
-                      <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                    </Dropzone.Reject>
-                    <Dropzone.Idle>
-                      <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                    </Dropzone.Idle>
-
-                    <div>
-                      <Text size="xl" inline>
-                        Drag gambar ke sini atau klik untuk pilih file
-                      </Text>
-                      <Text size="sm" c="dimmed" inline mt={7}>
-                        Maksimal 5MB dan harus format gambar
-                      </Text>
-                    </div>
-                  </Group>
-                </Dropzone>
-
-                {/* Tampilkan preview kalau ada */}
-                {previewImage && (
-                  <Box mt="sm">
-                    <Image
-                      src={previewImage}
-                      alt="Preview"
-                      style={{
-                        maxWidth: '100%',
-                        maxHeight: '200px',
-                        objectFit: 'contain',
-                        borderRadius: '8px',
-                        border: '1px solid #ddd',
-                      }}
-                    />
-                  </Box>
-                )}
+                />
               </Box>
-            </Box>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            )}
+          </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>
-          </Stack>
-        </Paper>
-      </Stack>
-    </Box >
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
   );
 }
 

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

@@ -1,8 +1,8 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -10,82 +10,129 @@ import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import kontakDarurat from '../../../_state/kesehatan/kontak-darurat/kontakDarurat';
 
 function DetailKontakDarurat() {
-  const kontakDaruratState = useProxy(kontakDarurat)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const state = useProxy(kontakDarurat);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
   const router = useRouter();
-  const params = useParams()
+  const params = useParams();
 
   useShallowEffect(() => {
-    kontakDaruratState.findUnique.load(params?.id as string)
-  }, [])
+    state.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      kontakDaruratState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/kesehatan/kontak-darurat")
+      state.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/kesehatan/kontak-darurat");
     }
-  }
+  };
 
-  if (!kontakDaruratState.findUnique.data) {
+  if (!state.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={400} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = state.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Kontak Darurat</Text>
-          {kontakDaruratState.findUnique.data ? (
-            <Paper bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Judul</Text>
-                  <Text fz={"lg"}>{kontakDaruratState.findUnique.data.name}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: kontakDaruratState.findUnique.data.deskripsi }} />
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                  <Image src={kontakDaruratState.findUnique.data.image?.link} alt="gambar" />
-                </Box>
-                <Box>
-                  <Flex gap={"xs"}>
-                    <Button color="red" onClick={() => {
-                      if (kontakDaruratState.findUnique.data) {
-                        setSelectedId(kontakDaruratState.findUnique.data.id)
-                        setModalHapus(true)
-                      }
+    <Box py={10}>
+      {/* Tombol Back */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Wrapper Detail */}
+      <Paper
+        withBorder
+        w={{ base: "100%", md: "50%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Kontak Darurat
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Judul</Text>
+                <Text fz="md" c="dimmed">{data.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Text
+                  fz="md"
+                  c="dimmed"
+                  dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
+                />
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                {data.image?.link ? (
+                  <Image
+                    src={data.image.link}
+                    alt="gambar"
+                    radius="md"
+                    maw={300}
+                  />
+                ) : (
+                  <Text fz="md" c="dimmed">-</Text>
+                )}
+              </Box>
+
+              {/* Aksi */}
+              <Group gap="sm">
+                <Tooltip label="Hapus Data" withArrow position="top">
+                  <Button
+                    color="red"
+                    onClick={() => {
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                      disabled={kontakDaruratState.delete.loading || !kontakDaruratState.findUnique.data}
-                    >
-                      <IconX size={20} />
-                    </Button>
-                    <Button onClick={() => router.push(`/admin/kesehatan/kontak-darurat/${kontakDaruratState.findUnique.data?.id}/edit`)} color="green">
-                      <IconEdit size={20} />
-                    </Button>
-                  </Flex>
-                </Box>
-              </Stack>
-            </Paper>
-          ) : null}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                    disabled={state.delete.loading}
+                  >
+                    <IconTrash size={20} />
+                  </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Data" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() =>
+                      router.push(`/admin/kesehatan/kontak-darurat/${data.id}/edit`)
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
-      {/* Modal Hapus */}
+      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}

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

@@ -1,8 +1,24 @@
 '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 { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+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';
 import { toast } from 'react-toastify';
@@ -11,18 +27,17 @@ import CreateEditor from '../../../_com/createEditor';
 import kontakDarurat from '../../../_state/kesehatan/kontak-darurat/kontakDarurat';
 import { Dropzone } from '@mantine/dropzone';
 
-
 function CreateKontakDarurat() {
   const router = useRouter();
-  const kontakDaruratState = useProxy(kontakDarurat)
+  const kontakDaruratState = useProxy(kontakDarurat);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
 
   const resetForm = () => {
     kontakDaruratState.create.form = {
-      name: "",
-      deskripsi: "",
-      imageId: "",
+      name: '',
+      deskripsi: '',
+      imageId: '',
     };
     setPreviewImage(null);
     setFile(null);
@@ -30,7 +45,7 @@ function CreateKontakDarurat() {
 
   const handleSubmit = async () => {
     if (!file) {
-      return toast.warn("Pilih file gambar terlebih dahulu");
+      return toast.warn('Pilih file gambar terlebih dahulu');
     }
 
     const res = await ApiFetch.api.fileStorage.create.post({
@@ -40,7 +55,7 @@ function CreateKontakDarurat() {
 
     const uploaded = res.data?.data;
     if (!uploaded?.id) {
-      return toast.error("Gagal upload gambar");
+      return toast.error('Gagal upload gambar');
     }
 
     kontakDaruratState.create.form.imageId = uploaded.id;
@@ -48,27 +63,46 @@ function CreateKontakDarurat() {
     await kontakDaruratState.create.create();
 
     resetForm();
-    router.push("/admin/kesehatan/kontak-darurat")
-  }
+    router.push('/admin/kesehatan/kontak-darurat');
+  };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Create Kontak Darurat</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Kontak Darurat
+        </Title>
+      </Group>
 
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
             value={kontakDaruratState.create.form.name}
             onChange={(val) => {
               kontakDaruratState.create.form.name = val.target.value;
             }}
             label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
+            placeholder="Masukkan judul"
+            required
           />
 
           <Box>
@@ -80,64 +114,91 @@ function CreateKontakDarurat() {
               }}
             />
           </Box>
+
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
+            <Text fz="sm" fw="bold">Gambar</Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+            >
+              <Group
+                justify="center"
+                gap="xl"
+                mih={220}
+                style={{ pointerEvents: 'none' }}
               >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
-
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
+                <Dropzone.Accept>
+                  <IconUpload
+                    size={52}
+                    color="var(--mantine-color-blue-6)"
+                    stroke={1.5}
                   />
-                </Box>
-              )}
-            </Box>
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX
+                    size={52}
+                    color="var(--mantine-color-red-6)"
+                    stroke={1.5}
+                  />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto
+                    size={52}
+                    color="var(--mantine-color-dimmed)"
+                    stroke={1.5}
+                  />
+                </Dropzone.Idle>
+
+                <div>
+                  <Text size="xl" inline>
+                    Drag gambar ke sini atau klik untuk pilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Maksimal 5MB dan harus format gambar
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
+
+            {previewImage && (
+              <Box mt="sm">
+                <Image
+                  src={previewImage}
+                  alt="Preview"
+                  style={{
+                    maxWidth: '100%',
+                    maxHeight: '200px',
+                    objectFit: 'contain',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
+                  }}
+                />
+              </Box>
+            )}
           </Box>
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

@@ -1,26 +1,46 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
-import JudulList from '../../_com/judulList';
-import HeaderSearch from '../../_com/header';
-import { useRouter } from 'next/navigation';
-import { useProxy } from 'valtio/utils';
-import kontakDarurat from '../../_state/kesehatan/kontak-darurat/kontakDarurat';
+import {
+  Box,
+  Button,
+  Center,
+  Image,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../_com/header';
+import kontakDarurat from '../../_state/kesehatan/kontak-darurat/kontakDarurat';
 
 function KontakDarurat() {
   const [search, setSearch] = useState("");
+
   return (
     <Box>
+      {/* Header Search */}
       <HeaderSearch
         title='Kontak Darurat'
-        placeholder='pencarian'
+        placeholder='Cari judul atau deskripsi...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
+
       <ListKontakDarurat search={search} />
     </Box>
   );
@@ -30,13 +50,7 @@ function ListKontakDarurat({ search }: { search: string }) {
   const kontakDaruratState = useProxy(kontakDarurat)
   const router = useRouter();
 
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = kontakDaruratState.findMany;
+  const { data, page, totalPages, loading, load } = kontakDaruratState.findMany;
 
   useShallowEffect(() => {
     load(page, 10, search)
@@ -46,65 +60,97 @@ function ListKontakDarurat({ search }: { search: string }) {
 
   if (loading || !data) {
     return (
-      <Box py={10}>
-        <Skeleton h={500} />
-      </Box>
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
     )
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Kontak Darurat'
-            href='/admin/kesehatan/kontak-darurat/create'
-          />
-          <Box style={{ overflowX: "auto" }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Judul</TableTh>
-                  <TableTh>Deskripsi</TableTh>
-                  <TableTh>Image</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        {/* Judul + Tombol Tambah */}
+        <Stack mb="md" gap="sm">
+          <Box display="flex" style={{ justifyContent: "space-between", alignItems: "center" }}>
+            <Title order={4}>Daftar Kontak Darurat</Title>
+            <Tooltip label="Tambah Kontak Darurat" withArrow>
+              <Button
+                leftSection={<IconPlus size={18} />}
+                color="blue"
+                variant="light"
+                onClick={() => router.push('/admin/kesehatan/kontak-darurat/create')}
+              >
+                Tambah Baru
+              </Button>
+            </Tooltip>
+          </Box>
+        </Stack>
+
+        {/* Tabel */}
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>Judul</TableTh>
+                <TableTh>Deskripsi</TableTh>
+                <TableTh>Image</TableTh>
+                <TableTh>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
-                      </Box>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.name}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" lineClamp={1} fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                      </Box>
+                      <Text truncate fz="sm" c="dimmed" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
                     </TableTd>
                     <TableTd>
-                      <Image w={100} src={item.image?.link} alt="image" />
+                      <Image w={100} src={item.image?.link} alt="image" radius="md" />
                     </TableTd>
                     <TableTd>
-                      <Button onClick={() => router.push(`/admin/kesehatan/kontak-darurat/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/kesehatan/kontak-darurat/${item.id}`)}
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada data kontak darurat yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+
+      {/* Pagination */}
       <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)/kesehatan/penanganan-darurat/[id]/edit/page.tsx

@@ -4,7 +4,18 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import penangananDarurat from '@/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -77,97 +88,120 @@ function EditPenangananDarurat() {
       router.push("/admin/kesehatan/penanganan-darurat");
     } catch (error) {
       console.error("Error updating penanganan darurat:", error);
-      toast.error("Gagal memuat data penanganan darurat");
+      toast.error("Gagal memperbarui data penanganan darurat");
     }
   }
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Stack gap={"xs"}>
-        <Paper bg={colors['white-1']} p={"md"} w={{ base: '100%', md: '50%' }}>
-          <Stack gap="xs">
-            <Title order={3}>Edit Penanganan Darurat</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Penanganan Darurat
+        </Title>
+      </Group>
 
-            <TextInput
-              value={formData.name}
-              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label="Judul"
+            placeholder="Masukkan judul"
+            required
+          />
+
+          <Box>
+            <Text fz="sm" fw="bold">Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
             />
+          </Box>
 
-            <Box>
-              <Text fz="sm" fw="bold">Deskripsi</Text>
-              <EditEditor
-                value={formData.deskripsi}
-                onChange={(val) => setFormData({ ...formData, deskripsi: val })}
-              />
-            </Box>
-            <Box>
-              <Text fz={"md"} fw={"bold"}>Gambar</Text>
-              <Box>
-                <Dropzone
-                  onDrop={(files) => {
-                    const selectedFile = files[0]; // Ambil file pertama
-                    if (selectedFile) {
-                      setFile(selectedFile);
-                      setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                    }
+          <Box>
+            <Text fz="sm" fw="bold">Gambar</Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+            >
+              <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                <Dropzone.Accept>
+                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+
+                <div>
+                  <Text size="xl" inline>
+                    Drag gambar ke sini atau klik untuk pilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Maksimal 5MB dan harus format gambar
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
+
+            {previewImage && (
+              <Box mt="sm">
+                <Image
+                  src={previewImage}
+                  alt="Preview"
+                  style={{
+                    maxWidth: '100%',
+                    maxHeight: '200px',
+                    objectFit: 'contain',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
                   }}
-                  onReject={() => toast.error('File tidak valid.')}
-                  maxSize={5 * 1024 ** 2} // Maks 5MB
-                  accept={{ 'image/*': [] }}
-                >
-                  <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                    <Dropzone.Accept>
-                      <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                    </Dropzone.Accept>
-                    <Dropzone.Reject>
-                      <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                    </Dropzone.Reject>
-                    <Dropzone.Idle>
-                      <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                    </Dropzone.Idle>
-
-                    <div>
-                      <Text size="xl" inline>
-                        Drag gambar ke sini atau klik untuk pilih file
-                      </Text>
-                      <Text size="sm" c="dimmed" inline mt={7}>
-                        Maksimal 5MB dan harus format gambar
-                      </Text>
-                    </div>
-                  </Group>
-                </Dropzone>
-
-                {/* Tampilkan preview kalau ada */}
-                {previewImage && (
-                  <Box mt="sm">
-                    <Image
-                      src={previewImage}
-                      alt="Preview"
-                      style={{
-                        maxWidth: '100%',
-                        maxHeight: '200px',
-                        objectFit: 'contain',
-                        borderRadius: '8px',
-                        border: '1px solid #ddd',
-                      }}
-                    />
-                  </Box>
-                )}
+                />
               </Box>
-            </Box>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            )}
+          </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>
-          </Stack>
-        </Paper>
-      </Stack >
-    </Box >
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/[id]/page.tsx

@@ -1,93 +1,134 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip, Image } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
+import { useRouter, useParams } from 'next/navigation';
 import React, { useState } from 'react';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-import penangananDarurat from '../../../_state/kesehatan/penanganan-darurat/penangananDarurat';
 import { useProxy } from 'valtio/utils';
 import { useShallowEffect } from '@mantine/hooks';
-import { useParams } from 'next/navigation';
-import { Skeleton } from '@mantine/core';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import penangananDarurat from '../../../_state/kesehatan/penanganan-darurat/penangananDarurat';
 
 function DetailPenangananDarurat() {
-  const penangananDaruratState = useProxy(penangananDarurat)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const state = useProxy(penangananDarurat);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
   const router = useRouter();
-  const params = useParams()
+  const params = useParams();
 
   useShallowEffect(() => {
-    penangananDaruratState.findUnique.load(params?.id as string)
-  }, [])
+    state.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      penangananDaruratState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/kesehatan/penanganan-darurat")
+      state.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/kesehatan/penanganan-darurat");
     }
+  };
+
+  if (!state.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={500} radius="md" />
+      </Stack>
+    );
   }
 
-  if (!penangananDaruratState.findUnique.data) {
-    return (
-      <Box py={10}>
-        <Skeleton h={500} />
-      </Box>
-    )
-  }
+  const data = state.findUnique.data;
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Penanganan Darurat</Text>
-          {penangananDaruratState.findUnique.data ? (
-            <Paper bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Nama Penanganan Darurat</Text>
-                  <Text fz={"lg"}>{penangananDaruratState.findUnique.data.name}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: penangananDaruratState.findUnique.data.deskripsi }} />
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                  <Image src={penangananDaruratState.findUnique.data.image?.link} alt="gambar" />
-                </Box>
-                <Box>
-                  <Flex gap={"xs"}>
-                    <Button color="red" onClick={() => {
-                      if (penangananDaruratState.findUnique.data) {
-                        setSelectedId(penangananDaruratState.findUnique.data.id)
-                        setModalHapus(true)
-                      }
+    <Box py={10}>
+      {/* Tombol Back */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Wrapper Detail */}
+      <Paper
+        withBorder
+        w={{ base: "100%", md: "50%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Penanganan Darurat
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Nama Penanganan Darurat</Text>
+                <Text fz="md" c="dimmed">{data.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Text
+                  fz="md"
+                  c="dimmed"
+                  dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                />
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                <Image
+                  src={data.image?.link}
+                  alt="gambar penanganan darurat"
+                  radius="md"
+                  mah={250}
+                  fit="contain"
+                />
+              </Box>
+
+              {/* Aksi */}
+              <Group gap="sm">
+                <Tooltip label="Hapus Data" withArrow position="top">
+                  <Button
+                    color="red"
+                    onClick={() => {
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                      disabled={penangananDaruratState.delete.loading || !penangananDaruratState.findUnique.data}>
-                      <IconX size={20} />
-                    </Button>
-                    <Button onClick={() => router.push(`/admin/kesehatan/penanganan-darurat/${penangananDaruratState.findUnique.data?.id}/edit`)} color="green">
-                      <IconEdit size={20} />
-                    </Button>
-                  </Flex>
-                </Box>
-              </Stack>
-            </Paper>
-          ) : null}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconTrash size={20} />
+                  </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Data" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() =>
+                      router.push(`/admin/kesehatan/penanganan-darurat/${data.id}/edit`)
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
-      {/* Modal Hapus */}
+      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/create/page.tsx

@@ -1,9 +1,25 @@
 'use client'
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
-import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import {
+  IconArrowBack,
+  IconPhoto,
+  IconUpload,
+  IconX,
+} from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
@@ -11,18 +27,17 @@ import { useProxy } from 'valtio/utils';
 import CreateEditor from '../../../_com/createEditor';
 import penangananDarurat from '../../../_state/kesehatan/penanganan-darurat/penangananDarurat';
 
-
 function CreatePenangananDarurat() {
   const router = useRouter();
-  const penangananDaruratState = useProxy(penangananDarurat)
+  const penangananDaruratState = useProxy(penangananDarurat);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
 
   const resetForm = () => {
     penangananDaruratState.create.form = {
-      name: "",
-      deskripsi: "",
-      imageId: "",
+      name: '',
+      deskripsi: '',
+      imageId: '',
     };
     setPreviewImage(null);
     setFile(null);
@@ -30,7 +45,7 @@ function CreatePenangananDarurat() {
 
   const handleSubmit = async () => {
     if (!file) {
-      return toast.warn("Pilih file gambar terlebih dahulu");
+      return toast.warn('Pilih file gambar terlebih dahulu');
     }
 
     const res = await ApiFetch.api.fileStorage.create.post({
@@ -40,7 +55,7 @@ function CreatePenangananDarurat() {
 
     const uploaded = res.data?.data;
     if (!uploaded?.id) {
-      return toast.error("Gagal upload gambar");
+      return toast.error('Gagal upload gambar');
     }
 
     penangananDaruratState.create.form.imageId = uploaded.id;
@@ -48,31 +63,52 @@ function CreatePenangananDarurat() {
     await penangananDaruratState.create.create();
 
     resetForm();
-    router.push("/admin/kesehatan/penanganan-darurat")
-  }
+    router.push('/admin/kesehatan/penanganan-darurat');
+  };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Create Penanganan Darurat</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Penanganan Darurat
+        </Title>
+      </Group>
 
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          {/* Judul */}
           <TextInput
+            label={<Text fw="bold" fz="sm">Judul</Text>}
+            placeholder="Masukkan judul"
             value={penangananDaruratState.create.form.name}
             onChange={(val) => {
               penangananDaruratState.create.form.name = val.target.value;
             }}
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
+            required
           />
 
+          {/* Deskripsi */}
           <Box>
-            <Text fz="sm" fw="bold">Deskripsi</Text>
+            <Text fw="bold" fz="sm">Deskripsi</Text>
             <CreateEditor
               value={penangananDaruratState.create.form.deskripsi}
               onChange={(val) => {
@@ -80,30 +116,49 @@ function CreatePenangananDarurat() {
               }}
             />
           </Box>
+
+          {/* Upload Gambar */}
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Text fw="bold" fz="sm">Gambar</Text>
             <Box>
               <Dropzone
                 onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
+                  const selectedFile = files[0];
                   if (selectedFile) {
                     setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                    setPreviewImage(URL.createObjectURL(selectedFile));
                   }
                 }}
                 onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
+                maxSize={5 * 1024 ** 2}
                 accept={{ 'image/*': [] }}
               >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                <Group
+                  justify="center"
+                  gap="xl"
+                  mih={220}
+                  style={{ pointerEvents: 'none' }}
+                >
                   <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                    <IconUpload
+                      size={52}
+                      color="var(--mantine-color-blue-6)"
+                      stroke={1.5}
+                    />
                   </Dropzone.Accept>
                   <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                    <IconX
+                      size={52}
+                      color="var(--mantine-color-red-6)"
+                      stroke={1.5}
+                    />
                   </Dropzone.Reject>
                   <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                    <IconPhoto
+                      size={52}
+                      color="var(--mantine-color-dimmed)"
+                      stroke={1.5}
+                    />
                   </Dropzone.Idle>
 
                   <div>
@@ -117,7 +172,6 @@ function CreatePenangananDarurat() {
                 </Group>
               </Dropzone>
 
-              {/* Tampilkan preview kalau ada */}
               {previewImage && (
                 <Box mt="sm">
                   <Image
@@ -133,12 +187,24 @@ function CreatePenangananDarurat() {
                   />
                 </Box>
               )}
-
             </Box>
           </Box>
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
+
+          {/* Button Simpan */}
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/page.tsx

@@ -1,8 +1,26 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
-import JudulList from '../../_com/judulList';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Image,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
+import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
@@ -14,100 +32,135 @@ function PenangananDarurat() {
   const [search, setSearch] = useState("");
   return (
     <Box>
+      {/* Header Search */}
       <HeaderSearch
-        title='PenangananDarurat'
-        placeholder='pencarian'
+        title='Penanganan Darurat'
+        placeholder='Cari judul atau deskripsi...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
+
       <ListPenangananDarurat search={search} />
     </Box>
   );
 }
 
 function ListPenangananDarurat({ search }: { search: string }) {
-  const penangananDaruratState = useProxy(penangananDarurat)
+  const state = useProxy(penangananDarurat);
   const router = useRouter();
 
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = penangananDaruratState.findMany;
+  const { data, page, totalPages, loading, load } = state.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+    load(page, 10, search);
+  }, [page, search]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Box py={10}>
-        <Skeleton h={500} />
-      </Box>
-    )
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
+    );
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Penanganan Darurat'
-            href='/admin/kesehatan/penanganan-darurat/create'
-          />
-          <Box style={{ overflowX: "auto" }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Judul</TableTh>
-                  <TableTh>Deskripsi</TableTh>
-                  <TableTh>Image</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        {/* Judul + Tombol Tambah */}
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Penanganan Darurat</Title>
+          <Tooltip label="Tambah Penanganan Darurat" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/kesehatan/penanganan-darurat/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        {/* Tabel */}
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>Judul</TableTh>
+                <TableTh>Deskripsi</TableTh>
+                <TableTh>Gambar</TableTh>
+                <TableTh>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
-                      </Box></TableTd>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.name}
+                      </Text>
+                    </TableTd>
                     <TableTd>
-                      <Box w={100}>
-                        <Text lineClamp={1} truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                      </Box>
+                      <Text
+                        fz="sm"
+                        c="dimmed"
+                        truncate
+                        lineClamp={1}
+                        dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                      />
                     </TableTd>
                     <TableTd>
                       <Image w={100} src={item.image?.link} alt="image" />
                     </TableTd>
                     <TableTd>
-                      <Button onClick={() => router.push(`/admin/kesehatan/penanganan-darurat/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() =>
+                          router.push(`/admin/kesehatan/penanganan-darurat/${item.id}`)
+                        }
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada data penanganan darurat</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+
+      {/* Pagination */}
       <Center>
         <Pagination
           value={page}
-          onChange={(newPage) => load(newPage)} // ini penting!
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>
-  )
+  );
 }
 
 export default PenangananDarurat;

src/app/admin/(dashboard)/kesehatan/posyandu/[id]/edit/page.tsx

@@ -4,7 +4,18 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import posyandustate from '@/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+ Box,
+ Button,
+ Group,
+ Image,
+ Paper,
+ Stack,
+ Text,
+ TextInput,
+ Title,
+ Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -14,185 +25,231 @@ import { useProxy } from 'valtio/utils';
 
 
 function EditPosyandu() {
-  const statePosyandu = useProxy(posyandustate)
-  const router = useRouter();
-  const params = useParams()
+ const statePosyandu = useProxy(posyandustate);
+ const router = useRouter();
+ const params = useParams();
 
-  const [previewImage, setPreviewImage] = useState<string | null>(null);
-  const [file, setFile] = useState<File | null>(null);
-  const [formData, setFormData] = useState({
-    name: statePosyandu.edit.form.name || '',
-    nomor: statePosyandu.edit.form.nomor || '',
-    deskripsi: statePosyandu.edit.form.deskripsi || '',
-    imageId: statePosyandu.edit.form.imageId || '',
-    jadwalPelayanan: statePosyandu.edit.form.jadwalPelayanan || '',
-  });
 
-  useEffect(() => {
-    const loadPosyandu = async () => {
-      const id = params?.id as string;
-      if (!id) return;
+ const [previewImage, setPreviewImage] = useState<string | null>(null);
+ const [file, setFile] = useState<File | null>(null);
+ const [formData, setFormData] = useState({
+   name: statePosyandu.edit.form.name || '',
+   nomor: statePosyandu.edit.form.nomor || '',
+   deskripsi: statePosyandu.edit.form.deskripsi || '',
+   imageId: statePosyandu.edit.form.imageId || '',
+   jadwalPelayanan: statePosyandu.edit.form.jadwalPelayanan || '',
+ });
 
-      try {
-        const data = await statePosyandu.edit.load(id);
-        if (data) {
-          setFormData({
-            name: data.name || '',
-            nomor: data.nomor || '',
-            deskripsi: data.deskripsi || '',
-            imageId: data.imageId || '',
-            jadwalPelayanan: data.jadwalPelayanan || '',
-          });
 
-          if (data?.image?.link) {
-            setPreviewImage(data.image.link);
-          }
-        }
-      } catch (error) {
-        console.error("Error loading posyandu:", error);
-        toast.error("Gagal memuat data posyandu");
-      }
-    }
-    loadPosyandu();
-  }, [params?.id])
+ useEffect(() => {
+   const loadPosyandu = async () => {
+     const id = params?.id as string;
+     if (!id) return;
 
-  const handleSubmit = async () => {
-    try {
-      statePosyandu.edit.form = {
-        ...statePosyandu.edit.form,
-        name: formData.name,
-        nomor: formData.nomor,
-        deskripsi: formData.deskripsi,
-        imageId: formData.imageId,
-        jadwalPelayanan: formData.jadwalPelayanan,
-      }
 
-      if (file) {
-        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
-        const uploaded = res.data?.data;
+     try {
+       const data = await statePosyandu.edit.load(id);
+       if (data) {
+         setFormData({
+           name: data.name || '',
+           nomor: data.nomor || '',
+           deskripsi: data.deskripsi || '',
+           imageId: data.imageId || '',
+           jadwalPelayanan: data.jadwalPelayanan || '',
+         });
 
-        if (!uploaded?.id) {
-          return toast.error("Gagal upload gambar");
-        }
 
-        statePosyandu.edit.form.imageId = uploaded.id;
-      }
+         if (data?.image?.link) {
+           setPreviewImage(data.image.link);
+         }
+       }
+     } catch (error) {
+       console.error("Error loading posyandu:", error);
+       toast.error("Gagal memuat data posyandu");
+     }
+   };
+   loadPosyandu();
+ }, [params?.id]);
 
-      await statePosyandu.edit.update();
-      toast.success("Posyandu berhasil diperbarui!");
-      router.push("/admin/kesehatan/posyandu");
-    } catch (error) {
-      console.error("Error updating posyandu:", error);
-      toast.error("Gagal memuat data posyandu");
-    }
-  }
 
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+ const handleSubmit = async () => {
+   try {
+     statePosyandu.edit.form = {
+       ...statePosyandu.edit.form,
+       ...formData,
+     };
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Posyandu</Title>
-          <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
+     if (file) {
+       const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+       const uploaded = res.data?.data;
 
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
 
-            </Box>
-          </Box>
-          <TextInput
-            value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Posyandu</Text>}
-            placeholder='Masukkan nama posyandu'
-          />
-          <TextInput
-            value={formData.nomor}
-            onChange={(e) => setFormData({ ...formData, nomor: e.target.value })}
-            label={<Text fw={"bold"} fz={"sm"}>Nomor Posyandu</Text>}
-            placeholder='Masukkan nomor posyandu'
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Posyandu</Text>
-            <EditEditor
-              value={formData.deskripsi}
-              onChange={(htmlContent) => {
-                setFormData({ ...formData, deskripsi: htmlContent });
-                statePosyandu.edit.form.deskripsi = htmlContent;
-              }}
-            />
-          </Box>
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Jadwal Pelayanan</Text>
-            <EditEditor
-              value={formData.jadwalPelayanan}
-              onChange={(htmlContent) => {
-                setFormData({ ...formData, jadwalPelayanan: htmlContent });
-                statePosyandu.edit.form.jadwalPelayanan = htmlContent;
-              }}
-            />
-          </Box>
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  );
+       if (!uploaded?.id) {
+         return toast.error("Gagal upload gambar");
+       }
+
+
+       statePosyandu.edit.form.imageId = uploaded.id;
+     }
+
+
+     await statePosyandu.edit.update();
+     toast.success("Posyandu berhasil diperbarui!");
+     router.push("/admin/kesehatan/posyandu");
+   } catch (error) {
+     console.error("Error updating posyandu:", error);
+     toast.error("Terjadi kesalahan saat memperbarui posyandu");
+   }
+ };
+
+
+ return (
+   <Box px={{ base: 'sm', md: 'lg' }} py="md">
+     {/* Tombol Back */}
+     <Group mb="md">
+       <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+           <IconArrowBack color={colors['blue-button']} size={24} />
+         </Button>
+       </Tooltip>
+       <Title order={4} ml="sm" c="dark">
+         Edit Posyandu
+       </Title>
+     </Group>
+
+
+     {/* Card utama */}
+     <Paper
+       w={{ base: '100%', md: '50%' }}
+       bg={colors['white-1']}
+       p="lg"
+       radius="md"
+       shadow="sm"
+       style={{ border: '1px solid #e0e0e0' }}
+     >
+       <Stack gap="md">
+         {/* Upload Gambar */}
+         <Box>
+           <Text fw="bold" fz="sm" mb={6}>
+             Gambar Posyandu
+           </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>
+
+
+         {/* Input Form */}
+         <TextInput
+           label="Nama Posyandu"
+           placeholder="Masukkan nama posyandu"
+           value={formData.name}
+           onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+           required
+         />
+
+
+         <TextInput
+           label="Nomor Posyandu"
+           placeholder="Masukkan nomor posyandu"
+           value={formData.nomor}
+           onChange={(e) => setFormData({ ...formData, nomor: e.target.value })}
+           required
+         />
+
+
+         <Box>
+           <Text fw="bold" fz="sm" mb={6}>Deskripsi Posyandu</Text>
+           <EditEditor
+             value={formData.deskripsi}
+             onChange={(htmlContent) => {
+               setFormData({ ...formData, deskripsi: htmlContent });
+               statePosyandu.edit.form.deskripsi = htmlContent;
+             }}
+           />
+         </Box>
+
+
+         <Box>
+           <Text fw="bold" fz="sm" mb={6}>Jadwal Pelayanan</Text>
+           <EditEditor
+             value={formData.jadwalPelayanan}
+             onChange={(htmlContent) => {
+               setFormData({ ...formData, jadwalPelayanan: htmlContent });
+               statePosyandu.edit.form.jadwalPelayanan = htmlContent;
+             }}
+           />
+         </Box>
+
+
+         {/* Tombol Submit */}
+         <Group justify="right">
+           <Button
+             onClick={handleSubmit}
+             radius="md"
+             size="md"
+             style={{
+               background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+               color: '#fff',
+               boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+             }}
+           >
+             Simpan
+           </Button>
+         </Group>
+       </Stack>
+     </Paper>
+   </Box>
+ );
 }
 
-export default EditPosyandu;
+
+export default EditPosyandu;

src/app/admin/(dashboard)/kesehatan/posyandu/[id]/page.tsx

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

src/app/admin/(dashboard)/kesehatan/posyandu/create/page.tsx

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

src/app/admin/(dashboard)/kesehatan/posyandu/page.tsx

@@ -1,114 +1,170 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Pagination, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
-import HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
-import { useRouter } from 'next/navigation';
-import { useProxy } from 'valtio/utils';
-import posyandustate from '../../_state/kesehatan/posyandu/posyandu';
+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, 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 posyandustate from '../../_state/kesehatan/posyandu/posyandu';
+
 
 function Posyandu() {
-  const [search, setSearch] = useState("");
-  return (
-    <Box>
-      <HeaderSearch
-        title='Posyandu'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListPosyandu search={search} />
-    </Box>
-  );
+ const [search, setSearch] = useState("");
+ return (
+   <Box>
+     <HeaderSearch
+       title='Posyandu'
+       placeholder='Cari nama posyandu atau nomor...'
+       searchIcon={<IconSearch size={20} />}
+       value={search}
+       onChange={(e) => setSearch(e.currentTarget.value)}
+     />
+     <ListPosyandu search={search} />
+   </Box>
+ );
 }
 
+
 function ListPosyandu({ search }: { search: string }) {
-  const statePosyandu = useProxy(posyandustate)
-  const router = useRouter();
+ const statePosyandu = useProxy(posyandustate)
+ const router = useRouter();
 
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = statePosyandu.findMany;
 
-  useShallowEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+ const {
+   data,
+   page,
+   totalPages,
+   loading,
+   load,
+ } = statePosyandu.findMany;
 
-  const filteredData = data || [];
 
-  if (loading || !data) {
-    return (
-      <Box py={10}>
-        <Skeleton h={500} />
-      </Box>
-    )
-  }
+ useShallowEffect(() => {
+   load(page, 10, search)
+ }, [page, search])
 
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Posyandu'
-          href='/admin/kesehatan/posyandu/create'
-        />
-        <Box style={{ overflowX: "auto" }}>
-          <Table striped withTableBorder withRowBorders>
-            <TableThead>
-              <TableTr>
-                <TableTh>Nama Posyandu</TableTh>
-                <TableTh>Nomor Posyandu</TableTh>
-                <TableTh>Deskripsi</TableTh>
-                <TableTh>Detail</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>
-                    <Box w={100}>
-                      <Text truncate="end" lineClamp={1} fz={"sm"}>{item.name}</Text>
-                    </Box>
-                  </TableTd>
-                  <TableTd>
-                    <Box w={100}>
-                      <Text truncate="end" lineClamp={1} fz={"sm"}>{item.nomor}</Text>
-                    </Box>
-                  </TableTd>
-                  <TableTd>
-                    <Box w={100}>
-                      <Text truncate="end" lineClamp={1} fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                    </Box>
-                  </TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push(`/admin/kesehatan/posyandu/${item.id}`)}>
-                      <IconDeviceImac size={20} />
-                    </Button>
-                  </TableTd>
-                </TableTr>
-              ))}
-            </TableTbody>
-          </Table>
-        </Box>
-      </Paper>
-      <Center>
-        <Pagination
-          value={page}
-          onChange={(newPage) => load(newPage)} // ini penting!
-          total={totalPages}
-          mt="md"
-          mb="md"
-        />
-      </Center>
-    </Box>
-  );
+
+ const filteredData = data || [];
+
+
+ if (loading || !data) {
+   return (
+     <Stack py={10}>
+       <Skeleton height={600} radius="md" />
+     </Stack>
+   )
+ }
+
+
+ return (
+   <Box py={10}>
+     <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+       <Group justify="space-between" mb="md">
+         <Title order={4}>Daftar Posyandu</Title>
+         <Tooltip label="Tambah Posyandu" withArrow>
+           <Button
+             leftSection={<IconPlus size={18} />}
+             color="blue"
+             variant="light"
+             onClick={() => router.push('/admin/kesehatan/posyandu/create')}
+           >
+             Tambah Baru
+           </Button>
+         </Tooltip>
+       </Group>
+       <Box style={{ overflowX: "auto" }}>
+         <Table highlightOnHover>
+           <TableThead>
+             <TableTr>
+               <TableTh style={{ width: '25%' }}>Nama Posyandu</TableTh>
+               <TableTh style={{ width: '20%' }}>Nomor Posyandu</TableTh>
+               <TableTh style={{ width: '30%' }}>Deskripsi</TableTh>
+               <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+             </TableTr>
+           </TableThead>
+           <TableTbody>
+             {filteredData.length > 0 ? (
+               filteredData.map((item) => (
+                 <TableTr key={item.id}>
+                   <TableTd style={{ width: '25%' }}>
+                     <Text fw={500} truncate="end" lineClamp={1}>
+                       {item.name}
+                     </Text>
+                   </TableTd>
+                   <TableTd style={{ width: '20%' }}>
+                     <Text truncate fz="sm" c="dimmed">
+                       {item.nomor || '-'}
+                     </Text>
+                   </TableTd>
+                   <TableTd style={{ width: '30%' }}>
+                     <Text
+                       truncate
+                       fz="sm"
+                       dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                     />
+                   </TableTd>
+                   <TableTd style={{ width: '15%' }}>
+                     <Button
+                       variant="light"
+                       color="blue"
+                       onClick={() => router.push(`/admin/kesehatan/posyandu/${item.id}`)}
+                     >
+                       <IconDeviceImac size={20} />
+                       <Text ml={5}>Detail</Text>
+                     </Button>
+                   </TableTd>
+                 </TableTr>
+               ))
+             ) : (
+               <TableTr>
+                 <TableTd colSpan={4}>
+                   <Center py={20}>
+                     <Text color="dimmed">Tidak ada data posyandu yang cocok</Text>
+                   </Center>
+                 </TableTd>
+               </TableTr>
+             )}
+           </TableTbody>
+         </Table>
+       </Box>
+     </Paper>
+     <Center>
+       <Pagination
+         value={page}
+         onChange={(newPage) => {
+           load(newPage, 10);
+           window.scrollTo({ top: 0, behavior: 'smooth' });
+         }}
+         total={totalPages}
+         mt="md"
+         mb="md"
+         color="blue"
+         radius="md"
+       />
+     </Center>
+   </Box>
+ );
 }
 
-export default Posyandu;
+
+export default Posyandu;

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

@@ -4,7 +4,18 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import programKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -12,11 +23,10 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-
 function EditProgramKesehatan() {
-  const programKesehatanState = useProxy(programKesehatan)
+  const programKesehatanState = useProxy(programKesehatan);
   const router = useRouter();
-  const params = useParams()
+  const params = useParams();
 
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
@@ -25,7 +35,7 @@ function EditProgramKesehatan() {
     deskripsiSingkat: programKesehatanState.edit.form.deskripsiSingkat || '',
     deskripsi: programKesehatanState.edit.form.deskripsi || '',
     imageId: programKesehatanState.edit.form.imageId || '',
-  })
+  });
 
   useEffect(() => {
     const loadProgramKesehatan = async () => {
@@ -47,8 +57,8 @@ function EditProgramKesehatan() {
           }
         }
       } catch (error) {
-        console.error("Error loading program kesehatan:", error);
-        toast.error("Gagal memuat data program kesehatan");
+        console.error('Error loading program kesehatan:', error);
+        toast.error('Gagal memuat data program kesehatan');
       }
     };
 
@@ -70,114 +80,143 @@ function EditProgramKesehatan() {
         const uploaded = res.data?.data;
 
         if (!uploaded?.id) {
-          return toast.error("Gagal upload gambar");
+          return toast.error('Gagal upload gambar');
         }
 
         programKesehatanState.edit.form.imageId = uploaded.id;
       }
 
       await programKesehatanState.edit.update();
-      toast.success("Program kesehatan berhasil diperbarui!");
-      router.push("/admin/kesehatan/program-kesehatan");
+      toast.success('Program kesehatan berhasil diperbarui!');
+      router.push('/admin/kesehatan/program-kesehatan');
     } catch (error) {
-      console.error("Error updating program kesehatan:", error);
-      toast.error("Gagal memuat data program kesehatan");
+      console.error('Error updating program kesehatan:', error);
+      toast.error('Terjadi kesalahan saat memperbarui program kesehatan');
     }
-  }
+  };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Stack gap={"xs"}>
-        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-          <Stack gap="xs">
-            <Title order={3}>Edit Program Kesehatan</Title>
-            <TextInput
-              value={formData.name}
-              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
-            />
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header dengan tombol back */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Program Kesehatan
+        </Title>
+      </Group>
 
-            <TextInput
-              value={formData.deskripsiSingkat}
-              onChange={(e) => setFormData({ ...formData, deskripsiSingkat: e.target.value })}
-              label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
-              placeholder="masukkan deskripsi"
-            />
+      {/* Card Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label="Judul"
+            placeholder="Masukkan judul"
+            required
+          />
 
-            <Box>
-              <Text fz="sm" fw="bold">Deskripsi</Text>
-              <EditEditor
-                value={formData.deskripsi}
-                onChange={(val) => setFormData({ ...formData, deskripsi: val })}
-              />
-            </Box>
-            <Box>
-              <Text fz={"md"} fw={"bold"}>Gambar</Text>
-              <Box>
-                <Dropzone
-                  onDrop={(files) => {
-                    const selectedFile = files[0]; // Ambil file pertama
-                    if (selectedFile) {
-                      setFile(selectedFile);
-                      setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                    }
+          <TextInput
+            value={formData.deskripsiSingkat}
+            onChange={(e) => setFormData({ ...formData, deskripsiSingkat: e.target.value })}
+            label="Deskripsi Singkat"
+            placeholder="Masukkan deskripsi singkat"
+            required
+          />
+
+          <Box>
+            <Text fz="sm" fw="bold" mb={6}>
+              Deskripsi
+            </Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+            />
+          </Box>
+
+          <Box>
+            <Text fz="sm" fw="bold" mb={6}>
+              Gambar
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              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>
+
+            {previewImage && (
+              <Box mt="sm">
+                <Image
+                  src={previewImage}
+                  alt="Preview"
+                  style={{
+                    maxWidth: '100%',
+                    maxHeight: '200px',
+                    objectFit: 'contain',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
                   }}
-                  onReject={() => toast.error('File tidak valid.')}
-                  maxSize={5 * 1024 ** 2} // Maks 5MB
-                  accept={{ 'image/*': [] }}
-                >
-                  <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                    <Dropzone.Accept>
-                      <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                    </Dropzone.Accept>
-                    <Dropzone.Reject>
-                      <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                    </Dropzone.Reject>
-                    <Dropzone.Idle>
-                      <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                    </Dropzone.Idle>
-
-                    <div>
-                      <Text size="xl" inline>
-                        Drag gambar ke sini atau klik untuk pilih file
-                      </Text>
-                      <Text size="sm" c="dimmed" inline mt={7}>
-                        Maksimal 5MB dan harus format gambar
-                      </Text>
-                    </div>
-                  </Group>
-                </Dropzone>
-
-                {/* Tampilkan preview kalau ada */}
-                {previewImage && (
-                  <Box mt="sm">
-                    <Image
-                      src={previewImage}
-                      alt="Preview"
-                      style={{
-                        maxWidth: '100%',
-                        maxHeight: '200px',
-                        objectFit: 'contain',
-                        borderRadius: '8px',
-                        border: '1px solid #ddd',
-                      }}
-                    />
-                  </Box>
-                )}
+                />
               </Box>
-            </Box>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            )}
+          </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>
-          </Stack>
-        </Paper>
-      </Stack>
-    </Box >
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/kesehatan/program-kesehatan/[id]/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image, Skeleton } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip, Image } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import programKesehatan from '../../../_state/kesehatan/program-kesehatan/programKesehatan';
@@ -10,82 +10,116 @@ import { useShallowEffect } from '@mantine/hooks';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 
 function DetailProgramKesehatan() {
-  const programKesehatanState = useProxy(programKesehatan)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const state = useProxy(programKesehatan);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
   const router = useRouter();
-  const params = useParams()
+  const params = useParams();
 
   useShallowEffect(() => {
-    programKesehatanState.findUnique.load(params?.id as string)
-  }, [])
+    state.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      programKesehatanState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/kesehatan/program-kesehatan")
+      state.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/kesehatan/program-kesehatan");
     }
-  }
+  };
 
-  if (!programKesehatanState.findUnique.data) {
+  if (!state.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={400} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = state.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Program Kesehatan</Text>
-          {programKesehatanState.findUnique.data ? (
-            <Paper bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Judul</Text>
-                  <Text fz={"lg"}>{programKesehatanState.findUnique.data.name}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Deskripsi Singkat</Text>
-                  <Text fz={"lg"}>{programKesehatanState.findUnique.data.deskripsiSingkat}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: programKesehatanState.findUnique.data.deskripsi }} />
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                  <Image src={programKesehatanState.findUnique.data.image?.link} alt="gambar" />
-                </Box>
-                <Box>
-                  <Flex gap={"xs"}>
-                    <Button color="red" onClick={() => {
-                      if (programKesehatanState.findUnique.data) {
-                        setSelectedId(programKesehatanState.findUnique.data.id)
-                        setModalHapus(true)
-                      }
+    <Box py={10}>
+      {/* Tombol kembali */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        withBorder
+        w={{ base: "100%", md: "50%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Program Kesehatan
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Judul</Text>
+                <Text fz="md" c="dimmed">{data?.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Deskripsi Singkat</Text>
+                <Text fz="md" c="dimmed">{data?.deskripsiSingkat || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }} />
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                {data?.image?.link ? (
+                  <Image src={data.image.link} alt="gambar program kesehatan" radius="md" />
+                ) : (
+                  <Text fz="md" c="dimmed">-</Text>
+                )}
+              </Box>
+
+              <Group gap="sm">
+                <Tooltip label="Hapus Data" withArrow position="top">
+                  <Button
+                    color="red"
+                    onClick={() => {
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                      disabled={programKesehatanState.delete.loading || !programKesehatanState.findUnique.data}
-                    >
-                      <IconX size={20} />
-                    </Button>
-                    <Button onClick={() => router.push(`/admin/kesehatan/program-kesehatan/${programKesehatanState.findUnique.data?.id}/edit`)} color="green">
-                      <IconEdit size={20} />
-                    </Button>
-                  </Flex>
-                </Box>
-              </Stack>
-            </Paper>
-          ) : null}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconTrash size={20} />
+                  </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Data" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() => router.push(`/admin/kesehatan/program-kesehatan/${data?.id}/edit`)}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
@@ -94,7 +128,7 @@ function DetailProgramKesehatan() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus program kesehatan ini?"
+        text="Apakah Anda yakin ingin menghapus program kesehatan ini?"
       />
     </Box>
   );

src/app/admin/(dashboard)/kesehatan/program-kesehatan/create/page.tsx

@@ -1,7 +1,18 @@
 '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';
@@ -13,30 +24,32 @@ import { Dropzone } from '@mantine/dropzone';
 
 function CreateProgramKesehatan() {
   const router = useRouter();
-  const programKesehatanState = useProxy(programKesehatan)
+  const programKesehatanState = useProxy(programKesehatan);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
 
   const resetForm = () => {
-    // Reset state di valtio
     programKesehatanState.create.form = {
       name: "",
       deskripsiSingkat: "",
       deskripsi: "",
       imageId: "",
     };
-
-    // Reset state lokal
     setPreviewImage(null);
     setFile(null);
   };
 
   const handleSubmit = async () => {
+    if (!programKesehatanState.create.form.name) {
+      return toast.warn("Judul wajib diisi");
+    }
+    if (!programKesehatanState.create.form.deskripsiSingkat) {
+      return toast.warn("Deskripsi singkat wajib diisi");
+    }
     if (!file) {
       return toast.warn("Pilih file gambar terlebih dahulu");
     }
 
-    // Upload gambar dulu
     const res = await ApiFetch.api.fileStorage.create.post({
       file,
       name: file.name,
@@ -47,34 +60,45 @@ function CreateProgramKesehatan() {
       return toast.error("Gagal upload gambar");
     }
 
-    // Simpan ID gambar ke form
     programKesehatanState.create.form.imageId = uploaded.id;
-
-    // Submit data berita
     await programKesehatanState.create.create();
 
-    // Reset form setelah submit
     resetForm();
-    router.push("/admin/kesehatan/program-kesehatan")
+    router.push("/admin/kesehatan/program-kesehatan");
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Create Program Kesehatan</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Program Kesehatan
+        </Title>
+      </Group>
+
+      {/* Form Card */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
             value={programKesehatanState.create.form.name}
             onChange={(val) => {
               programKesehatanState.create.form.name = val.target.value;
             }}
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
+            label="Judul"
+            placeholder="Masukkan judul"
+            required
           />
 
           <TextInput
@@ -82,12 +106,15 @@ function CreateProgramKesehatan() {
             onChange={(val) => {
               programKesehatanState.create.form.deskripsiSingkat = val.target.value;
             }}
-            label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
-            placeholder="masukkan deskripsi"
+            label="Deskripsi Singkat"
+            placeholder="Masukkan deskripsi singkat"
+            required
           />
 
           <Box>
-            <Text fz="sm" fw="bold">Deskripsi</Text>
+            <Title order={6} mb={6}>
+              Deskripsi
+            </Title>
             <CreateEditor
               value={programKesehatanState.create.form.deskripsi}
               onChange={(val) => {
@@ -95,64 +122,76 @@ function CreateProgramKesehatan() {
               }}
             />
           </Box>
+
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Title order={6} mb={6}>
+              Gambar
+            </Title>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+            >
+              <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                <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>
+                <div>
+                  <Text size="xl" inline>
+                    Drag gambar ke sini atau klik untuk pilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Maksimal 5MB dan harus format gambar
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
 
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-            </Box>
+            {previewImage && (
+              <Box mt="sm">
+                <Image
+                  src={previewImage}
+                  alt="Preview"
+                  style={{
+                    maxWidth: '100%',
+                    maxHeight: '200px',
+                    objectFit: 'contain',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
+                  }}
+                />
+              </Box>
+            )}
           </Box>
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/kesehatan/program-kesehatan/page.tsx

@@ -1,8 +1,26 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
-import JudulList from '../../_com/judulList';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Image,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
+import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import { useRouter } from 'next/navigation';
 import programKesehatan from '../../_state/kesehatan/program-kesehatan/programKesehatan';
@@ -14,9 +32,10 @@ function ProgramKesehatan() {
   const [search, setSearch] = useState("");
   return (
     <Box>
+      {/* Header dengan Search */}
       <HeaderSearch
         title='Program Kesehatan'
-        placeholder='pencarian'
+        placeholder='Cari program kesehatan...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -27,88 +46,112 @@ function ProgramKesehatan() {
 }
 
 function ListProgramKesehatan({ search }: { search: string }) {
-  const programKesehatanState = useProxy(programKesehatan)
-  const router = useRouter()
+  const stateProgram = useProxy(programKesehatan);
+  const router = useRouter();
 
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = programKesehatanState.findMany;
+  const { data, page, totalPages, loading, load } = stateProgram.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+    load(page, 10, search);
+  }, [page, search]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Box py={10}>
-        <Skeleton h={500} />
-      </Box>
-    )
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
+    );
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Program Kesehatan'
-            href='/admin/kesehatan/program-kesehatan/create'
-          />
-          <Box style={{ overflowX: "auto" }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh w={250}>Judul</TableTh>
-                  <TableTh w={250}>Deskripsi Singkat</TableTh>
-                  <TableTh w={250}>Image</TableTh>
-                  <TableTh w={200}>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        {/* Header List + Tombol Tambah */}
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Program Kesehatan</Title>
+          <Tooltip label="Tambah Program Kesehatan" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/kesehatan/program-kesehatan/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        {/* Tabel */}
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>Judul</TableTh>
+                <TableTh>Deskripsi Singkat</TableTh>
+                <TableTh>Image</TableTh>
+                <TableTh>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
-                      </Box>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.name}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat }} />
-                      </Box>
+                      <Text fz="sm" truncate="end" lineClamp={2} dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat }} />
                     </TableTd>
                     <TableTd>
-                      <Image w={100} src={item.image?.link} alt="image" />
+                      <Image w={100} src={item.image?.link} alt="image" radius="md" />
                     </TableTd>
                     <TableTd>
-                      <Button onClick={() => router.push(`/admin/kesehatan/program-kesehatan/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/kesehatan/program-kesehatan/${item.id}`)}
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada program kesehatan yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+
+      {/* Pagination */}
       <Center>
         <Pagination
           value={page}
-          onChange={(newPage) => load(newPage)} // ini penting!
+          onChange={(newPage) => {
+            load(newPage, 10, search);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>
-  )
+  );
 }
 
 export default ProgramKesehatan;

src/app/admin/(dashboard)/kesehatan/puskesmas/[id]/edit/page.tsx

@@ -4,7 +4,18 @@
 import puskesmasState from '@/app/admin/(dashboard)/_state/kesehatan/puskesmas/puskesmas';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -85,7 +96,6 @@ function EditPuskesmas() {
             imageId: form.imageId,
           });
 
-          // Check if there's an existing image URL in the form data
           const formWithImage = form as PuskesmasFormData;
           if (formWithImage.image?.link) {
             setPreviewImage(formWithImage.image.link);
@@ -105,17 +115,8 @@ function EditPuskesmas() {
         ...statePuskesmas.edit.form,
         name: formData.name,
         alamat: formData.alamat,
-        jam: {
-          workDays: formData.jam.workDays,
-          weekDays: formData.jam.weekDays,
-          holiday: formData.jam.holiday,
-        },
-        kontak: {
-          kontakPuskesmas: formData.kontak.kontakPuskesmas,
-          email: formData.kontak.email,
-          facebook: formData.kontak.facebook,
-          kontakUGD: formData.kontak.kontakUGD,
-        },
+        jam: { ...formData.jam },
+        kontak: { ...formData.kontak },
         imageId: formData.imageId,
       };
 
@@ -144,166 +145,182 @@ function EditPuskesmas() {
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: value
-    }));
+    setFormData(prev => ({ ...prev, [name]: value }));
   };
 
   const handleNestedChange = (section: 'jam' | 'kontak', field: string, value: string) => {
     setFormData(prev => ({
       ...prev,
-      [section]: {
-        ...prev[section],
-        [field]: value
-      }
+      [section]: { ...prev[section], [field]: value }
     }));
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant="subtle" color="blue">
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Stack gap="xs">
-        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-          <Stack gap="xs">
-            <Title order={3}>Edit Puskesmas</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header dengan tombol back */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Puskesmas
+        </Title>
+      </Group>
 
-            <TextInput
-              label={<Text fz="sm" fw="bold">Nama Puskesmas</Text>}
-              placeholder="masukkan nama puskesmas"
-              name="name"
-              value={formData.name}
-              onChange={handleInputChange}
-            />
+      {/* Card Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Nama Puskesmas"
+            placeholder="Masukkan nama puskesmas"
+            name="name"
+            value={formData.name}
+            onChange={handleInputChange}
+            required
+          />
 
-            <TextInput
-              label={<Text fz="sm" fw="bold">Alamat</Text>}
-              placeholder="masukkan alamat"
-              name="alamat"
-              value={formData.alamat}
-              onChange={handleInputChange}
-            />
+          <TextInput
+            label="Alamat"
+            placeholder="Masukkan alamat"
+            name="alamat"
+            value={formData.alamat}
+            onChange={handleInputChange}
+            required
+          />
 
-            <TextInput
-              label={<Text fz="sm" fw="bold">Jam Buka</Text>}
-              placeholder="masukkan jam buka"
-              value={formData.jam.workDays}
-              onChange={(e) => handleNestedChange('jam', 'workDays', e.target.value)}
-            />
+          <TextInput
+            label="Jam Buka"
+            placeholder="Masukkan jam buka"
+            value={formData.jam.workDays}
+            onChange={(e) => handleNestedChange('jam', 'workDays', e.target.value)}
+            required
+          />
 
-            <TextInput
-              label={<Text fz="sm" fw="bold">Jam Tutup</Text>}
-              placeholder="masukkan jam tutup"
-              value={formData.jam.weekDays}
-              onChange={(e) => handleNestedChange('jam', 'weekDays', e.target.value)}
-            />
+          <TextInput
+            label="Jam Tutup"
+            placeholder="Masukkan jam tutup"
+            value={formData.jam.weekDays}
+            onChange={(e) => handleNestedChange('jam', 'weekDays', e.target.value)}
+            required
+          />
 
-            <TextInput
-              label={<Text fz="sm" fw="bold">Jam Libur</Text>}
-              placeholder="masukkan jam libur"
-              value={formData.jam.holiday}
-              onChange={(e) => handleNestedChange('jam', 'holiday', e.target.value)}
-            />
+          <TextInput
+            label="Jam Libur"
+            placeholder="Masukkan jam libur"
+            value={formData.jam.holiday}
+            onChange={(e) => handleNestedChange('jam', 'holiday', e.target.value)}
+            required
+          />
 
-            <TextInput
-              label={<Text fz="sm" fw="bold">Kontak Puskesmas</Text>}
-              placeholder="masukkan kontak puskesmas"
-              value={formData.kontak.kontakPuskesmas}
-              onChange={(e) => handleNestedChange('kontak', 'kontakPuskesmas', e.target.value)}
-            />
+          <TextInput
+            label="Kontak Puskesmas"
+            placeholder="Masukkan kontak puskesmas"
+            value={formData.kontak.kontakPuskesmas}
+            onChange={(e) => handleNestedChange('kontak', 'kontakPuskesmas', e.target.value)}
+          />
 
-            <TextInput
-              label={<Text fz="sm" fw="bold">Email</Text>}
-              placeholder="masukkan email"
-              value={formData.kontak.email}
-              onChange={(e) => handleNestedChange('kontak', 'email', e.target.value)}
-            />
+          <TextInput
+            label="Email"
+            placeholder="Masukkan email"
+            value={formData.kontak.email}
+            onChange={(e) => handleNestedChange('kontak', 'email', e.target.value)}
+          />
 
-            <TextInput
-              label={<Text fz="sm" fw="bold">Facebook</Text>}
-              placeholder="masukkan facebook"
-              value={formData.kontak.facebook}
-              onChange={(e) => handleNestedChange('kontak', 'facebook', e.target.value)}
-            />
+          <TextInput
+            label="Facebook"
+            placeholder="Masukkan facebook"
+            value={formData.kontak.facebook}
+            onChange={(e) => handleNestedChange('kontak', 'facebook', e.target.value)}
+          />
 
-            <TextInput
-              label={<Text fz="sm" fw="bold">Kontak UGD</Text>}
-              placeholder="masukkan kontak UGD"
-              value={formData.kontak.kontakUGD}
-              onChange={(e) => handleNestedChange('kontak', 'kontakUGD', e.target.value)}
-            />
+          <TextInput
+            label="Kontak UGD"
+            placeholder="Masukkan kontak UGD"
+            value={formData.kontak.kontakUGD}
+            onChange={(e) => handleNestedChange('kontak', 'kontakUGD', e.target.value)}
+          />
 
-            <Box>
-              <Text fz={"md"} fw={"bold"}>Gambar</Text>
-              <Box>
-                <Dropzone
-                  onDrop={(files) => {
-                    const selectedFile = files[0]; // Ambil file pertama
-                    if (selectedFile) {
-                      setFile(selectedFile);
-                      setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                    }
+          {/* Upload Gambar */}
+          <Box>
+            <Text fz="sm" fw="bold" mb={6}>
+              Gambar
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+            >
+              <Group justify="center" gap="xl" mih={200} style={{ pointerEvents: 'none' }}>
+                <Dropzone.Accept>
+                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+                <div>
+                  <Text size="xl" inline>
+                    Drag gambar ke sini atau klik untuk pilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Maksimal 5MB dan harus format gambar
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
+
+            {previewImage && (
+              <Box mt="sm">
+                <Image
+                  src={previewImage}
+                  alt="Preview"
+                  style={{
+                    maxWidth: '100%',
+                    maxHeight: '200px',
+                    objectFit: 'contain',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
                   }}
-                  onReject={() => toast.error('File tidak valid.')}
-                  maxSize={5 * 1024 ** 2} // Maks 5MB
-                  accept={{ 'image/*': [] }}
-                >
-                  <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                    <Dropzone.Accept>
-                      <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                    </Dropzone.Accept>
-                    <Dropzone.Reject>
-                      <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                    </Dropzone.Reject>
-                    <Dropzone.Idle>
-                      <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                    </Dropzone.Idle>
-
-                    <div>
-                      <Text size="xl" inline>
-                        Drag gambar ke sini atau klik untuk pilih file
-                      </Text>
-                      <Text size="sm" c="dimmed" inline mt={7}>
-                        Maksimal 5MB dan harus format gambar
-                      </Text>
-                    </div>
-                  </Group>
-                </Dropzone>
-
-                {/* Tampilkan preview kalau ada */}
-                {previewImage && (
-                  <Box mt="sm">
-                    <Image
-                      src={previewImage}
-                      alt="Preview"
-                      style={{
-                        maxWidth: '100%',
-                        maxHeight: '200px',
-                        objectFit: 'contain',
-                        borderRadius: '8px',
-                        border: '1px solid #ddd',
-                      }}
-                    />
-                  </Box>
-                )}
-
+                />
               </Box>
-            </Box>
+            )}
+          </Box>
 
+          <Group justify="right">
             <Button
               onClick={handleSubmit}
-              bg={colors['blue-button']}
+              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)',
+              }}
               loading={statePuskesmas.edit.loading}
             >
-              Simpan Perubahan
+              Simpan
             </Button>
-          </Stack>
-        </Paper>
-      </Stack>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/puskesmas/[id]/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Flex, Text, Image, Skeleton } from '@mantine/core';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { Box, Button, Paper, Stack, Text, Image, Skeleton, Group, Tooltip } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import puskesmasState from '../../../_state/kesehatan/puskesmas/puskesmas';
@@ -10,90 +10,128 @@ import { useShallowEffect } from '@mantine/hooks';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 
 function DetailPuskesmas() {
-  const params = useParams()
+  const params = useParams();
   const router = useRouter();
-  const statePuskesmas = useProxy(puskesmasState)
+  const statePuskesmas = useProxy(puskesmasState);
   const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [selectedId, setSelectedId] = useState<string | null>(null);
 
   useShallowEffect(() => {
-    statePuskesmas.findUnique.load(params?.id as string)
-  }, [])
+    statePuskesmas.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      statePuskesmas.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/kesehatan/puskesmas")
+      statePuskesmas.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/kesehatan/puskesmas");
     }
-  }
+  };
 
   if (!statePuskesmas.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = statePuskesmas.findUnique.data;
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Puskesmas</Text>
-          {statePuskesmas.findUnique.data ? (
-            <Paper bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Nama Puskesmas</Text>
-                  <Text fz={"lg"}>{statePuskesmas.findUnique.data.name}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Alamat</Text>
-                  <Text fz={"lg"}>{statePuskesmas.findUnique.data.alamat}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Jam Operasional</Text>
-                  <Text fz={"lg"}>{statePuskesmas.findUnique.data.jam.workDays}</Text>
-                  <Text fz={"lg"}>{statePuskesmas.findUnique.data.jam.weekDays}</Text>
-                  <Text fz={"lg"}>{statePuskesmas.findUnique.data.jam.holiday}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                  <Image src={statePuskesmas.findUnique.data.image?.link} alt="gambar" />
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Kontak</Text>
-                  <Text fz={"lg"} >{statePuskesmas.findUnique.data.kontak.kontakPuskesmas}</Text>
-                  <Text fz={"lg"} >{statePuskesmas.findUnique.data.kontak.email}</Text>
-                  <Text fz={"lg"} >{statePuskesmas.findUnique.data.kontak.facebook}</Text>
-                  <Text fz={"lg"} >{statePuskesmas.findUnique.data.kontak.kontakUGD}</Text>
-                </Box>
-                <Box>
-                  <Flex gap={"xs"}>
-                    <Button color="red" onClick={() => {
-                      if (statePuskesmas.findUnique.data) {
-                        setSelectedId(statePuskesmas.findUnique.data.id)
-                        setModalHapus(true)
-                      }
-                    }}>
-                      <IconX size={20} />
-                    </Button>
-                    <Button onClick={() => router.push(`/admin/kesehatan/puskesmas/${statePuskesmas.findUnique.data?.id}/edit`)} color="green">
-                      <IconEdit size={20} />
-                    </Button>
-                  </Flex>
-                </Box>
-              </Stack>
-            </Paper>
-          ) : null}
+    <Box py={10}>
+      {/* Tombol kembali */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        withBorder
+        w={{ base: "100%", md: "50%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Puskesmas
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Nama Puskesmas</Text>
+                <Text fz="md" c="dimmed">{data?.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Alamat</Text>
+                <Text fz="md" c="dimmed">{data?.alamat || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Jam Operasional</Text>
+                <Text fz="md" c="dimmed">{data?.jam?.workDays || '-'}</Text>
+                <Text fz="md" c="dimmed">{data?.jam?.weekDays || '-'}</Text>
+                <Text fz="md" c="dimmed">{data?.jam?.holiday || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                {data?.image?.link ? (
+                  <Image src={data.image.link} alt="gambar" radius="md" />
+                ) : (
+                  <Text fz="md" c="dimmed">-</Text>
+                )}
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Kontak</Text>
+                <Text fz="md" c="dimmed">{data?.kontak?.kontakPuskesmas || '-'}</Text>
+                <Text fz="md" c="dimmed">{data?.kontak?.email || '-'}</Text>
+                <Text fz="md" c="dimmed">{data?.kontak?.facebook || '-'}</Text>
+                <Text fz="md" c="dimmed">{data?.kontak?.kontakUGD || '-'}</Text>
+              </Box>
+
+              <Group gap="sm">
+                <Tooltip label="Hapus Data" withArrow position="top">
+                  <Button
+                    color="red"
+                    onClick={() => {
+                      setSelectedId(data.id);
+                      setModalHapus(true);
+                    }}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconTrash size={20} />
+                  </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Data" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() =>
+                      router.push(`/admin/kesehatan/puskesmas/${data.id}/edit`)
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
@@ -102,7 +140,7 @@ function DetailPuskesmas() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
+        text="Apakah anda yakin ingin menghapus data ini?"
       />
     </Box>
   );

src/app/admin/(dashboard)/kesehatan/puskesmas/create/page.tsx

@@ -1,7 +1,18 @@
 'use client'
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -11,44 +22,39 @@ import { useProxy } from 'valtio/utils';
 import puskesmasState from '../../../_state/kesehatan/puskesmas/puskesmas';
 
 function CreatePuskesmas() {
-  const statePuskesmas = useProxy(puskesmasState)
+  const statePuskesmas = useProxy(puskesmasState);
   const router = useRouter();
   const [file, setFile] = useState<File | null>(null);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
 
-
   const resetForm = () => {
     statePuskesmas.create.form = {
-      name: "",
-      alamat: "",
+      name: '',
+      alamat: '',
       jam: {
-        workDays: "",
-        weekDays: "",
-        holiday: "",
+        workDays: '',
+        weekDays: '',
+        holiday: '',
       },
       kontak: {
-        kontakPuskesmas: "",
-        email: "",
-        facebook: "",
-        kontakUGD: "",
+        kontakPuskesmas: '',
+        email: '',
+        facebook: '',
+        kontakUGD: '',
       },
-      imageId: "",
+      imageId: '',
       image: undefined,
     };
-
     setFile(null);
     setPreviewImage(null);
   };
 
-
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!file) {
-      return toast.warn("Pilih file gambar terlebih dahulu");
+      return toast.warn('Pilih file gambar terlebih dahulu');
     }
 
-    // Upload gambar dulu
     const res = await ApiFetch.api.fileStorage.create.post({
       file,
       name: file.name,
@@ -56,162 +62,171 @@ function CreatePuskesmas() {
 
     const uploaded = res.data?.data;
     if (!uploaded?.id) {
-      return toast.error("Gagal upload gambar");
+      return toast.error('Gagal upload gambar');
     }
 
     statePuskesmas.create.form.imageId = uploaded.id;
-    // State is already being updated directly in the form inputs
-
     await statePuskesmas.create.submit();
 
-    toast.success("Data berhasil disimpan");
+    toast.success('Data berhasil disimpan');
     resetForm();
-    // After successful submission, redirect to the list page
     router.push('/admin/kesehatan/puskesmas');
-  }
+  };
 
   return (
-    <Box component="form" onSubmit={handleSubmit}>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md" component="form" onSubmit={handleSubmit}>
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Data Puskesmas
+        </Title>
+      </Group>
 
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Create Puskesmas</Title>
+      {/* Form Card */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
-            label={<Text fz="sm" fw="bold">Nama Puskesmas</Text>}
-            placeholder="masukkan nama puskesmas"
+            label="Nama Puskesmas"
+            placeholder="Masukkan nama puskesmas"
             value={statePuskesmas.create.form.name}
-            onChange={(e) => {
-              statePuskesmas.create.form.name = e.target.value;
-            }}
+            onChange={(e) => (statePuskesmas.create.form.name = e.target.value)}
+            required
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Alamat</Text>}
-            placeholder="masukkan alamat"
+            label="Alamat"
+            placeholder="Masukkan alamat"
             value={statePuskesmas.create.form.alamat}
-            onChange={(e) => {
-              statePuskesmas.create.form.alamat = e.target.value;
-            }}
+            onChange={(e) => (statePuskesmas.create.form.alamat = e.target.value)}
+            required
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Jam Buka</Text>}
-            placeholder="masukkan jam buka"
+            label="Jam Buka"
+            placeholder="Masukkan jam buka"
             value={statePuskesmas.create.form.jam.workDays}
-            onChange={(e) => {
-              statePuskesmas.create.form.jam.workDays = e.target.value;
-            }}
+            onChange={(e) => (statePuskesmas.create.form.jam.workDays = e.target.value)}
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Jam Tutup</Text>}
-            placeholder="masukkan jam tutup"
+            label="Jam Tutup"
+            placeholder="Masukkan jam tutup"
             value={statePuskesmas.create.form.jam.weekDays}
-            onChange={(e) => {
-              statePuskesmas.create.form.jam.weekDays = e.target.value;
-            }}
+            onChange={(e) => (statePuskesmas.create.form.jam.weekDays = e.target.value)}
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Holiday</Text>}
-            placeholder="masukkan holiday"
+            label="Holiday"
+            placeholder="Masukkan hari libur"
             value={statePuskesmas.create.form.jam.holiday}
-            onChange={(e) => {
-              statePuskesmas.create.form.jam.holiday = e.target.value;
-            }}
+            onChange={(e) => (statePuskesmas.create.form.jam.holiday = e.target.value)}
           />
+
           <TextInput
-            label={<Text fz="sm" fw="bold">Kontak Puskesmas</Text>}
-            placeholder="masukkan kontak puskesmas"
+            label="Kontak Puskesmas"
+            placeholder="Masukkan kontak puskesmas"
             value={statePuskesmas.create.form.kontak.kontakPuskesmas}
-            onChange={(e) => {
-              statePuskesmas.create.form.kontak.kontakPuskesmas = e.target.value;
-            }}
+            onChange={(e) =>
+              (statePuskesmas.create.form.kontak.kontakPuskesmas = e.target.value)
+            }
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Email</Text>}
-            placeholder="masukkan email"
+            label="Email"
+            placeholder="Masukkan email"
             value={statePuskesmas.create.form.kontak.email}
-            onChange={(e) => {
-              statePuskesmas.create.form.kontak.email = e.target.value;
-            }}
+            onChange={(e) => (statePuskesmas.create.form.kontak.email = e.target.value)}
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Facebook</Text>}
-            placeholder="masukkan facebook"
+            label="Facebook"
+            placeholder="Masukkan facebook"
             value={statePuskesmas.create.form.kontak.facebook}
-            onChange={(e) => {
-              statePuskesmas.create.form.kontak.facebook = e.target.value;
-            }}
+            onChange={(e) => (statePuskesmas.create.form.kontak.facebook = e.target.value)}
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Kontak UGD</Text>}
-            placeholder="masukkan kontak ugd"
+            label="Kontak UGD"
+            placeholder="Masukkan kontak UGD"
             value={statePuskesmas.create.form.kontak.kontakUGD}
-            onChange={(e) => {
-              statePuskesmas.create.form.kontak.kontakUGD = e.target.value;
-            }}
+            onChange={(e) => (statePuskesmas.create.form.kontak.kontakUGD = e.target.value)}
           />
 
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Title order={6} mb={6}>
+              Gambar
+            </Title>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+            >
+              <Group justify="center" gap="xl" mih={200} 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>
+                <div>
+                  <Text size="xl" inline>
+                    Drag gambar ke sini atau klik untuk pilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Maksimal 5MB dan harus format gambar
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
 
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-            </Box>
+            {previewImage && (
+              <Box mt="sm">
+                <Image
+                  src={previewImage}
+                  alt="Preview"
+                  style={{
+                    maxWidth: '100%',
+                    maxHeight: '200px',
+                    objectFit: 'contain',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd',
+                  }}
+                />
+              </Box>
+            )}
           </Box>
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan Puskesmas
-          </Button>
+
+          {/* Action Button */}
+          <Group justify="right">
+            <Button
+              type="submit"
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx

@@ -1,105 +1,155 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Image,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
 import puskesmasState from '../../_state/kesehatan/puskesmas/puskesmas';
-import { useState } from 'react';
 
 function Puskesmas() {
   const [search, setSearch] = useState("");
+
   return (
     <Box>
+      {/* Header dengan Search */}
       <HeaderSearch
         title='Puskesmas'
-        placeholder='pencarian'
+        placeholder='Cari nama atau alamat...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
+
       <ListPuskesmas search={search} />
     </Box>
   );
 }
 
 function ListPuskesmas({ search }: { search: string }) {
-  const statePuskesmas = useProxy(puskesmasState)
+  const statePuskesmas = useProxy(puskesmasState);
   const router = useRouter();
 
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = statePuskesmas.findMany;
+  const { data, page, totalPages, loading, load } = statePuskesmas.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+    load(page, 10, search);
+  }, [page, search]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Box py={10}>
-        <Skeleton h={500} />
-      </Box>
-    )
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
+    );
   }
+
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Puskesmas'
-            href='/admin/kesehatan/puskesmas/create'
-          />
-          <Box style={{ overflowX: "auto" }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nama Puskesmas</TableTh>
-                  <TableTh>Alamat</TableTh>
-                  <TableTh>Image</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Puskesmas</Title>
+          <Tooltip label="Tambah Puskesmas" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/kesehatan/puskesmas/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama Puskesmas</TableTh>
+                <TableTh>Alamat</TableTh>
+                <TableTh>Image</TableTh>
+                <TableTh>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd>{item.name}</TableTd>
+                    <TableTd>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.name}
+                      </Text>
+                    </TableTd>
                     <TableTd>{item.alamat}</TableTd>
                     <TableTd>
-                      <Image w={100} src={item.image.link} alt="image" />
+                      <Image w={100} src={item.image.link} alt="image" radius="md" />
                     </TableTd>
                     <TableTd>
-                      <Button onClick={() => router.push(`/admin/kesehatan/puskesmas/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/kesehatan/puskesmas/${item.id}`)}
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada data puskesmas yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+
+      {/* Pagination */}
       <Center>
         <Pagination
           value={page}
-          onChange={(newPage) => load(newPage)} // ini penting!
+          onChange={(newPage) => {
+            load(newPage, 10, search);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>
-  )
+  );
 }
 
 export default Puskesmas;

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

@@ -66,7 +66,7 @@ function Page() {
             </Box>
             <Divider my="md" color={colors['blue-button']} />
             <Box px={{ base: 0, md: 50 }} pb="xl">
-              <Paper bg={colors['BG-trans']} radius="md" shadow="xs" p="lg">
+              <Paper withBorder bg={"#fff"} radius="md" shadow="xs" p="lg">
                 <Stack gap={0}>
                   <Center>
                     <Image

src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/page.tsx

@@ -1,33 +1,33 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Paper, Pagination, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
+import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconEdit, IconPlus, IconSearch, IconX } from '@tabler/icons-react';
+import { IconEdit, IconPlus, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
-import HeaderSearch from '../../../_com/header';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
 
 
 function JenjangPendidikan() {
-  const [search, setSearch] = useState("")
+  // const [search, setSearch] = useState("")
   return (
     <Box>
-      <HeaderSearch
+      <Title order={4}>Jenjang Pendidikan</Title>
+      {/* <HeaderSearch
         title='Jenjang Pendidikan'
         placeholder='Cari jenjang pendidikan...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListJenjangPendidikan search={search} />
+      /> */}
+      <ListJenjangPendidikan />
     </Box>
   );
 }
 
-function ListJenjangPendidikan({ search }: { search: string }) {
+function ListJenjangPendidikan() {
   const stateList = useProxy(infoSekolahPaud.jenjangPendidikan)
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
@@ -50,8 +50,8 @@ function ListJenjangPendidikan({ search }: { search: string }) {
   }
 
   useShallowEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+    load(page, 10)
+  }, [page])
 
   const filteredData = data || []
 

src/app/admin/(dashboard)/user&role/layout.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+import colors from '@/con/colors';
 import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { IconForms, IconUser } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
@@ -50,6 +51,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         User & Role
       </Title>
       <Tabs
+        color={colors['blue-button']}
         variant="pills"
         value={activeTab}
         onChange={handleTabChange}

src/app/admin/(dashboard)/user&role/role/page.tsx

@@ -88,12 +88,13 @@ function ListRole({ search }: { search: string }) {
                   <TableTr key={item.id}>
                     <TableTd>{item.name}</TableTd>
                     <TableTd>
-                      <Button color='green' onClick={() => router.push(`/admin/user&role/role/${item.id}`)}>
+                      <Button variant="light" color='green' onClick={() => router.push(`/admin/user&role/role/${item.id}`)}>
                         <IconEdit size={20} />
                       </Button>
                     </TableTd>
                     <TableTd>
                       <Button
+                        variant="light"
                         color='red'
                         disabled={listDataState.delete.loading}
                         onClick={() => {

src/app/admin/(dashboard)/user&role/user/page.tsx

@@ -2,7 +2,7 @@
 import colors from '@/con/colors';
 import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconSearch, IconTrash } from '@tabler/icons-react';
+import { IconCheck, IconSearch, IconX } from '@tabler/icons-react';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
@@ -75,9 +75,9 @@ function ListUser({ search }: { search: string }) {
             <TableThead>
               <TableTr>
                 <TableTh style={{ width: '25%' }}>Nama User</TableTh>
-                <TableTh style={{ width: '20%' }}>Email</TableTh>
+                <TableTh style={{ width: '20%' }}>Nomor</TableTh>
                 <TableTh style={{ width: '20%' }}>Role</TableTh>
-                <TableTh style={{ width: '15%' }}>Hapus</TableTh>
+                <TableTh style={{ width: '15%' }}>Aktif / Nonaktif</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -85,11 +85,11 @@ function ListUser({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd style={{ width: '25%', }}>
-                      <Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
+                      <Text fw={500} truncate="end" lineClamp={1}>{item.username}</Text>
                     </TableTd>
                     <TableTd style={{ width: '20%', }}>
                       <Text truncate fz="sm" c="dimmed">
-                        {item.email}
+                        {item.nomor}
                       </Text>
                     </TableTd>
                     <TableTd style={{ width: '20%', }}>
@@ -98,16 +98,19 @@ function ListUser({ search }: { search: string }) {
                       </Text>
                     </TableTd>
                     <TableTd style={{ width: '15%' }}>
-                      <Tooltip label="Hapus user" withArrow>
+                      <Tooltip
+                        label={item.isActive ? "Nonaktifkan user" : "Aktifkan user"}
+                        withArrow
+                      >
                         <Button
                           variant="light"
-                          color="red"
-                          onClick={() => {
-                            setSelectedId(item.id)
-                            setModalHapus(true)
+                          color={item.isActive ? "green" : "red"}
+                          onClick={async () => {
+                            await stateUser.updateActive.submit(item.id, !item.isActive)
+                            stateUser.findMany.load(page, 10, search)
                           }}
                         >
-                          <IconTrash size={20} />
+                          {item.isActive ? <IconCheck size={20} /> : <IconX size={20} />}
                         </Button>
                       </Tooltip>
                     </TableTd>

src/app/admin/auth/_lib/api_fetch_auth.ts

@@ -0,0 +1,41 @@
+export {
+    apiFetchLogin,
+    apiFetchRegister
+};
+
+const apiFetchLogin = async ({ nomor }: { nomor: string }) => {
+    const response = await fetch("/api/auth/login", {
+        method: "POST",
+        body: JSON.stringify({ nomor: nomor }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+    
+      return await response.json().catch(() => null);
+};
+
+const apiFetchRegister = async ({
+  nomor,
+  username,
+}: {
+  nomor: string;
+  username: string;
+}) => {
+  const data = {
+    username: username,
+    nomor: nomor,
+  };
+  const respone = await fetch("/api/auth/register", {
+    method: "POST",
+    body: JSON.stringify({ data }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  const result = await respone.json();
+
+  return result;
+  // return await respone.json().catch(() => null);
+};

src/app/admin/auth/registrasi/page.tsx

@@ -1,10 +1,18 @@
+'use client'
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
 import colors from '@/con/colors';
 import { Box, Button, Center, Checkbox, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import Link from 'next/link';
-import BackButton from '../(pages)/desa/layanan/_com/BackButto';
+
+
 
 
 function Page() {
+  // const router = useRouter()
+  // const registrerState = useSnapshot(userState.userState)
+  // const handleSubmit = async () => {
+  //   router.push("/login")
+  //   await registrerState.register.submit()
+  // }
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
@@ -12,7 +20,7 @@ function Page() {
       </Box>
       <Box px={{ base: 'md', md: 100 }} >
         <Center>
-          <Image src={"/api/img/darmasaba-icon.png"} alt="" w={80} />
+          <Image src={"/darmasaba-icon.png"} alt="" w={80} />
         </Center>
         <Box>
           <Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
@@ -33,27 +41,37 @@ function Page() {
               <Box>
                 <TextInput placeholder='Nama Lengkap'
                   label='Nama Lengkap'
+                  // value={registrerState.register.form.nama}
+                  // onChange={(e) => {
+                  //   userState.userState.register.form.nama = e.target.value
+                  // }}
+                  required
+
                 />
                 <TextInput py={10} placeholder='Email'
                   label='Email'
-                />
-                <TextInput placeholder='day / month / year'
-                  label='Tanggal Lahir'
-                />
-                <TextInput py={10} placeholder='08xx-xxxx-xxxx'
-                  label='Nomor Telepon'
+                  // value={registrerState.register.form.email}
+                  // onChange={(e) => {
+                  //   userState.userState.register.form.email = e.target.value
+                  // }}
+                  required
                 />
                 <TextInput pb={10} placeholder='Password'
+                type='password'
                   label='Password'
+                  // value={registrerState.register.form.password}
+                  // onChange={(e) => {
+                  //   userState.userState.register.form.password = e.target.value
+                  // }}
+                  required
                 />
                 <Box pb={10}>
                   <Checkbox
-                    
                     label="Saya menyetujui syarat dan ketentuan yang berlaku"
                   />
                 </Box>
                 <Box pb={20} >
-                  <Button component={Link} href={'/darmasaba/pendidikan/perpustakaan-digital'} fullWidth bg={colors['blue-button']} radius={'xl'}>Daftar</Button>
+                  <Button fullWidth bg={colors['blue-button']} radius={'xl'}>Daftar</Button>
                 </Box>
               </Box>
             </Stack>

src/app/admin/layout.tsx

@@ -21,7 +21,7 @@ import { useDisclosure } from "@mantine/hooks";
 import {
   IconChevronLeft,
   IconChevronRight,
-  IconDoorExit,
+  IconLogout2
 } from "@tabler/icons-react";
 import _ from "lodash";
 import Link from "next/link";
@@ -107,7 +107,21 @@ export default function Layout({ children }: { children: React.ReactNode }) {
                 variant="gradient"
                 gradient={{ from: colors["blue-button"], to: "#228be6" }}
               >
-                <IconDoorExit size={22} />
+                <Image src="/assets/images/darmasaba-icon.png" alt="Logo Darmasaba" w={25} h={25} radius="md" />
+              </ActionIcon>
+            </Tooltip>
+            <Tooltip label="Keluar" position="bottom" withArrow>
+              <ActionIcon
+                onClick={() => {
+                  router.push("/login");
+                }}
+                color={colors["blue-button"]}
+                radius="xl"
+                size="lg"
+                variant="gradient"
+                gradient={{ from: colors["blue-button"], to: "#228be6" }}
+              >
+                <IconLogout2 size={22} />
               </ActionIcon>
             </Tooltip>
           </Group>

src/app/api/[[...slugs]]/_lib/auth/_lib/decrypt.ts

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { jwtVerify } from "jose";
+
+export async function decrypt({
+  token,
+  encodedKey,
+}: {
+  token: string;
+  encodedKey: string;
+}): Promise<Record<string, any> | null> {
+  if (!token || !encodedKey) {
+    console.error("Missing required parameters:", {
+      hasToken: !!token,
+      hasEncodedKey: !!encodedKey,
+    });
+    return null;
+  }
+
+  try {
+    const enc = new TextEncoder().encode(encodedKey);
+    const { payload } = await jwtVerify(token, enc, {
+      algorithms: ["HS256"],
+    });
+
+    if (!payload || !payload.user) {
+      console.error("Invalid payload structure:", {
+        hasPayload: !!payload,
+        hasUser: payload ? !!payload.user : false,
+      });
+      return null;
+    }
+
+    // Logging untuk debug
+    // console.log("Decrypt successful:", {
+    //   payloadExists: !!payload,
+    //   userExists: !!payload.user,
+    //   tokenPreview: token.substring(0, 10) + "...",
+    // });
+
+    return payload.user as Record<string, any>;
+  } catch (error) {
+    console.error("Token verification failed:", {
+      error,
+      tokenLength: token?.length,
+      errorName: error instanceof Error ? error.name : "Unknown error",
+      errorMessage: error instanceof Error ? error.message : String(error),
+    });
+    return null;
+  }
+}

src/app/api/[[...slugs]]/_lib/auth/_lib/encrypt.ts

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { SignJWT } from "jose";
+
+export async function encrypt({
+  user,
+  exp = "7 year",
+  encodedKey,
+}: {
+  user: Record<string, any>;
+  exp?: string;
+  encodedKey: string;
+}): Promise<string | null> {
+  try {
+    const enc = new TextEncoder().encode(encodedKey);
+    return new SignJWT({ user })
+      .setProtectedHeader({ alg: "HS256" })
+      .setIssuedAt()
+      .setExpirationTime(exp)
+      .sign(enc);
+  } catch (error) {
+    console.error("Gagal mengenkripsi", error);
+    return null;
+  }
+}
+
+// wibu:0.2.82

src/app/api/[[...slugs]]/_lib/auth/_lib/get_KodeOtp_By_Id.ts

@@ -0,0 +1,13 @@
+"use server";
+
+import prisma from "@/lib/prisma";
+
+export async function auth_getCodeOtpByNumber({kodeId}: {kodeId: string}) {
+  const data = await prisma.kodeOtp.findFirst({
+    where: {
+      id: kodeId,
+    },
+  });
+
+  return data;
+}

src/app/api/[[...slugs]]/_lib/auth/_lib/randomOTP.ts

@@ -0,0 +1,4 @@
+export function randomOTP() {
+  const random = Math.floor(Math.random() * (9000 - 1000 )) + 1000
+  return random;
+}

src/app/api/[[...slugs]]/_lib/auth/_lib/session_create.ts

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { cookies } from "next/headers";
+import { encrypt } from "./encrypt";
+
+export async function sessionCreate({
+  sessionKey,
+  exp = "7 year",
+  encodedKey,
+  user,
+}: {
+  sessionKey: string;
+  exp?: string;
+  encodedKey: string;
+  user: Record<string, unknown>;
+}) {
+  const token = await encrypt({
+    exp,
+    encodedKey,
+    user,
+  });
+
+  const cookie: any = {
+    key: sessionKey,
+    value: token,
+    options: {
+      httpOnly: true,
+      sameSite: "lax",
+      path: "/",
+    },
+  };
+
+  (await cookies()).set(cookie.key, cookie.value, { ...cookie.options });
+  return token;
+}
+
+// wibu:0.2.82

src/app/api/[[...slugs]]/_lib/auth/login.ts

@@ -1,81 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-import bcrypt from "bcryptjs";
-import jwt from "jsonwebtoken";
-
-// ENV atau secret key untuk token
-const JWT_SECRET = process.env.JWT_SECRET || "super-secret-key"; // ganti di env production
-
-type LoginForm = {
-  email: string;
-  password: string;
-};
-
-export default async function userLogin(context: Context) {
-  const body = (await context.body) as LoginForm;
-
-  try {
-    // 1. Cari user berdasarkan email
-    const user = await prisma.user.findUnique({
-      where: { email: body.email },
-      include: { role: true }, // include role untuk otorisasi
-    });
-
-    // 2. Jika tidak ada user
-    if (!user) {
-      return {
-        success: false,
-        message: "Email tidak ditemukan",
-      };
-    }
-
-    // 3. Cek apakah user aktif
-    if (!user.isActive) {
-      return {
-        success: false,
-        message: "Akun tidak aktif",
-      };
-    }
-
-    // 4. Verifikasi password
-    const isMatch = await bcrypt.compare(body.password, user.password);
-    if (!isMatch) {
-      return {
-        success: false,
-        message: "Password salah",
-      };
-    }
-
-    // 5. Buat JWT token
-    const token = jwt.sign(
-      {
-        id: user.id,
-        email: user.email,
-        role: user.role.name,
-      },
-      JWT_SECRET,
-      { expiresIn: "7d" } // expire 7 hari
-    );
-
-    // 6. Kirim response
-    return {
-      success: true,
-      message: "Login berhasil",
-      data: {
-        user: {
-          id: user.id,
-          nama: user.nama,
-          email: user.email,
-          role: user.role.name,
-        },
-        token,
-      },
-    };
-  } catch (error) {
-    console.error("Login error:", error);
-    return {
-      success: false,
-      message: "Terjadi kesalahan saat login",
-    };
-  }
-}

src/app/api/[[...slugs]]/_lib/auth/login/route.ts

@@ -0,0 +1,63 @@
+import prisma from "@/lib/prisma";
+
+import { NextResponse } from "next/server";
+import { randomOTP } from "../_lib/randomOTP";
+
+export async function POST(req: Request) {
+  if (req.method !== "POST") {
+    return NextResponse.json(
+      { success: false, message: "Method Not Allowed" },
+      { status: 405 }
+    );
+  }
+
+  try {
+    const codeOtp = randomOTP();
+    const body = await req.json();
+    const { nomor } = body;
+    const res = await fetch(
+      `https://wa.wibudev.com/code?nom=${nomor}&text=Website Desa Darmasaba - Kode ini bersifat RAHASIA dan JANGAN DI BAGIKAN KEPADA SIAPAPUN, termasuk anggota ataupun Admin lainnya. 
+      \n 
+      >> Kode OTP anda: ${codeOtp}.
+      `
+    );
+
+    const sendWa = await res.json();
+
+    if (sendWa.status !== "success")
+      return NextResponse.json(
+        { success: false, message: "Nomor Whatsapp Tidak Aktif" },
+        { status: 400 }
+      );
+
+    const createOtpId = await prisma.kodeOtp.create({
+      data: {
+        nomor: nomor,
+        otp: codeOtp,
+      },
+    });
+
+    if (!createOtpId)
+      return NextResponse.json(
+        { success: false, message: "Gagal mengirim kode OTP" },
+        { status: 400 }
+      );
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Kode verifikasi terkirim",
+        kodeId: createOtpId.id,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.log("Error Login", error);
+    return NextResponse.json(
+      { success: false, message: "Terjadi masalah saat login" , reason: error as Error },
+      { status: 500 }
+    );
+  } finally {
+    await prisma.$disconnect();
+  }
+}

src/app/api/[[...slugs]]/_lib/auth/logout/route.ts

@@ -0,0 +1,38 @@
+// import { cookies } from "next/headers";
+// import { NextResponse } from "next/server";
+
+// export const dynamic = "force-dynamic";
+
+// export async function GET() {
+//   const sessionKey = process.env.NEXT_PUBLIC_BASE_SESSION_KEY!; // Gunakan environment variable yang tidak diekspos ke client-side
+//   if (!sessionKey) {
+//     return NextResponse.json(
+//       { success: false, message: "Session key tidak ditemukan" },
+//       { status: 500 }
+//     );
+//   }
+
+//   const cookieStore = cookies();
+//   const sessionCookie = cookieStore.get(sessionKey);
+
+//   if (!sessionCookie) {
+//     return NextResponse.json(
+//       { success: false, message: "Session tidak ditemukan" },
+//       { status: 400 }
+//     );
+//   }
+
+//   try {
+//     cookieStore.delete(sessionKey);
+//     return NextResponse.json(
+//       { success: true, message: "Logout berhasil" },
+//       { status: 200 }
+//     );
+//   } catch (error) {
+//     console.error("Gagal menghapus cookie:", error);
+//     return NextResponse.json(
+//       { success: false, message: "Gagal melakukan logout" },
+//       { status: 500 }
+//     );
+//   }
+// }

src/app/api/[[...slugs]]/_lib/auth/register.ts

@@ -1,88 +0,0 @@
-import prisma from "@/lib/prisma";
-import bcrypt from "bcryptjs";
-import { Context } from "elysia";
-
-interface RegisterBody {
-  nama: string;
-  email: string;
-  password: string;
-}
-
-export default async function userRegister(context: Context) {
-  try {
-    const body = (await context.body) as RegisterBody;
-
-    // Validasi input
-    if (!body.nama || !body.email || !body.password) {
-      context.set.status = 400;
-      return {
-        success: false,
-        message: "Semua field harus diisi",
-        data: null
-      };
-    }
-
-    // Cek email sudah terdaftar
-    const existingUser = await prisma.user.findUnique({
-      where: { email: body.email },
-    });
-
-    if (existingUser) {
-      context.set.status = 400;
-      return {
-        success: false,
-        message: "Email sudah terdaftar",
-        data: null
-      };
-    }
-
-    // Dapatkan role warga
-    const role = await prisma.role.findFirst({ 
-      where: { name: "warga" } 
-    });
-
-    if (!role) {
-      context.set.status = 500;
-      return {
-        success: false,
-        message: "Role warga tidak ditemukan",
-        data: null
-      };
-    }
-
-    // Hash password
-    const hashedPassword = await bcrypt.hash(body.password, 10);
-
-    // Buat user baru
-    const user = await prisma.user.create({
-      data: {
-        nama: body.nama,
-        email: body.email,
-        password: hashedPassword,
-        roleId: role.id,
-      },
-      select: {
-        id: true,
-        nama: true,
-        email: true,
-        roleId: true,
-        createdAt: true,
-        updatedAt: true
-      }
-    });
-
-    return {
-      success: true,
-      message: "Berhasil mendaftar",
-      data: user,
-    };
-  } catch (error) {
-    console.error("Registration error:", error);
-    context.set.status = 500;
-    return {
-      success: false,
-      message: "Terjadi kesalahan saat mendaftar",
-      data: null
-    };
-  }
-}

src/app/api/[[...slugs]]/_lib/auth/resend/route.ts

@@ -0,0 +1,71 @@
+import prisma from "@/lib/prisma";
+import { randomOTP } from "../_lib/randomOTP";
+import { NextResponse } from "next/server";
+
+export async function POST(req: Request) {
+  if (req.method !== "POST") {
+    return NextResponse.json(
+      { success: false, message: "Method Not Allowed" },
+      { status: 405 }
+    );
+  }
+
+  try {
+    const codeOtp = randomOTP();
+    const body = await req.json();
+    const { nomor } = body;
+
+    const res = await fetch(
+      `https://wa.wibudev.com/code?nom=${nomor}&text=HIPMI - Kode ini bersifat RAHASIA dan JANGAN DI BAGIKAN KEPADA SIAPAPUN, termasuk anggota ataupun pengurus HIPMI lainnya.
+      \n
+      >> Kode OTP anda: ${codeOtp}.
+      `
+    );
+
+    const sendWa = await res.json();
+    if (sendWa.status !== "success")
+      return NextResponse.json(
+        {
+          success: false,
+          message: "Nomor Whatsapp Tidak Aktif",
+        },
+        { status: 400 }
+      );
+
+    const createOtpId = await prisma.kodeOtp.create({
+      data: {
+        nomor: nomor,
+        otp: codeOtp,
+      },
+    });
+
+    if (!createOtpId)
+      return NextResponse.json(
+        {
+          success: false,
+          message: "Gagal Membuat Kode OTP",
+        },
+        { status: 400 }
+      );
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Kode Verifikasi Dikirim",
+        kodeId: createOtpId.id,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error(" Error Resend OTP", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Server Whatsapp Error !!",
+      },
+      { status: 500 }
+    );
+  } finally {
+    await prisma.$disconnect();
+  }
+}

src/app/api/[[...slugs]]/_lib/auth/validasi/route.ts

@@ -0,0 +1,78 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { NextResponse } from "next/server";
+import { sessionCreate } from "../_lib/session_create";
+
+export async function POST(req: Request) {
+  if (req.method !== "POST") {
+    return NextResponse.json(
+      { success: false, message: "Method Not Allowed" },
+      { status: 405 }
+    );
+  }
+
+  try {
+    const { nomor } = await req.json();
+    const dataUser = await prisma.user.findUnique({
+      where: {
+        nomor: nomor,
+      },
+      select: {
+        id: true,
+        nomor: true,
+        username: true,
+        roleId: true,
+      },
+    });
+
+    if (dataUser == null)
+      return NextResponse.json(
+        { success: false, message: "Nomor Belum Terdaftar" },
+        { status: 200 }
+      );
+
+    const token = await sessionCreate({
+      sessionKey: process.env.NEXT_PUBLIC_BASE_SESSION_KEY!,
+      encodedKey: process.env.NEXT_PUBLIC_BASE_TOKEN_KEY!,
+      user: dataUser as any,
+    });
+
+    if (!token) {
+      return NextResponse.json(
+        { success: false, message: "Gagal membuat session" },
+        { status: 500 }
+      );
+    }
+    // Buat response dengan token dalam cookie
+    const response = NextResponse.json(
+      {
+        success: true,
+        message: "Berhasil Login",
+        roleId: dataUser.roleId,
+      },
+      { status: 200 }
+    );
+
+    // Set cookie dengan token yang sudah dipastikan tidak null
+    response.cookies.set(process.env.NEXT_PUBLIC_BASE_SESSION_KEY!, token, {
+      path: "/",
+      sameSite: "lax",
+      secure: process.env.NODE_ENV === "production",
+      maxAge: 30 * 24 * 60 * 60, // 30 hari dalam detik (1 bulan)
+    });
+
+    return response;
+  } catch (error) {
+    console.error("API Error or Server Error", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Maaf, Terjadi Keselahan",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  } finally {
+    await prisma.$disconnect();
+  }
+}

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

@@ -1,30 +1,64 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function artikelKesehatanFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || "";
+  const skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { title: { contains: search, mode: "insensitive" } },
+      { introduction: { content: { contains: search, mode: "insensitive" } } },
+      { symptom: { title: { contains: search, mode: "insensitive" } } },
+      { prevention: { title: { contains: search, mode: "insensitive" } } },
+      { firstaid: { title: { contains: search, mode: "insensitive" } } },
+      { mythvsfact: { title: { contains: search, mode: "insensitive" } } },
+      { doctorsign: { content: { contains: search, mode: "insensitive" } } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.artikelKesehatan.findMany({
+        where,
+        include: {
+          introduction: true,
+          symptom: true,
+          prevention: true,
+          firstaid: true,
+          mythvsfact: true,
+          doctorsign: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: "desc" },
+      }),
+      prisma.artikelKesehatan.count({ where }),
+    ]);
+    return {
+      success: true,
+      message: "Berhasil ambil keamanan lingkungan dengan pagination",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (e) {
+    console.error("Error di findMany paginated:", e);
+    return {
+      success: false,
+      message: "Gagal mengambil data keamanan lingkungan",
+    };
+  }
+}
 
-export default async function artikelKesehatanFindMany() {
-    try {
-        const data = await prisma.artikelKesehatan.findMany({
-            where: {
-                isActive: true,
-            },
-            include: {
-                introduction: true,
-                symptom: true,
-                prevention: true,
-                firstaid: true,
-                mythvsfact: true,
-                doctorsign: true,
-            }
-        })
-        return {
-            success: true,
-            message: "Success fetch artikel kesehatan",
-            data,
-        }
-    } catch (error) {
-        console.error("Find many error:", error);
-        return {
-            success: false,
-            message: "Failed fetch artikel kesehatan",
-        }
-    }
-}

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

@@ -1,11 +1,35 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function findManyFasilitasKesehatan() {
-    try {
-        const data = await prisma.fasilitasKesehatan.findMany({
-            where: {
-                isActive: true,
-            },
+async function fasilitasKesehatanFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { informasiUmum: { fasilitas: { contains: search, mode: 'insensitive' } } },
+      { layananUnggulan: { content: { contains: search, mode: 'insensitive' } } },
+      { dokterdanTenagaMedis: { name: { contains: search, mode: 'insensitive' } } },
+      { fasilitasPendukung: { content: { contains: search, mode: 'insensitive' } } },
+      { prosedurPendaftaran: { content: { contains: search, mode: 'insensitive' } } },
+      { tarifdanlayanan: { layanan: { contains: search, mode: 'insensitive' } } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+        prisma.fasilitasKesehatan.findMany({
+            where,
             include: {
                 informasiumum: true,
                 layananunggulan: true,
@@ -13,18 +37,29 @@ export default async function findManyFasilitasKesehatan() {
                 fasilitaspendukung: true,
                 prosedurpendaftaran: true,
                 tarifdanlayanan: true,
-            }
-        })
-        return {
-            success: true,
-            message: "Success fetch fasilitas kesehatan",
-            data,
-        }
-    } catch (error) {
-        console.error("Find many error:", error);
-        return {
-            success: false,
-            message: "Failed fetch fasilitas kesehatan",
-        }
+            },
+            skip,
+            take: limit,
+            orderBy: { createdAt: 'desc' },
+        }),
+        prisma.fasilitasKesehatan.count({ where }),
+    ]);
+
+    return {
+        success: true,
+        message: "Berhasil ambil keamanan lingkungan dengan pagination",
+        data,
+        page,
+        limit,
+        total,
+        totalPages: Math.ceil(total / limit),
+      };
+    } catch (e) {
+      console.error("Error di findMany paginated:", e);
+      return {
+        success: false,
+        message: "Gagal mengambil data keamanan lingkungan",
+      };
     }
-}
+}
+export default fasilitasKesehatanFindMany

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

@@ -1,30 +1,60 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function jadwalKegiatanFindMany() {
-    try {
-        const data = await prisma.jadwalKegiatan.findMany({
-            where: {
-                isActive: true,
-            },
-            include: {
-                informasijadwalkegiatan: true,
-                deskripsijadwalkegiatan: true,
-                layananjadwalkegiatan: true,
-                syaratketentuanjadwalkegiatan: true,
-                dokumenjadwalkegiatan: true,
-                pendaftaranjadwalkegiatan: true,
-            }
-        })
-        return {
-            success: true,
-            message: "Success fetch jadwal kegiatan",
-            data,
-        }
-    } catch (error) {
-        console.error("Find many error:", error);
-        return {
-            success: false,
-            message: "Failed fetch jadwal kegiatan",
-        }
-    }
-}
+export default async function jadwalKegiatanFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || "";
+  const skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { informasijadwalkegiatan: { name: { contains: search, mode: "insensitive" } } },
+      { deskripsijadwalkegiatan: { deskripsi: { contains: search, mode: "insensitive" } } },
+      {layananjadwalkegiatan: { content: { contains: search, mode: "insensitive" } } },
+      {syaratketentuanjadwalkegiatan: { content: { contains: search, mode: "insensitive" } } },
+      {dokumenjadwalkegiatan: { content: { contains: search, mode: "insensitive" } } },
+      {pendaftaranjadwalkegiatan: { content: { contains: search, mode: "insensitive" } } },
+    ];
+  }
+  try {
+    const [data, total] = await Promise.all([
+      prisma.jadwalKegiatan.findMany({
+        where,
+        include: {
+          informasijadwalkegiatan: true,
+          deskripsijadwalkegiatan: true,
+          layananjadwalkegiatan: true,
+          syaratketentuanjadwalkegiatan: true,
+          dokumenjadwalkegiatan: true,
+          pendaftaranjadwalkegiatan: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: "desc" },
+      }),
+      prisma.jadwalKegiatan.count({ where }),
+    ]);
+    return {
+      success: true,
+      message: "Success fetch jadwal kegiatan",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (error) {
+    console.error("Find many error:", error);
+    return {
+      success: false,
+      message: "Failed fetch jadwal kegiatan",
+    };
+  }
+}

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

@@ -4,6 +4,7 @@ import { Elysia, t } from "elysia";
 import userFindMany from "./findMany";
 import userFindUnique from "./findUnique";
 import userDelete from "./del"; // `delete` nggak boleh jadi nama file JS langsung, jadi biasanya `del.ts`
+import userUpdate from "./updt";
 
 const User = new Elysia({ prefix: "/api/user" })
   .get("/findMany", userFindMany)
@@ -12,6 +13,7 @@ const User = new Elysia({ prefix: "/api/user" })
     params: t.Object({
       id: t.String(),
     }),
-  }); // pakai PUT untuk soft delete
+  }) // pakai PUT untuk soft delete
+  .put("/updt", userUpdate);
 
 export default User;

src/app/api/[[...slugs]]/_lib/user/updt.ts

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function userUpdate(context: Context) {
+  try {
+    const { id, isActive } = await context.body as { id: string, isActive: boolean };
+
+    if (!id) {
+      return {
+        success: false,
+        message: "ID user wajib ada",
+      };
+    }
+
+    const updatedUser = await prisma.user.update({
+      where: { id },
+      data: { isActive },
+      select: {
+        id: true,
+        username: true,
+        nomor: true,
+        isActive: true,
+        updatedAt: true,
+      }
+    });
+
+    return {
+      success: true,
+      message: `User berhasil ${isActive ? "diaktifkan" : "dinonaktifkan"}`,
+      data: updatedUser,
+    };
+  } catch (e: any) {
+    console.error("Error update user:", e);
+    return {
+      success: false,
+      message: "Gagal mengupdate status user",
+    };
+  }
+}

src/app/api/auth/_lib/decrypt.ts

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { jwtVerify } from "jose";
+
+export async function decrypt({
+  token,
+  encodedKey,
+}: {
+  token: string;
+  encodedKey: string;
+}): Promise<Record<string, any> | null> {
+  if (!token || !encodedKey) {
+    console.error("Missing required parameters:", {
+      hasToken: !!token,
+      hasEncodedKey: !!encodedKey,
+    });
+    return null;
+  }
+
+  try {
+    const enc = new TextEncoder().encode(encodedKey);
+    const { payload } = await jwtVerify(token, enc, {
+      algorithms: ["HS256"],
+    });
+
+    if (!payload || !payload.user) {
+      console.error("Invalid payload structure:", {
+        hasPayload: !!payload,
+        hasUser: payload ? !!payload.user : false,
+      });
+      return null;
+    }
+
+    // Logging untuk debug
+    // console.log("Decrypt successful:", {
+    //   payloadExists: !!payload,
+    //   userExists: !!payload.user,
+    //   tokenPreview: token.substring(0, 10) + "...",
+    // });
+
+    return payload.user as Record<string, any>;
+  } catch (error) {
+    console.error("Token verification failed:", {
+      error,
+      tokenLength: token?.length,
+      errorName: error instanceof Error ? error.name : "Unknown error",
+      errorMessage: error instanceof Error ? error.message : String(error),
+    });
+    return null;
+  }
+}

src/app/api/auth/_lib/encrypt.ts

@@ -0,0 +1,26 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { SignJWT } from "jose";
+
+export async function encrypt({
+  user,
+  exp = "7 year",
+  encodedKey,
+}: {
+  user: Record<string, any>;
+  exp?: string;
+  encodedKey: string;
+}): Promise<string | null> {
+  try {
+    const enc = new TextEncoder().encode(encodedKey);
+    return new SignJWT({ user })
+      .setProtectedHeader({ alg: "HS256" })
+      .setIssuedAt()
+      .setExpirationTime(exp)
+      .sign(enc);
+  } catch (error) {
+    console.error("Gagal mengenkripsi", error);
+    return null;
+  }
+}
+
+// wibu:0.2.82

src/app/api/auth/_lib/get_KodeOtp_By_Id.ts

@@ -0,0 +1,13 @@
+"use server";
+
+import prisma from "@/lib/prisma";
+
+export async function auth_getCodeOtpByNumber({kodeId}: {kodeId: string}) {
+  const data = await prisma.kodeOtp.findFirst({
+    where: {
+      id: kodeId,
+    },
+  });
+
+  return data;
+}

src/app/api/auth/_lib/randomOTP.ts

@@ -0,0 +1,4 @@
+export function randomOTP() {
+  const random = Math.floor(Math.random() * (9000 - 1000 )) + 1000
+  return random;
+}

src/app/api/auth/_lib/session_create.ts

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { cookies } from "next/headers";
+import { encrypt } from "./encrypt";
+
+export async function sessionCreate({
+  sessionKey,
+  exp = "7 year",
+  encodedKey,
+  user,
+}: {
+  sessionKey: string;
+  exp?: string;
+  encodedKey: string;
+  user: Record<string, unknown>;
+}) {
+  const token = await encrypt({
+    exp,
+    encodedKey,
+    user,
+  });
+
+  const cookie: any = {
+    key: sessionKey,
+    value: token,
+    options: {
+      httpOnly: true,
+      sameSite: "lax",
+      path: "/",
+    },
+  };
+
+  (await cookies()).set(cookie.key, cookie.value, { ...cookie.options });
+  return token;
+}
+
+// wibu:0.2.82

src/app/api/auth/login/route.ts

@@ -0,0 +1,63 @@
+import prisma from "@/lib/prisma";
+
+import { NextResponse } from "next/server";
+import { randomOTP } from "../_lib/randomOTP";
+
+export async function POST(req: Request) {
+  if (req.method !== "POST") {
+    return NextResponse.json(
+      { success: false, message: "Method Not Allowed" },
+      { status: 405 }
+    );
+  }
+
+  try {
+    const codeOtp = randomOTP();
+    const body = await req.json();
+    const { nomor } = body;
+    const res = await fetch(
+      `https://wa.wibudev.com/code?nom=${nomor}&text=Website Desa Darmasaba - Kode ini bersifat RAHASIA dan JANGAN DI BAGIKAN KEPADA SIAPAPUN, termasuk anggota ataupun Admin lainnya. 
+      \n 
+      >> Kode OTP anda: ${codeOtp}.
+      `
+    );
+
+    const sendWa = await res.json();
+
+    if (sendWa.status !== "success")
+      return NextResponse.json(
+        { success: false, message: "Nomor Whatsapp Tidak Aktif" },
+        { status: 400 }
+      );
+
+    const createOtpId = await prisma.kodeOtp.create({
+      data: {
+        nomor: nomor,
+        otp: codeOtp,
+      },
+    });
+
+    if (!createOtpId)
+      return NextResponse.json(
+        { success: false, message: "Gagal mengirim kode OTP" },
+        { status: 400 }
+      );
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Kode verifikasi terkirim",
+        kodeId: createOtpId.id,
+      },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.log("Error Login", error);
+    return NextResponse.json(
+      { success: false, message: "Terjadi masalah saat login" , reason: error as Error },
+      { status: 500 }
+    );
+  } finally {
+    await prisma.$disconnect();
+  }
+}

src/app/api/auth/register/route.ts

@@ -0,0 +1,62 @@
+import prisma from "@/lib/prisma";
+import { NextResponse } from "next/server";
+
+export async function POST(req: Request) {
+  if (req.method !== "POST") {
+    return NextResponse.json(
+      { success: false, message: "Method Not Allowed" },
+      { status: 405 }
+    );
+  }
+
+  try {
+    const { data } = await req.json();
+
+    const cekUsername = await prisma.user.findUnique({
+      where: {
+        username: data.username,
+        nomor: data.nomor,
+      },
+    });
+
+    if (cekUsername)
+      return NextResponse.json({
+        success: false,
+        message: "Username sudah digunakan",
+      });
+
+    const createUser = await prisma.user.create({
+      data: {
+        username: data.username,
+        nomor: data.nomor,
+      },
+    });
+
+    if (!createUser)
+      return NextResponse.json(
+        { success: false, message: "Gagal Registrasi" },
+        { status: 500 }
+      );
+
+    return NextResponse.json(
+      {
+        success: true,
+        message: "Registrasi Berhasil, Anda Sedang Login",
+        // data: createUser,
+      },
+      { status: 201 }
+    );
+  } catch (error) {
+    console.error("Error registrasi:", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Maaf, Terjadi Keselahan",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  } finally {
+    await prisma.$disconnect();
+  }
+}