Fix Tampilab DesaAntiKorupsi Landing Page Mobile

src/app/admin/(dashboard)/_state/inovasi/layanan-online-desa.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -54,19 +55,20 @@ const administrasiOnline = proxy({
   },
   findMany: {
     data: null as Array<
-    Prisma.AdministrasiOnlineGetPayload<{
-      include: {
-        jenisLayanan: true;
-      };
-    }>
-  > | null,
+      Prisma.AdministrasiOnlineGetPayload<{
+        include: {
+          jenisLayanan: true;
+        };
+      }>
+    > | null,
     page: 1,
     totalPages: 1,
     loading: false,
-
-    async load(page = 1, limit = 10) {
+    search: '',
+    async load(page = 1, limit = 10, search = '') {
       administrasiOnline.findMany.loading = true;
       administrasiOnline.findMany.page = page;
+      administrasiOnline.findMany.search = search;
       try {
         const res =
           await ApiFetch.api.inovasi.layananonlinedesa.administrasionline[
@@ -75,6 +77,7 @@ const administrasiOnline = proxy({
             query: {
               page,
               limit,
+              search,
             },
           });
 
@@ -91,10 +94,10 @@ const administrasiOnline = proxy({
   },
   findUnique: {
     data: null as Prisma.AdministrasiOnlineGetPayload<{
-        include: {
-          jenisLayanan: true;
-        };
-      }> | null,
+      include: {
+        jenisLayanan: true;
+      };
+    }> | null,
     async load(id: string) {
       try {
         const res = await fetch(
@@ -199,13 +202,37 @@ const jenisLayanan = proxy({
       nama: string;
       deskripsi: string;
     }> | null,
-    async load() {
-      const res =
-        await ApiFetch.api.inovasi.layananonlinedesa.administrasionline.jenislayanan[
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      jenisLayanan.findMany.loading = true; // ✅ Akses langsung via nama path
+      jenisLayanan.findMany.page = page;
+      jenisLayanan.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.inovasi.layananonlinedesa.administrasionline.jenislayanan[
           "find-many"
-        ].get();
-      if (res.status === 200) {
-        jenisLayanan.findMany.data = res.data?.data ?? [];
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          jenisLayanan.findMany.data = res.data.data ?? [];
+          jenisLayanan.findMany.totalPages =
+            res.data.totalPages ?? 1;
+        } else {
+          jenisLayanan.findMany.data = [];
+          jenisLayanan.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch jenis layanan paginated:", err);
+        jenisLayanan.findMany.data = [];
+        jenisLayanan.findMany.totalPages = 1;
+      } finally {
+        jenisLayanan.findMany.loading = false;
       }
     },
   },
@@ -403,7 +430,9 @@ const templatePengaduanMasyarakatForm = z.object({
   nik: z.string().min(1, "NIK minimal 1 karakter"),
   judulPengaduan: z.string().min(1, "Judul pengaduan minimal 1 karakter"),
   lokasiKejadian: z.string().min(1, "Lokasi kejadian minimal 1 karakter"),
-  deskripsiPengaduan: z.string().min(1, "Deskripsi pengaduan minimal 1 karakter"),
+  deskripsiPengaduan: z
+    .string()
+    .min(1, "Deskripsi pengaduan minimal 1 karakter"),
   jenisPengaduanId: z.string().min(1, "Jenis pengaduan minimal 1 karakter"),
   imageId: z.string().min(1, "Image minimal 1 karakter"),
 });
@@ -455,13 +484,13 @@ const pengaduanMasyarakat = proxy({
   },
   findMany: {
     data: null as Array<
-    Prisma.PengaduanMasyarakatGetPayload<{
-      include: {
-        jenisPengaduan: true;
-        image: true;
-      };
-    }>
-  > | null,
+      Prisma.PengaduanMasyarakatGetPayload<{
+        include: {
+          jenisPengaduan: true;
+          image: true;
+        };
+      }>
+    > | null,
     page: 1,
     totalPages: 1,
     loading: false,
@@ -493,11 +522,11 @@ const pengaduanMasyarakat = proxy({
   },
   findUnique: {
     data: null as Prisma.PengaduanMasyarakatGetPayload<{
-        include: {
-          jenisPengaduan: true;
-          image: true;
-        };
-      }> | null,
+      include: {
+        jenisPengaduan: true;
+        image: true;
+      };
+    }> | null,
     async load(id: string) {
       try {
         const res = await fetch(
@@ -507,7 +536,10 @@ const pengaduanMasyarakat = proxy({
           const data = await res.json();
           pengaduanMasyarakat.findUnique.data = data.data ?? null;
         } else {
-          console.error("Failed to fetch pengaduan masyarakat:", res.statusText);
+          console.error(
+            "Failed to fetch pengaduan masyarakat:",
+            res.statusText
+          );
           pengaduanMasyarakat.findUnique.data = null;
         }
       } catch (error) {
@@ -542,7 +574,9 @@ const pengaduanMasyarakat = proxy({
           );
           await pengaduanMasyarakat.findMany.load(); // refresh list
         } else {
-          toast.error(result?.message || "Gagal menghapus pengaduan masyarakat");
+          toast.error(
+            result?.message || "Gagal menghapus pengaduan masyarakat"
+          );
         }
       } catch (error) {
         console.error("Gagal delete:", error);
@@ -567,7 +601,9 @@ const jenisPengaduan = proxy({
     form: { ...defaultJenisPengaduanForm },
     loading: false,
     async create() {
-      const cek = templateJenisPengaduanForm.safeParse(jenisPengaduan.create.form);
+      const cek = templateJenisPengaduanForm.safeParse(
+        jenisPengaduan.create.form
+      );
       if (!cek.success) {
         const err = `[${cek.error.issues
           .map((v) => `${v.path.join(".")}`)
@@ -693,7 +729,7 @@ const jenisPengaduan = proxy({
           const data = result.data;
           this.id = data.id;
           this.form = {
-            nama: data.nama
+            nama: data.nama,
           };
           return data;
         } else {
@@ -709,7 +745,9 @@ const jenisPengaduan = proxy({
     },
 
     async update() {
-      const cek = templateJenisPengaduanForm.safeParse(jenisPengaduan.edit.form);
+      const cek = templateJenisPengaduanForm.safeParse(
+        jenisPengaduan.edit.form
+      );
       if (!cek.success) {
         const err = `[${cek.error.issues
           .map((v) => `${v.path.join(".")}`)
@@ -759,7 +797,9 @@ const jenisPengaduan = proxy({
             await jenisPengaduan.findMany.load(); // refresh list
             return true;
           } else {
-            throw new Error(result.message || "Gagal mengupdate jenis pengaduan");
+            throw new Error(
+              result.message || "Gagal mengupdate jenis pengaduan"
+            );
           }
         } catch (error) {
           // If JSON parsing fails, try to get the response text for better error messages
@@ -792,7 +832,6 @@ const jenisPengaduan = proxy({
   },
 });
 
-
 const layananonlineDesa = proxy({
   administrasiOnline,
   jenisLayanan,

src/app/admin/(dashboard)/inovasi/layanan-online-desa/_lib/layoutTabs.tsx

@@ -1,72 +1,148 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import {
+  ScrollArea,
+  Stack,
+  Tabs,
+  TabsList,
+  TabsPanel,
+  TabsTab,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import {
+  IconFileText,
+  IconListDetails,
+  IconMessage,
+  IconAlertCircle
+} from '@tabler/icons-react';
 
 function LayoutTabsLayananOnlineDesa({ children }: { children: React.ReactNode }) {
-    const router = useRouter()
-    const pathname = usePathname()
-    const tabs = [
-        {
-            label: "Administrasi Online",
-            value: "administrasionline",
-            href: "/admin/inovasi/layanan-online-desa/administrasi-online"
-        },
-        {
-            label: "Jenis Layanan",
-            value: "jenislayanan",
-            href: "/admin/inovasi/layanan-online-desa/jenis-layanan"
-        },
-        {
-            label: "Pengaduan Masyarakat",
-            value: "pengaduanmasyarakat",
-            href: "/admin/inovasi/layanan-online-desa/pengaduan-masyarakat"
-        },
-        {
-            label: "Jenis Pengaduan",
-            value: "jenispengaduan",
-            href: "/admin/inovasi/layanan-online-desa/jenis-pengaduan"
-        }
-    ];
-    const curentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+  const router = useRouter();
+  const pathname = usePathname();
 
-    const handleTabChange = (value: string | null) => {
-        const tab = tabs.find(t => t.value === value)
-        if (tab) {
-            router.push(tab.href)
-        }
-        setActiveTab(value)
+  // ✅ Tambahin icon + tooltip biar konsisten sama versi berita
+  const tabs = [
+    {
+      label: "Administrasi Online",
+      value: "administrasionline",
+      href: "/admin/inovasi/layanan-online-desa/administrasi-online",
+      icon: <IconFileText size={18} stroke={1.8} />,
+      tooltip: "Kelola administrasi online desa"
+    },
+    {
+      label: "Jenis Layanan",
+      value: "jenislayanan",
+      href: "/admin/inovasi/layanan-online-desa/jenis-layanan",
+      icon: <IconListDetails size={18} stroke={1.8} />,
+      tooltip: "Daftar jenis layanan desa"
+    },
+    {
+      label: "Pengaduan Masyarakat",
+      value: "pengaduanmasyarakat",
+      href: "/admin/inovasi/layanan-online-desa/pengaduan-masyarakat",
+      icon: <IconMessage size={18} stroke={1.8} />,
+      tooltip: "Laporan pengaduan masyarakat"
+    },
+    {
+      label: "Jenis Pengaduan",
+      value: "jenispengaduan",
+      href: "/admin/inovasi/layanan-online-desa/jenis-pengaduan",
+      icon: <IconAlertCircle size={18} stroke={1.8} />,
+      tooltip: "Kategori/jenis pengaduan masyarakat"
     }
+  ];
 
-    useEffect(() => {
-        const match = tabs.find(tab => tab.href === pathname)
-        if (match) {
-            setActiveTab(match.value)
-        }
-    }, [pathname])
+  const currentTab = tabs.find(tab => tab.href === pathname);
+  const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
 
-    return (
-        <Stack>
-            <Title order={3}>Layanan Online Desa</Title>
-            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
-                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-                    {tabs.map((e, i) => (
-                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
-                    ))}
-                </TabsList>
-                {tabs.map((e, i) => (
-                    <TabsPanel key={i} value={e.value}>
-                        {/* Konten dummy, bisa diganti tergantung routing */}
-                        <></>
-                    </TabsPanel>
-                ))}
-            </Tabs>
-            {children}
-        </Stack>
-    );
+  const handleTabChange = (value: string | null) => {
+    const tab = tabs.find(t => t.value === value);
+    if (tab) {
+      router.push(tab.href);
+    }
+    setActiveTab(value);
+  };
+
+  useEffect(() => {
+    const match = tabs.find(tab => tab.href === pathname);
+    if (match) {
+      setActiveTab(match.value);
+    }
+  }, [pathname]);
+
+  return (
+    <Stack gap="lg">
+      <Title order={3} fw={700} style={{ color: "#1A1B1E" }}>
+        Layanan Online Desa
+      </Title>
+
+      <Tabs
+        color={colors['blue-button']}
+        variant="pills"
+        value={activeTab}
+        onChange={handleTabChange}
+        radius="lg"
+        keepMounted={false}
+      >
+        {/* ✅ Scroll horizontal biar gak overflow */}
+        <ScrollArea type="auto" offsetScrollbars>
+          <TabsList
+            p="sm"
+            style={{
+              background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+              borderRadius: "1rem",
+              boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+              display: "flex",
+              flexWrap: "nowrap",
+              gap: "0.5rem",
+              paddingInline: "0.5rem",
+            }}
+          >
+            {tabs.map((tab, i) => (
+              <Tooltip
+                key={i}
+                label={tab.tooltip}
+                position="bottom"
+                withArrow
+                transitionProps={{ transition: 'pop', duration: 200 }}
+              >
+                <TabsTab
+                  value={tab.value}
+                  leftSection={tab.icon}
+                  style={{
+                    fontWeight: 600,
+                    fontSize: "0.9rem",
+                    transition: "all 0.2s ease",
+                  }}
+                >
+                  {tab.label}
+                </TabsTab>
+              </Tooltip>
+            ))}
+          </TabsList>
+        </ScrollArea>
+
+        {tabs.map((tab, i) => (
+          <TabsPanel
+            key={i}
+            value={tab.value}
+            style={{
+              padding: "1.5rem",
+              background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+              borderRadius: "1rem",
+              boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+            }}
+          >
+            <>{children}</>
+          </TabsPanel>
+        ))}
+      </Tabs>
+    </Stack>
+  );
 }
 
-export default LayoutTabsLayananOnlineDesa;
+export default LayoutTabsLayananOnlineDesa;

src/app/admin/(dashboard)/inovasi/layanan-online-desa/administrasi-online/[id]/page.tsx

@@ -1,92 +1,111 @@
 'use client'
-import { useProxy } from 'valtio/utils';
 
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import layananonlineDesa from '@/app/admin/(dashboard)/_state/inovasi/layanan-online-desa';
 import colors from '@/con/colors';
 
-
 function DetailAdministrasiOnline() {
-  const beritaState = useProxy(layananonlineDesa)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
+  const stateAdminOnline = useProxy(layananonlineDesa.administrasiOnline);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const params = useParams();
+  const router = useRouter();
 
   useShallowEffect(() => {
-    beritaState.administrasiOnline.findUnique.load(params?.id as string)
-  }, [])
-
+    stateAdminOnline.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      beritaState.administrasiOnline.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/inovasi/layanan-online-desa/administrasi-online")
+      stateAdminOnline.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/inovasi/layanan-online-desa/administrasi-online");
     }
-  }
+  };
 
-  if (!beritaState.administrasiOnline.findUnique.data) {
+  if (!stateAdminOnline.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={40} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = stateAdminOnline.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
+    <Box py={10}>
+      <Group justify='space-between' align='center' w={{ base: "100%", md: "50%" }} mb={10}>
+        {/* Tombol Kembali */}
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        >
+          Kembali
         </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Flex gap={"xs"} justify={"space-between"} mt={10}>
-            <Text fz={"xl"} fw={"bold"}>Detail Administrasi Online</Text>
-            <Button
-              onClick={() => {
-                if (beritaState.administrasiOnline.findUnique.data) {
-                  setSelectedId(beritaState.administrasiOnline.findUnique.data.id);
-                  setModalHapus(true);
-                }
-              }}
-              disabled={beritaState.administrasiOnline.delete.loading || !beritaState.administrasiOnline.findUnique.data}
-              color={"red"}
-            >
-              <IconTrash size={20} />
-            </Button>
-          </Flex>
-          {beritaState.administrasiOnline.findUnique.data ? (
-            <Paper key={beritaState.administrasiOnline.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
-                  <Text fz={"lg"}>{beritaState.administrasiOnline.findUnique.data?.name}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Alamat</Text>
-                  <Text fz={"lg"}>{beritaState.administrasiOnline.findUnique.data?.alamat}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Nomor Telepon</Text>
-                  <Text fz={"lg"} >{beritaState.administrasiOnline.findUnique.data?.nomorTelepon}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Jenis Layanan</Text>
-                  <Text fz={"lg"} >{beritaState.administrasiOnline.findUnique.data?.jenisLayanan?.nama}</Text>
-                </Box>
-              </Stack>
-            </Paper>
-          ) : null}
+
+        <Tooltip label="Hapus Data" withArrow position="top">
+          <Button
+            color="red"
+            onClick={() => {
+              setSelectedId(data.id);
+              setModalHapus(true);
+            }}
+            variant="light"
+            radius="md"
+            size="md"
+          >
+            <IconTrash size={20} />
+          </Button>
+        </Tooltip>
+      </Group>
+      {/* Konten Detail */}
+      <Paper
+        withBorder
+        w={{ base: "100%", md: "50%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Administrasi Online
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Nama</Text>
+                <Text fz="md" c="dimmed">{data.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Alamat</Text>
+                <Text fz="md" c="dimmed">{data.alamat || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Nomor Telepon</Text>
+                <Text fz="md" c="dimmed">{data.nomorTelepon || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Jenis Layanan</Text>
+                <Text fz="md" c="dimmed">{data.jenisLayanan?.nama || '-'}</Text>
+              </Box>
+
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
@@ -95,10 +114,10 @@ function DetailAdministrasiOnline() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus administrasi online ini?'
+        text="Apakah Anda yakin ingin menghapus administrasi online ini?"
       />
     </Box>
   );
 }
 
-export default DetailAdministrasiOnline;
+export default DetailAdministrasiOnline;

src/app/admin/(dashboard)/inovasi/layanan-online-desa/administrasi-online/page.tsx

@@ -1,9 +1,26 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Pagination, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
-
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -15,8 +32,8 @@ function AdministrasiOnline() {
   return (
     <Box>
       <HeaderSearch
-        title='Administrasi Online'
-        placeholder='pencarian'
+        title="Administrasi Online"
+        placeholder="Cari nama layanan, alamat, atau nomor telepon..."
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -27,69 +44,117 @@ function AdministrasiOnline() {
 }
 
 function ListAdministrasiOnline({ search }: { search: string }) {
-  const listState = useProxy(layananonlineDesa.administrasiOnline)
+  const state = useProxy(layananonlineDesa.administrasiOnline);
   const router = useRouter();
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = listState.findMany;
+
+  const { data, page, totalPages, loading, load } = state.findMany;
 
   useShallowEffect(() => {
-    load(page, 10);
-  }, [page]);
+    load(page, 10, search);
+  }, [page, search]);
 
-  const filteredData = (data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.alamat.toLowerCase().includes(keyword) ||
-      item.nomorTelepon.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || [];
 
   if (loading || !data) {
-    return <Skeleton h={500} />;
+    return (
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
+    );
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Title order={3} mb={10}>List Administrasi Online</Title>
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama Layanan</TableTh>
-              <TableTh>Alamat</TableTh>
-              <TableTh>Nomor Telepon</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-            <TableTbody style={{ overflowX: "auto" }}>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.name}</TableTd>
-                  <TableTd>{item.alamat}</TableTd>
-                  <TableTd>{item.nomorTelepon}</TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push(`/admin//inovasi/layanan-online-desa/administrasi-online/${item.id}`)}>
-                      <IconDeviceImac size={20} />
-                    </Button>
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Administrasi Online</Title>
+          <Tooltip label="Tambah Layanan Baru" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() =>
+                router.push('/admin/inovasi/layanan-online-desa/administrasi-online/create')
+              }
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '25%' }}>Nama Layanan</TableTh>
+                <TableTh style={{ width: '25%' }}>Alamat</TableTh>
+                <TableTh style={{ width: '20%' }}>Nomor Telepon</TableTh>
+                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.name}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="sm" c="dimmed" lineClamp={1}>
+                        {item.alamat}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="sm" c="dimmed" lineClamp={1}>
+                        {item.nomorTelepon || '-'}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="blue"
+                        leftSection={<IconDeviceImac size={16} />}
+                        onClick={() =>
+                          router.push(
+                            `/admin/inovasi/layanan-online-desa/administrasi-online/${item.id}`
+                          )
+                        }
+                      >
+                        Detail
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada data administrasi online yang cocok</Text>
+                    </Center>
                   </TableTd>
                 </TableTr>
-              ))}
+              )}
             </TableTbody>
-        </Table>
+          </Table>
+        </Box>
       </Paper>
+
       <Center>
         <Pagination
           value={page}
-          onChange={(newPage) => load(newPage)} // ini penting!
+          onChange={(newPage) => {
+            load(newPage, 10, search);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>

src/app/admin/(dashboard)/inovasi/layanan-online-desa/jenis-layanan/page.tsx

@@ -1,23 +1,39 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import layananonlineDesa from '../../../_state/inovasi/layanan-online-desa';
 
-
 function JenisLayanan() {
-  const [search, setSearch] = useState("")
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
-        title='Jenis Layanan'
-        placeholder='pencarian'
+        title="Jenis Layanan"
+        placeholder="Cari jenis layanan..."
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -28,59 +44,115 @@ function JenisLayanan() {
 }
 
 function ListJenisLayanan({ search }: { search: string }) {
-  const stateList = useProxy(layananonlineDesa.jenisLayanan)
-  const router = useRouter()
+  const stateList = useProxy(layananonlineDesa.jenisLayanan);
+  const router = useRouter();
+
+  const { data, page, totalPages, loading, load } = stateList.findMany;
 
   useShallowEffect(() => {
-    stateList.findMany.load()
-  }, [])
+    load(page, 10, search);
+  }, [page, search]);
 
+  const filteredData = data || [];
 
-  const filteredData = (stateList.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.nama.toLowerCase().includes(keyword)
-    );
-  });
-
-  if (!stateList.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={600} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Jenis Layanan'
-          href='/admin/inovasi/layanan-online-desa/jenis-layanan/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama Jenis Layanan</TableTh>
-              <TableTh>Deskripsi</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>{item.nama}</TableTd>
-                <TableTd>{item.deskripsi}</TableTd>
-                <TableTd>
-                  <Button color="green" onClick={() => router.push(`/admin/inovasi/layanan-online-desa/jenis-layanan/${item.id}`)}>
-                  <IconDeviceImac size={20} />
-                  </Button>
-                </TableTd>
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Jenis Layanan</Title>
+          <Tooltip label="Tambah Jenis Layanan" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() =>
+                router.push(
+                  '/admin/inovasi/layanan-online-desa/jenis-layanan/create'
+                )
+              }
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '30%' }}>Nama Jenis Layanan</TableTh>
+                <TableTh style={{ width: '40%' }}>Deskripsi</TableTh>
+                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
               </TableTr>
-            ))}
-          </TableTbody>
-        </Table>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd style={{ width: '30%' }}>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.nama}
+                      </Text>
+                    </TableTd>
+                    <TableTd style={{ width: '40%' }}>
+                      <Text fz="sm" c="dimmed" lineClamp={2}>
+                        {item.deskripsi || '-'}
+                      </Text>
+                    </TableTd>
+                    <TableTd style={{ width: '15%' }}>
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="blue"
+                        leftSection={<IconDeviceImac size={16} />}
+                        onClick={() =>
+                          router.push(
+                            `/admin/inovasi/layanan-online-desa/jenis-layanan/${item.id}`
+                          )
+                        }
+                      >
+                        Detail
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={3}>
+                    <Center py={20}>
+                      <Text color="dimmed">
+                        Tidak ada jenis layanan yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
+        />
+      </Center>
     </Box>
   );
 }

src/app/admin/layout.tsx

@@ -39,8 +39,8 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       suppressHydrationWarning
       header={{ height: 64 }}
       navbar={{
-        width: 300,
-        breakpoint: "sm",
+        width: { base: 260, sm: 280, lg: 300 },
+        breakpoint: 'sm',
         collapsed: {
           mobile: !opened,
           desktop: !desktopOpened,
@@ -52,23 +52,29 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         style={{
           background: "linear-gradient(90deg, #ffffff, #f9fbff)",
           borderBottom: `1px solid ${colors["blue-button"]}20`,
+          padding: '0 16px',
         }}
+        px={{ base: 'sm', sm: 'md' }}
+        py={{ base: 'xs', sm: 'sm' }}
       >
-        <Group px="md" h="100%" justify="space-between">
+        <Group w="100%" h="100%" justify="space-between" wrap="nowrap">
           <Flex align="center" gap="sm">
             <Image
               src="/assets/images/darmasaba-icon.png"
               alt="Logo Darmasaba"
-              width={46}
-              height={46}
+              w={{ base: 32, sm: 40 }}
+              h={{ base: 32, sm: 40 }}
               radius="md"
               loading="lazy"
+              style={{
+                minWidth: '32px',
+                height: 'auto',
+              }}
             />
             <Text
               fw={700}
               c={colors["blue-button"]}
-              fz="lg"
-              style={{ letterSpacing: rem(0.3) }}
+              fz={{ base: 'md', sm: 'xl' }}
             >
               Admin Darmasaba
             </Text>
@@ -93,8 +99,9 @@ export default function Layout({ children }: { children: React.ReactNode }) {
               opened={opened}
               onClick={toggle}
               hiddenFrom="sm"
-              size="sm"
+              size="md"
               color={colors["blue-button"]}
+              mr="xs"
             />
 
             <Tooltip label="Kembali ke Website Desa" position="bottom" withArrow>
@@ -108,7 +115,18 @@ export default function Layout({ children }: { children: React.ReactNode }) {
                 variant="gradient"
                 gradient={{ from: colors["blue-button"], to: "#228be6" }}
               >
-                <Image src="/assets/images/darmasaba-icon.png" alt="Logo Darmasaba" w={25} h={25} radius="md" loading="lazy" />
+                <Image 
+                  src="/assets/images/darmasaba-icon.png" 
+                  alt="Logo Darmasaba" 
+                  w={20} 
+                  h={20} 
+                  radius="md" 
+                  loading="lazy" 
+                  style={{
+                    minWidth: '20px',
+                    height: 'auto',
+                  }}
+                />
               </ActionIcon>
             </Tooltip>
             <Tooltip label="Keluar" position="bottom" withArrow>
@@ -135,6 +153,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           background: "#ffffff",
           borderRight: `1px solid ${colors["blue-button"]}20`,
         }}
+        p={{ base: 'xs', sm: 'sm' }}
       >
         <AppShell.Section p="sm">
           {navBar.map((v, k) => {
@@ -155,6 +174,13 @@ export default function Layout({ children }: { children: React.ReactNode }) {
                   marginBottom: rem(4),
                   transition: "background 150ms ease",
                 }}
+                styles={{
+                  root: {
+                    '&:hover': {
+                      backgroundColor: 'rgba(25, 113, 194, 0.05)',
+                    },
+                  },
+                }}
                 variant="light"
                 active={isParentActive}
               >
@@ -173,10 +199,19 @@ export default function Layout({ children }: { children: React.ReactNode }) {
                           {child.name}
                         </Text>
                       }
-                      style={{
-                        borderRadius: rem(8),
-                        marginBottom: rem(2),
-                        transition: "background 150ms ease",
+                      styles={{
+                        root: {
+                          borderRadius: rem(8),
+                          marginBottom: rem(2),
+                          transition: 'background 150ms ease',
+                          padding: '6px 12px',
+                          '&:hover': {
+                            backgroundColor: isChildActive ? 'rgba(25, 113, 194, 0.15)' : 'rgba(25, 113, 194, 0.05)',
+                          },
+                          ...(isChildActive && {
+                            backgroundColor: 'rgba(25, 113, 194, 0.1)',
+                          }),
+                        },
                       }}
                       active={isChildActive}
                       component={Link}