import { useTranslation } from '@/hooks/use-translation'; import { Head, Link } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; interface InvoiceItem { id: number; description: string; quantity: number; unit_price: number; total: number; } interface Payment { id: number; amount: number; payment_method: string; status: string; paid_at: string; transaction_id: string | null; } interface Invoice { id: number; invoice_number: string; invoice_date: string; due_date: string; status: string; subtotal: number; total: number; amount_paid: number; balance: number; notes: string | null; items: InvoiceItem[]; payments: Payment[]; } interface Member { id: number; first_name: string; last_name: string; email: string; phone: string | null; address_line1: string | null; address_line2: string | null; city: string | null; state: string | null; zip_code: string | null; } interface Props { member: Member; invoice: Invoice; } export default function InvoiceView({ member, invoice }: 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: 'long', day: 'numeric', }); }; const handlePrint = () => { window.print(); }; const getStatusColor = (status: string) => { switch (status) { case 'paid': return 'bg-green-100 text-green-800'; case 'partial': return 'bg-blue-100 text-blue-800'; case 'pending': return 'bg-yellow-100 text-yellow-800'; case 'overdue': return 'bg-red-100 text-red-800'; default: return 'bg-gray-100 text-gray-800'; } }; return (
{/* Action Buttons - Hidden when printing */}
{t('Back to Dashboard')}
{invoice.balance > 0 && ( {t('Pay Now')} )}
{/* Invoice Container */}
{/* Header */}

{t('Invoice')}

#{invoice.invoice_number}

{invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}
{/* Billing Information */}

{t('Bill To')}

{member.first_name} {member.last_name}

{member.address_line1 &&

{member.address_line1}

} {member.address_line2 &&

{member.address_line2}

} {(member.city || member.state || member.zip_code) && (

{member.city}{member.city && member.state ? ', ' : ''}{member.state} {member.zip_code}

)} {member.email &&

{member.email}

} {member.phone &&

{member.phone}

}

{t('Invoice Details')}

Invoice Date: {formatDate(invoice.invoice_date)}
Due Date: {formatDate(invoice.due_date)}
{/* Line Items */}
{invoice.items.map((item) => ( ))}
{t('Description')} {t('Quantity')} {t('Unit Price')} {t('Total')}
{item.description} {item.quantity} {formatCurrency(item.unit_price)} {formatCurrency(item.total)}
{/* Totals */}
{t('Subtotal:')} {formatCurrency(invoice.subtotal)}
{t('Total:')} {formatCurrency(invoice.total)}
{invoice.amount_paid > 0 && (
{t('Amount Paid:')} {formatCurrency(invoice.amount_paid)}
)} {invoice.balance > 0 && (
{t('Balance Due:')} {formatCurrency(invoice.balance)}
)}
{/* Notes */} {invoice.notes && (

{t('Notes')}

{invoice.notes}

)} {/* Payment History */} {invoice.payments && invoice.payments.length > 0 && (

{t('Payment History')}

{invoice.payments.map((payment) => (
{formatCurrency(payment.amount)} via {payment.payment_method.replace('_', ' ')} {payment.transaction_id && ( (#{payment.transaction_id.substring(0, 12)}...) )}
{new Date(payment.paid_at).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', })}
{payment.status}
))}
)}
); }