import { Head, Link, usePage } from '@inertiajs/react'; import { Plus } from 'lucide-react'; import { useMemo, useState } from 'react'; import { show as customerAccount } from '@/actions/App/Http/Controllers/CustomerAccountController'; import { index as customersIndex } from '@/actions/App/Http/Controllers/CustomerController'; import { index as oldDebtsIndex } from '@/actions/App/Http/Controllers/CustomerOldDebtController'; import { CustomerOldDebtDialog } from '@/components/customers/customer-old-debt-dialog'; import { CustomerOldDebtsDataTable } from '@/components/customers/customer-old-debts-data-table'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; import { useLanguage } from '@/contexts/language-context'; import AppLayout from '@/layouts/app-layout'; import { formatMoneyAmountOrDash, formatPurchaseCurrencyLabel, } from '@/lib/dates'; import { dashboard } from '@/routes'; export default function CustomerOldDebtsIndex() { const { t, locale } = useLanguage(); const p = t.customersOldDebtsPage; const salesLabels = t.salesPage; const auth = usePage().props.auth ?? {}; const canCreate = auth.canCreateCustomerPayments === true; const { customer, debts = [], summary, currencies = ['afn', 'usd'], } = usePage().props; const [dialogOpen, setDialogOpen] = useState(false); 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: oldDebtsIndex.url(customer?.id), }, ], [ t.dashboard.breadcrumb, t.customersPage.breadcrumb, customer?.id, customer?.full_name, p.breadcrumb, ], ); return (

{canCreate ? ( ) : null}

{p.listTitle} {p.listSubtitle.replace('{customer}', customer?.full_name ?? '')}

{canCreate ? ( ) : null} {summary ? (

{p.totalBilledLabel}

{formatMoneyAmountOrDash(summary.total_billed, locale)}{' '} {formatPurchaseCurrencyLabel(summary.currency, locale)}

{p.purchaseOutstandingLabel}

{formatMoneyAmountOrDash( summary.purchase_outstanding, locale, )}{' '} {formatPurchaseCurrencyLabel(summary.currency, locale)}

{p.totalOutstandingLabel}

{formatMoneyAmountOrDash(summary.outstanding, locale)}{' '} {formatPurchaseCurrencyLabel(summary.currency, locale)}

) : null}

); }