Fix QC Kak Inno 22 Des
Fix QC Kak Ayu 22 Des Fix Tampilan Admin Mobile Device Menu Ekonomi Fix Search -> useDebounced Menu Ekonomi
This commit is contained in:
@@ -105,7 +105,7 @@ function EditPembiayaan() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
<Box px={{ base: 0, md: 'xs' }} py="xs">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Button
|
||||
|
||||
@@ -63,7 +63,7 @@ function CreatePembiayaan() {
|
||||
};
|
||||
|
||||
return (
|
||||
<Box px={{ base: 'sm', md: 'lg' }} py="md">
|
||||
<Box px={{ base: 0, md: 'xs' }} py="xs">
|
||||
{/* Header */}
|
||||
<Group mb="md">
|
||||
<Button
|
||||
|
||||
@@ -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 { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
@@ -48,6 +48,7 @@ function ListPembiayaan({ search }: { search: string }) {
|
||||
const router = useRouter();
|
||||
const [modalHapus, setModalHapus] = useState(false);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [debouncedSearch] = useDebouncedValue(search, 1000);
|
||||
|
||||
const {
|
||||
data,
|
||||
@@ -71,17 +72,17 @@ function ListPembiayaan({ search }: { search: string }) {
|
||||
pembiayaanState.delete.byId(selectedId);
|
||||
setModalHapus(false);
|
||||
setSelectedId(null);
|
||||
load(page, 10, search);
|
||||
load(page, 10, debouncedSearch);
|
||||
}
|
||||
};
|
||||
|
||||
useShallowEffect(() => {
|
||||
load(page, 10, search);
|
||||
}, [page, search]);
|
||||
load(page, 10, debouncedSearch);
|
||||
}, [page, debouncedSearch]);
|
||||
|
||||
if (loading || !data) {
|
||||
return (
|
||||
<Stack py={10}>
|
||||
<Stack py="lg">
|
||||
<Skeleton height={500} radius="md" />
|
||||
</Stack>
|
||||
);
|
||||
@@ -90,10 +91,10 @@ function ListPembiayaan({ search }: { search: string }) {
|
||||
const filteredData = data || [];
|
||||
|
||||
return (
|
||||
<Box py={10}>
|
||||
<Stack gap="xl" py="lg">
|
||||
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
|
||||
<Group justify="space-between" mb="md">
|
||||
<Title order={4}>Daftar Pembiayaan</Title>
|
||||
<Title order={4} lh={1.2}>Daftar Pembiayaan</Title>
|
||||
<Button
|
||||
leftSection={<IconPlus size={18} />}
|
||||
color="blue"
|
||||
@@ -106,13 +107,24 @@ function ListPembiayaan({ search }: { search: string }) {
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<Box style={{ overflowX: 'auto' }}>
|
||||
<Table highlightOnHover striped withTableBorder withRowBorders>
|
||||
{/* Desktop Table */}
|
||||
<Box visibleFrom="md">
|
||||
<Table
|
||||
highlightOnHover
|
||||
striped
|
||||
withTableBorder
|
||||
withRowBorders
|
||||
miw={0}
|
||||
style={{
|
||||
tableLayout: 'fixed',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<TableThead>
|
||||
<TableTr>
|
||||
<TableTh>Nama</TableTh>
|
||||
<TableTh>Nilai</TableTh>
|
||||
<TableTh>Persentase</TableTh>
|
||||
<TableTh style={{ width: '35%' }}>Nama</TableTh>
|
||||
<TableTh style={{ width: '25%' }}>Nilai</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Persentase</TableTh>
|
||||
<TableTh style={{ width: '20%' }}>Aksi</TableTh>
|
||||
</TableTr>
|
||||
</TableThead>
|
||||
@@ -122,15 +134,19 @@ function ListPembiayaan({ 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.name}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd>{formatRupiah(item.value)}</TableTd>
|
||||
<TableTd>
|
||||
{totalPembiayaan > 0
|
||||
? ((item.value / totalPembiayaan) * 100).toFixed(0) + '%'
|
||||
: '0%'}
|
||||
<Text fz="md" fw={500} lh={1.5}>{formatRupiah(item.value)}</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Text fz="md" fw={500} lh={1.5}>
|
||||
{totalPembiayaan > 0
|
||||
? ((item.value / totalPembiayaan) * 100).toFixed(0) + '%'
|
||||
: '0%'}
|
||||
</Text>
|
||||
</TableTd>
|
||||
<TableTd>
|
||||
<Group gap="xs">
|
||||
@@ -163,16 +179,20 @@ function ListPembiayaan({ search }: { search: string }) {
|
||||
{/* Total Row */}
|
||||
<TableTr>
|
||||
<TableTd colSpan={2}>
|
||||
<Text fw="bold">Total</Text>
|
||||
<Text fz="md" fw={600} lh={1.5}>Total</Text>
|
||||
</TableTd>
|
||||
<TableTd colSpan={2}>
|
||||
<Text fz="md" fw={600} lh={1.5}>{formatRupiah(totalPembiayaan)}</Text>
|
||||
</TableTd>
|
||||
<TableTd colSpan={2}>{formatRupiah(totalPembiayaan)}</TableTd>
|
||||
</TableTr>
|
||||
</>
|
||||
) : (
|
||||
<TableTr>
|
||||
<TableTd colSpan={4}>
|
||||
<Center py={20}>
|
||||
<Text c="dimmed">Tidak ada data pembiayaan yang cocok</Text>
|
||||
<Text c="dimmed" fz="sm" lh={1.4}>
|
||||
Tidak ada data pembiayaan yang cocok
|
||||
</Text>
|
||||
</Center>
|
||||
</TableTd>
|
||||
</TableTr>
|
||||
@@ -180,6 +200,79 @@ function ListPembiayaan({ search }: { search: string }) {
|
||||
</TableTbody>
|
||||
</Table>
|
||||
</Box>
|
||||
|
||||
{/* Mobile Card View */}
|
||||
<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}>Nama</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4} truncate="end">
|
||||
{item.name}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>Nilai</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{formatRupiah(item.value)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text fz="sm" fw={600} lh={1.4}>Persentase</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>
|
||||
{totalPembiayaan > 0
|
||||
? ((item.value / totalPembiayaan) * 100).toFixed(0) + '%'
|
||||
: '0%'}
|
||||
</Text>
|
||||
</Box>
|
||||
<Group justify="flex-end" mt="xs">
|
||||
<Button
|
||||
color="green"
|
||||
variant="light"
|
||||
size="xs"
|
||||
onClick={() =>
|
||||
router.push(
|
||||
`/admin/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/${item.id}`
|
||||
)
|
||||
}
|
||||
>
|
||||
<IconEdit size={16} />
|
||||
</Button>
|
||||
<Button
|
||||
color="red"
|
||||
variant="light"
|
||||
size="xs"
|
||||
disabled={pembiayaanState.delete.loading}
|
||||
onClick={() => {
|
||||
setSelectedId(item.id);
|
||||
setModalHapus(true);
|
||||
}}
|
||||
>
|
||||
<IconTrash size={16} />
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
))
|
||||
) : (
|
||||
<Center py={20}>
|
||||
<Text c="dimmed" fz="sm" lh={1.4}>
|
||||
Tidak ada data pembiayaan yang cocok
|
||||
</Text>
|
||||
</Center>
|
||||
)}
|
||||
|
||||
{filteredData.length > 0 && (
|
||||
<Paper withBorder p="md" radius="md">
|
||||
<Stack gap={4}>
|
||||
<Text fz="sm" fw={600} lh={1.4}>Total</Text>
|
||||
<Text fz="sm" fw={500} lh={1.4}>{formatRupiah(totalPembiayaan)}</Text>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)}
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* Pagination */}
|
||||
@@ -205,8 +298,8 @@ function ListPembiayaan({ search }: { search: string }) {
|
||||
onConfirm={handleDelete}
|
||||
text="Apakah anda yakin ingin menghapus pembiayaan ini?"
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Pembiayaan;
|
||||
export default Pembiayaan;
|
||||
Reference in New Issue
Block a user