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:T2201,'use client' import * as React from 'react' import { CreditCard, Download, FileText, TriangleAlert } from 'lucide-react' import { cn } from '@/lib/utils' import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Progress } from '@/components/ui/progress' import { SectionCard } from '@/components/ui/section-card' import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table' export interface PlanInfo { name: string price: string /** Billing cadence shown after the price, e.g. 'month' or 'year'. */ cadence: string renewalDate: string seatsUsed: number seatsTotal: number } export interface UsageMetric { id: string label: string usedText: string includedText: string /** Percent of the included allowance. Above 100 means overage. */ percent: number /** Shown when percent exceeds 100; falls back to a generic overage note. */ overageNote?: string } export type InvoiceStatus = 'paid' | 'open' | 'past-due' export interface Invoice { id: string number: string period: string amount: string status: InvoiceStatus } export interface BillingUsageCenterProps { plan?: PlanInfo usage?: UsageMetric[] invoices?: Invoice[] className?: string } const defaultPlan: PlanInfo = { name: 'Pro', price: '$49', cadence: 'month', renewalDate: 'September 12, 2026', seatsUsed: 18, seatsTotal: 20, } const defaultUsage: UsageMetric[] = [ { id: 'storage', label: 'Storage', usedText: '8.2 GB', includedText: '10 GB', percent: 82 }, { id: 'bandwidth', label: 'Bandwidth', usedText: '412 GB', includedText: '1 TB', percent: 41 }, { id: 'api-calls', label: 'API calls', usedText: '640K', includedText: '1M', percent: 64 }, ] const defaultInvoices: Invoice[] = [ { id: 'inv-003', number: 'INV-2026-003', period: 'Jul 1 – Jul 31, 2026', amount: '$49.00', status: 'paid' }, { id: 'inv-002', number: 'INV-2026-002', period: 'Jun 1 – Jun 30, 2026', amount: '$49.00', status: 'paid' }, { id: 'inv-001', number: 'INV-2026-001', period: 'May 1 – May 31, 2026', amount: '$49.00', status: 'paid' }, ] const statusMeta: Record = { paid: { label: 'Paid', variant: 'success' }, open: { label: 'Open', variant: 'default' }, 'past-due': { label: 'Past due', variant: 'destructive' }, } // success below 80%, warning as usage approaches the limit, destructive at/over it. function usageBarClass(percent: number): string { if (percent >= 100) return '[&_[data-slot=progress-indicator]]:bg-destructive' if (percent >= 80) return '[&_[data-slot=progress-indicator]]:bg-warning' return '[&_[data-slot=progress-indicator]]:bg-success' } export function BillingUsageCenter({ plan = defaultPlan, usage = defaultUsage, invoices = defaultInvoices, className, }: BillingUsageCenterProps) { const seatsPercent = plan.seatsTotal > 0 ? (plan.seatsUsed / plan.seatsTotal) * 100 : 0 const unpaidInvoices = invoices.filter((invoice) => invoice.status !== 'paid') const pastDueCount = invoices.filter((invoice) => invoice.status === 'past-due').length const unpaidNote = (() => { const count = unpaidInvoices.length const plural = count === 1 ? '' : 's' const pastPart = pastDueCount > 0 ? `, ${pastDueCount} of them past due` : '' return `You have ${count} unpaid invoice${plural}${pastPart}. Update your payment method to avoid service interruption.` })() return (

{plan.name}

{plan.price} / {plan.cadence}

Seats used {plan.seatsUsed} of {plan.seatsTotal}

{Math.max(plan.seatsTotal - plan.seatsUsed, 0)} seats remaining on this plan.

{usage.map((metric) => (

{metric.label} {metric.usedText} of {metric.includedText}

{metric.percent > 100 && (

{metric.overageNote ?? `Over the ${metric.includedText} included in your plan — overage charges apply.`}

)}

))}

{invoices.length > 0 ? (

{unpaidInvoices.length > 0 && ( )}

Invoice Period Amount Status Download {invoices.map((invoice) => ( {invoice.number} {invoice.period} {invoice.amount} {statusMeta[invoice.status].label} ))}

) : (

No invoices yet

Invoices appear here after your first billing cycle.

)}

) } 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/alert.json","https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/progress.json","https://uipkge.dev/r/react/section-card.json","https://uipkge.dev/r/react/table.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/billing-usage-center/BillingUsageCenter.tsx","content":"$64","type":"registry:block","target":"~/components/blocks/BillingUsageCenter.tsx"}],"className":"h-[70svh] min-h-80"}]]}]