62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T52a6,'use client' import * as React from 'react' import { Activity, ArrowDownUp, ArrowUpRight, Cpu, Database, TriangleAlert, Zap } from 'lucide-react' import { cn } from '@/lib/utils' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Progress } from '@/components/ui/progress' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Separator } from '@/components/ui/separator' import { Switch } from '@/components/ui/switch' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' interface UsageEvent { id: string timestamp: string service: string description: string volume: string status: 'warning' | 'normal' statusLabel: string } const events: UsageEvent[] = [ { id: 'evt-1', timestamp: 'Aug 18, 2026 14:22', service: 'API Gateway', description: 'Spike: Batch sync job', volume: '+240,000 reqs', status: 'warning', statusLabel: 'High Spike', }, { id: 'evt-2', timestamp: 'Aug 17, 2026 09:15', service: 'Vector Storage', description: 'Index re-indexing & optimization', volume: '+12.4 GB', status: 'normal', statusLabel: 'Normal', }, { id: 'evt-3', timestamp: 'Aug 16, 2026 22:40', service: 'Compute Cluster', description: 'Model inference burst job', volume: '+85.0 hrs', status: 'normal', statusLabel: 'Normal', }, { id: 'evt-4', timestamp: 'Aug 15, 2026 11:05', service: 'CDN Edge', description: 'Media cache invalidation & egress', volume: '+64.2 GB', status: 'normal', statusLabel: 'Normal', }, { id: 'evt-5', timestamp: 'Aug 14, 2026 18:30', service: 'API Gateway', description: 'Webhook delivery retry storm', volume: '+180,000 reqs', status: 'warning', statusLabel: 'High Spike', }, ] export function UsageMeteringDashboard({ className }: { className?: string }) { const [autoScaleProtection, setAutoScaleProtection] = React.useState(true) const [alertThreshold, setAlertThreshold] = React.useState('90') return (

Usage & Metering

Monitor your organization's resource consumption and billing cycle limits.

Current Billing Period Scale Plan — $199/mo

Day 18 of 30 · Current period ends Sep 1, 2026 (12 days remaining)

Cycle Progress 60%

API Requests

Approaching Limit

1.84M / 2.0M limit

92% utilized 160K remaining

Projected at month-end: 2.15M

+150K overage (~$15.00)

Compute Hours

Healthy

420 / 1,000 hrs limit

42% utilized 580 hrs remaining

Projected at month-end: 700 hrs

Within allowance (300 hrs headroom)

Vector Storage

Healthy

78 GB / 100 GB limit

78% utilized 22 GB remaining

Projected at month-end: 84 GB

Within allowance (16 GB headroom)

Bandwidth / Egress

Healthy

412 GB / 500 GB limit

82.4% utilized 88 GB remaining

Projected at month-end: 485 GB

Within allowance (15 GB headroom)

Projected Month-End Cost Overage Projected

Estimated cycle total factoring base tier and current consumption trajectory.

Projected Invoice

$214.00

Base Plan: $199.00

+$15.00 overage

Scale Plan Base Subscription $199.00

API Requests Overage 150K @ $0.10 / 1K

+$15.00

Compute Hours (1,000 hrs allowance) $0.00

Storage & Egress Bandwidth $0.00

Next scheduled invoice date September 1, 2026

Overage Protection & Alerts Configure notifications and automated guardrails before limits are breached.

Auto-scale Overage Protection

Automatically throttle or scale resources to prevent unexpected billing spikes beyond set allowances.

Email Alert Threshold

Notify workspace admins when any metric crosses this percentage.

Hard Spending Cap $300.00 / mo

Recipients billing-alerts@acme.corp

Recent Usage Events High-volume consumption spikes and automated resource scaling events this cycle.

5 events logged

Timestamp Service Event Description Volume Status {events.map((event) => ( {event.timestamp} {event.service} {event.description} {event.volume} {event.statusLabel} ))}

) } 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","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"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/usage-metering-dashboard/UsageMeteringDashboard.tsx","content":"$64","type":"registry:block","target":"~/components/blocks/UsageMeteringDashboard.tsx"}],"className":"h-[70svh] min-h-80"}]]}]