fix(grafik): sync grafikRealisasi with totalRealisasi field

Fix:
- Change i.realisasi to i.totalRealisasi in Summary component
- Change i.realisasi to i.totalRealisasi in total calculation
- Add fragment wrapper <> to fix Box children type error
- Reorder Total Keseluruhan section to top (before category breakdown)

Now grafik shows correct data from multiple realisasi items.

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
2026-03-03 16:47:26 +08:00
parent e9f7bc2043
commit a791efe76c

View File

@@ -5,7 +5,7 @@ function Summary({ title, data }: any) {
if (!data || data.length === 0) return null; if (!data || data.length === 0) return null;
const totalAnggaran = data.reduce((s: number, i: any) => s + i.anggaran, 0); 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 totalRealisasi = data.reduce((s: number, i: any) => s + i.totalRealisasi, 0);
const persen = const persen =
totalAnggaran > 0 ? (totalRealisasi / totalAnggaran) * 100 : 0; totalAnggaran > 0 ? (totalRealisasi / totalAnggaran) * 100 : 0;
@@ -87,7 +87,7 @@ export default function GrafikRealisasi({ apbdesData }: any) {
// Hitung total keseluruhan // Hitung total keseluruhan
const totalAnggaranSemua = items.reduce((s: number, i: any) => s + i.anggaran, 0); const totalAnggaranSemua = items.reduce((s: number, i: any) => s + i.anggaran, 0);
const totalRealisasiSemua = items.reduce((s: number, i: any) => s + i.realisasi, 0); const totalRealisasiSemua = items.reduce((s: number, i: any) => s + i.totalRealisasi, 0);
const persenSemua = totalAnggaranSemua > 0 ? (totalRealisasiSemua / totalAnggaranSemua) * 100 : 0; const persenSemua = totalAnggaranSemua > 0 ? (totalRealisasiSemua / totalAnggaranSemua) * 100 : 0;
const formatRupiah = (angka: number) => { const formatRupiah = (angka: number) => {
@@ -105,14 +105,9 @@ export default function GrafikRealisasi({ apbdesData }: any) {
GRAFIK REALISASI APBDes {tahun} GRAFIK REALISASI APBDes {tahun}
</Title> </Title>
<Stack gap="lg">
<Summary title="💰 Pendapatan" data={pendapatan} />
<Summary title="💸 Belanja" data={belanja} />
<Summary title="📊 Pembiayaan" data={pembiayaan} />
</Stack>
{/* Summary Total Keseluruhan */} {/* Summary Total Keseluruhan */}
<Box mb="lg" p="md" bg="gray.0"> <Box mb="lg" p="md" bg="gray.0" radius="md">
<>
<Group justify="space-between" mb="xs"> <Group justify="space-between" mb="xs">
<Text fw={700} fz="lg">TOTAL KESELURUHAN</Text> <Text fw={700} fz="lg">TOTAL KESELURUHAN</Text>
<Text fw={700} fz="xl" c={persenSemua >= 100 ? 'teal' : persenSemua >= 80 ? 'blue' : 'red'}> <Text fw={700} fz="xl" c={persenSemua >= 100 ? 'teal' : persenSemua >= 80 ? 'blue' : 'red'}>
@@ -128,7 +123,14 @@ export default function GrafikRealisasi({ apbdesData }: any) {
radius="xl" radius="xl"
color={persenSemua >= 100 ? 'teal' : persenSemua >= 80 ? 'blue' : 'red'} color={persenSemua >= 100 ? 'teal' : persenSemua >= 80 ? 'blue' : 'red'}
/> />
</>
</Box> </Box>
<Stack gap="lg">
<Summary title="💰 Pendapatan" data={pendapatan} />
<Summary title="💸 Belanja" data={belanja} />
<Summary title="📊 Pembiayaan" data={pembiayaan} />
</Stack>
</Paper> </Paper>
); );
} }