Merge pull request 'nico/27-okt-25' (#1) from nico/27-okt-25 into main

Reviewed-on: http://wibugit.wibudev.com/wibu/desa-darmasaba/pulls/1

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.5",
   "private": true,
   "scripts": {
-    "dev": "bun --bun next dev --hostname 0.0.0.0",
+    "dev": "bun --bun next dev",
     "build": "bun --bun next build",
     "start": "bun --bun next start"
   },
@@ -43,6 +43,7 @@
     "@types/bun": "^1.2.2",
     "@types/leaflet": "^1.9.20",
     "@types/lodash": "^4.17.16",
+    "@types/nodemailer": "^7.0.2",
     "add": "^2.0.6",
     "adm-zip": "^0.5.16",
     "animate.css": "^4.1.1",
@@ -52,6 +53,7 @@
     "classnames": "^2.5.1",
     "colors": "^1.4.0",
     "dayjs": "^1.11.13",
+    "dotenv": "^17.2.3",
     "elysia": "^1.3.5",
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^7.1.0",
@@ -71,6 +73,7 @@
     "next": "^15.5.2",
     "next-view-transitions": "^0.3.4",
     "node-fetch": "^3.3.2",
+    "nodemailer": "^7.0.10",
     "p-limit": "^6.2.0",
     "primeicons": "^7.0.0",
     "primereact": "^10.9.6",
@@ -82,6 +85,7 @@
     "react-simple-toasts": "^6.1.0",
     "react-toastify": "^11.0.5",
     "react-transition-group": "^4.4.5",
+    "react-zoom-pan-pinch": "^3.7.0",
     "readdirp": "^4.1.1",
     "recharts": "^2.15.3",
     "sharp": "^0.34.3",

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

@@ -1,16 +1,4 @@
 [
-  {
-    "id": "cmds8w2q60002vnbe6i8qhkuo",
-    "name": "Telephone Desa Darmasaba",
-    "iconUrl": "081239580000",
-    "imageId": "cmff3nv180003vn6h5jvedidq"
-  },
-  {
-    "id": "cmds8z7u20005vnbegyyvnbk0",
-    "name": "Email Desa Darmasaba",
-    "iconUrl": "desadarmasaba@badungkab.go.id",
-    "imageId": "cmff3ll130001vn6hkhls3f5y"
-  },
   {
     "id": "cmds9023u0008vnbe3oxmhwyf",
     "name": "Desa Darmasaba",

prisma/schema.prisma

@@ -143,7 +143,7 @@ model MediaSosial {
   isActive  Boolean      @default(true)
 }
 
-//========================================= PROFILE ========================================= //
+//========================================= DESA ANTI KORUPSI ========================================= //
 model DesaAntiKorupsi {
   id         String                  @id @default(cuid())
   name       String                  @unique
@@ -1606,7 +1606,7 @@ model Pembiayaan {
   ApbDesa   ApbDesa[] @relation("ApbDesaPembiayaan")
 }
 
-// ========================================= INOVASI ========================================= //
+// ========================================= MENU INOVASI ========================================= //
 // ========================================= DESA DIGITAL / SMART VILLAGE ========================================= //
 model DesaDigital {
   id        String      @id @default(cuid())

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

@@ -75,17 +75,18 @@ const berita = proxy({
     loading: false,
     search: "",
     load: async (page = 1, limit = 10, search = "", kategori = "") => {
-      berita.findMany.loading = true; // ✅ Akses langsung via nama path
+      const startTime = Date.now();
+      berita.findMany.loading = true;
       berita.findMany.page = page;
       berita.findMany.search = search;
-
+    
       try {
         const query: any = { page, limit };
         if (search) query.search = search;
         if (kategori) query.kategori = kategori;
-
+    
         const res = await ApiFetch.api.desa.berita["find-many"].get({ query });
-
+    
         if (res.status === 200 && res.data?.success) {
           berita.findMany.data = res.data.data ?? [];
           berita.findMany.totalPages = res.data.totalPages ?? 1;
@@ -98,9 +99,16 @@ const berita = proxy({
         berita.findMany.data = [];
         berita.findMany.totalPages = 1;
       } finally {
-        berita.findMany.loading = false;
+        // pastikan minimal 300ms sebelum loading = false (biar UX smooth)
+        const elapsed = Date.now() - startTime;
+        const minDelay = 300;
+        const delay = elapsed < minDelay ? minDelay - elapsed : 0;
+    
+        setTimeout(() => {
+          berita.findMany.loading = false;
+        }, delay);
       }
-    },
+    },    
   },
 
   findUnique: {

src/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital.ts

@@ -55,46 +55,95 @@ const dataPerpustakaan = proxy({
     },
   },
   findMany: {
-      data: null as
-        | Prisma.DataPerpustakaanGetPayload<{
-            include: {
-              image: true;
-              kategori: true;
-            };
-          }>[]
-        | null,
-      page: 1,
-      totalPages: 1,
-      loading: false,
-      search: "",
-     load: async (page = 1, limit = 10, search = "", kategori = "") => {
-        dataPerpustakaan.findMany.loading = true; // ✅ Akses langsung via nama path
-        dataPerpustakaan.findMany.page = page;
-        dataPerpustakaan.findMany.search = search;
-    
-        try {
-          const query: any = { page, limit };
-          if (search) query.search = search;
-          if (kategori) query.kategori = kategori;
-      
-          const res = await ApiFetch.api.pendidikan.perpustakaandigital.dataperpustakaan["findMany"].get({ query });
-      
-          if (res.status === 200 && res.data?.success) {
-            dataPerpustakaan.findMany.data = res.data.data ?? [];
-            dataPerpustakaan.findMany.totalPages = res.data.totalPages ?? 1;
-          } else {
-            dataPerpustakaan.findMany.data = [];
-            dataPerpustakaan.findMany.totalPages = 1;
-          }
-        } catch (err) {
-          console.error("Gagal fetch data perpustakaan paginated:", err);
+    data: null as
+      | Prisma.DataPerpustakaanGetPayload<{
+          include: {
+            image: true;
+            kategori: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "", kategori = "") => {
+      const startTime = Date.now();
+      dataPerpustakaan.findMany.loading = true; // ✅ Akses langsung via nama path
+      dataPerpustakaan.findMany.page = page;
+      dataPerpustakaan.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        if (kategori) query.kategori = kategori;
+
+        const res =
+          await ApiFetch.api.pendidikan.perpustakaandigital.dataperpustakaan[
+            "findMany"
+          ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          dataPerpustakaan.findMany.data = res.data.data ?? [];
+          dataPerpustakaan.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
           dataPerpustakaan.findMany.data = [];
           dataPerpustakaan.findMany.totalPages = 1;
-        } finally {
-          dataPerpustakaan.findMany.loading = false;
         }
-      },
+      } catch (err) {
+        console.error("Gagal fetch data perpustakaan paginated:", err);
+        dataPerpustakaan.findMany.data = [];
+        dataPerpustakaan.findMany.totalPages = 1;
+      } finally {
+        // pastikan minimal 300ms sebelum loading = false (biar UX smooth)
+        const elapsed = Date.now() - startTime;
+        const minDelay = 300;
+        const delay = elapsed < minDelay ? minDelay - elapsed : 0;
+
+        setTimeout(() => {
+          dataPerpustakaan.findMany.loading = false;
+        }, delay);
+      }
     },
+  },
+  findManyAll: {
+    data: null as
+      | Prisma.DataPerpustakaanGetPayload<{
+          include: {
+            image: true;
+            kategori: true;
+          };
+        }>[]
+      | null,
+    loading: false,
+    search: "",
+    load: async (search = "", kategori = "") => {
+      dataPerpustakaan.findMany.loading = true; // ✅ Akses langsung via nama path
+      dataPerpustakaan.findMany.search = search;
+
+      try {
+        const query: any = {};
+        if (search) query.search = search;
+        if (kategori) query.kategori = kategori;
+
+        const res =
+          await ApiFetch.api.pendidikan.perpustakaandigital.dataperpustakaan[
+            "findManyAll"
+          ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          dataPerpustakaan.findManyAll.data = res.data.data ?? [];
+        } else {
+          dataPerpustakaan.findManyAll.data = [];
+        }
+      } catch (err) {
+        console.error("Gagal fetch data perpustakaan paginated:", err);
+        dataPerpustakaan.findManyAll.data = [];
+      } finally {
+        dataPerpustakaan.findManyAll.loading = false;
+      }
+    },
+  },
   findUnique: {
     data: null as Prisma.DataPerpustakaanGetPayload<{
       include: {
@@ -321,17 +370,20 @@ const kategoriBuku = proxy({
     totalPages: 1,
     loading: false,
     search: "",
-   load: async (page = 1, limit = 10, search = "") => {
+    load: async (page = 1, limit = 10, search = "") => {
       kategoriBuku.findMany.loading = true; // ✅ Akses langsung via nama path
       kategoriBuku.findMany.page = page;
       kategoriBuku.findMany.search = search;
-  
+
       try {
         const query: any = { page, limit };
         if (search) query.search = search;
-    
-        const res = await ApiFetch.api.pendidikan.perpustakaandigital.kategoribuku["findMany"].get({ query });
-    
+
+        const res =
+          await ApiFetch.api.pendidikan.perpustakaandigital.kategoribuku[
+            "findMany"
+          ].get({ query });
+
         if (res.status === 200 && res.data?.success) {
           kategoriBuku.findMany.data = res.data.data ?? [];
           kategoriBuku.findMany.totalPages = res.data.totalPages ?? 1;
@@ -522,7 +574,7 @@ const templatePeminjamanBuku = z.object({
   tanggalPinjam: z.string().min(1, "Tanggal Pinjam harus diisi"),
   batasKembali: z.string().min(1, "Batas Kembali harus diisi"),
   tanggalKembali: z.string().min(1, "Tanggal Kembali harus diisi"),
-  catatan: z.string().min(1, "Catatan harus diisi")
+  catatan: z.string().min(1, "Catatan harus diisi"),
 });
 
 const defaultPeminjamanBuku = {
@@ -533,7 +585,7 @@ const defaultPeminjamanBuku = {
   tanggalPinjam: "",
   batasKembali: "",
   tanggalKembali: "",
-  catatan: ""
+  catatan: "",
 };
 
 interface FormEditData {
@@ -549,7 +601,7 @@ interface FormEditData {
   batasKembali: string;
   tanggalKembali: string;
   catatan: string;
-  status: 'Dipinjam' | 'Dikembalikan' | 'Terlambat' | 'Dibatalkan';
+  status: "Dipinjam" | "Dikembalikan" | "Terlambat" | "Dibatalkan";
 }
 
 const editForm: FormEditData = {
@@ -561,8 +613,8 @@ const editForm: FormEditData = {
   batasKembali: "",
   tanggalKembali: "",
   catatan: "",
-  status: "Dipinjam"
-}
+  status: "Dipinjam",
+};
 
 const peminjamanBuku = proxy({
   create: {
@@ -611,13 +663,16 @@ const peminjamanBuku = proxy({
       peminjamanBuku.findMany.loading = true; // ✅ Akses langsung via nama path
       peminjamanBuku.findMany.page = page;
       peminjamanBuku.findMany.search = search;
-  
+
       try {
         const query: any = { page, limit };
         if (search) query.search = search;
-    
-        const res = await ApiFetch.api.pendidikan.perpustakaandigital.peminjamanbuku["findMany"].get({ query });
-    
+
+        const res =
+          await ApiFetch.api.pendidikan.perpustakaandigital.peminjamanbuku[
+            "findMany"
+          ].get({ query });
+
         if (res.status === 200 && res.data?.success) {
           peminjamanBuku.findMany.data = res.data.data ?? [];
           peminjamanBuku.findMany.totalPages = res.data.totalPages ?? 1;
@@ -685,7 +740,9 @@ const peminjamanBuku = proxy({
           );
           await peminjamanBuku.findMany.load(); // refresh list
         } else {
-          toast.error(result?.message || "Gagal menghapus Data Peminjaman Buku");
+          toast.error(
+            result?.message || "Gagal menghapus Data Peminjaman Buku"
+          );
         }
       } catch (error) {
         console.error("Gagal delete:", error);
@@ -733,7 +790,7 @@ const peminjamanBuku = proxy({
             batasKembali: data.batasKembali,
             tanggalKembali: data.tanggalKembali,
             catatan: data.catatan,
-            status: data.status
+            status: data.status,
           };
           return data; // Return the loaded data
         } else {
@@ -776,7 +833,7 @@ const peminjamanBuku = proxy({
               batasKembali: this.form.batasKembali,
               tanggalKembali: this.form.tanggalKembali,
               catatan: this.form.catatan,
-              status: this.form.status
+              status: this.form.status,
             }),
           }
         );
@@ -795,7 +852,9 @@ const peminjamanBuku = proxy({
           await peminjamanBuku.findMany.load(); // refresh list
           return true;
         } else {
-          throw new Error(result.message || "Gagal update data peminjaman buku");
+          throw new Error(
+            result.message || "Gagal update data peminjaman buku"
+          );
         }
       } catch (error) {
         console.error("Error updating data peminjaman buku:", error);
@@ -814,7 +873,7 @@ const peminjamanBuku = proxy({
       peminjamanBuku.update.form = { ...editForm };
     },
   },
-})
+});
 
 const perpustakaanDigitalState = proxy({
   dataPerpustakaan,

src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts

@@ -561,6 +561,45 @@ const pegawai = proxy({
       }
     },
   },
+  findManyAll: {
+    data: null as
+      | Prisma.PegawaiPPIDGetPayload<{
+          include: {
+            image: true;
+            posisi: true;
+          };
+        }>[]
+      | null,
+    loading: false,
+    search: "",
+    load: async (search = "") => {
+      // Change to arrow function
+      pegawai.findManyAll.loading = true; // Use the full path to access the property
+      pegawai.findManyAll.search = search;
+      try {
+        const query: any = { search };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.ppid.strukturppid.pegawai[
+          "find-many-all"
+        ].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          pegawai.findManyAll.data = res.data.data || [];
+        } else {
+          console.error("Failed to load pegawai:", res.data?.message);
+          pegawai.findManyAll.data = [];
+        }
+      } catch (error) {
+        console.error("Error loading pegawai:", error);
+        pegawai.findManyAll.data = [];
+      } finally {
+        pegawai.findManyAll.loading = false;
+      }
+    },
+  }, 
   findUnique: {
     data: null as
       | (Prisma.PegawaiPPIDGetPayload<{

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

@@ -27,7 +27,7 @@ function PelayananPendudukNonPermanent() {
   );
 
   useShallowEffect(() => {
-    pelayananPendudukNonPermanen.findById.load('1');
+    pelayananPendudukNonPermanen.findById.load('edit');
   }, []);
 
   if (!pelayananPendudukNonPermanen.findById.data) {

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

@@ -43,7 +43,7 @@ function PerizinanBerusaha() {
       try {
         setLoading(true);
         // You should get the ID from your router query or params
-        const id = '1'; // Replace with actual ID or get from URL params
+        const id = 'edit'; // Replace with actual ID or get from URL params
         await pelayananPerizinanBerusaha.findById.load(id);
       } catch (err) {
         setError('Gagal memuat data');

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

@@ -55,9 +55,9 @@ function EditProgramKemiskinan() {
   useEffect(() => {
     if (!id) return;
 
-    stateProgram.findUnique
-      .load(id)
-      .then(() => {
+    const loadData = async () => {
+      try {
+        await stateProgram.findUnique.load(id);
         const data = stateProgram.findUnique.data;
         if (data) {
           setFormData({
@@ -70,12 +70,16 @@ function EditProgramKemiskinan() {
             },
           });
         }
-      })
-      .catch((err) => {
+      } catch (err) {
         console.error('Error load data:', err);
         toast.error('Gagal mengambil data program');
-      });
-  }, [id, stateProgram.findUnique]);
+      }
+    };
+
+    loadData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]); // ✅ hanya trigger saat id berubah
+
 
   // generic handler untuk field top-level
   const handleChange = useCallback(

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

@@ -183,7 +183,7 @@ function EditArtikelKesehatan() {
           {/* Gambar */}
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
-              Gambar Berita
+              Gambar Artikel Kesehatan
             </Text>
             <Dropzone
               onDrop={handleFileChange}
@@ -240,15 +240,15 @@ function EditArtikelKesehatan() {
           />
 
           {/* Pendahuluan */}
-          <InputText
-            label="Pendahuluan"
-            value={formData.introduction.content}
-            onChange={(value) =>
-              setFormData((prev) => ({ ...prev, introduction: { content: value } }))
-            }
-            placeholder="Masukkan pendahuluan"
-          />
-
+          <Box>
+            <Text fw="bold">Pendahuluan</Text>
+            <EditEditor
+              value={formData.introduction.content}
+              onChange={(value) =>
+                setFormData((prev) => ({ ...prev, introduction: { ...prev.introduction, content: value } }))
+              }
+            />
+          </Box>
           {/* Gejala */}
           <Box>
             <Text fw="bold">Gejala</Text>

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

@@ -115,7 +115,7 @@ function CreateArtikelKesehatan() {
         <Stack gap="md">
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
-              Gambar Berita
+              Gambar Artikel Kesehatan
             </Text>
             <Dropzone
               onDrop={(files) => {
@@ -163,7 +163,7 @@ function CreateArtikelKesehatan() {
               </Box>
             )}
           </Box>
-          
+
           <TextInput
             label={"Judul"}
             placeholder="Masukkan judul"
@@ -182,16 +182,15 @@ function CreateArtikelKesehatan() {
             }}
             required
           />
-          <TextInput
-            label={"Pendahuluan"}
-            placeholder="Masukkan pendahuluan"
-            required
-            defaultValue={stateArtikelKesehatan.create.form.introduction.content}
-            onChange={(e) => {
-              stateArtikelKesehatan.create.form.introduction.content = e.target.value;
-            }}
-          />
-
+          <Box>
+            <Text fz="sm" fw="bold">Pendahuluan</Text>
+            <CreateEditor
+              value={stateArtikelKesehatan.create.form.introduction.content}
+              onChange={(e) => {
+                stateArtikelKesehatan.create.form.introduction.content = e;
+              }}
+            />
+          </Box>
           {/* Gejala */}
           <Box>
             <Text fz="md" fw="bold">Gejala</Text>

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

@@ -89,26 +89,26 @@ function ListArtikelKesehatan({ search }: { search: string }) {
           <Table highlightOnHover>
             <TableThead>
               <TableTr>
-                <TableTh>Judul</TableTh>
-                <TableTh>Konten</TableTh>
-                <TableTh>Aksi</TableTh>
+                <TableTh style={{ minWidth: 200 }}>Judul</TableTh>
+                <TableTh style={{ minWidth: 200 }}>Konten</TableTh>
+                <TableTh style={{ minWidth: 200 }}>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd>
+                    <TableTd style={{ minWidth: 200 }}>
                       <Text fw={500} truncate="end" lineClamp={1}>
                         {item.title}
                       </Text>
                     </TableTd>
-                    <TableTd>
+                    <TableTd style={{ minWidth: 200 }} >
                       <Text truncate fz="sm" c="dimmed" lineClamp={1}>
                         {item.content}
                       </Text>
                     </TableTd>
-                    <TableTd>
+                    <TableTd style={{ minWidth: 200 }}>
                       <Button
                         variant="light"
                         color="blue"

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

@@ -223,7 +223,7 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
 
       {/* Chart */}
       <Box mt="lg" style={{ width: '100%', minWidth: 300, height: 420, minHeight: 300 }}>
-        <Paper bg={colors['white-1']} p={'md'}>
+        <Paper withBorder bg={colors['white-1']} p={'md'}>
           <Title pb={10} order={4}>Grafik Hasil Kepuasan Masyarakat</Title>
           {mounted && diseaseChartData.length > 0 ? (
             <Center>

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

@@ -111,9 +111,7 @@ function ListInfoWabahPenyakit({ search }: { search: string }) {
                     </TableTd>
                     <TableTd>
                       <Box w={200}>
-                        <Text truncate fz="sm" c="dimmed">
-                          {item.deskripsiSingkat}
-                        </Text>
+                        <Text truncate="end" fz="sm" c="dimmed" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat }} />
                       </Box>
                     </TableTd>
                     <TableTd>

src/app/admin/(dashboard)/landing-page/profile/_lib/layoutTabs.tsx

@@ -66,7 +66,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
   return (
     <Stack gap="lg">
       <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
-        Profil Desa
+        Profile Desa
       </Title>
 
       <Tabs

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/_lib/layoutTabs.tsx

@@ -65,7 +65,11 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
               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", // ✅ biar nggak nempel ke tepi
+          }}
           >
             {tabs.map((tab, i) => (
               <Tooltip

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/_lib/layoutTabs.tsx

@@ -72,7 +72,11 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
               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", // ✅ biar nggak nempel ke tepi
+          }}
           >
             {tabs.map((tab, i) => (
               <Tooltip

src/app/admin/(dashboard)/pendidikan/info-sekolah/_lib/layoutTabs.tsx

@@ -79,7 +79,11 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
               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", // ✅ biar nggak nempel ke tepi
+          }}
           >
             {tabs.map((tab, i) => (
               <Tooltip key={i} label={tab.tooltip} position="bottom" withArrow transitionProps={{ transition: 'pop', duration: 200 }}>

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/_lib/layoutTabs.tsx

@@ -73,7 +73,11 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
               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", // ✅ biar nggak nempel ke tepi
+          }}
           >
             {tabs.map((tab, i) => (
               <Tooltip

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/_lib/layoutTabs.tsx

@@ -72,7 +72,11 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
               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", // ✅ biar nggak nempel ke tepi
+          }}
           >
             {tabs.map((tab, i) => (
               <Tooltip

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/peminjam/[id]/edit/page.tsx

@@ -17,6 +17,7 @@ import {
   Tooltip,
 } from '@mantine/core';
 import { DateInput } from '@mantine/dates';
+import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -56,6 +57,10 @@ function EditPeminjam() {
     catatan: '',
   });
 
+  useShallowEffect(() => {
+    perpustakaanDigitalState.dataPerpustakaan.findManyAll.load()
+  })
+
   useEffect(() => {
     const loadPeminjam = async () => {
       const id = params?.id as string;
@@ -159,13 +164,17 @@ function EditPeminjam() {
             required
           />
 
-          <TextInput
-            value={formData.buku?.judul || ''}
-            label={<Text fw="bold" fz="sm">Buku</Text>}
-            placeholder="Buku"
-            required
-            readOnly
-          />
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>Buku</Text>
+            <Select
+              placeholder="Pilih buku"
+              data={perpustakaanDigitalState.dataPerpustakaan.findManyAll.data?.map(p => ({ value: p.id, label: p.judul })) || []}
+              value={formData.bukuId}
+              onChange={(value) => value && setFormData({ ...formData, bukuId: value })}
+              searchable
+              clearable
+            />
+          </Box>
 
           <DateInput
             value={formData.tanggalPinjam}

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/_lib/layoutTabs.tsx

@@ -66,7 +66,11 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
               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", // ✅ biar nggak nempel ke tepi
+          }}
           >
             {tabs.map((tab, i) => (
               <Tooltip

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

@@ -103,18 +103,7 @@ function ListPegawaiPPID({ search }: { search: string }) {
               </TableTr>
             </TableThead>
             <TableTbody>
-              {(() => {
-                console.log('Rendering table with items:', stateOrganisasi.findMany.data);
-                return null;
-              })()}
-              {([...filteredData]
-                .sort((a, b) => {
-                  if (a.isActive === b.isActive) {
-                    return a.namaLengkap.localeCompare(b.namaLengkap); // kalau status sama, urut nama
-                  }
-                  return Number(b.isActive) - Number(a.isActive); // aktif duluan
-                }) // Aktif di atas
-              ).map((item) => (
+              {filteredData.map((item) => (
                 <TableTr key={item.id}>
                   <TableTd>
                     <Box w={150}>

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

@@ -21,10 +21,10 @@ function ListStrukturOrganisasiPPID() {
   const stateOrganisasi = useProxy(stateStrukturPPID.pegawai);
 
   useEffect(() => {
-    stateOrganisasi.findMany.load();
+    stateOrganisasi.findManyAll.load();
   }, []);
 
-  if (stateOrganisasi.findMany.loading) {
+  if (stateOrganisasi.findManyAll.loading) {
     return (
       <Center py={40}>
         <Loader size="lg" />
@@ -32,7 +32,7 @@ function ListStrukturOrganisasiPPID() {
     );
   }
 
-  if (!stateOrganisasi.findMany.data || stateOrganisasi.findMany.data.length === 0) {
+  if (!stateOrganisasi.findManyAll.data || stateOrganisasi.findManyAll.data.length === 0) {
     return (
       <Stack align="center" py={60} gap="sm">
         <IconUsers size={60} stroke={1.5} color="var(--mantine-color-gray-6)" />
@@ -43,7 +43,7 @@ function ListStrukturOrganisasiPPID() {
 
   const posisiMap = new Map<string, any>();
 
-  const aktifPegawai = stateOrganisasi.findMany.data.filter(p => p.isActive);
+  const aktifPegawai = stateOrganisasi.findManyAll.data?.filter(p => p.isActive);
 
   for (const pegawai of aktifPegawai) {
     const posisiId = pegawai.posisi.id;

src/app/admin/_com/list_PageAdmin.tsx

@@ -377,22 +377,5 @@ export const navBar = [
         path: "/admin/pendidikan/data-pendidikan"
       }
     ]
-  },
-  {
-    id: "User & Role",
-    name: "User & Role",
-    path: "",
-    children: [
-      {
-        id: "User",
-        name: "User",
-        path: "/admin/user&role/user"
-      },
-      {
-        id: "Role",
-        name: "Role",
-        path: "/admin/user&role/role"
-      },
-    ]
-  },
+  }
 ]

src/app/admin/layout.tsx

@@ -132,7 +132,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
             <Tooltip label="Keluar" position="bottom" withArrow>
               <ActionIcon
                 onClick={() => {
-                  router.push("/login");
+                  router.push("/darmasaba");
                 }}
                 color={colors["blue-button"]}
                 radius="xl"

src/app/api/[[...slugs]]/_lib/pendidikan/perpustakaan-digital/data-perpustakaan/findManyAll.ts

@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function dataPerpustakaanFindManyAll(context: Context) {
+  const search = (context.query.search as string) || "";
+  const isActiveParam = context.query.isActive;
+
+  // Buat where clause dinamis
+  const where: any = {};
+
+  if (isActiveParam !== undefined) {
+    where.isActive = isActiveParam === "true";
+  }
+
+  if (search) {
+    where.OR = [
+      { judul: { contains: search, mode: "insensitive" } },
+      { deskripsi: { contains: search, mode: "insensitive" } },
+    ];
+  }
+
+  try {
+    const data = await prisma.dataPerpustakaan.findMany({
+      where,
+      include: {
+        kategori: true,
+        image: true,
+      },
+      orderBy: { createdAt: "desc" },
+    });
+
+    return {
+      success: true,
+      message: "Success fetch all data perpustakaan (non-paginated)",
+      total: data.length,
+      data,
+    };
+  } catch (error) {
+    console.error("Find many all error:", error);
+    return {
+      success: false,
+      message: "Failed fetch all data perpustakaan",
+      total: 0,
+      data: [],
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/pendidikan/perpustakaan-digital/data-perpustakaan/index.ts

@@ -4,6 +4,7 @@ import dataPerpustakaanDelete from "./del";
 import dataPerpustakaanFindMany from "./findMany";
 import dataPerpustakaanFindUnique from "./findUnique";
 import dataPerpustakaanUpdate from "./updt";
+import dataPerpustakaanFindManyAll from "./findManyAll";
 
 const DataPerpustakaan = new Elysia({
   prefix: "/dataperpustakaan",
@@ -18,7 +19,7 @@ const DataPerpustakaan = new Elysia({
       kategoriId: t.String(),
     }),
   })
-
+  .get("/findManyAll", dataPerpustakaanFindManyAll)
   .get("/findMany", dataPerpustakaanFindMany)
   .get("/:id", async (context) => {
     const response = await dataPerpustakaanFindUnique(

src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/pegawai/findMany.ts

@@ -2,61 +2,67 @@
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
-// Di findMany.ts
 export default async function pegawaiFindMany(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 isActiveParam = context.query.isActive;
 
+  // where clause dinamis
   const where: any = {};
   if (isActiveParam !== undefined) {
     where.isActive = isActiveParam === "true";
   }
 
-  // Tambahkan pencarian (jika ada)
   if (search) {
     where.OR = [
       { namaLengkap: { contains: search, mode: "insensitive" } },
       { alamat: { contains: search, mode: "insensitive" } },
+      { posisi: { nama: { contains: search, mode: "insensitive" } } },
     ];
   }
 
   try {
-    const [data, total] = await Promise.all([
+    // Ambil semua data terlebih dahulu (tanpa pagination)
+    const [allData, total] = await Promise.all([
       prisma.pegawaiPPID.findMany({
         where,
         include: {
           posisi: true,
           image: true,
         },
-        skip,
-        take: limit,
-        orderBy: { posisi: { hierarki: "asc" } },
-      }),
-      prisma.pegawaiPPID.count({
-        where,
       }),
+      prisma.pegawaiPPID.count({ where }),
     ]);
 
+    // Sort manual berdasarkan hierarki posisi
+    const sortedData = allData.sort((a, b) => {
+      // Sort berdasarkan hierarki terlebih dahulu
+      if (a.posisi.hierarki !== b.posisi.hierarki) {
+        return a.posisi.hierarki - b.posisi.hierarki;
+      }
+      // Jika hierarki sama, sort berdasarkan nama posisi
+      return a.posisi.nama.localeCompare(b.posisi.nama);
+    });
+
+    // Lakukan pagination manual setelah sorting
+    const paginatedData = sortedData.slice(skip, skip + limit);
     const totalPages = Math.ceil(total / limit);
 
     return {
       success: true,
-      message: "Success fetch pegawai with pagination",
-      data,
+      message: "Success fetch pegawai with hierarchy order",
+      data: paginatedData,
       page,
       totalPages,
       total,
     };
-  } catch (e) {
-    console.error("Find many paginated error:", e);
+  } catch (error) {
+    console.error("Find many pegawai error:", error);
     return {
       success: false,
-      message: "Failed fetch pegawai with pagination",
+      message: "Failed fetch pegawai",
       data: [],
       page: 1,
       totalPages: 1,

src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/pegawai/findManyAll.ts

@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function pegawaiFindManyAll(context: Context) {
+  const search = (context.query.search as string) || "";
+  const isActiveParam = context.query.isActive;
+
+  // Buat where clause dinamis
+  const where: any = {};
+
+  if (isActiveParam !== undefined) {
+    where.isActive = isActiveParam === "true";
+  }
+
+  if (search) {
+    where.OR = [
+      { namaLengkap: { contains: search, mode: "insensitive" } },
+      { alamat: { contains: search, mode: "insensitive" } },
+    ];
+  }
+
+  try {
+    const data = await prisma.pegawaiPPID.findMany({
+      where,
+      include: {
+        posisi: true,
+        image: true,
+      },
+      orderBy: { posisi: { hierarki: "asc" } },
+    });
+
+    return {
+      success: true,
+      message: "Success fetch all pegawai (non-paginated)",
+      total: data.length,
+      data,
+    };
+  } catch (error) {
+    console.error("Find many all error:", error);
+    return {
+      success: false,
+      message: "Failed fetch all pegawai",
+      total: 0,
+      data: [],
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/pegawai/index.ts

@@ -5,6 +5,7 @@ import pegawaiCreate from "./create";
 import pegawaiNonActive from "./nonActive";
 import pegawaiUpdate from "./updt";
 import pegawaiDelete from "./del";
+import pegawaiFindManyAll from "./findManyAll";
 
 
 const Pegawai = new Elysia({
@@ -15,6 +16,9 @@ const Pegawai = new Elysia({
   // ✅ Find all
   .get("/find-many", pegawaiFindMany)
 
+  // ✅ Find all (non-paginated)
+  .get("/find-many-all", pegawaiFindManyAll)
+
   // ✅ Find by ID
   .get("/:id", async (context) => {
     const response = await pegawaiFindUnique(context);

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

@@ -0,0 +1,10 @@
+import Elysia from "elysia";
+import searchFindMany from "./findMany";
+
+const Search = new Elysia({
+  prefix: "/api/search",
+  tags: ["Search"],
+})
+  .get("/findMany", searchFindMany);
+
+export default Search;

src/app/api/[[...slugs]]/_lib/search/searchState.ts

@@ -0,0 +1,162 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+import { proxy } from 'valtio';
+import { debounce } from 'lodash';
+import ApiFetch from '@/lib/api-fetch';
+
+interface SearchResult {
+  type?: string;
+  id: string | number;
+  title?: string;
+  [key: string]: any;
+}
+
+const searchState = proxy({
+  query: '',
+  page: 1,
+  limit: 10,
+  type: '', // kosong = global search
+  results: [] as SearchResult[],
+  nextPage: null as number | null,
+  loading: false,
+
+  async fetch() {
+    if (!searchState.query) {
+      searchState.results = [];
+      return;
+    }
+  
+    searchState.loading = true;
+  
+    try {
+      const res = await ApiFetch.api.search.findMany.get({
+        query: {
+          query: searchState.query,
+          page: searchState.page,
+          limit: searchState.limit,
+          type: searchState.type,
+        },
+      });
+  
+      console.log("Search API Response:", res);
+      const rawItems = res.data?.data || [];
+      const parsedItems = structuredClone(rawItems); // ✅ penting!
+  
+      console.log("✅ Parsed items:", parsedItems);
+  
+      if (searchState.page === 1) {
+        searchState.results = parsedItems;
+      } else {
+        searchState.results.push(...parsedItems);
+      }
+
+      console.log("Search results render:", searchState.results);
+
+  
+      searchState.nextPage = res.data?.nextPage || null;
+    } catch (error) {
+      console.error("Search fetch error:", error);
+    } finally {
+      searchState.loading = false;
+    }
+  },
+
+  async next() {
+    if (!searchState.nextPage || searchState.loading) return;
+    searchState.page = searchState.nextPage;
+    await searchState.fetch();
+  },
+});
+
+// 🕒 debounce-nya tetap kita export biar bisa dipanggil manual
+export const debouncedFetch = debounce(() => {
+  searchState.page = 1;
+  searchState.fetch();
+}, 500);
+
+export default searchState;
+
+
+// 'use client';
+// import { proxy, subscribe } from 'valtio';
+// import { debounce } from 'lodash';
+// import ApiFetch from '@/lib/api-fetch';
+
+// interface SearchResult {
+//   type?: string;
+//   id: string | number;
+//   title?: string;
+//   [key: string]: any;
+// }
+
+// const searchState = proxy({
+//   query: '',
+//   page: 1,
+//   limit: 10,
+//   type: '', // kosong = global search
+//   results: [] as SearchResult[],
+//   nextPage: null as number | null,
+//   loading: false,
+
+//   // --- fetch utama ---
+//   async fetch() {
+//     if (!searchState.query.trim()) {
+//       // 🧹 kalau query kosong, kosongin data dan stop
+//       searchState.results = [];
+//       searchState.nextPage = null;
+//       searchState.loading = false;
+//       return;
+//     }
+
+//     searchState.loading = true;
+
+//     try {
+//       const res = await ApiFetch.api.search.findMany.get({
+//         query: {
+//           query: searchState.query,
+//           page: searchState.page,
+//           limit: searchState.limit,
+//           type: searchState.type,
+//         },
+//       });
+
+//       const newData = res.data?.data || [];
+
+//       // Kalau ini page pertama, replace data
+//       if (searchState.page === 1) {
+//         searchState.results = newData;
+//       } else {
+//         // Kalau page berikutnya, append data
+//         searchState.results = [...searchState.results, ...newData];
+//       }
+
+//       searchState.nextPage = res.data?.nextPage || null;
+//     } catch (err) {
+//       console.error('Search fetch error:', err);
+//     } finally {
+//       searchState.loading = false;
+//     }
+//   },
+
+//   // --- load next page (infinite scroll) ---
+//   async next() {
+//     if (!searchState.nextPage || searchState.loading) return;
+//     searchState.page = searchState.nextPage;
+//     await searchState.fetch();
+//   },
+// });
+
+// // --- debounce agar gak fetch tiap ketik ---
+// const debouncedFetch = debounce(() => {
+//   // reset pagination setiap query berubah
+//   searchState.page = 1;
+//   searchState.fetch();
+// }, 500);
+
+// // --- auto trigger setiap query berubah ---
+// subscribe(searchState, () => {
+//   // kalau query berubah, jalankan debounce fetch
+//   debouncedFetch();
+// });
+
+// export default searchState;

src/app/api/[[...slugs]]/route.ts

@@ -25,6 +25,7 @@ import LandingPage from "./_lib/landing_page";
 import Pendidikan from "./_lib/pendidikan";
 import User from "./_lib/user";
 import Role from "./_lib/user/role";
+import Search from "./_lib/search";
 
 const ROOT = process.cwd();
 
@@ -95,6 +96,7 @@ const ApiServer = new Elysia()
   .use(Pendidikan)
   .use(User)
   .use(Role)
+  .use(Search)
 
   .onError(({ code }) => {
     if (code === "NOT_FOUND") {

src/app/api/subscribe/route.ts

@@ -0,0 +1,54 @@
+import { NextResponse } from 'next/server';
+import nodemailer from 'nodemailer';
+
+export async function POST(request: Request) {
+  try {
+    const { email } = await request.json();
+
+    // Input validation
+    if (!email) {
+      return NextResponse.json(
+        { success: false, message: 'Email is required' },
+        { status: 400 }
+      );
+    }
+
+    // Email regex validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+      return NextResponse.json(
+        { success: false, message: 'Invalid email format' },
+        { status: 400 }
+      );
+    }
+
+    // Configure nodemailer
+    const transporter = nodemailer.createTransport({
+      service: 'gmail',
+      auth: {
+        user: process.env.EMAIL_USER,
+        pass: process.env.EMAIL_PASS,
+      },
+    });
+
+    // Send email
+    await transporter.sendMail({
+      from: `"Tim Info" <${process.env.EMAIL_USER}>`,
+      to: email,
+      subject: '✅ Berhasil Berlangganan!',
+      html: `<p>Terima kasih telah berlangganan info terbaru dari kami!</p>`,
+    });
+
+    return NextResponse.json({
+      success: true,
+      message: 'Subscription successful! Please check your email.',
+    });
+
+  } catch (error) {
+    console.error('Error in subscribe API:', error);
+    return NextResponse.json(
+      { success: false, message: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

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

@@ -62,11 +62,23 @@ function Page() {
             Informasi dan Pelayanan Administrasi Digital
           </Text>
         </Box>
-        <Image src={state.findUnique.data?.image?.link || ''} alt='' w={"100%"} loading="lazy"/>
+        <Image src={state.findUnique.data?.image?.link || ''} alt='' w={"100%"} loading="lazy" />
       </Container>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={"xs"}>
-          <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: state.findUnique.data?.content || '' }} />
+          <Text
+            py={20}
+            fz={{ base: "sm", md: "lg" }}
+            lh={{ base: 1.6, md: 1.8 }} // ✅ line-height lebih rapat dan responsif
+            ta="justify"
+            style={{
+              wordBreak: "break-word",
+              whiteSpace: "normal",
+            }}
+            dangerouslySetInnerHTML={{
+              __html: state.findUnique.data?.content || "",
+            }}
+          />
         </Stack>
       </Box>
     </Stack>

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

@@ -6,122 +6,83 @@ import { useCallback, useEffect, useState } from 'react';
 import ApiFetch from '@/lib/api-fetch';
 
 interface FileItem {
-    id: string;
-    name: string;
-    link: string;
-    realName: string;
-    createdAt: string | Date;
-    category: string;
-    path: string;
-    mimeType: string;
-  }
-  
-  export default function FotoContent() {
-    const [files, setFiles] = useState<FileItem[]>([]);
-    const [loading, setLoading] = useState(true);
-    const [search, setSearch] = useState('');
-    const [page, setPage] = useState(1);
-    const [totalPages, setTotalPages] = useState(1);
-  
-    // Handle search and pagination changes
-  const loadData = useCallback((pageNum: number, searchTerm: string) => {
+  id: string;
+  name: string;
+  link: string;
+  realName: string;
+  createdAt: string | Date;
+  category: string;
+  path: string;
+  mimeType: string;
+}
+
+export default function FotoContent() {
+  const [files, setFiles] = useState<FileItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const limit = 9; // ✅ ambil 12 data per page
+
+  const loadData = useCallback(async (pageNum: number, searchTerm: string) => {
     setLoading(true);
-    // Using the load function from the component's scope
-    const loadFn = async () => {
-      try {
-        const response = await ApiFetch.api.fileStorage.findMany.get({
-          query: {
-            category: 'image',
-            page: pageNum.toString(),
-            limit: '10',
-            ...(searchTerm && { search: searchTerm })
-          }
-        });
+    try {
+      const query: Record<string, string> = {
+        category: 'image',
+        page: pageNum.toString(),
+        limit: limit.toString(),
+      };
+      if (searchTerm) query.search = searchTerm;
 
-        if (response.status === 200 && response.data) {
-          setFiles(response.data.data || []);
-          setTotalPages(response.data.meta?.totalPages || 1);
-        } else {
-          setFiles([]);
-        }
-      } catch (err) {
-        console.error('Load error:', err);
+      const response = await ApiFetch.api.fileStorage.findMany.get({ query });
+
+      if (response.status === 200 && response.data) {
+        setFiles(response.data.data || []);
+        setTotalPages(response.data.meta?.totalPages || 1);
+      } else {
         setFiles([]);
-      } finally {
-        setLoading(false);
       }
-    };
-
-    loadFn();
+    } catch (err) {
+      console.error('Load error:', err);
+      setFiles([]);
+    } finally {
+      setLoading(false);
+    }
   }, []);
 
-  // Initial load and URL change handler
+  // ✅ Initial load + update when URL/search changes
   useEffect(() => {
     const handleRouteChange = () => {
       const urlParams = new URLSearchParams(window.location.search);
       const urlSearch = urlParams.get('search') || '';
       const urlPage = parseInt(urlParams.get('page') || '1');
-      
       setSearch(urlSearch);
       setPage(urlPage);
       loadData(urlPage, urlSearch);
     };
 
-    // Handle search updates from the search bar
     const handleSearchUpdate = (e: Event) => {
       const { search } = (e as CustomEvent).detail;
-      
       setSearch(search);
-      setPage(1); // Reset to first page on new search
+      setPage(1);
       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);
     };
   }, [loadData]);
 
-  // ✅ Fetch data
+  // ✅ Update when page/search changes
   useEffect(() => {
-    const fetchFiles = async () => {
-      setLoading(true);
-      try {
-        const query: Record<string, string> = {
-          category: 'image',
-          page: page.toString(),
-          limit: '10',
-        };
-        if (search) query.search = search;
+    loadData(page, search);
+  }, [page, search, loadData]);
 
-        const response = await ApiFetch.api.fileStorage.findMany.get({ query });
-
-        if (response.status === 200 && response.data) {
-          setFiles(response.data.data || []);
-          setTotalPages(response.data.meta?.totalPages || 1);
-        } else {
-          setFiles([]);
-        }
-      } catch (err) {
-        console.error('Fetch error:', err);
-        setFiles([]);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    if (page > 0) fetchFiles(); // jangan fetch jika page belum valid
-  }, [search, page]);
-
-  // ✅ Update URL
   const updateURL = (newSearch: string, newPage: number) => {
     const url = new URL(window.location.href);
     if (newSearch) url.searchParams.set('search', newSearch);
@@ -148,7 +109,14 @@ interface FileItem {
     <Box pt={20} px={{ base: 'md', md: 100 }}>
       <SimpleGrid cols={{ base: 1, md: 3 }}>
         {files.map((file) => (
-          <Paper key={file.id} mb={50} p="md" radius={26} bg={colors['white-trans-1']} style={{ height: '100%' }}>
+          <Paper
+            key={file.id}
+            mb={50}
+            p="md"
+            radius={26}
+            bg={colors['white-trans-1']}
+            style={{ height: '100%' }}
+          >
             <Box style={{ height: '250px', overflow: 'hidden', borderRadius: '12px' }}>
               <Image
                 src={file.link}
@@ -159,20 +127,18 @@ interface FileItem {
                 loading="lazy"
               />
             </Box>
-            <Box>
-              <Stack gap="sm" py={10}>
-                <Text fw="bold" fz={{ base: 'h4', md: 'h3' }}>
-                  {file.realName || file.name}
-                </Text>
-                <Text fz="sm" c="dimmed">
-                  {new Date(file.createdAt).toLocaleDateString('id-ID', {
-                    day: 'numeric',
-                    month: 'long',
-                    year: 'numeric',
-                  })}
-                </Text>
-              </Stack>
-            </Box>
+            <Stack gap="sm" py={10}>
+              <Text fw="bold" fz={{ base: 'h4', md: 'h3' }}>
+                {file.realName || file.name}
+              </Text>
+              <Text fz="sm" c="dimmed">
+                {new Date(file.createdAt).toLocaleDateString('id-ID', {
+                  day: 'numeric',
+                  month: 'long',
+                  year: 'numeric',
+                })}
+              </Text>
+            </Stack>
           </Paper>
         ))}
       </SimpleGrid>
@@ -181,4 +147,4 @@ interface FileItem {
       </Center>
     </Box>
   );
-}
+}

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

@@ -146,24 +146,24 @@ function Page() {
             <Title order={3}>Ajukan Permohonan</Title>
             <TextInput
               label={<Text fz="sm" fw="bold">Nama</Text>}
-              placeholder="masukkan nama"
+              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"
+              placeholder="Masukkan NIK"
               onChange={(val) => (stateCreate.create.form.nik = val.target.value)}
             />
             <TextInput
               label={<Text fz="sm" fw="bold">Alamat</Text>}
-              placeholder="masukkan alamat"
+              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"
+              placeholder="Masukkan Nomor KK"
               onChange={(val) => (stateCreate.create.form.nomorKk = val.target.value)}
             />
             <Select
@@ -186,12 +186,11 @@ function Page() {
                   stateCreate.create.form.kategoriId = '';
                 }
               }}
-              searchable
+              // searchable
               clearable
               nothingFoundMessage="Tidak ditemukan"
               required
             />
-
             <Button bg={colors['blue-button']} onClick={handleSubmit}>
               Simpan
             </Button>

src/app/darmasaba/(pages)/desa/layanan/_com/pelayananPendudukNonPermanent.tsx

@@ -16,7 +16,7 @@ function PelayananPendudukNonPermanent() {
     const loadData = async () => {
       try {
         setLoading(true);
-        await state.pelayananPendudukNonPermanen.findById.load('1');
+        await state.pelayananPendudukNonPermanen.findById.load('edit');
       } catch (error) {
         console.error('Gagal memuat data:', error);
       } finally {

src/app/darmasaba/(pages)/desa/layanan/_com/pelayananPerizinanBerusaha.tsx

@@ -7,34 +7,52 @@ import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
 function PelayananPerizinanBerusaha() {
-  const state = useProxy(stateLayananDesa)
-  const [loading, setLoading] = useState(false)
-  const [active, setActive] = useState(1);
-  const nextStep = () => setActive((current) => (current < 6 ? current + 1 : current));
-  const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
+  const state = useProxy(stateLayananDesa);
+  const [loading, setLoading] = useState(false);
+  const [active, setActive] = useState(0);
+
+  const totalSteps = 6;
+
+  const nextStep = () => {
+    if (active < totalSteps - 1) {
+      setActive(active + 1);
+    } else if (active === totalSteps - 1) {
+      setActive(totalSteps); // Mark as completed
+    }
+  };
+
+  const prevStep = () => {
+    if (active > 0) {
+      setActive(active - 1);
+    }
+  };
 
   useEffect(() => {
     const loadData = async () => {
       try {
         setLoading(true);
-        await state.pelayananPerizinanBerusaha.findById.load('1')
+        await state.pelayananPerizinanBerusaha.findById.load('edit');
       } catch (error) {
         console.error('Gagal memuat data:', error);
       } finally {
         setLoading(false);
       }
-    }
-    loadData()
-  }, [])
+    };
+    loadData();
+  }, []);
 
   const data = state.pelayananPerizinanBerusaha.findById.data;
-  
+
   if (!data && !loading) {
     return (
       <Center mih={300}>
         <Stack align="center" gap="sm">
-          <Text fz="lg" fw={500} c="dimmed">Belum ada informasi layanan yang tersedia</Text>
-          <Button component="a" href="https://oss.go.id" target="_blank" radius="xl">Kunjungi OSS</Button>
+          <Text fz="lg" fw={500} c="dimmed">
+            Belum ada informasi layanan yang tersedia
+          </Text>
+          <Button component="a" href="https://oss.go.id" target="_blank" radius="xl">
+            Kunjungi OSS
+          </Button>
         </Stack>
       </Center>
     );
@@ -47,72 +65,111 @@ function PelayananPerizinanBerusaha() {
           <Loader size="lg" color="blue" />
         </Center>
       ) : (
-          <Stack gap="lg">
-            <Box>
-              <Title order={2} fw={700} fz={{ base: 22, md: 32 }} mb="sm">
-                Perizinan Berusaha Berbasis Risiko melalui OSS
-              </Title>
-              <Text fz={{ base: 'sm', md: 'md' }} c="dimmed">
-                Sistem Online Single Submission (OSS) untuk pendaftaran NIB
-              </Text>
-            </Box>
+        <Stack gap="lg">
+          <Box>
+            <Title order={2} fw={700} fz={{ base: 22, md: 32 }} mb="sm">
+              Perizinan Berusaha Berbasis Risiko melalui OSS
+            </Title>
+            <Text fz={{ base: 'sm', md: 'md' }} c="dimmed">
+              Sistem Online Single Submission (OSS) untuk pendaftaran NIB
+            </Text>
+          </Box>
 
-            <Text fz={{ base: 'sm', md: 'md' }} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: data?.deskripsi || '' }} />
+          <Text
+            fz={{ base: 'sm', md: 'md' }}
+            ta="justify"
+            style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+            dangerouslySetInnerHTML={{ __html: data?.deskripsi || '' }}
+          />
 
-            <Box>
-              <Text fw={600} mb="sm" fz={{ base: 'sm', md: 'lg' }}>Alur pendaftaran NIB:</Text>
-              <Stepper active={active} onStepClick={setActive} orientation="vertical" color="blue" radius="md"
-                styles={{
-                  step: { padding: '14px 0' },
-                  stepBody: { marginLeft: 8 }
-                }}
-              >
-                <StepperStep label="Langkah 1" description="Daftar Akun">
-                  <Text fz="sm">Membuat akun di portal OSS</Text>
-                </StepperStep>
-                <StepperStep label="Langkah 2" description="Isi Data Perusahaan">
-                  <Text fz="sm">Lengkapi informasi perusahaan, data pemegang saham, dan alamat</Text>
-                </StepperStep>
-                <StepperStep label="Langkah 3" description="Pilih KBLI">
-                  <Text fz="sm">Menentukan kode KBLI sesuai jenis usaha</Text>
-                </StepperStep>
-                <StepperStep label="Langkah 4" description="Unggah Dokumen">
-                  <Text fz="sm">Unggah akta pendirian, surat izin, dan dokumen wajib lainnya</Text>
-                </StepperStep>
-                <StepperStep label="Langkah 5" description="Verifikasi Instansi">
-                  <Text fz="sm">Menunggu verifikasi dan persetujuan dari pihak berwenang</Text>
-                </StepperStep>
-                <StepperStep label="Langkah 6" description="Terbit NIB">
-                  <Text fz="sm">Menerima NIB sebagai identitas resmi usaha</Text>
-                </StepperStep>
-                <StepperCompleted>
-                  <Center>
-                    <Stack align="center" gap="xs">
-                      <IconCheck size={40} color="green" />
-                      <Text fz="sm" fw={500}>Proses pendaftaran selesai</Text>
-                    </Stack>
-                  </Center>
-                </StepperCompleted>
-              </Stepper>
+          <Box>
+            <Text fw={600} mb="sm" fz={{ base: 'sm', md: 'lg' }}>
+              Alur pendaftaran NIB:
+            </Text>
+            <Stepper
+              active={active}
+              onStepClick={(step) => {
+                if (step <= active) { // Only allow clicking on previous or current steps
+                  setActive(step);
+                }
+              }}
+              orientation="vertical"
+              color="blue"
+              radius="md"
+              styles={{
+                step: { padding: '14px 0' },
+                stepBody: { marginLeft: 8 }
+              }}
+            >
+              <StepperStep label="Langkah 1" description="Daftar Akun">
+                <Text fz="sm">Membuat akun di portal OSS</Text>
+              </StepperStep>
+              <StepperStep label="Langkah 2" description="Isi Data Perusahaan">
+                <Text fz="sm">Lengkapi informasi perusahaan, data pemegang saham, dan alamat</Text>
+              </StepperStep>
+              <StepperStep label="Langkah 3" description="Pilih KBLI">
+                <Text fz="sm">Menentukan kode KBLI sesuai jenis usaha</Text>
+              </StepperStep>
+              <StepperStep label="Langkah 4" description="Unggah Dokumen">
+                <Text fz="sm">Unggah akta pendirian, surat izin, dan dokumen wajib lainnya</Text>
+              </StepperStep>
+              <StepperStep label="Langkah 5" description="Verifikasi Instansi">
+                <Text fz="sm">Menunggu verifikasi dan persetujuan dari pihak berwenang</Text>
+              </StepperStep>
+              <StepperStep label="Langkah 6" description="Terbit NIB">
+                <Text fz="sm">Menerima NIB sebagai identitas resmi usaha</Text>
+              </StepperStep>
+              <StepperCompleted>
+                <Center>
+                  <Stack align="center" gap="xs">
+                    <IconCheck size={40} color="green" />
+                    <Text fz="sm" fw={500}>Proses pendaftaran selesai</Text>
+                  </Stack>
+                </Center>
+              </StepperCompleted>
+            </Stepper>
 
+            {active < totalSteps && (
               <Group justify="center" mt="lg">
-                <Button variant="light" leftSection={<IconArrowLeft size={18} />} onClick={prevStep} disabled={active === 0}>
+                <Button
+                  variant="light"
+                  leftSection={<IconArrowLeft size={18} />}
+                  onClick={prevStep}
+                  disabled={active === 0}
+                >
                   Kembali
                 </Button>
-                <Button rightSection={<IconArrowRight size={18} />} onClick={nextStep}>
-                  Lanjut
-                </Button>
-              </Group>
-            </Box>
 
-            <Text fz="sm" ta="justify" c="dimmed" mt="md">
-              Catatan: Persyaratan dan prosedur dapat berubah sewaktu-waktu. Untuk informasi resmi terbaru, silakan kunjungi situs{" "}
-              <a href="https://oss.go.id/" target="_blank" rel="noopener noreferrer">oss.go.id</a> atau hubungi instansi pemerintah terkait.
-            </Text>
-          </Stack>
+                {active < totalSteps ? (
+                  <Button
+                    rightSection={active < totalSteps - 1 ? <IconArrowRight size={18} /> : null}
+                    onClick={nextStep}
+                  >
+                    {active === totalSteps - 1 ? 'Selesai' : 'Lanjut'}
+                  </Button>
+                ) : (
+                  <Button
+                    variant="light"
+                    onClick={() => setActive(0)}
+                  >
+                    Mulai Lagi
+                  </Button>
+                )}
+              </Group>
+            )}
+          </Box>
+
+          <Text fz="sm" ta="justify" c="dimmed" mt="md">
+            Catatan: Persyaratan dan prosedur dapat berubah sewaktu-waktu. Untuk informasi resmi terbaru, silakan kunjungi situs{' '}
+            <a href="https://oss.go.id/" target="_blank" rel="noopener noreferrer">
+              oss.go.id
+            </a>{' '}
+            atau hubungi instansi pemerintah terkait.
+          </Text>
+        </Stack>
       )}
     </Box>
   );
 }
 
-export default PelayananPerizinanBerusaha;
+export default PelayananPerizinanBerusaha;

src/app/darmasaba/(pages)/desa/layanan/_com/pelayananSuratKeterangan.tsx

@@ -47,13 +47,13 @@ function PelayananSuratKeterangan({ search }: { search: string }) {
     <Box pb="xl">
       <Group justify="space-between" align="center" mb="md">
         <Group gap="xs">
-          <IconFileDescription size={28} stroke={1.8} color={colors["blue-button"]} />
+          <IconFileDescription size={28} stroke={1.8} />
           <Text fz={{ base: "h4", md: "h2" }} fw={700}>
             Layanan Surat Keterangan
           </Text>
         </Group>
         <Tooltip label="Pilih layanan surat keterangan sesuai kebutuhan Anda" withArrow>
-          <IconInfoCircle size={22} stroke={1.8} color={colors["blue-button"]} />
+          <IconInfoCircle size={22} stroke={1.8} />
         </Tooltip>
       </Group>
 

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

@@ -77,9 +77,7 @@ function Page() {
               fallbackSrc="https://placehold.co/800x400?text=Gambar+tidak+tersedia"
               loading="lazy"
             />
-            <Text py="md" fz={{ base: "sm", md: "md" }} ta="justify" lh={1.8}>
-              {state.findUnique.data?.deskripsi || 'Belum ada deskripsi untuk potensi desa ini.'}
-            </Text>
+            <Text py="md" fz={{ base: "sm", md: "md" }} ta="justify" lh={1.8} dangerouslySetInnerHTML={{ __html: state.findUnique.data?.deskripsi || 'Belum ada deskripsi untuk potensi desa ini.' }} />
           </Stack>
         </Paper>
       </Container>

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

@@ -43,7 +43,7 @@ function Page() {
             <Text fz={{ base: "2rem", md: "3rem" }} fw={900} c={colors["blue-button"]} lh={1.2}>
               Potensi Desa Darmasaba
             </Text>
-            <Text fz="lg" c="dimmed" ta="justify">
+            <Text fz="lg" ta="justify">
               Temukan berbagai potensi unggulan, peluang, dan daya tarik yang menjadikan Desa Darmasaba istimewa.
             </Text>
           </Stack>

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

@@ -10,31 +10,36 @@ import ProfilPerbekel from './ui/profilPerbekel';
 // import LembagaDesa from './ui/lembagaDesa';
 import MotoDesa from './ui/motoDesa';
 import SemuaPerbekel from './ui/semuaPerbekel';
+import ScrollToTopButton from '@/app/darmasaba/_com/scrollToTopButton';
 
 function Page() {
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
-      <Box px={{ base: 'md', md: 100 }}>
-        <BackButton />
-      </Box>
-      <Container w={{ base: "100%", md: "50%" }}>
-        <Stack align='center' gap={0}>
-          <Text fz={{base: "h1", md: "2.5rem"}} c={colors["blue-button"]} fw={"bold"}>
-            Profile Desa
-          </Text>
-        </Stack>
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <ProfileDesa />
-        <SejarahDesa />
-        <VisimisiDesa />
-        <LambangDesa />
-        <MaskotDesa />
-        <ProfilPerbekel />
-        <MotoDesa />
-        <SemuaPerbekel/>
-      </Box>
-    </Stack>
+    <Box>
+      <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+        <Box px={{ base: 'md', md: 100 }}>
+          <BackButton />
+        </Box>
+        <Container w={{ base: "100%", md: "50%" }}>
+          <Stack align='center' gap={0}>
+            <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+              Profile Desa
+            </Text>
+          </Stack>
+        </Container>
+        <Box px={{ base: "md", md: 100 }}>
+          <ProfileDesa />
+          <SejarahDesa />
+          <VisimisiDesa />
+          <LambangDesa />
+          <MaskotDesa />
+          <ProfilPerbekel />
+          <MotoDesa />
+          <SemuaPerbekel />
+        </Box>
+      </Stack>
+      {/* Tombol Scroll ke Atas */}
+      <ScrollToTopButton />
+    </Box>
   );
 }
 

src/app/darmasaba/(pages)/desa/profile/ui/lambangDesa.tsx

@@ -2,7 +2,7 @@
 'use client'
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile'
 import colors from '@/con/colors'
-import { Box, Center, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core'
+import { Box, Center, Image, Paper, Skeleton, Stack, Text } from '@mantine/core'
 import { useEffect } from 'react'
 import { useProxy } from 'valtio/utils'
 
@@ -58,7 +58,6 @@ function LambangDesa() {
             borderColor: '#e0e9ff',
           }}
         >
-          <Tooltip label="Deskripsi lambang desa" position="top-start" withArrow>
             <Text
               fz={{ base: 'md', md: 'lg' }}
               lh={1.8}
@@ -67,7 +66,6 @@ function LambangDesa() {
               style={{ fontWeight: 400, wordBreak: "break-word", whiteSpace: "normal", }}
               dangerouslySetInnerHTML={{ __html: data.deskripsi }}
             />
-          </Tooltip>
         </Paper>
       </Stack>
     </Box>

src/app/darmasaba/(pages)/desa/profile/ui/maskotDesa.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
-import { Box, Card, Center, Group, Image, Loader, Paper, Stack, Text, Tooltip } from '@mantine/core';
+import colors from '@/con/colors';
+import { Box, Card, Center, Group, Image, Loader, Paper, Stack, Text } from '@mantine/core';
+import { IconPhoto } from '@tabler/icons-react';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
-import { IconPhoto } from '@tabler/icons-react';
-import colors from '@/con/colors';
 
 function MaskotDesa() {
   const state = useProxy(stateProfileDesa.maskotDesa);
@@ -54,8 +54,8 @@ function MaskotDesa() {
           <Group justify="center" gap="lg" mt="lg">
             {data.images.length > 0 ? (
               data.images.map((img, index) => (
-                <Tooltip key={index} label={img.label} position="bottom" withArrow>
                   <Card
+                  key={index}
                     radius="lg"
                     shadow="md"
                     withBorder
@@ -79,7 +79,6 @@ function MaskotDesa() {
                       {img.label}
                     </Text>
                   </Card>
-                </Tooltip>
               ))
             ) : (
               <Stack align="center" gap="xs" mt="lg">

src/app/darmasaba/(pages)/desa/profile/ui/profilPerbekel.tsx

@@ -2,10 +2,10 @@
 'use client'
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Box, Image, Paper, SimpleGrid, Skeleton, Stack, Text, Divider, Tooltip } from '@mantine/core';
+import { Box, Divider, Image, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { IconBriefcase, IconTargetArrow, IconUser, IconUsers } from '@tabler/icons-react';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
-import { IconUser, IconBriefcase, IconUsers, IconTargetArrow } from '@tabler/icons-react';
 
 function ProfilPerbekel() {
   const state = useProxy(stateProfileDesa.profilPerbekel)
@@ -27,10 +27,10 @@ function ProfilPerbekel() {
   return (
     <Box pb={80} px="md">
       <Stack align="center" gap={0} mb={40}>
-        <Text 
-          c={colors['blue-button']} 
-          ta="center" 
-          fw="bold" 
+        <Text
+          c={colors['blue-button']}
+          ta="center"
+          fw="bold"
           fz={{ base: "2rem", md: "2.8rem" }}
           style={{ letterSpacing: "0.5px" }}
         >
@@ -41,11 +41,11 @@ function ProfilPerbekel() {
 
       <SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl" pb={50}>
         <Box>
-          <Paper 
-            bg={colors['white-trans-1']} 
-            w="100%" 
-            radius="xl" 
-            shadow="md" 
+          <Paper
+            bg={colors['white-trans-1']}
+            w="100%"
+            radius="xl"
+            shadow="md"
             withBorder
           >
             <Stack gap={0}>
@@ -70,9 +70,9 @@ function ProfilPerbekel() {
                 <Text c={colors['white-1']} fz={{ base: "lg", md: "h3" }}>
                   Perbekel Desa Darmasaba
                 </Text>
-                <Text 
-                  c={colors['white-1']} 
-                  fw="bolder" 
+                <Text
+                  c={colors['white-1']}
+                  fw="bolder"
                   fz={{ base: "xl", md: "h2" }}
                   mt={8}
                 >
@@ -83,60 +83,56 @@ function ProfilPerbekel() {
           </Paper>
         </Box>
 
-        <Paper 
-          p="xl" 
-          bg={colors['white-trans-1']} 
-          w="100%" 
-          radius="xl" 
-          shadow="md" 
+        <Paper
+          p="xl"
+          bg={colors['white-trans-1']}
+          w="100%"
+          radius="xl"
+          shadow="md"
           withBorder
         >
           <Stack gap="xl">
             <Box>
-              <Tooltip label="Informasi pribadi perbekel" withArrow>
-                <Stack gap={6}>
-                  <Stack align="center" gap={6}>
-                    <IconUser size={22} color={colors['blue-button']} />
-                    <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Biodata</Text>
-                  </Stack>
-                  <Text 
-                    fz={{ base: "1rem", md: "1.2rem" }} 
-                    ta="justify" 
-                    lh={1.6}
-                    dangerouslySetInnerHTML={{ __html: data.biodata }} 
-                    style={{wordBreak: "break-word", whiteSpace: "normal"}}
-                  />
+              <Stack gap={6}>
+                <Stack align="center" gap={6}>
+                  <IconUser size={22} color={colors['blue-button']} />
+                  <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Biodata</Text>
                 </Stack>
-              </Tooltip>
+                <Text
+                  fz={{ base: "1rem", md: "1.2rem" }}
+                  ta="justify"
+                  lh={1.6}
+                  dangerouslySetInnerHTML={{ __html: data.biodata }}
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                />
+              </Stack>
             </Box>
 
             <Box>
-              <Tooltip label="Pengalaman kerja perbekel" withArrow>
-                <Stack gap={6}>
-                  <Stack align="center" gap={6}>
-                    <IconBriefcase size={22} color={colors['blue-button']} />
-                    <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Pengalaman</Text>
-                  </Stack>
-                  <Text 
-                    fz={{ base: "1rem", md: "1.2rem" }} 
-                    ta="justify" 
-                    lh={1.6}
-                    dangerouslySetInnerHTML={{ __html: data.pengalaman }} 
-                    style={{wordBreak: "break-word", whiteSpace: "normal"}}
-                  />
+              <Stack gap={6}>
+                <Stack align="center" gap={6}>
+                  <IconBriefcase size={22} color={colors['blue-button']} />
+                  <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Pengalaman</Text>
                 </Stack>
-              </Tooltip>
+                <Text
+                  fz={{ base: "1rem", md: "1.2rem" }}
+                  ta="justify"
+                  lh={1.6}
+                  dangerouslySetInnerHTML={{ __html: data.pengalaman }}
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                />
+              </Stack>
             </Box>
           </Stack>
         </Paper>
       </SimpleGrid>
 
-      <Paper 
-        p="xl" 
-        bg={colors['white-trans-1']} 
-        w="100%" 
-        radius="xl" 
-        shadow="md" 
+      <Paper
+        p="xl"
+        bg={colors['white-trans-1']}
+        w="100%"
+        radius="xl"
+        shadow="md"
         withBorder
       >
         <Stack gap="xl">
@@ -145,27 +141,27 @@ function ProfilPerbekel() {
               <IconUsers size={22} color={colors['blue-button']} />
               <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Pengalaman Organisasi</Text>
             </Stack>
-            <Text 
-              fz={{ base: "1rem", md: "1.2rem" }} 
-              ta="justify" 
+            <Text
+              fz={{ base: "1rem", md: "1.2rem" }}
+              ta="justify"
               lh={1.6}
-              dangerouslySetInnerHTML={{ __html: data.pengalamanOrganisasi }} 
-              style={{wordBreak: "break-word", whiteSpace: "normal"}}
+              dangerouslySetInnerHTML={{ __html: data.pengalamanOrganisasi }}
+              style={{ wordBreak: "break-word", whiteSpace: "normal" }}
             />
           </Box>
 
           <Box>
-            <Stack align="center" gap={6}  mb={6}>
+            <Stack align="center" gap={6} mb={6}>
               <IconTargetArrow size={22} color={colors['blue-button']} />
               <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Program Kerja Unggulan</Text>
             </Stack>
             <Box px={10}>
-              <Text 
-                fz={{ base: "1rem", md: "1.2rem" }} 
-                ta="justify" 
+              <Text
+                fz={{ base: "1rem", md: "1.2rem" }}
+                ta="justify"
                 lh={1.6}
-                dangerouslySetInnerHTML={{ __html: data.programUnggulan }} 
-                style={{wordBreak: "break-word", whiteSpace: "normal"}}
+                dangerouslySetInnerHTML={{ __html: data.programUnggulan }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
               />
             </Box>
           </Box>

src/app/darmasaba/(pages)/desa/profile/ui/semuaPerbekel.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
-import { Box, Center, Image, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
+import { Box, Center, Image, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconUser } from '@tabler/icons-react';
 import { useProxy } from 'valtio/utils';
@@ -77,23 +77,17 @@ function SemuaPerbekel() {
                 </Box>
 
                 <Stack gap={4} align="center">
-                  <Tooltip label="Nama Perbekel" withArrow>
                     <Text fw={700} fz="lg" ta="center">
                       {v.nama}
                     </Text>
-                  </Tooltip>
 
-                  <Tooltip label="Wilayah menjabat" withArrow>
-                    <Text c="dimmed" fz="sm" ta="center">
+                  <Text c="dimmed" fz="sm" ta="center">
                       {v.daerah}
                     </Text>
-                  </Tooltip>
 
-                  <Tooltip label="Periode jabatan" withArrow>
-                    <Text c="blue" fw={600} fz="sm" ta="center">
+                  <Text c="blue" fw={600} fz="sm" ta="center">
                       {v.periode}
                     </Text>
-                  </Tooltip>
                 </Stack>
               </Stack>
             </Paper>

src/app/darmasaba/(pages)/ekonomi/PADesa-pendapatan-asli-desa/page.tsx

@@ -1,167 +1,3 @@
-// 'use client'
-// import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
-// import colors from '@/con/colors';
-// import { Box, Grid, GridCol, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core';
-// import { useProxy } from 'valtio/utils';
-// import BackButton from '../../desa/layanan/_com/BackButto';
-// import { useShallowEffect } from '@mantine/hooks';
-
-
-// function Page() {
-//   const state = useProxy(PendapatanAsliDesa.ApbDesa);
-
-//   useShallowEffect(() => {
-//     state.findMany.load();
-//   }, []);
-
-//   useShallowEffect(() => {
-//     PendapatanAsliDesa.pembiayaan.findMany.load();
-//     PendapatanAsliDesa.belanja.findMany.load();
-//     PendapatanAsliDesa.pendapatan.findMany.load();
-//   }, []);
-
-//   // Get the latest APB data
-//   const latestApb = state.findMany.data?.[0];
-
-//   // Calculate totals
-//   const totalPendapatan = latestApb?.pendapatan?.reduce((sum, item) => sum + (item?.value || 0), 0) || 0;
-//   const totalBelanja = latestApb?.belanja?.reduce((sum, item) => sum + (item?.value || 0), 0) || 0;
-//   const totalPembiayaan = latestApb?.pembiayaan?.reduce((sum, item) => sum + (item?.value || 0), 0) || 0;
-  
-
-//   return (
-//     <Stack pos="relative" bg={colors.Bg} py="xl" gap="lg">
-//       <Box px={{ base: 'md', md: 100 }}>
-//         <BackButton />
-//       </Box>
-//       <Text ta="center" fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
-//         Pendapatan Asli Desa
-//       </Text>
-//       <Box px={{ base: "md", md: 100 }}>
-//         <Stack gap="lg" justify="center">
-//           <Paper bg={colors['white-1']} p="xl">
-//             <SimpleGrid cols={{ base: 1, md: 3 }} spacing="md">
-//               {/* Pendapatan Card */}
-//               <Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
-//                 <Stack gap={"xs"}>
-//                   <Title order={3}>Pendapatan</Title>
-//                   {PendapatanAsliDesa.pendapatan.findMany.data?.map((item) => (
-//                     <Box key={item.id}>
-//                       <Grid>
-//                         <GridCol span={{ base: 12, md: 6 }}>
-//                           <Text fz="md" fw={500}>{item.name}</Text>
-//                         </GridCol>
-//                         <GridCol span={{ base: 12, md: 6 }}>
-//                           <Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
-//                             style: 'currency',
-//                             currency: 'IDR',
-//                             minimumFractionDigits: 0
-//                           }).format(item.value)}</Text>
-//                         </GridCol>
-//                       </Grid>
-//                     </Box>
-//                   ))}
-//                   <Grid>
-//                     <GridCol span={{ base: 12, md: 6 }}>
-//                       <Text fz="lg" fw={600} mb="xs">Total Pendapatan</Text>
-//                     </GridCol>
-//                     <GridCol span={{ base: 12, md: 6 }}>
-//                       <Text fz="xl" fw={700} c={colors['blue-button']}>
-//                         {new Intl.NumberFormat('id-ID', {
-//                           style: 'currency',
-//                           currency: 'IDR',
-//                           minimumFractionDigits: 0
-//                         }).format(totalPendapatan)}
-//                       </Text>
-//                     </GridCol>
-//                   </Grid>
-//                 </Stack>
-//               </Box>
-
-//               {/* Belanja Card */}
-//               <Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
-//                 <Stack gap={"xs"}>
-//                   <Title order={3}>Belanja</Title>
-//                   {PendapatanAsliDesa.belanja.findMany.data?.map((item) => (
-//                     <Box key={item.id}>
-//                       <Grid>
-//                         <GridCol span={{ base: 12, md: 6 }}>
-//                           <Text fz="md" fw={500}>{item.name}</Text>
-//                         </GridCol>
-//                         <GridCol span={{ base: 12, md: 6 }}>
-//                           <Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
-//                             style: 'currency',
-//                             currency: 'IDR',
-//                             minimumFractionDigits: 0
-//                           }).format(item.value)}</Text>
-//                         </GridCol>
-//                       </Grid>
-//                     </Box>
-//                   ))}
-//                   <Grid>
-//                     <GridCol span={{ base: 12, md: 6 }}>
-//                       <Text fz="lg" fw={600} mb="xs">Total Belanja</Text>
-//                     </GridCol>
-//                     <GridCol span={{ base: 12, md: 6 }}>
-//                       <Text fz="xl" fw={700} c="orange">
-//                         {new Intl.NumberFormat('id-ID', {
-//                           style: 'currency',
-//                           currency: 'IDR',
-//                           minimumFractionDigits: 0
-//                         }).format(totalBelanja)}
-//                       </Text>
-//                     </GridCol>
-//                   </Grid>
-//                 </Stack>
-//               </Box>
-
-//               {/* Pembiayaan Card */}
-//               <Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
-//                 <Stack gap={"xs"}>
-//                   <Title order={3}>Pembiayaan</Title>
-//                   {PendapatanAsliDesa.pembiayaan.findMany.data?.map((item) => (
-//                     <Box key={item.id}>
-//                       <Grid>
-//                         <GridCol span={{ base: 12, md: 6 }}>
-//                           <Text fz="md" fw={500}>{item.name}</Text>
-//                         </GridCol>
-//                         <GridCol span={{ base: 12, md: 6 }}>
-//                           <Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
-//                             style: 'currency',
-//                             currency: 'IDR',
-//                             minimumFractionDigits: 0
-//                           }).format(item.value)}</Text>
-//                         </GridCol>
-//                       </Grid>
-//                     </Box>
-//                   ))}
-//                   <Grid>
-//                     <GridCol span={{ base: 12, md: 6 }}>
-//                       <Text fz="lg" fw={600} mb="xs">Total Pembiayaan</Text>
-//                     </GridCol>
-//                     <GridCol span={{ base: 12, md: 6 }}>
-//                       <Text fz="xl" fw={700} c="green">
-//                         {new Intl.NumberFormat('id-ID', {
-//                           style: 'currency',
-//                           currency: 'IDR',
-//                           minimumFractionDigits: 0
-//                         }).format(totalPembiayaan)}
-//                       </Text>
-//                     </GridCol>
-//                   </Grid>
-//                 </Stack>
-//               </Box>
-              
-//             </SimpleGrid>
-//           </Paper>
-//         </Stack>
-//       </Box>
-//     </Stack>
-//   );
-// }
-
-// export default Page;
-
 'use client'
 import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
 import colors from '@/con/colors';
@@ -206,32 +42,41 @@ function Page() {
         <Stack gap="lg" justify="center">
           <Paper bg={colors['white-1']} p="xl">
             <SimpleGrid cols={{ base: 1, md: 3 }} spacing="md">
-             {/* Pendapatan Card */}
-             <Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
+              {/* Pendapatan Card */}
+              <Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
                 <Stack gap={"xs"}>
                   <Title order={3}>Pendapatan</Title>
-                  {PendapatanAsliDesa.pendapatan.findMany.data?.map((item) => (
+                  {latestApb?.pendapatan?.map((item) => (
                     <Box key={item.id}>
                       <Grid>
-                        <GridCol span={{ base: 12, md: 6 }}>
+                        <GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                           <Text fz="md" fw={500}>{item.name}</Text>
                         </GridCol>
-                        <GridCol span={{ base: 12, md: 6 }}>
-                          <Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
-                            style: 'currency',
-                            currency: 'IDR',
-                            minimumFractionDigits: 0
-                          }).format(item.value)}</Text>
+                        <GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                          <Text
+                            fz="md"
+                            fw={500}
+                            style={{
+                              wordBreak: 'break-word',
+                              whiteSpace: 'normal',
+                              textAlign: 'right',
+                            }}
+                          >
+                            {new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(item.value)}
+                          </Text>
                         </GridCol>
                       </Grid>
                     </Box>
                   ))}
                   <Grid>
-                    <GridCol span={{ base: 12, md: 6 }}>
+                    <GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                       <Text fz="lg" fw={600} mb="xs">Total Pendapatan</Text>
                     </GridCol>
-                    <GridCol span={{ base: 12, md: 6 }}>
-                      <Text fz="xl" fw={700} c={colors['blue-button']}>
+                    <GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                      <Text style={{
+                        wordBreak: 'break-word',
+                        whiteSpace: 'normal'
+                      }} fz="xl" fw={700} c={colors['blue-button']}>
                         {new Intl.NumberFormat('id-ID', {
                           style: 'currency',
                           currency: 'IDR',
@@ -247,18 +92,28 @@ function Page() {
               <Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
                 <Stack gap={"xs"}>
                   <Title order={3}>Belanja</Title>
-                  {PendapatanAsliDesa.belanja.findMany.data?.map((item) => (
+                  {latestApb?.belanja?.map((item) => (
                     <Box key={item.id}>
                       <Grid>
-                        <GridCol span={{ base: 12, md: 6 }}>
+                        <GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                           <Text fz="md" fw={500}>{item.name}</Text>
                         </GridCol>
-                        <GridCol span={{ base: 12, md: 6 }}>
-                          <Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
-                            style: 'currency',
-                            currency: 'IDR',
-                            minimumFractionDigits: 0
-                          }).format(item.value)}</Text>
+                        <GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                          <Text 
+                            fz="md" 
+                            fw={500}
+                            style={{
+                              wordBreak: 'break-word',
+                              whiteSpace: 'normal',
+                              textAlign: 'right',
+                            }}
+                          >
+                            {new Intl.NumberFormat('id-ID', {
+                              style: 'currency',
+                              currency: 'IDR',
+                              minimumFractionDigits: 0
+                            }).format(item.value)}
+                          </Text>
                         </GridCol>
                       </Grid>
                     </Box>
@@ -284,18 +139,28 @@ function Page() {
               <Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
                 <Stack gap={"xs"}>
                   <Title order={3}>Pembiayaan</Title>
-                  {PendapatanAsliDesa.pembiayaan.findMany.data?.map((item) => (
+                  {latestApb?.pembiayaan?.map((item) => (
                     <Box key={item.id}>
                       <Grid>
-                        <GridCol span={{ base: 12, md: 6 }}>
+                        <GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                           <Text fz="md" fw={500}>{item.name}</Text>
                         </GridCol>
-                        <GridCol span={{ base: 12, md: 6 }}>
-                          <Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
-                            style: 'currency',
-                            currency: 'IDR',
-                            minimumFractionDigits: 0
-                          }).format(item.value)}</Text>
+                        <GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                          <Text 
+                            fz="md" 
+                            fw={500}
+                            style={{
+                              wordBreak: 'break-word',
+                              whiteSpace: 'normal',
+                              textAlign: 'right',
+                            }}
+                          >
+                            {new Intl.NumberFormat('id-ID', {
+                              style: 'currency',
+                              currency: 'IDR',
+                              minimumFractionDigits: 0
+                            }).format(item.value)}
+                          </Text>
                         </GridCol>
                       </Grid>
                     </Box>
@@ -366,5 +231,4 @@ function Page() {
   );
 }
 
-export default Page;
-
+export default Page;

src/app/darmasaba/(pages)/ekonomi/demografi-pekerjaan/page.tsx

@@ -48,7 +48,7 @@ function Page() {
                 p={10}
                 mb={50}
                 h={400}
-                w={150}
+                w={Math.max(data.length * 120, 800)} // auto lebar sesuai jumlah data
                 data={data.map((item) => ({
                   id: item.id,
                   Pekerjaan: item.pekerjaan,

src/app/darmasaba/(pages)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/page.tsx

@@ -72,21 +72,21 @@ function Page() {
     )
   }
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
-      <Box px={{ base: 'md', md: 100 }}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="22" style={{ overflow: 'auto' }}>
+      <Box px={{ base: 'md', md: 50, lg: 100 }}>
         <BackButton />
       </Box>
-      <Box px={{ base: 'md', md: 100 }} >
+      <Box px={{ base: 'md', md: 50, lg: 100 }} >
         <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
           Jumlah Penduduk Usia Kerja Yang Menganggur
         </Text>
       </Box>
-      <Box px={{ base: "md", md: 100 }}>
+      <Box px={{ base: "md", md: 50, lg: 100 }}>
         <Stack gap={'lg'} justify='center'>
           <Paper p={'lg'}>
             <Text fw={'bold'} fz={'h3'}>Pengangguran Berdasarkan Usia</Text>
             {mounted && donutGrafikNganggurData.length > 0 ? (<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
-              <Box w="100%" style={{ maxWidth: 400, margin: "0 auto" }}>
+              <Box w="100%" maw={{ base: '100%', md: 400 }} mx="auto">
                 <PieChart
                   w="100%"
                   h={250} // lebih kecil biar aman di mobile
@@ -133,7 +133,7 @@ function Page() {
               <Box w="100%" style={{ maxWidth: 400, margin: "0 auto" }}>
                 <PieChart
                   w="100%"
-                  h={250} // lebih kecil biar aman di mobile
+                  h="min(250px, 50vh)" // lebih kecil biar aman di mobile
                   withLabelsLine
                   labelsPosition="outside"
                   labelsType="percent"

src/app/darmasaba/(pages)/ekonomi/jumlah-pengangguran/page.tsx

@@ -199,7 +199,7 @@ function Page() {
                     <TableTd ta={'center'}>{item.totalUnemployment}</TableTd>
                     <TableTd ta={'center'}>{item.educatedUnemployment}</TableTd>
                     <TableTd ta={'center'}>{item.uneducatedUnemployment}</TableTd>
-                    <TableTd ta={'center'}>{item.percentageChange}</TableTd>
+                    <TableTd ta={'center'}>{item.percentageChange}%</TableTd>
                   </TableTr>
                 ))}
               </TableTbody>

src/app/darmasaba/(pages)/ekonomi/lowongan-kerja-lokal/[id]/page.tsx

@@ -0,0 +1,136 @@
+'use client'
+
+import lowonganKerjaState from '@/app/admin/(dashboard)/_state/ekonomi/lowongan-kerja';
+import colors from '@/con/colors';
+import { Box, Button, Center, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconBrandWhatsapp, IconBriefcase, IconCurrencyDollar, IconMapPin, IconPhone } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function DetailLowonganKerjaUser() {
+  const state = useProxy(lowonganKerjaState);
+  const router = useRouter();
+  const params = useParams();
+  const [loading, setLoading] = useState(true);
+
+  useShallowEffect(() => {
+    const loadData = async () => {
+      await state.findUnique.load(params?.id as string);
+      setLoading(false);
+    };
+    loadData();
+  }, []);
+
+  const data = state.findUnique.data;
+
+  if (loading || !data) {
+    return (
+      <Center py="xl">
+        <Skeleton height={500} w={{ base: '90%', md: '70%' }} radius="lg" />
+      </Center>
+    );
+  }
+
+  return (
+    <Stack bg={colors.Bg} py="xl" px={{ base: 'md', md: 100 }} align="center">
+      <Box w={{ base: '100%', md: '70%' }}>
+          <Button
+            variant="subtle"
+            color="blue"
+            leftSection={<IconArrowBack size={20} />}
+            mb="md"
+            onClick={() => router.back()}
+          >
+            Kembali
+          </Button>
+
+        <Paper
+          radius="lg"
+          shadow="md"
+          withBorder
+          p="xl"
+          bg={colors['white-1']}
+        >
+          <Stack gap="lg">
+            {/* Judul */}
+            <Text fz={{ base: '1.6rem', md: '2rem' }} fw={700} c={colors['blue-button']}>
+              {data.posisi}
+            </Text>
+            <Text c="dimmed" fz="sm">
+              Diposting: {new Date(data.createdAt).toLocaleDateString('id-ID', {
+                day: '2-digit',
+                month: 'long',
+                year: 'numeric'
+              })}
+            </Text>
+
+            {/* Info Ringkas */}
+            <Stack gap="sm" mt="md">
+              <Group gap="xs">
+                <IconBriefcase size={20} color={colors['blue-button']} />
+                <Text fz="md" fw={600}>{data.namaPerusahaan}</Text>
+              </Group>
+              <Group gap="xs">
+                <IconMapPin size={20} color={colors['blue-button']} />
+                <Text fz="md">{data.lokasi}</Text>
+              </Group>
+              <Group gap="xs">
+                <IconPhone size={20} color={colors['blue-button']} />
+                <Text fz="md">{data.notelp}</Text>
+              </Group>
+              <Group gap="xs">
+                <IconCurrencyDollar size={20} color={colors['blue-button']} />
+                <Text fz="md">{data.gaji || '-'}</Text>
+              </Group>
+              <Group gap="xs">
+                <IconBriefcase size={20} color={colors['blue-button']} />
+                <Text fz="md">{data.tipePekerjaan}</Text>
+              </Group>
+            </Stack>
+
+            <Box>
+              <Text fw={600} fz="lg" mb={4}>
+                Deskripsi Pekerjaan
+              </Text>
+              <Text
+                fz="sm"
+                lh={1.6}
+                style={{ wordBreak: 'break-word' }}
+                dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
+              />
+            </Box>
+
+            <Box>
+              <Text fw={600} fz="lg" mb={4}>
+                Kualifikasi
+              </Text>
+              <Text
+                fz="sm"
+                lh={1.6}
+                style={{ wordBreak: 'break-word' }}
+                dangerouslySetInnerHTML={{ __html: data.kualifikasi || '-' }}
+              />
+            </Box>
+
+            <Center>
+              <Button
+                radius="md"
+                size="md"
+                mt="md"
+                bg={colors['blue-button']}
+                onClick={() => window.open(`https://wa.me/${data.notelp}`, '_blank')}
+                leftSection={<IconBrandWhatsapp size={20} />}
+              >
+                Hubungi Sekarang
+              </Button>
+            </Center>
+          </Stack>
+        </Paper>
+      </Box>
+    </Stack>
+  );
+}
+
+export default DetailLowonganKerjaUser;

src/app/darmasaba/(pages)/ekonomi/lowongan-kerja-lokal/page.tsx

@@ -12,13 +12,13 @@ import BackButton from '../../desa/layanan/_com/BackButto';
 const formatCurrency = (value: string | number) => {
   // Convert to string if it's a number
   const numStr = typeof value === 'number' ? value.toString() : value;
-  
+
   // Remove all non-digit characters
   const digitsOnly = numStr.replace(/\D/g, '');
-  
+
   // Format with thousand separators
   const formatted = digitsOnly.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
-  
+
   return `Rp.${formatted}`;
 };
 
@@ -103,7 +103,7 @@ function Page() {
                         </Box>
                       </Flex>
                     </Box>
-                    <Button onClick={() => router.push(`https://wa.me/${v.notelp?.replace(/\D/g, '')}`)}>Lamar Sekarang</Button>
+                    <Button onClick={() => router.push(`/darmasaba/ekonomi/lowongan-kerja-lokal/${v.id}`)}>Detail</Button>
                   </Stack>
                 </Paper>
               )

src/app/darmasaba/(pages)/ekonomi/pasar-desa/[id]/page.tsx

@@ -0,0 +1,157 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, Image, Skeleton, Group, Badge, Divider } from '@mantine/core';
+import { IconArrowBack, IconMapPin, IconPhone, IconStar } from '@tabler/icons-react';
+import { useRouter, useParams } from 'next/navigation';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import { useShallowEffect } from '@mantine/hooks';
+import pasarDesaState from '@/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa';
+
+function DetailProdukPasarUser() {
+  const router = useRouter();
+  const params = useParams();
+  const statePasar = useProxy(pasarDesaState);
+
+  useShallowEffect(() => {
+    statePasar.pasarDesa.findUnique.load(params?.id as string);
+  }, []);
+
+  const data = statePasar.pasarDesa.findUnique.data;
+
+  if (!data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={400} radius="md" />
+      </Stack>
+    );
+  }
+
+  return (
+    <Box py={20}>
+      {/* Tombol kembali */}
+      <Box px={{ base: 'md', md: 100 }}>
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={20} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali ke daftar produk
+      </Button>
+      </Box>
+
+      <Paper
+        w={{ base: '100%', md: '70%' }}
+        mx="auto"
+        p="lg"
+        radius="md"
+        shadow="sm"
+        bg={colors['white-1']}
+      >
+        <Stack gap="lg">
+          {/* Gambar Produk */}
+          {data.image?.link ? (
+            <Image
+              src={data.image.link}
+              alt={data.nama}
+              radius="md"
+              h={250}
+              w="100%"
+              fit="cover"
+              loading="lazy"
+            />
+          ) : (
+            <Box
+              h={300}
+              bg="gray.1"
+              display="flex"
+              style={{ alignItems: 'center', justifyContent: 'center', borderRadius: 'md' }}
+            >
+              <Text c="dimmed">Tidak ada gambar</Text>
+            </Box>
+          )}
+
+          {/* Detail Produk */}
+          <Stack gap="xs">
+            <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+              {data.nama || 'Produk Tanpa Nama'}
+            </Text>
+            <Group>
+              <Badge color="green" size="lg" radius="md">
+                Rp {data.harga?.toLocaleString('id-ID')}
+              </Badge>
+              {data.rating && (
+                <Group gap={4}>
+                  <IconStar size={18} color="#FFD43B" />
+                  <Text fz="md" fw={500}>{data.rating}</Text>
+                </Group>
+              )}
+            </Group>
+          </Stack>
+
+          <Divider my="sm" />
+
+          {/* Info Tambahan */}
+          <Stack gap="sm">
+            <Box>
+              <Text fz="lg" fw={600}>Kategori</Text>
+              <Group gap="xs" mt={4}>
+                {data.KategoriToPasar && data.KategoriToPasar.length > 0 ? (
+                  data.KategoriToPasar.map((kategori) => (
+                    <Badge key={kategori.id} color="blue" variant="light">
+                      {kategori.kategori.nama}
+                    </Badge>
+                  ))
+                ) : (
+                  <Text fz="sm" c="dimmed">Tidak ada kategori</Text>
+                )}
+              </Group>
+            </Box>
+
+            {data.alamatUsaha && (
+              <Group gap={6}>
+                <IconMapPin size={18} color={colors['blue-button']} />
+                <Text fz="md">{data.alamatUsaha}</Text>
+              </Group>
+            )}
+
+            {data.kontak && (
+              <Group gap={6}>
+                <IconPhone size={18} color={colors['blue-button']} />
+                <Text fz="md">{data.kontak}</Text>
+              </Group>
+            )}
+          </Stack>
+
+          <Divider my="sm" />
+
+          {/* Deskripsi */}
+          <Box>
+            <Text fz="lg" fw={600}>Deskripsi Produk</Text>
+            <Text fz="md" c="dimmed" mt={4}>
+              Tidak ada deskripsi.
+            </Text>
+          </Box>
+
+          {/* Tombol Aksi User */}
+          {data.kontak && (
+            <Button
+              mt="md"
+              color="green"
+              size="lg"
+              radius="md"
+              component="a"
+              href={`https://wa.me/${data.kontak.replace(/[^0-9]/g, '')}`}
+              target="_blank"
+            >
+              Hubungi Penjual via WhatsApp
+            </Button>
+          )}
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default DetailProdukPasarUser;

src/app/darmasaba/(pages)/ekonomi/pasar-desa/page.tsx

@@ -71,8 +71,11 @@ function Page() {
             />
           </GridCol>
         </Grid>
-        <Text px={{ base: 'md', md: 100 }} ta={"justify"} fz={{ base: "h4", md: "h3" }} >
-          Pasar Desa Online merupakan Media Promosi yang bertujuan untuk membantu warga desa dalam memasarkan dan memperkenalkan produknya kepada masyarakat.
+        <Text px={{ base: 'md', md: 100 }} ta={"justify"} fz="md" >
+        Pasar Desa Online adalah media promosi untuk membantu warga memasarkan
+        </Text>
+        <Text px={{ base: 'md', md: 100 }} ta={"justify"} fz="md" >
+        dan memperkenalkan produk mereka.
         </Text>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
@@ -105,7 +108,7 @@ function Page() {
               return (
                 <Stack key={k}>
                   <motion.div
-                    onClick={() => router.push(`https://wa.me/${v.kontak?.replace(/\D/g, '')}`)}
+                    onClick={() => router.push(`/darmasaba/ekonomi/pasar-desa/${v.id}`)}
                     whileHover={{ scale: 1.05 }}
                     whileTap={{ scale: 0.8 }}
                   >
@@ -117,7 +120,7 @@ function Page() {
                         h={200}
                         w='100%'
                         style={{ objectFit: 'cover' }}
-                        loading="lazy"
+                        loading="lazy" 
                       />
                       <Text py={10} fw={'bold'} fz={'lg'}>{v.nama}</Text>
                       <Text fz={'md'}>Rp {v.harga.toLocaleString('id-ID')}</Text>

src/app/darmasaba/(pages)/ekonomi/sektor-unggulan-desa/page.tsx

@@ -28,6 +28,32 @@ function Page() {
     )
   }
 
+  // Add this check before the return statement
+  if (data.length === 0) {
+    return (
+      <Stack pos="relative" bg={colors.Bg} py="xl" gap={22}>
+        <Box px={{ base: 'md', md: 100 }}>
+          <BackButton />
+          <Text fz={{ base: 'h1', md: '2.5rem' }} c={colors['blue-button']} fw="bold">
+            Sektor Unggulan Desa Darmasaba
+          </Text>
+          <Text c="dimmed" mt="md">
+            Data sektor unggulan belum tersedia
+          </Text>
+        </Box>
+      </Stack>
+    );
+  }
+
+  const chartData = data
+    .filter(item => item?.name && typeof item.value === 'number')
+    .map((item) => ({
+      id: item.id,
+      sektor: item.name,
+      Ton: item.value,
+    }));
+
+
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
@@ -45,27 +71,34 @@ function Page() {
             return (
               <Paper p={'xl'} key={k}>
                 <Text fw={'bold'} fz={'h4'}>{v.name}</Text>
-                <Text fz={'h4'} ta={'justify'} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: v.description || '' }} />
+                <Text fz={'h4'} ta={'justify'} style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: v.description || '' }} />
               </Paper>
             )
           })}
-          <Paper p={'xl'}>
-            <Text pb={10} fw={'bold'} fz={'h4'}>Statistik Sektor Unggulan Darmasaba</Text>
-            <BarChart
-              p={10}
-              h={300}
-              data={data.map((item) => ({
-                id: item.id,
-                sektor: item.name,
-                Ton: item.value,
-              }))}
-              dataKey="sektor"
-              series={[
-                { name: 'Ton', color: colors['blue-button'] },
-              ]}
-              tickLine="y"
-            />
-          </Paper>
+          <Box style={{ width: '100%', overflowX: 'auto' }}>
+            <Paper p="xl">
+              <Text pb={10} fw="bold" fz="h4">Statistik Sektor Unggulan Darmasaba</Text>
+              <Box style={{ width: '100%', minWidth: '600px' }}>
+                <BarChart
+                  p={10}
+                  h={300}
+                  data={chartData}
+                  dataKey="sektor"
+                  series={[
+                    { name: 'Ton', color: colors['blue-button'] },
+                  ]}
+                  tickLine="y"
+                  tooltipAnimationDuration={200}
+                  withTooltip
+                  style={{
+                    fontFamily: 'inherit',
+                  }}
+                  xAxisLabel="Sektor"
+                  yAxisLabel="Ton"
+                />
+              </Box>
+            </Paper>
+          </Box>
         </Stack>
       </Box>
     </Stack>

src/app/darmasaba/(pages)/inovasi/desa-digital-smart-village/page.tsx

@@ -56,7 +56,8 @@ function Page() {
             />
           </GridCol>
         </Grid>
-        <Text fz={'h4'}>Mewujudkan Desa Darmasaba sebagai pusat inovasi digital yang memberdayakan masyarakat, meningkatkan kesejahteraan, dan menciptakan peluang ekonomi berbasis teknologi.</Text>
+        <Text fz={'md'}>Menjadikan Desa Darmasaba pusat inovasi digital untuk pemberdayaan masyarakat</Text>
+        <Text fz={'md'}>dan peningkatan ekonomi berbasis teknologi.</Text>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'} justify='center'>

src/app/darmasaba/(pages)/inovasi/program-kreatif-desa/page.tsx

@@ -1,14 +1,14 @@
 'use client'
+import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';
 import programKreatifState from '@/app/admin/(dashboard)/_state/inovasi/program-kreatif';
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { Box, Button, Center, Grid, GridCol, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { IconSearch } from '@tabler/icons-react';
 import { useTransitionRouter } from 'next-view-transitions';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
-import { IconSearch } from '@tabler/icons-react';
-import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';
 
 // const data = [
 //   {
@@ -75,17 +75,23 @@ function Page() {
         <BackButton />
       </Box>
       <Box px={{ base: 'md', md: 100 }} >
-        <Group justify="space-between" mb="md" align='center'>
-          <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-            Program Kreatif Desa
-          </Text>
-          <TextInput
-            placeholder="Cari program kreatif..."
-            leftSection={<IconSearch size={20} />}
-            value={search}
-            onChange={(e) => setSearch(e.currentTarget.value)}
-          />
-        </Group>
+        <Grid align='center'>
+          <GridCol span={{ base: 12, md: 9 }}>
+            <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+              Program Kreatif Desa
+            </Text>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 3 }}>
+            <TextInput
+              radius={"lg"}
+              placeholder='Cari Program Kreatif'
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              leftSection={<IconSearch size={20} />}
+              w={{ base: "50%", md: "100%" }}
+            />
+          </GridCol>
+        </Grid>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'} justify='center'>

src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx

@@ -64,8 +64,8 @@ function Page() {
             />
           </GridCol>
         </Grid>
-        <Text px={{ base: 'md', md: 100 }} ta={"justify"} 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 px={{ base: 'md', md: 100 }} ta={"justify"} fz="md" mt={4} >
+        Pecalang dan Patwal (Patroli Pengawal) bertugas memastikan desa tetap aman, tertib, dan kondusif bagi seluruh warga.
         </Text>
       </Box>
       <Box px={{ base: "md", md: 100 }}>

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

@@ -50,10 +50,12 @@ function Page() {
             </Text>
           </Box>
           <TextInput
-            placeholder='Cari kontak darurat, nama, atau nomor...'
-            leftSection={<IconSearch size={20} />}
+            radius={"lg"}
+            placeholder='Cari Kontak Darurat'
             value={search}
-            onChange={(e) => setSearch(e.currentTarget.value)}
+            onChange={(e) => setSearch(e.target.value)}
+            leftSection={<IconSearch size={20} />}
+            w={{ base: "100%", md: "25%" }}
           />
         </Group>
         <Box px={{ base: "md", md: 100 }}>
@@ -95,10 +97,12 @@ function Page() {
           </Text>
         </Box>
         <TextInput
-          placeholder='Cari kontak darurat, nama, atau nomor...'
-          leftSection={<IconSearch size={20} />}
+          radius={"lg"}
+          placeholder='Cari Kontak Darurat'
           value={search}
-          onChange={(e) => setSearch(e.currentTarget.value)}
+          onChange={(e) => setSearch(e.target.value)}
+          leftSection={<IconSearch size={20} />}
+          w={{ base: "50%", md: "100%" }}
         />
       </Group>
       <Box px={{ base: "md", md: 100 }}>

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

@@ -1,15 +1,15 @@
 'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import laporanPublikState from '@/app/admin/(dashboard)/_state/keamanan/laporan-publik';
 import colors from '@/con/colors';
-import { Box, Button, Center, ColorSwatch, Flex, Group, Modal, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Center, ColorSwatch, Flex, Group, Modal, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { DateTimePicker } from '@mantine/dates';
 import { useDebouncedValue, useDisclosure, useShallowEffect } from '@mantine/hooks';
-import { IconArrowRight, IconPlus } from '@tabler/icons-react';
+import { IconArrowRight, IconPlus, IconSearch } from '@tabler/icons-react';
+import { useTransitionRouter } from 'next-view-transitions';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
-import { useTransitionRouter } from 'next-view-transitions';
-import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 
 function Page() {
   const [search, setSearch] = useState("");
@@ -53,14 +53,17 @@ function Page() {
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
-        <Flex justify="space-between" align="center">
+        <Group justify="space-between" align="center">
           <BackButton />
           <TextInput
-            placeholder="Cari laporan"
-            value={search}
-            onChange={(e) => setSearch(e.currentTarget.value)}
-          />
-        </Flex>
+              radius={"lg"}
+              placeholder='Cari Laporan Publik'
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              leftSection={<IconSearch size={20} />}
+              w={{ base: "100%", md: "30%" }}
+            />
+        </Group>
       </Box>
       <Box px={{ base: 'md', md: 100 }}>
         <Group justify="space-between">
@@ -115,7 +118,7 @@ function Page() {
               return (
                 <Paper radius={'lg'} key={k} bg={colors['white-trans-1']} p={'xl'}>
                   <Stack>
-                    <Title c={colors['blue-button']} order={1}>{v.judul}</Title>
+                    <Text c={colors['blue-button']} lineClamp={3} truncate="end" fz="h4" fw="bold">{v.judul}</Text>
                     <Text fs={'italic'} fz={'xl'}>
                       {v.tanggalWaktu
                         ? new Date(v.tanggalWaktu).toLocaleString('id-ID')

src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/[id]/page.tsx

@@ -45,7 +45,7 @@ function DetailPencegahanKriminalitas() {
   const data = kriminalitasState.findUnique.data;
 
   return (
-    <Box py="md" px="md">
+    <Box py="md" px={{ base: 'md', md: 100 }}>
       <Group mb="md">
         <Button
           variant="light"

src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/page.tsx

@@ -41,13 +41,44 @@ function Page() {
     )
   }
 
+  if (data.length === 0) {
+    return (
+      <Stack pos="relative" bg={colors.Bg} py="xl" gap={22}>
+        <Box px={{ base: 'md', md: 100 }}>
+          <Text fz={{ base: 'h1', md: '2.5rem' }} c={colors['blue-button']} fw="bold">
+            Pencegahan Kriminalitas
+          </Text>
+          <Text fz='md'>
+            Keamanan Komunitas & Pencegahan Kriminal
+          </Text>
+        </Box>
+        <SimpleGrid
+          px={{ base: 20, md: 100 }}
+          cols={{ base: 1, md: 2 }}
+          spacing="xl"
+        >
+          <Paper p="xl" radius="xl" shadow="lg" >
+            <Text fz={{ base: 'h3', md: 'h2' }} c={colors['blue-button']} fw="bold">
+              Program Keamanan Berjalan
+            </Text>
+            <Stack pt={30} gap="lg">
+              <Text c="dimmed">
+                Tidak ada data pencegahan kriminalitas yang cocok
+              </Text>
+            </Stack>
+          </Paper>
+        </SimpleGrid>
+      </Stack>
+    )
+  }
+
   return (
     <Stack pos="relative" bg={colors.Bg} py="xl" gap={22}>
       <Box px={{ base: 'md', md: 100 }}>
         <Text fz={{ base: 'h1', md: '2.5rem' }} c={colors['blue-button']} fw="bold">
           Pencegahan Kriminalitas
         </Text>
-        <Text c={colors['blue-button']} fz={{ base: 'h4', md: 'h3' }}>
+        <Text fz='md'>
           Keamanan Komunitas & Pencegahan Kriminal
         </Text>
       </Box>
@@ -61,31 +92,63 @@ function Page() {
             Program Keamanan Berjalan
           </Text>
           <Stack pt={30} gap="lg">
-            {data.length > 0 ? (
-              data.map((item) => (
-                <a key={item.id} href={`/darmasaba/keamanan/pencegahan-kriminalitas/${item.id}`}>
-                  <Paper p="md" bg={colors['blue-button']} radius="md" shadow="sm">
-                    <Stack gap={"xs"}>
+            <Box
+              style={{
+                minHeight: 300, // sesuaikan: tinggi area yg muat 3 item
+              }}
+            >
+              {data.length > 0 ? (
+                data.map((item) => (
+                  <Paper
+                    key={item.id}
+                    p="md"
+                    radius="md"
+                    shadow="sm"
+                    style={{
+                      cursor: 'pointer',
+                      backgroundColor: colors['blue-button'],
+                      transition: 'all 0.2s ease',
+                    }}
+                    onClick={() =>
+                      router.push(`/darmasaba/keamanan/pencegahan-kriminalitas/${item.id}`)
+                    }
+                    onMouseEnter={(e) =>
+                      (e.currentTarget.style.backgroundColor = '#1a3e7a')
+                    }
+                    onMouseLeave={(e) =>
+                      (e.currentTarget.style.backgroundColor = colors['blue-button'])
+                    }
+                  >
+                    <Stack gap="xs">
                       <Text fz="h3" c={colors['white-1']}>
                         {item.judul}
                       </Text>
                     </Stack>
                   </Paper>
-                </a>
-              ))
-            ) : (
-              <Text color="dimmed">
-                Tidak ada data pencegahan kriminalitas yang cocok
-              </Text>
-            )}
+                ))
+              ) : (
+                <Text c="dimmed">Tidak ada data pencegahan kriminalitas yang cocok</Text>
+              )}
+            </Box>
             <Button
               mt={20}
               fullWidth
               radius="xl"
               size="md"
-              bg={colors['blue-button']}
-              rightSection={<IconArrowRight size={20} color={colors['white-1']} />}
-              onClick={() => router.push(`/darmasaba/keamanan/pencegahan-kriminalitas/program-lainnya`)}
+              variant="outline"
+              color="blue"
+              rightSection={<IconArrowRight size={20} />}
+              styles={{
+                root: {
+                  fontWeight: 600,
+                  borderWidth: 2,
+                },
+              }}
+              onClick={() =>
+                router.push(
+                  `/darmasaba/keamanan/pencegahan-kriminalitas/program-lainnya`
+                )
+              }
             >
               Jelajahi Program Lainnya
             </Button>
@@ -111,9 +174,7 @@ function Page() {
               <Text py={10} fz={{ base: 'h3', md: 'h2' }} fw="bold" c={colors['blue-button']}>
                 {findFirst.data?.judul}
               </Text>
-              <Text fz="h4" c={colors['blue-button']}>
-                {findFirst.data?.deskripsiSingkat}
-              </Text>
+              <Text fz="h4" dangerouslySetInnerHTML={{ __html: findFirst.data?.deskripsiSingkat }} />
             </Paper>
           ) : null}
         </Box>

src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/program-lainnya/page.tsx

@@ -21,12 +21,23 @@ import pencegahanKriminalitasState from '@/app/admin/(dashboard)/_state/keamanan
 import { useShallowEffect } from '@mantine/hooks';
 import { useState } from 'react';
 import HeaderSearch from '@/app/admin/(dashboard)/_com/header';
+import { IconArrowLeft } from '@tabler/icons-react';
 
 function PencegahanKriminalitas() {
   const [search, setSearch] = useState("");
-
+  const router = useRouter();
   return (
-    <Box>
+    <Box pt={20} px={{ base: 'md', md: 100 }}>
+      <Group mb="md">
+        <Button
+          variant="light"
+          color="blue"
+          onClick={() => router.back()}
+          leftSection={<IconArrowLeft size={20} />}
+        >
+          Kembali
+        </Button>
+      </Group>
       <HeaderSearch
         title="Program Pencegahan Kriminalitas"
         placeholder="Cari program atau deskripsi..."
@@ -82,7 +93,7 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
                   c="dimmed"
                   lineClamp={2}
                   dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat || '' }}
-                  style={{wordBreak: "break-word", whiteSpace: "normal"}}
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                 />
                 <Group justify="flex-end" mt="sm">
                   <Tooltip label="Lihat detail program" withArrow>

src/app/darmasaba/(pages)/keamanan/polsek-terdekat/page.tsx

@@ -43,7 +43,7 @@ function Page() {
         <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
           Kantor Polisi Terdekat
         </Text>
-        <Text pb={15} fz={'h4'} >
+        <Text pb={15} fz={'md'} >
           Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung
         </Text>
       </Box>

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

@@ -78,15 +78,12 @@ function Page() {
                   <Box>
                     <Text fz="h4" fw="bold">Pendahuluan</Text>
                     <Divider my="xs" />
-                    <Text fz="md" lh={1.6} ta="justify">
-                      {state.findUnique.data.introduction?.content}
-                    </Text>
+                    <Text fz="md" lh={1.6} ta="justify" dangerouslySetInnerHTML={{ __html: state.findUnique.data.introduction?.content }} />
                   </Box>
 
                   <Box>
-                    <Text fz="h4" fw="bold">Kenali Gejala DBD</Text>
+                    <Text fz="h4" fw="bold">{state.findUnique.data.symptom?.title}</Text>
                     <Divider my="xs" />
-                    <Text fz="md" fw="semibold">{state.findUnique.data.symptom?.title}</Text>
                     <Text fz="md" lh={1.6} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: state.findUnique.data.symptom?.content }} />
                   </Box>
 

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

@@ -1,7 +1,7 @@
 'use client'
 import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
 import colors from '@/con/colors';
-import { Anchor, Box, Card, Divider, Group, Image, Loader, Paper, Stack, Text, Title, Tooltip } from '@mantine/core';
+import { Box, Button, Card, Divider, Group, Image, Loader, Paper, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCalendar, IconChevronRight } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -28,9 +28,9 @@ function ArtikelKesehatanPage() {
     <Box>
       <Paper p="xl" bg={colors['white-trans-1']} radius="xl" shadow="md">
         <Stack gap="lg">
-          <Title order={2} ta="center" c={colors['blue-button']}>
+          <Text ta="center" fw={700} fz="32px" c={colors['blue-button']}>
             Artikel Kesehatan
-          </Title>
+          </Text>
           <Divider size="sm" color={colors['blue-button']} />
           {state.findMany.data.length === 0 ? (
             <Box py="xl" ta="center">
@@ -51,7 +51,7 @@ function ArtikelKesehatanPage() {
                 onMouseLeave={(e) => (e.currentTarget.style.transform = 'translateY(0)')}
               >
                 <Card.Section>
-                  <Image src={item.image?.link} alt={item.title} height={200} fit="cover" loading="lazy"/>
+                  <Image style={{ borderTopLeftRadius: '10px', borderTopRightRadius: '10px' }} src={item.image?.link} alt={item.title} height={200} fit="cover" loading="lazy" />
                 </Card.Section>
                 <Stack gap="xs" mt="md">
                   <Text fw="bold" fz="xl" c="dark">{item.title}</Text>
@@ -64,18 +64,17 @@ function ArtikelKesehatanPage() {
                   <Text fz="md" c="dark" lineClamp={3}>
                     {item.content}
                   </Text>
-                  <Tooltip label="Baca artikel lengkap">
-                    <Anchor
+                  <Group justify="flex-start">
+                    <Button
+                      bg={colors['blue-button']}
+                      radius="lg"
+                      size="sm"
+                      rightSection={<IconChevronRight size={18} />}
                       onClick={() => router.push(`/darmasaba/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/${item.id}`)}
-                      variant="light"
-                      c={colors['blue-button']}
                     >
-                      <Group gap="xs">
-                        <Text fw="bold" fz="md">Baca Selengkapnya</Text>
-                        <IconChevronRight size={18} />
-                      </Group>
-                    </Anchor>
-                  </Tooltip>
+                      Baca Selengkapnya
+                    </Button>
+                  </Group>
                 </Stack>
               </Card>
             ))

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

@@ -3,9 +3,9 @@
 import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
 import colors from '@/con/colors';
-import { ActionIcon, Anchor, AspectRatio, Badge, Box, Button, Card, Chip, CopyButton, Divider, Grid, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, ThemeIcon, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, AspectRatio, Badge, Box, Button, Card, CopyButton, Divider, Grid, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, ThemeIcon, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconBrandWhatsapp, IconCheck, IconCopy, IconDeviceLandlinePhone, IconHeart, IconInfoCircle, IconMail, IconMapPin, IconMoodEmpty, IconSearch, IconStethoscope, IconUser, IconUsersGroup, IconWallet } from '@tabler/icons-react';
+import { IconBrandWhatsapp, IconCheck, IconCopy, IconDeviceLandlinePhone, IconHeart, IconInfoCircle, IconMail, IconMapPin, IconMoodEmpty, IconSearch, IconUser } from '@tabler/icons-react';
 import { useParams } from 'next/navigation';
 import { useMemo } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -149,11 +149,6 @@ function Page() {
                 </CopyButton>
               </Group>
             </Group>
-            <Group gap="xs" mt="sm" wrap="wrap">
-              <Chip defaultChecked radius="xl" variant="light" icon={<IconStethoscope size={16} />}>Layanan Medis</Chip>
-              <Chip radius="xl" variant="light" icon={<IconUsersGroup size={16} />}>Ramah Keluarga</Chip>
-              <Chip radius="xl" variant="light" icon={<IconWallet size={16} />}>Pembayaran Non-Tunai</Chip>
-            </Group>
           </Stack>
         </Card>
       </Box>
@@ -210,7 +205,6 @@ function Page() {
                     <Button variant="light" leftSection={<IconBrandWhatsapp size={18} />} component="a" href={`https://wa.me/${kontak.whatsapp.replace(/\D/g, '')}`} target="_blank" aria-label="Hubungi WhatsApp">WhatsApp</Button>
                     <Button variant="light" leftSection={<IconMail size={18} />} component="a" href={`mailto:${kontak.email}`} aria-label="Kirim Email">Email</Button>
                   </Group>
-                  <Anchor target="_blank" underline="hover">Kunjungi situs resmi</Anchor>
                 </Stack>
               </Card>
 
@@ -246,15 +240,8 @@ function Page() {
                   </Table>
                 </Stack>
               </Card>
-            </Stack>
-          </Grid.Col>
-        </Grid>
-      </Box>
 
-      <Box px={{ base: 'md', md: 100 }}>
-        <Grid gutter="lg">
-          <Grid.Col span={{ base: 12, md: 8 }}>
-            <Card radius="xl" p="lg" withBorder>
+             <Card radius="xl" p="lg" withBorder>
               <Stack gap="md">
                 <Title order={3}>Fasilitas Pendukung</Title>
                 <Divider />
@@ -270,8 +257,7 @@ function Page() {
                 )}
               </Stack>
             </Card>
-          </Grid.Col>
-          <Grid.Col span={{ base: 12, md: 4 }}>
+
             <Card radius="xl" p="lg" withBorder>
               <Stack gap="md">
                 <Title order={3}>Layanan & Tarif</Title>
@@ -309,10 +295,11 @@ function Page() {
                 )}
               </Stack>
             </Card>
+            </Stack>
           </Grid.Col>
         </Grid>
       </Box>
-
+      
       <Box px={{ base: 'md', md: 100 }} pb="xl">
         <Paper radius="xl" p="lg" withBorder>
           <Stack gap="md">

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

@@ -1,11 +1,11 @@
 'use client'
 import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 import colors from '@/con/colors';
-import { Anchor, Badge, Box, Card, Divider, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Badge, Box, Button, Card, Divider, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconChevronRight, IconClock, IconMapPin } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
-import { IconMapPin, IconClock, IconArrowRight } from '@tabler/icons-react';
 
 function FasilitasKesehatanPage() {
   const state = useProxy(fasilitasKesehatanState.fasilitasKesehatan);
@@ -36,72 +36,73 @@ function FasilitasKesehatanPage() {
           </Text>
           <Divider size="sm" color={colors['blue-button']} />
           <Stack gap="lg">
-          {state.findMany.data.length === 0 ? (
-            <Box py="xl" ta="center">
-              <Text fz="lg" c="dimmed">
-                Belum ada fasilitas kesehatan yang tersedia
-              </Text>
-            </Box>
-          ) : (
-            state.findMany.data.map((item) => (
-              <Card
-                key={item.id}
-                withBorder
-                radius="xl"
-                shadow="sm"
-                p="lg"
-                style={{
-                  background: 'linear-gradient(135deg, #fdfdfd, #f7faff)',
-                  transition: 'transform 0.2s ease, box-shadow 0.2s ease',
-                }}
-                onMouseEnter={(e) => {
-                  (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
-                  (e.currentTarget as HTMLElement).style.boxShadow = '0 8px 20px rgba(0,0,0,0.08)';
-                }}
-                onMouseLeave={(e) => {
-                  (e.currentTarget as HTMLElement).style.transform = 'translateY(0px)';
-                  (e.currentTarget as HTMLElement).style.boxShadow = '0 4px 12px rgba(0,0,0,0.05)';
-                }}
-              >
-                <Stack gap="sm">
-                  <Group justify="space-between" align="center">
-                    <Text fw={700} fz="lg" c={colors['blue-button']}>
-                      {item.name}
-                    </Text>
-                    <Badge color="blue" radius="sm" variant="light" fz="xs">
-                      Aktif
-                    </Badge>
-                  </Group>
-                  <Group gap="xs">
-                    <IconMapPin size={18} stroke={1.5} color={colors['blue-button']} />
-                    <Text fz="sm" c="dimmed">
-                      {item.informasiumum.alamat}
-                    </Text>
-                  </Group>
-                  <Group gap="xs">
-                    <IconClock size={18} stroke={1.5} color={colors['blue-button']} />
-                    <Text fz="sm" c="dimmed">
-                      {item.informasiumum.jamOperasional}
-                    </Text>
-                  </Group>
-                  <Anchor
-                    onClick={() =>
-                      router.push(
-                        `/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/${item.id}`
-                      )
-                    }
-                    c={colors['blue-button']}
-                    fz="sm"
-                    fw={600}
-                    style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}
-                  >
-                    Lihat Detail
-                    <IconArrowRight size={16} stroke={1.5} />
-                  </Anchor>
-                </Stack>
-              </Card>
-            ))
-          )}
+            {state.findMany.data.length === 0 ? (
+              <Box py="xl" ta="center">
+                <Text fz="lg" c="dimmed">
+                  Belum ada fasilitas kesehatan yang tersedia
+                </Text>
+              </Box>
+            ) : (
+              state.findMany.data.map((item) => (
+                <Card
+                  key={item.id}
+                  withBorder
+                  radius="xl"
+                  shadow="sm"
+                  p="lg"
+                  style={{
+                    background: 'linear-gradient(135deg, #fdfdfd, #f7faff)',
+                    transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+                  }}
+                  onMouseEnter={(e) => {
+                    (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
+                    (e.currentTarget as HTMLElement).style.boxShadow = '0 8px 20px rgba(0,0,0,0.08)';
+                  }}
+                  onMouseLeave={(e) => {
+                    (e.currentTarget as HTMLElement).style.transform = 'translateY(0px)';
+                    (e.currentTarget as HTMLElement).style.boxShadow = '0 4px 12px rgba(0,0,0,0.05)';
+                  }}
+                >
+                  <Stack gap="sm">
+                    <Group justify="space-between" align="center">
+                      <Text fw={700} fz="lg" c={colors['blue-button']}>
+                        {item.name}
+                      </Text>
+                      <Badge color="blue" radius="sm" variant="light" fz="xs">
+                        Aktif
+                      </Badge>
+                    </Group>
+                    <Group gap="xs">
+                      <IconMapPin size={18} stroke={1.5} color={colors['blue-button']} />
+                      <Text fz="sm" c="dimmed">
+                        {item.informasiumum.alamat}
+                      </Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconClock size={18} stroke={1.5} color={colors['blue-button']} />
+                      <Text fz="sm" c="dimmed">
+                        {item.informasiumum.jamOperasional}
+                      </Text>
+                    </Group>
+                    <Group justify="flex-start">
+                      <Button
+                        bg={colors['blue-button']}
+                        radius="lg"
+                        size="sm"
+                        rightSection={<IconChevronRight size={18} />}
+                        onClick={() =>
+                          router.push(
+                            `/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/${item.id}`
+                          )
+                        }
+                      >
+                        Lihat Detail
+                      </Button>
+                    </Group>
+                  </Stack>
+                </Card>
+              ))
+            )}
           </Stack>
         </Stack>
       </Paper>

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

@@ -4,14 +4,16 @@ import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
 import colors from '@/con/colors';
 import {
   Box,
+  Button,
   Divider,
   Group,
+  Modal,
   Paper,
   Skeleton,
   Stack,
   Text
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDisclosure, useShallowEffect } from '@mantine/hooks';
 import { IconMail, IconPhone, IconUser } from '@tabler/icons-react';
 import { useParams } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
@@ -21,6 +23,7 @@ import CreatePendaftaran from '../create/page';
 function Page() {
   const params = useParams();
   const state = useProxy(jadwalkegiatanState);
+  const [opened, { open, close }] = useDisclosure(false);
 
   useShallowEffect(() => {
     state.findUnique.load(params?.id as string);
@@ -66,28 +69,38 @@ function Page() {
                 <Stack gap="sm">
                   <Text fz="lg" fw="bold">Deskripsi Kegiatan</Text>
                   <Divider />
-                  <Text ta="justify" fz="md" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: state.findUnique.data.deskripsijadwalkegiatan.deskripsi }} />
+                  <Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.deskripsijadwalkegiatan.deskripsi }} />
                 </Stack>
 
                 <Stack gap="sm">
                   <Text fz="lg" fw="bold">Layanan yang Tersedia</Text>
                   <Divider />
-                  <Text ta="justify" fz="md" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: state.findUnique.data.layananjadwalkegiatan.content }} />
+                  <Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.layananjadwalkegiatan.content }} />
                 </Stack>
 
                 <Stack gap="sm">
                   <Text fz="lg" fw="bold">Syarat & Ketentuan</Text>
                   <Divider />
-                  <Text ta="justify" fz="md" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: state.findUnique.data.syaratketentuanjadwalkegiatan.content }} />
+                  <Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.syaratketentuanjadwalkegiatan.content }} />
                 </Stack>
 
                 <Stack gap="sm">
                   <Text fz="lg" fw="bold">Dokumen yang Perlu Dibawa</Text>
                   <Divider />
-                  <Text ta="justify" fz="md" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: state.findUnique.data.dokumenjadwalkegiatan.content }} />
+                  <Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.dokumenjadwalkegiatan.content }} />
                 </Stack>
 
-                <CreatePendaftaran />
+                <Stack gap="sm">
+                  <Text fz="lg" fw="bold">Pendaftaran Kegiatan</Text>
+                  <Divider />
+                  <Group>
+                    <Button onClick={open}>Buat Pendaftaran</Button>
+                  </Group>
+                </Stack>
+
+                <Modal opened={opened} onClose={close}>
+                  <CreatePendaftaran />
+                </Modal>
 
                 <Paper p="lg" radius="md" bg={colors['blue-button-trans']} shadow="sm">
                   <Stack gap="xs">

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

@@ -73,9 +73,9 @@ function JadwalKegiatanPage() {
 
                   <Divider my="sm" />
 
-                  <Group justify="flex-end">
+                  <Group justify="flex-start">
                     <Button
-                      variant="light"
+                      bg={colors['blue-button']}
                       radius="lg"
                       size="sm"
                       rightSection={<IconChevronRight size={18} />}
@@ -84,14 +84,6 @@ function JadwalKegiatanPage() {
                           `/darmasaba/kesehatan/data-kesehatan-warga/jadwal-kegiatan-page/${item.id}`
                         )
                       }
-                      styles={{
-                        root: {
-                          background: colors['blue-button'],
-                          color: 'white',
-                          boxShadow: '0 0 12px rgba(0, 123, 255, 0.4)',
-                          transition: 'all 0.2s ease',
-                        },
-                      }}
                     >
                       Lihat Detail & Daftar
                     </Button>

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

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import colors from '@/con/colors';
 import { BarChart as MantineBarChart } from '@mantine/charts';
-import { Box, Center, ColorSwatch, Flex, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Center, ColorSwatch, Flex, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
@@ -107,20 +107,7 @@ function Page() {
           <Box>
             <Paper p={"xl"} bg={colors['white-trans-1']}>
               <Box pb={30}>
-                <Flex pb={30} justify={'flex-end'} gap={'xl'} align={'center'}>
-                  <Box>
-                    <Flex gap={{ base: 0, md: 5 }} align={'center'}>
-                      <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kematian</Text>
-                      <ColorSwatch color="#EF3E3E" size={30} />
-                    </Flex>
-                  </Box>
-                  <Box>
-                    <Flex gap={{ base: 0, md: 5 }} align={'center'}>
-                      <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kelahiran</Text>
-                      <ColorSwatch color="#3290CA" size={30} />
-                    </Flex>
-                  </Box>
-                </Flex>
+                <Title order={2} mb="md">Data Kematian dan Kelahiran</Title>
                 {chartData.length === 0 ? (
                   <Text c="dimmed" ta="center" py="xl">
                     Belum ada data yang tersedia untuk ditampilkan
@@ -150,6 +137,20 @@ function Page() {
                     </Center>
                   </>
                 )}
+                <Flex pb={30} justify={'center'} gap={'xl'} align={'center'}>
+                  <Box>
+                    <Flex gap={{ base: 0, md: 5 }} align={'center'}>
+                      <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kematian</Text>
+                      <ColorSwatch  color="#EF3E3E" size={30} />
+                    </Flex>
+                  </Box>
+                  <Box>
+                    <Flex gap={{ base: 0, md: 5 }} align={'center'}>
+                      <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kelahiran</Text>
+                      <ColorSwatch color="#3290CA" size={30} />
+                    </Flex>
+                  </Box>
+                </Flex>
               </Box>
             </Paper>
           </Box>
@@ -163,11 +164,11 @@ function Page() {
               }}
             >
               {/* Fasilitas Kesehatan */}
-              <FasilitasKesehatan/>
+              <FasilitasKesehatan />
               {/* Jadwal Kegiatan */}
-              <JadwalKegiatan/>
+              <JadwalKegiatan />
               {/* Artikel Kesehatan */}
-              <ArtikelKesehatanPage/>
+              <ArtikelKesehatanPage />
             </SimpleGrid>
           </Box>
         </Stack>

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

@@ -28,16 +28,18 @@ function DetailInfoWabahPenyakitUser() {
   const data = state.findUnique.data;
 
   return (
-    <Box py={10}>
+    <Box py={10} px={{ base: 'md', md: 100 }}>
       {/* Tombol Back */}
-      <Button
-        variant="subtle"
-        onClick={() => router.back()}
-        leftSection={<IconArrowBack size={22} color={colors['blue-button']} />}
-        mb={15}
-      >
-        Kembali
-      </Button>
+      <Box>
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          leftSection={<IconArrowBack size={22} color={colors['blue-button']} />}
+          mb={15}
+        >
+          Kembali
+        </Button>
+      </Box>
 
       {/* Wrapper Detail */}
       <Paper

src/app/darmasaba/(pages)/kesehatan/info-wabah-penyakit/page.tsx

@@ -61,7 +61,7 @@ function Page() {
           >
             Informasi Wabah & Penyakit
           </Text>
-          <Text fz="md" c="dimmed" mt={4}>
+          <Text fz="md" mt={4}>
             Dapatkan informasi terbaru mengenai wabah dan penyakit yang sedang
             diawasi.
           </Text>
@@ -84,7 +84,7 @@ function Page() {
           <Center py="6xl">
             <Stack align="center" gap="sm">
               <IconInfoCircle size={50} color={colors['blue-button']} />
-              <Text fz="lg" fw={500} c="dimmed">
+              <Text fz="lg" fw={500} >
                 Tidak ada data yang cocok dengan pencarian Anda.
               </Text>
             </Stack>
@@ -101,17 +101,35 @@ function Page() {
                 bg={colors['white-trans-1']}
                 style={{
                   transition: 'transform 200ms ease, box-shadow 200ms ease',
+                  display: 'flex',
+                  flexDirection: 'column',
                 }}
               >
-                <Stack gap="sm">
-                  <Image
-                    radius="md"
+                <Stack gap="sm" style={{ flex: 1 }}>
+                  {/* Gambar */}
+                  <Box
                     h={180}
-                    src={v.image.link}
-                    alt={v.name}
-                    fit="cover"
-                    loading="lazy"
-                  />
+                    w="100%"
+                    style={{
+                      overflow: 'hidden',
+                      borderRadius: '8px',
+                    }}
+                  >
+                    <Image
+                      src={v.image?.link}
+                      alt={v.name}
+                      fit="cover"
+                      w="100%"
+                      h="100%"
+                      style={{
+                        objectFit: 'cover',
+                        objectPosition: 'center',
+                      }}
+                      loading="lazy"
+                    />
+                  </Box>
+
+                  {/* Judul dan badge */}
                   <Group justify="space-between" mt="sm">
                     <Text fw={700} fz="lg" c={colors['blue-button']}>
                       {v.name}
@@ -120,20 +138,46 @@ function Page() {
                       Wabah
                     </Badge>
                   </Group>
+
                   <Text fz="sm" c="dimmed">
-                    Diposting: 12 Februari 2025 · Dinas Kesehatan
+                    Diposting:{' '}
+                    {new Date(v.createdAt).toLocaleDateString('id-ID', {
+                      day: '2-digit',
+                      month: 'long',
+                      year: 'numeric',
+                    })}
                   </Text>
+
                   <Divider />
-                  <Text fz="sm" lh={1.5}>
-                    {v.deskripsiSingkat}
-                  </Text>
-                  <Button variant="light" radius="md" size="md" onClick={() => router.push(`/admin/kesehatan/info-wabah-penyakit/${v.id}`)}>
-                    Selengkapnya
-                  </Button>
+
+                  {/* Bagian deskripsi dan tombol */}
+                  <Box style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
+                    <Text
+                      fz="sm"
+                      lh={1.5}
+                      lineClamp={3}
+                      dangerouslySetInnerHTML={{ __html: v.deskripsiSingkat }}
+                      style={{ flexGrow: 1 }}
+                    />
+
+                    <Button
+                      variant="light"
+                      radius="md"
+                      size="md"
+                      mt="md"
+                      onClick={() =>
+                        router.push(`/darmasaba/kesehatan/info-wabah-penyakit/${v.id}`)
+                      }
+                    >
+                      Selengkapnya
+                    </Button>
+                  </Box>
                 </Stack>
               </Paper>
+
             ))}
           </SimpleGrid>
+
         )}
       </Box>
 

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

@@ -101,27 +101,42 @@ function Page() {
                 }}
               >
                 <Stack align="center" gap="sm">
-                  <Image
-                    src={v.image.link}
-                    alt={v.name}
-                    w={140}
-                    h={140}
-                    fit="contain"
-                    radius="md"
-                    loading="lazy"
-                  />
+                  <Box
+                    style={{
+                      width: '100%',
+                      aspectRatio: '16/9',
+                      borderRadius: '12px',
+                      overflow: 'hidden',
+                      position: 'relative',
+                    }}
+                  >
+                    <Image
+                      src={v.image.link}
+                      alt={v.name}
+                      fit="cover"
+                      loading="lazy"
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        transition: 'transform 0.4s ease',
+                      }}
+                      onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.05)')}
+                      onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
+                    />
+                  </Box>
+
                   <Text ta="center" fw={700} fz="lg" c={colors['blue-button']}>
                     {v.name}
                   </Text>
                   <Text fz="sm" c="dimmed" ta="center" lineClamp={3}>
                     <span style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
                   </Text>
-                  <Button 
-                    variant="light" 
-                    leftSection={<IconBrandWhatsapp size={18} />} 
-                    component="a" 
-                    href={`https://wa.me/${v.whatsapp.replace(/\D/g, '')}`} 
-                    target="_blank" 
+                  <Button
+                    variant="light"
+                    leftSection={<IconBrandWhatsapp size={18} />}
+                    component="a"
+                    href={`https://wa.me/${v.whatsapp.replace(/\D/g, '')}`}
+                    target="_blank"
                     aria-label="Hubungi WhatsApp"
                   >WhatsApp</Button>
                 </Stack>

src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/[id]/page.tsx

@@ -0,0 +1,86 @@
+'use client';
+import penangananDarurat from '@/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat';
+import colors from '@/con/colors';
+import { Box, Button, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+function DetailPenangananDaruratUser() {
+  const state = useProxy(penangananDarurat);
+  const router = useRouter();
+  const params = useParams();
+
+  useShallowEffect(() => {
+    state.findUnique.load(params?.id as string);
+  }, []);
+
+  if (!state.findUnique.data) {
+    return (
+      <Stack py={40}>
+        <Skeleton height={400} radius="md" />
+        <Skeleton height={20} width="80%" radius="md" />
+        <Skeleton height={20} width="60%" radius="md" />
+      </Stack>
+    );
+  }
+
+  const data = state.findUnique.data;
+
+  return (
+    <Box py={20}>
+      {/* Tombol Back */}
+      <Box px={{ base: 'md', md: 100 }}>
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          leftSection={<IconArrowBack size={22} color={colors['blue-button']} />}
+          mb={20}
+        >
+          Kembali
+        </Button>
+      </Box>
+
+      {/* Wrapper Detail */}
+      <Paper
+        withBorder
+        w={{ base: '100%', md: '70%', lg: '60%' }}
+        mx="auto"
+        bg={colors['white-1']}
+        p="xl"
+        radius="lg"
+        shadow="sm"
+      >
+        <Stack gap="md" align="center" ta="center">
+          <Text fz="xl" fw={700} c={colors['blue-button']}>
+            {data.name || 'Penanganan Darurat'}
+          </Text>
+
+          {data.image?.link && (
+            <Image
+              src={data.image.link}
+              alt={data.name}
+              radius="md"
+              mah={300}
+              fit="contain"
+              loading="lazy"
+              mb="md"
+            />
+          )}
+
+          <Box>
+            <Text
+              fz="md"
+              ta="justify"
+              dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+              style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+            />
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default DetailPenangananDaruratUser;

src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/page.tsx

@@ -2,8 +2,8 @@
 import penangananDarurat from '@/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat'
 import colors from '@/con/colors'
 import {
-  Badge,
   Box,
+  Button,
   Center,
   Grid,
   GridCol,
@@ -97,19 +97,43 @@ function Page() {
                 shadow="sm"
                 withBorder
                 bg={colors['white-trans-1']}
-                style={{ transition: 'all 0.3s ease' }}
+                style={{
+                  transition: 'all 0.3s ease',
+                  transform: 'translateY(0)',
+                }}
+                onMouseEnter={(e) => (e.currentTarget.style.transform = 'translateY(-5px)')}
+                onMouseLeave={(e) => (e.currentTarget.style.transform = 'translateY(0)')}
               >
                 <Stack align="center" gap="md">
                   <Center>
-                    <Image
-                      src={v.image.link}
-                      alt={v.name}
-                      w={160}
-                      h={160}
-                      fit="contain"
-                      radius="md"
-                      loading="lazy"
-                    />
+                    <Box
+                      style={{
+                        width: '100%',
+                        height: 180, // 🔥 tinggi fix biar semua seragam
+                        borderRadius: 12,
+                        overflow: 'hidden',
+                        position: 'relative',
+                        backgroundColor: '#f0f2f5', // fallback kalau gambar loading
+                      }}
+                    >
+                      <Image
+                        src={v.image?.link || '/img/default.png'}
+                        alt={v.name}
+                        fit="cover"
+                        width="100%"
+                        height="100%"
+                        loading="lazy"
+                        style={{
+                          objectFit: 'cover',
+                          objectPosition: 'center',
+                          transition: 'transform 0.4s ease',
+                        }}
+                        onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.05)')}
+                        onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
+                      />
+                    </Box>
+
+
                   </Center>
                   <Stack gap={4} w="100%">
                     <Text
@@ -125,15 +149,20 @@ function Page() {
                       <Text
                         fz="sm"
                         c="dimmed"
-                        lineClamp={4}
+                        lineClamp={3}
                         dangerouslySetInnerHTML={{ __html: v.deskripsi }}
                         style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                       />
                     </Box>
+                    <Button
+                      radius="xl"
+                      size="md"
+                      component="a"
+                      href={`/darmasaba/kesehatan/penanganan-darurat/${v.id}`}
+                    >
+                      Lihat Detail
+                    </Button>
                   </Stack>
-                  <Badge radius="md" color="blue" variant="light" mt="sm">
-                    Darurat
-                  </Badge>
                 </Stack>
               </Paper>
             ))}
@@ -151,8 +180,11 @@ function Page() {
           styles={{
             control: {
               border: `1px solid ${colors['blue-button']}`,
+              transition: 'all 0.3s ease',
+              '&:hover': { backgroundColor: colors['blue-button'], color: 'white' },
             },
           }}
+
         />
       </Center>
 

src/app/darmasaba/(pages)/kesehatan/posyandu/[id]/page.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import colors from '@/con/colors';
+import { Button, Center, Flex, Group, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconCalendar, IconInfoCircle, IconPhone } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import posyanduState from '@/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu';
+
+export default function DetailPosyanduUser() {
+  const statePosyandu = useProxy(posyanduState);
+  const params = useParams();
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    statePosyandu.findUnique.load(params?.id as string);
+  }, []);
+
+  if (!statePosyandu.findUnique.data) {
+    return (
+      <Stack py="xl" px={{ base: 'md', md: 100 }}>
+        <Skeleton height={500} radius="md" />
+      </Stack>
+    );
+  }
+
+  const data = statePosyandu.findUnique.data;
+
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" px={{ base: 'md', md: 100 }} gap="xl">
+      {/* Tombol Kembali */}
+      <Group>
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          leftSection={<IconArrowBack size={22} color={colors['blue-button']} />}
+          mb="sm"
+          c={colors['blue-button']}
+        >
+          Kembali
+        </Button>
+      </Group>
+
+      {/* Konten utama */}
+      <Paper
+        withBorder
+        p="xl"
+        radius="lg"
+        shadow="md"
+        bg={colors['white-trans-1']}
+        maw={800}
+        mx="auto"
+      >
+        <Stack gap="md">
+          {/* Header */}
+          <Text
+            ta="center"
+            fz={{ base: '1.8rem', md: '2.2rem' }}
+            fw={700}
+            c={colors['blue-button']}
+          >
+            {data.name || 'Posyandu Desa'}
+          </Text>
+
+          {/* Gambar */}
+          {data.image?.link ? (
+            <Center>
+              <Image
+                src={data.image.link}
+                alt={`Gambar ${data.name}`}
+                w="100%"
+                h={300}
+                radius="md"
+                fit="cover"
+                loading="lazy"
+              />
+            </Center>
+          ) : (
+            <Center>
+              <Text fz="sm" c="dimmed">
+                Tidak ada gambar
+              </Text>
+            </Center>
+          )}
+
+          {/* Info utama */}
+          <Stack gap="sm" mt="md">
+            <Flex align="center" gap="xs">
+              <IconPhone size={18} stroke={1.5} />
+              <Text fz="sm" c="dimmed">
+                {data.nomor || 'Nomor tidak tersedia'}
+              </Text>
+            </Flex>
+
+            <Flex align="center" gap="xs">
+              <IconCalendar size={18} stroke={1.5} />
+              <Text
+                fz="sm"
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.jadwalPelayanan || '-' }}
+                style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+              />
+            </Flex>
+
+            <Flex align="center" gap="xs">
+              <IconInfoCircle size={18} stroke={1.5} />
+              <Text
+                fz="sm"
+                c="dimmed"
+                lh={1.6}
+                dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
+                style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+              />
+            </Flex>
+          </Stack>
+        </Stack>
+      </Paper>
+    </Stack>
+  );
+}

src/app/darmasaba/(pages)/kesehatan/posyandu/page.tsx

@@ -1,22 +1,25 @@
 'use client'
 import posyandustate from "@/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu";
 import colors from "@/con/colors";
-import { Badge, Box, Center, Flex, Group, Image, List, ListItem, Pagination, Paper, SimpleGrid, Skeleton, Spoiler, Stack, Text, TextInput } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
+import { Badge, Box, Button, Center, Flex, Group, Image, List, ListItem, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from "@mantine/core";
+import { useDebouncedValue, useShallowEffect } from "@mantine/hooks";
 import { IconCalendar, IconInfoCircle, IconPhone, IconSearch } from "@tabler/icons-react";
 import { useState } from "react";
 import { useProxy } from "valtio/utils";
 import BackButton from "../../desa/layanan/_com/BackButto";
+import { useTransitionRouter } from "next-view-transitions";
 
 export default function Page() {
   const state = useProxy(posyandustate);
   const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const router = useTransitionRouter()
 
   const { data, page, totalPages, loading, load } = state.findMany;
 
   useShallowEffect(() => {
-    load(page, 6, search);
-  }, [page, search]);
+    load(page, 6, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   if (loading || !data) {
     return (
@@ -28,11 +31,31 @@ export default function Page() {
 
   if (data.length === 0) {
     return (
-      <Box py="xl" px={{ base: "md", md: 100 }}>
-        <Text fz="lg" fw="bold" c={colors["blue-button"]}>
-          Tidak ada posyandu yang ditemukan
-        </Text>
-      </Box>
+      <Stack pos="relative" bg={colors.Bg} py="xl" gap="xl">
+        <Box px={{ base: "md", md: 100 }}>
+          <BackButton />
+          <Flex mt="md" justify="space-between" align="center" wrap="wrap" gap="md">
+            <Text
+              ta="left"
+              fz={{ base: "1.8rem", md: "2.5rem" }}
+              c={colors["blue-button"]}
+              fw="bold"
+            >
+              Posyandu Desa Darmasaba
+            </Text>
+            <TextInput
+              placeholder="Cari posyandu berdasarkan nama..."
+              aria-label="Pencarian Posyandu"
+              radius="xl"
+              size="md"
+              leftSection={<IconSearch size={20} />}
+              w={{ base: "100%", md: "35%" }}
+              value={search}
+              onChange={(e) => setSearch(e.currentTarget.value)}
+            />
+          </Flex>
+        </Box>
+      </Stack>
     );
   }
 
@@ -111,33 +134,41 @@ export default function Page() {
                       loading="lazy"
                     />
                   </Center>
-                  <Flex align="center" gap="xs">
-                    <IconPhone size={18} stroke={1.5} />
-                    <Text fz="sm" c="dimmed">
-                      {v.nomor || "Tidak tersedia"}
-                    </Text>
+                  <Flex align="flex-start" gap="xs">
+                    <IconPhone size={18} stroke={1.5} style={{ marginTop: 3 }} />
+                    <Box>
+                      <Text fz="sm" c="dimmed" lh={1.4}>
+                        {v.nomor || "Tidak tersedia"}
+                      </Text>
+                    </Box>
                   </Flex>
-                  <Flex align="center" gap="xs">
-                    <IconCalendar size={18} stroke={1.5} />
-                    <Text fz="sm" c="dimmed">
-                      Jadwal:{" "}
-                      <span style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: v.jadwalPelayanan }} />
-                    </Text>
+
+                  <Flex align="flex-start" gap="xs">
+                    <IconCalendar size={18} stroke={1.5} style={{ marginTop: 3 }} />
+                    <Box>
+                      <Text fz="sm" c="dimmed" lh={1.4}>
+                        <strong>Jadwal:</strong>{" "}
+                        <span
+                          style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                          dangerouslySetInnerHTML={{ __html: v.jadwalPelayanan }}
+                        />
+                      </Text>
+                    </Box>
                   </Flex>
-                  <Spoiler
-                    key={`spoiler-${v.id}`}
-                    maxHeight={70}
-                    showLabel="Lihat selengkapnya"
-                    hideLabel="Sembunyikan"
-                    transitionDuration={300}
-                  >
+
+                  <Flex align="flex-start" gap="xs">
+                    <IconInfoCircle size={18} stroke={1.5} style={{ marginTop: 3 }} />
                     <Text
                       fz="sm"
                       lh={1.5}
+                      c="dimmed"
                       dangerouslySetInnerHTML={{ __html: v.deskripsi }}
                       style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                      lineClamp={3}
+                      truncate="end"
                     />
-                  </Spoiler>
+                  </Flex>
+                  <Button radius="lg" size="md" variant="outline" onClick={() => router.push(`/darmasaba/kesehatan/posyandu/${v.id}`)}>Detail</Button>
                 </Stack>
               </Paper>
             ))}

src/app/darmasaba/(pages)/kesehatan/program-kesehatan/page.tsx

@@ -88,7 +88,7 @@ export default function Page() {
           >
             Program Kesehatan Desa
           </Text>
-          <Text fz="lg" c="dimmed" mt="xs">
+          <Text fz="lg" mt="xs">
             Temukan berbagai program kesehatan untuk mendukung kualitas hidup
             masyarakat Darmasaba.
           </Text>
@@ -126,17 +126,36 @@ export default function Page() {
                   className="hover-scale"
                 >
                   <Stack gap="md">
-                    <Box h={180} w="100%">
-                      <Image
-                        src={v.image?.link}
-                        alt={v.name}
-                        radius="xl"
-                        w="100%"
-                        h="100%"
-                        fit="cover"
-                        loading="lazy"
-                      />
-                    </Box>
+                    <Center>
+                      <Box
+                        style={{
+                          width: '100%',
+                          height: 180, // 🔥 tinggi fix biar semua seragam
+                          borderRadius: 12,
+                          overflow: 'hidden',
+                          position: 'relative',
+                          backgroundColor: '#f0f2f5', // fallback kalau gambar loading
+                        }}
+                      >
+                        <Image
+                          src={v.image?.link || '/img/default.png'}
+                          alt={v.name}
+                          fit="cover"
+                          width="100%"
+                          height="100%"
+                          loading="lazy"
+                          style={{
+                            objectFit: 'cover',
+                            objectPosition: 'center',
+                            transition: 'transform 0.4s ease',
+                          }}
+                          onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.05)')}
+                          onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
+                        />
+                      </Box>
+
+
+                    </Center>
 
                     <Box px="lg" pb="lg">
                       <Text
@@ -149,7 +168,7 @@ export default function Page() {
                       </Text>
                       <Text
                         fz="sm"
-                        c="dimmed"
+                        ta={"justify"}
                         lineClamp={3}
                         dangerouslySetInnerHTML={{ __html: v.deskripsi }}
                         style={{ wordBreak: "break-word", whiteSpace: "normal" }}
@@ -230,7 +249,7 @@ export default function Page() {
           >
             Manfaat Program Kesehatan
           </Text>
-          <Text fz="lg" c="dimmed" maw={700}>
+          <Text fz="lg" maw={700}>
             Program kesehatan Desa Darmasaba berperan penting dalam meningkatkan
             kesejahteraan dan kualitas hidup warganya.
           </Text>
@@ -260,7 +279,7 @@ export default function Page() {
                 <Text ta="center" fw="bold" fz="xl" c={colors["blue-button"]}>
                   {v.title}
                 </Text>
-                <Text ta="center" fz="sm" c="dimmed">
+                <Text ta="center" fz="sm">
                   {v.desc}
                 </Text>
               </Stack>

src/app/darmasaba/(pages)/kesehatan/puskesmas/page.tsx

@@ -43,7 +43,7 @@ function Page() {
           <Text fz={{ base: "2rem", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
             Daftar Puskesmas
           </Text>
-          <Text fz="sm" c="dimmed">
+          <Text fz="md">
             Temukan informasi lengkap mengenai layanan, kontak, dan lokasi Puskesmas Darmasaba
           </Text>
         </GridCol>

src/app/darmasaba/(pages)/lingkungan/data-lingkungan-desa/page.tsx

@@ -71,8 +71,11 @@ function Page() {
             onChange={(e) => setSearch(e.currentTarget.value)}
           />
         </Group>
-        <Text fz="lg" c={'black'}>
-          Desa Darmasaba menjaga dan mengembangkan lingkungan demi kesejahteraan warganya. Fokus utama meliputi penghijauan, pengelolaan sampah, dan perlindungan kawasan hijau.
+        <Text fz="md" >
+          Desa Darmasaba menjaga dan mengembangkan lingkungan demi kesejahteraan warganya. 
+        </Text>
+        <Text fz="md">
+          Fokus utama meliputi penghijauan, pengelolaan sampah, dan perlindungan kawasan hijau.
         </Text>
       </Box>
       <Box px={{ base: 'md', md: 100 }}>

src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/component/edukasiCard.tsx

@@ -0,0 +1,66 @@
+// Create a new component: components/EdukasiCard.tsx
+'use client';
+
+import { Box, Paper, Stack, Text, Tooltip } from '@mantine/core';
+import { ReactNode } from 'react';
+
+interface EdukasiCardProps {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  color?: string;
+}
+
+export function EdukasiCard({ icon, title, description, color = '#1e88e5' }: EdukasiCardProps) {
+  return (
+    <Paper
+      p={{ base: 'md', md: 'lg' }}
+      radius="md"
+      shadow="sm"
+      withBorder
+      style={{ 
+        height: '100%',
+        transition: 'transform 0.2s, box-shadow 0.2s',
+        '&:hover': {
+          transform: 'translateY(-4px)',
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
+        }
+      }}
+    >
+      <Stack h="100%" justify="space-between" gap="md">
+        <Box>
+          <Stack align="center" gap="xs" mb="md">
+            <Box style={{ color }}>{icon}</Box>
+            <Tooltip label={title} maw={250} multiline withArrow position="top">
+              <Text 
+                fz={{ base: 'h5', md: 'h4' }} 
+                fw={700} 
+                c={color}
+                ta="center"
+                lineClamp={2}
+                style={{ 
+                  wordBreak: 'break-word',
+                  minHeight: '3.5rem',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center'
+                }}
+              >
+                {title}
+              </Text>
+            </Tooltip>
+          </Stack>
+          <Text
+            size="sm"
+            style={{
+              wordBreak: 'break-word',
+              lineHeight: 1.6,
+              color: 'var(--mantine-color-gray-7)'
+            }}
+            dangerouslySetInnerHTML={{ __html: description }}
+          />
+        </Box>
+      </Stack>
+    </Paper>
+  );
+}

src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/page.tsx

@@ -1,130 +1,104 @@
-'use client'
-import stateEdukasiLingkungan from '@/app/admin/(dashboard)/_state/lingkungan/edukasi-lingkungan';
-import colors from '@/con/colors';
-import { Box, Paper, SimpleGrid, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
+'use client';
+
+import { Box, Container, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconLeaf, IconPlant2, IconRecycle } from '@tabler/icons-react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
-function Page() {
-  const tujuan = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi.findById)
-  const materi = useProxy(stateEdukasiLingkungan.stateMateriEdukasiLingkungan.findById)
-  const contoh = useProxy(stateEdukasiLingkungan.stateContohEdukasiLingkungan.findById)
+import stateEdukasiLingkungan from '@/app/admin/(dashboard)/_state/lingkungan/edukasi-lingkungan';
+import colors from '@/con/colors';
+import { EdukasiCard } from './component/edukasiCard';
+
+function LoadingSkeleton() {
+  return (
+    <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg">
+      {[1, 2, 3].map((item) => (
+        <Skeleton key={item} height={300} radius="md" />
+      ))}
+    </SimpleGrid>
+  );
+}
+
+export default function EdukasiLingkunganPage() {
+  const tujuan = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi.findById);
+  const materi = useProxy(stateEdukasiLingkungan.stateMateriEdukasiLingkungan.findById);
+  const contoh = useProxy(stateEdukasiLingkungan.stateContohEdukasiLingkungan.findById);
 
   useShallowEffect(() => {
-    tujuan.load('edit')
-    materi.load('edit')
-    contoh.load('edit')
-  }, [])
+    tujuan.load('edit');
+    materi.load('edit');
+    contoh.load('edit');
+  }, []);
 
-  if (tujuan.loading || !tujuan.data || materi.loading || !materi.data || contoh.loading || !contoh.data) {
+  const isLoading = tujuan.loading || !tujuan.data ||
+    materi.loading || !materi.data ||
+    contoh.loading || !contoh.data;
+
+  if (isLoading) {
     return (
-      <Stack py={20}>
-        <Skeleton radius="md" height={600} />
+      <Stack py="xl" px={{ base: 'md', md: 'xl' }}>
+        <BackButton />
+        <LoadingSkeleton />
       </Stack>
     );
   }
 
   return (
-    <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
+    <Stack bg={colors.Bg} py="xl" gap="xl" px={{ base: 'md', md: 'xl' }}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
 
-      <Box px={{ base: 'md', md: 100 }} pb={20}>
-        <Text ta={'center'} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
+      <Container size="lg" ta="center">
+        <Text
+          component="h1"
+          fz={{ base: 'h2', md: '2.5rem' }}
+          c={colors['blue-button']}
+          fw={700}
+          mb="md"
+        >
           Edukasi Lingkungan
         </Text>
-        <Text ta={'center'} fz="h4" c="black">
+        <Text
+          fz={{ base: 'md', md: 'lg' }}
+          c="dimmed"
+          maw={800}
+          mx="auto"
+        >
           Program edukasi ini membimbing masyarakat untuk peduli dan bertanggung jawab terhadap alam,
           meningkatkan kesehatan, kenyamanan, dan keberlanjutan hidup bersama.
         </Text>
-      </Box>
+      </Container>
 
-      <Box px={{ base: 'md', md: 100 }}>
-        <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg" style={{ alignItems: 'stretch' }}>
-          {/* Tujuan Edukasi Lingkungan */}
-         <Box style={{ display: 'flex', height: '100%' }}>
-            <Paper p={20} bg={colors['white-trans-1']} shadow="md" radius="md" style={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
-              <Stack gap="md">
-                <Box>
-                  <Tooltip label={tujuan.data?.judul} position="top" withArrow>
-                    <Stack gap={4} align="center">
-                    <IconLeaf size={28} color={colors['blue-button']} />
-                      <Text fz="h3" fw="bold" c={colors['blue-button']} ta="center">
-                        {tujuan.data?.judul}
-                      </Text>
-                    </Stack>
-                  </Tooltip>
-                </Box>
-                <Text 
-                  style={{ 
-                    wordBreak: "break-word", 
-                    whiteSpace: "normal",
-                    flexGrow: 1
-                  }} 
-                  dangerouslySetInnerHTML={{ __html: tujuan.data?.deskripsi || '' }} 
-                />
-                <Box style={{ flexGrow: 1 }} />
-              </Stack>
-            </Paper>
-          </Box>
-          {/* Materi Edukasi Lingkungan */}
-          <Box style={{ display: 'flex', height: '100%' }}>
-            <Paper p={20} bg={colors['white-trans-1']} shadow="md" radius="md">
-              <Stack gap="md">
-                <Box>
-                  <Tooltip label={materi.data?.judul} position="top" withArrow>
-                    <Stack gap={4} align="center">
-                    <IconRecycle size={28} color={colors['blue-button']} />
-                      <Text fz="h3" fw="bold" c={colors['blue-button']} ta="center">
-                        {materi.data?.judul}
-                      </Text>
-                    </Stack>
-                  </Tooltip>
-                </Box>
-                <Text 
-                  style={{ 
-                    wordBreak: "break-word", 
-                    whiteSpace: "normal",
-                    flexGrow: 1
-                  }} 
-                  dangerouslySetInnerHTML={{ __html: materi.data?.deskripsi || '' }} 
-                />
-                <Box style={{ flexGrow: 1 }} />
-              </Stack>
-            </Paper>
-          </Box>
-          {/* Contoh Edukasi Lingkungan */}
-          <Box style={{ display: 'flex', height: '100%' }}>
-            <Paper p={20} bg={colors['white-trans-1']} shadow="md" radius="md">
-              <Stack gap="md">
-                <Box>
-                  <Tooltip label={contoh.data?.judul} position="top" withArrow>
-                    <Stack gap={4} align="center">
-                    <IconPlant2  size={28} color={colors['blue-button']} />
-                      <Text fz="h3" fw="bold" c={colors['blue-button']} ta="center">
-                        {contoh.data?.judul}
-                      </Text>
-                    </Stack>
-                  </Tooltip>
-                </Box>
-                <Text 
-                  style={{ 
-                    wordBreak: "break-word", 
-                    whiteSpace: "normal",
-                    flexGrow: 1
-                  }} 
-                  dangerouslySetInnerHTML={{ __html: contoh.data?.deskripsi || '' }} 
-                />
-              </Stack>
-            </Paper>
-          </Box>
+      <Container size="xl">
+        <SimpleGrid
+          cols={{ base: 1, sm: 2, lg: 3 }}
+          spacing="xl"
+          verticalSpacing={{ base: 'md', md: 'xl' }}
+        >
+          <EdukasiCard
+            icon={<IconLeaf size={32} />}
+            title={tujuan.data?.judul || ''}
+            description={tujuan.data?.deskripsi || ''}
+            color={colors['blue-button']}
+          />
+
+          <EdukasiCard
+            icon={<IconRecycle size={32} />}
+            title={materi.data?.judul || ''}
+            description={materi.data?.deskripsi || ''}
+            color={colors['blue-button']}
+          />
+
+          <EdukasiCard
+            icon={<IconPlant2 size={32} />}
+            title={contoh.data?.judul || ''}
+            description={contoh.data?.deskripsi || ''}
+            color={colors['blue-button']}
+          />
         </SimpleGrid>
-      </Box>
+      </Container>
     </Stack>
   );
-}
-
-export default Page;
+}

src/app/darmasaba/(pages)/lingkungan/gotong-royong/[kategori]/content.tsx

@@ -1,5 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Transition } from '@mantine/core';
 import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
 import {
   Badge,
@@ -23,12 +27,11 @@ import {
 } from '@mantine/core';
 import { IconArrowRight, IconCalendar } from '@tabler/icons-react';
 import { useTransitionRouter } from 'next-view-transitions';
-import { useEffect, useState } from 'react';
-import { useProxy } from 'valtio/utils';
 
 export default function Content({ kategori }: { kategori: string }) {
   const router = useTransitionRouter();
   const [page, setPage] = useState(1);
+  const [animateKey, setAnimateKey] = useState(0);
 
   const state = useProxy(gotongRoyongState.kegiatanDesa);
   const featuredState = useProxy(gotongRoyongState.kegiatanDesa.findFirst);
@@ -37,119 +40,178 @@ export default function Content({ kategori }: { kategori: string }) {
   const paginatedNews = state.findMany.data || [];
   const totalPages = state.findMany.totalPages || 1;
 
-  // Load data
+  // Load data awal
   useEffect(() => {
     gotongRoyongState.kegiatanDesa.findFirst.load(kategori);
   }, [kategori]);
 
+  // Load daftar berita
   useEffect(() => {
     state.findMany.load(page, 3, '', kategori);
+    setAnimateKey((prev) => prev + 1); // trigger animasi halus saat page berubah
   }, [page, kategori]);
 
+  // Tampilan kosong
+  if (!featuredState.loading && !featured) {
+    return (
+      <Center py={100}>
+        <Stack align="center" gap="sm">
+          <Title order={3}>Belum Ada Data Gotong Royong</Title>
+          <Text c="dimmed">Tidak ada data gotong royong yang tersedia saat ini.</Text>
+        </Stack>
+      </Center>
+    );
+  }
+
   return (
     <Box py={20}>
       <Container size="xl" px={{ base: 'md', md: 'xl' }}>
         {/* === Gotong Royong Utama === */}
-        {featuredState.loading ? (
-          <Center><Skeleton h={400} /></Center>
-        ) : featured ? (
-          <Box mb={50}>
-            <Text fz="h2" fw={700} mb="md">Gotong Royong Utama</Text>
-            <Paper shadow="md" radius="md" withBorder>
-              <Grid gutter={0}>
-                <GridCol span={{ base: 12, md: 6 }}>
-                  <Image
-                    src={featured.image?.link}
-                    alt={featured.judul || 'Berita Utama'}
-                    height={400}
-                    fit="cover"
-                    radius="md"
-                    style={{ borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
-                    loading="lazy"
-                  />
-                </GridCol>
-                <GridCol span={{ base: 12, md: 6 }} p="xl">
-                  <Stack h="100%" justify="space-between">
-                    <div>
-                      <Badge color="blue" variant="light" mb="md">
-                        {featured.kategoriKegiatan?.nama || kategori}
-                      </Badge>
-                      <Title order={2} mb="md">{featured.judul}</Title>
-                      <Text c="dimmed" lineClamp={3} mb="md" dangerouslySetInnerHTML={{ __html: featured.deskripsiLengkap }} />
-                    </div>
-                    <Group justify="apart" mt="auto">
-                      <Group gap="xs">
-                        <IconCalendar size={18} />
-                        <Text size="sm">
-                          {new Date(featured.createdAt).toLocaleDateString('id-ID', {
-                            day: 'numeric',
-                            month: 'long',
-                            year: 'numeric',
-                          })}
-                        </Text>
-                      </Group>
-                      <Button
-                        variant="light"
-                        rightSection={<IconArrowRight size={16} />}
-                        onClick={() => router.push(`/darmasaba/lingkungan/gotong-royong/${kategori}/${featured.id}`)}
-                      >
-                        Baca Selengkapnya
-                      </Button>
-                    </Group>
-                  </Stack>
-                </GridCol>
-              </Grid>
-            </Paper>
-          </Box>
-        ) : null}
+        <Transition mounted={!featuredState.loading} transition="fade" duration={250} timingFunction="ease">
+          {(styles) => (
+            <div style={styles}>
+              {featured ? (
+                <Box mb={50}>
+                  <Text fz="h2" fw={700} mb="md">Gotong Royong Utama</Text>
+                  <Paper shadow="md" radius="md" withBorder>
+                    <Grid gutter={0}>
+                      <GridCol span={{ base: 12, md: 6 }}>
+                        <Image
+                          src={featured.image?.link || '/images/placeholder.jpg'}
+                          alt={featured.judul || 'Berita Utama'}
+                          height={400}
+                          fit="cover"
+                          radius="md"
+                          style={{ borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
+                          loading="lazy"
+                        />
+                      </GridCol>
+                      <GridCol span={{ base: 12, md: 6 }} p="xl">
+                        <Stack h="100%" justify="space-between">
+                          <div>
+                            <Badge color="blue" variant="light" mb="md">
+                              {featured.kategoriKegiatan?.nama || kategori}
+                            </Badge>
+                            <Title order={2} mb="md">{featured.judul}</Title>
+                            <Text
+                              c="dimmed"
+                              lineClamp={3}
+                              mb="md"
+                              dangerouslySetInnerHTML={{ __html: featured.deskripsiLengkap }}
+                            />
+                          </div>
+                          <Group justify="apart" mt="auto">
+                            <Group gap="xs">
+                              <IconCalendar size={18} />
+                              <Text size="sm">
+                                {new Date(featured.createdAt).toLocaleDateString('id-ID', {
+                                  day: 'numeric',
+                                  month: 'long',
+                                  year: 'numeric',
+                                })}
+                              </Text>
+                            </Group>
+                            <Button
+                              variant="light"
+                              rightSection={<IconArrowRight size={16} />}
+                              onClick={() =>
+                                router.push(`/darmasaba/lingkungan/gotong-royong/${kategori}/${featured.id}`)
+                              }
+                            >
+                              Baca Selengkapnya
+                            </Button>
+                          </Group>
+                        </Stack>
+                      </GridCol>
+                    </Grid>
+                  </Paper>
+                </Box>
+              ) : (
+                <Skeleton h={400} radius="md" />
+              )}
+            </div>
+          )}
+        </Transition>
 
-        {/* === Daftar Gotong Royong === */}
+        {/* === Daftar Gotong Royong (Pagination + Fade-in Halus) === */}
         <Box mt={50}>
           <Title order={2} mb="md">Daftar Gotong Royong</Title>
           <Divider mb="xl" />
 
-          {state.findMany.loading ? (
-            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl">
-              {Array(3).fill(0).map((_, i) => (
-                <Skeleton key={i} h={300} radius="md" />
-              ))}
-            </SimpleGrid>
-          ) : paginatedNews.length === 0 ? (
-            <Text c="dimmed" ta="center">Belum ada gotong royong di kategori &quot;{kategori}&quot;.</Text>
-          ) : (
-            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl" verticalSpacing="xl">
-              {paginatedNews.map((item) => (
-                <Card
-                  key={item.id}
-                  shadow="sm"
-                  p="lg"
-                  radius="md"
-                  withBorder
-                  onClick={() => router.push(`/darmasaba/lingkungan/gotong-royong/${kategori}/${item.id}`)}
-                  style={{ cursor: 'pointer' }}
-                >
-                  <Card.Section>
-                    <Image src={item.image?.link} height={200} alt={item.judul} fit="cover" loading="lazy"/>
-                  </Card.Section>
-                  <Badge color="blue" variant="light" mt="md">
-                    {item.kategoriKegiatan?.nama || kategori}
-                  </Badge>
-                  <Text fw={600} size="lg" mt="sm" lineClamp={2}>{item.judul}</Text>
-                  <Text size="sm" c="dimmed" lineClamp={3} style={{wordBreak: "break-word", whiteSpace: "normal"}} mt="xs" dangerouslySetInnerHTML={{ __html: item.deskripsiLengkap }} />
-                  <Group justify="apart" mt="md" gap="xs">
-                    <Text size="xs" c="dimmed">
-                      {new Date(item.createdAt).toLocaleDateString('id-ID', {
-                        day: 'numeric',
-                        month: 'short',
-                        year: 'numeric',
-                      })}
-                    </Text>
-                    <Badge color="gray" variant="outline">Baca Selengkapnya</Badge>
-                  </Group>
-                </Card>
-              ))}
-            </SimpleGrid>
-          )}
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={animateKey}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.25, ease: 'easeInOut' }}
+            >
+              {state.findMany.loading ? (
+                <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl">
+                  {Array(3)
+                    .fill(0)
+                    .map((_, i) => (
+                      <Skeleton key={i} h={300} radius="md" />
+                    ))}
+                </SimpleGrid>
+              ) : paginatedNews.length === 0 ? (
+                <Center py={50}>
+                  <Stack align="center" gap="sm">
+                    <Title order={3}>Tidak Ada Data</Title>
+                    <Text c="dimmed">Belum ada data gotong royong yang tersedia.</Text>
+                  </Stack>
+                </Center>
+              ) : (
+                <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl" verticalSpacing="xl">
+                  {paginatedNews.map((item) => (
+                    <Card
+                      key={item.id}
+                      shadow="sm"
+                      p="lg"
+                      radius="md"
+                      withBorder
+                      onClick={() => router.push(`/darmasaba/lingkungan/gotong-royong/${kategori}/${item.id}`)}
+                      style={{ cursor: 'pointer' }}
+                    >
+                      <Card.Section>
+                        <Image
+                          src={item.image?.link || '/images/placeholder-small.jpg'}
+                          height={200}
+                          alt={item.judul}
+                          fit="cover"
+                          loading="lazy"
+                        />
+                      </Card.Section>
+                      <Badge color="blue" variant="light" mt="md">
+                        {item.kategoriKegiatan?.nama || kategori}
+                      </Badge>
+                      <Text fw={600} size="lg" mt="sm" lineClamp={2}>
+                        {item.judul}
+                      </Text>
+                      <Text
+                        size="sm"
+                        c="dimmed"
+                        lineClamp={3}
+                        style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+                        mt="xs"
+                        dangerouslySetInnerHTML={{ __html: item.deskripsiLengkap }}
+                      />
+                      <Group justify="apart" mt="md" gap="xs">
+                        <Text size="xs" c="dimmed">
+                          {new Date(item.createdAt).toLocaleDateString('id-ID', {
+                            day: 'numeric',
+                            month: 'short',
+                            year: 'numeric',
+                          })}
+                        </Text>
+                        <Badge color="gray" variant="outline">Baca Selengkapnya</Badge>
+                      </Group>
+                    </Card>
+                  ))}
+                </SimpleGrid>
+              )}
+            </motion.div>
+          </AnimatePresence>
 
           {/* Pagination */}
           <Center mt="xl">
@@ -166,4 +228,4 @@ export default function Content({ kategori }: { kategori: string }) {
       </Container>
     </Box>
   );
-}
+}

src/app/darmasaba/(pages)/lingkungan/gotong-royong/_lib/layoutTabs.tsx

@@ -1,323 +1,5 @@
-// 'use client'
-// import colors from '@/con/colors';
-// import { Box, Container, Grid, GridCol, 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';
-// import BackButton from '../../../desa/layanan/_com/BackButto';
-
-
-// type HeaderSearchProps = {
-//   placeholder?: string;
-//   searchIcon?: React.ReactNode;
-//   value?: string;
-//   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-//   children?: React.ReactNode;
-// };
-
-// function LayoutTabsGotongRoyong({
-//   children,
-//   placeholder = "pencarian",
-//   searchIcon = <IconSearch size={20} />
-// }: HeaderSearchProps) {
-//   const router = useRouter();
-//   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);
-//       }
-//     };
-//   }, [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);
-//     }
-    
-//     // Set new timeout
-//     const newTimeout = window.setTimeout(() => {
-//       const params = new URLSearchParams(searchParams.toString());
-      
-//       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/lingkungan/gotong-royong/${activeTab}?${params.toString()}`);
-//       }
-//     }, 500); // 500ms debounce delay
-    
-//     setSearchTimeout(newTimeout);
-//   };
-//   const tabs = [
-//     {
-//       label: "Semua",
-//       value: "semua",
-//       href: "/darmasaba/lingkungan/gotong-royong/semua"
-//     },
-//     {
-//       label: "Kebersihan",
-//       value: "kebersihan",
-//       href: "/darmasaba/lingkungan/gotong-royong/kebersihan"
-//     },
-//     {
-//       label: "Infrastruktur",
-//       value: "infrastruktur",
-//       href: "/darmasaba/lingkungan/gotong-royong/infrastruktur"
-//     },
-//     {
-//       label: "Sosial",
-//       value: "sosial",
-//       href: "/darmasaba/lingkungan/gotong-royong/sosial"
-//     },
-//     {
-//       label: "Lingkungan",
-//       value: "lingkungan",
-//       href: "/darmasaba/lingkungan/gotong-royong/lingkungan"
-//     }
-//   ];
-//   const handleTabChange = (value: string | null) => {
-//     if (!value) return;
-//     const tab = tabs.find(t => t.value === value);
-//     if (tab) {
-//       const params = new URLSearchParams(searchParams.toString());
-//       router.push(`/darmasaba/lingkungan/gotong-royong/${value}${params.toString() ? `?${params.toString()}` : ''}`);
-//     }
-//   };
-
-//   return (
-//     <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
-//       {/* Header */}
-//       <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">
-//             Gotong Royong Desa Darmasaba
-//           </Text>
-//           <Text ta="center" px="md">
-//             Gotong royong rutin dilakukan oleh warga desa untuk meningkatkan kualitas hidup dan kesejahteraan masyarakat Desa Darmasaba
-//           </Text>
-//         </Stack>
-//       </Container>
-
-//       <Tabs
-//         color={colors['blue-button']}
-//         variant="pills"
-//         value={activeTabState}
-//         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 }}>
-//               <TabsList>
-//                 {tabs.map((tab, index) => (
-//                   <TabsTab
-//                     key={index}
-//                     value={tab.value}
-//                     onClick={() => router.push(tab.href)}
-//                   >
-//                     {tab.label}
-//                   </TabsTab>
-//                 ))}
-//               </TabsList>
-//             </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>
-//         </Box>
-
-//         {children}
-//       </Tabs>
-//     </Stack>
-//   );
-// }
-
-// export default LayoutTabsGotongRoyong;
-
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-// 'use client'
-// import colors from '@/con/colors';
-// 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';
-// import BackButton from '../../layanan/_com/BackButto';
-
-// type HeaderSearchProps = {
-//   placeholder?: string;
-//   searchIcon?: React.ReactNode;
-//   value?: string;
-//   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-//   children?: React.ReactNode;
-// };
-
-// function LayoutTabsBerita({
-//   children,
-//   placeholder = "pencarian",
-//   searchIcon = <IconSearch size={20} />
-// }: HeaderSearchProps) {
-//   const router = useRouter();
-//   const pathname = usePathname();
-//   const searchParams = useSearchParams();
-
-//   const activeTab = pathname.split('/').pop() || 'semua';
-//   const initialSearch = searchParams.get('search') || '';
-//   const [searchValue, setSearchValue] = useState(initialSearch);
-//   const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
-
-//   const [activeTabState, setActiveTabState] = useState(activeTab);
-//   useEffect(() => {
-//     setActiveTabState(activeTab);
-//   }, [activeTab]);
-
-//   useEffect(() => {
-//     return () => {
-//       if (searchTimeout !== null) clearTimeout(searchTimeout);
-//     };
-//   }, [searchTimeout]);
-
-//   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-//     const value = event.target.value;
-//     setSearchValue(value);
-
-//     if (searchTimeout !== null) clearTimeout(searchTimeout);
-
-//     const newTimeout = window.setTimeout(() => {
-//       const params = new URLSearchParams(searchParams.toString());
-
-//       if (value) params.set('search', value);
-//       else params.delete('search');
-
-//       if (params.toString() !== searchParams.toString()) {
-//         router.push(`/darmasaba/desa/berita/${activeTab}?${params.toString()}`);
-//       }
-//     }, 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 handleTabChange = (value: string | null) => {
-//     if (!value) return;
-//     const tab = tabs.find(t => t.value === value);
-//     if (tab) {
-//       const params = new URLSearchParams(searchParams.toString());
-//       router.push(`/darmasaba/desa/berita/${value}${params.toString() ? `?${params.toString()}` : ''}`);
-//     }
-//   };
-
-//   return (
-//     <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
-//       {/* Header */}
-//       <Box px={{ base: "md", md: 100 }}>
-//         <BackButton />
-//       </Box>
-
-//       <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']}
-//         variant="pills"
-//         value={activeTabState}
-//         onChange={handleTabChange}
-//       >
-//         <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']}>
-//           {/* 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}
-//       </Tabs>
-//     </Stack>
-//   );
-// }
-
-// export default LayoutTabsBerita;
-
 
 'use client'
 import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
@@ -402,7 +84,7 @@ function LayoutTabsGotongRoyong({ children }: { children: React.ReactNode }) {
             <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold">
               Portal Gotong royong Darmasaba
             </Text>
-            <Text>Temukan berbagai kegiatan lingkungan yang dimiliki Desa Darmasaba</Text>
+            <Text fz="md">Temukan berbagai kegiatan lingkungan yang dimiliki Desa Darmasaba</Text>
           </Stack>
           <Box>
             <TextInput

src/app/darmasaba/(pages)/lingkungan/gotong-royong/semua/page.tsx

@@ -1,169 +1,277 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
+
 import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
-import { Badge, Box, Button, Card, Center, Container, Divider, Flex, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
+import {
+  Badge,
+  Box,
+  Button,
+  Card,
+  Center,
+  Container,
+  Divider,
+  Flex,
+  Grid,
+  GridCol,
+  Group,
+  Image,
+  Pagination,
+  Paper,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+  Transition,
+} from '@mantine/core';
 import { IconArrowRight, IconCalendar } from '@tabler/icons-react';
-import { useTransitionRouter } from 'next-view-transitions';
-import { useSearchParams } from 'next/navigation';
+import { motion } from 'framer-motion';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
 
-function Page() {
+export default function Page() {
   const searchParams = useSearchParams();
-  const router = useTransitionRouter();
+  const router = useRouter();
 
-  // Parameter URL
   const search = searchParams.get('search') || '';
   const page = parseInt(searchParams.get('page') || '1');
 
-  // Gunakan proxy untuk state
   const state = useProxy(gotongRoyongState.kegiatanDesa);
-  const featured = useProxy(gotongRoyongState.kegiatanDesa.findFirst); // ✅ Berita utama
+  const featured = useProxy(gotongRoyongState.kegiatanDesa.findFirst);
   const loadingGrid = state.findMany.loading;
   const loadingFeatured = featured.loading;
 
-  // Load berita utama (hanya sekali)
+  // Load featured data once on component mount
   useEffect(() => {
-    if (!featured.data && !loadingFeatured) {
-      gotongRoyongState.kegiatanDesa.findFirst.load();
-    }
-  }, [featured.data, loadingFeatured]);
+    let mounted = true;
+    
+    const loadFeatured = async () => {
+      try {
+        if (!featured.data && !loadingFeatured) {
+          await gotongRoyongState.kegiatanDesa.findFirst.load();
+        }
+      } catch (error) {
+        console.error('Error loading featured data:', error);
+      }
+    };
+
+    if (mounted) {
+      loadFeatured();
+    }
+
+    return () => {
+      mounted = false;
+    };
+  }, []); // Empty dependency array to run only once on mount
 
-  // Load berita terbaru (untuk grid) saat page/search berubah
   useEffect(() => {
-    const limit = 3; // Sesuaikan dengan tampilan grid
-    state.findMany.load(page, limit, search);
+    let mounted = true;
+    
+    const loadData = async () => {
+      try {
+        const limit = 3;
+        await state.findMany.load(page, limit, search);
+      } catch (error) {
+        console.error('Error loading data:', error);
+      }
+    };
+
+    if (mounted) {
+      loadData();
+    }
+
+    return () => {
+      mounted = false;
+    };
   }, [page, search]);
 
-  // Update URL saat page berubah
   const handlePageChange = (newPage: number) => {
     const url = new URLSearchParams(searchParams.toString());
     if (search) url.set('search', search);
     if (newPage > 1) url.set('page', newPage.toString());
-    else url.delete('page'); // biar page=1 ga muncul di URL
-
-    router.replace(`?${url.toString()}`);
+    else url.delete('page');
+    
+    // Use push instead of replace to keep browser history
+    router.push(`?${url.toString()}`, { scroll: false });
   };
 
   const featuredData = featured.data;
   const paginatedNews = state.findMany.data || [];
   const totalPages = state.findMany.totalPages || 1;
 
-  return (
-    <Box py={20}>
-      <Container size="xl" px={{ base: "md", md: "xl" }}>
-        {/* === Gotong royong Utama (Tetap) === */}
-        {loadingFeatured ? (
-          <Center><Skeleton h={400} /></Center>
-        ) : featuredData ? (
-          <Box mb={50}>
-            <Text fz="h2" fw={700} mb="md">Gotong royong Utama</Text>
-            <Paper shadow="md" radius="md" withBorder>
-              <Grid gutter={0}>
-                <GridCol span={{ base: 12, md: 6 }}>
-                  <Image
-                    src={featuredData.image?.link || '/images/placeholder.jpg'}
-                    alt={featuredData.judul || 'Gotong royong Utama'}
-                    height={400}
-                    fit="cover"
-                    radius="md"
-                    style={{ borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
-                    loading="lazy"
-                  />
-                </GridCol>
-                <GridCol span={{ base: 12, md: 6 }} p="xl">
-                  <Stack h="100%" justify="space-between">
-                    <div>
-                      <Badge color="blue" variant="light" mb="md">
-                        {featuredData.kategoriKegiatan?.nama || 'Gotong royong'}
-                      </Badge>
-                      <Title order={2} mb="md">{featuredData.judul}</Title>
-                      <Text c="dimmed" lineClamp={3} mb="md" dangerouslySetInnerHTML={{ __html: featuredData.deskripsiSingkat }} />
-                    </div>
-                    <Group justify="apart" mt="auto">
-                      <Group gap="xs">
-                        <IconCalendar size={18} />
-                        <Text size="sm">
-                          {new Date(featuredData.createdAt).toLocaleDateString('id-ID', {
-                            day: 'numeric',
-                            month: 'long',
-                            year: 'numeric'
-                          })}
-                        </Text>
-                      </Group>
-                      <Button
-                        variant="light"
-                        rightSection={<IconArrowRight size={16} />}
-                        onClick={() => router.push(`/darmasaba/lingkungan/gotong-royong/${featuredData.kategoriKegiatan?.nama}/${featuredData.id}`)}
-                      >
-                        Baca Selengkapnya
-                      </Button>
-                    </Group>
-                  </Stack>
-                </GridCol>
-              </Grid>
-            </Paper>
-          </Box>
-        ) : null}
+  // Animasi transisi halus tapi tetap instant load
+  const MotionBox = motion(Box as any);
 
-        {/* === Gotong royong Terbaru (Berubah Saat Pagination) === */}
+  // fallback kosong
+  if (!loadingGrid && !loadingFeatured && paginatedNews.length === 0) {
+    return (
+      <Container size="xl" py={80} ta="center">
+        <Title order={2} mb="md">Belum Ada Data Gotong Royong</Title>
+        <Text c="dimmed">Tidak ada data gotong royong yang tersedia saat ini.</Text>
+      </Container>
+    );
+  }
+
+  return (
+    <MotionBox
+      key={`${page}-${search}`}
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -10 }}
+      transition={{ duration: 0.2, ease: 'easeOut' }}
+      py={20}
+    >
+      <Container size="xl" px={{ base: 'md', md: 'xl' }}>
+        {/* === Gotong Royong Utama === */}
+        <Transition mounted={!loadingFeatured} transition="fade" duration={200} timingFunction="ease-out">
+          {(styles) =>
+            featuredData ? (
+              <Box mb={50} style={styles}>
+                <Text fz="h2" fw={700} mb="md">Gotong royong Utama</Text>
+                <Paper shadow="md" radius="md" withBorder>
+                  <Grid gutter={0}>
+                    <GridCol span={{ base: 12, md: 6 }}>
+                      <Image
+                        src={featuredData.image?.link || '/images/placeholder.jpg'}
+                        alt={featuredData.judul || 'Gotong royong Utama'}
+                        height={400}
+                        fit="cover"
+                        radius="md"
+                        style={{ borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
+                        loading="lazy"
+                      />
+                    </GridCol>
+                    <GridCol span={{ base: 12, md: 6 }} p="xl">
+                      <Stack h="100%" justify="space-between">
+                        <div>
+                          <Badge color="blue" variant="light" mb="md">
+                            {featuredData.kategoriKegiatan?.nama || 'Gotong royong'}
+                          </Badge>
+                          <Title order={2} mb="md">{featuredData.judul}</Title>
+                          <Text
+                            c="dimmed"
+                            lineClamp={3}
+                            mb="md"
+                            dangerouslySetInnerHTML={{ __html: featuredData.deskripsiSingkat }}
+                          />
+                        </div>
+                        <Group justify="apart" mt="auto">
+                          <Group gap="xs">
+                            <IconCalendar size={18} />
+                            <Text size="sm">
+                              {new Date(featuredData.createdAt).toLocaleDateString('id-ID', {
+                                day: 'numeric',
+                                month: 'long',
+                                year: 'numeric',
+                              })}
+                            </Text>
+                          </Group>
+                          <Button
+                            variant="light"
+                            rightSection={<IconArrowRight size={16} />}
+                            onClick={() =>
+                              router.push(
+                                `/darmasaba/lingkungan/gotong-royong/${featuredData.kategoriKegiatan?.nama}/${featuredData.id}`
+                              )
+                            }
+                          >
+                            Baca Selengkapnya
+                          </Button>
+                        </Group>
+                      </Stack>
+                    </GridCol>
+                  </Grid>
+                </Paper>
+              </Box>
+            ) : (
+              <Skeleton h={400} radius="md" mb="xl" />
+            )
+          }
+        </Transition>
+
+        {/* === Gotong royong Terbaru === */}
         <Box mt={50}>
           <Title order={2} mb="md">Gotong royong Terbaru</Title>
           <Divider mb="xl" />
 
-          {loadingGrid ? (
-            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl">
-              {Array(3).fill(0).map((_, i) => (
-                <Skeleton key={i} h={300} radius="md" />
-              ))}
-            </SimpleGrid>
-          ) : paginatedNews.length === 0 ? (
-            <Text c="dimmed" ta="center">Tidak ada gotong royong ditemukan.</Text>
-          ) : (
-            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl" verticalSpacing="xl">
-              {paginatedNews.map((item) => (
-                <Card
-                  key={item.id}
-                  shadow="sm"
-                  p="lg"
-                  radius="md"
-                  withBorder
-                >
-                  <Card.Section>
-                    <Image
-                      src={item.image?.link || '/images/placeholder-small.jpg'}
-                      height={200}
-                      alt={item.judul}
-                      fit="cover"
-                      loading="lazy"
-                    />
-                  </Card.Section>
+          <Transition mounted={!loadingGrid} transition="fade" duration={200} timingFunction="ease-out">
+            {(styles) =>
+              loadingGrid ? (
+                <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl">
+                  {Array(3)
+                    .fill(0)
+                    .map((_, i) => (
+                      <Skeleton key={i} h={300} radius="md" />
+                    ))}
+                </SimpleGrid>
+              ) : paginatedNews.length === 0 ? (
+                <Text c="dimmed" ta="center">
+                  Tidak ada gotong royong ditemukan.
+                </Text>
+              ) : (
+                <Box style={styles}>
+                  <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl" verticalSpacing="xl">
+                    {paginatedNews.map((item) => (
+                      <Card key={item.id} shadow="sm" p="lg" radius="md" withBorder>
+                        <Card.Section>
+                          <Image
+                            src={item.image?.link || '/images/placeholder-small.jpg'}
+                            height={200}
+                            alt={item.judul}
+                            fit="cover"
+                            loading="lazy"
+                          />
+                        </Card.Section>
 
-                  <Badge color="blue" variant="light" mt="md">
-                    {item.kategoriKegiatan?.nama || 'Gotong royong'}
-                  </Badge>
+                        <Badge color="blue" variant="light" mt="md">
+                          {item.kategoriKegiatan?.nama || 'Gotong royong'}
+                        </Badge>
 
-                  <Text fw={600} size="lg" mt="sm" lineClamp={2}>{item.judul}</Text>
+                        <Text fw={600} size="lg" mt="sm" lineClamp={2}>
+                          {item.judul}
+                        </Text>
 
-                  <Text size="sm" c="dimmed" lineClamp={3} mt="xs" dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat }} />
+                        <Text
+                          size="sm"
+                          c="dimmed"
+                          lineClamp={3}
+                          mt="xs"
+                          dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat }}
+                        />
 
-                  <Flex align="center" justify="apart" mt="md" gap="xs">
-                    <Text size="xs" c="dimmed">
-                      {new Date(item.createdAt).toLocaleDateString('id-ID', {
-                        day: 'numeric',
-                        month: 'short',
-                        year: 'numeric'
-                      })}
-                    </Text>
-                    
-                    <Button p="xs" variant="light" rightSection={<IconArrowRight size={16} />} onClick={() => router.push(`/darmasaba/lingkungan/gotong-royong/${item.kategoriKegiatan?.nama}/${item.id}`)}>Baca Selengkapnya</Button>
-                  </Flex>
-                </Card>
-              ))}
-            </SimpleGrid>
-          )}
+                        <Flex align="center" justify="apart" mt="md" gap="xs">
+                          <Text size="xs" c="dimmed">
+                            {new Date(item.createdAt).toLocaleDateString('id-ID', {
+                              day: 'numeric',
+                              month: 'short',
+                              year: 'numeric',
+                            })}
+                          </Text>
 
-          {/* Pagination hanya untuk berita terbaru */}
+                          <Button
+                            p="xs"
+                            variant="light"
+                            rightSection={<IconArrowRight size={16} />}
+                            onClick={() =>
+                              router.push(
+                                `/darmasaba/lingkungan/gotong-royong/${item.kategoriKegiatan?.nama}/${item.id}`
+                              )
+                            }
+                          >
+                            Baca Selengkapnya
+                          </Button>
+                        </Flex>
+                      </Card>
+                    ))}
+                  </SimpleGrid>
+                </Box>
+              )
+            }
+          </Transition>
+
+          {/* Pagination */}
           <Center mt="xl">
             <Pagination
               total={totalPages}
@@ -176,9 +284,6 @@ function Page() {
           </Center>
         </Box>
       </Container>
-    </Box>
+    </MotionBox>
   );
 }
-
-export default Page;
-

src/app/darmasaba/(pages)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx

@@ -1,9 +1,9 @@
 'use client'
 import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
 import colors from '@/con/colors';
-import { Box, Center, Flex, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { Box, Center, Flex, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
-import { Icon, IconChartLine, IconClipboardTextFilled, IconLeaf, IconRecycle, IconScale, IconSearch, IconTent, IconTrashFilled, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
+import { Icon, IconChartLine, IconClipboardTextFilled, IconLeaf, IconRecycle, IconRoute, IconScale, IconSearch, IconTent, IconTrashFilled, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
 import React, { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
@@ -122,20 +122,28 @@ function Page() {
               <Stack gap="md">
                 {data2?.map((v, k) => (
                   <Paper key={k} p="md" withBorder radius="md">
-                    <Text fw="bold" fz="lg">{v.namaTempatMaps}</Text>
-                    <Text c="dimmed" fz="sm" mb="sm">{v.alamat}</Text>
-                    {v.lat && v.lng ? (
-                      <a
-                        href={`https://www.google.com/maps/dir/?api=1&destination=${v.lat},${v.lng}`}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        style={{ color: colors['blue-button'], textDecoration: 'none' }}
-                      >
-                        <Text fz="sm">📌 Buka di Google Maps</Text>
-                      </a>
-                    ) : (
-                      <Text c="dimmed" fz="sm">Koordinat belum tersedia</Text>
-                    )}
+                    <Group justify='space-between'>
+                      <Box>
+                        <Text fw="bold" fz="lg">{v.namaTempatMaps}</Text>
+                        <Text c="dimmed" fz="sm" mb="sm">{v.alamat}</Text>
+                      </Box>
+                      <Box>
+                        <IconRoute color={colors['blue-button']} size={30} />
+                        <Text fw={"bold"} fz="sm" c={colors['blue-button']}>Rute</Text>
+                      </Box>
+                    </Group>
+                        {v.lat && v.lng ? (
+                          <a
+                            href={`https://www.google.com/maps/dir/?api=1&destination=${v.lat},${v.lng}`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            style={{ color: colors['blue-button'], textDecoration: 'none' }}
+                          >
+                            <Text fz="sm">📌 Lihat Peta Lebih Besar</Text>
+                          </a>
+                        ) : (
+                          <Text c="dimmed" fz="sm">Koordinat belum tersedia</Text>
+                        )}
                   </Paper>
                 ))}
               </Stack>

src/app/darmasaba/(pages)/lingkungan/program-penghijauan/page.tsx

@@ -66,8 +66,11 @@ function Page() {
             />
           </Group>
         </Box>
-        <Text c="dimmed" fz={{ base: 'sm', md: 'lg' }} mt="sm">
-          Mari berpartisipasi menanam dan merawat pohon untuk menciptakan lingkungan hijau, sehat, dan seimbang bagi seluruh warga desa.
+        <Text fz="md" mt="sm">
+          Mari berpartisipasi menanam dan merawat pohon untuk menciptakan lingkungan hijau,
+        </Text>
+        <Text fz="md">
+          sehat, dan seimbang bagi seluruh warga desa.
         </Text>
       </Box>
       <Box px={{ base: 'md', md: 100 }} pb={60}>

src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/page.tsx

@@ -74,7 +74,7 @@ function Page() {
             <Title fz={55} fw={900} c={colors['blue-button']}>
               Wujudkan Mimpi Pendidikanmu di Desa Darmasaba
             </Title>
-            <Text fz="lg" mt="md" c="dimmed">
+            <Text fz="lg" mt="md" fw={"bold"}>
               Program beasiswa untuk mendukung pendidikan berkualitas bagi generasi muda Desa Darmasaba.
             </Text>
             <Group mt="xl">

src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/pelajari-lebih-lanjut/page.tsx

@@ -15,7 +15,7 @@ import {
   Timeline,
   Title
 } from '@mantine/core';
-import { IconArrowLeft } from '@tabler/icons-react';
+import { IconArrowLeft, IconChecklist, IconInfoCircle, IconQuote, IconSchool, IconTimeline, IconUserPlus } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useDisclosure } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
@@ -69,10 +69,11 @@ export default function BeasiswaPage() {
       {/* Hero Section */}
       <Container size="lg" py="xl">
         <Stack gap="md" maw={600}>
-          <Title order={2} c="blue.9">
-            Program Beasiswa Pendidikan Desa Darmasaba
-          </Title>
-          <Text c="dimmed">
+          <Group>
+            <IconSchool size={30} color={colors["blue-button"]} />
+            <Title order={2}>Program Beasiswa Pendidikan Desa Darmasaba</Title>
+          </Group>
+          <Text>
             Program ini bertujuan untuk mendukung pendidikan generasi muda di Desa Darmasaba
             agar dapat melanjutkan studi ke jenjang lebih tinggi dengan dukungan finansial dan pendampingan.
           </Text>
@@ -81,21 +82,35 @@ export default function BeasiswaPage() {
 
       {/* Tentang Program */}
       <Container size="lg" py="xl">
-        <Title order={3} mb="sm">
-          Tentang Program
-        </Title>
+        <Group mb="sm">
+          <IconInfoCircle size={24} color={colors["blue-button"]} />
+          <Title order={3}>Tentang Program</Title>
+        </Group>
         <Text>
           Program Beasiswa Desa Darmasaba adalah inisiatif pemerintah desa untuk meningkatkan akses
           pendidikan bagi siswa berprestasi dan kurang mampu. Melalui program ini, desa memberikan bantuan
           biaya sekolah, bimbingan akademik, serta pelatihan soft skill bagi peserta terpilih.
         </Text>
+
+        {/* Tambahkan info tahun berjalan di sini */}
+        <Paper mt="md" p="md" radius="lg" shadow="xs" bg="#f8fbff" withBorder>
+          <Text fw={500} c={colors["blue-button"]}>
+            📅 Periode Beasiswa Tahun 2025
+          </Text>
+          <Text fz="sm" c="dimmed">
+            Pendaftaran beasiswa dibuka mulai <strong>1 Januari 2025</strong> dan ditutup pada
+            <strong>31 Mei 2025</strong>.
+            Pengumuman hasil seleksi akan diumumkan pada pertengahan Juni 2025 melalui website resmi Desa Darmasaba.
+          </Text>
+        </Paper>
       </Container>
 
       {/* Syarat dan Ketentuan */}
       <Container size="lg" py="xl">
-        <Title order={3} mb="sm">
-          Syarat Pendaftaran
-        </Title>
+        <Group mb="sm">
+          <IconChecklist size={24} color={colors["blue-button"]} />
+          <Title order={3}>Syarat Pendaftaran</Title>
+        </Group>
 
         <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg">
           <Paper shadow="sm" p="md" radius="lg" withBorder>
@@ -123,42 +138,61 @@ export default function BeasiswaPage() {
 
       {/* Proses Seleksi */}
       <Container size="lg" py="xl">
-        <Title order={3} mb="sm">
-          Proses Seleksi
-        </Title>
+        <Group mb="sm">
+          <IconTimeline size={24} color={colors["blue-button"]} />
+          <Title order={3}>Proses Seleksi</Title>
+        </Group>
 
         <Timeline active={4} bulletSize={24} lineWidth={2}>
           <Timeline.Item title="Pendaftaran Online">
             <Text c="dimmed" size="sm">
               Calon peserta mengisi formulir pendaftaran dan mengunggah dokumen pendukung.
             </Text>
+            <Text size="sm" fw={500} c={colors["blue-button"]} mt={4}>
+              ⏰ Estimasi waktu: 1 Februari – 31 Mei 2025
+            </Text>
           </Timeline.Item>
 
           <Timeline.Item title="Seleksi Administrasi">
             <Text c="dimmed" size="sm">
               Panitia memverifikasi kelengkapan dan validitas berkas.
             </Text>
+            <Text size="sm" fw={500} c={colors["blue-button"]} mt={4}>
+              ⏰ Estimasi waktu: 5–7 hari kerja setelah penutupan pendaftaran
+            </Text>
           </Timeline.Item>
 
           <Timeline.Item title="Wawancara dan Penilaian">
             <Text c="dimmed" size="sm">
               Peserta yang lolos administrasi akan diundang untuk wawancara langsung dengan tim seleksi.
             </Text>
+            <Text size="sm" fw={500} c={colors["blue-button"]} mt={4}>
+              ⏰ Estimasi waktu: 7–10 hari kerja setelah pengumuman seleksi administrasi
+            </Text>
           </Timeline.Item>
 
           <Timeline.Item title="Pengumuman Penerima">
             <Text c="dimmed" size="sm">
               Daftar penerima beasiswa diumumkan melalui website resmi Desa Darmasaba.
             </Text>
+            <Text size="sm" fw={500} c={colors["blue-button"]} mt={4}>
+              ⏰ Estimasi waktu: 5 hari kerja setelah tahap wawancara selesai
+            </Text>
           </Timeline.Item>
         </Timeline>
+
+        <Text c="dimmed" size="sm" mt="lg" ta="center">
+          🗓️ Total estimasi keseluruhan proses: sekitar 3–4 minggu setelah penutupan pendaftaran
+        </Text>
       </Container>
 
+
       {/* Testimoni */}
       <Container size="lg" py="xl">
-        <Title order={3} mb="sm">
-          Cerita Sukses Penerima Beasiswa
-        </Title>
+        <Group mb="sm">
+          <IconQuote size={24} color={colors["blue-button"]} />
+          <Title order={3}>Cerita Sukses Penerima Beasiswa</Title>
+        </Group>
 
         <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
           <Paper shadow="md" p="lg" radius="lg">
@@ -183,7 +217,10 @@ export default function BeasiswaPage() {
 
       {/* CTA Akhir */}
       <Container size="lg" py="xl" ta="center">
-        <Title order={3}>Siap Bergabung dengan Program Ini?</Title>
+        <Group justify="center" mb="sm">
+          <IconUserPlus size={28} color={colors["blue-button"]} />
+          <Title order={3}>Siap Bergabung dengan Program Ini?</Title>
+        </Group>
         <Text c="dimmed" mb="md">
           Segera daftar dan wujudkan mimpimu bersama Desa Darmasaba.
         </Text>

src/app/darmasaba/(pages)/pendidikan/bimbingan-belajar-desa/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
 import colors from '@/con/colors';
-import { Box, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip, Divider, Badge } from '@mantine/core';
+import { Box, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip, Divider, Badge, Group } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
 import { IconMapPin, IconCalendarTime, IconBook2 } from '@tabler/icons-react';
@@ -49,46 +49,46 @@ function Page() {
         <SimpleGrid cols={{ base: 1, md: 3 }} spacing="xl">
           <Paper p="xl" radius="lg" shadow="md" withBorder bg={colors['white-trans-1']}>
             <Stack gap="sm">
-              <Box>
-                <Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
-                  {stateTujuanProgram.findById.data?.judul}
-                </Badge>
+              <Group>
                 <Tooltip label="Gambaran manfaat utama program" position="top-start" withArrow>
                   <Box>
                     <IconBook2 size={36} stroke={1.5} color={colors['blue-button']} />
                   </Box>
                 </Tooltip>
-              </Box>
+                <Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
+                  {stateTujuanProgram.findById.data?.judul}
+                </Badge>
+              </Group>
               <Text fz="md" style={{wordBreak: "break-word", whiteSpace: "normal"}} lh={1.6} dangerouslySetInnerHTML={{ __html: stateTujuanProgram.findById.data?.deskripsi }} />
             </Stack>
           </Paper>
           <Paper p="xl" radius="lg" shadow="md" withBorder bg={colors['white-trans-1']}>
             <Stack gap="sm">
-              <Box>
-                <Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
-                  {stateLokasiDanJadwal.findById.data?.judul}
-                </Badge>
+              <Group>
                 <Tooltip label="Tempat dan waktu pelaksanaan" position="top-start" withArrow>
                   <Box>
                     <IconMapPin size={36} stroke={1.5} color={colors['blue-button']} />
                   </Box>
                 </Tooltip>
-              </Box>
+                <Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
+                  {stateLokasiDanJadwal.findById.data?.judul}
+                </Badge>
+              </Group>
               <Text fz="md" lh={1.6} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: stateLokasiDanJadwal.findById.data?.deskripsi }} />
             </Stack>
           </Paper>
           <Paper p="xl" radius="lg" shadow="md" withBorder bg={colors['white-trans-1']}>
             <Stack gap="sm">
-              <Box>
-                <Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
-                  {stateFasilitas.findById.data?.judul}
-                </Badge>
+              <Group>
                 <Tooltip label="Sarana yang disediakan untuk peserta" position="top-start" withArrow>
                   <Box>
                     <IconCalendarTime size={36} stroke={1.5} color={colors['blue-button']} />
                   </Box>
                 </Tooltip>
-              </Box>
+                <Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
+                  {stateFasilitas.findById.data?.judul}
+                </Badge>
+              </Group>
               <Text fz="md" lh={1.6} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: stateFasilitas.findById.data?.deskripsi }} />
             </Stack>
           </Paper>

src/app/darmasaba/(pages)/pendidikan/data-pendidikan/page.tsx

@@ -92,7 +92,7 @@ function Page() {
                   cursor={{ fill: 'var(--mantine-color-gray-1)' }}
                 />
                 <Legend />
-                <Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah Pendidikan" radius={[8, 8, 0, 0]} />
+                <Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah Penduduk dengan Pendidikan" radius={[8, 8, 0, 0]} />
               </BarChart>
             </ResponsiveContainer>
           </Paper>

src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/pengajar/page.tsx

@@ -84,7 +84,7 @@ function Page({ params }: PageProps) {
               <TableTr>
                 <TableTh w="30%">Nama Pengajar</TableTh>
                 <TableTh w="30%">Nama Lembaga</TableTh>
-                <TableTh w="40%">Jenjang Pendidikan</TableTh>
+                <TableTh w="40%">Mengajar Di Jenjang Pendidikan</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -95,7 +95,7 @@ function Page({ params }: PageProps) {
                   <TableTd>{item.lembaga.jenjangPendidikan?.nama || '-'}</TableTd>
                 </TableTr>
               ))}
-            </TableTbody>
+            </TableTbody> 
           </Table>
         )}
       </Paper>

src/app/darmasaba/(pages)/pendidikan/pendidikan-non-formal/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
 import colors from '@/con/colors';
-import { Box, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
+import { Box, Group, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
 import { IconMapPin, IconTarget, IconBook2 } from '@tabler/icons-react';
@@ -43,7 +43,7 @@ function Page() {
             Pendidikan Non Formal
           </Title>
           <Text ta="center" fz="lg" lh={1.6} c="black" maw={800} mx="auto">
-            Bentuk pendidikan di luar sekolah yang terstruktur, bertujuan memberikan keterampilan, pengetahuan, dan pengembangan karakter masyarakat dari berbagai usia serta latar belakang.
+          Pendidikan non formal merupakan bentuk pendidikan di luar sekolah yang terstruktur, bertujuan untuk memberikan keterampilan, pengetahuan, serta pengembangan karakter masyarakat dari berbagai usia dan latar belakang.
           </Text>
         </Box>
         <SimpleGrid
@@ -59,13 +59,17 @@ function Page() {
             withBorder
           >
             <Stack>
-              <Tooltip label="Fokus utama program" withArrow>
-                <Title order={2} fw="bold" c={colors['blue-button']} mb="xs" flex="center">
-                  <IconTarget size={28} style={{ marginRight: 8 }} />
+              <Group align="center" gap={8} wrap="nowrap">
+                <Tooltip label="Fokus utama program" withArrow>
+                  <Box display="flex" style={{ alignItems: "center" }}>
+                    <IconTarget color={colors['blue-button']} size={26} />
+                  </Box>
+                </Tooltip>
+                <Text fw={700} fz="xl" c={colors['blue-button']}>
                   {stateTujuanPendidikanNonFormal.findById.data?.judul}
-                </Title>
-              </Tooltip>
-              <Text fz="md" lh={1.7} c="dark" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: stateTujuanPendidikanNonFormal.findById.data?.deskripsi }} />
+                </Text>
+              </Group>
+              <Text fz="md" lh={1.7} c="dark" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: stateTujuanPendidikanNonFormal.findById.data?.deskripsi }} />
             </Stack>
           </Paper>
           <Paper
@@ -76,13 +80,17 @@ function Page() {
             withBorder
           >
             <Stack>
-              <Tooltip label="Lokasi pelaksanaan kegiatan" withArrow>
-                <Title order={2} fw="bold" c={colors['blue-button']} mb="xs" flex="center">
-                  <IconMapPin size={28} style={{ marginRight: 8 }} />
+              <Group align="center" gap={8} wrap="nowrap">
+                <Tooltip label="Lokasi pelaksanaan kegiatan" withArrow>
+                  <Box display="flex" style={{ alignItems: "center" }}>
+                    <IconMapPin color={colors['blue-button']} size={26} />
+                  </Box>
+                </Tooltip>
+                <Text fw={700} fz="xl" c={colors['blue-button']}>
                   {stateTempatKegiatan.findById.data?.judul}
-                </Title>
-              </Tooltip>
-              <Text fz="md" style={{wordBreak: "break-word", whiteSpace: "normal"}} lh={1.7} c="dark" dangerouslySetInnerHTML={{ __html: stateTempatKegiatan.findById.data?.deskripsi }} />
+                </Text>
+              </Group>
+              <Text fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} lh={1.7} c="dark" dangerouslySetInnerHTML={{ __html: stateTempatKegiatan.findById.data?.deskripsi }} />
             </Stack>
           </Paper>
         </SimpleGrid>
@@ -95,13 +103,17 @@ function Page() {
             withBorder
           >
             <Stack>
-              <Tooltip label="Ragam jenis program yang tersedia" withArrow>
-                <Title order={2} fw="bold" c={colors['blue-button']} mb="xs" flex="center">
-                  <IconBook2 size={28} style={{ marginRight: 8 }} />
+              <Group align="center" gap={8} wrap="nowrap">
+                <Tooltip label="Ragam jenis program yang tersedia" withArrow>
+                  <Box display="flex" style={{ alignItems: "center" }}>
+                    <IconBook2 color={colors['blue-button']} size={26} />
+                  </Box>
+                </Tooltip>
+                <Text fw={700} fz="xl" c={colors['blue-button']}>
                   {stateJenisProgram.findById.data?.judul}
-                </Title>
-              </Tooltip>
-              <Text fz="md" lh={1.7} c="dark" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: stateJenisProgram.findById.data?.deskripsi }} />
+                </Text>
+              </Group>
+              <Text fz="md" lh={1.7} c="dark" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: stateJenisProgram.findById.data?.deskripsi }} />
             </Stack>
           </Paper>
         </Box>

src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/_lib/modalPeminjaman.tsx

@@ -16,16 +16,11 @@ import {
   TextInput,
 } from '@mantine/core';
 import { DateInput } from '@mantine/dates';
-import {
-  IconArrowRight,
-  IconBook2,
-  IconUser
-} from '@tabler/icons-react';
+import { IconArrowRight, IconBook2, IconUser } from '@tabler/icons-react';
 import { useEffect } from 'react';
 import { toast } from 'react-toastify';
 import { useSnapshot } from 'valtio';
 
-
 export interface ModalPeminjamanProps {
   opened: boolean;
   onClose: () => void;
@@ -45,11 +40,12 @@ export default function ModalPeminjaman({
 }: ModalPeminjamanProps) {
   const snap = useSnapshot(perpustakaanDigitalState.peminjamanBuku);
 
-  // reset form setiap modal dibuka
+  const BATAS_HARI_PINJAM = 4;
+
+  // Reset form setiap modal dibuka
   useEffect(() => {
     if (opened && buku) {
       perpustakaanDigitalState.peminjamanBuku.create.form = {
-        ...perpustakaanDigitalState.peminjamanBuku.create.form,
         bukuId: buku.id,
         nama: '',
         noTelp: '',
@@ -99,7 +95,14 @@ export default function ModalPeminjaman({
                 </Badge>
               )}
 
-              <Text fz="sm" c="dimmed" lineClamp={3} dangerouslySetInnerHTML={{ __html: buku.deskripsi || 'Tidak ada deskripsi' }} />
+              <Text
+                fz="sm"
+                c="dimmed"
+                lineClamp={3}
+                dangerouslySetInnerHTML={{
+                  __html: buku.deskripsi || 'Tidak ada deskripsi',
+                }}
+              />
             </Stack>
           </Group>
 
@@ -112,7 +115,8 @@ export default function ModalPeminjaman({
             leftSection={<IconUser size={16} />}
             value={snap.create.form.nama}
             onChange={(e) =>
-              (perpustakaanDigitalState.peminjamanBuku.create.form.nama = e.currentTarget.value)
+              (perpustakaanDigitalState.peminjamanBuku.create.form.nama =
+                e.currentTarget.value)
             }
             required
           />
@@ -123,7 +127,8 @@ export default function ModalPeminjaman({
             leftSection={<IconUser size={16} />}
             value={snap.create.form.noTelp}
             onChange={(e) =>
-              (perpustakaanDigitalState.peminjamanBuku.create.form.noTelp = e.currentTarget.value)
+              (perpustakaanDigitalState.peminjamanBuku.create.form.noTelp =
+                e.currentTarget.value)
             }
             required
           />
@@ -134,11 +139,13 @@ export default function ModalPeminjaman({
             leftSection={<IconUser size={16} />}
             value={snap.create.form.alamat}
             onChange={(e) =>
-              (perpustakaanDigitalState.peminjamanBuku.create.form.alamat = e.currentTarget.value)
+              (perpustakaanDigitalState.peminjamanBuku.create.form.alamat =
+                e.currentTarget.value)
             }
             required
           />
 
+          {/* === OTOMATIS SET BATAS DAN TANGGAL KEMBALI === */}
           <DateInput
             label="Tanggal Pinjam"
             placeholder="Pilih tanggal pinjam"
@@ -148,64 +155,83 @@ export default function ModalPeminjaman({
                 : null
             }
             onChange={(date) => {
-              perpustakaanDigitalState.peminjamanBuku.create.form.tanggalPinjam = 
-                date ? new Date(date).toISOString() : '';
+              if (date) {
+                const tanggalPinjam = new Date(date);
+
+                // simpan tanggal pinjam
+                perpustakaanDigitalState.peminjamanBuku.create.form.tanggalPinjam =
+                  tanggalPinjam.toISOString();
+
+                // hitung batas +4 hari
+                const batasKembali = new Date(tanggalPinjam);
+                batasKembali.setDate(batasKembali.getDate() + BATAS_HARI_PINJAM);
+
+                // set batas & tanggal kembali otomatis
+                perpustakaanDigitalState.peminjamanBuku.create.form.batasKembali =
+                  batasKembali.toISOString();
+                perpustakaanDigitalState.peminjamanBuku.create.form.tanggalKembali =
+                  batasKembali.toISOString();
+
+                toast.info(
+                  `Batas pengembalian otomatis diset ke ${batasKembali.toLocaleDateString('id-ID')} (+${BATAS_HARI_PINJAM} hari).`
+                );
+              } else {
+                perpustakaanDigitalState.peminjamanBuku.create.form.tanggalPinjam = '';
+                perpustakaanDigitalState.peminjamanBuku.create.form.batasKembali = '';
+                perpustakaanDigitalState.peminjamanBuku.create.form.tanggalKembali = '';
+              }
             }}
             required
           />
 
           <Box>
-            <Text>Catatan</Text>
+            <Text fw={500}>Catatan</Text>
             <CreateEditor
               value={snap.create.form.catatan}
-              onChange={(e) =>
-                (perpustakaanDigitalState.peminjamanBuku.create.form.catatan = e)
+              onChange={(val) =>
+                (perpustakaanDigitalState.peminjamanBuku.create.form.catatan =
+                  val)
               }
             />
           </Box>
 
-          <DateInput
-            label="Tanggal Kembali"
-            placeholder="Pilih tanggal kembali"
-            value={
-              snap.create.form.tanggalKembali
-                ? new Date(snap.create.form.tanggalKembali)
-                : null
-            }
-            onChange={(date) => {
-              perpustakaanDigitalState.peminjamanBuku.create.form.tanggalKembali = 
-                date ? new Date(date).toISOString() : '';
-            }}
-            required
-          />
-          
           <DateInput
             label="Batas Pengembalian"
-            placeholder="Pilih tanggal kembali"
+            placeholder="Otomatis diatur +4 hari dari tanggal pinjam"
             value={
               snap.create.form.batasKembali
                 ? new Date(snap.create.form.batasKembali)
                 : null
             }
-            onChange={(date) => {
-              perpustakaanDigitalState.peminjamanBuku.create.form.batasKembali = 
-                date ? new Date(date).toISOString() : '';
-            }}
-            required
+            disabled
+            readOnly
           />
 
+          <DateInput
+            label="Tanggal Kembali"
+            placeholder="Otomatis sama dengan batas pengembalian"
+            value={
+              snap.create.form.tanggalKembali
+                ? new Date(snap.create.form.tanggalKembali)
+                : null
+            }
+            disabled
+            readOnly
+          />
 
           <Button
             onClick={handleSubmit}
             loading={snap.create.loading}
             disabled={
-              !snap.create.form.nama || 
-              !snap.create.form.tanggalPinjam || 
-              !snap.create.form.batasKembali ||
-              !snap.create.form.tanggalKembali
+              !snap.create.form.nama || !snap.create.form.tanggalPinjam
             }
             rightSection={<IconArrowRight size={16} />}
             radius="xl"
+            style={{
+              background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+              color: '#fff',
+              boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+            }}
           >
             Pinjam Buku
           </Button>