@burdenoff/microfe-billing 2026.526.1 → 2026.528.1

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

@@ -1,213 +1,247 @@
 import { useBilling as e } from "../../../providers/BillingProvider.js";
 import { AccessDenied as t } from "../../../shared/components/AccessDenied.js";
 import { PageHeader as n } from "../../../shared/components/PageHeader.js";
+import { ActorIdentity as r } from "../../../shared/components/ActorIdentity.js";
 import "../../../shared/components/index.js";
-import { useBillingAccountSelection as r } from "../../../hooks/useBillingAccountSelection.js";
-import { directBillingGraphqlRequest as i } from "../../../shared/utils/directBillingGraphql.js";
+import { useBillingAccountSelection as i } from "../../../hooks/useBillingAccountSelection.js";
+import { directBillingGraphqlRequest as a } from "../../../shared/utils/directBillingGraphql.js";
 import "../../../shared/utils/index.js";
-import { useBillingPermissions as a } from "../../../hooks/useBillingPermissions.js";
-import { useBillingAccounts as o } from "../../dashboard/hooks/useDashboard.js";
-import { useCallback as s, useEffect as c, useMemo as l, useState as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useBillingPermissions as o } from "../../../hooks/useBillingPermissions.js";
+import { useBillingAccounts as s } from "../../dashboard/hooks/useDashboard.js";
+import { useActorProfiles as c } from "../../../shared/hooks/useActorProfiles.js";
+import "../../../shared/hooks/index.js";
+import { useCallback as l, useEffect as u, useMemo as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/billing/modules/settings/pages/TeamPermissionsPage.tsx
-var p = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i, m = "\n  query BillingScopeRoles($scopeId: String!) {\n    roles(scopeId: $scopeId) {\n      id\n      name\n      description\n      priority\n      isSystem\n    }\n  }\n", h = "\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", g = "\n  mutation AssignBillingRole($input: AssignRoleInput!) {\n    assignRoleToActor(input: $input) {\n      id\n      actorId\n      roleId\n      scopeId\n    }\n  }\n", _ = "\n  mutation RemoveBillingRole($assignmentId: String!) {\n    removeRoleFromActor(assignmentId: $assignmentId)\n  }\n", v = () => {
-	let { apiGatewayUrl: v, authToken: y, orgId: b } = e(), { billingAccounts: x } = o(), { selectedAccountId: S } = r({
-		orgId: b,
-		billingAccounts: x,
+var h = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i, g = "\n  query BillingScopeRoles($scopeId: String!) {\n    roles(scopeId: $scopeId) {\n      id\n      name\n      description\n      priority\n      isSystem\n    }\n  }\n", _ = "\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", v = "\n  mutation AssignBillingRole($input: AssignRoleInput!) {\n    assignRoleToActor(input: $input) {\n      id\n      actorId\n      roleId\n      scopeId\n    }\n  }\n", y = "\n  mutation RemoveBillingRole($assignmentId: String!) {\n    removeRoleFromActor(assignmentId: $assignmentId)\n  }\n", b = () => {
+	let { apiGatewayUrl: b, authToken: x, orgId: S } = e(), { billingAccounts: C } = s(), { selectedAccountId: w } = i({
+		orgId: S,
+		billingAccounts: C,
 		syncFromUrl: !0,
 		urlParamName: "billingAccountId"
-	}), C = S ?? void 0, w = a({ billingAccountIdOverride: C }), [T, E] = u([]), [D, O] = u([]), [k, A] = u(!1), [j, M] = u(null), [N, P] = u(""), [F, I] = u(""), [L, R] = u(!1), z = s(async (e, t) => i({
-		apiGatewayUrl: v,
-		authToken: y,
-		orgId: b,
+	}), T = w ?? void 0, E = o({ billingAccountIdOverride: T }), [D, O] = f([]), [k, A] = f([]), [j, M] = f(!1), [N, P] = f(null), [F, I] = f(""), [L, R] = f(""), [z, B] = f(!1), V = l(async (e, t) => a({
+		apiGatewayUrl: b,
+		authToken: x,
+		orgId: S,
 		query: e,
 		variables: t
 	}), [
-		v,
-		y,
-		b
-	]), B = s(async () => {
-		if (C) {
-			A(!0), M(null);
+		b,
+		x,
+		S
+	]), H = l(async () => {
+		if (T) {
+			M(!0), P(null);
 			try {
-				let [e, t] = await Promise.all([z(m, { scopeId: C }), z(h, { scopeId: C })]);
-				E(e.roles ?? []), O(t.actors ?? []), I((e.roles ?? []).find((e) => /viewer/i.test(e.name))?.id ?? e.roles?.[0]?.id ?? "");
+				let [e, t] = await Promise.all([V(g, { scopeId: T }), V(_, { scopeId: T })]);
+				O(e.roles ?? []), A(t.actors ?? []), R((e.roles ?? []).find((e) => /viewer/i.test(e.name))?.id ?? e.roles?.[0]?.id ?? "");
 			} catch (e) {
-				M(e instanceof Error ? e.message : "Failed to load team data");
+				P(e instanceof Error ? e.message : "Failed to load team data");
 			} finally {
-				A(!1);
+				M(!1);
 			}
 		}
-	}, [C, z]);
-	c(() => {
-		B();
-	}, [B]);
-	let V = l(() => [...D].sort((e, t) => {
+	}, [T, V]);
+	u(() => {
+		H();
+	}, [H]);
+	let U = d(() => [...k].sort((e, t) => {
 		let n = Math.max(...e.roleAssignments.map((e) => e.role?.priority ?? 0), 0);
 		return Math.max(...t.roleAssignments.map((e) => e.role?.priority ?? 0), 0) - n;
-	}), [D]), H = async (e) => {
-		if (e.preventDefault(), !C || !N.trim() || !F) return;
-		let t = N.trim();
-		if (!p.test(t)) {
-			M("User ID must be a UUID (e.g. 1a2b3c4d-...). Get it from the user profile page.");
+	}), [k]), W = c(d(() => U.map((e) => ({
+		actorId: e.actorId,
+		actorType: e.actorType
+	})), [U])), G = d(() => {
+		if (T) return C.find((e) => e.id === T)?.name ?? void 0;
+	}, [T, C]), K = async (e) => {
+		if (e.preventDefault(), !T || !F.trim() || !L) return;
+		let t = F.trim();
+		if (!h.test(t)) {
+			P("User ID must be a UUID (e.g. 1a2b3c4d-...). Get it from the user profile page.");
 			return;
 		}
-		R(!0), M(null);
+		B(!0), P(null);
 		try {
-			await z(g, { input: {
+			await V(v, { input: {
 				actorId: t,
 				actorType: "USER",
-				roleId: F,
-				scopeId: C
-			} }), P(""), await B();
+				roleId: L,
+				scopeId: T
+			} }), I(""), await H();
 		} catch (e) {
-			M(e instanceof Error ? e.message : "Failed to assign role");
+			P(e instanceof Error ? e.message : "Failed to assign role");
 		} finally {
-			R(!1);
+			B(!1);
 		}
-	}, U = async (e) => {
+	}, q = async (e) => {
 		if (confirm("Remove this role assignment?")) {
-			M(null);
+			P(null);
 			try {
-				await z(_, { assignmentId: e }), await B();
+				await V(y, { assignmentId: e }), await H();
 			} catch (e) {
-				M(e instanceof Error ? e.message : "Failed to remove role");
+				P(e instanceof Error ? e.message : "Failed to remove role");
 			}
 		}
 	};
-	return w.canManageBillingAccount ? C ? /* @__PURE__ */ f("div", {
+	return E.canManageBillingAccount ? T ? /* @__PURE__ */ m("div", {
 		className: "space-y-6",
 		children: [
-			/* @__PURE__ */ d(n, {
+			/* @__PURE__ */ p(n, {
 				title: "Team & Permissions",
 				description: "Control who can manage this billing account and what they can do."
 			}),
-			/* @__PURE__ */ f("div", {
-				className: "rounded-lg border border-border bg-card p-4 text-xs text-muted-foreground",
+			/* @__PURE__ */ m("div", {
+				className: "rounded-lg border border-border bg-card p-4 text-sm",
 				children: [
-					/* @__PURE__ */ d("span", {
+					/* @__PURE__ */ p("span", {
 						className: "font-medium text-foreground",
 						children: "Billing account:"
 					}),
 					" ",
-					/* @__PURE__ */ d("span", {
-						className: "font-mono",
-						children: C
-					})
+					/* @__PURE__ */ p("span", {
+						className: "text-foreground",
+						children: G ?? "Unnamed account"
+					}),
+					T ? /* @__PURE__ */ m("details", {
+						className: "mt-2 text-xs text-muted-foreground",
+						children: [/* @__PURE__ */ p("summary", {
+							className: "cursor-pointer",
+							children: "Account ID"
+						}), /* @__PURE__ */ p("span", {
+							className: "mt-1 inline-block font-mono",
+							children: T
+						})]
+					}) : null
 				]
 			}),
-			j && /* @__PURE__ */ d("div", {
+			N && /* @__PURE__ */ p("div", {
 				className: "rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive",
-				children: j
+				children: N
 			}),
-			/* @__PURE__ */ f("form", {
-				onSubmit: (e) => void H(e),
+			/* @__PURE__ */ m("form", {
+				onSubmit: (e) => void K(e),
 				className: "rounded-lg border border-border bg-card p-4 space-y-3",
 				children: [
-					/* @__PURE__ */ d("h3", {
+					/* @__PURE__ */ p("h3", {
 						className: "text-sm font-semibold text-foreground",
 						children: "Add member"
 					}),
-					/* @__PURE__ */ f("div", {
+					/* @__PURE__ */ m("div", {
 						className: "grid grid-cols-1 gap-3 md:grid-cols-3",
-						children: [/* @__PURE__ */ f("div", {
+						children: [/* @__PURE__ */ m("div", {
 							className: "md:col-span-2",
-							children: [/* @__PURE__ */ d("label", {
-								htmlFor: "newActorId",
-								className: "block text-xs font-medium text-muted-foreground",
-								children: "User ID (actorId)"
-							}), /* @__PURE__ */ d("input", {
-								id: "newActorId",
-								type: "text",
-								value: N,
-								onChange: (e) => P(e.target.value),
-								placeholder: "UUID of the user to grant access",
-								className: "mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm",
-								required: !0
-							})]
-						}), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+							children: [
+								/* @__PURE__ */ p("label", {
+									htmlFor: "newActorId",
+									className: "block text-xs font-medium text-muted-foreground",
+									children: "User ID"
+								}),
+								/* @__PURE__ */ p("input", {
+									id: "newActorId",
+									type: "text",
+									value: F,
+									onChange: (e) => I(e.target.value),
+									placeholder: "Paste the user ID from their profile page",
+									className: "mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm",
+									required: !0
+								}),
+								/* @__PURE__ */ p("p", {
+									className: "mt-1 text-[11px] text-muted-foreground",
+									children: "Find this on the user's profile page."
+								})
+							]
+						}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
 							htmlFor: "newRoleId",
 							className: "block text-xs font-medium text-muted-foreground",
 							children: "Role"
-						}), /* @__PURE__ */ d("select", {
+						}), /* @__PURE__ */ p("select", {
 							id: "newRoleId",
-							value: F,
-							onChange: (e) => I(e.target.value),
+							value: L,
+							onChange: (e) => R(e.target.value),
 							className: "mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm",
 							required: !0,
-							children: T.map((e) => /* @__PURE__ */ d("option", {
+							children: D.map((e) => /* @__PURE__ */ p("option", {
 								value: e.id,
 								children: e.name
 							}, e.id))
 						})] })]
 					}),
-					/* @__PURE__ */ d("button", {
+					/* @__PURE__ */ p("button", {
 						type: "submit",
-						disabled: L || !N.trim() || !F,
+						disabled: z || !F.trim() || !L,
 						className: "rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground disabled:opacity-50",
-						children: L ? "Adding…" : "Add member"
+						children: z ? "Adding…" : "Add member"
 					})
 				]
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ m("div", {
 				className: "rounded-lg border border-border bg-card",
-				children: [/* @__PURE__ */ f("div", {
+				children: [/* @__PURE__ */ m("div", {
 					className: "border-b border-border px-4 py-3",
-					children: [/* @__PURE__ */ d("h3", {
+					children: [/* @__PURE__ */ p("h3", {
 						className: "text-sm font-semibold text-foreground",
 						children: "Members"
-					}), /* @__PURE__ */ d("p", {
+					}), /* @__PURE__ */ p("p", {
 						className: "text-xs text-muted-foreground",
 						children: "Each member's role applies only to this billing account."
 					})]
-				}), k ? /* @__PURE__ */ d("div", {
+				}), j ? /* @__PURE__ */ p("div", {
 					className: "p-6 text-sm text-muted-foreground",
 					children: "Loading…"
-				}) : V.length === 0 ? /* @__PURE__ */ d("div", {
+				}) : U.length === 0 ? /* @__PURE__ */ p("div", {
 					className: "p-6 text-sm text-muted-foreground",
 					children: "No members assigned yet."
-				}) : /* @__PURE__ */ f("table", {
+				}) : /* @__PURE__ */ m("table", {
 					className: "w-full text-sm",
-					children: [/* @__PURE__ */ d("thead", { children: /* @__PURE__ */ f("tr", {
+					children: [/* @__PURE__ */ p("thead", { children: /* @__PURE__ */ m("tr", {
 						className: "border-b border-border text-left text-xs text-muted-foreground",
 						children: [
-							/* @__PURE__ */ d("th", {
+							/* @__PURE__ */ p("th", {
 								className: "px-4 py-2",
-								children: "Actor ID"
+								children: "Member"
 							}),
-							/* @__PURE__ */ d("th", {
+							/* @__PURE__ */ p("th", {
 								className: "px-4 py-2",
 								children: "Type"
 							}),
-							/* @__PURE__ */ d("th", {
+							/* @__PURE__ */ p("th", {
 								className: "px-4 py-2",
 								children: "Roles"
 							}),
-							/* @__PURE__ */ d("th", {
+							/* @__PURE__ */ p("th", {
 								className: "px-4 py-2 text-right",
 								children: "Actions"
 							})
 						]
-					}) }), /* @__PURE__ */ d("tbody", { children: V.map((e) => /* @__PURE__ */ f("tr", {
+					}) }), /* @__PURE__ */ p("tbody", { children: U.map((e) => /* @__PURE__ */ m("tr", {
 						className: "border-b border-border last:border-0",
 						children: [
-							/* @__PURE__ */ d("td", {
-								className: "px-4 py-3 font-mono text-xs",
-								children: e.actorId
+							/* @__PURE__ */ p("td", {
+								className: "px-4 py-3",
+								children: /* @__PURE__ */ p(r, {
+									profile: W[e.actorId] ?? {
+										actorId: e.actorId,
+										actorType: e.actorType,
+										displayName: e.actorType.toLowerCase() === "user" ? `User ${e.actorId.slice(0, 8)}…` : e.actorType,
+										secondaryLabel: e.actorId.slice(0, 12),
+										resolved: !1
+									},
+									variant: "cell"
+								})
 							}),
-							/* @__PURE__ */ d("td", {
-								className: "px-4 py-3 text-xs",
-								children: e.actorType
+							/* @__PURE__ */ p("td", {
+								className: "px-4 py-3 text-xs capitalize text-muted-foreground",
+								children: e.actorType.toLowerCase()
 							}),
-							/* @__PURE__ */ d("td", {
+							/* @__PURE__ */ p("td", {
 								className: "px-4 py-3",
-								children: /* @__PURE__ */ d("div", {
+								children: /* @__PURE__ */ p("div", {
 									className: "flex flex-wrap gap-1",
-									children: e.roleAssignments.filter((e) => e.isActive).map((e) => /* @__PURE__ */ f("span", {
+									children: e.roleAssignments.filter((e) => e.isActive).map((e) => /* @__PURE__ */ m("span", {
 										className: "inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2 py-0.5 text-xs",
-										children: [e.role?.name ?? e.roleId, /* @__PURE__ */ d("button", {
+										children: [e.role?.name ?? e.roleId, /* @__PURE__ */ p("button", {
 											type: "button",
-											onClick: () => void U(e.id),
+											onClick: () => void q(e.id),
 											className: "text-muted-foreground hover:text-destructive",
 											"aria-label": `Remove ${e.role?.name ?? "role"}`,
 											children: "×"
@@ -215,9 +249,9 @@ var p = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i, m = "
 									}, e.id))
 								})
 							}),
-							/* @__PURE__ */ d("td", {
+							/* @__PURE__ */ p("td", {
 								className: "px-4 py-3 text-right",
-								children: /* @__PURE__ */ f("span", {
+								children: /* @__PURE__ */ m("span", {
 									className: "text-xs text-muted-foreground",
 									children: [e.effectivePermissionCount ?? "—", " permissions"]
 								})
@@ -226,31 +260,31 @@ var p = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i, m = "
 					}, e.actorId)) })]
 				})]
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ m("div", {
 				className: "rounded-lg border border-border bg-card p-4",
 				children: [
-					/* @__PURE__ */ d("h3", {
+					/* @__PURE__ */ p("h3", {
 						className: "text-sm font-semibold text-foreground",
 						children: "Available roles"
 					}),
-					/* @__PURE__ */ d("p", {
+					/* @__PURE__ */ p("p", {
 						className: "mt-1 text-xs text-muted-foreground",
 						children: "Roles are cloned from the system templates when a billing account is created."
 					}),
-					/* @__PURE__ */ d("ul", {
+					/* @__PURE__ */ p("ul", {
 						className: "mt-3 space-y-2",
-						children: T.map((e) => /* @__PURE__ */ f("li", {
+						children: D.map((e) => /* @__PURE__ */ m("li", {
 							className: "flex items-start gap-3 rounded-md border border-border bg-background p-3",
-							children: [/* @__PURE__ */ f("div", {
+							children: [/* @__PURE__ */ m("div", {
 								className: "flex-1",
-								children: [/* @__PURE__ */ d("div", {
+								children: [/* @__PURE__ */ p("div", {
 									className: "text-sm font-medium text-foreground",
 									children: e.name
-								}), e.description && /* @__PURE__ */ d("p", {
+								}), e.description && /* @__PURE__ */ p("p", {
 									className: "mt-1 text-xs text-muted-foreground",
 									children: e.description
 								})]
-							}), /* @__PURE__ */ f("span", {
+							}), /* @__PURE__ */ m("span", {
 								className: "text-xs text-muted-foreground",
 								children: ["priority ", e.priority]
 							})]
@@ -259,18 +293,18 @@ var p = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i, m = "
 				]
 			})
 		]
-	}) : /* @__PURE__ */ f("div", {
+	}) : /* @__PURE__ */ m("div", {
 		className: "space-y-6",
-		children: [/* @__PURE__ */ d(n, {
+		children: [/* @__PURE__ */ p(n, {
 			title: "Team & Permissions",
 			description: "Select a billing account to manage who can access it."
-		}), /* @__PURE__ */ d("div", {
+		}), /* @__PURE__ */ p("div", {
 			className: "rounded-lg border border-border bg-card p-6 text-sm text-muted-foreground",
 			children: "No billing account selected. Pick one from the billing account selector to manage its members and roles."
 		})]
-	}) : /* @__PURE__ */ d(t, { message: "You don't have permission to manage team and permissions for this billing account." });
+	}) : /* @__PURE__ */ p(t, { message: "You don't have permission to manage team and permissions for this billing account." });
 };
 //#endregion
-export { v as TeamPermissionsPage };
+export { b as TeamPermissionsPage };
 
 //# sourceMappingURL=TeamPermissionsPage.js.map

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 { useBilling } from '../../../providers/BillingProvider';\nimport { AccessDenied, 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';\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\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 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    if (!confirm('Remove this role assignment?')) return;\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        <div className=\"rounded-lg border border-border bg-card p-6 text-sm text-muted-foreground\">\n          No billing account selected. Pick one from the billing account selector to manage its\n          members and roles.\n        </div>\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      <div className=\"rounded-lg border border-border bg-card p-4 text-xs text-muted-foreground\">\n        <span className=\"font-medium text-foreground\">Billing account:</span>{' '}\n        <span className=\"font-mono\">{billingAccountId}</span>\n      </div>\n\n      {error && (\n        <div className=\"rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive\">\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 bg-card p-4 space-y-3\"\n      >\n        <h3 className=\"text-sm font-semibold text-foreground\">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-muted-foreground\">\n              User ID (actorId)\n            </label>\n            <input\n              id=\"newActorId\"\n              type=\"text\"\n              value={newActorId}\n              onChange={(e) => setNewActorId(e.target.value)}\n              placeholder=\"UUID of the user to grant access\"\n              className=\"mt-1 w-full rounded-md border border-border bg-background px-3 py-2 text-sm\"\n              required\n            />\n          </div>\n          <div>\n            <label htmlFor=\"newRoleId\" className=\"block text-xs font-medium text-muted-foreground\">\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 bg-background 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-primary px-4 py-2 text-sm font-medium text-primary-foreground 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 bg-card\">\n        <div className=\"border-b border-border px-4 py-3\">\n          <h3 className=\"text-sm font-semibold text-foreground\">Members</h3>\n          <p className=\"text-xs text-muted-foreground\">\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-muted-foreground\">Loading…</div>\n        ) : sortedActors.length === 0 ? (\n          <div className=\"p-6 text-sm text-muted-foreground\">No members assigned yet.</div>\n        ) : (\n          <table className=\"w-full text-sm\">\n            <thead>\n              <tr className=\"border-b border-border text-left text-xs text-muted-foreground\">\n                <th className=\"px-4 py-2\">Actor ID</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 last:border-0\">\n                  <td className=\"px-4 py-3 font-mono text-xs\">{actor.actorId}</td>\n                  <td className=\"px-4 py-3 text-xs\">{actor.actorType}</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 bg-muted px-2 py-0.5 text-xs\"\n                          >\n                            {ra.role?.name ?? ra.roleId}\n                            <button\n                              type=\"button\"\n                              onClick={() => void handleRemoveAssignment(ra.id)}\n                              className=\"text-muted-foreground hover:text-destructive\"\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-muted-foreground\">\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 bg-card p-4\">\n        <h3 className=\"text-sm font-semibold text-foreground\">Available roles</h3>\n        <p className=\"mt-1 text-xs text-muted-foreground\">\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 bg-background p-3\"\n            >\n              <div className=\"flex-1\">\n                <div className=\"text-sm font-medium text-foreground\">{r.name}</div>\n                {r.description && (\n                  <p className=\"mt-1 text-xs text-muted-foreground\">{r.description}</p>\n                )}\n              </div>\n              <span className=\"text-xs text-muted-foreground\">priority {r.priority}</span>\n            </li>\n          ))}\n        </ul>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAuBA,IAAM,IAAU,mEA4BV,IAAc,2KAYd,IAAe,+TAmBf,IAAuB,0KAWvB,IAAuB,yHAMhB,UAAgC;CAC3C,IAAM,EAAE,kBAAe,cAAW,aAAU,GAAY,EAOlD,EAAE,uBAAoB,GAAoB,EAC1C,EAAE,yBAAsB,EAA2B;EACvD;EACA;EACA,aAAa;EACb,cAAc;EACf,CAAC,EACI,IAAmB,KAAqB,KAAA,GAQxC,IAAc,EAAsB,EAAE,0BAA0B,GAAkB,CAAC,EAEnF,CAAC,GAAO,KAAY,EAAiB,EAAE,CAAC,EACxC,CAAC,GAAQ,KAAa,EAA6B,EAAE,CAAC,EACtD,CAAC,GAAW,KAAgB,EAAS,GAAM,EAC3C,CAAC,GAAO,KAAY,EAAwB,KAAK,EAGjD,CAAC,GAAY,KAAiB,EAAS,GAAG,EAC1C,CAAC,GAAW,KAAgB,EAAS,GAAG,EACxC,CAAC,GAAU,KAAe,EAAS,GAAM,EAEzC,IAAU,EACd,OAAW,GAAe,MACjB,EAA+B;EACpC;EACA;EACA;EACA;EACA;EACD,CAAC,EAEJ;EAAC;EAAe;EAAW;EAAM,CAClC,EAEK,IAAW,EAAY,YAAY;AAClC,SAEL;GADA,EAAa,GAAK,EAClB,EAAS,KAAK;AACd,OAAI;IACF,IAAM,CAAC,GAAW,KAAc,MAAM,QAAQ,IAAI,CAChD,EAA2B,GAAa,EAAE,SAAS,GAAkB,CAAC,EACtE,EAAwC,GAAc,EACpD,SAAS,GACV,CAAC,CACH,CAAC;AAKF,IAJA,EAAS,EAAU,SAAS,EAAE,CAAC,EAC/B,EAAU,EAAW,UAAU,EAAE,CAAC,EAGlC,GADgB,EAAU,SAAS,EAAE,EAAE,MAAM,MAAM,UAAU,KAAK,EAAE,KAAK,CAAC,EACrD,MAAM,EAAU,QAAQ,IAAI,MAAM,GAAG;YACnD,GAAK;AACZ,MAAS,aAAe,QAAQ,EAAI,UAAU,2BAA2B;aACjE;AACR,MAAa,GAAM;;;IAEpB,CAAC,GAAkB,EAAQ,CAAC;AAE/B,SAAgB;AACT,KAAU;IACd,CAAC,EAAS,CAAC;CAEd,IAAM,IAAe,QAEjB,CAAC,GAAG,EAAO,CAAC,MAAM,GAAG,MAAM;EACzB,IAAM,IAAO,KAAK,IAAI,GAAG,EAAE,gBAAgB,KAAK,MAAO,EAAG,MAAM,YAAY,EAAE,EAAE,EAAE;AAElF,SADa,KAAK,IAAI,GAAG,EAAE,gBAAgB,KAAK,MAAO,EAAG,MAAM,YAAY,EAAE,EAAE,EAAE,GACpE;GACd,EACJ,CAAC,EAAO,CACT,EAEK,IAAkB,OAAO,MAAuB;AAEpD,MADA,EAAE,gBAAgB,EACd,CAAC,KAAoB,CAAC,EAAW,MAAM,IAAI,CAAC,EAAW;EAC3D,IAAM,IAAiB,EAAW,MAAM;AACxC,MAAI,CAAC,EAAQ,KAAK,EAAe,EAAE;AACjC,KAAS,iFAAiF;AAC1F;;AAGF,EADA,EAAY,GAAK,EACjB,EAAS,KAAK;AACd,MAAI;AAUF,GATA,MAAM,EAAQ,GAAsB,EAClC,OAAO;IACL,SAAS;IACT,WAAW;IACX,QAAQ;IACR,SAAS;IACV,EACF,CAAC,EACF,EAAc,GAAG,EACjB,MAAM,GAAU;WACT,GAAK;AACZ,KAAS,aAAe,QAAQ,EAAI,UAAU,wBAAwB;YAC9D;AACR,KAAY,GAAM;;IAIhB,IAAyB,OAAO,MAAyB;AACxD,cAAQ,+BAA+B,EAC5C;KAAS,KAAK;AACd,OAAI;AAEF,IADA,MAAM,EAAQ,GAAsB,EAAE,iBAAc,CAAC,EACrD,MAAM,GAAU;YACT,GAAK;AACZ,MAAS,aAAe,QAAQ,EAAI,UAAU,wBAAwB;;;;AAyB1E,QArBK,EAAY,0BAMZ,IAgBH,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,CAAA;GAEF,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,QAAD;MAAM,WAAU;gBAA8B;MAAuB,CAAA;KAAC;KACtE,kBAAC,QAAD;MAAM,WAAU;gBAAa;MAAwB,CAAA;KACjD;;GAEL,KACC,kBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA;GAIR,kBAAC,QAAD;IACE,WAAW,MAAM,KAAK,EAAgB,EAAE;IACxC,WAAU;cAFZ;KAIE,kBAAC,MAAD;MAAI,WAAU;gBAAwC;MAAe,CAAA;KACrE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,SAAD;QAAO,SAAQ;QAAa,WAAU;kBAAkD;QAEhF,CAAA,EACR,kBAAC,SAAD;QACE,IAAG;QACH,MAAK;QACL,OAAO;QACP,WAAW,MAAM,EAAc,EAAE,OAAO,MAAM;QAC9C,aAAY;QACZ,WAAU;QACV,UAAA;QACA,CAAA,CACE;UACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;OAAO,SAAQ;OAAY,WAAU;iBAAkD;OAE/E,CAAA,EACR,kBAAC,UAAD;OACE,IAAG;OACH,OAAO;OACP,WAAW,MAAM,EAAa,EAAE,OAAO,MAAM;OAC7C,WAAU;OACV,UAAA;iBAEC,EAAM,KAAK,MACV,kBAAC,UAAD;QAAmB,OAAO,EAAE;kBACzB,EAAE;QACI,EAFI,EAAE,GAEN,CACT;OACK,CAAA,CACL,EAAA,CAAA,CACF;;KACN,kBAAC,UAAD;MACE,MAAK;MACL,UAAU,KAAY,CAAC,EAAW,MAAM,IAAI,CAAC;MAC7C,WAAU;gBAET,IAAW,YAAY;MACjB,CAAA;KACJ;;GAGP,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAAwC;MAAY,CAAA,EAClE,kBAAC,KAAD;MAAG,WAAU;gBAAgC;MAEzC,CAAA,CACA;QACL,IACC,kBAAC,OAAD;KAAK,WAAU;eAAoC;KAAc,CAAA,GAC/D,EAAa,WAAW,IAC1B,kBAAC,OAAD;KAAK,WAAU;eAAoC;KAA8B,CAAA,GAEjF,kBAAC,SAAD;KAAO,WAAU;eAAjB,CACE,kBAAC,SAAD,EAAA,UACE,kBAAC,MAAD;MAAI,WAAU;gBAAd;OACE,kBAAC,MAAD;QAAI,WAAU;kBAAY;QAAa,CAAA;OACvC,kBAAC,MAAD;QAAI,WAAU;kBAAY;QAAS,CAAA;OACnC,kBAAC,MAAD;QAAI,WAAU;kBAAY;QAAU,CAAA;OACpC,kBAAC,MAAD;QAAI,WAAU;kBAAuB;QAAY,CAAA;OAC9C;SACC,CAAA,EACR,kBAAC,SAAD,EAAA,UACG,EAAa,KAAK,MACjB,kBAAC,MAAD;MAAwB,WAAU;gBAAlC;OACE,kBAAC,MAAD;QAAI,WAAU;kBAA+B,EAAM;QAAa,CAAA;OAChE,kBAAC,MAAD;QAAI,WAAU;kBAAqB,EAAM;QAAe,CAAA;OACxD,kBAAC,MAAD;QAAI,WAAU;kBACZ,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAM,gBACJ,QAAQ,MAAO,EAAG,SAAS,CAC3B,KAAK,MACJ,kBAAC,QAAD;UAEE,WAAU;oBAFZ,CAIG,EAAG,MAAM,QAAQ,EAAG,QACrB,kBAAC,UAAD;WACE,MAAK;WACL,eAAe,KAAK,EAAuB,EAAG,GAAG;WACjD,WAAU;WACV,cAAY,UAAU,EAAG,MAAM,QAAQ;qBACxC;WAEQ,CAAA,CACJ;YAZA,EAAG,GAYH,CACP;SACA,CAAA;QACH,CAAA;OACL,kBAAC,MAAD;QAAI,WAAU;kBACZ,kBAAC,QAAD;SAAM,WAAU;mBAAhB,CACG,EAAM,4BAA4B,KAAI,eAClC;;QACJ,CAAA;OACF;QA9BI,EAAM,QA8BV,CACL,EACI,CAAA,CACF;OAEN;;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,MAAD;MAAI,WAAU;gBAAwC;MAAoB,CAAA;KAC1E,kBAAC,KAAD;MAAG,WAAU;gBAAqC;MAE9C,CAAA;KACJ,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAM,KAAK,MACV,kBAAC,MAAD;OAEE,WAAU;iBAFZ,CAIE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,OAAD;SAAK,WAAU;mBAAuC,EAAE;SAAW,CAAA,EAClE,EAAE,eACD,kBAAC,KAAD;SAAG,WAAU;mBAAsC,EAAE;SAAgB,CAAA,CAEnE;WACN,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CAAgD,aAAU,EAAE,SAAgB;UACzE;SAVE,EAAE,GAUJ,CACL;MACC,CAAA;KACD;;GACF;MApKJ,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,GAAD;GACE,OAAM;GACN,aAAY;GACZ,CAAA,EACF,kBAAC,OAAD;GAAK,WAAU;aAA4E;GAGrF,CAAA,CACF;MAfN,kBAAC,GAAD,EAAc,SAAQ,sFAAuF,CAAA"}
+{"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 { 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\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    if (!confirm('Remove this role assignment?')) return;\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        <div className=\"rounded-lg border border-border bg-card p-6 text-sm text-muted-foreground\">\n          No billing account selected. Pick one from the billing account selector to manage its\n          members and roles.\n        </div>\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      <div className=\"rounded-lg border border-border bg-card p-4 text-sm\">\n        <span className=\"font-medium text-foreground\">Billing account:</span>{' '}\n        <span className=\"text-foreground\">{billingAccountName ?? 'Unnamed account'}</span>\n        {billingAccountId ? (\n          <details className=\"mt-2 text-xs text-muted-foreground\">\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-destructive/30 bg-destructive/5 p-4 text-sm text-destructive\">\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 bg-card p-4 space-y-3\"\n      >\n        <h3 className=\"text-sm font-semibold text-foreground\">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-muted-foreground\">\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 bg-background px-3 py-2 text-sm\"\n              required\n            />\n            <p className=\"mt-1 text-[11px] text-muted-foreground\">\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-muted-foreground\">\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 bg-background 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-primary px-4 py-2 text-sm font-medium text-primary-foreground 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 bg-card\">\n        <div className=\"border-b border-border px-4 py-3\">\n          <h3 className=\"text-sm font-semibold text-foreground\">Members</h3>\n          <p className=\"text-xs text-muted-foreground\">\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-muted-foreground\">Loading…</div>\n        ) : sortedActors.length === 0 ? (\n          <div className=\"p-6 text-sm text-muted-foreground\">No members assigned yet.</div>\n        ) : (\n          <table className=\"w-full text-sm\">\n            <thead>\n              <tr className=\"border-b border-border text-left text-xs text-muted-foreground\">\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 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-muted-foreground\">\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 bg-muted px-2 py-0.5 text-xs\"\n                          >\n                            {ra.role?.name ?? ra.roleId}\n                            <button\n                              type=\"button\"\n                              onClick={() => void handleRemoveAssignment(ra.id)}\n                              className=\"text-muted-foreground hover:text-destructive\"\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-muted-foreground\">\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 bg-card p-4\">\n        <h3 className=\"text-sm font-semibold text-foreground\">Available roles</h3>\n        <p className=\"mt-1 text-xs text-muted-foreground\">\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 bg-background p-3\"\n            >\n              <div className=\"flex-1\">\n                <div className=\"text-sm font-medium text-foreground\">{r.name}</div>\n                {r.description && (\n                  <p className=\"mt-1 text-xs text-muted-foreground\">{r.description}</p>\n                )}\n              </div>\n              <span className=\"text-xs text-muted-foreground\">priority {r.priority}</span>\n            </li>\n          ))}\n        </ul>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/billing/modules/subscriptions/components/ManageSeatsModal.js

@@ -49,12 +49,13 @@ var d = ({ subscription: d, onClose: f, onConfirm: p, isLoading: m = !1 }) => {
 					className: "flex items-center justify-between p-6 border-b border-border",
 					children: [/* @__PURE__ */ l("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ c(s, { className: "w-5 h-5 text-primary" }), /* @__PURE__ */ c("h2", {
+						children: [/* @__PURE__ */ c(s, { className: "size-5 text-primary" }), /* @__PURE__ */ c("h2", {
 							id: "manage-seats-title",
 							className: "text-lg font-semibold text-foreground",
 							children: g("billing.subscriptions.manageSeats", "Manage Seats")
 						})]
 					}), /* @__PURE__ */ c("button", {
+						type: "button",
 						onClick: f,
 						className: "text-muted-foreground hover:text-foreground transition-colors",
 						"aria-label": "Close manage seats dialog",
@@ -80,11 +81,12 @@ var d = ({ subscription: d, onClose: f, onConfirm: p, isLoading: m = !1 }) => {
 								className: "flex items-center gap-3",
 								children: [
 									/* @__PURE__ */ c("button", {
+										type: "button",
 										onClick: j,
 										disabled: C <= v || m,
-										className: "w-9 h-9 rounded-md border border-border flex items-center justify-center hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
+										className: "size-9 rounded-md border border-border flex items-center justify-center hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
 										"aria-label": "Decrease seat count",
-										children: /* @__PURE__ */ c(a, { className: "w-4 h-4" })
+										children: /* @__PURE__ */ c(a, { className: "size-4" })
 									}),
 									/* @__PURE__ */ c("input", {
 										type: "number",
@@ -96,11 +98,12 @@ var d = ({ subscription: d, onClose: f, onConfirm: p, isLoading: m = !1 }) => {
 										className: "w-20 h-9 text-center border border-border rounded-md bg-background text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary disabled:opacity-50"
 									}),
 									/* @__PURE__ */ c("button", {
+										type: "button",
 										onClick: M,
 										disabled: C >= y || m,
-										className: "w-9 h-9 rounded-md border border-border flex items-center justify-center hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
+										className: "size-9 rounded-md border border-border flex items-center justify-center hover:bg-accent disabled:opacity-40 disabled:cursor-not-allowed transition-colors",
 										"aria-label": "Increase seat count",
-										children: /* @__PURE__ */ c(o, { className: "w-4 h-4" })
+										children: /* @__PURE__ */ c(o, { className: "size-4" })
 									}),
 									/* @__PURE__ */ c("span", {
 										className: "text-sm text-muted-foreground",
@@ -135,26 +138,28 @@ var d = ({ subscription: d, onClose: f, onConfirm: p, isLoading: m = !1 }) => {
 						}),
 						A && D > 0 && /* @__PURE__ */ l("div", {
 							className: "flex gap-2 p-3 rounded-md bg-status-warning-bg-subtle border border-status-warning-border text-sm text-status-warning-text",
-							children: [/* @__PURE__ */ c(r, { className: "w-4 h-4 mt-0.5 shrink-0" }), /* @__PURE__ */ c("span", { children: "Seat additions apply from the next billing cycle. A separate prorated charge will be raised for the remaining days in the current cycle." })]
+							children: [/* @__PURE__ */ c(r, { className: "size-4 mt-0.5 shrink-0" }), /* @__PURE__ */ c("span", { children: "Seat additions apply from the next billing cycle. A separate prorated charge will be raised for the remaining days in the current cycle." })]
 						}),
 						T && /* @__PURE__ */ l("div", {
 							className: "flex gap-2 p-3 rounded-md bg-destructive/10 border border-destructive/30 text-sm text-destructive",
-							children: [/* @__PURE__ */ c(r, { className: "w-4 h-4 mt-0.5 shrink-0" }), /* @__PURE__ */ c("span", { children: T })]
+							children: [/* @__PURE__ */ c(r, { className: "size-4 mt-0.5 shrink-0" }), /* @__PURE__ */ c("span", { children: T })]
 						})
 					]
 				}),
 				/* @__PURE__ */ l("div", {
 					className: "flex items-center justify-end gap-3 p-6 border-t border-border",
 					children: [/* @__PURE__ */ c("button", {
+						type: "button",
 						onClick: f,
 						disabled: m,
 						className: "px-4 py-2 text-sm rounded-md border border-border hover:bg-accent text-foreground transition-colors disabled:opacity-50",
 						children: "Cancel"
 					}), /* @__PURE__ */ l("button", {
+						type: "button",
 						onClick: P,
 						disabled: m || C === S || C < v || C > y,
 						className: "px-4 py-2 text-sm rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2",
-						children: [m && /* @__PURE__ */ c(i, { className: "w-4 h-4 animate-spin" }), C === S ? "No change" : D > 0 ? `Add ${D} seat${D === 1 ? "" : "s"}` : `Remove ${Math.abs(D)} seat${Math.abs(D) === 1 ? "" : "s"}`]
+						children: [m && /* @__PURE__ */ c(i, { className: "size-4 animate-spin" }), C === S ? "No change" : D > 0 ? `Add ${D} seat${D === 1 ? "" : "s"}` : `Remove ${Math.abs(D)} seat${Math.abs(D) === 1 ? "" : "s"}`]
 					})]
 				})
 			]