fix(apbdes) landing page: fix APBDes component not displaying on darmasaba page
- Restore Apbdes component with full functionality (fetch data, year selector, tables, charts) - Fix realisasiTable.tsx: add missing items variable - Fix grafikRealisasi.tsx: dynamic year title instead of hardcoded 2026 - Add eslint-disable comments for TypeScript any types - Remove unused imports in paguTable.tsx - Integrate PaguTable, RealisasiTable, GrafikRealisasi into main Apbdes component - Component now fetches data from Valtio state and displays 3 tables + charts Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { Paper, Title, Progress, Stack, Text } from '@mantine/core';
|
||||
|
||||
function Summary({ title, data }: any) {
|
||||
if (!data || data.length === 0) return null;
|
||||
|
||||
const totalAnggaran = data.reduce((s: number, i: any) => s + i.anggaran, 0);
|
||||
const totalRealisasi = data.reduce((s: number, i: any) => s + i.realisasi, 0);
|
||||
|
||||
const persen =
|
||||
totalAnggaran > 0 ? (totalRealisasi / totalAnggaran) * 100 : 0;
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<Text fw={600}>{title}</Text>
|
||||
<Text>
|
||||
Rp {totalRealisasi.toLocaleString('id-ID')} /
|
||||
Rp {totalAnggaran.toLocaleString('id-ID')}
|
||||
</Text>
|
||||
<Progress value={persen} size="lg" radius="xl" />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default function GrafikRealisasi({ apbdesData }: any) {
|
||||
const items = apbdesData.items || [];
|
||||
const tahun = apbdesData.tahun || new Date().getFullYear();
|
||||
|
||||
const pendapatan = items.filter((i: any) => i.tipe === 'pendapatan');
|
||||
const belanja = items.filter((i: any) => i.tipe === 'belanja');
|
||||
const pembiayaan = items.filter((i: any) => i.tipe === 'pembiayaan');
|
||||
|
||||
return (
|
||||
<Paper withBorder p="md" radius="md">
|
||||
<Title order={5} mb="md">
|
||||
GRAFIK REALISASI APBDes {tahun}
|
||||
</Title>
|
||||
|
||||
<Stack>
|
||||
<Summary title="Pendapatan" data={pendapatan} />
|
||||
<Summary title="Belanja" data={belanja} />
|
||||
<Summary title="Pembiayaan" data={pembiayaan} />
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
60
src/app/darmasaba/_com/main-page/apbdes/lib/paguTable.tsx
Normal file
60
src/app/darmasaba/_com/main-page/apbdes/lib/paguTable.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { Paper, Table, Title } from '@mantine/core';
|
||||
|
||||
function Section({ title, data }: any) {
|
||||
if (!data || data.length === 0) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={2}>
|
||||
<strong>{title}</strong>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
|
||||
{data.map((item: any) => (
|
||||
<Table.Tr key={item.id}>
|
||||
<Table.Td>
|
||||
{item.kode} - {item.uraian}
|
||||
</Table.Td>
|
||||
<Table.Td ta="right">
|
||||
Rp {item.anggaran.toLocaleString('id-ID')}
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function PaguTable({ apbdesData }: any) {
|
||||
const items = apbdesData.items || [];
|
||||
|
||||
const title =
|
||||
apbdesData.tahun
|
||||
? `PAGU APBDes Tahun ${apbdesData.tahun}`
|
||||
: 'PAGU APBDes';
|
||||
|
||||
const pendapatan = items.filter((i: any) => i.tipe === 'pendapatan');
|
||||
const belanja = items.filter((i: any) => i.tipe === 'belanja');
|
||||
const pembiayaan = items.filter((i: any) => i.tipe === 'pembiayaan');
|
||||
|
||||
return (
|
||||
<Paper withBorder p="md" radius="md">
|
||||
<Title order={5} mb="md">{title}</Title>
|
||||
|
||||
<Table>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Uraian</Table.Th>
|
||||
<Table.Th ta="right">Anggaran (Rp)</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
<Section title="1) PENDAPATAN" data={pendapatan} />
|
||||
<Section title="2) BELANJA" data={belanja} />
|
||||
<Section title="3) PEMBIAYAAN" data={pembiayaan} />
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import { Paper, Table, Title, Badge } from '@mantine/core';
|
||||
|
||||
function Section({ title, data }: any) {
|
||||
if (!data || data.length === 0) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table.Tr>
|
||||
<Table.Td colSpan={3}>
|
||||
<strong>{title}</strong>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
|
||||
{data.map((item: any) => (
|
||||
<Table.Tr key={item.id}>
|
||||
<Table.Td>
|
||||
{item.kode} - {item.uraian}
|
||||
</Table.Td>
|
||||
<Table.Td ta="right">
|
||||
Rp {item.realisasi.toLocaleString('id-ID')}
|
||||
</Table.Td>
|
||||
<Table.Td ta="center">
|
||||
<Badge
|
||||
color={
|
||||
item.persentase >= 100
|
||||
? 'teal'
|
||||
: item.persentase >= 60
|
||||
? 'yellow'
|
||||
: 'red'
|
||||
}
|
||||
>
|
||||
{item.persentase.toFixed(2)}%
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default function RealisasiTable({ apbdesData }: any) {
|
||||
const items = apbdesData.items || [];
|
||||
|
||||
const title =
|
||||
apbdesData.tahun
|
||||
? `REALISASI APBDes Tahun ${apbdesData.tahun}`
|
||||
: 'REALISASI APBDes';
|
||||
|
||||
const pendapatan = items.filter((i: any) => i.tipe === 'pendapatan');
|
||||
const belanja = items.filter((i: any) => i.tipe === 'belanja');
|
||||
const pembiayaan = items.filter((i: any) => i.tipe === 'pembiayaan');
|
||||
|
||||
return (
|
||||
<Paper withBorder p="md" radius="md">
|
||||
<Title order={5} mb="md">{title}</Title>
|
||||
|
||||
<Table>
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Uraian</Table.Th>
|
||||
<Table.Th ta="right">Realisasi (Rp)</Table.Th>
|
||||
<Table.Th ta="center">%</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
<Section title="1) PENDAPATAN" data={pendapatan} />
|
||||
<Section title="2) BELANJA" data={belanja} />
|
||||
<Section title="3) PEMBIAYAAN" data={pembiayaan} />
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user