import { Head, router } from '@inertiajs/react'; import { Button } from '@ui/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@ui/components/ui/card'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@ui/components/ui/select'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@ui/components/ui/table'; import { Download } from 'lucide-react'; import { useMemo, useState } from 'react'; import { FinanceAppLayout } from '@/layouts/finance-app-layout'; interface Department { id: number; name: string; } interface ConsolidatedNode { id: number; code: string; name: string; budget: number; realization: number; sisa: number; ratio_actual: number; ratio_sisa: number; children: ConsolidatedNode[]; } interface Props { reportData: ConsolidatedNode[]; filters: { year: number; month: number; departments: Department[]; }; } const monthOptions = [ { value: 1, label: 'January' }, { value: 2, label: 'February' }, { value: 3, label: 'March' }, { value: 4, label: 'April' }, { value: 5, label: 'May' }, { value: 6, label: 'June' }, { value: 7, label: 'July' }, { value: 8, label: 'August' }, { value: 9, label: 'September' }, { value: 10, label: 'October' }, { value: 11, label: 'November' }, { value: 12, label: 'December' }, ]; const yearOptions = [2024, 2025, 2026, 2027, 2028]; export default function UserCostControlConsolidated({ reportData, filters }: Props) { const [year, setYear] = useState(filters.year.toString()); const [month, setMonth] = useState(filters.month.toString()); const departmentLabel = filters.departments.length > 0 ? filters.departments.map((dep) => dep.name).join(', ') : 'All Departments'; const goToStandard = () => { router.get('/department/finance/reporting/fund-request-service', { year, month, }); }; const goToConsolidated = () => { router.get('/department/finance/reporting/fund-request-service/consolidated', { year, month, }); }; const exportConsolidated = () => { window.location.href = `/department/finance/reporting/fund-request-service/consolidated/export?year=${year}&month=${month}`; }; const flattenedRows = useMemo(() => { const output: Array = []; const walk = (rows: ConsolidatedNode[], depth: number): void => { rows.forEach((row) => { output.push({ ...row, depth }); if (row.children && row.children.length > 0) { walk(row.children, depth + 1); } }); }; walk(reportData, 0); return output; }, [reportData]); const totals = useMemo(() => { return flattenedRows.reduce( (acc, row) => { if (row.depth === 0) { acc.budget += row.budget; acc.realization += row.realization; acc.sisa += row.sisa; } return acc; }, { budget: 0, realization: 0, sisa: 0 }, ); }, [flattenedRows]); const formatCurrency = (value: number): string => { return new Intl.NumberFormat('id-ID').format(value || 0); }; return (

Laporan Varians Antar Divisi — Konsolidasi

Tahun {year} — {departmentLabel}

Bulan

Tahun

Rincian Konsolidasi Anggaran No. Account Keterangan Anggaran Dana Realisasi Dana Sisa Dana Rasio Actual Varians {flattenedRows.length === 0 ? ( Tidak ada data anggaran untuk periode ini. ) : ( flattenedRows.map((row) => ( {row.code} {row.name} {formatCurrency(row.budget)} {formatCurrency(row.realization)} {formatCurrency(row.sisa)} {row.ratio_actual.toFixed(2)}% {row.ratio_sisa.toFixed(2)}% )) )} {flattenedRows.length > 0 ? ( TOTAL {formatCurrency(totals.budget)} {formatCurrency(totals.realization)} {formatCurrency(totals.sisa)} {totals.budget > 0 ? ((totals.realization / totals.budget) * 100).toFixed(2) : '0.00'}% {totals.budget > 0 ? ((totals.sisa / totals.budget) * 100).toFixed(2) : '0.00'}% ) : null}

); }