From 597af7e71628a3264b476a6f0848b8eb0e650d0f Mon Sep 17 00:00:00 2001 From: nico Date: Tue, 3 Mar 2026 12:51:53 +0800 Subject: [PATCH] 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 --- .../darmasaba/_com/main-page/apbdes/index.tsx | 71 ++++++++++-------- .../main-page/apbdes/lib/grafikRealisasi.tsx | 46 ++++++++++++ .../_com/main-page/apbdes/lib/paguTable.tsx | 60 +++++++++++++++ .../main-page/apbdes/lib/realisasiTable.tsx | 74 +++++++++++++++++++ 4 files changed, 219 insertions(+), 32 deletions(-) create mode 100644 src/app/darmasaba/_com/main-page/apbdes/lib/grafikRealisasi.tsx create mode 100644 src/app/darmasaba/_com/main-page/apbdes/lib/paguTable.tsx create mode 100644 src/app/darmasaba/_com/main-page/apbdes/lib/realisasiTable.tsx diff --git a/src/app/darmasaba/_com/main-page/apbdes/index.tsx b/src/app/darmasaba/_com/main-page/apbdes/index.tsx index 0511d69e..308d2650 100644 --- a/src/app/darmasaba/_com/main-page/apbdes/index.tsx +++ b/src/app/darmasaba/_com/main-page/apbdes/index.tsx @@ -2,12 +2,9 @@ /* eslint-disable react-hooks/exhaustive-deps */ 'use client' import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes' -import APBDesProgress from '@/app/darmasaba/(tambahan)/apbdes/lib/apbDesaProgress' -import { transformAPBDesData } from '@/app/darmasaba/(tambahan)/apbdes/lib/types' import colors from '@/con/colors' import { ActionIcon, - BackgroundImage, Box, Button, Center, @@ -23,6 +20,9 @@ import { IconDownload } from '@tabler/icons-react' import Link from 'next/link' import { useEffect, useState } from 'react' import { useProxy } from 'valtio/utils' +import PaguTable from './lib/paguTable' +import RealisasiTable from './lib/realisasiTable' +import GrafikRealisasi from './lib/grafikRealisasi' function Apbdes() { const state = useProxy(apbdes) @@ -51,18 +51,17 @@ function Apbdes() { const dataAPBDes = state.findMany.data || [] const years = Array.from( - new Set( - dataAPBDes - .map((item: any) => item?.tahun) - .filter((tahun): tahun is number => typeof tahun === 'number') + new Set( + dataAPBDes + .map((item: any) => item?.tahun) + .filter((tahun): tahun is number => typeof tahun === 'number') + ) ) -) - .sort((a, b) => b - a) - .map(year => ({ - value: year.toString(), - label: `Tahun ${year}`, - })) - + .sort((a, b) => b - a) + .map(year => ({ + value: year.toString(), + label: `Tahun ${year}`, + })) useEffect(() => { if (years.length > 0 && !selectedYear) { @@ -71,7 +70,7 @@ function Apbdes() { }, [years, selectedYear]) const currentApbdes = dataAPBDes.length > 0 - ? transformAPBDesData(dataAPBDes.find(item => item?.tahun?.toString() === selectedYear) || dataAPBDes[0]) + ? dataAPBDes.find((item: any) => item?.tahun?.toString() === selectedYear) || dataAPBDes[0] : null const data = (state.findMany.data || []).slice(0, 3) @@ -131,18 +130,22 @@ function Apbdes() { /> - {/* Progress */} - {currentApbdes ? ( - - ) : ( + {/* Tabel & Grafik - Hanya tampilkan jika ada data */} + {currentApbdes && currentApbdes.items?.length > 0 ? ( + + + + + + ) : currentApbdes ? ( - Tidak ada data APBDes untuk tahun yang dipilih. + Tidak ada data item untuk tahun yang dipilih. - )} + ) : null} - {/* GRID */} + {/* GRID - Card Preview */} {loading ? (
@@ -165,14 +168,18 @@ function Apbdes() { spacing="lg" pb="xl" > - {data.map((v, k) => ( - ( + @@ -185,7 +192,7 @@ function Apbdes() { lh={1.35} lineClamp={2} > - {v.name} + {v.name || `APBDes Tahun ${v.tahun}`} - {v.jumlah} + {v.jumlah || '-'}
@@ -212,7 +219,7 @@ function Apbdes() {
- + ))} )} @@ -220,4 +227,4 @@ function Apbdes() { ) } -export default Apbdes +export default Apbdes \ No newline at end of file diff --git a/src/app/darmasaba/_com/main-page/apbdes/lib/grafikRealisasi.tsx b/src/app/darmasaba/_com/main-page/apbdes/lib/grafikRealisasi.tsx new file mode 100644 index 00000000..00edd607 --- /dev/null +++ b/src/app/darmasaba/_com/main-page/apbdes/lib/grafikRealisasi.tsx @@ -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 ( + + {title} + + Rp {totalRealisasi.toLocaleString('id-ID')} / + Rp {totalAnggaran.toLocaleString('id-ID')} + + + + ); +} + +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 ( + + + GRAFIK REALISASI APBDes {tahun} + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/app/darmasaba/_com/main-page/apbdes/lib/paguTable.tsx b/src/app/darmasaba/_com/main-page/apbdes/lib/paguTable.tsx new file mode 100644 index 00000000..2df04199 --- /dev/null +++ b/src/app/darmasaba/_com/main-page/apbdes/lib/paguTable.tsx @@ -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 ( + <> + + + {title} + + + + {data.map((item: any) => ( + + + {item.kode} - {item.uraian} + + + Rp {item.anggaran.toLocaleString('id-ID')} + + + ))} + + ); +} + +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 ( + + {title} + + + + + Uraian + Anggaran (Rp) + + + +
+
+
+ +
+ + ); +} \ No newline at end of file diff --git a/src/app/darmasaba/_com/main-page/apbdes/lib/realisasiTable.tsx b/src/app/darmasaba/_com/main-page/apbdes/lib/realisasiTable.tsx new file mode 100644 index 00000000..aebb345a --- /dev/null +++ b/src/app/darmasaba/_com/main-page/apbdes/lib/realisasiTable.tsx @@ -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 ( + <> + + + {title} + + + + {data.map((item: any) => ( + + + {item.kode} - {item.uraian} + + + Rp {item.realisasi.toLocaleString('id-ID')} + + + = 100 + ? 'teal' + : item.persentase >= 60 + ? 'yellow' + : 'red' + } + > + {item.persentase.toFixed(2)}% + + + + ))} + + ); +} + +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 ( + + {title} + + + + + Uraian + Realisasi (Rp) + % + + + +
+
+
+ +
+ + ); +} \ No newline at end of file