import { Head, router, usePage } from '@inertiajs/react'; import { useMemo, useState } from 'react'; import { index as expenseReportsIndex } from '@/actions/App/Http/Controllers/ExpenseReportController'; import { ExpenseDayCategoryTable } from '@/components/expenses/expense-day-tables'; import { ExpenseStatusBadge } from '@/components/expenses/expense-status-badge'; import { expensePaymentLabel, expenseStatusLabel, expenseCategoryLabel } from '@/lib/expense-labels'; import { AppDateInput } from '@/components/ui/app-date-input'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { useLanguage } from '@/contexts/language-context'; import { formatExpenseDateOrDash } from '@/lib/dates'; import AppLayout from '@/layouts/app-layout'; import { cn } from '@/lib/utils'; import { dashboard } from '@/routes'; function buildQuery(filters) { const params = new URLSearchParams(); Object.entries(filters).forEach(([key, value]) => { if (value) params.set(key, String(value)); }); return params.toString(); } export default function ExpenseReportsIndex() { const { t } = useLanguage(); const p = t.expenseReportsPage; const { filters = {}, report = {}, categories = [], paymentMethods = [], statuses = [] } = usePage().props; const [localFilters, setLocalFilters] = useState(filters); const [activeTab, setActiveTab] = useState('category'); const breadcrumbs = useMemo( () => [ { title: t.dashboard.breadcrumb, href: dashboard() }, { title: p.breadcrumb, href: expenseReportsIndex() }, ], [t.dashboard.breadcrumb, p.breadcrumb], ); function apply(extra = {}) { router.get(expenseReportsIndex.url({ query: { ...localFilters, ...extra } }), {}, { preserveScroll: true }); } const query = buildQuery(localFilters); const byCategory = report.by_category ?? []; const byPayment = report.by_payment ?? []; const tabs = [ { id: 'category', label: p.tabCategory }, { id: 'payment', label: p.tabPayment }, { id: 'period', label: p.tabPeriod }, { id: 'details', label: p.tabDetails }, ]; return (

{p.headTitle}

{formatExpenseDateOrDash(filters.date_from)} — {formatExpenseDateOrDash(filters.date_to)}

{p.exportPrint} {p.exportPdf} {p.exportExcel}
{[ [p.totalAfn, report.summary?.total_afn], [p.paidAfn, report.summary?.paid_afn], [p.pendingAfn, report.summary?.pending_afn], [p.records, report.summary?.records], ].map(([label, value]) => ( {label} {value} {label === p.records ? '' : t.expensesPage.currencyLabel} ))}
{p.filters} {p.subtitle}
setLocalFilters((c) => ({ ...c, date_from: value }))} />
setLocalFilters((c) => ({ ...c, date_to: value }))} />
{['today', 'this_week', 'this_month', 'this_year'].map((range) => ( ))}
{tabs.map((tab) => ( ))}
{activeTab === 'category' ? ( byCategory.length === 0 ? (

{p.empty}

) : ( ) ) : null} {activeTab === 'payment' ? ( byPayment.length === 0 ? (

{p.empty}

) : (
{t.expensesPage.colPayment} {p.colCount} {p.share} {t.expensesPage.colAmount} {byPayment.map((row) => ( {expensePaymentLabel(row.payment_method, t.expensesPage)} {row.count} {row.share_percent}% {row.amount_afn} {t.expensesPage.currencyLabel} ))} {p.periodTotal} {report.period_total_afn} {t.expensesPage.currencyLabel}
) ) : null} {activeTab === 'period' ? (
{[ [p.monthly, report.by_month ?? []], [p.yearly, report.by_year ?? []], [p.dailyTrend, report.by_day ?? []], ].map(([title, rows]) => (

{title}

{rows.length === 0 ? (

{p.empty}

) : (
{title} {p.colCount} {t.expensesPage.currencyLabel} {rows.map((row) => ( {row.period_label ?? formatExpenseDateOrDash(row.period)} {row.count} {row.amount_afn} ))}
)}
))}
) : null} {activeTab === 'details' ? ( (report.expenses ?? []).length === 0 ? (

{p.empty}

) : (
{t.expensesPage.colDate} {t.expensesPage.colVoucher} {t.expensesPage.colCategory} {t.expensesPage.colVendor} {t.expensesPage.colAmount} {t.expensesPage.colStatus} {report.expenses.map((row) => ( {formatExpenseDateOrDash(row.expense_date_display ?? row.expense_date)} {row.voucher_number} {expenseCategoryLabel(row.category_slug, row.category_name, t.expensesPage)} {row.vendor_paid_to || '—'} {row.amount_afn} {t.expensesPage.currencyLabel} ))}

{p.periodTotal}: {report.period_total_afn} {t.expensesPage.currencyLabel}

) ) : null}
); }