{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "invoice-history",
  "title": "Invoice History",
  "description": "A read-only invoice history table",
  "dependencies": ["lucide-react"],
  "registryDependencies": ["card", "button", "table", "badge", "utils"],
  "files": [
    {
      "path": "src/registry/billingsdk/invoice-history.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableCaption,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { CalendarDays, Download, ReceiptText } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\n\nexport interface InvoiceItem {\n  id: string;\n  date: string;\n  amount: string;\n  status: \"paid\" | \"refunded\" | \"open\" | \"void\";\n  invoiceUrl?: string;\n  description?: string;\n}\n\ninterface InvoiceHistoryProps {\n  className?: string;\n  title?: string;\n  description?: string;\n  invoices: InvoiceItem[];\n  onDownload?: (invoiceId: string) => void;\n}\n\nexport function InvoiceHistory({\n  className,\n  title = \"Invoice History\",\n  description = \"Your past invoices and payment receipts.\",\n  invoices,\n  onDownload,\n}: InvoiceHistoryProps) {\n  if (!invoices) return null;\n\n  const statusBadge = (status: InvoiceItem[\"status\"]) => {\n    switch (status) {\n      case \"paid\":\n        return (\n          <Badge className=\"border-emerald-700/40 bg-emerald-600 text-emerald-50\">\n            Paid\n          </Badge>\n        );\n      case \"refunded\":\n        return <Badge variant=\"secondary\">Refunded</Badge>;\n      case \"open\":\n        return <Badge variant=\"outline\">Open</Badge>;\n      case \"void\":\n        return <Badge variant=\"outline\">Void</Badge>;\n    }\n  };\n\n  return (\n    <Card className={cn(\"w-full\", className)}>\n      {(title || description) && (\n        <CardHeader className=\"space-y-1\">\n          {title && (\n            <CardTitle className=\"flex items-center gap-2 truncate text-base text-lg leading-tight font-medium sm:gap-3 sm:text-xl\">\n              <ReceiptText className=\"text-primary h-4 w-4\" />\n              {title}\n            </CardTitle>\n          )}\n          {description && (\n            <CardDescription className=\"text-muted-foreground text-sm\">\n              {description}\n            </CardDescription>\n          )}\n        </CardHeader>\n      )}\n      <CardContent>\n        <Table>\n          <TableCaption className=\"sr-only\">\n            List of past invoices with dates, amounts, status and download\n            actions\n          </TableCaption>\n          <TableHeader>\n            <TableRow>\n              <TableHead className=\"w-[120px]\">Date</TableHead>\n              <TableHead>Description</TableHead>\n              <TableHead className=\"text-right\">Amount</TableHead>\n              <TableHead className=\"text-right\">Status</TableHead>\n              <TableHead className=\"text-right\">Action</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {invoices.length === 0 && (\n              <TableRow>\n                <TableCell\n                  colSpan={5}\n                  className=\"text-muted-foreground h-24 text-center\"\n                >\n                  No invoices yet\n                </TableCell>\n              </TableRow>\n            )}\n            {invoices.map((inv) => (\n              <TableRow key={inv.id} className=\"group\">\n                <TableCell className=\"text-muted-foreground\">\n                  <div className=\"inline-flex items-center gap-2\">\n                    <CalendarDays className=\"h-3.5 w-3.5\" />\n                    {inv.date}\n                  </div>\n                </TableCell>\n                <TableCell className=\"max-w-[320px]\">\n                  <div\n                    className=\"truncate\"\n                    title={inv.description || \"Invoice\"}\n                  >\n                    {inv.description || \"Invoice\"}\n                  </div>\n                </TableCell>\n                <TableCell className=\"text-right font-medium\">\n                  {inv.amount}\n                </TableCell>\n                <TableCell className=\"text-right\">\n                  {statusBadge(inv.status)}\n                </TableCell>\n                <TableCell className=\"text-right\">\n                  <Button\n                    variant=\"outline\"\n                    size=\"sm\"\n                    className=\"h-8 text-xs\"\n                    onClick={() =>\n                      inv.invoiceUrl\n                        ? window.open(\n                            inv.invoiceUrl,\n                            \"_blank\",\n                            \"noopener,noreferrer\",\n                          )\n                        : onDownload?.(inv.id)\n                    }\n                    aria-label={`Download invoice ${inv.id}`}\n                  >\n                    <Download className=\"h-3.5 w-3.5\" />\n                    Download\n                  </Button>\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/billingsdk/invoice-history.tsx"
    },
    {
      "path": "src/registry/billingsdk/demo/invoice-history-demo.tsx",
      "content": "\"use client\";\n\nimport {\n  InvoiceHistory,\n  type InvoiceItem,\n} from \"@/components/billingsdk/invoice-history\";\n\nexport default function InvoiceHistoryDemo() {\n  const invoices: InvoiceItem[] = [\n    {\n      id: \"inv_001\",\n      date: \"2025-06-01\",\n      amount: \"$49.00\",\n      status: \"paid\",\n      description: \"Pro plan — May 2025\",\n      invoiceUrl: \"https://example.com/invoices/inv_001.pdf\",\n    },\n    {\n      id: \"inv_002\",\n      date: \"2025-05-01\",\n      amount: \"$49.00\",\n      status: \"paid\",\n      description: \"Pro plan — April 2025\",\n      invoiceUrl: \"https://example.com/invoices/inv_002.pdf\",\n    },\n    {\n      id: \"inv_003\",\n      date: \"2025-04-01\",\n      amount: \"$49.00\",\n      status: \"refunded\",\n      description: \"Pro plan — March 2025\",\n    },\n    {\n      id: \"inv_004\",\n      date: \"2025-03-01\",\n      amount: \"$49.00\",\n      status: \"open\",\n      description: \"Pro plan — February 2025\",\n    },\n  ];\n\n  return (\n    <div className=\"w-full\">\n      <InvoiceHistory invoices={invoices} />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/invoice-history-demo.tsx"
    }
  ],
  "type": "registry:block"
}