From a791efe76c26744f3988a735820f909d5064f06a Mon Sep 17 00:00:00 2001
From: nico <nicoarya20@gmail.com>
Date: Tue, 3 Mar 2026 16:47:26 +0800
Subject: [PATCH] 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>
---
 .../main-page/apbdes/lib/grafikRealisasi.tsx  | 62 ++++++++++---------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/app/darmasaba/_com/main-page/apbdes/lib/grafikRealisasi.tsx b/src/app/darmasaba/_com/main-page/apbdes/lib/grafikRealisasi.tsx
index 58f8dca3..81c480ff 100644
--- a/src/app/darmasaba/_com/main-page/apbdes/lib/grafikRealisasi.tsx
+++ b/src/app/darmasaba/_com/main-page/apbdes/lib/grafikRealisasi.tsx
@@ -5,7 +5,7 @@ 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 totalRealisasi = data.reduce((s: number, i: any) => s + i.totalRealisasi, 0);
 
   const persen =
     totalAnggaran > 0 ? (totalRealisasi / totalAnggaran) * 100 : 0;
@@ -36,38 +36,38 @@ function Summary({ title, data }: any) {
           {persen.toFixed(2)}%
         </Text>
       </Group>
-      
+
       <Text fz="sm" c="dimmed" mb="xs">
         Realisasi: {formatRupiah(totalRealisasi)} / Anggaran: {formatRupiah(totalAnggaran)}
       </Text>
-      
-      <Progress 
-        value={persen} 
-        size="xl" 
+
+      <Progress
+        value={persen}
+        size="xl"
         radius="xl"
         color={getProgressColor(persen)}
         striped={persen < 100}
         animated={persen < 100}
       />
-      
+
       {persen >= 100 && (
         <Text fz="xs" c="teal" mt="xs" fw={500}>
           ✓ Realisasi mencapai 100% dari anggaran
         </Text>
       )}
-      
+
       {persen < 100 && persen >= 80 && (
         <Text fz="xs" c="blue" mt="xs" fw={500}>
           ⚡ Realisasi baik, mendekati target
         </Text>
       )}
-      
+
       {persen < 80 && persen >= 60 && (
         <Text fz="xs" c="yellow" mt="xs" fw={500}>
           ⚠️ Realisasi cukup, perlu ditingkatkan
         </Text>
       )}
-      
+
       {persen < 60 && (
         <Text fz="xs" c="red" mt="xs" fw={500}>
           ⚠️ Realisasi rendah, perlu perhatian khusus
@@ -87,7 +87,7 @@ export default function GrafikRealisasi({ apbdesData }: any) {
 
   // Hitung total keseluruhan
   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 formatRupiah = (angka: number) => {
@@ -105,30 +105,32 @@ export default function GrafikRealisasi({ apbdesData }: any) {
         GRAFIK REALISASI APBDes {tahun}
       </Title>
 
+      {/* Summary Total Keseluruhan */}
+      <Box mb="lg" p="md" bg="gray.0" radius="md">
+        <>
+          <Group justify="space-between" mb="xs">
+            <Text fw={700} fz="lg">TOTAL KESELURUHAN</Text>
+            <Text fw={700} fz="xl" c={persenSemua >= 100 ? 'teal' : persenSemua >= 80 ? 'blue' : 'red'}>
+              {persenSemua.toFixed(2)}%
+            </Text>
+          </Group>
+          <Text fz="sm" c="dimmed" mb="xs">
+            {formatRupiah(totalRealisasiSemua)} / {formatRupiah(totalAnggaranSemua)}
+          </Text>
+          <Progress
+            value={persenSemua}
+            size="lg"
+            radius="xl"
+            color={persenSemua >= 100 ? 'teal' : persenSemua >= 80 ? 'blue' : 'red'}
+          />
+        </>
+      </Box>
+
       <Stack gap="lg">
         <Summary title="💰 Pendapatan" data={pendapatan} />
         <Summary title="💸 Belanja" data={belanja} />
         <Summary title="📊 Pembiayaan" data={pembiayaan} />
       </Stack>
-
-       {/* Summary Total Keseluruhan */}
-      <Box mb="lg" p="md" bg="gray.0">
-        <Group justify="space-between" mb="xs">
-          <Text fw={700} fz="lg">TOTAL KESELURUHAN</Text>
-          <Text fw={700} fz="xl" c={persenSemua >= 100 ? 'teal' : persenSemua >= 80 ? 'blue' : 'red'}>
-            {persenSemua.toFixed(2)}%
-          </Text>
-        </Group>
-        <Text fz="sm" c="dimmed" mb="xs">
-          {formatRupiah(totalRealisasiSemua)} / {formatRupiah(totalAnggaranSemua)}
-        </Text>
-        <Progress 
-          value={persenSemua} 
-          size="lg" 
-          radius="xl"
-          color={persenSemua >= 100 ? 'teal' : persenSemua >= 80 ? 'blue' : 'red'}
-        />
-      </Box>
     </Paper>
   );
 }
\ No newline at end of file