@burdenoff/microfe-billing 2026.825.1 → 2026.825.3

package/dist/billing/modules/subscriptions/pages/SubscriptionDetailPage.js

@@ -143,7 +143,7 @@ var w = () => {
 			]
 		})
 	});
-	let U = D.plan, W = D.quotas || [], G = D.addonSubscriptions || [], K = D.transactions || [], q = D.history || [], we = te(D.status), J = D.status === "active", Y = F.filter((e) => e.assignment.subscriptionId === D.id && e.assignment.isActive), X = !!D.assignedWorkspaceId || Y.length > 0, Z = new Date(D.endDate), Te = new Date(D.startDate), Ee = /* @__PURE__ */ new Date(), Q = Math.ceil((Z.getTime() - Te.getTime()) / (1e3 * 60 * 60 * 24)), $ = Math.max(0, Math.ceil((Z.getTime() - Ee.getTime()) / (1e3 * 60 * 60 * 24))), De = Math.round((Q - $) / Q * 100), Oe = [
+	let U = D.plan, W = D.quotas || [], G = D.addonSubscriptions || [], K = D.transactions || [], q = D.history || [], we = te(D.status), J = D.status === "active", Y = F.filter((e) => e.assignment.subscriptionId === D.id && e.assignment.isActive), X = P ? (D.activatedWorkspaceIds?.includes(P) ?? !1) || Y.length > 0 : !1, Z = new Date(D.endDate), Te = new Date(D.startDate), Ee = /* @__PURE__ */ new Date(), Q = Math.ceil((Z.getTime() - Te.getTime()) / (1e3 * 60 * 60 * 24)), $ = Math.max(0, Math.ceil((Z.getTime() - Ee.getTime()) / (1e3 * 60 * 60 * 24))), De = Math.round((Q - $) / Q * 100), Oe = [
 		...J && T.canUpdateSubscription ? [{
 			id: "change-plan",
 			label: "Review or change your plan",
@@ -329,7 +329,7 @@ var w = () => {
 											" ",
 											/* @__PURE__ */ v("span", {
 												className: "font-mono text-xs text-text-primary bg-bg-sunken/60 rounded px-1.5 py-0.5",
-												children: D.assignedWorkspaceId
+												children: P
 											}),
 											". Usage data will appear here once quotas are consumed."
 										]

package/dist/billing/modules/subscriptions/pages/SubscriptionDetailPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubscriptionDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/subscriptions/pages/SubscriptionDetailPage.tsx"],"sourcesContent":["/**\n * Subscriptions Module - Subscription Detail Page\n * Displays detailed information about a single subscription\n */\n\nimport { type FC, useState } from 'react';\nimport { useParams } from 'react-router';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useBillingAccountSelection } from '../../../hooks/useBillingAccountSelection';\nimport { useSubscription, useSubscriptionMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useGetDefaultBillingAccountDashboardQuery } from '../../../../generated/global-operations';\nimport { useWorkspaceQuotaOverview } from '../../usage/hooks/useUsage';\nimport {\n  formatCurrency,\n  formatDate,\n  formatPlanDuration,\n  formatSubscriptionStatus,\n  formatPercentage,\n  formatBytes,\n} from '../../../shared/utils/format';\nimport { getSubscriptionStatusColor, getQuotaProgressColor } from '../../../shared/utils/status';\nimport { Card, StatusPill, ProgressBar } from '../../../shared/ui';\nimport {\n  CTAOverflowMenu,\n  EmphasisPanel,\n  PagePurpose,\n  NextSteps,\n  type CTAAction,\n  type NextStep,\n} from '@burdenoff/fe-libs/ui';\nimport { withBillingAccountId } from '../../../shared/utils/navigation';\nimport type {\n  SubscriptionStatus,\n  QuotaAssignment,\n  AddonSubscription,\n  SubscriptionHistory,\n  Transaction,\n} from '../../../shared/types';\nimport { PricingModel } from '../../../shared/types';\nimport { ManageSeatsModal } from '../components/ManageSeatsModal';\nimport {\n  WorkspaceQuotaAssignmentModal,\n  type WorkspaceQuotaToAssign,\n} from '../../checkout/components/WorkspaceQuotaAssignmentModal';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { WorkspaceQuotaOverviewItem } from '../../usage/hooks/useUsage';\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\nfunction formatResetPeriod(period: string): string {\n  if (period === 'DAILY') return 'Resets daily';\n  if (period === 'MONTHLY') return 'Resets monthly';\n  return '';\n}\n\n// ============================================================================\n// Page Component\n// ============================================================================\n\nexport const SubscriptionDetailPage: 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 { subscriptionId } = useParams<{ subscriptionId: string }>();\n  const navigateTo = useBillingNavigate();\n  const { emit } = useBillingEventEmitter();\n  const { orgId } = useBilling();\n  const permissions = useBillingPermissions();\n  const { selectedAccountId } = useBillingAccountSelection({\n    orgId,\n    syncFromUrl: true,\n    urlParamName: 'billingAccountId',\n  });\n  const { data: defaultBillingAccountData } = useGetDefaultBillingAccountDashboardQuery({\n    fetchPolicy: 'cache-first',\n  });\n  const billingAccountId =\n    selectedAccountId ?? defaultBillingAccountData?.getDefaultBillingAccount?.id ?? undefined;\n  const { subscription, isLoading, error, refetch } = useSubscription(\n    subscriptionId,\n    billingAccountId\n  );\n  const { cancelSubscription, isCanceling, updateSubscriptionSeats, isUpdatingSeats } =\n    useSubscriptionMutations();\n\n  const { workspaceId } = useBilling();\n\n  // Workspace quota overview — used to detect if quotas are already active and show live usage\n  const { overview: wsQuotaOverview, refetch: refetchWsOverview } = useWorkspaceQuotaOverview(\n    workspaceId ?? undefined\n  );\n\n  // Modal state\n  const [showCancelModal, setShowCancelModal] = useState(false);\n  const [showManageSeatsModal, setShowManageSeatsModal] = useState(false);\n  const [showAssignWorkspaceModal, setShowAssignWorkspaceModal] = useState(false);\n  const [cancelReason, setCancelReason] = useState('');\n  const [cancelError, setCancelError] = useState<string | null>(null);\n\n  // Handle cancel subscription\n  const handleCancelSubscription = async () => {\n    if (!subscription) return;\n\n    setCancelError(null);\n    try {\n      await cancelSubscription({\n        billingAccountId: billingAccountId ?? subscription.billingAccountId,\n        subscriptionId: subscription.id,\n        reason: cancelReason || 'User requested cancellation',\n      });\n      emit('billing.subscription.cancelled', {\n        route: '/billing/subscriptions',\n        entityId: subscription.id,\n        source: 'subscription-detail',\n        reason: cancelReason || 'User requested cancellation',\n      });\n      setShowCancelModal(false);\n      setCancelReason('');\n      await refetch();\n    } catch (err) {\n      setCancelError(err instanceof Error ? err.message : 'Failed to cancel subscription');\n    }\n  };\n\n  // Permission check\n  if (!permissions.canViewSubscriptions) {\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            <svg\n              className=\"size-6 text-text-secondary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n              />\n            </svg>\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&apos;t have permission to view this subscription.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"size-10 bg-bg-sunken animate-pulse rounded-button\" />\n          <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        </div>\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-6\">\n            <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 p-5 space-y-4\">\n              <div className=\"h-6 w-32 bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error || !subscription) {\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            <svg\n              className=\"size-6 text-status-error-text\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.subscriptions.notFound', 'Subscription not found')}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">\n            {error?.message || 'The subscription you are looking for does not exist.'}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(withBillingAccountId('/subscriptions', billingAccountId))}\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            Back to Subscriptions\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const plan = subscription.plan;\n  const quotas = subscription.quotas || [];\n  const addons = subscription.addonSubscriptions || [];\n  const transactions = subscription.transactions || [];\n  const history = subscription.history || [];\n  const statusColor = getSubscriptionStatusColor(subscription.status);\n  const isActive = subscription.status === ('active' as SubscriptionStatus);\n\n  // Workspace quota assignments that belong to this subscription\n  const wsAssignmentsForSub = wsQuotaOverview.filter(\n    (item) => item.assignment.subscriptionId === subscription.id && item.assignment.isActive\n  );\n  // Assigned if subscription field is set OR workspace assignments already exist\n  const isAssignedToWorkspace =\n    !!subscription.assignedWorkspaceId || wsAssignmentsForSub.length > 0;\n\n  // Calculate days remaining\n  const endDate = new Date(subscription.endDate);\n  const startDate = new Date(subscription.startDate);\n  const now = new Date();\n  const totalDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));\n  const daysRemaining = Math.max(\n    0,\n    Math.ceil((endDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))\n  );\n  const progressPercentage = Math.round(((totalDays - daysRemaining) / totalDays) * 100);\n\n  // Recommended next actions for this subscription\n  const nextSteps: NextStep[] = [\n    ...(isActive && permissions.canUpdateSubscription\n      ? [\n          {\n            id: 'change-plan',\n            label: 'Review or change your plan',\n            description: 'Upgrade, downgrade, or compare what each tier includes.',\n            onClick: () =>\n              navigateTo(\n                withBillingAccountId(\n                  `/subscriptions/${subscription.id}/upgrade`,\n                  billingAccountId ?? subscription.billingAccountId\n                )\n              ),\n          },\n        ]\n      : []),\n    ...(isActive && workspaceId && !isAssignedToWorkspace\n      ? [\n          {\n            id: 'activate-workspace',\n            label: 'Activate quotas for your workspace',\n            description: 'Turn on the workspace-scoped limits included in this plan.',\n            onClick: () => setShowAssignWorkspaceModal(true),\n          },\n        ]\n      : []),\n    {\n      id: 'track-usage',\n      label: 'Track your usage',\n      description: 'See how much of your included quota you have consumed.',\n      onClick: () =>\n        navigateTo(\n          withBillingAccountId('/usage', billingAccountId ?? subscription.billingAccountId)\n        ),\n    },\n    {\n      id: 'view-invoices',\n      label: 'Review invoices & payments',\n      description: 'Check what has been billed for this subscription.',\n      onClick: () =>\n        navigateTo(\n          withBillingAccountId('/invoices', billingAccountId ?? subscription.billingAccountId)\n        ),\n    },\n  ];\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-start sm:justify-between\">\n        <div className=\"flex items-start gap-4\">\n          <button\n            type=\"button\"\n            aria-label=\"Back to subscriptions\"\n            onClick={() => navigateTo(withBillingAccountId('/subscriptions', billingAccountId))}\n            className=\"p-2 -ml-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors duration-200\"\n          >\n            <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n          <div>\n            <div className=\"flex items-center gap-3 flex-wrap\">\n              <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n                {plan?.name || 'Subscription'}\n              </h1>\n              <StatusPill status={statusColor} dot pulse={isActive}>\n                {formatSubscriptionStatus(subscription.status)}\n              </StatusPill>\n            </div>\n            <p className=\"text-sm text-text-secondary mt-1\">\n              {plan?.pricingModel === PricingModel.PER_SEAT && plan.pricePerSeat\n                ? `${formatCurrency(plan.pricePerSeat, plan.currency)} / seat / ${formatPlanDuration(plan.duration)} · ${subscription.seatCount ?? plan.minSeats ?? 1} seats = ${formatCurrency(plan.pricePerSeat * (subscription.seatCount ?? plan.minSeats ?? 1), plan.currency)} / ${formatPlanDuration(plan.duration)}`\n                : plan\n                  ? `${formatCurrency(plan.price, plan.currency)} / ${formatPlanDuration(plan.duration)}`\n                  : 'Unknown plan'}\n            </p>\n            <PagePurpose className=\"mt-3\">\n              {tr(\n                'billing.subscriptions.detailPurpose',\n                'Everything about this subscription in one view — its billing period, the quotas and add-ons it includes, recent charges and its full status history. Use it to track what you are getting, activate workspace quotas, change your plan, or cancel.'\n              )}\n            </PagePurpose>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <CTAOverflowMenu\n            primary={\n              isActive && permissions.canUpdateSubscription\n                ? {\n                    label: 'Change Plan',\n                    onSelect: () =>\n                      navigateTo(\n                        withBillingAccountId(\n                          `/subscriptions/${subscription.id}/upgrade`,\n                          billingAccountId ?? subscription.billingAccountId\n                        )\n                      ),\n                  }\n                : undefined\n            }\n            actions={\n              [\n                ...(isActive &&\n                permissions.canUpdateSubscription &&\n                plan?.pricingModel === PricingModel.PER_SEAT\n                  ? [\n                      {\n                        label: 'Manage Seats',\n                        onSelect: () => setShowManageSeatsModal(true),\n                      },\n                    ]\n                  : []),\n                ...(isActive && permissions.canCancelSubscription && !subscription.canceledAt\n                  ? [\n                      {\n                        label: isCanceling ? 'Canceling…' : 'Cancel Subscription',\n                        onSelect: () => setShowCancelModal(true),\n                        disabled: isCanceling,\n                        intent: 'destructive' as const,\n                      },\n                    ]\n                  : []),\n              ] satisfies CTAAction[]\n            }\n          />\n          {subscription.canceledAt && (\n            <span className=\"px-4 py-2 text-sm font-medium text-status-warning-text bg-status-warning-bg-subtle rounded-button\">\n              Cancellation Scheduled\n            </span>\n          )}\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Period Progress — primary status emphasis zone */}\n          {isActive && (\n            <EmphasisPanel className=\"p-5\">\n              <div className=\"flex items-center justify-between mb-4\">\n                <h2 className=\"text-base font-semibold text-text-primary\">Current Period</h2>\n                <span className=\"text-sm text-text-secondary tabular-nums\">\n                  {daysRemaining} days remaining\n                </span>\n              </div>\n              <div className=\"space-y-2\">\n                <ProgressBar\n                  value={progressPercentage}\n                  status=\"primary\"\n                  size=\"md\"\n                  aria-label=\"Billing period progress\"\n                />\n                <div className=\"flex items-center justify-between text-sm text-text-secondary\">\n                  <span>{formatDate(subscription.startDate, 'short')}</span>\n                  <span>{formatDate(subscription.endDate, 'short')}</span>\n                </div>\n              </div>\n            </EmphasisPanel>\n          )}\n\n          {/* Plan Quotas */}\n          <Card className=\"overflow-hidden\">\n            <div className=\"p-5 border-b border-border-subtle\">\n              <h2 className=\"text-base font-semibold text-text-primary\">\n                Plan Quotas\n                {quotas.length > 0 && (\n                  <span className=\"ml-2 text-sm font-normal text-text-muted tabular-nums\">\n                    ({quotas.length})\n                  </span>\n                )}\n              </h2>\n              <p className=\"text-sm text-text-secondary mt-0.5\">Limits included in your plan</p>\n            </div>\n            <div className=\"p-5\">\n              {quotas.length === 0 ? (\n                <p className=\"text-sm text-text-secondary\">\n                  No quotas assigned to this subscription.\n                </p>\n              ) : (\n                <div className=\"space-y-3\">\n                  {quotas.map((quota) => (\n                    <QuotaUsageItem key={quota.id} quota={quota} />\n                  ))}\n                </div>\n              )}\n            </div>\n          </Card>\n\n          {/* Workspace Quotas */}\n          {isActive && workspaceId && (\n            <Card className=\"overflow-hidden\">\n              <div className=\"p-5 border-b border-border-subtle flex items-center justify-between gap-4\">\n                <div>\n                  <h2 className=\"text-base font-semibold text-text-primary\">Workspace Quotas</h2>\n                  <p className=\"text-sm text-text-secondary mt-0.5\">\n                    Active limits for your workspace\n                  </p>\n                </div>\n                {isAssignedToWorkspace ? (\n                  <StatusPill status=\"success\" dot>\n                    Active\n                  </StatusPill>\n                ) : (\n                  <button\n                    type=\"button\"\n                    onClick={() => setShowAssignWorkspaceModal(true)}\n                    className=\"px-3 py-1.5 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                    Activate for Workspace\n                  </button>\n                )}\n              </div>\n\n              <div className=\"p-5\">\n                {isAssignedToWorkspace ? (\n                  wsAssignmentsForSub.length > 0 ? (\n                    <div className=\"space-y-3\">\n                      {wsAssignmentsForSub.map((item) => (\n                        <WorkspaceQuotaItem key={item.assignment.id} item={item} />\n                      ))}\n                    </div>\n                  ) : (\n                    <p className=\"text-sm text-text-secondary\">\n                      Quotas are activated on workspace{' '}\n                      <span className=\"font-mono text-xs text-text-primary bg-bg-sunken/60 rounded px-1.5 py-0.5\">\n                        {subscription.assignedWorkspaceId}\n                      </span>\n                      . Usage data will appear here once quotas are consumed.\n                    </p>\n                  )\n                ) : (\n                  <div className=\"flex items-start gap-3\">\n                    <div className=\"size-8 rounded-full bg-status-warning-bg-subtle flex items-center justify-center shrink-0 mt-0.5\">\n                      <svg\n                        className=\"size-4 text-status-warning-text\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke=\"currentColor\"\n                      >\n                        <path\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          strokeWidth={2}\n                          d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                        />\n                      </svg>\n                    </div>\n                    <div>\n                      <p className=\"text-sm font-medium text-text-primary\">\n                        Workspace quotas not activated yet\n                      </p>\n                      <p className=\"text-sm text-text-secondary mt-0.5\">\n                        Click{' '}\n                        <button\n                          type=\"button\"\n                          onClick={() => setShowAssignWorkspaceModal(true)}\n                          className=\"text-text-link hover:underline font-medium\"\n                        >\n                          Activate for Workspace\n                        </button>{' '}\n                        to enable the workspace-scoped limits included in this plan.\n                      </p>\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {showAssignWorkspaceModal && (\n                <WorkspaceQuotaAssignmentModal\n                  billingAccountId={billingAccountId ?? subscription.billingAccountId}\n                  subscriptionId={subscription.id}\n                  quotas={[] as WorkspaceQuotaToAssign[]}\n                  workspaces={[{ id: workspaceId, name: 'Current workspace' }]}\n                  currentWorkspaceId={workspaceId}\n                  onAssigned={() => {\n                    setShowAssignWorkspaceModal(false);\n                    void refetch();\n                    void refetchWsOverview();\n                  }}\n                  onSkip={() => setShowAssignWorkspaceModal(false)}\n                />\n              )}\n            </Card>\n          )}\n\n          {/* Addons */}\n          {addons.length > 0 && (\n            <Card className=\"overflow-hidden\">\n              <div className=\"p-5 border-b border-border-subtle\">\n                <h2 className=\"text-base font-semibold text-text-primary\">\n                  Addons{' '}\n                  <span className=\"text-sm font-normal text-text-muted tabular-nums\">\n                    ({addons.length})\n                  </span>\n                </h2>\n              </div>\n              <div className=\"p-5\">\n                <div className=\"space-y-3\">\n                  {addons.map((addonSub) => (\n                    <AddonItem key={addonSub.id} addonSubscription={addonSub} />\n                  ))}\n                </div>\n              </div>\n            </Card>\n          )}\n\n          {/* Recent Transactions */}\n          {transactions.length > 0 && (\n            <Card className=\"overflow-hidden\">\n              <div className=\"p-5 border-b border-border-subtle\">\n                <h2 className=\"text-base font-semibold text-text-primary\">Recent Transactions</h2>\n              </div>\n              <div className=\"divide-y divide-border-subtle\">\n                {transactions.slice(0, 5).map((transaction) => (\n                  <TransactionItem key={transaction.id} transaction={transaction} />\n                ))}\n              </div>\n              {transactions.length > 5 && (\n                <div className=\"p-4 text-center border-t border-border-subtle\">\n                  <button type=\"button\" className=\"text-sm text-text-link hover:underline\">\n                    View all transactions\n                  </button>\n                </div>\n              )}\n            </Card>\n          )}\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6 lg:sticky lg:top-6 lg:self-start\">\n          {/* Next steps guidance */}\n          <NextSteps storageKey=\"billing-subscription-detail\" steps={nextSteps} />\n\n          {/* Subscription Details */}\n          <Card className=\"overflow-hidden\">\n            <div className=\"p-5 border-b border-border-subtle\">\n              <h2 className=\"text-base font-semibold text-text-primary\">Details</h2>\n            </div>\n            <div className=\"p-5 space-y-4\">\n              <div>\n                <p className=\"text-sm text-text-secondary\">Subscription ID</p>\n                <p className=\"font-mono text-sm text-text-primary mt-0.5 break-all\">\n                  {subscription.id}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Plan</p>\n                <p className=\"text-sm text-text-primary mt-0.5\">{plan?.name || 'Unknown'}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Billing Account</p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  {subscription.billingAccount?.name || 'Unknown'}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Start Date</p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  {formatDate(subscription.startDate)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">End Date</p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  {formatDate(subscription.endDate)}\n                </p>\n              </div>\n              {subscription.nextBillingDate && (\n                <div>\n                  <p className=\"text-sm text-text-secondary\">Next Billing</p>\n                  <p className=\"text-sm text-text-primary mt-0.5\">\n                    {formatDate(subscription.nextBillingDate)}\n                  </p>\n                </div>\n              )}\n              <div>\n                <p className=\"text-sm text-text-secondary\">Auto Renewal</p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  {subscription.autoRenewal ? 'Enabled' : 'Disabled'}\n                </p>\n              </div>\n              {subscription.paymentGateway && (\n                <div>\n                  <p className=\"text-sm text-text-secondary\">Payment Gateway</p>\n                  <p className=\"text-sm text-text-primary mt-0.5 capitalize\">\n                    {subscription.paymentGateway}\n                  </p>\n                </div>\n              )}\n            </div>\n          </Card>\n\n          {/* History */}\n          {history.length > 0 && (\n            <Card className=\"overflow-hidden\">\n              <div className=\"p-5 border-b border-border-subtle\">\n                <h2 className=\"text-base font-semibold text-text-primary\">History</h2>\n              </div>\n              <div className=\"p-5\">\n                <div className=\"space-y-3\">\n                  {history.slice(0, 5).map((item) => (\n                    <HistoryItem key={item.id} item={item} />\n                  ))}\n                </div>\n              </div>\n            </Card>\n          )}\n        </div>\n      </div>\n\n      {/* Manage Seats Modal */}\n      {showManageSeatsModal && subscription && (\n        <ManageSeatsModal\n          subscription={subscription}\n          onClose={() => setShowManageSeatsModal(false)}\n          onConfirm={async (seatCount) => {\n            await updateSubscriptionSeats({ subscriptionId: subscription.id, seatCount });\n            await refetch();\n          }}\n          isLoading={isUpdatingSeats}\n        />\n      )}\n\n      {/* Cancel Subscription Modal */}\n      {showCancelModal && (\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n          <div\n            className=\"absolute inset-0 bg-overlay-scrim\"\n            onClick={() => setShowCancelModal(false)}\n          />\n          <div\n            className=\"relative bg-bg-elevated border border-border-seam rounded-card shadow-[var(--shadow-elevation-4)] w-full max-w-md mx-4 p-6\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby=\"cancel-subscription-title\"\n          >\n            <h3\n              id=\"cancel-subscription-title\"\n              className=\"text-lg font-semibold text-text-primary mb-2\"\n            >\n              Cancel Subscription\n            </h3>\n            <p className=\"text-sm text-text-secondary mb-4\">\n              Are you sure you want to cancel this subscription? Your subscription will remain\n              active until{' '}\n              <span className=\"font-medium text-text-primary\">\n                {formatDate(subscription.endDate)}\n              </span>\n              , but will not renew automatically.\n            </p>\n\n            <div className=\"mb-4\">\n              <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                Reason for cancellation (optional)\n              </label>\n              <textarea\n                value={cancelReason}\n                onChange={(e) => setCancelReason(e.target.value)}\n                placeholder=\"Please share why you're canceling...\"\n                className=\"w-full px-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)] focus:border-transparent resize-none\"\n                rows={3}\n              />\n            </div>\n\n            {cancelError && (\n              <div className=\"mb-4 p-3 bg-status-error-bg-subtle border border-status-error-border rounded-card\">\n                <p className=\"text-sm text-status-error-text\">{cancelError}</p>\n              </div>\n            )}\n\n            <div className=\"flex items-center justify-end gap-3\">\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setShowCancelModal(false);\n                  setCancelReason('');\n                  setCancelError(null);\n                }}\n                className=\"px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors\"\n              >\n                Keep Subscription\n              </button>\n              <button\n                type=\"button\"\n                onClick={handleCancelSubscription}\n                disabled={isCanceling}\n                className=\"px-4 py-2 text-sm font-medium bg-action-danger-bg text-action-danger-text rounded-button hover:bg-action-danger-bgHover transition-colors duration-200 disabled:opacity-50\"\n              >\n                {isCanceling ? 'Canceling...' : 'Confirm Cancellation'}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Sub-components\n// ============================================================================\n\nconst QuotaUsageItem: FC<{ quota: QuotaAssignment }> = ({ quota }) => {\n  const context = quota.context as\n    | { displayName?: string; label?: string; description?: string }\n    | null\n    | undefined;\n  const displayName = formatQuotaDisplayName(quota.name, context as Record<string, unknown> | null);\n  const description =\n    context?.description && typeof context.description === 'string' ? context.description : null;\n  const limits = quota.limits as { value?: number } | null;\n  const limit = limits?.value ?? 0;\n  const used = quota.currentUsageSum ?? 0;\n  const percentage = limit > 0 ? Math.min(100, (used / limit) * 100) : 0;\n  const isBytes = quota.name.includes('bytes') || quota.name.includes('storage');\n  const isPooled = quota.quotaType === 'POOLED';\n\n  return (\n    <div className=\"p-4 rounded-card border border-border-seam bg-bg-surface\">\n      <div className=\"flex items-start justify-between gap-4 mb-2\">\n        <div className=\"min-w-0\">\n          <p className=\"font-medium text-text-primary truncate\">{displayName}</p>\n          {description && (\n            <p className=\"text-xs text-text-secondary mt-0.5 line-clamp-2\">{description}</p>\n          )}\n        </div>\n        <span className=\"text-sm font-medium text-text-primary shrink-0 tabular-nums\">\n          {isBytes ? formatBytes(used) : used.toLocaleString()}\n          {' / '}\n          {limit > 0 ? (isBytes ? formatBytes(limit) : limit.toLocaleString()) : '∞'}\n        </span>\n      </div>\n\n      {limit > 0 && (\n        <div className=\"h-1.5 rounded-full bg-bg-sunken overflow-hidden mb-2\">\n          <div\n            className={`h-full rounded-full transition-all duration-300 ${getQuotaProgressColor(percentage)}`}\n            style={{ width: `${percentage}%` }}\n          />\n        </div>\n      )}\n\n      <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n        <span className=\"px-1.5 py-0.5 rounded bg-bg-sunken font-medium\">\n          {isPooled ? 'Shared' : 'Per Workspace'}\n        </span>\n        <div className=\"flex items-center gap-3\">\n          {quota.endtime && <span>Expires {formatDate(quota.endtime, 'short')}</span>}\n          {limit > 0 && (\n            <span\n              className={\n                percentage >= 90\n                  ? 'text-status-error-text font-medium'\n                  : percentage >= 70\n                    ? 'text-status-warning-text font-medium'\n                    : ''\n              }\n            >\n              {formatPercentage(percentage)} used\n            </span>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst WorkspaceQuotaItem: FC<{ item: WorkspaceQuotaOverviewItem }> = ({ item }) => {\n  const { assignment, effectiveUsed, usagePercentage } = item;\n  const displayName = formatQuotaDisplayName(assignment.quotaName);\n  const hasLimit = !assignment.noLimit && assignment.limit !== null;\n  const limit = assignment.limit ?? 0;\n  const isBytes =\n    assignment.quotaName.includes('bytes') || assignment.quotaName.includes('storage');\n  const resetLabel = formatResetPeriod(assignment.resetPeriod);\n\n  return (\n    <div className=\"p-4 rounded-card border border-border-seam bg-bg-surface\">\n      <div className=\"flex items-start justify-between gap-4 mb-2\">\n        <div className=\"min-w-0\">\n          <p className=\"font-medium text-text-primary truncate\">{displayName}</p>\n          <p className=\"text-xs text-text-secondary mt-0.5\">\n            {assignment.quotaMode === 'pooled' ? 'Pooled across workspaces' : 'Dedicated'}\n            {resetLabel && ` · ${resetLabel}`}\n          </p>\n        </div>\n        <span className=\"text-sm font-medium text-text-primary shrink-0 tabular-nums\">\n          {isBytes ? formatBytes(effectiveUsed) : effectiveUsed.toLocaleString()}\n          {' / '}\n          {assignment.noLimit\n            ? '∞'\n            : hasLimit\n              ? isBytes\n                ? formatBytes(limit)\n                : limit.toLocaleString()\n              : '∞'}\n        </span>\n      </div>\n\n      {hasLimit && (\n        <div className=\"h-1.5 rounded-full bg-bg-sunken overflow-hidden mb-2\">\n          <div\n            className={`h-full rounded-full transition-all duration-300 ${getQuotaProgressColor(usagePercentage)}`}\n            style={{ width: `${Math.min(100, usagePercentage)}%` }}\n          />\n        </div>\n      )}\n\n      <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n        <span>Since {formatDate(assignment.createdAt, 'short')}</span>\n        {hasLimit && (\n          <span\n            className={\n              usagePercentage >= 90\n                ? 'text-status-error-text font-medium'\n                : usagePercentage >= 70\n                  ? 'text-status-warning-text font-medium'\n                  : ''\n            }\n          >\n            {formatPercentage(usagePercentage)} used\n          </span>\n        )}\n      </div>\n    </div>\n  );\n};\n\nconst AddonItem: FC<{ addonSubscription: AddonSubscription }> = ({ addonSubscription }) => {\n  const addon = addonSubscription.addon;\n  return (\n    <div className=\"flex items-center justify-between p-3 rounded-card border border-border-seam bg-bg-sunken\">\n      <div>\n        <p className=\"font-medium text-text-primary\">{addon?.name || 'Unknown Addon'}</p>\n        <p className=\"text-sm text-text-secondary\">Qty: {addonSubscription.quantity}</p>\n      </div>\n      {addon && (\n        <p className=\"text-sm font-medium text-text-primary tabular-nums\">\n          {formatCurrency(addon.price * addonSubscription.quantity, addon.currency)}\n        </p>\n      )}\n    </div>\n  );\n};\n\nconst TransactionItem: FC<{ transaction: Transaction }> = ({ transaction }) => {\n  return (\n    <div className=\"flex items-center justify-between px-5 py-4 hover:bg-bg-sunken transition-colors\">\n      <div>\n        <p className=\"font-medium text-text-primary capitalize\">{transaction.type}</p>\n        <p className=\"text-sm text-text-secondary\">{formatDate(transaction.createdAt, 'short')}</p>\n      </div>\n      <div className=\"text-right\">\n        <p\n          className={`font-medium tabular-nums ${transaction.type === 'refund' ? 'text-status-error-text' : 'text-text-primary'}`}\n        >\n          {transaction.type === 'refund' ? '-' : ''}\n          {formatCurrency(transaction.amount, transaction.currency)}\n        </p>\n        <p className=\"text-sm text-text-secondary capitalize\">{transaction.status}</p>\n      </div>\n    </div>\n  );\n};\n\nconst HistoryItem: FC<{ item: SubscriptionHistory }> = ({ item }) => {\n  return (\n    <div className=\"flex items-start gap-3\">\n      <div className=\"size-2 rounded-full bg-text-muted mt-2 shrink-0\" />\n      <div>\n        <p className=\"text-sm text-text-primary\">\n          <span className=\"capitalize\">{item.fromStatus}</span>\n          {' → '}\n          <span className=\"capitalize font-medium\">{item.toStatus}</span>\n        </p>\n        {item.reason && <p className=\"text-xs text-text-secondary mt-0.5\">{item.reason}</p>}\n        <p className=\"text-xs text-text-secondary mt-0.5\">{formatDate(item.createdAt, 'short')}</p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"SubscriptionDetailPage.js","names":[],"sources":["../../../../../src/billing/modules/subscriptions/pages/SubscriptionDetailPage.tsx"],"sourcesContent":["/**\n * Subscriptions Module - Subscription Detail Page\n * Displays detailed information about a single subscription\n */\n\nimport { type FC, useState } from 'react';\nimport { useParams } from 'react-router';\nimport { useBillingNavigate } from '../../../hooks/useBillingNavigate';\nimport { useBillingEventEmitter } from '../../../hooks/useBillingEventEmitter';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { useBillingAccountSelection } from '../../../hooks/useBillingAccountSelection';\nimport { useSubscription, useSubscriptionMutations } from '../hooks';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useGetDefaultBillingAccountDashboardQuery } from '../../../../generated/global-operations';\nimport { useWorkspaceQuotaOverview } from '../../usage/hooks/useUsage';\nimport {\n  formatCurrency,\n  formatDate,\n  formatPlanDuration,\n  formatSubscriptionStatus,\n  formatPercentage,\n  formatBytes,\n} from '../../../shared/utils/format';\nimport { getSubscriptionStatusColor, getQuotaProgressColor } from '../../../shared/utils/status';\nimport { Card, StatusPill, ProgressBar } from '../../../shared/ui';\nimport {\n  CTAOverflowMenu,\n  EmphasisPanel,\n  PagePurpose,\n  NextSteps,\n  type CTAAction,\n  type NextStep,\n} from '@burdenoff/fe-libs/ui';\nimport { withBillingAccountId } from '../../../shared/utils/navigation';\nimport type {\n  SubscriptionStatus,\n  QuotaAssignment,\n  AddonSubscription,\n  SubscriptionHistory,\n  Transaction,\n} from '../../../shared/types';\nimport { PricingModel } from '../../../shared/types';\nimport { ManageSeatsModal } from '../components/ManageSeatsModal';\nimport {\n  WorkspaceQuotaAssignmentModal,\n  type WorkspaceQuotaToAssign,\n} from '../../checkout/components/WorkspaceQuotaAssignmentModal';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { WorkspaceQuotaOverviewItem } from '../../usage/hooks/useUsage';\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\nfunction formatResetPeriod(period: string): string {\n  if (period === 'DAILY') return 'Resets daily';\n  if (period === 'MONTHLY') return 'Resets monthly';\n  return '';\n}\n\n// ============================================================================\n// Page Component\n// ============================================================================\n\nexport const SubscriptionDetailPage: 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 { subscriptionId } = useParams<{ subscriptionId: string }>();\n  const navigateTo = useBillingNavigate();\n  const { emit } = useBillingEventEmitter();\n  const { orgId } = useBilling();\n  const permissions = useBillingPermissions();\n  const { selectedAccountId } = useBillingAccountSelection({\n    orgId,\n    syncFromUrl: true,\n    urlParamName: 'billingAccountId',\n  });\n  const { data: defaultBillingAccountData } = useGetDefaultBillingAccountDashboardQuery({\n    fetchPolicy: 'cache-first',\n  });\n  const billingAccountId =\n    selectedAccountId ?? defaultBillingAccountData?.getDefaultBillingAccount?.id ?? undefined;\n  const { subscription, isLoading, error, refetch } = useSubscription(\n    subscriptionId,\n    billingAccountId\n  );\n  const { cancelSubscription, isCanceling, updateSubscriptionSeats, isUpdatingSeats } =\n    useSubscriptionMutations();\n\n  const { workspaceId } = useBilling();\n\n  // Workspace quota overview — used to detect if quotas are already active and show live usage\n  const { overview: wsQuotaOverview, refetch: refetchWsOverview } = useWorkspaceQuotaOverview(\n    workspaceId ?? undefined\n  );\n\n  // Modal state\n  const [showCancelModal, setShowCancelModal] = useState(false);\n  const [showManageSeatsModal, setShowManageSeatsModal] = useState(false);\n  const [showAssignWorkspaceModal, setShowAssignWorkspaceModal] = useState(false);\n  const [cancelReason, setCancelReason] = useState('');\n  const [cancelError, setCancelError] = useState<string | null>(null);\n\n  // Handle cancel subscription\n  const handleCancelSubscription = async () => {\n    if (!subscription) return;\n\n    setCancelError(null);\n    try {\n      await cancelSubscription({\n        billingAccountId: billingAccountId ?? subscription.billingAccountId,\n        subscriptionId: subscription.id,\n        reason: cancelReason || 'User requested cancellation',\n      });\n      emit('billing.subscription.cancelled', {\n        route: '/billing/subscriptions',\n        entityId: subscription.id,\n        source: 'subscription-detail',\n        reason: cancelReason || 'User requested cancellation',\n      });\n      setShowCancelModal(false);\n      setCancelReason('');\n      await refetch();\n    } catch (err) {\n      setCancelError(err instanceof Error ? err.message : 'Failed to cancel subscription');\n    }\n  };\n\n  // Permission check\n  if (!permissions.canViewSubscriptions) {\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            <svg\n              className=\"size-6 text-text-secondary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n              />\n            </svg>\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&apos;t have permission to view this subscription.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // Loading state\n  if (isLoading) {\n    return (\n      <div className=\"space-y-6 px-6 lg:px-8 py-6\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"size-10 bg-bg-sunken animate-pulse rounded-button\" />\n          <div className=\"h-8 w-48 bg-bg-sunken animate-pulse rounded\" />\n        </div>\n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2 space-y-6\">\n            <div className=\"border border-border-seam rounded-card bg-bg-surface shadow-elevation-1 p-5 space-y-4\">\n              <div className=\"h-6 w-32 bg-bg-sunken animate-pulse rounded\" />\n              <div className=\"h-4 w-full bg-bg-sunken animate-pulse rounded\" />\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error || !subscription) {\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            <svg\n              className=\"size-6 text-status-error-text\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n              />\n            </svg>\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {tr('billing.subscriptions.notFound', 'Subscription not found')}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">\n            {error?.message || 'The subscription you are looking for does not exist.'}\n          </p>\n          <button\n            type=\"button\"\n            onClick={() => navigateTo(withBillingAccountId('/subscriptions', billingAccountId))}\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            Back to Subscriptions\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  const plan = subscription.plan;\n  const quotas = subscription.quotas || [];\n  const addons = subscription.addonSubscriptions || [];\n  const transactions = subscription.transactions || [];\n  const history = subscription.history || [];\n  const statusColor = getSubscriptionStatusColor(subscription.status);\n  const isActive = subscription.status === ('active' as SubscriptionStatus);\n\n  // Workspace quota assignments that belong to this subscription\n  const wsAssignmentsForSub = wsQuotaOverview.filter(\n    (item) => item.assignment.subscriptionId === subscription.id && item.assignment.isActive\n  );\n  // `assignedWorkspaceId` is legacy and last-write-wins across every workspace\n  // this subscription has ever been activated for — with multiple workspaces\n  // per account, it stays truthy forever after the first activation and\n  // permanently hides the \"Activate for Workspace\" action on every OTHER\n  // workspace. `activatedWorkspaceIds` is the authoritative, multi-workspace-\n  // aware set (backed by SubscriptionWorkspace); fall back to the workspace\n  // assignments already loaded for this workspace in case the field isn't\n  // populated yet.\n  const isAssignedToWorkspace = workspaceId\n    ? (subscription.activatedWorkspaceIds?.includes(workspaceId) ?? false) ||\n      wsAssignmentsForSub.length > 0\n    : false;\n\n  // Calculate days remaining\n  const endDate = new Date(subscription.endDate);\n  const startDate = new Date(subscription.startDate);\n  const now = new Date();\n  const totalDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));\n  const daysRemaining = Math.max(\n    0,\n    Math.ceil((endDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))\n  );\n  const progressPercentage = Math.round(((totalDays - daysRemaining) / totalDays) * 100);\n\n  // Recommended next actions for this subscription\n  const nextSteps: NextStep[] = [\n    ...(isActive && permissions.canUpdateSubscription\n      ? [\n          {\n            id: 'change-plan',\n            label: 'Review or change your plan',\n            description: 'Upgrade, downgrade, or compare what each tier includes.',\n            onClick: () =>\n              navigateTo(\n                withBillingAccountId(\n                  `/subscriptions/${subscription.id}/upgrade`,\n                  billingAccountId ?? subscription.billingAccountId\n                )\n              ),\n          },\n        ]\n      : []),\n    ...(isActive && workspaceId && !isAssignedToWorkspace\n      ? [\n          {\n            id: 'activate-workspace',\n            label: 'Activate quotas for your workspace',\n            description: 'Turn on the workspace-scoped limits included in this plan.',\n            onClick: () => setShowAssignWorkspaceModal(true),\n          },\n        ]\n      : []),\n    {\n      id: 'track-usage',\n      label: 'Track your usage',\n      description: 'See how much of your included quota you have consumed.',\n      onClick: () =>\n        navigateTo(\n          withBillingAccountId('/usage', billingAccountId ?? subscription.billingAccountId)\n        ),\n    },\n    {\n      id: 'view-invoices',\n      label: 'Review invoices & payments',\n      description: 'Check what has been billed for this subscription.',\n      onClick: () =>\n        navigateTo(\n          withBillingAccountId('/invoices', billingAccountId ?? subscription.billingAccountId)\n        ),\n    },\n  ];\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-start sm:justify-between\">\n        <div className=\"flex items-start gap-4\">\n          <button\n            type=\"button\"\n            aria-label=\"Back to subscriptions\"\n            onClick={() => navigateTo(withBillingAccountId('/subscriptions', billingAccountId))}\n            className=\"p-2 -ml-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-button transition-colors duration-200\"\n          >\n            <svg className=\"size-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n          </button>\n          <div>\n            <div className=\"flex items-center gap-3 flex-wrap\">\n              <h1 className=\"text-2xl md:text-3xl font-semibold tracking-tight text-text-primary\">\n                {plan?.name || 'Subscription'}\n              </h1>\n              <StatusPill status={statusColor} dot pulse={isActive}>\n                {formatSubscriptionStatus(subscription.status)}\n              </StatusPill>\n            </div>\n            <p className=\"text-sm text-text-secondary mt-1\">\n              {plan?.pricingModel === PricingModel.PER_SEAT && plan.pricePerSeat\n                ? `${formatCurrency(plan.pricePerSeat, plan.currency)} / seat / ${formatPlanDuration(plan.duration)} · ${subscription.seatCount ?? plan.minSeats ?? 1} seats = ${formatCurrency(plan.pricePerSeat * (subscription.seatCount ?? plan.minSeats ?? 1), plan.currency)} / ${formatPlanDuration(plan.duration)}`\n                : plan\n                  ? `${formatCurrency(plan.price, plan.currency)} / ${formatPlanDuration(plan.duration)}`\n                  : 'Unknown plan'}\n            </p>\n            <PagePurpose className=\"mt-3\">\n              {tr(\n                'billing.subscriptions.detailPurpose',\n                'Everything about this subscription in one view — its billing period, the quotas and add-ons it includes, recent charges and its full status history. Use it to track what you are getting, activate workspace quotas, change your plan, or cancel.'\n              )}\n            </PagePurpose>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <CTAOverflowMenu\n            primary={\n              isActive && permissions.canUpdateSubscription\n                ? {\n                    label: 'Change Plan',\n                    onSelect: () =>\n                      navigateTo(\n                        withBillingAccountId(\n                          `/subscriptions/${subscription.id}/upgrade`,\n                          billingAccountId ?? subscription.billingAccountId\n                        )\n                      ),\n                  }\n                : undefined\n            }\n            actions={\n              [\n                ...(isActive &&\n                permissions.canUpdateSubscription &&\n                plan?.pricingModel === PricingModel.PER_SEAT\n                  ? [\n                      {\n                        label: 'Manage Seats',\n                        onSelect: () => setShowManageSeatsModal(true),\n                      },\n                    ]\n                  : []),\n                ...(isActive && permissions.canCancelSubscription && !subscription.canceledAt\n                  ? [\n                      {\n                        label: isCanceling ? 'Canceling…' : 'Cancel Subscription',\n                        onSelect: () => setShowCancelModal(true),\n                        disabled: isCanceling,\n                        intent: 'destructive' as const,\n                      },\n                    ]\n                  : []),\n              ] satisfies CTAAction[]\n            }\n          />\n          {subscription.canceledAt && (\n            <span className=\"px-4 py-2 text-sm font-medium text-status-warning-text bg-status-warning-bg-subtle rounded-button\">\n              Cancellation Scheduled\n            </span>\n          )}\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Period Progress — primary status emphasis zone */}\n          {isActive && (\n            <EmphasisPanel className=\"p-5\">\n              <div className=\"flex items-center justify-between mb-4\">\n                <h2 className=\"text-base font-semibold text-text-primary\">Current Period</h2>\n                <span className=\"text-sm text-text-secondary tabular-nums\">\n                  {daysRemaining} days remaining\n                </span>\n              </div>\n              <div className=\"space-y-2\">\n                <ProgressBar\n                  value={progressPercentage}\n                  status=\"primary\"\n                  size=\"md\"\n                  aria-label=\"Billing period progress\"\n                />\n                <div className=\"flex items-center justify-between text-sm text-text-secondary\">\n                  <span>{formatDate(subscription.startDate, 'short')}</span>\n                  <span>{formatDate(subscription.endDate, 'short')}</span>\n                </div>\n              </div>\n            </EmphasisPanel>\n          )}\n\n          {/* Plan Quotas */}\n          <Card className=\"overflow-hidden\">\n            <div className=\"p-5 border-b border-border-subtle\">\n              <h2 className=\"text-base font-semibold text-text-primary\">\n                Plan Quotas\n                {quotas.length > 0 && (\n                  <span className=\"ml-2 text-sm font-normal text-text-muted tabular-nums\">\n                    ({quotas.length})\n                  </span>\n                )}\n              </h2>\n              <p className=\"text-sm text-text-secondary mt-0.5\">Limits included in your plan</p>\n            </div>\n            <div className=\"p-5\">\n              {quotas.length === 0 ? (\n                <p className=\"text-sm text-text-secondary\">\n                  No quotas assigned to this subscription.\n                </p>\n              ) : (\n                <div className=\"space-y-3\">\n                  {quotas.map((quota) => (\n                    <QuotaUsageItem key={quota.id} quota={quota} />\n                  ))}\n                </div>\n              )}\n            </div>\n          </Card>\n\n          {/* Workspace Quotas */}\n          {isActive && workspaceId && (\n            <Card className=\"overflow-hidden\">\n              <div className=\"p-5 border-b border-border-subtle flex items-center justify-between gap-4\">\n                <div>\n                  <h2 className=\"text-base font-semibold text-text-primary\">Workspace Quotas</h2>\n                  <p className=\"text-sm text-text-secondary mt-0.5\">\n                    Active limits for your workspace\n                  </p>\n                </div>\n                {isAssignedToWorkspace ? (\n                  <StatusPill status=\"success\" dot>\n                    Active\n                  </StatusPill>\n                ) : (\n                  <button\n                    type=\"button\"\n                    onClick={() => setShowAssignWorkspaceModal(true)}\n                    className=\"px-3 py-1.5 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                    Activate for Workspace\n                  </button>\n                )}\n              </div>\n\n              <div className=\"p-5\">\n                {isAssignedToWorkspace ? (\n                  wsAssignmentsForSub.length > 0 ? (\n                    <div className=\"space-y-3\">\n                      {wsAssignmentsForSub.map((item) => (\n                        <WorkspaceQuotaItem key={item.assignment.id} item={item} />\n                      ))}\n                    </div>\n                  ) : (\n                    <p className=\"text-sm text-text-secondary\">\n                      Quotas are activated on workspace{' '}\n                      <span className=\"font-mono text-xs text-text-primary bg-bg-sunken/60 rounded px-1.5 py-0.5\">\n                        {workspaceId}\n                      </span>\n                      . Usage data will appear here once quotas are consumed.\n                    </p>\n                  )\n                ) : (\n                  <div className=\"flex items-start gap-3\">\n                    <div className=\"size-8 rounded-full bg-status-warning-bg-subtle flex items-center justify-center shrink-0 mt-0.5\">\n                      <svg\n                        className=\"size-4 text-status-warning-text\"\n                        fill=\"none\"\n                        viewBox=\"0 0 24 24\"\n                        stroke=\"currentColor\"\n                      >\n                        <path\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          strokeWidth={2}\n                          d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                        />\n                      </svg>\n                    </div>\n                    <div>\n                      <p className=\"text-sm font-medium text-text-primary\">\n                        Workspace quotas not activated yet\n                      </p>\n                      <p className=\"text-sm text-text-secondary mt-0.5\">\n                        Click{' '}\n                        <button\n                          type=\"button\"\n                          onClick={() => setShowAssignWorkspaceModal(true)}\n                          className=\"text-text-link hover:underline font-medium\"\n                        >\n                          Activate for Workspace\n                        </button>{' '}\n                        to enable the workspace-scoped limits included in this plan.\n                      </p>\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              {showAssignWorkspaceModal && (\n                <WorkspaceQuotaAssignmentModal\n                  billingAccountId={billingAccountId ?? subscription.billingAccountId}\n                  subscriptionId={subscription.id}\n                  quotas={[] as WorkspaceQuotaToAssign[]}\n                  workspaces={[{ id: workspaceId, name: 'Current workspace' }]}\n                  currentWorkspaceId={workspaceId}\n                  onAssigned={() => {\n                    setShowAssignWorkspaceModal(false);\n                    void refetch();\n                    void refetchWsOverview();\n                  }}\n                  onSkip={() => setShowAssignWorkspaceModal(false)}\n                />\n              )}\n            </Card>\n          )}\n\n          {/* Addons */}\n          {addons.length > 0 && (\n            <Card className=\"overflow-hidden\">\n              <div className=\"p-5 border-b border-border-subtle\">\n                <h2 className=\"text-base font-semibold text-text-primary\">\n                  Addons{' '}\n                  <span className=\"text-sm font-normal text-text-muted tabular-nums\">\n                    ({addons.length})\n                  </span>\n                </h2>\n              </div>\n              <div className=\"p-5\">\n                <div className=\"space-y-3\">\n                  {addons.map((addonSub) => (\n                    <AddonItem key={addonSub.id} addonSubscription={addonSub} />\n                  ))}\n                </div>\n              </div>\n            </Card>\n          )}\n\n          {/* Recent Transactions */}\n          {transactions.length > 0 && (\n            <Card className=\"overflow-hidden\">\n              <div className=\"p-5 border-b border-border-subtle\">\n                <h2 className=\"text-base font-semibold text-text-primary\">Recent Transactions</h2>\n              </div>\n              <div className=\"divide-y divide-border-subtle\">\n                {transactions.slice(0, 5).map((transaction) => (\n                  <TransactionItem key={transaction.id} transaction={transaction} />\n                ))}\n              </div>\n              {transactions.length > 5 && (\n                <div className=\"p-4 text-center border-t border-border-subtle\">\n                  <button type=\"button\" className=\"text-sm text-text-link hover:underline\">\n                    View all transactions\n                  </button>\n                </div>\n              )}\n            </Card>\n          )}\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6 lg:sticky lg:top-6 lg:self-start\">\n          {/* Next steps guidance */}\n          <NextSteps storageKey=\"billing-subscription-detail\" steps={nextSteps} />\n\n          {/* Subscription Details */}\n          <Card className=\"overflow-hidden\">\n            <div className=\"p-5 border-b border-border-subtle\">\n              <h2 className=\"text-base font-semibold text-text-primary\">Details</h2>\n            </div>\n            <div className=\"p-5 space-y-4\">\n              <div>\n                <p className=\"text-sm text-text-secondary\">Subscription ID</p>\n                <p className=\"font-mono text-sm text-text-primary mt-0.5 break-all\">\n                  {subscription.id}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Plan</p>\n                <p className=\"text-sm text-text-primary mt-0.5\">{plan?.name || 'Unknown'}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Billing Account</p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  {subscription.billingAccount?.name || 'Unknown'}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Start Date</p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  {formatDate(subscription.startDate)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">End Date</p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  {formatDate(subscription.endDate)}\n                </p>\n              </div>\n              {subscription.nextBillingDate && (\n                <div>\n                  <p className=\"text-sm text-text-secondary\">Next Billing</p>\n                  <p className=\"text-sm text-text-primary mt-0.5\">\n                    {formatDate(subscription.nextBillingDate)}\n                  </p>\n                </div>\n              )}\n              <div>\n                <p className=\"text-sm text-text-secondary\">Auto Renewal</p>\n                <p className=\"text-sm text-text-primary mt-0.5\">\n                  {subscription.autoRenewal ? 'Enabled' : 'Disabled'}\n                </p>\n              </div>\n              {subscription.paymentGateway && (\n                <div>\n                  <p className=\"text-sm text-text-secondary\">Payment Gateway</p>\n                  <p className=\"text-sm text-text-primary mt-0.5 capitalize\">\n                    {subscription.paymentGateway}\n                  </p>\n                </div>\n              )}\n            </div>\n          </Card>\n\n          {/* History */}\n          {history.length > 0 && (\n            <Card className=\"overflow-hidden\">\n              <div className=\"p-5 border-b border-border-subtle\">\n                <h2 className=\"text-base font-semibold text-text-primary\">History</h2>\n              </div>\n              <div className=\"p-5\">\n                <div className=\"space-y-3\">\n                  {history.slice(0, 5).map((item) => (\n                    <HistoryItem key={item.id} item={item} />\n                  ))}\n                </div>\n              </div>\n            </Card>\n          )}\n        </div>\n      </div>\n\n      {/* Manage Seats Modal */}\n      {showManageSeatsModal && subscription && (\n        <ManageSeatsModal\n          subscription={subscription}\n          onClose={() => setShowManageSeatsModal(false)}\n          onConfirm={async (seatCount) => {\n            await updateSubscriptionSeats({ subscriptionId: subscription.id, seatCount });\n            await refetch();\n          }}\n          isLoading={isUpdatingSeats}\n        />\n      )}\n\n      {/* Cancel Subscription Modal */}\n      {showCancelModal && (\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n          <div\n            className=\"absolute inset-0 bg-overlay-scrim\"\n            onClick={() => setShowCancelModal(false)}\n          />\n          <div\n            className=\"relative bg-bg-elevated border border-border-seam rounded-card shadow-[var(--shadow-elevation-4)] w-full max-w-md mx-4 p-6\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby=\"cancel-subscription-title\"\n          >\n            <h3\n              id=\"cancel-subscription-title\"\n              className=\"text-lg font-semibold text-text-primary mb-2\"\n            >\n              Cancel Subscription\n            </h3>\n            <p className=\"text-sm text-text-secondary mb-4\">\n              Are you sure you want to cancel this subscription? Your subscription will remain\n              active until{' '}\n              <span className=\"font-medium text-text-primary\">\n                {formatDate(subscription.endDate)}\n              </span>\n              , but will not renew automatically.\n            </p>\n\n            <div className=\"mb-4\">\n              <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                Reason for cancellation (optional)\n              </label>\n              <textarea\n                value={cancelReason}\n                onChange={(e) => setCancelReason(e.target.value)}\n                placeholder=\"Please share why you're canceling...\"\n                className=\"w-full px-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)] focus:border-transparent resize-none\"\n                rows={3}\n              />\n            </div>\n\n            {cancelError && (\n              <div className=\"mb-4 p-3 bg-status-error-bg-subtle border border-status-error-border rounded-card\">\n                <p className=\"text-sm text-status-error-text\">{cancelError}</p>\n              </div>\n            )}\n\n            <div className=\"flex items-center justify-end gap-3\">\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setShowCancelModal(false);\n                  setCancelReason('');\n                  setCancelError(null);\n                }}\n                className=\"px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-primary transition-colors\"\n              >\n                Keep Subscription\n              </button>\n              <button\n                type=\"button\"\n                onClick={handleCancelSubscription}\n                disabled={isCanceling}\n                className=\"px-4 py-2 text-sm font-medium bg-action-danger-bg text-action-danger-text rounded-button hover:bg-action-danger-bgHover transition-colors duration-200 disabled:opacity-50\"\n              >\n                {isCanceling ? 'Canceling...' : 'Confirm Cancellation'}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\n// ============================================================================\n// Sub-components\n// ============================================================================\n\nconst QuotaUsageItem: FC<{ quota: QuotaAssignment }> = ({ quota }) => {\n  const context = quota.context as\n    | { displayName?: string; label?: string; description?: string }\n    | null\n    | undefined;\n  const displayName = formatQuotaDisplayName(quota.name, context as Record<string, unknown> | null);\n  const description =\n    context?.description && typeof context.description === 'string' ? context.description : null;\n  const limits = quota.limits as { value?: number } | null;\n  const limit = limits?.value ?? 0;\n  const used = quota.currentUsageSum ?? 0;\n  const percentage = limit > 0 ? Math.min(100, (used / limit) * 100) : 0;\n  const isBytes = quota.name.includes('bytes') || quota.name.includes('storage');\n  const isPooled = quota.quotaType === 'POOLED';\n\n  return (\n    <div className=\"p-4 rounded-card border border-border-seam bg-bg-surface\">\n      <div className=\"flex items-start justify-between gap-4 mb-2\">\n        <div className=\"min-w-0\">\n          <p className=\"font-medium text-text-primary truncate\">{displayName}</p>\n          {description && (\n            <p className=\"text-xs text-text-secondary mt-0.5 line-clamp-2\">{description}</p>\n          )}\n        </div>\n        <span className=\"text-sm font-medium text-text-primary shrink-0 tabular-nums\">\n          {isBytes ? formatBytes(used) : used.toLocaleString()}\n          {' / '}\n          {limit > 0 ? (isBytes ? formatBytes(limit) : limit.toLocaleString()) : '∞'}\n        </span>\n      </div>\n\n      {limit > 0 && (\n        <div className=\"h-1.5 rounded-full bg-bg-sunken overflow-hidden mb-2\">\n          <div\n            className={`h-full rounded-full transition-all duration-300 ${getQuotaProgressColor(percentage)}`}\n            style={{ width: `${percentage}%` }}\n          />\n        </div>\n      )}\n\n      <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n        <span className=\"px-1.5 py-0.5 rounded bg-bg-sunken font-medium\">\n          {isPooled ? 'Shared' : 'Per Workspace'}\n        </span>\n        <div className=\"flex items-center gap-3\">\n          {quota.endtime && <span>Expires {formatDate(quota.endtime, 'short')}</span>}\n          {limit > 0 && (\n            <span\n              className={\n                percentage >= 90\n                  ? 'text-status-error-text font-medium'\n                  : percentage >= 70\n                    ? 'text-status-warning-text font-medium'\n                    : ''\n              }\n            >\n              {formatPercentage(percentage)} used\n            </span>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst WorkspaceQuotaItem: FC<{ item: WorkspaceQuotaOverviewItem }> = ({ item }) => {\n  const { assignment, effectiveUsed, usagePercentage } = item;\n  const displayName = formatQuotaDisplayName(assignment.quotaName);\n  const hasLimit = !assignment.noLimit && assignment.limit !== null;\n  const limit = assignment.limit ?? 0;\n  const isBytes =\n    assignment.quotaName.includes('bytes') || assignment.quotaName.includes('storage');\n  const resetLabel = formatResetPeriod(assignment.resetPeriod);\n\n  return (\n    <div className=\"p-4 rounded-card border border-border-seam bg-bg-surface\">\n      <div className=\"flex items-start justify-between gap-4 mb-2\">\n        <div className=\"min-w-0\">\n          <p className=\"font-medium text-text-primary truncate\">{displayName}</p>\n          <p className=\"text-xs text-text-secondary mt-0.5\">\n            {assignment.quotaMode === 'pooled' ? 'Pooled across workspaces' : 'Dedicated'}\n            {resetLabel && ` · ${resetLabel}`}\n          </p>\n        </div>\n        <span className=\"text-sm font-medium text-text-primary shrink-0 tabular-nums\">\n          {isBytes ? formatBytes(effectiveUsed) : effectiveUsed.toLocaleString()}\n          {' / '}\n          {assignment.noLimit\n            ? '∞'\n            : hasLimit\n              ? isBytes\n                ? formatBytes(limit)\n                : limit.toLocaleString()\n              : '∞'}\n        </span>\n      </div>\n\n      {hasLimit && (\n        <div className=\"h-1.5 rounded-full bg-bg-sunken overflow-hidden mb-2\">\n          <div\n            className={`h-full rounded-full transition-all duration-300 ${getQuotaProgressColor(usagePercentage)}`}\n            style={{ width: `${Math.min(100, usagePercentage)}%` }}\n          />\n        </div>\n      )}\n\n      <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n        <span>Since {formatDate(assignment.createdAt, 'short')}</span>\n        {hasLimit && (\n          <span\n            className={\n              usagePercentage >= 90\n                ? 'text-status-error-text font-medium'\n                : usagePercentage >= 70\n                  ? 'text-status-warning-text font-medium'\n                  : ''\n            }\n          >\n            {formatPercentage(usagePercentage)} used\n          </span>\n        )}\n      </div>\n    </div>\n  );\n};\n\nconst AddonItem: FC<{ addonSubscription: AddonSubscription }> = ({ addonSubscription }) => {\n  const addon = addonSubscription.addon;\n  return (\n    <div className=\"flex items-center justify-between p-3 rounded-card border border-border-seam bg-bg-sunken\">\n      <div>\n        <p className=\"font-medium text-text-primary\">{addon?.name || 'Unknown Addon'}</p>\n        <p className=\"text-sm text-text-secondary\">Qty: {addonSubscription.quantity}</p>\n      </div>\n      {addon && (\n        <p className=\"text-sm font-medium text-text-primary tabular-nums\">\n          {formatCurrency(addon.price * addonSubscription.quantity, addon.currency)}\n        </p>\n      )}\n    </div>\n  );\n};\n\nconst TransactionItem: FC<{ transaction: Transaction }> = ({ transaction }) => {\n  return (\n    <div className=\"flex items-center justify-between px-5 py-4 hover:bg-bg-sunken transition-colors\">\n      <div>\n        <p className=\"font-medium text-text-primary capitalize\">{transaction.type}</p>\n        <p className=\"text-sm text-text-secondary\">{formatDate(transaction.createdAt, 'short')}</p>\n      </div>\n      <div className=\"text-right\">\n        <p\n          className={`font-medium tabular-nums ${transaction.type === 'refund' ? 'text-status-error-text' : 'text-text-primary'}`}\n        >\n          {transaction.type === 'refund' ? '-' : ''}\n          {formatCurrency(transaction.amount, transaction.currency)}\n        </p>\n        <p className=\"text-sm text-text-secondary capitalize\">{transaction.status}</p>\n      </div>\n    </div>\n  );\n};\n\nconst HistoryItem: FC<{ item: SubscriptionHistory }> = ({ item }) => {\n  return (\n    <div className=\"flex items-start gap-3\">\n      <div className=\"size-2 rounded-full bg-text-muted mt-2 shrink-0\" />\n      <div>\n        <p className=\"text-sm text-text-primary\">\n          <span className=\"capitalize\">{item.fromStatus}</span>\n          {' → '}\n          <span className=\"capitalize font-medium\">{item.toStatus}</span>\n        </p>\n        {item.reason && <p className=\"text-xs text-text-secondary mt-0.5\">{item.reason}</p>}\n        <p className=\"text-xs text-text-secondary mt-0.5\">{formatDate(item.createdAt, 'short')}</p>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/usage/hooks/useUsage.js

@@ -5,8 +5,8 @@ import { useCallback as c, useEffect as l, useMemo as u, useState as d } from "r
 import { gql as f, useGatewayClient as p, useMutation as m, useQuery as h } from "@burdenoff/fe-libs/shared/graphql";
 //#region src/billing/modules/usage/hooks/useUsage.ts
 var g = f`
-  query WorkspaceQuotaOverview($workspaceId: ID!) {
-    workspaceQuotaOverview(workspaceId: $workspaceId) {
+  query WorkspaceQuotaOverview($workspaceId: ID!, $productId: ID) {
+    workspaceQuotaOverview(workspaceId: $workspaceId, productId: $productId) {
       assignment {
         id
         workspaceId
@@ -43,18 +43,21 @@ f`
     unassignWorkspaceQuota(id: $id, workspaceId: $workspaceId)
   }
 `;
-function _(e) {
-	let { data: t, loading: n, error: r, refetch: i } = h(g, {
+function _(e, t) {
+	let { data: n, loading: r, error: i, refetch: a } = h(g, {
 		client: p("workspace"),
-		variables: { workspaceId: e },
+		variables: {
+			workspaceId: e,
+			productId: t
+		},
 		skip: !e,
 		fetchPolicy: "cache-and-network"
 	});
 	return {
-		overview: t?.workspaceQuotaOverview ?? [],
-		isLoading: n,
-		error: r ?? null,
-		refetch: i
+		overview: n?.workspaceQuotaOverview ?? [],
+		isLoading: r,
+		error: i ?? null,
+		refetch: a
 	};
 }
 var v = f`
@@ -304,6 +307,8 @@ function M(e, t = {}) {
 			id: e.id,
 			status: e.status,
 			createdAt: e.createdAt,
+			planName: e.planName ?? void 0,
+			productId: e.productId ?? void 0,
 			aggregatedQuotas: O(t)
 		};
 	}, []), T = u(() => f?.getSubscriptionUsageOverview ? f.getSubscriptionUsageOverview.map(w) : [], [f, w]), E = u(() => g?.getSubscriptionUsageOverview ? (g.getSubscriptionUsageOverview.subscriptions || g.getSubscriptionUsageOverview).map(w) : [], [g, w]), D = u(() => {

package/dist/billing/modules/usage/hooks/useUsage.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUsage.js","names":[],"sources":["../../../../../src/billing/modules/usage/hooks/useUsage.ts"],"sourcesContent":["/**\n * Usage Module - Hooks\n * Custom hooks for usage data fetching and mutations\n */\n\nimport { useMemo, useCallback, useState, useEffect } from 'react';\nimport {\n  useGetUsageDashboardQuery,\n  useGetBillingAccountQuotasSummaryForUsageQuery,\n  useGetSubscriptionsWithQuotasQuery,\n  useGetPastSubscriptionsWithQuotasQuery,\n  useGetBillingAccountsForUsageQuery,\n  useGetQuotaAnalyticsForUsageQuery,\n  type GetPastSubscriptionsWithQuotasQuery,\n} from '../../../../generated/global-operations';\nimport {\n  useGetUsageRecordsQuery,\n  type GetUsageRecordsQuery,\n  type GetUsageRecordsQueryVariables,\n} from '../../../../generated/wspace-operations';\nimport { useGatewayClient, useQuery, useMutation, gql } from '@burdenoff/fe-libs/shared/graphql';\nimport { AnalyticsPeriod, QuotaStatus } from '../../../shared/types';\nimport type { UsageDashboard } from '../../../shared/types';\n\n// ============================================================================\n// Workspace Quota Assignment — managed by activity-svc\n// ============================================================================\n\nconst WORKSPACE_QUOTA_OVERVIEW_QUERY = gql`\n  query WorkspaceQuotaOverview($workspaceId: ID!) {\n    workspaceQuotaOverview(workspaceId: $workspaceId) {\n      assignment {\n        id\n        workspaceId\n        quotaName\n        productId\n        quotaMode\n        billingAccountId\n        subscriptionId\n        limit\n        used\n        noLimit\n        resetPeriod\n        lastResetAt\n        isActive\n        createdAt\n      }\n      liveStatus {\n        workspaceId\n        quotaName\n        productId\n        currentValue\n        limit\n        noLimit\n        scrapedAt\n      }\n      effectiveUsed\n      remaining\n      usagePercentage\n    }\n  }\n`;\n\nconst UNASSIGN_WORKSPACE_QUOTA_MUTATION = gql`\n  mutation UnassignWorkspaceQuota($id: ID!, $workspaceId: ID!) {\n    unassignWorkspaceQuota(id: $id, workspaceId: $workspaceId)\n  }\n`;\n\nexport interface WorkspaceQuotaAssignmentItem {\n  id: string;\n  workspaceId: string;\n  quotaName: string;\n  productId: string;\n  quotaMode: 'dedicated' | 'pooled';\n  billingAccountId: string | null;\n  subscriptionId: string | null;\n  limit: number | null;\n  used: number;\n  noLimit: boolean;\n  resetPeriod: string;\n  lastResetAt: string | null;\n  isActive: boolean;\n  createdAt: string;\n}\n\nexport interface WorkspaceQuotaOverviewItem {\n  assignment: WorkspaceQuotaAssignmentItem;\n  liveStatus: WorkspaceQuotaStatusItem | null;\n  effectiveUsed: number;\n  remaining: number | null;\n  usagePercentage: number;\n}\n\nexport interface AssignWorkspaceQuotaInput {\n  workspaceId: string;\n  quotaName: string;\n  productId: string;\n  quotaMode?: 'dedicated' | 'pooled';\n  billingAccountId?: string;\n  subscriptionId?: string;\n  limit?: number;\n  noLimit?: boolean;\n  resetPeriod?: string;\n  metadata?: Record<string, unknown>;\n}\n\ninterface UseWorkspaceQuotaOverviewResult {\n  overview: WorkspaceQuotaOverviewItem[];\n  isLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n}\n\nexport function useWorkspaceQuotaOverview(workspaceId?: string): UseWorkspaceQuotaOverviewResult {\n  const wsClient = useGatewayClient('workspace');\n  const { data, loading, error, refetch } = useQuery<{\n    workspaceQuotaOverview: WorkspaceQuotaOverviewItem[];\n  }>(WORKSPACE_QUOTA_OVERVIEW_QUERY, {\n    client: wsClient,\n    variables: { workspaceId },\n    skip: !workspaceId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  return {\n    overview: data?.workspaceQuotaOverview ?? [],\n    isLoading: loading,\n    error: error ?? null,\n    refetch,\n  };\n}\n\n// ============================================================================\n// activateSubscriptionForWorkspace — single backend call that assigns all\n// WORKSPACE-scoped quotas from the purchased plan. Replaces the N individual\n// assignWorkspaceQuota calls so the UI never sends quota names/limits to the server.\n// ============================================================================\n\nconst ACTIVATE_SUBSCRIPTION_FOR_WORKSPACE_MUTATION = gql`\n  mutation ActivateSubscriptionForWorkspace(\n    $subscriptionId: ID!\n    $billingAccountId: ID!\n    $workspaceId: ID!\n  ) {\n    activateSubscriptionForWorkspace(\n      subscriptionId: $subscriptionId\n      billingAccountId: $billingAccountId\n      workspaceId: $workspaceId\n    ) {\n      workspaceId\n      assignedQuotas\n      skippedQuotas\n    }\n  }\n`;\n\nexport interface ActivateSubscriptionForWorkspaceResult {\n  workspaceId: string;\n  assignedQuotas: number;\n  skippedQuotas: number;\n}\n\ninterface UseActivateSubscriptionForWorkspaceResult {\n  activate: (\n    subscriptionId: string,\n    billingAccountId: string,\n    workspaceId: string\n  ) => Promise<ActivateSubscriptionForWorkspaceResult | null>;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport function useActivateSubscriptionForWorkspace(): UseActivateSubscriptionForWorkspaceResult {\n  const globalClient = useGatewayClient('global');\n  const [mutate, { loading, error }] = useMutation<\n    { activateSubscriptionForWorkspace: ActivateSubscriptionForWorkspaceResult },\n    { subscriptionId: string; billingAccountId: string; workspaceId: string }\n  >(ACTIVATE_SUBSCRIPTION_FOR_WORKSPACE_MUTATION, { client: globalClient });\n\n  const activate = async (\n    subscriptionId: string,\n    billingAccountId: string,\n    workspaceId: string\n  ) => {\n    const result = await mutate({ variables: { subscriptionId, billingAccountId, workspaceId } });\n    return result.data?.activateSubscriptionForWorkspace ?? null;\n  };\n\n  return { activate, isLoading: loading, error: error ?? null };\n}\n\ninterface UseUnassignWorkspaceQuotaResult {\n  unassign: (id: string, workspaceId: string) => Promise<boolean>;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport function useUnassignWorkspaceQuota(): UseUnassignWorkspaceQuotaResult {\n  const wsClient = useGatewayClient('workspace');\n  const [mutate, { loading, error }] = useMutation<\n    { unassignWorkspaceQuota: boolean },\n    { id: string; workspaceId: string }\n  >(UNASSIGN_WORKSPACE_QUOTA_MUTATION, { client: wsClient });\n\n  const unassign = async (id: string, workspaceId: string) => {\n    const result = await mutate({ variables: { id, workspaceId } });\n    return result.data?.unassignWorkspaceQuota ?? false;\n  };\n\n  return { unassign, isLoading: loading, error: error ?? null };\n}\n\n// ============================================================================\n// Workspace Quota Status — live values from activity-svc\n// ============================================================================\n\nconst WORKSPACE_QUOTA_STATUSES_QUERY = gql`\n  query WorkspaceQuotaStatuses($workspaceId: ID!) {\n    workspaceQuotaStatuses(workspaceId: $workspaceId) {\n      workspaceId\n      quotaName\n      productId\n      currentValue\n      limit\n      noLimit\n      scrapedAt\n    }\n  }\n`;\n\nconst WORKSPACE_QUOTA_HISTORY_QUERY = gql`\n  query WorkspaceQuotaHistory($workspaceId: ID!, $quotaName: String!, $limit: Int) {\n    workspaceQuotaHistory(workspaceId: $workspaceId, quotaName: $quotaName, limit: $limit) {\n      id\n      workspaceId\n      quotaName\n      productId\n      value\n      limit\n      noLimit\n      snapshotAt\n    }\n  }\n`;\n\nexport interface WorkspaceQuotaStatusItem {\n  workspaceId: string;\n  quotaName: string;\n  productId: string;\n  currentValue: number;\n  limit: number | null;\n  noLimit: boolean;\n  scrapedAt: string;\n}\n\nexport interface WorkspaceQuotaSnapshotItem {\n  id: string;\n  workspaceId: string;\n  quotaName: string;\n  productId: string;\n  value: number;\n  limit: number | null;\n  noLimit: boolean;\n  snapshotAt: string;\n}\n\ninterface UseWorkspaceQuotaStatusesResult {\n  statuses: WorkspaceQuotaStatusItem[];\n  statusMap: Map<string, WorkspaceQuotaStatusItem>;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport function useWorkspaceQuotaStatuses(workspaceId?: string): UseWorkspaceQuotaStatusesResult {\n  const wsClient = useGatewayClient('workspace');\n  const { data, loading, error } = useQuery<{ workspaceQuotaStatuses: WorkspaceQuotaStatusItem[] }>(\n    WORKSPACE_QUOTA_STATUSES_QUERY,\n    {\n      client: wsClient,\n      variables: { workspaceId },\n      skip: !workspaceId,\n      fetchPolicy: 'cache-and-network',\n    }\n  );\n\n  const { statuses, statusMap } = useMemo(() => {\n    const list = data?.workspaceQuotaStatuses ?? [];\n    return { statuses: list, statusMap: new Map(list.map((s) => [s.quotaName, s])) };\n  }, [data]);\n\n  return { statuses, statusMap, isLoading: loading, error: error ?? null };\n}\n\ninterface UseWorkspaceQuotaHistoryResult {\n  snapshots: WorkspaceQuotaSnapshotItem[];\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport function useWorkspaceQuotaHistory(\n  workspaceId?: string,\n  quotaName?: string,\n  limit: number = 48\n): UseWorkspaceQuotaHistoryResult {\n  const wsClient = useGatewayClient('workspace');\n  const { data, loading, error } = useQuery<{\n    workspaceQuotaHistory: WorkspaceQuotaSnapshotItem[];\n  }>(WORKSPACE_QUOTA_HISTORY_QUERY, {\n    client: wsClient,\n    variables: { workspaceId, quotaName, limit },\n    skip: !workspaceId || !quotaName,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  return {\n    snapshots: data?.workspaceQuotaHistory ?? [],\n    isLoading: loading,\n    error: error ?? null,\n  };\n}\n\n// ============================================================================\n// Dashboard Hook\n// ============================================================================\n\ninterface UseUsageDashboardParams {\n  billingAccountId?: string;\n  period?: AnalyticsPeriod;\n}\n\ninterface UseUsageDashboardResult {\n  dashboard: UsageDashboard | null;\n  isLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n}\n\nexport function useUsageDashboard({\n  billingAccountId,\n  period = AnalyticsPeriod.LAST_30_DAYS,\n}: UseUsageDashboardParams): UseUsageDashboardResult {\n  const { data, loading, error, refetch } = useGetUsageDashboardQuery({\n    variables: { billingAccountId: billingAccountId!, period },\n    skip: !billingAccountId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  return {\n    dashboard: data?.getUsageDashboard ?? null,\n    isLoading: loading,\n    error: error ?? null,\n    refetch,\n  };\n}\n\n// ============================================================================\n// Enhanced Usage Page Hooks\n// ============================================================================\n\n/**\n * Quota assignment from the API\n */\ninterface QuotaAssignmentSummary {\n  id: string;\n  name: string;\n  unit: string;\n  quotaType: 'POOLED' | 'PRODUCT_SPECIFIC';\n  reusable: boolean;\n  limit: number;\n  limitLeft: number;\n  used: number;\n  usagePercentage: number;\n  noLimit: boolean;\n  subscriptionId?: string;\n  context?: Record<string, unknown> | null;\n  recentUsages: Array<{\n    id: string;\n    amount: number;\n    description: string;\n    timestamp: string;\n    tags?: Record<string, unknown>;\n  }>;\n  createdAt: string;\n  endtime: string;\n}\n\n/**\n * Aggregated quota for display (multiple quota assignments with same name combined)\n */\nexport interface AggregatedQuota {\n  name: string;\n  displayName?: string;\n  description?: string;\n  unit: string;\n  totalLimit: number;\n  totalUsed: number;\n  usagePercentage: number;\n  status: QuotaStatus;\n  quotaCount: number;\n  noLimit: boolean;\n  reusable: boolean;\n  /** True when usage comes from the activity-svc scraper, not billing recordUsage events. */\n  isCollectorBased: boolean;\n  quotaAssignments: QuotaAssignmentSummary[];\n}\n\n/**\n * Subscription with aggregated quotas\n */\nexport interface SubscriptionWithAggregatedQuotas {\n  id: string;\n  status: string;\n  planName?: string;\n  productId?: string;\n  createdAt: string;\n  aggregatedQuotas: AggregatedQuota[];\n}\n\n/**\n * Helper function to calculate quota status based on usage percentage\n */\nfunction calculateQuotaStatus(\n  usagePercentage: number,\n  limitLeft: number,\n  noLimit = false\n): QuotaStatus {\n  if (noLimit) return QuotaStatus.HEALTHY;\n  if (limitLeft <= 0) return QuotaStatus.EXHAUSTED;\n  if (usagePercentage >= 90) return QuotaStatus.CRITICAL;\n  if (usagePercentage >= 75) return QuotaStatus.WARNING;\n  return QuotaStatus.HEALTHY;\n}\n\n// Maps billing quota names to their corresponding scraper metric names in workspace_quota_statuses.\n// Scraper keys use dot-notation product prefix; billing keys use kebab-case.\nconst BILLING_TO_SCRAPER_METRIC: Record<string, string> = {\n  'agents-registered': 'vibecontrols.agents.count',\n  'vibes-created': 'vibecontrols.vibes.count',\n  'catalogs-created': 'vibecontrols.catalogs.count',\n  'tunnels-created': 'vibecontrols.tunnels.count',\n  'sessions-started': 'vibecontrols.sessions.starts',\n};\n\n/**\n * Merges live collector values from activity-svc into a list of aggregated quotas.\n * Overrides `totalUsed` (and derived fields) when a live value exists, and distributes\n * the live total across individual assignments (earliest-expiry first) so the\n * Quota Breakdown shows real per-assignment consumption instead of always-0.\n */\nfunction mergeLiveValues(\n  aggregated: AggregatedQuota[],\n  statusMap: Map<string, WorkspaceQuotaStatusItem>\n): AggregatedQuota[] {\n  if (statusMap.size === 0) return aggregated;\n  return aggregated.map((q) => {\n    const scraperKey = BILLING_TO_SCRAPER_METRIC[q.name] ?? q.name;\n    const live = statusMap.get(scraperKey);\n    if (!live) return q;\n\n    const totalUsed = live.currentValue;\n    const { totalLimit, noLimit } = q;\n    const usagePercentage = noLimit || totalLimit === 0 ? 0 : (totalUsed / totalLimit) * 100;\n    const limitLeft = noLimit ? 0 : Math.max(0, totalLimit - totalUsed);\n\n    // Distribute live total into assignments: fill earliest-expiry first, overflow to next.\n    let remaining = totalUsed;\n    const updatedAssignments = [...q.quotaAssignments]\n      .sort((a, b) => {\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((a) => {\n        const assignmentUsed = Math.min(remaining, a.limit || 0);\n        remaining = Math.max(0, remaining - assignmentUsed);\n        return { ...a, used: assignmentUsed };\n      });\n\n    return {\n      ...q,\n      totalUsed,\n      usagePercentage,\n      isCollectorBased: true,\n      status: calculateQuotaStatus(usagePercentage, limitLeft, noLimit),\n      quotaAssignments: updatedAssignments,\n    };\n  });\n}\n\n/**\n * Helper function to aggregate quotas by name\n */\nfunction aggregateQuotasByName(quotas: QuotaAssignmentSummary[]): AggregatedQuota[] {\n  const grouped = new Map<string, QuotaAssignmentSummary[]>();\n\n  for (const quota of quotas) {\n    const existing = grouped.get(quota.name) || [];\n    existing.push(quota);\n    grouped.set(quota.name, existing);\n  }\n\n  const aggregated: AggregatedQuota[] = [];\n\n  for (const [name, assignments] of grouped) {\n    // Sum up limits and usage first\n    const totalLimit = assignments.reduce((sum, q) => sum + (q.limit || 0), 0);\n    const totalUsed = assignments.reduce((sum, q) => sum + (q.used || 0), 0);\n    const totalLimitLeft = assignments.reduce((sum, q) => sum + (q.limitLeft || 0), 0);\n\n    // Check if there's actually no limit (ignore noLimit flag if there's a numeric limit)\n    // Only treat as unlimited if totalLimit is 0 or all assignments explicitly have noLimit AND no numeric limit\n    const hasNoLimit =\n      totalLimit === 0 && assignments.every((q) => q.noLimit || (q.limit || 0) === 0);\n\n    // Calculate percentage\n    const usagePercentage = hasNoLimit || totalLimit === 0 ? 0 : (totalUsed / totalLimit) * 100;\n\n    // Get status\n    const status = calculateQuotaStatus(usagePercentage, totalLimitLeft, hasNoLimit);\n\n    // Get reusable, unit, and display info from first assignment\n    const reusable = assignments[0]?.reusable || false;\n    const unit = assignments[0]?.unit || '';\n    const ctx = assignments[0]?.context;\n    const displayName = typeof ctx?.displayName === 'string' ? ctx.displayName : undefined;\n    const description = typeof ctx?.description === 'string' ? ctx.description : undefined;\n\n    aggregated.push({\n      name,\n      displayName,\n      description,\n      unit,\n      totalLimit: hasNoLimit ? 0 : totalLimit,\n      totalUsed,\n      usagePercentage,\n      status,\n      quotaCount: assignments.length,\n      noLimit: hasNoLimit,\n      isCollectorBased: false,\n      reusable,\n      quotaAssignments: assignments,\n    });\n  }\n\n  // Sort by status priority (critical first) then by usage percentage\n  const statusPriority: Record<QuotaStatus, number> = {\n    EXHAUSTED: 0,\n    CRITICAL: 1,\n    WARNING: 2,\n    HEALTHY: 3,\n    INACTIVE: 4,\n  };\n\n  return aggregated.sort((a, b) => {\n    const priorityDiff = statusPriority[a.status] - statusPriority[b.status];\n    if (priorityDiff !== 0) return priorityDiff;\n    return b.usagePercentage - a.usagePercentage;\n  });\n}\n\n/**\n * Hook to get billing accounts for the selector\n */\ninterface UseBillingAccountsForUsageResult {\n  billingAccounts: Array<{\n    id: string;\n    name: string;\n    email: string;\n    currency: string;\n    creditAmount: number;\n    isActive: boolean;\n    isDefault: boolean;\n  }>;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport function useBillingAccountsForUsage(): UseBillingAccountsForUsageResult {\n  const { data, loading, error } = useGetBillingAccountsForUsageQuery({\n    fetchPolicy: 'cache-and-network',\n  });\n\n  return {\n    billingAccounts: data?.getBillingAccountsByOrg ?? [],\n    isLoading: loading,\n    error: error ?? null,\n  };\n}\n\n/**\n * Hook to get billing account quotas summary with aggregation\n * Only returns pooled quotas - subscription quotas come from useSubscriptionsWithQuotas\n */\ninterface UseBillingAccountQuotasSummaryResult {\n  pooledQuotas: AggregatedQuota[];\n  isLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n}\n\nexport function useBillingAccountQuotasSummary(\n  billingAccountId: string | undefined,\n  productId?: string\n): UseBillingAccountQuotasSummaryResult {\n  const { data, loading, error, refetch } = useGetBillingAccountQuotasSummaryForUsageQuery({\n    variables: { billingAccountId: billingAccountId!, productId },\n    skip: !billingAccountId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const pooledQuotas = useMemo(() => {\n    if (!data?.getBillingAccountQuotasSummary) {\n      return [];\n    }\n\n    const summary = data.getBillingAccountQuotasSummary;\n    return aggregateQuotasByName(summary.pooledQuotas || []);\n  }, [data]);\n\n  return {\n    pooledQuotas,\n    isLoading: loading,\n    error: error ?? null,\n    refetch,\n  };\n}\n\n/**\n * Subscription from the API\n */\ninterface SubscriptionQuota {\n  id: string;\n  name: string;\n  limits: { type: string; value: number; unit?: string; originalValue?: number };\n  context?: Record<string, unknown> | null;\n  currentUsageSum: number;\n  usageCount: number;\n  createdAt: string;\n  endtime: string;\n}\n\ninterface SubscriptionFromAPI {\n  id: string;\n  status: string;\n  createdAt: string;\n  quotas: SubscriptionQuota[];\n}\n\n/**\n * Hook to get subscriptions with their quotas grouped by status\n * Uses lazy loading for past subscriptions and supports backend search\n */\ntype ViewMode = 'active' | 'past' | 'all';\n\nconst PAST_SUBSCRIPTIONS_PAGE_SIZE = 10;\n\ninterface UseSubscriptionsWithQuotasOptions {\n  searchQuery?: string;\n  viewMode?: ViewMode;\n}\n\ninterface UseSubscriptionsWithQuotasResult {\n  activeSubscriptions: SubscriptionWithAggregatedQuotas[];\n  pastSubscriptions: SubscriptionWithAggregatedQuotas[];\n  isLoading: boolean;\n  isPastSubscriptionsLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n  // Pagination for past subscriptions\n  loadMorePastSubscriptions: () => void;\n  hasMorePastSubscriptions: boolean;\n  isLoadingMorePast: boolean;\n  pastSubscriptionsCount: number;\n}\n\nexport function useSubscriptionsWithQuotas(\n  billingAccountId: string | undefined,\n  options: UseSubscriptionsWithQuotasOptions = {}\n): UseSubscriptionsWithQuotasResult {\n  const { searchQuery, viewMode = 'active' } = options;\n\n  // Determine which subscriptions to fetch based on viewMode\n  const shouldFetchActive = viewMode === 'active' || viewMode === 'all';\n  const shouldFetchPast = viewMode === 'past' || viewMode === 'all';\n\n  // Query for active subscriptions\n  const { data, loading, error, refetch } = useGetSubscriptionsWithQuotasQuery({\n    variables: {\n      billingAccountId: billingAccountId!,\n      searchQuery: searchQuery || null,\n    },\n    skip: !billingAccountId || !shouldFetchActive,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  // Query for past subscriptions with pagination - only when viewMode is 'past' or 'all'\n  const {\n    data: pastData,\n    loading: pastLoading,\n    refetch: refetchPast,\n    fetchMore: fetchMorePast,\n  } = useGetPastSubscriptionsWithQuotasQuery({\n    variables: {\n      billingAccountId: billingAccountId!,\n      searchQuery: searchQuery || null,\n      page: 1,\n      pageSize: PAST_SUBSCRIPTIONS_PAGE_SIZE,\n    },\n    skip: !billingAccountId || !shouldFetchPast,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  // Track if we're loading more past subscriptions\n  const [isLoadingMorePast, setIsLoadingMorePast] = useState(false);\n  const [currentPastPage, setCurrentPastPage] = useState(1);\n\n  // Helper function to process subscription data\n  const processSubscription = useCallback(\n    (sub: SubscriptionFromAPI): SubscriptionWithAggregatedQuotas => {\n      const quotaSummaries: QuotaAssignmentSummary[] = (sub.quotas || []).map((q) => {\n        const limit = q.limits?.value || 0;\n        const used = q.currentUsageSum || 0;\n        const limitLeft = Math.max(0, limit - used);\n        const usagePercentage = limit > 0 ? (used / limit) * 100 : 0;\n        const unit = q.limits?.unit || '';\n\n        return {\n          id: q.id,\n          name: q.name,\n          unit,\n          quotaType: 'PRODUCT_SPECIFIC' as const,\n          reusable: false,\n          limit,\n          limitLeft,\n          used,\n          usagePercentage,\n          noLimit: q.limits?.type !== 'number' && q.limits?.type !== 'numeric',\n          subscriptionId: sub.id,\n          context: q.context,\n          recentUsages: [],\n          createdAt: q.createdAt,\n          endtime: q.endtime,\n        };\n      });\n\n      return {\n        id: sub.id,\n        status: sub.status,\n        createdAt: sub.createdAt,\n        aggregatedQuotas: aggregateQuotasByName(quotaSummaries),\n      };\n    },\n    []\n  );\n\n  // Process active subscriptions\n  const activeSubscriptions = useMemo(() => {\n    if (!data?.getSubscriptionUsageOverview) {\n      return [];\n    }\n\n    const subscriptions: SubscriptionFromAPI[] = data.getSubscriptionUsageOverview;\n    return subscriptions.map(processSubscription);\n  }, [data, processSubscription]);\n\n  // Process past subscriptions\n  const pastSubscriptions = useMemo(() => {\n    if (!pastData?.getSubscriptionUsageOverview) {\n      return [];\n    }\n\n    const subscriptions: SubscriptionFromAPI[] =\n      pastData.getSubscriptionUsageOverview.subscriptions || pastData.getSubscriptionUsageOverview;\n    return subscriptions.map(processSubscription);\n  }, [pastData, processSubscription]);\n\n  // Get pagination info for past subscriptions\n  const pastSubscriptionsPagination = useMemo(() => {\n    const overview = pastData?.getSubscriptionUsageOverview;\n    if (!overview) {\n      return { totalCount: 0, hasMore: false };\n    }\n    // If it's the new paginated format\n    if (overview.totalCount !== undefined) {\n      return {\n        totalCount: overview.totalCount,\n        hasMore: pastSubscriptions.length < overview.totalCount,\n      };\n    }\n    // Legacy format - assume there might be more if we got a full page\n    return {\n      totalCount: pastSubscriptions.length,\n      hasMore: pastSubscriptions.length >= PAST_SUBSCRIPTIONS_PAGE_SIZE * currentPastPage,\n    };\n  }, [pastData, pastSubscriptions.length, currentPastPage]);\n\n  // Reset page when search query or viewMode changes\n  useEffect(() => {\n    setCurrentPastPage(1);\n  }, [searchQuery, viewMode]);\n\n  // Load more past subscriptions\n  const loadMorePastSubscriptions = useCallback(async () => {\n    if (!fetchMorePast || isLoadingMorePast || !pastSubscriptionsPagination.hasMore) return;\n\n    setIsLoadingMorePast(true);\n    const nextPage = currentPastPage + 1;\n\n    try {\n      await fetchMorePast({\n        variables: {\n          page: nextPage,\n          pageSize: PAST_SUBSCRIPTIONS_PAGE_SIZE,\n        },\n        updateQuery: (\n          prev: GetPastSubscriptionsWithQuotasQuery,\n          { fetchMoreResult }: { fetchMoreResult: GetPastSubscriptionsWithQuotasQuery }\n        ) => {\n          if (!fetchMoreResult) return prev;\n\n          const prevSubs = prev?.getSubscriptionUsageOverview ?? [];\n          const newSubs = fetchMoreResult?.getSubscriptionUsageOverview ?? [];\n\n          return {\n            getSubscriptionUsageOverview: [...prevSubs, ...newSubs],\n          };\n        },\n      });\n      setCurrentPastPage(nextPage);\n    } catch (err) {\n      console.error('Failed to load more past subscriptions:', err);\n    } finally {\n      setIsLoadingMorePast(false);\n    }\n  }, [fetchMorePast, isLoadingMorePast, pastSubscriptionsPagination.hasMore, currentPastPage]);\n\n  const combinedRefetch = useCallback(() => {\n    setCurrentPastPage(1);\n    if (shouldFetchActive) refetch();\n    if (shouldFetchPast) refetchPast();\n  }, [shouldFetchActive, shouldFetchPast, refetch, refetchPast]);\n\n  return {\n    activeSubscriptions,\n    pastSubscriptions,\n    isLoading: shouldFetchActive ? loading : false,\n    isPastSubscriptionsLoading: shouldFetchPast ? pastLoading : false,\n    error: error ?? null,\n    refetch: combinedRefetch,\n    // Pagination for past subscriptions\n    loadMorePastSubscriptions,\n    hasMorePastSubscriptions: pastSubscriptionsPagination.hasMore,\n    isLoadingMorePast,\n    pastSubscriptionsCount: pastSubscriptionsPagination.totalCount,\n  };\n}\n\n/**\n * Hook to get quota usage details for drill-down using cursor-based pagination.\n *\n * The activity-svc API is cursor-based (limit / cursor → items / hasNextPage / nextCursor).\n * Callers should maintain a cursor stack:\n *   - push nextCursor to go forward\n *   - pop to go back\n *   - pass null as cursor for the first page\n */\nexport interface QuotaUsageDetail {\n  id: string;\n  amount: number;\n  description: string;\n  tags?: Record<string, unknown>;\n  productId?: string;\n  userId?: string;\n  timestamp: string;\n  lastUpdated?: string;\n}\n\ninterface UseQuotaUsageDetailsResult {\n  usages: QuotaUsageDetail[];\n  hasNextPage: boolean;\n  nextCursor: string | null;\n  isLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n}\n\ntype UsageRecord = GetUsageRecordsQuery['getUsageRecords']['items'][number];\n\nexport function buildUsageRecordsVariables(\n  quotaAssignmentId: string | undefined,\n  pageSize: number,\n  cursor: string | null,\n  workspaceId?: string\n): GetUsageRecordsQueryVariables {\n  return {\n    filters: {\n      quotaAssignmentId,\n      workspaceId,\n    },\n    pagination: {\n      limit: pageSize,\n      ...(cursor ? { cursor } : {}),\n    },\n  };\n}\n\nexport function mapUsageRecordToQuotaUsageDetail(record: UsageRecord): QuotaUsageDetail {\n  return {\n    id: record.id,\n    amount: record.amount,\n    description: record.description ?? '',\n    tags: (record.metadata as Record<string, unknown>) ?? {},\n    productId: record.productId,\n    userId: record.userId ?? undefined,\n    timestamp: record.createdAt,\n    lastUpdated: record.createdAt,\n  };\n}\n\nexport function useQuotaUsageDetails(\n  quotaAssignmentId: string | undefined,\n  pageSize: number = 20,\n  cursor: string | null = null,\n  workspaceId?: string\n): UseQuotaUsageDetailsResult {\n  // Query workspace gateway directly — usage records live in wspace-activity-svc.\n  // Uses the dedicated workspace Apollo client so it doesn't conflict with the\n  // shell's global Apollo client used by all other billing queries.\n  const wsClient = useGatewayClient('workspace');\n  const { data, loading, error, refetch } = useGetUsageRecordsQuery({\n    client: wsClient,\n    variables: buildUsageRecordsVariables(quotaAssignmentId, pageSize, cursor, workspaceId),\n    skip: !quotaAssignmentId || !workspaceId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const items: GetUsageRecordsQuery['getUsageRecords']['items'] =\n    data?.getUsageRecords?.items ?? [];\n\n  return {\n    usages: items.map(mapUsageRecordToQuotaUsageDetail),\n    hasNextPage: data?.getUsageRecords?.hasNextPage ?? false,\n    nextCursor: data?.getUsageRecords?.nextCursor ?? null,\n    isLoading: loading,\n    error: error ?? null,\n    refetch,\n  };\n}\n\n/**\n * Hook to get quota analytics\n */\ninterface UseQuotaAnalyticsResult {\n  analytics: {\n    dailyUsage: Array<{ date: string; usage: number; count: number }>;\n    usageByType: Array<{ resourceType: string; usage: number; count: number; percentage: number }>;\n    trends?: {\n      growthRate?: number;\n      predictedUsage?: number;\n      averageDailyUsage?: number;\n    };\n    peakUsage?: {\n      maxDailyUsage: number;\n      peakDate: string;\n      peakHour?: number;\n    };\n  } | null;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport function useQuotaAnalytics(\n  quotaAssignmentId: string | undefined,\n  period: AnalyticsPeriod = AnalyticsPeriod.LAST_30_DAYS\n): UseQuotaAnalyticsResult {\n  const { data, loading, error } = useGetQuotaAnalyticsForUsageQuery({\n    variables: { quotaAssignmentId: quotaAssignmentId!, period },\n    skip: !quotaAssignmentId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  return {\n    analytics: data?.getQuotaAnalytics ?? null,\n    isLoading: loading,\n    error: error ?? null,\n  };\n}\n\n/**\n * Combined hook for the enhanced usage page\n */\ninterface UseEnhancedUsagePageParams {\n  billingAccountId: string | undefined;\n  workspaceId?: string;\n  period?: AnalyticsPeriod;\n  searchQuery?: string;\n  viewMode?: ViewMode;\n}\n\ninterface UseEnhancedUsagePageResult {\n  // Dashboard overview\n  dashboard: UsageDashboard | null;\n\n  // Pooled quotas (subscription quotas come from subscriptions directly)\n  pooledQuotas: AggregatedQuota[];\n\n  // Subscriptions with their quotas\n  activeSubscriptions: SubscriptionWithAggregatedQuotas[];\n  pastSubscriptions: SubscriptionWithAggregatedQuotas[];\n\n  // Loading states\n  isLoading: boolean;\n  isPastSubscriptionsLoading: boolean;\n  error: Error | null;\n\n  // Actions\n  refetch: () => void;\n\n  // Pagination for past subscriptions\n  loadMorePastSubscriptions: () => void;\n  hasMorePastSubscriptions: boolean;\n  isLoadingMorePast: boolean;\n  pastSubscriptionsCount: number;\n}\n\nexport function useEnhancedUsagePage({\n  billingAccountId,\n  workspaceId,\n  period = AnalyticsPeriod.LAST_30_DAYS,\n  searchQuery,\n  viewMode = 'active',\n}: UseEnhancedUsagePageParams): UseEnhancedUsagePageResult {\n  // Dashboard for overview stats\n  const dashboardResult = useUsageDashboard({\n    billingAccountId,\n    period,\n  });\n\n  // Quotas summary with aggregation\n  const quotasSummaryResult = useBillingAccountQuotasSummary(billingAccountId);\n\n  // Live collector values from activity-svc (source of truth for count/concurrent quotas)\n  const { statusMap } = useWorkspaceQuotaStatuses(workspaceId);\n\n  // Subscriptions with quotas - passes searchQuery and viewMode to backend\n  const subscriptionsResult = useSubscriptionsWithQuotas(billingAccountId, {\n    searchQuery,\n    viewMode,\n  });\n\n  // Merge live values into both pooled quotas and subscription quotas\n  const pooledQuotas = useMemo(\n    () => mergeLiveValues(quotasSummaryResult.pooledQuotas, statusMap),\n    [quotasSummaryResult.pooledQuotas, statusMap]\n  );\n\n  const activeSubscriptions = useMemo(\n    () =>\n      subscriptionsResult.activeSubscriptions.map((sub) => ({\n        ...sub,\n        aggregatedQuotas: mergeLiveValues(sub.aggregatedQuotas, statusMap),\n      })),\n    [subscriptionsResult.activeSubscriptions, statusMap]\n  );\n\n  const pastSubscriptions = useMemo(\n    () =>\n      subscriptionsResult.pastSubscriptions.map((sub) => ({\n        ...sub,\n        aggregatedQuotas: mergeLiveValues(sub.aggregatedQuotas, statusMap),\n      })),\n    [subscriptionsResult.pastSubscriptions, statusMap]\n  );\n\n  const refetch = useCallback(() => {\n    dashboardResult.refetch();\n    quotasSummaryResult.refetch();\n    subscriptionsResult.refetch();\n  }, [dashboardResult, quotasSummaryResult, subscriptionsResult]);\n\n  return {\n    dashboard: dashboardResult.dashboard,\n    pooledQuotas,\n    activeSubscriptions,\n    pastSubscriptions,\n    isLoading:\n      dashboardResult.isLoading || quotasSummaryResult.isLoading || subscriptionsResult.isLoading,\n    isPastSubscriptionsLoading: subscriptionsResult.isPastSubscriptionsLoading,\n    error: dashboardResult.error || quotasSummaryResult.error || subscriptionsResult.error,\n    refetch,\n    // Pagination for past subscriptions\n    loadMorePastSubscriptions: subscriptionsResult.loadMorePastSubscriptions,\n    hasMorePastSubscriptions: subscriptionsResult.hasMorePastSubscriptions,\n    isLoadingMorePast: subscriptionsResult.isLoadingMorePast,\n    pastSubscriptionsCount: subscriptionsResult.pastSubscriptionsCount,\n  };\n}\n"],"mappings":";;;;;;AA4BA,IAAM,IAAiC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,CAAG;;;;;AAmD7C,SAAgB,EAA0B,GAAuD;CAE/F,IAAM,EAAE,SAAM,YAAS,UAAO,eAAY,EAEvC,GAAgC;EACjC,QAJe,EAAiB,WAIxB;EACR,WAAW,EAAE,eAAY;EACzB,MAAM,CAAC;EACP,aAAa;CACf,CAAC;CAED,OAAO;EACL,UAAU,GAAM,0BAA0B,CAAC;EAC3C,WAAW;EACX,OAAO,KAAS;EAChB;CACF;AACF;AAQA,IAAM,IAA+C,CAAG;;;;;;;;;;;;;;;;;AAkCxD,SAAgB,IAAiF;CAE/F,IAAM,CAAC,GAAQ,EAAE,YAAS,cAAW,EAGnC,GAA8C,EAAE,QAJ7B,EAAiB,QAIoB,EAAa,CAAC;CAWxE,OAAO;EAAE,iBARP,GACA,GACA,OAGO,MADc,EAAO,EAAE,WAAW;GAAE;GAAgB;GAAkB;EAAY,EAAE,CAAC,GAC9E,MAAM,oCAAoC;EAGvC,WAAW;EAAS,OAAO,KAAS;CAAK;AAC9D;AA2BA,IAAM,IAAiC,CAAG;;;;;;;;;;;;GAcpC,IAAgC,CAAG;;;;;;;;;;;;;;AA2CzC,SAAgB,EAA0B,GAAuD;CAE/F,IAAM,EAAE,SAAM,YAAS,aAAU,EAC/B,GACA;EACE,QAJa,EAAiB,WAItB;EACR,WAAW,EAAE,eAAY;EACzB,MAAM,CAAC;EACP,aAAa;CACf,CACF,GAEM,EAAE,aAAU,iBAAc,QAAc;EAC5C,IAAM,IAAO,GAAM,0BAA0B,CAAC;EAC9C,OAAO;GAAE,UAAU;GAAM,WAAW,IAAI,IAAI,EAAK,KAAK,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC;EAAE;CACjF,GAAG,CAAC,CAAI,CAAC;CAET,OAAO;EAAE;EAAU;EAAW,WAAW;EAAS,OAAO,KAAS;CAAK;AACzE;AAQA,SAAgB,EACd,GACA,GACA,IAAgB,IACgB;CAEhC,IAAM,EAAE,SAAM,YAAS,aAAU,EAE9B,GAA+B;EAChC,QAJe,EAAiB,WAIxB;EACR,WAAW;GAAE;GAAa;GAAW;EAAM;EAC3C,MAAM,CAAC,KAAe,CAAC;EACvB,aAAa;CACf,CAAC;CAED,OAAO;EACL,WAAW,GAAM,yBAAyB,CAAC;EAC3C,WAAW;EACX,OAAO,KAAS;CAClB;AACF;AAkBA,SAAgB,EAAkB,EAChC,qBACA,YAAS,EAAgB,gBAC0B;CACnD,IAAM,EAAE,SAAM,YAAS,UAAO,eAAY,EAA0B;EAClE,WAAW;GAAoB;GAAmB;EAAO;EACzD,MAAM,CAAC;EACP,aAAa;CACf,CAAC;CAED,OAAO;EACL,WAAW,GAAM,qBAAqB;EACtC,WAAW;EACX,OAAO,KAAS;EAChB;CACF;AACF;AAoEA,SAAS,EACP,GACA,GACA,IAAU,IACG;CAKb,OAJI,IAAgB,EAAY,UAC5B,KAAa,IAAU,EAAY,YACnC,KAAmB,KAAW,EAAY,WAC1C,KAAmB,KAAW,EAAY,UACvC,EAAY;AACrB;AAIA,IAAM,IAAoD;CACxD,qBAAqB;CACrB,iBAAiB;CACjB,oBAAoB;CACpB,mBAAmB;CACnB,oBAAoB;AACtB;AAQA,SAAS,EACP,GACA,GACmB;CAEnB,OADI,EAAU,SAAS,IAAU,IAC1B,EAAW,KAAK,MAAM;EAC3B,IAAM,IAAa,EAA0B,EAAE,SAAS,EAAE,MACpD,IAAO,EAAU,IAAI,CAAU;EACrC,IAAI,CAAC,GAAM,OAAO;EAElB,IAAM,IAAY,EAAK,cACjB,EAAE,eAAY,eAAY,GAC1B,IAAkB,KAAW,MAAe,IAAI,IAAK,IAAY,IAAc,KAC/E,IAAY,IAAU,IAAI,KAAK,IAAI,GAAG,IAAa,CAAS,GAG9D,IAAY,GACV,IAAqB,CAAC,GAAG,EAAE,gBAAgB,EAC9C,MAAM,GAAG,OACM,EAAE,UAAU,IAAI,KAAK,EAAE,OAAO,EAAE,QAAQ,IAAI,aAC5C,EAAE,UAAU,IAAI,KAAK,EAAE,OAAO,EAAE,QAAQ,IAAI,SAE3D,EACA,KAAK,MAAM;GACV,IAAM,IAAiB,KAAK,IAAI,GAAW,EAAE,SAAS,CAAC;GAEvD,OADA,IAAY,KAAK,IAAI,GAAG,IAAY,CAAc,GAC3C;IAAE,GAAG;IAAG,MAAM;GAAe;EACtC,CAAC;EAEH,OAAO;GACL,GAAG;GACH;GACA;GACA,kBAAkB;GAClB,QAAQ,EAAqB,GAAiB,GAAW,CAAO;GAChE,kBAAkB;EACpB;CACF,CAAC;AACH;AAKA,SAAS,EAAsB,GAAqD;CAClF,IAAM,oBAAU,IAAI,IAAsC;CAE1D,KAAK,IAAM,KAAS,GAAQ;EAC1B,IAAM,IAAW,EAAQ,IAAI,EAAM,IAAI,KAAK,CAAC;EAE7C,AADA,EAAS,KAAK,CAAK,GACnB,EAAQ,IAAI,EAAM,MAAM,CAAQ;CAClC;CAEA,IAAM,IAAgC,CAAC;CAEvC,KAAK,IAAM,CAAC,GAAM,MAAgB,GAAS;EAEzC,IAAM,IAAa,EAAY,QAAQ,GAAK,MAAM,KAAO,EAAE,SAAS,IAAI,CAAC,GACnE,IAAY,EAAY,QAAQ,GAAK,MAAM,KAAO,EAAE,QAAQ,IAAI,CAAC,GACjE,IAAiB,EAAY,QAAQ,GAAK,MAAM,KAAO,EAAE,aAAa,IAAI,CAAC,GAI3E,IACJ,MAAe,KAAK,EAAY,OAAO,MAAM,EAAE,YAAY,EAAE,SAAS,OAAO,CAAC,GAG1E,IAAkB,KAAc,MAAe,IAAI,IAAK,IAAY,IAAc,KAGlF,IAAS,EAAqB,GAAiB,GAAgB,CAAU,GAGzE,IAAW,EAAY,IAAI,YAAY,IACvC,IAAO,EAAY,IAAI,QAAQ,IAC/B,IAAM,EAAY,IAAI,SACtB,IAAc,OAAO,GAAK,eAAgB,WAAW,EAAI,cAAc,KAAA,GACvE,IAAc,OAAO,GAAK,eAAgB,WAAW,EAAI,cAAc,KAAA;EAE7E,EAAW,KAAK;GACd;GACA;GACA;GACA;GACA,YAAY,IAAa,IAAI;GAC7B;GACA;GACA;GACA,YAAY,EAAY;GACxB,SAAS;GACT,kBAAkB;GAClB;GACA,kBAAkB;EACpB,CAAC;CACH;CAGA,IAAM,IAA8C;EAClD,WAAW;EACX,UAAU;EACV,SAAS;EACT,SAAS;EACT,UAAU;CACZ;CAEA,OAAO,EAAW,MAAM,GAAG,MAAM;EAC/B,IAAM,IAAe,EAAe,EAAE,UAAU,EAAe,EAAE;EAEjE,OADI,MAAiB,IACd,EAAE,kBAAkB,EAAE,kBADE;CAEjC,CAAC;AACH;AAmBA,SAAgB,IAA+D;CAC7E,IAAM,EAAE,SAAM,YAAS,aAAU,EAAmC,EAClE,aAAa,oBACf,CAAC;CAED,OAAO;EACL,iBAAiB,GAAM,2BAA2B,CAAC;EACnD,WAAW;EACX,OAAO,KAAS;CAClB;AACF;AAaA,SAAgB,EACd,GACA,GACsC;CACtC,IAAM,EAAE,SAAM,YAAS,UAAO,eAAY,EAA+C;EACvF,WAAW;GAAoB;GAAmB;EAAU;EAC5D,MAAM,CAAC;EACP,aAAa;CACf,CAAC;CAWD,OAAO;EACL,cAVmB,QAAc;GACjC,IAAI,CAAC,GAAM,gCACT,OAAO,CAAC;GAGV,IAAM,IAAU,EAAK;GACrB,OAAO,EAAsB,EAAQ,gBAAgB,CAAC,CAAC;EACzD,GAAG,CAAC,CAAI,CAGN;EACA,WAAW;EACX,OAAO,KAAS;EAChB;CACF;AACF;AA6BA,IAAM,IAA+B;AAqBrC,SAAgB,EACd,GACA,IAA6C,CAAC,GACZ;CAClC,IAAM,EAAE,gBAAa,cAAW,aAAa,GAGvC,IAAoB,MAAa,YAAY,MAAa,OAC1D,IAAkB,MAAa,UAAU,MAAa,OAGtD,EAAE,SAAM,YAAS,UAAO,eAAY,EAAmC;EAC3E,WAAW;GACS;GAClB,aAAa,KAAe;EAC9B;EACA,MAAM,CAAC,KAAoB,CAAC;EAC5B,aAAa;CACf,CAAC,GAGK,EACJ,MAAM,GACN,SAAS,GACT,SAAS,GACT,WAAW,MACT,EAAuC;EACzC,WAAW;GACS;GAClB,aAAa,KAAe;GAC5B,MAAM;GACN,UAAU;EACZ;EACA,MAAM,CAAC,KAAoB,CAAC;EAC5B,aAAa;CACf,CAAC,GAGK,CAAC,GAAmB,KAAwB,EAAS,EAAK,GAC1D,CAAC,GAAiB,KAAsB,EAAS,CAAC,GAGlD,IAAsB,GACzB,MAA+D;EAC9D,IAAM,KAA4C,EAAI,UAAU,CAAC,GAAG,KAAK,MAAM;GAC7E,IAAM,IAAQ,EAAE,QAAQ,SAAS,GAC3B,IAAO,EAAE,mBAAmB,GAC5B,IAAY,KAAK,IAAI,GAAG,IAAQ,CAAI,GACpC,IAAkB,IAAQ,IAAK,IAAO,IAAS,MAAM,GACrD,IAAO,EAAE,QAAQ,QAAQ;GAE/B,OAAO;IACL,IAAI,EAAE;IACN,MAAM,EAAE;IACR;IACA,WAAW;IACX,UAAU;IACV;IACA;IACA;IACA;IACA,SAAS,EAAE,QAAQ,SAAS,YAAY,EAAE,QAAQ,SAAS;IAC3D,gBAAgB,EAAI;IACpB,SAAS,EAAE;IACX,cAAc,CAAC;IACf,WAAW,EAAE;IACb,SAAS,EAAE;GACb;EACF,CAAC;EAED,OAAO;GACL,IAAI,EAAI;GACR,QAAQ,EAAI;GACZ,WAAW,EAAI;GACf,kBAAkB,EAAsB,CAAc;EACxD;CACF,GACA,CAAC,CACH,GAGM,IAAsB,QACrB,GAAM,+BAIkC,EAAK,6BAC7B,IAAI,CAAmB,IAJnC,CAAC,GAKT,CAAC,GAAM,CAAmB,CAAC,GAGxB,IAAoB,QACnB,GAAU,gCAKb,EAAS,6BAA6B,iBAAiB,EAAS,8BAC7C,IAAI,CAAmB,IALnC,CAAC,GAMT,CAAC,GAAU,CAAmB,CAAC,GAG5B,IAA8B,QAAc;EAChD,IAAM,IAAW,GAAU;EAY3B,OAXK,IAID,EAAS,eAAe,KAAA,IAOrB;GACL,YAAY,EAAkB;GAC9B,SAAS,EAAkB,UAAU,IAA+B;EACtE,IATS;GACL,YAAY,EAAS;GACrB,SAAS,EAAkB,SAAS,EAAS;EAC/C,IAPO;GAAE,YAAY;GAAG,SAAS;EAAM;CAc3C,GAAG;EAAC;EAAU,EAAkB;EAAQ;CAAe,CAAC;CAGxD,QAAgB;EACd,EAAmB,CAAC;CACtB,GAAG,CAAC,GAAa,CAAQ,CAAC;CAG1B,IAAM,IAA4B,EAAY,YAAY;EACxD,IAAI,CAAC,KAAiB,KAAqB,CAAC,EAA4B,SAAS;EAEjF,EAAqB,EAAI;EACzB,IAAM,IAAW,IAAkB;EAEnC,IAAI;GAoBF,AAnBA,MAAM,EAAc;IAClB,WAAW;KACT,MAAM;KACN,UAAU;IACZ;IACA,cACE,GACA,EAAE,yBACC;KACH,IAAI,CAAC,GAAiB,OAAO;KAE7B,IAAM,IAAW,GAAM,gCAAgC,CAAC,GAClD,IAAU,GAAiB,gCAAgC,CAAC;KAElE,OAAO,EACL,8BAA8B,CAAC,GAAG,GAAU,GAAG,CAAO,EACxD;IACF;GACF,CAAC,GACD,EAAmB,CAAQ;EAC7B,SAAS,GAAK;GACZ,QAAQ,MAAM,2CAA2C,CAAG;EAC9D,UAAU;GACR,EAAqB,EAAK;EAC5B;CACF,GAAG;EAAC;EAAe;EAAmB,EAA4B;EAAS;CAAe,CAAC,GAErF,IAAkB,QAAkB;EAGxC,AAFA,EAAmB,CAAC,GAChB,KAAmB,EAAQ,GAC3B,KAAiB,EAAY;CACnC,GAAG;EAAC;EAAmB;EAAiB;EAAS;CAAW,CAAC;CAE7D,OAAO;EACL;EACA;EACA,WAAW,IAAoB,IAAU;EACzC,4BAA4B,IAAkB,IAAc;EAC5D,OAAO,KAAS;EAChB,SAAS;EAET;EACA,0BAA0B,EAA4B;EACtD;EACA,wBAAwB,EAA4B;CACtD;AACF;AAiCA,SAAgB,EACd,GACA,GACA,GACA,GAC+B;CAC/B,OAAO;EACL,SAAS;GACP;GACA;EACF;EACA,YAAY;GACV,OAAO;GACP,GAAI,IAAS,EAAE,UAAO,IAAI,CAAC;EAC7B;CACF;AACF;AAEA,SAAgB,EAAiC,GAAuC;CACtF,OAAO;EACL,IAAI,EAAO;EACX,QAAQ,EAAO;EACf,aAAa,EAAO,eAAe;EACnC,MAAO,EAAO,YAAwC,CAAC;EACvD,WAAW,EAAO;EAClB,QAAQ,EAAO,UAAU,KAAA;EACzB,WAAW,EAAO;EAClB,aAAa,EAAO;CACtB;AACF;AAEA,SAAgB,EACd,GACA,IAAmB,IACnB,IAAwB,MACxB,GAC4B;CAK5B,IAAM,EAAE,SAAM,YAAS,UAAO,eAAY,EAAwB;EAChE,QAFe,EAAiB,WAExB;EACR,WAAW,EAA2B,GAAmB,GAAU,GAAQ,CAAW;EACtF,MAAM,CAAC,KAAqB,CAAC;EAC7B,aAAa;CACf,CAAC;CAKD,OAAO;EACL,SAHA,GAAM,iBAAiB,SAAS,CAAC,GAGnB,IAAI,CAAgC;EAClD,aAAa,GAAM,iBAAiB,eAAe;EACnD,YAAY,GAAM,iBAAiB,cAAc;EACjD,WAAW;EACX,OAAO,KAAS;EAChB;CACF;AACF;AA8EA,SAAgB,EAAqB,EACnC,qBACA,gBACA,YAAS,EAAgB,cACzB,gBACA,cAAW,YAC8C;CAEzD,IAAM,IAAkB,EAAkB;EACxC;EACA;CACF,CAAC,GAGK,IAAsB,EAA+B,CAAgB,GAGrE,EAAE,iBAAc,EAA0B,CAAW,GAGrD,IAAsB,EAA2B,GAAkB;EACvE;EACA;CACF,CAAC,GAGK,IAAe,QACb,EAAgB,EAAoB,cAAc,CAAS,GACjE,CAAC,EAAoB,cAAc,CAAS,CAC9C,GAEM,IAAsB,QAExB,EAAoB,oBAAoB,KAAK,OAAS;EACpD,GAAG;EACH,kBAAkB,EAAgB,EAAI,kBAAkB,CAAS;CACnE,EAAE,GACJ,CAAC,EAAoB,qBAAqB,CAAS,CACrD,GAEM,IAAoB,QAEtB,EAAoB,kBAAkB,KAAK,OAAS;EAClD,GAAG;EACH,kBAAkB,EAAgB,EAAI,kBAAkB,CAAS;CACnE,EAAE,GACJ,CAAC,EAAoB,mBAAmB,CAAS,CACnD,GAEM,IAAU,QAAkB;EAGhC,AAFA,EAAgB,QAAQ,GACxB,EAAoB,QAAQ,GAC5B,EAAoB,QAAQ;CAC9B,GAAG;EAAC;EAAiB;EAAqB;CAAmB,CAAC;CAE9D,OAAO;EACL,WAAW,EAAgB;EAC3B;EACA;EACA;EACA,WACE,EAAgB,aAAa,EAAoB,aAAa,EAAoB;EACpF,4BAA4B,EAAoB;EAChD,OAAO,EAAgB,SAAS,EAAoB,SAAS,EAAoB;EACjF;EAEA,2BAA2B,EAAoB;EAC/C,0BAA0B,EAAoB;EAC9C,mBAAmB,EAAoB;EACvC,wBAAwB,EAAoB;CAC9C;AACF"}
+{"version":3,"file":"useUsage.js","names":[],"sources":["../../../../../src/billing/modules/usage/hooks/useUsage.ts"],"sourcesContent":["/**\n * Usage Module - Hooks\n * Custom hooks for usage data fetching and mutations\n */\n\nimport { useMemo, useCallback, useState, useEffect } from 'react';\nimport {\n  useGetUsageDashboardQuery,\n  useGetBillingAccountQuotasSummaryForUsageQuery,\n  useGetSubscriptionsWithQuotasQuery,\n  useGetPastSubscriptionsWithQuotasQuery,\n  useGetBillingAccountsForUsageQuery,\n  useGetQuotaAnalyticsForUsageQuery,\n  type GetPastSubscriptionsWithQuotasQuery,\n} from '../../../../generated/global-operations';\nimport {\n  useGetUsageRecordsQuery,\n  type GetUsageRecordsQuery,\n  type GetUsageRecordsQueryVariables,\n} from '../../../../generated/wspace-operations';\nimport { useGatewayClient, useQuery, useMutation, gql } from '@burdenoff/fe-libs/shared/graphql';\nimport { AnalyticsPeriod, QuotaStatus } from '../../../shared/types';\nimport type { UsageDashboard } from '../../../shared/types';\n\n// ============================================================================\n// Workspace Quota Assignment — managed by activity-svc\n// ============================================================================\n\nconst WORKSPACE_QUOTA_OVERVIEW_QUERY = gql`\n  query WorkspaceQuotaOverview($workspaceId: ID!, $productId: ID) {\n    workspaceQuotaOverview(workspaceId: $workspaceId, productId: $productId) {\n      assignment {\n        id\n        workspaceId\n        quotaName\n        productId\n        quotaMode\n        billingAccountId\n        subscriptionId\n        limit\n        used\n        noLimit\n        resetPeriod\n        lastResetAt\n        isActive\n        createdAt\n      }\n      liveStatus {\n        workspaceId\n        quotaName\n        productId\n        currentValue\n        limit\n        noLimit\n        scrapedAt\n      }\n      effectiveUsed\n      remaining\n      usagePercentage\n    }\n  }\n`;\n\nconst UNASSIGN_WORKSPACE_QUOTA_MUTATION = gql`\n  mutation UnassignWorkspaceQuota($id: ID!, $workspaceId: ID!) {\n    unassignWorkspaceQuota(id: $id, workspaceId: $workspaceId)\n  }\n`;\n\nexport interface WorkspaceQuotaAssignmentItem {\n  id: string;\n  workspaceId: string;\n  quotaName: string;\n  productId: string;\n  quotaMode: 'dedicated' | 'pooled';\n  billingAccountId: string | null;\n  subscriptionId: string | null;\n  limit: number | null;\n  used: number;\n  noLimit: boolean;\n  resetPeriod: string;\n  lastResetAt: string | null;\n  isActive: boolean;\n  createdAt: string;\n}\n\nexport interface WorkspaceQuotaOverviewItem {\n  assignment: WorkspaceQuotaAssignmentItem;\n  liveStatus: WorkspaceQuotaStatusItem | null;\n  effectiveUsed: number;\n  remaining: number | null;\n  usagePercentage: number;\n}\n\nexport interface AssignWorkspaceQuotaInput {\n  workspaceId: string;\n  quotaName: string;\n  productId: string;\n  quotaMode?: 'dedicated' | 'pooled';\n  billingAccountId?: string;\n  subscriptionId?: string;\n  limit?: number;\n  noLimit?: boolean;\n  resetPeriod?: string;\n  metadata?: Record<string, unknown>;\n}\n\ninterface UseWorkspaceQuotaOverviewResult {\n  overview: WorkspaceQuotaOverviewItem[];\n  isLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n}\n\nexport function useWorkspaceQuotaOverview(\n  workspaceId?: string,\n  productId?: string\n): UseWorkspaceQuotaOverviewResult {\n  const wsClient = useGatewayClient('workspace');\n  const { data, loading, error, refetch } = useQuery<{\n    workspaceQuotaOverview: WorkspaceQuotaOverviewItem[];\n  }>(WORKSPACE_QUOTA_OVERVIEW_QUERY, {\n    client: wsClient,\n    variables: { workspaceId, productId },\n    skip: !workspaceId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  return {\n    overview: data?.workspaceQuotaOverview ?? [],\n    isLoading: loading,\n    error: error ?? null,\n    refetch,\n  };\n}\n\n// ============================================================================\n// activateSubscriptionForWorkspace — single backend call that assigns all\n// WORKSPACE-scoped quotas from the purchased plan. Replaces the N individual\n// assignWorkspaceQuota calls so the UI never sends quota names/limits to the server.\n// ============================================================================\n\nconst ACTIVATE_SUBSCRIPTION_FOR_WORKSPACE_MUTATION = gql`\n  mutation ActivateSubscriptionForWorkspace(\n    $subscriptionId: ID!\n    $billingAccountId: ID!\n    $workspaceId: ID!\n  ) {\n    activateSubscriptionForWorkspace(\n      subscriptionId: $subscriptionId\n      billingAccountId: $billingAccountId\n      workspaceId: $workspaceId\n    ) {\n      workspaceId\n      assignedQuotas\n      skippedQuotas\n    }\n  }\n`;\n\nexport interface ActivateSubscriptionForWorkspaceResult {\n  workspaceId: string;\n  assignedQuotas: number;\n  skippedQuotas: number;\n}\n\ninterface UseActivateSubscriptionForWorkspaceResult {\n  activate: (\n    subscriptionId: string,\n    billingAccountId: string,\n    workspaceId: string\n  ) => Promise<ActivateSubscriptionForWorkspaceResult | null>;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport function useActivateSubscriptionForWorkspace(): UseActivateSubscriptionForWorkspaceResult {\n  const globalClient = useGatewayClient('global');\n  const [mutate, { loading, error }] = useMutation<\n    { activateSubscriptionForWorkspace: ActivateSubscriptionForWorkspaceResult },\n    { subscriptionId: string; billingAccountId: string; workspaceId: string }\n  >(ACTIVATE_SUBSCRIPTION_FOR_WORKSPACE_MUTATION, { client: globalClient });\n\n  const activate = async (\n    subscriptionId: string,\n    billingAccountId: string,\n    workspaceId: string\n  ) => {\n    const result = await mutate({ variables: { subscriptionId, billingAccountId, workspaceId } });\n    return result.data?.activateSubscriptionForWorkspace ?? null;\n  };\n\n  return { activate, isLoading: loading, error: error ?? null };\n}\n\ninterface UseUnassignWorkspaceQuotaResult {\n  unassign: (id: string, workspaceId: string) => Promise<boolean>;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport function useUnassignWorkspaceQuota(): UseUnassignWorkspaceQuotaResult {\n  const wsClient = useGatewayClient('workspace');\n  const [mutate, { loading, error }] = useMutation<\n    { unassignWorkspaceQuota: boolean },\n    { id: string; workspaceId: string }\n  >(UNASSIGN_WORKSPACE_QUOTA_MUTATION, { client: wsClient });\n\n  const unassign = async (id: string, workspaceId: string) => {\n    const result = await mutate({ variables: { id, workspaceId } });\n    return result.data?.unassignWorkspaceQuota ?? false;\n  };\n\n  return { unassign, isLoading: loading, error: error ?? null };\n}\n\n// ============================================================================\n// Workspace Quota Status — live values from activity-svc\n// ============================================================================\n\nconst WORKSPACE_QUOTA_STATUSES_QUERY = gql`\n  query WorkspaceQuotaStatuses($workspaceId: ID!) {\n    workspaceQuotaStatuses(workspaceId: $workspaceId) {\n      workspaceId\n      quotaName\n      productId\n      currentValue\n      limit\n      noLimit\n      scrapedAt\n    }\n  }\n`;\n\nconst WORKSPACE_QUOTA_HISTORY_QUERY = gql`\n  query WorkspaceQuotaHistory($workspaceId: ID!, $quotaName: String!, $limit: Int) {\n    workspaceQuotaHistory(workspaceId: $workspaceId, quotaName: $quotaName, limit: $limit) {\n      id\n      workspaceId\n      quotaName\n      productId\n      value\n      limit\n      noLimit\n      snapshotAt\n    }\n  }\n`;\n\nexport interface WorkspaceQuotaStatusItem {\n  workspaceId: string;\n  quotaName: string;\n  productId: string;\n  currentValue: number;\n  limit: number | null;\n  noLimit: boolean;\n  scrapedAt: string;\n}\n\nexport interface WorkspaceQuotaSnapshotItem {\n  id: string;\n  workspaceId: string;\n  quotaName: string;\n  productId: string;\n  value: number;\n  limit: number | null;\n  noLimit: boolean;\n  snapshotAt: string;\n}\n\ninterface UseWorkspaceQuotaStatusesResult {\n  statuses: WorkspaceQuotaStatusItem[];\n  statusMap: Map<string, WorkspaceQuotaStatusItem>;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport function useWorkspaceQuotaStatuses(workspaceId?: string): UseWorkspaceQuotaStatusesResult {\n  const wsClient = useGatewayClient('workspace');\n  const { data, loading, error } = useQuery<{ workspaceQuotaStatuses: WorkspaceQuotaStatusItem[] }>(\n    WORKSPACE_QUOTA_STATUSES_QUERY,\n    {\n      client: wsClient,\n      variables: { workspaceId },\n      skip: !workspaceId,\n      fetchPolicy: 'cache-and-network',\n    }\n  );\n\n  const { statuses, statusMap } = useMemo(() => {\n    const list = data?.workspaceQuotaStatuses ?? [];\n    return { statuses: list, statusMap: new Map(list.map((s) => [s.quotaName, s])) };\n  }, [data]);\n\n  return { statuses, statusMap, isLoading: loading, error: error ?? null };\n}\n\ninterface UseWorkspaceQuotaHistoryResult {\n  snapshots: WorkspaceQuotaSnapshotItem[];\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport function useWorkspaceQuotaHistory(\n  workspaceId?: string,\n  quotaName?: string,\n  limit: number = 48\n): UseWorkspaceQuotaHistoryResult {\n  const wsClient = useGatewayClient('workspace');\n  const { data, loading, error } = useQuery<{\n    workspaceQuotaHistory: WorkspaceQuotaSnapshotItem[];\n  }>(WORKSPACE_QUOTA_HISTORY_QUERY, {\n    client: wsClient,\n    variables: { workspaceId, quotaName, limit },\n    skip: !workspaceId || !quotaName,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  return {\n    snapshots: data?.workspaceQuotaHistory ?? [],\n    isLoading: loading,\n    error: error ?? null,\n  };\n}\n\n// ============================================================================\n// Dashboard Hook\n// ============================================================================\n\ninterface UseUsageDashboardParams {\n  billingAccountId?: string;\n  period?: AnalyticsPeriod;\n}\n\ninterface UseUsageDashboardResult {\n  dashboard: UsageDashboard | null;\n  isLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n}\n\nexport function useUsageDashboard({\n  billingAccountId,\n  period = AnalyticsPeriod.LAST_30_DAYS,\n}: UseUsageDashboardParams): UseUsageDashboardResult {\n  const { data, loading, error, refetch } = useGetUsageDashboardQuery({\n    variables: { billingAccountId: billingAccountId!, period },\n    skip: !billingAccountId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  return {\n    dashboard: data?.getUsageDashboard ?? null,\n    isLoading: loading,\n    error: error ?? null,\n    refetch,\n  };\n}\n\n// ============================================================================\n// Enhanced Usage Page Hooks\n// ============================================================================\n\n/**\n * Quota assignment from the API\n */\ninterface QuotaAssignmentSummary {\n  id: string;\n  name: string;\n  unit: string;\n  quotaType: 'POOLED' | 'PRODUCT_SPECIFIC';\n  reusable: boolean;\n  limit: number;\n  limitLeft: number;\n  used: number;\n  usagePercentage: number;\n  noLimit: boolean;\n  subscriptionId?: string;\n  context?: Record<string, unknown> | null;\n  recentUsages: Array<{\n    id: string;\n    amount: number;\n    description: string;\n    timestamp: string;\n    tags?: Record<string, unknown>;\n  }>;\n  createdAt: string;\n  endtime: string;\n}\n\n/**\n * Aggregated quota for display (multiple quota assignments with same name combined)\n */\nexport interface AggregatedQuota {\n  name: string;\n  displayName?: string;\n  description?: string;\n  unit: string;\n  totalLimit: number;\n  totalUsed: number;\n  usagePercentage: number;\n  status: QuotaStatus;\n  quotaCount: number;\n  noLimit: boolean;\n  reusable: boolean;\n  /** True when usage comes from the activity-svc scraper, not billing recordUsage events. */\n  isCollectorBased: boolean;\n  quotaAssignments: QuotaAssignmentSummary[];\n}\n\n/**\n * Subscription with aggregated quotas\n */\nexport interface SubscriptionWithAggregatedQuotas {\n  id: string;\n  status: string;\n  planName?: string;\n  productId?: string;\n  createdAt: string;\n  aggregatedQuotas: AggregatedQuota[];\n}\n\n/**\n * Helper function to calculate quota status based on usage percentage\n */\nfunction calculateQuotaStatus(\n  usagePercentage: number,\n  limitLeft: number,\n  noLimit = false\n): QuotaStatus {\n  if (noLimit) return QuotaStatus.HEALTHY;\n  if (limitLeft <= 0) return QuotaStatus.EXHAUSTED;\n  if (usagePercentage >= 90) return QuotaStatus.CRITICAL;\n  if (usagePercentage >= 75) return QuotaStatus.WARNING;\n  return QuotaStatus.HEALTHY;\n}\n\n// Maps billing quota names to their corresponding scraper metric names in workspace_quota_statuses.\n// Scraper keys use dot-notation product prefix; billing keys use kebab-case.\nconst BILLING_TO_SCRAPER_METRIC: Record<string, string> = {\n  'agents-registered': 'vibecontrols.agents.count',\n  'vibes-created': 'vibecontrols.vibes.count',\n  'catalogs-created': 'vibecontrols.catalogs.count',\n  'tunnels-created': 'vibecontrols.tunnels.count',\n  'sessions-started': 'vibecontrols.sessions.starts',\n};\n\n/**\n * Merges live collector values from activity-svc into a list of aggregated quotas.\n * Overrides `totalUsed` (and derived fields) when a live value exists, and distributes\n * the live total across individual assignments (earliest-expiry first) so the\n * Quota Breakdown shows real per-assignment consumption instead of always-0.\n */\nfunction mergeLiveValues(\n  aggregated: AggregatedQuota[],\n  statusMap: Map<string, WorkspaceQuotaStatusItem>\n): AggregatedQuota[] {\n  if (statusMap.size === 0) return aggregated;\n  return aggregated.map((q) => {\n    const scraperKey = BILLING_TO_SCRAPER_METRIC[q.name] ?? q.name;\n    const live = statusMap.get(scraperKey);\n    if (!live) return q;\n\n    const totalUsed = live.currentValue;\n    const { totalLimit, noLimit } = q;\n    const usagePercentage = noLimit || totalLimit === 0 ? 0 : (totalUsed / totalLimit) * 100;\n    const limitLeft = noLimit ? 0 : Math.max(0, totalLimit - totalUsed);\n\n    // Distribute live total into assignments: fill earliest-expiry first, overflow to next.\n    let remaining = totalUsed;\n    const updatedAssignments = [...q.quotaAssignments]\n      .sort((a, b) => {\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((a) => {\n        const assignmentUsed = Math.min(remaining, a.limit || 0);\n        remaining = Math.max(0, remaining - assignmentUsed);\n        return { ...a, used: assignmentUsed };\n      });\n\n    return {\n      ...q,\n      totalUsed,\n      usagePercentage,\n      isCollectorBased: true,\n      status: calculateQuotaStatus(usagePercentage, limitLeft, noLimit),\n      quotaAssignments: updatedAssignments,\n    };\n  });\n}\n\n/**\n * Helper function to aggregate quotas by name\n */\nfunction aggregateQuotasByName(quotas: QuotaAssignmentSummary[]): AggregatedQuota[] {\n  const grouped = new Map<string, QuotaAssignmentSummary[]>();\n\n  for (const quota of quotas) {\n    const existing = grouped.get(quota.name) || [];\n    existing.push(quota);\n    grouped.set(quota.name, existing);\n  }\n\n  const aggregated: AggregatedQuota[] = [];\n\n  for (const [name, assignments] of grouped) {\n    // Sum up limits and usage first\n    const totalLimit = assignments.reduce((sum, q) => sum + (q.limit || 0), 0);\n    const totalUsed = assignments.reduce((sum, q) => sum + (q.used || 0), 0);\n    const totalLimitLeft = assignments.reduce((sum, q) => sum + (q.limitLeft || 0), 0);\n\n    // Check if there's actually no limit (ignore noLimit flag if there's a numeric limit)\n    // Only treat as unlimited if totalLimit is 0 or all assignments explicitly have noLimit AND no numeric limit\n    const hasNoLimit =\n      totalLimit === 0 && assignments.every((q) => q.noLimit || (q.limit || 0) === 0);\n\n    // Calculate percentage\n    const usagePercentage = hasNoLimit || totalLimit === 0 ? 0 : (totalUsed / totalLimit) * 100;\n\n    // Get status\n    const status = calculateQuotaStatus(usagePercentage, totalLimitLeft, hasNoLimit);\n\n    // Get reusable, unit, and display info from first assignment\n    const reusable = assignments[0]?.reusable || false;\n    const unit = assignments[0]?.unit || '';\n    const ctx = assignments[0]?.context;\n    const displayName = typeof ctx?.displayName === 'string' ? ctx.displayName : undefined;\n    const description = typeof ctx?.description === 'string' ? ctx.description : undefined;\n\n    aggregated.push({\n      name,\n      displayName,\n      description,\n      unit,\n      totalLimit: hasNoLimit ? 0 : totalLimit,\n      totalUsed,\n      usagePercentage,\n      status,\n      quotaCount: assignments.length,\n      noLimit: hasNoLimit,\n      isCollectorBased: false,\n      reusable,\n      quotaAssignments: assignments,\n    });\n  }\n\n  // Sort by status priority (critical first) then by usage percentage\n  const statusPriority: Record<QuotaStatus, number> = {\n    EXHAUSTED: 0,\n    CRITICAL: 1,\n    WARNING: 2,\n    HEALTHY: 3,\n    INACTIVE: 4,\n  };\n\n  return aggregated.sort((a, b) => {\n    const priorityDiff = statusPriority[a.status] - statusPriority[b.status];\n    if (priorityDiff !== 0) return priorityDiff;\n    return b.usagePercentage - a.usagePercentage;\n  });\n}\n\n/**\n * Hook to get billing accounts for the selector\n */\ninterface UseBillingAccountsForUsageResult {\n  billingAccounts: Array<{\n    id: string;\n    name: string;\n    email: string;\n    currency: string;\n    creditAmount: number;\n    isActive: boolean;\n    isDefault: boolean;\n  }>;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport function useBillingAccountsForUsage(): UseBillingAccountsForUsageResult {\n  const { data, loading, error } = useGetBillingAccountsForUsageQuery({\n    fetchPolicy: 'cache-and-network',\n  });\n\n  return {\n    billingAccounts: data?.getBillingAccountsByOrg ?? [],\n    isLoading: loading,\n    error: error ?? null,\n  };\n}\n\n/**\n * Hook to get billing account quotas summary with aggregation\n * Only returns pooled quotas - subscription quotas come from useSubscriptionsWithQuotas\n */\ninterface UseBillingAccountQuotasSummaryResult {\n  pooledQuotas: AggregatedQuota[];\n  isLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n}\n\nexport function useBillingAccountQuotasSummary(\n  billingAccountId: string | undefined,\n  productId?: string\n): UseBillingAccountQuotasSummaryResult {\n  const { data, loading, error, refetch } = useGetBillingAccountQuotasSummaryForUsageQuery({\n    variables: { billingAccountId: billingAccountId!, productId },\n    skip: !billingAccountId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const pooledQuotas = useMemo(() => {\n    if (!data?.getBillingAccountQuotasSummary) {\n      return [];\n    }\n\n    const summary = data.getBillingAccountQuotasSummary;\n    return aggregateQuotasByName(summary.pooledQuotas || []);\n  }, [data]);\n\n  return {\n    pooledQuotas,\n    isLoading: loading,\n    error: error ?? null,\n    refetch,\n  };\n}\n\n/**\n * Subscription from the API\n */\ninterface SubscriptionQuota {\n  id: string;\n  name: string;\n  limits: { type: string; value: number; unit?: string; originalValue?: number };\n  context?: Record<string, unknown> | null;\n  currentUsageSum: number;\n  usageCount: number;\n  createdAt: string;\n  endtime: string;\n}\n\ninterface SubscriptionFromAPI {\n  id: string;\n  status: string;\n  createdAt: string;\n  planName?: string | null;\n  productId?: string | null;\n  quotas: SubscriptionQuota[];\n}\n\n/**\n * Hook to get subscriptions with their quotas grouped by status\n * Uses lazy loading for past subscriptions and supports backend search\n */\ntype ViewMode = 'active' | 'past' | 'all';\n\nconst PAST_SUBSCRIPTIONS_PAGE_SIZE = 10;\n\ninterface UseSubscriptionsWithQuotasOptions {\n  searchQuery?: string;\n  viewMode?: ViewMode;\n}\n\ninterface UseSubscriptionsWithQuotasResult {\n  activeSubscriptions: SubscriptionWithAggregatedQuotas[];\n  pastSubscriptions: SubscriptionWithAggregatedQuotas[];\n  isLoading: boolean;\n  isPastSubscriptionsLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n  // Pagination for past subscriptions\n  loadMorePastSubscriptions: () => void;\n  hasMorePastSubscriptions: boolean;\n  isLoadingMorePast: boolean;\n  pastSubscriptionsCount: number;\n}\n\nexport function useSubscriptionsWithQuotas(\n  billingAccountId: string | undefined,\n  options: UseSubscriptionsWithQuotasOptions = {}\n): UseSubscriptionsWithQuotasResult {\n  const { searchQuery, viewMode = 'active' } = options;\n\n  // Determine which subscriptions to fetch based on viewMode\n  const shouldFetchActive = viewMode === 'active' || viewMode === 'all';\n  const shouldFetchPast = viewMode === 'past' || viewMode === 'all';\n\n  // Query for active subscriptions\n  const { data, loading, error, refetch } = useGetSubscriptionsWithQuotasQuery({\n    variables: {\n      billingAccountId: billingAccountId!,\n      searchQuery: searchQuery || null,\n    },\n    skip: !billingAccountId || !shouldFetchActive,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  // Query for past subscriptions with pagination - only when viewMode is 'past' or 'all'\n  const {\n    data: pastData,\n    loading: pastLoading,\n    refetch: refetchPast,\n    fetchMore: fetchMorePast,\n  } = useGetPastSubscriptionsWithQuotasQuery({\n    variables: {\n      billingAccountId: billingAccountId!,\n      searchQuery: searchQuery || null,\n      page: 1,\n      pageSize: PAST_SUBSCRIPTIONS_PAGE_SIZE,\n    },\n    skip: !billingAccountId || !shouldFetchPast,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  // Track if we're loading more past subscriptions\n  const [isLoadingMorePast, setIsLoadingMorePast] = useState(false);\n  const [currentPastPage, setCurrentPastPage] = useState(1);\n\n  // Helper function to process subscription data\n  const processSubscription = useCallback(\n    (sub: SubscriptionFromAPI): SubscriptionWithAggregatedQuotas => {\n      const quotaSummaries: QuotaAssignmentSummary[] = (sub.quotas || []).map((q) => {\n        const limit = q.limits?.value || 0;\n        const used = q.currentUsageSum || 0;\n        const limitLeft = Math.max(0, limit - used);\n        const usagePercentage = limit > 0 ? (used / limit) * 100 : 0;\n        const unit = q.limits?.unit || '';\n\n        return {\n          id: q.id,\n          name: q.name,\n          unit,\n          quotaType: 'PRODUCT_SPECIFIC' as const,\n          reusable: false,\n          limit,\n          limitLeft,\n          used,\n          usagePercentage,\n          noLimit: q.limits?.type !== 'number' && q.limits?.type !== 'numeric',\n          subscriptionId: sub.id,\n          context: q.context,\n          recentUsages: [],\n          createdAt: q.createdAt,\n          endtime: q.endtime,\n        };\n      });\n\n      return {\n        id: sub.id,\n        status: sub.status,\n        createdAt: sub.createdAt,\n        planName: sub.planName ?? undefined,\n        productId: sub.productId ?? undefined,\n        aggregatedQuotas: aggregateQuotasByName(quotaSummaries),\n      };\n    },\n    []\n  );\n\n  // Process active subscriptions\n  const activeSubscriptions = useMemo(() => {\n    if (!data?.getSubscriptionUsageOverview) {\n      return [];\n    }\n\n    const subscriptions: SubscriptionFromAPI[] = data.getSubscriptionUsageOverview;\n    return subscriptions.map(processSubscription);\n  }, [data, processSubscription]);\n\n  // Process past subscriptions\n  const pastSubscriptions = useMemo(() => {\n    if (!pastData?.getSubscriptionUsageOverview) {\n      return [];\n    }\n\n    const subscriptions: SubscriptionFromAPI[] =\n      pastData.getSubscriptionUsageOverview.subscriptions || pastData.getSubscriptionUsageOverview;\n    return subscriptions.map(processSubscription);\n  }, [pastData, processSubscription]);\n\n  // Get pagination info for past subscriptions\n  const pastSubscriptionsPagination = useMemo(() => {\n    const overview = pastData?.getSubscriptionUsageOverview;\n    if (!overview) {\n      return { totalCount: 0, hasMore: false };\n    }\n    // If it's the new paginated format\n    if (overview.totalCount !== undefined) {\n      return {\n        totalCount: overview.totalCount,\n        hasMore: pastSubscriptions.length < overview.totalCount,\n      };\n    }\n    // Legacy format - assume there might be more if we got a full page\n    return {\n      totalCount: pastSubscriptions.length,\n      hasMore: pastSubscriptions.length >= PAST_SUBSCRIPTIONS_PAGE_SIZE * currentPastPage,\n    };\n  }, [pastData, pastSubscriptions.length, currentPastPage]);\n\n  // Reset page when search query or viewMode changes\n  useEffect(() => {\n    setCurrentPastPage(1);\n  }, [searchQuery, viewMode]);\n\n  // Load more past subscriptions\n  const loadMorePastSubscriptions = useCallback(async () => {\n    if (!fetchMorePast || isLoadingMorePast || !pastSubscriptionsPagination.hasMore) return;\n\n    setIsLoadingMorePast(true);\n    const nextPage = currentPastPage + 1;\n\n    try {\n      await fetchMorePast({\n        variables: {\n          page: nextPage,\n          pageSize: PAST_SUBSCRIPTIONS_PAGE_SIZE,\n        },\n        updateQuery: (\n          prev: GetPastSubscriptionsWithQuotasQuery,\n          { fetchMoreResult }: { fetchMoreResult: GetPastSubscriptionsWithQuotasQuery }\n        ) => {\n          if (!fetchMoreResult) return prev;\n\n          const prevSubs = prev?.getSubscriptionUsageOverview ?? [];\n          const newSubs = fetchMoreResult?.getSubscriptionUsageOverview ?? [];\n\n          return {\n            getSubscriptionUsageOverview: [...prevSubs, ...newSubs],\n          };\n        },\n      });\n      setCurrentPastPage(nextPage);\n    } catch (err) {\n      console.error('Failed to load more past subscriptions:', err);\n    } finally {\n      setIsLoadingMorePast(false);\n    }\n  }, [fetchMorePast, isLoadingMorePast, pastSubscriptionsPagination.hasMore, currentPastPage]);\n\n  const combinedRefetch = useCallback(() => {\n    setCurrentPastPage(1);\n    if (shouldFetchActive) refetch();\n    if (shouldFetchPast) refetchPast();\n  }, [shouldFetchActive, shouldFetchPast, refetch, refetchPast]);\n\n  return {\n    activeSubscriptions,\n    pastSubscriptions,\n    isLoading: shouldFetchActive ? loading : false,\n    isPastSubscriptionsLoading: shouldFetchPast ? pastLoading : false,\n    error: error ?? null,\n    refetch: combinedRefetch,\n    // Pagination for past subscriptions\n    loadMorePastSubscriptions,\n    hasMorePastSubscriptions: pastSubscriptionsPagination.hasMore,\n    isLoadingMorePast,\n    pastSubscriptionsCount: pastSubscriptionsPagination.totalCount,\n  };\n}\n\n/**\n * Hook to get quota usage details for drill-down using cursor-based pagination.\n *\n * The activity-svc API is cursor-based (limit / cursor → items / hasNextPage / nextCursor).\n * Callers should maintain a cursor stack:\n *   - push nextCursor to go forward\n *   - pop to go back\n *   - pass null as cursor for the first page\n */\nexport interface QuotaUsageDetail {\n  id: string;\n  amount: number;\n  description: string;\n  tags?: Record<string, unknown>;\n  productId?: string;\n  userId?: string;\n  timestamp: string;\n  lastUpdated?: string;\n}\n\ninterface UseQuotaUsageDetailsResult {\n  usages: QuotaUsageDetail[];\n  hasNextPage: boolean;\n  nextCursor: string | null;\n  isLoading: boolean;\n  error: Error | null;\n  refetch: () => void;\n}\n\ntype UsageRecord = GetUsageRecordsQuery['getUsageRecords']['items'][number];\n\nexport function buildUsageRecordsVariables(\n  quotaAssignmentId: string | undefined,\n  pageSize: number,\n  cursor: string | null,\n  workspaceId?: string\n): GetUsageRecordsQueryVariables {\n  return {\n    filters: {\n      quotaAssignmentId,\n      workspaceId,\n    },\n    pagination: {\n      limit: pageSize,\n      ...(cursor ? { cursor } : {}),\n    },\n  };\n}\n\nexport function mapUsageRecordToQuotaUsageDetail(record: UsageRecord): QuotaUsageDetail {\n  return {\n    id: record.id,\n    amount: record.amount,\n    description: record.description ?? '',\n    tags: (record.metadata as Record<string, unknown>) ?? {},\n    productId: record.productId,\n    userId: record.userId ?? undefined,\n    timestamp: record.createdAt,\n    lastUpdated: record.createdAt,\n  };\n}\n\nexport function useQuotaUsageDetails(\n  quotaAssignmentId: string | undefined,\n  pageSize: number = 20,\n  cursor: string | null = null,\n  workspaceId?: string\n): UseQuotaUsageDetailsResult {\n  // Query workspace gateway directly — usage records live in wspace-activity-svc.\n  // Uses the dedicated workspace Apollo client so it doesn't conflict with the\n  // shell's global Apollo client used by all other billing queries.\n  const wsClient = useGatewayClient('workspace');\n  const { data, loading, error, refetch } = useGetUsageRecordsQuery({\n    client: wsClient,\n    variables: buildUsageRecordsVariables(quotaAssignmentId, pageSize, cursor, workspaceId),\n    skip: !quotaAssignmentId || !workspaceId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const items: GetUsageRecordsQuery['getUsageRecords']['items'] =\n    data?.getUsageRecords?.items ?? [];\n\n  return {\n    usages: items.map(mapUsageRecordToQuotaUsageDetail),\n    hasNextPage: data?.getUsageRecords?.hasNextPage ?? false,\n    nextCursor: data?.getUsageRecords?.nextCursor ?? null,\n    isLoading: loading,\n    error: error ?? null,\n    refetch,\n  };\n}\n\n/**\n * Hook to get quota analytics\n */\ninterface UseQuotaAnalyticsResult {\n  analytics: {\n    dailyUsage: Array<{ date: string; usage: number; count: number }>;\n    usageByType: Array<{ resourceType: string; usage: number; count: number; percentage: number }>;\n    trends?: {\n      growthRate?: number;\n      predictedUsage?: number;\n      averageDailyUsage?: number;\n    };\n    peakUsage?: {\n      maxDailyUsage: number;\n      peakDate: string;\n      peakHour?: number;\n    };\n  } | null;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nexport function useQuotaAnalytics(\n  quotaAssignmentId: string | undefined,\n  period: AnalyticsPeriod = AnalyticsPeriod.LAST_30_DAYS\n): UseQuotaAnalyticsResult {\n  const { data, loading, error } = useGetQuotaAnalyticsForUsageQuery({\n    variables: { quotaAssignmentId: quotaAssignmentId!, period },\n    skip: !quotaAssignmentId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  return {\n    analytics: data?.getQuotaAnalytics ?? null,\n    isLoading: loading,\n    error: error ?? null,\n  };\n}\n\n/**\n * Combined hook for the enhanced usage page\n */\ninterface UseEnhancedUsagePageParams {\n  billingAccountId: string | undefined;\n  workspaceId?: string;\n  period?: AnalyticsPeriod;\n  searchQuery?: string;\n  viewMode?: ViewMode;\n}\n\ninterface UseEnhancedUsagePageResult {\n  // Dashboard overview\n  dashboard: UsageDashboard | null;\n\n  // Pooled quotas (subscription quotas come from subscriptions directly)\n  pooledQuotas: AggregatedQuota[];\n\n  // Subscriptions with their quotas\n  activeSubscriptions: SubscriptionWithAggregatedQuotas[];\n  pastSubscriptions: SubscriptionWithAggregatedQuotas[];\n\n  // Loading states\n  isLoading: boolean;\n  isPastSubscriptionsLoading: boolean;\n  error: Error | null;\n\n  // Actions\n  refetch: () => void;\n\n  // Pagination for past subscriptions\n  loadMorePastSubscriptions: () => void;\n  hasMorePastSubscriptions: boolean;\n  isLoadingMorePast: boolean;\n  pastSubscriptionsCount: number;\n}\n\nexport function useEnhancedUsagePage({\n  billingAccountId,\n  workspaceId,\n  period = AnalyticsPeriod.LAST_30_DAYS,\n  searchQuery,\n  viewMode = 'active',\n}: UseEnhancedUsagePageParams): UseEnhancedUsagePageResult {\n  // Dashboard for overview stats\n  const dashboardResult = useUsageDashboard({\n    billingAccountId,\n    period,\n  });\n\n  // Quotas summary with aggregation\n  const quotasSummaryResult = useBillingAccountQuotasSummary(billingAccountId);\n\n  // Live collector values from activity-svc (source of truth for count/concurrent quotas)\n  const { statusMap } = useWorkspaceQuotaStatuses(workspaceId);\n\n  // Subscriptions with quotas - passes searchQuery and viewMode to backend\n  const subscriptionsResult = useSubscriptionsWithQuotas(billingAccountId, {\n    searchQuery,\n    viewMode,\n  });\n\n  // Merge live values into both pooled quotas and subscription quotas\n  const pooledQuotas = useMemo(\n    () => mergeLiveValues(quotasSummaryResult.pooledQuotas, statusMap),\n    [quotasSummaryResult.pooledQuotas, statusMap]\n  );\n\n  const activeSubscriptions = useMemo(\n    () =>\n      subscriptionsResult.activeSubscriptions.map((sub) => ({\n        ...sub,\n        aggregatedQuotas: mergeLiveValues(sub.aggregatedQuotas, statusMap),\n      })),\n    [subscriptionsResult.activeSubscriptions, statusMap]\n  );\n\n  const pastSubscriptions = useMemo(\n    () =>\n      subscriptionsResult.pastSubscriptions.map((sub) => ({\n        ...sub,\n        aggregatedQuotas: mergeLiveValues(sub.aggregatedQuotas, statusMap),\n      })),\n    [subscriptionsResult.pastSubscriptions, statusMap]\n  );\n\n  const refetch = useCallback(() => {\n    dashboardResult.refetch();\n    quotasSummaryResult.refetch();\n    subscriptionsResult.refetch();\n  }, [dashboardResult, quotasSummaryResult, subscriptionsResult]);\n\n  return {\n    dashboard: dashboardResult.dashboard,\n    pooledQuotas,\n    activeSubscriptions,\n    pastSubscriptions,\n    isLoading:\n      dashboardResult.isLoading || quotasSummaryResult.isLoading || subscriptionsResult.isLoading,\n    isPastSubscriptionsLoading: subscriptionsResult.isPastSubscriptionsLoading,\n    error: dashboardResult.error || quotasSummaryResult.error || subscriptionsResult.error,\n    refetch,\n    // Pagination for past subscriptions\n    loadMorePastSubscriptions: subscriptionsResult.loadMorePastSubscriptions,\n    hasMorePastSubscriptions: subscriptionsResult.hasMorePastSubscriptions,\n    isLoadingMorePast: subscriptionsResult.isLoadingMorePast,\n    pastSubscriptionsCount: subscriptionsResult.pastSubscriptionsCount,\n  };\n}\n"],"mappings":"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"}