Fix Tampilab DesaAntiKorupsi Landing Page Mobile

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>
   );
 }