{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "usage-metering-dashboard",
  "title": "Usage Metering Dashboard",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/usage-metering-dashboard/UsageMeteringDashboard.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref, type HTMLAttributes } from 'vue'\nimport { Activity, ArrowDownUp, ArrowUpRight, Cpu, Database, TriangleAlert, Zap } from 'lucide-vue-next'\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 props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst autoScaleProtection = ref(true)\nconst alertThreshold = ref('90')\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</script>\n\n<template>\n  <div data-slot=\"usage-metering-dashboard\" :class=\"cn('mx-auto w-full max-w-6xl space-y-6', props.class)\">\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n      <div class=\"space-y-1\">\n        <h1 class=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">Usage & Metering</h1>\n        <p class=\"text-muted-foreground text-sm\">\n          Monitor your organization's resource consumption and billing cycle limits.\n        </p>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        <Button variant=\"outline\" size=\"sm\" class=\"shrink-0 gap-1.5\">\n          <Zap class=\"fill-warning text-warning size-4\" />\n          <span>Change Plan</span>\n          <ArrowUpRight class=\"text-muted-foreground size-3.5\" />\n        </Button>\n      </div>\n    </div>\n\n    <Card class=\"bg-muted/30 p-4\">\n      <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div class=\"space-y-1\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-foreground text-sm font-semibold\">Current Billing Period</span>\n            <Badge wrap variant=\"outline\" class=\"text-xs font-normal\">Scale Plan — $199/mo</Badge>\n          </div>\n          <p class=\"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 class=\"w-full space-y-1.5 sm:w-72\">\n          <div class=\"flex items-center justify-between gap-x-2 text-xs\">\n            <span class=\"text-muted-foreground\">Cycle Progress</span>\n            <span class=\"text-foreground font-medium tabular-nums\">60%</span>\n          </div>\n          <Progress :model-value=\"60\" class=\"h-1.5\" />\n        </div>\n      </div>\n    </Card>\n\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <Card class=\"flex flex-col justify-between\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex min-w-0 items-center gap-2.5\">\n              <div\n                class=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                aria-hidden=\"true\"\n              >\n                <Activity class=\"size-4\" />\n              </div>\n              <CardTitle class=\"truncate text-sm font-medium\">API Requests</CardTitle>\n            </div>\n            <Badge wrap variant=\"warning\" class=\"shrink-0 gap-1 text-xs\">\n              <TriangleAlert class=\"size-3\" />\n              <span>Approaching Limit</span>\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3\">\n          <div>\n            <div class=\"mb-1 flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5 text-xs\">\n              <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">1.84M</span>\n              <span class=\"text-muted-foreground tabular-nums\">/ 2.0M limit</span>\n            </div>\n            <Progress :model-value=\"92\" class=\"[&_[data-slot=progress-indicator]]:bg-warning h-2\" />\n            <div class=\"mt-1.5 flex items-center justify-between gap-x-2 text-xs\">\n              <span class=\"text-muted-foreground tabular-nums\">92% utilized</span>\n              <span class=\"text-warning font-medium tabular-nums\">160K remaining</span>\n            </div>\n          </div>\n          <div class=\"border-border/60 border-t pt-2.5 text-xs\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <span class=\"text-muted-foreground\">Projected at month-end:</span>\n              <span class=\"text-foreground font-medium tabular-nums\">2.15M</span>\n            </div>\n            <p class=\"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 class=\"flex flex-col justify-between\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex min-w-0 items-center gap-2.5\">\n              <div\n                class=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                aria-hidden=\"true\"\n              >\n                <Cpu class=\"size-4\" />\n              </div>\n              <CardTitle class=\"truncate text-sm font-medium\">Compute Hours</CardTitle>\n            </div>\n            <Badge wrap variant=\"success\" class=\"shrink-0 text-xs\">Healthy</Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3\">\n          <div>\n            <div class=\"mb-1 flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5 text-xs\">\n              <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">420</span>\n              <span class=\"text-muted-foreground tabular-nums\">/ 1,000 hrs limit</span>\n            </div>\n            <Progress :model-value=\"42\" class=\"[&_[data-slot=progress-indicator]]:bg-success h-2\" />\n            <div class=\"mt-1.5 flex items-center justify-between gap-x-2 text-xs\">\n              <span class=\"text-muted-foreground tabular-nums\">42% utilized</span>\n              <span class=\"text-muted-foreground tabular-nums\">580 hrs remaining</span>\n            </div>\n          </div>\n          <div class=\"border-border/60 border-t pt-2.5 text-xs\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <span class=\"text-muted-foreground\">Projected at month-end:</span>\n              <span class=\"text-foreground font-medium tabular-nums\">700 hrs</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Within allowance (300 hrs headroom)</p>\n          </div>\n        </CardContent>\n      </Card>\n\n      <Card class=\"flex flex-col justify-between\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex min-w-0 items-center gap-2.5\">\n              <div\n                class=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                aria-hidden=\"true\"\n              >\n                <Database class=\"size-4\" />\n              </div>\n              <CardTitle class=\"truncate text-sm font-medium\">Vector Storage</CardTitle>\n            </div>\n            <Badge wrap variant=\"success\" class=\"shrink-0 text-xs\">Healthy</Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3\">\n          <div>\n            <div class=\"mb-1 flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5 text-xs\">\n              <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">78 GB</span>\n              <span class=\"text-muted-foreground tabular-nums\">/ 100 GB limit</span>\n            </div>\n            <Progress :model-value=\"78\" class=\"h-2\" />\n            <div class=\"mt-1.5 flex items-center justify-between gap-x-2 text-xs\">\n              <span class=\"text-muted-foreground tabular-nums\">78% utilized</span>\n              <span class=\"text-muted-foreground tabular-nums\">22 GB remaining</span>\n            </div>\n          </div>\n          <div class=\"border-border/60 border-t pt-2.5 text-xs\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <span class=\"text-muted-foreground\">Projected at month-end:</span>\n              <span class=\"text-foreground font-medium tabular-nums\">84 GB</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Within allowance (16 GB headroom)</p>\n          </div>\n        </CardContent>\n      </Card>\n\n      <Card class=\"flex flex-col justify-between\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex min-w-0 items-center gap-2.5\">\n              <div\n                class=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                aria-hidden=\"true\"\n              >\n                <ArrowDownUp class=\"size-4\" />\n              </div>\n              <CardTitle class=\"truncate text-sm font-medium\">Bandwidth / Egress</CardTitle>\n            </div>\n            <Badge wrap variant=\"success\" class=\"shrink-0 text-xs\">Healthy</Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3\">\n          <div>\n            <div class=\"mb-1 flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5 text-xs\">\n              <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">412 GB</span>\n              <span class=\"text-muted-foreground tabular-nums\">/ 500 GB limit</span>\n            </div>\n            <Progress :model-value=\"82.4\" class=\"h-2\" />\n            <div class=\"mt-1.5 flex items-center justify-between gap-x-2 text-xs\">\n              <span class=\"text-muted-foreground tabular-nums\">82.4% utilized</span>\n              <span class=\"text-muted-foreground tabular-nums\">88 GB remaining</span>\n            </div>\n          </div>\n          <div class=\"border-border/60 border-t pt-2.5 text-xs\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <span class=\"text-muted-foreground\">Projected at month-end:</span>\n              <span class=\"text-foreground font-medium tabular-nums\">485 GB</span>\n            </div>\n            <p class=\"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 class=\"grid grid-cols-1 gap-6 lg:grid-cols-2\">\n      <Card>\n        <CardHeader>\n          <div class=\"flex items-center justify-between gap-x-2\">\n            <CardTitle>Projected Month-End Cost</CardTitle>\n            <Badge wrap variant=\"warning\" class=\"gap-1 text-xs\">\n              <TriangleAlert class=\"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 class=\"space-y-4\">\n          <div\n            class=\"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          >\n            <div>\n              <p class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">Projected Invoice</p>\n              <p class=\"text-foreground text-3xl font-bold tracking-tight tabular-nums\">$214.00</p>\n            </div>\n            <div class=\"text-right\">\n              <span class=\"text-muted-foreground text-xs\">\n                Base Plan: <strong class=\"text-foreground font-semibold tabular-nums\">$199.00</strong>\n              </span>\n              <p class=\"text-warning text-xs font-semibold tabular-nums\">+$15.00 overage</p>\n            </div>\n          </div>\n\n          <div class=\"space-y-2.5 text-sm\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <span class=\"text-foreground\">Scale Plan Base Subscription</span>\n              <span class=\"text-foreground font-medium tabular-nums\">$199.00</span>\n            </div>\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <div class=\"flex items-center gap-1.5\">\n                <span class=\"text-foreground\">API Requests Overage</span>\n                <Badge wrap variant=\"outline\" class=\"text-xs font-normal\">150K @ $0.10 / 1K</Badge>\n              </div>\n              <span class=\"text-warning font-medium tabular-nums\">+$15.00</span>\n            </div>\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <span class=\"text-muted-foreground\">Compute Hours (1,000 hrs allowance)</span>\n              <span class=\"text-muted-foreground tabular-nums\">$0.00</span>\n            </div>\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <span class=\"text-muted-foreground\">Storage & Egress Bandwidth</span>\n              <span class=\"text-muted-foreground tabular-nums\">$0.00</span>\n            </div>\n          </div>\n\n          <Separator />\n\n          <div class=\"text-muted-foreground flex items-center justify-between gap-x-2 text-xs\">\n            <span>Next scheduled invoice date</span>\n            <span class=\"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 class=\"space-y-4\">\n          <div class=\"flex items-start justify-between gap-4\">\n            <div class=\"space-y-1\">\n              <label class=\"text-foreground text-sm leading-none font-medium\">Auto-scale Overage Protection</label>\n              <p class=\"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 v-model=\"autoScaleProtection\" aria-label=\"Toggle auto-scale overage protection\" />\n          </div>\n\n          <Separator />\n\n          <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n            <div class=\"space-y-1\">\n              <label class=\"text-foreground text-sm leading-none font-medium\">Email Alert Threshold</label>\n              <p class=\"text-muted-foreground text-xs\">\n                Notify workspace admins when any metric crosses this percentage.\n              </p>\n            </div>\n            <Select v-model=\"alertThreshold\">\n              <SelectTrigger class=\"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 class=\"bg-muted/40 border-border space-y-1.5 rounded-lg border p-3\">\n            <div class=\"flex items-center justify-between gap-x-2 text-xs\">\n              <span class=\"text-muted-foreground\">Hard Spending Cap</span>\n              <span class=\"text-foreground font-semibold tabular-nums\">$300.00 / mo</span>\n            </div>\n            <div class=\"flex items-center justify-between gap-x-2 text-xs\">\n              <span class=\"text-muted-foreground\">Recipients</span>\n              <span class=\"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 class=\"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\" class=\"w-fit text-xs font-normal tabular-nums\">5 events logged</Badge>\n        </div>\n      </CardHeader>\n      <CardContent class=\"p-0 sm:p-6 sm:pt-0\">\n        <div class=\"overflow-x-auto\">\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead>Timestamp</TableHead>\n                <TableHead>Service</TableHead>\n                <TableHead>Event Description</TableHead>\n                <TableHead class=\"text-right\">Volume</TableHead>\n                <TableHead class=\"text-right\">Status</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"event in events\" :key=\"event.id\">\n                <TableCell class=\"text-muted-foreground text-xs whitespace-nowrap tabular-nums\">\n                  {{ event.timestamp }}\n                </TableCell>\n                <TableCell class=\"text-foreground text-xs font-medium whitespace-nowrap\">\n                  {{ event.service }}\n                </TableCell>\n                <TableCell class=\"text-muted-foreground text-xs\">\n                  {{ event.description }}\n                </TableCell>\n                <TableCell class=\"text-foreground text-right text-xs font-medium whitespace-nowrap tabular-nums\">\n                  {{ event.volume }}\n                </TableCell>\n                <TableCell class=\"text-right\">\n                  <Badge\n                    :variant=\"event.status === 'warning' ? 'warning' : 'success'\"\n                    class=\"text-xs whitespace-normal\"\n                  >\n                    {{ event.statusLabel }}\n                  </Badge>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/UsageMeteringDashboard.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/switch.json",
    "https://uipkge.dev/r/vue/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"
  ]
}