{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "usage-metering-dashboard",
  "title": "Usage Metering Dashboard",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/usage-metering-dashboard/UsageMeteringDashboard.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Activity, ArrowDownUp, ArrowUpRight, Cpu, Database, TriangleAlert, Zap } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\ninterface UsageEvent {\n  id: string\n  timestamp: string\n  service: string\n  description: string\n  volume: string\n  status: 'warning' | 'normal'\n  statusLabel: string\n}\n\nconst events: UsageEvent[] = [\n  {\n    id: 'evt-1',\n    timestamp: 'Aug 18, 2026 14:22',\n    service: 'API Gateway',\n    description: 'Spike: Batch sync job',\n    volume: '+240,000 reqs',\n    status: 'warning',\n    statusLabel: 'High Spike',\n  },\n  {\n    id: 'evt-2',\n    timestamp: 'Aug 17, 2026 09:15',\n    service: 'Vector Storage',\n    description: 'Index re-indexing & optimization',\n    volume: '+12.4 GB',\n    status: 'normal',\n    statusLabel: 'Normal',\n  },\n  {\n    id: 'evt-3',\n    timestamp: 'Aug 16, 2026 22:40',\n    service: 'Compute Cluster',\n    description: 'Model inference burst job',\n    volume: '+85.0 hrs',\n    status: 'normal',\n    statusLabel: 'Normal',\n  },\n  {\n    id: 'evt-4',\n    timestamp: 'Aug 15, 2026 11:05',\n    service: 'CDN Edge',\n    description: 'Media cache invalidation & egress',\n    volume: '+64.2 GB',\n    status: 'normal',\n    statusLabel: 'Normal',\n  },\n  {\n    id: 'evt-5',\n    timestamp: 'Aug 14, 2026 18:30',\n    service: 'API Gateway',\n    description: 'Webhook delivery retry storm',\n    volume: '+180,000 reqs',\n    status: 'warning',\n    statusLabel: 'High Spike',\n  },\n]\n\nexport function UsageMeteringDashboard({ className }: { className?: string }) {\n  const [autoScaleProtection, setAutoScaleProtection] = React.useState(true)\n  const [alertThreshold, setAlertThreshold] = React.useState('90')\n\n  return (\n    <div data-slot=\"usage-metering-dashboard\" className={cn('mx-auto w-full max-w-6xl space-y-6', className)}>\n      <div className=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n        <div className=\"space-y-1\">\n          <h1 className=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">Usage & Metering</h1>\n          <p className=\"text-muted-foreground text-sm\">\n            Monitor your organization's resource consumption and billing cycle limits.\n          </p>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"sm\" className=\"shrink-0 gap-1.5\">\n            <Zap className=\"fill-warning text-warning size-4\" />\n            <span>Change Plan</span>\n            <ArrowUpRight className=\"text-muted-foreground size-3.5\" />\n          </Button>\n        </div>\n      </div>\n\n      <Card className=\"bg-muted/30 p-4\">\n        <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"space-y-1\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-foreground text-sm font-semibold\">Current Billing Period</span>\n              <Badge wrap variant=\"outline\" className=\"text-xs font-normal\">\n                Scale Plan — $199/mo\n              </Badge>\n            </div>\n            <p className=\"text-muted-foreground text-xs tabular-nums\">\n              Day 18 of 30 · Current period ends Sep 1, 2026 (12 days remaining)\n            </p>\n          </div>\n          <div className=\"w-full space-y-1.5 sm:w-72\">\n            <div className=\"flex items-center justify-between gap-x-2 text-xs\">\n              <span className=\"text-muted-foreground\">Cycle Progress</span>\n              <span className=\"text-foreground font-medium tabular-nums\">60%</span>\n            </div>\n            <Progress value={60} className=\"h-1.5\" />\n          </div>\n        </div>\n      </Card>\n\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <Card className=\"flex flex-col justify-between\">\n          <CardHeader className=\"pb-3\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex min-w-0 items-center gap-2.5\">\n                <div\n                  aria-hidden=\"true\"\n                  className=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                >\n                  <Activity className=\"size-4\" />\n                </div>\n                <CardTitle className=\"truncate text-sm font-medium\">API Requests</CardTitle>\n              </div>\n              <Badge wrap variant=\"warning\" className=\"shrink-0 gap-1 text-xs\">\n                <TriangleAlert className=\"size-3\" />\n                <span>Approaching Limit</span>\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-3\">\n            <div>\n              <div className=\"mb-1 flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5 text-xs\">\n                <span className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">1.84M</span>\n                <span className=\"text-muted-foreground tabular-nums\">/ 2.0M limit</span>\n              </div>\n              <Progress value={92} className=\"[&_[data-slot=progress-indicator]]:bg-warning h-2\" />\n              <div className=\"mt-1.5 flex items-center justify-between gap-x-2 text-xs\">\n                <span className=\"text-muted-foreground tabular-nums\">92% utilized</span>\n                <span className=\"text-warning font-medium tabular-nums\">160K remaining</span>\n              </div>\n            </div>\n            <div className=\"border-border/60 border-t pt-2.5 text-xs\">\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <span className=\"text-muted-foreground\">Projected at month-end:</span>\n                <span className=\"text-foreground font-medium tabular-nums\">2.15M</span>\n              </div>\n              <p className=\"text-warning mt-0.5 text-xs font-medium tabular-nums\">+150K overage (~$15.00)</p>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card className=\"flex flex-col justify-between\">\n          <CardHeader className=\"pb-3\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex min-w-0 items-center gap-2.5\">\n                <div\n                  aria-hidden=\"true\"\n                  className=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                >\n                  <Cpu className=\"size-4\" />\n                </div>\n                <CardTitle className=\"truncate text-sm font-medium\">Compute Hours</CardTitle>\n              </div>\n              <Badge wrap variant=\"success\" className=\"shrink-0 text-xs\">\n                Healthy\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-3\">\n            <div>\n              <div className=\"mb-1 flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5 text-xs\">\n                <span className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">420</span>\n                <span className=\"text-muted-foreground tabular-nums\">/ 1,000 hrs limit</span>\n              </div>\n              <Progress value={42} className=\"[&_[data-slot=progress-indicator]]:bg-success h-2\" />\n              <div className=\"mt-1.5 flex items-center justify-between gap-x-2 text-xs\">\n                <span className=\"text-muted-foreground tabular-nums\">42% utilized</span>\n                <span className=\"text-muted-foreground tabular-nums\">580 hrs remaining</span>\n              </div>\n            </div>\n            <div className=\"border-border/60 border-t pt-2.5 text-xs\">\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <span className=\"text-muted-foreground\">Projected at month-end:</span>\n                <span className=\"text-foreground font-medium tabular-nums\">700 hrs</span>\n              </div>\n              <p className=\"text-muted-foreground mt-0.5 text-xs\">Within allowance (300 hrs headroom)</p>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card className=\"flex flex-col justify-between\">\n          <CardHeader className=\"pb-3\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex min-w-0 items-center gap-2.5\">\n                <div\n                  aria-hidden=\"true\"\n                  className=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                >\n                  <Database className=\"size-4\" />\n                </div>\n                <CardTitle className=\"truncate text-sm font-medium\">Vector Storage</CardTitle>\n              </div>\n              <Badge wrap variant=\"success\" className=\"shrink-0 text-xs\">\n                Healthy\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-3\">\n            <div>\n              <div className=\"mb-1 flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5 text-xs\">\n                <span className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">78 GB</span>\n                <span className=\"text-muted-foreground tabular-nums\">/ 100 GB limit</span>\n              </div>\n              <Progress value={78} className=\"h-2\" />\n              <div className=\"mt-1.5 flex items-center justify-between gap-x-2 text-xs\">\n                <span className=\"text-muted-foreground tabular-nums\">78% utilized</span>\n                <span className=\"text-muted-foreground tabular-nums\">22 GB remaining</span>\n              </div>\n            </div>\n            <div className=\"border-border/60 border-t pt-2.5 text-xs\">\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <span className=\"text-muted-foreground\">Projected at month-end:</span>\n                <span className=\"text-foreground font-medium tabular-nums\">84 GB</span>\n              </div>\n              <p className=\"text-muted-foreground mt-0.5 text-xs\">Within allowance (16 GB headroom)</p>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card className=\"flex flex-col justify-between\">\n          <CardHeader className=\"pb-3\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex min-w-0 items-center gap-2.5\">\n                <div\n                  aria-hidden=\"true\"\n                  className=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                >\n                  <ArrowDownUp className=\"size-4\" />\n                </div>\n                <CardTitle className=\"truncate text-sm font-medium\">Bandwidth / Egress</CardTitle>\n              </div>\n              <Badge wrap variant=\"success\" className=\"shrink-0 text-xs\">\n                Healthy\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-3\">\n            <div>\n              <div className=\"mb-1 flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5 text-xs\">\n                <span className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">412 GB</span>\n                <span className=\"text-muted-foreground tabular-nums\">/ 500 GB limit</span>\n              </div>\n              <Progress value={82.4} className=\"h-2\" />\n              <div className=\"mt-1.5 flex items-center justify-between gap-x-2 text-xs\">\n                <span className=\"text-muted-foreground tabular-nums\">82.4% utilized</span>\n                <span className=\"text-muted-foreground tabular-nums\">88 GB remaining</span>\n              </div>\n            </div>\n            <div className=\"border-border/60 border-t pt-2.5 text-xs\">\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <span className=\"text-muted-foreground\">Projected at month-end:</span>\n                <span className=\"text-foreground font-medium tabular-nums\">485 GB</span>\n              </div>\n              <p className=\"text-muted-foreground mt-0.5 text-xs\">Within allowance (15 GB headroom)</p>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-2\">\n        <Card>\n          <CardHeader>\n            <div className=\"flex items-center justify-between gap-x-2\">\n              <CardTitle>Projected Month-End Cost</CardTitle>\n              <Badge wrap variant=\"warning\" className=\"gap-1 text-xs\">\n                <TriangleAlert className=\"size-3\" />\n                <span>Overage Projected</span>\n              </Badge>\n            </div>\n            <CardDescription>\n              Estimated cycle total factoring base tier and current consumption trajectory.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-4\">\n            <div className=\"border-border bg-muted/40 flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5 rounded-lg border p-4\">\n              <div>\n                <p className=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">Projected Invoice</p>\n                <p className=\"text-foreground text-3xl font-bold tracking-tight tabular-nums\">$214.00</p>\n              </div>\n              <div className=\"text-right\">\n                <span className=\"text-muted-foreground text-xs\">\n                  Base Plan: <strong className=\"text-foreground font-semibold tabular-nums\">$199.00</strong>\n                </span>\n                <p className=\"text-warning text-xs font-semibold tabular-nums\">+$15.00 overage</p>\n              </div>\n            </div>\n\n            <div className=\"space-y-2.5 text-sm\">\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <span className=\"text-foreground\">Scale Plan Base Subscription</span>\n                <span className=\"text-foreground font-medium tabular-nums\">$199.00</span>\n              </div>\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <div className=\"flex items-center gap-1.5\">\n                  <span className=\"text-foreground\">API Requests Overage</span>\n                  <Badge wrap variant=\"outline\" className=\"text-xs font-normal\">\n                    150K @ $0.10 / 1K\n                  </Badge>\n                </div>\n                <span className=\"text-warning font-medium tabular-nums\">+$15.00</span>\n              </div>\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <span className=\"text-muted-foreground\">Compute Hours (1,000 hrs allowance)</span>\n                <span className=\"text-muted-foreground tabular-nums\">$0.00</span>\n              </div>\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <span className=\"text-muted-foreground\">Storage & Egress Bandwidth</span>\n                <span className=\"text-muted-foreground tabular-nums\">$0.00</span>\n              </div>\n            </div>\n\n            <Separator />\n\n            <div className=\"text-muted-foreground flex items-center justify-between gap-x-2 text-xs\">\n              <span>Next scheduled invoice date</span>\n              <span className=\"text-foreground font-medium tabular-nums\">September 1, 2026</span>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardHeader>\n            <CardTitle>Overage Protection & Alerts</CardTitle>\n            <CardDescription>\n              Configure notifications and automated guardrails before limits are breached.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-4\">\n            <div className=\"flex items-start justify-between gap-4\">\n              <div className=\"space-y-1\">\n                <label className=\"text-foreground text-sm leading-none font-medium\">\n                  Auto-scale Overage Protection\n                </label>\n                <p className=\"text-muted-foreground text-xs leading-relaxed\">\n                  Automatically throttle or scale resources to prevent unexpected billing spikes beyond set allowances.\n                </p>\n              </div>\n              <Switch\n                checked={autoScaleProtection}\n                onCheckedChange={setAutoScaleProtection}\n                aria-label=\"Toggle auto-scale overage protection\"\n              />\n            </div>\n\n            <Separator />\n\n            <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n              <div className=\"space-y-1\">\n                <label className=\"text-foreground text-sm leading-none font-medium\">Email Alert Threshold</label>\n                <p className=\"text-muted-foreground text-xs\">\n                  Notify workspace admins when any metric crosses this percentage.\n                </p>\n              </div>\n              <Select value={alertThreshold} onValueChange={setAlertThreshold}>\n                <SelectTrigger className=\"w-full text-xs sm:w-44\" aria-label=\"Email alert threshold\">\n                  <SelectValue placeholder=\"Select threshold\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"80\">80% of limit</SelectItem>\n                  <SelectItem value=\"90\">90% of limit</SelectItem>\n                  <SelectItem value=\"100\">100% of limit</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <Separator />\n\n            <div className=\"bg-muted/40 border-border space-y-1.5 rounded-lg border p-3\">\n              <div className=\"flex items-center justify-between gap-x-2 text-xs\">\n                <span className=\"text-muted-foreground\">Hard Spending Cap</span>\n                <span className=\"text-foreground font-semibold tabular-nums\">$300.00 / mo</span>\n              </div>\n              <div className=\"flex items-center justify-between gap-x-2 text-xs\">\n                <span className=\"text-muted-foreground\">Recipients</span>\n                <span className=\"text-muted-foreground truncate\">billing-alerts@acme.corp</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      <Card>\n        <CardHeader>\n          <div className=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n            <div>\n              <CardTitle>Recent Usage Events</CardTitle>\n              <CardDescription>\n                High-volume consumption spikes and automated resource scaling events this cycle.\n              </CardDescription>\n            </div>\n            <Badge wrap variant=\"outline\" className=\"w-fit text-xs font-normal tabular-nums\">\n              5 events logged\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent className=\"p-0 sm:p-6 sm:pt-0\">\n          <div className=\"overflow-x-auto\">\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Timestamp</TableHead>\n                  <TableHead>Service</TableHead>\n                  <TableHead>Event Description</TableHead>\n                  <TableHead className=\"text-right\">Volume</TableHead>\n                  <TableHead className=\"text-right\">Status</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {events.map((event) => (\n                  <TableRow key={event.id}>\n                    <TableCell className=\"text-muted-foreground text-xs whitespace-nowrap tabular-nums\">\n                      {event.timestamp}\n                    </TableCell>\n                    <TableCell className=\"text-foreground text-xs font-medium whitespace-nowrap\">\n                      {event.service}\n                    </TableCell>\n                    <TableCell className=\"text-muted-foreground text-xs\">{event.description}</TableCell>\n                    <TableCell className=\"text-foreground text-right text-xs font-medium whitespace-nowrap tabular-nums\">\n                      {event.volume}\n                    </TableCell>\n                    <TableCell className=\"text-right\">\n                      <Badge wrap variant={event.status === 'warning' ? 'warning' : 'success'} className=\"text-xs\">\n                        {event.statusLabel}\n                      </Badge>\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/UsageMeteringDashboard.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/progress.json",
    "https://uipkge.dev/r/react/select.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/switch.json",
    "https://uipkge.dev/r/react/table.json"
  ],
  "description": "Real-time consumption metering and overage monitoring dashboard: billing cycle tracking with days remaining, 4 key resource meter cards (API requests, compute hours, vector storage, bandwidth) with color-shifting threshold progress bars and projected month-end usage, projected invoice cost summary with overage breakdown, auto-scale overage protection toggle, email alert threshold selector, and recent usage events audit log.",
  "categories": [
    "finance",
    "billing",
    "app"
  ]
}