@burdenoff/microfe-billing 2026.917.4 → 2026.1005.1

package/dist/billing/modules/settings/pages/TeamPermissionsPage.js

@@ -83,7 +83,7 @@ var C = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i, w = "
 		}
 	};
 	return P.canManageBillingAccount ? N ? /* @__PURE__ */ m("div", {
-		className: "space-y-6",
+		className: "space-y-6 p-6",
 		children: [
 			/* @__PURE__ */ p(n, {
 				title: "Team & Permissions",
@@ -307,7 +307,7 @@ var C = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i, w = "
 			})
 		]
 	}) : /* @__PURE__ */ m("div", {
-		className: "space-y-6",
+		className: "space-y-6 p-6",
 		children: [/* @__PURE__ */ p(n, {
 			title: "Team & Permissions",
 			description: "Select a billing account to manage who can access it."

package/dist/billing/modules/settings/pages/TeamPermissionsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"TeamPermissionsPage.js","names":[],"sources":["../../../../../src/billing/modules/settings/pages/TeamPermissionsPage.tsx"],"sourcesContent":["/**\n * Settings Module - Team & Permissions Page\n *\n * Lets a Billing Admin manage billing-scope role assignments for a specific\n * billing account. Calls global-rbac-svc directly via the same gateway URL\n * used by the rest of the billing module.\n *\n * Scope: `scopeType: \"billing\"`, `scopeId: <billingAccountId>`\n * Roles cloned per billing account at creation time:\n *   - Billing Admin (full access to this billing account)\n *   - Billing Viewer (read-only access to this billing account)\n */\nimport { useCallback, useEffect, useMemo, useState, type FC } from 'react';\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  PagePurpose,\n  IllustratedEmptyState,\n} from '@burdenoff/fe-libs/ui';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { AccessDenied, ActorIdentity, PageHeader } from '../../../shared/components';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBillingAccountSelection } from '../../../hooks/useBillingAccountSelection';\nimport { useBillingAccounts } from '../../dashboard/hooks/useDashboard';\nimport { directBillingGraphqlRequest } from '../../../shared/utils';\nimport { useActorProfiles } from '../../../shared/hooks';\n\n// Basic UUID-v1-through-v5 shape — accept any 8-4-4-4-12 hex pattern.\n// We intentionally don't strictly validate the version nibble; the rbac\n// service is the authoritative ID validator.\nconst UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;\n\ninterface Role {\n  id: string;\n  name: string;\n  description?: string | null;\n  priority: number;\n  isSystem: boolean;\n}\n\ninterface ActorRoleAssignment {\n  id: string;\n  actorId: string;\n  actorType: string;\n  roleId: string;\n  scopeId: string;\n  isActive: boolean;\n  expiresAt?: string | null;\n  role?: Role;\n}\n\ninterface ActorRbacSummary {\n  actorId: string;\n  actorType: string;\n  roleAssignments: ActorRoleAssignment[];\n  effectivePermissionCount?: number;\n}\n\nconst ROLES_QUERY = `\n  query BillingScopeRoles($scopeId: String!) {\n    roles(scopeId: $scopeId) {\n      id\n      name\n      description\n      priority\n      isSystem\n    }\n  }\n`;\n\nconst ACTORS_QUERY = `\n  query BillingScopeActors($scopeId: String!) {\n    actors(scopeId: $scopeId) {\n      actorId\n      actorType\n      roleAssignments {\n        id\n        actorId\n        actorType\n        roleId\n        scopeId\n        isActive\n        expiresAt\n        role { id name priority }\n      }\n    }\n  }\n`;\n\nconst ASSIGN_ROLE_MUTATION = `\n  mutation AssignBillingRole($input: AssignRoleInput!) {\n    assignRoleToActor(input: $input) {\n      id\n      actorId\n      roleId\n      scopeId\n    }\n  }\n`;\n\nconst REMOVE_ROLE_MUTATION = `\n  mutation RemoveBillingRole($assignmentId: String!) {\n    removeRoleFromActor(assignmentId: $assignmentId)\n  }\n`;\n\nexport const TeamPermissionsPage: FC = () => {\n  const { apiGatewayUrl, authToken, orgId } = useBilling();\n\n  // Resolution priority: URL `?billingAccountId=` → persisted localStorage →\n  // default/first available account. Pass `billingAccounts` so first-time\n  // users with empty localStorage still land on the default account\n  // (without it the hook's auto-select effect can't fire and the page\n  // dead-ends on \"No billing account selected\").\n  const { billingAccounts } = useBillingAccounts();\n  const { selectedAccountId } = useBillingAccountSelection({\n    orgId,\n    billingAccounts,\n    syncFromUrl: true,\n    urlParamName: 'billingAccountId',\n  });\n  const billingAccountId = selectedAccountId ?? undefined;\n\n  // Share the resolved account with `useBillingPermissions` so its\n  // billing-scope permissions fetch observes the same ID. Without this,\n  // a first-time user (no URL param, empty localStorage) would see the\n  // page resolve to the default account here while the permissions hook\n  // still sat at null — billing-scope-only admins would see AccessDenied\n  // until a navigation/reload propagated the localStorage write.\n  const permissions = useBillingPermissions({ billingAccountIdOverride: billingAccountId });\n\n  const [roles, setRoles] = useState<Role[]>([]);\n  const [actors, setActors] = useState<ActorRbacSummary[]>([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  // Add-member form\n  const [newActorId, setNewActorId] = useState('');\n  const [newRoleId, setNewRoleId] = useState('');\n  const [isAdding, setIsAdding] = useState(false);\n  const [removeAssignmentId, setRemoveAssignmentId] = useState<string | null>(null);\n\n  const gqlPost = useCallback(\n    async <T,>(query: string, variables: Record<string, unknown>): Promise<T> => {\n      return directBillingGraphqlRequest<T>({\n        apiGatewayUrl,\n        authToken,\n        orgId,\n        query,\n        variables,\n      });\n    },\n    [apiGatewayUrl, authToken, orgId]\n  );\n\n  const loadData = useCallback(async () => {\n    if (!billingAccountId) return;\n    setIsLoading(true);\n    setError(null);\n    try {\n      const [rolesResp, actorsResp] = await Promise.all([\n        gqlPost<{ roles: Role[] }>(ROLES_QUERY, { scopeId: billingAccountId }),\n        gqlPost<{ actors: ActorRbacSummary[] }>(ACTORS_QUERY, {\n          scopeId: billingAccountId,\n        }),\n      ]);\n      setRoles(rolesResp.roles ?? []);\n      setActors(actorsResp.actors ?? []);\n      // Default the role-picker to \"Billing Viewer\" if available, else first role\n      const viewer = (rolesResp.roles ?? []).find((r) => /viewer/i.test(r.name));\n      setNewRoleId(viewer?.id ?? rolesResp.roles?.[0]?.id ?? '');\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to load team data');\n    } finally {\n      setIsLoading(false);\n    }\n  }, [billingAccountId, gqlPost]);\n\n  useEffect(() => {\n    void loadData();\n  }, [loadData]);\n\n  const sortedActors = useMemo(\n    () =>\n      [...actors].sort((a, b) => {\n        const priA = Math.max(...a.roleAssignments.map((ra) => ra.role?.priority ?? 0), 0);\n        const priB = Math.max(...b.roleAssignments.map((ra) => ra.role?.priority ?? 0), 0);\n        return priB - priA;\n      }),\n    [actors]\n  );\n\n  const profileInputs = useMemo(\n    () =>\n      sortedActors.map((a) => ({\n        actorId: a.actorId,\n        actorType: a.actorType,\n      })),\n    [sortedActors]\n  );\n  const profileMap = useActorProfiles(profileInputs);\n\n  const billingAccountName = useMemo(() => {\n    if (!billingAccountId) return undefined;\n    return billingAccounts.find((acct) => acct.id === billingAccountId)?.name ?? undefined;\n  }, [billingAccountId, billingAccounts]);\n\n  const handleAddMember = async (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!billingAccountId || !newActorId.trim() || !newRoleId) return;\n    const trimmedActorId = newActorId.trim();\n    if (!UUID_RE.test(trimmedActorId)) {\n      setError('User ID must be a UUID (e.g. 1a2b3c4d-...). Get it from the user profile page.');\n      return;\n    }\n    setIsAdding(true);\n    setError(null);\n    try {\n      await gqlPost(ASSIGN_ROLE_MUTATION, {\n        input: {\n          actorId: trimmedActorId,\n          actorType: 'USER',\n          roleId: newRoleId,\n          scopeId: billingAccountId,\n        },\n      });\n      setNewActorId('');\n      await loadData();\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to assign role');\n    } finally {\n      setIsAdding(false);\n    }\n  };\n\n  const handleRemoveAssignment = async (assignmentId: string) => {\n    setError(null);\n    try {\n      await gqlPost(REMOVE_ROLE_MUTATION, { assignmentId });\n      await loadData();\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to remove role');\n    }\n  };\n\n  if (!permissions.canManageBillingAccount) {\n    return (\n      <AccessDenied message=\"You don't have permission to manage team and permissions for this billing account.\" />\n    );\n  }\n\n  if (!billingAccountId) {\n    return (\n      <div className=\"space-y-6\">\n        <PageHeader\n          title=\"Team & Permissions\"\n          description=\"Select a billing account to manage who can access it.\"\n        />\n        <IllustratedEmptyState\n          illustration=\"empty-people\"\n          title=\"No billing account selected\"\n          description=\"Pick one from the billing account selector to manage its members and roles.\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6\">\n      <PageHeader\n        title=\"Team & Permissions\"\n        description=\"Control who can manage this billing account and what they can do.\"\n      />\n\n      <PagePurpose>\n        Decide who on your team can see and manage this billing account. Assign the Billing Admin\n        role (full access) or Billing Viewer (read-only) to specific people, and revoke access when\n        someone no longer needs it.\n      </PagePurpose>\n\n      <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 text-sm\">\n        <span className=\"font-medium text-text-primary\">Billing account:</span>{' '}\n        <span className=\"text-text-primary\">{billingAccountName ?? 'Unnamed account'}</span>\n        {billingAccountId ? (\n          <details className=\"mt-2 text-xs text-text-secondary\">\n            <summary className=\"cursor-pointer\">Account ID</summary>\n            <span className=\"mt-1 inline-block font-mono\">{billingAccountId}</span>\n          </details>\n        ) : null}\n      </div>\n\n      {error && (\n        <div className=\"rounded-lg border border-status-error-border/30 bg-status-error-bg/5 p-4 text-sm text-status-error-text\">\n          {error}\n        </div>\n      )}\n\n      {/* Add member form */}\n      <form\n        onSubmit={(e) => void handleAddMember(e)}\n        className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 space-y-3\"\n      >\n        <h3 className=\"text-sm font-semibold text-text-primary\">Add member</h3>\n        <div className=\"grid grid-cols-1 gap-3 md:grid-cols-3\">\n          <div className=\"md:col-span-2\">\n            <label htmlFor=\"newActorId\" className=\"block text-xs font-medium text-text-secondary\">\n              User ID\n            </label>\n            <input\n              id=\"newActorId\"\n              type=\"text\"\n              value={newActorId}\n              onChange={(e) => setNewActorId(e.target.value)}\n              placeholder=\"Paste the user ID from their profile page\"\n              className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm\"\n              required\n            />\n            <p className=\"mt-1 text-[11px] text-text-secondary\">\n              Find this on the user's profile page.\n            </p>\n          </div>\n          <div>\n            <label htmlFor=\"newRoleId\" className=\"block text-xs font-medium text-text-secondary\">\n              Role\n            </label>\n            <select\n              id=\"newRoleId\"\n              value={newRoleId}\n              onChange={(e) => setNewRoleId(e.target.value)}\n              className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm\"\n              required\n            >\n              {roles.map((r) => (\n                <option key={r.id} value={r.id}>\n                  {r.name}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n        <button\n          type=\"submit\"\n          disabled={isAdding || !newActorId.trim() || !newRoleId}\n          className=\"rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text disabled:opacity-50\"\n        >\n          {isAdding ? 'Adding…' : 'Add member'}\n        </button>\n      </form>\n\n      {/* Members table */}\n      <div className=\"rounded-lg border border-border-subtle bg-bg-surface\">\n        <div className=\"border-b border-border-subtle px-4 py-3\">\n          <h3 className=\"text-sm font-semibold text-text-primary\">Members</h3>\n          <p className=\"text-xs text-text-secondary\">\n            Each member's role applies only to this billing account.\n          </p>\n        </div>\n        {isLoading ? (\n          <div className=\"p-6 text-sm text-text-secondary\">Loading…</div>\n        ) : sortedActors.length === 0 ? (\n          <div className=\"p-6 text-sm text-text-secondary\">No members assigned yet.</div>\n        ) : (\n          <table className=\"w-full text-sm\">\n            <thead>\n              <tr className=\"border-b border-border-subtle text-left text-xs text-text-secondary\">\n                <th className=\"px-4 py-2\">Member</th>\n                <th className=\"px-4 py-2\">Type</th>\n                <th className=\"px-4 py-2\">Roles</th>\n                <th className=\"px-4 py-2 text-right\">Actions</th>\n              </tr>\n            </thead>\n            <tbody>\n              {sortedActors.map((actor) => (\n                <tr key={actor.actorId} className=\"border-b border-border-subtle last:border-0\">\n                  <td className=\"px-4 py-3\">\n                    <ActorIdentity\n                      profile={\n                        profileMap[actor.actorId] ?? {\n                          actorId: actor.actorId,\n                          actorType: actor.actorType,\n                          displayName:\n                            actor.actorType.toLowerCase() === 'user'\n                              ? `User ${actor.actorId.slice(0, 8)}…`\n                              : actor.actorType,\n                          secondaryLabel: actor.actorId.slice(0, 12),\n                          resolved: false,\n                        }\n                      }\n                      variant=\"cell\"\n                    />\n                  </td>\n                  <td className=\"px-4 py-3 text-xs capitalize text-text-secondary\">\n                    {actor.actorType.toLowerCase()}\n                  </td>\n                  <td className=\"px-4 py-3\">\n                    <div className=\"flex flex-wrap gap-1\">\n                      {actor.roleAssignments\n                        .filter((ra) => ra.isActive)\n                        .map((ra) => (\n                          <span\n                            key={ra.id}\n                            className=\"inline-flex items-center gap-1 rounded-full border border-border-subtle bg-bg-sunken px-2 py-0.5 text-xs\"\n                          >\n                            {ra.role?.name ?? ra.roleId}\n                            <button\n                              type=\"button\"\n                              onClick={() => setRemoveAssignmentId(ra.id)}\n                              className=\"text-text-secondary hover:text-status-error-text\"\n                              aria-label={`Remove ${ra.role?.name ?? 'role'}`}\n                            >\n                              ×\n                            </button>\n                          </span>\n                        ))}\n                    </div>\n                  </td>\n                  <td className=\"px-4 py-3 text-right\">\n                    <span className=\"text-xs text-text-secondary\">\n                      {actor.effectivePermissionCount ?? '—'} permissions\n                    </span>\n                  </td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        )}\n      </div>\n\n      {/* Roles reference */}\n      <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n        <h3 className=\"text-sm font-semibold text-text-primary\">Available roles</h3>\n        <p className=\"mt-1 text-xs text-text-secondary\">\n          Roles are cloned from the system templates when a billing account is created.\n        </p>\n        <ul className=\"mt-3 space-y-2\">\n          {roles.map((r) => (\n            <li\n              key={r.id}\n              className=\"flex items-start gap-3 rounded-md border border-border-subtle bg-bg-surface p-3\"\n            >\n              <div className=\"flex-1\">\n                <div className=\"text-sm font-medium text-text-primary\">{r.name}</div>\n                {r.description && (\n                  <p className=\"mt-1 text-xs text-text-secondary\">{r.description}</p>\n                )}\n              </div>\n              <span className=\"text-xs text-text-secondary\">priority {r.priority}</span>\n            </li>\n          ))}\n        </ul>\n      </div>\n\n      <AlertDialog\n        open={removeAssignmentId !== null}\n        onOpenChange={(open) => {\n          if (!open) setRemoveAssignmentId(null);\n        }}\n      >\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Remove role assignment?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Remove this role assignment? The member will lose the access this role grants for this\n              billing account.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction\n              onClick={() => {\n                const id = removeAssignmentId;\n                setRemoveAssignmentId(null);\n                if (id) void handleRemoveAssignment(id);\n              }}\n            >\n              Remove\n            </AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"TeamPermissionsPage.js","names":[],"sources":["../../../../../src/billing/modules/settings/pages/TeamPermissionsPage.tsx"],"sourcesContent":["/**\n * Settings Module - Team & Permissions Page\n *\n * Lets a Billing Admin manage billing-scope role assignments for a specific\n * billing account. Calls global-rbac-svc directly via the same gateway URL\n * used by the rest of the billing module.\n *\n * Scope: `scopeType: \"billing\"`, `scopeId: <billingAccountId>`\n * Roles cloned per billing account at creation time:\n *   - Billing Admin (full access to this billing account)\n *   - Billing Viewer (read-only access to this billing account)\n */\nimport { useCallback, useEffect, useMemo, useState, type FC } from 'react';\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  PagePurpose,\n  IllustratedEmptyState,\n} from '@burdenoff/fe-libs/ui';\nimport { useBilling } from '../../../providers/BillingProvider';\nimport { AccessDenied, ActorIdentity, PageHeader } from '../../../shared/components';\nimport { useBillingPermissions } from '../../../hooks/useBillingPermissions';\nimport { useBillingAccountSelection } from '../../../hooks/useBillingAccountSelection';\nimport { useBillingAccounts } from '../../dashboard/hooks/useDashboard';\nimport { directBillingGraphqlRequest } from '../../../shared/utils';\nimport { useActorProfiles } from '../../../shared/hooks';\n\n// Basic UUID-v1-through-v5 shape — accept any 8-4-4-4-12 hex pattern.\n// We intentionally don't strictly validate the version nibble; the rbac\n// service is the authoritative ID validator.\nconst UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;\n\ninterface Role {\n  id: string;\n  name: string;\n  description?: string | null;\n  priority: number;\n  isSystem: boolean;\n}\n\ninterface ActorRoleAssignment {\n  id: string;\n  actorId: string;\n  actorType: string;\n  roleId: string;\n  scopeId: string;\n  isActive: boolean;\n  expiresAt?: string | null;\n  role?: Role;\n}\n\ninterface ActorRbacSummary {\n  actorId: string;\n  actorType: string;\n  roleAssignments: ActorRoleAssignment[];\n  effectivePermissionCount?: number;\n}\n\nconst ROLES_QUERY = `\n  query BillingScopeRoles($scopeId: String!) {\n    roles(scopeId: $scopeId) {\n      id\n      name\n      description\n      priority\n      isSystem\n    }\n  }\n`;\n\nconst ACTORS_QUERY = `\n  query BillingScopeActors($scopeId: String!) {\n    actors(scopeId: $scopeId) {\n      actorId\n      actorType\n      roleAssignments {\n        id\n        actorId\n        actorType\n        roleId\n        scopeId\n        isActive\n        expiresAt\n        role { id name priority }\n      }\n    }\n  }\n`;\n\nconst ASSIGN_ROLE_MUTATION = `\n  mutation AssignBillingRole($input: AssignRoleInput!) {\n    assignRoleToActor(input: $input) {\n      id\n      actorId\n      roleId\n      scopeId\n    }\n  }\n`;\n\nconst REMOVE_ROLE_MUTATION = `\n  mutation RemoveBillingRole($assignmentId: String!) {\n    removeRoleFromActor(assignmentId: $assignmentId)\n  }\n`;\n\nexport const TeamPermissionsPage: FC = () => {\n  const { apiGatewayUrl, authToken, orgId } = useBilling();\n\n  // Resolution priority: URL `?billingAccountId=` → persisted localStorage →\n  // default/first available account. Pass `billingAccounts` so first-time\n  // users with empty localStorage still land on the default account\n  // (without it the hook's auto-select effect can't fire and the page\n  // dead-ends on \"No billing account selected\").\n  const { billingAccounts } = useBillingAccounts();\n  const { selectedAccountId } = useBillingAccountSelection({\n    orgId,\n    billingAccounts,\n    syncFromUrl: true,\n    urlParamName: 'billingAccountId',\n  });\n  const billingAccountId = selectedAccountId ?? undefined;\n\n  // Share the resolved account with `useBillingPermissions` so its\n  // billing-scope permissions fetch observes the same ID. Without this,\n  // a first-time user (no URL param, empty localStorage) would see the\n  // page resolve to the default account here while the permissions hook\n  // still sat at null — billing-scope-only admins would see AccessDenied\n  // until a navigation/reload propagated the localStorage write.\n  const permissions = useBillingPermissions({ billingAccountIdOverride: billingAccountId });\n\n  const [roles, setRoles] = useState<Role[]>([]);\n  const [actors, setActors] = useState<ActorRbacSummary[]>([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  // Add-member form\n  const [newActorId, setNewActorId] = useState('');\n  const [newRoleId, setNewRoleId] = useState('');\n  const [isAdding, setIsAdding] = useState(false);\n  const [removeAssignmentId, setRemoveAssignmentId] = useState<string | null>(null);\n\n  const gqlPost = useCallback(\n    async <T,>(query: string, variables: Record<string, unknown>): Promise<T> => {\n      return directBillingGraphqlRequest<T>({\n        apiGatewayUrl,\n        authToken,\n        orgId,\n        query,\n        variables,\n      });\n    },\n    [apiGatewayUrl, authToken, orgId]\n  );\n\n  const loadData = useCallback(async () => {\n    if (!billingAccountId) return;\n    setIsLoading(true);\n    setError(null);\n    try {\n      const [rolesResp, actorsResp] = await Promise.all([\n        gqlPost<{ roles: Role[] }>(ROLES_QUERY, { scopeId: billingAccountId }),\n        gqlPost<{ actors: ActorRbacSummary[] }>(ACTORS_QUERY, {\n          scopeId: billingAccountId,\n        }),\n      ]);\n      setRoles(rolesResp.roles ?? []);\n      setActors(actorsResp.actors ?? []);\n      // Default the role-picker to \"Billing Viewer\" if available, else first role\n      const viewer = (rolesResp.roles ?? []).find((r) => /viewer/i.test(r.name));\n      setNewRoleId(viewer?.id ?? rolesResp.roles?.[0]?.id ?? '');\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to load team data');\n    } finally {\n      setIsLoading(false);\n    }\n  }, [billingAccountId, gqlPost]);\n\n  useEffect(() => {\n    void loadData();\n  }, [loadData]);\n\n  const sortedActors = useMemo(\n    () =>\n      [...actors].sort((a, b) => {\n        const priA = Math.max(...a.roleAssignments.map((ra) => ra.role?.priority ?? 0), 0);\n        const priB = Math.max(...b.roleAssignments.map((ra) => ra.role?.priority ?? 0), 0);\n        return priB - priA;\n      }),\n    [actors]\n  );\n\n  const profileInputs = useMemo(\n    () =>\n      sortedActors.map((a) => ({\n        actorId: a.actorId,\n        actorType: a.actorType,\n      })),\n    [sortedActors]\n  );\n  const profileMap = useActorProfiles(profileInputs);\n\n  const billingAccountName = useMemo(() => {\n    if (!billingAccountId) return undefined;\n    return billingAccounts.find((acct) => acct.id === billingAccountId)?.name ?? undefined;\n  }, [billingAccountId, billingAccounts]);\n\n  const handleAddMember = async (e: React.FormEvent) => {\n    e.preventDefault();\n    if (!billingAccountId || !newActorId.trim() || !newRoleId) return;\n    const trimmedActorId = newActorId.trim();\n    if (!UUID_RE.test(trimmedActorId)) {\n      setError('User ID must be a UUID (e.g. 1a2b3c4d-...). Get it from the user profile page.');\n      return;\n    }\n    setIsAdding(true);\n    setError(null);\n    try {\n      await gqlPost(ASSIGN_ROLE_MUTATION, {\n        input: {\n          actorId: trimmedActorId,\n          actorType: 'USER',\n          roleId: newRoleId,\n          scopeId: billingAccountId,\n        },\n      });\n      setNewActorId('');\n      await loadData();\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to assign role');\n    } finally {\n      setIsAdding(false);\n    }\n  };\n\n  const handleRemoveAssignment = async (assignmentId: string) => {\n    setError(null);\n    try {\n      await gqlPost(REMOVE_ROLE_MUTATION, { assignmentId });\n      await loadData();\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Failed to remove role');\n    }\n  };\n\n  if (!permissions.canManageBillingAccount) {\n    return (\n      <AccessDenied message=\"You don't have permission to manage team and permissions for this billing account.\" />\n    );\n  }\n\n  if (!billingAccountId) {\n    return (\n      <div className=\"space-y-6 p-6\">\n        <PageHeader\n          title=\"Team & Permissions\"\n          description=\"Select a billing account to manage who can access it.\"\n        />\n        <IllustratedEmptyState\n          illustration=\"empty-people\"\n          title=\"No billing account selected\"\n          description=\"Pick one from the billing account selector to manage its members and roles.\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <PageHeader\n        title=\"Team & Permissions\"\n        description=\"Control who can manage this billing account and what they can do.\"\n      />\n\n      <PagePurpose>\n        Decide who on your team can see and manage this billing account. Assign the Billing Admin\n        role (full access) or Billing Viewer (read-only) to specific people, and revoke access when\n        someone no longer needs it.\n      </PagePurpose>\n\n      <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 text-sm\">\n        <span className=\"font-medium text-text-primary\">Billing account:</span>{' '}\n        <span className=\"text-text-primary\">{billingAccountName ?? 'Unnamed account'}</span>\n        {billingAccountId ? (\n          <details className=\"mt-2 text-xs text-text-secondary\">\n            <summary className=\"cursor-pointer\">Account ID</summary>\n            <span className=\"mt-1 inline-block font-mono\">{billingAccountId}</span>\n          </details>\n        ) : null}\n      </div>\n\n      {error && (\n        <div className=\"rounded-lg border border-status-error-border/30 bg-status-error-bg/5 p-4 text-sm text-status-error-text\">\n          {error}\n        </div>\n      )}\n\n      {/* Add member form */}\n      <form\n        onSubmit={(e) => void handleAddMember(e)}\n        className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 space-y-3\"\n      >\n        <h3 className=\"text-sm font-semibold text-text-primary\">Add member</h3>\n        <div className=\"grid grid-cols-1 gap-3 md:grid-cols-3\">\n          <div className=\"md:col-span-2\">\n            <label htmlFor=\"newActorId\" className=\"block text-xs font-medium text-text-secondary\">\n              User ID\n            </label>\n            <input\n              id=\"newActorId\"\n              type=\"text\"\n              value={newActorId}\n              onChange={(e) => setNewActorId(e.target.value)}\n              placeholder=\"Paste the user ID from their profile page\"\n              className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm\"\n              required\n            />\n            <p className=\"mt-1 text-[11px] text-text-secondary\">\n              Find this on the user's profile page.\n            </p>\n          </div>\n          <div>\n            <label htmlFor=\"newRoleId\" className=\"block text-xs font-medium text-text-secondary\">\n              Role\n            </label>\n            <select\n              id=\"newRoleId\"\n              value={newRoleId}\n              onChange={(e) => setNewRoleId(e.target.value)}\n              className=\"mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm\"\n              required\n            >\n              {roles.map((r) => (\n                <option key={r.id} value={r.id}>\n                  {r.name}\n                </option>\n              ))}\n            </select>\n          </div>\n        </div>\n        <button\n          type=\"submit\"\n          disabled={isAdding || !newActorId.trim() || !newRoleId}\n          className=\"rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text disabled:opacity-50\"\n        >\n          {isAdding ? 'Adding…' : 'Add member'}\n        </button>\n      </form>\n\n      {/* Members table */}\n      <div className=\"rounded-lg border border-border-subtle bg-bg-surface\">\n        <div className=\"border-b border-border-subtle px-4 py-3\">\n          <h3 className=\"text-sm font-semibold text-text-primary\">Members</h3>\n          <p className=\"text-xs text-text-secondary\">\n            Each member's role applies only to this billing account.\n          </p>\n        </div>\n        {isLoading ? (\n          <div className=\"p-6 text-sm text-text-secondary\">Loading…</div>\n        ) : sortedActors.length === 0 ? (\n          <div className=\"p-6 text-sm text-text-secondary\">No members assigned yet.</div>\n        ) : (\n          <table className=\"w-full text-sm\">\n            <thead>\n              <tr className=\"border-b border-border-subtle text-left text-xs text-text-secondary\">\n                <th className=\"px-4 py-2\">Member</th>\n                <th className=\"px-4 py-2\">Type</th>\n                <th className=\"px-4 py-2\">Roles</th>\n                <th className=\"px-4 py-2 text-right\">Actions</th>\n              </tr>\n            </thead>\n            <tbody>\n              {sortedActors.map((actor) => (\n                <tr key={actor.actorId} className=\"border-b border-border-subtle last:border-0\">\n                  <td className=\"px-4 py-3\">\n                    <ActorIdentity\n                      profile={\n                        profileMap[actor.actorId] ?? {\n                          actorId: actor.actorId,\n                          actorType: actor.actorType,\n                          displayName:\n                            actor.actorType.toLowerCase() === 'user'\n                              ? `User ${actor.actorId.slice(0, 8)}…`\n                              : actor.actorType,\n                          secondaryLabel: actor.actorId.slice(0, 12),\n                          resolved: false,\n                        }\n                      }\n                      variant=\"cell\"\n                    />\n                  </td>\n                  <td className=\"px-4 py-3 text-xs capitalize text-text-secondary\">\n                    {actor.actorType.toLowerCase()}\n                  </td>\n                  <td className=\"px-4 py-3\">\n                    <div className=\"flex flex-wrap gap-1\">\n                      {actor.roleAssignments\n                        .filter((ra) => ra.isActive)\n                        .map((ra) => (\n                          <span\n                            key={ra.id}\n                            className=\"inline-flex items-center gap-1 rounded-full border border-border-subtle bg-bg-sunken px-2 py-0.5 text-xs\"\n                          >\n                            {ra.role?.name ?? ra.roleId}\n                            <button\n                              type=\"button\"\n                              onClick={() => setRemoveAssignmentId(ra.id)}\n                              className=\"text-text-secondary hover:text-status-error-text\"\n                              aria-label={`Remove ${ra.role?.name ?? 'role'}`}\n                            >\n                              ×\n                            </button>\n                          </span>\n                        ))}\n                    </div>\n                  </td>\n                  <td className=\"px-4 py-3 text-right\">\n                    <span className=\"text-xs text-text-secondary\">\n                      {actor.effectivePermissionCount ?? '—'} permissions\n                    </span>\n                  </td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        )}\n      </div>\n\n      {/* Roles reference */}\n      <div className=\"rounded-lg border border-border-subtle bg-bg-surface p-4\">\n        <h3 className=\"text-sm font-semibold text-text-primary\">Available roles</h3>\n        <p className=\"mt-1 text-xs text-text-secondary\">\n          Roles are cloned from the system templates when a billing account is created.\n        </p>\n        <ul className=\"mt-3 space-y-2\">\n          {roles.map((r) => (\n            <li\n              key={r.id}\n              className=\"flex items-start gap-3 rounded-md border border-border-subtle bg-bg-surface p-3\"\n            >\n              <div className=\"flex-1\">\n                <div className=\"text-sm font-medium text-text-primary\">{r.name}</div>\n                {r.description && (\n                  <p className=\"mt-1 text-xs text-text-secondary\">{r.description}</p>\n                )}\n              </div>\n              <span className=\"text-xs text-text-secondary\">priority {r.priority}</span>\n            </li>\n          ))}\n        </ul>\n      </div>\n\n      <AlertDialog\n        open={removeAssignmentId !== null}\n        onOpenChange={(open) => {\n          if (!open) setRemoveAssignmentId(null);\n        }}\n      >\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Remove role assignment?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Remove this role assignment? The member will lose the access this role grants for this\n              billing account.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction\n              onClick={() => {\n                const id = removeAssignmentId;\n                setRemoveAssignmentId(null);\n                if (id) void handleRemoveAssignment(id);\n              }}\n            >\n              Remove\n            </AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </div>\n  );\n};\n"],"mappings":"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"}

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 {\n  useGetDefaultBillingAccountDashboardQuery,\n  useGetPlanQuery,\n} from '../../../../generated/global-operations';\nimport { useMyWorkspaces, 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  isWorkspaceScopedQuota,\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  // This subscription may have been activated for a DIFFERENT workspace than\n  // whichever one is currently active in the app shell (e.g. it was\n  // auto-activated back when the org had only one workspace, before a second\n  // one existed). The overview above is scoped to the current context only,\n  // so without this the \"Workspace Quotas\" section can only say *that*\n  // quotas are active somewhere, never show which ones. Fetch the overview\n  // for the actual activated workspace too so the real names/limits show\n  // regardless of which workspace you're currently standing in.\n  const otherActivatedWorkspaceId = (subscription?.activatedWorkspaceIds ?? []).find(\n    (id) => id !== workspaceId\n  );\n  const { overview: otherWsQuotaOverview } = useWorkspaceQuotaOverview(otherActivatedWorkspaceId);\n\n  // Real workspace list for the \"Activate for Workspace\" modal — orgs with\n  // 2+ workspaces need a genuine choice, not just whatever workspace happens\n  // to be active in the current app-shell context.\n  const { workspaces: myWorkspaces } = useMyWorkspaces();\n  const workspaceOptions =\n    myWorkspaces.length > 0\n      ? myWorkspaces\n      : workspaceId\n        ? [{ id: workspaceId, name: 'Current workspace' }]\n        : [];\n\n  // Plan features — the source of the workspace-scoped quotas included in this\n  // plan. Subscription-level `quotas` only covers global-scope QuotaAssignment\n  // rows; workspace-scoped quotas aren't provisioned as rows anywhere until\n  // this subscription is activated for a workspace, so the \"Included quotas\"\n  // preview in the assign modal has to be derived from the plan catalog.\n  const { data: planFeaturesData } = useGetPlanQuery({\n    variables: { id: subscription?.plan?.id ?? '' },\n    skip: !subscription?.plan?.id,\n    fetchPolicy: 'cache-first',\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  // \"Plan Quotas\" is account-level/global entitlements only (e.g. org_count) —\n  // workspace-scoped quotas (Agents, Vibes, ...) already have their own live\n  // \"Workspace Quotas\" section below, backed by the real wspace-activity-svc\n  // data. Without this filter the same quota shows up twice: once from\n  // billing's own QuotaAssignment bookkeeping row (frozen at purchase time)\n  // and once from the real, live assignment.\n  const quotas = (subscription.quotas || []).filter((q) => !isWorkspaceScopedQuota(q.name));\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 — merged\n  // across the current-context overview and the \"other activated workspace\"\n  // overview (see otherActivatedWorkspaceId above), so the real quota names\n  // show even when viewing from a workspace the subscription wasn't\n  // activated for.\n  const wsAssignmentsForSub = [...wsQuotaOverview, ...otherWsQuotaOverview].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  // The plan's own per-subscription workspace cap (activateSubscriptionForWorkspace\n  // rejects with WORKSPACE_CAP_EXCEEDED once activatedWorkspaceIds.length hits\n  // this). Mirrors the backend's own fallback exactly (subscription.activate-workspace.shared.ts):\n  // a null/unset plan.maxWorkspaces defaults to 1, not \"uncapped\" — an\n  // unconfigured plan is fail-safe capped, not fail-open. Surface this up\n  // front — from the current (not-yet-activated) workspace's point of view —\n  // rather than let the user click \"Activate for Workspace\" only to hit that\n  // error.\n  const activatedWorkspaceCount = subscription.activatedWorkspaceIds?.length ?? 0;\n  const maxWorkspaces = plan?.maxWorkspaces ?? 1;\n  const atWorkspaceCap = !isAssignedToWorkspace && activatedWorkspaceCount >= maxWorkspaces;\n\n  // Workspace-scoped quotas included in this plan, for the \"Included quotas\"\n  // preview in the assign modal (see planFeaturesData above). A feature's own\n  // context.quantity is a per-plan \"absolute limit\" override (set via the\n  // Plan admin form) that takes precedence over the quota catalog's generic\n  // limits.value default — this must match buildWorkspaceQuotaInputs (the\n  // backend function that actually grants the quota), or the preview promises\n  // a different number than what the customer actually receives.\n  type PlanFeature = {\n    context?: Record<string, unknown> | null;\n    quota?: {\n      name?: string | null;\n      limits?: Record<string, unknown> | null;\n      quotaType?: string | null;\n    } | null;\n  };\n  const rawPlanFeatures: Array<PlanFeature | null | undefined> =\n    planFeaturesData?.getPlan?.features ?? [];\n  const planFeatures: PlanFeature[] = rawPlanFeatures.filter((f): f is PlanFeature => f != null);\n  const workspaceQuotasToAssign: WorkspaceQuotaToAssign[] = planFeatures\n    .filter((f: PlanFeature) => f.quota?.name && isWorkspaceScopedQuota(f.quota.name))\n    .map((f: PlanFeature) => {\n      const limits = f.quota?.limits;\n      const limitsType = limits && 'type' in limits ? String(limits.type) : 'number';\n      const overrideQuantity =\n        f.context && 'quantity' in f.context ? Number(f.context.quantity) : null;\n      const catalogValue = limits && 'value' in limits ? Number(limits.value) : null;\n      const limitsValue = overrideQuantity ?? catalogValue;\n      return {\n        quotaName: f.quota!.name!,\n        productId: plan?.productID ?? 'platform',\n        limit: limitsType === 'number' ? limitsValue : null,\n        noLimit: limitsType !== 'number',\n        resetPeriod: 'NEVER',\n        quotaMode: f.quota?.quotaType === 'POOLED' ? ('pooled' as const) : ('dedicated' as const),\n      };\n    });\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 && !atWorkspaceCap\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                ) : atWorkspaceCap ? (\n                  <StatusPill status=\"warning\" dot>\n                    At workspace limit\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                ) : atWorkspaceCap ? (\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                        Already active on another workspace\n                      </p>\n                      <p className=\"text-sm text-text-secondary mt-0.5\">\n                        {plan?.name ?? 'This plan'} can be activated for{' '}\n                        {maxWorkspaces === 1\n                          ? 'only 1 workspace'\n                          : `at most ${maxWorkspaces} workspaces`}\n                        , and{' '}\n                        {activatedWorkspaceCount === 1\n                          ? 'it'\n                          : `${activatedWorkspaceCount} of them`}{' '}\n                        {otherActivatedWorkspaceId && (\n                          <>\n                            (\n                            <span className=\"font-mono text-xs bg-bg-sunken/60 rounded px-1.5 py-0.5\">\n                              {workspaceOptions.find((w) => w.id === otherActivatedWorkspaceId)\n                                ?.name ?? otherActivatedWorkspaceId}\n                            </span>\n                            ){' '}\n                          </>\n                        )}\n                        {activatedWorkspaceCount === 1 ? 'is' : 'are'} already using it. Switch to\n                        that workspace to see its quotas, or remove it there to free up the slot for\n                        this one.\n                      </p>\n                    </div>\n                  </div>\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={workspaceQuotasToAssign}\n                  workspaces={workspaceOptions}\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 } | null | 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 {\n  useGetDefaultBillingAccountDashboardQuery,\n  useGetPlanQuery,\n} from '../../../../generated/global-operations';\nimport { useMyWorkspaces, 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  isWorkspaceScopedQuota,\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  // This subscription may have been activated for a DIFFERENT workspace than\n  // whichever one is currently active in the app shell (e.g. it was\n  // auto-activated back when the org had only one workspace, before a second\n  // one existed). The overview above is scoped to the current context only,\n  // so without this the \"Workspace Quotas\" section can only say *that*\n  // quotas are active somewhere, never show which ones. Fetch the overview\n  // for the actual activated workspace too so the real names/limits show\n  // regardless of which workspace you're currently standing in.\n  const otherActivatedWorkspaceId = (subscription?.activatedWorkspaceIds ?? []).find(\n    (id) => id !== workspaceId\n  );\n  const { overview: otherWsQuotaOverview } = useWorkspaceQuotaOverview(otherActivatedWorkspaceId);\n\n  // Real workspace list for the \"Activate for Workspace\" modal — orgs with\n  // 2+ workspaces need a genuine choice, not just whatever workspace happens\n  // to be active in the current app-shell context.\n  const { workspaces: myWorkspaces } = useMyWorkspaces();\n  const workspaceOptions =\n    myWorkspaces.length > 0\n      ? myWorkspaces\n      : workspaceId\n        ? [{ id: workspaceId, name: 'Current workspace' }]\n        : [];\n\n  // Plan features — the source of the workspace-scoped quotas included in this\n  // plan. Subscription-level `quotas` only covers global-scope QuotaAssignment\n  // rows; workspace-scoped quotas aren't provisioned as rows anywhere until\n  // this subscription is activated for a workspace, so the \"Included quotas\"\n  // preview in the assign modal has to be derived from the plan catalog.\n  const { data: planFeaturesData } = useGetPlanQuery({\n    variables: { id: subscription?.plan?.id ?? '' },\n    skip: !subscription?.plan?.id,\n    fetchPolicy: 'cache-first',\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  // \"Plan Quotas\" is account-level/global entitlements only (e.g. org_count) —\n  // workspace-scoped quotas (Agents, Vibes, ...) already have their own live\n  // \"Workspace Quotas\" section below, backed by the real wspace-activity-svc\n  // data. Without this filter the same quota shows up twice: once from\n  // billing's own QuotaAssignment bookkeeping row (frozen at purchase time)\n  // and once from the real, live assignment.\n  const quotas = (subscription.quotas || []).filter((q) => !isWorkspaceScopedQuota(q.name));\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 — merged\n  // across the current-context overview and the \"other activated workspace\"\n  // overview (see otherActivatedWorkspaceId above), so the real quota names\n  // show even when viewing from a workspace the subscription wasn't\n  // activated for.\n  const wsAssignmentsForSub = [...wsQuotaOverview, ...otherWsQuotaOverview].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  // The plan's own per-subscription workspace cap (activateSubscriptionForWorkspace\n  // rejects with WORKSPACE_CAP_EXCEEDED once activatedWorkspaceIds.length hits\n  // this). Mirrors the backend's own fallback exactly (subscription.activate-workspace.shared.ts):\n  // a null/unset plan.maxWorkspaces defaults to 1, not \"uncapped\" — an\n  // unconfigured plan is fail-safe capped, not fail-open. Surface this up\n  // front — from the current (not-yet-activated) workspace's point of view —\n  // rather than let the user click \"Activate for Workspace\" only to hit that\n  // error.\n  const activatedWorkspaceCount = subscription.activatedWorkspaceIds?.length ?? 0;\n  const maxWorkspaces = plan?.maxWorkspaces ?? 1;\n  const atWorkspaceCap = !isAssignedToWorkspace && activatedWorkspaceCount >= maxWorkspaces;\n\n  // Workspace-scoped quotas included in this plan, for the \"Included quotas\"\n  // preview in the assign modal (see planFeaturesData above). A feature's own\n  // context.quantity is a per-plan \"absolute limit\" override (set via the\n  // Plan admin form) that takes precedence over the quota catalog's generic\n  // limits.value default — this must match buildWorkspaceQuotaInputs (the\n  // backend function that actually grants the quota), or the preview promises\n  // a different number than what the customer actually receives.\n  type PlanFeature = {\n    context?: Record<string, unknown> | null;\n    quota?: {\n      name?: string | null;\n      limits?: Record<string, unknown> | null;\n      quotaType?: string | null;\n    } | null;\n  };\n  const rawPlanFeatures: Array<PlanFeature | null | undefined> =\n    planFeaturesData?.getPlan?.features ?? [];\n  const planFeatures: PlanFeature[] = rawPlanFeatures.filter((f): f is PlanFeature => f != null);\n  const workspaceQuotasToAssign: WorkspaceQuotaToAssign[] = planFeatures\n    .filter((f: PlanFeature) => f.quota?.name && isWorkspaceScopedQuota(f.quota.name))\n    .map((f: PlanFeature) => {\n      const limits = f.quota?.limits;\n      const limitsType = limits && 'type' in limits ? String(limits.type) : 'number';\n      const overrideQuantity =\n        f.context && 'quantity' in f.context ? Number(f.context.quantity) : null;\n      const catalogValue = limits && 'value' in limits ? Number(limits.value) : null;\n      const limitsValue = overrideQuantity ?? catalogValue;\n      return {\n        quotaName: f.quota!.name!,\n        productId: plan?.productID ?? 'platform',\n        limit: limitsType === 'number' ? limitsValue : null,\n        noLimit: limitsType !== 'number',\n        resetPeriod: 'NEVER',\n        quotaMode: f.quota?.quotaType === 'POOLED' ? ('pooled' as const) : ('dedicated' as const),\n      };\n    });\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 && !atWorkspaceCap\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                ) : atWorkspaceCap ? (\n                  <StatusPill status=\"warning\" dot>\n                    At workspace limit\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                ) : atWorkspaceCap ? (\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                        Already active on another workspace\n                      </p>\n                      <p className=\"text-sm text-text-secondary mt-0.5\">\n                        {plan?.name ?? 'This plan'} can be activated for{' '}\n                        {maxWorkspaces === 1\n                          ? 'only 1 workspace'\n                          : `at most ${maxWorkspaces} workspaces`}\n                        , and{' '}\n                        {activatedWorkspaceCount === 1\n                          ? 'it'\n                          : `${activatedWorkspaceCount} of them`}{' '}\n                        {otherActivatedWorkspaceId && (\n                          <>\n                            (\n                            <span className=\"font-mono text-xs bg-bg-sunken/60 rounded px-1.5 py-0.5\">\n                              {workspaceOptions.find((w) => w.id === otherActivatedWorkspaceId)\n                                ?.name ?? otherActivatedWorkspaceId}\n                            </span>\n                            ){' '}\n                          </>\n                        )}\n                        {activatedWorkspaceCount === 1 ? 'is' : 'are'} already using it. Switch to\n                        that workspace to see its quotas, or remove it there to free up the slot for\n                        this one.\n                      </p>\n                    </div>\n                  </div>\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={workspaceQuotasToAssign}\n                  workspaces={workspaceOptions}\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/generated/global-operations.js

@@ -1484,6 +1484,7 @@ var Je = t`
     query GetSelectedAddonCheckout($addonIDs: [String!]!) {
   getSelectedAddons(addonIDs: $addonIDs) {
     id
+    productID
     name
     price
     currency
@@ -1679,6 +1680,7 @@ var ut = t`
     query GetPlanCheckout($id: ID!) {
   getPlan(id: $id) {
     id
+    productID
     name
     price
     currency