{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "invoice-detail",
  "type": "registry:ui",
  "title": "Invoice detail",
  "description": "An invoice card with the number, date, a paid, open or void status badge, itemized line amounts and a bold total row. Built with React for billing pages.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/status-badge.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/invoice-detail.tsx",
      "type": "registry:ui",
      "target": "components/ui/invoice-detail.tsx",
      "content": "\"use client\"\nimport { cn } from \"@/lib/utils\"\nimport { StatusBadge } from \"@/components/ui/status-badge\"\n\n/** One invoice as a card: number, date and status on top, line items below, total at the foot. */\ntype InvoiceLine = { label: string; amount: string }\n\nconst SAMPLE_LINES: InvoiceLine[] = [\n  { label: \"Growth plan, 10 seats × $89\", amount: \"$890.00\" },\n  { label: \"Additional seats (4)\", amount: \"$356.00\" },\n  { label: \"Payments processing, September\", amount: \"$11,034.00\" },\n  { label: \"Multi-currency add-on\", amount: \"$120.00\" },\n  { label: \"Tax (VAT 0%, reverse charge)\", amount: \"$0.00\" },\n]\n\ntype InvoiceDetailProps = {\n  /** Invoice number. */\n  id?: string\n  /** Issue date, already formatted. */\n  date?: string\n  /** Invoice total, already formatted. */\n  amount?: string\n  status?: \"paid\" | \"open\" | \"void\"\n  /** Line items. Defaults to a Northwind invoice from Lumen. */\n  lines?: InvoiceLine[]\n  className?: string\n}\n\nfunction InvoiceDetail({\n  id = \"INV-2041\",\n  date = \"Issued Sep 24, 2026 · Due Oct 8, 2026\",\n  amount = \"$12,400.00\",\n  status = \"open\",\n  lines = SAMPLE_LINES,\n  className,\n}: InvoiceDetailProps) {\n  return (\n    <div data-slot=\"invoice-detail\" className={cn(\"w-full max-w-md rounded-xl border border-border p-4\", className)}>\n      <div className=\"flex items-start justify-between gap-3\">\n        <div>\n          <h3 className=\"text-sm font-medium text-fg\">{id}</h3>\n          <p className=\"text-xs text-fg-muted\">{date}</p>\n        </div>\n        <StatusBadge tone={status === \"paid\" ? \"success\" : status === \"void\" ? \"neutral\" : \"warning\"}>{status}</StatusBadge>\n      </div>\n      <ul className=\"mt-4 space-y-2 text-sm\">\n        {lines.map((l) => (\n          <li key={l.label} className=\"flex justify-between gap-4\">\n            <span className=\"text-fg-muted\">{l.label}</span>\n            <span className=\"tabular-nums\">{l.amount}</span>\n          </li>\n        ))}\n      </ul>\n      <div className=\"mt-3 flex justify-between border-t border-border pt-3 text-sm font-medium\">\n        <span>Total</span>\n        <span className=\"tabular-nums\">{amount}</span>\n      </div>\n    </div>\n  )\n}\nexport { InvoiceDetail }\nexport type { InvoiceDetailProps, InvoiceLine }\n"
    }
  ]
}