import { useTranslation } from '@/hooks/use-translation'; import { Head, Link } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; interface Invoice { id: number; invoice_number: string; invoice_date: string; due_date: string; status: string; total: number; amount_paid: number; balance: number; notes: string | null; } interface Member { id: number; first_name: string; last_name: string; } interface Props { member: Member; invoices: Invoice[]; } export default function InvoicesPage({ member, invoices }: Props) { const { t } = useTranslation(); const formatCurrency = (amount: number) => { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', }).format(amount); }; const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', }); }; const getStatusColor = (status: string) => { switch (status) { case 'paid': return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'; case 'partial': return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'; case 'open': return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'; case 'overdue': return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'; default: return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'; } }; const getStatusText = (invoice: Invoice) => { if (invoice.status === 'paid') return 'Paid'; if (invoice.status === 'partial') return `Partial (${formatCurrency(invoice.balance)} due)`; if (invoice.status === 'overdue') return 'Overdue'; return 'Open'; }; return (

{t('My Invoices')}

{t('View and manage all your invoices')}

{t('Back to Dashboard')}
{invoices.length === 0 ? (

{t('No Invoices Found')}

{t("You don't have any invoices yet.")}

) : (
{invoices.map((invoice) => ( ))}
Invoice # {t('Date')} {t('Due Date')} {t('Description')} {t('Amount')} {t('Balance')} {t('Status')} {t('Actions')}
{invoice.invoice_number} {formatDate(invoice.invoice_date)} {formatDate(invoice.due_date)} {invoice.notes || 'Invoice'} {formatCurrency(invoice.total)} {invoice.balance > 0 ? ( {formatCurrency(invoice.balance)} ) : ( {formatCurrency(0)} )} {getStatusText(invoice)}
{t('View')} {invoice.balance > 0 && ( {t('Pay')} )}
)} {/* Summary Cards */} {invoices.length > 0 && (

{t('Total Invoiced')}

{formatCurrency(invoices.reduce((sum, inv) => sum + Number(inv.total), 0))}

{t('Total Paid')}

{formatCurrency(invoices.reduce((sum, inv) => sum + Number(inv.amount_paid), 0))}

{t('Outstanding Balance')}

{formatCurrency(invoices.reduce((sum, inv) => sum + Number(inv.balance), 0))}

)}
); }