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>

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 
+      <Progress
-        value={persen} 
+        value={persen}
-        size="xl" 
+        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>
   );
 }