@burdenoff/microfe-organization 2026.510.110

package/dist/organization-management/modules/workspaces/components/WorkspaceForm.js

@@ -0,0 +1,386 @@
+import { useOrganizations as e } from "../../organizations/hooks/useOrganizations.js";
+import { useTr as t } from "../../../shared/hooks/useTr.js";
+import { useTenants as n } from "../hooks/useWorkspaces.js";
+import { ZodError as r } from "../../../../node_modules/zod/v3/ZodError.js";
+import { createWorkspaceSchema as i, updateWorkspaceSchema as a } from "../schemas/index.js";
+import { useEffect as o, useMemo as s, useState as c } from "react";
+import { Building as l, Home as u, Loader2 as d } from "lucide-react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/organization-management/modules/workspaces/components/WorkspaceForm.tsx
+function h({ workspace: h, tenantId: g, tenantName: _, organizationId: v, organizationName: y, showOrganizationSelector: b = !1, onSubmit: x, onCancel: S, loading: C }) {
+	let w = t(), [T, E] = c({
+		name: h?.name || "",
+		slug: h?.slug || "",
+		type: h?.type || "PERSONAL",
+		tenantId: g || h?.tenantId || "",
+		organizationId: v || h?.organizationId || ""
+	}), [D, O] = c({}), k = !h && b && !g, A = !h && b && !v, { tenants: j, loading: M } = n(100, 0, k), { organizations: N, loading: P } = e(T.tenantId ? { tenantId: T.tenantId } : void 0, 100, 0, A);
+	o(() => {
+		g && g !== T.tenantId && E((e) => ({
+			...e,
+			tenantId: g
+		}));
+	}, [T.tenantId, g]), o(() => {
+		v && v !== T.organizationId && E((e) => ({
+			...e,
+			organizationId: v
+		}));
+	}, [T.organizationId, v]), o(() => {
+		!b || v || h || E((e) => !e.organizationId || N.some((t) => t.id === e.organizationId) ? e : {
+			...e,
+			organizationId: ""
+		});
+	}, [
+		v,
+		N,
+		b,
+		h
+	]);
+	let F = s(() => _ || (j.find((e) => e.id === T.tenantId)?.name ?? T.tenantId), [
+		T.tenantId,
+		_,
+		j
+	]), I = s(() => y || (N.find((e) => e.id === T.organizationId)?.name ?? T.organizationId), [
+		T.organizationId,
+		y,
+		N
+	]), L = () => {
+		try {
+			return (h ? a : i).parse(T), O({}), !0;
+		} catch (e) {
+			if (e instanceof r) {
+				let t = {};
+				e.issues.forEach((e) => {
+					let n = e.path.join(".");
+					t[n] = e.message;
+				}), O(t);
+			}
+			return !1;
+		}
+	};
+	return /* @__PURE__ */ m("form", {
+		onSubmit: async (e) => {
+			e.preventDefault(), L() && await x(h ? {
+				name: T.name === h.name ? void 0 : T.name,
+				type: T.type === h.type ? void 0 : T.type
+			} : {
+				tenantId: T.tenantId,
+				organizationId: T.organizationId,
+				name: T.name,
+				slug: T.slug,
+				type: T.type || void 0
+			});
+		},
+		className: "space-y-6",
+		children: [
+			h ? null : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ m("div", { children: [
+				/* @__PURE__ */ m("label", {
+					htmlFor: "tenantId",
+					className: "mb-1 block text-sm font-medium text-[var(--color-text-primary)]",
+					children: [
+						w("organizations.form.tenant", "Tenant"),
+						" ",
+						/* @__PURE__ */ p("span", {
+							className: "text-[var(--color-status-error-text)]",
+							children: "*"
+						})
+					]
+				}),
+				b && !g ? /* @__PURE__ */ m("div", {
+					className: "relative",
+					children: [
+						/* @__PURE__ */ m("select", {
+							id: "tenantId",
+							value: T.tenantId,
+							onChange: (e) => E((t) => ({
+								...t,
+								tenantId: e.target.value,
+								organizationId: ""
+							})),
+							className: "w-full appearance-none rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] py-2 pl-10 pr-10 text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:bg-[var(--color-bg-muted)]",
+							disabled: C || M,
+							required: !0,
+							children: [/* @__PURE__ */ p("option", {
+								value: "",
+								children: w("workspaces.form.selectTenant", "Select a tenant...")
+							}), j.map((e) => /* @__PURE__ */ m("option", {
+								value: e.id,
+								children: [
+									e.name,
+									" (",
+									e.slug,
+									")"
+								]
+							}, e.id))]
+						}),
+						/* @__PURE__ */ p(u, {
+							size: 18,
+							className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]"
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]",
+							children: /* @__PURE__ */ p("svg", {
+								className: "h-4 w-4",
+								fill: "none",
+								viewBox: "0 0 24 24",
+								stroke: "currentColor",
+								children: /* @__PURE__ */ p("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									strokeWidth: 2,
+									d: "M19 9l-7 7-7-7"
+								})
+							})
+						}),
+						M ? /* @__PURE__ */ p("div", {
+							className: "absolute right-10 top-1/2 -translate-y-1/2",
+							children: /* @__PURE__ */ p(d, {
+								size: 16,
+								className: "animate-spin text-[var(--color-text-muted)]"
+							})
+						}) : null
+					]
+				}) : /* @__PURE__ */ m("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ p("input", {
+						id: "tenantId",
+						type: "text",
+						value: F,
+						onChange: (e) => E((t) => ({
+							...t,
+							tenantId: e.target.value
+						})),
+						className: "w-full rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] py-2 pl-10 pr-4 text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:bg-[var(--color-bg-muted)]",
+						placeholder: w("organizations.form.tenantPlaceholder", "Enter tenant ID"),
+						disabled: C || !!g,
+						required: !0,
+						autoComplete: "off"
+					}), /* @__PURE__ */ p(u, {
+						size: 18,
+						className: "absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]"
+					})]
+				}),
+				(g || T.tenantId) && /* @__PURE__ */ p("p", {
+					className: "mt-1 text-xs text-[var(--color-text-muted)]",
+					children: w("workspaces.form.creatingUnderTenant", "Creating workspace under the selected tenant.")
+				}),
+				D.tenantId ? /* @__PURE__ */ p("p", {
+					className: "mt-1 text-sm text-[var(--color-status-error-text)]",
+					children: D.tenantId
+				}) : null
+			] }), /* @__PURE__ */ m("div", { children: [
+				/* @__PURE__ */ m("label", {
+					htmlFor: "organizationId",
+					className: "mb-1 block text-sm font-medium text-[var(--color-text-primary)]",
+					children: [
+						w("common.organization", "Organization"),
+						" ",
+						/* @__PURE__ */ p("span", {
+							className: "text-[var(--color-status-error-text)]",
+							children: "*"
+						})
+					]
+				}),
+				b && !v ? /* @__PURE__ */ m("div", {
+					className: "relative",
+					children: [
+						/* @__PURE__ */ m("select", {
+							id: "organizationId",
+							value: T.organizationId,
+							onChange: (e) => E((t) => ({
+								...t,
+								organizationId: e.target.value
+							})),
+							className: "w-full appearance-none rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] py-2 pl-10 pr-10 text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:bg-[var(--color-bg-muted)]",
+							disabled: C || P || !T.tenantId,
+							required: !0,
+							children: [/* @__PURE__ */ p("option", {
+								value: "",
+								children: T.tenantId ? w("workspaces.form.selectOrganization", "Select an organization...") : w("workspaces.form.selectTenantFirst", "Select a tenant first")
+							}), N.map((e) => /* @__PURE__ */ m("option", {
+								value: e.id,
+								children: [
+									e.name,
+									" (",
+									e.slug,
+									")"
+								]
+							}, e.id))]
+						}),
+						/* @__PURE__ */ p(l, {
+							size: 18,
+							className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]"
+						}),
+						/* @__PURE__ */ p("div", {
+							className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]",
+							children: /* @__PURE__ */ p("svg", {
+								className: "h-4 w-4",
+								fill: "none",
+								viewBox: "0 0 24 24",
+								stroke: "currentColor",
+								children: /* @__PURE__ */ p("path", {
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									strokeWidth: 2,
+									d: "M19 9l-7 7-7-7"
+								})
+							})
+						}),
+						P ? /* @__PURE__ */ p("div", {
+							className: "absolute right-10 top-1/2 -translate-y-1/2",
+							children: /* @__PURE__ */ p(d, {
+								size: 16,
+								className: "animate-spin text-[var(--color-text-muted)]"
+							})
+						}) : null
+					]
+				}) : /* @__PURE__ */ m("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ p("input", {
+						id: "organizationId",
+						type: "text",
+						value: I,
+						onChange: (e) => E((t) => ({
+							...t,
+							organizationId: e.target.value
+						})),
+						className: "w-full rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] py-2 pl-10 pr-4 text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:bg-[var(--color-bg-muted)]",
+						placeholder: w("workspaces.form.orgIdPlaceholder", "Enter organization ID"),
+						disabled: C || !!v,
+						required: !0,
+						autoComplete: "off"
+					}), /* @__PURE__ */ p(l, {
+						size: 18,
+						className: "absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]"
+					})]
+				}),
+				(v || T.organizationId) && /* @__PURE__ */ p("p", {
+					className: "mt-1 text-xs text-[var(--color-text-muted)]",
+					children: w("workspaces.form.creatingUnderOrg", "Creating workspace under the selected organization.")
+				}),
+				D.organizationId ? /* @__PURE__ */ p("p", {
+					className: "mt-1 text-sm text-[var(--color-status-error-text)]",
+					children: D.organizationId
+				}) : null
+			] })] }),
+			/* @__PURE__ */ m("div", { children: [
+				/* @__PURE__ */ m("label", {
+					htmlFor: "name",
+					className: "mb-1 block text-sm font-medium text-[var(--color-text-primary)]",
+					children: [
+						w("workspaces.form.name", "Workspace Name"),
+						" ",
+						/* @__PURE__ */ p("span", {
+							className: "text-[var(--color-status-error-text)]",
+							children: "*"
+						})
+					]
+				}),
+				/* @__PURE__ */ p("input", {
+					id: "name",
+					type: "text",
+					value: T.name,
+					onChange: (e) => E((t) => ({
+						...t,
+						name: e.target.value
+					})),
+					className: "w-full rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] px-3 py-2 text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:bg-[var(--color-bg-muted)]",
+					placeholder: w("workspaces.form.namePlaceholder", "Enter workspace name"),
+					disabled: C,
+					required: !0,
+					autoComplete: "organization-title"
+				}),
+				D.name ? /* @__PURE__ */ p("p", {
+					className: "mt-1 text-sm text-[var(--color-status-error-text)]",
+					children: D.name
+				}) : null
+			] }),
+			/* @__PURE__ */ m("div", { children: [
+				/* @__PURE__ */ m("label", {
+					htmlFor: "slug",
+					className: "mb-1 block text-sm font-medium text-[var(--color-text-primary)]",
+					children: [
+						w("common.slug", "Slug"),
+						" ",
+						/* @__PURE__ */ p("span", {
+							className: "text-[var(--color-status-error-text)]",
+							children: "*"
+						})
+					]
+				}),
+				/* @__PURE__ */ p("input", {
+					id: "slug",
+					type: "text",
+					value: T.slug,
+					onChange: (e) => E((t) => ({
+						...t,
+						slug: e.target.value.toLowerCase().replace(/\s+/g, "-")
+					})),
+					className: "w-full rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] px-3 py-2 text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:bg-[var(--color-bg-muted)]",
+					placeholder: w("workspaces.form.slugPlaceholder", "workspace-slug"),
+					disabled: C || !!h,
+					required: !h,
+					autoComplete: "off"
+				}),
+				/* @__PURE__ */ p("p", {
+					className: "mt-1 text-xs text-[var(--color-text-muted)]",
+					children: w("organizations.form.slugImmutable", "Lowercase letters, numbers, and hyphens only. Cannot be changed after creation.")
+				}),
+				D.slug ? /* @__PURE__ */ p("p", {
+					className: "mt-1 text-sm text-[var(--color-status-error-text)]",
+					children: D.slug
+				}) : null
+			] }),
+			/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
+				htmlFor: "type",
+				className: "mb-1 block text-sm font-medium text-[var(--color-text-primary)]",
+				children: w("workspaces.list.column.type", "Type")
+			}), /* @__PURE__ */ m("select", {
+				id: "type",
+				value: T.type,
+				onChange: (e) => E((t) => ({
+					...t,
+					type: e.target.value
+				})),
+				className: "w-full rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] px-3 py-2 text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:bg-[var(--color-bg-muted)]",
+				disabled: C,
+				children: [
+					/* @__PURE__ */ p("option", {
+						value: "PERSONAL",
+						children: w("workspaces.type.personal", "Personal")
+					}),
+					/* @__PURE__ */ p("option", {
+						value: "TEAM",
+						children: w("workspaces.type.team", "Team")
+					}),
+					/* @__PURE__ */ p("option", {
+						value: "ENTERPRISE",
+						children: w("workspaces.type.enterprise", "Enterprise")
+					})
+				]
+			})] }),
+			/* @__PURE__ */ m("div", {
+				className: "flex flex-col gap-3 border-t border-[var(--color-border-default)] pt-4 sm:flex-row",
+				children: [/* @__PURE__ */ m("button", {
+					type: "submit",
+					disabled: C,
+					className: "inline-flex items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-6 py-2.5 font-medium text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90 hover:scale-[1.02] active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 sm:min-w-[220px]",
+					children: [C ? /* @__PURE__ */ p(d, {
+						size: 16,
+						className: "animate-spin"
+					}) : null, h ? w("workspaces.form.updateSubmit", "Update Workspace") : w("workspaces.create.button", "Create Workspace")]
+				}), /* @__PURE__ */ p("button", {
+					type: "button",
+					onClick: S,
+					disabled: C,
+					className: "rounded-lg border border-[var(--color-border-default)] bg-transparent px-6 py-2.5 font-medium text-[var(--color-text-primary)] transition-all duration-200 hover:bg-[var(--color-bg-subtle)] active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 sm:min-w-[140px]",
+					children: w("common.cancel", "Cancel")
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { h as WorkspaceForm };
+
+//# sourceMappingURL=WorkspaceForm.js.map

package/dist/organization-management/modules/workspaces/components/WorkspaceForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspaceForm.js","names":[],"sources":["../../../../../src/organization-management/modules/workspaces/components/WorkspaceForm.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { Building, Home, Loader2 } from 'lucide-react';\nimport { ZodError } from 'zod';\nimport type { CreateWorkspaceInput, UpdateWorkspaceInput, Workspace } from '../types';\nimport { createWorkspaceSchema, updateWorkspaceSchema } from '../schemas';\nimport { useOrganizations } from '../../organizations/hooks/useOrganizations';\nimport { useTenants } from '../hooks/useWorkspaces';\nimport { useTr } from '../../../shared/hooks/useTr';\n\ninterface WorkspaceFormProps {\n  workspace?: Workspace | null;\n  tenantId?: string;\n  tenantName?: string;\n  organizationId?: string;\n  organizationName?: string;\n  showOrganizationSelector?: boolean;\n  onSubmit: (data: CreateWorkspaceInput | UpdateWorkspaceInput) => Promise<void>;\n  onCancel: () => void;\n  loading?: boolean;\n}\n\nexport function WorkspaceForm({\n  workspace,\n  tenantId,\n  tenantName,\n  organizationId,\n  organizationName,\n  showOrganizationSelector = false,\n  onSubmit,\n  onCancel,\n  loading,\n}: WorkspaceFormProps) {\n  const tr = useTr();\n  const [formData, setFormData] = useState({\n    name: workspace?.name || '',\n    slug: workspace?.slug || '',\n    type: workspace?.type || 'PERSONAL',\n    tenantId: tenantId || workspace?.tenantId || '',\n    organizationId: organizationId || workspace?.organizationId || '',\n  });\n\n  const [errors, setErrors] = useState<Record<string, string>>({});\n\n  const shouldLoadTenants = !workspace && showOrganizationSelector && !tenantId;\n  const shouldLoadOrganizations = !workspace && showOrganizationSelector && !organizationId;\n\n  const { tenants, loading: tenantsLoading } = useTenants(100, 0, shouldLoadTenants);\n  const { organizations, loading: organizationsLoading } = useOrganizations(\n    formData.tenantId ? { tenantId: formData.tenantId } : undefined,\n    100,\n    0,\n    shouldLoadOrganizations\n  );\n\n  useEffect(() => {\n    if (tenantId && tenantId !== formData.tenantId) {\n      setFormData((previousState) => ({ ...previousState, tenantId }));\n    }\n  }, [formData.tenantId, tenantId]);\n\n  useEffect(() => {\n    if (organizationId && organizationId !== formData.organizationId) {\n      setFormData((previousState) => ({ ...previousState, organizationId }));\n    }\n  }, [formData.organizationId, organizationId]);\n\n  useEffect(() => {\n    if (!showOrganizationSelector || organizationId || workspace) {\n      return;\n    }\n\n    setFormData((previousState) => {\n      if (!previousState.organizationId) {\n        return previousState;\n      }\n\n      const hasMatchingOrganization = organizations.some(\n        (organization) => organization.id === previousState.organizationId\n      );\n\n      if (hasMatchingOrganization) {\n        return previousState;\n      }\n\n      return { ...previousState, organizationId: '' };\n    });\n  }, [organizationId, organizations, showOrganizationSelector, workspace]);\n\n  const selectedTenantLabel = useMemo(() => {\n    if (tenantName) return tenantName;\n\n    const selectedTenant = tenants.find((tenant) => tenant.id === formData.tenantId);\n    return selectedTenant?.name ?? formData.tenantId;\n  }, [formData.tenantId, tenantName, tenants]);\n\n  const selectedOrganizationLabel = useMemo(() => {\n    if (organizationName) return organizationName;\n\n    const selectedOrganization = organizations.find(\n      (organization) => organization.id === formData.organizationId\n    );\n    return selectedOrganization?.name ?? formData.organizationId;\n  }, [formData.organizationId, organizationName, organizations]);\n\n  const validate = () => {\n    try {\n      const schema = workspace ? updateWorkspaceSchema : createWorkspaceSchema;\n      schema.parse(formData);\n      setErrors({});\n      return true;\n    } catch (validationError) {\n      if (validationError instanceof ZodError) {\n        const nextErrors: Record<string, string> = {};\n        validationError.issues.forEach((issue) => {\n          const path = issue.path.join('.');\n          nextErrors[path] = issue.message;\n        });\n        setErrors(nextErrors);\n      }\n\n      return false;\n    }\n  };\n\n  const handleSubmit = async (event: React.FormEvent) => {\n    event.preventDefault();\n\n    if (!validate()) {\n      return;\n    }\n\n    const submitData = workspace\n      ? {\n          name: formData.name !== workspace.name ? formData.name : undefined,\n          type: formData.type !== workspace.type ? formData.type : undefined,\n        }\n      : {\n          tenantId: formData.tenantId,\n          organizationId: formData.organizationId,\n          name: formData.name,\n          slug: formData.slug,\n          type: formData.type || undefined,\n        };\n\n    await onSubmit(submitData);\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"space-y-6\">\n      {!workspace ? (\n        <>\n          <div>\n            <label\n              htmlFor=\"tenantId\"\n              className=\"mb-1 block text-sm font-medium text-[var(--color-text-primary)]\"\n            >\n              {tr('organizations.form.tenant', 'Tenant')}{' '}\n              <span className=\"text-[var(--color-status-error-text)]\">*</span>\n            </label>\n\n            {showOrganizationSelector && !tenantId ? (\n              <div className=\"relative\">\n                <select\n                  id=\"tenantId\"\n                  value={formData.tenantId}\n                  onChange={(event) =>\n                    setFormData((previousState) => ({\n                      ...previousState,\n                      tenantId: event.target.value,\n                      organizationId: '',\n                    }))\n                  }\n                  className=\"w-full appearance-none rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] py-2 pl-10 pr-10 text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:bg-[var(--color-bg-muted)]\"\n                  disabled={loading || tenantsLoading}\n                  required\n                >\n                  <option value=\"\">\n                    {tr('workspaces.form.selectTenant', 'Select a tenant...')}\n                  </option>\n                  {tenants.map((tenant) => (\n                    <option key={tenant.id} value={tenant.id}>\n                      {tenant.name} ({tenant.slug})\n                    </option>\n                  ))}\n                </select>\n                <Home\n                  size={18}\n                  className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]\"\n                />\n                <div className=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]\">\n                  <svg className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M19 9l-7 7-7-7\"\n                    />\n                  </svg>\n                </div>\n                {tenantsLoading ? (\n                  <div className=\"absolute right-10 top-1/2 -translate-y-1/2\">\n                    <Loader2 size={16} className=\"animate-spin text-[var(--color-text-muted)]\" />\n                  </div>\n                ) : null}\n              </div>\n            ) : (\n              <div className=\"relative\">\n                <input\n                  id=\"tenantId\"\n                  type=\"text\"\n                  value={selectedTenantLabel}\n                  onChange={(event) =>\n                    setFormData((previousState) => ({\n                      ...previousState,\n                      tenantId: event.target.value,\n                    }))\n                  }\n                  className=\"w-full rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] py-2 pl-10 pr-4 text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:bg-[var(--color-bg-muted)]\"\n                  placeholder={tr('organizations.form.tenantPlaceholder', 'Enter tenant ID')}\n                  disabled={loading || Boolean(tenantId)}\n                  required\n                  autoComplete=\"off\"\n                />\n                <Home\n                  size={18}\n                  className=\"absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]\"\n                />\n              </div>\n            )}\n\n            {(tenantId || formData.tenantId) && (\n              <p className=\"mt-1 text-xs text-[var(--color-text-muted)]\">\n                {tr(\n                  'workspaces.form.creatingUnderTenant',\n                  'Creating workspace under the selected tenant.'\n                )}\n              </p>\n            )}\n            {errors.tenantId ? (\n              <p className=\"mt-1 text-sm text-[var(--color-status-error-text)]\">\n                {errors.tenantId}\n              </p>\n            ) : null}\n          </div>\n\n          <div>\n            <label\n              htmlFor=\"organizationId\"\n              className=\"mb-1 block text-sm font-medium text-[var(--color-text-primary)]\"\n            >\n              {tr('common.organization', 'Organization')}{' '}\n              <span className=\"text-[var(--color-status-error-text)]\">*</span>\n            </label>\n\n            {showOrganizationSelector && !organizationId ? (\n              <div className=\"relative\">\n                <select\n                  id=\"organizationId\"\n                  value={formData.organizationId}\n                  onChange={(event) =>\n                    setFormData((previousState) => ({\n                      ...previousState,\n                      organizationId: event.target.value,\n                    }))\n                  }\n                  className=\"w-full appearance-none rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] py-2 pl-10 pr-10 text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:bg-[var(--color-bg-muted)]\"\n                  disabled={loading || organizationsLoading || !formData.tenantId}\n                  required\n                >\n                  <option value=\"\">\n                    {formData.tenantId\n                      ? tr('workspaces.form.selectOrganization', 'Select an organization...')\n                      : tr('workspaces.form.selectTenantFirst', 'Select a tenant first')}\n                  </option>\n                  {organizations.map((organization) => (\n                    <option key={organization.id} value={organization.id}>\n                      {organization.name} ({organization.slug})\n                    </option>\n                  ))}\n                </select>\n                <Building\n                  size={18}\n                  className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]\"\n                />\n                <div className=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]\">\n                  <svg className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M19 9l-7 7-7-7\"\n                    />\n                  </svg>\n                </div>\n                {organizationsLoading ? (\n                  <div className=\"absolute right-10 top-1/2 -translate-y-1/2\">\n                    <Loader2 size={16} className=\"animate-spin text-[var(--color-text-muted)]\" />\n                  </div>\n                ) : null}\n              </div>\n            ) : (\n              <div className=\"relative\">\n                <input\n                  id=\"organizationId\"\n                  type=\"text\"\n                  value={selectedOrganizationLabel}\n                  onChange={(event) =>\n                    setFormData((previousState) => ({\n                      ...previousState,\n                      organizationId: event.target.value,\n                    }))\n                  }\n                  className=\"w-full rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] py-2 pl-10 pr-4 text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:bg-[var(--color-bg-muted)]\"\n                  placeholder={tr('workspaces.form.orgIdPlaceholder', 'Enter organization ID')}\n                  disabled={loading || Boolean(organizationId)}\n                  required\n                  autoComplete=\"off\"\n                />\n                <Building\n                  size={18}\n                  className=\"absolute left-3 top-1/2 -translate-y-1/2 text-[var(--color-text-muted)]\"\n                />\n              </div>\n            )}\n\n            {(organizationId || formData.organizationId) && (\n              <p className=\"mt-1 text-xs text-[var(--color-text-muted)]\">\n                {tr(\n                  'workspaces.form.creatingUnderOrg',\n                  'Creating workspace under the selected organization.'\n                )}\n              </p>\n            )}\n            {errors.organizationId ? (\n              <p className=\"mt-1 text-sm text-[var(--color-status-error-text)]\">\n                {errors.organizationId}\n              </p>\n            ) : null}\n          </div>\n        </>\n      ) : null}\n\n      <div>\n        <label\n          htmlFor=\"name\"\n          className=\"mb-1 block text-sm font-medium text-[var(--color-text-primary)]\"\n        >\n          {tr('workspaces.form.name', 'Workspace Name')}{' '}\n          <span className=\"text-[var(--color-status-error-text)]\">*</span>\n        </label>\n        <input\n          id=\"name\"\n          type=\"text\"\n          value={formData.name}\n          onChange={(event) =>\n            setFormData((previousState) => ({ ...previousState, name: event.target.value }))\n          }\n          className=\"w-full rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] px-3 py-2 text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:bg-[var(--color-bg-muted)]\"\n          placeholder={tr('workspaces.form.namePlaceholder', 'Enter workspace name')}\n          disabled={loading}\n          required\n          autoComplete=\"organization-title\"\n        />\n        {errors.name ? (\n          <p className=\"mt-1 text-sm text-[var(--color-status-error-text)]\">{errors.name}</p>\n        ) : null}\n      </div>\n\n      <div>\n        <label\n          htmlFor=\"slug\"\n          className=\"mb-1 block text-sm font-medium text-[var(--color-text-primary)]\"\n        >\n          {tr('common.slug', 'Slug')}{' '}\n          <span className=\"text-[var(--color-status-error-text)]\">*</span>\n        </label>\n        <input\n          id=\"slug\"\n          type=\"text\"\n          value={formData.slug}\n          onChange={(event) =>\n            setFormData((previousState) => ({\n              ...previousState,\n              slug: event.target.value.toLowerCase().replace(/\\s+/g, '-'),\n            }))\n          }\n          className=\"w-full rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] px-3 py-2 text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:bg-[var(--color-bg-muted)]\"\n          placeholder={tr('workspaces.form.slugPlaceholder', 'workspace-slug')}\n          disabled={loading || Boolean(workspace)}\n          required={!workspace}\n          autoComplete=\"off\"\n        />\n        <p className=\"mt-1 text-xs text-[var(--color-text-muted)]\">\n          {tr(\n            'organizations.form.slugImmutable',\n            'Lowercase letters, numbers, and hyphens only. Cannot be changed after creation.'\n          )}\n        </p>\n        {errors.slug ? (\n          <p className=\"mt-1 text-sm text-[var(--color-status-error-text)]\">{errors.slug}</p>\n        ) : null}\n      </div>\n\n      <div>\n        <label\n          htmlFor=\"type\"\n          className=\"mb-1 block text-sm font-medium text-[var(--color-text-primary)]\"\n        >\n          {tr('workspaces.list.column.type', 'Type')}\n        </label>\n        <select\n          id=\"type\"\n          value={formData.type}\n          onChange={(event) =>\n            setFormData((previousState) => ({ ...previousState, type: event.target.value }))\n          }\n          className=\"w-full rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] px-3 py-2 text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-border-focus)] disabled:cursor-not-allowed disabled:bg-[var(--color-bg-muted)]\"\n          disabled={loading}\n        >\n          <option value=\"PERSONAL\">{tr('workspaces.type.personal', 'Personal')}</option>\n          <option value=\"TEAM\">{tr('workspaces.type.team', 'Team')}</option>\n          <option value=\"ENTERPRISE\">{tr('workspaces.type.enterprise', 'Enterprise')}</option>\n        </select>\n      </div>\n\n      <div className=\"flex flex-col gap-3 border-t border-[var(--color-border-default)] pt-4 sm:flex-row\">\n        <button\n          type=\"submit\"\n          disabled={loading}\n          className=\"inline-flex items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-6 py-2.5 font-medium text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90 hover:scale-[1.02] active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 sm:min-w-[220px]\"\n        >\n          {loading ? <Loader2 size={16} className=\"animate-spin\" /> : null}\n          {workspace\n            ? tr('workspaces.form.updateSubmit', 'Update Workspace')\n            : tr('workspaces.create.button', 'Create Workspace')}\n        </button>\n\n        <button\n          type=\"button\"\n          onClick={onCancel}\n          disabled={loading}\n          className=\"rounded-lg border border-[var(--color-border-default)] bg-transparent px-6 py-2.5 font-medium text-[var(--color-text-primary)] transition-all duration-200 hover:bg-[var(--color-bg-subtle)] active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 sm:min-w-[140px]\"\n        >\n          {tr('common.cancel', 'Cancel')}\n        </button>\n      </div>\n    </form>\n  );\n}\n"],"mappings":"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"}

package/dist/organization-management/modules/workspaces/components/WorkspaceStatusBadge.d.ts

@@ -0,0 +1,13 @@
+import { WorkspaceStatus } from '../types';
+
+interface WorkspaceStatusBadgeProps {
+    status: WorkspaceStatus;
+    showIcon?: boolean;
+}
+/**
+ * WorkspaceStatusBadge
+ * Displays the status of a workspace with color coding and optional icon
+ */
+export declare function WorkspaceStatusBadge({ status, showIcon }: WorkspaceStatusBadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=WorkspaceStatusBadge.d.ts.map

package/dist/organization-management/modules/workspaces/components/WorkspaceStatusBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspaceStatusBadge.d.ts","sourceRoot":"","sources":["../../../../../src/organization-management/modules/workspaces/components/WorkspaceStatusBadge.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,UAAU,yBAAyB;IACjC,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,MAAM,EAAE,QAAe,EAAE,EAAE,yBAAyB,2CA2D1F"}

package/dist/organization-management/modules/workspaces/components/WorkspaceStatusBadge.js

@@ -0,0 +1,49 @@
+import { WorkspaceStatus as e } from "../../../shared/types/graphql.js";
+import { useCallback as t } from "react";
+import { CircleAlert as n, CircleCheck as r, CircleX as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useI18n as s } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/organization-management/modules/workspaces/components/WorkspaceStatusBadge.tsx
+function c({ status: c, showIcon: l = !0 }) {
+	let { t: u } = s(), d = t((e, t) => {
+		let n = u(e);
+		return n === e ? t : n;
+	}, [u]), f = (() => {
+		switch (c) {
+			case e.ACTIVE: return {
+				label: d("workspaces.status.active", "Active"),
+				icon: r,
+				className: "bg-[var(--color-status-success-bgSubtle)] text-[var(--color-status-success-text)] border-[var(--color-status-success-border)]"
+			};
+			case e.INACTIVE: return {
+				label: d("workspaces.status.inactive", "Inactive"),
+				icon: i,
+				className: "bg-[var(--color-bg-muted)] text-[var(--color-text-secondary)] border-[var(--color-border-default)]"
+			};
+			case e.ARCHIVED: return {
+				label: d("workspaces.status.archived", "Archived"),
+				icon: n,
+				className: "bg-[var(--color-status-warning-bgSubtle)] text-[var(--color-status-warning-text)] border-[var(--color-status-warning-border)]"
+			};
+			default: return {
+				label: c,
+				icon: n,
+				className: "bg-[var(--color-bg-muted)] text-[var(--color-text-secondary)] border-[var(--color-border-default)]"
+			};
+		}
+	})(), p = f.icon;
+	return /* @__PURE__ */ o("span", {
+		className: `
+        inline-flex items-center gap-1.5 px-2.5 py-1
+        rounded-full text-xs font-medium
+        border
+        transition-colors duration-200
+        ${f.className}
+      `,
+		children: [l && /* @__PURE__ */ a(p, { size: 14 }), f.label]
+	});
+}
+//#endregion
+export { c as WorkspaceStatusBadge };
+
+//# sourceMappingURL=WorkspaceStatusBadge.js.map

package/dist/organization-management/modules/workspaces/components/WorkspaceStatusBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspaceStatusBadge.js","names":[],"sources":["../../../../../src/organization-management/modules/workspaces/components/WorkspaceStatusBadge.tsx"],"sourcesContent":["import { CircleCheck, CircleX, CircleAlert } from 'lucide-react';\nimport { useCallback } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { WorkspaceStatus } from '../types';\n\ninterface WorkspaceStatusBadgeProps {\n  status: WorkspaceStatus;\n  showIcon?: boolean;\n}\n\n/**\n * WorkspaceStatusBadge\n * Displays the status of a workspace with color coding and optional icon\n */\nexport function WorkspaceStatusBadge({ status, showIcon = true }: WorkspaceStatusBadgeProps) {\n  const { t } = useI18n();\n  const tr = useCallback(\n    (key: string, fallback: string) => {\n      const translated = t(key);\n      return translated === key ? fallback : translated;\n    },\n    [t]\n  );\n  const getStatusConfig = () => {\n    switch (status) {\n      case WorkspaceStatus.ACTIVE:\n        return {\n          label: tr('workspaces.status.active', 'Active'),\n          icon: CircleCheck,\n          className:\n            'bg-[var(--color-status-success-bgSubtle)] text-[var(--color-status-success-text)] border-[var(--color-status-success-border)]',\n        };\n      case WorkspaceStatus.INACTIVE:\n        return {\n          label: tr('workspaces.status.inactive', 'Inactive'),\n          icon: CircleX,\n          className:\n            'bg-[var(--color-bg-muted)] text-[var(--color-text-secondary)] border-[var(--color-border-default)]',\n        };\n      case WorkspaceStatus.ARCHIVED:\n        return {\n          label: tr('workspaces.status.archived', 'Archived'),\n          icon: CircleAlert,\n          className:\n            'bg-[var(--color-status-warning-bgSubtle)] text-[var(--color-status-warning-text)] border-[var(--color-status-warning-border)]',\n        };\n      default:\n        return {\n          label: status,\n          icon: CircleAlert,\n          className:\n            'bg-[var(--color-bg-muted)] text-[var(--color-text-secondary)] border-[var(--color-border-default)]',\n        };\n    }\n  };\n\n  const config = getStatusConfig();\n  const Icon = config.icon;\n\n  return (\n    <span\n      className={`\n        inline-flex items-center gap-1.5 px-2.5 py-1\n        rounded-full text-xs font-medium\n        border\n        transition-colors duration-200\n        ${config.className}\n      `}\n    >\n      {showIcon && <Icon size={14} />}\n      {config.label}\n    </span>\n  );\n}\n"],"mappings":";;;;;;AAcA,SAAgB,EAAqB,EAAE,WAAQ,cAAW,MAAmC;CAC3F,IAAM,EAAE,SAAM,GAAS,EACjB,IAAK,GACR,GAAa,MAAqB;EACjC,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAEzC,CAAC,EAAE,CACJ,EAkCK,WAjCwB;AAC5B,UAAQ,GAAR;GACE,KAAK,EAAgB,OACnB,QAAO;IACL,OAAO,EAAG,4BAA4B,SAAS;IAC/C,MAAM;IACN,WACE;IACH;GACH,KAAK,EAAgB,SACnB,QAAO;IACL,OAAO,EAAG,8BAA8B,WAAW;IACnD,MAAM;IACN,WACE;IACH;GACH,KAAK,EAAgB,SACnB,QAAO;IACL,OAAO,EAAG,8BAA8B,WAAW;IACnD,MAAM;IACN,WACE;IACH;GACH,QACE,QAAO;IACL,OAAO;IACP,MAAM;IACN,WACE;IACH;;KAIyB,EAC1B,IAAO,EAAO;AAEpB,QACE,kBAAC,QAAD;EACE,WAAW;;;;;UAKP,EAAO,UAAU;;YANvB,CASG,KAAY,kBAAC,GAAD,EAAM,MAAM,IAAM,CAAA,EAC9B,EAAO,MACH"}

package/dist/organization-management/modules/workspaces/hooks/useWorkspaceMembers.d.ts

@@ -0,0 +1,47 @@
+import { AddWorkspaceMemberInput, WorkspaceMember } from '../types';
+
+/**
+ * Hook to fetch workspace members with pagination
+ * Requires an explicit workspace ID from the route/page context.
+ *
+ * @param limit - Number of members to fetch (default: 50)
+ * @param offset - Offset for pagination (default: 0)
+ * @returns Query result with members, loading state, and error
+ */
+export declare function useWorkspaceMembers(workspaceId: string, limit?: number, offset?: number): {
+    members: WorkspaceMember[];
+    total: any;
+    hasMore: any;
+    loading: boolean;
+    error: import('@apollo/client').ApolloError | undefined;
+    refetch: (variables?: any) => Promise<import('@apollo/client').ApolloQueryResult<Types.GetWorkspaceMembersQuery>>;
+    fetchMore: <TFetchData = Types.GetWorkspaceMembersQuery, TFetchVars extends import('@apollo/client').OperationVariables = Types.GetWorkspaceMembersQueryVariables>(fetchMoreOptions: import('@apollo/client').FetchMoreQueryOptions<TFetchVars, TFetchData> & {
+        updateQuery?: ((previousQueryResult: any, options: {
+            fetchMoreResult: import('@apollo/client').Unmasked<TFetchData>;
+            variables: TFetchVars;
+        }) => any) | undefined;
+    }) => Promise<import('@apollo/client').ApolloQueryResult<TFetchData>>;
+};
+/**
+ * Hook to fetch a single workspace member by userId
+ *
+ * @param userId - The user ID to find
+ * @returns Query result with the member, loading state, and error
+ */
+export declare function useWorkspaceMember(workspaceId: string, userId: string): {
+    member: WorkspaceMember | undefined;
+    loading: boolean;
+    error: import('@apollo/client').ApolloError | undefined;
+    refetch: (variables?: any) => Promise<import('@apollo/client').ApolloQueryResult<Types.GetWorkspaceMemberQuery>>;
+};
+export declare function useAddWorkspaceMember(): {
+    addWorkspaceMember: (input: AddWorkspaceMemberInput) => Promise<import('@apollo/client').FetchResult<Types.AddWorkspaceMemberMutation>>;
+    loading: boolean;
+    error: import('@apollo/client').ApolloError | undefined;
+};
+export declare function useRemoveWorkspaceMember(): {
+    removeWorkspaceMember: (workspaceId: string, userId: string) => Promise<import('@apollo/client').FetchResult<Types.RemoveWorkspaceMemberMutation>>;
+    loading: boolean;
+    error: import('@apollo/client').ApolloError | undefined;
+};
+//# sourceMappingURL=useWorkspaceMembers.d.ts.map

package/dist/organization-management/modules/workspaces/hooks/useWorkspaceMembers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWorkspaceMembers.d.ts","sourceRoot":"","sources":["../../../../../src/organization-management/modules/workspaces/hooks/useWorkspaceMembers.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEzE;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,SAAK,EAAE,MAAM,SAAI;;;;;;;;;;;;;EAqB9E;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;;;;;EAsBrE;AAED,wBAAgB,qBAAqB;gCAMC,uBAAuB;;;EAM5D;AAED,wBAAgB,wBAAwB;yCAMO,MAAM,UAAU,MAAM;;;EAMpE"}

package/dist/organization-management/modules/workspaces/hooks/useWorkspaceMembers.js

@@ -0,0 +1,46 @@
+import { GetWorkspaceMembersDocument as e, useAddWorkspaceMemberMutation as t, useGetWorkspaceMembersQuery as n, useRemoveWorkspaceMemberMutation as r } from "../../../../generated/global-operations.js";
+//#region src/organization-management/modules/workspaces/hooks/useWorkspaceMembers.ts
+function i(e, t = 50, r = 0) {
+	let { data: i, loading: a, error: o, refetch: s, fetchMore: c } = n({
+		variables: {
+			workspaceId: e,
+			limit: t,
+			offset: r
+		},
+		skip: !e,
+		fetchPolicy: "cache-first",
+		nextFetchPolicy: "cache-first"
+	});
+	return {
+		members: i?.workspaceMembers?.items ?? [],
+		total: i?.workspaceMembers?.total ?? 0,
+		hasMore: i?.workspaceMembers?.hasMore ?? !1,
+		loading: a,
+		error: o,
+		refetch: s,
+		fetchMore: c
+	};
+}
+function a() {
+	let [n, { loading: r, error: i }] = t({ refetchQueries: [e] });
+	return {
+		addWorkspaceMember: async (e) => n({ variables: { input: e } }),
+		loading: r,
+		error: i
+	};
+}
+function o() {
+	let [t, { loading: n, error: i }] = r({ refetchQueries: [e] });
+	return {
+		removeWorkspaceMember: async (e, n) => t({ variables: {
+			workspaceId: e,
+			userId: n
+		} }),
+		loading: n,
+		error: i
+	};
+}
+//#endregion
+export { a as useAddWorkspaceMember, o as useRemoveWorkspaceMember, i as useWorkspaceMembers };
+
+//# sourceMappingURL=useWorkspaceMembers.js.map

package/dist/organization-management/modules/workspaces/hooks/useWorkspaceMembers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWorkspaceMembers.js","names":[],"sources":["../../../../../src/organization-management/modules/workspaces/hooks/useWorkspaceMembers.ts"],"sourcesContent":["import {\n  GetWorkspaceMembersDocument,\n  useAddWorkspaceMemberMutation,\n  useGetWorkspaceMembersQuery,\n  useGetWorkspaceMemberQuery,\n  useRemoveWorkspaceMemberMutation,\n} from '../../../../generated/global-operations';\nimport type { AddWorkspaceMemberInput, WorkspaceMember } from '../types';\n\n/**\n * Hook to fetch workspace members with pagination\n * Requires an explicit workspace ID from the route/page context.\n *\n * @param limit - Number of members to fetch (default: 50)\n * @param offset - Offset for pagination (default: 0)\n * @returns Query result with members, loading state, and error\n */\nexport function useWorkspaceMembers(workspaceId: string, limit = 50, offset = 0) {\n  const { data, loading, error, refetch, fetchMore } = useGetWorkspaceMembersQuery({\n    variables: {\n      workspaceId,\n      limit,\n      offset,\n    },\n    skip: !workspaceId,\n    fetchPolicy: 'cache-first',\n    nextFetchPolicy: 'cache-first',\n  });\n\n  return {\n    members: (data?.workspaceMembers?.items as WorkspaceMember[]) ?? [],\n    total: data?.workspaceMembers?.total ?? 0,\n    hasMore: data?.workspaceMembers?.hasMore ?? false,\n    loading,\n    error,\n    refetch,\n    fetchMore,\n  };\n}\n\n/**\n * Hook to fetch a single workspace member by userId\n *\n * @param userId - The user ID to find\n * @returns Query result with the member, loading state, and error\n */\nexport function useWorkspaceMember(workspaceId: string, userId: string) {\n  const { data, loading, error, refetch } = useGetWorkspaceMemberQuery({\n    variables: {\n      workspaceId,\n      userId,\n    },\n    skip: !workspaceId || !userId,\n    fetchPolicy: 'cache-first',\n    nextFetchPolicy: 'cache-first',\n  });\n\n  // Find the member matching the userId from the list\n  const member = data?.workspaceMembers?.items?.find(\n    (m: { userId: string }) => m.userId === userId\n  ) as WorkspaceMember | undefined;\n\n  return {\n    member,\n    loading,\n    error,\n    refetch,\n  };\n}\n\nexport function useAddWorkspaceMember() {\n  const [addWorkspaceMember, { loading, error }] = useAddWorkspaceMemberMutation({\n    refetchQueries: [GetWorkspaceMembersDocument],\n  });\n\n  return {\n    addWorkspaceMember: async (input: AddWorkspaceMemberInput) => {\n      return addWorkspaceMember({ variables: { input } });\n    },\n    loading,\n    error,\n  };\n}\n\nexport function useRemoveWorkspaceMember() {\n  const [removeWorkspaceMember, { loading, error }] = useRemoveWorkspaceMemberMutation({\n    refetchQueries: [GetWorkspaceMembersDocument],\n  });\n\n  return {\n    removeWorkspaceMember: async (workspaceId: string, userId: string) => {\n      return removeWorkspaceMember({ variables: { workspaceId, userId } });\n    },\n    loading,\n    error,\n  };\n}\n"],"mappings":";;AAiBA,SAAgB,EAAoB,GAAqB,IAAQ,IAAI,IAAS,GAAG;CAC/E,IAAM,EAAE,SAAM,YAAS,UAAO,YAAS,iBAAc,EAA4B;EAC/E,WAAW;GACT;GACA;GACA;GACD;EACD,MAAM,CAAC;EACP,aAAa;EACb,iBAAiB;EAClB,CAAC;AAEF,QAAO;EACL,SAAU,GAAM,kBAAkB,SAA+B,EAAE;EACnE,OAAO,GAAM,kBAAkB,SAAS;EACxC,SAAS,GAAM,kBAAkB,WAAW;EAC5C;EACA;EACA;EACA;EACD;;AAiCH,SAAgB,IAAwB;CACtC,IAAM,CAAC,GAAoB,EAAE,YAAS,cAAW,EAA8B,EAC7E,gBAAgB,CAAC,EAA4B,EAC9C,CAAC;AAEF,QAAO;EACL,oBAAoB,OAAO,MAClB,EAAmB,EAAE,WAAW,EAAE,UAAO,EAAE,CAAC;EAErD;EACA;EACD;;AAGH,SAAgB,IAA2B;CACzC,IAAM,CAAC,GAAuB,EAAE,YAAS,cAAW,EAAiC,EACnF,gBAAgB,CAAC,EAA4B,EAC9C,CAAC;AAEF,QAAO;EACL,uBAAuB,OAAO,GAAqB,MAC1C,EAAsB,EAAE,WAAW;GAAE;GAAa;GAAQ,EAAE,CAAC;EAEtE;EACA;EACD"}