Added bulk invoice actions

X-Lovable-Edit-ID: edt-23192266-7125-47de-be2a-a0e6b4c54bad
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/routes/invoices.index.tsx

@@ -10,7 +10,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { supabase } from "@/integrations/supabase/client";
-import { Receipt, Search, FilePlus, Clock, DollarSign, CheckCircle2, Undo2 } from "lucide-react";
+import { Receipt, Search, FilePlus, Clock, DollarSign, CheckCircle2, Undo2, Trash2, Send, Ban } from "lucide-react";
 import { formatCurrency, formatDate, statusBadgeClass } from "@/lib/format";
 import { ensureMarkedInvoicedPlaceholder } from "@/lib/invoice-generation";
 import { useAuth } from "@/lib/auth";
@@ -41,6 +41,7 @@ function InvoicesIndex() {
   const [expFilter, setExpFilter] = useState<UnbilledStatus>("unbilled");
   const [selectedTime, setSelectedTime] = useState<Set<string>>(new Set());
   const [selectedExp, setSelectedExp] = useState<Set<string>>(new Set());
+  const [selectedInvoices, setSelectedInvoices] = useState<Set<string>>(new Set());
   const [working, setWorking] = useState(false);
 
   // Map of placeholder invoice id -> true (placeholder = MARKED-INVOICED-* or IMPORT-PREBILLED-*)
@@ -205,6 +206,47 @@ function InvoicesIndex() {
     }
   };
 
+  const refreshInvoices = async () => {
+    const { data } = await supabase
+      .from("invoices")
+      .select("*, client:clients(id, name), case:cases(id, case_number, title)")
+      .order("created_at", { ascending: false });
+    setInvoices(data ?? []);
+    setPlaceholderIds(new Set(
+      (data ?? [])
+        .filter((i: any) =>
+          typeof i.invoice_number === "string" &&
+          (i.invoice_number.startsWith("MARKED-INVOICED-") || i.invoice_number.startsWith("IMPORT-PREBILLED-"))
+        )
+        .map((i: any) => i.id),
+    ));
+  };
+
+  const bulkInvoiceAction = async (action: "delete" | "sent" | "void") => {
+    if (selectedInvoices.size === 0) { toast.error("Select at least one invoice"); return; }
+    const ids = Array.from(selectedInvoices);
+    const verb = action === "delete" ? "delete" : `mark as ${action}`;
+    if (!confirm(`${verb.charAt(0).toUpperCase() + verb.slice(1)} ${ids.length} invoice(s)?`)) return;
+    setWorking(true);
+    try {
+      if (action === "delete") {
+        const { error } = await supabase.from("invoices").delete().in("id", ids);
+        if (error) throw error;
+        toast.success(`Deleted ${ids.length} invoice(s)`);
+      } else {
+        const { error } = await supabase.from("invoices").update({ status: action }).in("id", ids);
+        if (error) throw error;
+        toast.success(`Marked ${ids.length} invoice(s) as ${action}`);
+      }
+      setSelectedInvoices(new Set());
+      await refreshInvoices();
+    } catch (err: any) {
+      toast.error(err?.message ?? "Bulk action failed");
+    } finally {
+      setWorking(false);
+    }
+  };
+
   return (
     <PageContainer>
       <PageHeader
@@ -257,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>
@@ -270,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>
@@ -281,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}