import { Head, Link, router, usePage } from '@inertiajs/react'; import { Banknote, FileText, HandCoins, Plus } from 'lucide-react'; import { useMemo } from 'react'; import { show as saleShow } from '@/actions/App/Http/Controllers/SaleController'; import { show as customerAccount } from '@/actions/App/Http/Controllers/CustomerAccountController'; import { index as customerLedgerIndex } from '@/actions/App/Http/Controllers/CustomerLedgerReportController'; import { create as paymentsCreate } from '@/actions/App/Http/Controllers/CustomerPaymentController'; import { index as customersIndex } from '@/actions/App/Http/Controllers/CustomerController'; import { CustomerLoanSummaryCard } from '@/components/customers/customer-loan-summary-card'; import { CustomerLoanStatusBadge } from '@/components/customers/customer-loan-status-badge'; import { CustomerPaymentsDataTable } from '@/components/customers/customer-payments-data-table'; import { CustomerPurchasesDataTable } from '@/components/customers/customer-purchases-data-table'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { useLanguage } from '@/contexts/language-context'; import { formatExpenseDateNumericOrDash, formatMoneyAmountOrDash, formatPurchaseCurrencyLabel, } from '@/lib/dates'; import AppLayout from '@/layouts/app-layout'; import { dashboard } from '@/routes'; function parseMoney(value) { const parsed = Number.parseFloat(String(value ?? '0').replace(/,/g, '')); return Number.isFinite(parsed) ? parsed : 0; } export default function CustomerAccount() { const { t, locale } = useLanguage(); const p = t.customerAccountPage; const loanLabels = t.customerLoansPage; const salesLabels = t.salesPage; const ledgerLabels = t.customerLedgerReportPage; const page = usePage(); const auth = page.props.auth ?? {}; const canCreatePayment = auth.canCreateCustomerPayments === true; const canCreateLoan = auth.canCreateCustomerLoans === true; const canRepayLoan = auth.canRepayCustomerLoans === true; const { customer, summary, loanSummary, sales = [], payments = [], loans = [], } = page.props; const summaries = useMemo(() => (summary ? [summary] : []), [summary]); const loanOutstanding = parseMoney(loanSummary?.outstanding); const salesById = useMemo( () => Object.fromEntries(sales.map((sale) => [sale.id, sale])), [sales], ); function openSaleById(saleId) { if (!saleId) { return; } router.visit(saleShow.url(saleId)); } function openSale(sale) { if (sale?.is_old_debt) { return; } openSaleById(sale?.id); } const breadcrumbs = useMemo( () => [ { title: t.dashboard.breadcrumb, href: dashboard() }, { title: t.customersPage.breadcrumb, href: customersIndex() }, { title: customer?.full_name ?? '', href: customerAccount.url(customer?.id), }, { title: p.breadcrumb, href: customerAccount.url(customer?.id), }, ], [ t.dashboard.breadcrumb, t.customersPage.breadcrumb, customer?.id, customer?.full_name, p.breadcrumb, ], ); const loansPageUrl = `/customers/${customer?.id}/loans`; return (

{canCreateLoan ? ( ) : null} {canRepayLoan && loanOutstanding > 0.001 ? ( ) : null} {canCreatePayment ? ( <> ) : null}

{customer?.full_name} {p.accountSubtitle} {summaries.length > 0 || loanSummary ? (

{summaries.map((row) => (

{p.billsSection} —{' '} {formatPurchaseCurrencyLabel(row.currency, locale)}

{p.totalBilled}: {formatMoneyAmountOrDash( row.total_billed, locale, )}
{p.totalPaid}: {formatMoneyAmountOrDash( row.total_paid, locale, )}
{p.purchaseBalance}: {formatMoneyAmountOrDash( row.purchase_outstanding ?? row.outstanding, locale, )}

))} {loanSummary ? (

{p.loansSection}

) : null}

{summaries.map((row) => { const overall = Number( row.outstanding ?? Number(row.purchase_outstanding ?? 0) + Number(loanSummary?.outstanding ?? 0), ); return (

{p.purchaseBalance}: {formatMoneyAmountOrDash( row.purchase_outstanding ?? 0, locale, )}
{p.loanBalance}: {formatMoneyAmountOrDash( row.loan_outstanding ?? loanSummary?.outstanding ?? 0, locale, )}
{p.overallBalance}: {formatMoneyAmountOrDash(overall, locale)}

); })}

) : (

{p.noActivity}

)}

{p.loansSection} {p.loansSectionHint}

{canRepayLoan && loanOutstanding > 0.001 ? ( ) : null}

{loanLabels.colLoanNumber} {loanLabels.colDate} {loanLabels.colAmount} {loanLabels.colOutstanding} {loanLabels.colStatus} {loans.length ? ( loans.map((loan) => ( router.visit(`/customers/loans/${loan.id}`) } > {loan.loan_number} {formatExpenseDateNumericOrDash(loan.loan_date)} {loan.amount_afn} {loanLabels.currencyLabel} {loan.due_amount_afn} {loanLabels.currencyLabel} )) ) : ( {p.noLoans} )}

{p.billsSection} {p.billsSectionHint} {p.paymentsSection} {p.paymentsSectionHint} openSaleById(salesById[saleId]?.id ?? saleId) } searchInputId="customer-account-payments-search" pageSizeInputId="customer-account-payments-page-size" />

); }