import { Head, router } from '@inertiajs/react'; import { Button } from '@ui/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@ui/components/ui/card'; import { Input } from '@ui/components/ui/input'; 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, Search } from 'lucide-react'; import { useMemo, useState } from 'react'; import { FinanceAppLayout } from '@/layouts/finance-app-layout'; import { useAppText } from '@/lib/app-text'; interface ReportColumn { key: string; company_name: string; department_name: string; branch_name: string; } interface ReportRow { coa_id: number; account_number: string; description: string; values: Record; total_remaining: number; } interface ReportingIndexProps { reportData: { columns: ReportColumn[]; rows: ReportRow[]; }; filters: { year: number; }; } export default function BudgetVarianceReport({ reportData, filters }: ReportingIndexProps) { const { t } = useAppText(); const [selectedYear, setSelectedYear] = useState(filters.year.toString()); const [searchQuery, setSearchQuery] = useState(''); const handleYearChange = (value: string) => { setSelectedYear(value); router.get( '/department/finance/reporting/budget-variance', { year: value }, { preserveState: true } ); }; const formatCurrency = (value: number) => { return new Intl.NumberFormat('id-ID').format(value); }; // Calculate Totals per Column const columnTotals = useMemo(() => { const totals: Record = {}; reportData.columns.forEach(col => { totals[col.key] = reportData.rows.reduce((sum, row) => sum + (row.values[col.key] || 0), 0); }); return totals; }, [reportData]); // Group columns by Company -> Department (preserving order) const companyGroups = useMemo(() => { const groups: Array<{ name: string; departments: Array<{ name: string; columns: ReportColumn[]; }>; }> = []; reportData.columns.forEach(col => { let company = groups.find(g => g.name === col.company_name); if (!company) { company = { name: col.company_name, departments: [] }; groups.push(company); } let dept = company.departments.find(d => d.name === col.department_name); if (!dept) { dept = { name: col.department_name, columns: [] }; company.departments.push(dept); } dept.columns.push(col); }); return groups; }, [reportData.columns]); const filteredRows = useMemo(() => { if (!searchQuery) { return reportData.rows; } return reportData.rows.filter(row => row.account_number.toLowerCase().includes(searchQuery.toLowerCase()) || row.description.toLowerCase().includes(searchQuery.toLowerCase()) ); }, [reportData.rows, searchQuery]); const exportToExcel = () => { // Implement simple client-side CSV export or request server-side console.log("Exporting..."); // Placeholder }; return (

{t('reporting.budget_variance_title')}

{t('reporting.budget_variance_subtitle', { year: filters.year })}

{t('reporting.label_year')}

{t('reporting.budget_variance_card_title')}

setSearchQuery(e.target.value)} className="h-11 rounded-2xl pl-10 text-sm" />

{/* Company Headers */} {t('reporting.col_account_number')} {t('reporting.col_description')} {companyGroups.map((company) => { const totalCols = company.departments.reduce((sum, dept) => sum + dept.columns.length, 0); return ( {company.name.toUpperCase()} ) })} {/* Department Headers */} {companyGroups.map((company) => ( company.departments.map((dept) => ( {dept.name.toUpperCase()} )) ))} {/* Branch Headers */} {companyGroups.map((company) => ( company.departments.map((dept) => ( dept.columns.map(col => ( {col.branch_name.toUpperCase()} )) )) ))} {filteredRows.length === 0 ? ( {t('reporting.empty_message')} ) : ( filteredRows.map((row, index) => ( {row.account_number} {row.description} {/* Values cells */} {reportData.columns.map(col => { const val = row.values[col.key] || 0; return ( {val !== 0 ? formatCurrency(val) : '-'} ); })} )) )} {/* Footer Row (Totals) */} {filteredRows.length > 0 && ( {t('reporting.row_total')} {reportData.columns.map(col => ( {formatCurrency(columnTotals[col.key] || 0)} ))} )}

); }