import { Head, router, useForm } from '@inertiajs/react'; import { AlertTriangle, ArrowDownLeft, ArrowUpRight, Banknote, Plus, Receipt, Save, Wallet, } from 'lucide-react'; import { useEffect, useState } from 'react'; import { Field } from '@/components/crm/form-field'; import { KpiTile } from '@/components/crm/kpi-tile'; import { NativeSelect } from '@/components/crm/native-select'; import { PageHeader } from '@/components/crm/page-header'; import { StatusLabel } from '@/components/crm/status-badge'; import { DataPagination, FilterBar, FilterField, SearchInput, SegmentedControl, TableCard, } from '@/components/crm/toolbar'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { formatCompactCurrency, formatCurrency, formatDate, } from '@/lib/format'; import { index as invoicesIndex, payment, store, } from '@/routes/finance/invoices'; import type { Paginated } from '@/types'; type Option = { value: string; label: string }; type StatusOption = Option & { color: string }; type InvoiceRow = { id: number; invoice_number: string; direction: Option; status: StatusOption; party: string; customer: { id: number; name: string } | null; supplier: { id: number; name: string } | null; job: { id: number; job_number: string } | null; invoice_date: string | null; due_date: string | null; amount: string; gst_amount: string | null; amount_paid: string; balance: number; is_overdue: boolean; is_partially_paid: boolean; paid_on: string | null; reference: string | null; }; type Filters = { search: string | null; status: string | null; direction: string; scope: string; }; export default function Invoices({ invoices, filters, options, stats, can, }: { invoices: Paginated; filters: Filters; options: { invoiceStatuses: StatusOption[]; directions: Option[]; customers: Array<{ value: number; label: string }>; jobs: Array<{ value: number; label: string }>; }; stats: { receivable: number; receivable_paid: number; overdue: number; payable: number; paid_this_month: number; overdue_count: number; }; can: { manage: boolean }; }) { const [search, setSearch] = useState(filters.search ?? ''); const [showCreate, setShowCreate] = useState(false); const [paying, setPaying] = useState(null); useEffect(() => { setSearch(filters.search ?? ''); }, [filters.search]); const apply = (changes: Partial) => { router.get( invoicesIndex().url, { ...filters, ...changes, search: search || null }, { preserveState: true, preserveScroll: true, replace: true }, ); }; return ( <>
Finance } title="Invoices" description="Money owed to the company and money it owes. Status is worked out from the payments recorded against each invoice, never typed by hand." actions={ can.manage ? ( ) : undefined } />
0 ? 'danger' : 'slate'} />
{ event.preventDefault(); apply({}); }} > apply({ scope })} options={[ { value: 'outstanding', label: 'Outstanding', }, { value: 'overdue', label: 'Overdue' }, { value: 'all', label: 'All' }, ]} /> } > apply({ direction })} options={[ { value: 'customer', label: 'Receivable' }, { value: 'supplier', label: 'Payable' }, { value: 'all', label: 'Both' }, ]} /> apply({ status: event.target.value || null, }) } className="h-9 w-44" > {options.invoiceStatuses.map((status) => ( ))}
Invoice Party Status Dates Amount Balance {can.manage ? : null} {invoices.data.length === 0 ? ( No invoices match these filters. ) : null} {invoices.data.map((invoice) => ( {invoice.invoice_number} {invoice.job ? ( {invoice.job.job_number} ) : null} {invoice.party} {invoice.direction.label} {invoice.status.label} Issued{' '} {formatDate( invoice.invoice_date, )} Due{' '} {formatDate(invoice.due_date)} {formatCurrency( Number(invoice.amount), )} Paid{' '} {formatCurrency( Number(invoice.amount_paid), )} {formatCurrency(invoice.balance)} {can.manage ? ( {invoice.status.value !== 'paid' && invoice.status.value !== 'cancelled' ? ( ) : null} ) : null} ))}
{can.manage ? ( <> setShowCreate(false)} /> {paying ? ( setPaying(null)} /> ) : null} ) : null} ); } function InvoiceDialog({ open, options, onClose, }: { open: boolean; options: { directions: Option[]; customers: Array<{ value: number; label: string }>; jobs: Array<{ value: number; label: string }>; }; onClose: () => void; }) { const form = useForm({ direction: 'customer', status: 'issued', customer_id: '', job_id: '', invoice_date: '', due_date: '', amount: '', gst_amount: '', reference: '', notes: '', }); const submit = () => { form.post(store().url, { preserveScroll: true, onSuccess: () => { form.reset(); onClose(); }, }); }; return ( !state && onClose()}> New invoice Enter the amount including GST. Record payments against it afterwards and the status follows.
{ event.preventDefault(); submit(); }} className="grid gap-3 sm:grid-cols-2" > form.setData('direction', event.target.value) } > {options.directions.map((direction) => ( ))} form.setData('customer_id', event.target.value) } > {options.customers.map((customer) => ( ))} form.setData('job_id', event.target.value) } > {options.jobs.map((job) => ( ))} form.setData('amount', event.target.value) } required /> form.setData('invoice_date', event.target.value) } /> form.setData('due_date', event.target.value) } /> form.setData('reference', event.target.value) } /> form.setData('notes', event.target.value) } />
); } function PaymentDialog({ invoice, onClose, }: { invoice: InvoiceRow; onClose: () => void; }) { const form = useForm({ amount: invoice.balance > 0 ? String(invoice.balance) : '', paid_on: new Date().toISOString().slice(0, 10), reference: '', }); const submit = () => { form.post(payment(invoice.id).url, { preserveScroll: true, onSuccess: onClose, }); }; return ( !state && onClose()}> Record payment {invoice.invoice_number} ยท{' '} {formatCurrency(invoice.balance)} outstanding.
{ event.preventDefault(); submit(); }} className="grid gap-3" > form.setData('amount', event.target.value) } required /> form.setData('paid_on', event.target.value) } required /> form.setData('reference', event.target.value) } />
); }