{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "settings64",
  "title": "Invoice History Table",
  "description": "Billing history table displaying invoices with date, description, amount, payment status badges, and download buttons. Perfect for account billing pages and payment management dashboards.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "table"
  ],
  "files": [
    {
      "path": "registry/settings64/settings64.tsx",
      "content": "\"use client\";\n\nimport {\n  CheckCircle,\n  Clock,\n  CreditCard,\n  Download,\n  FileText,\n  XCircle,\n} from \"lucide-react\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport Link from \"next/link\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Invoice {\n  date: string;\n  amount: string;\n  status: \"paid\" | \"pending\" | \"failed\";\n  description: string;\n  invoiceNumber: string;\n  downloadUrl?: string;\n}\n\ninterface Settings64Props {\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n  heading?: string;\n  description?: string;\n  invoices?: Invoice[];\n  labels?: {\n    date?: string;\n    description?: string;\n    amount?: string;\n    status?: string;\n    paid?: string;\n    pending?: string;\n    failed?: string;\n    download?: string;\n    noInvoices?: string;\n    viewAll?: string;\n  };\n  viewAllUrl?: string;\n  className?: string;\n}\n\nexport const settings64Demo: Settings64Props = {\n  badge: { label: \"Billing\", variant: \"secondary\" },\n  heading: \"Billing History\",\n  description: \"View and download your past invoices and payment history.\",\n  invoices: [\n    {\n      date: \"Jan 1, 2024\",\n      amount: \"$29.00\",\n      status: \"paid\",\n      description: \"Pro Plan - Monthly\",\n      invoiceNumber: \"INV-2024-001\",\n      downloadUrl: \"https://beste.co\",\n    },\n    {\n      date: \"Dec 1, 2023\",\n      amount: \"$29.00\",\n      status: \"paid\",\n      description: \"Pro Plan - Monthly\",\n      invoiceNumber: \"INV-2023-012\",\n      downloadUrl: \"https://beste.co\",\n    },\n    {\n      date: \"Nov 1, 2023\",\n      amount: \"$29.00\",\n      status: \"paid\",\n      description: \"Pro Plan - Monthly\",\n      invoiceNumber: \"INV-2023-011\",\n      downloadUrl: \"https://beste.co\",\n    },\n    {\n      date: \"Oct 1, 2023\",\n      amount: \"$29.00\",\n      status: \"failed\",\n      description: \"Pro Plan - Monthly\",\n      invoiceNumber: \"INV-2023-010\",\n      downloadUrl: \"https://beste.co\",\n    },\n    {\n      date: \"Sep 1, 2023\",\n      amount: \"$29.00\",\n      status: \"paid\",\n      description: \"Pro Plan - Monthly\",\n      invoiceNumber: \"INV-2023-009\",\n      downloadUrl: \"https://beste.co\",\n    },\n  ],\n  labels: {\n    date: \"Date\",\n    description: \"Description\",\n    amount: \"Amount\",\n    status: \"Status\",\n    paid: \"Paid\",\n    pending: \"Pending\",\n    failed: \"Failed\",\n    download: \"Download\",\n    noInvoices: \"No invoices yet\",\n    viewAll: \"View All Invoices\",\n  },\n  viewAllUrl: \"https://beste.co\",\n};\n\nexport function Settings64({\n  badge,\n  heading,\n  description,\n  invoices = [],\n  labels = {},\n  viewAllUrl,\n  className,\n}: Settings64Props) {\n  const {\n    date: dateLabel,\n    description: descLabel,\n    amount: amountLabel,\n    status: statusLabel,\n    paid: paidLabel,\n    pending: pendingLabel,\n    failed: failedLabel,\n    download: downloadLabel,\n    noInvoices: noInvoicesLabel,\n    viewAll: viewAllLabel,\n  } = labels;\n\n  const getStatusBadge = (invoiceStatus: Invoice[\"status\"]) => {\n    switch (invoiceStatus) {\n      case \"paid\":\n        return (\n          <Badge\n            variant=\"outline\"\n            className=\"border-emerald-500/20 bg-emerald-500/10 text-emerald-600 font-normal\"\n          >\n            <CheckCircle className=\"size-3\" />\n            {paidLabel}\n          </Badge>\n        );\n      case \"pending\":\n        return (\n          <Badge\n            variant=\"outline\"\n            className=\"border-amber-500/20 bg-amber-500/10 text-amber-600 font-normal\"\n          >\n            <Clock className=\"size-3\" />\n            {pendingLabel}\n          </Badge>\n        );\n      case \"failed\":\n        return (\n          <Badge\n            variant=\"outline\"\n            className=\"border-rose-500/20 bg-rose-500/10 text-rose-600 font-normal\"\n          >\n            <XCircle className=\"size-3\" />\n            {failedLabel}\n          </Badge>\n        );\n    }\n  };\n\n  return (\n    <section className={cn(\"py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-4xl px-4 md:px-6\">\n        <div className=\"flex flex-col gap-6\">\n          <div className=\"flex flex-col gap-3\">\n            {badge?.label && (\n              <Badge variant={badge.variant} className=\"w-fit\">\n                <CreditCard className=\"mr-1 size-3\" />\n                {badge.label}\n              </Badge>\n            )}\n            {heading && (\n              <h2 className=\"text-2xl font-bold tracking-tight md:text-3xl\">\n                {heading}\n              </h2>\n            )}\n            {description && (\n              <p className=\"text-muted-foreground\">{description}</p>\n            )}\n          </div>\n\n          {invoices.length === 0 ? (\n            <div className=\"flex flex-col items-center gap-3 rounded-lg border bg-card p-8 text-center\">\n              <FileText className=\"size-12 text-muted-foreground\" />\n              <p className=\"text-muted-foreground\">{noInvoicesLabel}</p>\n            </div>\n          ) : (\n            <div className=\"rounded-lg border bg-card\">\n              <Table>\n                <TableHeader>\n                  <TableRow className=\"bg-muted/50\">\n                    <TableHead className=\"px-4\">{dateLabel}</TableHead>\n                    <TableHead className=\"px-4\">{descLabel}</TableHead>\n                    <TableHead className=\"px-4\">{amountLabel}</TableHead>\n                    <TableHead className=\"px-4 text-center\">\n                      {statusLabel}\n                    </TableHead>\n                    <TableHead className=\"px-4 w-12 text-right\">\n                      {downloadLabel}\n                    </TableHead>\n                  </TableRow>\n                </TableHeader>\n                <TableBody>\n                  {invoices.map((invoice, index) => (\n                    <TableRow key={index}>\n                      <TableCell className=\"px-4\">\n                        <div className=\"font-medium\">{invoice.date}</div>\n                        <div className=\"text-xs text-muted-foreground\">\n                          {invoice.invoiceNumber}\n                        </div>\n                      </TableCell>\n                      <TableCell className=\"px-4\">\n                        {invoice.description}\n                      </TableCell>\n                      <TableCell className=\"px-4 font-medium\">\n                        {invoice.amount}\n                      </TableCell>\n                      <TableCell className=\"px-4 text-center\">\n                        {getStatusBadge(invoice.status)}\n                      </TableCell>\n                      <TableCell className=\"px-4 text-right\">\n                        {invoice.downloadUrl ? (\n                          <Button variant=\"ghost\" size=\"icon\" asChild>\n                            <Link href={invoice.downloadUrl}>\n                              <Download className=\"size-4\" />\n                            </Link>\n                          </Button>\n                        ) : (\n                          <Button variant=\"ghost\" size=\"icon\" disabled>\n                            <Download className=\"size-4\" />\n                          </Button>\n                        )}\n                      </TableCell>\n                    </TableRow>\n                  ))}\n                </TableBody>\n              </Table>\n            </div>\n          )}\n\n          {invoices.length > 0 && viewAllUrl && (\n            <div className=\"flex justify-center\">\n              <Button variant=\"outline\" asChild>\n                <Link href={viewAllUrl}>{viewAllLabel}</Link>\n              </Button>\n            </div>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/settings64.tsx"
    }
  ],
  "type": "registry:block"
}