"use client"; import React, { useState, useMemo } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Download, Trash2, Archive, CheckCircle, X, FileText, CheckSquare, Square, MinusSquare, Loader2 } from "lucide-react"; // --- Mock Data --- type Invoice = { id: string; client: string; email: string; amount: number; status: "Paid" | "Pending" | "Overdue"; date: string; }; const initialData: Invoice[] = [ { id: "INV-2026-001", client: "Acme Corporation", email: "billing@acme.corp", amount: 4500.00, status: "Paid", date: "Oct 24, 2026" }, { id: "INV-2026-002", client: "Globex Dynamics", email: "finance@globex.io", amount: 1250.50, status: "Pending", date: "Oct 22, 2026" }, { id: "INV-2026-003", client: "Soylent Corp", email: "accounts@soylent.com", amount: 8900.00, status: "Overdue", date: "Oct 15, 2026" }, { id: "INV-2026-004", client: "Initech", email: "lumbergh@initech.com", amount: 350.00, status: "Pending", date: "Oct 28, 2026" }, { id: "INV-2026-005", client: "Massive Dynamic", email: "ap@massivedynamic.com", amount: 12000.00, status: "Paid", date: "Oct 10, 2026" }, { id: "INV-2026-006", client: "Umbrella Corp", email: "payments@umbrella.net", amount: 2450.00, status: "Pending", date: "Oct 29, 2026" }, ]; export default function ExportBatchActionsTable() { const [invoices, setInvoices] = useState(initialData); const [selectedIds, setSelectedIds] = useState>(new Set()); const [isProcessing, setIsProcessing] = useState(null); const allSelected = selectedIds.size === invoices.length && invoices.length > 0; const someSelected = selectedIds.size > 0 && selectedIds.size < invoices.length; const toggleAll = () => { if (allSelected) { setSelectedIds(new Set()); } else { setSelectedIds(new Set(invoices.map(inv => inv.id))); } }; const toggleRow = (id: string) => { const newSelected = new Set(selectedIds); if (newSelected.has(id)) { newSelected.delete(id); } else { newSelected.add(id); } setSelectedIds(newSelected); }; // --- Batch Actions --- const handleBatchAction = async (action: "export" | "markPaid" | "archive" | "delete") => { setIsProcessing(action); // Simulate network delay for pro-feel await new Promise(resolve => setTimeout(resolve, 800)); if (action === "delete") { setInvoices(prev => prev.filter(inv => !selectedIds.has(inv.id))); setSelectedIds(new Set()); } else if (action === "markPaid") { setInvoices(prev => prev.map(inv => selectedIds.has(inv.id) ? { ...inv, status: "Paid" } : inv )); setSelectedIds(new Set()); } // Export and Archive would have their own logic setIsProcessing(null); }; const getStatusStyle = (status: string) => { switch (status) { case "Paid": return "bg-emerald-50 text-emerald-600 border-emerald-200 dark:bg-emerald-500/10 dark:text-emerald-400 dark:border-emerald-500/20"; case "Pending": return "bg-amber-50 text-amber-600 border-amber-200 dark:bg-amber-500/10 dark:text-amber-400 dark:border-amber-500/20"; case "Overdue": return "bg-rose-50 text-rose-600 border-rose-200 dark:bg-rose-500/10 dark:text-rose-400 dark:border-rose-500/20"; default: return "bg-zinc-50 text-zinc-600 border-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700"; } }; return (

{/* Header */}

Invoice Ledger

Select multiple invoices to perform batch exports, status updates, or deletions.

{/* Table Container */}

{/* --- BATCH ACTION TOOLBAR (Overlay on Header) --- */}

{/* Standard Header */}

Client Info

Invoice ID

Date

Amount & Status

{/* Batch Action Toolbar */} {selectedIds.size > 0 && (

{selectedIds.size} {selectedIds.size === 1 ? "invoice" : "invoices"} selected

)}

{/* Table Body */}

{invoices.length > 0 ? ( invoices.map((invoice) => { const isSelected = selectedIds.has(invoice.id); return ( toggleRow(invoice.id)} className={`flex items-center px-6 py-4 cursor-pointer transition-colors group ${ isSelected ? "bg-indigo-50/50 dark:bg-indigo-500/10" : "hover:bg-zinc-50/80 dark:hover:bg-zinc-900/30" }`} >

{/* Client Info */}

{invoice.client.charAt(0)}

{invoice.client} {invoice.email}

{/* Invoice ID */}

{invoice.id}

{/* Date */}

{invoice.date}

{/* Amount & Status */}

${invoice.amount.toFixed(2)} {invoice.status}

); }) ) : (

No invoices remaining

)}

); }