wibu/desa-darmasaba
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Fix QC Kak Inno 19 Des

Browse Source 
Fix QC Kak Ayu 19 Des
Fix Tampilan Admin Mobile Menu Keamanan
Fix Search Debounce Menu Keamanan
This commit is contained in:
nico
2025-12-22 15:10:25 +08:00
parent bf20cd55e8
commit 29065cb3e2
44 changed files with 1169 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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}

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

@@ -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"

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

@@ -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}

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

@@ -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;