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'; interface Department { id: number; name: string; } interface ReportRow { account_number: string; description: string; allocated_amount: number; used_amount: number; remaining_amount: number; realization_ratio: number; variance_ratio: number; } interface Props { reportData: { rows: ReportRow[]; summary: { total_allocated: number; total_used: number; total_remaining: number; }; }; 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 UserCostControl({ reportData, filters }: Props) { const [search, setSearch] = useState(''); 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 rows = useMemo(() => { if (!search.trim()) { return reportData.rows; } const keyword = search.toLowerCase(); return reportData.rows.filter( (row) => row.account_number.toLowerCase().includes(keyword) || row.description.toLowerCase().includes(keyword), ); }, [reportData.rows, search]); 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 exportStandard = () => { window.location.href = `/department/finance/reporting/fund-request-service/export?year=${year}&month=${month}`; }; const formatCurrency = (value: number): string => { return new Intl.NumberFormat('id-ID').format(value || 0); }; return (

Laporan Varians Antar Divisi

Tahun {year} — {departmentLabel}

Bulan

Tahun

Rincian Anggaran & Realisasi

setSearch(event.target.value)} className='h-11 rounded-2xl pl-10 text-sm' placeholder='Cari No. Akun atau Keterangan...' />

No. Account Keterangan Anggaran Dana Realisasi Dana Sisa Dana Rasio Actual Varians {rows.length === 0 ? ( Tidak ada data anggaran untuk periode ini. ) : ( rows.map((row) => ( {row.account_number} {row.description} {formatCurrency(row.allocated_amount)} {formatCurrency(row.used_amount)} {formatCurrency(row.remaining_amount)} {row.realization_ratio.toFixed(2)}% {row.variance_ratio.toFixed(2)}% )) )} {rows.length > 0 ? ( TOTAL {formatCurrency(reportData.summary.total_allocated)} {formatCurrency(reportData.summary.total_used)} {formatCurrency(reportData.summary.total_remaining)} {reportData.summary.total_allocated > 0 ? ((reportData.summary.total_used / reportData.summary.total_allocated) * 100).toFixed(2) : '0.00'}% {reportData.summary.total_allocated > 0 ? ((reportData.summary.total_remaining / reportData.summary.total_allocated) * 100).toFixed(2) : '0.00'}% ) : null}

); }