Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
2026-04-19 18:43:25 +00:00
co-authored by renee-png
parent ff394f6f57
commit cf7fd8d997
+31 -2
View File
@@ -299,9 +299,32 @@ function InvoicesIndex() {
<Card className="border-border/60 overflow-hidden">
<CardContent className="p-0">
{selectedInvoices.size > 0 && (
<div className="flex items-center justify-between gap-2 px-4 py-2 bg-muted/40 border-b">
<span className="text-xs text-muted-foreground">{selectedInvoices.size} selected</span>
<div className="flex items-center gap-2">
<Button variant="outline" size="sm" disabled={working} onClick={() => bulkInvoiceAction("sent")}>
<Send className="h-3.5 w-3.5 mr-1.5" /> Mark sent
</Button>
<Button variant="outline" size="sm" disabled={working} onClick={() => bulkInvoiceAction("void")}>
<Ban className="h-3.5 w-3.5 mr-1.5" /> Mark void
</Button>
<Button variant="outline" size="sm" disabled={working} onClick={() => bulkInvoiceAction("delete")} className="text-destructive hover:text-destructive">
<Trash2 className="h-3.5 w-3.5 mr-1.5" /> Delete
</Button>
<Button variant="ghost" size="sm" onClick={() => setSelectedInvoices(new Set())}>Clear</Button>
</div>
</div>
)}
<table className="w-full text-sm">
<thead className="bg-muted/50 text-xs uppercase tracking-wider text-muted-foreground">
<tr>
<th className="px-3 py-3 w-9">
<Checkbox
checked={filtered.length > 0 && selectedInvoices.size === filtered.length}
onCheckedChange={(c) => setSelectedInvoices(c ? new Set(filtered.map((i) => i.id)) : new Set())}
/>
</th>
<th className="text-left px-4 py-3 font-medium">Invoice #</th>
<th className="text-left px-4 py-3 font-medium">Client</th>
<th className="text-left px-4 py-3 font-medium">Issued</th>
@@ -312,9 +335,9 @@ function InvoicesIndex() {
</tr>
</thead>
<tbody>
{loading && <tr><td colSpan={7} className="text-center py-12 text-muted-foreground">Loading…</td></tr>}
{loading && <tr><td colSpan={8} className="text-center py-12 text-muted-foreground">Loading…</td></tr>}
{!loading && filtered.length === 0 && (
<tr><td colSpan={7} className="text-center py-12 text-muted-foreground">
<tr><td colSpan={8} className="text-center py-12 text-muted-foreground">
<Receipt className="h-8 w-8 mx-auto mb-2 opacity-40" />
No invoices yet. Click <strong>New invoice</strong> to generate one.
</td></tr>
@@ -323,6 +346,12 @@ function InvoicesIndex() {
const balance = Number(i.total) - Number(i.amount_paid);
return (
<tr key={i.id} className="border-t hover:bg-muted/30">
<td className="px-3 py-3" onClick={(e) => e.stopPropagation()}>
<Checkbox
checked={selectedInvoices.has(i.id)}
onCheckedChange={() => setSelectedInvoices((s) => toggleSel(s, i.id))}
/>
</td>
<td className="px-4 py-3">
<Link to="/invoices/$invoiceId" params={{ invoiceId: i.id }} className="font-medium hover:text-primary">
{i.invoice_number}