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

@burdenoff/microfe-billing 2026.614.1 → 2026.623.2

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 (135) 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 ${colors[status]}`}>{status}</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-muted 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 const colors = {\n blue: `${tokens.bg} ${tokens.border}`,\n emerald: `${tokens.bg} ${tokens.border}`,\n amber: `${tokens.bg} ${tokens.border}`,\n red: `${tokens.bg} ${tokens.border}`,\n gray: `${tokens.bg} ${tokens.border}`,\n };\n\n // Active ring colors - using semantic dot color for consistency\n const activeColors = {\n blue: `ring-2 ring-offset-2 dark:ring-offset-background ${statusTokens.info.border.replace('border-', 'ring-')}`,\n emerald: `ring-2 ring-offset-2 dark:ring-offset-background ${statusTokens.success.border.replace('border-', 'ring-')}`,\n amber: `ring-2 ring-offset-2 dark:ring-offset-background ${statusTokens.warning.border.replace('border-', 'ring-')}`,\n red: `ring-2 ring-offset-2 dark:ring-offset-background ${statusTokens.error.border.replace('border-', 'ring-')}`,\n gray: `ring-2 ring-offset-2 dark:ring-offset-background ${statusTokens.neutral.border.replace('border-', 'ring-')}`,\n };\n\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 className={`border rounded-lg p-4 w-full text-left transition-all ${colors[color]} ${\n onClick ? 'cursor-pointer hover:shadow-md' : ''\n } ${isActive ? activeColors[color] : ''}`}\n >\n <div className=\"flex items-center gap-2 mb-2\">\n <span className={iconColors[color]}>{icon}</span>\n <span className=\"text-sm text-muted-foreground\">{label}</span>\n </div>\n <p className=\"text-2xl font-bold text-foreground\">{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-muted/40 transition-colors border-b border-border last:border-b-0\"\n >\n {/ Quota name /}\n <td className=\"px-4 py-3\">\n <span className=\"text-sm font-medium text-primary hover:underline capitalize\">\n {quota.displayName \|\| quota.name.replace(/_/g, ' ')}\n </span>\n <span className=\"block text-xs font-mono text-muted-foreground mt-0.5\">{quota.name}</span>\n {quota.description && (\n <span className=\"block text-xs text-muted-foreground mt-0.5 max-w-[220px] truncate\">\n {quota.description}\n </span>\n )}\n {quota.quotaCount > 1 && (\n <span className=\"block text-xs text-muted-foreground 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-muted-foreground 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-foreground 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-muted-foreground 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-lg border border-border bg-card\">\n <table className=\"w-full text-left\">\n <thead>\n <tr className=\"border-b border-border bg-muted/30\">\n <th className=\"px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider\">\n Quotas\n </th>\n {showPlanColumn && (\n <th className=\"px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider\">\n Plan\n </th>\n )}\n <th className=\"px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider\">\n Current Usage\n </th>\n <th className=\"px-4 py-2.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider\">\n Limit\n </th>\n <th className=\"px-4 py-2.5 text-xs font-semibold text-muted-foreground 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 rounded-lg bg-card overflow-hidden\">\n <button\n type=\"button\"\n onClick={() => setIsExpanded(!isExpanded)}\n className=\"w-full flex items-center justify-between p-4 hover:bg-muted/50 transition-colors\"\n >\n <div className=\"flex items-center gap-3\">\n <Package className=\"size-5 text-primary\" />\n <div className=\"text-left\">\n <div className=\"flex items-center gap-2\">\n <span className=\"font-medium text-foreground\">Subscription</span>\n <span\n className={`px-2 py-0.5 text-xs font-medium rounded capitalize ${statusColors[subscription.status.toLowerCase()] \|\| statusColors.active}`}\n >\n {subscription.status}\n </span>\n </div>\n <p className=\"text-xs text-muted-foreground\">\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-muted-foreground\" />\n ) : (\n <ChevronRight className=\"size-5 text-muted-foreground\" />\n )}\n </button>\n\n {isExpanded && subscription.aggregatedQuotas.length > 0 && (\n <div className=\"border-t border-border\">\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 p-6 text-center\">\n <p className=\"text-sm text-muted-foreground\">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-background border border-border rounded-lg shadow-xl 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-background border-b border-border 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 id=\"quota-detail-title\" className=\"text-lg font-semibold capitalize\">\n {quota.displayName \|\| quota.name.replace(/_/g, ' ')}\n </h2>\n <p className=\"text-xs font-mono text-muted-foreground\">{quota.name}</p>\n {quota.description && (\n <p className=\"text-sm text-muted-foreground mt-0.5\">{quota.description}</p>\n )}\n <p className=\"text-sm text-muted-foreground 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-md hover:bg-muted/50 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\">\n <div className=\"mb-4\">\n <div className=\"flex items-center justify-between mb-2\">\n <span className=\"text-sm text-muted-foreground\">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\">\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-muted-foreground\">\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-foreground mb-3\">Quota Breakdown</h3>\n <div className=\"border border-border rounded-lg overflow-hidden divide-y divide-border\">\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-muted/30'\n : isExpiringSoon\n ? statusTokens.warning.bg\n : 'bg-background'\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-muted-foreground' : 'text-foreground'}`}\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-destructive'\n : isExpiringSoon\n ? statusTokens.warning.text\n : 'text-muted-foreground'\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 ${isExpired ? 'text-muted-foreground' : 'text-foreground'}`}\n >\n {formatNumber(assignment.used)}\n <span className=\"text-muted-foreground 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\">\n <h3 className=\"text-sm font-medium text-foreground 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-muted 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-muted/30 rounded-md\"\n >\n <span className=\"text-xs text-muted-foreground\">\n {formatDateTime(snap.snapshotAt)}\n </span>\n <span className=\"text-sm font-medium text-foreground tabular-nums\">\n {formatNumber(snap.value)}\n {quota.unit && (\n <span className=\"text-xs text-muted-foreground ml-1\">{quota.unit}</span>\n )}\n {!snap.noLimit && snap.limit != null && (\n <span className=\"text-xs text-muted-foreground 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-foreground mb-3\">Recent Usage</h3>\n\n {quota.isCollectorBased ? (\n <p className=\"text-sm text-muted-foreground 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-muted animate-pulse rounded\" />\n ))}\n </div>\n ) : usages.length === 0 ? (\n <p className=\"text-sm text-muted-foreground 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 rounded-lg\"\n >\n <div className=\"flex-1 min-w-0\">\n <p className=\"text-sm font-medium text-foreground\">\n {usage.description \|\| 'Usage recorded'}\n </p>\n <p className=\"text-xs text-muted-foreground\">\n {formatRelativeTime(usage.timestamp)} • {formatDateTime(usage.timestamp)}\n </p>\n </div>\n <span className=\"text-sm font-medium text-foreground ml-4\">\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 rounded-md disabled:opacity-50\"\n aria-label=\"Previous usage page\"\n >\n <ChevronLeft className=\"size-4\" />\n </button>\n <span className=\"text-sm text-muted-foreground\">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 rounded-md 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-background border-t border-border p-4\">\n <button\n type=\"button\"\n onClick={onClose}\n className=\"w-full py-2 px-4 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\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-muted animate-pulse rounded-lg\" />\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-destructive mx-auto\" />\n <p className=\"text-sm text-muted-foreground\">{error.message}</p>\n <button\n type=\"button\"\n onClick={() => refetch()}\n className=\"px-3 py-1.5 text-sm border border-border rounded-md hover:bg-muted/50 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 <Layers className=\"size-10 text-muted-foreground mx-auto opacity-40\" />\n <h3 className=\"text-base font-medium text-foreground\">No workspace quotas assigned</h3>\n <p className=\"text-sm text-muted-foreground 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\n className={`border rounded-lg p-3 ${statusTokens.success.bg} ${statusTokens.success.border}`}\n >\n <div className=\"flex items-center gap-1.5 mb-1\">\n <CheckCircle className={`size-4 ${statusTokens.success.icon}`} />\n <span className=\"text-xs text-muted-foreground\">Healthy</span>\n </div>\n <p className=\"text-xl font-bold text-foreground\">{healthy}</p>\n </div>\n <div\n className={`border rounded-lg p-3 ${statusTokens.warning.bg} ${statusTokens.warning.border}`}\n >\n <div className=\"flex items-center gap-1.5 mb-1\">\n <AlertCircle className={`size-4 ${statusTokens.warning.icon}`} />\n <span className=\"text-xs text-muted-foreground\">Warning</span>\n </div>\n <p className=\"text-xl font-bold text-foreground\">{warning}</p>\n </div>\n <div\n className={`border rounded-lg p-3 ${statusTokens.error.bg} ${statusTokens.error.border}`}\n >\n <div className=\"flex items-center gap-1.5 mb-1\">\n <XCircle className={`size-4 ${statusTokens.error.icon}`} />\n <span className=\"text-xs text-muted-foreground\">Critical / Exhausted</span>\n </div>\n <p className=\"text-xl font-bold text-foreground\">{critical}</p>\n </div>\n </div>\n\n {/ Quota table /}\n <div className=\"border border-border rounded-lg overflow-hidden\">\n <table className=\"w-full text-sm\">\n <thead>\n <tr className=\"border-b border-border bg-muted/30\">\n <th className=\"text-left px-4 py-3 font-medium text-muted-foreground\">Quota</th>\n <th className=\"text-left px-4 py-3 font-medium text-muted-foreground hidden sm:table-cell\">\n Sources\n </th>\n <th className=\"text-left px-4 py-3 font-medium text-muted-foreground\">Usage</th>\n <th className=\"text-left px-4 py-3 font-medium text-muted-foreground hidden sm:table-cell\">\n Remaining\n </th>\n <th className=\"text-left px-4 py-3 font-medium text-muted-foreground\">Status</th>\n </tr>\n </thead>\n <tbody className=\"divide-y divide-border\">\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-muted/30' : 'hover:bg-muted/20'}`}\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-muted-foreground shrink-0 transition-transform duration-150 ${isExpanded ? 'rotate-90' : ''}`}\n />\n )}\n <div>\n <div className=\"font-medium text-foreground\">\n {formatQuotaDisplayName(group.quotaName)}\n </div>\n <div className=\"text-xs font-mono text-muted-foreground mt-0.5\">\n {group.quotaName}\n </div>\n {group.hasLive && (\n <div className=\"text-xs text-muted-foreground 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-accent text-accent-foreground 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-muted-foreground bg-muted px-1.5 py-0.5 rounded\">\n {group.items[0]?.assignment.productId}\n </span>\n <span className=\"text-xs text-muted-foreground 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-foreground\">\n {formatNumber(group.totalUsed)}\n {!group.noLimit && group.totalLimit != null && (\n <span className=\"text-muted-foreground\">\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-foreground\">\n {group.noLimit ? (\n <span className=\"text-muted-foreground\">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-muted/10 border-t border-dashed border-border/40\"\n >\n <td className=\"pl-12 pr-4 py-2.5\">\n <div className=\"text-xs text-muted-foreground 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-muted 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-muted-foreground\">\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-muted-foreground\">\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-muted-foreground\">\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-muted flex items-center justify-center\">\n <AlertTriangle className=\"size-6 text-muted-foreground\" />\n </div>\n <h2 className=\"text-lg font-semibold text-foreground\">Access Denied</h2>\n <p className=\"text-sm text-muted-foreground 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 p-6\">\n <div className=\"h-8 w-48 bg-muted 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-muted animate-pulse rounded-lg\" />\n ))}\n </div>\n <div className=\"h-64 bg-muted animate-pulse rounded-lg\" />\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-destructive/10 flex items-center justify-center\">\n <AlertTriangle className=\"size-6 text-destructive\" />\n </div>\n <h2 className=\"text-lg font-semibold text-foreground\">Failed to load usage data</h2>\n <p className=\"text-sm text-muted-foreground\">{error.message}</p>\n <button\n type=\"button\"\n onClick={() => refetch()}\n className=\"px-4 py-2 text-sm font-medium bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\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 p-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 font-bold text-foreground\">\n {tr('billing.usage.title', 'Usage')}\n </h1>\n <p className=\"text-sm text-muted-foreground 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-muted/50 rounded-lg p-1 border border-border\">\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-md transition-all ${\n usageView === 'workspace'\n ? 'bg-background text-foreground shadow-sm font-medium'\n : 'text-muted-foreground hover:text-foreground'\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-md transition-all ${\n usageView === 'global'\n ? 'bg-background text-foreground shadow-sm font-medium'\n : 'text-muted-foreground hover:text-foreground'\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 rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary 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 rounded-md hover:bg-muted/50 transition-colors\"\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-muted-foreground 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-muted-foreground\" />\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 rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary\"\n />\n {(searchQuery \|\| isSearching) && (\n <button\n type=\"button\"\n onClick={() => setSearchQuery('')}\n className=\"absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-muted/50\"\n >\n {isSearching ? (\n <RefreshCw className=\"size-3 text-muted-foreground animate-spin\" />\n ) : (\n <X className=\"size-3 text-muted-foreground\" />\n )}\n </button>\n )}\n </div>\n\n {/ View Mode Tabs /}\n <div className=\"flex items-center bg-muted/50 rounded-lg p-1 border border-border\">\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-md transition-all ${\n viewMode === 'active'\n ? 'bg-background text-foreground shadow-sm font-medium'\n : 'text-muted-foreground hover:text-foreground'\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-md transition-all ${\n viewMode === 'past'\n ? 'bg-background text-foreground shadow-sm font-medium'\n : 'text-muted-foreground hover:text-foreground'\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-muted-foreground hover:text-foreground border border-border rounded-md hover:bg-muted/50 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-muted-foreground\">\n Viewing usage for{' '}\n <span className=\"font-medium text-foreground\">{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-muted-foreground 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-md border transition-colors ${\n dashboard.criticalQuotas > 0 \|\| dashboard.exhaustedQuotas > 0\n ? 'bg-destructive text-destructive-foreground border-destructive hover:bg-destructive/90'\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-muted-foreground 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-primary/10 text-primary 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-muted rounded text-xs capitalize\">\n {statusFilter === 'critical' ? 'Critical / Exhausted' : statusFilter}\n </span>\n )}\n {searchQuery && (\n <span className=\"px-2 py-0.5 bg-muted 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-foreground mb-4 flex items-center gap-2\">\n <Package className=\"size-5 text-primary\" />\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-foreground mb-4 flex items-center gap-2\">\n <Clock className=\"size-5 text-muted-foreground\" />\n Past Subscription Quotas\n <span className=\"text-xs font-normal text-muted-foreground\">\n (Canceled / Expired / Upgraded)\n </span>\n {pastSubscriptionsCount > 0 && (\n <span className=\"text-xs font-normal px-2 py-0.5 bg-muted rounded-full\">\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-muted-foreground hover:text-foreground border border-border rounded-md hover:bg-muted/50 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-foreground 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-muted-foreground\">\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 rounded-lg\">\n <div className=\"size-12 rounded-full bg-muted flex items-center justify-center mb-4\">\n <Layers className=\"size-6 text-muted-foreground\" />\n </div>\n <h3 className=\"text-lg font-medium text-foreground\">No active quotas found</h3>\n <p className=\"text-sm text-muted-foreground 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 rounded-lg\">\n <div className=\"size-12 rounded-full bg-muted flex items-center justify-center mb-4\">\n <Clock className=\"size-6 text-muted-foreground\" />\n </div>\n <h3 className=\"text-lg font-medium text-foreground\">No past subscriptions</h3>\n <p className=\"text-sm text-muted-foreground 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-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\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-muted animate-pulse rounded-lg\" />\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 rounded-lg\">\n <div className=\"size-12 rounded-full bg-muted 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-muted-foreground\" />\n )}\n </div>\n <h3 className=\"text-lg font-medium text-foreground\">\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-muted-foreground 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 rounded-md hover:bg-muted/50 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-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors\"\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 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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"}

package/dist/billing/shared/components/ServerError.js CHANGED Viewed

@@ -28,11 +28,11 @@ var i = ({ title: i, message: a, onRetry: o, showRetry: s = !0 }) => {
 					})
 				}),
 				/* @__PURE__ */ t("h2", {
-					className: "text-xl font-semibold text-foreground",
+					className: "text-xl font-semibold text-text-primary",
 					children: u
 				}),
 				/* @__PURE__ */ t("p", {
-					className: "text-sm text-muted-foreground",
+					className: "text-sm text-text-secondary",
 					children: d
 				}),
 				/* @__PURE__ */ n("div", {
@@ -47,7 +47,7 @@ var i = ({ title: i, message: a, onRetry: o, showRetry: s = !0 }) => {
 					children: /* @__PURE__ */ n("button", {
 						type: "button",
 						onClick: o,
-						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary-foreground bg-primary hover:bg-primary/90 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+						className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bgHover rounded-button transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] focus-visible:ring-offset-2",
 						children: [/* @__PURE__ */ t("svg", {
 							className: "size-4",
 							fill: "none",
@@ -63,7 +63,7 @@ var i = ({ title: i, message: a, onRetry: o, showRetry: s = !0 }) => {
 					})
 				}),
 				/* @__PURE__ */ t("p", {
-					className: "text-xs text-muted-foreground pt-4",
+					className: "text-xs text-text-muted pt-4",
 					children: l("billing.serverError.persistHelp", "If this issue persists, please contact support or check the system status page.")
 				})
 			]

package/dist/billing/shared/components/ServerError.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ServerError.js","names":[],"sources":["../../../../src/billing/shared/components/ServerError.tsx"],"sourcesContent":["/*\n Shared Server Error Component\n * Displays when backend server is unavailable or returns 500 errors\n /\n\nimport type { FC } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { statusTokens } from '../utils/tokens';\n\ninterface ServerErrorProps {\n title?: string;\n message?: string;\n onRetry?: () => void;\n showRetry?: boolean;\n}\n\nexport const ServerError: FC<ServerErrorProps> = ({\n title,\n message,\n onRetry,\n showRetry = true,\n}) => {\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\n const displayTitle = title ?? tr('billing.serverError.title', 'Server Unavailable');\n const displayMessage =\n message ??\n tr(\n 'billing.serverError.message',\n \"We're having trouble connecting to the server. Please try again later.\"\n );\n const errorTokens = statusTokens.error;\n\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-4 max-w-md\">\n {/ Server Icon /}\n <div\n className={`size-16 mx-auto rounded-full ${errorTokens.bg} flex items-center justify-center`}\n >\n <svg\n className={`size-8 ${errorTokens.icon}`}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={1.5}\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n d=\"M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z\"\n />\n </svg>\n </div>\n\n {/ Error Title /}\n <h2 className=\"text-xl font-semibold text-~~foreground~~\">{displayTitle}</h2>\n\n {/ Error Message /}\n <p className=\"text-sm text-~~muted~~-~~foreground~~\">{displayMessage}</p>\n\n {/ Status Indicator /}\n <div\n className={`inline-flex items-center gap-2 px-3 py-1.5 ${errorTokens.bg} rounded-full`}\n >\n <span className={`size-2 rounded-full ${errorTokens.dot} animate-pulse`} />\n <span className={`text-xs font-medium ${errorTokens.text}`}>\n {tr('billing.serverError.statusOffline', 'Server Status: Offline')}\n </span>\n </div>\n\n {/ Retry Button /}\n {showRetry && onRetry && (\n <div className=\"pt-2\">\n <button\n type=\"button\"\n onClick={onRetry}\n className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary-~~foreground~~ bg-primary hover:bg-primary~~/90~~ rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-~~primary~~ focus:ring-offset-2\"\n >\n <svg\n className=\"size-4\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n d=\"M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99\"\n />\n </svg>\n {tr('billing.serverError.tryAgain', 'Try Again')}\n </button>\n </div>\n )}\n\n {/ Additional Help */}\n <p className=\"text-xs text-muted~~-foreground~~ pt-4\">\n {tr(\n 'billing.serverError.persistHelp',\n 'If this issue persists, please contact support or check the system status page.'\n )}\n </p>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;AAgBA,IAAa,KAAqC,EAChD,UACA,YACA,YACA,eAAY,SACR;CACJ,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAGnC,IAAe,KAAS,EAAG,6BAA6B,qBAAqB,EAC7E,IACJ,KACA,EACE,+BACA,yEACD,EACG,IAAc,EAAa;AAEjC,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KACE,WAAW,gCAAgC,EAAY,GAAG;eAE1D,kBAAC,OAAD;MACE,WAAW,UAAU,EAAY;MACjC,MAAK;MACL,SAAQ;MACR,QAAO;MACP,aAAa;gBAEb,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,GAAE;OACF,CAAA;MACE,CAAA;KACF,CAAA;IAGN,kBAAC,MAAD;KAAI,WAAU;~~eAAyC~~;KAAkB,CAAA;~~IAGzE~~,kBAAC,KAAD;KAAG,WAAU;~~eAAiC~~;KAAmB,CAAA;~~IAGjE~~,kBAAC,OAAD;KACE,WAAW,8CAA8C,EAAY,GAAG;eAD1E,CAGE,kBAAC,QAAD,EAAM,WAAW,uBAAuB,EAAY,IAAI,iBAAmB,CAAA,EAC3E,kBAAC,QAAD;MAAM,WAAW,uBAAuB,EAAY;gBACjD,EAAG,qCAAqC,yBAAyB;MAC7D,CAAA,CACH;;IAGL,KAAa,KACZ,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBAHZ,CAKE,kBAAC,OAAD;OACE,WAAU;OACV,MAAK;OACL,SAAQ;OACR,QAAO;OACP,aAAa;iBAEb,kBAAC,QAAD;QACE,eAAc;QACd,gBAAe;QACf,GAAE;QACF,CAAA;OACE,CAAA,EACL,EAAG,gCAAgC,YAAY,CACzC;;KACL,CAAA;IAIR,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,mCACA,kFACD;KACC,CAAA;IACA;;EACF,CAAA"}
1	+ {"version":3,"file":"ServerError.js","names":[],"sources":["../../../../src/billing/shared/components/ServerError.tsx"],"sourcesContent":["/*\n Shared Server Error Component\n * Displays when backend server is unavailable or returns 500 errors\n /\n\nimport type { FC } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { statusTokens } from '../utils/tokens';\n\ninterface ServerErrorProps {\n title?: string;\n message?: string;\n onRetry?: () => void;\n showRetry?: boolean;\n}\n\nexport const ServerError: FC<ServerErrorProps> = ({\n title,\n message,\n onRetry,\n showRetry = true,\n}) => {\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\n const displayTitle = title ?? tr('billing.serverError.title', 'Server Unavailable');\n const displayMessage =\n message ??\n tr(\n 'billing.serverError.message',\n \"We're having trouble connecting to the server. Please try again later.\"\n );\n const errorTokens = statusTokens.error;\n\n return (\n <div className=\"flex items-center justify-center h-full min-h-[400px]\">\n <div className=\"text-center space-y-4 max-w-md\">\n {/ Server Icon /}\n <div\n className={`size-16 mx-auto rounded-full ${errorTokens.bg} flex items-center justify-center`}\n >\n <svg\n className={`size-8 ${errorTokens.icon}`}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={1.5}\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n d=\"M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z\"\n />\n </svg>\n </div>\n\n {/ Error Title /}\n <h2 className=\"text-xl font-semibold text-text-primary\">{displayTitle}</h2>\n\n {/ Error Message /}\n <p className=\"text-sm text-text-secondary\">{displayMessage}</p>\n\n {/ Status Indicator /}\n <div\n className={`inline-flex items-center gap-2 px-3 py-1.5 ${errorTokens.bg} rounded-full`}\n >\n <span className={`size-2 rounded-full ${errorTokens.dot} animate-pulse`} />\n <span className={`text-xs font-medium ${errorTokens.text}`}>\n {tr('billing.serverError.statusOffline', 'Server Status: Offline')}\n </span>\n </div>\n\n {/ Retry Button /}\n {showRetry && onRetry && (\n <div className=\"pt-2\">\n <button\n type=\"button\"\n onClick={onRetry}\n className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bgHover rounded-button transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)] focus-visible:ring-offset-2\"\n >\n <svg\n className=\"size-4\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n >\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n d=\"M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99\"\n />\n </svg>\n {tr('billing.serverError.tryAgain', 'Try Again')}\n </button>\n </div>\n )}\n\n {/ Additional Help */}\n <p className=\"text-xs text-text-muted pt-4\">\n {tr(\n 'billing.serverError.persistHelp',\n 'If this issue persists, please contact support or check the system status page.'\n )}\n </p>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;AAgBA,IAAa,KAAqC,EAChD,UACA,YACA,YACA,eAAY,SACR;CACJ,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAGnC,IAAe,KAAS,EAAG,6BAA6B,qBAAqB,EAC7E,IACJ,KACA,EACE,+BACA,yEACD,EACG,IAAc,EAAa;AAEjC,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KACE,WAAW,gCAAgC,EAAY,GAAG;eAE1D,kBAAC,OAAD;MACE,WAAW,UAAU,EAAY;MACjC,MAAK;MACL,SAAQ;MACR,QAAO;MACP,aAAa;gBAEb,kBAAC,QAAD;OACE,eAAc;OACd,gBAAe;OACf,GAAE;OACF,CAAA;MACE,CAAA;KACF,CAAA;IAGN,kBAAC,MAAD;KAAI,WAAU;eAA2C;KAAkB,CAAA;IAG3E,kBAAC,KAAD;KAAG,WAAU;eAA+B;KAAmB,CAAA;IAG/D,kBAAC,OAAD;KACE,WAAW,8CAA8C,EAAY,GAAG;eAD1E,CAGE,kBAAC,QAAD,EAAM,WAAW,uBAAuB,EAAY,IAAI,iBAAmB,CAAA,EAC3E,kBAAC,QAAD;MAAM,WAAW,uBAAuB,EAAY;gBACjD,EAAG,qCAAqC,yBAAyB;MAC7D,CAAA,CACH;;IAGL,KAAa,KACZ,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBAHZ,CAKE,kBAAC,OAAD;OACE,WAAU;OACV,MAAK;OACL,SAAQ;OACR,QAAO;OACP,aAAa;iBAEb,kBAAC,QAAD;QACE,eAAc;QACd,gBAAe;QACf,GAAE;QACF,CAAA;OACE,CAAA,EACL,EAAG,gCAAgC,YAAY,CACzC;;KACL,CAAA;IAIR,kBAAC,KAAD;KAAG,WAAU;eACV,EACC,mCACA,kFACD;KACC,CAAA;IACA;;EACF,CAAA"}