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

Fix QC Kak Inno 22 Des

Browse Source 
Fix QC Kak Ayu 22 Des
Fix Tampilan Admin Mobile Device Menu Ekonomi
Fix Search -> useDebounced Menu Ekonomi
This commit is contained in:
nico
2025-12-23 17:18:36 +08:00
parent 29065cb3e2
commit f0f201c853
75 changed files with 3023 additions and 1177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/_lib/layoutTabs.tsx
View File

@@ -2,6 +2,7 @@
'use client'
import colors from '@/con/colors';
import {
Box,
ScrollArea,
Stack,
Tabs,
@@ -85,36 +86,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",
}}
<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",
flexShrink: 0,
}}
>
{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

2
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/[id]/edit/page.tsx
View File

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

2
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/[id]/page.tsx
View File

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

2
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/create/page.tsx
View File

@@ -51,7 +51,7 @@ function CreateAPBDesa() {
};
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">

188
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/page.tsx
View File

@@ -15,13 +15,14 @@ import {
TableTh,
TableThead,
TableTr,
Text
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';
import { useProxy } from 'valtio/utils';
import { useProxy } from 'valtio/utils';
import HeaderSearch from '../../../_com/header';
import PendapatanAsliDesa from '../../../_state/ekonomi/PADesa';
@@ -44,6 +45,7 @@ function APBDesa() {
function ListAPBDesa({ search }: { search: string }) {
const apbDesaState = useProxy(PendapatanAsliDesa.ApbDesa);
const router = useRouter();
const [debouncedSearch] = useDebouncedValue(search, 1000);
const {
data,
@@ -61,26 +63,26 @@ function ListAPBDesa({ search }: { search: string }) {
}).format(value);
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={500} 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">
<Text fw={600} fz="lg">
<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}>
List APB Desa
</Text>
</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
@@ -94,45 +96,72 @@ function ListAPBDesa({ 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: "15%" }}>Tahun</TableTh>
<TableTh style={{ width: "25%" }}>Pembiayaan</TableTh>
<TableTh style={{ width: "25%" }}>Belanja</TableTh>
<TableTh style={{ width: "25%" }}>Pendapatan</TableTh>
<TableTh style={{ width: "10%" }}>Aksi</TableTh>
<TableTh style={{ width: "15%" }}>
<Text fz="sm" fw={600} lh={1.4} ta="left">Tahun</Text>
</TableTh>
<TableTh style={{ width: "25%" }}>
<Text fz="sm" fw={600} lh={1.4} ta="left">Pembiayaan</Text>
</TableTh>
<TableTh style={{ width: "25%" }}>
<Text fz="sm" fw={600} lh={1.4} ta="left">Belanja</Text>
</TableTh>
<TableTh style={{ width: "25%" }}>
<Text fz="sm" fw={600} lh={1.4} ta="left">Pendapatan</Text>
</TableTh>
<TableTh style={{ width: "10%" }}>
<Text fz="sm" fw={600} lh={1.4} ta="left">Aksi</Text>
</TableTh>
</TableTr>
</TableThead>
<TableTbody>
{filteredData.length > 0 ? (
filteredData.map((item) => (
<TableTr key={item.id}>
<TableTd>{item.tahun}</TableTd>
<TableTd>
{formatRupiah(
item.pembiayaan.reduce(
(sum, val) => sum + Number(val.value),
0
)
)}
<Text fz="md" fw={500} lh={1.5} ta="left">{item.tahun}</Text>
</TableTd>
<TableTd>
{formatRupiah(
item.belanja.reduce(
(sum, val) => sum + Number(val.value),
0
)
)}
<Text fz="md" fw={500} lh={1.5} ta="left">
{formatRupiah(
item.pembiayaan.reduce(
(sum, val) => sum + Number(val.value),
0
)
)}
</Text>
</TableTd>
<TableTd>
{formatRupiah(
item.pendapatan.reduce(
(sum, val) => sum + Number(val.value),
0
)
)}
<Text fz="md" fw={500} lh={1.5} ta="left">
{formatRupiah(
item.belanja.reduce(
(sum, val) => sum + Number(val.value),
0
)
)}
</Text>
</TableTd>
<TableTd>
<Text fz="md" fw={500} lh={1.5} ta="left">
{formatRupiah(
item.pendapatan.reduce(
(sum, val) => sum + Number(val.value),
0
)
)}
</Text>
</TableTd>
<TableTd>
<Button
@@ -143,9 +172,12 @@ function ListAPBDesa({ search }: { search: string }) {
`/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/${item.id}`
)
}
size="compact-sm"
>
<IconDeviceImacCog size={20} />
<Text ml={5}>Detail</Text>
<IconDeviceImacCog size={16} />
<Text ml={5} fz="sm" fw={500} lh={1.4}>
Detail
</Text>
</Button>
</TableTd>
</TableTr>
@@ -154,7 +186,7 @@ function ListAPBDesa({ search }: { search: string }) {
<TableTr>
<TableTd colSpan={5}>
<Center py={20}>
<Text color="dimmed">
<Text c="dimmed" fz="sm" lh={1.4}>
Tidak ada data APB Desa yang cocok
</Text>
</Center>
@@ -164,7 +196,81 @@ function ListAPBDesa({ search }: { search: string }) {
</TableTbody>
</Table>
</Box>
{/* Mobile Cards */}
<Box hiddenFrom="md">
<Stack gap="sm">
{filteredData.length > 0 ? (
filteredData.map((item) => (
<Paper key={item.id} withBorder p="md" radius="sm">
<Stack gap={"xs"}>
<Box>
<Text fz="xs" fw={600} lh={1.4}>Tahun</Text>
<Text fz="sm" fw={500} lh={1.4}>{item.tahun}</Text>
</Box>
<Box>
<Text fz="xs" fw={600} lh={1.4}>Pembiayaan</Text>
<Text fz="sm" fw={500} lh={1.4}>
{formatRupiah(
item.pembiayaan.reduce(
(sum, val) => sum + Number(val.value),
0
)
)}
</Text>
</Box>
<Box>
<Text fz="xs" fw={600} lh={1.4}>Belanja</Text>
<Text fz="sm" fw={500} lh={1.4}>
{formatRupiah(
item.belanja.reduce(
(sum, val) => sum + Number(val.value),
0
)
)}
</Text>
</Box>
<Box>
<Text fz="xs" fw={600} lh={1.4}>Pendapatan</Text>
<Text fz="sm" fw={500} lh={1.4}>
{formatRupiah(
item.pendapatan.reduce(
(sum, val) => sum + Number(val.value),
0
)
)}
</Text>
</Box>
<Button
variant="light"
color="green"
fullWidth
onClick={() =>
router.push(
`/admin/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/${item.id}`
)
}
size="sm"
>
<IconDeviceImacCog size={16} />
<Text ml={5} fz="sm" fw={500} lh={1.4}>
Detail
</Text>
</Button>
</Stack>
</Paper>
))
) : (
<Center py={20}>
<Text c="dimmed" fz="sm" lh={1.4}>
Tidak ada data APB Desa yang cocok
</Text>
</Center>
)}
</Stack>
</Box>
</Paper>
<Center>
<Pagination
value={page}
@@ -183,4 +289,4 @@ function ListAPBDesa({ search }: { search: string }) {
);
}
export default APBDesa;
export default APBDesa;

2
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/[id]/page.tsx
View File

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

2
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/create/page.tsx
View File

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

189
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/page.tsx
View File

@@ -19,7 +19,7 @@ import {
Text,
Title
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
@@ -31,7 +31,7 @@ import PendapatanAsliDesa from '../../../_state/ekonomi/PADesa';
function Belanja() {
const [search, setSearch] = useState("");
return (
<Box>
<Stack gap="xl">
<HeaderSearch
title="Belanja"
placeholder="Cari belanja berdasarkan nama atau nilai..."
@@ -40,7 +40,7 @@ function Belanja() {
onChange={(e) => setSearch(e.currentTarget.value)}
/>
<ListBelanja search={search} />
</Box>
</Stack>
);
}
@@ -49,6 +49,7 @@ function ListBelanja({ 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,
@@ -72,29 +73,35 @@ function ListBelanja({ search }: { search: string }) {
belanjaState.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]);
const filteredData = data || [];
if (loading || !data) {
return (
<Stack py={10}>
<Stack py="md">
<Skeleton height={600} radius="md" />
</Stack>
);
}
return (
<Box py={10}>
<Stack gap="xl">
{/* Desktop Table */}
<Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Belanja</Title>
<Title
order={4}
lh={{ base: 1.2, md: 1.1 }}
>
Daftar Belanja
</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
@@ -107,14 +114,24 @@ function ListBelanja({ search }: { search: string }) {
</Button>
</Group>
<Box style={{ overflowX: 'auto' }}>
<Table highlightOnHover striped withTableBorder withRowBorders>
<Box visibleFrom="md">
<Table
highlightOnHover
miw={0}
striped
withTableBorder
withRowBorders
style={{
tableLayout: 'fixed',
width: '100%',
}}
>
<TableThead>
<TableTr>
<TableTh>Nama</TableTh>
<TableTh>Nilai</TableTh>
<TableTh>Persentase</TableTh>
<TableTh>Aksi</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>
<TableTbody>
@@ -123,15 +140,19 @@ function ListBelanja({ 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.45} truncate="end" lineClamp={1}>
{item.name}
</Text>
</TableTd>
<TableTd>{formatRupiah(item.value)}</TableTd>
<TableTd>
{totalBelanja > 0
? ((item.value / totalBelanja) * 100).toFixed(0) + '%'
: '0%'}
<Text fz="md" lh={1.45}>{formatRupiah(item.value)}</Text>
</TableTd>
<TableTd>
<Text fz="md" lh={1.45}>
{totalBelanja > 0
? ((item.value / totalBelanja) * 100).toFixed(0) + '%'
: '0%'}
</Text>
</TableTd>
<TableTd>
<Group gap="xs">
@@ -165,18 +186,20 @@ function ListBelanja({ search }: { search: string }) {
))}
<TableTr>
<TableTd colSpan={2}>
<Text fw="bold">Total</Text>
<Text fz="md" fw={600} lh={1.45}>Total</Text>
</TableTd>
<TableTd colSpan={2}>
<Text fw="bold">{formatRupiah(totalBelanja)}</Text>
<Text fz="md" fw={600} lh={1.45}>{formatRupiah(totalBelanja)}</Text>
</TableTd>
</TableTr>
</>
) : (
<TableTr>
<TableTd colSpan={4}>
<Center py={20}>
<Text c="dimmed">Tidak ada data belanja yang cocok</Text>
<Center py="xl">
<Text c="dimmed" fz="sm" lh={1.4}>
Tidak ada data belanja yang cocok
</Text>
</Center>
</TableTd>
</TableTr>
@@ -186,21 +209,107 @@ function ListBelanja({ search }: { search: string }) {
</Box>
</Paper>
{/* Mobile Cards */}
<Stack visibleFrom="xs" hiddenFrom="md" gap="sm">
{filteredData.length > 0 ? (
filteredData.map((item) => (
<Paper key={item.id} withBorder p="md" radius="md">
<Stack gap={'xs'}>
<Box>
<Text fz="sm" fw={600} lh={1.4}>
Nama
</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}>
{totalBelanja > 0
? ((item.value / totalBelanja) * 100).toFixed(0) + '%'
: '0%'}
</Text>
</Box>
<Group justify="flex-end" mt="xs">
<Button
size="xs"
variant="light"
color="green"
onClick={() =>
router.push(
`/admin/ekonomi/PADesa-pendapatan-asli-desa/belanja/${item.id}`
)
}
>
<IconEdit size={16} />
</Button>
<Button
size="xs"
variant="light"
color="red"
disabled={belanjaState.delete.loading}
onClick={() => {
setSelectedId(item.id);
setModalHapus(true);
}}
>
<IconTrash size={16} />
</Button>
</Group>
</Stack>
</Paper>
))
) : (
<Paper withBorder p="xl" radius="md">
<Center>
<Text c="dimmed" fz="sm" lh={1.4}>
Tidak ada data belanja yang cocok
</Text>
</Center>
</Paper>
)}
{filteredData.length > 0 && (
<Paper withBorder p="md" radius="md">
<Group justify="space-between">
<Text fz="sm" fw={600} lh={1.4}>
Total
</Text>
<Text fz="sm" fw={500} lh={1.4}>
{formatRupiah(totalBelanja)}
</Text>
</Group>
</Paper>
)}
</Stack>
{/* Pagination */}
<Center>
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10, search);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
mt="md"
mb="md"
color="blue"
radius="md"
/>
</Center>
{(totalPages > 1 || page > 1) && (
<Center>
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10, search);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
mt="md"
color="blue"
radius="md"
/>
</Center>
)}
{/* Modal Konfirmasi Hapus */}
<ModalKonfirmasiHapus
@@ -209,8 +318,8 @@ function ListBelanja({ search }: { search: string }) {
onConfirm={handleDelete}
text="Apakah anda yakin ingin menghapus belanja ini?"
/>
</Box>
</Stack>
);
}
export default Belanja;
export default Belanja;

23
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/layout.tsx
View File

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

2
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/[id]/page.tsx
View File

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

2
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/create/page.tsx
View File

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

139
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/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 { 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;

2
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/[id]/page.tsx
View File

@@ -114,7 +114,7 @@ function EditPendapatan() {
};
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

2
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/create/page.tsx
View File

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

165
src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/page.tsx
View File

@@ -19,7 +19,7 @@ import {
Text,
Title
} from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
@@ -49,6 +49,7 @@ function ListPendapatan({ 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,
@@ -70,19 +71,19 @@ function ListPendapatan({ search }: { search: string }) {
pendapatanState.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]);
const filteredData = data || [];
if (loading || !data) {
return (
<Stack py={10}>
<Stack py={{ base: 'sm', md: 'md' }}>
<Skeleton height={600} radius="md" />
</Stack>
);
@@ -91,10 +92,12 @@ function ListPendapatan({ search }: { search: string }) {
const totalValue = filteredData.reduce((total, item) => total + item.value, 0);
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">
<Group justify="space-between" mb="md">
<Title order={4}>Daftar Pendapatan</Title>
<Title order={2} lh={1.2}>
Daftar Pendapatan
</Title>
<Button
leftSection={<IconPlus size={18} />}
color="blue"
@@ -107,14 +110,30 @@ function ListPendapatan({ search }: { search: string }) {
</Button>
</Group>
<Box style={{ overflowX: 'auto' }}>
<Table highlightOnHover striped withTableBorder withRowBorders>
{/* Desktop Table */}
<Box visibleFrom="md">
<Table
highlightOnHover
miw={0}
style={{
tableLayout: 'fixed',
width: '100%',
}}
>
<TableThead>
<TableTr>
<TableTh style={{ width: '40%' }}>Nama</TableTh>
<TableTh style={{ width: '25%' }}>Nilai</TableTh>
<TableTh style={{ width: '15%' }}>Edit</TableTh>
<TableTh style={{ width: '15%' }}>Delete</TableTh>
<TableTh style={{ width: '40%' }}>
<Text fz="sm" fw={600} lh={1.4}>Nama</Text>
</TableTh>
<TableTh style={{ width: '25%' }}>
<Text fz="sm" fw={600} lh={1.4}>Nilai</Text>
</TableTh>
<TableTh style={{ width: '15%' }}>
<Text fz="sm" fw={600} lh={1.4}>Edit</Text>
</TableTh>
<TableTh style={{ width: '20%' }}>
<Text fz="sm" fw={600} lh={1.4}>Delete</Text>
</TableTh>
</TableTr>
</TableThead>
<TableTbody>
@@ -123,11 +142,13 @@ function ListPendapatan({ 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.name}
</Text>
</TableTd>
<TableTd>{formatRupiah(item.value)}</TableTd>
<TableTd>
<Text fz="md" fw={500} lh={1.5}>{formatRupiah(item.value)}</Text>
</TableTd>
<TableTd>
<Button
variant="light"
@@ -135,8 +156,10 @@ function ListPendapatan({ search }: { search: string }) {
onClick={() =>
router.push(`/admin/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/${item.id}`)
}
fz="sm"
px="xs"
>
<IconEdit size={18} />
<IconEdit size={16} />
<Text ml={5}>Edit</Text>
</Button>
</TableTd>
@@ -149,8 +172,10 @@ function ListPendapatan({ search }: { search: string }) {
setSelectedId(item.id);
setModalHapus(true);
}}
fz="sm"
px="xs"
>
<IconTrash size={18} />
<IconTrash size={16} />
<Text ml={5}>Hapus</Text>
</Button>
</TableTd>
@@ -159,19 +184,21 @@ function ListPendapatan({ search }: { search: string }) {
{/* Row total */}
<TableTr>
<TableTd colSpan={1}>
<Text fw={'bold'}>Total</Text>
<TableTd>
<Text fz="md" fw={700} lh={1.5}>Total</Text>
</TableTd>
<TableTd colSpan={3}>
<Text fw={'bold'}>{formatRupiah(totalValue)}</Text>
<Text fz="md" fw={700} lh={1.5}>{formatRupiah(totalValue)}</Text>
</TableTd>
</TableTr>
</>
) : (
<TableTr>
<TableTd colSpan={4}>
<Center py={20}>
<Text color="dimmed">Tidak ada data pendapatan yang cocok</Text>
<Center py={24}>
<Text c="dimmed" fz="sm" lh={1.4}>
Tidak ada data pendapatan yang cocok
</Text>
</Center>
</TableTd>
</TableTr>
@@ -179,23 +206,85 @@ function ListPendapatan({ search }: { search: string }) {
</TableTbody>
</Table>
</Box>
{/* Mobile Cards */}
<Stack gap="xs" hiddenFrom="md">
{filteredData.length > 0 ? (
filteredData.map((item) => (
<Paper key={item.id} withBorder radius="md" p="md">
<Stack gap={4}>
<Box>
<Text fz="sm" fw={600} lh={1.4}>Nama</Text>
<Text fz="sm" fw={500} lh={1.4}>{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>
<Group justify="flex-end" mt="xs">
<Button
variant="light"
color="green"
size="xs"
onClick={() =>
router.push(`/admin/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/${item.id}`)
}
>
<IconEdit size={14} />
<Text ml={4}>Edit</Text>
</Button>
<Button
variant="light"
color="red"
size="xs"
disabled={pendapatanState.delete.loading}
onClick={() => {
setSelectedId(item.id);
setModalHapus(true);
}}
>
<IconTrash size={14} />
<Text ml={4}>Hapus</Text>
</Button>
</Group>
</Stack>
</Paper>
))
) : (
<Center py={24}>
<Text c="dimmed" fz="sm" lh={1.4}>
Tidak ada data pendapatan yang cocok
</Text>
</Center>
)}
{filteredData.length > 0 && (
<Paper withBorder radius="md" p="md">
<Box>
<Text fz="xs" fw={600} lh={1.4}>Total</Text>
<Text fz="sm" fw={700} lh={1.4}>{formatRupiah(totalValue)}</Text>
</Box>
</Paper>
)}
</Stack>
</Paper>
{/* Pagination */}
<Center>
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10, search);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
mt="md"
mb="md"
color="blue"
radius="md"
/>
</Center>
{totalPages > 1 && (
<Center mt={{ base: 'sm', md: 'md' }} mb={{ base: 'sm', md: 'md' }}>
<Pagination
value={page}
onChange={(newPage) => {
load(newPage, 10, search);
window.scrollTo({ top: 0, behavior: 'smooth' });
}}
total={totalPages}
color="blue"
radius="md"
size="sm"
/>
</Center>
)}
{/* Modal Konfirmasi Hapus */}
<ModalKonfirmasiHapus
@@ -208,4 +297,4 @@ function ListPendapatan({ search }: { search: string }) {
);
}
export default Pendapatan;
export default Pendapatan;