{
  "name": "BillingHistoryTable",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/BillingHistoryTable.tsx",
  "chapterTag": "22 Billing",
  "chapter": "22-billing.html",
  "sectionId": "billing-history-table",
  "elName": "Eight invoices — mixed statuses, sorted newest first",
  "demoUrl": "https://brand.magicblocks.ai/components/22-billing#billing-history-table",
  "hasLiveDemo": false,
  "description": "A composed billing-history table — filter chips at the top, sort toggle on\nthe Date column header, body of `<InvoiceRow>` rows below. Wraps the\nexisting `.invoice-row-list` chrome from chapter 24.3, layering a header\nrow + filter / sort controls on top. Drop in with a single `invoices`\ndata prop; the table owns its own filter + sort state.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "BillingHistoryTable",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "BillingHistoryTableProps",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "BillingHistoryTableInvoice",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "BillingHistoryTableFilter",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "BillingHistoryTableSort",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { BillingHistoryTable } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "billing-history-table",
    "billing-history-table-controls",
    "billing-history-table-empty",
    "billing-history-table-filters",
    "billing-history-table-header",
    "billing-history-table-list",
    "billing-history-table-sort",
    "billing-history-table-sort-dir",
    "billing-history-table-sort-label",
    "chip",
    "chip-active",
    "chip-button",
    "chip-count",
    "chip-row",
    "invoice-row-list",
    "row"
  ],
  "examples": {
    "react": "<BillingHistoryTable\n  invoices={[\n    { id: \"i1\", date: \"14 May 2026\", number: \"INV-2026-0142\", amount: \"$292.00\", status: \"paid\",  pdfHref: \"/invoices/INV-2026-0142.pdf\", sortKey: 1747180800 },\n    { id: \"i2\", date: \"14 Apr 2026\", number: \"INV-2026-0118\", amount: \"$292.00\", status: \"paid\",  pdfHref: \"/invoices/INV-2026-0118.pdf\", sortKey: 1744588800 },\n    { id: \"i3\", date: \"14 Mar 2026\", number: \"INV-2026-0094\", amount: \"$32.00\",  status: \"open\",  sortKey: 1742083200 },\n    { id: \"i4\", date: \"14 Feb 2026\", number: \"INV-2026-0070\", amount: \"$292.00\", status: \"void\",  sortKey: 1739491200 },\n  ]}\n  onRowClick={(id) => openInvoice(id)}\n/>",
    "html": "<div class=\"billing-history-table\">\n  <div class=\"billing-history-table-controls\">\n    <div class=\"billing-history-table-filters chip-row\" role=\"group\" aria-label=\"Filter invoices by status\">\n      <button type=\"button\" class=\"chip chip-button chip-active\" aria-pressed=\"true\"><span>All</span><span class=\"chip-count\">8</span></button>\n      <button type=\"button\" class=\"chip chip-button\" aria-pressed=\"false\"><span>Paid</span><span class=\"chip-count\">4</span></button>\n      <button type=\"button\" class=\"chip chip-button\" aria-pressed=\"false\"><span>Open</span><span class=\"chip-count\">2</span></button>\n      <button type=\"button\" class=\"chip chip-button\" aria-pressed=\"false\"><span>Void</span><span class=\"chip-count\">1</span></button>\n    </div>\n    <button type=\"button\" class=\"billing-history-table-sort\" aria-label=\"Sort by date — currently newest first. Activate to sort oldest first.\">\n      <span>Date</span>\n      <span class=\"billing-history-table-sort-dir\" aria-hidden=\"true\">↓</span>\n      <span class=\"billing-history-table-sort-label\">Newest first</span>\n    </button>\n  </div>\n  <div class=\"invoice-row-list billing-history-table-list\">\n    <div class=\"billing-history-table-header\" role=\"row\">\n      <span role=\"columnheader\">Date</span>\n      <span role=\"columnheader\">Invoice</span>\n      <span role=\"columnheader\">Amount</span>\n      <span role=\"columnheader\">Status</span>\n      <span role=\"columnheader\" aria-label=\"Actions\"></span>\n    </div>\n    <div class=\"invoice-row\">\n      <span class=\"invoice-row-date\">14 May 2026</span>\n      <span class=\"invoice-row-number\">INV-2026-0142</span>\n      <span class=\"invoice-row-amount\">$292.00</span>\n      <span class=\"invoice-row-status is-paid\">Paid</span>\n      <a class=\"invoice-row-download\" href=\"/invoices/INV-2026-0142.pdf\" aria-label=\"Download invoice INV-2026-0142 as PDF\"><svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M8 2.75V10.25\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/><path d=\"M4.5 7L8 10.5L11.5 7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3 12.5V13.25H13V12.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></a>\n    </div>\n    <div class=\"invoice-row\">\n      <span class=\"invoice-row-date\">14 Apr 2026</span>\n      <span class=\"invoice-row-number\">INV-2026-0118</span>\n      <span class=\"invoice-row-amount\">$292.00</span>\n      <span class=\"invoice-row-status is-paid\">Paid</span>\n      <a class=\"invoice-row-download\" href=\"/invoices/INV-2026-0118.pdf\" aria-label=\"Download invoice INV-2026-0118 as PDF\"><svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M8 2.75V10.25\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/><path d=\"M4.5 7L8 10.5L11.5 7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3 12.5V13.25H13V12.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></a>\n    </div>\n    <div class=\"invoice-row\">\n      <span class=\"invoice-row-date\">14 Mar 2026</span>\n      <span class=\"invoice-row-number\">INV-2026-0094</span>\n      <span class=\"invoice-row-amount\">$32.00</span>\n      <span class=\"invoice-row-status is-open\">Open</span>\n    </div>\n    <div class=\"invoice-row\">\n      <span class=\"invoice-row-date\">14 Feb 2026</span>\n      <span class=\"invoice-row-number\">INV-2026-0070</span>\n      <span class=\"invoice-row-amount\">$292.00</span>\n      <span class=\"invoice-row-status is-paid\">Paid</span>\n      <a class=\"invoice-row-download\" href=\"/invoices/INV-2026-0070.pdf\" aria-label=\"Download invoice INV-2026-0070 as PDF\"><svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M8 2.75V10.25\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/><path d=\"M4.5 7L8 10.5L11.5 7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3 12.5V13.25H13V12.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></a>\n    </div>\n    <div class=\"invoice-row\">\n      <span class=\"invoice-row-date\">14 Jan 2026</span>\n      <span class=\"invoice-row-number\">INV-2026-0046</span>\n      <span class=\"invoice-row-amount\">$292.00</span>\n      <span class=\"invoice-row-status is-paid\">Paid</span>\n      <a class=\"invoice-row-download\" href=\"/invoices/INV-2026-0046.pdf\" aria-label=\"Download invoice INV-2026-0046 as PDF\"><svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M8 2.75V10.25\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/><path d=\"M4.5 7L8 10.5L11.5 7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M3 12.5V13.25H13V12.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg></a>\n    </div>\n    <div class=\"invoice-row\">\n      <span class=\"invoice-row-date\">14 Dec 2025</span>\n      <span class=\"invoice-row-number\">INV-2025-0922</span>\n      <span class=\"invoice-row-amount\">$292.00</span>\n      <span class=\"invoice-row-status is-uncollectible\">Uncollectible</span>\n    </div>\n    <div class=\"invoice-row\">\n      <span class=\"invoice-row-date\">14 Nov 2025</span>\n      <span class=\"invoice-row-number\">INV-2025-0898</span>\n      <span class=\"invoice-row-amount\">$48.00</span>\n      <span class=\"invoice-row-status is-open\">Open</span>\n    </div>\n    <div class=\"invoice-row\">\n      <span class=\"invoice-row-date\">14 Oct 2025</span>\n      <span class=\"invoice-row-number\">INV-2025-0874</span>\n      <span class=\"invoice-row-amount\">$292.00</span>\n      <span class=\"invoice-row-status is-void\">Void</span>\n    </div>\n  </div>\n</div>",
    "css": ".billing-history-table {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-4);\n}\n\n.billing-history-table-controls {\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--s-3);\n}\n\n.billing-history-table-empty {\n  padding: var(--s-6) var(--s-4);\n  text-align: center;\n  color: var(--fg-soft);\n  font: 400 14px/1.5 var(--f-body);\n  background: var(--bg-paper);\n}\n\n.billing-history-table-filters {\n  /* Inherits `.chip-row` for inline-flex + wrap + gap. The class is here so\n     this control gets its own selector hook for the mobile reflow. */\n  flex-wrap: wrap;\n}\n\n.billing-history-table-header {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto auto;\n  align-items: center;\n  gap: var(--s-3);\n  padding: var(--s-3) var(--s-4);\n  background: var(--bg-sunk);\n  border-bottom: 1px solid var(--hair);\n  font: 600 11px/1.4 var(--f-mono);\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--fg-soft);\n}\n\n.billing-history-table-list {\n  /* `.invoice-row-list` provides the border + radius + overflow + paper\n     background; we just need a hook for the header row below. */\n}\n\n.billing-history-table-sort {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--s-2);\n  appearance: none;\n  background: var(--bg-paper);\n  color: var(--fg);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-pill);\n  padding: 4px 12px;\n  font: 500 12.5px/1.3 var(--f-body);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);\n}\n\n.billing-history-table-sort-dir {\n  font: 600 14px/1 var(--f-mono);\n  color: var(--accent);\n}\n\n.billing-history-table-sort-label {\n  color: var(--fg-soft);\n  font: 400 12px/1.3 var(--f-body);\n}\n\n.chip {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 4px 10px;\n  border-radius: var(--r-pill);\n  font: 500 12.5px/1.3 var(--f-body);\n  background: var(--bg-paper);\n  color: var(--fg);\n  border: 1px solid var(--hair);\n  white-space: nowrap;\n}\n\n.chip-active {\n  background: var(--accent);\n  color: var(--paper);\n  border-color: var(--accent);\n}\n\n.chip-button {\n  appearance: none;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);\n}\n\n.chip-count {\n  display: inline-block;\n  font: 500 11px/1 var(--f-mono);\n  padding: 2px 6px;\n  border-radius: var(--r-pill);\n  background: color-mix(in oklab, currentColor 15%, transparent);\n}\n\n.chip-row { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); }\n\n.invoice-row-list {\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  overflow: hidden;\n  background: var(--bg-paper);\n}\n\n.row { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }"
  }
}