Fix Tampilan Mobile Penghargaan Landing Page

prisma/schema.prisma

@@ -672,17 +672,18 @@ model GalleryVideo {
 
 // ========================================= LAYANAN DESA ========================================= //
 model PelayananSuratKeterangan {
-  id        String       @id @default(cuid())
-  name      String
-  deskripsi String       @db.Text
-  image     FileStorage? @relation("PelayananSuratKeteranganImage", fields: [imageId], references: [id])
-  imageId   String?
-  image2    FileStorage? @relation("PelayananSuratKeteranganImage2", fields: [image2Id], references: [id])
-  image2Id  String?
-  createdAt DateTime     @default(now())
-  updatedAt DateTime     @updatedAt
-  deletedAt DateTime     @default(now())
-  isActive  Boolean      @default(true)
+  id               String             @id @default(cuid())
+  name             String
+  deskripsi        String             @db.Text
+  image            FileStorage?       @relation("PelayananSuratKeteranganImage", fields: [imageId], references: [id])
+  imageId          String?
+  image2           FileStorage?       @relation("PelayananSuratKeteranganImage2", fields: [image2Id], references: [id])
+  image2Id         String?
+  createdAt        DateTime           @default(now())
+  updatedAt        DateTime           @updatedAt
+  deletedAt        DateTime           @default(now())
+  isActive         Boolean            @default(true)
+  AjukanPermohonan AjukanPermohonan[]
 }
 
 model PelayananTelunjukSaktiDesa {
@@ -717,6 +718,20 @@ model PelayananPendudukNonPermanen {
   isActive  Boolean  @default(true)
 }
 
+model AjukanPermohonan {
+  id         String                   @id @default(cuid())
+  nama       String
+  nik        String
+  alamat     String
+  nomorKk    String
+  kategori   PelayananSuratKeterangan @relation(fields: [kategoriId], references: [id])
+  kategoriId String
+  createdAt  DateTime                 @default(now())
+  updatedAt  DateTime                 @updatedAt
+  deletedAt  DateTime                 @default(now())
+  isActive   Boolean                  @default(true)
+}
+
 // ========================================= PENGHARGAAN ========================================= //
 model Penghargaan {
   id        String       @id @default(cuid())
@@ -835,8 +850,8 @@ model JadwalKegiatan {
   syaratKetentuanJadwalKegiatanId String
   dokumenjadwalkegiatan           DokumenJadwalKegiatan         @relation(fields: [dokumenJadwalKegiatanId], references: [id])
   dokumenJadwalKegiatanId         String
-  pendaftaranjadwalkegiatan       PendaftaranJadwalKegiatan     @relation(fields: [pendaftaranJadwalKegiatanId], references: [id])
-  pendaftaranJadwalKegiatanId     String
+  pendaftaranjadwalkegiatan       PendaftaranJadwalKegiatan?     @relation(fields: [pendaftaranJadwalKegiatanId], references: [id])
+  pendaftaranJadwalKegiatanId     String?
   createdAt                       DateTime                      @default(now())
   updatedAt                       DateTime                      @updatedAt
   deletedAt                       DateTime                      @default(now())
@@ -1254,15 +1269,15 @@ model KontakDaruratToItem {
 
 // ========================================= PENCEGAHAN KRIMINALITAS ========================================= //
 model PencegahanKriminalitas {
-  id                String           @id @default(cuid())
-  judul             String
-  deskripsi         String
-  deskripsiSingkat  String
-  linkVideo         String
-  createdAt         DateTime         @default(now())
-  updatedAt         DateTime         @updatedAt
-  deletedAt         DateTime         @default(now())
-  isActive          Boolean          @default(true)
+  id               String   @id @default(cuid())
+  judul            String
+  deskripsi        String
+  deskripsiSingkat String
+  linkVideo        String
+  createdAt        DateTime @default(now())
+  updatedAt        DateTime @updatedAt
+  deletedAt        DateTime @default(now())
+  isActive         Boolean  @default(true)
 }
 
 // ========================================= LAPORAN PUBLIK ========================================= //

src/app/admin/(dashboard)/_state/desa/layananDesa.ts

@@ -71,6 +71,22 @@ const pelayananPendudukNonPermanenForm = {
   deskripsi: "",
 };
 
+const templateAjukanForm = z.object({
+  nama: z.string().min(1).max(5000),
+  nik: z.string().min(1).max(5000),
+  alamat: z.string().min(1).max(5000),
+  nomorKk: z.string().min(1).max(5000),
+  kategoriId: z.string().min(1).max(5000),
+});
+
+const defaultAjukanForm = {
+  nama: "",
+  nik: "",
+  alamat: "",
+  nomorKk: "",
+  kategoriId: "",
+};
+
 const suratKeterangan = proxy({
   create: {
     form: { ...suratKeteranganForm },
@@ -146,6 +162,30 @@ const suratKeterangan = proxy({
       }
     },
   },
+  findManyAll: {
+    data: null as Prisma.PelayananSuratKeteranganGetPayload<{
+      omit: { isActive: true };
+    }>[] | null,
+    loading: false,
+    load: async () => {
+      suratKeterangan.findManyAll.loading = true;
+      try {
+        const res = await ApiFetch.api.desa.layanan.pelayanansuratketerangan["findManyAll"].get();
+
+        if (res.status === 200 && res.data?.success) {
+          suratKeterangan.findManyAll.data = res.data.data || [];
+        } else {
+          suratKeterangan.findManyAll.data = [];
+          console.error("Failed to load surat keterangan all:", res.data?.message);
+        }
+      } catch (error) {
+        console.error("Error loading surat keterangan all:", error);
+        suratKeterangan.findManyAll.data = [];
+      } finally {
+        suratKeterangan.findManyAll.loading = false;
+      }
+    },
+  },
   findUnique: {
     data: null as Prisma.PelayananSuratKeteranganGetPayload<{
       include: {
@@ -769,11 +809,250 @@ const pelayananPendudukNonPermanen = proxy({
   },
 });
 
+const ajukanPermohonan = proxy({
+  create: {
+    form: { ...defaultAjukanForm },
+    loading: false,
+    async create() {
+      const cek = templateAjukanForm.safeParse(
+        ajukanPermohonan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        ajukanPermohonan.create.loading = true;
+        const res = await ApiFetch.api.desa.ajukanpermohonan[
+          "create"
+        ].post(ajukanPermohonan.create.form);
+        if (res.status === 200) {
+          ajukanPermohonan.findMany.load();
+          return toast.success("Ajukan permohonan berhasil disimpan!");
+        }
+        return toast.error("Gagal menyimpan ajukan permohonan");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        ajukanPermohonan.create.loading = false;
+      }
+    },
+    resetForm() {
+      ajukanPermohonan.create.form = { ...defaultAjukanForm };
+    },
+  },
+  findMany: {
+    data: null as Prisma.AjukanPermohonanGetPayload<{
+      include: {
+        kategori: true;
+      };
+    }>[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      // Change to arrow function
+      ajukanPermohonan.findMany.loading = true; // Use the full path to access the property
+      ajukanPermohonan.findMany.page = page;
+      ajukanPermohonan.findMany.search = search;
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        const res = await ApiFetch.api.desa.ajukanpermohonan[
+          "findMany"
+        ].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          ajukanPermohonan.findMany.data = res.data.data || [];
+          ajukanPermohonan.findMany.total = res.data.total || 0;
+          ajukanPermohonan.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load ajukan permohonan:", res.data?.message);
+          ajukanPermohonan.findMany.data = [];
+          ajukanPermohonan.findMany.total = 0;
+          ajukanPermohonan.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading ajukan permohonan:", error);
+        ajukanPermohonan.findMany.data = [];
+        ajukanPermohonan.findMany.total = 0;
+        ajukanPermohonan.findMany.totalPages = 1;
+      } finally {
+        ajukanPermohonan.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.AjukanPermohonanGetPayload<{
+      include: {
+        kategori: true;
+      }
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/desa/ajukanpermohonan/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          ajukanPermohonan.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch ajukan permohonan:", res.statusText);
+          ajukanPermohonan.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching ajukan permohonan:", error);
+        ajukanPermohonan.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        ajukanPermohonan.delete.loading = true;
+        const response = await fetch(
+          `/api/desa/ajukanpermohonan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        const result = await response.json();
+        if (response.ok) {
+          toast.success(result.message || "Ajukan permohonan berhasil dihapus");
+          await ajukanPermohonan.findMany.load(); // refresh list
+        } else {
+          toast.error(result.message || "Gagal menghapus ajukan permohonan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus ajukan permohonan");
+      } finally {
+        ajukanPermohonan.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultAjukanForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(
+          `/api/desa/ajukanpermohonan/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            nama: data.nama,
+            nik: data.nik,
+            alamat: data.alamat,
+            nomorKk: data.nomorKk,
+            kategoriId: data.kategoriId,
+          };
+          return data;
+        } else {
+          throw new Error(result.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error fetching ajukan permohonan:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateAjukanForm.safeParse(
+        ajukanPermohonan.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        ajukanPermohonan.edit.loading = true;
+        const response = await fetch(
+          `/api/desa/ajukanpermohonan/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              nama: this.form.nama,
+              nik: this.form.nik,
+              alamat: this.form.alamat,
+              nomorKk: this.form.nomorKk,
+              kategoriId: this.form.kategoriId,
+            }),
+          }
+        );
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success(result.message || "Ajukan permohonan berhasil diupdate");
+          await ajukanPermohonan.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal mengupdate ajukan permohonan"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating ajukan permohonan:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update ajukan permohonan"
+        );
+        return false;
+      } finally {
+        ajukanPermohonan.edit.loading = false;
+      }
+    },
+  },
+});
+
 const stateLayananDesa = proxy({
   suratKeterangan,
   pelayananPerizinanBerusaha,
   pelayananTelunjukSaktiDesa,
   pelayananPendudukNonPermanen,
+  ajukanPermohonan,
 });
 
 export default stateLayananDesa;

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

@@ -26,14 +26,6 @@ const templateForm = z.object({
   dokumenJadwalKegiatan: z.object({
     content: z.string().min(1, "Content minimal 1 karakter"),
   }),
-  pendaftaranJadwalKegiatan: z.object({
-    name: z.string().min(1, "Name minimal 1 karakter"),
-    tanggal: z.string().min(1, "Tanggal minimal 1 karakter"),
-    namaOrangtua: z.string().min(1, "Nama Orangtua minimal 1 karakter"),
-    nomor: z.string().min(1, "Nomor minimal 1 karakter"),
-    alamat: z.string().min(1, "Alamat minimal 1 karakter"),
-    catatan: z.string().min(1, "Catatan minimal 1 karakter"),
-  }),
 });
 
 const defaultForm = {
@@ -55,15 +47,7 @@ const defaultForm = {
   },
   dokumenJadwalKegiatan: {
     content: "",
-  },
-  pendaftaranJadwalKegiatan: {
-    name: "",
-    tanggal: "",
-    namaOrangtua: "",
-    nomor: "",
-    alamat: "",
-    catatan: "",
-  },
+  }
 };
 
 const jadwalkegiatanState = proxy({
@@ -116,7 +100,6 @@ const jadwalkegiatanState = proxy({
             deskripsijadwalkegiatan: true;
             layananjadwalkegiatan: true;
             dokumenjadwalkegiatan: true;
-            pendaftaranjadwalkegiatan: true;
           };
         }>[]
       | null,
@@ -161,7 +144,6 @@ const jadwalkegiatanState = proxy({
         layananjadwalkegiatan: true;
         syaratketentuanjadwalkegiatan: true;
         dokumenjadwalkegiatan: true;
-        pendaftaranjadwalkegiatan: true;
       };
     }> | null,
     loading: false,
@@ -209,15 +191,7 @@ const jadwalkegiatanState = proxy({
         },
         dokumenJadwalKegiatan: {
           content: data.dokumenjadwalkegiatan.content,
-        },
-        pendaftaranJadwalKegiatan: {
-          name: data.pendaftaranjadwalkegiatan.name,
-          tanggal: data.pendaftaranjadwalkegiatan.tanggal,
-          namaOrangtua: data.pendaftaranjadwalkegiatan.namaOrangtua,
-          nomor: data.pendaftaranjadwalkegiatan.nomor,
-          alamat: data.pendaftaranjadwalkegiatan.alamat,
-          catatan: data.pendaftaranjadwalkegiatan.catatan,
-        },
+        }
       };
     },
     async submit() {
@@ -259,20 +233,6 @@ const jadwalkegiatanState = proxy({
             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,
-          },
         };
 
         const res = await fetch(

src/app/admin/(dashboard)/_state/lingkungan/gotong-royong.ts

@@ -354,14 +354,39 @@ const kategoriKegiatan = proxy({
       id: string;
       nama: string;
     }> | null,
-    async load() {
-      const res = await ApiFetch.api.lingkungan.kategorikegiatan[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        kategoriKegiatan.findMany.data = res.data?.data ?? [];
-      }
-    },
+     page: 1,
+        totalPages: 1,
+        loading: false,
+        search: "",
+        load: async (page = 1, limit = 10, search = "") => {
+          kategoriKegiatan.findMany.loading = true; // ✅ Akses langsung via nama path
+          kategoriKegiatan.findMany.page = page;
+          kategoriKegiatan.findMany.search = search;
+    
+          try {
+            const query: any = { page, limit };
+            if (search) query.search = search;
+    
+            const res =
+              await ApiFetch.api.lingkungan.kategorikegiatan[
+                "find-many"
+              ].get({ query });
+    
+            if (res.status === 200 && res.data?.success) {
+              kategoriKegiatan.findMany.data = res.data.data ?? [];
+              kategoriKegiatan.findMany.totalPages = res.data.totalPages ?? 1;
+            } else {
+              kategoriKegiatan.findMany.data = [];
+              kategoriKegiatan.findMany.totalPages = 1;
+            }
+          } catch (err) {
+            console.error("Gagal fetch kategori kegiatan paginated:", err);
+            kategoriKegiatan.findMany.data = [];
+            kategoriKegiatan.findMany.totalPages = 1;
+          } finally {
+            kategoriKegiatan.findMany.loading = false;
+          }
+        },
   },
   findUnique: {
     data: null as Prisma.KategoriKegiatanGetPayload<{

src/app/admin/(dashboard)/desa/_com/layoutTabLayanan.tsx

@@ -4,7 +4,7 @@ import colors from '@/con/colors';
 import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
-import { IconFileText, IconBuildingStore, IconSparkles, IconUsers } from '@tabler/icons-react';
+import { IconFileText, IconBuildingStore, IconSparkles, IconUsers, IconUsersPlus } from '@tabler/icons-react';
 
 function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
     const router = useRouter()
@@ -37,6 +37,13 @@ function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
             href: "/admin/desa/layanan/pelayanan_penduduk_non_permanent",
             icon: <IconUsers size={18} stroke={1.8} />,
             tooltip: "Pendataan penduduk non-permanent"
+        },
+        {
+            label: "Ajukan Permohonan",
+            value: "ajukanpermohonan",
+            href: "/admin/desa/layanan/ajukan_permohonan",
+            icon: <IconUsersPlus size={18} stroke={1.8} />,
+            tooltip: "Ajukan permohonan"
         }
     ];
 

src/app/admin/(dashboard)/desa/berita/list-berita/page.tsx

@@ -5,7 +5,6 @@ import {
   Button,
   Center,
   Group,
-  Image,
   Pagination,
   Paper,
   Skeleton,
@@ -18,7 +17,7 @@ import {
   TableTr,
   Text,
   Title,
-  Tooltip,
+  Tooltip
 } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
@@ -87,7 +86,6 @@ function ListBerita({ search }: { search: string }) {
               <TableTr>
                 <TableTh style={{ width: '30%' }}>Judul</TableTh>
                 <TableTh style={{ width: '20%' }}>Kategori</TableTh>
-                <TableTh style={{ width: '25%' }}>Gambar</TableTh>
                 <TableTh style={{ width: '15%' }}>Aksi</TableTh>
               </TableTr>
             </TableThead>
@@ -96,7 +94,7 @@ function ListBerita({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd style={{ width: '30%' }}>
-                      <Box w={200}>
+                      <Box w={150}>
                         <Text fw={500} truncate="end" lineClamp={1}>
                           {item.judul}
                         </Text>
@@ -107,19 +105,6 @@ function ListBerita({ search }: { search: string }) {
                         {item.kategoriBerita?.name || '-'}
                       </Text>
                     </TableTd>
-                    <TableTd style={{ width: '25%' }}>
-                      <Box
-                        w={80}
-                        h={80}
-                        style={{ borderRadius: 8, overflow: 'hidden' }}
-                      >
-                        {item.image?.link ? (
-                          <Image loading='lazy' src={item.image.link} alt="gambar" fit="cover" />
-                        ) : (
-                          <Box bg={colors['blue-button']} w="100%" h="100%" />
-                        )}
-                      </Box>
-                    </TableTd>
                     <TableTd style={{ width: '15%' }}>
                       <Button
                         variant="light"

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

@@ -0,0 +1,178 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
+import colors from '@/con/colors';
+import {
+    Box,
+    Button,
+    Group,
+    Paper,
+    Select,
+    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 EditAjukanPermohonan() {
+    const router = useRouter();
+    const params = useParams();
+    const stateAjukan = useProxy(stateLayananDesa.ajukanPermohonan);
+
+    const [formData, setFormData] = useState({
+        nama: stateAjukan.edit.form.nama,
+        nik: stateAjukan.edit.form.nik,
+        alamat: stateAjukan.edit.form.alamat,
+        nomorKk: stateAjukan.edit.form.nomorKk,
+        kategoriId: stateAjukan.edit.form.kategoriId,
+    });
+
+    useEffect(() => {
+        stateLayananDesa.suratKeterangan.findManyAll.load();
+        const loadAjukan = async () => {
+            const id = params?.id as string;
+            if (!id) return;
+
+            try {
+                const data = await stateAjukan.edit.load(id);
+                if (data) {
+                    setFormData({
+                        nama: data.nama || '',
+                        nik: data.nik || '',
+                        alamat: data.alamat || '',
+                        nomorKk: data.nomorKk || '',
+                        kategoriId: data.kategoriId || '',
+                    });
+                }
+            } catch (error) {
+                console.error('Error loading ajukan:', error);
+                toast.error('Gagal memuat data ajukan');
+            }
+        };
+
+        loadAjukan();
+    }, [params?.id]);
+
+    const handleSubmit = async () => {
+        try {
+            stateAjukan.edit.form = {
+                ...stateAjukan.edit.form,
+                ...formData,
+            };
+            toast.success('Ajukan berhasil diperbarui!');
+            router.push('/admin/desa/layanan/ajukan_permohonan');
+        } catch (error) {
+            console.error('Error updating ajukan:', error);
+            toast.error('Terjadi kesalahan saat memperbarui ajukan');
+        }
+    };
+
+    return (
+        <Box px={{ base: 'sm', md: 'lg' }} py="md">
+            {/* Back Button */}
+            <Group mb="md">
+                <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+                    <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+                        <IconArrowBack color={colors['blue-button']} size={24} />
+                    </Button>
+                </Tooltip>
+                <Title order={4} ml="sm" c="dark">
+                    Edit Ajukan Permohonan
+                </Title>
+            </Group>
+
+            <Paper
+                w={{ base: '100%', md: '50%' }}
+                bg={colors['white-1']}
+                p="lg"
+                radius="md"
+                shadow="sm"
+                style={{ border: '1px solid #e0e0e0' }}
+            >
+                <Stack gap="md">
+                    <TextInput
+                        label="Nama"
+                        placeholder="Masukkan nama"
+                        value={formData.nama}
+                        onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+                        required
+                    />
+
+                    <TextInput
+                        type="number"
+                        label="NIK"
+                        placeholder="Masukkan NIK"
+                        value={formData.nik}
+                        onChange={(e) => setFormData({ ...formData, nik: e.target.value })}
+                        required
+                    />
+
+                    <TextInput
+                        label="Alamat"
+                        placeholder="Masukkan alamat"
+                        value={formData.alamat}
+                        onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
+                        required
+                    />
+
+                    <TextInput
+                        type="number"
+                        label="Nomor KK"
+                        placeholder="Masukkan nomor KK"
+                        value={formData.nomorKk}
+                        onChange={(e) => setFormData({ ...formData, nomorKk: e.target.value })}
+                        required
+                    />
+
+                    <Select
+                        label="Kategori"
+                        placeholder="Pilih kategori"
+                        data={stateLayananDesa.suratKeterangan.findManyAll.data?.map((item) => ({
+                            label: item.name,
+                            value: item.id,
+                        }))}
+                        value={formData.kategoriId || null}
+                        onChange={(val: string | null) => {
+                            if (val) {
+                                const selected = stateLayananDesa.suratKeterangan.findMany.data?.find(
+                                    (item) => item.id === val
+                                );
+                                if (selected) {
+                                    stateAjukan.edit.form.kategoriId = selected.id;
+                                }
+                            } else {
+                                stateAjukan.edit.form.kategoriId = '';
+                            }
+                        }}
+                        searchable
+                        clearable
+                        nothingFoundMessage="Tidak ditemukan"
+                        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 EditAjukanPermohonan;

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

@@ -0,0 +1,172 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
+import colors from '@/con/colors';
+import {
+    Box,
+    Button,
+    Group,
+    Paper,
+    Skeleton,
+    Stack,
+    Text,
+    Tooltip
+} from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function DetailAjukanPermohonan() {
+  const ajukanPermohonanState = useProxy(stateLayananDesa.ajukanPermohonan);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const params = useParams();
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    ajukanPermohonanState.findUnique.load(params?.id as string);
+  }, []);
+
+  const handleHapus = () => {
+    if (selectedId) {
+      ajukanPermohonanState.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push('/admin/desa/layanan/ajukan_permohonan');
+    }
+  };
+
+  if (!ajukanPermohonanState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={500} radius="md" />
+      </Stack>
+    );
+  }
+
+  const data = ajukanPermohonanState.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: '60%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Surat Keterangan
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Nama
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data?.nama || '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  NIK
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data?.nik || '-'}
+                </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">
+                  Nomor KK
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data?.nomorKk || '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Kategori
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data?.kategori.name || '-'}
+                </Text>
+              </Box>
+
+              <Group gap="sm">
+                <Tooltip label="Hapus Surat" withArrow position="top">
+                  <Button
+                    color="red"
+                    onClick={() => {
+                      setSelectedId(data.id);
+                      setModalHapus(true);
+                    }}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                    disabled={ajukanPermohonanState.delete.loading}
+                  >
+                    <IconTrash size={20} />
+                  </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Surat" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() =>
+                      router.push(
+                        `/admin/desa/layanan/ajukan_permohonan/${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 ajukan permohonan ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailAjukanPermohonan;

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

@@ -0,0 +1,155 @@
+/* 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 { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import stateLayananDesa from '../../../_state/desa/layananDesa';
+
+function AjukanPermohonan() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Pelayanan Ajukan Permohonan'
+        placeholder='Cari nama atau deskripsi...'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListAjukanPermohonan search={search} />
+    </Box>
+  );
+}
+
+function ListAjukanPermohonan({ search }: { search: string }) {
+  const AjukanPermohonanState = useProxy(stateLayananDesa.ajukanPermohonan);
+  const router = useRouter();
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = AjukanPermohonanState.findMany;
+
+  useEffect(() => {
+    load(page, 10, search);
+  }, [page, search]);
+
+  // Loading state
+  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">
+        <Title order={4}>List Ajukan Permohonan</Title>
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '30%' }}>Nama</TableTh>
+                <TableTh style={{ width: '45%' }}>Alamat</TableTh>
+                <TableTh style={{ width: '15%' }}>NIK</TableTh>
+                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {data.length > 0 ? (
+                data.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd style={{ width: '30%' }}>
+                      <Box w={200}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.nama}
+                        </Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd style={{ width: '45%' }}>
+                      <Box w={200}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.alamat}
+                        </Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd style={{ width: '45%' }}>
+                      <Box w={200}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.nik}
+                        </Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd style={{ width: '15%' }}>
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="blue"
+                        leftSection={<IconDeviceImacCog size={16} />}
+                        onClick={() =>
+                          router.push(`/admin/desa/layanan/ajukan_permohonan/${item.id}`)
+                        }
+                      >
+                        Detail
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={3}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada data ajukan permohonan yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
+      </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10, search);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
+        />
+      </Center>
+    </Box>
+  );
+}
+
+export default AjukanPermohonan;

src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/page.tsx

@@ -94,9 +94,11 @@ function ListPengumuman({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
-                        {item.judul}
-                      </Text>
+                      <Box w={150}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.judul}
+                        </Text>
+                      </Box>
                     </TableTd>
                     <TableTd>
                       <Text fz="sm" c="dimmed">

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

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip, Pagination } from '@mantine/core';
+import { Box, Button, Center, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip, Pagination, Group } from '@mantine/core';
 import { IconEdit, IconSearch, IconTrash, IconPlus } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -60,7 +60,7 @@ function ListKategoriPotensi({ search }: { search: string }) {
     <Box py={10}>
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Stack>
-          <Box style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 15 }}>
+          <Group justify="space-between">
             <Title order={4}>List Kategori Potensi</Title>
             <Tooltip label="Tambah Kategori Potensi" withArrow>
               <Button
@@ -72,7 +72,7 @@ function ListKategoriPotensi({ search }: { search: string }) {
                 Tambah Baru
               </Button>
             </Tooltip>
-          </Box>
+          </Group>
 
           <Box style={{ overflowX: 'auto' }}>
             <Table highlightOnHover striped withRowBorders style={{ minWidth: '700px' }}>

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

@@ -114,12 +114,22 @@ function ListFasilitasKesehatan({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
-                        {item.name}
-                      </Text>
+                      <Box w={150}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.name}
+                        </Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Box w={150}>
+                        {item.dokterdantenagamedis?.name || '-'}
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Box w={150}>
+                        {item.tarifdanlayanan?.layanan || '-'}
+                      </Box>
                     </TableTd>
-                    <TableTd>{item.dokterdantenagamedis?.name || '-'}</TableTd>
-                    <TableTd>{item.tarifdanlayanan?.layanan || '-'}</TableTd>
                     <TableTd>
                       <Button
                         variant="light"

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

@@ -149,16 +149,30 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
               {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',
-                      })}
+                      <Box w={150}>
+                        {item.nama}
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Box w={150}>
+                        {new Date(item.tanggal).toLocaleDateString('id-ID', {
+                          day: '2-digit',
+                          month: 'long',
+                          year: 'numeric',
+                        })}
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Box w={150}>
+                        {item.jenisKelamin}
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Box w={150}>
+                        {item.penyakit}
+                      </Box>
                     </TableTd>
-                    <TableTd>{item.jenisKelamin}</TableTd>
-                    <TableTd>{item.penyakit}</TableTd>
                     <TableTd>
                       <Button
                         variant="light"
@@ -212,24 +226,26 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
         <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>
+            <Center>
+              <BarChart
+                width={isMobile ? 320 : isTablet ? 600 : 800} // kecilin biar muat
+                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>
+            </Center>
           ) : (
             <Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
           )}

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

@@ -41,14 +41,6 @@ interface JadwalKegiatanFormBase {
   dokumenJadwalKegiatan: {
     content: string;
   };
-  pendaftaranJadwalKegiatan: {
-    name: string;
-    tanggal: string;
-    namaOrangtua: string;
-    nomor: string;
-    alamat: string;
-    catatan: string;
-  };
 }
 
 function EditJadwalKegiatan() {
@@ -76,14 +68,6 @@ function EditJadwalKegiatan() {
     dokumenJadwalKegiatan: {
       content: stateJadwalKegiatan.edit.form.dokumenJadwalKegiatan?.content || '',
     },
-    pendaftaranJadwalKegiatan: {
-      name: stateJadwalKegiatan.edit.form.pendaftaranJadwalKegiatan?.name || '',
-      tanggal: stateJadwalKegiatan.edit.form.pendaftaranJadwalKegiatan?.tanggal || '',
-      namaOrangtua: stateJadwalKegiatan.edit.form.pendaftaranJadwalKegiatan?.namaOrangtua || '',
-      nomor: stateJadwalKegiatan.edit.form.pendaftaranJadwalKegiatan?.nomor || '',
-      alamat: stateJadwalKegiatan.edit.form.pendaftaranJadwalKegiatan?.alamat || '',
-      catatan: stateJadwalKegiatan.edit.form.pendaftaranJadwalKegiatan?.catatan || '',
-    },
   });
 
   useEffect(() => {
@@ -115,14 +99,6 @@ function EditJadwalKegiatan() {
             dokumenJadwalKegiatan: {
               content: form.dokumenJadwalKegiatan?.content || '',
             },
-            pendaftaranJadwalKegiatan: {
-              name: form.pendaftaranJadwalKegiatan?.name || '',
-              tanggal: form.pendaftaranJadwalKegiatan?.tanggal || '',
-              namaOrangtua: form.pendaftaranJadwalKegiatan?.namaOrangtua || '',
-              nomor: form.pendaftaranJadwalKegiatan?.nomor || '',
-              alamat: form.pendaftaranJadwalKegiatan?.alamat || '',
-              catatan: form.pendaftaranJadwalKegiatan?.catatan || '',
-            },
           });
         }
       } catch (error) {
@@ -142,8 +118,7 @@ function EditJadwalKegiatan() {
         deskripsiJadwalKegiatan: { ...formData.deskripsiJadwalKegiatan },
         layananJadwalKegiatan: { ...formData.layananJadwalKegiatan },
         syaratKetentuanJadwalKegiatan: { ...formData.syaratKetentuanJadwalKegiatan },
-        dokumenJadwalKegiatan: { ...formData.dokumenJadwalKegiatan },
-        pendaftaranJadwalKegiatan: { ...formData.pendaftaranJadwalKegiatan },
+        dokumenJadwalKegiatan: { ...formData.dokumenJadwalKegiatan }
       };
 
       const success = await stateJadwalKegiatan.edit.submit();
@@ -252,7 +227,7 @@ function EditJadwalKegiatan() {
 
           {/* Dokumen */}
           <Box>
-            <Text fz="md" fw="bold">Dokumen Jadwal Kegiatan</Text>
+            <Text fz="md" fw="bold">Dokumen Yang Perlu Dibawa</Text>
             <EditEditor
               value={formData.dokumenJadwalKegiatan.content}
               onChange={(val) => setFormData((prev) => ({
@@ -262,41 +237,6 @@ function EditJadwalKegiatan() {
             />
           </Box>
 
-          {/* 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

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

@@ -109,18 +109,7 @@ function DetailJadwalKegiatan() {
                 <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">

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

@@ -42,15 +42,7 @@ function CreateJadwalKegiatan() {
       },
       dokumenJadwalKegiatan: {
         content: '',
-      },
-      pendaftaranJadwalKegiatan: {
-        name: '',
-        tanggal: '',
-        namaOrangtua: '',
-        nomor: '',
-        alamat: '',
-        catatan: '',
-      },
+      }
     };
   };
 
@@ -173,7 +165,7 @@ function CreateJadwalKegiatan() {
           </Box>
 
           <Box>
-            <Text fz="md" fw="bold" mb="sm">Dokumen</Text>
+            <Text fz="md" fw="bold" mb="sm">Dokumen Yang Perlu Dibawa</Text>
             <CreateEditor
               value={stateJadwalKegiatan.create.form.dokumenJadwalKegiatan.content}
               onChange={(e) => {
@@ -181,65 +173,6 @@ function CreateJadwalKegiatan() {
               }}
             />
           </Box>
-
-          <Box>
-            <Text fz="md" fw="bold" mb="sm">Pendaftaran Jadwal Kegiatan</Text>
-            <TextInput
-              label="Nama"
-              required
-              placeholder="Masukkan nama"
-              value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.name}
-              onChange={(e) => {
-                stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.name = e.target.value;
-              }}
-            />
-            <TextInput
-              type="date"
-              required
-              label="Tanggal"
-              value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.tanggal}
-              onChange={(e) => {
-                stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.tanggal = e.target.value;
-              }}
-            />
-            <TextInput
-              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="Nomor"
-              required
-              placeholder="Masukkan nomor"
-              value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.nomor}
-              onChange={(e) => {
-                stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.nomor = e.target.value;
-              }}
-            />
-            <TextInput
-              label="Alamat"
-              required
-              placeholder="Masukkan alamat"
-              value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.alamat}
-              onChange={(e) => {
-                stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.alamat = e.target.value;
-              }}
-            />
-            <TextInput
-              label="Catatan"
-              required
-              placeholder="Masukkan catatan"
-              value={stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.catatan}
-              onChange={(e) => {
-                stateJadwalKegiatan.create.form.pendaftaranJadwalKegiatan.catatan = e.target.value;
-              }}
-            />
-          </Box>
-
           {/* Save Button */}
           <Group justify="right">
             <Button

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

@@ -111,11 +111,14 @@ function ListJadwalKegiatan({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
-                        {item.informasijadwalkegiatan.name}
-                      </Text>
+                      <Box w={150}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.informasijadwalkegiatan.name}
+                        </Text>
+                      </Box>
                     </TableTd>
                     <TableTd>
+                      <Box w={150}>
                       {new Date(item.informasijadwalkegiatan.tanggal).toLocaleDateString(
                         'id-ID',
                         {
@@ -124,12 +127,19 @@ function ListJadwalKegiatan({ search }: { search: string }) {
                           year: 'numeric',
                         }
                       )}
+                      </Box>
                     </TableTd>
-                    <TableTd>{item.informasijadwalkegiatan.waktu}</TableTd>
                     <TableTd>
-                      <Text truncate fz="sm" c="dimmed">
-                        {item.informasijadwalkegiatan.lokasi}
-                      </Text>
+                      <Box w={150}>
+                        {item.informasijadwalkegiatan.waktu}
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Box w={150}>
+                        <Text truncate fz="sm" c="dimmed">
+                          {item.informasijadwalkegiatan.lokasi}
+                        </Text>
+                      </Box>
                     </TableTd>
                     <TableTd>
                       <Button

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

@@ -124,22 +124,32 @@ function ListKelahiran({ search }: { search: string }) {
                filteredData.map((item) => (
                  <TableTr key={item.id}>
                    <TableTd>
+                    <Box w={150}>
                      <Text fw={500} truncate="end" lineClamp={1}>
                        {item.nama}
                      </Text>
+                     </Box>
                    </TableTd>
                    <TableTd>
+                    <Box w={150}>
                      {new Date(item.tanggal).toLocaleDateString('id-ID', {
                        day: '2-digit',
                        month: 'long',
                        year: 'numeric',
                      })}
+                     </Box>
                    </TableTd>
-                   <TableTd>{item.jenisKelamin}</TableTd>
                    <TableTd>
+                    <Box w={150}>
+                     {item.jenisKelamin}
+                     </Box>
+                   </TableTd>
+                   <TableTd>
+                    <Box w={150}>
                      <Text truncate fz="sm" c="dimmed">
                        {item.alamat}
                      </Text>
+                     </Box>
                    </TableTd>
                    <TableTd>
                      <Button

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

@@ -13,152 +13,150 @@ 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);
- }, []);
+  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");
-   }
- };
+  const handleHapus = () => {
+    if (selectedId) {
+      state.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran");
+    }
+  };
 
 
- if (!state.findUnique.data) {
-   return (
-     <Stack py={10}>
-       <Skeleton height={500} radius="md" />
-     </Stack>
-   );
- }
+  if (!state.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={500} radius="md" />
+      </Stack>
+    );
+  }
 
 
- const data = state.findUnique.data;
+  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>
+  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
+        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>
+          <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">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">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">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>
+              <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>
+              <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>
+                <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>
- );
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah Anda yakin ingin menghapus data ini?"
+      />
+    </Box>
+  );
 }
 
 

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

@@ -122,19 +122,33 @@ function ListKematian({ search }: { search: string }) {
                filteredData.map((item) => (
                  <TableTr key={item.id}>
                    <TableTd>
+                    <Box w={150}>
                      <Text fw={500} truncate="end" lineClamp={1}>
                        {item.nama}
                      </Text>
+                     </Box>
                    </TableTd>
                    <TableTd>
+                    <Box w={150}> 
                      {new Date(item.tanggal).toLocaleDateString('id-ID', {
                        day: '2-digit',
                        month: 'long',
                        year: 'numeric',
                      })}
+                     </Box>
+                   </TableTd>
+                   <TableTd>
+                    <Box w={150}>
+                     {item.jenisKelamin}
+                     </Box>
+                   </TableTd>
+                   <TableTd>
+                    <Box w={150}>
+                     <Text truncate fz="sm" c="dimmed">
+                       {item.alamat}
+                     </Text>
+                     </Box>
                    </TableTd>
-                   <TableTd>{item.jenisKelamin}</TableTd>
-                   <TableTd>{item.alamat}</TableTd>
                    <TableTd>
                      <Button
                        variant="light"

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

@@ -4,7 +4,7 @@ import {
   Box,
   Button,
   Center,
-  Image,
+  Group,
   Pagination,
   Paper,
   Skeleton,
@@ -17,16 +17,15 @@ import {
   TableTr,
   Text,
   Title,
-  Tooltip,
-  Group,
+  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';
-import infoWabahPenyakit from '../../_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
 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 infoWabahPenyakit from '../../_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
 
 function InfoWabahPenyakit() {
   const [search, setSearch] = useState("");
@@ -96,7 +95,6 @@ function ListInfoWabahPenyakit({ search }: { search: string }) {
               <TableTr>
                 <TableTh>Judul</TableTh>
                 <TableTh>Deskripsi Singkat</TableTh>
-                <TableTh>Image</TableTh>
                 <TableTh>Aksi</TableTh>
               </TableTr>
             </TableThead>
@@ -105,17 +103,18 @@ function ListInfoWabahPenyakit({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
-                        {item.name}
-                      </Text>
+                      <Box w={200}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.name}
+                        </Text>
+                      </Box>
                     </TableTd>
                     <TableTd>
-                      <Text truncate fz="sm" c="dimmed">
-                        {item.deskripsiSingkat}
-                      </Text>
-                    </TableTd>
-                    <TableTd>
-                      <Image w={100} src={item.image?.link} alt="image" radius="md" loading="lazy"/>
+                      <Box w={200}>
+                        <Text truncate fz="sm" c="dimmed">
+                          {item.deskripsiSingkat}
+                        </Text>
+                      </Box>
                     </TableTd>
                     <TableTd>
                       <Button

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

@@ -4,7 +4,7 @@ import {
   Box,
   Button,
   Center,
-  Image,
+  Group,
   Pagination,
   Paper,
   Skeleton,
@@ -17,7 +17,7 @@ import {
   TableTr,
   Text,
   Title,
-  Tooltip,
+  Tooltip
 } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
@@ -71,7 +71,7 @@ function ListKontakDarurat({ search }: { search: string }) {
       <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" }}>
+          <Group justify="space-between">
             <Title order={4}>Daftar Kontak Darurat</Title>
             <Tooltip label="Tambah Kontak Darurat" withArrow>
               <Button
@@ -83,7 +83,7 @@ function ListKontakDarurat({ search }: { search: string }) {
                 Tambah Baru
               </Button>
             </Tooltip>
-          </Box>
+          </Group>
         </Stack>
 
         {/* Tabel */}
@@ -93,7 +93,6 @@ function ListKontakDarurat({ search }: { search: string }) {
               <TableTr>
                 <TableTh>Judul</TableTh>
                 <TableTh>Deskripsi</TableTh>
-                <TableTh>Image</TableTh>
                 <TableTh>Aksi</TableTh>
               </TableTr>
             </TableThead>
@@ -102,15 +101,16 @@ function ListKontakDarurat({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
-                        {item.name}
-                      </Text>
+                      <Box w={150}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.name}
+                        </Text>
+                      </Box>
                     </TableTd>
                     <TableTd>
-                      <Text truncate fz="sm" c="dimmed" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                    </TableTd>
-                    <TableTd>
-                      <Image w={100} src={item.image?.link} alt="image" radius="md" loading="lazy"/>
+                      <Box w={200}>
+                        <Text truncate fz="sm" c="dimmed" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                      </Box>
                     </TableTd>
                     <TableTd>
                       <Button

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

@@ -5,7 +5,6 @@ import {
   Button,
   Center,
   Group,
-  Image,
   Pagination,
   Paper,
   Skeleton,
@@ -18,15 +17,15 @@ import {
   TableTr,
   Text,
   Title,
-  Tooltip,
+  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';
 import { useShallowEffect } from '@mantine/hooks';
-import penangananDarurat from '../../_state/kesehatan/penanganan-darurat/penangananDarurat';
+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 penangananDarurat from '../../_state/kesehatan/penanganan-darurat/penangananDarurat';
 
 function PenangananDarurat() {
   const [search, setSearch] = useState("");
@@ -91,7 +90,6 @@ function ListPenangananDarurat({ search }: { search: string }) {
               <TableTr>
                 <TableTh>Judul</TableTh>
                 <TableTh>Deskripsi</TableTh>
-                <TableTh>Gambar</TableTh>
                 <TableTh>Aksi</TableTh>
               </TableTr>
             </TableThead>
@@ -100,21 +98,22 @@ function ListPenangananDarurat({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
-                        {item.name}
-                      </Text>
+                      <Box w={150}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.name}
+                        </Text>
+                      </Box>
                     </TableTd>
                     <TableTd>
-                      <Text
-                        fz="sm"
-                        c="dimmed"
-                        truncate
-                        lineClamp={1}
+                      <Box w={200}>
+                        <Text
+                          fz="sm"
+                          c="dimmed"
+                          truncate
+                          lineClamp={1}
                         dangerouslySetInnerHTML={{ __html: item.deskripsi }}
                       />
-                    </TableTd>
-                    <TableTd>
-                      <Image w={100} src={item.image?.link} alt="image" loading="lazy"/>
+                      </Box>
                     </TableTd>
                     <TableTd>
                       <Button

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

@@ -107,21 +107,28 @@ function ListPosyandu({ search }: { search: string }) {
                filteredData.map((item) => (
                  <TableTr key={item.id}>
                    <TableTd style={{ width: '25%' }}>
+                    <Box w={150}>
                      <Text fw={500} truncate="end" lineClamp={1}>
                        {item.name}
                      </Text>
+                     </Box>
                    </TableTd>
                    <TableTd style={{ width: '20%' }}>
+                    <Box w={150}>
                      <Text truncate fz="sm" c="dimmed">
                        {item.nomor || '-'}
                      </Text>
+                     </Box>
                    </TableTd>
                    <TableTd style={{ width: '30%' }}>
+                    <Box w={150}>
                      <Text
+                     lineClamp={1}
                        truncate
                        fz="sm"
                        dangerouslySetInnerHTML={{ __html: item.deskripsi }}
                      />
+                     </Box>
                    </TableTd>
                    <TableTd style={{ width: '15%' }}>
                      <Button

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

@@ -5,7 +5,6 @@ import {
   Button,
   Center,
   Group,
-  Image,
   Pagination,
   Paper,
   Skeleton,
@@ -18,15 +17,15 @@ import {
   TableTr,
   Text,
   Title,
-  Tooltip,
+  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';
-import { useProxy } from 'valtio/utils';
 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 programKesehatan from '../../_state/kesehatan/program-kesehatan/programKesehatan';
 
 function ProgramKesehatan() {
   const [search, setSearch] = useState("");
@@ -90,7 +89,7 @@ function ListProgramKesehatan({ search }: { search: string }) {
               <TableTr>
                 <TableTh>Judul</TableTh>
                 <TableTh>Deskripsi Singkat</TableTh>
-                <TableTh>Image</TableTh>
+                <TableTh>Deskripsi</TableTh>
                 <TableTh>Aksi</TableTh>
               </TableTr>
             </TableThead>
@@ -105,11 +104,13 @@ function ListProgramKesehatan({ search }: { search: string }) {
                     </TableTd>
                     <TableTd>
                       <Box w={200}>
-                        <Text fz="sm" truncate="end" lineClamp={2} dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat }} />
+                        <Text fz="sm" truncate="end" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat }} />
                       </Box>
                     </TableTd>
                     <TableTd>
-                      <Image w={100} src={item.image?.link} alt="image" radius="md" loading="lazy"/>
+                      <Box w={200}>
+                        <Text fz="sm" truncate="end" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                      </Box>
                     </TableTd>
                     <TableTd>
                       <Button

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

@@ -78,8 +78,9 @@ function DetailPuskesmas() {
 
               <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">Senin - Jumat</Text>
+                <Text fz="md" c="dimmed">{data?.jam?.workDays || '-'} - {data?.jam?.weekDays || '-'}</Text>
+                <Text fz="md" c="dimmed">Sabtu - Minggu / Hari Libur</Text>
                 <Text fz="md" c="dimmed">{data?.jam?.holiday || '-'}</Text>
               </Box>
 
@@ -94,9 +95,13 @@ function DetailPuskesmas() {
 
               <Box>
                 <Text fz="lg" fw="bold">Kontak</Text>
+                <Text fz="md" c="dimmed">Kontak Puskesmas</Text>
                 <Text fz="md" c="dimmed">{data?.kontak?.kontakPuskesmas || '-'}</Text>
+                <Text fz="md" c="dimmed">Email</Text>
                 <Text fz="md" c="dimmed">{data?.kontak?.email || '-'}</Text>
+                <Text fz="md" c="dimmed">Facebook</Text>
                 <Text fz="md" c="dimmed">{data?.kontak?.facebook || '-'}</Text>
+                <Text fz="md" c="dimmed">Kontak UGD</Text>
                 <Text fz="md" c="dimmed">{data?.kontak?.kontakUGD || '-'}</Text>
               </Box>
 

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

@@ -5,7 +5,6 @@ import {
   Button,
   Center,
   Group,
-  Image,
   Pagination,
   Paper,
   Skeleton,
@@ -18,7 +17,7 @@ import {
   TableTr,
   Text,
   Title,
-  Tooltip,
+  Tooltip
 } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
@@ -90,7 +89,7 @@ function ListPuskesmas({ search }: { search: string }) {
               <TableTr>
                 <TableTh>Nama Puskesmas</TableTh>
                 <TableTh>Alamat</TableTh>
-                <TableTh>Image</TableTh>
+                <TableTh>Kontak</TableTh>
                 <TableTh>Aksi</TableTh>
               </TableTr>
             </TableThead>
@@ -99,13 +98,25 @@ function ListPuskesmas({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
-                        {item.name}
-                      </Text>
+                      <Box w={150}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.name}
+                        </Text>
+                      </Box>
                     </TableTd>
-                    <TableTd>{item.alamat}</TableTd>
                     <TableTd>
-                      <Image w={100} src={item.image.link} alt="image" radius="md" loading="lazy"/>
+                      <Box w={150}>
+                        <Text truncate fz="sm" c="dimmed" lineClamp={1}>
+                          {item.alamat}
+                        </Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Box w={150}>
+                        <Text truncate fz="sm" c="dimmed" lineClamp={1}>
+                          {item.kontak.kontakPuskesmas}
+                        </Text>
+                      </Box>
                     </TableTd>
                     <TableTd>
                       <Button

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

@@ -87,7 +87,9 @@ function ListAPBDes({ search }: { search: string }) {
                       <Text fw={500} truncate="end">{item.name}</Text>
                     </TableTd>
                     <TableTd>
-                      <Text>Rp. {item.jumlah}</Text>
+                      <Box w={150}>
+                        <Text>Rp. {item.jumlah}</Text>
+                      </Box>
                     </TableTd>
                     <TableTd>
                       {item.file?.link ? (

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

@@ -93,7 +93,9 @@ function ListKategoriKegiatan({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500}>{item.name}</Text>
+                      <Box w={200}>
+                        <Text fw={500} lineClamp={1}>{item.name}</Text>
+                      </Box>
                     </TableTd>
                     <TableTd>
                       <Tooltip label="Edit" withArrow>

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

@@ -98,9 +98,11 @@ function ListDesaAntiKorupsi({ search }: { search: string }) {
                         </Text>
                       </TableTd>
                       <TableTd style={{ width: '30%' }}>
-                        <Text fz="sm" c="dimmed">
+                        <Box w={200}>
+                        <Text fz="sm" c="dimmed" lineClamp={1}>
                           {item.kategori?.name || '-'}
                         </Text>
+                        </Box>
                       </TableTd>
                       <TableTd style={{ width: '20%', textAlign: 'center' }}>
                         <Button

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

@@ -154,7 +154,7 @@ function Page() {
                     withLabels
                     withTooltip
                     labelsType="percent"
-                    size={220}
+                    size={180}
                     data={donutDataJenisKelamin}
                   />
                 </Center>
@@ -185,7 +185,7 @@ function Page() {
                     withLabels
                     withTooltip
                     labelsType="percent"
-                    size={220}
+                    size={180}
                     data={donutDataRating}
                   />
                 </Center>
@@ -216,7 +216,7 @@ function Page() {
                     withLabels
                     withTooltip
                     labelsType="percent"
-                    size={220}
+                    size={180}
                     data={donutDataKelompokUmur}
                   />
                 </Center>

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

@@ -88,66 +88,74 @@ function ListResponden({ search }: ListRespondenProps) {
           <Title order={4} mb="sm">
             Daftar Responden
           </Title>
-          <Table
-            striped
-            highlightOnHover
-            withRowBorders
-            verticalSpacing="sm"
-          >
-            <TableThead>
-              <TableTr>
-                <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
-                <TableTh style={{ width: '25%', textAlign: 'center' }}>Nama</TableTh>
-                <TableTh style={{ width: '20%', textAlign: 'center' }}>Tanggal</TableTh>
-                <TableTh style={{ width: '20%', textAlign: 'center' }}>Jenis Kelamin</TableTh>
-                <TableTh style={{ width: '15%', textAlign: 'center' }}>Aksi</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.length === 0 ? (
+          <Box style={{ overflowX: 'auto' }}>
+            <Table
+              striped
+              highlightOnHover
+              withRowBorders
+              verticalSpacing="sm"
+            >
+              <TableThead>
                 <TableTr>
-                  <TableTd colSpan={5}>
-                    <Text ta="center" c="dimmed">
-                      Tidak ditemukan data dengan kata kunci pencarian
-                    </Text>
-                  </TableTd>
+                  <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
+                  <TableTh style={{ width: '25%', textAlign: 'center' }}>Nama</TableTh>
+                  <TableTh style={{ width: '20%', textAlign: 'center' }}>Tanggal</TableTh>
+                  <TableTh style={{ width: '20%', textAlign: 'center' }}>Jenis Kelamin</TableTh>
+                  <TableTh style={{ width: '15%', textAlign: 'center' }}>Aksi</TableTh>
                 </TableTr>
-              ) : (
-                filteredData.map((item, index) => (
-                  <TableTr key={item.id}>
-                    <TableTd ta="center">{index + 1}</TableTd>
-                    <TableTd ta="center">{item.name}</TableTd>
-                    <TableTd ta="center">
-                      {item.tanggal
-                        ? new Date(item.tanggal).toLocaleDateString('id-ID', {
+              </TableThead>
+              <TableTbody>
+                {filteredData.length === 0 ? (
+                  <TableTr>
+                    <TableTd colSpan={5}>
+                      <Text ta="center" c="dimmed">
+                        Tidak ditemukan data dengan kata kunci pencarian
+                      </Text>
+                    </TableTd>
+                  </TableTr>
+                ) : (
+                  filteredData.map((item, index) => (
+                    <TableTr key={item.id}>
+                      <TableTd ta="center">{index + 1}</TableTd>
+                      <TableTd ta="center">{item.name}</TableTd>
+                      <TableTd ta="center">
+                        <Box w={150}>
+                        {item.tanggal
+                          ? new Date(item.tanggal).toLocaleDateString('id-ID', {
                             day: '2-digit',
                             month: 'long',
                             year: 'numeric',
                           })
-                        : '-'}
-                    </TableTd>
-                    <TableTd ta="center">{item.jenisKelamin.name}</TableTd>
-                    <TableTd ta="center">
-                      <Button
-                        size="xs"
-                        radius="md"
-                        variant="light"
-                        color="blue"
-                        leftSection={<IconDeviceImac size={16} />}
-                        onClick={() =>
-                          router.push(
-                            `/admin/landing-page/indeks-kepuasan-masyarakat/responden/${item.id}`
-                          )
-                        }
-                      >
-                        Detail
-                      </Button>
-                    </TableTd>
-                  </TableTr>
-                ))
-              )}
-            </TableTbody>
-          </Table>
+                          : '-'}
+                        </Box>
+                      </TableTd>
+                      <TableTd ta="center">
+                        <Box w={100}>
+                        {item.jenisKelamin.name}
+                        </Box>
+                      </TableTd>
+                      <TableTd ta="center">
+                        <Button
+                          size="xs"
+                          radius="md"
+                          variant="light"
+                          color="blue"
+                          leftSection={<IconDeviceImac size={16} />}
+                          onClick={() =>
+                            router.push(
+                              `/admin/landing-page/indeks-kepuasan-masyarakat/responden/${item.id}`
+                            )
+                          }
+                        >
+                          Detail
+                        </Button>
+                      </TableTd>
+                    </TableTr>
+                  ))
+                )}
+              </TableTbody>
+            </Table>
+          </Box>
         </Paper>
         <Center>
           <Pagination

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

@@ -96,7 +96,11 @@ function ListKategoriPrestasi({ search }: { search: string }) {
               ) : (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd>{item.name}</TableTd>
+                    <TableTd>
+                      <Box w={200}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box>
+                    </TableTd>
                     <TableTd style={{ textAlign: 'center', width: '120px' }}>
                       <Tooltip label="Edit" withArrow position="top">
                         <Button

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

@@ -78,9 +78,9 @@ function DetailPrestasiDesa() {
 
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Box 
-                  fz="md" 
-                  c="dimmed" 
+                <Box
+                  fz="md"
+                  c="dimmed"
                   dangerouslySetInnerHTML={{ __html: detailState.findUnique.data?.deskripsi || '-' }}
                 />
               </Box>
@@ -91,10 +91,11 @@ function DetailPrestasiDesa() {
                   <Image
                     src={detailState.findUnique.data.image.link}
                     alt={detailState.findUnique.data.name || 'Gambar Prestasi'}
-                    w={300}
+                    w="100%"
+                    maw={300} // max width 300px
                     fit="contain"
                     style={{ borderRadius: '8px', border: '1px solid #e0e0e0' }}
-                    loading='lazy'
+                    loading="lazy"
                   />
                 ) : (
                   <Text fz="sm" c="dimmed">Tidak ada gambar</Text>

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

@@ -104,7 +104,9 @@ function ListPrestasi({ search }: { search: string }) {
                       <Text lineClamp={1} fz="sm" c="dimmed" dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
                     </TableTd>
                     <TableTd style={{ width: '25%' }}>
-                      <Text truncate="end" fz={"sm"}>{item.kategori?.name || 'Tidak ada kategori'}</Text>
+                      <Box w={150}>
+                        <Text truncate="end" fz={"sm"}>{item.kategori?.name || 'Tidak ada kategori'}</Text>
+                      </Box>
                     </TableTd>
                     <TableTd style={{ width: '25%', textAlign: 'center' }}>
                       <Tooltip label="Kelola Prestasi" withArrow>

src/app/admin/(dashboard)/landing-page/profile/media-sosial/[id]/page.tsx

@@ -51,8 +51,10 @@ function DetailMediaSosial() {
       </Button>
 
       <Paper
-      withBorder
-        w={{ base: "100%", md: "60%" }}
+        withBorder
+        w="100%"
+        maw={500} // <= tambahkan ini, biar tidak lebih dari 500px
+        mx="auto" // center di layar
         bg={colors['white-1']}
         p="lg"
         radius="md"
@@ -70,9 +72,9 @@ function DetailMediaSosial() {
                 <Text fz="md" c="dimmed">{data.name || '-'}</Text>
               </Box>
 
-              <Box>
+              <Box >
                 <Text fz="lg" fw="bold">Link / Nomor Telepon</Text>
-                <Text fz="md" c="dimmed">{data.iconUrl || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-all", whiteSpace: "pre-wrap" }}>{data.iconUrl || '-'}</Text>
               </Box>
 
               <Box>
@@ -81,12 +83,14 @@ function DetailMediaSosial() {
                   <Image
                     src={data.image.link}
                     alt={data.name || 'Gambar Media Sosial'}
-                    w={120}
-                    h={120}
+                    w="100%"
+                    maw={120} // max width biar tidak keluar layar
+                    h="auto"
                     radius="md"
                     fit="cover"
                     loading="lazy"
                   />
+
                 ) : (
                   <Text fz="sm" c="dimmed">Tidak ada gambar</Text>
                 )}

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

@@ -224,7 +224,7 @@ function EditPejabatDesa() {
                       alt="Preview"
                       style={{
                         maxWidth: '100%',
-                        maxHeight: '200px',
+                        maxHeight: '150px',
                         objectFit: 'contain',
                         borderRadius: '8px',
                         border: '1px solid #ddd',

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

@@ -72,7 +72,7 @@ function Page() {
                     <Image
                       pt={{ base: 0, md: 60 }}
                       src={item.image?.link || "/perbekel.png"}
-                      w={{ base: 250, md: 350 }}
+                      w={{ base: 150, md: 350 }}
                       alt="Foto Profil Pejabat"
                       radius="md"
                       onError={(e) => { e.currentTarget.src = "/perbekel.png"; }}
@@ -87,7 +87,7 @@ function Page() {
                     className="glass3"
                     style={{ mt: -30, boxShadow: '0 4px 20px rgba(0,0,0,0.15)' }}
                   >
-                    <Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.2rem", md: "1.6rem" }}>
+                    <Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1rem", md: "1.6rem" }}>
                       {item.name}
                     </Text>
                   </Paper>

src/app/admin/(dashboard)/landing-page/profile/program-inovasi/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Pagination, Paper, 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 { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -49,9 +49,7 @@ function ListProgramInovasi({ search }: { search: string }) {
   return (
     <Box py={15}>
       <Paper bg={colors['white-1']} withBorder p="lg" radius="md" shadow="sm">
-        <Box mb="md" display="flex"
-          style={{ justifyContent: 'space-between', alignItems: 'center' }}
-        >
+        <Group justify='space-between'>
           <Title order={4}>Daftar Program Inovasi</Title>
           <Tooltip label="Tambah Program Inovasi" withArrow>
             <Button
@@ -64,7 +62,7 @@ function ListProgramInovasi({ search }: { search: string }) {
               Tambah Program
             </Button>
           </Tooltip>
-        </Box>
+        </Group>
         <Box style={{ overflowX: 'auto' }}>
           <Table highlightOnHover striped verticalSpacing="sm">
             <TableThead>

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

@@ -3,7 +3,17 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import dataLingkunganDesaState from '@/app/admin/(dashboard)/_state/lingkungan/data-lingkungan-desa';
 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';
@@ -19,34 +29,34 @@ interface FormDataLingkunganDesa {
 }
 
 type IconKey =
-  'ekowisata' |
-  'kompetisi' |
-  'wisata' |
-  'ekonomi' |
-  'sampah' |
-  'truck' |
-  'scale' |
-  'clipboard' |
-  'trash' |
-  'lingkunganSehat' |
-  'sumberOksigen' |
-  'ekonomiBerkelanjutan' |
-  'mencegahBencana' |
-  'rumah' |
-  'pohon' |
-  'air';
-
+  | 'ekowisata'
+  | 'kompetisi'
+  | 'wisata'
+  | 'ekonomi'
+  | 'sampah'
+  | 'truck'
+  | 'scale'
+  | 'clipboard'
+  | 'trash'
+  | 'lingkunganSehat'
+  | 'sumberOksigen'
+  | 'ekonomiBerkelanjutan'
+  | 'mencegahBencana'
+  | 'rumah'
+  | 'pohon'
+  | 'air';
 
 function EditDataLingkunganDesa() {
-  const stateDataLingkunganDesa = useProxy(dataLingkunganDesaState)
-  const params = useParams()
+  const stateDataLingkunganDesa = useProxy(dataLingkunganDesaState);
+  const params = useParams();
   const router = useRouter();
+
   const [formData, setFormData] = useState<FormDataLingkunganDesa>({
     name: '',
     deskripsi: '',
     jumlah: '',
     icon: '',
-  })
+  });
 
   useEffect(() => {
     const loadProgramKreatif = async () => {
@@ -56,7 +66,6 @@ function EditDataLingkunganDesa() {
       try {
         const data = await stateDataLingkunganDesa.update.load(id);
         if (data) {
-          // ⬇️ FIX PENTING: tambahkan ini
           stateDataLingkunganDesa.update.id = id;
 
           stateDataLingkunganDesa.update.form = {
@@ -74,16 +83,14 @@ function EditDataLingkunganDesa() {
           });
         }
       } catch (error) {
-        console.error("Error loading data lingkungan desa:", error);
-        toast.error("Gagal memuat data data lingkungan desa");
+        console.error('Error loading data lingkungan desa:', error);
+        toast.error('Gagal memuat data lingkungan desa');
       }
-    }
+    };
 
     loadProgramKreatif();
   }, [params?.id]);
 
-
-
   const handleSubmit = async () => {
     try {
       stateDataLingkunganDesa.update.form = {
@@ -92,49 +99,68 @@ function EditDataLingkunganDesa() {
         deskripsi: formData.deskripsi.trim(),
         jumlah: formData.jumlah.trim(),
         icon: formData.icon.trim(),
-      }
+      };
       await stateDataLingkunganDesa.update.submit();
-      router.push("/admin/lingkungan/data-lingkungan-desa");
+      toast.success('Data lingkungan desa berhasil diperbarui!');
+      router.push('/admin/lingkungan/data-lingkungan-desa');
     } catch (error) {
-      console.error("Error updating data lingkungan desa:", error);
-      toast.error("Gagal memuat data data lingkungan desa");
+      console.error('Error updating data lingkungan desa:', error);
+      toast.error('Terjadi kesalahan saat memperbarui data lingkungan desa');
     }
-  }
-  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={3}>Edit Data Lingkungan Desa</Title>
+  return (
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Data Lingkungan Desa
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '60%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
             value={formData.name}
-            label={<Text fz={"sm"} fw={"bold"}>Nama Data Lingkungan Desa</Text>}
-            placeholder="masukkan nama data lingkungan desa"
-            onChange={(val) => {
+            label={<Text fz="sm" fw="bold">Nama Data Lingkungan Desa</Text>}
+            placeholder="Masukkan nama data lingkungan desa"
+            onChange={(val) =>
               setFormData({
                 ...formData,
-                name: val.target.value
+                name: val.target.value,
               })
-            }}
+            }
+            required
           />
+
           <TextInput
             value={formData.jumlah}
-            label={<Text fz={"sm"} fw={"bold"}>Jumlah Data Lingkungan Desa</Text>}
-            placeholder="masukkan jumlah data lingkungan desa"
-            onChange={(val) => {
+            label={<Text fz="sm" fw="bold">Jumlah Data Lingkungan Desa</Text>}
+            placeholder="Masukkan jumlah data lingkungan desa"
+            onChange={(val) =>
               setFormData({
                 ...formData,
-                jumlah: val.target.value
+                jumlah: val.target.value,
               })
-            }}
+            }
+            required
           />
+
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <Text fz="sm" fw="bold" mb={6}>
+              Deskripsi
+            </Text>
             <EditEditor
               value={formData.deskripsi}
               onChange={(htmlContent) => {
@@ -143,16 +169,34 @@ function EditDataLingkunganDesa() {
               }}
             />
           </Box>
+
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Ikon Data Lingkungan Desa</Text>
+            <Text fz="sm" fw="bold" mb={6}>
+              Ikon Data Lingkungan Desa
+            </Text>
             <SelectIconProgramEdit
               value={formData.icon as IconKey}
               onChange={(value) => {
                 setFormData((prev) => ({ ...prev, icon: value }));
                 stateDataLingkunganDesa.update.form.icon = value;
-              }} />
+              }}
+            />
           </Box>
-          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+
+          <Group justify="flex-end">
+            <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)/lingkungan/data-lingkungan-desa/[id]/page.tsx

@@ -1,23 +1,40 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconChartLine, IconChristmasTreeFilled, IconClipboard, IconDroplet, IconEdit, IconHome, IconHomeEco, IconLeaf, IconRecycle, IconScale, IconShieldFilled, IconTent, IconTrash, IconTree, IconTrendingUp, IconTrophy, IconTruck, IconX } from '@tabler/icons-react';
+import {
+  IconArrowBack,
+  IconChartLine,
+  IconChristmasTreeFilled,
+  IconClipboard,
+  IconDroplet,
+  IconEdit,
+  IconHome,
+  IconHomeEco,
+  IconLeaf,
+  IconRecycle,
+  IconScale,
+  IconShieldFilled,
+  IconTent,
+  IconTrash,
+  IconTree,
+  IconTrendingUp,
+  IconTrophy,
+  IconTruck,
+} from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { useProxy } from 'valtio/utils';
-import dataLingkunganDesaState from '../../../_state/lingkungan/data-lingkungan-desa';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import dataLingkunganDesaState from '../../../_state/lingkungan/data-lingkungan-desa';
 
 function DetailDataLingkunganDesa() {
-  const [modalHapus, setModalHapus] = useState(false)
-  const stateDataLingkungan = useProxy(dataLingkunganDesaState)
-  const router = useRouter()
-  const params = useParams()
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [modalHapus, setModalHapus] = useState(false);
+  const stateDataLingkungan = useProxy(dataLingkunganDesaState);
+  const router = useRouter();
+  const params = useParams();
+  const [selectedId, setSelectedId] = useState<string | null>(null);
 
   const iconMap: Record<string, React.FC<any>> = {
     ekowisata: IconLeaf,
@@ -35,90 +52,117 @@ function DetailDataLingkunganDesa() {
     mencegahBencana: IconShieldFilled,
     rumah: IconHome,
     pohon: IconTree,
-    air: IconDroplet
+    air: IconDroplet,
   };
 
   useShallowEffect(() => {
-    stateDataLingkungan.findUnique.load(params?.id as string)
-  }, [params?.id])
+    stateDataLingkungan.findUnique.load(params?.id as string);
+  }, [params?.id]);
 
   const handleHapus = () => {
     if (selectedId) {
-      stateDataLingkungan.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/lingkungan/data-lingkungan-desa")
+      stateDataLingkungan.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push('/admin/lingkungan/data-lingkungan-desa');
     }
-  }
+  };
 
   if (!stateDataLingkungan.findUnique.data) {
     return (
-      <Stack>
-        <Skeleton h={500} />
+      <Stack py={10}>
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Data Lingkungan Desa</Text>
+  const data = stateDataLingkungan.findUnique.data;
 
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
+  return (
+    <Box py={10}>
+      {/* Back Button */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Main Card */}
+      <Paper
+        withBorder
+        w={{ base: '100%', md: '60%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          {/* Title */}
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Data Lingkungan Desa
+          </Text>
+
+          {/* Content Card */}
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Data Lingkungan Desa</Text>
-                <Text fz={"lg"}>{stateDataLingkungan.findUnique.data?.name}</Text>
+                <Text fz="lg" fw="bold">Nama Data Lingkungan Desa</Text>
+                <Text fz="md" c="dimmed">{data?.name || '-'}</Text>
               </Box>
+
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Jumlah Data Lingkungan Desa</Text>
-                <Text fz={"lg"}>{stateDataLingkungan.findUnique.data?.jumlah}</Text>
+                <Text fz="lg" fw="bold">Jumlah Data Lingkungan Desa</Text>
+                <Text fz="md" c="dimmed">{data?.jumlah || '-'}</Text>
               </Box>
+
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Ikon Data Lingkungan Desa</Text>
-                {iconMap[stateDataLingkungan.findUnique.data?.icon] && (
-                  <Box title={stateDataLingkungan.findUnique.data?.icon}>
-                    {React.createElement(iconMap[stateDataLingkungan.findUnique.data?.icon], { size: 24 })}
+                <Text fz="lg" fw="bold">Ikon Data Lingkungan Desa</Text>
+                {iconMap[data?.icon] ? (
+                  <Box title={data?.icon}>
+                    {React.createElement(iconMap[data.icon], { size: 28, color: colors['blue-button'] })}
                   </Box>
+                ) : (
+                  <Text fz="sm" c="dimmed">Tidak ada ikon</Text>
                 )}
               </Box>
+
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: stateDataLingkungan.findUnique.data?.deskripsi }}></Text>
+                <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }} />
               </Box>
-              <Box>
-                <Flex gap={"xs"} mt={10}>
+
+              {/* Action Buttons */}
+              <Group gap="sm" mt="sm">
+                <Tooltip label="Hapus Data Lingkungan Desa" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (stateDataLingkungan.findUnique.data) {
-                        setSelectedId(stateDataLingkungan.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={stateDataLingkungan.delete.loading || !stateDataLingkungan.findUnique.data}
-                    color={"red"}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
-                    <IconX size={20} />
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Data Lingkungan Desa" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (stateDataLingkungan.findUnique.data) {
-                        router.push(`/admin/lingkungan/data-lingkungan-desa/${stateDataLingkungan.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!stateDataLingkungan.findUnique.data}
-                    color={"green"}
+                    color="green"
+                    onClick={() => router.push(`/admin/lingkungan/data-lingkungan-desa/${data.id}/edit`)}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Box>
+                </Tooltip>
+              </Group>
             </Stack>
           </Paper>
         </Stack>
@@ -130,7 +174,7 @@ function DetailDataLingkunganDesa() {
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
         text="Apakah anda yakin ingin menghapus data lingkungan desa ini?"
-      /> 
+      />
     </Box>
   );
 }

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx

@@ -1,6 +1,16 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
@@ -8,60 +18,105 @@ import CreateEditor from '../../../_com/createEditor';
 import SelectIconProgram from '../../../_com/selectIcon';
 import dataLingkunganDesaState from '../../../_state/lingkungan/data-lingkungan-desa';
 
-
 function CreateDataLingkunganDesa() {
-  const stateCreate = useProxy(dataLingkunganDesaState)
+  const stateCreate = useProxy(dataLingkunganDesaState);
   const router = useRouter();
 
   const resetForm = () => {
     stateCreate.create.form = {
-      name: "",
-      deskripsi: "",
-      jumlah: "",
-      icon: "",
-    }
-  }
+      name: '',
+      deskripsi: '',
+      jumlah: '',
+      icon: '',
+    };
+  };
 
   const handleSubmit = async () => {
     await stateCreate.create.create();
     resetForm();
-    router.push("/admin/lingkungan/data-lingkungan-desa")
-  }
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    router.push('/admin/lingkungan/data-lingkungan-desa');
+  };
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Create Data Lingkungan Desa</Title>
+  return (
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={22} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Data Lingkungan Desa
+        </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={<Text fz={"sm"} fw={"bold"}>Nama Data Lingkungan Desa</Text>}
-            placeholder="masukkan nama data lingkungan desa"
-            onChange={(val) => stateCreate.create.form.name = val.target.value}
+            label={<Text fw="bold" fz="sm">Nama Data Lingkungan Desa</Text>}
+            placeholder="Masukkan nama data lingkungan desa"
+            value={stateCreate.create.form.name || ''}
+            onChange={(val) => (stateCreate.create.form.name = val.target.value)}
+            required
           />
+
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Ikon Data Lingkungan Desa</Text>
-            <SelectIconProgram onChange={(value) => stateCreate.create.form.icon = value} />
-          </Box>
-          <TextInput
-            type='number'
-            onChange={(e) => stateCreate.create.form.jumlah = e.currentTarget.value}
-            label={<Text fw={"bold"} fz={"sm"}>Jmlah data lingkungan desa</Text>}
-            placeholder='Masukkan jumlah data lingkungan desa'
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi data lingkungan desa</Text>
-            <CreateEditor
-              value={stateCreate.create.form.deskripsi}
-              onChange={(htmlContent) => stateCreate.create.form.deskripsi = htmlContent}
+            <Text fz="sm" fw="bold" mb={6}>
+              Ikon Data Lingkungan Desa
+            </Text>
+            <SelectIconProgram
+              onChange={(value) => (stateCreate.create.form.icon = value)}
             />
           </Box>
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+
+          <TextInput
+            label={<Text fw="bold" fz="sm">Jumlah Data Lingkungan Desa</Text>}
+            placeholder="Masukkan jumlah data lingkungan desa"
+            value={stateCreate.create.form.jumlah || ''}
+            onChange={(e) => (stateCreate.create.form.jumlah = e.currentTarget.value)}
+            required
+          />
+
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Deskripsi Data Lingkungan Desa
+            </Text>
+            <CreateEditor
+              value={stateCreate.create.form.deskripsi}
+              onChange={(htmlContent) =>
+                (stateCreate.create.form.deskripsi = htmlContent)
+              }
+            />
+          </Box>
+
+          {/* Submit Button */}
+          <Group justify="right" mt="sm">
+            <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)/lingkungan/data-lingkungan-desa/page.tsx

@@ -2,21 +2,23 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import {
-  IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled, IconDeviceImac, IconDroplet, IconHome, IconHomeEco, IconLeaf,
+  Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack,
+  Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text,
+  Title,
+  Tooltip
+} from '@mantine/core';
+import {
+  IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled,
+  IconDeviceImacCog, IconDroplet, IconHome, IconHomeEco, IconLeaf,
+  IconPlus,
   IconRecycle, IconScale, IconSearch, IconShieldFilled, IconTent,
-  IconTrashFilled,
-  IconTree,
-  IconTrendingUp,
-  IconTrophy,
-  IconTruckFilled
+  IconTrashFilled, IconTree, IconTrendingUp, IconTrophy, IconTruckFilled
 } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
 import dataLingkunganDesaState from '../../_state/lingkungan/data-lingkungan-desa';
 
 
@@ -26,7 +28,7 @@ function DataLingkunganDesa() {
     <Box>
       <HeaderSearch
         title='Data Lingkungan Desa'
-        placeholder='pencarian'
+        placeholder='Cari data lingkungan...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -64,76 +66,98 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
     rumah: IconHome,
     pohon: IconTree,
     air: IconDroplet
-
   };
 
   if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton height={650} />
+        <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
+
   if (data.length === 0) {
     return (
       <Box py={10}>
-        <Paper p="md" >
+        <Paper withBorder shadow="md" radius="md" p="lg" bg={colors['white-1']}>
           <Stack>
-            <JudulList
-              title='List Data Lingkungan Desa'
-              href='/admin/lingkungan/data-lingkungan-desa/create'
-            />
-            <Table striped withTableBorder withRowBorders>
+            <Group justify="space-between" mb="md">
+              <Title order={4}>Daftar Data Lingkungan Desa</Title>
+              <Tooltip label="Tambah Data Lingkungan Desa" withArrow>
+                <Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/create')}>
+                  Tambah Baru
+                </Button>
+              </Tooltip>
+            </Group>
+            <Table highlightOnHover>
               <TableThead>
                 <TableTr>
                   <TableTh>No</TableTh>
                   <TableTh>Nama Data Lingkungan Desa</TableTh>
-                  <TableTh>Jumlah Data Lingkungan Desa</TableTh>
+                  <TableTh>Jumlah</TableTh>
                   <TableTh>Ikon</TableTh>
                   <TableTh>Detail</TableTh>
                 </TableTr>
               </TableThead>
             </Table>
-            <Text ta="center">Tidak ada data lingkungan desa yang tersedia</Text>
+            <Center py={20}>
+              <Text c="dimmed">Tidak ada data lingkungan desa yang tersedia</Text>
+            </Center>
           </Stack>
         </Paper>
       </Box >
     );
   }
+
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'} h={{ base: 'auto', md: 650 }}>
-        <JudulList
-          title='List Data Lingkungan Desa'
-          href='/admin/lingkungan/data-lingkungan-desa/create'
-        />
-        <Box style={{ overflowY: 'auto' }}>
-          <Table striped withTableBorder withRowBorders>
+      <Paper withBorder shadow="md" radius="md" bg={colors['white-1']} p="lg">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Data Lingkungan Desa</Title>
+          <Tooltip label="Tambah Data Lingkungan Desa" withArrow>
+            <Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/lingkungan/data-lingkungan/create')}>
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover>
             <TableThead>
               <TableTr>
                 <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
-                <TableTh style={{ width: '20%' }}>Nama Data Lingkungan Desa</TableTh>
-                <TableTh style={{ width: '35%' }}>Jumlah Data Lingkungan Desa</TableTh>
-                <TableTh style={{ width: '10%' }}>Ikon</TableTh>
-                <TableTh style={{ width: '15%', textAlign: 'center' }}>Detail</TableTh>
+                <TableTh style={{ width: '25%' }}>Nama Data</TableTh>
+                <TableTh style={{ width: '35%' }}>Jumlah</TableTh>
+                <TableTh style={{ width: '15%' }}>Ikon</TableTh>
+                <TableTh style={{ width: '20%', textAlign: 'center' }}>Detail</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.map((item, index) => (
                 <TableTr key={item.id}>
-                  <TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
-                  <TableTd style={{ width: '20%', wordWrap: 'break-word' }}>{item.name}</TableTd>
-                  <TableTd style={{ width: '35%', wordWrap: 'break-word' }}>± {item.jumlah}</TableTd>
-                  <TableTd style={{ width: '10%' }}>
+                  <TableTd style={{ textAlign: 'center' }}>{index + 1}</TableTd>
+                  <TableTd>
+                    <Text fw={500} truncate="end" lineClamp={1}>{item.name}</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text fz="sm" c="dimmed">± {item.jumlah}</Text>
+                  </TableTd>
+                  <TableTd>
                     {iconMap[item.icon] && (
                       <Box title={item.icon}>
-                        {React.createElement(iconMap[item.icon], { size: 24 })}
+                        {React.createElement(iconMap[item.icon], { size: 22 })}
                       </Box>
                     )}
                   </TableTd>
-                  <TableTd style={{ width: '15%', textAlign: 'center' }}>
-                    <Button onClick={() => router.push(`/admin/lingkungan/data-lingkungan-desa/${item.id}`)}>
-                      <IconDeviceImac size={25} />
+                  <TableTd style={{ textAlign: 'center' }}>
+                    <Button
+                      size="xs"
+                      radius="md"
+                      variant="light"
+                      color="blue"
+                      leftSection={<IconDeviceImacCog size={16} />}
+                      onClick={() => router.push(`/admin/lingkungan/data-lingkungan-desa/${item.id}`)}
+                    >
+                      Detail
                     </Button>
                   </TableTd>
                 </TableTr>
@@ -147,11 +171,13 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
           value={page}
           onChange={(newPage) => {
             load(newPage, 10);
-            window.scrollTo(0, 0);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/_lib/layouTabs.tsx

@@ -1,67 +1,116 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { IconBook, IconLeaf, IconSchool } 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: "Tujuan Edukasi Lingkungan",
             value: "tujuanedukasilingkungan",
-            href: "/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan"
+            href: "/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan",
+            tooltip: "Lihat tujuan edukasi lingkungan",
+            icon: <IconLeaf size={18} stroke={1.8} />
         },
         {
             label: "Materi Edukasi Yang Diberikan",
             value: "materiedukasiyangdiberikan",
-            href: "/admin/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan"
+            href: "/admin/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan",
+            tooltip: "Kelola materi edukasi yang diberikan",
+            icon: <IconBook size={18} stroke={1.8} />
         },
         {
             label: "Contoh Kegiatan Di Desa Darmasaba",
             value: "contohkegiatan",
-            href: "/admin/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba"
+            href: "/admin/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba",
+            tooltip: "Lihat contoh kegiatan desa Darmasaba",
+            icon: <IconSchool size={18} stroke={1.8} />
         },
     ];
-    const curentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const currentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
 
     const handleTabChange = (value: string | null) => {
         const tab = tabs.find(t => t.value === value)
-        if (tab) {
-            router.push(tab.href)
-        }
+        if (tab) router.push(tab.href)
         setActiveTab(value)
     }
 
     useEffect(() => {
         const match = tabs.find(tab => tab.href === pathname)
-        if (match) {
-            setActiveTab(match.value)
-        }
+        if (match) setActiveTab(match.value)
     }, [pathname])
 
     return (
-        <Stack>
-            <Title order={3}>Jumlah Penduduk Usia Kerja yang Menganggur</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 */}
-                        <></>
+        <Stack gap="md">
+            <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+                Edukasi Lingkungan
+            </Title>
+
+            <Tabs
+                color={colors['blue-button']}
+                variant="pills"
+                value={activeTab}
+                onChange={handleTabChange}
+                radius="lg"
+                keepMounted={false}
+            >
+                <ScrollArea type="auto" offsetScrollbars>
+                    <TabsList
+                        p="sm"
+                        style={{
+                            background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                            borderRadius: "1rem",
+                            boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                            display: "flex",
+                            flexWrap: "nowrap",
+                            gap: "0.5rem",
+                            paddingInline: "0.5rem",
+                        }}
+                    >
+                        {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",
+                                        whiteSpace: "nowrap",
+                                        transition: "all 0.2s ease",
+                                    }}
+                                >
+                                    <span style={{
+                                        display: "inline-block",
+                                        maxWidth: "200px",
+                                        overflow: "hidden",
+                                        textOverflow: "ellipsis"
+                                    }}>
+                                        {tab.label}
+                                    </span>
+                                </TabsTab>
+                            </Tooltip>
+                        ))}
+                    </TabsList>
+                </ScrollArea>
+
+                {tabs.map((tab, i) => (
+                    <TabsPanel key={i} value={tab.value}>
+                        <Box p="md">
+                            {children}
+                        </Box>
                     </TabsPanel>
                 ))}
             </Tabs>
-            {children}
         </Stack>
-    );
+    )
 }
 
-export default LayoutTabs;
+export default LayoutTabs;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/edit/page.tsx

@@ -9,77 +9,105 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
-const EdukasiLingkunganTextEditor = dynamic(() => import('../../_lib/edukasiLingkunganTextEditor').then(mod => mod.EdukasiLingkunganTextEditor), {
-  ssr: false,
-});
+const EdukasiLingkunganTextEditor = dynamic(
+  () => import('../../_lib/edukasiLingkunganTextEditor').then(mod => mod.EdukasiLingkunganTextEditor),
+  { ssr: false }
+);
 
 function EditContohKegiatanDesaDarmasaba() {
-  const router = useRouter()
-  const contohEdukasiState = useProxy(stateEdukasiLingkungan.stateContohEdukasiLingkungan)
+  const router = useRouter();
+  const contohEdukasiState = useProxy(stateEdukasiLingkungan.stateContohEdukasiLingkungan);
   const [judul, setJudul] = useState('');
   const [content, setContent] = useState('');
 
   useShallowEffect(() => {
     if (!contohEdukasiState.findById.data) {
-      contohEdukasiState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      contohEdukasiState.findById.initialize();
     }
   }, []);
 
   useEffect(() => {
     if (contohEdukasiState.findById.data) {
-      setJudul(contohEdukasiState.findById.data.judul ?? '')
-      setContent(contohEdukasiState.findById.data.deskripsi ?? '')
+      setJudul(contohEdukasiState.findById.data.judul ?? '');
+      setContent(contohEdukasiState.findById.data.deskripsi ?? '');
     }
-  }, [contohEdukasiState.findById.data])
+  }, [contohEdukasiState.findById.data]);
 
   const submit = () => {
     if (contohEdukasiState.findById.data) {
       contohEdukasiState.findById.data.judul = judul;
       contohEdukasiState.findById.data.deskripsi = content;
-      contohEdukasiState.update.save(contohEdukasiState.findById.data)
+      contohEdukasiState.update.save(contohEdukasiState.findById.data);
     }
-    router.push('/admin/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba')
-  }
+    router.push('/admin/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba');
+  };
+
   return (
-    <Box>
-      <Stack gap={'xs'}>
-        <Box>
-          <Button
-            variant={'subtle'}
-            onClick={() => router.back()}
-          >
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Edit Contoh Kegiatan Di Desa Darmasaba</Title>
-              <Text fw={"bold"}>Judul</Text>
-              <EdukasiLingkunganTextEditor
-                showSubmit={false}
-                onChange={setJudul}
-                initialContent={judul}
-              />
-              <Text fw={"bold"}>Deskripsi</Text>
-              <EdukasiLingkunganTextEditor
-                showSubmit={false}
-                onChange={setContent}
-                initialContent={content}
-              />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                  loading={contohEdukasiState.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-      </Stack>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
+        <Title order={4} ml="sm" c="dark">
+          Edit Contoh Kegiatan di Desa Darmasaba
+        </Title>
+      </Group>
+
+      {/* Form Paper */}
+      <Paper
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        w={{ base: '100%', md: '50%' }}
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <Box>
+            <Text fw="bold" mb={6}>
+              Judul
+            </Text>
+            <EdukasiLingkunganTextEditor
+              showSubmit={false}
+              onChange={setJudul}
+              initialContent={judul}
+            />
+          </Box>
+
+          <Box>
+            <Text fw="bold" mb={6}>
+              Deskripsi
+            </Text>
+            <EdukasiLingkunganTextEditor
+              showSubmit={false}
+              onChange={setContent}
+              initialContent={content}
+            />
+          </Box>
+
+          <Group justify="right" mt="md">
+            <Button
+              onClick={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)',
+              }}
+              loading={contohEdukasiState.update.loading}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/page.tsx

@@ -1,5 +1,4 @@
 'use client'
-import colors from '@/con/colors';
 import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
@@ -8,47 +7,72 @@ import { useProxy } from 'valtio/utils';
 import stateEdukasiLingkungan from '../../../_state/lingkungan/edukasi-lingkungan';
 
 function Page() {
-  const router = useRouter()
-  const listContohEdukasi = useProxy(stateEdukasiLingkungan.stateContohEdukasiLingkungan)
+  const router = useRouter();
+  const listContohEdukasi = useProxy(stateEdukasiLingkungan.stateContohEdukasiLingkungan);
+
   useShallowEffect(() => {
-    listContohEdukasi.findById.load('edit')
-  }, [])
+    listContohEdukasi.findById.load('edit');
+  }, []);
 
   if (!listContohEdukasi.findById.data) {
     return (
-      <Stack>
-        <Skeleton radius={10} h={800} />
+      <Stack py={20}>
+        <Skeleton radius="md" height={600} />
       </Stack>
-    )
+    );
   }
+
   return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"22"}>
-        <Grid>
+    <Box p="md">
+      <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
+        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2}>Preview Contoh Kegiatan Di Desa Darmasaba</Title>
+            <Title order={3} fw={600}>
+              Preview Contoh Kegiatan Di Desa Darmasaba
+            </Title>
           </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/edit')}>
-              <IconEdit size={16} />
+          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
+            <Button
+              size="sm"
+              variant="light"
+              color="green"
+              radius="md"
+              leftSection={<IconEdit size={16} />}
+              onClick={() =>
+                router.push(
+                  '/admin/lingkungan/edukasi-lingkungan/contoh-kegiatan-desa-darmasaba/edit'
+                )
+              }
+            >
+              Edit
             </Button>
           </GridCol>
         </Grid>
-        <Box>
-          <Stack gap={'lg'}>
-            <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listContohEdukasi.findById.data.judul }} />
-              </Box>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listContohEdukasi.findById.data.deskripsi }} />
-              </Box>
-            </Paper>
-          </Stack>
-        </Box>
-      </Stack>
-    </Paper>
-  )
+
+        <Stack gap="md">
+          <Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">
+            <Box mb="md">
+              <Text
+                fz={{ base: 'xl', md: '2xl' }}
+                fw={600}
+                c="black"
+                dangerouslySetInnerHTML={{ __html: listContohEdukasi.findById.data.judul }}
+              />
+            </Box>
+            <Box>
+              <Text
+                fz={{ base: 'md', md: 'lg' }}
+                ta="justify"
+                c="dimmed"
+                lineClamp={10}
+                dangerouslySetInnerHTML={{ __html: listContohEdukasi.findById.data.deskripsi }}
+              />
+            </Box>
+          </Paper>
+        </Stack>
+      </Paper>
+    </Box>
+  );
 }
 
 export default Page;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/edit/page.tsx

@@ -9,77 +9,90 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
-const EdukasiLingkunganTextEditor = dynamic(() => import('../../_lib/edukasiLingkunganTextEditor').then(mod => mod.EdukasiLingkunganTextEditor), {
-  ssr: false,
-});
+const EdukasiLingkunganTextEditor = dynamic(
+  () => import('../../_lib/edukasiLingkunganTextEditor').then(mod => mod.EdukasiLingkunganTextEditor),
+  { ssr: false }
+);
 
 function EditMateriEdukasiYangDiberikan() {
-  const router = useRouter()
-  const materiEdukasiState = useProxy(stateEdukasiLingkungan.stateMateriEdukasiLingkungan)
+  const router = useRouter();
+  const materiEdukasiState = useProxy(stateEdukasiLingkungan.stateMateriEdukasiLingkungan);
   const [judul, setJudul] = useState('');
   const [content, setContent] = useState('');
 
   useShallowEffect(() => {
     if (!materiEdukasiState.findById.data) {
-      materiEdukasiState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      materiEdukasiState.findById.initialize();
     }
   }, []);
 
   useEffect(() => {
     if (materiEdukasiState.findById.data) {
-      setJudul(materiEdukasiState.findById.data.judul ?? '')
-      setContent(materiEdukasiState.findById.data.deskripsi ?? '')
+      setJudul(materiEdukasiState.findById.data.judul ?? '');
+      setContent(materiEdukasiState.findById.data.deskripsi ?? '');
     }
-  }, [materiEdukasiState.findById.data])
+  }, [materiEdukasiState.findById.data]);
 
   const submit = () => {
     if (materiEdukasiState.findById.data) {
       materiEdukasiState.findById.data.judul = judul;
       materiEdukasiState.findById.data.deskripsi = content;
-      materiEdukasiState.update.save(materiEdukasiState.findById.data)
+      materiEdukasiState.update.save(materiEdukasiState.findById.data);
     }
-    router.push('/admin/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan')
-  }
+    router.push('/admin/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan');
+  };
+
   return (
-    <Box>
-      <Stack gap={'xs'}>
-        <Box>
-          <Button
-            variant={'subtle'}
-            onClick={() => router.back()}
-          >
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Edit Materi Edukasi Yang Diberikan</Title>
-              <Text fw={"bold"}>Judul</Text>
-              <EdukasiLingkunganTextEditor
-                showSubmit={false}
-                onChange={setJudul}
-                initialContent={judul}
-              />
-              <Text fw={"bold"}>Content</Text>
-              <EdukasiLingkunganTextEditor
-                showSubmit={false}
-                onChange={setContent}
-                initialContent={content}
-              />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                  loading={materiEdukasiState.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-      </Stack>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
+        <Title order={4} ml="sm" c="dark">
+          Edit Materi Edukasi Yang Diberikan
+        </Title>
+      </Group>
+
+      <Paper
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        w={{ base: '100%', md: '50%' }}
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <Box>
+            <Text fw="bold" mb={6}>
+              Judul
+            </Text>
+            <EdukasiLingkunganTextEditor showSubmit={false} onChange={setJudul} initialContent={judul} />
+          </Box>
+
+          <Box>
+            <Text fw="bold" mb={6}>
+              Konten
+            </Text>
+            <EdukasiLingkunganTextEditor showSubmit={false} onChange={setContent} initialContent={content} />
+          </Box>
+
+          <Group justify="right" mt="md">
+            <Button
+              onClick={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)',
+              }}
+              loading={materiEdukasiState.update.loading}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/page.tsx

@@ -1,5 +1,4 @@
 'use client'
-import colors from '@/con/colors';
 import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
@@ -10,44 +9,65 @@ import stateEdukasiLingkungan from '../../../_state/lingkungan/edukasi-lingkunga
 function Page() {
   const router = useRouter()
   const listMateriEdukasi = useProxy(stateEdukasiLingkungan.stateMateriEdukasiLingkungan)
+
   useShallowEffect(() => {
     listMateriEdukasi.findById.load('edit')
   }, [])
 
   if (!listMateriEdukasi.findById.data) {
     return (
-      <Stack>
-        <Skeleton radius={10} h={800} />
+      <Stack py={20}>
+        <Skeleton radius="md" height={600} />
       </Stack>
     )
   }
+
   return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"22"}>
-        <Grid>
+    <Box p="md">
+      <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
+        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2}>Preview Materi Edukasi Yang Diberikan</Title>
+            <Title order={3} fw={600}>Preview Materi Edukasi Yang Diberikan</Title>
           </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/edit')}>
-              <IconEdit size={16} />
+          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
+            <Button
+              size="sm"
+              variant="light"
+              color="green"
+              radius="md"
+              leftSection={<IconEdit size={16} />}
+              onClick={() =>
+                router.push('/admin/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan/edit')
+              }
+            >
+              Edit
             </Button>
           </GridCol>
         </Grid>
-        <Box>
-          <Stack gap={'lg'}>
-            <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listMateriEdukasi.findById.data.judul }} />
-              </Box>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listMateriEdukasi.findById.data.deskripsi }} />
-              </Box>
-            </Paper>
-          </Stack>
-        </Box>
-      </Stack>
-    </Paper>
+
+        <Stack gap="md">
+          <Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">
+            <Box mb="md">
+              <Text
+                fz={{ base: 'xl', md: '2xl' }}
+                fw={600}
+                c="black"
+                dangerouslySetInnerHTML={{ __html: listMateriEdukasi.findById.data.judul }}
+              />
+            </Box>
+            <Box>
+              <Text
+                fz={{ base: 'md', md: 'lg' }}
+                ta="justify"
+                c="dimmed"
+                lineClamp={10}
+                dangerouslySetInnerHTML={{ __html: listMateriEdukasi.findById.data.deskripsi }}
+              />
+            </Box>
+          </Paper>
+        </Stack>
+      </Paper>
+    </Box>
   )
 }
 

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit/page.tsx

@@ -9,77 +9,103 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
-const EdukasiLingkunganTextEditor = dynamic(() => import('../../_lib/edukasiLingkunganTextEditor').then(mod => mod.EdukasiLingkunganTextEditor), {
-  ssr: false,
-});
+const EdukasiLingkunganTextEditor = dynamic(
+  () => import('../../_lib/edukasiLingkunganTextEditor').then(mod => mod.EdukasiLingkunganTextEditor),
+  { ssr: false }
+);
 
 function EditTujuanEdukasiLingkungan() {
-  const router = useRouter()
-  const tujuanEdukasiState = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi)
+  const router = useRouter();
+  const tujuanEdukasiState = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi);
   const [judul, setJudul] = useState('');
   const [content, setContent] = useState('');
 
   useShallowEffect(() => {
     if (!tujuanEdukasiState.findById.data) {
-      tujuanEdukasiState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      tujuanEdukasiState.findById.initialize();
     }
   }, []);
 
   useEffect(() => {
     if (tujuanEdukasiState.findById.data) {
-      setJudul(tujuanEdukasiState.findById.data.judul ?? '')
-      setContent(tujuanEdukasiState.findById.data.deskripsi ?? '')
+      setJudul(tujuanEdukasiState.findById.data.judul ?? '');
+      setContent(tujuanEdukasiState.findById.data.deskripsi ?? '');
     }
-  }, [tujuanEdukasiState.findById.data])
+  }, [tujuanEdukasiState.findById.data]);
 
   const submit = () => {
     if (tujuanEdukasiState.findById.data) {
       tujuanEdukasiState.findById.data.judul = judul;
       tujuanEdukasiState.findById.data.deskripsi = content;
-      tujuanEdukasiState.update.save(tujuanEdukasiState.findById.data)
+      tujuanEdukasiState.update.save(tujuanEdukasiState.findById.data);
     }
-    router.push('/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan')
-  }
+    router.push('/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan');
+  };
+
   return (
-    <Box>
-      <Stack gap={'xs'}>
-        <Box>
-          <Button
-            variant={'subtle'}
-            onClick={() => router.back()}
-          >
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Edit Tujuan Edukasi Lingkungan</Title>
-              <Text fw={"bold"}>Judul</Text>
-              <EdukasiLingkunganTextEditor
-                showSubmit={false}
-                onChange={setJudul}
-                initialContent={judul}
-              />
-              <Text fw={"bold"}>Content</Text>
-              <EdukasiLingkunganTextEditor
-                showSubmit={false}
-                onChange={setContent}
-                initialContent={content}
-              />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                  loading={tujuanEdukasiState.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-      </Stack>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
+        <Title order={4} ml="sm" c="dark">
+          Edit Tujuan Edukasi Lingkungan
+        </Title>
+      </Group>
+
+      <Paper
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        w={{ base: '100%', md: '50%' }}
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <Box>
+            <Text fw="bold" mb={6}>
+              Judul
+            </Text>
+            <EdukasiLingkunganTextEditor
+              showSubmit={false}
+              onChange={setJudul}
+              initialContent={judul}
+            />
+          </Box>
+
+          <Box>
+            <Text fw="bold" mb={6}>
+              Konten
+            </Text>
+            <EdukasiLingkunganTextEditor
+              showSubmit={false}
+              onChange={setContent}
+              initialContent={content}
+            />
+          </Box>
+
+          <Group justify="right" mt="md">
+            <Button
+              onClick={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)',
+              }}
+              loading={tujuanEdukasiState.update.loading}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/page.tsx

@@ -1,5 +1,4 @@
 'use client'
-import colors from '@/con/colors';
 import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
@@ -8,47 +7,68 @@ import { useProxy } from 'valtio/utils';
 import stateEdukasiLingkungan from '../../../_state/lingkungan/edukasi-lingkungan';
 
 function Page() {
-  const router = useRouter()
-  const listTujuanEdukasi = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi)
+  const router = useRouter();
+  const listTujuanEdukasi = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi);
+
   useShallowEffect(() => {
-    listTujuanEdukasi.findById.load('edit')
-  }, [])
+    listTujuanEdukasi.findById.load('edit');
+  }, []);
 
   if (!listTujuanEdukasi.findById.data) {
     return (
-      <Stack>
-        <Skeleton radius={10} h={800} />
+      <Stack py={20}>
+        <Skeleton radius="md" height={600} />
       </Stack>
-    )
+    );
   }
+
   return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"22"}>
-        <Grid>
+    <Box p="md">
+      <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
+        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2}>Preview Tujuan Edukasi Lingkungan</Title>
+            <Title order={3} fw={600}>Preview Tujuan Edukasi Lingkungan</Title>
           </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit')}>
-              <IconEdit size={16} />
+          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
+            <Button
+              size="sm"
+              variant="light"
+              color="green"
+              radius="md"
+              leftSection={<IconEdit size={16} />}
+              onClick={() =>
+                router.push('/admin/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan/edit')
+              }
+            >
+              Edit
             </Button>
           </GridCol>
         </Grid>
-        <Box>
-          <Stack gap={'lg'}>
-            <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listTujuanEdukasi.findById.data.judul }} />
-              </Box>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listTujuanEdukasi.findById.data.deskripsi }} />
-              </Box>
-            </Paper>
-          </Stack>
-        </Box>
-      </Stack>
-    </Paper>
-  )
+
+        <Stack gap="md">
+          <Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">
+            <Box mb="md">
+              <Text
+                fz={{ base: 'xl', md: '2xl' }}
+                fw={600}
+                c='black'
+                dangerouslySetInnerHTML={{ __html: listTujuanEdukasi.findById.data.judul }}
+              />
+            </Box>
+            <Box>
+              <Text
+                fz={{ base: 'md', md: 'lg' }}
+                ta="justify"
+                c="dimmed"
+                lineClamp={10}
+                dangerouslySetInnerHTML={{ __html: listTujuanEdukasi.findById.data.deskripsi }}
+              />
+            </Box>
+          </Paper>
+        </Stack>
+      </Paper>
+    </Box>
+  );
 }
 
 export default Page;

src/app/admin/(dashboard)/lingkungan/gotong-royong/_lib/layoutTabs.tsx

@@ -1,62 +1,121 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { IconClipboardList, IconTags } from '@tabler/icons-react';
 
 function LayoutTabs({ children }: { children: React.ReactNode }) {
-    const router = useRouter()
-    const pathname = usePathname()
-    const tabs = [
-        {
-            label: "Kegiatan Desa",
-            value: "kegiatanDesa",
-            href: "/admin/lingkungan/gotong-royong/kegiatan-desa"
-        },
-        {
-            label: "Kategori Kegiatan",
-            value: "kategoriKegiatan",
-            href: "/admin/lingkungan/gotong-royong/kategori-kegiatan"
-        },
-    ];
-    const curentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+  const router = useRouter();
+  const pathname = usePathname();
 
-    const handleTabChange = (value: string | null) => {
-        const tab = tabs.find(t => t.value === value)
-        if (tab) {
-            router.push(tab.href)
-        }
-        setActiveTab(value)
+  const tabs = [
+    {
+      label: "Kegiatan Desa",
+      value: "kegiatanDesa",
+      href: "/admin/lingkungan/gotong-royong/kegiatan-desa",
+      icon: <IconClipboardList size={18} stroke={1.8} />,
+      tooltip: "Lihat dan kelola kegiatan desa",
+    },
+    {
+      label: "Kategori Kegiatan",
+      value: "kategoriKegiatan",
+      href: "/admin/lingkungan/gotong-royong/kategori-kegiatan",
+      icon: <IconTags size={18} stroke={1.8} />,
+      tooltip: "Kelola kategori kegiatan desa",
+    },
+  ];
+
+  const currentTab = tabs.find(tab => tab.href === pathname);
+  const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
+
+  const handleTabChange = (value: string | null) => {
+    const tab = tabs.find(t => t.value === value);
+    if (tab) {
+      router.push(tab.href);
     }
+    setActiveTab(value);
+  };
 
-    useEffect(() => {
-        const match = tabs.find(tab => tab.href === pathname)
-        if (match) {
-            setActiveTab(match.value)
-        }
-    }, [pathname])
+  useEffect(() => {
+    const match = tabs.find(tab => tab.href === pathname);
+    if (match) {
+      setActiveTab(match.value);
+    }
+  }, [pathname]);
 
-    return (
-        <Stack>
-            <Title order={3}>Gotong Royong</Title>
-            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
-                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-                    {tabs.map((e, i) => (
-                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
-                    ))}
-                </TabsList>
-                {tabs.map((e, i) => (
-                    <TabsPanel key={i} value={e.value}>
-                        {/* Konten dummy, bisa diganti tergantung routing */}
-                        <></>
-                    </TabsPanel>
-                ))}
-            </Tabs>
+  return (
+    <Stack gap="lg">
+      {/* ✅ Title lebih tegas */}
+      <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+        Gotong Royong
+      </Title>
+
+      <Tabs
+        color={colors['blue-button']}
+        variant="pills"
+        value={activeTab}
+        onChange={handleTabChange}
+        radius="lg"
+        keepMounted={false}
+      >
+        {/* ✅ Scroll horizontal */}
+        <ScrollArea type="auto" offsetScrollbars>
+          <TabsList
+            p="sm"
+            style={{
+              background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+              borderRadius: "1rem",
+              boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+              display: "flex",
+              flexWrap: "nowrap",
+              gap: "0.5rem",
+              paddingInline: "0.5rem",
+            }}
+          >
+            {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>
+        </ScrollArea>
+
+        {/* ✅ Panel dengan gaya kartu */}
+        {tabs.map((tab, i) => (
+          <TabsPanel
+            key={i}
+            value={tab.value}
+            style={{
+              padding: "1.5rem",
+              background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+              borderRadius: "1rem",
+              boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+            }}
+          >
             {children}
-        </Stack>
-    );
+          </TabsPanel>
+        ))}
+      </Tabs>
+    </Stack>
+  );
 }
 
-export default LayoutTabs;
+export default LayoutTabs;

src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/[id]/page.tsx

@@ -2,7 +2,7 @@
 'use client'
 import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -16,7 +16,7 @@ function EditKategoriKegiatan() {
   const stateKategori = useProxy(gotongRoyongState.kategoriKegiatan);
 
   const [formData, setFormData] = useState({
-    nama: "",
+    nama: '',
   });
 
   useEffect(() => {
@@ -27,15 +27,14 @@ function EditKategoriKegiatan() {
         const data = await stateKategori.edit.load(id);
 
         if (data) {
-          // pastikan id-nya masuk ke state edit
           stateKategori.edit.id = id;
           setFormData({
             nama: data.nama || '',
           });
         }
       } catch (error) {
-        console.error("Error loading kategori kegiatan:", error);
-        toast.error("Gagal memuat data kategori kegiatan");
+        console.error('Error loading kategori kegiatan:', error);
+        toast.error('Gagal memuat data kategori kegiatan');
       }
     };
 
@@ -49,45 +48,63 @@ function EditKategoriKegiatan() {
         return;
       }
 
-      stateKategori.edit.form = {
-        nama: formData.nama.trim(),
-      };
-
-      // Safety check tambahan: pastikan ID tidak kosong
-      if (!stateKategori.edit.id) {
-        stateKategori.edit.id = id; // fallback
-      }
+      stateKategori.edit.form = { nama: formData.nama.trim() };
+      if (!stateKategori.edit.id) stateKategori.edit.id = id;
 
       const success = await stateKategori.edit.update();
 
       if (success) {
-        router.push("/admin/lingkungan/gotong-royong/kategori-kegiatan");
+        toast.success('Kategori kegiatan berhasil diperbarui!');
+        router.push('/admin/lingkungan/gotong-royong/kategori-kegiatan');
       }
     } catch (error) {
-      console.error("Error updating kategori kegiatan:", error);
-      // toast akan ditampilkan dari fungsi update
+      console.error('Error updating kategori kegiatan:', error);
     }
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md" align="center">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" p="xs" radius="md" onClick={() => router.back()}>
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Kategori Kegiatan
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Kategori kegiatan</Title>
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
             value={formData.nama}
             onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori kegiatan</Text>}
-            placeholder='Masukkan nama kategori kegiatan'
+            label={<Text fw="bold" fz="sm">Nama Kategori Kegiatan</Text>}
+            placeholder="Masukkan nama kategori kegiatan"
+            required
           />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/create/page.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
@@ -29,31 +29,53 @@ function CreateKategoriKegiatan() {
   }
 
   return (
-    <Box>
-      <Box>
-        <Box mb={10}>
-          <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-            <IconArrowBack color={colors['blue-button']} size={25} />
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md" align="center">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" p="xs" radius="md" onClick={() => router.back()}>
+            <IconArrowBack color={colors['blue-button']} size={24} />
           </Button>
-        </Box>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Kategori Kegiatan
+        </Title>
+      </Group>
 
-        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-          <Stack gap={"xs"}>
-            <Title order={4}>Create Kategori Kegiatan</Title>
-            <TextInput
-              value={stateKategori.create.form.nama}
-              onChange={(val) => {
-                stateKategori.create.form.nama = val.target.value;
+      {/* 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={stateKategori.create.form.nama}
+            onChange={(val) => (stateKategori.create.form.nama = val.target.value)}
+            label={<Text fw="bold" fz="sm">Nama Kategori Kegiatan</Text>}
+            placeholder="Masukkan nama kategori kegiatan"
+            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)',
               }}
-              label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Kegiatan</Text>}
-              placeholder='Masukkan nama kategori kegiatan'
-            />
-            <Group>
-              <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Box>
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/lingkungan/gotong-royong/kategori-kegiatan/page.tsx

@@ -1,24 +1,40 @@
 '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,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconEdit, IconSearch, IconX } from '@tabler/icons-react';
+import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import gotongRoyongState from '../../../_state/lingkungan/gotong-royong';
 
-
 function KategoriKegiatan() {
   const [search, setSearch] = useState("")
   return (
     <Box>
       <HeaderSearch
         title='Kategori Kegiatan'
-        placeholder='pencarian'
+        placeholder='Cari kategori kegiatan...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -34,6 +50,14 @@ function ListKategoriKegiatan({ search }: { search: string }) {
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const router = useRouter()
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateKategori.findMany
+
   const handleHapus = () => {
     if (selectedId) {
       stateKategori.delete.byId(selectedId)
@@ -43,61 +67,110 @@ function ListKategoriKegiatan({ search }: { search: string }) {
   }
 
   useShallowEffect(() => {
-    stateKategori.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (stateKategori.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.nama.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!stateKategori.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
     )
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Kategori Kegiatan'
-          href='/admin/lingkungan/gotong-royong/kategori-kegiatan/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama Kategori</TableTh>
-              <TableTh>Edit</TableTh>
-              <TableTh>Delete</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>{item.nama}</TableTd>
-                <TableTd>
-                  <Button color="green" onClick={() => router.push(`/admin/lingkungan/gotong-royong/kategori-kegiatan/${item.id}`)}>
-                    <IconEdit size={20} />
-                  </Button>
-                </TableTd>
-                <TableTd>
-                  <Button color="red" onClick={() => {
-                    setSelectedId(item.id)
-                    setModalHapus(true)
-                  }}>
-                    <IconX 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 Kategori Kegiatan</Title>
+          <Tooltip label="Tambah Kategori Baru" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/lingkungan/gotong-royong/kategori-kegiatan/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '60%' }}>Nama Kategori</TableTh>
+                <TableTh style={{ width: '20%' }}>Edit</TableTh>
+                <TableTh style={{ width: '20%' }}>Delete</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>
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="green"
+                        leftSection={<IconEdit size={16} />}
+                        onClick={() => router.push(`/admin/lingkungan/gotong-royong/kategori-kegiatan/${item.id}`)}
+                      >
+                        Edit
+                      </Button>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="red"
+                        leftSection={<IconTrash size={16} />}
+                        onClick={() => {
+                          setSelectedId(item.id)
+                          setModalHapus(true)
+                        }}
+                      >
+                        Hapus
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={3}>
+                    <Center py={20}>
+                      <Text c="dimmed">Tidak ada kategori kegiatan 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>
+
       {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}

src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/[id]/edit/page.tsx

@@ -4,7 +4,7 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -12,7 +12,6 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-
 interface FormKegiatanDesa {
   judul: string;
   deskripsiSingkat: string;
@@ -92,14 +91,11 @@ function EditGotongRoyong() {
       if (file) {
         const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
         const uploaded = res.data?.data;
-        if (!uploaded?.id) {
-          return toast.error("Gagal upload gambar");
-        }
-
-        // Update imageId in global state
+        if (!uploaded?.id) return toast.error("Gagal upload gambar");
         kegiatanDesaState.edit.form.imageId = uploaded.id;
       }
       await kegiatanDesaState.edit.update()
+      toast.success("Kegiatan desa berhasil diperbarui!")
       router.push("/admin/lingkungan/gotong-royong/kegiatan-desa");
     } catch (error) {
       console.error("Error updating kegiatan desa:", error);
@@ -108,27 +104,40 @@ function EditGotongRoyong() {
   }
 
   return (
-    <Box>
-      <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">
+      <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 Kegiatan Desa
+        </Title>
+      </Group>
 
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Edit Kegiatan Desa</Title>
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
             value={formData.judul}
             label={<Text fz="sm" fw="bold">Judul Kegiatan Desa</Text>}
             placeholder="masukkan judul kegiatan desa"
             onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
+            required
           />
           <TextInput
             value={formData.deskripsiSingkat}
             label={<Text fz="sm" fw="bold">Deskripsi Singkat Kegiatan Desa</Text>}
             placeholder="masukkan deskripsi singkat kegiatan desa"
             onChange={(e) => setFormData({ ...formData, deskripsiSingkat: e.target.value })}
+            required
           />
           <Select
             label="Kategori Kegiatan"
@@ -141,7 +150,7 @@ function EditGotongRoyong() {
           />
 
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Lengkap Kegiatan Desa</Text>
+            <Text fw="bold" fz="sm">Deskripsi Lengkap Kegiatan Desa</Text>
             <EditEditor
               value={formData.deskripsiLengkap}
               onChange={(htmlContent) => {
@@ -150,6 +159,7 @@ function EditGotongRoyong() {
               }}
             />
           </Box>
+
           <TextInput
             label={<Text fz="sm" fw="bold">Tanggal Kegiatan Desa</Text>}
             placeholder="masukkan tanggal kegiatan desa"
@@ -169,71 +179,70 @@ function EditGotongRoyong() {
             placeholder="masukkan partisipan kegiatan desa"
             onChange={(e) => {
               const val = Number(e.target.value);
-              if (!isNaN(val)) {
-                setFormData({ ...formData, partisipan: val });
-              }
+              if (!isNaN(val)) setFormData({ ...formData, partisipan: val });
             }}
           />
+
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fw="bold" fz="sm" mb={6}>Gambar Kegiatan Desa</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/*': [] }}
+              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}>Drag gambar atau klik untuk pilih file</Text>
+                  <Text size="sm" c="dimmed">Maksimal 5MB, format gambar wajib</Text>
+                </Stack>
+              </Group>
+            </Dropzone>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                    loading="lazy"
-                  />
-                </Box>
-              )}
-
-            </Box>
+            {previewImage && (
+              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview"
+                  radius="md"
+                  style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
+                  loading="lazy"
+                />
+              </Box>
+            )}
           </Box>
-          <Button bg={colors['blue-button']} onClick={handleSubmit} >
-            Simpan
-          </Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/[id]/page.tsx

@@ -1,121 +1,166 @@
 'use client'
 import { useProxy } from 'valtio/utils';
-
-import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 
 import colors from '@/con/colors';
-
 import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 
 function DetailKegiatanDesa() {
-  const kegiatanDesaState = useProxy(gotongRoyongState.kegiatanDesa)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
+  const kegiatanDesaState = useProxy(gotongRoyongState.kegiatanDesa);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const params = useParams();
+  const router = useRouter();
 
   useShallowEffect(() => {
-    kegiatanDesaState.findUnique.load(params?.id as string)
-  }, [])
-
+    kegiatanDesaState.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      kegiatanDesaState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/lingkungan/gotong-royong/kegiatan-desa")
+      kegiatanDesaState.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/lingkungan/gotong-royong/kegiatan-desa");
     }
-  }
+  };
 
   if (!kegiatanDesaState.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={40} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = kegiatanDesaState.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 Kegiatan Desa Inovasi</Text>
-          {kegiatanDesaState.findUnique.data ? (
-            <Paper key={kegiatanDesaState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Judul Kegiatan Desa Inovasi</Text>
-                  <Text fz={"lg"}>{kegiatanDesaState.findUnique.data?.judul}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Tanggal</Text>
-                  <Text fz={"lg"}>{kegiatanDesaState.findUnique.data?.tanggal
-                    ? new Date(kegiatanDesaState.findUnique.data.tanggal).toLocaleDateString()
-                    : "-"}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Deskripsi Singkat</Text>
-                  <Text fz={"lg"} >{kegiatanDesaState.findUnique.data?.deskripsiSingkat}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: kegiatanDesaState.findUnique.data?.deskripsiLengkap }} />
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Kategori Kegiatan</Text>
-                  <Text fz={"lg"}>{kegiatanDesaState.findUnique.data?.kategoriKegiatan?.nama}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Partisipan</Text>
-                  <Text fz={"lg"}>{kegiatanDesaState.findUnique.data?.partisipan}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Lokasi</Text>
-                  <Text fz={"lg"}>{kegiatanDesaState.findUnique.data?.lokasi}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={kegiatanDesaState.findUnique.data?.image?.link} alt="gambar" loading="lazy" />
-                </Box>
-                <Flex gap={"xs"} mt={10}>
+    <Box py={10}>
+      {/* Tombol Kembali */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Container Detail */}
+      <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 Kegiatan Desa
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              {/* Judul */}
+              <Box>
+                <Text fz="lg" fw="bold">Judul Kegiatan Desa Inovasi</Text>
+                <Text fz="md" c="dimmed">{data.judul || '-'}</Text>
+              </Box>
+
+              {/* Tanggal */}
+              <Box>
+                <Text fz="lg" fw="bold">Tanggal</Text>
+                <Text fz="md" c="dimmed">
+                  {data.tanggal ? new Date(data.tanggal).toLocaleDateString() : '-'}
+                </Text>
+              </Box>
+
+              {/* Deskripsi Singkat */}
+              <Box>
+                <Text fz="lg" fw="bold">Deskripsi Singkat</Text>
+                <Text fz="md" c="dimmed">{data.deskripsiSingkat || '-'}</Text>
+              </Box>
+
+              {/* Deskripsi Lengkap */}
+              <Box>
+                <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data.deskripsiLengkap || '-' }} />
+              </Box>
+
+              {/* Kategori */}
+              <Box>
+                <Text fz="lg" fw="bold">Kategori Kegiatan</Text>
+                <Text fz="md" c="dimmed">{data.kategoriKegiatan?.nama || '-'}</Text>
+              </Box>
+
+              {/* Partisipan */}
+              <Box>
+                <Text fz="lg" fw="bold">Partisipan</Text>
+                <Text fz="md" c="dimmed">{data.partisipan || '-'}</Text>
+              </Box>
+
+              {/* Lokasi */}
+              <Box>
+                <Text fz="lg" fw="bold">Lokasi</Text>
+                <Text fz="md" c="dimmed">{data.lokasi || '-'}</Text>
+              </Box>
+
+              {/* Gambar */}
+              <Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                {data.image?.link ? (
+                  <Image
+                    src={data.image.link}
+                    alt={data.judul || 'Gambar Kegiatan Desa'}
+                    w={150}
+                    h={150}
+                    radius="md"
+                    fit="cover"
+                    loading="lazy"
+                  />
+                ) : (
+                  <Text fz="sm" c="dimmed">Tidak ada gambar</Text>
+                )}
+              </Box>
+
+              {/* Tombol Hapus & Edit */}
+              <Flex gap="sm" mt={10}>
+                <Tooltip label="Hapus Kegiatan Desa" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (kegiatanDesaState.findUnique.data) {
-                        setSelectedId(kegiatanDesaState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={kegiatanDesaState.delete.loading || !kegiatanDesaState.findUnique.data}
-                    color={"red"}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconX size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Kegiatan Desa" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (kegiatanDesaState.findUnique.data) {
-                        router.push(`/admin/lingkungan/gotong-royong/kegiatan-desa/${kegiatanDesaState.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!kegiatanDesaState.findUnique.data}
-                    color={"green"}
+                    color="green"
+                    onClick={() => router.push(`/admin/lingkungan/gotong-royong/kegiatan-desa/${data.id}/edit`)}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
+                </Tooltip>
+              </Flex>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
@@ -130,4 +175,4 @@ function DetailKegiatanDesa() {
   );
 }
 
-export default DetailKegiatanDesa;
+export default DetailKegiatanDesa;

src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/create/page.tsx

@@ -4,7 +4,19 @@ import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -12,10 +24,9 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-
 function CreateKegiatanDesa() {
   const router = useRouter();
-  const stateKegiatanDesa = useProxy(gotongRoyongState.kegiatanDesa)
+  const stateKegiatanDesa = useProxy(gotongRoyongState.kegiatanDesa);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
 
@@ -26,32 +37,33 @@ function CreateKegiatanDesa() {
 
   const resetForm = () => {
     stateKegiatanDesa.create.form = {
-      judul: "",
-      deskripsiSingkat: "",
-      deskripsiLengkap: "",
+      judul: '',
+      deskripsiSingkat: '',
+      deskripsiLengkap: '',
       tanggal: new Date(),
-      lokasi: "",
+      lokasi: '',
       partisipan: 0,
-      imageId: "",
-      kategoriKegiatanId: "",
+      imageId: '',
+      kategoriKegiatanId: '',
     };
     setPreviewImage(null);
     setFile(null);
   };
+
   const handleSubmit = async () => {
     if (!file) {
-      return toast.warn("Pilih file gambar terlebih dahulu");
+      return toast.warn('Silakan pilih file gambar terlebih dahulu');
     }
 
     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 mengunggah gambar, silakan coba lagi');
     }
 
     stateKegiatanDesa.create.form.imageId = uploaded.id;
@@ -59,153 +71,176 @@ function CreateKegiatanDesa() {
     await stateKegiatanDesa.create.create();
 
     resetForm();
-    router.push("/admin/lingkungan/gotong-royong/kegiatan-desa")
-  }
+    router.push('/admin/lingkungan/gotong-royong/kegiatan-desa');
+  };
+
   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 Kegiatan Desa
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Kegiatan Desa</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/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar Kegiatan
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+              </Group>
+              <Text ta="center" mt="sm" size="sm" color="dimmed">
+                Seret gambar atau klik untuk memilih file (maks 5MB)
+              </Text>
+            </Dropzone>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                    loading="lazy"
-                  />
-                </Box>
-              )}
-
-            </Box>
+            {previewImage && (
+              <Box mt="sm" style={{ textAlign: 'center' }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview Gambar"
+                  radius="md"
+                  style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
+                  loading="lazy"
+                />
+              </Box>
+            )}
           </Box>
+
+          {/* Input Form */}
           <TextInput
+            label="Judul Kegiatan"
+            placeholder="Masukkan judul kegiatan"
             value={stateKegiatanDesa.create.form.judul}
-            onChange={(val) => {
-              stateKegiatanDesa.create.form.judul = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Judul Kegiatan</Text>}
-            placeholder='Masukkan judul kegiatan'
+            onChange={(e) => (stateKegiatanDesa.create.form.judul = e.target.value)}
+            required
           />
           <TextInput
+            label="Deskripsi Singkat"
+            placeholder="Masukkan deskripsi singkat"
             value={stateKegiatanDesa.create.form.deskripsiSingkat}
-            onChange={(val) => {
-              stateKegiatanDesa.create.form.deskripsiSingkat = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
-            placeholder='Masukkan deskripsi singkat'
+            onChange={(e) => (stateKegiatanDesa.create.form.deskripsiSingkat = e.target.value)}
+            required
           />
           <TextInput
             type="number"
             min={0}
-            max={5}
-            step={0.1} // bisa pakai 0.1 biar support desimal
             value={stateKegiatanDesa.create.form.partisipan}
-            onChange={(val) => {
-              const value = Number(val.target.value);
-
-              // Validasi manual juga boleh (jaga-jaga)
-              if (value >= 0 && value <= 1000) {
+            onChange={(e) => {
+              const value = Number(e.target.value);
+              if (value >= 0) {
                 stateKegiatanDesa.create.form.partisipan = value;
               }
             }}
-            label={<Text fw={"bold"} fz={"sm"}>Partisipan</Text>}
-            placeholder='Masukkan partisipan'
+            label="Partisipan"
+            placeholder="Masukkan jumlah partisipan"
+            required
           />
           <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Tanggal</Text>}
+            label="Tanggal"
             type="date"
             placeholder="Contoh: 2022-01-01"
-            value={stateKegiatanDesa.create.form.tanggal ? stateKegiatanDesa.create.form.tanggal.toISOString().split('T')[0] : ''}
+            value={
+              stateKegiatanDesa.create.form.tanggal
+                ? stateKegiatanDesa.create.form.tanggal.toISOString().split('T')[0]
+                : ''
+            }
             onChange={(e) => {
               const dateValue = e.currentTarget.value;
               stateKegiatanDesa.create.form.tanggal = dateValue ? new Date(dateValue) : new Date();
             }}
+            required
           />
           <TextInput
+            label="Lokasi"
+            placeholder="Masukkan lokasi kegiatan"
             value={stateKegiatanDesa.create.form.lokasi}
-            onChange={(val) => {
-              stateKegiatanDesa.create.form.lokasi = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Lokasi</Text>}
-            placeholder='Masukkan lokasi'
+            onChange={(e) => (stateKegiatanDesa.create.form.lokasi = e.target.value)}
+            required
           />
+
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Deskripsi Lengkap</Text>
+            <Text fw="bold" fz="sm" mb={6}>
+              Deskripsi Lengkap
+            </Text>
             <CreateEditor
               value={stateKegiatanDesa.create.form.deskripsiLengkap}
-              onChange={(val) => {
-                stateKegiatanDesa.create.form.deskripsiLengkap = val;
-              }}
+              onChange={(val) => (stateKegiatanDesa.create.form.deskripsiLengkap = val)}
             />
           </Box>
+
           <Select
+            label="Kategori Kegiatan"
+            placeholder="Pilih kategori kegiatan"
             value={stateKegiatanDesa.create.form.kategoriKegiatanId}
-            onChange={(val) => {
-              stateKegiatanDesa.create.form.kategoriKegiatanId = val ?? "";
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Kategori Kegiatan</Text>}
-            placeholder="Pilih kategori produk"
+            onChange={(val) => (stateKegiatanDesa.create.form.kategoriKegiatanId = val ?? '')}
             data={
               gotongRoyongState.kategoriKegiatan.findMany.data?.map((v) => ({
                 value: v.id,
                 label: v.nama,
               })) || []
             }
+            required
           />
 
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          {/* Submit */}
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/lingkungan/gotong-royong/kegiatan-desa/page.tsx

@@ -1,13 +1,29 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+} from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
 import gotongRoyongState from '../../../_state/lingkungan/gotong-royong';
 
 function KegiatanDesa() {
@@ -15,8 +31,8 @@ function KegiatanDesa() {
   return (
     <Box>
       <HeaderSearch
-        title='Kegiatan Desa'
-        placeholder='pencarian'
+        title="Kegiatan Desa"
+        placeholder="Cari judul, lokasi, atau kategori kegiatan..."
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -27,71 +43,123 @@ function KegiatanDesa() {
 }
 
 function ListKegiatanDesa({ search }: { search: string }) {
-  const listState = useProxy(gotongRoyongState.kegiatanDesa)
+  const listState = useProxy(gotongRoyongState.kegiatanDesa);
   const router = useRouter();
-  useEffect(() => {
-    listState.findMany.load()
-  }, [])
 
-  const filteredData = (listState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.judul.toLowerCase().includes(keyword) ||
-      item.lokasi.toLowerCase().includes(keyword) || 
-      item.kategoriKegiatan?.nama?.toLowerCase().includes(keyword)
-    );
-  });
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = listState.findMany;
 
-  if (!listState.findMany.data) {
+  useShallowEffect(() => {
+    load(page, 10, search)
+  }, [page, search])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={600} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Kegiatan Desa'
-            href='/admin/lingkungan/gotong-royong/kegiatan-desa/create'
-          />
-          <Box style={{ overflowX: 'auto' }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Judul Kegiatan Desa</TableTh>
-                  <TableTh>Kategori Kegiatan Desa</TableTh>
-                  <TableTh>Lokasi Kegiatan Desa</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 Kegiatan Desa</Title>
+          <Button
+            leftSection={<IconPlus size={18} />}
+            color="blue"
+            variant="light"
+            onClick={() =>
+              router.push('/admin/lingkungan/gotong-royong/kegiatan-desa/create')
+            }
+          >
+            Tambah Baru
+          </Button>
+        </Group>
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '30%' }}>Judul</TableTh>
+                <TableTh style={{ width: '25%' }}>Kategori</TableTh>
+                <TableTh style={{ width: '25%' }}>Lokasi</TableTh>
+                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{item.judul}</Text>
-                      </Box>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.judul}
+                      </Text>
                     </TableTd>
-                    <TableTd>{item.kategoriKegiatan?.nama}</TableTd>
-                    <TableTd>{item.lokasi}</TableTd>
                     <TableTd>
-                      <Button onClick={() => router.push(`/admin/lingkungan/gotong-royong/kegiatan-desa/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
+                      <Text fz="sm" c="dimmed">
+                        {item.kategoriKegiatan?.nama || '-'}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="sm">{item.lokasi}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="blue"
+                        leftSection={<IconDeviceImacCog size={16} />}
+                        onClick={() =>
+                          router.push(
+                            `/admin/lingkungan/gotong-royong/kegiatan-desa/${item.id}`
+                          )
+                        }
+                      >
+                        Detail
                       </Button>
                     </TableTd>
                   </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text c="dimmed">
+                        Tidak ada kegiatan desa yang cocok dengan pencarian
+                      </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 KegiatanDesa;

src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/_lib/layoutTabs.tsx

@@ -1,67 +1,116 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { IconBook, IconLeaf, IconSchool } 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: "Filosofi Tri Hita",
       value: "filosofi-tri-hita",
-      href: "/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana"
+      href: "/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana",
+      tooltip: "Lihat filosofi Tri Hita Karana",
+      icon: <IconLeaf size={18} stroke={1.8} />
     },
     {
       label: "Nilai Konservasi Adat",
       value: "nilai-konservasi-adat",
-      href: "/admin/lingkungan/konservasi-adat-bali/nilai-konservasi-adat"
+      href: "/admin/lingkungan/konservasi-adat-bali/nilai-konservasi-adat",
+      tooltip: "Kelola nilai konservasi adat",
+      icon: <IconBook size={18} stroke={1.8} />
     },
     {
       label: "Bentuk Konservasi Berdasarkan Adat",
       value: "bentuk-konservasi-berdasarkan-adat",
-      href: "/admin/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat"
+      href: "/admin/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat",
+      tooltip: "Lihat bentuk konservasi berdasarkan adat",
+      icon: <IconSchool size={18} stroke={1.8} />
     },
   ];
-  const curentTab = tabs.find(tab => tab.href === pathname)
-  const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+  const currentTab = tabs.find(tab => tab.href === pathname)
+  const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
 
   const handleTabChange = (value: string | null) => {
     const tab = tabs.find(t => t.value === value)
-    if (tab) {
-      router.push(tab.href)
-    }
+    if (tab) router.push(tab.href)
     setActiveTab(value)
   }
 
   useEffect(() => {
     const match = tabs.find(tab => tab.href === pathname)
-    if (match) {
-      setActiveTab(match.value)
-    }
+    if (match) setActiveTab(match.value)
   }, [pathname])
 
   return (
-    <Stack>
-      <Title order={3}>Konservasi Adat Bali</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 */}
-            <></>
+    <Stack gap="md">
+      <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+        Konservasi Adat Bali
+      </Title>
+
+      <Tabs
+        color={colors['blue-button']}
+        variant="pills"
+        value={activeTab}
+        onChange={handleTabChange}
+        radius="lg"
+        keepMounted={false}
+      >
+        <ScrollArea type="auto" offsetScrollbars>
+          <TabsList
+            p="sm"
+            style={{
+              background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+              borderRadius: "1rem",
+              boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+              display: "flex",
+              flexWrap: "nowrap",
+              gap: "0.5rem",
+              paddingInline: "0.5rem",
+            }}
+          >
+            {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",
+                    whiteSpace: "nowrap",
+                    transition: "all 0.2s ease",
+                  }}
+                >
+                  <span style={{
+                    display: "inline-block",
+                    maxWidth: "200px",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis"
+                  }}>
+                    {tab.label}
+                  </span>
+                </TabsTab>
+              </Tooltip>
+            ))}
+          </TabsList>
+        </ScrollArea>
+
+        {tabs.map((tab, i) => (
+          <TabsPanel key={i} value={tab.value}>
+            <Box p="md">
+              {children}
+            </Box>
           </TabsPanel>
         ))}
       </Tabs>
-      {children}
     </Stack>
   );
 }
 
-export default LayoutTabs;
+export default LayoutTabs;

src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/edit/page.tsx

@@ -9,77 +9,105 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
-const KonservasiAdatBaliTextEditor = dynamic(() => import('../../_lib/konservasiAdatBaliTextEditor').then(mod => mod.KonservasiAdatBaliTextEditor), {
-  ssr: false,
-});
+const KonservasiAdatBaliTextEditor = dynamic(
+  () => import('../../_lib/konservasiAdatBaliTextEditor').then(mod => mod.KonservasiAdatBaliTextEditor),
+  { ssr: false }
+);
 
 function EditBentukKonservasiBerdasarkanAdat() {
-  const router = useRouter()
-  const bentukKonservasiState = useProxy(stateKonservasiAdatBali.stateBentukKonservasiBerdasarkanAdat)
+  const router = useRouter();
+  const bentukKonservasiState = useProxy(stateKonservasiAdatBali.stateBentukKonservasiBerdasarkanAdat);
   const [judul, setJudul] = useState('');
   const [content, setContent] = useState('');
 
   useShallowEffect(() => {
     if (!bentukKonservasiState.findById.data) {
-      bentukKonservasiState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      bentukKonservasiState.findById.initialize();
     }
   }, []);
 
   useEffect(() => {
     if (bentukKonservasiState.findById.data) {
-      setJudul(bentukKonservasiState.findById.data.judul ?? '')
-      setContent(bentukKonservasiState.findById.data.deskripsi ?? '')
+      setJudul(bentukKonservasiState.findById.data.judul ?? '');
+      setContent(bentukKonservasiState.findById.data.deskripsi ?? '');
     }
-  }, [bentukKonservasiState.findById.data])
+  }, [bentukKonservasiState.findById.data]);
 
   const submit = () => {
     if (bentukKonservasiState.findById.data) {
       bentukKonservasiState.findById.data.judul = judul;
       bentukKonservasiState.findById.data.deskripsi = content;
-      bentukKonservasiState.update.save(bentukKonservasiState.findById.data)
+      bentukKonservasiState.update.save(bentukKonservasiState.findById.data);
     }
-    router.push('/admin/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat')
-  }
+    router.push('/admin/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat');
+  };
+
   return (
-    <Box>
-      <Stack gap={'xs'}>
-        <Box>
-          <Button
-            variant={'subtle'}
-            onClick={() => router.back()}
-          >
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Edit Bentuk Konservasi Berdasarkan Adat</Title>
-              <Text fw={"bold"}>Judul</Text>
-              <KonservasiAdatBaliTextEditor
-                showSubmit={false}
-                onChange={setJudul}
-                initialContent={judul}
-              />
-              <Text fw={"bold"}>Content</Text>
-              <KonservasiAdatBaliTextEditor
-                showSubmit={false}
-                onChange={setContent}
-                initialContent={content}
-              />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}    
-                  onClick={submit}
-                  loading={bentukKonservasiState.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-      </Stack>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
+        <Title order={4} ml="sm" c="dark">
+          Edit Bentuk Konservasi Berdasarkan Adat
+        </Title>
+      </Group>
+
+      {/* Form Paper */}
+      <Paper
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        w={{ base: '100%', md: '50%' }}
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <Box>
+            <Text fw="bold" mb={6}>
+              Judul
+            </Text>
+            <KonservasiAdatBaliTextEditor
+              showSubmit={false}
+              onChange={setJudul}
+              initialContent={judul}
+            />
+          </Box>
+
+          <Box>
+            <Text fw="bold" mb={6}>
+              Deskripsi
+            </Text>
+            <KonservasiAdatBaliTextEditor
+              showSubmit={false}
+              onChange={setContent}
+              initialContent={content}
+            />
+          </Box>
+
+          <Group justify="right" mt="md">
+            <Button
+              onClick={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)',
+              }}
+              loading={bentukKonservasiState.update.loading}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/page.tsx

@@ -8,47 +8,80 @@ import { useProxy } from 'valtio/utils';
 import stateKonservasiAdatBali from '../../../_state/lingkungan/konservasi-adat-bali';
 
 function Page() {
-  const router = useRouter()
-  const listBentukKonservasiBerdasarkanAdat = useProxy(stateKonservasiAdatBali.stateBentukKonservasiBerdasarkanAdat)
+  const router = useRouter();
+  const listBentukKonservasiBerdasarkanAdat = useProxy(
+    stateKonservasiAdatBali.stateBentukKonservasiBerdasarkanAdat
+  );
+
   useShallowEffect(() => {
-    listBentukKonservasiBerdasarkanAdat.findById.load('edit')
-  }, [])
+    listBentukKonservasiBerdasarkanAdat.findById.load('edit');
+  }, []);
 
   if (!listBentukKonservasiBerdasarkanAdat.findById.data) {
     return (
-      <Stack>
-        <Skeleton radius={10} h={800} />
+      <Stack py={20} align="center">
+        <Skeleton radius="md" height={600} width="100%" />
       </Stack>
-    )
+    );
   }
+
   return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"22"}>
-        <Grid>
+    <Box p={{ base: 'md', md: 'xl' }}>
+      <Paper withBorder radius="md" p={{ base: 'md', md: 'lg' }} bg={colors['white-1']}>
+        {/* Header */}
+        <Grid align="center" mb="lg">
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2}>Preview Bentuk Konservasi Berdasarkan Adat</Title>
+            <Title order={3} fw={600} c="dark">
+              Preview Bentuk Konservasi Berdasarkan Adat
+            </Title>
           </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/edit')}>
-              <IconEdit size={16} />
+          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
+            <Button
+              size="sm"
+              variant="light"
+              color="green"
+              radius="md"
+              leftSection={<IconEdit size={16} />}
+              onClick={() =>
+                router.push(
+                  '/admin/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/edit'
+                )
+              }
+            >
+              Edit
             </Button>
           </GridCol>
         </Grid>
-        <Box>
-          <Stack gap={'lg'}>
-            <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listBentukKonservasiBerdasarkanAdat.findById.data.judul }} />
-              </Box>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listBentukKonservasiBerdasarkanAdat.findById.data.deskripsi }} />
-              </Box>
-            </Paper>
-          </Stack>
-        </Box>
-      </Stack>
-    </Paper>
-  )
+
+        {/* Konten */}
+        <Stack gap="md">
+          <Paper radius="md" p={{ base: 'md', md: 'xl' }} bg={colors['BG-trans']} shadow="sm">
+            <Box mb="md">
+              <Text
+                fz={{ base: 'xl', md: '2xl' }}
+                fw={600}
+                c="dark"
+                dangerouslySetInnerHTML={{
+                  __html: listBentukKonservasiBerdasarkanAdat.findById.data.judul,
+                }}
+              />
+            </Box>
+            <Box>
+              <Text
+                fz={{ base: 'md', md: 'lg' }}
+                ta="justify"
+                c="dimmed"
+                lineClamp={10}
+                dangerouslySetInnerHTML={{
+                  __html: listBentukKonservasiBerdasarkanAdat.findById.data.deskripsi,
+                }}
+              />
+            </Box>
+          </Paper>
+        </Stack>
+      </Paper>
+    </Box>
+  );
 }
 
 export default Page;

src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/edit/page.tsx

@@ -9,78 +9,108 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
-
-const KonservasiAdatBaliTextEditor = dynamic(() => import('../../_lib/konservasiAdatBaliTextEditor').then(mod => mod.KonservasiAdatBaliTextEditor), {
-  ssr: false,
-});
+const KonservasiAdatBaliTextEditor = dynamic(
+  () =>
+    import('../../_lib/konservasiAdatBaliTextEditor').then(
+      (mod) => mod.KonservasiAdatBaliTextEditor
+    ),
+  { ssr: false }
+);
 
 function EditFilosofiTriHitaKarana() {
-  const router = useRouter()
-  const filosofiTriHitaState = useProxy(stateKonservasiAdatBali.stateFilosofiTriHita)
+  const router = useRouter();
+  const filosofiTriHitaState = useProxy(stateKonservasiAdatBali.stateFilosofiTriHita);
   const [judul, setJudul] = useState('');
   const [content, setContent] = useState('');
 
   useShallowEffect(() => {
     if (!filosofiTriHitaState.findById.data) {
-      filosofiTriHitaState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      filosofiTriHitaState.findById.initialize();
     }
   }, []);
 
   useEffect(() => {
     if (filosofiTriHitaState.findById.data) {
-      setJudul(filosofiTriHitaState.findById.data.judul ?? '')
-      setContent(filosofiTriHitaState.findById.data.deskripsi ?? '')
+      setJudul(filosofiTriHitaState.findById.data.judul ?? '');
+      setContent(filosofiTriHitaState.findById.data.deskripsi ?? '');
     }
-  }, [filosofiTriHitaState.findById.data])
+  }, [filosofiTriHitaState.findById.data]);
 
   const submit = () => {
     if (filosofiTriHitaState.findById.data) {
       filosofiTriHitaState.findById.data.judul = judul;
       filosofiTriHitaState.findById.data.deskripsi = content;
-      filosofiTriHitaState.update.save(filosofiTriHitaState.findById.data)
+      filosofiTriHitaState.update.save(filosofiTriHitaState.findById.data);
     }
-    router.push('/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana')
-  }
+    router.push('/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana');
+  };
+
   return (
-    <Box>
-      <Stack gap={'xs'}>
-        <Box>
-          <Button
-            variant={'subtle'}
-            onClick={() => router.back()}
-          >
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Edit Filosofi Tri Hita Karana</Title>
-              <Text fw={"bold"}>Judul</Text>
-              <KonservasiAdatBaliTextEditor
-                showSubmit={false}
-                onChange={setJudul}
-                initialContent={judul}
-              />
-              <Text fw={"bold"}>Content</Text>
-              <KonservasiAdatBaliTextEditor
-                showSubmit={false}
-                onChange={setContent}
-                initialContent={content}
-              />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                  loading={filosofiTriHitaState.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-      </Stack>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
+        <Title order={4} ml="sm" c="dark">
+          Edit Filosofi Tri Hita Karana
+        </Title>
+      </Group>
+
+      {/* Form Paper */}
+      <Paper
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        w={{ base: '100%', md: '50%' }}
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <Box>
+            <Text fw="bold" mb={6}>
+              Judul
+            </Text>
+            <KonservasiAdatBaliTextEditor
+              showSubmit={false}
+              onChange={setJudul}
+              initialContent={judul}
+            />
+          </Box>
+
+          <Box>
+            <Text fw="bold" mb={6}>
+              Deskripsi
+            </Text>
+            <KonservasiAdatBaliTextEditor
+              showSubmit={false}
+              onChange={setContent}
+              initialContent={content}
+            />
+          </Box>
+
+          <Group justify="right" mt="md">
+            <Button
+              onClick={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)',
+              }}
+              loading={filosofiTriHitaState.update.loading}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/page.tsx

@@ -1,5 +1,4 @@
 'use client'
-import colors from '@/con/colors';
 import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
@@ -7,49 +6,73 @@ import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import stateKonservasiAdatBali from '../../../_state/lingkungan/konservasi-adat-bali';
 
-
 function Page() {
-  const router = useRouter()
-  const listFilosofi = useProxy(stateKonservasiAdatBali.stateFilosofiTriHita)
+  const router = useRouter();
+  const listFilosofi = useProxy(stateKonservasiAdatBali.stateFilosofiTriHita);
+
   useShallowEffect(() => {
-    listFilosofi.findById.load('edit')
-  }, [])
+    listFilosofi.findById.load('edit');
+  }, []);
 
   if (!listFilosofi.findById.data) {
     return (
-      <Stack>
-        <Skeleton radius={10} h={800} />
+      <Stack py={20}>
+        <Skeleton radius="md" height={600} />
       </Stack>
-    )
+    );
   }
+
   return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"22"}>
-        <Grid>
+    <Box p="md">
+      <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
+        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2}>Preview Filosofi Tri Hita Karana</Title>
+            <Title order={3} fw={600}>
+              Preview Filosofi Tri Hita Karana
+            </Title>
           </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/edit')}>
-              <IconEdit size={16} />
+          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
+            <Button
+              size="sm"
+              variant="light"
+              color="green"
+              radius="md"
+              leftSection={<IconEdit size={16} />}
+              onClick={() =>
+                router.push(
+                  '/admin/lingkungan/konservasi-adat-bali/filosofi-tri-hita-karana/edit'
+                )
+              }
+            >
+              Edit
             </Button>
           </GridCol>
         </Grid>
-        <Box>
-          <Stack gap={'lg'}>
-            <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listFilosofi.findById.data.judul }} />
-              </Box>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listFilosofi.findById.data.deskripsi }} />
-              </Box>
-            </Paper>
-          </Stack>
-        </Box>
-      </Stack>
-    </Paper>
-  )
+
+        <Stack gap="md">
+          <Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">
+            <Box mb="md" px={{ base: 0, md: 20 }}>
+              <Text
+                fz={{ base: 'xl', md: '2xl' }}
+                fw={600}
+                c="black"
+                dangerouslySetInnerHTML={{ __html: listFilosofi.findById.data.judul }}
+              />
+            </Box>
+            <Box px={{ base: 0, md: 20 }}>
+              <Text
+                fz={{ base: 'md', md: 'lg' }}
+                ta="justify"
+                c="dimmed"
+                lineClamp={10}
+                dangerouslySetInnerHTML={{ __html: listFilosofi.findById.data.deskripsi }}
+              />
+            </Box>
+          </Paper>
+        </Stack>
+      </Paper>
+    </Box>
+  );
 }
 
 export default Page;

src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/edit/page.tsx

@@ -9,77 +9,105 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
-const KonservasiAdatBaliTextEditor = dynamic(() => import('../../_lib/konservasiAdatBaliTextEditor').then(mod => mod.KonservasiAdatBaliTextEditor), {
-  ssr: false,
-});
+const KonservasiAdatBaliTextEditor = dynamic(
+  () => import('../../_lib/konservasiAdatBaliTextEditor').then(mod => mod.KonservasiAdatBaliTextEditor),
+  { ssr: false }
+);
 
 function EditNilaiKonservasiAdat() {
-  const router = useRouter()
-  const nilaiKonservasiState = useProxy(stateKonservasiAdatBali.stateNilaiKonservasiAdat)
+  const router = useRouter();
+  const nilaiKonservasiState = useProxy(stateKonservasiAdatBali.stateNilaiKonservasiAdat);
   const [judul, setJudul] = useState('');
   const [content, setContent] = useState('');
 
   useShallowEffect(() => {
     if (!nilaiKonservasiState.findById.data) {
-      nilaiKonservasiState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      nilaiKonservasiState.findById.initialize();
     }
   }, []);
 
   useEffect(() => {
     if (nilaiKonservasiState.findById.data) {
-      setJudul(nilaiKonservasiState.findById.data.judul ?? '')
-      setContent(nilaiKonservasiState.findById.data.deskripsi ?? '')
+      setJudul(nilaiKonservasiState.findById.data.judul ?? '');
+      setContent(nilaiKonservasiState.findById.data.deskripsi ?? '');
     }
-  }, [nilaiKonservasiState.findById.data])
+  }, [nilaiKonservasiState.findById.data]);
 
   const submit = () => {
     if (nilaiKonservasiState.findById.data) {
       nilaiKonservasiState.findById.data.judul = judul;
       nilaiKonservasiState.findById.data.deskripsi = content;
-      nilaiKonservasiState.update.save(nilaiKonservasiState.findById.data)
+      nilaiKonservasiState.update.save(nilaiKonservasiState.findById.data);
     }
-    router.push('/admin/lingkungan/konservasi-adat-bali/nilai-konservasi-adat')
-  }
+    router.push('/admin/lingkungan/konservasi-adat-bali/nilai-konservasi-adat');
+  };
+
   return (
-    <Box>
-      <Stack gap={'xs'}>
-        <Box>
-          <Button
-            variant={'subtle'}
-            onClick={() => router.back()}
-          >
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Edit Nilai Konservasi Adat</Title>
-              <Text fw={"bold"}>Judul</Text>
-              <KonservasiAdatBaliTextEditor
-                showSubmit={false}
-                onChange={setJudul}
-                initialContent={judul}
-              />
-              <Text fw={"bold"}>Content</Text>
-              <KonservasiAdatBaliTextEditor
-                showSubmit={false}
-                onChange={setContent}
-                initialContent={content}
-              />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                  loading={nilaiKonservasiState.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-      </Stack>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          p="xs"
+          radius="md"
+        >
+          <IconArrowBack color={colors['blue-button']} size={24} />
+        </Button>
+        <Title order={4} ml="sm" c="dark">
+          Edit Nilai Konservasi Adat
+        </Title>
+      </Group>
+
+      {/* Form Paper */}
+      <Paper
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        w={{ base: '100%', md: '50%' }}
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <Box>
+            <Text fw="bold" mb={6}>
+              Judul
+            </Text>
+            <KonservasiAdatBaliTextEditor
+              showSubmit={false}
+              onChange={setJudul}
+              initialContent={judul}
+            />
+          </Box>
+
+          <Box>
+            <Text fw="bold" mb={6}>
+              Deskripsi
+            </Text>
+            <KonservasiAdatBaliTextEditor
+              showSubmit={false}
+              onChange={setContent}
+              initialContent={content}
+            />
+          </Box>
+
+          <Group justify="right" mt="md">
+            <Button
+              onClick={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)',
+              }}
+              loading={nilaiKonservasiState.update.loading}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }

src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/page.tsx

@@ -1,5 +1,4 @@
 'use client'
-import colors from '@/con/colors';
 import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
@@ -8,47 +7,70 @@ import { useProxy } from 'valtio/utils';
 import stateKonservasiAdatBali from '../../../_state/lingkungan/konservasi-adat-bali';
 
 function Page() {
-  const router = useRouter()
-  const listNilaiKonservasiAdat = useProxy(stateKonservasiAdatBali.stateNilaiKonservasiAdat)
+  const router = useRouter();
+  const listNilaiKonservasiAdat = useProxy(stateKonservasiAdatBali.stateNilaiKonservasiAdat);
+
   useShallowEffect(() => {
-    listNilaiKonservasiAdat.findById.load('edit')
-  }, [])
+    listNilaiKonservasiAdat.findById.load('edit');
+  }, []);
 
   if (!listNilaiKonservasiAdat.findById.data) {
     return (
-      <Stack>
-        <Skeleton radius={10} h={800} />
+      <Stack py={20}>
+        <Skeleton radius="md" height={600} />
       </Stack>
-    )
+    );
   }
+
   return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={"22"}>
-        <Grid>
+    <Box p="md">
+      <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
+        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={2}>Preview Nilai Konservasi Adat</Title>
+            <Title order={3} fw={600}>
+              Preview Nilai Konservasi Adat
+            </Title>
           </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/edit')}>
-              <IconEdit size={16} />
+          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
+            <Button
+              size="sm"
+              variant="light"
+              color="green"
+              radius="md"
+              leftSection={<IconEdit size={16} />}
+              onClick={() =>
+                router.push('/admin/lingkungan/konservasi-adat-bali/nilai-konservasi-adat/edit')
+              }
+            >
+              Edit
             </Button>
           </GridCol>
         </Grid>
-        <Box>
-          <Stack gap={'lg'}>
-            <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listNilaiKonservasiAdat.findById.data.judul }} />
-              </Box>
-              <Box px={{ base: 0, md: 30 }}>
-                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listNilaiKonservasiAdat.findById.data.deskripsi }} />
-              </Box>
-            </Paper>
-          </Stack>
-        </Box>
-      </Stack>
-    </Paper>
-  )
+
+        <Stack gap="md">
+          <Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">
+            <Box mb="md">
+              <Text
+                fz={{ base: 'xl', md: '2xl' }}
+                fw={600}
+                c="black"
+                dangerouslySetInnerHTML={{ __html: listNilaiKonservasiAdat.findById.data.judul }}
+              />
+            </Box>
+            <Box>
+              <Text
+                fz={{ base: 'md', md: 'lg' }}
+                ta="justify"
+                c="dimmed"
+                lineClamp={10}
+                dangerouslySetInnerHTML={{ __html: listNilaiKonservasiAdat.findById.data.deskripsi }}
+              />
+            </Box>
+          </Paper>
+        </Stack>
+      </Paper>
+    </Box>
+  );
 }
 
 export default Page;

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/_lib/layoutTabs.tsx

@@ -2,8 +2,9 @@
 'use client'
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { IconTrash, IconRecycle } from '@tabler/icons-react';
+import colors from '@/con/colors';
 
 function LayoutTabsPengelolaanSampahBankSampah({ children }: { children: React.ReactNode }) {
   const router = useRouter();
@@ -45,49 +46,75 @@ function LayoutTabsPengelolaanSampahBankSampah({ children }: { children: React.R
   }, [pathname]);
 
   return (
-    <Stack gap="md">
-      <Title order={3} mb="sm">Pengelolaan Sampah Bank Sampah</Title>
-      <Tabs 
-        value={activeTab} 
-        onChange={handleTabChange}
+    <Stack gap="lg">
+      <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+        Pengelolaan Sampah Bank Sampah
+      </Title>
+
+      <Tabs
+        color={colors["blue-button"]}
         variant="pills"
-        radius="md"
+        value={activeTab}
+        onChange={handleTabChange}
+        radius="lg"
+        keepMounted={false}
       >
-        <TabsList>
-          {tabs.map((tab) => (
-            <Tooltip
-              key={tab.value}
-              label={tab.tooltip}
-              position="top"
-              withArrow
-              transitionProps={{ transition: 'pop', duration: 300 }}
-            >
-              <TabsTab 
-                value={tab.value}
-                leftSection={tab.icon}
-                style={{
-                  padding: '10px 20px',
-                  height: 'auto',
-                  minHeight: 44,
-                }}
+        {/* ✅ Scroll horizontal wrapper */}
+        <ScrollArea type="auto" offsetScrollbars>
+          <TabsList
+            p="sm"
+            style={{
+              background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+              borderRadius: "1rem",
+              boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+              display: "flex",
+              flexWrap: "nowrap",
+              gap: "0.5rem",
+              paddingInline: "0.5rem",
+            }}
+          >
+            {tabs.map((tab, i) => (
+              <Tooltip
+                key={i}
+                label={tab.tooltip}
+                position="bottom"
+                withArrow
+                transitionProps={{ transition: 'pop', duration: 200 }}
               >
-                {tab.label}
-              </TabsTab>
-            </Tooltip>
-          ))}
-        </TabsList>
-        <TabsPanel 
-          value={activeTab || ''} 
-          pt="lg"
-          style={{
-            minHeight: '60vh',
-          }}
-        >
-          {children}
-        </TabsPanel>
+                <TabsTab
+                  value={tab.value}
+                  leftSection={tab.icon}
+                  style={{
+                    fontWeight: 600,
+                    fontSize: "0.9rem",
+                    transition: "all 0.2s ease",
+                  }}
+                >
+                  {tab.label}
+                </TabsTab>
+              </Tooltip>
+            ))}
+          </TabsList>
+        </ScrollArea>
+
+        {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)",
+              minHeight: "60vh",
+            }}
+          >
+            {children}
+          </TabsPanel>
+        ))}
       </Tabs>
     </Stack>
   );
 }
 
-export default LayoutTabsPengelolaanSampahBankSampah;
+export default LayoutTabsPengelolaanSampahBankSampah;

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

@@ -4,14 +4,23 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import SelectIconProgramEdit from '@/app/admin/(dashboard)/_com/selectIconEdit';
 import programPenghijauanState from '@/app/admin/(dashboard)/_state/lingkungan/program-penghijauan';
 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';
 
-
 interface FormProgramPenghijauan {
   name: string;
   deskripsi: string;
@@ -19,19 +28,32 @@ interface FormProgramPenghijauan {
   icon: string;
 }
 
-type IconKey = 'ekowisata' | 'kompetisi' | 'wisata' | 'ekonomi' | 'sampah' | 'truck' | 'scale' | 'clipboard' | 'trash' | 'lingkunganSehat' | 'sumberOksigen' | 'ekonomiBerkelanjutan' | 'mencegahBencana';
-
+type IconKey =
+  | 'ekowisata'
+  | 'kompetisi'
+  | 'wisata'
+  | 'ekonomi'
+  | 'sampah'
+  | 'truck'
+  | 'scale'
+  | 'clipboard'
+  | 'trash'
+  | 'lingkunganSehat'
+  | 'sumberOksigen'
+  | 'ekonomiBerkelanjutan'
+  | 'mencegahBencana';
 
 function EditProgramPenghijauan() {
-  const stateProgramPenghijauan = useProxy(programPenghijauanState)
-  const params = useParams()
+  const stateProgramPenghijauan = useProxy(programPenghijauanState);
+  const params = useParams();
   const router = useRouter();
+
   const [formData, setFormData] = useState<FormProgramPenghijauan>({
     name: '',
     deskripsi: '',
     judul: '',
     icon: '',
-  })
+  });
 
   useEffect(() => {
     const loadProgramPenghijauan = async () => {
@@ -41,7 +63,6 @@ function EditProgramPenghijauan() {
       try {
         const data = await stateProgramPenghijauan.update.load(id);
         if (data) {
-          // ⬇️ FIX PENTING: tambahkan ini
           stateProgramPenghijauan.update.id = id;
 
           stateProgramPenghijauan.update.form = {
@@ -59,16 +80,14 @@ function EditProgramPenghijauan() {
           });
         }
       } catch (error) {
-        console.error("Error loading program penghijauan:", error);
-        toast.error("Gagal memuat data program penghijauan");
+        console.error('Error loading program penghijauan:', error);
+        toast.error('Gagal memuat data program penghijauan');
       }
-    }
+    };
 
     loadProgramPenghijauan();
   }, [params?.id]);
 
-
-
   const handleSubmit = async () => {
     try {
       stateProgramPenghijauan.update.form = {
@@ -77,49 +96,74 @@ function EditProgramPenghijauan() {
         deskripsi: formData.deskripsi.trim(),
         judul: formData.judul.trim(),
         icon: formData.icon.trim(),
-      }
+      };
       await stateProgramPenghijauan.update.submit();
-      router.push("/admin/lingkungan/program-penghijauan");
+      router.push('/admin/lingkungan/program-penghijauan');
     } catch (error) {
-      console.error("Error updating program penghijauan:", error);
-      toast.error("Gagal memuat data program penghijauan");
+      console.error('Error updating program penghijauan:', error);
+      toast.error('Gagal memperbarui program penghijauan');
     }
-  }
-  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={3}>Edit Program Penghijauan</Title>
+  return (
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header dengan back button */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Program Penghijauan
+        </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">
           <TextInput
             value={formData.name}
-            label={<Text fz={"sm"} fw={"bold"}>Nama Program Penghijauan</Text>}
-            placeholder="masukkan nama program penghijauan"
-            onChange={(val) => {
+            label="Nama Program Penghijauan"
+            placeholder="Masukkan nama program penghijauan"
+            onChange={(val) =>
               setFormData({
                 ...formData,
-                name: val.target.value
+                name: val.target.value,
               })
-            }}
+            }
+            required
           />
+
           <TextInput
             value={formData.judul}
-            label={<Text fz={"sm"} fw={"bold"}>Judul Deskripsi Program Penghijauan</Text>}
-            placeholder="masukkan judul deskripsi program penghijauan"
-            onChange={(val) => {
+            label="Judul Deskripsi Program Penghijauan"
+            placeholder="Masukkan judul deskripsi program penghijauan"
+            onChange={(val) =>
               setFormData({
                 ...formData,
-                judul: val.target.value
+                judul: val.target.value,
               })
-            }}
+            }
+            required
           />
+
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <Text fw="bold" fz="sm" mb={6}>
+              Deskripsi
+            </Text>
             <EditEditor
               value={formData.deskripsi}
               onChange={(htmlContent) => {
@@ -128,16 +172,35 @@ function EditProgramPenghijauan() {
               }}
             />
           </Box>
+
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Ikon Program Penghijauan</Text>
+            <Text fw="bold" fz="sm" mb={6}>
+              Ikon Program Penghijauan
+            </Text>
             <SelectIconProgramEdit
               value={formData.icon as IconKey}
               onChange={(value) => {
                 setFormData((prev) => ({ ...prev, icon: value }));
                 stateProgramPenghijauan.update.form.icon = value;
-              }} />
+              }}
+            />
           </Box>
-          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+
+          {/* Tombol simpan */}
+          <Group justify="flex-end">
+            <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)/lingkungan/program-penghijauan/[id]/page.tsx

@@ -1,17 +1,20 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconChartLine, IconChristmasTreeFilled, IconClipboard, IconEdit, IconHomeEco, IconLeaf, IconRecycle, IconScale, IconShieldFilled, IconTent, IconTrash, IconTrendingUp, IconTrophy, IconTruck, IconX } from '@tabler/icons-react';
+import {
+  IconArrowBack, IconChartLine, IconChristmasTreeFilled, IconClipboard,
+  IconEdit, IconHomeEco, IconLeaf, IconRecycle, IconScale,
+  IconShieldFilled, IconTent, IconTrash, IconTrendingUp,
+  IconTrophy, IconTruck
+} from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import programPenghijauanState from '../../../_state/lingkungan/program-penghijauan';
 
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
 function DetailProgramPenghijauan() {
   const [modalHapus, setModalHapus] = useState(false)
   const stateProgramPenghijauan = useProxy(programPenghijauanState)
@@ -50,72 +53,97 @@ function DetailProgramPenghijauan() {
 
   if (!stateProgramPenghijauan.findUnique.data) {
     return (
-      <Stack>
-        <Skeleton h={500} />
+      <Stack py={10}>
+        <Skeleton height={500} radius="md" />
       </Stack>
     )
   }
 
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Program Penghijauan</Text>
+  const data = stateProgramPenghijauan.findUnique.data
 
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
+  return (
+    <Box py={10}>
+      {/* Tombol kembali */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Konten detail */}
+      <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 Program Penghijauan
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Program Penghijauan</Text>
-                <Text fz={"lg"}>{stateProgramPenghijauan.findUnique.data?.name}</Text>
+                <Text fz="lg" fw="bold">Nama Program</Text>
+                <Text fz="md" c="dimmed">{data?.name || '-'}</Text>
               </Box>
+
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Ikon Program Penghijauan</Text>
-                {iconMap[stateProgramPenghijauan.findUnique.data?.icon] && (
-                  <Box title={stateProgramPenghijauan.findUnique.data?.icon}>
-                    {React.createElement(iconMap[stateProgramPenghijauan.findUnique.data?.icon], { size: 24 })}
+                <Text fz="lg" fw="bold">Ikon Program</Text>
+                {iconMap[data?.icon] ? (
+                  <Box title={data?.icon}>
+                    {React.createElement(iconMap[data.icon], { size: 28, color: colors['blue-button'] })}
                   </Box>
+                ) : (
+                  <Text fz="sm" c="dimmed">Tidak ada ikon</Text>
                 )}
               </Box>
+
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Judul Deskripsi Program Penghijauan</Text>
-                <Text fz={"lg"}>{stateProgramPenghijauan.findUnique.data?.judul}</Text>
+                <Text fz="lg" fw="bold">Judul Deskripsi</Text>
+                <Text fz="md" c="dimmed">{data?.judul || '-'}</Text>
               </Box>
+
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi Program Penghijauan</Text>
-                <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: stateProgramPenghijauan.findUnique.data?.deskripsi }}></Text>
+                <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }} />
               </Box>
-              <Box>
-                <Flex gap={"xs"} mt={10}>
+
+              {/* Tombol aksi */}
+              <Group gap="sm" mt="md">
+                <Tooltip label="Hapus Program" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (stateProgramPenghijauan.findUnique.data) {
-                        setSelectedId(stateProgramPenghijauan.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={stateProgramPenghijauan.delete.loading || !stateProgramPenghijauan.findUnique.data}
-                    color={"red"}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
-                    <IconX size={20} />
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Program" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (stateProgramPenghijauan.findUnique.data) {
-                        router.push(`/admin/lingkungan/program-penghijauan/${stateProgramPenghijauan.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!stateProgramPenghijauan.findUnique.data}
-                    color={"green"}
+                    color="green"
+                    onClick={() => router.push(`/admin/lingkungan/program-penghijauan/${data.id}/edit`)}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Box>
+                </Tooltip>
+              </Group>
             </Stack>
           </Paper>
         </Stack>
@@ -126,7 +154,7 @@ function DetailProgramPenghijauan() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus program penghijauan ini?"
+        text="Apakah Anda yakin ingin menghapus program penghijauan ini?"
       /> 
     </Box>
   );

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

@@ -1,6 +1,16 @@
-'use client'
+'use client';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
@@ -8,59 +18,104 @@ import CreateEditor from '../../../_com/createEditor';
 import SelectIconProgram from '../../../_com/selectIcon';
 import programPenghijauanState from '../../../_state/lingkungan/program-penghijauan';
 
-
 function CreateProgramPenghijauan() {
-  const stateCreate = useProxy(programPenghijauanState)
+  const stateCreate = useProxy(programPenghijauanState);
   const router = useRouter();
 
   const resetForm = () => {
     stateCreate.create.form = {
-      name: "",
-      deskripsi: "",
-      judul: "",
-      icon: "",
-    }
-  }
+      name: '',
+      deskripsi: '',
+      judul: '',
+      icon: '',
+    };
+  };
 
   const handleSubmit = async () => {
     await stateCreate.create.create();
     resetForm();
-    router.push("/admin/lingkungan/program-penghijauan")
-  }
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    router.push('/admin/lingkungan/program-penghijauan');
+  };
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Create Program Penghijauan</Title>
+  return (
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Tombol back + title */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Program Penghijauan
+        </Title>
+      </Group>
+
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Nama Program Penghijauan</Text>}
-            placeholder="masukkan nama program penghijauan"
-            onChange={(val) => stateCreate.create.form.name = val.target.value}
+            label={<Text fz="sm" fw="bold">Nama Program Penghijauan</Text>}
+            placeholder="Masukkan nama program penghijauan"
+            value={stateCreate.create.form.name || ''}
+            onChange={(e) => (stateCreate.create.form.name = e.target.value)}
+            required
           />
+
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Ikon Program Penghijauan</Text>
-            <SelectIconProgram onChange={(value) => stateCreate.create.form.icon = value} />
-          </Box>
-          <TextInput
-            onChange={(e) => stateCreate.create.form.judul = e.currentTarget.value}
-            label={<Text fw={"bold"} fz={"sm"}>Judul Deskripsi   Program Penghijauan</Text>}
-            placeholder='Masukkan judul deskripsi program penghijauan'
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Program Penghijauan</Text>
-            <CreateEditor
-              value={stateCreate.create.form.deskripsi}
-              onChange={(htmlContent) => stateCreate.create.form.deskripsi = htmlContent}
+            <Text fz="sm" fw="bold" mb={6}>
+              Ikon Program Penghijauan
+            </Text>
+            <SelectIconProgram
+              onChange={(value) => (stateCreate.create.form.icon = value)}
             />
           </Box>
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+
+          <TextInput
+            label={<Text fz="sm" fw="bold">Judul Deskripsi Program Penghijauan</Text>}
+            placeholder="Masukkan judul deskripsi program penghijauan"
+            value={stateCreate.create.form.judul || ''}
+            onChange={(e) => (stateCreate.create.form.judul = e.target.value)}
+            required
+          />
+
+          <Box>
+            <Text fz="sm" fw="bold" mb={6}>
+              Deskripsi Program Penghijauan
+            </Text>
+            <CreateEditor
+              value={stateCreate.create.form.deskripsi}
+              onChange={(htmlContent) =>
+                (stateCreate.create.form.deskripsi = htmlContent)
+              }
+            />
+          </Box>
+
+          <Group justify="right" mt="sm">
+            <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)/lingkungan/program-penghijauan/page.tsx

@@ -2,30 +2,55 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import {
-  IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled, IconDeviceImac, IconHomeEco, IconLeaf,
-  IconRecycle, IconScale, IconSearch, IconShieldFilled, IconTent,
+  Box,
+  Button,
+  Center,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip
+} from '@mantine/core';
+import {
+  IconChartLine,
+  IconChristmasTreeFilled,
+  IconClipboardTextFilled,
+  IconDeviceImac,
+  IconHomeEco,
+  IconLeaf,
+  IconRecycle,
+  IconScale,
+  IconSearch,
+  IconShieldFilled,
+  IconTent,
   IconTrashFilled,
   IconTrendingUp,
   IconTrophy,
-  IconTruckFilled
+  IconTruckFilled,
+  IconPlus,
 } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
 import programPenghijauanState from '../../_state/lingkungan/program-penghijauan';
 
-
 function ProgramPenghijauan() {
   const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Program Penghijauan'
-        placeholder='pencarian'
+        placeholder='Cari program penghijauan...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -41,18 +66,10 @@ function ListProgramPenghijauan({ search }: { search: string }) {
   const router = useRouter();
 
   useEffect(() => {
-    load(page, 10)
-  }, [page])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword) ||
-      item.judul.toLowerCase().includes(keyword) ||
-      item.icon.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
   const iconMap: Record<string, React.FC<any>> = {
     ekowisata: IconLeaf,
@@ -73,93 +90,104 @@ function ListProgramPenghijauan({ search }: { search: string }) {
   if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton height={650} />
+        <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
-  if (data.length === 0) {
-    return (
-      <Box py={10}>
-        <Paper p="md" >
-          <Stack>
-            <JudulList
-              title='List Program Penghijauan'
-              href='/admin/lingkungan/program-penghijauan/create'
-            />
-            <Table striped withTableBorder withRowBorders>
-              <TableThead>
-                <TableTr>
-                  <TableTh>No</TableTh>
-                  <TableTh>Nama Program Penghijauan</TableTh>
-                  <TableTh>Judul Deskripsi Program Penghijauan</TableTh>
-                  <TableTh>Ikon</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-            </Table>
-            <Text ta="center">Tidak ada data program penghijauan yang tersedia</Text>
-          </Stack>
-        </Paper>
-      </Box >
-    );
-  }
+
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'} h={{ base: 'auto', md: 650 }}>
-        <JudulList
-          title='List Program Penghijauan'
-          href='/admin/lingkungan/program-penghijauan/create'
-        />
-        <Box style={{ overflowY: 'auto' }}>
-          <Table striped withTableBorder withRowBorders>
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        {/* Header Section */}
+        <Box mb="md" display="flex" style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+          <Title order={4}>Daftar Program Penghijauan</Title>
+          <Tooltip label="Tambah Program Penghijauan" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/lingkungan/program-penghijauan/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Box>
+
+        {/* Table Section */}
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover>
             <TableThead>
               <TableTr>
                 <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
-                <TableTh style={{ width: '20%' }}>Nama Program Penghijauan</TableTh>
-                <TableTh style={{ width: '35%' }}>Judul Deskripsi Program Penghijauan</TableTh>
-                <TableTh style={{ width: '10%' }}>Ikon</TableTh>
-                <TableTh style={{ width: '15%', textAlign: 'center' }}>Detail</TableTh>
+                <TableTh style={{ width: '25%' }}>Nama Program</TableTh>
+                <TableTh style={{ width: '35%' }}>Judul / Deskripsi</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Ikon</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
-              {filteredData.map((item, index) => (
-                <TableTr key={item.id}>
-                  <TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
-                  <TableTd style={{ width: '20%', wordWrap: 'break-word' }}>{item.name}</TableTd>
-                  <TableTd style={{ width: '35%', wordWrap: 'break-word' }}>
-                    <Text lineClamp={1} fz={"sm"} dangerouslySetInnerHTML={{ __html: item.judul }}/>
-                  </TableTd>
-                  <TableTd style={{ width: '10%' }}>
-                    {iconMap[item.icon] && (
-                      <Box title={item.icon}>
-                        {React.createElement(iconMap[item.icon], { size: 24 })}
-                      </Box>
-                    )}
-                  </TableTd>
-                  <TableTd style={{ width: '15%', textAlign: 'center' }}>
-                    <Button onClick={() => router.push(`/admin/lingkungan/program-penghijauan/${item.id}`)}>
-                      <IconDeviceImac size={25} />
-                    </Button>
+              {filteredData.length > 0 ? (
+                filteredData.map((item, index) => (
+                  <TableTr key={item.id}>
+                    <TableTd style={{ textAlign: 'center' }}>{index + 1}</TableTd>
+                    <TableTd>
+                      <Text fw={500} truncate="end" lineClamp={1}>{item.name}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text lineClamp={1} fz="sm" c="dimmed" dangerouslySetInnerHTML={{ __html: item.judul }} />
+                    </TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>
+                      {iconMap[item.icon] && (
+                        <Box title={item.icon} mx="auto">
+                          {React.createElement(iconMap[item.icon], { size: 22 })}
+                        </Box>
+                      )}
+                    </TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="blue"
+                        leftSection={<IconDeviceImac size={16} />}
+                        onClick={() => router.push(`/admin/lingkungan/program-penghijauan/${item.id}`)}
+                      >
+                        Detail
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={5}>
+                    <Center py={20}>
+                      <Text c="dimmed">Tidak ada data program penghijauan yang cocok</Text>
+                    </Center>
                   </TableTd>
                 </TableTr>
-              ))}
+              )}
             </TableTbody>
           </Table>
         </Box>
       </Paper>
+
+      {/* Pagination */}
       <Center>
         <Pagination
           value={page}
           onChange={(newPage) => {
             load(newPage, 10);
-            window.scrollTo(0, 0);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>
   );
 }
+
 export default ProgramPenghijauan;

src/app/admin/(dashboard)/ppid/profile-ppid/page.tsx

@@ -72,7 +72,8 @@ function Page() {
                     <Image
                       pt={{ base: 0, md: 60 }}
                       src={item.image?.link || "/perbekel.png"}
-                      w={{ base: 250, md: 350 }}
+                      w="100%"
+                      maw={300}
                       alt="Foto Profil PPID"
                       radius="md"
                       onError={(e) => { e.currentTarget.src = "/perbekel.png"; }}

src/app/admin/(dashboard)/ppid/struktur-ppid/pegawai/page.tsx

@@ -117,14 +117,14 @@ function ListPegawaiPPID({ search }: { search: string }) {
               ).map((item) => (
                 <TableTr key={item.id}>
                   <TableTd>
-                    <Box w={200}>
+                    <Box w={150}>
                       <Text fw={500} truncate="end" lineClamp={1}>
                         {item.namaLengkap}
                       </Text>
                     </Box>
                   </TableTd>
                   <TableTd>
-                    <Box w={200}>
+                    <Box w={150}>
                       <Badge variant="light" color="blue">
                         {item.posisi?.nama || 'Belum diatur'}
                       </Badge>

src/app/admin/(dashboard)/ppid/struktur-ppid/posisi-organisasi/page.tsx

@@ -68,10 +68,10 @@ function ListPosisiOrganisasiPPID({ search }: { search: string }) {
         <Group justify="space-between" mb="md">
           <Title order={4}>Daftar Posisi Organisasi PPID</Title>
           <Tooltip label="Tambah Posisi Organisasi" withArrow>
-            <Button 
-              leftSection={<IconPlus size={18} />} 
-              color="blue" 
-              variant="light" 
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
               onClick={() => router.push('/admin/ppid/struktur-ppid/posisi-organisasi/create')}
             >
               Tambah Baru
@@ -82,51 +82,54 @@ function ListPosisiOrganisasiPPID({ search }: { search: string }) {
           <Table highlightOnHover>
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '25%' }}>Nama Posisi</TableTh>
-                <TableTh style={{ width: '45%' }}>Deskripsi</TableTh>
-                <TableTh style={{ width: '15%' }}>Hierarki</TableTh>
-                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+                <TableTh style={{ width: '20%' }}>Nama Posisi</TableTh>
+                <TableTh style={{ width: '20%' }}>Deskripsi</TableTh>
+                <TableTh style={{ width: '20%' }}>Hierarki</TableTh>
+                <TableTh style={{ width: '20%' }}>Edit</TableTh>
+                <TableTh style={{ width: '20%' }}>Hapus</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd style={{ width: '25%' }}>
+                    <TableTd style={{ width: '20%' }}>
                       <Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
                     </TableTd>
-                    <TableTd style={{ width: '45%' }}>
-                      <Text lineClamp={2} fz="sm" c="dimmed" dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }} />
+                    <TableTd style={{ width: '20%' }}>
+                      <Box w={200}>
+                        <Text lineClamp={1} fz="sm" c="dimmed" dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }} />
+                      </Box>
                     </TableTd>
-                    <TableTd style={{ width: '15%' }}>
+                    <TableTd style={{ width: '20%' }}>
                       <Text>{item.hierarki || '-'}</Text>
                     </TableTd>
-                    <TableTd style={{ width: '15%' }}>
-                      <Group gap="xs">
-                        <Tooltip label="Edit" withArrow>
-                          <Button
-                            variant="light"
-                            color="green"
-                            size="sm"
-                            onClick={() => router.push(`/admin/ppid/struktur-ppid/posisi-organisasi/${item.id}`)}
-                          >
-                            <IconEdit size={18} />
-                          </Button>
-                        </Tooltip>
-                        <Tooltip label="Hapus" withArrow>
-                          <Button
-                            variant="light"
-                            color="red"
-                            size="sm"
-                            onClick={() => {
-                              setSelectedId(item.id);
-                              setModalHapus(true);
-                            }}
-                          >
-                            <IconTrash size={18} />
-                          </Button>
-                        </Tooltip>
-                      </Group>
+                    <TableTd style={{ width: '20%' }}>
+                      <Tooltip label="Edit" withArrow>
+                        <Button
+                          variant="light"
+                          color="green"
+                          size="sm"
+                          onClick={() => router.push(`/admin/ppid/struktur-ppid/posisi-organisasi/${item.id}`)}
+                        >
+                          <IconEdit size={18} />
+                        </Button>
+                      </Tooltip>
+                    </TableTd>
+                    <TableTd style={{ width: '20%' }}>
+                    <Tooltip label="Hapus" withArrow>
+                      <Button
+                        variant="light"
+                        color="red"
+                        size="sm"
+                        onClick={() => {
+                          setSelectedId(item.id);
+                          setModalHapus(true);
+                        }}
+                      >
+                        <IconTrash size={18} />
+                      </Button>
+                    </Tooltip>
                     </TableTd>
                   </TableTr>
                 ))

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

@@ -11,6 +11,7 @@ import KategoriPotensi from "./potensi/kategori-potensi";
 import KategoriBerita from "./berita/kategori-berita";
 import KategoriPengumuman from "./pengumuman/kategori-pengumuman";
 import MantanPerbekel from "./profile/profile-mantan-perbekel";
+import AjukanPermohonan from "./layanan/ajukan_permohonan";
 
 
 const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
@@ -26,6 +27,7 @@ const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
   .use(KategoriPotensi)
   .use(KategoriBerita)
   .use(KategoriPengumuman)
+  .use(AjukanPermohonan)
   
 
 export default Desa;

src/app/api/[[...slugs]]/_lib/desa/layanan/ajukan_permohonan/create.ts

@@ -0,0 +1,31 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+    nama: string;
+    nik: string;
+    alamat: string;
+    nomorKk: string;
+    kategoriId: string;
+}
+
+export default async function createAjukanPermohonan(context: Context){
+    const body = context.body as FormCreate;
+
+    await prisma.ajukanPermohonan.create({
+        data: {
+            nama: body.nama,
+            nik: body.nik,
+            alamat: body.alamat,
+            nomorKk: body.nomorKk,
+            kategoriId: body.kategoriId
+        }
+    })
+    return {
+       success: true,
+       message: 'Ajukan permohonan berhasil dibuat',
+       data: {
+        ...body
+       }
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/layanan/ajukan_permohonan/del.ts

@@ -0,0 +1,22 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function deleteAjukanPermohonan(context: Context) {
+    const id = context.params?.id as string;
+
+    if (!id) {
+        return {
+            status: 400,
+            message: "ID tidak diberikan",
+        };
+    }
+
+    await prisma.ajukanPermohonan.delete({
+        where: { id },
+    });
+
+    return {
+        status: 200,
+        message: "Ajukan permohonan berhasil dihapus",
+    };
+}

src/app/api/[[...slugs]]/_lib/desa/layanan/ajukan_permohonan/findMany.ts

@@ -0,0 +1,59 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function findManyAjukanPermohonan(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { nama: { contains: search, mode: 'insensitive' } },
+      { nik: { contains: search, mode: 'insensitive' } },
+      { alamat: { contains: search, mode: 'insensitive' } },
+      { nomorKk: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.ajukanPermohonan.findMany({
+        where,
+        include: {
+          kategori: true
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'asc' },
+      }),
+      prisma.ajukanPermohonan.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil data 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",
+    };
+  }
+}
+
+export default findManyAjukanPermohonan;

src/app/api/[[...slugs]]/_lib/desa/layanan/ajukan_permohonan/findUnique.ts

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

src/app/api/[[...slugs]]/_lib/desa/layanan/ajukan_permohonan/index.ts

@@ -0,0 +1,36 @@
+import Elysia, { t } from "elysia";
+import createAjukanPermohonan from "./create";
+import findManyAjukanPermohonan from "./findMany";
+import findUniqueAjukanPermohonan from "./findUnique";
+import updateAjukanPermohonan from "./updt";
+import deleteAjukanPermohonan from "./del";
+
+
+const AjukanPermohonan = new Elysia({
+    prefix: "ajukanpermohonan",
+    tags: ["Desa/Layanan/AjukanPermohonan"],
+})
+.get("/findMany", findManyAjukanPermohonan)
+.post("/create", createAjukanPermohonan, {
+    body: t.Object({
+        nama: t.String(),
+        nik: t.String(),
+        alamat: t.String(),
+        nomorKk: t.String(),
+        kategoriId: t.String(),
+    })
+})
+.get("/:id", findUniqueAjukanPermohonan)
+.put("/:id", updateAjukanPermohonan, {
+    body: t.Object({
+        nama: t.String(),
+        nik: t.String(),
+        alamat: t.String(),
+        nomorKk: t.String(),
+        kategoriId: t.String(),
+    })
+})
+.delete("/del/:id", deleteAjukanPermohonan)
+
+
+export default AjukanPermohonan;

src/app/api/[[...slugs]]/_lib/desa/layanan/ajukan_permohonan/updt.ts

@@ -0,0 +1,48 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormUpdate = {
+  id: string;
+  nama: string;
+  nik: string;
+  alamat: string;
+  nomorKk: string;
+  kategoriId: string;
+};
+
+export default async function updateAjukanPermohonan(context: Context) {
+  const id = context.params?.id;
+  const body = context.body as FormUpdate;
+
+  if (!id) {
+    return {
+      success: false,
+      message: "ID tidak diberikan",
+    };
+  }
+
+  const existing = await prisma.ajukanPermohonan.findUnique({
+    where: { id },
+    include: {
+      kategori: true,
+    },
+  });
+
+  if (!existing) {
+    return {
+      success: false,
+      message: "Ajukan permohonan tidak ditemukan",
+    };
+  }
+
+  const updated = await prisma.ajukanPermohonan.update({
+    where: { id },
+    data: body,
+  });
+
+  return {
+    success: true,
+    message: "Success update ajukan permohonan",
+    data: updated,
+  };
+}

src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_surat_keterangan/findManyAll.ts

@@ -0,0 +1,27 @@
+import prisma from "@/lib/prisma";
+
+export default async function pelayananSuratKeteranganFindManyAll() {
+  try {
+    const data = await prisma.pelayananSuratKeterangan.findMany({
+      where: { isActive: true },
+      orderBy: { createdAt: "desc" },
+      include: {
+        image: true,
+        image2: true,
+      },
+    });
+
+    return {
+      success: true,
+      message: "Berhasil ambil semua data pelayanan surat keterangan",
+      data,
+    };
+  } catch (e) {
+    console.error("Error di findManyAll:", e);
+    return {
+      success: false,
+      message: "Gagal mengambil data pelayanan surat keterangan",
+      data: [],
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/desa/layanan/pelayanan_surat_keterangan/index.ts

@@ -4,11 +4,12 @@ import pelayananSuratKeteranganFindUnique from "./findUnique";
 import pelayananSuratKeteranganCreate from "./create";
 import pelayananSuratKeteranganUpdate from "./updt";
 import pelayananSuratKeteranganDelete from "./del";
-
+import pelayananSuratKeteranganFindManyAll from "./findManyAll";
 import { t } from "elysia";
 
 const PelayananSuratKeterangan = new Elysia({ prefix: "/pelayanansuratketerangan", tags: ["Desa/Layanan/Pelayanan Surat Keterangan"] })
 .get("/find-many", pelayananSuratKeteranganFindMany)
+.get("/findManyAll", pelayananSuratKeteranganFindManyAll)
 .get("/:id", async (context) => {
     const response = await pelayananSuratKeteranganFindUnique(new Request(context.request));
     return response;

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

@@ -8,7 +8,6 @@ type JadwalKegiatanInput = {
     layananJadwalKegiatan: { content: string };
     syaratKetentuanJadwalKegiatan: { content: string };
     dokumenJadwalKegiatan: { content: string };
-    pendaftaranJadwalKegiatan: { name: string, tanggal: string, namaOrangtua: string, nomor: string, alamat: string, catatan: string };
 }
 
 const jadwalKegiatanCreate = async (context: Context) => {
@@ -21,16 +20,14 @@ const jadwalKegiatanCreate = async (context: Context) => {
         layananJadwalKegiatan,
         syaratKetentuanJadwalKegiatan,
         dokumenJadwalKegiatan,
-        pendaftaranJadwalKegiatan,
     } = body;
 
-    const [createdInformasiJadwalKegiatan, createdDeskripsiJadwalKegiatan, createdLayananJadwalKegiatan, createdSyaratKetentuanJadwalKegiatan, createdDokumenJadwalKegiatan, createdPendaftaranJadwalKegiatan] = await Promise.all([
+    const [createdInformasiJadwalKegiatan, createdDeskripsiJadwalKegiatan, createdLayananJadwalKegiatan, createdSyaratKetentuanJadwalKegiatan, createdDokumenJadwalKegiatan] = await Promise.all([
         prisma.informasiJadwalKegiatan.create({ data: informasiJadwalKegiatan }),
         prisma.deskripsiJadwalKegiatan.create({ data: deskripsiJadwalKegiatan }),
         prisma.layananJadwalKegiatan.create({ data: layananJadwalKegiatan }),
         prisma.syaratKetentuanJadwalKegiatan.create({ data: syaratKetentuanJadwalKegiatan }),
         prisma.dokumenJadwalKegiatan.create({ data: dokumenJadwalKegiatan }),
-        prisma.pendaftaranJadwalKegiatan.create({ data: pendaftaranJadwalKegiatan }),
     ])
 
     const jadwalKegiatan = await prisma.jadwalKegiatan.create({
@@ -41,7 +38,6 @@ const jadwalKegiatanCreate = async (context: Context) => {
             layananJadwalKegiatanId: createdLayananJadwalKegiatan.id,
             syaratKetentuanJadwalKegiatanId: createdSyaratKetentuanJadwalKegiatan.id,
             dokumenJadwalKegiatanId: createdDokumenJadwalKegiatan.id,
-            pendaftaranJadwalKegiatanId: createdPendaftaranJadwalKegiatan.id,
         },
         include: {
             informasijadwalkegiatan: true,
@@ -49,7 +45,6 @@ const jadwalKegiatanCreate = async (context: Context) => {
             layananjadwalkegiatan: true,
             syaratketentuanjadwalkegiatan: true,
             dokumenjadwalkegiatan: true,
-            pendaftaranjadwalkegiatan: true,
         }
     })
     return {

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

@@ -19,7 +19,6 @@ const jadwalKegiatanDelete = async (context: Context) => {
             layananjadwalkegiatan: true,
             syaratketentuanjadwalkegiatan: true,
             dokumenjadwalkegiatan: true,
-            pendaftaranjadwalkegiatan: true,
         }
     })
 

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

@@ -20,7 +20,6 @@ export default async function jadwalKegiatanFindMany(context: Context) {
       {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 {
@@ -33,8 +32,7 @@ export default async function jadwalKegiatanFindMany(context: Context) {
           layananjadwalkegiatan: true,
           syaratketentuanjadwalkegiatan: true,
           dokumenjadwalkegiatan: true,
-          pendaftaranjadwalkegiatan: true,
-        },
+          },
         skip,
         take: limit,
         orderBy: { createdAt: "desc" },

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

@@ -28,7 +28,6 @@ export default async function jadwalKegiatanFindUnique(request: Request) {
                 layananjadwalkegiatan: true,
                 syaratketentuanjadwalkegiatan: true,
                 dokumenjadwalkegiatan: true,
-                pendaftaranjadwalkegiatan: true,
             }
         })
 

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

@@ -30,14 +30,6 @@ const JadwalKegiatan = new Elysia({
       dokumenJadwalKegiatan: t.Object({
         content: t.String(),
       }),
-      pendaftaranJadwalKegiatan: t.Object({
-        name: t.String(),
-        tanggal: t.String(),
-        namaOrangtua: t.String(),
-        nomor: t.String(),
-        alamat: t.String(),
-        catatan: t.String(),
-      }),
     }),
   })
   .get("/find-many", jadwalKegiatanFindMany)
@@ -75,14 +67,6 @@ const JadwalKegiatan = new Elysia({
         dokumenJadwalKegiatan: t.Object({
           content: t.String(),
         }),
-        pendaftaranJadwalKegiatan: t.Object({
-          name: t.String(),
-          tanggal: t.String(),
-          namaOrangtua: t.String(),
-          nomor: t.String(),
-          alamat: t.String(),
-          catatan: t.String(),
-        }),
       }),
     }
   );

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

@@ -13,14 +13,6 @@ type JadwalKegiatanUpdateInput = {
   layananJadwalKegiatan: { content: string };
   syaratKetentuanJadwalKegiatan: { content: string };
   dokumenJadwalKegiatan: { content: string };
-  pendaftaranJadwalKegiatan: {
-    name: string;
-    tanggal: string;
-    namaOrangtua: string;
-    nomor: string;
-    alamat: string;
-    catatan: string;
-  };
 };
 
 const jadwalKegiatanUpdate = async (context: Context) => {
@@ -50,7 +42,6 @@ const jadwalKegiatanUpdate = async (context: Context) => {
     layananJadwalKegiatan,
     syaratKetentuanJadwalKegiatan,
     dokumenJadwalKegiatan,
-    pendaftaranJadwalKegiatan,
   } = body;
 
  await Promise.all([
@@ -74,10 +65,6 @@ const jadwalKegiatanUpdate = async (context: Context) => {
         where: { id: existing.dokumenJadwalKegiatanId }, 
         data: dokumenJadwalKegiatan 
     }),
-    prisma.pendaftaranJadwalKegiatan.update({
-      where: { id: existing.pendaftaranJadwalKegiatanId },
-      data: pendaftaranJadwalKegiatan,
-    }),
   ]);
 
   const updated = await prisma.jadwalKegiatan.update({
@@ -91,7 +78,6 @@ const jadwalKegiatanUpdate = async (context: Context) => {
       layananjadwalkegiatan: true,
       syaratketentuanjadwalkegiatan: true,
       dokumenjadwalkegiatan: true,
-      pendaftaranjadwalkegiatan: true,
     },
   });
   return {

src/app/api/[[...slugs]]/_lib/lingkungan/gotong-royong/kategori-kegiatan/findMany.ts

@@ -1,15 +1,53 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function kategoriKegiatanFindMany() {
-    const data = await prisma.kategoriKegiatan.findMany();
-    return { 
-        success: true,
-        data: data.map((item: any) => {
-            return {
-                id: item.id,
-                nama: item.nama,
-            }
-        }),
+export default async function kategoriKegiatanFindMany(context: Context) {
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || "";
+  const skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [{ nama: { contains: search, mode: "insensitive" } }];
+  }
+
+  try {
+    const [data, total] = await Promise.all([
+      prisma.kategoriKegiatan.findMany({
+        where: where,
+        skip,
+        take: limit,
+        orderBy: { createdAt: "desc" },
+      }),
+      prisma.kategoriKegiatan.count({
+        where: where,
+      }),
+    ]);
+
+    return {
+      success: true,
+      data: data.map((item: any) => {
+        return {
+          id: item.id,
+          nama: item.nama,
+        };
+      }),
+      message: "Success fetch administrasi online with pagination",
+      page,
+      limit,
+      totalPages: Math.ceil(total / limit),
+      total,
     };
-}
+  } catch (e) {
+    console.error("Find many paginated error:", e);
+    return {
+      success: false,
+      message: "Failed fetch administrasi online with pagination",
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/lingkungan/pengelolaan-sampah/findMany.ts

@@ -24,7 +24,7 @@ export default async function pengelolaanSampahFindMany(context: Context) {
         where,
         skip,
         take: limit,
-        orderBy: { createdAt: 'desc' },
+        orderBy: { createdAt: 'asc' },
       }),
       prisma.pengelolaanSampah.count({
         where,

src/app/coba/page.tsx

@@ -1,105 +1,83 @@
 import colors from '@/con/colors';
-import { Box, Center, Image, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
-import BackButton from '../darmasaba/(pages)/desa/layanan/_com/BackButto';
+import { Stack, Box, Container, Grid, GridCol, Group, Paper, TextInput, Text, Image, Flex, Button } from '@mantine/core';
+import { IconCalendar, IconMapPin, IconSearch, IconUsersGroup } from '@tabler/icons-react';
+import React from 'react';
 
-
-const data1 = [
-  {
-    id: 1,
-    judul: 'Peran Pecalang dalam Keamanan Desa',
-    image: '/api/img/pecalang.png',
-    pengertian: 'Pecalang adalah petugas keamanan adat di Bali yang memiliki peran penting dalam menjaga ketertiban dan budaya lokal. Tugas mereka meliputi:',
-    deskripsi: <List>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Mengamankan upacara adat dan kegiatan keagamaan.</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Mengatur lalu lintas saat ada perayaan atau kegiatan besar.</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Berpatroli untuk mencegah gangguan keamanan di lingkungan desa.</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Berkoordinasi dengan aparat desa dan kepolisian dalam penanganan situasi darurat.</ListItem>
-    </List>
-  },
-  {
-    id: 2,
-    judul: 'Patwal (Patroli Pengawal) Desa',
-    image: '/api/img/patwal-1.png',
-    pengertian: 'Selain Pecalang, Desa Darmasaba juga memiliki Patwal yang bertugas menjaga keamanan sehari-hari. Peran mereka antara lain:',
-    deskripsi: <List>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Berpatroli secara rutin untuk memastikan lingkungan tetap aman.</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Menjaga ketertiban lalu lintas di area desa.</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Melakukan tindakan preventif terhadap potensi gangguan keamanan.</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Siap siaga dalam keadaan darurat untuk membantu warga.</ListItem>
-    </List>
-  },
-  {
-    id: 3,
-    judul: 'Layanan Keamanan yang Tersedia',
-    image: '/api/img/pospecalang.png',
-    pengertian: 'Jika terjadi keadaan darurat atau membutuhkan bantuan keamanan, warga dapat menghubungi:',
-    deskripsi: <List>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Pos Pecalang Desa: [Masukkan Nomor Kontak].</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Patwal Desa Darmasaba: [Masukkan Nomor Kontak].</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Polsek Terdekat: 110 (Layanan Kepolisian).</ListItem>
-    </List>
-  },
-  {
-    id: 4,
-    judul: 'Program Keamanan Desa',
-    image: '/api/img/rond.png',
-    pengertian: 'Untuk meningkatkan keamanan, Desa Darmasaba menjalankan berbagai program, seperti:',
-    deskripsi: <List>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Ronda Malam Warga: Kegiatan jaga malam secara bergilir oleh warga bersama Pecalang dan Patwal.</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Sosialisasi Keamanan: Edukasi bagi warga tentang cara menjaga keamanan lingkungan.</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}> Pengawasan Kamera CCTV: Memantau titik- titik strategis untuk mencegah tindak kejahatan.</ListItem>
-    </List>
-  }
-]
+import Link from 'next/link';
 
 function Page() {
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
-      <Box px={{ base: 'md', md: 100 }}>
-        <BackButton />
-      </Box>
-      <Box>
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Keamanan Lingkungan (Pecalang / Patwal)
-        </Text>
-        <Text px={{ base: 20, md: 150 }} ta={"center"} fz={{ base: "h4", md: "h3" }} >
-          Keamanan dan ketertiban lingkungan di Desa Darmasaba dijaga melalui peran aktif Pecalang dan Patwal (Patroli Pengawal). Mereka bertugas memastikan desa tetap aman, tertib, dan kondusif bagi seluruh warga.
-        </Text>
-      </Box>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={'lg'}>
-          <SimpleGrid
-            pb={10}
-            cols={{
-              base: 1,
-              md: 3,
-            }}>
-            {data1.map((v, k) => {
-              return (
-                <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
-                  <Stack gap={'xs'}>
-                    <Center px={10} py={20}>
-                      <Image src={v.image} alt='' />
-                    </Center>
-                    <Box px={'lg'}>
-                      <Box pb={20}>
-                        <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
-                          {v.judul}
-                        </Text>
-                        <Text pb={10} fz={"h4"} ta={'justify'}>
-                          {v.pengertian}
-                        </Text>
-                        <Box px={10}>
-                          {v.deskripsi}
-                        </Box>
-                      </Box>
-                    </Box>
-                  </Stack>
-                </Paper>
-              )
-            })}
-          </SimpleGrid>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Container size="lg" px="md">
+        <Stack align="center" gap={0} mb="xl">
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Program Gotong Royong
+          </Text>
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Desa Darmasaba
+          </Text>
         </Stack>
+      </Container>
+
+      {/* Tabs Menu */}
+      <Box px={{ base: "md", md: "xl" }} py="md" bg={colors['BG-trans']} mb="md">
+        <Grid align="center" justify="space-between" mb={20}>
+          <GridCol span={{ base: 12, md: 8 }}>
+            <Group gap="md" wrap="wrap">
+              <Paper bg={colors['blue-button']} radius="xl" py={5} px={20}>
+                <Text c={colors['white-1']} size="sm">
+                  Semua
+                </Text>
+              </Paper>
+              {['Kebersihan', 'Infrastruktur', 'Sosial', 'Lingkungan'].map((kategori) => (
+                <Paper key={kategori} bg={colors['blue-button-trans']} radius="xl" py={5} px={20}>
+                  <Text size="sm">
+                    {kategori}
+                  </Text>
+                </Paper>
+              ))}
+            </Group>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 4 }}>
+            <TextInput
+              radius="lg"
+              placeholder="Cari Program Gotong Royong"
+              leftSection={<IconSearch size={18} />}
+              w="100%"
+            />
+          </GridCol>
+        </Grid>
+        <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+          <Stack gap={'xs'}>
+            <Image radius={20} src={'/api/img/gotong-royong.png'} w={'100%'} alt='' />
+            <Text fw={"bold"} fz={{ base: "h2", md: "h1" }}>Membangun Fasilitas Desa</Text>
+            <Group>
+              <Paper py={5} px={20} bg={colors['blue-button-trans']} radius={20}>
+                <Text c={colors['white-1']}>Sosial</Text>
+              </Paper>
+            </Group>
+            <Text fz={{ base: "h4", md: "h3" }}>
+              Program Pembangunan Fasilitas Desa Maju, Masyarakat Sejahtera.
+            </Text>
+            <Flex gap={5} align={'center'}>
+              <IconCalendar color={colors['blue-button-trans']} size={45} />
+              <Text fz={{ base: "h4", md: "h3" }}>1 April 2025</Text>
+            </Flex>
+            <Flex gap={5} align={'center'}>
+              <IconMapPin color={colors['blue-button-trans']} size={45} />
+              <Text fz={{ base: "h4", md: "h3" }}>Banjar Desa Darmasaba</Text>
+            </Flex>
+            <Flex gap={5} align={'center'}>
+              <IconUsersGroup color={colors['blue-button-trans']} size={45} />
+              <Text fz={{ base: "h4", md: "h3" }}>30 Partisipan</Text>
+            </Flex>
+            <Text fw={'bold'} fz={'md'}>Deskripsi : Program pembangunan Pura sebagai pusat spiritual dan budaya desa, melibatkan gotong royong masyarakat dalam pembangunan struktur utama serta ornamen tradisional.</Text>
+            <Group py={20} justify='center'>
+              <Button component={Link} href={'https://www.whatsapp.com/?lang=id'} bg={colors['blue-button']} >Daftar Sebagai Relawan</Button>
+            </Group>
+          </Stack>
+        </Paper>
       </Box>
     </Stack>
   );

src/app/darmasaba/(pages)/desa/berita/_lib/layoutTabs.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Container, Grid, GridCol, ScrollArea, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
+import { Box, Group, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -23,95 +23,52 @@ function LayoutTabsBerita({
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
-  // Get active tab from URL path
   const activeTab = pathname.split('/').pop() || 'semua';
-
-  // Get initial search value from URL
   const initialSearch = searchParams.get('search') || '';
   const [searchValue, setSearchValue] = useState(initialSearch);
   const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
 
-  // Update active tab state when pathname changes
   const [activeTabState, setActiveTabState] = useState(activeTab);
   useEffect(() => {
     setActiveTabState(activeTab);
   }, [activeTab]);
 
-  // Clean up timeouts on unmount
   useEffect(() => {
     return () => {
-      if (searchTimeout !== null) {
-        clearTimeout(searchTimeout);
-      }
+      if (searchTimeout !== null) clearTimeout(searchTimeout);
     };
   }, [searchTimeout]);
 
-  // Handle search input change with debounce
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     setSearchValue(value);
 
-    // Clear previous timeout
-    if (searchTimeout !== null) {
-      clearTimeout(searchTimeout);
-    }
+    if (searchTimeout !== null) clearTimeout(searchTimeout);
 
-    // Set new timeout
     const newTimeout = window.setTimeout(() => {
       const params = new URLSearchParams(searchParams.toString());
 
-      if (value) {
-        params.set('search', value);
-      } else {
-        params.delete('search');
-      }
+      if (value) params.set('search', value);
+      else params.delete('search');
 
-      // Only update URL if the search value has actually changed
       if (params.toString() !== searchParams.toString()) {
         router.push(`/darmasaba/desa/berita/${activeTab}?${params.toString()}`);
       }
-    }, 500); // 500ms debounce delay
+    }, 500);
 
     setSearchTimeout(newTimeout);
   };
-  const tabs = [
-    {
-      label: "Semua",
-      value: "semua",
-      href: "/darmasaba/desa/berita/semua"
-    },
-    {
-      label: "Budaya",
-      value: "budaya",
-      href: "/darmasaba/desa/berita/budaya"
-    },
-    {
-      label: "Pemerintahan",
-      value: "pemerintahan",
-      href: "/darmasaba/desa/berita/pemerintahan"
-    },
-    {
-      label: "Ekonomi",
-      value: "ekonomi",
-      href: "/darmasaba/desa/berita/ekonomi"
-    },
-    {
-      label: "Pembangunan",
-      value: "pembangunan",
-      href: "/darmasaba/desa/berita/pembangunan"
-    },
-    {
-      label: "Sosial",
-      value: "sosial",
-      href: "/darmasaba/desa/berita/sosial"
-    },
-    {
-      label: "Teknologi",
-      value: "teknologi",
-      href: "/darmasaba/desa/berita/teknologi"
-    },
 
+  const tabs = [
+    { label: "Semua", value: "semua", href: "/darmasaba/desa/berita/semua" },
+    { label: "Budaya", value: "budaya", href: "/darmasaba/desa/berita/budaya" },
+    { label: "Pemerintahan", value: "pemerintahan", href: "/darmasaba/desa/berita/pemerintahan" },
+    { label: "Ekonomi", value: "ekonomi", href: "/darmasaba/desa/berita/ekonomi" },
+    { label: "Pembangunan", value: "pembangunan", href: "/darmasaba/desa/berita/pembangunan" },
+    { label: "Sosial", value: "sosial", href: "/darmasaba/desa/berita/sosial" },
+    { label: "Teknologi", value: "teknologi", href: "/darmasaba/desa/berita/teknologi" },
   ];
+
   const handleTabChange = (value: string | null) => {
     if (!value) return;
     const tab = tabs.find(t => t.value === value);
@@ -127,16 +84,29 @@ function LayoutTabsBerita({
       <Box px={{ base: "md", md: 100 }}>
         <BackButton />
       </Box>
-      <Container size="lg" px="md">
-        <Stack align="center" gap="0" >
-          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
-            Portal Berita Darmasaba
-          </Text>
-          <Text ta="center" px="md">
-            Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
-          </Text>
-        </Stack>
-      </Container>
+
+      <Box px={{ base: 'md', md: 100 }}>
+        <Group justify='space-between' align="center">
+          <Stack gap="0">
+            <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" >
+              Portal Berita Darmasaba
+            </Text>
+            <Text>
+              Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
+            </Text>
+          </Stack>
+          <Box>
+            <TextInput
+              radius="lg"
+              placeholder={placeholder}
+              leftSection={searchIcon}
+              w="100%"
+              value={searchValue}
+              onChange={handleSearchChange}
+            />
+          </Box>
+        </Group>
+      </Box>
 
       <Tabs
         color={colors['blue-button']}
@@ -145,33 +115,25 @@ function LayoutTabsBerita({
         onChange={handleTabChange}
       >
         <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']}>
-          <Grid>
-            <GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
-              <ScrollArea type="auto" offsetScrollbars>
-                <TabsList>
-                  {tabs.map((tab, index) => (
-                    <TabsTab
-                      key={index}
-                      value={tab.value}
-                      onClick={() => router.push(tab.href)}
-                    >
-                      {tab.label}
-                    </TabsTab>
-                  ))}
-                </TabsList>
-              </ScrollArea>
-            </GridCol>
-            <GridCol span={{ base: 12, md: 3, lg: 4, xl: 3 }}>
-              <TextInput
-                radius="lg"
-                placeholder={placeholder}
-                leftSection={searchIcon}
-                w="100%"
-                value={searchValue}
-                onChange={handleSearchChange}
-              />
-            </GridCol>
-          </Grid>
+          {/* SCROLLABLE TABS */}
+          <Box style={{ overflowX: 'auto', whiteSpace: 'nowrap' }}>
+            <TabsList style={{ display: 'flex', flexWrap: 'nowrap', gap: '0.5rem' }}>
+              {tabs.map((tab, index) => (
+                <TabsTab
+                  key={index}
+                  value={tab.value}
+                  onClick={() => router.push(tab.href)}
+                  style={{
+                    flex: '0 0 auto', // Prevent shrinking
+                    minWidth: 100, // optional: makes them touch-friendly
+                    textAlign: 'center'
+                  }}
+                >
+                  {tab.label}
+                </TabsTab>
+              ))}
+            </TabsList>
+          </Box>
         </Box>
 
         {children}
@@ -180,4 +142,4 @@ function LayoutTabsBerita({
   );
 }
 
-export default LayoutTabsBerita;
+export default LayoutTabsBerita;

src/app/darmasaba/(pages)/desa/galery/_lib/layoutTabs.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import { useEffect, useState } from 'react';
-import { usePathname, useRouter } from 'next/navigation';
-import { Box, Container, Grid, GridCol, Stack, Tabs, TabsList, TabsTab, Text } from '@mantine/core';
-import BackButton from '../../layanan/_com/BackButto';
-import dynamic from 'next/dynamic';
-import type { SearchBarProps } from './searchBar';
 import colors from '@/con/colors';
+import { Box, Container, Stack, Tabs, TabsList, TabsTab, Text } from '@mantine/core';
+import dynamic from 'next/dynamic';
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import BackButton from '../../layanan/_com/BackButto';
+import type { SearchBarProps } from './searchBar';
 
 // Define tabs outside the component to ensure consistency between server and client
 const TABS = [
@@ -35,7 +35,7 @@ function LayoutTabsGalery({ children }: HeaderSearchProps) {
   const router = useRouter();
   const pathname = usePathname();
   const [isClient, setIsClient] = useState(false);
-  
+
   // Set default active tab to empty string to prevent hydration mismatch
   const [activeTab, setActiveTab] = useState('');
 
@@ -47,7 +47,7 @@ function LayoutTabsGalery({ children }: HeaderSearchProps) {
   // Update active tab based on current route - only on client side
   useEffect(() => {
     if (!isClient) return;
-    
+
     const currentTab = TABS.find(tab => pathname.includes(tab.value));
     if (currentTab) {
       setActiveTab(currentTab.value);
@@ -75,42 +75,38 @@ function LayoutTabsGalery({ children }: HeaderSearchProps) {
       <Box px={{ base: "md", md: 100 }}>
         <BackButton />
       </Box>
-      <Container size="lg" px="md">
+      <Box px={{ base: "md", md: 100 }}>
         <Stack align="center" gap="0">
           <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
             Galeri Kegiatan Desa Darmasaba
           </Text>
         </Stack>
-      </Container>
+        <Box>
+          <SearchBar />
+        </Box>
+      </Box>
 
-      <Tabs 
+      <Tabs
         value={isClient ? activeTab : undefined}
         defaultValue={TABS[0].value}
         onChange={handleTabChange}
-        color={colors['blue-button']} 
+        color={colors['blue-button']}
         variant="pills"
         keepMounted={false}
       >
         <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']}>
-          <Grid>
-            <GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
-              <TabsList>
-                {TABS.map((tab) => (
-                  <TabsTab 
-                    key={tab.value} 
-                    value={tab.value}
-                    component="button"
-                    type="button"
-                  >
-                    {tab.label}
-                  </TabsTab>
-                ))}
-              </TabsList>
-            </GridCol>
-            <GridCol span={{ base: 12, md: 3, lg: 4, xl: 3 }}>
-              <SearchBar />
-            </GridCol>
-          </Grid>
+          <TabsList>
+            {TABS.map((tab) => (
+              <TabsTab
+                key={tab.value}
+                value={tab.value}
+                component="button"
+                type="button"
+              >
+                {tab.label}
+              </TabsTab>
+            ))}
+          </TabsList>
         </Box>
 
         <Container size={'xl'}>

src/app/darmasaba/(pages)/desa/galery/_lib/searchBar.tsx

@@ -2,7 +2,7 @@
 
 'use client';
 
-import { TextInput } from '@mantine/core';
+import { Group, TextInput } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
 import { usePathname, useSearchParams } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
@@ -65,13 +65,15 @@ export function SearchBar({
   }, []);
 
   return (
-    <TextInput
+    <Group justify='center'>
+      <TextInput
       radius="lg"
       placeholder={placeholder}
       leftSection={searchIcon}
-      w="100%"
+      w={{ base: '100%', md: '50%' }}
       value={searchValue}
       onChange={handleSearchChange}
     />
+    </Group>
   );
 }

src/app/darmasaba/(pages)/desa/galery/video/Content.tsx

@@ -2,19 +2,24 @@
 
 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
-import { Box, Center, Pagination, Paper, SimpleGrid, Spoiler, Stack, Text } from '@mantine/core';
+import {
+  Box,
+  Center,
+  Pagination,
+  Paper,
+  SimpleGrid,
+  Spoiler,
+  Stack,
+  Text,
+} from '@mantine/core';
 import { useCallback, useEffect, useState } from 'react';
 import { useSnapshot } from 'valtio';
 
 export default function VideoContent() {
-  const [expanded, setExpanded] = useState(false);
+  // ✅ expanded state per index
+  const [expandedMap, setExpandedMap] = useState<Record<number, boolean>>({});
   const videoState = useSnapshot(stateGallery.video);
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-  } = videoState.findMany;
+  const { data, page, totalPages, loading } = videoState.findMany;
 
   // Handle search and pagination changes
   const loadData = useCallback((pageNum: number, searchTerm: string) => {
@@ -27,24 +32,18 @@ export default function VideoContent() {
       const urlParams = new URLSearchParams(window.location.search);
       const urlSearch = urlParams.get('search') || '';
       const urlPage = parseInt(urlParams.get('page') || '1');
-      
       loadData(urlPage, urlSearch);
     };
 
-    // Handle search updates from the search bar
     const handleSearchUpdate = (e: Event) => {
       const { search } = (e as CustomEvent).detail;
       loadData(1, search);
     };
 
-    // Initial load
     handleRouteChange();
-
-    // Set up event listeners
     window.addEventListener('popstate', handleRouteChange);
     window.addEventListener('searchUpdate', handleSearchUpdate as EventListener);
-    
-    // Cleanup
+
     return () => {
       window.removeEventListener('popstate', handleRouteChange);
       window.removeEventListener('searchUpdate', handleSearchUpdate as EventListener);
@@ -57,6 +56,13 @@ export default function VideoContent() {
     loadData(newPage, search);
   };
 
+  const toggleExpanded = (index: number, value: boolean) => {
+    setExpandedMap((prev) => ({
+      ...prev,
+      [index]: value,
+    }));
+  };
+
   const dataVideo = data || [];
 
   if (loading && !data) {
@@ -72,7 +78,13 @@ export default function VideoContent() {
       <SimpleGrid cols={{ base: 1, md: 3 }}>
         {dataVideo.map((v, k) => (
           <Box key={k}>
-            <Paper mb={50} p="md" radius={26} bg={colors['white-trans-1']} w={{ base: '100%', md: '100%' }}>
+            <Paper
+              mb={50}
+              p="md"
+              radius={26}
+              bg={colors['white-trans-1']}
+              w={{ base: '100%', md: '100%' }}
+            >
               <Box>
                 <Center>
                   <Box
@@ -109,8 +121,8 @@ export default function VideoContent() {
                         Hide details
                       </Text>
                     }
-                    expanded={expanded}
-                    onExpandedChange={setExpanded}
+                    expanded={expandedMap[k] || false}
+                    onExpandedChange={(val) => toggleExpanded(k, val)}
                   >
                     <Text
                       ta="justify"
@@ -137,15 +149,15 @@ export default function VideoContent() {
   );
 }
 
-// ✅ Fix: HAPUS SPASI BERLEBIH DI URL
+// ✅ Fix: convert YouTube URL ke embed
 function convertToEmbedUrl(youtubeUrl: string): string {
   try {
     const url = new URL(youtubeUrl);
     const videoId = url.searchParams.get('v');
     if (!videoId) return youtubeUrl;
-    return `https://www.youtube.com/embed/${videoId}`; // ✅ tanpa spasi!
+    return `https://www.youtube.com/embed/${videoId}`;
   } catch (err) {
     console.error('Error converting YouTube URL to embed:', err);
     return youtubeUrl;
   }
-}
+}

src/app/darmasaba/(pages)/desa/layanan/[id]/page.tsx

@@ -2,11 +2,12 @@
 'use client'
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import { Box, Button, Center, Container, Group, Image, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Center, Container, Group, Image, Modal, Paper, Select, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
 import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../_com/BackButto';
+import { useDisclosure } from '@mantine/hooks';
 
 interface LayananData {
   id: string;
@@ -31,7 +32,12 @@ function Page() {
   const [loading, setLoading] = useState(true);
   const [data, setData] = useState<LayananData | null>(null);
 
+  const [opened, { open, close }] = useDisclosure(false);
+  const stateCreate = useProxy(stateLayananDesa.ajukanPermohonan);
+
+
   useEffect(() => {
+    state.suratKeterangan.findManyAll.load()
     const loadData = async () => {
       if (!id) return;
       try {
@@ -48,6 +54,22 @@ function Page() {
     loadData();
   }, [id]);
 
+  const resetForm = () => {
+    stateCreate.create.form = {
+      nama: '',
+      nik: '',
+      alamat: '',
+      nomorKk: '',
+      kategoriId: '',
+    }
+  }
+
+  const handleSubmit = async () => {
+    await stateCreate.create.create();
+    resetForm();
+    close();
+  }
+
   if (loading) {
     return (
       <Center h="100vh" bg={colors.Bg}>
@@ -105,12 +127,76 @@ function Page() {
               size="lg"
               variant="gradient"
               gradient={{ from: '#1C6EA4', to: '#63B3ED' }}
+              onClick={open}
             >
               Ajukan Permohonan
             </Button>
           </Group>
         </Stack>
       </Box>
+      <Modal
+        opened={opened}
+        onClose={close}
+        radius={0}
+        transitionProps={{ transition: 'fade', duration: 200 }}
+      >
+        <Paper p="md" withBorder>
+          <Stack gap="xs">
+            <Title order={3}>Ajukan Permohonan</Title>
+            <TextInput
+              label={<Text fz="sm" fw="bold">Nama</Text>}
+              placeholder="masukkan nama"
+              onChange={(val) => (stateCreate.create.form.nama = val.target.value)}
+            />
+            <TextInput
+              type="number"
+              label={<Text fz="sm" fw="bold">NIK</Text>}
+              placeholder="masukkan NIK"
+              onChange={(val) => (stateCreate.create.form.nik = val.target.value)}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Alamat</Text>}
+              placeholder="masukkan alamat"
+              onChange={(val) => (stateCreate.create.form.alamat = val.target.value)}
+            />
+            <TextInput
+              type="number"
+              label={<Text fz="sm" fw="bold">Nomor KK</Text>}
+              placeholder="masukkan Nomor KK"
+              onChange={(val) => (stateCreate.create.form.nomorKk = val.target.value)}
+            />
+            <Select
+              label="Kategori"
+              placeholder="Pilih kategori"
+              data={stateLayananDesa.suratKeterangan.findManyAll.data?.map((item) => ({
+                label: item.name,
+                value: item.id,
+              }))}
+              value={stateCreate.create.form.kategoriId || null}
+              onChange={(val: string | null) => {
+                if (val) {
+                  const selected = stateLayananDesa.suratKeterangan.findMany.data?.find(
+                    (item) => item.id === val
+                  );
+                  if (selected) {
+                    stateCreate.create.form.kategoriId = selected.id;
+                  }
+                } else {
+                  stateCreate.create.form.kategoriId = '';
+                }
+              }}
+              searchable
+              clearable
+              nothingFoundMessage="Tidak ditemukan"
+              required
+            />
+
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>
+              Simpan
+            </Button>
+          </Stack>
+        </Paper>
+      </Modal>
     </Stack>
   );
 }

src/app/darmasaba/(pages)/desa/layanan/page.tsx

@@ -22,7 +22,7 @@ export default function Page() {
             <Container w={{ base: "100%", md: "50%" }} >
                 <Stack align="center" gap={0}>
                     {/* Bagian Layanan */}
-                    <Text fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+                    <Text fz={{ base: "1.8rem", md: "2.5rem", lg: "3rem", xl: "3.5rem" }} c={colors["blue-button"]} fw={"bold"}>
                         Layanan Desa Darmasaba
                     </Text>
                     <Text

src/app/darmasaba/(pages)/desa/pengumuman/[name]/[id]/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
 import colors from '@/con/colors';
-import { Box, Container, Flex, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Container, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useParams } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
@@ -31,7 +31,7 @@ function Page() {
       </Box>
       <Container size="lg" px="md">
         <Stack gap="xs" >
-            <Flex justify={"space-between"} align={"center"}>
+            <Group justify={"space-between"} align={"center"}>
               <Text fz={{ base: "2rem", md: "2rem" }} c={colors["blue-button"]} fw="bold" >
                 {detail.data?.judul}
               </Text>
@@ -40,7 +40,7 @@ function Page() {
                   <Text  c={colors['white-1']}>{detail.data?.CategoryPengumuman?.name}</Text>
                 </Paper>
               </Group>
-            </Flex>
+            </Group>
           <Paper bg={colors["white-1"]} p="md">
             <Text fz={"md"} dangerouslySetInnerHTML={{ __html: detail.data?.content }} />
             <Text fz={"md"} c={colors["blue-button"]} fw="bold" >

src/app/darmasaba/(pages)/inovasi/kolaborasi-inovasi/page.tsx

@@ -1,67 +1,76 @@
 'use client'
 import kolaborasiInovasiState from '@/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi';
+import mitraKolaborasi from '@/app/admin/(dashboard)/_state/inovasi/mitra-kolaborasi';
 import colors from '@/con/colors';
-import { Box, Center, Grid, GridCol, Group, Image, Pagination, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import {
+  Box,
+  Center,
+  Grid,
+  GridCol,
+  Group,
+  Image,
+  Pagination,
+  Paper,
+  Select,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  TextInput
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons-react';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
+
 function Page() {
-  const state = useProxy(kolaborasiInovasiState)
+  const kolabState = useProxy(kolaborasiInovasiState)
+  const mitraState = useProxy(mitraKolaborasi)
+
   const [search, setSearch] = useState('');
   const [selectedYear, setSelectedYear] = useState<string | null>(null);
 
-  // Get unique years from the data
+  // Get unique years from kolaborasiInovasi data
   const years = Array.from(
     new Set(
-      state.findMany.data?.map(item => 
+      kolabState.findMany.data?.map(item => 
         new Date(item.createdAt).getFullYear().toString()
       ) || []
     )
   )
-  .sort((a, b) => b.localeCompare(a)) // Sort descending (newest first)
-  .map(year => ({
-    value: year,
-    label: year,
-  }));
+  .sort((a, b) => b.localeCompare(a))
+  .map(year => ({ value: year, label: year }));
 
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = state.findMany
+  const { data, page, totalPages, loading, load } = kolabState.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search, selectedYear || '')
-  }, [page, search, selectedYear])
+    mitraState.findMany.load(page, 10);
+    load(page, 10, search, selectedYear || '');
+  }, [page, search, selectedYear]);
+
+  const mitraData = mitraState.findMany.data || [];
+  const mitraLoading = mitraState.findMany.loading;
 
-  if (loading || !data) {
-    return (
-      <Stack py={10}>
-        <Skeleton height={650} />
-      </Stack>
-    );
-  }
 
   return (
     <>
-      <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
         <Box px={{ base: 'md', md: 100 }}>
           <BackButton />
         </Box>
+
+        {/* Header Kolaborasi Inovasi */}
         <Box px={{ base: 'md', md: 100 }} >
           <Grid align='center'>
             <GridCol span={{ base: 12, md: 9 }}>
-              <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+              <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
                 Kolaborasi Inovasi
               </Text>
             </GridCol>
             <GridCol span={{ base: 12, md: 3 }}>
               <TextInput
-                radius={"lg"}
+                radius="lg"
                 placeholder='Cari Kolaborasi Inovasi'
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
@@ -71,40 +80,43 @@ function Page() {
             </GridCol>
           </Grid>
         </Box>
+
+        {/* Filter Tahun */}
         <Box px={{ base: "md", md: 100 }}>
-          <Stack gap={'lg'} justify='center'>
-            <Group justify='flex-end'>
+          <Stack gap="lg" justify="center">
+            <Group justify="flex-end">
               <Select
                 value={selectedYear}
                 onChange={setSelectedYear}
-                label={<Text fw={"bold"} fz={"sm"}>Tahun</Text>}
+                label={<Text fw="bold" fz="sm">Tahun</Text>}
                 placeholder='Semua Tahun'
                 clearable
-                data={[
-                  { value: '', label: 'Semua Tahun' },
-                  ...years
-                ]}
+                data={[{ value: '', label: 'Semua Tahun' }, ...years]}
               />
             </Group>
-            <SimpleGrid cols={{ base: 1, md: 2 }} spacing={'lg'}>
-              {data.map((v, k) => {
-                return (
-                  <Paper p={'xl'} key={k}>
-                    <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.name}</Text>
-                    <Box pr={'lg'} pb={20}>
-                      {v.slug}
-                    </Box>
-                    <Box pr={'lg'}>
-                      {v.kolaborator}
-                    </Box>
+
+            {/* List Kolaborasi Inovasi */}
+            {loading || !data ? (
+              <Stack py={10}>
+                <Skeleton height={650} />
+              </Stack>
+            ) : (
+              <SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
+                {data.map((v, k) => (
+                  <Paper p="xl" key={k}>
+                    <Text fz="h3" fw="bold" c={colors['blue-button']}>{v.name}</Text>
+                    <Box pr="lg" pb={20}>{v.slug}</Box>
+                    <Box pr="lg">{v.kolaborator}</Box>
                   </Paper>
-                );
-              })}
-            </SimpleGrid>
+                ))}
+              </SimpleGrid>
+            )}
+
+            {/* Pagination */}
             <Center>
               <Pagination
                 value={page}
-                onChange={(newPage) => load(newPage)} // ini penting!
+                onChange={(newPage) => load(newPage)}
                 total={totalPages}
                 mt="md"
                 mb="md"
@@ -113,17 +125,44 @@ function Page() {
           </Stack>
         </Box>
       </Stack>
+
+      {/* Mitra Kolaborasi Section */}
       <Box py={40} px={{ base: "md", md: 100 }} bg={colors['white-trans-1']}>
-        <Stack gap={'lg'} justify='center'>
-          <Box px={{ base: 'md', md: 100 }} >
-            <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+        <Stack gap="lg" justify="center">
+          <Box px={{ base: 'md', md: 100 }}>
+            <Text ta="center" fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
               Mitra Kolaborasi
             </Text>
-            <Text ta={'center'} fz={'h4'}>Kami berkolaborasi dengan berbagai mitra dari berbagai sektor untuk mewujudkan visi Smart Village Darmasaba.</Text>
+            <Text ta="center" fz="h4">
+              Kami berkolaborasi dengan berbagai mitra dari berbagai sektor untuk mewujudkan visi Smart Village Darmasaba.
+            </Text>
           </Box>
-          <Center>
-            <Image src={'/api/img/logoukm-kolaborasiinvoasi.png'} alt='' w={{ base: 500, md: 650 }} loading="lazy"/>
-          </Center>
+
+          {mitraLoading ? (
+            <Center py={20}><Skeleton height={100} width="80%" /></Center>
+          ) : (
+            <SimpleGrid cols={{ base: 2, md: 4 }} spacing="xl">
+              {mitraData.map((m) => (
+                <Paper key={m.id} p="md" shadow="sm" radius="md">
+                  <Center mb="sm">
+                    {m.image?.link ? (
+                      <Image
+                        src={`${process.env.NEXT_PUBLIC_BASE_URL || ''}${m.image.link}`}
+                        alt={m.name}
+                        w={150}
+                        h={100}
+                        fit="cover"
+                        radius="md"
+                      />
+                    ) : (
+                      <Box w={100} h={100} bg={colors['blue-button']} style={{ borderRadius: '50%' }} />
+                    )}
+                  </Center>
+                  <Text ta="center" fw="bold">{m.name}</Text>
+                </Paper>
+              ))}
+            </SimpleGrid>
+          )}
         </Stack>
       </Box>
     </>