npm - @burdenoff/microfe-billing - Versions diffs - 2026.623.2 → 2026.623.3 - Mend

@burdenoff/microfe-billing 2026.623.2 → 2026.623.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/dist/billing/modules/usage/pages/UsagePage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"UsagePage.js","names":[],"sources":["../../../../../src/billing/modules/usage/pages/UsagePage.tsx"],"sourcesContent":["/*\n Usage Module - Enhanced Usage Page\n * Displays usage dashboard with billing account selector, aggregated quotas by subscription,\n * pooled quotas, and lazy-loaded past subscriptions\n /\n\nimport { useState, useMemo, useDeferredValue, useCallback, type FC } from 'react';\nimport {\n ChevronDown,\n ChevronRight,\n AlertTriangle,\n CheckCircle,\n XCircle,\n AlertCircle,\n Layers,\n Package,\n Clock,\n RefreshCw,\n Info,\n ChevronLeft,\n X,\n Search,\n} from 'lucide-react';\nimport {\n useEnhancedUsagePage,\n useBillingAccountsForUsage,\n useQuotaUsageDetails,\n useWorkspaceQuotaHistory,\n useWorkspaceQuotaOverview,\n type AggregatedQuota,\n type SubscriptionWithAggregatedQuotas,\n type WorkspaceQuotaOverviewItem,\n} from '../hooks/useUsage';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { formatNumber, formatRelativeTime, formatDateTime } from '../../../shared/utils/format';\nimport { statusTokens } from '../../../shared/utils/tokens';\nimport { QuotaStatus } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface QuotaDetailModalProps {\n quota: AggregatedQuota;\n onClose: () => void;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction formatQuotaDisplayName(name: string, context?: Record<string, unknown> \| null): string {\n if (context?.displayName && typeof context.displayName === 'string') return context.displayName;\n if (context?.label && typeof context.label === 'string') return context.label;\n const parts = name.split('.');\n const meaningful = parts.length > 1 ? parts.slice(1) : parts;\n return meaningful\n .map((p) => p.replace(/_/g, ' ').replace(/\\b\\w/g, (c) => c.toUpperCase()))\n .join(' ');\n}\n\n// ============================================================================\n// Helper Components\n// ============================================================================\n\nconst StatusIcon: FC<{ status: QuotaStatus; className?: string }> = ({\n status,\n className = 'size-4',\n}) => {\n switch (status) {\n case 'EXHAUSTED':\n return <XCircle className={`${className} ${statusTokens.error.icon}`} />;\n case 'CRITICAL':\n return <AlertTriangle className={`${className} ${statusTokens.error.icon}`} />;\n case 'WARNING':\n return <AlertCircle className={`${className} ${statusTokens.warning.icon}`} />;\n case 'HEALTHY':\n return <CheckCircle className={`${className} ${statusTokens.success.icon}`} />;\n default:\n return <Info className={`${className} ${statusTokens.neutral.icon}`} />;\n }\n};\n\nconst StatusBadge: FC<{ status: QuotaStatus }> = ({ status }) => {\n const colors: Record<QuotaStatus, string> = {\n EXHAUSTED: `${statusTokens.error.bg} ${statusTokens.error.text}`,\n CRITICAL: `${statusTokens.error.bg} ${statusTokens.error.text}`,\n WARNING: `${statusTokens.warning.bg} ${statusTokens.warning.text}`,\n HEALTHY: `${statusTokens.success.bg} ${statusTokens.success.text}`,\n INACTIVE: `${statusTokens.neutral.bg} ${statusTokens.neutral.text}`,\n };\n\n return (\n <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${colors[status]}`}>\n {status}\n </span>\n );\n};\n\nconst ProgressBar: FC<{ percentage: number; status: QuotaStatus }> = ({ percentage, status }) => {\n const clampedPercentage = Math.min(100, Math.max(0, percentage));\n\n const barColors: Record<QuotaStatus, string> = {\n EXHAUSTED: statusTokens.error.dot,\n CRITICAL: statusTokens.error.dot,\n WARNING: statusTokens.warning.dot,\n HEALTHY: statusTokens.success.dot,\n INACTIVE: statusTokens.neutral.dot,\n };\n\n return (\n <div className=\"w-full bg-bg-sunken rounded-full h-2.5 overflow-hidden\">\n <div\n className={`h-full rounded-full transition-all duration-300 ${barColors[status]}`}\n style={{ width: `${clampedPercentage}%` }}\n />\n </div>\n );\n};\n\n// ============================================================================\n// Stat Card Component\n// ============================================================================\n\ntype StatusFilter = 'all' \| 'healthy' \| 'warning' \| 'critical';\n\ninterface StatCardProps {\n label: string;\n value: string \| number;\n icon: React.ReactNode;\n color: 'blue' \| 'emerald' \| 'amber' \| 'red' \| 'gray';\n isActive?: boolean;\n onClick?: () => void;\n}\n\nconst StatCard: FC<StatCardProps> = ({ label, value, icon, color, isActive, onClick }) => {\n // Map color prop to semantic status tokens\n const colorToStatus = {\n blue: statusTokens.info,\n emerald: statusTokens.success,\n amber: statusTokens.warning,\n red: statusTokens.error,\n gray: statusTokens.neutral,\n };\n\n const tokens = colorToStatus[color];\n\n // Icon sits in a status-tinted tile; text/value use neutral surface tokens.\n const iconColors = {\n blue: statusTokens.info.icon,\n emerald: statusTokens.success.icon,\n amber: statusTokens.warning.icon,\n red: statusTokens.error.icon,\n gray: statusTokens.neutral.icon,\n };\n\n return (\n <button\n type=\"button\"\n onClick={onClick}\n aria-pressed={isActive}\n className={`rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5 w-full text-left ${\n onClick\n ? 'cursor-pointer transition-all duration-200 ease-[var(--motion-easing-out)] hover:border-border-strong hover:shadow-elevation-2 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]'\n : ''\n } ${isActive ? 'ring-1 ring-[var(--color-focus-ring)] border-border-strong' : ''}`}\n >\n <div className=\"flex items-start justify-between gap-3\">\n <span className=\"text-sm text-text-secondary\">{label}</span>\n <span\n className={`flex size-9 shrink-0 items-center justify-center rounded-lg ${tokens.bg}`}\n >\n <span className={iconColors[color]}>{icon}</span>\n </span>\n </div>\n <p className=\"mt-2 text-2xl font-semibold tabular-nums text-text-primary\">{value}</p>\n </button>\n );\n};\n\n// ============================================================================\n// Quota Table Components\n// ============================================================================\n\ninterface QuotaTableRowProps {\n quota: AggregatedQuota;\n planLabel?: string;\n onClick: () => void;\n}\n\nconst QuotaTableRow: FC<QuotaTableRowProps> = ({ quota, planLabel, onClick }) => {\n const hasLimit = quota.totalLimit != null && quota.totalLimit > 0 && !quota.noLimit;\n\n return (\n <tr\n onClick={onClick}\n className=\"cursor-pointer hover:bg-bg-sunken transition-colors border-b border-border-subtle last:border-b-0\"\n >\n {/ Quota name /}\n <td className=\"px-4 py-3\">\n <span className=\"text-sm font-medium text-text-link hover:underline capitalize\">\n {quota.displayName \|\| quota.name.replace(/_/g, ' ')}\n </span>\n <span className=\"block text-xs font-mono text-text-muted mt-0.5\">{quota.name}</span>\n {quota.description && (\n <span className=\"block text-xs text-text-secondary mt-0.5 max-w-[220px] truncate\">\n {quota.description}\n </span>\n )}\n {quota.quotaCount > 1 && (\n <span className=\"block text-xs text-text-secondary mt-0.5\">\n {quota.quotaCount} assignments\n </span>\n )}\n </td>\n\n {/ Plan / type /}\n {planLabel !== undefined && (\n <td className=\"px-4 py-3 text-sm text-text-secondary whitespace-nowrap\">{planLabel}</td>\n )}\n\n {/ Current usage: value + inline progress bar /}\n <td className=\"px-4 py-3\">\n <div className=\"space-y-1.5\">\n <span className=\"text-sm text-text-primary tabular-nums\">\n {formatNumber(quota.totalUsed)} / \n {hasLimit ? formatNumber(quota.totalLimit) : '∞'}\n {quota.unit ? ` ${quota.unit}` : ''}\n </span>\n <ProgressBar percentage={hasLimit ? quota.usagePercentage : 0} status={quota.status} />\n </div>\n </td>\n\n {/ Limit /}\n <td className=\"px-4 py-3 text-sm text-text-secondary tabular-nums whitespace-nowrap\">\n {hasLimit ? formatNumber(quota.totalLimit) : '∞'}\n </td>\n\n {/ Status /}\n <td className=\"px-4 py-3\">\n <StatusBadge status={quota.status} />\n </td>\n </tr>\n );\n};\n\ninterface QuotaTableProps {\n quotas: AggregatedQuota[];\n /* When provided, renders a \"Plan\" column with this value per row /\n planLabel?: string;\n showPlanColumn?: boolean;\n onQuotaClick: (quota: AggregatedQuota) => void;\n}\n\nconst QuotaTable: FC<QuotaTableProps> = ({\n quotas,\n planLabel,\n showPlanColumn = true,\n onQuotaClick,\n}) => (\n <div className=\"overflow-x-auto rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1\">\n <table className=\"w-full text-left\">\n <thead>\n <tr className=\"border-b border-border-subtle bg-bg-sunken\">\n <th className=\"px-4 py-2.5 text-xs font-semibold text-text-muted uppercase tracking-wider\">\n Quotas\n </th>\n {showPlanColumn && (\n <th className=\"px-4 py-2.5 text-xs font-semibold text-text-muted uppercase tracking-wider\">\n Plan\n </th>\n )}\n <th className=\"px-4 py-2.5 text-xs font-semibold text-text-muted uppercase tracking-wider\">\n Current Usage\n </th>\n <th className=\"px-4 py-2.5 text-xs font-semibold text-text-muted uppercase tracking-wider\">\n Limit\n </th>\n <th className=\"px-4 py-2.5 text-xs font-semibold text-text-muted uppercase tracking-wider\">\n Status\n </th>\n </tr>\n </thead>\n <tbody>\n {quotas.map((quota) => (\n <QuotaTableRow\n key={quota.name}\n quota={quota}\n planLabel={showPlanColumn ? planLabel : undefined}\n onClick={() => onQuotaClick(quota)}\n />\n ))}\n </tbody>\n </table>\n </div>\n);\n\n// ============================================================================\n// Subscription Section Component\n// ============================================================================\n\ninterface SubscriptionSectionProps {\n subscription: SubscriptionWithAggregatedQuotas;\n onQuotaClick: (quota: AggregatedQuota) => void;\n defaultExpanded?: boolean;\n}\n\nconst SubscriptionSection: FC<SubscriptionSectionProps> = ({\n subscription,\n onQuotaClick,\n defaultExpanded = true,\n}) => {\n const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n\n const statusColors: Record<string, string> = {\n active: `${statusTokens.success.bg} ${statusTokens.success.text}`,\n trialing: `${statusTokens.info.bg} ${statusTokens.info.text}`,\n past_due: `${statusTokens.warning.bg} ${statusTokens.warning.text}`,\n canceled: `${statusTokens.neutral.bg} ${statusTokens.neutral.text}`,\n expired: `${statusTokens.neutral.bg} ${statusTokens.neutral.text}`,\n upgraded: `${statusTokens.primary.bg} ${statusTokens.primary.text}`,\n };\n\n return (\n <div className=\"border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded(!isExpanded)}\n aria-expanded={isExpanded}\n className=\"w-full flex items-center justify-between p-4 hover:bg-bg-sunken transition-colors\"\n >\n <div className=\"flex items-center gap-3\">\n <span className=\"flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)]\">\n <Package className=\"size-5 text-text-link\" />\n </span>\n <div className=\"text-left\">\n <div className=\"flex items-center gap-2\">\n <span className=\"font-medium text-text-primary\">Subscription</span>\n <span\n className={`px-2 py-0.5 text-xs font-medium rounded-full capitalize ${statusColors[subscription.status.toLowerCase()] \|\| statusColors.active}`}\n >\n {subscription.status}\n </span>\n </div>\n <p className=\"text-xs text-text-secondary\">\n {subscription.aggregatedQuotas.length} quota type\n {subscription.aggregatedQuotas.length !== 1 ? 's' : ''}\n </p>\n </div>\n </div>\n {isExpanded ? (\n <ChevronDown className=\"size-5 text-text-muted\" />\n ) : (\n <ChevronRight className=\"size-5 text-text-muted\" />\n )}\n </button>\n\n {isExpanded && subscription.aggregatedQuotas.length > 0 && (\n <div className=\"border-t border-border-subtle\">\n <QuotaTable\n quotas={subscription.aggregatedQuotas}\n planLabel={subscription.planName \|\| subscription.productId \|\| undefined}\n showPlanColumn={!!(subscription.planName \|\| subscription.productId)}\n onQuotaClick={onQuotaClick}\n />\n </div>\n )}\n\n {isExpanded && subscription.aggregatedQuotas.length === 0 && (\n <div className=\"border-t border-border-subtle p-6 text-center\">\n <p className=\"text-sm text-text-secondary\">No quotas assigned to this subscription</p>\n </div>\n )}\n </div>\n );\n};\n\n// ============================================================================\n// Quota Detail Modal Component\n// ============================================================================\n\nconst QuotaDetailModal: FC<QuotaDetailModalProps> = ({ quota, onClose }) => {\n // Cursor stack: [null] = page 1, [null, c1] = page 2, etc.\n const [cursorStack, setCursorStack] = useState<Array<string \| null>>([null]);\n const currentCursor = cursorStack[cursorStack.length - 1] ?? null;\n const currentPage = cursorStack.length;\n const { workspaceId } = useBilling();\n\n // Get usage details for the first quota assignment directly from activity-svc\n const firstAssignmentId = quota.quotaAssignments[0]?.id;\n const { usages, hasNextPage, nextCursor, isLoading } = useQuotaUsageDetails(\n firstAssignmentId,\n 10,\n currentCursor,\n workspaceId\n );\n\n // Snapshot history from quota scraper (activity-svc) — shows live value trend\n const { snapshots, isLoading: isSnapshotsLoading } = useWorkspaceQuotaHistory(\n workspaceId,\n quota.name,\n 24\n );\n\n const handleNext = () => {\n if (nextCursor) setCursorStack((prev) => [...prev, nextCursor]);\n };\n\n const handlePrev = () => {\n if (cursorStack.length > 1) setCursorStack((prev) => prev.slice(0, -1));\n };\n\n return (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n <div className=\"absolute inset-0 bg-overlay-scrim\" onClick={onClose} />\n <div\n className=\"relative bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] max-w-2xl w-full mx-4 max-h-[90vh] overflow-auto\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"quota-detail-title\"\n >\n {/ Header /}\n <div className=\"sticky top-0 bg-bg-elevated border-b border-border-subtle p-4 flex items-center justify-between\">\n <div className=\"flex items-center gap-3\">\n <StatusIcon status={quota.status} className=\"size-5\" />\n <div>\n <h2\n id=\"quota-detail-title\"\n className=\"text-lg font-semibold capitalize text-text-primary\"\n >\n {quota.displayName \|\| quota.name.replace(/_/g, ' ')}\n </h2>\n <p className=\"text-xs font-mono text-text-muted\">{quota.name}</p>\n {quota.description && (\n <p className=\"text-sm text-text-secondary mt-0.5\">{quota.description}</p>\n )}\n <p className=\"text-sm text-text-secondary mt-0.5\">\n {quota.quotaCount} quota assignment{quota.quotaCount !== 1 ? 's' : ''}\n </p>\n </div>\n </div>\n <button\n type=\"button\"\n onClick={onClose}\n className=\"p-1 rounded-button text-text-secondary hover:text-text-primary hover:bg-bg-sunken transition-colors\"\n aria-label=\"Close quota details\"\n >\n <X className=\"size-5\" />\n </button>\n </div>\n\n {/ Summary /}\n <div className=\"p-4 border-b border-border-subtle\">\n <div className=\"mb-4\">\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"text-sm text-text-secondary\">Usage</span>\n <StatusBadge status={quota.status} />\n </div>\n <ProgressBar percentage={quota.usagePercentage} status={quota.status} />\n <div className=\"flex items-center justify-between mt-2 text-sm\">\n <span className=\"font-medium text-text-primary tabular-nums\">\n {formatNumber(quota.totalUsed)} /{' '}\n {quota.totalLimit != null && quota.totalLimit > 0\n ? formatNumber(quota.totalLimit)\n : '∞'}\n {quota.unit && ` ${quota.unit}`}\n </span>\n <span className=\"text-text-secondary\">\n {quota.totalLimit != null && quota.totalLimit > 0\n ? `${Math.round(quota.usagePercentage)}% used`\n : 'Unlimited'}\n </span>\n </div>\n </div>\n\n {/ Quota Assignments Breakdown - sorted by expiry date (earliest first) /}\n {quota.quotaCount > 1 && (\n <div className=\"mt-4\">\n <h3 className=\"text-sm font-medium text-text-primary mb-3\">Quota Breakdown</h3>\n <div className=\"border border-border-subtle rounded-card overflow-hidden divide-y divide-border-subtle\">\n {[...quota.quotaAssignments]\n .sort((a, b) => {\n // Sort by endtime ascending (earliest expiry first)\n const dateA = a.endtime ? new Date(a.endtime).getTime() : Infinity;\n const dateB = b.endtime ? new Date(b.endtime).getTime() : Infinity;\n return dateA - dateB;\n })\n .map((assignment) => {\n const expiryDate = assignment.endtime ? new Date(assignment.endtime) : null;\n const now = new Date();\n const isExpired = expiryDate && expiryDate < now;\n const daysUntilExpiry = expiryDate\n ? Math.ceil((expiryDate.getTime() - now.getTime()) / (24 60 * 60 * 1000))\n : null;\n const isExpiringSoon =\n daysUntilExpiry !== null && daysUntilExpiry > 0 && daysUntilExpiry <= 7;\n\n return (\n <div\n key={assignment.id}\n className={`flex items-center justify-between px-3 py-2.5 ${\n isExpired\n ? 'bg-bg-sunken'\n : isExpiringSoon\n ? statusTokens.warning.bg\n : 'bg-bg-surface'\n }`}\n >\n <div className=\"flex items-center gap-2\">\n {isExpiringSoon && !isExpired && (\n <span\n className={`size-2 rounded-full ${statusTokens.warning.dot} animate-pulse`}\n />\n )}\n <div className=\"flex flex-col\">\n <span\n className={`text-sm ${isExpired ? 'text-text-muted' : 'text-text-primary'}`}\n >\n {expiryDate\n ? expiryDate.toLocaleDateString('en-US', {\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n })\n : 'No expiry'}\n </span>\n <span\n className={`text-xs ${\n isExpired\n ? 'text-status-error-text'\n : isExpiringSoon\n ? statusTokens.warning.text\n : 'text-text-secondary'\n }`}\n >\n {isExpired\n ? 'Expired'\n : daysUntilExpiry !== null\n ? daysUntilExpiry === 0\n ? 'Expires today'\n : daysUntilExpiry === 1\n ? 'Expires tomorrow'\n : `${daysUntilExpiry} days left`\n : 'Never expires'}\n </span>\n </div>\n </div>\n <div className=\"text-right\">\n <span\n className={`text-sm font-semibold tabular-nums ${isExpired ? 'text-text-muted' : 'text-text-primary'}`}\n >\n {formatNumber(assignment.used)}\n <span className=\"text-text-secondary font-normal\">\n {' / '}\n {assignment.limit != null && assignment.limit > 0\n ? formatNumber(assignment.limit)\n : '∞'}\n {assignment.unit && ` ${assignment.unit}`}\n </span>\n </span>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n )}\n </div>\n\n {/* Live Value History (scraper snapshots — at most one per hour) /}\n {(isSnapshotsLoading \|\| snapshots.length > 0) && (\n <div className=\"p-4 border-t border-border-subtle\">\n <h3 className=\"text-sm font-medium text-text-primary mb-3\">Live Value History</h3>\n {isSnapshotsLoading ? (\n <div className=\"space-y-1.5\">\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"h-8 bg-bg-sunken animate-pulse rounded\" />\n ))}\n </div>\n ) : (\n <div className=\"space-y-1.5\">\n {snapshots.map((snap) => (\n <div\n key={snap.id}\n className=\"flex items-center justify-between px-3 py-2 bg-bg-sunken rounded-button\"\n >\n <span className=\"text-xs text-text-secondary\">\n {formatDateTime(snap.snapshotAt)}\n </span>\n <span className=\"text-sm font-medium text-text-primary tabular-nums\">\n {formatNumber(snap.value)}\n {quota.unit && (\n <span className=\"text-xs text-text-secondary ml-1\">{quota.unit}</span>\n )}\n {!snap.noLimit && snap.limit != null && (\n <span className=\"text-xs text-text-secondary ml-1\">\n / {formatNumber(snap.limit)}\n </span>\n )}\n </span>\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n\n {/ Usage History /}\n <div className=\"p-4\">\n <h3 className=\"text-sm font-medium text-text-primary mb-3\">Recent Usage</h3>\n\n {quota.isCollectorBased ? (\n <p className=\"text-sm text-text-secondary text-center py-6\">\n Usage is tracked via system metrics, individual event records are not available for\n this quota.\n </p>\n ) : isLoading ? (\n <div className=\"space-y-2\">\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"h-12 bg-bg-sunken animate-pulse rounded\" />\n ))}\n </div>\n ) : usages.length === 0 ? (\n <p className=\"text-sm text-text-secondary text-center py-6\">No usage records found</p>\n ) : (\n <div className=\"space-y-2\">\n {usages.map((usage) => (\n <div\n key={usage.id}\n className=\"flex items-center justify-between p-3 border border-border-subtle rounded-card\"\n >\n <div className=\"flex-1 min-w-0\">\n <p className=\"text-sm font-medium text-text-primary\">\n {usage.description \|\| 'Usage recorded'}\n </p>\n <p className=\"text-xs text-text-secondary\">\n {formatRelativeTime(usage.timestamp)} • {formatDateTime(usage.timestamp)}\n </p>\n </div>\n <span className=\"text-sm font-medium text-text-primary ml-4 tabular-nums\">\n {formatNumber(usage.amount)}\n </span>\n </div>\n ))}\n </div>\n )}\n\n {/ Pagination /}\n {!quota.isCollectorBased && (cursorStack.length > 1 \|\| hasNextPage) && (\n <div className=\"flex items-center justify-center gap-2 mt-4\">\n <button\n type=\"button\"\n onClick={handlePrev}\n disabled={cursorStack.length === 1}\n className=\"px-3 py-1.5 text-sm border border-border-subtle rounded-button text-text-primary hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n aria-label=\"Previous usage page\"\n >\n <ChevronLeft className=\"size-4\" />\n </button>\n <span className=\"text-sm text-text-secondary tabular-nums\">Page {currentPage}</span>\n <button\n type=\"button\"\n onClick={handleNext}\n disabled={!hasNextPage}\n className=\"px-3 py-1.5 text-sm border border-border-subtle rounded-button text-text-primary hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n aria-label=\"Next usage page\"\n >\n <ChevronRight className=\"size-4\" />\n </button>\n </div>\n )}\n </div>\n\n {/ Footer /}\n <div className=\"sticky bottom-0 bg-bg-elevated border-t border-border-subtle p-4\">\n <button\n type=\"button\"\n onClick={onClose}\n className=\"w-full py-2 px-4 bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200\"\n >\n Close\n </button>\n </div>\n </div>\n </div>\n );\n};\n\n// ============================================================================\n// Main Usage Page Component\n// ============================================================================\n\n// ============================================================================\n// Workspace Usage Section — sourced entirely from activity-svc\n// ============================================================================\n\nfunction getWorkspaceQuotaStatus(usagePercentage: number, noLimit: boolean): QuotaStatus {\n if (noLimit) return QuotaStatus.HEALTHY;\n if (usagePercentage >= 100) return QuotaStatus.EXHAUSTED;\n if (usagePercentage >= 90) return QuotaStatus.CRITICAL;\n if (usagePercentage >= 75) return QuotaStatus.WARNING;\n return QuotaStatus.HEALTHY;\n}\n\nconst WorkspaceUsageSection: FC<{ workspaceId: string }> = ({ workspaceId }) => {\n const { overview, isLoading, error, refetch } = useWorkspaceQuotaOverview(workspaceId);\n const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());\n\n // Group rows by quotaName so stacked quotas (multiple subscriptions) collapse into one\n const groups = useMemo(() => {\n const map = new Map<string, WorkspaceQuotaOverviewItem[]>();\n for (const item of overview) {\n const existing = map.get(item.assignment.quotaName) ?? [];\n existing.push(item);\n map.set(item.assignment.quotaName, existing);\n }\n return Array.from(map.entries()).map(([quotaName, items]) => {\n const noLimit = items.every((i) => i.assignment.noLimit);\n const totalLimit = noLimit\n ? null\n : items.reduce((sum, i) => sum + (i.assignment.limit ?? 0), 0);\n const totalUsed = items.reduce((sum, i) => sum + i.effectiveUsed, 0);\n const totalRemaining = totalLimit != null ? totalLimit - totalUsed : null;\n const usagePercentage = totalLimit ? (totalUsed / totalLimit) 100 : 0;\n const status = getWorkspaceQuotaStatus(usagePercentage, noLimit);\n const hasLive = items.some((i) => i.liveStatus !== null);\n return {\n quotaName,\n items,\n noLimit,\n totalLimit,\n totalUsed,\n totalRemaining,\n usagePercentage,\n status,\n hasLive,\n hasMultiple: items.length > 1,\n };\n });\n }, [overview]);\n\n const toggleGroup = useCallback((quotaName: string) => {\n setExpandedGroups((prev) => {\n const next = new Set(prev);\n if (next.has(quotaName)) {\n next.delete(quotaName);\n } else {\n next.add(quotaName);\n }\n return next;\n });\n }, []);\n\n if (isLoading && overview.length === 0) {\n return (\n <div className=\"space-y-3\">\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"h-16 bg-bg-sunken animate-pulse rounded-card\" />\n ))}\n </div>\n );\n }\n\n if (error) {\n return (\n <div className=\"text-center py-8 space-y-2\">\n <AlertTriangle className=\"size-8 text-status-error-text mx-auto\" />\n <p className=\"text-sm text-text-secondary\">{error.message}</p>\n <button\n type=\"button\"\n onClick={() => refetch()}\n className=\"px-3 py-1.5 text-sm border border-border-subtle rounded-button text-text-primary hover:bg-bg-sunken transition-colors\"\n >\n Retry\n </button>\n </div>\n );\n }\n\n if (overview.length === 0) {\n return (\n <div className=\"text-center py-12 space-y-2\">\n <div className=\"size-12 mx-auto rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-2\">\n <Layers className=\"size-6 text-text-link\" />\n </div>\n <h3 className=\"text-base font-semibold text-text-primary\">No workspace quotas assigned</h3>\n <p className=\"text-sm text-text-secondary max-w-sm mx-auto\">\n Quotas are assigned to this workspace after a successful purchase. If you have an active\n subscription, contact support.\n </p>\n </div>\n );\n }\n\n // Summary stats count grouped quota names, not raw rows\n const healthy = groups.filter((g) => g.status === QuotaStatus.HEALTHY).length;\n const warning = groups.filter((g) => g.status === QuotaStatus.WARNING).length;\n const critical = groups.filter(\n (g) => g.status === QuotaStatus.CRITICAL \|\| g.status === QuotaStatus.EXHAUSTED\n ).length;\n\n return (\n <div className=\"space-y-4\">\n {/* Summary row /}\n <div className=\"grid grid-cols-3 gap-3\">\n <div className=\"rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-4\">\n <div className=\"flex items-center gap-1.5 mb-1\">\n <span\n className={`flex size-7 items-center justify-center rounded-lg ${statusTokens.success.bg}`}\n >\n <CheckCircle className={`size-4 ${statusTokens.success.icon}`} />\n </span>\n <span className=\"text-xs text-text-secondary\">Healthy</span>\n </div>\n <p className=\"text-xl font-semibold tabular-nums text-text-primary\">{healthy}</p>\n </div>\n <div className=\"rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-4\">\n <div className=\"flex items-center gap-1.5 mb-1\">\n <span\n className={`flex size-7 items-center justify-center rounded-lg ${statusTokens.warning.bg}`}\n >\n <AlertCircle className={`size-4 ${statusTokens.warning.icon}`} />\n </span>\n <span className=\"text-xs text-text-secondary\">Warning</span>\n </div>\n <p className=\"text-xl font-semibold tabular-nums text-text-primary\">{warning}</p>\n </div>\n <div className=\"rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-4\">\n <div className=\"flex items-center gap-1.5 mb-1\">\n <span\n className={`flex size-7 items-center justify-center rounded-lg ${statusTokens.error.bg}`}\n >\n <XCircle className={`size-4 ${statusTokens.error.icon}`} />\n </span>\n <span className=\"text-xs text-text-secondary\">Critical / Exhausted</span>\n </div>\n <p className=\"text-xl font-semibold tabular-nums text-text-primary\">{critical}</p>\n </div>\n </div>\n\n {/ Quota table /}\n <div className=\"border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n <table className=\"w-full text-sm\">\n <thead>\n <tr className=\"border-b border-border-subtle bg-bg-sunken\">\n <th className=\"text-left px-4 py-3 font-medium text-text-muted uppercase tracking-wide text-xs\">\n Quota\n </th>\n <th className=\"text-left px-4 py-3 font-medium text-text-muted uppercase tracking-wide text-xs hidden sm:table-cell\">\n Sources\n </th>\n <th className=\"text-left px-4 py-3 font-medium text-text-muted uppercase tracking-wide text-xs\">\n Usage\n </th>\n <th className=\"text-left px-4 py-3 font-medium text-text-muted uppercase tracking-wide text-xs hidden sm:table-cell\">\n Remaining\n </th>\n <th className=\"text-left px-4 py-3 font-medium text-text-muted uppercase tracking-wide text-xs\">\n Status\n </th>\n </tr>\n </thead>\n <tbody className=\"divide-y divide-border-subtle\">\n {groups.map((group) => {\n const isExpanded = expandedGroups.has(group.quotaName);\n return (\n <>\n {/ Collapsed summary row — one per unique quotaName /}\n <tr\n key={group.quotaName}\n className={`transition-colors ${group.hasMultiple ? 'cursor-pointer hover:bg-bg-sunken' : 'hover:bg-bg-sunken'}`}\n onClick={group.hasMultiple ? () => toggleGroup(group.quotaName) : undefined}\n >\n <td className=\"px-4 py-3\">\n <div className=\"flex items-center gap-2\">\n {group.hasMultiple && (\n <ChevronRight\n className={`size-4 text-text-muted shrink-0 transition-transform duration-150 ${isExpanded ? 'rotate-90' : ''}`}\n />\n )}\n <div>\n <div className=\"font-medium text-text-primary\">\n {formatQuotaDisplayName(group.quotaName)}\n </div>\n <div className=\"text-xs font-mono text-text-muted mt-0.5\">\n {group.quotaName}\n </div>\n {group.hasLive && (\n <div className=\"text-xs text-text-secondary mt-0.5\">\n Live · updated ~60s\n </div>\n )}\n </div>\n </div>\n </td>\n <td className=\"px-4 py-3 hidden sm:table-cell\">\n {group.hasMultiple ? (\n <span className=\"text-xs bg-[var(--color-accent-soft)] text-text-link px-1.5 py-0.5 rounded font-medium\">\n {group.items.length} subscriptions\n </span>\n ) : (\n <div className=\"flex items-center gap-1.5\">\n <span className=\"text-xs text-text-secondary bg-bg-sunken px-1.5 py-0.5 rounded\">\n {group.items[0]?.assignment.productId}\n </span>\n <span className=\"text-xs text-text-secondary capitalize\">\n {group.items[0]?.assignment.quotaMode}\n </span>\n </div>\n )}\n </td>\n <td className=\"px-4 py-3\">\n <div className=\"space-y-1.5\">\n <div className=\"text-text-primary tabular-nums\">\n {formatNumber(group.totalUsed)}\n {!group.noLimit && group.totalLimit != null && (\n <span className=\"text-text-secondary\">\n {' '}\n / {formatNumber(group.totalLimit)}\n </span>\n )}\n </div>\n {!group.noLimit && (\n <ProgressBar percentage={group.usagePercentage} status={group.status} />\n )}\n </div>\n </td>\n <td className=\"px-4 py-3 hidden sm:table-cell text-text-primary tabular-nums\">\n {group.noLimit ? (\n <span className=\"text-text-secondary\">Unlimited</span>\n ) : (\n formatNumber(group.totalRemaining ?? 0)\n )}\n </td>\n <td className=\"px-4 py-3\">\n <StatusBadge status={group.status} />\n </td>\n </tr>\n\n {/ Expanded detail rows — one per subscription/assignment /}\n {isExpanded &&\n group.items.map((item) => {\n const subStatus = getWorkspaceQuotaStatus(\n item.usagePercentage,\n item.assignment.noLimit\n );\n return (\n <tr\n key={item.assignment.id}\n className=\"bg-bg-sunken/50 border-t border-dashed border-border-subtle\"\n >\n <td className=\"pl-12 pr-4 py-2.5\">\n <div className=\"text-xs text-text-secondary space-y-0.5\">\n <div\n className=\"font-mono truncate max-w-[200px]\"\n title={item.assignment.subscriptionId ?? undefined}\n >\n {item.assignment.subscriptionId ?? '—'}\n </div>\n <div className=\"flex items-center gap-1.5 flex-wrap\">\n <span className=\"bg-bg-sunken px-1.5 py-0.5 rounded\">\n {item.assignment.productId}\n </span>\n <span className=\"capitalize\">{item.assignment.quotaMode}</span>\n </div>\n </div>\n </td>\n <td className=\"px-4 py-2.5 hidden sm:table-cell\" />\n <td className=\"px-4 py-2.5 text-xs text-text-secondary tabular-nums\">\n {formatNumber(item.effectiveUsed)}\n {!item.assignment.noLimit && item.assignment.limit != null && (\n <> / {formatNumber(item.assignment.limit)}</>\n )}\n </td>\n <td className=\"px-4 py-2.5 hidden sm:table-cell text-xs text-text-secondary tabular-nums\">\n {item.assignment.noLimit\n ? 'Unlimited'\n : formatNumber(item.remaining ?? 0)}\n </td>\n <td className=\"px-4 py-2.5\">\n <StatusBadge status={subStatus} />\n </td>\n </tr>\n );\n })}\n </>\n );\n })}\n </tbody>\n </table>\n </div>\n\n <p className=\"text-xs text-text-secondary\">\n Workspace quotas are sourced from the activity service. Usage is tracked cumulatively across\n all active sources for each quota.\n {overview.some((o) => o.liveStatus) && ' Live values are updated every ~60 seconds.'}\n </p>\n </div>\n );\n};\n\n// ============================================================================\n// Main Usage Page\n// ============================================================================\n\nexport const UsagePage: FC = () => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const translated = t(key);\n return translated === key ? fallback : translated;\n };\n const permissions = useBillingPermissions();\n\n // Helper to get billing account ID from URL (for navigation from Overview page)\n const getInitialBillingAccountId = (): string \| undefined => {\n if (typeof window === 'undefined') return undefined;\n const urlParams = new URLSearchParams(window.location.search);\n return urlParams.get('billingAccountId') \|\| undefined;\n };\n\n // State - initialize with URL param if present\n const [selectedBillingAccountId, setSelectedBillingAccountId] = useState<string \| undefined>(\n getInitialBillingAccountId\n );\n const [selectedQuota, setSelectedQuota] = useState<AggregatedQuota \| null>(null);\n\n // Search and filter state\n const [searchQuery, setSearchQuery] = useState('');\n const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');\n\n // View mode: 'active' \| 'past' \| 'all'\n type ViewMode = 'active' \| 'past' \| 'all';\n const [viewMode, setViewMode] = useState<ViewMode>('active');\n\n // Debounce search query to avoid too many API calls\n const deferredSearchQuery = useDeferredValue(searchQuery);\n\n // Fetch billing accounts\n const { billingAccounts, isLoading: isLoadingAccounts } = useBillingAccountsForUsage();\n\n // Prefer the default account, fall back to first\n const defaultBillingAccountId = (billingAccounts.find((a) => a.isDefault) ?? billingAccounts[0])\n ?.id;\n // ?? so that an explicit empty string (cleared URL param) still falls back to default\n const effectiveBillingAccountId = selectedBillingAccountId ?? defaultBillingAccountId;\n\n const { workspaceId, navigate } = useBilling();\n\n // Top-level view: 'global' = billing service quotas, 'workspace' = activity-svc quotas\n const [usageView, setUsageView] = useState<'global' \| 'workspace'>('workspace');\n\n // Fetch usage data - passes searchQuery and viewMode to backend for server-side filtering\n const {\n dashboard,\n pooledQuotas,\n activeSubscriptions,\n pastSubscriptions,\n isLoading,\n isPastSubscriptionsLoading,\n error,\n refetch,\n // Pagination for past subscriptions\n loadMorePastSubscriptions,\n hasMorePastSubscriptions,\n isLoadingMorePast,\n pastSubscriptionsCount,\n } = useEnhancedUsagePage({\n billingAccountId: effectiveBillingAccountId,\n workspaceId,\n searchQuery: deferredSearchQuery \|\| undefined,\n viewMode, // 'active' \| 'past' \| 'all'\n });\n\n // Filter quotas by status (search is now handled by backend)\n const filterQuotaByStatus = useCallback(\n (quota: AggregatedQuota): boolean => {\n if (statusFilter === 'all') return true;\n if (statusFilter === 'healthy') return quota.status === 'HEALTHY';\n if (statusFilter === 'warning') return quota.status === 'WARNING';\n if (statusFilter === 'critical')\n return quota.status === 'CRITICAL' \|\| quota.status === 'EXHAUSTED';\n return true;\n },\n [statusFilter]\n );\n\n // Filtered data - only status filter is client-side, search is backend\n const filteredPooledQuotas = useMemo(() => {\n return pooledQuotas.filter(filterQuotaByStatus);\n }, [pooledQuotas, filterQuotaByStatus]);\n\n const filteredActiveSubscriptions = useMemo(() => {\n if (statusFilter === 'all') {\n return activeSubscriptions;\n }\n return activeSubscriptions\n .map((sub) => ({\n ...sub,\n aggregatedQuotas: sub.aggregatedQuotas.filter(filterQuotaByStatus),\n }))\n .filter((sub) => sub.aggregatedQuotas.length > 0);\n }, [activeSubscriptions, statusFilter, filterQuotaByStatus]);\n\n const filteredPastSubscriptions = useMemo(() => {\n if (statusFilter === 'all') {\n return pastSubscriptions;\n }\n return pastSubscriptions\n .map((sub) => ({\n ...sub,\n aggregatedQuotas: sub.aggregatedQuotas.filter(filterQuotaByStatus),\n }))\n .filter((sub) => sub.aggregatedQuotas.length > 0);\n }, [pastSubscriptions, statusFilter, filterQuotaByStatus]);\n\n // Subscriptions to display based on view mode\n const displayedSubscriptions = useMemo(() => {\n if (viewMode === 'active') {\n return { active: filteredActiveSubscriptions, past: [] };\n }\n if (viewMode === 'past') {\n return { active: [], past: filteredPastSubscriptions };\n }\n // 'all' - show both\n return { active: filteredActiveSubscriptions, past: filteredPastSubscriptions };\n }, [viewMode, filteredActiveSubscriptions, filteredPastSubscriptions]);\n\n const hasActiveFilters = searchQuery !== '' \|\| statusFilter !== 'all';\n const isSearching = deferredSearchQuery !== searchQuery; // Show loading indicator while debouncing\n\n const clearFilters = () => {\n setSearchQuery('');\n setStatusFilter('all');\n };\n\n // Toggle status filter (click same to deselect)\n const toggleStatusFilter = (filter: StatusFilter) => {\n setStatusFilter((prev) => (prev === filter ? 'all' : filter));\n };\n\n // Permission check\n if (!permissions.canViewUsage) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-2\">\n <div className=\"size-12 mx-auto rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center\">\n <AlertTriangle className=\"size-6 text-text-secondary\" />\n </div>\n <h2 className=\"text-lg font-semibold text-text-primary\">Access Denied</h2>\n <p className=\"text-sm text-text-secondary max-w-sm\">\n You don't have permission to view usage data.\n </p>\n </div>\n </div>\n );\n }\n\n // Loading state\n if ((isLoadingAccounts \|\| isLoading) && !dashboard) {\n return (\n <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-4\">\n {[1, 2, 3, 4].map((i) => (\n <div key={i} className=\"h-24 bg-bg-sunken animate-pulse rounded-card\" />\n ))}\n </div>\n <div className=\"h-64 bg-bg-sunken animate-pulse rounded-card\" />\n </div>\n );\n }\n\n // Error state\n if (error) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-4\">\n <div className=\"size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n <AlertTriangle className=\"size-6 text-status-error-text\" />\n </div>\n <h2 className=\"text-lg font-semibold text-text-primary\">Failed to load usage data</h2>\n <p className=\"text-sm text-text-secondary\">{error.message}</p>\n <button\n type=\"button\"\n onClick={() => refetch()}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200\"\n >\n Try Again\n </button>\n </div>\n </div>\n );\n }\n\n const selectedAccount = billingAccounts.find((a) => a.id === effectiveBillingAccountId);\n\n return (\n <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n {/ Header /}\n <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n <div>\n <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n {tr('billing.usage.title', 'Usage')}\n </h1>\n <p className=\"text-sm text-text-secondary mt-1\">\n Monitor your resource consumption and quota usage\n </p>\n </div>\n\n <div className=\"flex items-center gap-3\">\n {/ Global / Workspace view toggle /}\n <div className=\"flex items-center bg-bg-sunken rounded-lg p-1 border border-border-subtle\">\n <button\n type=\"button\"\n onClick={() => setUsageView('workspace')}\n className={`flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${\n usageView === 'workspace'\n ? 'bg-bg-surface text-text-primary shadow-elevation-1 font-medium'\n : 'text-text-secondary hover:text-text-primary'\n }`}\n >\n <Layers className=\"size-3.5\" />\n Workspace\n </button>\n <button\n type=\"button\"\n onClick={() => setUsageView('global')}\n className={`flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${\n usageView === 'global'\n ? 'bg-bg-surface text-text-primary shadow-elevation-1 font-medium'\n : 'text-text-secondary hover:text-text-primary'\n }`}\n >\n <Package className=\"size-3.5\" />\n Global\n </button>\n </div>\n\n {/ Billing Account Selector — only shown for global view /}\n {usageView === 'global' && billingAccounts.length > 1 && (\n <select\n value={effectiveBillingAccountId \|\| ''}\n onChange={(e) => setSelectedBillingAccountId(e.target.value)}\n className=\"px-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] w-full sm:min-w-[200px]\"\n >\n {billingAccounts.map((account) => (\n <option key={account.id} value={account.id}>\n {account.name}\n </option>\n ))}\n </select>\n )}\n\n {/ Refresh Button /}\n <button\n type=\"button\"\n onClick={() => (usageView === 'workspace' ? undefined : refetch())}\n className=\"p-2 border border-border-subtle rounded-button text-text-secondary hover:text-text-primary hover:bg-bg-sunken hover:border-border-strong transition-all duration-200\"\n aria-label=\"Refresh\"\n title=\"Refresh\"\n >\n <RefreshCw className=\"size-4\" />\n </button>\n </div>\n </div>\n\n {/ Workspace Usage Section /}\n {usageView === 'workspace' && workspaceId && (\n <WorkspaceUsageSection workspaceId={workspaceId} />\n )}\n\n {usageView === 'workspace' && !workspaceId && (\n <div className=\"text-center py-12 text-text-secondary text-sm\">\n No workspace context available.\n </div>\n )}\n\n {/ Global Usage Section — Search and Filters /}\n {usageView === 'global' && (\n <>\n {/ Search and Filters /}\n <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center\">\n {/ Search Input /}\n <div className=\"relative flex-1 max-w-md\">\n <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-muted\" />\n <input\n type=\"text\"\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n placeholder={`Search ${viewMode === 'past' ? 'past' : viewMode === 'all' ? 'all' : 'active'} quotas...`}\n className=\"w-full pl-9 pr-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n {(searchQuery \|\| isSearching) && (\n <button\n type=\"button\"\n onClick={() => setSearchQuery('')}\n aria-label=\"Clear search\"\n className=\"absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-bg-sunken\"\n >\n {isSearching ? (\n <RefreshCw className=\"size-3 text-text-muted animate-spin\" />\n ) : (\n <X className=\"size-3 text-text-muted\" />\n )}\n </button>\n )}\n </div>\n\n {/ View Mode Tabs /}\n <div className=\"flex items-center bg-bg-sunken rounded-lg p-1 border border-border-subtle\">\n <button\n type=\"button\"\n onClick={() => setViewMode('active')}\n className={`flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${\n viewMode === 'active'\n ? 'bg-bg-surface text-text-primary shadow-elevation-1 font-medium'\n : 'text-text-secondary hover:text-text-primary'\n }`}\n >\n <Package className=\"size-3.5\" />\n Active\n </button>\n <button\n type=\"button\"\n onClick={() => setViewMode('past')}\n disabled={isPastSubscriptionsLoading && viewMode !== 'past'}\n className={`flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${\n viewMode === 'past'\n ? 'bg-bg-surface text-text-primary shadow-elevation-1 font-medium'\n : 'text-text-secondary hover:text-text-primary'\n } ${isPastSubscriptionsLoading && viewMode !== 'past' ? 'opacity-70' : ''}`}\n >\n {isPastSubscriptionsLoading && viewMode === 'past' ? (\n <RefreshCw className=\"size-3.5 animate-spin\" />\n ) : (\n <Clock className=\"size-3.5\" />\n )}\n Past\n </button>\n </div>\n\n {/ Active Filters Indicator /}\n {hasActiveFilters && (\n <button\n type=\"button\"\n onClick={clearFilters}\n className=\"flex items-center gap-1.5 px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary border border-border-subtle rounded-button hover:bg-bg-sunken transition-colors\"\n >\n <X className=\"size-3\" />\n Clear filters\n </button>\n )}\n </div>\n\n {/ Billing Account Info /}\n {selectedAccount && (\n <div className=\"text-sm text-text-secondary\">\n Viewing usage for{' '}\n <span className=\"font-medium text-text-primary\">{selectedAccount.name}</span>\n </div>\n )}\n\n {/ Overview Stats - Clickable to filter /}\n {dashboard && (\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-4\">\n <StatCard\n label=\"Total Quotas\"\n value={dashboard.totalQuotas}\n icon={<Layers className=\"size-5\" />}\n color=\"blue\"\n isActive={statusFilter === 'all'}\n onClick={() => setStatusFilter('all')}\n />\n <StatCard\n label=\"Healthy\"\n value={dashboard.healthyQuotas}\n icon={<CheckCircle className=\"size-5\" />}\n color=\"emerald\"\n isActive={statusFilter === 'healthy'}\n onClick={() => toggleStatusFilter('healthy')}\n />\n <StatCard\n label=\"Warning\"\n value={dashboard.warningQuotas}\n icon={<AlertCircle className=\"size-5\" />}\n color=\"amber\"\n isActive={statusFilter === 'warning'}\n onClick={() => toggleStatusFilter('warning')}\n />\n <StatCard\n label=\"Critical / Exhausted\"\n value={dashboard.criticalQuotas + dashboard.exhaustedQuotas}\n icon={<AlertTriangle className=\"size-5\" />}\n color=\"red\"\n isActive={statusFilter === 'critical'}\n onClick={() => toggleStatusFilter('critical')}\n />\n </div>\n )}\n\n {/ Request More Quota Banner — shown when any quotas are warning or critical/exhausted /}\n {dashboard &&\n (dashboard.warningQuotas > 0 \|\|\n dashboard.criticalQuotas > 0 \|\|\n dashboard.exhaustedQuotas > 0) && (\n <div\n className={`flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between p-4 rounded-lg border ${\n dashboard.criticalQuotas > 0 \|\| dashboard.exhaustedQuotas > 0\n ? `${statusTokens.error.bg} ${statusTokens.error.border}`\n : `${statusTokens.warning.bg} ${statusTokens.warning.border}`\n }`}\n >\n <div className=\"flex items-center gap-3\">\n {dashboard.criticalQuotas > 0 \|\| dashboard.exhaustedQuotas > 0 ? (\n <XCircle className={`size-5 shrink-0 ${statusTokens.error.icon}`} />\n ) : (\n <AlertCircle className={`size-5 shrink-0 ${statusTokens.warning.icon}`} />\n )}\n <div>\n <p\n className={`text-sm font-medium ${\n dashboard.criticalQuotas > 0 \|\| dashboard.exhaustedQuotas > 0\n ? statusTokens.error.text\n : statusTokens.warning.text\n }`}\n >\n {dashboard.criticalQuotas > 0 \|\| dashboard.exhaustedQuotas > 0\n ? `${dashboard.criticalQuotas + dashboard.exhaustedQuotas} quota${dashboard.criticalQuotas + dashboard.exhaustedQuotas !== 1 ? 's' : ''} exhausted or critical`\n : `${dashboard.warningQuotas} quota${dashboard.warningQuotas !== 1 ? 's' : ''} approaching the limit`}\n </p>\n <p className=\"text-xs text-text-secondary mt-0.5\">\n Contact support to request a quota increase for your plan.\n </p>\n </div>\n </div>\n <button\n type=\"button\"\n onClick={() => navigate('/support/tickets')}\n className={`shrink-0 px-4 py-2 text-sm font-medium rounded-button border transition-colors duration-200 ${\n dashboard.criticalQuotas > 0 \|\| dashboard.exhaustedQuotas > 0\n ? 'bg-action-danger-bg text-action-danger-text border-action-danger-bg hover:bg-action-danger-bgHover'\n : 'border-status-warning-border text-status-warning-text hover:bg-status-warning-bg-subtle'\n }`}\n >\n Request more quota\n </button>\n </div>\n )}\n\n {/ Filter Results Info /}\n {(hasActiveFilters \|\| viewMode !== 'active') && (\n <div className=\"flex items-center gap-2 text-sm text-text-secondary flex-wrap\">\n <span>\n Showing{' '}\n {displayedSubscriptions.active.reduce(\n (acc, s) => acc + s.aggregatedQuotas.length,\n 0\n ) +\n displayedSubscriptions.past.reduce(\n (acc, s) => acc + s.aggregatedQuotas.length,\n 0\n ) +\n (viewMode !== 'past' ? filteredPooledQuotas.length : 0)}{' '}\n quotas\n </span>\n <span className=\"px-2 py-0.5 bg-[var(--color-accent-soft)] text-text-link rounded text-xs capitalize\">\n {viewMode === 'active' ? 'Active' : viewMode === 'past' ? 'Past' : 'All'}{' '}\n subscriptions\n </span>\n {statusFilter !== 'all' && (\n <span className=\"px-2 py-0.5 bg-bg-sunken text-text-secondary rounded text-xs capitalize\">\n {statusFilter === 'critical' ? 'Critical / Exhausted' : statusFilter}\n </span>\n )}\n {searchQuery && (\n <span className=\"px-2 py-0.5 bg-bg-sunken text-text-secondary rounded text-xs\">\n “{searchQuery}”\n </span>\n )}\n </div>\n )}\n\n {/ Active Subscriptions Section /}\n {displayedSubscriptions.active.length > 0 && (\n <section>\n <h2 className=\"text-lg font-semibold text-text-primary mb-4 flex items-center gap-2\">\n <Package className=\"size-5 text-text-link\" />\n {viewMode === 'all' ? 'Active Subscription Quotas' : 'Subscription Quotas'}\n </h2>\n <div className=\"space-y-4\">\n {displayedSubscriptions.active.map((subscription) => (\n <SubscriptionSection\n key={subscription.id}\n subscription={subscription}\n onQuotaClick={setSelectedQuota}\n defaultExpanded={true}\n />\n ))}\n </div>\n </section>\n )}\n\n {/ Past Subscriptions Section (when viewMode is 'past' or 'all') /}\n {displayedSubscriptions.past.length > 0 && (\n <section>\n <h2 className=\"text-lg font-semibold text-text-primary mb-4 flex items-center gap-2\">\n <Clock className=\"size-5 text-text-muted\" />\n Past Subscription Quotas\n <span className=\"text-xs font-normal text-text-secondary\">\n (Canceled / Expired / Upgraded)\n </span>\n {pastSubscriptionsCount > 0 && (\n <span className=\"text-xs font-normal px-2 py-0.5 bg-bg-sunken text-text-secondary rounded-full tabular-nums\">\n {displayedSubscriptions.past.length}\n {hasMorePastSubscriptions ? '+' : ''} of {pastSubscriptionsCount}\n </span>\n )}\n </h2>\n <div className=\"space-y-4\">\n {displayedSubscriptions.past.map((subscription) => (\n <SubscriptionSection\n key={subscription.id}\n subscription={subscription}\n onQuotaClick={setSelectedQuota}\n defaultExpanded={viewMode === 'past'}\n />\n ))}\n\n {/ Load More Button /}\n {hasMorePastSubscriptions && (\n <div className=\"flex justify-center pt-2\">\n <button\n type=\"button\"\n onClick={loadMorePastSubscriptions}\n disabled={isLoadingMorePast}\n className=\"flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-primary border border-border-subtle rounded-button hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n >\n {isLoadingMorePast ? (\n <>\n <RefreshCw className=\"size-4 animate-spin\" />\n Loading…\n </>\n ) : (\n <>\n <ChevronDown className=\"size-4\" />\n Load more past subscriptions\n </>\n )}\n </button>\n </div>\n )}\n </div>\n </section>\n )}\n\n {/ Pooled Quotas Section - Only show for active/all views (pooled quotas are account-level) /}\n {viewMode !== 'past' && filteredPooledQuotas.length > 0 && (\n <section>\n <h2 className=\"text-lg font-semibold text-text-primary mb-4 flex items-center gap-2\">\n <Layers className={`size-5 ${statusTokens.info.icon}`} />\n Pooled Quotas\n <span className=\"text-xs font-normal text-text-secondary\">\n (Shared across all products)\n </span>\n </h2>\n <QuotaTable\n quotas={filteredPooledQuotas}\n showPlanColumn={false}\n onQuotaClick={setSelectedQuota}\n />\n </section>\n )}\n\n {/ Empty State - No quotas at all (when viewing active) /}\n {viewMode === 'active' &&\n activeSubscriptions.length === 0 &&\n pooledQuotas.length === 0 &&\n !hasActiveFilters && (\n <div className=\"flex flex-col items-center justify-center py-12 border border-dashed border-border-subtle rounded-card\">\n <div className=\"size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4\">\n <Layers className=\"size-6 text-text-link\" />\n </div>\n <h3 className=\"text-base font-semibold text-text-primary\">\n No active quotas found\n </h3>\n <p className=\"text-sm text-text-secondary mt-1 text-center max-w-sm\">\n Quotas will appear here once you have active subscriptions or pooled allocations.\n </p>\n </div>\n )}\n\n {/ Empty State - No past subscriptions /}\n {viewMode === 'past' &&\n pastSubscriptions.length === 0 &&\n !hasActiveFilters &&\n !isPastSubscriptionsLoading && (\n <div className=\"flex flex-col items-center justify-center py-12 border border-dashed border-border-subtle rounded-card\">\n <div className=\"size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4\">\n <Clock className=\"size-6 text-text-link\" />\n </div>\n <h3 className=\"text-base font-semibold text-text-primary\">No past subscriptions</h3>\n <p className=\"text-sm text-text-secondary mt-1 text-center max-w-sm\">\n You don't have any canceled, expired, or upgraded subscriptions yet.\n </p>\n <button\n type=\"button\"\n onClick={() => setViewMode('active')}\n className=\"mt-4 px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200\"\n >\n View active subscriptions\n </button>\n </div>\n )}\n\n {/ Loading State for Past Subscriptions /}\n {viewMode === 'past' && isPastSubscriptionsLoading && (\n <div className=\"space-y-4\">\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"h-24 bg-bg-sunken animate-pulse rounded-card\" />\n ))}\n </div>\n )}\n\n {/ Empty State - No results from search/filter /}\n {hasActiveFilters &&\n displayedSubscriptions.active.length === 0 &&\n displayedSubscriptions.past.length === 0 &&\n (viewMode === 'past' \|\| filteredPooledQuotas.length === 0) && (\n <div className=\"flex flex-col items-center justify-center py-12 border border-dashed border-border-subtle rounded-card\">\n <div className=\"size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4\">\n {statusFilter !== 'all' && !searchQuery ? (\n <StatusIcon\n status={\n (statusFilter === 'healthy'\n ? 'HEALTHY'\n : statusFilter === 'warning'\n ? 'WARNING'\n : 'CRITICAL') as QuotaStatus\n }\n className=\"size-6\"\n />\n ) : (\n <Search className=\"size-6 text-text-link\" />\n )}\n </div>\n <h3 className=\"text-base font-semibold text-text-primary\">\n {statusFilter !== 'all' && !searchQuery\n ? `No ${statusFilter === 'critical' ? 'critical or exhausted' : statusFilter} quotas`\n : 'No matching quotas'}\n </h3>\n <p className=\"text-sm text-text-secondary mt-1 text-center max-w-sm\">\n {statusFilter !== 'all' && !searchQuery ? (\n <>\n All your quotas are in a different status.\n {dashboard && (\n <span className=\"block mt-1\">\n You have {dashboard.healthyQuotas} healthy, {dashboard.warningQuotas}{' '}\n warning, and {dashboard.criticalQuotas + dashboard.exhaustedQuotas}{' '}\n critical quotas.\n </span>\n )}\n </>\n ) : (\n <>\n No quotas match your current search or filter criteria in{' '}\n {viewMode === 'past' ? 'past' : viewMode === 'all' ? 'any' : 'active'}{' '}\n subscriptions.\n {viewMode === 'active' && !statusFilter.includes('all') && (\n <span className=\"block mt-1\">\n Try switching to “Past” or “All” to search across\n more subscriptions.\n </span>\n )}\n </>\n )}\n </p>\n <div className=\"flex gap-2 mt-4\">\n <button\n type=\"button\"\n onClick={clearFilters}\n className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n >\n {statusFilter !== 'all' ? 'Show all quotas' : 'Clear filters'}\n </button>\n {viewMode === 'active' && searchQuery && (\n <button\n type=\"button\"\n onClick={() => setViewMode('all')}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200\"\n >\n Search all\n </button>\n )}\n </div>\n </div>\n )}\n </>\n )}\n\n {/ Quota Detail Modal */}\n {selectedQuota && (\n <QuotaDetailModal quota={selectedQuota} onClose={() => setSelectedQuota(null)} />\n )}\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"UsagePage.js","names":[],"sources":["../../../../../src/billing/modules/usage/pages/UsagePage.tsx"],"sourcesContent":["/*\n Usage Module - Enhanced Usage Page\n * Displays usage dashboard with billing account selector, aggregated quotas by subscription,\n * pooled quotas, and lazy-loaded past subscriptions\n /\n\nimport { useState, useMemo, useDeferredValue, useCallback, type FC } from 'react';\nimport {\n ChevronDown,\n ChevronRight,\n AlertTriangle,\n CheckCircle,\n XCircle,\n AlertCircle,\n Layers,\n Package,\n Clock,\n RefreshCw,\n Info,\n ChevronLeft,\n X,\n Search,\n} from 'lucide-react';\nimport {\n useEnhancedUsagePage,\n useBillingAccountsForUsage,\n useQuotaUsageDetails,\n useWorkspaceQuotaHistory,\n useWorkspaceQuotaOverview,\n type AggregatedQuota,\n type SubscriptionWithAggregatedQuotas,\n type WorkspaceQuotaOverviewItem,\n} from '../hooks/useUsage';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { formatNumber, formatRelativeTime, formatDateTime } from '../../../shared/utils/format';\nimport { statusTokens } from '../../../shared/utils/tokens';\nimport { QuotaStatus } from '../../../shared/types';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface QuotaDetailModalProps {\n quota: AggregatedQuota;\n onClose: () => void;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction formatQuotaDisplayName(name: string, context?: Record<string, unknown> \| null): string {\n if (context?.displayName && typeof context.displayName === 'string') return context.displayName;\n if (context?.label && typeof context.label === 'string') return context.label;\n const parts = name.split('.');\n const meaningful = parts.length > 1 ? parts.slice(1) : parts;\n return meaningful\n .map((p) => p.replace(/_/g, ' ').replace(/\\b\\w/g, (c) => c.toUpperCase()))\n .join(' ');\n}\n\n// ============================================================================\n// Helper Components\n// ============================================================================\n\nconst StatusIcon: FC<{ status: QuotaStatus; className?: string }> = ({\n status,\n className = 'size-4',\n}) => {\n switch (status) {\n case 'EXHAUSTED':\n return <XCircle className={`${className} ${statusTokens.error.icon}`} />;\n case 'CRITICAL':\n return <AlertTriangle className={`${className} ${statusTokens.error.icon}`} />;\n case 'WARNING':\n return <AlertCircle className={`${className} ${statusTokens.warning.icon}`} />;\n case 'HEALTHY':\n return <CheckCircle className={`${className} ${statusTokens.success.icon}`} />;\n default:\n return <Info className={`${className} ${statusTokens.neutral.icon}`} />;\n }\n};\n\nconst StatusBadge: FC<{ status: QuotaStatus }> = ({ status }) => {\n const colors: Record<QuotaStatus, string> = {\n EXHAUSTED: `${statusTokens.error.bg} ${statusTokens.error.text}`,\n CRITICAL: `${statusTokens.error.bg} ${statusTokens.error.text}`,\n WARNING: `${statusTokens.warning.bg} ${statusTokens.warning.text}`,\n HEALTHY: `${statusTokens.success.bg} ${statusTokens.success.text}`,\n INACTIVE: `${statusTokens.neutral.bg} ${statusTokens.neutral.text}`,\n };\n\n return (\n <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${colors[status]}`}>\n {status}\n </span>\n );\n};\n\nconst ProgressBar: FC<{ percentage: number; status: QuotaStatus }> = ({ percentage, status }) => {\n const clampedPercentage = Math.min(100, Math.max(0, percentage));\n\n const barColors: Record<QuotaStatus, string> = {\n EXHAUSTED: statusTokens.error.dot,\n CRITICAL: statusTokens.error.dot,\n WARNING: statusTokens.warning.dot,\n HEALTHY: statusTokens.success.dot,\n INACTIVE: statusTokens.neutral.dot,\n };\n\n return (\n <div className=\"w-full bg-bg-sunken rounded-full h-2.5 overflow-hidden\">\n <div\n className={`h-full rounded-full transition-all duration-300 ${barColors[status]}`}\n style={{ width: `${clampedPercentage}%` }}\n />\n </div>\n );\n};\n\n// ============================================================================\n// Stat Card Component\n// ============================================================================\n\ntype StatusFilter = 'all' \| 'healthy' \| 'warning' \| 'critical';\n\ninterface StatCardProps {\n label: string;\n value: string \| number;\n icon: React.ReactNode;\n color: 'blue' \| 'emerald' \| 'amber' \| 'red' \| 'gray';\n isActive?: boolean;\n onClick?: () => void;\n}\n\nconst StatCard: FC<StatCardProps> = ({ label, value, icon, color, isActive, onClick }) => {\n // Map color prop to semantic status tokens\n const colorToStatus = {\n blue: statusTokens.info,\n emerald: statusTokens.success,\n amber: statusTokens.warning,\n red: statusTokens.error,\n gray: statusTokens.neutral,\n };\n\n const tokens = colorToStatus[color];\n\n // Icon sits in a status-tinted tile; text/value use neutral surface tokens.\n const iconColors = {\n blue: statusTokens.info.icon,\n emerald: statusTokens.success.icon,\n amber: statusTokens.warning.icon,\n red: statusTokens.error.icon,\n gray: statusTokens.neutral.icon,\n };\n\n return (\n <button\n type=\"button\"\n onClick={onClick}\n aria-pressed={isActive}\n className={`rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5 w-full text-left ${\n onClick\n ? 'cursor-pointer transition-all duration-200 ease-[var(--motion-easing-out)] hover:border-border-strong hover:shadow-elevation-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]'\n : ''\n } ${isActive ? 'ring-1 ring-[var(--color-focus-ring)] border-border-strong' : ''}`}\n >\n <div className=\"flex items-start justify-between gap-3\">\n <span className=\"text-sm text-text-secondary\">{label}</span>\n <span\n className={`flex size-9 shrink-0 items-center justify-center rounded-lg ${tokens.bg}`}\n >\n <span className={iconColors[color]}>{icon}</span>\n </span>\n </div>\n <p className=\"mt-2 text-2xl font-semibold tabular-nums text-text-primary\">{value}</p>\n </button>\n );\n};\n\n// ============================================================================\n// Quota Table Components\n// ============================================================================\n\ninterface QuotaTableRowProps {\n quota: AggregatedQuota;\n planLabel?: string;\n onClick: () => void;\n}\n\nconst QuotaTableRow: FC<QuotaTableRowProps> = ({ quota, planLabel, onClick }) => {\n const hasLimit = quota.totalLimit != null && quota.totalLimit > 0 && !quota.noLimit;\n\n return (\n <tr\n onClick={onClick}\n className=\"cursor-pointer hover:bg-bg-sunken transition-colors border-b border-border-subtle last:border-b-0\"\n >\n {/ Quota name /}\n <td className=\"px-4 py-3\">\n <span className=\"text-sm font-medium text-text-link hover:underline capitalize\">\n {quota.displayName \|\| quota.name.replace(/_/g, ' ')}\n </span>\n <span className=\"block text-xs font-mono text-text-muted mt-0.5\">{quota.name}</span>\n {quota.description && (\n <span className=\"block text-xs text-text-secondary mt-0.5 max-w-[220px] truncate\">\n {quota.description}\n </span>\n )}\n {quota.quotaCount > 1 && (\n <span className=\"block text-xs text-text-secondary mt-0.5\">\n {quota.quotaCount} assignments\n </span>\n )}\n </td>\n\n {/ Plan / type /}\n {planLabel !== undefined && (\n <td className=\"px-4 py-3 text-sm text-text-secondary whitespace-nowrap\">{planLabel}</td>\n )}\n\n {/ Current usage: value + inline progress bar /}\n <td className=\"px-4 py-3\">\n <div className=\"space-y-1.5\">\n <span className=\"text-sm text-text-primary tabular-nums\">\n {formatNumber(quota.totalUsed)} / \n {hasLimit ? formatNumber(quota.totalLimit) : '∞'}\n {quota.unit ? ` ${quota.unit}` : ''}\n </span>\n <ProgressBar percentage={hasLimit ? quota.usagePercentage : 0} status={quota.status} />\n </div>\n </td>\n\n {/ Limit /}\n <td className=\"px-4 py-3 text-sm text-text-secondary tabular-nums whitespace-nowrap\">\n {hasLimit ? formatNumber(quota.totalLimit) : '∞'}\n </td>\n\n {/ Status /}\n <td className=\"px-4 py-3\">\n <StatusBadge status={quota.status} />\n </td>\n </tr>\n );\n};\n\ninterface QuotaTableProps {\n quotas: AggregatedQuota[];\n /* When provided, renders a \"Plan\" column with this value per row /\n planLabel?: string;\n showPlanColumn?: boolean;\n onQuotaClick: (quota: AggregatedQuota) => void;\n}\n\nconst QuotaTable: FC<QuotaTableProps> = ({\n quotas,\n planLabel,\n showPlanColumn = true,\n onQuotaClick,\n}) => (\n <div className=\"overflow-x-auto rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1\">\n <table className=\"w-full text-left\">\n <thead>\n <tr className=\"border-b border-border-subtle bg-bg-sunken\">\n <th className=\"px-4 py-2.5 text-xs font-semibold text-text-muted uppercase tracking-wider\">\n Quotas\n </th>\n {showPlanColumn && (\n <th className=\"px-4 py-2.5 text-xs font-semibold text-text-muted uppercase tracking-wider\">\n Plan\n </th>\n )}\n <th className=\"px-4 py-2.5 text-xs font-semibold text-text-muted uppercase tracking-wider\">\n Current Usage\n </th>\n <th className=\"px-4 py-2.5 text-xs font-semibold text-text-muted uppercase tracking-wider\">\n Limit\n </th>\n <th className=\"px-4 py-2.5 text-xs font-semibold text-text-muted uppercase tracking-wider\">\n Status\n </th>\n </tr>\n </thead>\n <tbody>\n {quotas.map((quota) => (\n <QuotaTableRow\n key={quota.name}\n quota={quota}\n planLabel={showPlanColumn ? planLabel : undefined}\n onClick={() => onQuotaClick(quota)}\n />\n ))}\n </tbody>\n </table>\n </div>\n);\n\n// ============================================================================\n// Subscription Section Component\n// ============================================================================\n\ninterface SubscriptionSectionProps {\n subscription: SubscriptionWithAggregatedQuotas;\n onQuotaClick: (quota: AggregatedQuota) => void;\n defaultExpanded?: boolean;\n}\n\nconst SubscriptionSection: FC<SubscriptionSectionProps> = ({\n subscription,\n onQuotaClick,\n defaultExpanded = true,\n}) => {\n const [isExpanded, setIsExpanded] = useState(defaultExpanded);\n\n const statusColors: Record<string, string> = {\n active: `${statusTokens.success.bg} ${statusTokens.success.text}`,\n trialing: `${statusTokens.info.bg} ${statusTokens.info.text}`,\n past_due: `${statusTokens.warning.bg} ${statusTokens.warning.text}`,\n canceled: `${statusTokens.neutral.bg} ${statusTokens.neutral.text}`,\n expired: `${statusTokens.neutral.bg} ${statusTokens.neutral.text}`,\n upgraded: `${statusTokens.primary.bg} ${statusTokens.primary.text}`,\n };\n\n return (\n <div className=\"border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded(!isExpanded)}\n aria-expanded={isExpanded}\n className=\"w-full flex items-center justify-between p-4 hover:bg-bg-sunken transition-colors\"\n >\n <div className=\"flex items-center gap-3\">\n <span className=\"flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)]\">\n <Package className=\"size-5 text-text-link\" />\n </span>\n <div className=\"text-left\">\n <div className=\"flex items-center gap-2\">\n <span className=\"font-medium text-text-primary\">Subscription</span>\n <span\n className={`px-2 py-0.5 text-xs font-medium rounded-full capitalize ${statusColors[subscription.status.toLowerCase()] \|\| statusColors.active}`}\n >\n {subscription.status}\n </span>\n </div>\n <p className=\"text-xs text-text-secondary\">\n {subscription.aggregatedQuotas.length} quota type\n {subscription.aggregatedQuotas.length !== 1 ? 's' : ''}\n </p>\n </div>\n </div>\n {isExpanded ? (\n <ChevronDown className=\"size-5 text-text-muted\" />\n ) : (\n <ChevronRight className=\"size-5 text-text-muted\" />\n )}\n </button>\n\n {isExpanded && subscription.aggregatedQuotas.length > 0 && (\n <div className=\"border-t border-border-subtle\">\n <QuotaTable\n quotas={subscription.aggregatedQuotas}\n planLabel={subscription.planName \|\| subscription.productId \|\| undefined}\n showPlanColumn={!!(subscription.planName \|\| subscription.productId)}\n onQuotaClick={onQuotaClick}\n />\n </div>\n )}\n\n {isExpanded && subscription.aggregatedQuotas.length === 0 && (\n <div className=\"border-t border-border-subtle p-6 text-center\">\n <p className=\"text-sm text-text-secondary\">No quotas assigned to this subscription</p>\n </div>\n )}\n </div>\n );\n};\n\n// ============================================================================\n// Quota Detail Modal Component\n// ============================================================================\n\nconst QuotaDetailModal: FC<QuotaDetailModalProps> = ({ quota, onClose }) => {\n // Cursor stack: [null] = page 1, [null, c1] = page 2, etc.\n const [cursorStack, setCursorStack] = useState<Array<string \| null>>([null]);\n const currentCursor = cursorStack[cursorStack.length - 1] ?? null;\n const currentPage = cursorStack.length;\n const { workspaceId } = useBilling();\n\n // Get usage details for the first quota assignment directly from activity-svc\n const firstAssignmentId = quota.quotaAssignments[0]?.id;\n const { usages, hasNextPage, nextCursor, isLoading } = useQuotaUsageDetails(\n firstAssignmentId,\n 10,\n currentCursor,\n workspaceId\n );\n\n // Snapshot history from quota scraper (activity-svc) — shows live value trend\n const { snapshots, isLoading: isSnapshotsLoading } = useWorkspaceQuotaHistory(\n workspaceId,\n quota.name,\n 24\n );\n\n const handleNext = () => {\n if (nextCursor) setCursorStack((prev) => [...prev, nextCursor]);\n };\n\n const handlePrev = () => {\n if (cursorStack.length > 1) setCursorStack((prev) => prev.slice(0, -1));\n };\n\n return (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n <div className=\"absolute inset-0 bg-overlay-scrim\" onClick={onClose} />\n <div\n className=\"relative bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] max-w-2xl w-full mx-4 max-h-[90vh] overflow-auto\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"quota-detail-title\"\n >\n {/ Header /}\n <div className=\"sticky top-0 bg-bg-elevated border-b border-border-subtle p-4 flex items-center justify-between\">\n <div className=\"flex items-center gap-3\">\n <StatusIcon status={quota.status} className=\"size-5\" />\n <div>\n <h2\n id=\"quota-detail-title\"\n className=\"text-lg font-semibold capitalize text-text-primary\"\n >\n {quota.displayName \|\| quota.name.replace(/_/g, ' ')}\n </h2>\n <p className=\"text-xs font-mono text-text-muted\">{quota.name}</p>\n {quota.description && (\n <p className=\"text-sm text-text-secondary mt-0.5\">{quota.description}</p>\n )}\n <p className=\"text-sm text-text-secondary mt-0.5\">\n {quota.quotaCount} quota assignment{quota.quotaCount !== 1 ? 's' : ''}\n </p>\n </div>\n </div>\n <button\n type=\"button\"\n onClick={onClose}\n className=\"p-1 rounded-button text-text-secondary hover:text-text-primary hover:bg-bg-sunken transition-colors\"\n aria-label=\"Close quota details\"\n >\n <X className=\"size-5\" />\n </button>\n </div>\n\n {/ Summary /}\n <div className=\"p-4 border-b border-border-subtle\">\n <div className=\"mb-4\">\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"text-sm text-text-secondary\">Usage</span>\n <StatusBadge status={quota.status} />\n </div>\n <ProgressBar percentage={quota.usagePercentage} status={quota.status} />\n <div className=\"flex items-center justify-between mt-2 text-sm\">\n <span className=\"font-medium text-text-primary tabular-nums\">\n {formatNumber(quota.totalUsed)} /{' '}\n {quota.totalLimit != null && quota.totalLimit > 0\n ? formatNumber(quota.totalLimit)\n : '∞'}\n {quota.unit && ` ${quota.unit}`}\n </span>\n <span className=\"text-text-secondary\">\n {quota.totalLimit != null && quota.totalLimit > 0\n ? `${Math.round(quota.usagePercentage)}% used`\n : 'Unlimited'}\n </span>\n </div>\n </div>\n\n {/ Quota Assignments Breakdown - sorted by expiry date (earliest first) /}\n {quota.quotaCount > 1 && (\n <div className=\"mt-4\">\n <h3 className=\"text-sm font-medium text-text-primary mb-3\">Quota Breakdown</h3>\n <div className=\"border border-border-subtle rounded-card overflow-hidden divide-y divide-border-subtle\">\n {[...quota.quotaAssignments]\n .sort((a, b) => {\n // Sort by endtime ascending (earliest expiry first)\n const dateA = a.endtime ? new Date(a.endtime).getTime() : Infinity;\n const dateB = b.endtime ? new Date(b.endtime).getTime() : Infinity;\n return dateA - dateB;\n })\n .map((assignment) => {\n const expiryDate = assignment.endtime ? new Date(assignment.endtime) : null;\n const now = new Date();\n const isExpired = expiryDate && expiryDate < now;\n const daysUntilExpiry = expiryDate\n ? Math.ceil((expiryDate.getTime() - now.getTime()) / (24 60 * 60 * 1000))\n : null;\n const isExpiringSoon =\n daysUntilExpiry !== null && daysUntilExpiry > 0 && daysUntilExpiry <= 7;\n\n return (\n <div\n key={assignment.id}\n className={`flex items-center justify-between px-3 py-2.5 ${\n isExpired\n ? 'bg-bg-sunken'\n : isExpiringSoon\n ? statusTokens.warning.bg\n : 'bg-bg-surface'\n }`}\n >\n <div className=\"flex items-center gap-2\">\n {isExpiringSoon && !isExpired && (\n <span\n className={`size-2 rounded-full ${statusTokens.warning.dot} animate-pulse`}\n />\n )}\n <div className=\"flex flex-col\">\n <span\n className={`text-sm ${isExpired ? 'text-text-muted' : 'text-text-primary'}`}\n >\n {expiryDate\n ? expiryDate.toLocaleDateString('en-US', {\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n })\n : 'No expiry'}\n </span>\n <span\n className={`text-xs ${\n isExpired\n ? 'text-status-error-text'\n : isExpiringSoon\n ? statusTokens.warning.text\n : 'text-text-secondary'\n }`}\n >\n {isExpired\n ? 'Expired'\n : daysUntilExpiry !== null\n ? daysUntilExpiry === 0\n ? 'Expires today'\n : daysUntilExpiry === 1\n ? 'Expires tomorrow'\n : `${daysUntilExpiry} days left`\n : 'Never expires'}\n </span>\n </div>\n </div>\n <div className=\"text-right\">\n <span\n className={`text-sm font-semibold tabular-nums ${isExpired ? 'text-text-muted' : 'text-text-primary'}`}\n >\n {formatNumber(assignment.used)}\n <span className=\"text-text-secondary font-normal\">\n {' / '}\n {assignment.limit != null && assignment.limit > 0\n ? formatNumber(assignment.limit)\n : '∞'}\n {assignment.unit && ` ${assignment.unit}`}\n </span>\n </span>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n )}\n </div>\n\n {/* Live Value History (scraper snapshots — at most one per hour) /}\n {(isSnapshotsLoading \|\| snapshots.length > 0) && (\n <div className=\"p-4 border-t border-border-subtle\">\n <h3 className=\"text-sm font-medium text-text-primary mb-3\">Live Value History</h3>\n {isSnapshotsLoading ? (\n <div className=\"space-y-1.5\">\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"h-8 bg-bg-sunken animate-pulse rounded\" />\n ))}\n </div>\n ) : (\n <div className=\"space-y-1.5\">\n {snapshots.map((snap) => (\n <div\n key={snap.id}\n className=\"flex items-center justify-between px-3 py-2 bg-bg-sunken rounded-button\"\n >\n <span className=\"text-xs text-text-secondary\">\n {formatDateTime(snap.snapshotAt)}\n </span>\n <span className=\"text-sm font-medium text-text-primary tabular-nums\">\n {formatNumber(snap.value)}\n {quota.unit && (\n <span className=\"text-xs text-text-secondary ml-1\">{quota.unit}</span>\n )}\n {!snap.noLimit && snap.limit != null && (\n <span className=\"text-xs text-text-secondary ml-1\">\n / {formatNumber(snap.limit)}\n </span>\n )}\n </span>\n </div>\n ))}\n </div>\n )}\n </div>\n )}\n\n {/ Usage History /}\n <div className=\"p-4\">\n <h3 className=\"text-sm font-medium text-text-primary mb-3\">Recent Usage</h3>\n\n {quota.isCollectorBased ? (\n <p className=\"text-sm text-text-secondary text-center py-6\">\n Usage is tracked via system metrics, individual event records are not available for\n this quota.\n </p>\n ) : isLoading ? (\n <div className=\"space-y-2\">\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"h-12 bg-bg-sunken animate-pulse rounded\" />\n ))}\n </div>\n ) : usages.length === 0 ? (\n <p className=\"text-sm text-text-secondary text-center py-6\">No usage records found</p>\n ) : (\n <div className=\"space-y-2\">\n {usages.map((usage) => (\n <div\n key={usage.id}\n className=\"flex items-center justify-between p-3 border border-border-subtle rounded-card\"\n >\n <div className=\"flex-1 min-w-0\">\n <p className=\"text-sm font-medium text-text-primary\">\n {usage.description \|\| 'Usage recorded'}\n </p>\n <p className=\"text-xs text-text-secondary\">\n {formatRelativeTime(usage.timestamp)} • {formatDateTime(usage.timestamp)}\n </p>\n </div>\n <span className=\"text-sm font-medium text-text-primary ml-4 tabular-nums\">\n {formatNumber(usage.amount)}\n </span>\n </div>\n ))}\n </div>\n )}\n\n {/ Pagination /}\n {!quota.isCollectorBased && (cursorStack.length > 1 \|\| hasNextPage) && (\n <div className=\"flex items-center justify-center gap-2 mt-4\">\n <button\n type=\"button\"\n onClick={handlePrev}\n disabled={cursorStack.length === 1}\n className=\"px-3 py-1.5 text-sm border border-border-subtle rounded-button text-text-primary hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n aria-label=\"Previous usage page\"\n >\n <ChevronLeft className=\"size-4\" />\n </button>\n <span className=\"text-sm text-text-secondary tabular-nums\">Page {currentPage}</span>\n <button\n type=\"button\"\n onClick={handleNext}\n disabled={!hasNextPage}\n className=\"px-3 py-1.5 text-sm border border-border-subtle rounded-button text-text-primary hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n aria-label=\"Next usage page\"\n >\n <ChevronRight className=\"size-4\" />\n </button>\n </div>\n )}\n </div>\n\n {/ Footer /}\n <div className=\"sticky bottom-0 bg-bg-elevated border-t border-border-subtle p-4\">\n <button\n type=\"button\"\n onClick={onClose}\n className=\"w-full py-2 px-4 bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200\"\n >\n Close\n </button>\n </div>\n </div>\n </div>\n );\n};\n\n// ============================================================================\n// Main Usage Page Component\n// ============================================================================\n\n// ============================================================================\n// Workspace Usage Section — sourced entirely from activity-svc\n// ============================================================================\n\nfunction getWorkspaceQuotaStatus(usagePercentage: number, noLimit: boolean): QuotaStatus {\n if (noLimit) return QuotaStatus.HEALTHY;\n if (usagePercentage >= 100) return QuotaStatus.EXHAUSTED;\n if (usagePercentage >= 90) return QuotaStatus.CRITICAL;\n if (usagePercentage >= 75) return QuotaStatus.WARNING;\n return QuotaStatus.HEALTHY;\n}\n\nconst WorkspaceUsageSection: FC<{ workspaceId: string }> = ({ workspaceId }) => {\n const { overview, isLoading, error, refetch } = useWorkspaceQuotaOverview(workspaceId);\n const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());\n\n // Group rows by quotaName so stacked quotas (multiple subscriptions) collapse into one\n const groups = useMemo(() => {\n const map = new Map<string, WorkspaceQuotaOverviewItem[]>();\n for (const item of overview) {\n const existing = map.get(item.assignment.quotaName) ?? [];\n existing.push(item);\n map.set(item.assignment.quotaName, existing);\n }\n return Array.from(map.entries()).map(([quotaName, items]) => {\n const noLimit = items.every((i) => i.assignment.noLimit);\n const totalLimit = noLimit\n ? null\n : items.reduce((sum, i) => sum + (i.assignment.limit ?? 0), 0);\n const totalUsed = items.reduce((sum, i) => sum + i.effectiveUsed, 0);\n const totalRemaining = totalLimit != null ? totalLimit - totalUsed : null;\n const usagePercentage = totalLimit ? (totalUsed / totalLimit) 100 : 0;\n const status = getWorkspaceQuotaStatus(usagePercentage, noLimit);\n const hasLive = items.some((i) => i.liveStatus !== null);\n return {\n quotaName,\n items,\n noLimit,\n totalLimit,\n totalUsed,\n totalRemaining,\n usagePercentage,\n status,\n hasLive,\n hasMultiple: items.length > 1,\n };\n });\n }, [overview]);\n\n const toggleGroup = useCallback((quotaName: string) => {\n setExpandedGroups((prev) => {\n const next = new Set(prev);\n if (next.has(quotaName)) {\n next.delete(quotaName);\n } else {\n next.add(quotaName);\n }\n return next;\n });\n }, []);\n\n if (isLoading && overview.length === 0) {\n return (\n <div className=\"space-y-3\">\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"h-16 bg-bg-sunken animate-pulse rounded-card\" />\n ))}\n </div>\n );\n }\n\n if (error) {\n return (\n <div className=\"text-center py-8 space-y-2\">\n <AlertTriangle className=\"size-8 text-status-error-text mx-auto\" />\n <p className=\"text-sm text-text-secondary\">{error.message}</p>\n <button\n type=\"button\"\n onClick={() => refetch()}\n className=\"px-3 py-1.5 text-sm border border-border-subtle rounded-button text-text-primary hover:bg-bg-sunken transition-colors\"\n >\n Retry\n </button>\n </div>\n );\n }\n\n if (overview.length === 0) {\n return (\n <div className=\"text-center py-12 space-y-2\">\n <div className=\"size-12 mx-auto rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-2\">\n <Layers className=\"size-6 text-text-link\" />\n </div>\n <h3 className=\"text-base font-semibold text-text-primary\">No workspace quotas assigned</h3>\n <p className=\"text-sm text-text-secondary max-w-sm mx-auto\">\n Quotas are assigned to this workspace after a successful purchase. If you have an active\n subscription, contact support.\n </p>\n </div>\n );\n }\n\n // Summary stats count grouped quota names, not raw rows\n const healthy = groups.filter((g) => g.status === QuotaStatus.HEALTHY).length;\n const warning = groups.filter((g) => g.status === QuotaStatus.WARNING).length;\n const critical = groups.filter(\n (g) => g.status === QuotaStatus.CRITICAL \|\| g.status === QuotaStatus.EXHAUSTED\n ).length;\n\n return (\n <div className=\"space-y-4\">\n {/* Summary row /}\n <div className=\"grid grid-cols-3 gap-3\">\n <div className=\"rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-4\">\n <div className=\"flex items-center gap-1.5 mb-1\">\n <span\n className={`flex size-7 items-center justify-center rounded-lg ${statusTokens.success.bg}`}\n >\n <CheckCircle className={`size-4 ${statusTokens.success.icon}`} />\n </span>\n <span className=\"text-xs text-text-secondary\">Healthy</span>\n </div>\n <p className=\"text-xl font-semibold tabular-nums text-text-primary\">{healthy}</p>\n </div>\n <div className=\"rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-4\">\n <div className=\"flex items-center gap-1.5 mb-1\">\n <span\n className={`flex size-7 items-center justify-center rounded-lg ${statusTokens.warning.bg}`}\n >\n <AlertCircle className={`size-4 ${statusTokens.warning.icon}`} />\n </span>\n <span className=\"text-xs text-text-secondary\">Warning</span>\n </div>\n <p className=\"text-xl font-semibold tabular-nums text-text-primary\">{warning}</p>\n </div>\n <div className=\"rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-4\">\n <div className=\"flex items-center gap-1.5 mb-1\">\n <span\n className={`flex size-7 items-center justify-center rounded-lg ${statusTokens.error.bg}`}\n >\n <XCircle className={`size-4 ${statusTokens.error.icon}`} />\n </span>\n <span className=\"text-xs text-text-secondary\">Critical / Exhausted</span>\n </div>\n <p className=\"text-xl font-semibold tabular-nums text-text-primary\">{critical}</p>\n </div>\n </div>\n\n {/ Quota table /}\n <div className=\"border border-border-subtle rounded-card bg-bg-surface shadow-elevation-1 overflow-hidden\">\n <table className=\"w-full text-sm\">\n <thead>\n <tr className=\"border-b border-border-subtle bg-bg-sunken\">\n <th className=\"text-left px-4 py-3 font-medium text-text-muted uppercase tracking-wide text-xs\">\n Quota\n </th>\n <th className=\"text-left px-4 py-3 font-medium text-text-muted uppercase tracking-wide text-xs hidden sm:table-cell\">\n Sources\n </th>\n <th className=\"text-left px-4 py-3 font-medium text-text-muted uppercase tracking-wide text-xs\">\n Usage\n </th>\n <th className=\"text-left px-4 py-3 font-medium text-text-muted uppercase tracking-wide text-xs hidden sm:table-cell\">\n Remaining\n </th>\n <th className=\"text-left px-4 py-3 font-medium text-text-muted uppercase tracking-wide text-xs\">\n Status\n </th>\n </tr>\n </thead>\n <tbody className=\"divide-y divide-border-subtle\">\n {groups.map((group) => {\n const isExpanded = expandedGroups.has(group.quotaName);\n return (\n <>\n {/ Collapsed summary row — one per unique quotaName /}\n <tr\n key={group.quotaName}\n className={`transition-colors ${group.hasMultiple ? 'cursor-pointer hover:bg-bg-sunken' : 'hover:bg-bg-sunken'}`}\n onClick={group.hasMultiple ? () => toggleGroup(group.quotaName) : undefined}\n >\n <td className=\"px-4 py-3\">\n <div className=\"flex items-center gap-2\">\n {group.hasMultiple && (\n <ChevronRight\n className={`size-4 text-text-muted shrink-0 transition-transform duration-150 ${isExpanded ? 'rotate-90' : ''}`}\n />\n )}\n <div>\n <div className=\"font-medium text-text-primary\">\n {formatQuotaDisplayName(group.quotaName)}\n </div>\n <div className=\"text-xs font-mono text-text-muted mt-0.5\">\n {group.quotaName}\n </div>\n {group.hasLive && (\n <div className=\"text-xs text-text-secondary mt-0.5\">\n Live · updated ~60s\n </div>\n )}\n </div>\n </div>\n </td>\n <td className=\"px-4 py-3 hidden sm:table-cell\">\n {group.hasMultiple ? (\n <span className=\"text-xs bg-[var(--color-accent-soft)] text-text-link px-1.5 py-0.5 rounded font-medium\">\n {group.items.length} subscriptions\n </span>\n ) : (\n <div className=\"flex items-center gap-1.5\">\n <span className=\"text-xs text-text-secondary bg-bg-sunken px-1.5 py-0.5 rounded\">\n {group.items[0]?.assignment.productId}\n </span>\n <span className=\"text-xs text-text-secondary capitalize\">\n {group.items[0]?.assignment.quotaMode}\n </span>\n </div>\n )}\n </td>\n <td className=\"px-4 py-3\">\n <div className=\"space-y-1.5\">\n <div className=\"text-text-primary tabular-nums\">\n {formatNumber(group.totalUsed)}\n {!group.noLimit && group.totalLimit != null && (\n <span className=\"text-text-secondary\">\n {' '}\n / {formatNumber(group.totalLimit)}\n </span>\n )}\n </div>\n {!group.noLimit && (\n <ProgressBar percentage={group.usagePercentage} status={group.status} />\n )}\n </div>\n </td>\n <td className=\"px-4 py-3 hidden sm:table-cell text-text-primary tabular-nums\">\n {group.noLimit ? (\n <span className=\"text-text-secondary\">Unlimited</span>\n ) : (\n formatNumber(group.totalRemaining ?? 0)\n )}\n </td>\n <td className=\"px-4 py-3\">\n <StatusBadge status={group.status} />\n </td>\n </tr>\n\n {/ Expanded detail rows — one per subscription/assignment /}\n {isExpanded &&\n group.items.map((item) => {\n const subStatus = getWorkspaceQuotaStatus(\n item.usagePercentage,\n item.assignment.noLimit\n );\n return (\n <tr\n key={item.assignment.id}\n className=\"bg-bg-sunken/50 border-t border-dashed border-border-subtle\"\n >\n <td className=\"pl-12 pr-4 py-2.5\">\n <div className=\"text-xs text-text-secondary space-y-0.5\">\n <div\n className=\"font-mono truncate max-w-[200px]\"\n title={item.assignment.subscriptionId ?? undefined}\n >\n {item.assignment.subscriptionId ?? '—'}\n </div>\n <div className=\"flex items-center gap-1.5 flex-wrap\">\n <span className=\"bg-bg-sunken px-1.5 py-0.5 rounded\">\n {item.assignment.productId}\n </span>\n <span className=\"capitalize\">{item.assignment.quotaMode}</span>\n </div>\n </div>\n </td>\n <td className=\"px-4 py-2.5 hidden sm:table-cell\" />\n <td className=\"px-4 py-2.5 text-xs text-text-secondary tabular-nums\">\n {formatNumber(item.effectiveUsed)}\n {!item.assignment.noLimit && item.assignment.limit != null && (\n <> / {formatNumber(item.assignment.limit)}</>\n )}\n </td>\n <td className=\"px-4 py-2.5 hidden sm:table-cell text-xs text-text-secondary tabular-nums\">\n {item.assignment.noLimit\n ? 'Unlimited'\n : formatNumber(item.remaining ?? 0)}\n </td>\n <td className=\"px-4 py-2.5\">\n <StatusBadge status={subStatus} />\n </td>\n </tr>\n );\n })}\n </>\n );\n })}\n </tbody>\n </table>\n </div>\n\n <p className=\"text-xs text-text-secondary\">\n Workspace quotas are sourced from the activity service. Usage is tracked cumulatively across\n all active sources for each quota.\n {overview.some((o) => o.liveStatus) && ' Live values are updated every ~60 seconds.'}\n </p>\n </div>\n );\n};\n\n// ============================================================================\n// Main Usage Page\n// ============================================================================\n\nexport const UsagePage: FC = () => {\n const { t } = useI18n();\n const tr = (key: string, fallback: string): string => {\n const translated = t(key);\n return translated === key ? fallback : translated;\n };\n const permissions = useBillingPermissions();\n\n // Helper to get billing account ID from URL (for navigation from Overview page)\n const getInitialBillingAccountId = (): string \| undefined => {\n if (typeof window === 'undefined') return undefined;\n const urlParams = new URLSearchParams(window.location.search);\n return urlParams.get('billingAccountId') \|\| undefined;\n };\n\n // State - initialize with URL param if present\n const [selectedBillingAccountId, setSelectedBillingAccountId] = useState<string \| undefined>(\n getInitialBillingAccountId\n );\n const [selectedQuota, setSelectedQuota] = useState<AggregatedQuota \| null>(null);\n\n // Search and filter state\n const [searchQuery, setSearchQuery] = useState('');\n const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');\n\n // View mode: 'active' \| 'past' \| 'all'\n type ViewMode = 'active' \| 'past' \| 'all';\n const [viewMode, setViewMode] = useState<ViewMode>('active');\n\n // Debounce search query to avoid too many API calls\n const deferredSearchQuery = useDeferredValue(searchQuery);\n\n // Fetch billing accounts\n const { billingAccounts, isLoading: isLoadingAccounts } = useBillingAccountsForUsage();\n\n // Prefer the default account, fall back to first\n const defaultBillingAccountId = (billingAccounts.find((a) => a.isDefault) ?? billingAccounts[0])\n ?.id;\n // ?? so that an explicit empty string (cleared URL param) still falls back to default\n const effectiveBillingAccountId = selectedBillingAccountId ?? defaultBillingAccountId;\n\n const { workspaceId, navigate } = useBilling();\n\n // Top-level view: 'global' = billing service quotas, 'workspace' = activity-svc quotas\n const [usageView, setUsageView] = useState<'global' \| 'workspace'>('workspace');\n\n // Fetch usage data - passes searchQuery and viewMode to backend for server-side filtering\n const {\n dashboard,\n pooledQuotas,\n activeSubscriptions,\n pastSubscriptions,\n isLoading,\n isPastSubscriptionsLoading,\n error,\n refetch,\n // Pagination for past subscriptions\n loadMorePastSubscriptions,\n hasMorePastSubscriptions,\n isLoadingMorePast,\n pastSubscriptionsCount,\n } = useEnhancedUsagePage({\n billingAccountId: effectiveBillingAccountId,\n workspaceId,\n searchQuery: deferredSearchQuery \|\| undefined,\n viewMode, // 'active' \| 'past' \| 'all'\n });\n\n // Filter quotas by status (search is now handled by backend)\n const filterQuotaByStatus = useCallback(\n (quota: AggregatedQuota): boolean => {\n if (statusFilter === 'all') return true;\n if (statusFilter === 'healthy') return quota.status === 'HEALTHY';\n if (statusFilter === 'warning') return quota.status === 'WARNING';\n if (statusFilter === 'critical')\n return quota.status === 'CRITICAL' \|\| quota.status === 'EXHAUSTED';\n return true;\n },\n [statusFilter]\n );\n\n // Filtered data - only status filter is client-side, search is backend\n const filteredPooledQuotas = useMemo(() => {\n return pooledQuotas.filter(filterQuotaByStatus);\n }, [pooledQuotas, filterQuotaByStatus]);\n\n const filteredActiveSubscriptions = useMemo(() => {\n if (statusFilter === 'all') {\n return activeSubscriptions;\n }\n return activeSubscriptions\n .map((sub) => ({\n ...sub,\n aggregatedQuotas: sub.aggregatedQuotas.filter(filterQuotaByStatus),\n }))\n .filter((sub) => sub.aggregatedQuotas.length > 0);\n }, [activeSubscriptions, statusFilter, filterQuotaByStatus]);\n\n const filteredPastSubscriptions = useMemo(() => {\n if (statusFilter === 'all') {\n return pastSubscriptions;\n }\n return pastSubscriptions\n .map((sub) => ({\n ...sub,\n aggregatedQuotas: sub.aggregatedQuotas.filter(filterQuotaByStatus),\n }))\n .filter((sub) => sub.aggregatedQuotas.length > 0);\n }, [pastSubscriptions, statusFilter, filterQuotaByStatus]);\n\n // Subscriptions to display based on view mode\n const displayedSubscriptions = useMemo(() => {\n if (viewMode === 'active') {\n return { active: filteredActiveSubscriptions, past: [] };\n }\n if (viewMode === 'past') {\n return { active: [], past: filteredPastSubscriptions };\n }\n // 'all' - show both\n return { active: filteredActiveSubscriptions, past: filteredPastSubscriptions };\n }, [viewMode, filteredActiveSubscriptions, filteredPastSubscriptions]);\n\n const hasActiveFilters = searchQuery !== '' \|\| statusFilter !== 'all';\n const isSearching = deferredSearchQuery !== searchQuery; // Show loading indicator while debouncing\n\n const clearFilters = () => {\n setSearchQuery('');\n setStatusFilter('all');\n };\n\n // Toggle status filter (click same to deselect)\n const toggleStatusFilter = (filter: StatusFilter) => {\n setStatusFilter((prev) => (prev === filter ? 'all' : filter));\n };\n\n // Permission check\n if (!permissions.canViewUsage) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-2\">\n <div className=\"size-12 mx-auto rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center\">\n <AlertTriangle className=\"size-6 text-text-secondary\" />\n </div>\n <h2 className=\"text-lg font-semibold text-text-primary\">Access Denied</h2>\n <p className=\"text-sm text-text-secondary max-w-sm\">\n You don't have permission to view usage data.\n </p>\n </div>\n </div>\n );\n }\n\n // Loading state\n if ((isLoadingAccounts \|\| isLoading) && !dashboard) {\n return (\n <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-4\">\n {[1, 2, 3, 4].map((i) => (\n <div key={i} className=\"h-24 bg-bg-sunken animate-pulse rounded-card\" />\n ))}\n </div>\n <div className=\"h-64 bg-bg-sunken animate-pulse rounded-card\" />\n </div>\n );\n }\n\n // Error state\n if (error) {\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-4\">\n <div className=\"size-12 mx-auto rounded-full bg-status-error-bg-subtle flex items-center justify-center\">\n <AlertTriangle className=\"size-6 text-status-error-text\" />\n </div>\n <h2 className=\"text-lg font-semibold text-text-primary\">Failed to load usage data</h2>\n <p className=\"text-sm text-text-secondary\">{error.message}</p>\n <button\n type=\"button\"\n onClick={() => refetch()}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200\"\n >\n Try Again\n </button>\n </div>\n </div>\n );\n }\n\n const selectedAccount = billingAccounts.find((a) => a.id === effectiveBillingAccountId);\n\n return (\n <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n {/ Header /}\n <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n <div>\n <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n {tr('billing.usage.title', 'Usage')}\n </h1>\n <p className=\"text-sm text-text-secondary mt-1\">\n Monitor your resource consumption and quota usage\n </p>\n </div>\n\n <div className=\"flex items-center gap-3\">\n {/ Global / Workspace view toggle /}\n <div className=\"flex items-center bg-bg-sunken rounded-lg p-1 border border-border-subtle\">\n <button\n type=\"button\"\n onClick={() => setUsageView('workspace')}\n className={`flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${\n usageView === 'workspace'\n ? 'bg-bg-surface text-text-primary shadow-elevation-1 font-medium'\n : 'text-text-secondary hover:text-text-primary'\n }`}\n >\n <Layers className=\"size-3.5\" />\n Workspace\n </button>\n <button\n type=\"button\"\n onClick={() => setUsageView('global')}\n className={`flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${\n usageView === 'global'\n ? 'bg-bg-surface text-text-primary shadow-elevation-1 font-medium'\n : 'text-text-secondary hover:text-text-primary'\n }`}\n >\n <Package className=\"size-3.5\" />\n Global\n </button>\n </div>\n\n {/ Billing Account Selector — only shown for global view /}\n {usageView === 'global' && billingAccounts.length > 1 && (\n <select\n value={effectiveBillingAccountId \|\| ''}\n onChange={(e) => setSelectedBillingAccountId(e.target.value)}\n className=\"px-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)] w-full sm:min-w-[200px]\"\n >\n {billingAccounts.map((account) => (\n <option key={account.id} value={account.id}>\n {account.name}\n </option>\n ))}\n </select>\n )}\n\n {/ Refresh Button /}\n <button\n type=\"button\"\n onClick={() => (usageView === 'workspace' ? undefined : refetch())}\n className=\"p-2 border border-border-subtle rounded-button text-text-secondary hover:text-text-primary hover:bg-bg-sunken hover:border-border-strong transition-all duration-200\"\n aria-label=\"Refresh\"\n title=\"Refresh\"\n >\n <RefreshCw className=\"size-4\" />\n </button>\n </div>\n </div>\n\n {/ Workspace Usage Section /}\n {usageView === 'workspace' && workspaceId && (\n <WorkspaceUsageSection workspaceId={workspaceId} />\n )}\n\n {usageView === 'workspace' && !workspaceId && (\n <div className=\"text-center py-12 text-text-secondary text-sm\">\n No workspace context available.\n </div>\n )}\n\n {/ Global Usage Section — Search and Filters /}\n {usageView === 'global' && (\n <>\n {/ Search and Filters /}\n <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center\">\n {/ Search Input /}\n <div className=\"relative flex-1 max-w-md\">\n <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-muted\" />\n <input\n type=\"text\"\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n placeholder={`Search ${viewMode === 'past' ? 'past' : viewMode === 'all' ? 'all' : 'active'} quotas...`}\n className=\"w-full pl-9 pr-3 py-2 text-sm border border-border-subtle rounded-input bg-bg-surface text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n />\n {(searchQuery \|\| isSearching) && (\n <button\n type=\"button\"\n onClick={() => setSearchQuery('')}\n aria-label=\"Clear search\"\n className=\"absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-bg-sunken\"\n >\n {isSearching ? (\n <RefreshCw className=\"size-3 text-text-muted animate-spin\" />\n ) : (\n <X className=\"size-3 text-text-muted\" />\n )}\n </button>\n )}\n </div>\n\n {/ View Mode Tabs /}\n <div className=\"flex items-center bg-bg-sunken rounded-lg p-1 border border-border-subtle\">\n <button\n type=\"button\"\n onClick={() => setViewMode('active')}\n className={`flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${\n viewMode === 'active'\n ? 'bg-bg-surface text-text-primary shadow-elevation-1 font-medium'\n : 'text-text-secondary hover:text-text-primary'\n }`}\n >\n <Package className=\"size-3.5\" />\n Active\n </button>\n <button\n type=\"button\"\n onClick={() => setViewMode('past')}\n disabled={isPastSubscriptionsLoading && viewMode !== 'past'}\n className={`flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-button transition-all duration-200 ${\n viewMode === 'past'\n ? 'bg-bg-surface text-text-primary shadow-elevation-1 font-medium'\n : 'text-text-secondary hover:text-text-primary'\n } ${isPastSubscriptionsLoading && viewMode !== 'past' ? 'opacity-70' : ''}`}\n >\n {isPastSubscriptionsLoading && viewMode === 'past' ? (\n <RefreshCw className=\"size-3.5 animate-spin\" />\n ) : (\n <Clock className=\"size-3.5\" />\n )}\n Past\n </button>\n </div>\n\n {/ Active Filters Indicator /}\n {hasActiveFilters && (\n <button\n type=\"button\"\n onClick={clearFilters}\n className=\"flex items-center gap-1.5 px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary border border-border-subtle rounded-button hover:bg-bg-sunken transition-colors\"\n >\n <X className=\"size-3\" />\n Clear filters\n </button>\n )}\n </div>\n\n {/ Billing Account Info /}\n {selectedAccount && (\n <div className=\"text-sm text-text-secondary\">\n Viewing usage for{' '}\n <span className=\"font-medium text-text-primary\">{selectedAccount.name}</span>\n </div>\n )}\n\n {/ Overview Stats - Clickable to filter /}\n {dashboard && (\n <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-4\">\n <StatCard\n label=\"Total Quotas\"\n value={dashboard.totalQuotas}\n icon={<Layers className=\"size-5\" />}\n color=\"blue\"\n isActive={statusFilter === 'all'}\n onClick={() => setStatusFilter('all')}\n />\n <StatCard\n label=\"Healthy\"\n value={dashboard.healthyQuotas}\n icon={<CheckCircle className=\"size-5\" />}\n color=\"emerald\"\n isActive={statusFilter === 'healthy'}\n onClick={() => toggleStatusFilter('healthy')}\n />\n <StatCard\n label=\"Warning\"\n value={dashboard.warningQuotas}\n icon={<AlertCircle className=\"size-5\" />}\n color=\"amber\"\n isActive={statusFilter === 'warning'}\n onClick={() => toggleStatusFilter('warning')}\n />\n <StatCard\n label=\"Critical / Exhausted\"\n value={dashboard.criticalQuotas + dashboard.exhaustedQuotas}\n icon={<AlertTriangle className=\"size-5\" />}\n color=\"red\"\n isActive={statusFilter === 'critical'}\n onClick={() => toggleStatusFilter('critical')}\n />\n </div>\n )}\n\n {/ Request More Quota Banner — shown when any quotas are warning or critical/exhausted /}\n {dashboard &&\n (dashboard.warningQuotas > 0 \|\|\n dashboard.criticalQuotas > 0 \|\|\n dashboard.exhaustedQuotas > 0) && (\n <div\n className={`flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between p-4 rounded-lg border ${\n dashboard.criticalQuotas > 0 \|\| dashboard.exhaustedQuotas > 0\n ? `${statusTokens.error.bg} ${statusTokens.error.border}`\n : `${statusTokens.warning.bg} ${statusTokens.warning.border}`\n }`}\n >\n <div className=\"flex items-center gap-3\">\n {dashboard.criticalQuotas > 0 \|\| dashboard.exhaustedQuotas > 0 ? (\n <XCircle className={`size-5 shrink-0 ${statusTokens.error.icon}`} />\n ) : (\n <AlertCircle className={`size-5 shrink-0 ${statusTokens.warning.icon}`} />\n )}\n <div>\n <p\n className={`text-sm font-medium ${\n dashboard.criticalQuotas > 0 \|\| dashboard.exhaustedQuotas > 0\n ? statusTokens.error.text\n : statusTokens.warning.text\n }`}\n >\n {dashboard.criticalQuotas > 0 \|\| dashboard.exhaustedQuotas > 0\n ? `${dashboard.criticalQuotas + dashboard.exhaustedQuotas} quota${dashboard.criticalQuotas + dashboard.exhaustedQuotas !== 1 ? 's' : ''} exhausted or critical`\n : `${dashboard.warningQuotas} quota${dashboard.warningQuotas !== 1 ? 's' : ''} approaching the limit`}\n </p>\n <p className=\"text-xs text-text-secondary mt-0.5\">\n Contact support to request a quota increase for your plan.\n </p>\n </div>\n </div>\n <button\n type=\"button\"\n onClick={() => navigate('/support/tickets')}\n className={`shrink-0 px-4 py-2 text-sm font-medium rounded-button border transition-colors duration-200 ${\n dashboard.criticalQuotas > 0 \|\| dashboard.exhaustedQuotas > 0\n ? 'bg-action-danger-bg text-action-danger-text border-action-danger-bg hover:bg-action-danger-bgHover'\n : 'border-status-warning-border text-status-warning-text hover:bg-status-warning-bg-subtle'\n }`}\n >\n Request more quota\n </button>\n </div>\n )}\n\n {/ Filter Results Info /}\n {(hasActiveFilters \|\| viewMode !== 'active') && (\n <div className=\"flex items-center gap-2 text-sm text-text-secondary flex-wrap\">\n <span>\n Showing{' '}\n {displayedSubscriptions.active.reduce(\n (acc, s) => acc + s.aggregatedQuotas.length,\n 0\n ) +\n displayedSubscriptions.past.reduce(\n (acc, s) => acc + s.aggregatedQuotas.length,\n 0\n ) +\n (viewMode !== 'past' ? filteredPooledQuotas.length : 0)}{' '}\n quotas\n </span>\n <span className=\"px-2 py-0.5 bg-[var(--color-accent-soft)] text-text-link rounded text-xs capitalize\">\n {viewMode === 'active' ? 'Active' : viewMode === 'past' ? 'Past' : 'All'}{' '}\n subscriptions\n </span>\n {statusFilter !== 'all' && (\n <span className=\"px-2 py-0.5 bg-bg-sunken text-text-secondary rounded text-xs capitalize\">\n {statusFilter === 'critical' ? 'Critical / Exhausted' : statusFilter}\n </span>\n )}\n {searchQuery && (\n <span className=\"px-2 py-0.5 bg-bg-sunken text-text-secondary rounded text-xs\">\n “{searchQuery}”\n </span>\n )}\n </div>\n )}\n\n {/ Active Subscriptions Section /}\n {displayedSubscriptions.active.length > 0 && (\n <section>\n <h2 className=\"text-lg font-semibold text-text-primary mb-4 flex items-center gap-2\">\n <Package className=\"size-5 text-text-link\" />\n {viewMode === 'all' ? 'Active Subscription Quotas' : 'Subscription Quotas'}\n </h2>\n <div className=\"space-y-4\">\n {displayedSubscriptions.active.map((subscription) => (\n <SubscriptionSection\n key={subscription.id}\n subscription={subscription}\n onQuotaClick={setSelectedQuota}\n defaultExpanded={true}\n />\n ))}\n </div>\n </section>\n )}\n\n {/ Past Subscriptions Section (when viewMode is 'past' or 'all') /}\n {displayedSubscriptions.past.length > 0 && (\n <section>\n <h2 className=\"text-lg font-semibold text-text-primary mb-4 flex items-center gap-2\">\n <Clock className=\"size-5 text-text-muted\" />\n Past Subscription Quotas\n <span className=\"text-xs font-normal text-text-secondary\">\n (Canceled / Expired / Upgraded)\n </span>\n {pastSubscriptionsCount > 0 && (\n <span className=\"text-xs font-normal px-2 py-0.5 bg-bg-sunken text-text-secondary rounded-full tabular-nums\">\n {displayedSubscriptions.past.length}\n {hasMorePastSubscriptions ? '+' : ''} of {pastSubscriptionsCount}\n </span>\n )}\n </h2>\n <div className=\"space-y-4\">\n {displayedSubscriptions.past.map((subscription) => (\n <SubscriptionSection\n key={subscription.id}\n subscription={subscription}\n onQuotaClick={setSelectedQuota}\n defaultExpanded={viewMode === 'past'}\n />\n ))}\n\n {/ Load More Button /}\n {hasMorePastSubscriptions && (\n <div className=\"flex justify-center pt-2\">\n <button\n type=\"button\"\n onClick={loadMorePastSubscriptions}\n disabled={isLoadingMorePast}\n className=\"flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-primary border border-border-subtle rounded-button hover:bg-bg-sunken transition-colors disabled:opacity-50\"\n >\n {isLoadingMorePast ? (\n <>\n <RefreshCw className=\"size-4 animate-spin\" />\n Loading…\n </>\n ) : (\n <>\n <ChevronDown className=\"size-4\" />\n Load more past subscriptions\n </>\n )}\n </button>\n </div>\n )}\n </div>\n </section>\n )}\n\n {/ Pooled Quotas Section - Only show for active/all views (pooled quotas are account-level) /}\n {viewMode !== 'past' && filteredPooledQuotas.length > 0 && (\n <section>\n <h2 className=\"text-lg font-semibold text-text-primary mb-4 flex items-center gap-2\">\n <Layers className={`size-5 ${statusTokens.info.icon}`} />\n Pooled Quotas\n <span className=\"text-xs font-normal text-text-secondary\">\n (Shared across all products)\n </span>\n </h2>\n <QuotaTable\n quotas={filteredPooledQuotas}\n showPlanColumn={false}\n onQuotaClick={setSelectedQuota}\n />\n </section>\n )}\n\n {/ Empty State - No quotas at all (when viewing active) /}\n {viewMode === 'active' &&\n activeSubscriptions.length === 0 &&\n pooledQuotas.length === 0 &&\n !hasActiveFilters && (\n <div className=\"flex flex-col items-center justify-center py-12 border border-dashed border-border-subtle rounded-card\">\n <div className=\"size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4\">\n <Layers className=\"size-6 text-text-link\" />\n </div>\n <h3 className=\"text-base font-semibold text-text-primary\">\n No active quotas found\n </h3>\n <p className=\"text-sm text-text-secondary mt-1 text-center max-w-sm\">\n Quotas will appear here once you have active subscriptions or pooled allocations.\n </p>\n </div>\n )}\n\n {/ Empty State - No past subscriptions /}\n {viewMode === 'past' &&\n pastSubscriptions.length === 0 &&\n !hasActiveFilters &&\n !isPastSubscriptionsLoading && (\n <div className=\"flex flex-col items-center justify-center py-12 border border-dashed border-border-subtle rounded-card\">\n <div className=\"size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4\">\n <Clock className=\"size-6 text-text-link\" />\n </div>\n <h3 className=\"text-base font-semibold text-text-primary\">No past subscriptions</h3>\n <p className=\"text-sm text-text-secondary mt-1 text-center max-w-sm\">\n You don't have any canceled, expired, or upgraded subscriptions yet.\n </p>\n <button\n type=\"button\"\n onClick={() => setViewMode('active')}\n className=\"mt-4 px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200\"\n >\n View active subscriptions\n </button>\n </div>\n )}\n\n {/ Loading State for Past Subscriptions /}\n {viewMode === 'past' && isPastSubscriptionsLoading && (\n <div className=\"space-y-4\">\n {[1, 2, 3].map((i) => (\n <div key={i} className=\"h-24 bg-bg-sunken animate-pulse rounded-card\" />\n ))}\n </div>\n )}\n\n {/ Empty State - No results from search/filter /}\n {hasActiveFilters &&\n displayedSubscriptions.active.length === 0 &&\n displayedSubscriptions.past.length === 0 &&\n (viewMode === 'past' \|\| filteredPooledQuotas.length === 0) && (\n <div className=\"flex flex-col items-center justify-center py-12 border border-dashed border-border-subtle rounded-card\">\n <div className=\"size-12 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center mb-4\">\n {statusFilter !== 'all' && !searchQuery ? (\n <StatusIcon\n status={\n (statusFilter === 'healthy'\n ? 'HEALTHY'\n : statusFilter === 'warning'\n ? 'WARNING'\n : 'CRITICAL') as QuotaStatus\n }\n className=\"size-6\"\n />\n ) : (\n <Search className=\"size-6 text-text-link\" />\n )}\n </div>\n <h3 className=\"text-base font-semibold text-text-primary\">\n {statusFilter !== 'all' && !searchQuery\n ? `No ${statusFilter === 'critical' ? 'critical or exhausted' : statusFilter} quotas`\n : 'No matching quotas'}\n </h3>\n <p className=\"text-sm text-text-secondary mt-1 text-center max-w-sm\">\n {statusFilter !== 'all' && !searchQuery ? (\n <>\n All your quotas are in a different status.\n {dashboard && (\n <span className=\"block mt-1\">\n You have {dashboard.healthyQuotas} healthy, {dashboard.warningQuotas}{' '}\n warning, and {dashboard.criticalQuotas + dashboard.exhaustedQuotas}{' '}\n critical quotas.\n </span>\n )}\n </>\n ) : (\n <>\n No quotas match your current search or filter criteria in{' '}\n {viewMode === 'past' ? 'past' : viewMode === 'all' ? 'any' : 'active'}{' '}\n subscriptions.\n {viewMode === 'active' && !statusFilter.includes('all') && (\n <span className=\"block mt-1\">\n Try switching to “Past” or “All” to search across\n more subscriptions.\n </span>\n )}\n </>\n )}\n </p>\n <div className=\"flex gap-2 mt-4\">\n <button\n type=\"button\"\n onClick={clearFilters}\n className=\"px-4 py-2 text-sm font-medium border border-border-subtle text-text-primary rounded-button hover:bg-bg-sunken transition-colors\"\n >\n {statusFilter !== 'all' ? 'Show all quotas' : 'Clear filters'}\n </button>\n {viewMode === 'active' && searchQuery && (\n <button\n type=\"button\"\n onClick={() => setViewMode('all')}\n className=\"px-4 py-2 text-sm font-medium bg-action-primary-bg text-action-primary-text rounded-button hover:bg-action-primary-bgHover transition-colors duration-200\"\n >\n Search all\n </button>\n )}\n </div>\n </div>\n )}\n </>\n )}\n\n {/ Quota Detail Modal */}\n {selectedQuota && (\n <QuotaDetailModal quota={selectedQuota} onClose={() => setSelectedQuota(null)} />\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAqDA,SAAS,EAAuB,GAAc,GAAkD;AAC9F,KAAI,GAAS,eAAe,OAAO,EAAQ,eAAgB,SAAU,QAAO,EAAQ;AACpF,KAAI,GAAS,SAAS,OAAO,EAAQ,SAAU,SAAU,QAAO,EAAQ;CACxE,IAAM,IAAQ,EAAK,MAAM,IAAI;AAE7B,SADmB,EAAM,SAAS,IAAI,EAAM,MAAM,EAAE,GAAG,GAEpD,KAAK,MAAM,EAAE,QAAQ,MAAM,IAAI,CAAC,QAAQ,UAAU,MAAM,EAAE,aAAa,CAAC,CAAC,CACzE,KAAK,IAAI;;AAOd,IAAM,MAA+D,EACnE,WACA,eAAY,eACR;AACJ,SAAQ,GAAR;EACE,KAAK,YACH,QAAO,kBAAC,GAAD,EAAS,WAAW,GAAG,EAAU,GAAG,EAAa,MAAM,QAAU,CAAA;EAC1E,KAAK,WACH,QAAO,kBAAC,GAAD,EAAe,WAAW,GAAG,EAAU,GAAG,EAAa,MAAM,QAAU,CAAA;EAChF,KAAK,UACH,QAAO,kBAAC,GAAD,EAAa,WAAW,GAAG,EAAU,GAAG,EAAa,QAAQ,QAAU,CAAA;EAChF,KAAK,UACH,QAAO,kBAAC,GAAD,EAAa,WAAW,GAAG,EAAU,GAAG,EAAa,QAAQ,QAAU,CAAA;EAChF,QACE,QAAO,kBAAC,GAAD,EAAM,WAAW,GAAG,EAAU,GAAG,EAAa,QAAQ,QAAU,CAAA;;GAIvE,KAA4C,EAAE,gBAUhD,kBAAC,QAAD;CAAM,WAAW,gDATyB;EAC1C,WAAW,GAAG,EAAa,MAAM,GAAG,GAAG,EAAa,MAAM;EAC1D,UAAU,GAAG,EAAa,MAAM,GAAG,GAAG,EAAa,MAAM;EACzD,SAAS,GAAG,EAAa,QAAQ,GAAG,GAAG,EAAa,QAAQ;EAC5D,SAAS,GAAG,EAAa,QAAQ,GAAG,GAAG,EAAa,QAAQ;EAC5D,UAAU,GAAG,EAAa,QAAQ,GAAG,GAAG,EAAa,QAAQ;EAC9D,CAGyE;WACrE;CACI,CAAA,EAIL,KAAgE,EAAE,eAAY,gBAAa;CAC/F,IAAM,IAAoB,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,EAAW,CAAC;AAUhE,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GACE,WAAW,mDAX8B;IAC7C,WAAW,EAAa,MAAM;IAC9B,UAAU,EAAa,MAAM;IAC7B,SAAS,EAAa,QAAQ;IAC9B,SAAS,EAAa,QAAQ;IAC9B,UAAU,EAAa,QAAQ;IAChC,CAK6E;GACxE,OAAO,EAAE,OAAO,GAAG,EAAkB,IAAI;GACzC,CAAA;EACE,CAAA;GAmBJ,KAA+B,EAAE,UAAO,UAAO,SAAM,UAAO,aAAU,iBAAc;CAUxF,IAAM,IARgB;EACpB,MAAM,EAAa;EACnB,SAAS,EAAa;EACtB,OAAO,EAAa;EACpB,KAAK,EAAa;EAClB,MAAM,EAAa;EACpB,CAE4B,IAGvB,IAAa;EACjB,MAAM,EAAa,KAAK;EACxB,SAAS,EAAa,QAAQ;EAC9B,OAAO,EAAa,QAAQ;EAC5B,KAAK,EAAa,MAAM;EACxB,MAAM,EAAa,QAAQ;EAC5B;AAED,QACE,kBAAC,UAAD;EACE,MAAK;EACI;EACT,gBAAc;EACd,WAAW,kGACT,IACI,gOACA,GACL,GAAG,IAAW,+DAA+D;YARhF,CAUE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD;IAAM,WAAU;cAA+B;IAAa,CAAA,EAC5D,kBAAC,QAAD;IACE,WAAW,+DAA+D,EAAO;cAEjF,kBAAC,QAAD;KAAM,WAAW,EAAW;eAAS;KAAY,CAAA;IAC5C,CAAA,CACH;MACN,kBAAC,KAAD;GAAG,WAAU;aAA8D;GAAU,CAAA,CAC9E;;GAcP,KAAyC,EAAE,UAAO,cAAW,iBAAc;CAC/E,IAAM,IAAW,EAAM,cAAc,QAAQ,EAAM,aAAa,KAAK,CAAC,EAAM;AAE5E,QACE,kBAAC,MAAD;EACW;EACT,WAAU;YAFZ;GAKE,kBAAC,MAAD;IAAI,WAAU;cAAd;KACE,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAM,eAAe,EAAM,KAAK,QAAQ,MAAM,IAAI;MAC9C,CAAA;KACP,kBAAC,QAAD;MAAM,WAAU;gBAAkD,EAAM;MAAY,CAAA;KACnF,EAAM,eACL,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAM;MACF,CAAA;KAER,EAAM,aAAa,KAClB,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACG,EAAM,YAAW,eACb;;KAEN;;GAGJ,MAAc,KAAA,KACb,kBAAC,MAAD;IAAI,WAAU;cAA2D;IAAe,CAAA;GAI1F,kBAAC,MAAD;IAAI,WAAU;cACZ,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAhB;OACG,EAAa,EAAM,UAAU;OAAC;OAC9B,IAAW,EAAa,EAAM,WAAW,GAAG;OAC5C,EAAM,OAAO,IAAI,EAAM,SAAS;OAC5B;SACP,kBAAC,GAAD;MAAa,YAAY,IAAW,EAAM,kBAAkB;MAAG,QAAQ,EAAM;MAAU,CAAA,CACnF;;IACH,CAAA;GAGL,kBAAC,MAAD;IAAI,WAAU;cACX,IAAW,EAAa,EAAM,WAAW,GAAG;IAC1C,CAAA;GAGL,kBAAC,MAAD;IAAI,WAAU;cACZ,kBAAC,GAAD,EAAa,QAAQ,EAAM,QAAU,CAAA;IAClC,CAAA;GACF;;GAYH,MAAmC,EACvC,WACA,cACA,oBAAiB,IACjB,sBAEA,kBAAC,OAAD;CAAK,WAAU;WACb,kBAAC,SAAD;EAAO,WAAU;YAAjB,CACE,kBAAC,SAAD,EAAA,UACE,kBAAC,MAAD;GAAI,WAAU;aAAd;IACE,kBAAC,MAAD;KAAI,WAAU;eAA6E;KAEtF,CAAA;IACJ,KACC,kBAAC,MAAD;KAAI,WAAU;eAA6E;KAEtF,CAAA;IAEP,kBAAC,MAAD;KAAI,WAAU;eAA6E;KAEtF,CAAA;IACL,kBAAC,MAAD;KAAI,WAAU;eAA6E;KAEtF,CAAA;IACL,kBAAC,MAAD;KAAI,WAAU;eAA6E;KAEtF,CAAA;IACF;MACC,CAAA,EACR,kBAAC,SAAD,EAAA,UACG,EAAO,KAAK,MACX,kBAAC,GAAD;GAES;GACP,WAAW,IAAiB,IAAY,KAAA;GACxC,eAAe,EAAa,EAAM;GAClC,EAJK,EAAM,KAIX,CACF,EACI,CAAA,CACF;;CACJ,CAAA,EAaF,MAAqD,EACzD,iBACA,iBACA,qBAAkB,SACd;CACJ,IAAM,CAAC,GAAY,KAAiB,EAAS,EAAgB,EAEvD,IAAuC;EAC3C,QAAQ,GAAG,EAAa,QAAQ,GAAG,GAAG,EAAa,QAAQ;EAC3D,UAAU,GAAG,EAAa,KAAK,GAAG,GAAG,EAAa,KAAK;EACvD,UAAU,GAAG,EAAa,QAAQ,GAAG,GAAG,EAAa,QAAQ;EAC7D,UAAU,GAAG,EAAa,QAAQ,GAAG,GAAG,EAAa,QAAQ;EAC7D,SAAS,GAAG,EAAa,QAAQ,GAAG,GAAG,EAAa,QAAQ;EAC5D,UAAU,GAAG,EAAa,QAAQ,GAAG,GAAG,EAAa,QAAQ;EAC9D;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAc,CAAC,EAAW;IACzC,iBAAe;IACf,WAAU;cAJZ,CAME,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,WAAU;gBACd,kBAAC,GAAD,EAAS,WAAU,yBAA0B,CAAA;MACxC,CAAA,EACP,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QAAM,WAAU;kBAAgC;QAAmB,CAAA,EACnE,kBAAC,QAAD;QACE,WAAW,2DAA2D,EAAa,EAAa,OAAO,aAAa,KAAK,EAAa;kBAErI,EAAa;QACT,CAAA,CACH;UACN,kBAAC,KAAD;OAAG,WAAU;iBAAb;QACG,EAAa,iBAAiB;QAAO;QACrC,EAAa,iBAAiB,WAAW,IAAU,KAAN;QAC5C;SACA;QACF;QAEJ,EADD,IACE,IAEA,GAFD,EAAa,WAAU,0BAA2B,CAEC,CAE9C;;GAER,KAAc,EAAa,iBAAiB,SAAS,KACpD,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,IAAD;KACE,QAAQ,EAAa;KACrB,WAAW,EAAa,YAAY,EAAa,aAAa,KAAA;KAC9D,gBAAgB,CAAC,EAAE,EAAa,YAAY,EAAa;KAC3C;KACd,CAAA;IACE,CAAA;GAGP,KAAc,EAAa,iBAAiB,WAAW,KACtD,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,KAAD;KAAG,WAAU;eAA8B;KAA2C,CAAA;IAClF,CAAA;GAEJ;;GAQJ,MAA+C,EAAE,UAAO,iBAAc;CAE1E,IAAM,CAAC,GAAa,KAAkB,EAA+B,CAAC,KAAK,CAAC,EACtE,IAAgB,EAAY,EAAY,SAAS,MAAM,MACvD,IAAc,EAAY,QAC1B,EAAE,mBAAgB,GAAY,EAG9B,IAAoB,EAAM,iBAAiB,IAAI,IAC/C,EAAE,WAAQ,gBAAa,eAAY,iBAAc,EACrD,GACA,IACA,GACA,EACD,EAGK,EAAE,cAAW,WAAW,MAAuB,EACnD,GACA,EAAM,MACN,GACD,EAEK,UAAmB;AACvB,EAAI,KAAY,GAAgB,MAAS,CAAC,GAAG,GAAM,EAAW,CAAC;IAG3D,UAAmB;AACvB,EAAI,EAAY,SAAS,KAAG,GAAgB,MAAS,EAAK,MAAM,GAAG,GAAG,CAAC;;AAGzE,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;GAAoC,SAAS;GAAW,CAAA,EACvE,kBAAC,OAAD;GACE,WAAU;GACV,MAAK;GACL,cAAW;GACX,mBAAgB;aAJlB;IAOE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,IAAD;OAAY,QAAQ,EAAM;OAAQ,WAAU;OAAW,CAAA,EACvD,kBAAC,OAAD,EAAA,UAAA;OACE,kBAAC,MAAD;QACE,IAAG;QACH,WAAU;kBAET,EAAM,eAAe,EAAM,KAAK,QAAQ,MAAM,IAAI;QAChD,CAAA;OACL,kBAAC,KAAD;QAAG,WAAU;kBAAqC,EAAM;QAAS,CAAA;OAChE,EAAM,eACL,kBAAC,KAAD;QAAG,WAAU;kBAAsC,EAAM;QAAgB,CAAA;OAE3E,kBAAC,KAAD;QAAG,WAAU;kBAAb;SACG,EAAM;SAAW;SAAkB,EAAM,eAAe,IAAU,KAAN;SAC3D;;OACA,EAAA,CAAA,CACF;SACN,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;MACV,cAAW;gBAEX,kBAAC,GAAD,EAAG,WAAU,UAAW,CAAA;MACjB,CAAA,CACL;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAA8B;SAAY,CAAA,EAC1D,kBAAC,GAAD,EAAa,QAAQ,EAAM,QAAU,CAAA,CACjC;;OACN,kBAAC,GAAD;QAAa,YAAY,EAAM;QAAiB,QAAQ,EAAM;QAAU,CAAA;OACxE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAAhB;UACG,EAAa,EAAM,UAAU;UAAC;UAAG;UACjC,EAAM,cAAc,QAAQ,EAAM,aAAa,IAC5C,EAAa,EAAM,WAAW,GAC9B;UACH,EAAM,QAAQ,IAAI,EAAM;UACpB;YACP,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAM,cAAc,QAAQ,EAAM,aAAa,IAC5C,GAAG,KAAK,MAAM,EAAM,gBAAgB,CAAC,UACrC;SACC,CAAA,CACH;;OACF;SAGL,EAAM,aAAa,KAClB,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,MAAD;OAAI,WAAU;iBAA6C;OAAoB,CAAA,EAC/E,kBAAC,OAAD;OAAK,WAAU;iBACZ,CAAC,GAAG,EAAM,iBAAiB,CACzB,MAAM,GAAG,OAEM,EAAE,UAAU,IAAI,KAAK,EAAE,QAAQ,CAAC,SAAS,GAAG,aAC5C,EAAE,UAAU,IAAI,KAAK,EAAE,QAAQ,CAAC,SAAS,GAAG,UAE1D,CACD,KAAK,MAAe;QACnB,IAAM,IAAa,EAAW,UAAU,IAAI,KAAK,EAAW,QAAQ,GAAG,MACjE,oBAAM,IAAI,MAAM,EAChB,IAAY,KAAc,IAAa,GACvC,IAAkB,IACpB,KAAK,MAAM,EAAW,SAAS,GAAG,EAAI,SAAS,KAAK,OAAU,KAAK,KAAM,GACzE,MACE,IACJ,MAAoB,QAAQ,IAAkB,KAAK,KAAmB;AAExE,eACE,kBAAC,OAAD;SAEE,WAAW,iDACT,IACI,iBACA,IACE,EAAa,QAAQ,KACrB;mBAPV,CAUE,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACG,KAAkB,CAAC,KAClB,kBAAC,QAAD,EACE,WAAW,uBAAuB,EAAa,QAAQ,IAAI,iBAC3D,CAAA,EAEJ,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,QAAD;YACE,WAAW,WAAW,IAAY,oBAAoB;sBAErD,IACG,EAAW,mBAAmB,SAAS;aACrC,OAAO;aACP,KAAK;aACL,MAAM;aACP,CAAC,GACF;YACC,CAAA,EACP,kBAAC,QAAD;YACE,WAAW,WACT,IACI,2BACA,IACE,EAAa,QAAQ,OACrB;sBAGP,IACG,YACA,MAAoB,OAMlB,kBALA,MAAoB,IAClB,kBACA,MAAoB,IAClB,qBACA,GAAG,EAAgB;YAExB,CAAA,CACH;aACF;aACN,kBAAC,OAAD;UAAK,WAAU;oBACb,kBAAC,QAAD;WACE,WAAW,sCAAsC,IAAY,oBAAoB;qBADnF,CAGG,EAAa,EAAW,KAAK,EAC9B,kBAAC,QAAD;YAAM,WAAU;sBAAhB;aACG;aACA,EAAW,SAAS,QAAQ,EAAW,QAAQ,IAC5C,EAAa,EAAW,MAAM,GAC9B;aACH,EAAW,QAAQ,IAAI,EAAW;aAC9B;cACF;;UACH,CAAA,CACF;WA9DC,EAAW,GA8DZ;SAER;OACA,CAAA,CACF;QAEJ;;KAGJ,KAAsB,EAAU,SAAS,MACzC,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAA6C;MAAuB,CAAA,EACjF,IACC,kBAAC,OAAD;MAAK,WAAU;gBACZ;OAAC;OAAG;OAAG;OAAE,CAAC,KAAK,MACd,kBAAC,OAAD,EAAa,WAAU,0CAA2C,EAAxD,EAAwD,CAClE;MACE,CAAA,GAEN,kBAAC,OAAD;MAAK,WAAU;gBACZ,EAAU,KAAK,MACd,kBAAC,OAAD;OAEE,WAAU;iBAFZ,CAIE,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAe,EAAK,WAAW;QAC3B,CAAA,EACP,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SACG,EAAa,EAAK,MAAM;SACxB,EAAM,QACL,kBAAC,QAAD;UAAM,WAAU;oBAAoC,EAAM;UAAY,CAAA;SAEvE,CAAC,EAAK,WAAW,EAAK,SAAS,QAC9B,kBAAC,QAAD;UAAM,WAAU;oBAAhB,CAAmD,MAC9C,EAAa,EAAK,MAAM,CACtB;;SAEJ;UACH;SAjBC,EAAK,GAiBN,CACN;MACE,CAAA,CAEJ;;IAIR,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,MAAD;OAAI,WAAU;iBAA6C;OAAiB,CAAA;MAE3E,EAAM,mBACL,kBAAC,KAAD;OAAG,WAAU;iBAA+C;OAGxD,CAAA,GACF,IACF,kBAAC,OAAD;OAAK,WAAU;iBACZ;QAAC;QAAG;QAAG;QAAE,CAAC,KAAK,MACd,kBAAC,OAAD,EAAa,WAAU,2CAA4C,EAAzD,EAAyD,CACnE;OACE,CAAA,GACJ,EAAO,WAAW,IACpB,kBAAC,KAAD;OAAG,WAAU;iBAA+C;OAA0B,CAAA,GAEtF,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAO,KAAK,MACX,kBAAC,OAAD;QAEE,WAAU;kBAFZ,CAIE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,KAAD;UAAG,WAAU;oBACV,EAAM,eAAe;UACpB,CAAA,EACJ,kBAAC,KAAD;UAAG,WAAU;oBAAb;WACG,EAAmB,EAAM,UAAU;WAAC;WAAI,EAAe,EAAM,UAAU;WACtE;YACA;YACN,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAa,EAAM,OAAO;SACtB,CAAA,CACH;UAdC,EAAM,GAcP,CACN;OACE,CAAA;MAIP,CAAC,EAAM,qBAAqB,EAAY,SAAS,KAAK,MACrD,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,UAAD;SACE,MAAK;SACL,SAAS;SACT,UAAU,EAAY,WAAW;SACjC,WAAU;SACV,cAAW;mBAEX,kBAAC,GAAD,EAAa,WAAU,UAAW,CAAA;SAC3B,CAAA;QACT,kBAAC,QAAD;SAAM,WAAU;mBAAhB,CAA2D,SAAM,EAAmB;;QACpF,kBAAC,UAAD;SACE,MAAK;SACL,SAAS;SACT,UAAU,CAAC;SACX,WAAU;SACV,cAAW;mBAEX,kBAAC,GAAD,EAAc,WAAU,UAAW,CAAA;SAC5B,CAAA;QACL;;MAEJ;;IAGN,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBACX;MAEQ,CAAA;KACL,CAAA;IACF;KACF;;;AAYV,SAAS,EAAwB,GAAyB,GAA+B;AAKvF,QAJI,IAAgB,EAAY,UAC5B,KAAmB,MAAY,EAAY,YAC3C,KAAmB,KAAW,EAAY,WAC1C,KAAmB,KAAW,EAAY,UACvC,EAAY;;AAGrB,IAAM,MAAsD,EAAE,qBAAkB;CAC9E,IAAM,EAAE,aAAU,cAAW,UAAO,eAAY,EAA0B,EAAY,EAChF,CAAC,GAAgB,KAAqB,kBAAsB,IAAI,KAAK,CAAC,EAGtE,IAAS,QAAc;EAC3B,IAAM,oBAAM,IAAI,KAA2C;AAC3D,OAAK,IAAM,KAAQ,GAAU;GAC3B,IAAM,IAAW,EAAI,IAAI,EAAK,WAAW,UAAU,IAAI,EAAE;AAEzD,GADA,EAAS,KAAK,EAAK,EACnB,EAAI,IAAI,EAAK,WAAW,WAAW,EAAS;;AAE9C,SAAO,MAAM,KAAK,EAAI,SAAS,CAAC,CAAC,KAAK,CAAC,GAAW,OAAW;GAC3D,IAAM,IAAU,EAAM,OAAO,MAAM,EAAE,WAAW,QAAQ,EAClD,IAAa,IACf,OACA,EAAM,QAAQ,GAAK,MAAM,KAAO,EAAE,WAAW,SAAS,IAAI,EAAE,EAC1D,IAAY,EAAM,QAAQ,GAAK,MAAM,IAAM,EAAE,eAAe,EAAE,EAC9D,IAAiB,KAAc,OAAgC,OAAzB,IAAa,GACnD,IAAkB,IAAc,IAAY,IAAc,MAAM;AAGtE,UAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA,QAVa,EAAwB,GAAiB,EAAQ;IAW9D,SAVc,EAAM,MAAM,MAAM,EAAE,eAAe,KAAK;IAWtD,aAAa,EAAM,SAAS;IAC7B;IACD;IACD,CAAC,EAAS,CAAC,EAER,IAAc,GAAa,MAAsB;AACrD,KAAmB,MAAS;GAC1B,IAAM,IAAO,IAAI,IAAI,EAAK;AAM1B,UALI,EAAK,IAAI,EAAU,GACrB,EAAK,OAAO,EAAU,GAEtB,EAAK,IAAI,EAAU,EAEd;IACP;IACD,EAAE,CAAC;AAEN,KAAI,KAAa,EAAS,WAAW,EACnC,QACE,kBAAC,OAAD;EAAK,WAAU;YACZ;GAAC;GAAG;GAAG;GAAE,CAAC,KAAK,MACd,kBAAC,OAAD,EAAa,WAAU,gDAAiD,EAA9D,EAA8D,CACxE;EACE,CAAA;AAIV,KAAI,EACF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD,EAAe,WAAU,yCAA0C,CAAA;GACnE,kBAAC,KAAD;IAAG,WAAU;cAA+B,EAAM;IAAY,CAAA;GAC9D,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,GAAS;IACxB,WAAU;cACX;IAEQ,CAAA;GACL;;AAIV,KAAI,EAAS,WAAW,EACtB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAQ,WAAU,yBAA0B,CAAA;IACxC,CAAA;GACN,kBAAC,MAAD;IAAI,WAAU;cAA4C;IAAiC,CAAA;GAC3F,kBAAC,KAAD;IAAG,WAAU;cAA+C;IAGxD,CAAA;GACA;;CAKV,IAAM,IAAU,EAAO,QAAQ,MAAM,EAAE,WAAW,EAAY,QAAQ,CAAC,QACjE,IAAU,EAAO,QAAQ,MAAM,EAAE,WAAW,EAAY,QAAQ,CAAC,QACjE,IAAW,EAAO,QACrB,MAAM,EAAE,WAAW,EAAY,YAAY,EAAE,WAAW,EAAY,UACtE,CAAC;AAEF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QACE,WAAW,sDAAsD,EAAa,QAAQ;kBAEtF,kBAAC,GAAD,EAAa,WAAW,UAAU,EAAa,QAAQ,QAAU,CAAA;QAC5D,CAAA,EACP,kBAAC,QAAD;QAAM,WAAU;kBAA8B;QAAc,CAAA,CACxD;UACN,kBAAC,KAAD;OAAG,WAAU;iBAAwD;OAAY,CAAA,CAC7E;;KACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QACE,WAAW,sDAAsD,EAAa,QAAQ;kBAEtF,kBAAC,GAAD,EAAa,WAAW,UAAU,EAAa,QAAQ,QAAU,CAAA;QAC5D,CAAA,EACP,kBAAC,QAAD;QAAM,WAAU;kBAA8B;QAAc,CAAA,CACxD;UACN,kBAAC,KAAD;OAAG,WAAU;iBAAwD;OAAY,CAAA,CAC7E;;KACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QACE,WAAW,sDAAsD,EAAa,MAAM;kBAEpF,kBAAC,GAAD,EAAS,WAAW,UAAU,EAAa,MAAM,QAAU,CAAA;QACtD,CAAA,EACP,kBAAC,QAAD;QAAM,WAAU;kBAA8B;QAA2B,CAAA,CACrE;UACN,kBAAC,KAAD;OAAG,WAAU;iBAAwD;OAAa,CAAA,CAC9E;;KACF;;GAGN,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,SAAD;KAAO,WAAU;eAAjB,CACE,kBAAC,SAAD,EAAA,UACE,kBAAC,MAAD;MAAI,WAAU;gBAAd;OACE,kBAAC,MAAD;QAAI,WAAU;kBAAkF;QAE3F,CAAA;OACL,kBAAC,MAAD;QAAI,WAAU;kBAAuG;QAEhH,CAAA;OACL,kBAAC,MAAD;QAAI,WAAU;kBAAkF;QAE3F,CAAA;OACL,kBAAC,MAAD;QAAI,WAAU;kBAAuG;QAEhH,CAAA;OACL,kBAAC,MAAD;QAAI,WAAU;kBAAkF;QAE3F,CAAA;OACF;SACC,CAAA,EACR,kBAAC,SAAD;MAAO,WAAU;gBACd,EAAO,KAAK,MAAU;OACrB,IAAM,IAAa,EAAe,IAAI,EAAM,UAAU;AACtD,cACE,kBAAA,GAAA,EAAA,UAAA,CAEE,kBAAC,MAAD;QAEE,WAAW,qBAAqB,EAAM,cAAc,sCAAsC;QAC1F,SAAS,EAAM,oBAAoB,EAAY,EAAM,UAAU,GAAG,KAAA;kBAHpE;SAKE,kBAAC,MAAD;UAAI,WAAU;oBACZ,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACG,EAAM,eACL,kBAAC,GAAD,EACE,WAAW,qEAAqE,IAAa,cAAc,MAC3G,CAAA,EAEJ,kBAAC,OAAD,EAAA,UAAA;YACE,kBAAC,OAAD;aAAK,WAAU;uBACZ,EAAuB,EAAM,UAAU;aACpC,CAAA;YACN,kBAAC,OAAD;aAAK,WAAU;uBACZ,EAAM;aACH,CAAA;YACL,EAAM,WACL,kBAAC,OAAD;aAAK,WAAU;uBAAqC;aAE9C,CAAA;YAEJ,EAAA,CAAA,CACF;;UACH,CAAA;SACL,kBAAC,MAAD;UAAI,WAAU;oBACX,EAAM,cACL,kBAAC,QAAD;WAAM,WAAU;qBAAhB,CACG,EAAM,MAAM,QAAO,iBACf;eAEP,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,QAAD;YAAM,WAAU;sBACb,EAAM,MAAM,IAAI,WAAW;YACvB,CAAA,EACP,kBAAC,QAAD;YAAM,WAAU;sBACb,EAAM,MAAM,IAAI,WAAW;YACvB,CAAA,CACH;;UAEL,CAAA;SACL,kBAAC,MAAD;UAAI,WAAU;oBACZ,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACG,EAAa,EAAM,UAAU,EAC7B,CAAC,EAAM,WAAW,EAAM,cAAc,QACrC,kBAAC,QAAD;aAAM,WAAU;uBAAhB;cACG;cAAI;cACF,EAAa,EAAM,WAAW;cAC5B;eAEL;eACL,CAAC,EAAM,WACN,kBAAC,GAAD;YAAa,YAAY,EAAM;YAAiB,QAAQ,EAAM;YAAU,CAAA,CAEtE;;UACH,CAAA;SACL,kBAAC,MAAD;UAAI,WAAU;oBACX,EAAM,UACL,kBAAC,QAAD;WAAM,WAAU;qBAAsB;WAAgB,CAAA,GAEtD,EAAa,EAAM,kBAAkB,EAAE;UAEtC,CAAA;SACL,kBAAC,MAAD;UAAI,WAAU;oBACZ,kBAAC,GAAD,EAAa,QAAQ,EAAM,QAAU,CAAA;UAClC,CAAA;SACF;UApEE,EAAM,UAoER,EAGJ,KACC,EAAM,MAAM,KAAK,MAAS;QACxB,IAAM,IAAY,EAChB,EAAK,iBACL,EAAK,WAAW,QACjB;AACD,eACE,kBAAC,MAAD;SAEE,WAAU;mBAFZ;UAIE,kBAAC,MAAD;WAAI,WAAU;qBACZ,kBAAC,OAAD;YAAK,WAAU;sBAAf,CACE,kBAAC,OAAD;aACE,WAAU;aACV,OAAO,EAAK,WAAW,kBAAkB,KAAA;uBAExC,EAAK,WAAW,kBAAkB;aAC/B,CAAA,EACN,kBAAC,OAAD;aAAK,WAAU;uBAAf,CACE,kBAAC,QAAD;cAAM,WAAU;wBACb,EAAK,WAAW;cACZ,CAAA,EACP,kBAAC,QAAD;cAAM,WAAU;wBAAc,EAAK,WAAW;cAAiB,CAAA,CAC3D;eACF;;WACH,CAAA;UACL,kBAAC,MAAD,EAAI,WAAU,oCAAqC,CAAA;UACnD,kBAAC,MAAD;WAAI,WAAU;qBAAd,CACG,EAAa,EAAK,cAAc,EAChC,CAAC,EAAK,WAAW,WAAW,EAAK,WAAW,SAAS,QACpD,kBAAA,GAAA,EAAA,UAAA,CAAE,OAAI,EAAa,EAAK,WAAW,MAAM,CAAI,EAAA,CAAA,CAE5C;;UACL,kBAAC,MAAD;WAAI,WAAU;qBACX,EAAK,WAAW,UACb,cACA,EAAa,EAAK,aAAa,EAAE;WAClC,CAAA;UACL,kBAAC,MAAD;WAAI,WAAU;qBACZ,kBAAC,GAAD,EAAa,QAAQ,GAAa,CAAA;WAC/B,CAAA;UACF;WAlCE,EAAK,WAAW,GAkClB;SAEP,CACH,EAAA,CAAA;QAEL;MACI,CAAA,CACF;;IACJ,CAAA;GAEN,kBAAC,KAAD;IAAG,WAAU;cAAb,CAA2C,mIAGxC,EAAS,MAAM,MAAM,EAAE,WAAW,IAAI,8CACrC;;GACA;;GAQG,UAAsB;CACjC,IAAM,EAAE,SAAM,IAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAEnC,IAAc,GAAuB,EAUrC,CAAC,GAA0B,KAA+B,QAPH;AACvD,eAAO,SAAW,KAEtB,QADkB,IAAI,gBAAgB,OAAO,SAAS,OAAO,CAC5C,IAAI,mBAAmB,IAAI,KAAA;GAM7C,EACK,CAAC,GAAe,KAAoB,EAAiC,KAAK,EAG1E,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAc,KAAmB,EAAuB,MAAM,EAI/D,CAAC,GAAU,KAAe,EAAmB,SAAS,EAGtD,IAAsB,EAAiB,EAAY,EAGnD,EAAE,oBAAiB,WAAW,MAAsB,GAA4B,EAGhF,MAA2B,EAAgB,MAAM,MAAM,EAAE,UAAU,IAAI,EAAgB,KACzF,IAEE,IAA4B,KAA4B,IAExD,EAAE,gBAAa,iBAAa,GAAY,EAGxC,CAAC,GAAW,MAAgB,EAAiC,YAAY,EAGzE,EACJ,cACA,iBACA,wBACA,sBACA,eACA,+BACA,WACA,aAEA,+BACA,8BACA,uBACA,+BACE,EAAqB;EACvB,kBAAkB;EAClB;EACA,aAAa,KAAuB,KAAA;EACpC;EACD,CAAC,EAGI,IAAsB,GACzB,MACK,MAAiB,QAAc,KAC/B,MAAiB,YAAkB,EAAM,WAAW,YACpD,MAAiB,YAAkB,EAAM,WAAW,YACpD,MAAiB,aACZ,EAAM,WAAW,cAAc,EAAM,WAAW,cAClD,IAET,CAAC,EAAa,CACf,EAGK,IAAuB,QACpB,EAAa,OAAO,EAAoB,EAC9C,CAAC,GAAc,EAAoB,CAAC,EAEjC,IAA8B,QAC9B,MAAiB,QACZ,IAEF,EACJ,KAAK,OAAS;EACb,GAAG;EACH,kBAAkB,EAAI,iBAAiB,OAAO,EAAoB;EACnE,EAAE,CACF,QAAQ,MAAQ,EAAI,iBAAiB,SAAS,EAAE,EAClD;EAAC;EAAqB;EAAc;EAAoB,CAAC,EAEtD,IAA4B,QAC5B,MAAiB,QACZ,IAEF,EACJ,KAAK,OAAS;EACb,GAAG;EACH,kBAAkB,EAAI,iBAAiB,OAAO,EAAoB;EACnE,EAAE,CACF,QAAQ,MAAQ,EAAI,iBAAiB,SAAS,EAAE,EAClD;EAAC;EAAmB;EAAc;EAAoB,CAAC,EAGpD,IAAyB,QACzB,MAAa,WACR;EAAE,QAAQ;EAA6B,MAAM,EAAE;EAAE,GAEtD,MAAa,SACR;EAAE,QAAQ,EAAE;EAAE,MAAM;EAA2B,GAGjD;EAAE,QAAQ;EAA6B,MAAM;EAA2B,EAC9E;EAAC;EAAU;EAA6B;EAA0B,CAAC,EAEhE,IAAmB,MAAgB,MAAM,MAAiB,OAC1D,KAAc,MAAwB,GAEtC,WAAqB;AAEzB,EADA,EAAe,GAAG,EAClB,EAAgB,MAAM;IAIlB,KAAsB,MAAyB;AACnD,KAAiB,MAAU,MAAS,IAAS,QAAQ,EAAQ;;AAI/D,KAAI,CAAC,EAAY,aACf,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAe,WAAU,8BAA+B,CAAA;KACpD,CAAA;IACN,kBAAC,MAAD;KAAI,WAAU;eAA0C;KAAkB,CAAA;IAC1E,kBAAC,KAAD;KAAG,WAAU;eAAuC;KAEhD,CAAA;IACA;;EACF,CAAA;AAKV,MAAK,KAAqB,OAAc,CAAC,EACvC,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD,EAAK,WAAU,+CAAgD,CAAA;GAC/D,kBAAC,OAAD;IAAK,WAAU;cACZ;KAAC;KAAG;KAAG;KAAG;KAAE,CAAC,KAAK,MACjB,kBAAC,OAAD,EAAa,WAAU,gDAAiD,EAA9D,EAA8D,CACxE;IACE,CAAA;GACN,kBAAC,OAAD,EAAK,WAAU,gDAAiD,CAAA;GAC5D;;AAKV,KAAI,GACF,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD,EAAe,WAAU,iCAAkC,CAAA;KACvD,CAAA;IACN,kBAAC,MAAD;KAAI,WAAU;eAA0C;KAA8B,CAAA;IACtF,kBAAC,KAAD;KAAG,WAAU;eAA+B,GAAM;KAAY,CAAA;IAC9D,kBAAC,UAAD;KACE,MAAK;KACL,eAAe,IAAS;KACxB,WAAU;eACX;KAEQ,CAAA;IACL;;EACF,CAAA;CAIV,IAAM,KAAkB,EAAgB,MAAM,MAAM,EAAE,OAAO,EAA0B;AAEvF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;eACX,EAAG,uBAAuB,QAAQ;KAChC,CAAA,EACL,kBAAC,KAAD;KAAG,WAAU;eAAmC;KAE5C,CAAA,CACA,EAAA,CAAA,EAEN,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,GAAa,YAAY;QACxC,WAAW,4FACT,MAAc,cACV,mEACA;kBANR,CASE,kBAAC,GAAD,EAAQ,WAAU,YAAa,CAAA,EAAA,YAExB;WACT,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,GAAa,SAAS;QACrC,WAAW,4FACT,MAAc,WACV,mEACA;kBANR,CASE,kBAAC,GAAD,EAAS,WAAU,YAAa,CAAA,EAAA,SAEzB;UACL;;MAGL,MAAc,YAAY,EAAgB,SAAS,KAClD,kBAAC,UAAD;OACE,OAAO,KAA6B;OACpC,WAAW,MAAM,EAA4B,EAAE,OAAO,MAAM;OAC5D,WAAU;iBAET,EAAgB,KAAK,MACpB,kBAAC,UAAD;QAAyB,OAAO,EAAQ;kBACrC,EAAQ;QACF,EAFI,EAAQ,GAEZ,CACT;OACK,CAAA;MAIX,kBAAC,UAAD;OACE,MAAK;OACL,eAAgB,MAAc,cAAc,KAAA,IAAY,IAAS;OACjE,WAAU;OACV,cAAW;OACX,OAAM;iBAEN,kBAAC,GAAD,EAAW,WAAU,UAAW,CAAA;OACzB,CAAA;MACL;OACF;;GAGL,MAAc,eAAe,KAC5B,kBAAC,IAAD,EAAoC,gBAAe,CAAA;GAGpD,MAAc,eAAe,CAAC,KAC7B,kBAAC,OAAD;IAAK,WAAU;cAAgD;IAEzD,CAAA;GAIP,MAAc,YACb,kBAAA,GAAA,EAAA,UAAA;IAEE,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEE,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,IAAD,EAAQ,WAAU,mEAAoE,CAAA;QACtF,kBAAC,SAAD;SACE,MAAK;SACL,OAAO;SACP,WAAW,MAAM,EAAe,EAAE,OAAO,MAAM;SAC/C,aAAa,UAAU,MAAa,SAAS,SAAS,MAAa,QAAQ,QAAQ,SAAS;SAC5F,WAAU;SACV,CAAA;SACA,KAAe,OACf,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,EAAe,GAAG;SACjC,cAAW;SACX,WAAU;mBAET,KACC,kBAAC,GAAD,EAAW,WAAU,uCAAwC,CAAA,GAE7D,kBAAC,GAAD,EAAG,WAAU,0BAA2B,CAAA;SAEnC,CAAA;QAEP;;MAGN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,EAAY,SAAS;QACpC,WAAW,4FACT,MAAa,WACT,mEACA;kBANR,CASE,kBAAC,GAAD,EAAS,WAAU,YAAa,CAAA,EAAA,SAEzB;WACT,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,EAAY,OAAO;QAClC,UAAU,KAA8B,MAAa;QACrD,WAAW,4FACT,MAAa,SACT,mEACA,8CACL,GAAG,KAA8B,MAAa,SAAS,eAAe;kBARzE,CAUG,KAA8B,MAAa,SAC1C,kBAAC,GAAD,EAAW,WAAU,yBAA0B,CAAA,GAE/C,kBAAC,GAAD,EAAO,WAAU,YAAa,CAAA,EAC9B,OAEK;UACL;;MAGL,KACC,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,WAAU;iBAHZ,CAKE,kBAAC,GAAD,EAAG,WAAU,UAAW,CAAA,EAAA,gBAEjB;;MAEP;;IAGL,MACC,kBAAC,OAAD;KAAK,WAAU;eAAf;MAA6C;MACzB;MAClB,kBAAC,QAAD;OAAM,WAAU;iBAAiC,GAAgB;OAAY,CAAA;MACzE;;IAIP,KACC,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,GAAD;OACE,OAAM;OACN,OAAO,EAAU;OACjB,MAAM,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA;OACnC,OAAM;OACN,UAAU,MAAiB;OAC3B,eAAe,EAAgB,MAAM;OACrC,CAAA;MACF,kBAAC,GAAD;OACE,OAAM;OACN,OAAO,EAAU;OACjB,MAAM,kBAAC,GAAD,EAAa,WAAU,UAAW,CAAA;OACxC,OAAM;OACN,UAAU,MAAiB;OAC3B,eAAe,EAAmB,UAAU;OAC5C,CAAA;MACF,kBAAC,GAAD;OACE,OAAM;OACN,OAAO,EAAU;OACjB,MAAM,kBAAC,GAAD,EAAa,WAAU,UAAW,CAAA;OACxC,OAAM;OACN,UAAU,MAAiB;OAC3B,eAAe,EAAmB,UAAU;OAC5C,CAAA;MACF,kBAAC,GAAD;OACE,OAAM;OACN,OAAO,EAAU,iBAAiB,EAAU;OAC5C,MAAM,kBAAC,GAAD,EAAe,WAAU,UAAW,CAAA;OAC1C,OAAM;OACN,UAAU,MAAiB;OAC3B,eAAe,EAAmB,WAAW;OAC7C,CAAA;MACE;;IAIP,MACE,EAAU,gBAAgB,KACzB,EAAU,iBAAiB,KAC3B,EAAU,kBAAkB,MAC5B,kBAAC,OAAD;KACE,WAAW,4FACT,EAAU,iBAAiB,KAAK,EAAU,kBAAkB,IACxD,GAAG,EAAa,MAAM,GAAG,GAAG,EAAa,MAAM,WAC/C,GAAG,EAAa,QAAQ,GAAG,GAAG,EAAa,QAAQ;eAJ3D,CAOE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACG,EAAU,iBAAiB,KAAK,EAAU,kBAAkB,IAC3D,kBAAC,GAAD,EAAS,WAAW,mBAAmB,EAAa,MAAM,QAAU,CAAA,GAEpE,kBAAC,GAAD,EAAa,WAAW,mBAAmB,EAAa,QAAQ,QAAU,CAAA,EAE5E,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;OACE,WAAW,uBACT,EAAU,iBAAiB,KAAK,EAAU,kBAAkB,IACxD,EAAa,MAAM,OACnB,EAAa,QAAQ;iBAG1B,EAAU,iBAAiB,KAAK,EAAU,kBAAkB,IACzD,GAAG,EAAU,iBAAiB,EAAU,gBAAgB,QAAQ,EAAU,iBAAiB,EAAU,oBAAoB,IAAU,KAAN,IAAS,0BACtI,GAAG,EAAU,cAAc,QAAQ,EAAU,kBAAkB,IAAU,KAAN,IAAS;OAC9E,CAAA,EACJ,kBAAC,KAAD;OAAG,WAAU;iBAAqC;OAE9C,CAAA,CACA,EAAA,CAAA,CACF;SACN,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,GAAS,mBAAmB;MAC3C,WAAW,+FACT,EAAU,iBAAiB,KAAK,EAAU,kBAAkB,IACxD,uGACA;gBAEP;MAEQ,CAAA,CACL;;KAIR,KAAoB,MAAa,aACjC,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,QAAD,EAAA,UAAA;OAAM;OACI;OACP,EAAuB,OAAO,QAC5B,GAAK,MAAM,IAAM,EAAE,iBAAiB,QACrC,EACD,GACC,EAAuB,KAAK,QACzB,GAAK,MAAM,IAAM,EAAE,iBAAiB,QACrC,EACD,IACA,MAAa,SAAuC,IAA9B,EAAqB;OAAa;OAAI;OAE1D,EAAA,CAAA;MACP,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QACG,MAAa,WAAW,WAAW,MAAa,SAAS,SAAS;QAAO;QAAI;QAEzE;;MACN,MAAiB,SAChB,kBAAC,QAAD;OAAM,WAAU;iBACb,MAAiB,aAAa,yBAAyB;OACnD,CAAA;MAER,KACC,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QAA+E;QACrE;QAAY;QACf;;MAEL;;IAIP,EAAuB,OAAO,SAAS,KACtC,kBAAC,WAAD,EAAA,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;eAAd,CACE,kBAAC,GAAD,EAAS,WAAU,yBAA0B,CAAA,EAC5C,MAAa,QAAQ,+BAA+B,sBAClD;QACL,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAuB,OAAO,KAAK,MAClC,kBAAC,IAAD;MAEgB;MACd,cAAc;MACd,iBAAiB;MACjB,EAJK,EAAa,GAIlB,CACF;KACE,CAAA,CACE,EAAA,CAAA;IAIX,EAAuB,KAAK,SAAS,KACpC,kBAAC,WAAD,EAAA,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;eAAd;MACE,kBAAC,GAAD,EAAO,WAAU,0BAA2B,CAAA;;MAE5C,kBAAC,QAAD;OAAM,WAAU;iBAA0C;OAEnD,CAAA;MACN,KAAyB,KACxB,kBAAC,QAAD;OAAM,WAAU;iBAAhB;QACG,EAAuB,KAAK;QAC5B,KAA2B,MAAM;QAAG;QAAK;QACrC;;MAEN;QACL,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,EAAuB,KAAK,KAAK,MAChC,kBAAC,IAAD;MAEgB;MACd,cAAc;MACd,iBAAiB,MAAa;MAC9B,EAJK,EAAa,GAIlB,CACF,EAGD,MACC,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,UAAU;OACV,WAAU;iBAET,KACC,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAW,WAAU,uBAAwB,CAAA,EAAA,WAE5C,EAAA,CAAA,GAEH,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,EAAa,WAAU,UAAW,CAAA,EAAA,+BAEjC,EAAA,CAAA;OAEE,CAAA;MACL,CAAA,CAEJ;OACE,EAAA,CAAA;IAIX,MAAa,UAAU,EAAqB,SAAS,KACpD,kBAAC,WAAD,EAAA,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;eAAd;MACE,kBAAC,GAAD,EAAQ,WAAW,UAAU,EAAa,KAAK,QAAU,CAAA;;MAEzD,kBAAC,QAAD;OAAM,WAAU;iBAA0C;OAEnD,CAAA;MACJ;QACL,kBAAC,IAAD;KACE,QAAQ;KACR,gBAAgB;KAChB,cAAc;KACd,CAAA,CACM,EAAA,CAAA;IAIX,MAAa,YACZ,EAAoB,WAAW,KAC/B,EAAa,WAAW,KACxB,CAAC,KACC,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,EAAQ,WAAU,yBAA0B,CAAA;OACxC,CAAA;MACN,kBAAC,MAAD;OAAI,WAAU;iBAA4C;OAErD,CAAA;MACL,kBAAC,KAAD;OAAG,WAAU;iBAAwD;OAEjE,CAAA;MACA;;IAIT,MAAa,UACZ,EAAkB,WAAW,KAC7B,CAAC,KACD,CAAC,KACC,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,EAAO,WAAU,yBAA0B,CAAA;OACvC,CAAA;MACN,kBAAC,MAAD;OAAI,WAAU;iBAA4C;OAA0B,CAAA;MACpF,kBAAC,KAAD;OAAG,WAAU;iBAAwD;OAEjE,CAAA;MACJ,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAY,SAAS;OACpC,WAAU;iBACX;OAEQ,CAAA;MACL;;IAIT,MAAa,UAAU,KACtB,kBAAC,OAAD;KAAK,WAAU;eACZ;MAAC;MAAG;MAAG;MAAE,CAAC,KAAK,MACd,kBAAC,OAAD,EAAa,WAAU,gDAAiD,EAA9D,EAA8D,CACxE;KACE,CAAA;IAIP,KACC,EAAuB,OAAO,WAAW,KACzC,EAAuB,KAAK,WAAW,MACtC,MAAa,UAAU,EAAqB,WAAW,MACtD,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD;OAAK,WAAU;iBACZ,MAAiB,SAAS,CAAC,IAC1B,kBAAC,IAAD;QACE,QACG,MAAiB,YACd,YACA,MAAiB,YACf,YACA;QAER,WAAU;QACV,CAAA,GAEF,kBAAC,IAAD,EAAQ,WAAU,yBAA0B,CAAA;OAE1C,CAAA;MACN,kBAAC,MAAD;OAAI,WAAU;iBACX,MAAiB,SAAS,CAAC,IACxB,MAAM,MAAiB,aAAa,0BAA0B,EAAa,WAC3E;OACD,CAAA;MACL,kBAAC,KAAD;OAAG,WAAU;iBACV,MAAiB,SAAS,CAAC,IAC1B,kBAAA,GAAA,EAAA,UAAA,CAAE,8CAEC,KACC,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SAA6B;SACjB,EAAU;SAAc;SAAW,EAAU;SAAe;SAAI;SAC5D,EAAU,iBAAiB,EAAU;SAAiB;SAAI;SAEnE;UAER,EAAA,CAAA,GAEH,kBAAA,GAAA,EAAA,UAAA;QAAE;QAC0D;QACzD,MAAa,SAAS,SAAS,MAAa,QAAQ,QAAQ;QAAU;QAAI;QAE1E,MAAa,YAAY,CAAC,EAAa,SAAS,MAAM,IACrD,kBAAC,QAAD;SAAM,WAAU;mBAAa;SAGtB,CAAA;QAER,EAAA,CAAA;OAEH,CAAA;MACJ,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,UAAD;QACE,MAAK;QACL,SAAS;QACT,WAAU;kBAET,MAAiB,QAA4B,kBAApB;QACnB,CAAA,EACR,MAAa,YAAY,KACxB,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,EAAY,MAAM;QACjC,WAAU;kBACX;QAEQ,CAAA,CAEP;;MACF;;IAET,EAAA,CAAA;GAIJ,KACC,kBAAC,IAAD;IAAkB,OAAO;IAAe,eAAe,EAAiB,KAAK;IAAI,CAAA;GAE/E"}

package/dist/billing/shared/ui/Card.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { cn as t } from "@burdenoff/fe-libs/shared/utils";
 function n({ children: n, className: r, interactive: i = !1, selected: a = !1, as: o, onClick: s, ...c }) {
 	return /* @__PURE__ */ e(o ?? "div", {
 		onClick: s,
-		className: t("rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1", i && "transition-all duration-200 ease-[var(--motion-easing-out)] hover:border-border-strong hover:shadow-elevation-2 hover:-translate-y-0.5", a && "ring-1 ring-[var(--color-focus-ring)] border-border-strong", s && "cursor-pointer text-left", r),
+		className: t("rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1", i && "transition-all duration-200 ease-[var(--motion-easing-out)] hover:border-border-strong hover:shadow-elevation-2", a && "ring-1 ring-[var(--color-focus-ring)] border-border-strong", s && "cursor-pointer text-left", r),
 		...c,
 		children: n
 	});

package/dist/billing/shared/ui/Card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.js","names":[],"sources":["../../../../src/billing/shared/ui/Card.tsx"],"sourcesContent":["/*\n Boff UI — Card primitive\n \n The workhorse surface for the billing MFE. Renders the canonical Boff UI\n * card recipe: `rounded-card border border-border-subtle bg-bg-surface\n * shadow-elevation-1`. Set `interactive` for the hover-lift treatment and\n * `selected` for the accent-soft selected state.\n \n Visual-only primitive — no business logic.\n /\n\nimport type { ElementType, ReactNode } from 'react';\nimport { cn } from '@burdenoff/fe-libs/shared/utils';\n\ninterface CardProps {\n children: ReactNode;\n className?: string;\n /* Apply hover lift + stronger border/elevation (use for clickable cards). /\n interactive?: boolean;\n /* Apply the accent-soft selected ring/wash. /\n selected?: boolean;\n /* Render as a different element (e.g. 'section', 'article'). Defaults to 'div'. /\n as?: ElementType;\n onClick?: () => void;\n /* Passthrough for data-tour and other data-* hooks. */\n [key: `data-${string}`]: string \| undefined;\n}\n\nexport function Card({\n children,\n className,\n interactive = false,\n selected = false,\n as,\n onClick,\n ...rest\n}: CardProps) {\n const Component = as ?? 'div';\n return (\n <Component\n onClick={onClick}\n className={cn(\n 'rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1',\n interactive &&\n 'transition-all duration-200 ease-[var(--motion-easing-out)] hover:border-border-strong hover:shadow-elevation-2 ~~hover:-translate-y-0.5~~',\n selected && 'ring-1 ring-[var(--color-focus-ring)] border-border-strong',\n onClick && 'cursor-pointer text-left',\n className\n )}\n {...rest}\n >\n {children}\n </Component>\n );\n}\n"],"mappings":";;;AA4BA,SAAgB,EAAK,EACnB,aACA,cACA,iBAAc,IACd,cAAW,IACX,OACA,YACA,GAAG,KACS;AAEZ,QACE,kBAFgB,KAAM,OAEtB;EACW;EACT,WAAW,EACT,6EACA,KACE,~~0IACF~~,KAAY,8DACZ,KAAW,4BACX,EACD;EACD,GAAI;EAEH;EACS,CAAA"}
1	+ {"version":3,"file":"Card.js","names":[],"sources":["../../../../src/billing/shared/ui/Card.tsx"],"sourcesContent":["/*\n Boff UI — Card primitive\n \n The workhorse surface for the billing MFE. Renders the canonical Boff UI\n * card recipe: `rounded-card border border-border-subtle bg-bg-surface\n * shadow-elevation-1`. Set `interactive` for the hover-lift treatment and\n * `selected` for the accent-soft selected state.\n \n Visual-only primitive — no business logic.\n /\n\nimport type { ElementType, ReactNode } from 'react';\nimport { cn } from '@burdenoff/fe-libs/shared/utils';\n\ninterface CardProps {\n children: ReactNode;\n className?: string;\n /* Apply hover lift + stronger border/elevation (use for clickable cards). /\n interactive?: boolean;\n /* Apply the accent-soft selected ring/wash. /\n selected?: boolean;\n /* Render as a different element (e.g. 'section', 'article'). Defaults to 'div'. /\n as?: ElementType;\n onClick?: () => void;\n /* Passthrough for data-tour and other data-* hooks. */\n [key: `data-${string}`]: string \| undefined;\n}\n\nexport function Card({\n children,\n className,\n interactive = false,\n selected = false,\n as,\n onClick,\n ...rest\n}: CardProps) {\n const Component = as ?? 'div';\n return (\n <Component\n onClick={onClick}\n className={cn(\n 'rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1',\n interactive &&\n 'transition-all duration-200 ease-[var(--motion-easing-out)] hover:border-border-strong hover:shadow-elevation-2',\n selected && 'ring-1 ring-[var(--color-focus-ring)] border-border-strong',\n onClick && 'cursor-pointer text-left',\n className\n )}\n {...rest}\n >\n {children}\n </Component>\n );\n}\n"],"mappings":";;;AA4BA,SAAgB,EAAK,EACnB,aACA,cACA,iBAAc,IACd,cAAW,IACX,OACA,YACA,GAAG,KACS;AAEZ,QACE,kBAFgB,KAAM,OAEtB;EACW;EACT,WAAW,EACT,6EACA,KACE,mHACF,KAAY,8DACZ,KAAW,4BACX,EACD;EACD,GAAI;EAEH;EACS,CAAA"}

package/dist/billing/shared/ui/MetricCard.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
 import { cn as r } from "@burdenoff/fe-libs/shared/utils";
 //#region src/billing/shared/ui/MetricCard.tsx
 function i({ label: i, value: a, icon: o, trend: s, onClick: c, isActive: l = !1, className: u, ...d }) {
-	let f = r("rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5 text-left", c && "w-full transition-all duration-200 ease-[var(--motion-easing-out)] hover:border-border-strong hover:shadow-elevation-2 hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", l && "ring-1 ring-[var(--color-focus-ring)] border-border-strong", u), p = /* @__PURE__ */ n(e, { children: [
+	let f = r("rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5 text-left", c && "w-full transition-all duration-200 ease-[var(--motion-easing-out)] hover:border-border-strong hover:shadow-elevation-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]", l && "ring-1 ring-[var(--color-focus-ring)] border-border-strong", u), p = /* @__PURE__ */ n(e, { children: [
 		/* @__PURE__ */ n("div", {
 			className: "flex items-start justify-between gap-3",
 			children: [/* @__PURE__ */ t("p", {

package/dist/billing/shared/ui/MetricCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MetricCard.js","names":[],"sources":["../../../../src/billing/shared/ui/MetricCard.tsx"],"sourcesContent":["/*\n Boff UI — MetricCard primitive\n \n Stat/metric card following the Boff UI recipe: small muted label, large\n * tabular-nums value, optional trend, and an optional icon in an accent-soft\n * tile. One question per card. Can render as a button when `onClick` is\n * provided (used by the usage dashboard's filterable stats).\n \n Visual-only primitive.\n /\n\nimport type { ReactNode } from 'react';\nimport { cn } from '@burdenoff/fe-libs/shared/utils';\n\ninterface MetricCardTrend {\n value: number;\n isPositive: boolean;\n}\n\ninterface MetricCardProps {\n label: ReactNode;\n value: ReactNode;\n icon?: ReactNode;\n trend?: MetricCardTrend;\n /* When provided, renders an interactive button (with selected ring when active). /\n onClick?: () => void;\n isActive?: boolean;\n className?: string;\n /* Passthrough for data-tour and other data-* hooks. */\n [key: `data-${string}`]: string \| undefined;\n}\n\nexport function MetricCard({\n label,\n value,\n icon,\n trend,\n onClick,\n isActive = false,\n className,\n ...rest\n}: MetricCardProps) {\n const base = cn(\n 'rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5 text-left',\n onClick &&\n 'w-full transition-all duration-200 ease-[var(--motion-easing-out)] hover:border-border-strong hover:shadow-elevation-2 ~~hover:-translate-y-0.5~~ focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]',\n isActive && 'ring-1 ring-[var(--color-focus-ring)] border-border-strong',\n className\n );\n\n const inner = (\n <>\n <div className=\"flex items-start justify-between gap-3\">\n <p className=\"text-sm text-text-secondary\">{label}</p>\n {icon && (\n <span className=\"flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary\">\n {icon}\n </span>\n )}\n </div>\n <p className=\"mt-2 text-2xl font-semibold tabular-nums text-text-primary\">{value}</p>\n {trend && (\n <p\n className={cn(\n 'mt-1 text-xs font-medium',\n trend.isPositive ? 'text-status-success-text' : 'text-status-error-text'\n )}\n >\n {trend.isPositive ? '+' : ''}\n {trend.value}%\n </p>\n )}\n </>\n );\n\n if (onClick) {\n return (\n <button type=\"button\" onClick={onClick} className={base} {...rest}>\n {inner}\n </button>\n );\n }\n\n return (\n <div className={base} {...rest}>\n {inner}\n </div>\n );\n}\n"],"mappings":";;;AAgCA,SAAgB,EAAW,EACzB,UACA,UACA,SACA,UACA,YACA,cAAW,IACX,cACA,GAAG,KACe;CAClB,IAAM,IAAO,EACX,2FACA,KACE,~~8OACF~~,KAAY,8DACZ,EACD,EAEK,IACJ,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD;IAAG,WAAU;cAA+B;IAAU,CAAA,EACrD,KACC,kBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,CAEL;;EACN,kBAAC,KAAD;GAAG,WAAU;aAA8D;GAAU,CAAA;EACpF,KACC,kBAAC,KAAD;GACE,WAAW,EACT,4BACA,EAAM,aAAa,6BAA6B,yBACjD;aAJH;IAMG,EAAM,aAAa,MAAM;IACzB,EAAM;IAAM;IACX;;EAEL,EAAA,CAAA;AAWL,QARI,IAEA,kBAAC,UAAD;EAAQ,MAAK;EAAkB;EAAS,WAAW;EAAM,GAAI;YAC1D;EACM,CAAA,GAKX,kBAAC,OAAD;EAAK,WAAW;EAAM,GAAI;YACvB;EACG,CAAA"}
1	+ {"version":3,"file":"MetricCard.js","names":[],"sources":["../../../../src/billing/shared/ui/MetricCard.tsx"],"sourcesContent":["/*\n Boff UI — MetricCard primitive\n \n Stat/metric card following the Boff UI recipe: small muted label, large\n * tabular-nums value, optional trend, and an optional icon in an accent-soft\n * tile. One question per card. Can render as a button when `onClick` is\n * provided (used by the usage dashboard's filterable stats).\n \n Visual-only primitive.\n /\n\nimport type { ReactNode } from 'react';\nimport { cn } from '@burdenoff/fe-libs/shared/utils';\n\ninterface MetricCardTrend {\n value: number;\n isPositive: boolean;\n}\n\ninterface MetricCardProps {\n label: ReactNode;\n value: ReactNode;\n icon?: ReactNode;\n trend?: MetricCardTrend;\n /* When provided, renders an interactive button (with selected ring when active). /\n onClick?: () => void;\n isActive?: boolean;\n className?: string;\n /* Passthrough for data-tour and other data-* hooks. */\n [key: `data-${string}`]: string \| undefined;\n}\n\nexport function MetricCard({\n label,\n value,\n icon,\n trend,\n onClick,\n isActive = false,\n className,\n ...rest\n}: MetricCardProps) {\n const base = cn(\n 'rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 p-5 text-left',\n onClick &&\n 'w-full transition-all duration-200 ease-[var(--motion-easing-out)] hover:border-border-strong hover:shadow-elevation-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]',\n isActive && 'ring-1 ring-[var(--color-focus-ring)] border-border-strong',\n className\n );\n\n const inner = (\n <>\n <div className=\"flex items-start justify-between gap-3\">\n <p className=\"text-sm text-text-secondary\">{label}</p>\n {icon && (\n <span className=\"flex size-9 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary\">\n {icon}\n </span>\n )}\n </div>\n <p className=\"mt-2 text-2xl font-semibold tabular-nums text-text-primary\">{value}</p>\n {trend && (\n <p\n className={cn(\n 'mt-1 text-xs font-medium',\n trend.isPositive ? 'text-status-success-text' : 'text-status-error-text'\n )}\n >\n {trend.isPositive ? '+' : ''}\n {trend.value}%\n </p>\n )}\n </>\n );\n\n if (onClick) {\n return (\n <button type=\"button\" onClick={onClick} className={base} {...rest}>\n {inner}\n </button>\n );\n }\n\n return (\n <div className={base} {...rest}>\n {inner}\n </div>\n );\n}\n"],"mappings":";;;AAgCA,SAAgB,EAAW,EACzB,UACA,UACA,SACA,UACA,YACA,cAAW,IACX,cACA,GAAG,KACe;CAClB,IAAM,IAAO,EACX,2FACA,KACE,uNACF,KAAY,8DACZ,EACD,EAEK,IACJ,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,KAAD;IAAG,WAAU;cAA+B;IAAU,CAAA,EACrD,KACC,kBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,CAEL;;EACN,kBAAC,KAAD;GAAG,WAAU;aAA8D;GAAU,CAAA;EACpF,KACC,kBAAC,KAAD;GACE,WAAW,EACT,4BACA,EAAM,aAAa,6BAA6B,yBACjD;aAJH;IAMG,EAAM,aAAa,MAAM;IACzB,EAAM;IAAM;IACX;;EAEL,EAAA,CAAA;AAWL,QARI,IAEA,kBAAC,UAAD;EAAQ,MAAK;EAAkB;EAAS,WAAW;EAAM,GAAI;YAC1D;EACM,CAAA,GAKX,kBAAC,OAAD;EAAK,WAAW;EAAM,GAAI;YACvB;EACG,CAAA"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-billing",
-  "version": "2026.623.2",
+  "version": "2026.623.3",
   "description": "Billing microfrontend for Burdenoff products",
   "type": "module",
   "files": [