{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "detailed-usage-table",
  "title": "Detailed Usage Table",
  "description": "A detailed usage table component with resource consumption breakdown",
  "registryDependencies": [
    "table",
    "card",
    "badge",
    "utils"
  ],
  "files": [
    {
      "path": "src/registry/billingsdk/detailed-usage-table.tsx",
      "content": "\"use client\";\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface UsageResource {\n  name: string;\n  used: number;\n  limit: number;\n  percentage?: number;\n  unit?: string;\n}\n\nexport interface DetailedUsageTableProps {\n  className?: string;\n  title?: string;\n  description?: string;\n  resources: UsageResource[];\n}\n\nexport function DetailedUsageTable({\n  className,\n  title = \"Detailed Usage\",\n  description,\n  resources,\n}: DetailedUsageTableProps) {\n  const formatNumber = (num: number) => {\n    return new Intl.NumberFormat().format(num);\n  };\n\n  const getPercentageBar = (percentage: number) => {\n    let bgColor = \"bg-emerald-500\";\n    if (percentage >= 90) bgColor = \"bg-destructive\";\n    else if (percentage >= 75) bgColor = \"bg-orange-500\";\n\n    return (\n      <div className=\"flex min-w-[120px] items-center gap-2\">\n        <div className=\"bg-secondary h-2 flex-1 rounded-full\">\n          <div\n            className={cn(\"h-2 rounded-full transition-all\", bgColor)}\n            style={{ width: `${Math.max(0, Math.min(percentage, 100))}%` }}\n          />\n        </div>\n        <span className=\"w-10 text-right text-xs font-medium tabular-nums\">\n          {Math.round(percentage)}%\n        </span>\n      </div>\n    );\n  };\n\n  return (\n    <Card className={cn(\"w-full\", className)}>\n      <CardHeader>\n        <CardTitle>{title}</CardTitle>\n        {description && <CardDescription>{description}</CardDescription>}\n      </CardHeader>\n      <CardContent>\n        <div className=\"overflow-x-auto rounded-md border\">\n          <Table>\n            <TableCaption className=\"sr-only\">\n              Detailed usage of resources\n            </TableCaption>\n            <TableHeader>\n              <TableRow>\n                <TableHead className=\"w-[180px]\">Resource</TableHead>\n                <TableHead className=\"text-right\">Used</TableHead>\n                <TableHead className=\"text-right\">Limit</TableHead>\n                <TableHead className=\"min-w-[160px] text-right\">\n                  Usage\n                </TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              {resources.length === 0 ? (\n                <TableRow>\n                  <TableCell\n                    colSpan={4}\n                    className=\"text-muted-foreground h-24 text-center\"\n                  >\n                    No resources found\n                  </TableCell>\n                </TableRow>\n              ) : (\n                resources.map((resource, index) => {\n                  const percentage =\n                    resource.percentage ??\n                    (resource.limit > 0\n                      ? (resource.used / resource.limit) * 100\n                      : 0);\n\n                  const unit = resource.unit ? ` ${resource.unit}` : \"\";\n\n                  return (\n                    <TableRow key={resource.name || index}>\n                      <TableCell className=\"font-medium\">\n                        {resource.name}\n                      </TableCell>\n                      <TableCell className=\"text-right tabular-nums\">\n                        {formatNumber(resource.used)}\n                        {unit}\n                      </TableCell>\n                      <TableCell className=\"text-muted-foreground text-right tabular-nums\">\n                        {formatNumber(resource.limit)}\n                        {unit}\n                      </TableCell>\n                      <TableCell className=\"text-right\">\n                        {getPercentageBar(percentage)}\n                      </TableCell>\n                    </TableRow>\n                  );\n                })\n              )}\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/billingsdk/detailed-usage-table.tsx"
    },
    {
      "path": "src/registry/billingsdk/demo/detailed-usage-table-demo.tsx",
      "content": "\"use client\";\n\nimport { DetailedUsageTable } from \"@/registry/billingsdk/detailed-usage-table\";\n\nexport function DetailedUsageTableDemo() {\n  return (\n    <DetailedUsageTable\n      title=\"Resource Usage\"\n      description=\"Detailed breakdown of your resource consumption\"\n      resources={[\n        {\n          name: \"API Calls\",\n          used: 12300,\n          limit: 20000,\n          // percentage will be automatically calculated as 61.5%\n          unit: \"calls\",\n        },\n        { name: \"Storage\", used: 850, limit: 1000, percentage: 85, unit: \"GB\" },\n        {\n          name: \"Team Members\",\n          used: 4,\n          limit: 5,\n          // percentage will be automatically calculated as 80%\n          unit: \"users\",\n        },\n        {\n          name: \"Bandwidth\",\n          used: 1500,\n          limit: 2000,\n          percentage: 75,\n          unit: \"GB\",\n        },\n        {\n          name: \"Emails\",\n          used: 8500,\n          limit: 10000,\n          // percentage will be automatically calculated as 85%\n          unit: \"emails\",\n        },\n      ]}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/detailed-usage-table-demo.tsx"
    }
  ],
  "type": "registry:block"
}