Fix QC Kak Inno Mobile Done

FIx QC Kak Ayu Mobile Admin Done
Fix Tampilan Admin Mobile Device All Menu Done

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

@@ -68,7 +68,7 @@ const category = proxy({
         const res = await ApiFetch.api.desa.kategoripengumuman[
           "findMany"
         ].get({
-          query: { page, limit },
+          query: { page, limit, search },
         });
   
         if (res.status === 200 && res.data?.success) {

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

@@ -65,7 +65,7 @@ const potensiDesa = proxy({
         const res = await ApiFetch.api.desa.potensi[
           "find-many"
         ].get({
-          query: { page, limit },
+          query: { page, limit, search },
         });
   
         if (res.status === 200 && res.data?.success) {

src/app/admin/(dashboard)/desa/profil/profil-perbekel/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import colors from '@/con/colors';
-import { Box, Button, Center, Divider, Grid, GridCol, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Divider, Grid, GridCol, Group, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
@@ -31,11 +31,8 @@ function Page() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header + tombol edit */}
-        <Grid align="center">
+        <Group justify="space-between">
-          <GridCol span={{ base: 12, md: 11 }}>
+          <Title order={2} c={colors['blue-button']} lh={1.2}>Profil Perbekel</Title>
-            <Title order={2} c={colors['blue-button']} lh={1.2} />
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
           <Button
             c="green"
             variant="light"
@@ -45,8 +42,7 @@ function Page() {
           >
             Edit
           </Button>
-          </GridCol>
+        </Group>
-        </Grid>
 
         {/* Card Profil */}
         <Paper p="xl" bg={colors['white-1']} withBorder radius="md" shadow="xs">
@@ -60,7 +56,7 @@ function Page() {
               <GridCol span={12}>
                 <Text
                   ta="center"
-                  fz={{ base: 'sm', md: 'md' }}
+                  fz={{ base: 'sm', md: 'xl' }}
                   fw="bold"
                   c={colors['blue-button']}
                   lh={{ base: 1.45, md: 1.45 }}

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx

@@ -183,6 +183,7 @@ function ListInfoTeknologiTepatGuna({ search }: { search: string }) {
                     <Text fz={"sm"} fw={600} lh={1.4}>
                       Deskripsi Singkat
                     </Text>
+                   <Box pl={5}>
                      <Text
                       fz="sm"
                       fw={500}
@@ -192,6 +193,7 @@ function ListInfoTeknologiTepatGuna({ search }: { search: string }) {
                       }}
                     />
                    </Box>
+                  </Box>
                   <Group justify="flex-end">
                     <Button
                       size="xs"

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

@@ -18,7 +18,7 @@ import {
   Text,
   Title,
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -50,6 +50,7 @@ function ListKategoriKegiatan({ search }: { search: string }) {
   const router = useRouter();
 
   const { data, page, totalPages, loading, load } = stateKategori.findMany;
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
 
   const handleHapus = () => {
     if (selectedId) {
@@ -60,8 +61,8 @@ function ListKategoriKegiatan({ search }: { search: string }) {
   };
 
   useShallowEffect(() => {
-    load(page, 10, search);
+    load(page, 10, debouncedSearch);
-  }, [page, search]);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 
@@ -211,7 +212,7 @@ function ListKategoriKegiatan({ search }: { search: string }) {
         <Box hiddenFrom="md">{renderMobileCards()}</Box>
       </Paper>
 
-      {totalPages > 1 && (
+      
         <Center mt="xl">
           <Pagination
             value={page}
@@ -224,7 +225,6 @@ function ListKategoriKegiatan({ search }: { search: string }) {
             radius="md"
           />
         </Center>
-      )}
 
       <ModalKonfirmasiHapus
         opened={modalHapus}

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

@@ -1,7 +1,7 @@
 'use client'
 
 import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -29,10 +29,11 @@ function ListDesaAntiKorupsi({ search }: { search: string }) {
   const router = useRouter();
   const listState = useProxy(korupsiState.desaAntikorupsi);
   const { data, page, totalPages, loading, load } = listState.findMany;
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
 
   useShallowEffect(() => {
-    load(page, 10, search);
+    load(page, 10, debouncedSearch);
-  }, [page, search]);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 

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

@@ -50,7 +50,7 @@ function ListResponden({ search }: ListRespondenProps) {
   const { data, page, totalPages, loading, load } = state.findMany;
 
   useShallowEffect(() => {
-    load(page, 10);
+    load(page, 10,);
   }, [page]);
 
   const filteredData = (data || []).filter((item) => {

src/app/admin/(dashboard)/landing-page/profil/media-sosial/page.tsx

@@ -196,6 +196,7 @@ function ListMediaSosial({ search }: { search: string }) {
             {filteredData.length > 0 ? (
               filteredData.map((item) => (
                 <Paper key={item.id} withBorder p="sm" radius="md">
+                  <Stack gap={"xs"}>
                     <Box>
                       <Text fz="sm" fw={600} lh={1.4}>Nama Media Sosial / Kontak</Text>
                       <Text fw={500} fz="sm" lh={1.45}>
@@ -252,6 +253,7 @@ function ListMediaSosial({ search }: { search: string }) {
                         Detail
                       </Button>
                     </Group>
+                  </Stack>
                 </Paper>
               ))
             ) : (

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

@@ -1,7 +1,7 @@
 'use client'
 import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
 import colors from '@/con/colors';
-import { Box, Button, Center, Divider, Grid, GridCol, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Divider, Grid, GridCol, Group, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
@@ -29,13 +29,10 @@ function Page() {
   return (
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
-        <Grid align="center">
+        <Group justify="space-between">
-          <GridCol span={{ base: 12, md: 11 }}>
           <Title order={3} c={colors['blue-button']}>Preview Pejabat Desa</Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
           <Button
-              style={{fontSize: 15, fontWeight: "bold"}}
+            style={{ fontSize: 15, fontWeight: "bold" }}
             c="green"
             variant="light"
             radius="md"
@@ -43,8 +40,7 @@ function Page() {
           >
             Edit
           </Button>
-          </GridCol>
+        </Group>
-        </Grid>
         {dataArray.map((item) => (
           <Paper key={item.id} p="xl" bg={'white'} withBorder radius="md" shadow="xs">
             <Box px={{ base: "sm", md: 100 }}>

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

@@ -132,7 +132,7 @@ export default function EditDataLingkunganDesa() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />

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

@@ -79,7 +79,7 @@ function DetailDataLingkunganDesa() {
   const data = stateDataLingkungan.findUnique.data;
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Back Button */}
       <Button
         variant="subtle"
@@ -93,7 +93,7 @@ function DetailDataLingkunganDesa() {
       {/* Main Card */}
       <Paper
         withBorder
-        w={{ base: '100%', md: '60%' }}
+        w={{ base: '100%', md: '70%' }}
         bg={colors['white-1']}
         p="lg"
         radius="md"
@@ -131,8 +131,10 @@ function DetailDataLingkunganDesa() {
 
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Box pl={5}>
                   <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }} />
                 </Box>
+              </Box>
 
               {/* Action Buttons */}
               <Group gap="sm" mt="sm">

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

@@ -49,7 +49,7 @@ function CreateDataLingkunganDesa() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button

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

@@ -1,30 +1,65 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import colors from '@/con/colors';
 import {
-  Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack,
+  Box,
-  Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text,
+  Button,
-  Title
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
 } from '@mantine/core';
 import {
-  IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled,
+  IconAlertTriangle,
-  IconDeviceImacCog, IconDroplet, IconHome, IconHomeEco, IconLeaf,
+  IconAmbulance,
+  IconBuilding,
+  IconCash,
+  IconChartLine,
+  IconChristmasTreeFilled,
+  IconClipboardTextFilled,
+  IconDeviceImacCog,
+  IconDroplet,
+  IconFiretruck,
+  IconHome,
+  IconHomeEco,
+  IconHospital,
+  IconLeaf,
   IconPlus,
-  IconRecycle, IconScale, IconSearch, IconShieldFilled, IconTent,
+  IconRecycle,
-  IconTrashFilled, IconTree, IconTrendingUp, IconTrophy, IconTruckFilled
+  IconScale,
+  IconSchool,
+  IconSearch,
+  IconShieldFilled,
+  IconShoppingCart,
+  IconTent,
+  IconTrashFilled,
+  IconTree,
+  IconTrendingUp,
+  IconTrophy,
+  IconTruckFilled,
 } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
 import dataLingkunganDesaState from '../../_state/lingkungan/data-lingkungan-desa';
-
+import { useDebouncedValue } from '@mantine/hooks';
 
 function DataLingkunganDesa() {
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState('');
   return (
-    <Box>
+    <Box py={{ base: 'md', md: 'lg' }} px={{ base: 'sm', md: 0 }}>
       <HeaderSearch
         title='Data Lingkungan Desa'
         placeholder='Cari data lingkungan...'
@@ -38,15 +73,16 @@ function DataLingkunganDesa() {
 }
 
 function ListDataLingkunganDesa({ search }: { search: string }) {
-  const listState = useProxy(dataLingkunganDesaState)
+  const listState = useProxy(dataLingkunganDesaState);
-  const { data, loading, page, totalPages, load } = listState.findMany
+  const { data, loading, page, totalPages, load } = listState.findMany;
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   useEffect(() => {
-    load(page, 10, search)
+    load(page, 10, debouncedSearch);
-  }, [page, search])
+  }, [page, debouncedSearch]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   const iconMap: Record<string, React.FC<any>> = {
     ekowisata: IconLeaf,
@@ -64,12 +100,22 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
     mencegahBencana: IconShieldFilled,
     rumah: IconHome,
     pohon: IconTree,
-    air: IconDroplet
+    air: IconDroplet,
+    bantuan: IconCash,
+    pelatihan: IconSchool,
+    subsidi: IconShoppingCart,
+    layananKesehatan: IconHospital,
+    polisi: IconShieldFilled,
+    ambulans: IconAmbulance,
+    pemadam: IconFiretruck,
+    rumahSakit: IconHospital,
+    bangunan: IconBuilding,
+    darurat: IconAlertTriangle
   };
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py="md">
         <Skeleton height={600} radius="md" />
       </Stack>
     );
@@ -77,46 +123,66 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
 
   if (data.length === 0) {
     return (
-      <Box py={10}>
+      <Box py="md">
-        <Paper withBorder shadow="md" radius="md" p="lg" bg={colors['white-1']}>
+        <Paper withBorder shadow="md" radius="md" p={{ base: 'md', md: 'lg' }} bg={colors['white-1']}>
           <Stack>
             <Group justify="space-between" mb="md">
-              <Title order={4}>Daftar Data Lingkungan Desa</Title>
+              <Title order={4} lh={1.2}>
-              <Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/create')}>
+                Daftar Data Lingkungan Desa
+              </Title>
+              <Button
+                leftSection={<IconPlus size={18} />}
+                color="blue"
+                variant="light"
+                onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/create')}
+              >
                 Tambah Baru
               </Button>
             </Group>
-            <Table highlightOnHover>
+            <Box visibleFrom="md">
+              <Table highlightOnHover miw={0} style={{ tableLayout: 'fixed', width: '100%' }}>
                 <TableThead>
                   <TableTr>
-                  <TableTh>No</TableTh>
+                    <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
-                  <TableTh>Nama Data Lingkungan Desa</TableTh>
+                    <TableTh style={{ width: '25%' }}>Nama Data Lingkungan Desa</TableTh>
-                  <TableTh>Jumlah</TableTh>
+                    <TableTh style={{ width: '35%' }}>Jumlah</TableTh>
-                  <TableTh>Ikon</TableTh>
+                    <TableTh style={{ width: '15%' }}>Ikon</TableTh>
-                  <TableTh>Detail</TableTh>
+                    <TableTh style={{ width: '20%', textAlign: 'center' }}>Detail</TableTh>
                   </TableTr>
                 </TableThead>
               </Table>
-            <Center py={20}>
+            </Box>
-              <Text c="dimmed">Tidak ada data lingkungan desa yang tersedia</Text>
+            <Center py="xl">
+              <Text c="dimmed" fz={{ base: 'sm', md: 'md' }} lh={1.4}>
+                Tidak ada data lingkungan desa yang tersedia
+              </Text>
             </Center>
           </Stack>
         </Paper>
-      </Box >
+      </Box>
     );
   }
 
   return (
-    <Box py={10}>
+    <Box py="md">
-      <Paper withBorder shadow="md" radius="md" bg={colors['white-1']} p="lg">
+      <Paper withBorder shadow="md" radius="md" p={{ base: 'md', md: 'lg' }} bg={colors['white-1']}>
         <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Data Lingkungan Desa</Title>
+          <Title order={4} lh={1.2}>
-          <Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/create')}>
+            Daftar Data Lingkungan Desa
+          </Title>
+          <Button
+            leftSection={<IconPlus size={18} />}
+            color="blue"
+            variant="light"
+            onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/create')}
+          >
             Tambah Baru
           </Button>
         </Group>
-        <Box style={{ overflowX: 'auto' }}>
+
-          <Table highlightOnHover>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table highlightOnHover miw={0} style={{ tableLayout: 'fixed', width: '100%' }}>
             <TableThead>
               <TableTr>
                 <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
@@ -129,21 +195,21 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
             <TableTbody>
               {filteredData.map((item, index) => (
                 <TableTr key={item.id}>
-                  <TableTd style={{ textAlign: 'center' }}>{index + 1}</TableTd>
+                  <TableTd ta="center">{index + 1}</TableTd>
                   <TableTd>
-                    <Text fw={500} truncate="end" lineClamp={1}>{item.name}</Text>
+                    <Text fz="md" fw={500} lh={1.5} truncate="end" lineClamp={1}>
+                      {item.name}
+                    </Text>
                   </TableTd>
                   <TableTd>
-                    <Text fz="sm" c="dimmed">± {item.jumlah}</Text>
+                    <Text fz="sm" c="dimmed" lh={1.5}>
+                      ± {item.jumlah}
+                    </Text>
                   </TableTd>
                   <TableTd>
-                    {iconMap[item.icon] && (
+                    {iconMap[item.icon] && <Box title={item.icon}>{React.createElement(iconMap[item.icon], { size: 22 })}</Box>}
-                      <Box title={item.icon}>
-                        {React.createElement(iconMap[item.icon], { size: 22 })}
-                      </Box>
-                    )}
                   </TableTd>
-                  <TableTd style={{ textAlign: 'center' }}>
+                  <TableTd ta="center">
                     <Button
                       size="xs"
                       radius="md"
@@ -160,7 +226,62 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Box hiddenFrom="md">
+          <Stack gap="sm">
+            {filteredData.map((item, index) => (
+              <Paper key={item.id} withBorder radius="md" p="sm" bg={colors['white-1']}>
+                <Stack gap={"xs"}>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      No
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4}>
+                      {index + 1}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Nama Data
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4} truncate="end">
+                      {item.name}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Jumlah
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4}>
+                      ± {item.jumlah}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Ikon
+                    </Text>
+                    {iconMap[item.icon] && <Box title={item.icon}>{React.createElement(iconMap[item.icon], { size: 22 })}</Box>}
+                  </Box>
+                  <Center>
+                    <Button
+                      size="xs"
+                      radius="md"
+                      variant="light"
+                      color="blue"
+                      leftSection={<IconDeviceImacCog size={16} />}
+                      onClick={() => router.push(`/admin/lingkungan/data-lingkungan-desa/${item.id}`)}
+                    >
+                      Detail
+                    </Button>
+                  </Center>
+                </Stack>
               </Paper>
+            ))}
+          </Stack>
+        </Box>
+      </Paper>
+
       <Center>
         <Pagination
           value={page}
@@ -178,4 +299,5 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
     </Box>
   );
 }
+
 export default DataLingkunganDesa;

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

@@ -59,6 +59,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                 radius="lg"
                 keepMounted={false}
             >
+                <Box visibleFrom='md' pb={10}>
                     <ScrollArea type="auto" offsetScrollbars>
                         <TabsList
                             p="sm"
@@ -69,7 +70,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                                 display: "flex",
                                 flexWrap: "nowrap",
                                 gap: "0.5rem",
-                            paddingInline: "0.5rem",
+                                paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
                             }}
                         >
                             {tabs.map((tab, i) => (
@@ -80,22 +81,54 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                                     style={{
                                         fontWeight: 600,
                                         fontSize: "0.9rem",
-                                    whiteSpace: "nowrap",
                                         transition: "all 0.2s ease",
+                                        flexShrink: 0, // ✅ jangan mengecil aneh-aneh
                                     }}
                                 >
-                                <span style={{
-                                    display: "inline-block",
-                                    maxWidth: "200px",
-                                    overflow: "hidden",
-                                    textOverflow: "ellipsis"
-                                }}>
                                     {tab.label}
-                                </span>
                                 </TabsTab>
                             ))}
                         </TabsList>
                     </ScrollArea>
+                </Box>
+
+                <Box hiddenFrom='md' pb={10}>
+                    <ScrollArea
+                        type="auto"
+                        offsetScrollbars={false}
+                        w="100%"
+                    >
+
+                        <TabsList
+                            p="xs" // lebih kecil
+                            style={{
+                                background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                                borderRadius: "1rem",
+                                display: "flex",
+                                flexWrap: "nowrap",
+                                gap: "0.5rem",
+                                width: "max-content", // ⬅️ kunci
+                                maxWidth: "100%",     // ⬅️ penting
+                            }}
+                        >
+                            {tabs.map((tab, i) => (
+                                <TabsTab
+                                    key={i}
+                                    value={tab.value}
+                                    leftSection={tab.icon}
+                                    style={{
+                                        fontWeight: 600,
+                                        fontSize: "0.9rem",
+                                        paddingInline: "0.75rem", // ⬅️ lebih ramping
+                                        flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                                    }}
+                                >
+                                    {tab.label}
+                                </TabsTab>
+                            ))}
+                        </TabsList>
+                    </ScrollArea>
+                </Box>
 
                 {tabs.map((tab, i) => (
                     <TabsPanel key={i} value={tab.value}>

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

@@ -96,7 +96,7 @@ export default function EditContohKegiatanDesaDarmasaba() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

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

@@ -1,5 +1,5 @@
 'use client'
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -25,13 +25,10 @@ function Page() {
   return (
     <Box p="md">
       <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
-        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
+        <Group justify="space-between" align="center" mb={{ base: 'md', md: 'lg' }}>
-          <GridCol span={{ base: 12, md: 11 }}>
             <Title order={3} fw={600}>
               Preview Contoh Kegiatan Di Desa Darmasaba
             </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
             <Button
               size="sm"
               variant="light"
@@ -46,8 +43,7 @@ function Page() {
             >
               Edit
             </Button>
-          </GridCol>
+        </Group>
-        </Grid>
 
         <Stack gap="md">
           <Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">

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

@@ -1,7 +1,28 @@
 'use client'
+import { usePathname } from "next/navigation";
 import LayoutTabs from "./_lib/layouTabs";
+import { Box } from "@mantine/core";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  
+    // Contoh path:
+    // - /darmasaba/desa/berita/semua → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+  
+    const segments = pathname.split('/').filter(Boolean);
+    const isDetailPage = segments.length >= 5;
+  
+    if (isDetailPage) {
+      // Tampilkan tanpa tab menu
+      return (
+        <Box>
+          {children}
+        </Box>
+      );
+    }
+  
   return (
     <LayoutTabs>
       {children}

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

@@ -81,7 +81,7 @@ export default function EditMateriEdukasiYangDiberikan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />

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

@@ -1,5 +1,5 @@
 'use client'
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -25,11 +25,8 @@ function Page() {
   return (
     <Box p="md">
       <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
-        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
+        <Group align="center" justify='space-between' mb={{ base: 'md', md: 'lg' }}> 
-          <GridCol span={{ base: 12, md: 11 }}>
             <Title order={3} fw={600}>Preview Materi Edukasi Yang Diberikan</Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
             <Button
               size="sm"
               variant="light"
@@ -42,8 +39,7 @@ function Page() {
             >
               Edit
             </Button>
-          </GridCol>
+        </Group>
-        </Grid>
 
         <Stack gap="md">
           <Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">

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

@@ -84,7 +84,7 @@ export default function EditTujuanEdukasiLingkungan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button
           variant="subtle"

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

@@ -1,5 +1,5 @@
 'use client'
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -25,11 +25,8 @@ function Page() {
   return (
     <Box p="md">
       <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
-        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
+        <Group align="center" justify='space-between' mb={{ base: 'md', md: 'lg' }}>
-          <GridCol span={{ base: 12, md: 11 }}>
           <Title order={3} fw={600}>Preview Tujuan Edukasi Lingkungan</Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
           <Button
             size="sm"
             variant="light"
@@ -42,8 +39,7 @@ function Page() {
           >
             Edit
           </Button>
-          </GridCol>
+        </Group>
-        </Grid>
 
         <Stack gap="md">
           <Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">

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

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { IconClipboardList, IconTags } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -59,6 +59,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         keepMounted={false}
       >
         {/* ✅ Scroll horizontal */}
+         <Box visibleFrom='md' pb={10}>
                   <ScrollArea type="auto" offsetScrollbars>
                     <TabsList
                       p="sm"
@@ -69,7 +70,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                         display: "flex",
                         flexWrap: "nowrap",
                         gap: "0.5rem",
-              paddingInline: "0.5rem",
+                        paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
                       }}
                     >
                       {tabs.map((tab, i) => (
@@ -81,6 +82,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                             fontWeight: 600,
                             fontSize: "0.9rem",
                             transition: "all 0.2s ease",
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
                           }}
                         >
                           {tab.label}
@@ -88,6 +90,45 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                       ))}
                     </TabsList>
                   </ScrollArea>
+                </Box>
+        
+                <Box hiddenFrom='md' pb={10}>
+                  <ScrollArea
+                    type="auto"
+                    offsetScrollbars={false}
+                    w="100%"
+                  >
+        
+                    <TabsList
+                      p="xs" // lebih kecil
+                      style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        display: "flex",
+                        flexWrap: "nowrap",
+                        gap: "0.5rem",
+                        width: "max-content", // ⬅️ kunci
+                        maxWidth: "100%",     // ⬅️ penting
+                      }}
+                    >
+                      {tabs.map((tab, i) => (
+                        <TabsTab
+                          key={i}
+                          value={tab.value}
+                          leftSection={tab.icon}
+                          style={{
+                            fontWeight: 600,
+                            fontSize: "0.9rem",
+                            paddingInline: "0.75rem", // ⬅️ lebih ramping
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                          }}
+                        >
+                          {tab.label}
+                        </TabsTab>
+                      ))}
+                    </TabsList>
+                  </ScrollArea>
+                </Box>
 
         {/* ✅ Panel dengan gaya kartu */}
         {tabs.map((tab, i) => (

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

@@ -83,7 +83,7 @@ function EditKategoriKegiatan() {
   if (loading) return <Text>Loading...</Text>;
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md" align="center">
         <Button variant="subtle" p="xs" radius="md" onClick={() => router.back()}>
           <IconArrowBack color={colors['blue-button']} size={24} />

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

@@ -39,7 +39,7 @@ function CreateKategoriKegiatan() {
   }
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md" align="center">
         <Button variant="subtle" p="xs" radius="md" onClick={() => router.back()}>

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

@@ -18,7 +18,7 @@ import {
   Text,
   Title
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -28,7 +28,7 @@ import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import gotongRoyongState from '../../../_state/lingkungan/gotong-royong';
 
 function KategoriKegiatan() {
-  const [search, setSearch] = useState("")
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
@@ -44,10 +44,11 @@ function KategoriKegiatan() {
 }
 
 function ListKategoriKegiatan({ search }: { search: string }) {
-  const stateKategori = useProxy(gotongRoyongState.kategoriKegiatan)
+  const stateKategori = useProxy(gotongRoyongState.kategoriKegiatan);
-  const [modalHapus, setModalHapus] = useState(false)
+  const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const router = useRouter()
+  const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -55,52 +56,76 @@ function ListKategoriKegiatan({ search }: { search: string }) {
     totalPages,
     loading,
     load,
-  } = stateKategori.findMany
+  } = stateKategori.findMany;
 
   const handleHapus = () => {
     if (selectedId) {
-      stateKategori.delete.byId(selectedId)
+      stateKategori.delete.byId(selectedId);
-      setModalHapus(false)
+      setModalHapus(false);
-      setSelectedId(null)
+      setSelectedId(null);
-    }
     }
+  };
 
   useShallowEffect(() => {
-    load(page, 10, search)
+    load(page, 10, debouncedSearch);
-  }, [page, search])
+  }, [page, debouncedSearch]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'md', md: 'lg' }}>
         <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box py={10}>
+    <Box py={{ base: 'md', md: 'lg' }}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Kategori Kegiatan</Title>
+          <Title order={4} lh={1.2}>
+            Daftar Kategori Kegiatan
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
             variant="light"
-            onClick={() => router.push('/admin/lingkungan/gotong-royong/kategori-kegiatan/create')}
+            onClick={() =>
+              router.push('/admin/lingkungan/gotong-royong/kategori-kegiatan/create')
+            }
           >
             Tambah Baru
           </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
+        {/* Desktop Table */}
-          <Table highlightOnHover>
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '60%' }}>Nama Kategori</TableTh>
+                <TableTh style={{ width: '60%' }}>
-                <TableTh style={{ width: '20%' }}>Edit</TableTh>
+                  <Text fz="sm" fw={600} lh={1.2} ta="left">
-                <TableTh style={{ width: '20%' }}>Delete</TableTh>
+                    Nama Kategori
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="sm" fw={600} lh={1.2} ta="center">
+                    Edit
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="sm" fw={600} lh={1.2} ta="center">
+                    Delete
+                  </Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -108,21 +133,27 @@ function ListKategoriKegiatan({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end">
+                        {item.nama}
+                      </Text>
                     </TableTd>
-                    <TableTd>
+                    <TableTd ta="center">
                       <Button
                         size="xs"
                         radius="md"
                         variant="light"
                         color="green"
                         leftSection={<IconEdit size={16} />}
-                        onClick={() => router.push(`/admin/lingkungan/gotong-royong/kategori-kegiatan/${item.id}`)}
+                        onClick={() =>
+                          router.push(
+                            `/admin/lingkungan/gotong-royong/kategori-kegiatan/${item.id}`
+                          )
+                        }
                       >
                         Edit
                       </Button>
                     </TableTd>
-                    <TableTd>
+                    <TableTd ta="center">
                       <Button
                         size="xs"
                         radius="md"
@@ -130,8 +161,8 @@ function ListKategoriKegiatan({ search }: { search: string }) {
                         color="red"
                         leftSection={<IconTrash size={16} />}
                         onClick={() => {
-                          setSelectedId(item.id)
+                          setSelectedId(item.id);
-                          setModalHapus(true)
+                          setModalHapus(true);
                         }}
                       >
                         Hapus
@@ -142,8 +173,10 @@ function ListKategoriKegiatan({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={3}>
-                    <Center py={20}>
+                    <Center py="xl">
-                      <Text c="dimmed">Tidak ada kategori kegiatan yang cocok</Text>
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada kategori kegiatan yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -151,6 +184,63 @@ function ListKategoriKegiatan({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Box hiddenFrom="md">
+          <Stack gap="sm">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} withBorder p="md" radius="md">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Nama Kategori
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.45}>
+                        {item.nama}
+                      </Text>
+                    </Box>
+                    <Group justify="flex-end" mt="xs">
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="green"
+                        leftSection={<IconEdit size={16} />}
+                        onClick={() =>
+                          router.push(
+                            `/admin/lingkungan/gotong-royong/kategori-kegiatan/${item.id}`
+                          )
+                        }
+                      >
+                        Edit
+                      </Button>
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="red"
+                        leftSection={<IconTrash size={16} />}
+                        onClick={() => {
+                          setSelectedId(item.id);
+                          setModalHapus(true);
+                        }}
+                      >
+                        Hapus
+                      </Button>
+                    </Group>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py="xl">
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Tidak ada kategori kegiatan yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
 
       <Center>

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

@@ -162,7 +162,7 @@ export default function EditKegiatanDesa() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />

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

@@ -41,7 +41,7 @@ function DetailKegiatanDesa() {
   const data = kegiatanDesaState.findUnique.data;
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Tombol Kembali */}
       <Button
         variant="subtle"
@@ -55,7 +55,7 @@ function DetailKegiatanDesa() {
       {/* Container Detail */}
       <Paper
         withBorder
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"
@@ -85,14 +85,18 @@ function DetailKegiatanDesa() {
               {/* Deskripsi Singkat */}
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi Singkat</Text>
+                <Box pl={5}>
                   <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsiSingkat || '-' }} />
                 </Box>
+              </Box>
 
               {/* Deskripsi Lengkap */}
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Box pl={5}>
                   <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsiLengkap || '-' }} />
                 </Box>
+              </Box>
 
               {/* Kategori */}
               <Box>

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

@@ -86,7 +86,7 @@ function CreateKegiatanDesa() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button

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

@@ -18,7 +18,7 @@ import {
   Text,
   Title,
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -45,6 +45,7 @@ function KegiatanDesa() {
 function ListKegiatanDesa({ search }: { search: string }) {
   const listState = useProxy(gotongRoyongState.kegiatanDesa);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -55,24 +56,26 @@ function ListKegiatanDesa({ search }: { search: string }) {
   } = listState.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search)
+    load(page, 10, debouncedSearch);
-  }, [page, search])
+  }, [page, debouncedSearch]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
+    <Box py={{ base: 'sm', md: 'md' }}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
-          <Title order={4}>Daftar Kegiatan Desa</Title>
+          <Title order={4} lh={1.2}>
+            Daftar Kegiatan Desa
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -84,14 +87,39 @@ function ListKegiatanDesa({ search }: { search: string }) {
             Tambah Baru
           </Button>
         </Group>
-        <Box style={{ overflowX: 'auto' }}>
+
-          <Table highlightOnHover>
+        {/* Desktop: Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '30%' }}>Judul</TableTh>
+                <TableTh style={{ width: '30%' }}>
-                <TableTh style={{ width: '25%' }}>Kategori</TableTh>
+                  <Text fz="sm" fw={600} lh={1.4} c="dark">
-                <TableTh style={{ width: '25%' }}>Lokasi</TableTh>
+                    Judul
-                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} c="dark">
+                    Kategori
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} c="dark">
+                    Lokasi
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} c="dark">
+                    Aksi
+                  </Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -99,17 +127,36 @@ function ListKegiatanDesa({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
+                      <Text
+                        fz="md"
+                        fw={500}
+                        lh={1.5}
+                        truncate="end"
+                        lineClamp={1}
+                        c="dark"
+                      >
                         {item.judul}
                       </Text>
                     </TableTd>
                     <TableTd>
-                      <Text fz="sm" c="dimmed">
+                      <Text
+                        fz="sm"
+                        fw={500}
+                        lh={1.5}
+                        c="dark"
+                      >
                         {item.kategoriKegiatan?.nama || '-'}
                       </Text>
                     </TableTd>
                     <TableTd>
-                      <Text fz="sm">{item.lokasi}</Text>
+                      <Text
+                        fz="sm"
+                        fw={500}
+                        lh={1.5}
+                        c="dark"
+                      >
+                        {item.lokasi}
+                      </Text>
                     </TableTd>
                     <TableTd>
                       <Button
@@ -133,7 +180,7 @@ function ListKegiatanDesa({ search }: { search: string }) {
                 <TableTr>
                   <TableTd colSpan={4}>
                     <Center py={20}>
-                      <Text c="dimmed">
+                      <Text fz="sm" c="dimmed" lh={1.4}>
                         Tidak ada kegiatan desa yang cocok dengan pencarian
                       </Text>
                     </Center>
@@ -143,6 +190,64 @@ function ListKegiatanDesa({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile: Card List */}
+        <Stack hiddenFrom="md" gap="xs">
+          {filteredData.length > 0 ? (
+            filteredData.map((item) => (
+              <Paper key={item.id} withBorder radius="md" p="sm">
+                <Stack gap={"xs"}>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4} c="dark">
+                      Judul
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4} c="dark" truncate="end">
+                      {item.judul}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4} c="dark">
+                      Kategori
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4} c="dark">
+                      {item.kategoriKegiatan?.nama || '-'}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4} c="dark">
+                      Lokasi
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4} c="dark">
+                      {item.lokasi}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Button
+                      size="xs"
+                      radius="md"
+                      variant="light"
+                      color="blue"
+                      leftSection={<IconDeviceImacCog size={16} />}
+                      onClick={() =>
+                        router.push(
+                          `/admin/lingkungan/gotong-royong/kegiatan-desa/${item.id}`
+                        )
+                      }
+                    >
+                      Detail
+                    </Button>
+                  </Box>
+                </Stack>
+              </Paper>
+            ))
+          ) : (
+            <Center py={20}>
+              <Text fz="sm" c="dimmed" lh={1.4}>
+                Tidak ada kegiatan desa yang cocok dengan pencarian
+              </Text>
+            </Center>
+          )}
+        </Stack>
       </Paper>
       <Center>
         <Pagination

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

@@ -1,6 +1,28 @@
+'use client'
+import { usePathname } from "next/navigation";
 import LayoutTabs from "./_lib/layoutTabs";
+import { Box } from "@mantine/core";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  
+    // Contoh path:
+    // - /darmasaba/desa/berita/semua → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+  
+    const segments = pathname.split('/').filter(Boolean);
+    const isDetailPage = segments.length >= 5;
+  
+    if (isDetailPage) {
+      // Tampilkan tanpa tab menu
+      return (
+        <Box>
+          {children}
+        </Box>
+      );
+    }
+  
   return (
     <LayoutTabs>
       {children}

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

@@ -59,6 +59,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         radius="lg"
         keepMounted={false}
       >
+        <Box visibleFrom='md' pb={10}>
           <ScrollArea type="auto" offsetScrollbars>
             <TabsList
               p="sm"
@@ -69,7 +70,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                 display: "flex",
                 flexWrap: "nowrap",
                 gap: "0.5rem",
-              paddingInline: "0.5rem",
+                paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
               }}
             >
               {tabs.map((tab, i) => (
@@ -80,22 +81,54 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                   style={{
                     fontWeight: 600,
                     fontSize: "0.9rem",
-                  whiteSpace: "nowrap",
                     transition: "all 0.2s ease",
+                    flexShrink: 0, // ✅ jangan mengecil aneh-aneh
                   }}
                 >
-                <span style={{
-                  display: "inline-block",
-                  maxWidth: "200px",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis"
-                }}>
                   {tab.label}
-                </span>
                 </TabsTab>
               ))}
             </TabsList>
           </ScrollArea>
+        </Box>
+
+        <Box hiddenFrom='md' pb={10}>
+          <ScrollArea
+            type="auto"
+            offsetScrollbars={false}
+            w="100%"
+          >
+
+            <TabsList
+              p="xs" // lebih kecil
+              style={{
+                background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                borderRadius: "1rem",
+                display: "flex",
+                flexWrap: "nowrap",
+                gap: "0.5rem",
+                width: "max-content", // ⬅️ kunci
+                maxWidth: "100%",     // ⬅️ penting
+              }}
+            >
+              {tabs.map((tab, i) => (
+                <TabsTab
+                  key={i}
+                  value={tab.value}
+                  leftSection={tab.icon}
+                  style={{
+                    fontWeight: 600,
+                    fontSize: "0.9rem",
+                    paddingInline: "0.75rem", // ⬅️ lebih ramping
+                    flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                  }}
+                >
+                  {tab.label}
+                </TabsTab>
+              ))}
+            </TabsList>
+          </ScrollArea>
+        </Box>
 
         {tabs.map((tab, i) => (
           <TabsPanel key={i} value={tab.value}>

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

@@ -77,7 +77,7 @@ function EditBentukKonservasiBerdasarkanAdat() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

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

@@ -1,5 +1,5 @@
 'use client'
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -28,13 +28,10 @@ function Page() {
     <Box p="md">
       <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
         {/* Header */}
-        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
+        <Group justify='space-between' align="center" mb={{ base: 'md', md: 'lg' }}>
-          <GridCol span={{ base: 12, md: 11 }}>
           <Title order={3} fw={600} c="dark">
             Preview Bentuk Konservasi Berdasarkan Adat
           </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
           <Button
             size="sm"
             variant="light"
@@ -49,8 +46,7 @@ function Page() {
           >
             Edit
           </Button>
-          </GridCol>
+        </Group>
-        </Grid>
 
         {/* Konten */}
         <Stack gap="md">

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

@@ -82,7 +82,7 @@ function EditFilosofiTriHitaKarana() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

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

@@ -1,5 +1,5 @@
 'use client'
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -25,13 +25,10 @@ function Page() {
   return (
     <Box p="md">
       <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
-        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
+        <Group justify="space-between" align="center" mb={{ base: 'md', md: 'lg' }}>
-          <GridCol span={{ base: 12, md: 11 }}>
           <Title order={3} fw={600}>
             Preview Filosofi Tri Hita Karana
           </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
           <Button
             size="sm"
             variant="light"
@@ -46,8 +43,7 @@ function Page() {
           >
             Edit
           </Button>
-          </GridCol>
+        </Group>
-        </Grid>
 
         <Stack gap="md">
           <Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">

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

@@ -1,8 +1,29 @@
 'use client'
+import { usePathname } from "next/navigation";
 import LayoutTabs from "./_lib/layoutTabs"
+import { Box } from "@mantine/core";
 
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  
+    // Contoh path:
+    // - /darmasaba/desa/berita/semua → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+  
+    const segments = pathname.split('/').filter(Boolean);
+    const isDetailPage = segments.length >= 5;
+  
+    if (isDetailPage) {
+      // Tampilkan tanpa tab menu
+      return (
+        <Box>
+          {children}
+        </Box>
+      );
+    }
+  
   return (
     <LayoutTabs>
       {children}

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

@@ -76,7 +76,7 @@ function EditNilaiKonservasiAdat() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

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

@@ -1,5 +1,5 @@
 'use client'
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -25,13 +25,10 @@ function Page() {
   return (
     <Box p="md">
       <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
-        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
+        <Group align="center" justify='space-between' mb={{ base: 'md', md: 'lg' }}>
-          <GridCol span={{ base: 12, md: 11 }}>
           <Title order={3} fw={600}>
             Preview Nilai Konservasi Adat
           </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }} style={{ textAlign: 'right' }}>
           <Button
             size="sm"
             variant="light"
@@ -44,8 +41,7 @@ function Page() {
           >
             Edit
           </Button>
-          </GridCol>
+        </Group>
-        </Grid>
 
         <Stack gap="md">
           <Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/[id]/edit/page.tsx

@@ -120,7 +120,7 @@ function EditKeteranganBankSampahTerdekat() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/[id]/page.tsx

@@ -43,7 +43,7 @@ function DetailKeteranganBankSampahTerdekat() {
   }
 
   return (
-    <Box>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Box mb="md">
         <Button
           variant="light"
@@ -57,7 +57,7 @@ function DetailKeteranganBankSampahTerdekat() {
       </Box>
 
       <Paper
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         p="xl"
         radius="lg"
         withBorder

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/create/page.tsx

@@ -56,7 +56,7 @@ function CreateKeteranganBankSampahTerdekat() {
   }
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import colors from '@/con/colors';
 import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -28,6 +28,7 @@ function KeteranganBankSampahTerdekat() {
 function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
   const keteranganState = useProxy(pengelolaanSampahState.keteranganSampah);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -38,24 +39,26 @@ function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
   } = keteranganState.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search);
+    load(page, 10, debouncedSearch);
-  }, [page, search]);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
+    <Box py={{ base: 'sm', md: 'md' }}>
-      <Paper bg={colors['white-1']} p="lg" shadow="md" radius="md">
+      <Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
-          <Title order={4}>Daftar Bank Sampah Terdekat</Title>
+          <Title order={4} lh={1.2}>
+            Daftar Bank Sampah Terdekat
+          </Title>
           <Button 
             leftSection={<IconPlus size={18} />} 
             color="blue" 
@@ -66,14 +69,22 @@ function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
           </Button>
         </Group>
         
-        <Box style={{ overflowX: 'auto' }}>
+        {/* Desktop Table */}
-          <Table highlightOnHover>
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh>Nama Bank Sampah</TableTh>
+                <TableTh style={{ width: '30%' }}>Nama Bank Sampah</TableTh>
-                <TableTh>Alamat</TableTh>
+                <TableTh style={{ width: '35%' }}>Alamat</TableTh>
-                <TableTh>Nama Tempat di Maps</TableTh>
+                <TableTh style={{ width: '25%' }}>Nama Tempat di Maps</TableTh>
-                <TableTh>Aksi</TableTh>
+                <TableTh style={{ width: '10%' }}>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -81,17 +92,17 @@ function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500}>{item.name}</Text>
+                      <Text fz="md" fw={500} lh={1.5}>
+                        {item.name}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Box w={200}>
+                      <Text fz="sm" lh={1.5} lineClamp={2}>
-                        <Text lineClamp={2} truncate="end" fz="sm">
                         {item.alamat || '-'}
                       </Text>
-                      </Box>
                     </TableTd>
                     <TableTd>
-                      <Text fz="sm">
+                      <Text fz="sm" lh={1.5}>
                         {item.namaTempatMaps || '-'}
                       </Text>
                     </TableTd>
@@ -100,6 +111,7 @@ function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
                         variant="light"
                         color="blue"
                         onClick={() => router.push(`/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/${item.id}`)}
+                        p="xs"
                       >
                         <IconDeviceImac size={20} />
                       </Button>
@@ -108,8 +120,10 @@ function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
                 ))
               ) : (
                 <TableTr>
-                  <TableTd colSpan={4} align="center" py="xl">
+                  <TableTd colSpan={4} ta="center" py="xl">
-                    <Text c="dimmed">Tidak ada data bank sampah terdekat</Text>
+                    <Text c="dimmed" fz="sm" lh={1.4}>
+                      Tidak ada data bank sampah terdekat
+                    </Text>
                   </TableTd>
                 </TableTr>
               )}
@@ -117,8 +131,60 @@ function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
           </Table>
         </Box>
 
-        {totalPages > 1 && (
+        {/* Mobile Card */}
-          <Center mt="xl">
+        <Box hiddenFrom="md">
+          <Stack gap="xs">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} p="sm" radius="sm" withBorder>
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Nama Bank Sampah
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.name}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Alamat
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.alamat || '-'}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Nama Tempat di Maps
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.namaTempatMaps || '-'}
+                      </Text>
+                    </Box>
+                    <Group justify="flex-end" mt="xs">
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/${item.id}`)}
+                        p="xs"
+                      >
+                        <IconDeviceImac size={20} />
+                      </Button>
+                    </Group>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py="xl">
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Tidak ada data bank sampah terdekat
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
+          <Center mt={{ base: 'lg', md: 'xl' }}>
             <Pagination
               value={page}
               onChange={(newPage) => load(newPage)}
@@ -128,7 +194,6 @@ function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
               withEdges
             />
           </Center>
-        )}
       </Paper>
     </Box>
   );

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/[id]/page.tsx

@@ -90,7 +90,7 @@ function EditProgramKreatifDesa() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create/page.tsx

@@ -34,7 +34,7 @@ function CreatePengelolaanSampahBankSampah() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
           <Button 
             variant="subtle" 

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/page.tsx

@@ -1,8 +1,8 @@
 'use client'
 import colors from '@/con/colors';
 import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
-import { IconChartLine, IconClipboardTextFilled, IconEdit, IconLeaf, IconPlus, IconRecycle, IconScale, IconSearch, IconTent, IconTrashFilled, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
+import { IconAlertTriangle, IconAmbulance, IconBuilding, IconCash, IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled, IconDroplet, IconEdit, IconFiretruck, IconHome, IconHomeEco, IconHospital, IconLeaf, IconPlus, IconRecycle, IconScale, IconSchool, IconSearch, IconShieldFilled, IconShoppingCart, IconTent, IconTrashFilled, IconTree, IconTrendingUp, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -32,6 +32,7 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const router = useRouter()
+  const [debouncedSearch] = useDebouncedValue(search, 1000); // 500ms delay
 
   const {
     data,
@@ -42,8 +43,8 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
   } = stateList.findMany
 
   useShallowEffect(() => {
-    load(page, 10, search)
+    load(page, 10, debouncedSearch)
-  }, [page, search])
+  }, [page, debouncedSearch])
 
 
   const handleHapus = () => {
@@ -66,6 +67,23 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
     scale: IconScale,
     clipboard: IconClipboardTextFilled,
     trash: IconTrashFilled,
+    lingkunganSehat: IconHomeEco,
+    sumberOksigen: IconChristmasTreeFilled,
+    ekonomiBerkelanjutan: IconTrendingUp,
+    mencegahBencana: IconShieldFilled,
+    rumah: IconHome,
+    pohon: IconTree,
+    air: IconDroplet,
+    bantuan: IconCash,
+    pelatihan: IconSchool,
+    subsidi: IconShoppingCart,
+    layananKesehatan: IconHospital,
+    polisi: IconShieldFilled,
+    ambulans: IconAmbulance,
+    pemadam: IconFiretruck,
+    rumahSakit: IconHospital,
+    bangunan: IconBuilding,
+    darurat: IconAlertTriangle,
   };
 
   if (loading || !data) {
@@ -77,28 +95,45 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
   }
 
   return (
-    <Box py={10}>
+    <Box py={{ base: 'sm', md: 'lg' }}>
-      <Paper bg={colors['white-1']} p="lg" shadow="md" radius="md">
+      <Paper bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
+        <Group justify="space-between" mb={{ base: 'md', md: 'lg' }}>
-          <Title order={4}>Daftar Pengelolaan Sampah Bank Sampah</Title>
+          <Title
+            order={4}
+            lh={{ base: 1.2, md: 1.15 }}
+          >
+            Daftar Pengelolaan Sampah Bank Sampah
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
             variant="light"
-            onClick={() => router.push('/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create')}
+            onClick={() =>
+              router.push(
+                '/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create'
+              )
+            }
           >
             Tambah Baru
           </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
+        {/* Desktop Table */}
-          <Table highlightOnHover>
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh>Nama Pengelolaan Sampah</TableTh>
+                <TableTh style={{ width: '50%' }}>Nama Pengelolaan Sampah</TableTh>
-                <TableTh>Icon</TableTh>
+                <TableTh style={{ width: '20%' }}>Icon</TableTh>
-                <TableTh>Edit</TableTh>
+                <TableTh style={{ width: '15%' }}>Edit</TableTh>
-                <TableTh>Delete</TableTh>
+                <TableTh style={{ width: '15%' }}>Delete</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -106,18 +141,22 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text lineClamp={1} truncate="end" fw={500}>{item.name}</Text>
+                      <Text fz="md" fw={500} lh={1.5} lineClamp={1} truncate="end">
+                        {item.name}
+                      </Text>
                     </TableTd>
                     <TableTd>
                       {iconMap[item.icon] ? (
                         <Box>
                           {React.createElement(iconMap[item.icon], {
                             size: 24,
-                            style: { color: colors['blue-button'] }
+                            style: { color: colors['blue-button'] },
                           })}
                         </Box>
                       ) : (
-                        <Text c="dimmed" fz="sm">-</Text>
+                        <Text c="dimmed" fz="sm">
+                          -
+                        </Text>
                       )}
                     </TableTd>
                     <TableTd>
@@ -125,7 +164,11 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
                         variant="light"
                         color="green"
                         size="sm"
-                        onClick={() => router.push(`/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/${item.id}`)}
+                        onClick={() =>
+                          router.push(
+                            `/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/${item.id}`
+                          )
+                        }
                       >
                         <IconEdit size={18} />
                       </Button>
@@ -147,8 +190,10 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
                 ))
               ) : (
                 <TableTr>
-                  <TableTd colSpan={3} align="center" py="xl">
+                  <TableTd colSpan={4} ta="center" py="xl">
-                    <Text c="dimmed">Tidak ada data pengelolaan sampah</Text>
+                    <Text c="dimmed" fz="sm" lh={1.4}>
+                      Tidak ada data pengelolaan sampah
+                    </Text>
                   </TableTd>
                 </TableTr>
               )}
@@ -156,8 +201,73 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
           </Table>
         </Box>
 
-        {totalPages > 1 && (
+        {/* Mobile Cards */}
-          <Center mt="xl">
+        <Box hiddenFrom="md">
+          {filteredData.length > 0 ? (
+            <Stack gap="md">
+              {filteredData.map((item) => (
+                <Paper key={item.id} p="sm" withBorder>
+                  <Stack gap={"xs"}>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Nama Pengelolaan Sampah
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.45} lineClamp={1}>
+                      {item.name}
+                    </Text>
+                    {iconMap[item.icon] ? (
+                      React.createElement(iconMap[item.icon], {
+                        size: 20,
+                        style: { color: colors['blue-button'] },
+                      })
+                    ) : (
+                      <Text c="dimmed" fz="sm">
+                        -
+                      </Text>
+                    )}
+                    <Group justify='right'>
+                      <Button
+                        variant="light"
+                        color="green"
+                        size="xs"
+                        onClick={() =>
+                          router.push(
+                            `/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/${item.id}`
+                          )
+                        }
+                        radius="sm"
+                        p={4}
+                      >
+                        <IconEdit size={18} />
+                      </Button>
+                      <Button
+                        variant="light"
+                        color="red"
+                        size="xs"
+                        onClick={() => {
+                          setSelectedId(item.id);
+                          setModalHapus(true);
+                        }}
+                        radius="sm"
+                        p={4}
+                      >
+                        <IconTrashFilled size={18} />
+                      </Button>
+                    </Group>
+                  </Stack>
+                </Paper>
+              ))}
+            </Stack>
+          ) : (
+            <Center py="xl">
+              <Text c="dimmed" fz="xs" lh={1.4}>
+                Tidak ada data pengelolaan sampah
+              </Text>
+            </Center>
+          )}
+        </Box>
+
+
+        <Center mt={{ base: 'lg', md: 'xl' }}>
           <Pagination
             value={page}
             onChange={(newPage) => load(newPage)}
@@ -167,8 +277,6 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
             withEdges
           />
         </Center>
-        )}
-
       </Paper>
 
       {/* Modal Konfirmasi Hapus */}

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

@@ -129,7 +129,7 @@ function EditProgramPenghijauan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button

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

@@ -79,7 +79,7 @@ function DetailProgramPenghijauan() {
   const data = stateProgramPenghijauan.findUnique.data
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Tombol kembali */}
       <Button
         variant="subtle"
@@ -93,7 +93,7 @@ function DetailProgramPenghijauan() {
       {/* Konten detail */}
       <Paper
         withBorder
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"
@@ -129,8 +129,10 @@ function DetailProgramPenghijauan() {
 
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Box pl={5}>
                   <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }} />
                 </Box>
+              </Box>
 
               {/* Tombol aksi */}
               <Group gap="sm" mt="md">

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

@@ -49,7 +49,7 @@ function CreateProgramPenghijauan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Tombol back + title */}
       <Group mb="md">
         <Button

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

@@ -6,6 +6,7 @@ import {
   Box,
   Button,
   Center,
+  Group,
   Pagination,
   Paper,
   Skeleton,
@@ -17,22 +18,33 @@ import {
   TableThead,
   TableTr,
   Text,
-  Title
+  Title,
 } from '@mantine/core';
 import {
+  IconAlertTriangle,
+  IconAmbulance,
+  IconBuilding,
+  IconCash,
   IconChartLine,
   IconChristmasTreeFilled,
   IconClipboardTextFilled,
   IconDeviceImac,
+  IconDroplet,
+  IconFiretruck,
+  IconHome,
   IconHomeEco,
+  IconHospital,
   IconLeaf,
   IconPlus,
   IconRecycle,
   IconScale,
+  IconSchool,
   IconSearch,
   IconShieldFilled,
+  IconShoppingCart,
   IconTent,
   IconTrashFilled,
+  IconTree,
   IconTrendingUp,
   IconTrophy,
   IconTruckFilled,
@@ -42,9 +54,10 @@ import React, { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
 import programPenghijauanState from '../../_state/lingkungan/program-penghijauan';
+import { useDebouncedValue } from '@mantine/hooks';
 
 function ProgramPenghijauan() {
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState('');
   return (
     <Box>
       <HeaderSearch
@@ -60,15 +73,16 @@ function ProgramPenghijauan() {
 }
 
 function ListProgramPenghijauan({ search }: { search: string }) {
-  const listState = useProxy(programPenghijauanState)
+  const listState = useProxy(programPenghijauanState);
-  const { data, loading, page, totalPages, load } = listState.findMany
+  const { data, loading, page, totalPages, load } = listState.findMany;
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   useEffect(() => {
-    load(page, 10, search)
+    load(page, 10, debouncedSearch);
-  }, [page, search])
+  }, [page, debouncedSearch]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   const iconMap: Record<string, React.FC<any>> = {
     ekowisata: IconLeaf,
@@ -84,70 +98,134 @@ function ListProgramPenghijauan({ search }: { search: string }) {
     sumberOksigen: IconChristmasTreeFilled,
     ekonomiBerkelanjutan: IconTrendingUp,
     mencegahBencana: IconShieldFilled,
+    rumah: IconHome,
+    pohon: IconTree,
+    air: IconDroplet,
+    bantuan: IconCash,
+    pelatihan: IconSchool,
+    subsidi: IconShoppingCart,
+    layananKesehatan: IconHospital,
+    polisi: IconShieldFilled,
+    ambulans: IconAmbulance,
+    pemadam: IconFiretruck,
+    rumahSakit: IconHospital,
+    bangunan: IconBuilding,
+    darurat: IconAlertTriangle,
   };
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py="md">
         <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
+    <Box py="md">
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         {/* Header Section */}
-        <Box mb="md" display="flex" style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+        <Box mb="lg" visibleFrom="md">
-          <Title order={4}>Daftar Program Penghijauan</Title>
+          <Group
+            justify="space-between"
+            align="center"
+            mb="md"
+          >
+            <Title order={4} size="md" lh={1.2}>
+              Daftar Program Penghijauan
+            </Title>
             <Button
               leftSection={<IconPlus size={18} />}
               color="blue"
               variant="light"
-            onClick={() => router.push('/admin/lingkungan/program-penghijauan/create')}
+              onClick={() =>
+                router.push('/admin/lingkungan/program-penghijauan/create')
+              }
             >
               Tambah Baru
             </Button>
-        </Box>
+          </Group>
 
-        {/* Table Section */}
+          {/* Desktop Table */}
-        <Box style={{ overflowX: 'auto' }}>
+          <Box miw={0}>
-          <Table highlightOnHover>
+            <Table
+              highlightOnHover
+              miw={0}
+              style={{ tableLayout: 'fixed', width: '100%' }}
+            >
               <TableThead>
                 <TableTr>
-                <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
+                  <TableTh style={{ width: '5%', textAlign: 'center' }}>
-                <TableTh style={{ width: '25%' }}>Nama Program</TableTh>
+                    <Text fz="xs" fw={600} lh={1.4} ta="center">
-                <TableTh style={{ width: '35%' }}>Judul / Deskripsi</TableTh>
+                      No
-                <TableTh style={{ width: '15%', textAlign: 'center' }}>Ikon</TableTh>
+                    </Text>
-                <TableTh style={{ width: '15%', textAlign: 'center' }}>Aksi</TableTh>
+                  </TableTh>
+                  <TableTh style={{ width: '25%' }}>
+                    <Text fz="xs" fw={600} lh={1.4}>
+                      Nama Program
+                    </Text>
+                  </TableTh>
+                  <TableTh style={{ width: '35%' }}>
+                    <Text fz="xs" fw={600} lh={1.4}>
+                      Judul / Deskripsi
+                    </Text>
+                  </TableTh>
+                  <TableTh style={{ width: '15%', textAlign: 'center' }}>
+                    <Text fz="xs" fw={600} lh={1.4} ta="center">
+                      Ikon
+                    </Text>
+                  </TableTh>
+                  <TableTh style={{ width: '20%', textAlign: 'center' }}>
+                    <Text fz="xs" fw={600} lh={1.4} ta="center">
+                      Aksi
+                    </Text>
+                  </TableTh>
                 </TableTr>
               </TableThead>
               <TableTbody>
                 {filteredData.length > 0 ? (
                   filteredData.map((item, index) => (
                     <TableTr key={item.id}>
-                    <TableTd style={{ textAlign: 'center' }}>{index + 1}</TableTd>
+                      <TableTd ta="center">
-                    <TableTd>
+                        <Text fz="sm" fw={500} lh={1.5}>
-                      <Text fw={500} truncate="end" lineClamp={1}>{item.name}</Text>
+                          {index + 1}
+                        </Text>
                       </TableTd>
                       <TableTd>
-                      <Text lineClamp={1} fz="sm" c="dimmed" dangerouslySetInnerHTML={{ __html: item.judul }} />
+                        <Text fz="sm" fw={500} lh={1.5} truncate="end">
+                          {item.name}
+                        </Text>
                       </TableTd>
-                    <TableTd style={{ textAlign: 'center' }}>
+                      <TableTd>
+                        <Text
+                          fz="sm"
+                          fw={500}
+                          lh={1.5}
+                          lineClamp={1}
+                          dangerouslySetInnerHTML={{ __html: item.judul }}
+                        />
+                      </TableTd>
+                      <TableTd ta="center">
                         {iconMap[item.icon] && (
-                        <Box title={item.icon} mx="auto">
+                          <Box mx="auto" title={item.icon}>
-                          {React.createElement(iconMap[item.icon], { size: 22 })}
+                            {React.createElement(iconMap[item.icon], {
+                              size: 22,
+                            })}
                           </Box>
                         )}
                       </TableTd>
-                    <TableTd style={{ textAlign: 'center' }}>
+                      <TableTd ta="center">
                         <Button
                           size="xs"
                           radius="md"
                           variant="light"
                           color="blue"
                           leftSection={<IconDeviceImac size={16} />}
-                        onClick={() => router.push(`/admin/lingkungan/program-penghijauan/${item.id}`)}
+                          onClick={() =>
+                            router.push(
+                              `/admin/lingkungan/program-penghijauan/${item.id}`
+                            )
+                          }
                         >
                           Detail
                         </Button>
@@ -157,8 +235,10 @@ function ListProgramPenghijauan({ search }: { search: string }) {
                 ) : (
                   <TableTr>
                     <TableTd colSpan={5}>
-                    <Center py={20}>
+                      <Center py="xl">
-                      <Text c="dimmed">Tidak ada data program penghijauan yang cocok</Text>
+                        <Text c="dimmed" fz="sm" lh={1.4}>
+                          Tidak ada data program penghijauan yang cocok
+                        </Text>
                       </Center>
                     </TableTd>
                   </TableTr>
@@ -166,6 +246,97 @@ function ListProgramPenghijauan({ search }: { search: string }) {
               </TableTbody>
             </Table>
           </Box>
+        </Box>
+
+        {/* Mobile View – Card Layout */}
+        <Box hiddenFrom="md">
+          <Box mb="md">
+            <Title order={4} size="sm" lh={1.2}>
+              Daftar Program Penghijauan
+            </Title>
+          </Box>
+
+          <Button
+            leftSection={<IconPlus size={18} />}
+            color="blue"
+            variant="light"
+            mb="lg"
+            fullWidth
+            onClick={() =>
+              router.push('/admin/lingkungan/program-penghijauan/create')
+            }
+          >
+            Tambah Baru
+          </Button>
+
+          {filteredData.length > 0 ? (
+            filteredData.map((item, index) => (
+              <Paper key={item.id} withBorder p="md" mb="sm" radius="md">
+                <Stack gap="xs">
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      No
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4}>
+                      {index + 1}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Nama Program
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4}>
+                      {item.name}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Judul / Deskripsi
+                    </Text>
+                    <Text
+                      fz="sm"
+                      fw={500}
+                      lh={1.5}
+                      dangerouslySetInnerHTML={{ __html: item.judul }}
+                    />
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Ikon
+                    </Text>
+                    <Box mt="xs" ta="center">
+                      {iconMap[item.icon] && (
+                        React.createElement(iconMap[item.icon], { size: 24 })
+                      )}
+                    </Box>
+                  </Box>
+                  <Box>
+                    <Button
+                      size="xs"
+                      radius="md"
+                      variant="light"
+                      color="blue"
+                      leftSection={<IconDeviceImac size={16} />}
+                      onClick={() =>
+                        router.push(
+                          `/admin/lingkungan/program-penghijauan/${item.id}`
+                        )
+                      }
+                    >
+                      Detail
+                    </Button>
+                  </Box>
+                </Stack>
+              </Paper>
+            ))
+          ) : (
+            <Center py="xl">
+              <Text c="dimmed" fz="sm" lh={1.4}>
+                Tidak ada data program penghijauan yang cocok
+              </Text>
+            </Center>
+          )}
+        </Box>
       </Paper>
 
       {/* Pagination */}

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

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { IconSchool, IconStar } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -56,6 +56,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         radius="lg"
         keepMounted={false}
       >
+         <Box visibleFrom='md' pb={10}>
                   <ScrollArea type="auto" offsetScrollbars>
                     <TabsList
                       p="sm"
@@ -78,6 +79,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                             fontWeight: 600,
                             fontSize: "0.9rem",
                             transition: "all 0.2s ease",
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
                           }}
                         >
                           {tab.label}
@@ -85,6 +87,45 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                       ))}
                     </TabsList>
                   </ScrollArea>
+                </Box>
+        
+                <Box hiddenFrom='md' pb={10}>
+                  <ScrollArea
+                    type="auto"
+                    offsetScrollbars={false}
+                    w="100%"
+                  >
+        
+                    <TabsList
+                      p="xs" // lebih kecil
+                      style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        display: "flex",
+                        flexWrap: "nowrap",
+                        gap: "0.5rem",
+                        width: "max-content", // ⬅️ kunci
+                        maxWidth: "100%",     // ⬅️ penting
+                      }}
+                    >
+                      {tabs.map((tab, i) => (
+                        <TabsTab
+                          key={i}
+                          value={tab.value}
+                          leftSection={tab.icon}
+                          style={{
+                            fontWeight: 600,
+                            fontSize: "0.9rem",
+                            paddingInline: "0.75rem", // ⬅️ lebih ramping
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                          }}
+                        >
+                          {tab.label}
+                        </TabsTab>
+                      ))}
+                    </TabsList>
+                  </ScrollArea>
+                </Box>
 
         {tabs.map((tab, i) => (
           <TabsPanel

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/beasiswa-pendaftar/[id]/page.tsx

@@ -40,7 +40,7 @@ function DetailBeasiswaPendaftar() {
   const data = state.findUnique.data;
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Button
         variant="subtle"
         onClick={() => router.back()}

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/beasiswa-pendaftar/page.tsx

@@ -19,6 +19,7 @@ import {
   Text,
   Title
 } from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -45,60 +46,81 @@ function BeasiswaPendaftar() {
 function ListBeasiswaPendaftar({ search }: { search: string }) {
   const state = useProxy(beasiswaDesaState.beasiswaPendaftar);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const { data, page, totalPages, loading, load } = state.findMany;
 
   useEffect(() => {
-    load(page, 10, search);
+    load(page, 10, debouncedSearch);
-  }, [page, search]);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
+    <Box py={{ base: 'sm', md: 'md' }}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
-          <Title order={4}>Daftar Beasiswa Pendaftar</Title>
+          <Title order={4} lh={1.2}>
+            Daftar Beasiswa Pendaftar
+          </Title>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
+        {/* Desktop: Table */}
-          <Table highlightOnHover>
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh>No</TableTh>
+                <TableTh w="5%">No</TableTh>
-                <TableTh>Nama Lengkap</TableTh>
+                <TableTh w="25%">Nama Lengkap</TableTh>
-                <TableTh>Alamat</TableTh>
+                <TableTh w="30%">Alamat</TableTh>
-                <TableTh>Tanggal Lahir</TableTh>
+                <TableTh w="15%">Tanggal Lahir</TableTh>
-                <TableTh>Jenis Kelamin</TableTh>
+                <TableTh w="15%">Jenis Kelamin</TableTh>
-                <TableTh>Aksi</TableTh>
+                <TableTh w="10%">Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item, index) => (
                   <TableTr key={item.id}>
-                    <TableTd>{index + 1}</TableTd>
                     <TableTd>
-                      <Text truncate fz="sm">{item.namaLengkap}</Text>
+                      <Text fz="md" fw={500} lh={1.45}>
+                        {index + 1}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Text truncate fz="sm">{item.alamatKTP}</Text>
+                      <Text truncate fz="md" fw={500} lh={1.45}>
+                        {item.namaLengkap}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Text truncate fz="sm">
+                      <Text truncate fz="md" fw={500} lh={1.45}>
+                        {item.alamatKTP}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate fz="md" fw={500} lh={1.45}>
                         {item.tanggalLahir ? new Date(item.tanggalLahir).toLocaleDateString() : '-'}
                       </Text>
                     </TableTd>
                     <TableTd>
-                      <Text truncate fz="sm">{item.jenisKelamin}</Text>
+                      <Text truncate fz="md" fw={500} lh={1.45}>
+                        {item.jenisKelamin}
+                      </Text>
                     </TableTd>
                     <TableTd>
                       <Button
@@ -107,6 +129,9 @@ function ListBeasiswaPendaftar({ search }: { search: string }) {
                         onClick={() =>
                           router.push(`/admin/pendidikan/beasiswa-desa/beasiswa-pendaftar/${item.id}`)
                         }
+                        fz="sm"
+                        fw={500}
+                        lh={1.4}
                       >
                         <IconDeviceImacCog size={20} />
                         <Text ml={5}>Detail</Text>
@@ -117,8 +142,10 @@ function ListBeasiswaPendaftar({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={6}>
-                    <Center py={20}>
+                    <Center py={{ base: 'sm', md: 'md' }}>
-                      <Text c="dimmed">Tidak ada data pendaftar yang cocok</Text>
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada data pendaftar yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -126,6 +153,82 @@ function ListBeasiswaPendaftar({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile: Card */}
+        <Box hiddenFrom="md">
+          <Stack gap="xs">
+            {filteredData.length > 0 ? (
+              filteredData.map((item, index) => (
+                <Paper key={item.id} withBorder p="sm" radius="sm">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        No
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {index + 1}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Nama Lengkap
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4} truncate>
+                        {item.namaLengkap}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Alamat
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4} truncate>
+                        {item.alamatKTP}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Tanggal Lahir
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.tanggalLahir ? new Date(item.tanggalLahir).toLocaleDateString() : '-'}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Jenis Kelamin
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.jenisKelamin}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() =>
+                          router.push(`/admin/pendidikan/beasiswa-desa/beasiswa-pendaftar/${item.id}`)
+                        }
+                        fullWidth
+                        fz="sm"
+                        fw={500}
+                        lh={1.4}
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </Box>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py="sm">
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Tidak ada data pendaftar yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
 
       <Center>

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/[id]/page.tsx

@@ -93,7 +93,7 @@ function EditProgramKreatifDesa() {
     }
   }
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button
           variant="subtle"

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/create/page.tsx

@@ -37,7 +37,7 @@ function CreateKeunggulanProgram() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button
           variant="subtle"

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/page.tsx

@@ -18,7 +18,7 @@ import {
   Text,
   Title
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrashFilled } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -48,12 +48,13 @@ function ListKeunggulanProgram({ search }: { search: string }) {
   const router = useRouter();
   const [modalHapus, setModalHapus] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const { data, page, totalPages, loading, load } = stateList.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search);
+    load(page, 10, debouncedSearch);
-  }, [page, search]);
+  }, [page, debouncedSearch]);
 
   const handleHapus = () => {
     if (selectedId) {
@@ -67,14 +68,14 @@ function ListKeunggulanProgram({ search }: { search: string }) {
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py="md">
         <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
+    <Box py="md">
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Group justify="space-between" mb="md">
           <Title order={4}>Daftar Keunggulan Program</Title>
@@ -92,34 +93,44 @@ function ListKeunggulanProgram({ search }: { search: string }) {
           </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
+        {/* Desktop Table */}
-          <Table highlightOnHover>
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ minWidth: 200 }}>Nama Keunggulan Program</TableTh>
+                <TableTh style={{ width: '30%' }}>Nama Keunggulan Program</TableTh>
-                <TableTh style={{ minWidth: 200 }}>Deskripsi</TableTh>
+                <TableTh style={{ width: '40%' }}>Deskripsi</TableTh>
-                <TableTh style={{ minWidth: 200 }}>Edit</TableTh>
+                <TableTh style={{ width: '15%' }}>Edit</TableTh>
-                <TableTh style={{ minWidth: 200 }}>Delete</TableTh>
+                <TableTh style={{ width: '15%' }}>Delete</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd style={{ minWidth: 200 }}>
+                    <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
+                      <Text fz="md" fw={500} lh={1.45} truncate="end" lineClamp={1}>
                         {item.judul}
                       </Text>
                     </TableTd>
-                    <TableTd style={{ minWidth: 200 }}>
+                    <TableTd>
                       <Text
+                        fz="md"
                         fw={500}
+                        lh={1.45}
                         truncate="end"
                         lineClamp={1}
                         dangerouslySetInnerHTML={{ __html: item.deskripsi }}
                       />
                     </TableTd>
-                    <TableTd style={{ minWidth: 200 }}>
+                    <TableTd>
                       <Button
                         variant="light"
                         color="green"
@@ -133,7 +144,7 @@ function ListKeunggulanProgram({ search }: { search: string }) {
                         <IconEdit size={18} />
                       </Button>
                     </TableTd>
-                    <TableTd style={{ minWidth: 200 }}>
+                    <TableTd>
                       <Button
                         variant="light"
                         color="red"
@@ -151,8 +162,8 @@ function ListKeunggulanProgram({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={4}>
-                    <Center py={20}>
+                    <Center py="xl">
-                      <Text c="dimmed">
+                      <Text c="dimmed" fz="sm" lh={1.4}>
                         Tidak ada data keunggulan program yang cocok
                       </Text>
                     </Center>
@@ -162,9 +173,70 @@ function ListKeunggulanProgram({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Box hiddenFrom="md">
+          <Stack gap="sm">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} withBorder p="md" radius="sm">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>Nama Keunggulan Program</Text>
+                      <Text fz="sm" fw={500} lh={1.4} truncate="end">
+                        {item.judul}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>Deskripsi</Text>
+                      <Text
+                        fz="sm"
+                        fw={500}
+                        lh={1.4}
+                        truncate="end"
+                        dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                      />
+                    </Box>
+                    <Group justify="flex-end" mt="xs">
+                      <Button
+                        variant="light"
+                        color="green"
+                        size="xs"
+                        onClick={() =>
+                          router.push(
+                            `/admin/pendidikan/beasiswa-desa/keunggulan-program/${item.id}`
+                          )
+                        }
+                      >
+                        <IconEdit size={16} />
+                      </Button>
+                      <Button
+                        variant="light"
+                        color="red"
+                        size="xs"
+                        onClick={() => {
+                          setSelectedId(item.id);
+                          setModalHapus(true);
+                        }}
+                      >
+                        <IconTrashFilled size={16} />
+                      </Button>
+                    </Group>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py="xl">
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Tidak ada data keunggulan program yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
 
-      {totalPages > 1 && (
+     
         <Center>
           <Pagination
             value={page}
@@ -179,9 +251,7 @@ function ListKeunggulanProgram({ search }: { search: string }) {
             radius="md"
           />
         </Center>
-      )}
 
-      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}

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

@@ -1,8 +1,29 @@
 'use client'
 import React from 'react';
 import LayoutTabs from './_lib/layoutTabs';
+import { usePathname } from 'next/navigation';
+import { Box } from '@mantine/core';
 
 function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  
+    // Contoh path:
+    // - /darmasaba/desa/berita/semua → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+  
+    const segments = pathname.split('/').filter(Boolean);
+    const isDetailPage = segments.length >= 5;
+  
+    if (isDetailPage) {
+      // Tampilkan tanpa tab menu
+      return (
+        <Box>
+          {children}
+        </Box>
+      );
+    }
+  
   return (
     <LayoutTabs>
       {children}

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

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { IconBuildingCommunity, IconCalendar, IconSchool } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -62,6 +62,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         radius="lg"
         keepMounted={false}
       >
+         <Box visibleFrom='md' pb={10}>
                   <ScrollArea type="auto" offsetScrollbars>
                     <TabsList
                       p="sm"
@@ -84,6 +85,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                             fontWeight: 600,
                             fontSize: "0.9rem",
                             transition: "all 0.2s ease",
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
                           }}
                         >
                           {tab.label}
@@ -91,6 +93,45 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                       ))}
                     </TabsList>
                   </ScrollArea>
+                </Box>
+        
+                <Box hiddenFrom='md' pb={10}>
+                  <ScrollArea
+                    type="auto"
+                    offsetScrollbars={false}
+                    w="100%"
+                  >
+        
+                    <TabsList
+                      p="xs" // lebih kecil
+                      style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        display: "flex",
+                        flexWrap: "nowrap",
+                        gap: "0.5rem",
+                        width: "max-content", // ⬅️ kunci
+                        maxWidth: "100%",     // ⬅️ penting
+                      }}
+                    >
+                      {tabs.map((tab, i) => (
+                        <TabsTab
+                          key={i}
+                          value={tab.value}
+                          leftSection={tab.icon}
+                          style={{
+                            fontWeight: 600,
+                            fontSize: "0.9rem",
+                            paddingInline: "0.75rem", // ⬅️ lebih ramping
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                          }}
+                        >
+                          {tab.label}
+                        </TabsTab>
+                      ))}
+                    </TabsList>
+                  </ScrollArea>
+                </Box>
 
         {tabs.map((tab, i) => (
           <TabsPanel

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit/page.tsx

@@ -116,7 +116,7 @@ function EditFasilitasYangDisediakan() {
   }
 
   return (
-    <Box>
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Stack gap="xs">
         <Group mb="md">
           <Button

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Divider, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -29,13 +29,10 @@ function Page() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header */}
-        <Grid align="center">
+        <Group justify='space-between' align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
           <Title order={3} c={colors['blue-button']}>
             Pratinjau Fasilitas Yang Disediakan
           </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
           <Button
             c="green"
             variant="light"
@@ -49,8 +46,7 @@ function Page() {
           >
             Edit
           </Button>
-          </GridCol>
+        </Group>
-        </Grid>
 
         {/* Konten Preview */}
         <Paper
@@ -59,6 +55,7 @@ function Page() {
           withBorder
           radius="md"
           shadow="xs"
+          visibleFrom='md'
         >
           <Box px={{ base: 'sm', md: 50 }}>
             <Stack gap="lg">
@@ -84,6 +81,47 @@ function Page() {
             </Stack>
           </Box>
         </Paper>
+
+        <Paper
+          p="xl"
+          bg={colors['white-1']}
+          withBorder
+          radius="md"
+          shadow="xs"
+          hiddenFrom='md'
+        >
+          <Box px={{ base: 'sm', md: 50 }}>
+            <Stack gap="lg">
+              {/* Judul */}
+              <Text
+                ta="center"
+                fz={{ base: '1.3rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+                dangerouslySetInnerHTML={{ __html: data.judul }}
+              />
+              <Divider my="md" color={colors['blue-button']} />
+
+              {/* Deskripsi */}
+              <Text
+                fz={{ base: '0.95rem', md: '1.2rem' }}
+                lh={1.7}
+                ta={{ base: 'left', md: 'justify' }}
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{
+                  wordBreak: 'break-word',
+                  whiteSpace: 'normal',
+                  textWrap: 'pretty',
+                  hyphens: 'auto',
+                  '& p': {
+                    marginBottom: '0.8em',
+                  },
+                }}
+              />
+            </Stack>
+          </Box>
+        </Paper>
       </Stack>
     </Paper>
   );

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

@@ -1,7 +1,29 @@
+'use client'
 import React from 'react';
 import LayoutTabs from './_lib/layoutTabs';
+import { usePathname } from 'next/navigation';
+import { Box } from '@mantine/core';
 
 function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  
+    // Contoh path:
+    // - /darmasaba/desa/berita/semua → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+  
+    const segments = pathname.split('/').filter(Boolean);
+    const isDetailPage = segments.length >= 5;
+  
+    if (isDetailPage) {
+      // Tampilkan tanpa tab menu
+      return (
+        <Box>
+          {children}
+        </Box>
+      );
+    }
+  
   return (
     <LayoutTabs>
       {children}

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit/page.tsx

@@ -113,7 +113,7 @@ function EditLokasiDanJadwal() {
   }
 
   return (
-    <Box>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Stack gap="xs">
         <Group mb="md">
           <Button

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Divider, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -29,13 +29,10 @@ function Page() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header */}
-        <Grid align="center">
+        <Group justify='space-between' align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
           <Title order={3} c={colors['blue-button']}>
             Pratinjau Lokasi & Jadwal
           </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
           <Button
             c="green"
             variant="light"
@@ -49,8 +46,7 @@ function Page() {
           >
             Edit
           </Button>
-          </GridCol>
+        </Group>
-        </Grid>
 
         {/* Konten Preview */}
         <Paper
@@ -59,6 +55,7 @@ function Page() {
           withBorder
           radius="md"
           shadow="xs"
+          visibleFrom='md'
         >
           <Box px={{ base: 'sm', md: 50 }}>
             <Stack gap="lg">
@@ -85,6 +82,48 @@ function Page() {
             </Stack>
           </Box>
         </Paper>
+
+        <Paper
+          p="xl"
+          bg={colors['white-1']}
+          withBorder
+          radius="md"
+          shadow="xs"
+          hiddenFrom='md'
+        >
+          <Box px={{ base: 'sm', md: 50 }}>
+            <Stack gap="lg">
+              {/* Judul */}
+              <Text
+                ta="center"
+                fz={{ base: '1.3rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+                dangerouslySetInnerHTML={{ __html: data.judul }}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+              />
+              <Divider my="md" color={colors['blue-button']} />
+
+              {/* Deskripsi */}
+              <Text
+                fz={{ base: '0.95rem', md: '1.2rem' }}
+                lh={1.7}
+                ta={{ base: 'left', md: 'justify' }}
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{
+                  wordBreak: 'break-word',
+                  whiteSpace: 'normal',
+                  textWrap: 'pretty',
+                  hyphens: 'auto',
+                  '& p': {
+                    marginBottom: '0.8em',
+                  },
+                }}
+              />
+            </Stack>
+          </Box>
+        </Paper>
       </Stack>
     </Paper>
   );

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/edit/page.tsx

@@ -109,7 +109,7 @@ function EditTujuanProgram() {
   }
 
   return (
-    <Box>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Stack gap="xs">
         <Group mb="md">
           <Button variant="subtle" onClick={handleBack} p="xs" radius="md">

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/page.tsx

@@ -4,8 +4,7 @@ import {
   Box,
   Button,
   Divider,
-  Grid,
+  Group,
-  GridCol,
   Paper,
   Skeleton,
   Stack,
@@ -40,13 +39,10 @@ function Page() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header */}
-        <Grid align="center">
+        <Group justify='space-between' align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
           <Title order={3} c={colors['blue-button']}>
             Pratinjau Tujuan Program
           </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
           <Button
             c="green"
             variant="light"
@@ -60,8 +56,7 @@ function Page() {
           >
             Edit
           </Button>
-          </GridCol>
+        </Group>
-        </Grid>
 
         {/* Konten Preview */}
         <Paper
@@ -70,6 +65,7 @@ function Page() {
           withBorder
           radius="md"
           shadow="xs"
+          visibleFrom='md'
         >
           <Box px={{ base: 'sm', md: 50 }}>
             <Stack gap="lg">
@@ -95,6 +91,47 @@ function Page() {
             </Stack>
           </Box>
         </Paper>
+
+         <Paper
+          p="xl"
+          bg={colors['white-1']}
+          withBorder
+          radius="md"
+          shadow="xs"
+          hiddenFrom='md'
+        >
+          <Box px={{ base: 'sm', md: 50 }}>
+            <Stack gap="lg">
+              {/* Judul */}
+              <Text
+                ta="center"
+                fz={{ base: '1.3rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+                dangerouslySetInnerHTML={{ __html: data.judul }}
+              />
+              <Divider my="md" color={colors['blue-button']} />
+
+              {/* Deskripsi */}
+              <Text
+                fz={{ base: '0.95rem', md: '1.2rem' }}
+                lh={1.7}
+                ta={{ base: 'left', md: 'justify' }}
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{
+                  wordBreak: 'break-word',
+                  whiteSpace: 'normal',
+                  textWrap: 'pretty',
+                  hyphens: 'auto',
+                  '& p': {
+                    marginBottom: '0.8em',
+                  },
+                }}
+              />
+            </Stack>
+          </Box>
+        </Paper>
       </Stack>
     </Paper>
   );

src/app/admin/(dashboard)/pendidikan/data-pendidikan/[id]/page.tsx

@@ -76,7 +76,7 @@ export default function EditDataPendidikan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'xl' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md" gap="sm">
         <Button variant="subtle" onClick={() => router.back()} radius="md">
           <IconArrowBack size={20} stroke={2} />

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

@@ -39,7 +39,7 @@ export default function CreateDataPendidikan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'xl' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md" gap="sm">
         <Button variant="subtle" onClick={() => router.back()} radius="md">
           <IconArrowBack size={20} stroke={2} />

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

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { IconBuilding, IconChalkboard, IconMicroscope, IconSchool } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -68,6 +68,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         radius="lg"
         keepMounted={false}
       >
+        <Box visibleFrom='md' pb={10}>
                  <ScrollArea type="auto" offsetScrollbars>
                    <TabsList
                      p="sm"
@@ -90,6 +91,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                            fontWeight: 600,
                            fontSize: "0.9rem",
                            transition: "all 0.2s ease",
+                           flexShrink: 0, // ✅ jangan mengecil aneh-aneh
                          }}
                        >
                          {tab.label}
@@ -97,6 +99,45 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                      ))}
                    </TabsList>
                  </ScrollArea>
+               </Box>
+       
+               <Box hiddenFrom='md' pb={10}>
+                 <ScrollArea
+                   type="auto"
+                   offsetScrollbars={false}
+                   w="100%"
+                 >
+       
+                   <TabsList
+                     p="xs" // lebih kecil
+                     style={{
+                       background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                       borderRadius: "1rem",
+                       display: "flex",
+                       flexWrap: "nowrap",
+                       gap: "0.5rem",
+                       width: "max-content", // ⬅️ kunci
+                       maxWidth: "100%",     // ⬅️ penting
+                     }}
+                   >
+                     {tabs.map((tab, i) => (
+                       <TabsTab
+                         key={i}
+                         value={tab.value}
+                         leftSection={tab.icon}
+                         style={{
+                           fontWeight: 600,
+                           fontSize: "0.9rem",
+                           paddingInline: "0.75rem", // ⬅️ lebih ramping
+                           flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                         }}
+                       >
+                         {tab.label}
+                       </TabsTab>
+                     ))}
+                   </TabsList>
+                 </ScrollArea>
+               </Box>
 
         {tabs.map((tab, i) => (
           <TabsPanel

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

@@ -90,7 +90,7 @@ function EditJenjangPendidikan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

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

@@ -51,7 +51,7 @@ function CreateJenjangPendidikan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Back button + Title */}
       <Group mb="md">
         <Button

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

@@ -1,6 +1,23 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -9,29 +26,25 @@ import { useProxy } from 'valtio/utils';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
 
-
 function JenjangPendidikan() {
-  // const [search, setSearch] = useState("")
   return (
     <Box>
-      <Title order={4}>Jenjang Pendidikan</Title>
+      <Title order={2} visibleFrom="md">
-      {/* <HeaderSearch
+        Jenjang Pendidikan
-        title='Jenjang Pendidikan'
+      </Title>
-        placeholder='Cari jenjang pendidikan...'
+      <Title order={2} hiddenFrom="md">
-        searchIcon={<IconSearch size={20} />}
+        Jenjang Pendidikan
-        value={search}
+      </Title>
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      /> */}
       <ListJenjangPendidikan />
     </Box>
   );
 }
 
 function ListJenjangPendidikan() {
-  const stateList = useProxy(infoSekolahPaud.jenjangPendidikan)
+  const stateList = useProxy(infoSekolahPaud.jenjangPendidikan);
-  const [modalHapus, setModalHapus] = useState(false)
+  const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const router = useRouter()
+  const router = useRouter();
 
   const {
     data,
@@ -39,50 +52,65 @@ function ListJenjangPendidikan() {
     totalPages,
     loading,
     load,
-  } = stateList.findMany
+  } = stateList.findMany;
 
   const handleHapus = () => {
     if (selectedId) {
-      stateList.delete.byId(selectedId)
+      stateList.delete.byId(selectedId);
-      setModalHapus(false)
+      setModalHapus(false);
-      setSelectedId(null)
+      setSelectedId(null);
-    }
     }
+  };
 
   useShallowEffect(() => {
-    load(page, 10)
+    load(page, 10);
-  }, [page])
+  }, [page]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py="md">
         <Skeleton h={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box py={10}>
+    <Box py="md">
       <Paper bg={colors['white-1']} p="lg" withBorder shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Jenjang Pendidikan</Title>
+          <Title order={3} visibleFrom="md">
+            Daftar Jenjang Pendidikan
+          </Title>
+          <Title order={3} hiddenFrom="md">
+            Daftar Jenjang Pendidikan
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
             variant="light"
-            onClick={() => router.push('/admin/pendidikan/info-sekolah/jenjang-pendidikan/create')}
+            onClick={() =>
+              router.push('/admin/pendidikan/info-sekolah/jenjang-pendidikan/create')
+            }
           >
             Tambah Baru
           </Button>
         </Group>
 
-        <Box style={{ overflowX: "auto" }}>
+        {/* Desktop Table */}
-          <Table highlightOnHover>
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh>Nama Jenjang Pendidikan</TableTh>
+                <TableTh style={{ width: '70%' }}>Nama Jenjang Pendidikan</TableTh>
                 <TableTh style={{ width: '15%' }}>Edit</TableTh>
                 <TableTh style={{ width: '15%' }}>Delete</TableTh>
               </TableTr>
@@ -92,13 +120,19 @@ function ListJenjangPendidikan() {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end">{item.nama}</Text>
+                      <Text fz="md" fw={500} lh={1.45} truncate="end">
+                        {item.nama}
+                      </Text>
                     </TableTd>
                     <TableTd>
                       <Button
                         color="green"
                         variant="light"
-                        onClick={() => router.push(`/admin/pendidikan/info-sekolah/jenjang-pendidikan/${item.id}`)}
+                        onClick={() =>
+                          router.push(
+                            `/admin/pendidikan/info-sekolah/jenjang-pendidikan/${item.id}`
+                          )
+                        }
                       >
                         <IconEdit size={20} />
                       </Button>
@@ -108,8 +142,8 @@ function ListJenjangPendidikan() {
                         color="red"
                         variant="light"
                         onClick={() => {
-                          setSelectedId(item.id)
+                          setSelectedId(item.id);
-                          setModalHapus(true)
+                          setModalHapus(true);
                         }}
                       >
                         <IconX size={20} />
@@ -120,8 +154,10 @@ function ListJenjangPendidikan() {
               ) : (
                 <TableTr>
                   <TableTd colSpan={3}>
-                    <Center py={20}>
+                    <Center py="xl">
-                      <Text color="dimmed">Tidak ada data jenjang pendidikan</Text>
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada data jenjang pendidikan
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -129,6 +165,55 @@ function ListJenjangPendidikan() {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Stack hiddenFrom="md" gap="sm">
+          {filteredData.length > 0 ? (
+            filteredData.map((item) => (
+              <Paper key={item.id} withBorder p="sm" radius="md">
+                <Box>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Nama Jenjang Pendidikan
+                  </Text>
+                  <Text fz="sm" fw={500} lh={1.4}>
+                    {item.nama}
+                  </Text>
+                </Box>
+                <Group mt="sm" justify="flex-end" gap="xs">
+                  <Button
+                    color="green"
+                    variant="light"
+                    size="compact-sm"
+                    onClick={() =>
+                      router.push(
+                        `/admin/pendidikan/info-sekolah/jenjang-pendidikan/${item.id}`
+                      )
+                    }
+                  >
+                    <IconEdit size={16} />
+                  </Button>
+                  <Button
+                    color="red"
+                    variant="light"
+                    size="compact-sm"
+                    onClick={() => {
+                      setSelectedId(item.id);
+                      setModalHapus(true);
+                    }}
+                  >
+                    <IconX size={16} />
+                  </Button>
+                </Group>
+              </Paper>
+            ))
+          ) : (
+            <Center py="xl">
+              <Text c="dimmed" fz="sm" lh={1.4}>
+                Tidak ada data jenjang pendidikan
+              </Text>
+            </Center>
+          )}
+        </Stack>
       </Paper>
 
       <Center>
@@ -151,7 +236,7 @@ function ListJenjangPendidikan() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus jenjang pendidikan ini?'
+        text="Apakah anda yakin ingin menghapus jenjang pendidikan ini?"
       />
     </Box>
   );

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

@@ -1,7 +1,29 @@
+'use client'
 import React from 'react';
 import LayoutTabs from './_lib/layoutTabs';
+import { usePathname } from 'next/navigation';
+import { Box } from '@mantine/core';
 
 function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  
+    // Contoh path:
+    // - /darmasaba/desa/berita/semua → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+  
+    const segments = pathname.split('/').filter(Boolean);
+    const isDetailPage = segments.length >= 5;
+  
+    if (isDetailPage) {
+      // Tampilkan tanpa tab menu
+      return (
+        <Box>
+          {children}
+        </Box>
+      );
+    }
+  
   return (
     <LayoutTabs>
       {children}

src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/edit/page.tsx

@@ -96,7 +96,7 @@ export default function EditLembaga() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button

src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/page.tsx

@@ -41,7 +41,7 @@ function DetailLembaga() {
   const data = detailState.findUnique.data;
 
   return (
-    <Box py={10}>
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Button
         variant="subtle"
         onClick={() => router.back()}
@@ -53,7 +53,7 @@ function DetailLembaga() {
 
       <Paper
         withBorder
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"

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

@@ -52,7 +52,7 @@ function CreateLembaga() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

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

@@ -18,7 +18,7 @@ import {
   Text,
   Title
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -27,7 +27,7 @@ import HeaderSearch from '../../../_com/header';
 import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
 
 function Lembaga() {
-  const [search, setSearch] = useState("")
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
@@ -43,8 +43,9 @@ function Lembaga() {
 }
 
 function ListLembaga({ search }: { search: string }) {
-  const stateList = useProxy(infoSekolahPaud.lembagaPendidikan)
+  const stateList = useProxy(infoSekolahPaud.lembagaPendidikan);
-  const router = useRouter()
+  const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -55,40 +56,65 @@ function ListLembaga({ search }: { search: string }) {
   } = stateList.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search)
+    load(page, 10, debouncedSearch);
-  }, [page, search])
+  }, [page, debouncedSearch]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton height={600} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box py={10}>
+    <Box py={{ base: 'sm', md: 'md' }}>
-      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
-          <Title order={4}>Daftar Lembaga</Title>
+          <Title order={4} lh={1.2}>
+            Daftar Lembaga
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
             variant="light"
-            onClick={() => router.push('/admin/pendidikan/info-sekolah/lembaga/create')}
+            onClick={() =>
+              router.push('/admin/pendidikan/info-sekolah/lembaga/create')
+            }
           >
             Tambah Baru
           </Button>
         </Group>
-        <Box style={{ overflowX: "auto" }}>
+
-          <Table highlightOnHover>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '40%' }}>Nama Lembaga</TableTh>
+                <TableTh style={{ width: '40%' }}>
-                <TableTh style={{ width: '30%' }}>Jenjang Pendidikan</TableTh>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">
-                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+                    Nama Lembaga
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '30%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">
+                    Jenjang Pendidikan
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '15%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">
+                    Aksi
+                  </Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -96,19 +122,29 @@ function ListLembaga({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end">
+                        {item.nama}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Text fz="sm" c="dimmed">{item.jenjangPendidikan?.nama || '-'}</Text>
+                      <Text fz="sm" fw={500} lh={1.5} c="gray.7">
+                        {item.jenjangPendidikan?.nama || '-'}
+                      </Text>
                     </TableTd>
                     <TableTd>
                       <Button
                         variant="light"
                         color="blue"
-                        onClick={() => router.push(`/admin/pendidikan/info-sekolah/lembaga/${item.id}`)}
+                        onClick={() =>
+                          router.push(
+                            `/admin/pendidikan/info-sekolah/lembaga/${item.id}`
+                          )
+                        }
                       >
                         <IconDeviceImac size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -116,8 +152,10 @@ function ListLembaga({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={3}>
-                    <Center py={20}>
+                    <Center py={{ base: 20, md: 24 }}>
-                      <Text color="dimmed">Tidak ada data lembaga yang cocok</Text>
+                      <Text c="gray.6" fz="sm" lh={1.5}>
+                        Tidak ada data lembaga yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -125,6 +163,59 @@ function ListLembaga({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Card View */}
+        <Box hiddenFrom="md">
+          <Stack gap="xs">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} p="sm" withBorder bg="white">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4} c="gray.7">
+                        Nama Lembaga
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.nama}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4} c="gray.7">
+                        Jenjang Pendidikan
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4} c="gray.7">
+                        {item.jenjangPendidikan?.nama || '-'}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Button
+                        fullWidth
+                        variant="light"
+                        color="blue"
+                        onClick={() =>
+                          router.push(
+                            `/admin/pendidikan/info-sekolah/lembaga/${item.id}`
+                          )
+                        }
+                      >
+                        <IconDeviceImac size={18} />
+                        <Text ml={6} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
+                      </Button>
+                    </Box>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py={20}>
+                <Text c="gray.6" fz="sm" lh={1.5}>
+                  Tidak ada data lembaga yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
 
       <Center>

src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/edit/page.tsx

@@ -100,7 +100,7 @@ function EditPengajar() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header Back + Title */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/page.tsx

@@ -41,7 +41,7 @@ function DetailPengajar() {
   const data = detailState.findUnique.data;
 
   return (
-    <Box py={10}>
+   <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Button
         variant="subtle"
         onClick={() => router.back()}
@@ -53,7 +53,7 @@ function DetailPengajar() {
 
       <Paper
         withBorder
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"

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

@@ -57,7 +57,7 @@ function CreatePengajar() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header Back + Title */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

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

@@ -11,6 +11,7 @@ import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
+import { useDebouncedValue } from '@mantine/hooks';
 
 function Pengajar() {
   const [search, setSearch] = useState('');
@@ -29,8 +30,9 @@ function Pengajar() {
 }
 
 function ListPengajar({ search }: { search: string }) {
-  const listState = useProxy(infoSekolahPaud.pengajar)
+  const listState = useProxy(infoSekolahPaud.pengajar);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -41,24 +43,26 @@ function ListPengajar({ search }: { search: string }) {
   } = listState.findMany;
 
   useEffect(() => {
-    load(page, 10, search)
+    load(page, 10, debouncedSearch);
-  }, [page, search])
+  }, [page, debouncedSearch]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton h={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box py={10}>
+    <Box py={{ base: 'sm', md: 'md' }}>
-      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
-          <Title order={4}>Daftar Pengajar</Title>
+          <Title order={4} lh={1.2}>
+            Daftar Pengajar
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -69,13 +73,33 @@ function ListPengajar({ search }: { search: string }) {
           </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
+        {/* Desktop Table */}
-          <Table highlightOnHover striped withRowBorders style={{ minWidth: '700px' }}>
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '35%' }}>Nama Pengajar</TableTh>
+                <TableTh style={{ width: '35%' }}>
-                <TableTh style={{ width: '35%' }}>Lembaga</TableTh>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">
-                <TableTh style={{ width: '20%' }}>Aksi</TableTh>
+                    Nama Pengajar
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '35%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">
+                    Lembaga
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '30%' }}>
+                  <Text fz="sm" fw={600} lh={1.4} ta="left">
+                    Aksi
+                  </Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -83,10 +107,14 @@ function ListPengajar({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end" lineClamp={1}>
+                        {item.nama}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Text truncate="end" fz="sm" c="dimmed">{item.lembaga.nama}</Text>
+                      <Text fz="md" fw={500} lh={1.5} c="gray.7" truncate="end">
+                        {item.lembaga.nama}
+                      </Text>
                     </TableTd>
                     <TableTd>
                       <Button
@@ -95,7 +123,9 @@ function ListPengajar({ search }: { search: string }) {
                         onClick={() => router.push(`/admin/pendidikan/info-sekolah/pengajar/${item.id}`)}
                       >
                         <IconDeviceImacCog size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -103,8 +133,10 @@ function ListPengajar({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={3}>
-                    <Center py={20}>
+                    <Center py={{ base: 'md', md: 'lg' }}>
-                      <Text c="dimmed">Tidak ada data pengajar yang cocok</Text>
+                      <Text c="gray.6" fz="sm" lh={1.4}>
+                        Tidak ada data pengajar yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -112,14 +144,63 @@ function ListPengajar({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Card View */}
+        <Box hiddenFrom="md">
+          <Stack gap="xs">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} withBorder radius="md" p="sm">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Nama Pengajar
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.nama}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Lembaga
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4} c="gray.7">
+                        {item.lembaga.nama}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Button
+                        fullWidth
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/pendidikan/info-sekolah/pengajar/${item.id}`)}
+                      >
+                        <IconDeviceImacCog size={18} />
+                        <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
+                      </Button>
+                    </Box>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py="md">
+                <Text c="gray.6" fz="sm" lh={1.4}>
+                  Tidak ada data pengajar yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
 
       <Center>
         <Pagination
           value={page}
           onChange={(newPage) => {
-            load(newPage, 10, search)
+            load(newPage, 10, search);
-            window.scrollTo({ top: 0, behavior: 'smooth' })
+            window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
           total={totalPages}
           mt="md"
@@ -129,7 +210,7 @@ function ListPengajar({ search }: { search: string }) {
         />
       </Center>
     </Box>
-  )
+  );
 }
 
 export default Pengajar;

src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/edit/page.tsx

@@ -107,7 +107,7 @@ function EditSiswa() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/page.tsx

@@ -41,7 +41,7 @@ function DetailSiswa() {
   const data = detailState.findUnique.data
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Tombol Kembali */}
       <Button
         variant="subtle"
@@ -55,7 +55,7 @@ function DetailSiswa() {
       {/* Card Utama */}
       <Paper
         withBorder
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"

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

@@ -52,7 +52,7 @@ function CreateSiswa() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header + Back Button */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

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

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import colors from '@/con/colors';
 import {
   Box,
@@ -17,7 +17,7 @@ import {
   TableThead,
   TableTr,
   Text,
-  Title
+  Title,
 } from '@mantine/core';
 import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -25,6 +25,7 @@ import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
+import { useDebouncedValue } from '@mantine/hooks';
 
 function Siswa() {
   const [search, setSearch] = useState('');
@@ -43,30 +44,33 @@ function Siswa() {
 }
 
 function ListSiswa({ search }: { search: string }) {
-  const stateSiswa = useProxy(infoSekolahPaud.siswa)
+  const stateSiswa = useProxy(infoSekolahPaud.siswa);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const { data, page, totalPages, loading, load } = stateSiswa.findMany;
 
   useEffect(() => {
-    load(page, 10, search)
+    load(page, 10, debouncedSearch);
-  }, [page, search])
+  }, [page, debouncedSearch]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box py={10}>
+    <Box py={{ base: 'sm', md: 'md' }}>
-      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
-          <Title order={4}>Daftar Siswa</Title>
+          <Title order={4} lh={1.2}>
+            Daftar Siswa
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -77,13 +81,35 @@ function ListSiswa({ search }: { search: string }) {
           </Button>
         </Group>
 
-        <Box style={{ overflowX: "auto" }}>
+        {/* Desktop Table */}
-          <Table highlightOnHover striped withRowBorders style={{ minWidth: '700px' }}>
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            striped
+            withRowBorders
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '35%' }}>Nama Siswa</TableTh>
+                <TableTh style={{ width: '35%' }}>
-                <TableTh style={{ width: '35%' }}>Lembaga</TableTh>
+                  <Text fz="sm" fw={600} lh={1.4}>
-                <TableTh style={{ width: '20%' }}>Aksi</TableTh>
+                    Nama Siswa
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '35%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Lembaga
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '20%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Aksi
+                  </Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -91,19 +117,27 @@ function ListSiswa({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end">{item.nama}</Text>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end">
+                        {item.nama}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Text truncate="end" c="dimmed">{item.lembaga.nama}</Text>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end">
+                        {item.lembaga.nama}
+                      </Text>
                     </TableTd>
                     <TableTd>
                       <Button
                         variant="light"
                         color="blue"
-                        onClick={() => router.push(`/admin/pendidikan/info-sekolah/siswa/${item.id}`)}
+                        onClick={() =>
+                          router.push(`/admin/pendidikan/info-sekolah/siswa/${item.id}`)
+                        }
                       >
                         <IconDeviceImacCog size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -111,8 +145,10 @@ function ListSiswa({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={3}>
-                    <Center py={20}>
+                    <Center py={{ base: 'sm', md: 'md' }}>
-                      <Text color="dimmed">Tidak ada data siswa yang cocok</Text>
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada data siswa yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -120,7 +156,59 @@ function ListSiswa({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Box hiddenFrom="md">
+          <Stack gap="xs">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} withBorder p="sm" radius="md">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Nama Siswa
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.nama}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Lembaga
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.lembaga.nama}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Button
+                        fullWidth
+                        variant="light"
+                        color="blue"
+                        onClick={() =>
+                          router.push(`/admin/pendidikan/info-sekolah/siswa/${item.id}`)
+                        }
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
+                      </Button>
+                    </Box>
+                  </Stack>
                 </Paper>
+              ))
+            ) : (
+              <Center py="sm">
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Tidak ada data siswa yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
+      </Paper>
+
      
         <Center>
           <Pagination
@@ -130,14 +218,14 @@ function ListSiswa({ search }: { search: string }) {
               window.scrollTo({ top: 0, behavior: 'smooth' });
             }}
             total={totalPages}
-          mt="md"
+            mt={{ base: 'sm', md: 'md' }}
-          mb="md"
+            mb={{ base: 'sm', md: 'md' }}
             color="blue"
             radius="md"
           />
         </Center>
     </Box>
-  )
+  );
 }
 
 export default Siswa;

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

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { IconBook2, IconMapPin, IconSchool } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -63,6 +63,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         radius="lg"
         keepMounted={false}
       >
+        <Box visibleFrom='md' pb={10}>
           <ScrollArea type="auto" offsetScrollbars>
             <TabsList
               p="sm"
@@ -85,6 +86,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                     fontWeight: 600,
                     fontSize: "0.9rem",
                     transition: "all 0.2s ease",
+                    flexShrink: 0, // ✅ jangan mengecil aneh-aneh
                   }}
                 >
                   {tab.label}
@@ -92,6 +94,45 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
               ))}
             </TabsList>
           </ScrollArea>
+        </Box>
+
+        <Box hiddenFrom='md' pb={10}>
+          <ScrollArea
+            type="auto"
+            offsetScrollbars={false}
+            w="100%"
+          >
+
+            <TabsList
+              p="xs" // lebih kecil
+              style={{
+                background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                borderRadius: "1rem",
+                display: "flex",
+                flexWrap: "nowrap",
+                gap: "0.5rem",
+                width: "max-content", // ⬅️ kunci
+                maxWidth: "100%",     // ⬅️ penting
+              }}
+            >
+              {tabs.map((tab, i) => (
+                <TabsTab
+                  key={i}
+                  value={tab.value}
+                  leftSection={tab.icon}
+                  style={{
+                    fontWeight: 600,
+                    fontSize: "0.9rem",
+                    paddingInline: "0.75rem", // ⬅️ lebih ramping
+                    flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                  }}
+                >
+                  {tab.label}
+                </TabsTab>
+              ))}
+            </TabsList>
+          </ScrollArea>
+        </Box>
 
         {tabs.map((tab, i) => (
           <TabsPanel

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit/page.tsx

@@ -113,7 +113,7 @@ function EditJenisProgramYangDiselenggarakan() {
   }
 
   return (
-    <Box>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Stack gap="xs">
         {/* Back Button + Title */}
         <Group mb="md">

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/page.tsx

@@ -4,8 +4,7 @@ import {
   Box,
   Button,
   Divider,
-  Grid,
+  Group,
-  GridCol,
   Paper,
   Skeleton,
   Stack,
@@ -40,13 +39,10 @@ function Page() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header */}
-        <Grid align="center">
+        <Group justify='space-between' align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
           <Title order={3} c={colors['blue-button']}>
             Preview Jenis Program Yang Diselenggarakan
           </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
           <Button
             c="green"
             variant="light"
@@ -60,8 +56,7 @@ function Page() {
           >
             Edit
           </Button>
-          </GridCol>
+        </Group>
-        </Grid>
 
         {/* Konten Preview */}
         <Paper
@@ -86,12 +81,20 @@ function Page() {
 
               {/* Deskripsi */}
               <Text
-                fz={{ base: '1rem', md: '1.2rem' }}
+                fz={{ base: '0.95rem', md: '1.2rem' }}
                 lh={1.7}
-                ta="justify"
+                ta={{ base: 'left', md: 'justify' }}
                 c="dimmed"
                 dangerouslySetInnerHTML={{ __html: data.deskripsi }}
-                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                style={{
+                  wordBreak: 'break-word',
+                  whiteSpace: 'normal',
+                  textWrap: 'pretty',
+                  hyphens: 'auto',
+                  '& p': {
+                    marginBottom: '0.8em',
+                  },
+                }}
               />
             </Stack>
           </Box>

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

@@ -1,8 +1,30 @@
 'use client'
 import React from 'react';
 import LayoutTabs from './_lib/layoutTabs';
+import { usePathname } from 'next/navigation';
+import { Box } from '@mantine/core';
 
 function Layout({ children }: { children: React.ReactNode }) {
+const pathname = usePathname();
+
+  // Contoh path:
+  // - /darmasaba/desa/berita/semua → panjang 5 → list
+  // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+  // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+
+  const segments = pathname.split('/').filter(Boolean);
+  const isDetailPage = segments.length >= 5;
+
+  if (isDetailPage) {
+    // Tampilkan tanpa tab menu
+    return (
+      <Box>
+        {children}
+      </Box>
+    );
+  }
+
+
   return (
     <LayoutTabs>
       {children}

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit/page.tsx

@@ -120,7 +120,7 @@ function EditTempatKegiatan() {
   }
 
   return (
-    <Box>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Stack gap="xs">
         {/* Back Button + Title */}
         <Group mb="md">

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Divider, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Divider, Group, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -29,13 +29,10 @@ function Page() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header */}
-        <Grid align="center">
+        <Group justify='space-between' align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
           <Title order={3} c={colors['blue-button']}>
             Preview Tempat Kegiatan
           </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
           <Button
             c="green"
             variant="light"
@@ -49,8 +46,7 @@ function Page() {
           >
             Edit
           </Button>
-          </GridCol>
+        </Group>
-        </Grid>
 
         {/* Konten Preview */}
         <Paper
@@ -75,12 +71,20 @@ function Page() {
 
               {/* Deskripsi */}
               <Text
-                fz={{ base: '1rem', md: '1.2rem' }}
+                fz={{ base: '0.95rem', md: '1.2rem' }}
                 lh={1.7}
-                ta="justify"
+                ta={{ base: 'left', md: 'justify' }}
                 c="dimmed"
                 dangerouslySetInnerHTML={{ __html: data.deskripsi }}
-                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                style={{
+                  wordBreak: 'break-word',
+                  whiteSpace: 'normal',
+                  textWrap: 'pretty',
+                  hyphens: 'auto',
+                  '& p': {
+                    marginBottom: '0.8em',
+                  },
+                }}
               />
             </Stack>
           </Box>

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/edit/page.tsx

@@ -111,7 +111,7 @@ function EditTujuanProgram() {
   }
 
   return (
-    <Box>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Stack gap="xs">
         <Group mb="md">
           <Button variant="subtle" onClick={handleBack} p="xs" radius="md">

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/page.tsx

@@ -4,8 +4,7 @@ import {
   Box,
   Button,
   Divider,
-  Grid,
+  Group,
-  GridCol,
   Paper,
   Skeleton,
   Stack,
@@ -42,13 +41,10 @@ function Page() {
     <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
       <Stack gap="md">
         {/* Header */}
-        <Grid align="center">
+        <Group justify='space-between' align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
           <Title order={3} c={colors['blue-button']}>
             Pratinjau Pendidikan Non Formal
           </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
           <Button
             c="green"
             variant="light"
@@ -62,8 +58,7 @@ function Page() {
           >
             Edit
           </Button>
-          </GridCol>
+        </Group>
-        </Grid>
 
         {/* Konten Preview */}
         <Paper
@@ -88,12 +83,20 @@ function Page() {
 
               {/* Deskripsi */}
               <Text
-                fz={{ base: '1rem', md: '1.2rem' }}
+                fz={{ base: '0.95rem', md: '1.2rem' }}
                 lh={1.7}
-                ta="justify"
+                ta={{ base: 'left', md: 'justify' }}
                 c="dimmed"
                 dangerouslySetInnerHTML={{ __html: data.deskripsi }}
-                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                style={{
+                  wordBreak: 'break-word',
+                  whiteSpace: 'normal',
+                  textWrap: 'pretty',
+                  hyphens: 'auto',
+                  '& p': {
+                    marginBottom: '0.8em',
+                  },
+                }}
               />
             </Stack>
           </Box>

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

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Box, ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { IconBook2, IconCategory, IconUser } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -62,6 +62,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         radius="lg"
         keepMounted={false}
       >
+         <Box visibleFrom='md' pb={10}>
                   <ScrollArea type="auto" offsetScrollbars>
                     <TabsList
                       p="sm"
@@ -84,6 +85,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                             fontWeight: 600,
                             fontSize: "0.9rem",
                             transition: "all 0.2s ease",
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
                           }}
                         >
                           {tab.label}
@@ -91,6 +93,45 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
                       ))}
                     </TabsList>
                   </ScrollArea>
+                </Box>
+        
+                <Box hiddenFrom='md' pb={10}>
+                  <ScrollArea
+                    type="auto"
+                    offsetScrollbars={false}
+                    w="100%"
+                  >
+        
+                    <TabsList
+                      p="xs" // lebih kecil
+                      style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        display: "flex",
+                        flexWrap: "nowrap",
+                        gap: "0.5rem",
+                        width: "max-content", // ⬅️ kunci
+                        maxWidth: "100%",     // ⬅️ penting
+                      }}
+                    >
+                      {tabs.map((tab, i) => (
+                        <TabsTab
+                          key={i}
+                          value={tab.value}
+                          leftSection={tab.icon}
+                          style={{
+                            fontWeight: 600,
+                            fontSize: "0.9rem",
+                            paddingInline: "0.75rem", // ⬅️ lebih ramping
+                            flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                          }}
+                        >
+                          {tab.label}
+                        </TabsTab>
+                      ))}
+                    </TabsList>
+                  </ScrollArea>
+                </Box>
 
         {tabs.map((tab, i) => (
           <TabsPanel

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

@@ -116,7 +116,7 @@ function EditPerpustakaanDigital() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

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

@@ -40,7 +40,7 @@ function DetailDataPerpustakaan() {
   const data = stateDetail.findUnique.data;
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Button
         variant="subtle"
         onClick={() => router.back()}
@@ -52,7 +52,7 @@ function DetailDataPerpustakaan() {
 
       <Paper
         withBorder
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/create/page.tsx

@@ -63,7 +63,7 @@ function CreateDataPerpustakaan() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Tombol Kembali */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/page.tsx

@@ -1,13 +1,31 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+} from '@mantine/core';
 import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import perpustakaanDigitalState from '../../../_state/pendidikan/perpustakaan-digital';
+import { useDebouncedValue } from '@mantine/hooks';
 
 function DataPerpustakaan() {
   const [search, setSearch] = useState('');
@@ -26,85 +44,138 @@ function DataPerpustakaan() {
 }
 
 function ListDataPerpustakaan({ search }: { search: string }) {
-  const listDataState = useProxy(perpustakaanDigitalState.dataPerpustakaan)
+  const listDataState = useProxy(perpustakaanDigitalState.dataPerpustakaan);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const { data, page, totalPages, loading, load } = listDataState.findMany;
 
   useEffect(() => {
-    load(page, 10, search);
+    load(page, 10, debouncedSearch);
-  }, [page, search]);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py="md">
         <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box py={10}>
+    <Box py="md">
       <Paper withBorder bg={colors['white-1']} p="md" shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={4}>List Data Perpustakaan</Title>
+          <Title order={4} size="md" lh={1.2}>
+            List Data Perpustakaan
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
             variant="light"
-            onClick={() => router.push('/admin/pendidikan/perpustakaan-digital/data-perpustakaan/create')}
+            onClick={() =>
+              router.push(
+                '/admin/pendidikan/perpustakaan-digital/data-perpustakaan/create'
+              )
+            }
           >
             Tambah Baru
           </Button>
         </Group>
-        <Box style={{ overflowX: 'auto' }}>
+
-          <Table striped highlightOnHover withRowBorders style={{ minWidth: '700px' }}>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            striped
+            highlightOnHover
+            withRowBorders
+            miw={0}
+            style={{ tableLayout: 'fixed', width: '100%' }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '5%' }}>No</TableTh>
+                <TableTh style={{ width: '5%' }}>
-                <TableTh style={{ width: '25%' }}>Judul</TableTh>
+                  <Text fz="xs" fw={600} lh={1.4} ta="center">
-                <TableTh style={{ width: '25%' }}>Kategori</TableTh>
+                    No
-                <TableTh style={{ width: '23%' }}>Deskripsi</TableTh>
+                  </Text>
-                <TableTh style={{ width: '22%' }}>Detail</TableTh>
+                </TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="xs" fw={600} lh={1.4}>
+                    Judul
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="xs" fw={600} lh={1.4}>
+                    Kategori
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '23%' }}>
+                  <Text fz="xs" fw={600} lh={1.4}>
+                    Deskripsi
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '22%' }}>
+                  <Text fz="xs" fw={600} lh={1.4}>
+                    Detail
+                  </Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item, index) => (
                   <TableTr key={item.id}>
-                    <TableTd style={{ width: '5%' }}>
+                    <TableTd ta="center">
-                      <Text truncate fz="sm">{index + 1}</Text>
+                      <Text fz="sm" lh={1.5} truncate>
+                        {index + 1}
+                      </Text>
                     </TableTd>
-                    <TableTd style={{ width: '20%' }}>
+                    <TableTd>
-                      <Text truncate fz="sm">{item.judul}</Text>
+                      <Text fz="sm" lh={1.5} truncate>
+                        {item.judul}
+                      </Text>
                     </TableTd>
-                    <TableTd style={{ width: '20%' }}>
+                    <TableTd>
-                      <Text truncate fz="sm">{item.kategori.name}</Text>
+                      <Text fz="sm" lh={1.5} truncate>
+                        {item.kategori.name}
+                      </Text>
                     </TableTd>
-                    <TableTd style={{ width: '20%' }}>
+                    <TableTd>
-                      <Box w={150}>
+                      <Text
-                        <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} lineClamp={1} truncate fz="sm" />
+                        dangerouslySetInnerHTML={{ __html: item.deskripsi }}
-                      </Box>
+                        lineClamp={1}
+                        fz="sm"
+                        lh={1.5}
+                        truncate
+                      />
                     </TableTd>
-                    <TableTd style={{ width: '20%' }}>
+                    <TableTd>
                       <Button
                         variant="light"
                         color="blue"
-                        onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/data-perpustakaan/${item.id}`)}
+                        onClick={() =>
+                          router.push(
+                            `/admin/pendidikan/perpustakaan-digital/data-perpustakaan/${item.id}`
+                          )
+                        }
                       >
                         <IconDeviceImacCog size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <Text ml={5} fz="sm" fw={500}>
+                          Detail
+                        </Text>
                       </Button>
                     </TableTd>
                   </TableTr>
                 ))
               ) : (
                 <TableTr>
-                  <TableTd colSpan={4}>
+                  <TableTd colSpan={5}>
-                    <Center py={20}>
+                    <Center py="xl">
-                      <Text color="dimmed">Tidak ada data perpustakaan yang cocok</Text>
+                      <Text c="dimmed" fz="sm" lh={1.5}>
+                        Tidak ada data perpustakaan yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -112,6 +183,80 @@ function ListDataPerpustakaan({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Box hiddenFrom="md">
+          <Stack gap="sm">
+            {filteredData.length > 0 ? (
+              filteredData.map((item, index) => (
+                <Paper key={item.id} withBorder p="sm" radius="md">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>
+                        No
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {index + 1}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>
+                        Judul
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4} truncate>
+                        {item.judul}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>
+                        Kategori
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4} truncate>
+                        {item.kategori.name}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="xs" fw={600} lh={1.4}>
+                        Deskripsi
+                      </Text>
+                      <Text
+                        dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                        fz="sm"
+                        fw={500}
+                        lh={1.4}
+                        lineClamp={2}
+                      />
+                    </Box>
+                    <Box>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        fullWidth
+                        onClick={() =>
+                          router.push(
+                            `/admin/pendidikan/perpustakaan-digital/data-perpustakaan/${item.id}`
+                          )
+                        }
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5} fz="sm" fw={500}>
+                          Detail
+                        </Text>
+                      </Button>
+                    </Box>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py="xl">
+                <Text c="dimmed" fz="sm" lh={1.5}>
+                  Tidak ada data perpustakaan yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
+
         <Center>
           <Pagination
             value={page}
@@ -128,7 +273,7 @@ function ListDataPerpustakaan({ search }: { search: string }) {
         </Center>
       </Paper>
     </Box>
-  )
+  );
 }
 
 export default DataPerpustakaan;

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

@@ -75,7 +75,7 @@ function EditKategoriBuku() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/create/page.tsx

@@ -34,7 +34,7 @@ function CreateKategoriBuku() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import colors from '@/con/colors';
 import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -31,6 +31,7 @@ function ListKategoriBuku({ search }: { search: string }) {
   const router = useRouter();
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -41,8 +42,8 @@ function ListKategoriBuku({ search }: { search: string }) {
   } = stateKategori.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search)
+    load(page, 10, debouncedSearch)
-  }, [page, search]);
+  }, [page, debouncedSearch]);
 
   const handleDelete = () => {
     if (selectedId) {
@@ -64,10 +65,12 @@ function ListKategoriBuku({ search }: { search: string }) {
   }
 
   return (
-    <Box py={10}>
+    <Box py={{ base: 'sm', md: 'lg' }}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
-          <Title order={4}>Daftar Kategori Buku</Title>
+          <Title order={4} lh={1.2}>
+            Daftar Kategori Buku
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -77,40 +80,62 @@ function ListKategoriBuku({ search }: { search: string }) {
             Tambah Baru
           </Button>
         </Group>
-        <Box style={{ overflowX: 'auto' }}>
+
-          <Table highlightOnHover>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '10%' }}>No</TableTh>
+                <TableTh style={{ width: '10%' }}>
-                <TableTh style={{ width: '60%' }}>Nama Kategori</TableTh>
+                  <Text fz="xs" fw={600} lh={1.4} c="dimmed" ta="center">No</Text>
-                <TableTh style={{ width: '15%' }}>Edit</TableTh>
+                </TableTh>
-                <TableTh style={{ width: '15%' }}>Hapus</TableTh>
+                <TableTh style={{ width: '60%' }}>
+                  <Text fz="xs" fw={600} lh={1.4} c="dimmed">Nama Kategori</Text>
+                </TableTh>
+                <TableTh style={{ width: '15%' }}>
+                  <Text fz="xs" fw={600} lh={1.4} c="dimmed" ta="center">Edit</Text>
+                </TableTh>
+                <TableTh style={{ width: '15%' }}>
+                  <Text fz="xs" fw={600} lh={1.4} c="dimmed" ta="center">Hapus</Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item, index) => (
                   <TableTr key={item.id}>
-                    <TableTd>{index + 1}</TableTd>
+                    <TableTd ta="center">
-                    <TableTd>
+                      <Text fz="sm" fw={500} lh={1.5}>{index + 1}</Text>
-                      <Text truncate fz="sm">{item.name}</Text>
                     </TableTd>
                     <TableTd>
-                      <Button variant="light" color="green" onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/kategori-buku/${item.id}`)}>
+                      <Text truncate fz="sm" fw={500} lh={1.5}>
-                        <IconEdit size={20} />
+                        {item.name}
+                      </Text>
+                    </TableTd>
+                    <TableTd ta="center">
+                      <Button variant="light" color="green" size="xs" onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/kategori-buku/${item.id}`)}>
+                        <IconEdit size={16} />
                       </Button>
                     </TableTd>
-                    <TableTd>
+                    <TableTd ta="center">
                       <Button
                         variant="light"
                         color="red"
+                        size="xs"
                         disabled={perpustakaanDigitalState.kategoriBuku.delete.loading}
                         onClick={() => {
                           setSelectedId(item.id)
                           setModalHapus(true)
                         }}
                       >
-                        <IconTrash size={20} />
+                        <IconTrash size={16} />
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -119,7 +144,9 @@ function ListKategoriBuku({ search }: { search: string }) {
                 <TableTr>
                   <TableTd colSpan={4}>
                     <Center py={20}>
-                      <Text c="dimmed">Tidak ada data kategori buku yang cocok</Text>
+                      <Text c="dimmed" fz="sm" fw={500} lh={1.5}>
+                        Tidak ada data kategori buku yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -127,7 +154,59 @@ function ListKategoriBuku({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Card View */}
+        <Box hiddenFrom="md">
+          <Stack gap="md">
+            {filteredData.length > 0 ? (
+              filteredData.map((item, index) => (
+                <Paper key={item.id} withBorder radius="md" p="md" bg={colors['white-1']}>
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>No</Text>
+                      <Text fz="sm" fw={500} lh={1.5}>{index + 1}</Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>Nama Kategori</Text>
+                      <Text fz="sm" fw={500} lh={1.5}>{item.name}</Text>
+                    </Box>
+                    <Group justify="flex-end" mt="xs">
+                      <Button
+                        variant="light"
+                        color="green"
+                        size="xs"
+                        onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/kategori-buku/${item.id}`)}
+                      >
+                        <IconEdit size={16} />
+                      </Button>
+                      <Button
+                        variant="light"
+                        color="red"
+                        size="xs"
+                        disabled={perpustakaanDigitalState.kategoriBuku.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id)
+                          setModalHapus(true)
+                        }}
+                      >
+                        <IconTrash size={16} />
+                      </Button>
+                    </Group>
+                  </Stack>
                 </Paper>
+              ))
+            ) : (
+              <Center py={20}>
+                <Text c="dimmed" fz="sm" fw={500} lh={1.5}>
+                  Tidak ada data kategori buku yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
+      </Paper>
+
+      
         <Center>
           <Pagination
             value={page}
@@ -136,13 +215,14 @@ function ListKategoriBuku({ search }: { search: string }) {
               window.scrollTo({ top: 0, behavior: 'smooth' });
             }}
             total={totalPages}
-          mt="md"
+            mt={{ base: 'sm', md: 'md' }}
-          mb="md"
+            mb={{ base: 'sm', md: 'md' }}
             color="blue"
             radius="md"
           />
         </Center>
 
+
       {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}

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

@@ -1,8 +1,29 @@
 'use client'
 import React from 'react';
 import LayoutTabs from './_lib/layoutTabs';
+import { usePathname } from 'next/navigation';
+import { Box } from '@mantine/core';
 
 function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  
+    // Contoh path:
+    // - /darmasaba/desa/berita/semua → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan → panjang 5 → list
+    // - /darmasaba/desa/berita/Pemerintahan/123 → panjang 6 → detail
+  
+    const segments = pathname.split('/').filter(Boolean);
+    const isDetailPage = segments.length >= 5;
+  
+    if (isDetailPage) {
+      // Tampilkan tanpa tab menu
+      return (
+        <Box>
+          {children}
+        </Box>
+      );
+    }
+  
   return (
     <LayoutTabs>
       {children}