// title: Invoice history with status badges and outstanding total import { Badge } from "@/registry/default/ui/badge"; import { Button } from "@/registry/default/ui/button"; import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "@/registry/default/ui/table"; const invoices = [ { amount: "$4,800.00", client: "Acme Corp", due: "Feb 5, 2025", id: "INV-2025-001", issued: "Jan 5, 2025", status: "Paid", statusVariant: "success" as const, }, { amount: "$2,150.00", client: "Globex Inc", due: "Feb 12, 2025", id: "INV-2025-002", issued: "Jan 12, 2025", status: "Overdue", statusVariant: "destructive" as const, }, { amount: "$9,320.00", client: "Initech Ltd", due: "Feb 20, 2025", id: "INV-2025-003", issued: "Jan 20, 2025", status: "Pending", statusVariant: "warning" as const, }, { amount: "$1,500.00", client: "Umbrella Co", due: "Feb 27, 2025", id: "INV-2025-004", issued: "Jan 27, 2025", status: "Paid", statusVariant: "success" as const, }, { amount: "$7,200.00", client: "Cyberdyne Systems", due: "Mar 3, 2025", id: "INV-2025-005", issued: "Feb 3, 2025", status: "Draft", statusVariant: "outline" as const, }, ]; export function Pattern() { return (

Invoice Client Issued Due Status Amount {invoices.map((inv) => ( {inv.id} {inv.client} {inv.issued} {inv.due} {inv.status} {inv.amount} ))} Total outstanding $11,470.00

); }