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

feat(apbdes): modernize ui, charts and refactor (Phase 1, 2, 4)

Browse Source
This commit is contained in:
nico
2026-04-01 15:09:40 +08:00
parent 51ce823b45
commit 0806eb2308
10 changed files with 1582 additions and 347 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/app/darmasaba/_com/main-page/apbdes/components/apbdesSkeleton.tsx Normal file
View File

@@ -0,0 +1,117 @@
import { Skeleton, Stack, Box, Group } from '@mantine/core'
export function PaguTableSkeleton() {
return (
<Box>
<Skeleton height={28} width="60%" mb="md" />
<Stack gap="xs">
{/* Header */}
<Group justify="space-between">
<Skeleton height={20} width="40%" />
<Skeleton height={20} width="30%" />
</Group>
{/* Section headers */}
<Skeleton height={24} width="100%" mt="md" />
<Skeleton height={20} width="90%" />
<Skeleton height={20} width="85%" />
<Skeleton height={20} width="80%" />
<Skeleton height={24} width="100%" mt="md" />
<Skeleton height={20} width="90%" />
<Skeleton height={20} width="85%" />
<Skeleton height={24} width="100%" mt="md" />
<Skeleton height={20} width="90%" />
</Stack>
</Box>
)
}
export function RealisasiTableSkeleton() {
return (
<Box>
<Skeleton height={28} width="70%" mb="md" />
<Stack gap="xs">
{/* Header */}
<Group justify="space-between">
<Skeleton height={20} width="40%" />
<Skeleton height={20} width="20%" />
<Skeleton height={20} width="10%" />
</Group>
{/* Rows */}
{[1, 2, 3, 4, 5].map((i) => (
<Group key={i} justify="space-between">
<Skeleton height={20} width="50%" />
<Skeleton height={20} width="25%" />
<Skeleton height={24} width="15%" radius="xl" />
</Group>
))}
</Stack>
</Box>
)
}
export function GrafikRealisasiSkeleton() {
return (
<Box>
<Skeleton height={28} width="65%" mb="md" />
<Stack gap="lg">
{[1, 2, 3].map((i) => (
<Stack key={i} gap="xs">
<Group justify="space-between">
<Skeleton height={20} width="40%" />
<Skeleton height={20} width="15%" />
</Group>
<Skeleton height={16} width="100%" />
<Skeleton height={12} width="100%" mt={4} />
<Skeleton height={16} width="100%" radius="xl" />
</Stack>
))}
</Stack>
</Box>
)
}
export function SummaryCardsSkeleton() {
return (
<Stack gap="lg">
<Skeleton height={28} width="50%" mb="sm" />
{[1, 2, 3].map((i) => (
<Stack key={i} gap="xs" p="md" style={{ border: '1px solid #e5e7eb', borderRadius: 8 }}>
<Group justify="space-between">
<Skeleton height={20} width="35%" />
<Skeleton height={20} width="20%" />
</Group>
<Skeleton height={16} width="100%" />
<Skeleton height={12} width="100%" mt={4} />
<Skeleton height={16} width="100%" radius="xl" />
</Stack>
))}
</Stack>
)
}
export function ApbdesMainSkeleton() {
return (
<Stack gap="xl">
{/* Title */}
<Skeleton height={48} width="40%" mx="auto" />
<Skeleton height={24} width="60%" mx="auto" />
{/* Select */}
<Skeleton height={42} width={220} mx="auto" />
{/* Summary Cards */}
<SummaryCardsSkeleton />
{/* Tables and Charts */}
<Stack gap="lg">
<PaguTableSkeleton />
<RealisasiTableSkeleton />
<GrafikRealisasiSkeleton />
</Stack>
</Stack>
)
}