{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "billing-2",
  "description": "A billing invoices card displaying a table of past invoices with invoice number, date, amount, a status badge, and a per-row download link.",
  "dependencies": [
    "@remixicon/react",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "card",
    "checkbox",
    "sonner",
    "table"
  ],
  "files": [
    {
      "path": "registry/blocks/billing/2/billing-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RiDownloadLine } from \"@remixicon/react\"\nimport { toast } from \"sonner\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\nimport { Toaster } from \"@/components/ui/sonner\"\n\ntype InvoiceStatus = \"Paid\" | \"Pending\" | \"Failed\"\n\nconst INVOICES: {\n  id: string\n  date: string\n  amount: string\n  status: InvoiceStatus\n}[] = [\n  {\n    id: \"INV-2026-0047\",\n    date: \"Jun 1, 2026\",\n    amount: \"$149.00\",\n    status: \"Paid\",\n  },\n  {\n    id: \"INV-2026-0031\",\n    date: \"May 1, 2026\",\n    amount: \"$149.00\",\n    status: \"Paid\",\n  },\n  {\n    id: \"INV-2026-0018\",\n    date: \"Apr 1, 2026\",\n    amount: \"$99.00\",\n    status: \"Paid\",\n  },\n  {\n    id: \"INV-2026-0009\",\n    date: \"Mar 1, 2026\",\n    amount: \"$99.00\",\n    status: \"Failed\",\n  },\n  {\n    id: \"INV-2026-0004\",\n    date: \"Feb 1, 2026\",\n    amount: \"$99.00\",\n    status: \"Paid\",\n  },\n  {\n    id: \"INV-2025-0089\",\n    date: \"Jan 1, 2026\",\n    amount: \"$49.00\",\n    status: \"Pending\",\n  },\n  {\n    id: \"INV-2025-0074\",\n    date: \"Dec 1, 2025\",\n    amount: \"$49.00\",\n    status: \"Paid\",\n  },\n]\n\nconst STATUS_VARIANT: Record<\n  InvoiceStatus,\n  \"default\" | \"secondary\" | \"destructive\" | \"outline\"\n> = {\n  Paid: \"secondary\",\n  Pending: \"outline\",\n  Failed: \"destructive\",\n}\n\nexport default function BillingBlock() {\n  const [selected, setSelected] = React.useState<Record<string, boolean>>({})\n\n  const selectedIds = INVOICES.filter((i) => selected[i.id]).map((i) => i.id)\n  const allSelected = selectedIds.length === INVOICES.length\n  const someSelected = selectedIds.length > 0 && !allSelected\n\n  function toggleAll(checked: boolean) {\n    setSelected(\n      checked ? Object.fromEntries(INVOICES.map((i) => [i.id, true])) : {}\n    )\n  }\n\n  function handleDownload(id: string) {\n    toast.success(\"Invoice downloaded\", {\n      description: `${id} has been saved to your device.`,\n    })\n  }\n\n  function handleBulkDownload() {\n    toast.success(\n      `Downloading ${selectedIds.length} ${\n        selectedIds.length === 1 ? \"invoice\" : \"invoices\"\n      }`,\n      { description: \"Your files are being prepared.\" }\n    )\n  }\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-12 text-foreground\">\n      <Card className=\"w-full max-w-2xl\">\n        <CardHeader>\n          <CardTitle>Invoices</CardTitle>\n          <CardDescription>\n            Download or review past invoices for your Acme workspace.\n          </CardDescription>\n          <CardAction>\n            {selectedIds.length > 0 ? (\n              <Button size=\"sm\" variant=\"outline\" onClick={handleBulkDownload}>\n                <RiDownloadLine data-icon=\"inline-start\" />\n                Download ({selectedIds.length})\n              </Button>\n            ) : (\n              <span className=\"text-sm text-muted-foreground\">\n                <span className=\"font-medium text-foreground\">\n                  {INVOICES.length}\n                </span>{\" \"}\n                Invoices\n              </span>\n            )}\n          </CardAction>\n        </CardHeader>\n\n        <CardContent className=\"p-0\">\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead className=\"w-10 pl-4\">\n                  <Checkbox\n                    aria-label=\"Select all invoices\"\n                    checked={allSelected}\n                    indeterminate={someSelected}\n                    onCheckedChange={(checked) => toggleAll(checked)}\n                  />\n                </TableHead>\n                <TableHead>Invoice</TableHead>\n                <TableHead>Date</TableHead>\n                <TableHead>Amount</TableHead>\n                <TableHead>Status</TableHead>\n                <TableHead className=\"pr-4 text-right\">Download</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {INVOICES.map((invoice) => (\n                <TableRow\n                  key={invoice.id}\n                  data-state={selected[invoice.id] ? \"selected\" : undefined}\n                >\n                  <TableCell className=\"pl-4\">\n                    <Checkbox\n                      aria-label={`Select ${invoice.id}`}\n                      checked={!!selected[invoice.id]}\n                      onCheckedChange={(checked) =>\n                        setSelected((prev) => ({\n                          ...prev,\n                          [invoice.id]: checked,\n                        }))\n                      }\n                    />\n                  </TableCell>\n                  <TableCell className=\"font-medium text-foreground\">\n                    {invoice.id}\n                  </TableCell>\n                  <TableCell className=\"text-muted-foreground\">\n                    {invoice.date}\n                  </TableCell>\n                  <TableCell className=\"text-foreground\">\n                    {invoice.amount}\n                  </TableCell>\n                  <TableCell>\n                    <Badge variant={STATUS_VARIANT[invoice.status]}>\n                      {invoice.status}\n                    </Badge>\n                  </TableCell>\n                  <TableCell className=\"pr-4 text-right\">\n                    <Button\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      aria-label={`Download ${invoice.id}`}\n                      onClick={() => handleDownload(invoice.id)}\n                    >\n                      <RiDownloadLine />\n                    </Button>\n                  </TableCell>\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        </CardContent>\n      </Card>\n      <Toaster />\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "75vh",
    "tier": "free"
  },
  "categories": [
    "billing"
  ],
  "type": "registry:block"
}