@burdenoff/microfe-organization 2026.510.110

package/dist/organization-management/modules/members/pages/MemberDetailPage.js

@@ -0,0 +1,115 @@
+import { useOrgConsole as e } from "../../../providers/OrgConsoleProvider.js";
+import { useTr as t } from "../../../shared/hooks/useTr.js";
+import { LoadingState as n } from "../../../shared/components/feedback/LoadingState.js";
+import { ErrorState as r } from "../../../shared/components/feedback/ErrorState.js";
+import { PERMISSIONS as i } from "../../../constants/permissions.js";
+import { MemberRoleBadge as a } from "../components/MemberRoleBadge.js";
+import { useMember as o } from "../hooks/useMembers.js";
+import { ArrowLeft as s, Shield as c } from "lucide-react";
+import { usePermissions as l } from "@burdenoff/fe-libs/shared/providers/shell";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useParams as f } from "react-router-dom";
+//#region src/organization-management/modules/members/pages/MemberDetailPage.tsx
+function p() {
+	let p = t(), { organizationId: m, userId: h } = f(), { navigate: g, basePath: _ = "/organizations" } = e(), { hasPermission: v, isLoading: y } = l(), { member: b, loading: x, error: S } = o(m, h);
+	return y ? /* @__PURE__ */ u("div", {
+		className: "min-h-full bg-[var(--color-bg-canvas)] p-6",
+		children: /* @__PURE__ */ u(n, { message: p("common.loadingPermissions", "Loading permissions...") })
+	}) : v(i.MEMBER_READ) ? x ? /* @__PURE__ */ u("div", {
+		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6",
+		children: /* @__PURE__ */ u(n, { message: p("members.detail.loading", "Loading member...") })
+	}) : S || !b ? /* @__PURE__ */ u("div", {
+		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6",
+		children: /* @__PURE__ */ u(r, {
+			message: S?.message || p("members.detail.notFound", "Member not found"),
+			action: {
+				label: p("common.goBack", "Go Back"),
+				onClick: () => g(`${_}/${m}/members`)
+			}
+		})
+	}) : /* @__PURE__ */ d("div", {
+		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6 animate-in fade-in duration-300",
+		children: [/* @__PURE__ */ d("div", {
+			className: "mb-6",
+			children: [/* @__PURE__ */ d("button", {
+				onClick: () => g(`${_}/${m}/members`),
+				className: "inline-flex items-center gap-2 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] active:scale-[0.98] transition-all duration-200 mb-4",
+				children: [/* @__PURE__ */ u(s, { size: 20 }), p("members.detail.backToMembers", "Back to Members")]
+			}), /* @__PURE__ */ d("div", {
+				className: "flex items-start gap-4",
+				children: [/* @__PURE__ */ u("div", {
+					className: "w-16 h-16 rounded-full bg-[var(--color-status-info-muted)] flex items-center justify-center",
+					children: /* @__PURE__ */ u(c, {
+						size: 32,
+						className: "text-[var(--color-status-info)]"
+					})
+				}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h1", {
+					className: "text-3xl font-bold text-[var(--color-text-primary)]",
+					children: b.userId
+				}), /* @__PURE__ */ d("p", {
+					className: "text-[var(--color-text-secondary)] mt-1",
+					children: [
+						p("members.list.memberId", "Member ID"),
+						": ",
+						b.id
+					]
+				})] })]
+			})]
+		}), /* @__PURE__ */ d("div", {
+			className: "bg-[var(--color-bg-surface)] border border-[var(--color-border-default)] rounded-lg p-6",
+			children: [/* @__PURE__ */ u("h2", {
+				className: "text-lg font-semibold text-[var(--color-text-primary)] mb-4",
+				children: p("members.detail.info", "Member Information")
+			}), /* @__PURE__ */ d("div", {
+				className: "space-y-4",
+				children: [
+					/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+						className: "text-sm text-[var(--color-text-secondary)]",
+						children: p("members.detail.userId", "User ID")
+					}), /* @__PURE__ */ u("p", {
+						className: "text-[var(--color-text-primary)] font-medium",
+						children: b.userId
+					})] }),
+					/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+						className: "text-sm text-[var(--color-text-secondary)]",
+						children: p("members.detail.orgId", "Organization ID")
+					}), /* @__PURE__ */ u("p", {
+						className: "text-[var(--color-text-primary)] font-medium",
+						children: b.organizationId
+					})] }),
+					/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+						className: "text-sm text-[var(--color-text-secondary)]",
+						children: p("members.list.column.role", "Role")
+					}), /* @__PURE__ */ u("div", {
+						className: "mt-1",
+						children: /* @__PURE__ */ u(a, { role: b.role })
+					})] }),
+					b.invitedBy && /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+						className: "text-sm text-[var(--color-text-secondary)]",
+						children: p("members.detail.invitedBy", "Invited By")
+					}), /* @__PURE__ */ u("p", {
+						className: "text-[var(--color-text-primary)] font-medium",
+						children: b.invitedBy
+					})] }),
+					b.joinedAt && /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+						className: "text-sm text-[var(--color-text-secondary)]",
+						children: p("members.detail.joinedAt", "Joined At")
+					}), /* @__PURE__ */ u("p", {
+						className: "text-[var(--color-text-primary)] font-medium",
+						children: new Date(b.joinedAt).toLocaleString()
+					})] })
+				]
+			})]
+		})]
+	}) : /* @__PURE__ */ u("div", {
+		className: "min-h-full bg-[var(--color-bg-canvas)] p-6",
+		children: /* @__PURE__ */ u("div", {
+			className: "p-8 text-center text-[var(--color-text-secondary)]",
+			children: p("members.detail.noPermission", "You don't have permission to view member details.")
+		})
+	});
+}
+//#endregion
+export { p as MemberDetailPage };
+
+//# sourceMappingURL=MemberDetailPage.js.map

package/dist/organization-management/modules/members/pages/MemberDetailPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MemberDetailPage.js","names":[],"sources":["../../../../../src/organization-management/modules/members/pages/MemberDetailPage.tsx"],"sourcesContent":["import { useParams } from 'react-router-dom';\nimport { ArrowLeft, Shield } from 'lucide-react';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { useOrgConsole } from '../../../providers/OrgConsoleProvider';\nimport { useMember } from '../hooks/useMembers';\nimport { MemberRoleBadge } from '../components/MemberRoleBadge';\nimport { LoadingState } from '../../../shared/components/feedback/LoadingState';\nimport { ErrorState } from '../../../shared/components/feedback/ErrorState';\nimport { PERMISSIONS } from '../../../constants/permissions';\nimport { useTr } from '../../../shared/hooks/useTr';\n\n/**\n * Member Detail Page\n * Simplified version showing available member fields\n */\nexport function MemberDetailPage() {\n  const tr = useTr();\n  const { organizationId, userId } = useParams<{ organizationId: string; userId: string }>();\n  const { navigate, basePath = '/organizations' } = useOrgConsole();\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n  const { member, loading, error } = useMember(organizationId!, userId!);\n\n  if (permissionsLoading) {\n    return (\n      <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n        <LoadingState message={tr('common.loadingPermissions', 'Loading permissions...')} />\n      </div>\n    );\n  }\n\n  if (!hasPermission(PERMISSIONS.MEMBER_READ)) {\n    return (\n      <div className=\"min-h-full bg-[var(--color-bg-canvas)] p-6\">\n        <div className=\"p-8 text-center text-[var(--color-text-secondary)]\">\n          {tr('members.detail.noPermission', \"You don't have permission to view member details.\")}\n        </div>\n      </div>\n    );\n  }\n\n  if (loading) {\n    return (\n      <div className=\"min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6\">\n        <LoadingState message={tr('members.detail.loading', 'Loading member...')} />\n      </div>\n    );\n  }\n\n  if (error || !member) {\n    return (\n      <div className=\"min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6\">\n        <ErrorState\n          message={error?.message || tr('members.detail.notFound', 'Member not found')}\n          action={{\n            label: tr('common.goBack', 'Go Back'),\n            onClick: () => navigate(`${basePath}/${organizationId}/members`),\n          }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6 animate-in fade-in duration-300\">\n      {/* Header */}\n      <div className=\"mb-6\">\n        <button\n          onClick={() => navigate(`${basePath}/${organizationId}/members`)}\n          className=\"inline-flex items-center gap-2 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] active:scale-[0.98] transition-all duration-200 mb-4\"\n        >\n          <ArrowLeft size={20} />\n          {tr('members.detail.backToMembers', 'Back to Members')}\n        </button>\n\n        <div className=\"flex items-start gap-4\">\n          <div className=\"w-16 h-16 rounded-full bg-[var(--color-status-info-muted)] flex items-center justify-center\">\n            <Shield size={32} className=\"text-[var(--color-status-info)]\" />\n          </div>\n          <div>\n            <h1 className=\"text-3xl font-bold text-[var(--color-text-primary)]\">{member.userId}</h1>\n            <p className=\"text-[var(--color-text-secondary)] mt-1\">\n              {tr('members.list.memberId', 'Member ID')}: {member.id}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      {/* Details */}\n      <div className=\"bg-[var(--color-bg-surface)] border border-[var(--color-border-default)] rounded-lg p-6\">\n        <h2 className=\"text-lg font-semibold text-[var(--color-text-primary)] mb-4\">\n          {tr('members.detail.info', 'Member Information')}\n        </h2>\n\n        <div className=\"space-y-4\">\n          <div>\n            <p className=\"text-sm text-[var(--color-text-secondary)]\">\n              {tr('members.detail.userId', 'User ID')}\n            </p>\n            <p className=\"text-[var(--color-text-primary)] font-medium\">{member.userId}</p>\n          </div>\n\n          <div>\n            <p className=\"text-sm text-[var(--color-text-secondary)]\">\n              {tr('members.detail.orgId', 'Organization ID')}\n            </p>\n            <p className=\"text-[var(--color-text-primary)] font-medium\">{member.organizationId}</p>\n          </div>\n\n          <div>\n            <p className=\"text-sm text-[var(--color-text-secondary)]\">\n              {tr('members.list.column.role', 'Role')}\n            </p>\n            <div className=\"mt-1\">\n              <MemberRoleBadge role={member.role} />\n            </div>\n          </div>\n\n          {member.invitedBy && (\n            <div>\n              <p className=\"text-sm text-[var(--color-text-secondary)]\">\n                {tr('members.detail.invitedBy', 'Invited By')}\n              </p>\n              <p className=\"text-[var(--color-text-primary)] font-medium\">{member.invitedBy}</p>\n            </div>\n          )}\n\n          {member.joinedAt && (\n            <div>\n              <p className=\"text-sm text-[var(--color-text-secondary)]\">\n                {tr('members.detail.joinedAt', 'Joined At')}\n              </p>\n              <p className=\"text-[var(--color-text-primary)] font-medium\">\n                {new Date(member.joinedAt).toLocaleString()}\n              </p>\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/organization-management/modules/members/pages/MembersListPage.d.ts

@@ -0,0 +1,2 @@
+export declare function MembersListPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MembersListPage.d.ts.map

package/dist/organization-management/modules/members/pages/MembersListPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MembersListPage.d.ts","sourceRoot":"","sources":["../../../../../src/organization-management/modules/members/pages/MembersListPage.tsx"],"names":[],"mappings":"AA2BA,wBAAgB,eAAe,4CAuf9B"}

package/dist/organization-management/modules/members/pages/MembersListPage.js

@@ -0,0 +1,424 @@
+import { useOrgConsole as e } from "../../../providers/OrgConsoleProvider.js";
+import { toast as t } from "../../../../node_modules/sonner/dist/index.js";
+import { useTr as n } from "../../../shared/hooks/useTr.js";
+import { SearchInput as r } from "../../../shared/components/input/SearchInput.js";
+import { SelectionCheckbox as i } from "../../../shared/components/input/SelectionCheckbox.js";
+import { LoadingState as a } from "../../../shared/components/feedback/LoadingState.js";
+import { ErrorState as o } from "../../../shared/components/feedback/ErrorState.js";
+import { EmptyState as s } from "../../../shared/components/feedback/EmptyState.js";
+import { useDebouncedValue as c } from "../../../shared/hooks/useDebouncedValue.js";
+import { useConfirmDialog as ee } from "../../../shared/components/dialog/ConfirmDialog.js";
+import { PERMISSIONS as l } from "../../../constants/permissions.js";
+import { MemberRoleBadge as u } from "../components/MemberRoleBadge.js";
+import { useMembers as d, useRemoveMember as f } from "../hooks/useMembers.js";
+import { useEffect as te, useMemo as p, useState as m } from "react";
+import { Eye as h, Mail as g, RefreshCw as _, Shield as v, Trash2 as y } from "lucide-react";
+import { useFeatureFlagDetails as b } from "@burdenoff/fe-libs/shared/feature-flags";
+import { usePermissions as ne } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as re, jsx as x, jsxs as S } from "react/jsx-runtime";
+import { useParams as C } from "react-router-dom";
+//#region src/organization-management/modules/members/pages/MembersListPage.tsx
+function w() {
+	let e = n();
+	return (t) => t ? new Date(t).toLocaleDateString() : e("common.status.pending", "Pending");
+}
+function T() {
+	let T = n(), E = w(), { navigate: D, basePath: O = "/organizations" } = e(), { hasPermission: k, isLoading: A } = ne(), j = b("organization.invite"), M = j ? !!j.value : !0, { organizationId: N } = C(), [P, ie] = m(""), F = c(P, 250), [I, L] = m(/* @__PURE__ */ new Set()), { openConfirmDialog: R, ConfirmDialog: z } = ee(), { members: B, loading: V, error: H, refetch: U } = d(N ?? "", 50, 0), { removeMember: W, loading: G } = f(), K = p(() => {
+		if (!F) return B;
+		let e = F.toLowerCase();
+		return B.filter((t) => t.userId.toLowerCase().includes(e) || t.role.toLowerCase().includes(e));
+	}, [F, B]);
+	te(() => {
+		L((e) => {
+			let t = new Set(K.map((e) => e.id)), n = new Set([...e].filter((e) => t.has(e)));
+			return n.size === e.size ? e : n;
+		});
+	}, [K]);
+	let q = p(() => K.filter((e) => I.has(e.id)), [K, I]), J = K.length > 0 && K.every((e) => I.has(e.id)), Y = K.some((e) => I.has(e.id)) && !J, X = async (e) => {
+		if (N) try {
+			let n = (await Promise.allSettled(e.map(async (e) => {
+				let t = await W(N, e);
+				if (t.errors?.length) throw Error(t.errors[0]?.message ?? "Failed to remove member");
+			}))).find((e) => e.status === "rejected");
+			if (n?.status === "rejected") throw n.reason;
+			L(/* @__PURE__ */ new Set()), await U(), t.success(e.length === 1 ? T("members.remove.successSingle", "Member removed successfully") : `${e.length} ${T("members.remove.successMany", "members removed successfully")}`);
+		} catch (e) {
+			t.error(e instanceof Error ? e.message : T("members.remove.failed", "Failed to remove member"));
+		}
+	}, Z = (e) => {
+		R({
+			title: T("members.remove.title", "Remove member"),
+			description: `${T("members.remove.descriptionPrefix", "Remove")} ${e} ${T("members.remove.descriptionSuffix", "from this organization? Workspace access inherited from this membership will be impacted.")}`,
+			confirmText: T("members.remove.confirm", "Remove"),
+			variant: "danger",
+			onConfirm: () => {
+				X([e]);
+			}
+		});
+	}, ae = () => {
+		q.length !== 0 && R({
+			title: T("members.remove.bulkTitle", "Remove selected members"),
+			description: `${T("members.remove.bulkPrefix", "Remove")} ${q.length} ${T(q.length === 1 ? "members.remove.bulkSuffixSingle" : "members.remove.bulkSuffixMany", q.length === 1 ? "selected member from this organization?" : "selected members from this organization?")}`,
+			confirmText: `${T("members.remove.confirm", "Remove")} ${q.length}`,
+			variant: "danger",
+			onConfirm: () => {
+				X(q.map((e) => e.userId));
+			}
+		});
+	}, Q = (e, t) => {
+		L((n) => {
+			let r = new Set(n);
+			return t ? r.add(e) : r.delete(e), r;
+		});
+	}, $ = (e) => {
+		L((t) => {
+			let n = new Set(t);
+			return K.forEach((t) => {
+				e ? n.add(t.id) : n.delete(t.id);
+			}), n;
+		});
+	};
+	return N ? A ? /* @__PURE__ */ x("div", {
+		className: "min-h-full bg-[var(--color-bg-canvas)] p-6",
+		children: /* @__PURE__ */ x(a, { message: T("common.loadingPermissions", "Loading permissions...") })
+	}) : k(l.MEMBER_LIST) ? V ? /* @__PURE__ */ x("div", {
+		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6",
+		children: /* @__PURE__ */ x(a, { message: T("members.list.loading", "Loading members...") })
+	}) : H ? /* @__PURE__ */ x("div", {
+		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6",
+		children: /* @__PURE__ */ x(o, {
+			message: H.message,
+			action: {
+				label: T("common.retry", "Retry"),
+				onClick: () => {
+					U();
+				}
+			}
+		})
+	}) : /* @__PURE__ */ S("div", {
+		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6 animate-in fade-in duration-300",
+		children: [/* @__PURE__ */ S("div", {
+			className: "mx-auto flex w-full max-w-7xl flex-col gap-6",
+			children: [
+				/* @__PURE__ */ S("div", {
+					className: "flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between",
+					children: [/* @__PURE__ */ S("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ x("h1", {
+							className: "text-3xl font-bold text-[var(--color-text-primary)]",
+							children: T("members.list.title", "Members")
+						}), /* @__PURE__ */ x("p", {
+							className: "max-w-2xl text-[var(--color-text-secondary)]",
+							children: T("members.list.subtitle", "Manage organization members, inspect their roles, and invite more people into this organization.")
+						})]
+					}), M && k(l.MEMBER_INVITE) && /* @__PURE__ */ S("button", {
+						onClick: () => D(`${O}/${N}/members/invite`),
+						className: "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-[var(--color-action-primary-bg)] px-4 py-2.5 text-[var(--color-action-primary-text)] transition-all duration-200 hover:opacity-90 active:scale-[0.98]",
+						children: [/* @__PURE__ */ x(g, {
+							size: 18,
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ x("span", {
+							className: "font-medium",
+							children: T("members.invite.button", "Invite Member")
+						})]
+					})]
+				}),
+				/* @__PURE__ */ S("div", {
+					className: "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-4 shadow-[var(--shadow-elevation-1)]",
+					children: [/* @__PURE__ */ S("div", {
+						className: "flex flex-col gap-3 sm:flex-row sm:items-center",
+						children: [/* @__PURE__ */ x(r, {
+							value: P,
+							onChange: ie,
+							placeholder: T("members.list.searchPlaceholder", "Search by member ID or role..."),
+							label: T("members.list.searchLabel", "Search organization members"),
+							inputId: "organization-members-search",
+							className: "flex-1"
+						}), /* @__PURE__ */ x("button", {
+							onClick: () => {
+								U();
+							},
+							className: "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] px-4 py-2 text-[var(--color-text-primary)] transition-all duration-200 hover:bg-[var(--color-bg-subtle)] active:scale-95",
+							"aria-label": T("members.list.refresh", "Refresh members"),
+							title: T("members.list.refresh", "Refresh members"),
+							children: /* @__PURE__ */ x(_, {
+								size: 18,
+								"aria-hidden": "true"
+							})
+						})]
+					}), K.length > 0 ? /* @__PURE__ */ S("div", {
+						className: "mt-4 flex flex-col gap-3 rounded-lg border border-[var(--color-border-default)] bg-[var(--color-bg-canvas)] p-4 sm:flex-row sm:items-center sm:justify-between",
+						children: [/* @__PURE__ */ S("div", {
+							className: "flex flex-wrap items-center gap-3",
+							children: [/* @__PURE__ */ S("label", {
+								className: "flex items-center gap-2 text-sm text-[var(--color-text-primary)]",
+								children: [/* @__PURE__ */ x(i, {
+									checked: J,
+									indeterminate: Y,
+									onChange: $,
+									ariaLabel: T("members.list.selectAll", "Select all members")
+								}), /* @__PURE__ */ x("span", { children: T("common.selectAllVisible", "Select all visible") })]
+							}), I.size > 0 ? /* @__PURE__ */ x("button", {
+								onClick: () => L(/* @__PURE__ */ new Set()),
+								className: "text-sm text-[var(--color-text-secondary)] transition-colors hover:text-[var(--color-text-primary)]",
+								children: T("common.clearSelection", "Clear selection")
+							}) : null]
+						}), /* @__PURE__ */ S("div", {
+							className: "flex flex-col gap-2 sm:flex-row sm:items-center",
+							children: [/* @__PURE__ */ S("span", {
+								className: "text-sm text-[var(--color-text-secondary)]",
+								children: [
+									I.size,
+									" ",
+									T("common.selected", "selected")
+								]
+							}), k(l.MEMBER_REMOVE) && /* @__PURE__ */ S("button", {
+								onClick: ae,
+								disabled: q.length === 0 || G,
+								className: "inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border border-[var(--color-status-error-border)] px-3 py-2 text-[var(--color-status-error-text)] transition-all duration-200 hover:bg-[var(--color-status-error-bgSubtle)] disabled:cursor-not-allowed disabled:opacity-50",
+								children: [
+									/* @__PURE__ */ x(y, {
+										size: 16,
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ x("span", { children: T("common.removeSelected", "Remove Selected") }),
+									q.length > 0 ? /* @__PURE__ */ S("span", { children: [
+										"(",
+										q.length,
+										")"
+									] }) : null
+								]
+							})]
+						})]
+					}) : null]
+				}),
+				K.length === 0 ? /* @__PURE__ */ x("div", {
+					className: "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-6 shadow-[var(--shadow-elevation-1)]",
+					children: /* @__PURE__ */ x(s, {
+						icon: /* @__PURE__ */ x(v, {
+							size: 40,
+							"aria-hidden": "true"
+						}),
+						title: T("members.list.emptyTitle", "No members found"),
+						description: T("members.list.emptyDescription", "Invite someone to this organization to grant them access and assign their role."),
+						action: M && k(l.MEMBER_INVITE) ? {
+							label: T("members.invite.button", "Invite Member"),
+							onClick: () => D(`${O}/${N}/members/invite`)
+						} : void 0
+					})
+				}) : /* @__PURE__ */ S(re, { children: [/* @__PURE__ */ x("div", {
+					className: "grid gap-4 md:hidden",
+					children: K.map((e) => /* @__PURE__ */ S("article", {
+						className: "rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] p-4 shadow-[var(--shadow-elevation-1)]",
+						children: [/* @__PURE__ */ S("div", {
+							className: "flex items-start gap-3",
+							children: [/* @__PURE__ */ x(i, {
+								checked: I.has(e.id),
+								onChange: (t) => Q(e.id, t),
+								ariaLabel: `${T("members.list.selectMember", "Select member")} ${e.userId}`
+							}), /* @__PURE__ */ S("div", {
+								className: "flex min-w-0 flex-1 gap-3",
+								children: [/* @__PURE__ */ x("div", {
+									className: "flex h-10 w-10 items-center justify-center rounded-full bg-[var(--color-status-info-bgSubtle)] text-[var(--color-status-info-text)]",
+									children: /* @__PURE__ */ x(v, {
+										size: 18,
+										"aria-hidden": "true"
+									})
+								}), /* @__PURE__ */ S("div", {
+									className: "min-w-0 flex-1 space-y-3",
+									children: [/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ S("div", {
+										className: "flex flex-wrap items-start gap-2",
+										children: [/* @__PURE__ */ x("h2", {
+											className: "break-all text-base font-semibold text-[var(--color-text-primary)]",
+											children: e.userId
+										}), /* @__PURE__ */ x(u, { role: e.role })]
+									}), /* @__PURE__ */ S("p", {
+										className: "mt-1 break-all font-mono text-xs text-[var(--color-text-muted)]",
+										children: [
+											T("members.list.memberId", "Member ID"),
+											": ",
+											e.id
+										]
+									})] }), /* @__PURE__ */ S("dl", {
+										className: "grid grid-cols-1 gap-3 text-sm",
+										children: [/* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("dt", {
+											className: "text-[var(--color-text-secondary)]",
+											children: T("members.list.invitedBy", "Invited by")
+										}), /* @__PURE__ */ x("dd", {
+											className: "mt-1 break-all font-mono text-[var(--color-text-primary)]",
+											children: e.invitedBy || T("common.notAvailable", "N/A")
+										})] }), /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("dt", {
+											className: "text-[var(--color-text-secondary)]",
+											children: T("members.list.joined", "Joined")
+										}), /* @__PURE__ */ x("dd", {
+											className: "mt-1 text-[var(--color-text-primary)]",
+											children: E(e.joinedAt)
+										})] })]
+									})]
+								})]
+							})]
+						}), /* @__PURE__ */ S("div", {
+							className: "mt-4 flex flex-wrap gap-2 border-t border-[var(--color-border-default)] pt-4",
+							children: [/* @__PURE__ */ S("button", {
+								onClick: () => D(`${O}/${N}/members/${e.userId}`),
+								className: "inline-flex min-h-10 items-center gap-2 rounded-lg border border-[var(--color-border-default)] px-3 py-2 text-sm text-[var(--color-text-primary)] transition-all duration-200 hover:bg-[var(--color-bg-subtle)]",
+								children: [/* @__PURE__ */ x(h, {
+									size: 16,
+									"aria-hidden": "true"
+								}), T("common.view", "View")]
+							}), k(l.MEMBER_REMOVE) && /* @__PURE__ */ S("button", {
+								onClick: () => Z(e.userId),
+								disabled: G,
+								className: "inline-flex min-h-10 items-center gap-2 rounded-lg border border-[var(--color-status-error-border)] px-3 py-2 text-sm text-[var(--color-status-error-text)] transition-all duration-200 hover:bg-[var(--color-status-error-bgSubtle)] disabled:cursor-not-allowed disabled:opacity-50",
+								children: [/* @__PURE__ */ x(y, {
+									size: 16,
+									"aria-hidden": "true"
+								}), T("members.remove.confirm", "Remove")]
+							})]
+						})]
+					}, e.id))
+				}), /* @__PURE__ */ x("div", {
+					className: "hidden overflow-hidden rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-[var(--shadow-elevation-1)] md:block",
+					children: /* @__PURE__ */ x("div", {
+						className: "overflow-x-auto",
+						children: /* @__PURE__ */ S("table", {
+							className: "min-w-full",
+							children: [/* @__PURE__ */ x("thead", {
+								className: "bg-[var(--color-bg-subtle)]",
+								children: /* @__PURE__ */ S("tr", { children: [
+									/* @__PURE__ */ x("th", {
+										className: "w-12 px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]",
+										children: /* @__PURE__ */ x(i, {
+											checked: J,
+											indeterminate: Y,
+											onChange: $,
+											ariaLabel: T("members.list.selectAll", "Select all members")
+										})
+									}),
+									/* @__PURE__ */ x("th", {
+										className: "px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]",
+										children: T("members.list.column.user", "User")
+									}),
+									/* @__PURE__ */ x("th", {
+										className: "px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]",
+										children: T("members.list.column.role", "Role")
+									}),
+									/* @__PURE__ */ x("th", {
+										className: "px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]",
+										children: T("members.list.invitedBy", "Invited by")
+									}),
+									/* @__PURE__ */ x("th", {
+										className: "px-6 py-3 text-left text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]",
+										children: T("members.list.joined", "Joined")
+									}),
+									/* @__PURE__ */ x("th", {
+										className: "px-6 py-3 text-right text-xs font-semibold uppercase tracking-wide text-[var(--color-text-secondary)]",
+										children: T("common.actions", "Actions")
+									})
+								] })
+							}), /* @__PURE__ */ x("tbody", {
+								className: "divide-y divide-[var(--color-border-default)]",
+								children: K.map((e) => /* @__PURE__ */ S("tr", {
+									className: "transition-colors hover:bg-[var(--color-bg-subtle)]",
+									children: [
+										/* @__PURE__ */ x("td", {
+											className: "px-6 py-4 align-top",
+											children: /* @__PURE__ */ x(i, {
+												checked: I.has(e.id),
+												onChange: (t) => Q(e.id, t),
+												ariaLabel: `${T("members.list.selectMember", "Select member")} ${e.userId}`
+											})
+										}),
+										/* @__PURE__ */ x("td", {
+											className: "px-6 py-4",
+											children: /* @__PURE__ */ S("div", {
+												className: "flex items-start gap-3",
+												children: [/* @__PURE__ */ x("div", {
+													className: "flex h-10 w-10 items-center justify-center rounded-full bg-[var(--color-status-info-bgSubtle)] text-[var(--color-status-info-text)]",
+													children: /* @__PURE__ */ x(v, {
+														size: 18,
+														"aria-hidden": "true"
+													})
+												}), /* @__PURE__ */ S("div", {
+													className: "min-w-0",
+													children: [/* @__PURE__ */ x("p", {
+														className: "break-all font-medium text-[var(--color-text-primary)]",
+														children: e.userId
+													}), /* @__PURE__ */ S("p", {
+														className: "break-all font-mono text-xs text-[var(--color-text-muted)]",
+														children: [
+															T("common.idLabel", "ID"),
+															": ",
+															e.id
+														]
+													})]
+												})]
+											})
+										}),
+										/* @__PURE__ */ x("td", {
+											className: "px-6 py-4 align-top",
+											children: /* @__PURE__ */ x(u, { role: e.role })
+										}),
+										/* @__PURE__ */ x("td", {
+											className: "px-6 py-4 align-top text-sm text-[var(--color-text-secondary)]",
+											children: e.invitedBy || T("common.notAvailable", "N/A")
+										}),
+										/* @__PURE__ */ x("td", {
+											className: "px-6 py-4 align-top text-sm text-[var(--color-text-secondary)]",
+											children: E(e.joinedAt)
+										}),
+										/* @__PURE__ */ x("td", {
+											className: "px-6 py-4 align-top",
+											children: /* @__PURE__ */ S("div", {
+												className: "flex items-center justify-end gap-2",
+												children: [/* @__PURE__ */ x("button", {
+													onClick: () => D(`${O}/${N}/members/${e.userId}`),
+													className: "rounded-lg p-2 text-[var(--color-text-secondary)] transition-all duration-200 hover:bg-[var(--color-bg-muted)] hover:text-[var(--color-text-primary)]",
+													"aria-label": `${T("members.list.viewMember", "View member")} ${e.userId}`,
+													title: `${T("members.list.viewMember", "View member")} ${e.userId}`,
+													children: /* @__PURE__ */ x(h, {
+														size: 18,
+														"aria-hidden": "true"
+													})
+												}), k(l.MEMBER_REMOVE) && /* @__PURE__ */ x("button", {
+													onClick: () => Z(e.userId),
+													disabled: G,
+													className: "rounded-lg p-2 text-[var(--color-status-error-text)] transition-all duration-200 hover:bg-[var(--color-status-error-bgSubtle)] disabled:cursor-not-allowed disabled:opacity-50",
+													"aria-label": `${T("members.list.removeMember", "Remove member")} ${e.userId}`,
+													title: `${T("members.list.removeMember", "Remove member")} ${e.userId}`,
+													children: /* @__PURE__ */ x(y, {
+														size: 18,
+														"aria-hidden": "true"
+													})
+												})]
+											})
+										})
+									]
+								}, e.id))
+							})]
+						})
+					})
+				})] })
+			]
+		}), z]
+	}) : /* @__PURE__ */ x("div", {
+		className: "min-h-full bg-[var(--color-bg-canvas)] p-6",
+		children: /* @__PURE__ */ x("div", {
+			className: "p-8 text-center text-[var(--color-text-secondary)]",
+			children: T("members.list.noPermission", "You don't have permission to view members.")
+		})
+	}) : /* @__PURE__ */ x("div", {
+		className: "min-h-full bg-[var(--color-bg-canvas)] px-4 py-6 sm:px-6",
+		children: /* @__PURE__ */ x(o, {
+			message: T("members.list.missingOrg", "Organization ID is required to view members"),
+			action: {
+				label: T("members.list.goToOrganizations", "Go to Organizations"),
+				onClick: () => D(O)
+			}
+		})
+	});
+}
+//#endregion
+export { T as MembersListPage };
+
+//# sourceMappingURL=MembersListPage.js.map