From cf7fd8d99790873fc158e8eff222508ec753a83c Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 19 Apr 2026 18:43:25 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/invoices.index.tsx | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/src/routes/invoices.index.tsx b/src/routes/invoices.index.tsx
index a9ff543..37503ea 100644
--- a/src/routes/invoices.index.tsx
+++ b/src/routes/invoices.index.tsx
@@ -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}