Fix SDGs Desa Barchart sudah responsive, tabel dan bar progress di menu apbdes sudah sesuai dengan data

src/app/darmasaba/(tambahan)/apbdes/lib/apbDesaProgress.tsx

@@ -0,0 +1,208 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// src/app/admin/(dashboard)/landing-page/APBDes/APBDesProgress.tsx
+'use client';
+
+import { Box, Paper, Progress, Stack, Text, Title } from '@mantine/core';
+import { useProxy } from 'valtio/utils';
+import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes';
+import colors from '@/con/colors';
+
+
+
+function formatRupiah(value: number) {
+  return new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    minimumFractionDigits: 2,
+  }).format(value);
+}
+
+function APBDesProgress() {
+  const state = useProxy(apbdes);
+  const data = state.findMany.data || [];
+
+  // Ambil APBDes pertama (misalnya, jika hanya satu tahun ditampilkan)
+  const apbdesItem = data[0]; // 👈 sesuaikan logika jika ada banyak APBDes
+
+  if (!apbdesItem) {
+    return (
+      <Box py="md" px={{ base: 'md', md: 100 }}>
+        <Text c="dimmed">Belum ada data APBDes untuk ditampilkan.</Text>
+      </Box>
+    );
+  }
+
+  const items = apbdesItem.items || [];
+  const sortedItems = [...items].sort((a, b) => a.kode.localeCompare(b.kode));
+
+  // Kelompokkan berdasarkan tipe
+  const pendapatanItems = sortedItems.filter(item => item.tipe === 'pendapatan');
+  const belanjaItems = sortedItems.filter(item => item.tipe === 'belanja');
+  const pembiayaanItems = sortedItems.filter(item => item.tipe === 'pembiayaan'); // jika ada
+
+  // Hitung total per kategori
+  const calcTotal = (items: any[]) => {
+    const anggaran = items.reduce((sum, item) => sum + item.anggaran, 0);
+    const realisasi = items.reduce((sum, item) => sum + item.realisasi, 0);
+    const persen = anggaran > 0 ? (realisasi / anggaran) * 100 : 0;
+    return { anggaran, realisasi, persen };
+  };
+
+  const pendapatan = calcTotal(pendapatanItems);
+  const belanja = calcTotal(belanjaItems);
+  const pembiayaan = calcTotal(pembiayaanItems); // bisa kosong
+
+  // Render satu progress bar
+  const renderProgress = (label: string, dataset: any) => {
+    const isPembiayaan = label.includes('Pembiayaan');
+
+    return (
+      <Box key={label}>
+        <Text fw={600} fz="sm">{label}</Text>
+        <Text fw={700} mb="xs">
+          {formatRupiah(dataset.realisasi)} | {formatRupiah(dataset.anggaran)}
+        </Text>
+        <Progress
+          value={dataset.persen}
+          size="xl"
+          radius="xl"
+          striped={false}
+          styles={{
+            root: { backgroundColor: '#d7e3f1' },
+            section: {
+              backgroundColor: isPembiayaan
+                ? 'green' // warna hijau untuk pembiayaan
+                : colors['blue-button'], // biru untuk pendapatan/belanja
+              position: 'relative',
+              '&::after': {
+                content: `'${dataset.persen.toFixed(2)}%'`,
+                position: 'absolute',
+                right: 10,
+                top: '50%',
+                transform: 'translateY(-50%)',
+                color: 'white',
+                fontWeight: 700,
+                fontSize: '0.8rem',
+              },
+            },
+          }}
+        />
+      </Box>
+    );
+  };
+
+  return (
+    <Paper
+      mx={{ base: 'md', md: 100 }}
+      p="xl"
+      radius="md"
+      shadow="sm"
+      withBorder
+      bg={colors['white-1']}
+    >
+      <Stack gap="lg">
+        <Title order={4} c={colors['blue-button']} ta="center">
+          Grafik Pelaksanaan APBDes Tahun {apbdesItem.tahun}
+        </Title>
+
+        <Text ta="center" fw="bold" fz="sm" c="dimmed">
+          Realisasi | Anggaran
+        </Text>
+
+        {renderProgress('Pendapatan Desa', pendapatan)}
+        {renderProgress('Belanja Desa', belanja)}
+        {renderProgress('Pembiayaan Desa', pembiayaan)}
+        {pembiayaanItems.length > 0 && renderProgress('Pembiayaan Desa', pembiayaan)}
+      </Stack>
+    </Paper>
+  );
+}
+
+export default APBDesProgress;
+
+// /* eslint-disable @typescript-eslint/no-explicit-any */
+// 'use client';
+
+// import { Box, Paper, Stack, Text, Title } from '@mantine/core';
+// import { BarChart } from '@mantine/charts';
+// import { useProxy } from 'valtio/utils';
+// import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes';
+// import colors from '@/con/colors';
+
+// function APBDesProgress() {
+//   const state = useProxy(apbdes);
+//   const data = state.findMany.data || [];
+
+//   const apbdesItem = data[0];
+//   if (!apbdesItem) {
+//     return (
+//       <Box py="md" px={{ base: 'md', md: 100 }}>
+//         <Text c="dimmed">Belum ada data APBDes untuk ditampilkan.</Text>
+//       </Box>
+//     );
+//   }
+
+//   const items = apbdesItem.items || [];
+//   const sortedItems = [...items].sort((a, b) => a.kode.localeCompare(b.kode));
+
+//   const pendapatanItems = sortedItems.filter(i => i.tipe === 'pendapatan');
+//   const belanjaItems = sortedItems.filter(i => i.tipe === 'belanja');
+//   const pembiayaanItems = sortedItems.filter(i => i.tipe === 'pembiayaan');
+
+//   const total = (rows: any[]) => {
+//     const anggaran = rows.reduce((s, i) => s + i.anggaran, 0);
+//     const realisasi = rows.reduce((s, i) => s + i.realisasi, 0);
+//     return anggaran === 0 ? 0 : (realisasi / anggaran) * 100;
+//   };
+
+//   const chartData = [
+//     { name: 'Pendapatan', persen: total(pendapatanItems) },
+//     { name: 'Belanja', persen: total(belanjaItems) },
+//   ];
+
+//   if (pembiayaanItems.length > 0) {
+//     chartData.push({ name: 'Pembiayaan', persen: total(pembiayaanItems) });
+//   }
+
+//   return (
+//     <Paper
+//       mx={{ base: 'md', md: 100 }}
+//       p="xl"
+//       radius="md"
+//       shadow="sm"
+//       withBorder
+//       bg={colors['white-1']}
+//     >
+//       <Stack gap="lg">
+//         <Title order={4} c={colors['blue-button']} ta="center">
+//           Grafik Pelaksanaan APBDes Tahun {apbdesItem.tahun}
+//         </Title>
+
+//         <Text ta="center" fw="bold" fz="sm" c="dimmed">
+//           Persentase Realisasi (%) dari Anggaran
+//         </Text>
+
+//         <BarChart
+//           h={200}
+//           data={chartData}
+//           orientation="vertical"
+//           dataKey="name"
+//           barProps={{ radius: 6 }}
+//           series={[
+//             {
+//               name: 'persen',
+//               label: 'Persentase',
+//               color: colors['blue-button'],
+//             },
+//           ]}
+//           yAxisProps={{
+//             domain: [0, 100],
+//           }}
+//           valueFormatter={(v) => `${v.toFixed(1)}%`}
+//         />
+//       </Stack>
+//     </Paper>
+//   );
+// }
+
+// export default APBDesProgress;