Fix QC Kak Inno 19 Des

Fix QC Kak Ayu 19 Des
Fix Tampilan Admin Mobile Menu Keamanan
Fix Search Debounce Menu Keamanan

src/app/admin/(dashboard)/desa/berita/layout.tsx

@@ -1,8 +1,30 @@
 'use client'
 import React from 'react';
 import LayoutTabsBerita from './_com/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 (
     <LayoutTabsBerita>
       {children}

src/app/admin/(dashboard)/desa/gallery/layout.tsx

@@ -1,7 +1,29 @@
 'use client'
+import { usePathname } from "next/navigation";
 import LayoutTabsGallery 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 (
         <LayoutTabsGallery>
             {children}

src/app/admin/(dashboard)/desa/layanan/layout.tsx

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

src/app/admin/(dashboard)/desa/pengumuman/layout.tsx

@@ -1,7 +1,29 @@
+'use client'
 import React from 'react';
 import LayoutTabs from './_com/layoutTabs';
+import { usePathname } from 'next/navigation';
+import { Box } from '@mantine/core';
 
 function Layout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+
+  // Contoh path:
+  // - /darmasaba/desa/pengumuman/semua → panjang 5 → list
+  // - /darmasaba/desa/pengumuman/Pemerintahan → panjang 5 → list
+  // - /darmasaba/desa/pengumuman/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)/desa/potensi/layout.tsx

@@ -1,8 +1,29 @@
 'use client'
 import React from 'react';
 import LayoutTabsPotensi 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 (
     <LayoutTabsPotensi>
       {children}

src/app/admin/(dashboard)/desa/profil/layout.tsx

@@ -1,8 +1,30 @@
 'use client'
 
+import { usePathname } from "next/navigation";
 import LayoutTabsDetail from "./_lib/layoutTabsDetail"
+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 (
         <LayoutTabsDetail>
             {children}

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/edit/page.tsx

@@ -142,7 +142,7 @@ function EditKeamananLingkungan() {
   };
 
   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)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/page.tsx

@@ -44,7 +44,7 @@ function DetailKeamananLingkungan() {
   const data = keamananState.findUnique.data
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'lg' }} py="xs">
       {/* Tombol Back */}
       <Button
         variant="subtle"
@@ -58,7 +58,7 @@ function DetailKeamananLingkungan() {
       {/* Wrapper Detail */}
       <Paper
         withBorder
-        w={{ base: "100%", md: "50%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"
@@ -88,7 +88,9 @@ function DetailKeamananLingkungan() {
 
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data?.deskripsi }} style={{ wordBreak: "break-word", whiteSpace: "normal" }} />
+                <Box pl={8}>
+                  <Text fz="md" c="dimmed" dangerouslySetInnerHTML={{ __html: data?.deskripsi }} style={{ wordBreak: "break-word", whiteSpace: "normal" }} />
+                </Box>
               </Box>
 
               {/* Aksi */}

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/create/page.tsx

@@ -78,7 +78,7 @@ function CreateKeamananLingkungan() {
   };
 
   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)/keamanan/keamanan-lingkungan-pecalang-patwal/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';
@@ -48,6 +48,7 @@ function KeamananLingkungan() {
 function ListKeamananLingkungan({ search }: { search: string }) {
   const keamananState = useProxy(keamananLingkunganState)
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000)
 
   const {
     data,
@@ -58,25 +59,27 @@ function ListKeamananLingkungan({ search }: { search: string }) {
   } = keamananState.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+    load(page, 10, debouncedSearch)
+  }, [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}>
-      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+    <Box py={{ base: 'sm', md: 'md' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
         {/* Judul + Tombol Tambah */}
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Keamanan Lingkungan</Title>
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
+            Daftar Keamanan Lingkungan
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -89,14 +92,18 @@ function ListKeamananLingkungan({ search }: { search: string }) {
           </Button>
         </Group>
 
-        {/* Tabel */}
-        <Box style={{ overflowX: "auto" }}>
-          <Table highlightOnHover>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table highlightOnHover
+            miw={0}
+            style={{ tableLayout: 'fixed', width: '100%' }}>
             <TableThead>
               <TableTr>
                 <TableTh>Nama</TableTh>
                 <TableTh>Deskripsi</TableTh>
-                <TableTh>Aksi</TableTh>
+                <TableTh style={{ width: 140, textAlign: 'center' }}>
+                  Aksi
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -104,25 +111,32 @@ function ListKeamananLingkungan({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Box w={200}>
-                        <Text fw={500} truncate="end" lineClamp={1}>
-                          {item.name}
-                        </Text>
-                      </Box>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end" lineClamp={1}>
+                        {item.name}
+                      </Text>
                     </TableTd>
-                    <TableTd>
-                      <Box w={200}>
-                        <Text fz="sm" c="dimmed" truncate lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                      </Box>
+                    <TableTd style={{ overflow: 'hidden' }}>
+                      <Text
+                        fz="sm"
+                        c="dimmed"
+                        lh={1.5}
+                        lineClamp={1}
+                        style={{
+                          whiteSpace: 'nowrap',
+                          textOverflow: 'ellipsis',
+                          overflow: 'hidden',
+                        }}
+                        dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                      />
                     </TableTd>
-                    <TableTd>
+                    <TableTd style={{ width: 140, textAlign: 'center' }}>
                       <Button
                         variant="light"
                         color="blue"
                         onClick={() => router.push(`/admin/keamanan/keamanan-lingkungan-pecalang-patwal/${item.id}`)}
+                        leftSection={<IconDeviceImacCog size={20} />}
                       >
-                        <IconDeviceImacCog size={20} />
-                        <Text ml={5}>Detail</Text>
+                        Detail
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -130,8 +144,8 @@ function ListKeamananLingkungan({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={3}>
-                    <Center py={20}>
-                      <Text color="dimmed">
+                    <Center py={{ base: 'sm', md: 'lg' }}>
+                      <Text c="dimmed" fz="sm" lh={1.4}>
                         Tidak ada data keamanan lingkungan yang cocok
                       </Text>
                     </Center>
@@ -141,6 +155,49 @@ function ListKeamananLingkungan({ 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 radius="md" p="sm">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>Nama</Text>
+                      <Text fz="sm" fw={500} lh={1.5}>{item.name}</Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>Deskripsi</Text>
+                      <Box pl={8}>
+                        <Text fz="sm" lineClamp={3} style={{ wordBreak: 'break-word' }} fw={500} lh={1.5} c="dimmed" dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                      </Box>
+                    </Box>
+                    <Box>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        fullWidth
+                        onClick={() => router.push(`/admin/keamanan/keamanan-lingkungan-pecalang-patwal/${item.id}`)}
+                      >
+                        <IconDeviceImacCog size={18} />
+                        <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
+                      </Button>
+                    </Box>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py="lg">
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Tidak ada data keamanan lingkungan yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
 
       {/* Pagination */}
@@ -152,8 +209,8 @@ function ListKeamananLingkungan({ search }: { search: string }) {
             window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
           total={totalPages}
-          mt="md"
-          mb="md"
+          mt={{ base: 'sm', md: 'md' }}
+          mb={{ base: 'sm', md: 'md' }}
           color="blue"
           radius="md"
         />
@@ -162,4 +219,4 @@ function ListKeamananLingkungan({ search }: { search: string }) {
   );
 }
 
-export default KeamananLingkungan;
+export default KeamananLingkungan;

src/app/admin/(dashboard)/keamanan/kontak-darurat/_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 { IconPhone, IconTag } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -57,35 +57,76 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         keepMounted={false}
       >
         {/* ✅ Scroll horizontal wrapper */}
-        <ScrollArea type="auto" offsetScrollbars>
-          <TabsList
-            p="sm"
-            style={{
-              background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-              borderRadius: "1rem",
-              boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-              display: "flex",
-              flexWrap: "nowrap",
-              gap: "0.5rem",
-              paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
-            }}
+        <Box visibleFrom='md' pb={10}>
+          <ScrollArea type="auto" offsetScrollbars>
+            <TabsList
+              p="sm"
+              style={{
+                background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                borderRadius: "1rem",
+                boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                display: "flex",
+                flexWrap: "nowrap",
+                gap: "0.5rem",
+                paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
+              }}
+            >
+              {tabs.map((tab, i) => (
+                <TabsTab
+                  key={i}
+                  value={tab.value}
+                  leftSection={tab.icon}
+                  style={{
+                    fontWeight: 600,
+                    fontSize: "0.9rem",
+                    transition: "all 0.2s ease",
+                    flexShrink: 0, // ✅ jangan mengecil aneh-aneh
+                  }}
+                >
+                  {tab.label}
+                </TabsTab>
+              ))}
+            </TabsList>
+          </ScrollArea>
+        </Box>
+
+        <Box hiddenFrom='md' pb={10}>
+          <ScrollArea
+            type="auto"
+            offsetScrollbars={false}
+            w="100%"
           >
-            {tabs.map((tab, i) => (
-              <TabsTab
-                key={i}
-                value={tab.value}
-                leftSection={tab.icon}
-                style={{
-                  fontWeight: 600,
-                  fontSize: "0.9rem",
-                  transition: "all 0.2s ease",
-                }}
-              >
-                {tab.label}
-              </TabsTab>
-            ))}
-          </TabsList>
-        </ScrollArea>
+
+            <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)/keamanan/kontak-darurat/kontak-darurat-item/[id]/edit/page.tsx

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

src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/[id]/page.tsx

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

src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/create/page.tsx

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

src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-item/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';
@@ -26,7 +26,6 @@ import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import kontakDarurat from '../../../_state/keamanan/kontak-darurat-keamanan';
 
-
 function KontakItem() {
   const [search, setSearch] = useState("");
 
@@ -49,6 +48,7 @@ function KontakItem() {
 function ListKontakItem({ search }: { search: string }) {
   const kontakState = useProxy(kontakDarurat.kontakDaruratItem);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -59,43 +59,54 @@ function ListKontakItem({ search }: { search: string }) {
   } = kontakState.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [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}>
-      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+    <Box py={{ base: 'sm', md: 'md' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
         {/* Judul + Tombol Tambah */}
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Kontak Darurat Item</Title>
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
+            Daftar Kontak Darurat Item
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
             variant="light"
-            onClick={() => router.push('/admin/keamanan/kontak-darurat/kontak-darurat-item/create')}
+            onClick={() =>
+              router.push('/admin/keamanan/kontak-darurat/kontak-darurat-item/create')
+            }
           >
             Tambah Baru
           </Button>
         </Group>
 
-        {/* Tabel */}
-        <Box style={{ overflowX: "auto" }}>
-          <Table highlightOnHover>
+        {/* Desktop: Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh>Nama Kontak</TableTh>
-                <TableTh>Nomor Telepon</TableTh>
-                <TableTh>Aksi</TableTh>
+                <TableTh style={{ width: '45%' }}>Nama Kontak</TableTh>
+                <TableTh style={{ width: '35%' }}>Nomor Telepon</TableTh>
+                <TableTh style={{ width: '20%' }}>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -103,12 +114,12 @@ function ListKontakItem({ 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">
                         {item.nama}
                       </Text>
                     </TableTd>
                     <TableTd>
-                      <Text fz="sm" c="dimmed">
+                      <Text fz="sm" c="dimmed" lh={1.5}>
                         {item.nomorTelepon || "-"}
                       </Text>
                     </TableTd>
@@ -116,19 +127,26 @@ function ListKontakItem({ search }: { search: string }) {
                       <Button
                         variant="light"
                         color="blue"
-                        onClick={() => router.push(`/admin/keamanan/kontak-darurat/kontak-darurat-item/${item.id}`)}
+                        onClick={() =>
+                          router.push(
+                            `/admin/keamanan/kontak-darurat/kontak-darurat-item/${item.id}`
+                          )
+                        }
+                        size="xs"
                       >
-                        <IconDeviceImacCog size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <IconDeviceImacCog size={16} />
+                        <Text ml={4} fz="sm" fw={500}>
+                          Detail
+                        </Text>
                       </Button>
                     </TableTd>
                   </TableTr>
                 ))
               ) : (
                 <TableTr>
-                  <TableTd colSpan={4}>
-                    <Center py={20}>
-                      <Text color="dimmed">
+                  <TableTd colSpan={3}>
+                    <Center py={24}>
+                      <Text c="dimmed" fz="sm" lh={1.4}>
                         Tidak ada data kontak darurat item yang cocok
                       </Text>
                     </Center>
@@ -138,6 +156,58 @@ function ListKontakItem({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile: Card */}
+        <Stack hiddenFrom="md" gap="xs">
+          {filteredData.length > 0 ? (
+            filteredData.map((item) => (
+              <Paper key={item.id} p="sm" withBorder radius="sm">
+                <Stack gap={"xs"}>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Nama Kontak
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4}>
+                      {item.nama}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Nomor Telepon
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4} c="dimmed">
+                      {item.nomorTelepon || "-"}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Button
+                      variant="light"
+                      color="blue"
+                      size="xs"
+                      fullWidth
+                      onClick={() =>
+                        router.push(
+                          `/admin/keamanan/kontak-darurat/kontak-darurat-item/${item.id}`
+                        )
+                      }
+                    >
+                      <IconDeviceImacCog size={16} />
+                      <Text ml={4} fz="sm" fw={500}>
+                        Detail
+                      </Text>
+                    </Button>
+                  </Box>
+                </Stack>
+              </Paper>
+            ))
+          ) : (
+            <Center py={24}>
+              <Text c="dimmed" fz="sm" lh={1.4}>
+                Tidak ada data kontak darurat item yang cocok
+              </Text>
+            </Center>
+          )}
+        </Stack>
       </Paper>
 
       {/* Pagination */}
@@ -159,4 +229,4 @@ function ListKontakItem({ search }: { search: string }) {
   );
 }
 
-export default KontakItem;
+export default KontakItem;

src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/[id]/edit/page.tsx

@@ -147,7 +147,7 @@ export default function EditKontakDaruratKeamanan() {
   }));
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'xs' }} 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)/keamanan/kontak-darurat/kontak-darurat-keamanan/[id]/page.tsx

@@ -42,7 +42,7 @@ function DetailKontakDaruratKeamanan() {
   const data = kontakState.findUnique.data;
 
   return (
-    <Box py={10}>
+     <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Tombol Back */}
       <Button
         variant="subtle"
@@ -56,7 +56,7 @@ function DetailKontakDaruratKeamanan() {
       {/* Wrapper Detail */}
       <Paper
         withBorder
-        w={{ base: "100%", md: "50%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"

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

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

src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/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';
@@ -48,6 +48,7 @@ function KontakDaruratKeamanan() {
 function ListKontakDaruratKeamanan({ search }: { search: string }) {
   const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -58,26 +59,28 @@ function ListKontakDaruratKeamanan({ search }: { search: string }) {
   } = kontakState.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search);
+    load(page, 10, debouncedSearch);
     kontakDarurat.kontakDaruratItem.findMany.load();
-  }, [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={600} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+    <Box py={{ base: 'md', md: 'lg' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
         {/* Judul + Tombol Tambah */}
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Kontak Darurat Keamanan</Title>
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
+            Daftar Kontak Darurat Keamanan
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -88,15 +91,22 @@ function ListKontakDaruratKeamanan({ search }: { search: string }) {
           </Button>
         </Group>
 
-        {/* Tabel */}
-        <Box style={{ overflowX: "auto" }}>
-          <Table highlightOnHover>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh>Kontak Darurat</TableTh>
-                <TableTh>Nama Kontak</TableTh>
-                <TableTh>Nomor Telepon</TableTh>
-                <TableTh>Aksi</TableTh>
+                <TableTh style={{ width: '30%' }}>Kontak Darurat</TableTh>
+                <TableTh style={{ width: '25%' }}>Nama Kontak</TableTh>
+                <TableTh style={{ width: '25%' }}>Nomor Telepon</TableTh>
+                <TableTh style={{ width: '20%' }}>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -104,17 +114,17 @@ function ListKontakDaruratKeamanan({ 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}>
                         {item.nama}
                       </Text>
                     </TableTd>
                     <TableTd>
-                      <Text fz="sm" c="dimmed" truncate lineClamp={1}>
+                      <Text fz="sm" c="dimmed" lh={1.5} truncate lineClamp={1}>
                         {item.kategori?.nama}
                       </Text>
                     </TableTd>
                     <TableTd>
-                      <Text fz="sm" c="dimmed">
+                      <Text fz="sm" c="dimmed" lh={1.5}>
                         {item.kategori?.nomorTelepon || "-"}
                       </Text>
                     </TableTd>
@@ -125,7 +135,7 @@ function ListKontakDaruratKeamanan({ search }: { search: string }) {
                         onClick={() => router.push(`/admin/keamanan/kontak-darurat/kontak-darurat-keamanan/${item.id}`)}
                       >
                         <IconDeviceImacCog size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <Text ml={5} fz="sm" fw={500}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -134,7 +144,7 @@ function ListKontakDaruratKeamanan({ search }: { search: string }) {
                 <TableTr>
                   <TableTd colSpan={4}>
                     <Center py={20}>
-                      <Text color="dimmed">
+                      <Text c="dimmed" fz="sm" lh={1.4}>
                         Tidak ada data kontak darurat keamanan yang cocok
                       </Text>
                     </Center>
@@ -144,6 +154,55 @@ function ListKontakDaruratKeamanan({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Box hiddenFrom="md">
+          <Stack gap="md">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} withBorder radius="md" p="md">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>Kontak Darurat</Text>
+                      <Text fz="sm" fw={500} lh={1.45}>
+                        {item.nama}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>Nama Kontak</Text>
+                      <Text fz="sm" fw={500} lh={1.45} c="dimmed">
+                        {item.kategori?.nama}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>Nomor Telepon</Text>
+                      <Text fz="sm" fw={500} lh={1.45} c="dimmed">
+                        {item.kategori?.nomorTelepon || "-"}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Button
+                        fullWidth
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/keamanan/kontak-darurat/kontak-darurat-keamanan/${item.id}`)}
+                      >
+                        <IconDeviceImacCog size={18} />
+                        <Text ml={5} fz="sm" fw={500}>Detail</Text>
+                      </Button>
+                    </Box>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py={20}>
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Tidak ada data kontak darurat keamanan yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
 
       {/* Pagination */}
@@ -165,4 +224,4 @@ function ListKontakDaruratKeamanan({ search }: { search: string }) {
   );
 }
 
-export default KontakDaruratKeamanan;
+export default KontakDaruratKeamanan;

src/app/admin/(dashboard)/keamanan/kontak-darurat/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)/keamanan/laporan-publik/[id]/edit/page.tsx

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

src/app/admin/(dashboard)/keamanan/laporan-publik/[id]/page.tsx

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

src/app/admin/(dashboard)/keamanan/laporan-publik/create/page.tsx

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

src/app/admin/(dashboard)/keamanan/laporan-publik/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';
@@ -45,6 +45,7 @@ function LaporanPublik() {
 function ListLaporanPublik({ search }: { search: string }) {
   const stateLaporan = useProxy(laporanPublikState);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -55,42 +56,54 @@ function ListLaporanPublik({ search }: { search: string }) {
   } = stateLaporan.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [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}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Laporan Publik</Title>
+    <Box py={{ base: 'sm', md: 'md' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
+            Daftar Laporan Publik
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
             variant="light"
             onClick={() => router.push('/admin/keamanan/laporan-publik/create')}
+            visibleFrom="md"
           >
             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: '25%' }}>Judul Laporan Publik</TableTh>
-                <TableTh style={{ width: '20%' }}>Tanggal</TableTh>
-                <TableTh style={{ width: '15%' }}>Status</TableTh>
-                <TableTh style={{ width: '25%' }}>Deskripsi</TableTh>
-                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+                <TableTh style={{ width: '25%' }}><Text fz="sm" fw={600} lh={1.4}>Judul Laporan Publik</Text></TableTh>
+                <TableTh style={{ width: '20%' }}><Text fz="sm" fw={600} lh={1.4}>Tanggal</Text></TableTh>
+                <TableTh style={{ width: '15%' }}><Text fz="sm" fw={600} lh={1.4}>Status</Text></TableTh>
+                <TableTh style={{ width: '25%' }}><Text fz="sm" fw={600} lh={1.4}>Deskripsi</Text></TableTh>
+                <TableTh style={{ width: '15%' }}><Text fz="sm" fw={600} lh={1.4}>Aksi</Text></TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -98,12 +111,12 @@ function ListLaporanPublik({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
+                      <Text fw={500} fz="md" lh={1.5} truncate="end" lineClamp={1}>
                         {item.judul}
                       </Text>
                     </TableTd>
                     <TableTd>
-                      <Text fz="sm" c="dimmed">
+                      <Text fz="sm" c="gray.7" lh={1.5}>
                         {new Date(item.tanggalWaktu).toLocaleDateString('id-ID')}
                       </Text>
                     </TableTd>
@@ -131,9 +144,7 @@ function ListLaporanPublik({ search }: { search: string }) {
                       </Box>
                     </TableTd>
                     <TableTd>
-                      <Box w={200}>
-                        <Text truncate fz="sm" c="dimmed" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.kronologi || '' }} />
-                      </Box>
+                      <Text truncate fz="sm" c="gray.7" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.kronologi || '' }} />
                     </TableTd>
                     <TableTd>
                       <Button
@@ -144,7 +155,7 @@ function ListLaporanPublik({ search }: { search: string }) {
                         }
                       >
                         <IconDeviceImac size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <Text ml={5} fz="sm" fw={500}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -153,7 +164,7 @@ function ListLaporanPublik({ search }: { search: string }) {
                 <TableTr>
                   <TableTd colSpan={5}>
                     <Center py={20}>
-                      <Text color="dimmed">
+                      <Text c="gray.6" fz="sm" lh={1.5}>
                         Tidak ada data laporan publik yang cocok
                       </Text>
                     </Center>
@@ -163,7 +174,88 @@ function ListLaporanPublik({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Stack hiddenFrom="md" 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}>Judul Laporan Publik</Text>
+                    <Text fz="sm" fw={500} lh={1.5}>{item.judul}</Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>Tanggal</Text>
+                    <Text fz="sm" fw={500} lh={1.5} c="gray.7">
+                      {new Date(item.tanggalWaktu).toLocaleDateString('id-ID')}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>Status</Text>
+                    <Box
+                      style={{
+                        display: 'inline-block',
+                        padding: '4px 12px',
+                        borderRadius: '16px',
+                        backgroundColor:
+                          item.status === 'Selesai' ? '#94EF95FF' :
+                            item.status === 'Proses' ? '#F1D295FF' :
+                              '#F38E8EFF',
+                        color:
+                          item.status === 'Selesai' ? '#01BA01FF' :
+                            item.status === 'Proses' ? '#B67A00FF' :
+                              '#AE1700FF',
+                        fontWeight: 900,
+                        fontSize: '0.75rem',
+                        textAlign: 'center',
+                        minWidth: '80px',
+                      }}
+                    >
+                      {item.status}
+                    </Box>
+                  </Box>
+                  <Box>
+                    <Text fz="xs" fw={600} lh={1.4}>Deskripsi</Text>
+                    <Text fz="sm" fw={500} lh={1.5} c="gray.7" lineClamp={2} dangerouslySetInnerHTML={{ __html: item.kronologi || '' }} />
+                  </Box>
+                  <Button
+                    variant="light"
+                    color="blue"
+                    fullWidth
+                    onClick={() =>
+                      router.push(`/admin/keamanan/laporan-publik/${item.id}`)
+                    }
+                  >
+                    <IconDeviceImac size={20} />
+                    <Text ml={5} fz="sm" fw={500}>Detail</Text>
+                  </Button>
+                </Stack>
+              </Paper>
+            ))
+          ) : (
+            <Center py={20}>
+              <Text c="gray.6" fz="sm" lh={1.5}>
+                Tidak ada data laporan publik yang cocok
+              </Text>
+            </Center>
+          )}
+        </Stack>
+
+        {/* Tambah Baru (Mobile only) */}
+        <Button
+          leftSection={<IconPlus size={18} />}
+          color="blue"
+          variant="light"
+          onClick={() => router.push('/admin/keamanan/laporan-publik/create')}
+          hiddenFrom="md"
+          fullWidth
+          mt="sm"
+        >
+          Tambah Baru
+        </Button>
       </Paper>
+
       <Center>
         <Pagination
           value={page}
@@ -182,4 +274,4 @@ function ListLaporanPublik({ search }: { search: string }) {
   );
 }
 
-export default LaporanPublik;
+export default LaporanPublik;

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/[id]/edit/page.tsx

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

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/[id]/page.tsx

@@ -40,7 +40,7 @@ function DetailPencegahanKriminalitas() {
   const data = kriminalitasState.findUnique.data;
 
   return (
-    <Box py={10}>
+     <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Tombol Kembali */}
       <Button
         variant="subtle"
@@ -54,7 +54,7 @@ function DetailPencegahanKriminalitas() {
       {/* Detail */}
       <Paper
         withBorder
-        w={{ base: "100%", md: "50%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/page.tsx

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

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/page.tsx

@@ -16,9 +16,9 @@ import {
   TableThead,
   TableTr,
   Text,
-  Title
+  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';
@@ -46,8 +46,9 @@ function PencegahanKriminalitas() {
 }
 
 function ListPencegahanKriminalitas({ search }: { search: string }) {
-  const kriminalitasState = useProxy(pencegahanKriminalitasState)
+  const kriminalitasState = useProxy(pencegahanKriminalitasState);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -58,24 +59,28 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
   } = kriminalitasState.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
-
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'md' }}>
         <Skeleton height={600} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+    <Stack py={{ base: 'sm', md: 'md' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
         {/* Judul + Tombol Tambah */}
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Pencegahan Kriminalitas</Title>
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title
+            order={4}
+            lh={{ base: 1.2, md: 1.1 }}
+          >
+            Daftar Pencegahan Kriminalitas
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -86,15 +91,22 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
           </Button>
         </Group>
 
-        {/* Tabel */}
-        <Box style={{ overflowX: "auto" }}>
-          <Table highlightOnHover>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh>Nama Pencegahan</TableTh>
-                <TableTh>Deskripsi</TableTh>
-                <TableTh>Deskripsi Singkat</TableTh>
-                <TableTh>Aksi</TableTh>
+                <TableTh style={{ width: '25%' }}>Nama Pencegahan</TableTh>
+                <TableTh style={{ width: '35%' }}>Deskripsi</TableTh>
+                <TableTh style={{ width: '25%' }}>Deskripsi Singkat</TableTh>
+                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -102,35 +114,29 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
                 data.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Box w={200}>
-                        <Text fw={500} truncate="end" lineClamp={1}>
-                          {item.judul}
-                        </Text>
-                      </Box>
+                      <Text fz="md" fw={500} lh={1.45} truncate="end" lineClamp={1}>
+                        {item.judul}
+                      </Text>
                     </TableTd>
                     <TableTd>
-                      <Box w={200}>
-                        <Text
-                          dangerouslySetInnerHTML={{ __html: item.deskripsi }}
-                          fz="sm"
-                          c="dimmed"
-                          truncate
-                          lineClamp={1}
-                        />
-                      </Box>
+                      <Text
+                        dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                        fz="sm"
+                        lh={1.45}
+                        truncate
+                        lineClamp={1}
+                      />
                     </TableTd>
                     <TableTd>
-                      <Box w={200}>
-                        <Text
-                          fz="sm"
-                          c="dimmed"
-                          truncate
-                          lineClamp={1}
-                          dangerouslySetInnerHTML={{
-                            __html: item.deskripsiSingkat || ''
-                          }}
-                        />
-                      </Box>
+                      <Text
+                        fz="sm"
+                        lh={1.45}
+                        truncate
+                        lineClamp={1}
+                        dangerouslySetInnerHTML={{
+                          __html: item.deskripsiSingkat || ''
+                        }}
+                      />
                     </TableTd>
                     <TableTd>
                       <Button
@@ -139,7 +145,9 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
                         onClick={() => router.push(`/admin/keamanan/pencegahan-kriminalitas/${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>
@@ -148,7 +156,7 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
                 <TableTr>
                   <TableTd colSpan={4}>
                     <Center py={20}>
-                      <Text color="dimmed">
+                      <Text c="dimmed" fz="sm" lh={1.4}>
                         Tidak ada data pencegahan kriminalitas yang cocok
                       </Text>
                     </Center>
@@ -158,6 +166,71 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Card View */}
+        <Stack hiddenFrom="md" gap="xs">
+          {data.length > 0 ? (
+            data.map((item) => (
+              <Paper key={item.id} withBorder p="sm" radius="sm">
+                <Stack gap={"xs"}>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Nama Pencegahan
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.4}>
+                      {item.judul}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Deskripsi Singkat
+                    </Text>
+                    <Text
+                      dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat || '' }}
+                      fz="sm"
+                      fw={500}
+                      lh={1.4}
+                      lineClamp={3}
+                      ta="justify"
+                    />
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Deskripsi
+                    </Text>
+                    <Text
+                      dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                      fz="sm"
+                      fw={500}
+                      lh={1.4}
+                      lineClamp={3}
+                      ta="justify"
+                    />
+                  </Box>
+                  <Box>
+                    <Button
+                      variant="light"
+                      color="blue"
+                      fullWidth
+                      onClick={() => router.push(`/admin/keamanan/pencegahan-kriminalitas/${item.id}`)}
+                    >
+                      <IconDeviceImacCog size={20} />
+                      <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                        Detail
+                      </Text>
+                    </Button>
+                  </Box>
+                </Stack>
+              </Paper>
+            ))
+          ) : (
+            <Center py={20}>
+              <Text c="dimmed" fz="sm" lh={1.4}>
+                Tidak ada data pencegahan kriminalitas yang cocok
+              </Text>
+            </Center>
+          )}
+        </Stack>
       </Paper>
 
       {/* Pagination */}
@@ -175,8 +248,8 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
           radius="md"
         />
       </Center>
-    </Box>
+    </Stack>
   );
 }
 
-export default PencegahanKriminalitas;
+export default PencegahanKriminalitas;

src/app/admin/(dashboard)/keamanan/polsek-terdekat/[id]/edit/page.tsx

@@ -247,7 +247,7 @@ function EditPolsekTerdekat() {
   };
 
   return (
-    <Box px={{ base: "sm", md: "lg" }} py="md">
+     <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Modal Tambah */}
       <Modal
         opened={modalOpen}

src/app/admin/(dashboard)/keamanan/polsek-terdekat/[id]/page.tsx

@@ -40,7 +40,7 @@ function DetailPolsekTerdekat() {
   const data = polsekState.findUnique.data;
 
   return (
-    <Box py={10}>
+     <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Tombol Back */}
       <Button
         variant="subtle"
@@ -54,7 +54,7 @@ function DetailPolsekTerdekat() {
       {/* Wrapper Detail */}
       <Paper
         withBorder
-        w={{ base: "100%", md: "50%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"

src/app/admin/(dashboard)/keamanan/polsek-terdekat/create/page.tsx

@@ -148,7 +148,7 @@ function CreatePolsekTerdekat() {
   }, []);
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+     <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Modal Tambah Layanan */}
       <Modal
         opened={modalOpen}

src/app/admin/(dashboard)/keamanan/polsek-terdekat/page.tsx

@@ -16,9 +16,9 @@ import {
   TableThead,
   TableTr,
   Text,
-  Title
+  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';
@@ -45,8 +45,9 @@ function PolsekTerdekat() {
 }
 
 function ListPolsekTerdekat({ search }: { search: string }) {
-  const polsekState = useProxy(polsekTerdekat)
+  const polsekState = useProxy(polsekTerdekat);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -57,24 +58,26 @@ function ListPolsekTerdekat({ search }: { search: string }) {
   } = polsekState.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py={{ base: 'sm', md: 'lg' }}>
         <Skeleton height={600} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Polsek Terdekat</Title>
+    <Box py={{ base: 'sm', md: 'lg' }}>
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'md', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'md', md: 'lg' }}>
+          <Title order={4} lh={{ base: 1.2, md: 1.2 }}>
+            Daftar Polsek Terdekat
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -85,14 +88,38 @@ function ListPolsekTerdekat({ search }: { search: string }) {
           </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>Nama Polsek</TableTh>
-                <TableTh>Jarak</TableTh>
-                <TableTh>Alamat</TableTh>
-                <TableTh>Aksi</TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Nama Polsek
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '15%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Jarak
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Alamat
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '10%' }}>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Aksi
+                  </Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -100,26 +127,31 @@ function ListPolsekTerdekat({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Box w={150}>
-                        <Text fw={500} truncate="end" lineClamp={1}>
-                          {item.nama}
-                        </Text>
-                      </Box>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end">
+                        {item.nama}
+                      </Text>
                     </TableTd>
-                    <TableTd>{item.jarakKeDesa}</TableTd>
                     <TableTd>
-                      <Box w={150}>
-                        <Text truncate="end" lineClamp={1}>{item.alamat}</Text>
-                      </Box>
+                      <Text fz="md" fw={500} lh={1.5}>
+                        {item.jarakKeDesa}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end">
+                        {item.alamat}
+                      </Text>
                     </TableTd>
                     <TableTd>
                       <Button
                         variant="light"
                         color="blue"
                         onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${item.id}`)}
+                        w="100%"
                       >
                         <IconDeviceImac size={18} />
-                        <Text ml={5}>Detail</Text>
+                        <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -127,8 +159,8 @@ function ListPolsekTerdekat({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={4}>
-                    <Center py={20}>
-                      <Text color="dimmed">
+                    <Center py={24}>
+                      <Text c="dimmed" fz="sm" lh={1.4}>
                         Tidak ada data Polsek yang cocok
                       </Text>
                     </Center>
@@ -138,6 +170,63 @@ function ListPolsekTerdekat({ 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="sm" radius="sm">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Nama Polsek
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.45}>
+                        {item.nama}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Jarak
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.45}>
+                        {item.jarakKeDesa}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Alamat
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.45}>
+                        {item.alamat}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        fullWidth
+                        onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${item.id}`)}
+                      >
+                        <IconDeviceImac size={18} />
+                        <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
+                      </Button>
+                    </Box>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py={24}>
+                <Text c="dimmed" fz="sm" lh={1.4}>
+                  Tidak ada data Polsek yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
 
       {/* Pagination */}
@@ -149,8 +238,8 @@ function ListPolsekTerdekat({ search }: { search: string }) {
             window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
           total={totalPages}
-          mt="md"
-          mb="md"
+          mt={{ base: 'lg', md: 'xl' }}
+          mb={{ base: 'lg', md: 'xl' }}
           color="blue"
           radius="md"
         />
@@ -159,4 +248,4 @@ function ListPolsekTerdekat({ search }: { search: string }) {
   );
 }
 
-export default PolsekTerdekat;
+export default PolsekTerdekat;

src/app/admin/(dashboard)/keamanan/tips-keamanan/[id]/edit/page.tsx

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

src/app/admin/(dashboard)/keamanan/tips-keamanan/[id]/page.tsx

@@ -41,7 +41,7 @@ function DetailTipsKeamanan() {
   const data = stateKeamanan.findUnique.data;
 
   return (
-    <Box py={10}>
+     <Box px={{ base: 0, md: 'xs' }} py="xs">
       <Button
         variant="subtle"
         onClick={() => router.back()}
@@ -53,7 +53,7 @@ function DetailTipsKeamanan() {
 
       <Paper
         withBorder
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"
@@ -73,12 +73,14 @@ function DetailTipsKeamanan() {
 
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text
+                <Box pl={8}>
+                  <Text
                   fz="md"
                   c="dimmed"
                   style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                   dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
                 />
+                </Box>
               </Box>
 
               <Box>

src/app/admin/(dashboard)/keamanan/tips-keamanan/create/page.tsx

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

src/app/admin/(dashboard)/keamanan/tips-keamanan/page.tsx

@@ -16,9 +16,9 @@ import {
   TableThead,
   TableTr,
   Text,
-  Title
+  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';
@@ -43,8 +43,9 @@ function TipsKeamanan() {
 }
 
 function ListTipsKeamanan({ search }: { search: string }) {
-  const stateKeamanan = useProxy(tipsKeamananState)
+  const stateKeamanan = useProxy(tipsKeamananState);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -52,24 +53,24 @@ function ListTipsKeamanan({ search }: { search: string }) {
     totalPages,
     loading,
     load,
-  } = stateKeamanan.findMany
+  } = stateKeamanan.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py="lg">
         <Skeleton height={600} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
-    <Box py={10}>
+    <Box py="lg">
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Group justify="space-between" mb="md">
           <Title order={4}>Daftar Tips Keamanan</Title>
@@ -82,39 +83,64 @@ function ListTipsKeamanan({ 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: '25%' }}>Judul</TableTh>
-                <TableTh style={{ width: '45%' }}>Deskripsi</TableTh>
-                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+                <TableTh style={{ width: '25%' }}>
+                  <Text fz="sm" fw={600} lh={1.2}>
+                    Judul
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '45%' }}>
+                  <Text fz="sm" fw={600} lh={1.2}>
+                    Deskripsi
+                  </Text>
+                </TableTh>
+                <TableTh style={{ width: '30%' }}>
+                  <Text fz="sm" fw={600} lh={1.2}>
+                    Aksi
+                  </Text>
+                </TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd style={{ width: '25%' }}>
-                      <Box w={200}>
-                        <Text fw={500} truncate="end" lineClamp={1}>
-                          {item.judul}
-                        </Text>
-                      </Box>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5} truncate="end" lineClamp={1}>
+                        {item.judul}
+                      </Text>
                     </TableTd>
-                    <TableTd style={{ width: '45%' }}>
-                      <Box w={200}>
-                        <Text fz="sm" c="dimmed" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                      </Box>
+                    <TableTd>
+                      <Text
+                        fz="sm"
+                        c="dimmed"
+                        lh={1.5}
+                        lineClamp={1}
+                        dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                      />
                     </TableTd>
-                    <TableTd style={{ width: '15%' }}>
+                    <TableTd>
                       <Button
                         variant="light"
                         color="blue"
-                        onClick={() => router.push(`/admin/keamanan/tips-keamanan/${item.id}`)}
+                        onClick={() =>
+                          router.push(`/admin/keamanan/tips-keamanan/${item.id}`)
+                        }
                       >
                         <IconDeviceImac size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <Text ml="xs">Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -122,8 +148,10 @@ function ListTipsKeamanan({ search }: { search: string }) {
               ) : (
                 <TableTr>
                   <TableTd colSpan={3}>
-                    <Center py={20}>
-                      <Text color="dimmed">Tidak ada data tips keamanan yang cocok</Text>
+                    <Center py="xl">
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada data tips keamanan yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -131,13 +159,66 @@ function ListTipsKeamanan({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Cards */}
+        <Stack gap="sm" hiddenFrom="md">
+          {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}>
+                      Judul
+                    </Text>
+                    <Text fz="sm" fw={500} lh={1.45}>
+                      {item.judul}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text fz="sm" fw={600} lh={1.4}>
+                      Deskripsi
+                    </Text>
+                    <Box pl={8}>
+                      <Text
+                      fz="sm"
+                      fw={500}
+                      lh={1.45}
+                      dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                    />
+                    </Box>
+                  </Box>
+                  <Box>
+                    <Button
+                      variant="light"
+                      color="blue"
+                      fullWidth
+                      onClick={() =>
+                        router.push(`/admin/keamanan/tips-keamanan/${item.id}`)
+                      }
+                    >
+                      <IconDeviceImac size={20} />
+                      <Text ml="xs">Detail</Text>
+                    </Button>
+                  </Box>
+                </Stack>
+              </Paper>
+            ))
+          ) : (
+            <Center py="xl">
+              <Text c="dimmed" fz="sm" lh={1.4}>
+                Tidak ada data tips keamanan yang cocok
+              </Text>
+            </Center>
+          )}
+        </Stack>
       </Paper>
+
       <Center>
         <Pagination
           value={page}
           onChange={(newPage) => {
-            load(newPage, 10)
-            window.scrollTo({ top: 0, behavior: 'smooth' })
+            load(newPage, 10);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
           total={totalPages}
           mt="md"
@@ -150,4 +231,4 @@ function ListTipsKeamanan({ search }: { search: string }) {
   );
 }
 
-export default TipsKeamanan;
+export default TipsKeamanan;

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

@@ -1,9 +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}) {
+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)/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/page.tsx

@@ -204,17 +204,34 @@ function GrafikPersentaseKelahiranKematian() {
 
             {selectedYearData && (
               <Stack gap="md">
-                <Flex align="center" gap="sm">
+                <Group visibleFrom='md' align="center" justify='space-between'>
                   <Title order={4} fw={600} fz={{ base: 'xs', md: 'sm' }} lh={1.2}>
                     Rincian Tahun {selectedYear}
                   </Title>
-                  <Badge variant="light" color="blue" fz={{ base: 'xs', md: 'sm' }}>
-                    {formatNumber(selectedYearData.totalKelahiran)} kelahiran
-                  </Badge>
-                  <Badge variant="light" color="red" fz={{ base: 'xs', md: 'sm' }}>
-                    {formatNumber(selectedYearData.totalKematian)} kematian
-                  </Badge>
-                </Flex>
+                  <Group gap={"sm"}>
+                    <Badge variant="light" color="blue" fz={{ base: 'xs', md: 'sm' }}>
+                      {formatNumber(selectedYearData.totalKelahiran)} kelahiran
+                    </Badge>
+                    <Badge variant="light" color="red" fz={{ base: 'xs', md: 'sm' }}>
+                      {formatNumber(selectedYearData.totalKematian)} kematian
+                    </Badge>
+                  </Group>
+                </Group>
+
+                <Stack hiddenFrom='md' gap="sm">
+                  <Title order={4} fw={600} fz={{ base: 'xs', md: 'sm' }} lh={1.2}>
+                    Rincian Tahun {selectedYear}
+                  </Title>
+                  <Group>
+                    <Badge variant="light" color="blue" fz={{ base: 'xs', md: 'sm' }}>
+                      {formatNumber(selectedYearData.totalKelahiran)} kelahiran
+                    </Badge>
+                    <Badge variant="light" color="red" fz={{ base: 'xs', md: 'sm' }}>
+                      {formatNumber(selectedYearData.totalKematian)} kematian
+                    </Badge>
+                  </Group>
+                </Stack>
+
 
                 {/* Desktop: Table */}
                 <Box visibleFrom="md">

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

@@ -1,7 +1,29 @@
+'use client'
 import React from 'react';
 import LayoutTabs from './_lib/layouTabs';
+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)/landing-page/indeks-kepuasan-masyarakat/layout.tsx

@@ -1,7 +1,29 @@
+'use client'
 import React from 'react';
 import LayoutTabsKepuasan from './_lib/layoutTab';
+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 (
     <LayoutTabsKepuasan>
       {children}

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

@@ -1,7 +1,29 @@
+'use client'
 import React from 'react';
 import LayoutTabs from './_lib/layoutTabs';
+import { Box } from '@mantine/core';
+import { usePathname } from 'next/navigation';
 
 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)/landing-page/profil/layout.tsx

@@ -1,7 +1,29 @@
+'use client'
+import { Box } from '@mantine/core';
+import { usePathname } from 'next/navigation';
 import React from 'react';
 import LayoutTabs from './_lib/layoutTabs';
 
 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)/ppid/indeks-kepuasan-masyarakat/layout.tsx

@@ -1,8 +1,28 @@
 'use client'
 import React from 'react';
 import LayoutTabsIKM 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 (
     <LayoutTabsIKM>
       {children}

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

@@ -1,9 +1,31 @@
 '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}