@burdenoff/microfe-auth 2026.510.127

package/dist/auth/pages/UsersPage.js

@@ -0,0 +1,899 @@
+import { useAuthStore as e } from "../store/authStore.js";
+import { useUserOperations as t } from "../hooks/useUserOperations.js";
+import { useAuthPermissions as n } from "../hooks/useAuthPermissions.js";
+import "../hooks/index.js";
+import { AlertIcon as r, SpinnerIcon as i } from "../components/AuthIcons.js";
+import { ConfirmActionDialog as a } from "../components/ConfirmActionDialog.js";
+import { nativeImpact as ee, nativeNotify as o } from "../../utils/nativeBridge.js";
+import { useCallback as te, useEffect as ne, useState as s } from "react";
+import { useNavigate as re } from "react-router-dom";
+import { useI18n as c } from "@burdenoff/fe-libs/shared/providers/shell";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/auth/pages/UsersPage.tsx
+var f = [
+	"SUPER_ADMIN",
+	"TENANT_ADMIN",
+	"ORG_ADMIN",
+	"WORKSPACE_ADMIN",
+	"MEMBER",
+	"GUEST"
+], p = [
+	"ACTIVE",
+	"INACTIVE",
+	"SUSPENDED",
+	"DELETED"
+];
+function m() {
+	let m = re(), { t: ie } = c(), ae = (e, t) => {
+		let n = ie(e);
+		return n === e ? t : n;
+	}, h = e((e) => e.isAuthenticated), g = e((e) => e.user), { canViewUsers: _, canUpdateUsers: oe, canDeleteUsers: v, isLoading: se } = n(), { listUsers: y, updateUser: b, deleteUser: ce, hardDeleteUser: le, isLoading: x } = t(), [S, C] = s([]), [w, T] = s(0), [E, ue] = s(!1), [D, O] = s("list"), [k, A] = s(null), [j, M] = s({
+		username: "",
+		firstName: "",
+		lastName: "",
+		name: "",
+		phoneNumber: "",
+		role: "MEMBER",
+		status: "ACTIVE",
+		emailVerified: !1
+	}), [N, P] = s(null), [F, I] = s(!1), [L, R] = s(null), [z, B] = s(null), [V, H] = s(""), [U, de] = s(""), [W, G] = s(""), [K, q] = s(0), J = te(async () => {
+		if (h) try {
+			I(!1);
+			let e = {};
+			V && (e.search = V), U && (e.role = U), W && (e.status = W);
+			let t = await y(e, {
+				offset: K * 10,
+				limit: 10
+			});
+			C(t.users), T(t.totalCount), ue(t.hasMore), P(null);
+		} catch (e) {
+			if (e instanceof Error && (e.name === "AbortError" || e.message.includes("aborted"))) return;
+			let t = e instanceof Error ? e.message : "Failed to fetch users";
+			t.toLowerCase().includes("not authorized") || t.toLowerCase().includes("forbidden") ? (I(!0), P(null)) : P(t);
+		}
+	}, [
+		y,
+		V,
+		U,
+		W,
+		K,
+		h
+	]);
+	ne(() => {
+		J();
+	}, [J]);
+	let Y = () => {
+		M({
+			username: "",
+			firstName: "",
+			lastName: "",
+			name: "",
+			phoneNumber: "",
+			role: "MEMBER",
+			status: "ACTIVE",
+			emailVerified: !1
+		}), A(null), P(null), R(null);
+	}, fe = async (e) => {
+		if (e.preventDefault(), k) {
+			P(null);
+			try {
+				await b(k.id, {
+					username: j.username || void 0,
+					firstName: j.firstName || void 0,
+					lastName: j.lastName || void 0,
+					name: j.name || void 0,
+					phoneNumber: j.phoneNumber || void 0,
+					role: j.role,
+					status: j.status,
+					emailVerified: j.emailVerified
+				}), R("User updated successfully!"), O("list"), Y(), J();
+			} catch (e) {
+				P(e instanceof Error ? e.message : "Failed to update user");
+			}
+		}
+	}, pe = async (e) => {
+		ee("medium");
+		try {
+			let t = await ce(e.id);
+			t.success ? (o("success"), R(`User "${e.email}" has been deactivated.`), B(null), J()) : (o("error"), P(t.message));
+		} catch (e) {
+			o("error"), P(e instanceof Error ? e.message : "Failed to delete user");
+		}
+	}, me = async (e) => {
+		try {
+			let t = await le(e.id);
+			t.success ? (R(`User "${e.email}" has been permanently deleted.`), B(null), J()) : P(t.message);
+		} catch (e) {
+			P(e instanceof Error ? e.message : "Failed to hard delete user");
+		}
+	}, X = (e) => {
+		A(e), M({
+			username: e.username || "",
+			firstName: e.firstName || "",
+			lastName: e.lastName || "",
+			name: e.name || "",
+			phoneNumber: e.phoneNumber || "",
+			role: e.role,
+			status: e.status,
+			emailVerified: e.emailVerified
+		}), O("edit"), P(null);
+	}, Z = /* @__PURE__ */ u(a, {
+		open: z !== null,
+		onOpenChange: (e) => {
+			e || B(null);
+		},
+		title: z?.type === "hard-delete" ? "Permanently delete user?" : "Deactivate user?",
+		description: z?.type === "hard-delete" ? z ? `This permanently deletes "${z.user.email}" and cannot be undone.` : "" : z ? `"${z.user.email}" will be prevented from signing in until reactivated.` : "",
+		confirmText: z?.type === "hard-delete" ? "Delete permanently" : "Deactivate user",
+		variant: z?.type === "hard-delete" ? "danger" : "warning",
+		onConfirm: async () => {
+			if (z) {
+				if (z.type === "hard-delete") {
+					await me(z.user);
+					return;
+				}
+				await pe(z.user);
+			}
+		}
+	}), Q = (e) => {
+		switch (e) {
+			case "SUPER_ADMIN": return "bg-accent-purple-subtle text-accent-purple";
+			case "TENANT_ADMIN": return "bg-status-info-bg-subtle text-status-info-text";
+			case "ORG_ADMIN": return "bg-accent-indigo-subtle text-accent-indigo";
+			case "WORKSPACE_ADMIN": return "bg-accent-cyan-subtle text-accent-cyan";
+			case "MEMBER": return "bg-status-success-bg-subtle text-status-success-text";
+			case "GUEST": return "bg-bg-sunken text-text-primary";
+			default: return "bg-bg-sunken text-text-primary";
+		}
+	}, $ = (e) => {
+		switch (e) {
+			case "ACTIVE": return "bg-status-success-bg-subtle text-status-success-text";
+			case "INACTIVE": return "bg-status-warning-bg-subtle text-status-warning-text";
+			case "SUSPENDED": return "bg-status-warning-bg-subtle text-status-warning-text";
+			case "DELETED": return "bg-status-error-bg-subtle text-status-error-text";
+			default: return "bg-bg-sunken text-text-primary";
+		}
+	};
+	return h ? g && ![
+		"SUPER_ADMIN",
+		"TENANT_ADMIN",
+		"ORG_ADMIN"
+	].includes(g.role) ? /* @__PURE__ */ u("div", {
+		className: "max-w-6xl mx-auto p-6",
+		children: /* @__PURE__ */ d("div", {
+			className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
+			children: [
+				/* @__PURE__ */ u("div", {
+					className: "w-16 h-16 mx-auto mb-4 rounded-full bg-status-error-bg-subtle flex items-center justify-center",
+					children: /* @__PURE__ */ u("svg", {
+						className: "w-8 h-8 text-status-error-text",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ u("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 1.5,
+							d: "M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+						})
+					})
+				}),
+				/* @__PURE__ */ u("h2", {
+					className: "text-xl font-semibold text-text-primary mb-2",
+					children: "You are not allowed to access this page"
+				}),
+				/* @__PURE__ */ u("p", {
+					className: "text-text-secondary",
+					children: "This page is restricted to administrators only. Contact your admin if you need access."
+				})
+			]
+		})
+	}) : se ? /* @__PURE__ */ u("div", {
+		className: "max-w-6xl mx-auto p-6",
+		children: /* @__PURE__ */ d("div", {
+			className: "text-center py-16",
+			children: [/* @__PURE__ */ u(i, { className: "w-8 h-8 mx-auto text-text-secondary animate-spin" }), /* @__PURE__ */ u("p", {
+				className: "mt-4 text-text-secondary",
+				children: "Loading permissions..."
+			})]
+		})
+	}) : !_ || F ? /* @__PURE__ */ u("div", {
+		className: "max-w-6xl mx-auto p-6",
+		children: /* @__PURE__ */ d("div", {
+			className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
+			children: [
+				/* @__PURE__ */ u("div", {
+					className: "w-16 h-16 mx-auto mb-4 rounded-full bg-status-error-bg-subtle flex items-center justify-center",
+					children: /* @__PURE__ */ u("svg", {
+						className: "w-8 h-8 text-status-error-text",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ u("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 1.5,
+							d: "M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+						})
+					})
+				}),
+				/* @__PURE__ */ u("h2", {
+					className: "text-xl font-semibold text-text-primary mb-2",
+					children: "Admin Access Required"
+				}),
+				/* @__PURE__ */ u("p", {
+					className: "text-text-secondary mb-4",
+					children: "You need administrator privileges to view and manage users."
+				}),
+				/* @__PURE__ */ u("p", {
+					className: "text-sm text-text-secondary",
+					children: "Required roles: Super Admin, Tenant Admin, or Org Admin"
+				})
+			]
+		})
+	}) : D === "list" ? /* @__PURE__ */ d("div", {
+		className: "max-w-6xl mx-auto p-6",
+		children: [
+			Z,
+			/* @__PURE__ */ u("div", {
+				className: "flex items-center justify-between mb-8",
+				children: /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h1", {
+					className: "text-3xl font-semibold text-text-primary",
+					children: "Users"
+				}), /* @__PURE__ */ d("p", {
+					className: "text-text-secondary mt-2",
+					children: [
+						"Manage users in your organization (",
+						w,
+						" total)"
+					]
+				})] })
+			}),
+			L && /* @__PURE__ */ d("div", {
+				className: "mb-6 p-4 rounded-xl bg-status-success-bg-subtle border border-status-success-border",
+				children: [/* @__PURE__ */ u("p", {
+					className: "text-status-success-text",
+					children: L
+				}), /* @__PURE__ */ u("button", {
+					onClick: () => R(null),
+					className: "mt-2 text-sm text-status-success-text hover:underline",
+					children: "Dismiss"
+				})]
+			}),
+			N && /* @__PURE__ */ d("div", {
+				className: "mb-6 flex items-start gap-3 p-4 rounded-xl bg-status-error-bg-subtle border border-status-error-border",
+				children: [/* @__PURE__ */ u(r, { className: "w-5 h-5 text-status-error-text flex-shrink-0 mt-0.5" }), /* @__PURE__ */ d("div", {
+					className: "flex-1",
+					children: [/* @__PURE__ */ u("p", {
+						className: "text-sm text-status-error-text",
+						children: N
+					}), /* @__PURE__ */ u("button", {
+						onClick: () => P(null),
+						className: "mt-2 text-sm text-status-error-text hover:underline",
+						children: "Dismiss"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "mb-6 p-4 rounded-xl border border-border-subtle bg-bg-surface",
+				children: /* @__PURE__ */ d("div", {
+					className: "flex flex-wrap gap-4",
+					children: [
+						/* @__PURE__ */ u("input", {
+							type: "text",
+							placeholder: "Search by email, username, or name...",
+							value: V,
+							onChange: (e) => {
+								H(e.target.value), q(0);
+							},
+							className: "flex-1 min-w-[200px] px-4 py-2.5 border border-border-default rounded-xl bg-bg-surface text-text-primary placeholder-text-tertiary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all"
+						}),
+						/* @__PURE__ */ d("select", {
+							value: U,
+							onChange: (e) => {
+								de(e.target.value), q(0);
+							},
+							className: "px-4 py-2.5 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all",
+							children: [/* @__PURE__ */ u("option", {
+								value: "",
+								children: "All Roles"
+							}), f.map((e) => /* @__PURE__ */ u("option", {
+								value: e,
+								children: e.replace("_", " ")
+							}, e))]
+						}),
+						/* @__PURE__ */ d("select", {
+							value: W,
+							onChange: (e) => {
+								G(e.target.value), q(0);
+							},
+							className: "px-4 py-2.5 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all",
+							children: [/* @__PURE__ */ u("option", {
+								value: "",
+								children: "All Statuses"
+							}), p.map((e) => /* @__PURE__ */ u("option", {
+								value: e,
+								children: e
+							}, e))]
+						})
+					]
+				})
+			}),
+			x ? /* @__PURE__ */ d("div", {
+				className: "flex items-center justify-center py-12",
+				children: [/* @__PURE__ */ u(i, { className: "w-8 h-8 text-text-link animate-spin" }), /* @__PURE__ */ u("span", {
+					className: "ml-3 text-text-secondary",
+					children: "Loading users..."
+				})]
+			}) : S.length === 0 ? /* @__PURE__ */ d("div", {
+				className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
+				children: [/* @__PURE__ */ u("div", {
+					className: "w-16 h-16 mx-auto mb-4 rounded-full bg-bg-sunken flex items-center justify-center",
+					children: /* @__PURE__ */ u("svg", {
+						className: "w-8 h-8 text-text-tertiary",
+						fill: "none",
+						viewBox: "0 0 24 24",
+						stroke: "currentColor",
+						children: /* @__PURE__ */ u("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 1.5,
+							d: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+						})
+					})
+				}), /* @__PURE__ */ u("p", {
+					className: "text-text-secondary",
+					children: "No users found"
+				})]
+			}) : /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("div", {
+				className: "rounded-xl border border-border-subtle bg-bg-surface overflow-hidden shadow-sm",
+				children: /* @__PURE__ */ u("div", {
+					className: "overflow-x-auto",
+					children: /* @__PURE__ */ d("table", {
+						className: "w-full min-w-[800px]",
+						children: [/* @__PURE__ */ u("thead", { children: /* @__PURE__ */ d("tr", {
+							className: "border-b border-border-subtle bg-bg-canvas",
+							children: [
+								/* @__PURE__ */ u("th", {
+									className: "text-left py-4 px-4 text-sm font-medium text-text-secondary w-[280px]",
+									children: "User"
+								}),
+								/* @__PURE__ */ u("th", {
+									className: "text-left py-4 px-4 text-sm font-medium text-text-secondary w-[130px]",
+									children: "Role"
+								}),
+								/* @__PURE__ */ u("th", {
+									className: "text-left py-4 px-4 text-sm font-medium text-text-secondary w-[100px]",
+									children: "Status"
+								}),
+								/* @__PURE__ */ u("th", {
+									className: "text-left py-4 px-4 text-sm font-medium text-text-secondary w-[80px]",
+									children: "Verified"
+								}),
+								/* @__PURE__ */ u("th", {
+									className: "text-left py-4 px-4 text-sm font-medium text-text-secondary w-[100px]",
+									children: "Last Login"
+								}),
+								/* @__PURE__ */ u("th", {
+									className: "text-right py-4 px-4 text-sm font-medium text-text-secondary w-[180px]",
+									children: "Actions"
+								})
+							]
+						}) }), /* @__PURE__ */ u("tbody", { children: S.map((e) => /* @__PURE__ */ d("tr", {
+							className: "border-b border-border-subtle last:border-b-0 hover:bg-bg-sunken/50 transition-colors",
+							children: [
+								/* @__PURE__ */ u("td", {
+									className: "py-4 px-4",
+									children: /* @__PURE__ */ d("div", {
+										className: "flex items-center gap-3 min-w-0",
+										children: [/* @__PURE__ */ u("div", {
+											className: "auth-brand-badge flex h-10 w-10 shrink-0 items-center justify-center rounded-full font-medium",
+											children: (e.name || e.username || e.email).charAt(0).toUpperCase()
+										}), /* @__PURE__ */ d("div", {
+											className: "min-w-0 flex-1",
+											children: [/* @__PURE__ */ u("p", {
+												className: "font-medium text-text-primary truncate",
+												children: e.name || e.username
+											}), /* @__PURE__ */ u("p", {
+												className: "text-sm text-text-secondary truncate",
+												children: e.email
+											})]
+										})]
+									})
+								}),
+								/* @__PURE__ */ u("td", {
+									className: "py-4 px-4",
+									children: /* @__PURE__ */ u("span", {
+										className: `inline-block px-2.5 py-1 rounded-full text-xs font-medium whitespace-nowrap ${Q(e.role)}`,
+										children: e.role.replace("_", " ")
+									})
+								}),
+								/* @__PURE__ */ u("td", {
+									className: "py-4 px-4",
+									children: /* @__PURE__ */ u("span", {
+										className: `inline-block px-2.5 py-1 rounded-full text-xs font-medium whitespace-nowrap ${$(e.status)}`,
+										children: e.status
+									})
+								}),
+								/* @__PURE__ */ u("td", {
+									className: "py-4 px-4",
+									children: e.emailVerified ? /* @__PURE__ */ d("span", {
+										className: "inline-flex items-center gap-1 text-status-success-text whitespace-nowrap",
+										children: [/* @__PURE__ */ u("svg", {
+											className: "w-4 h-4 flex-shrink-0",
+											fill: "currentColor",
+											viewBox: "0 0 20 20",
+											children: /* @__PURE__ */ u("path", {
+												fillRule: "evenodd",
+												d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
+												clipRule: "evenodd"
+											})
+										}), /* @__PURE__ */ u("span", {
+											className: "text-sm",
+											children: "Yes"
+										})]
+									}) : /* @__PURE__ */ d("span", {
+										className: "inline-flex items-center gap-1 text-status-warning-text whitespace-nowrap",
+										children: [/* @__PURE__ */ u("svg", {
+											className: "w-4 h-4 flex-shrink-0",
+											fill: "currentColor",
+											viewBox: "0 0 20 20",
+											children: /* @__PURE__ */ u("path", {
+												fillRule: "evenodd",
+												d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
+												clipRule: "evenodd"
+											})
+										}), /* @__PURE__ */ u("span", {
+											className: "text-sm",
+											children: "No"
+										})]
+									})
+								}),
+								/* @__PURE__ */ u("td", {
+									className: "py-4 px-4 text-sm text-text-secondary whitespace-nowrap",
+									children: e.lastLoginAt ? new Date(e.lastLoginAt).toLocaleDateString() : "Never"
+								}),
+								/* @__PURE__ */ u("td", {
+									className: "py-4 px-4",
+									children: /* @__PURE__ */ d("div", {
+										className: "flex justify-end gap-1.5 flex-nowrap",
+										children: [
+											/* @__PURE__ */ u("button", {
+												onClick: () => m(`/auth/users/${e.id}`),
+												className: "px-2.5 py-1.5 rounded-lg text-xs font-medium border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken transition-colors whitespace-nowrap flex-shrink-0",
+												children: "View"
+											}),
+											oe && /* @__PURE__ */ u("button", {
+												onClick: () => X(e),
+												className: "px-2.5 py-1.5 rounded-lg text-xs font-medium border border-status-info-border text-text-link bg-bg-surface hover:bg-status-info-bg-subtle transition-colors whitespace-nowrap flex-shrink-0",
+												children: "Edit"
+											}),
+											v && e.status !== "DELETED" && /* @__PURE__ */ u("button", {
+												onClick: () => B({
+													type: "deactivate",
+													user: e
+												}),
+												className: "px-2.5 py-1.5 rounded-lg text-xs font-medium border border-status-error-border text-status-error-text bg-bg-surface hover:bg-status-error-bg-subtle transition-colors whitespace-nowrap flex-shrink-0",
+												children: "Delete"
+											})
+										]
+									})
+								})
+							]
+						}, e.id)) })]
+					})
+				})
+			}), /* @__PURE__ */ d("div", {
+				className: "mt-6 flex items-center justify-between",
+				children: [/* @__PURE__ */ d("p", {
+					className: "text-sm text-text-secondary",
+					children: [
+						"Showing ",
+						K * 10 + 1,
+						" to",
+						" ",
+						Math.min((K + 1) * 10, w),
+						" of",
+						" ",
+						w,
+						" users"
+					]
+				}), /* @__PURE__ */ d("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ u("button", {
+						onClick: () => q((e) => Math.max(0, e - 1)),
+						disabled: K === 0,
+						className: "px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors",
+						children: "Previous"
+					}), /* @__PURE__ */ u("button", {
+						onClick: () => q((e) => e + 1),
+						disabled: !E,
+						className: "px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface disabled:opacity-50 disabled:cursor-not-allowed hover:bg-bg-sunken transition-colors",
+						children: "Next"
+					})]
+				})]
+			})] })
+		]
+	}) : D === "view" && k ? /* @__PURE__ */ d("div", {
+		className: "max-w-4xl mx-auto p-6",
+		children: [
+			Z,
+			/* @__PURE__ */ d("button", {
+				onClick: () => {
+					O("list"), Y();
+				},
+				className: "mb-6 flex items-center gap-2 text-text-link hover:underline font-medium",
+				children: [/* @__PURE__ */ u("svg", {
+					className: "w-4 h-4",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					stroke: "currentColor",
+					children: /* @__PURE__ */ u("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M10 19l-7-7m0 0l7-7m-7 7h18"
+					})
+				}), "Back to Users"]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "p-6 rounded-xl border border-border-subtle bg-bg-surface shadow-sm",
+				children: [
+					/* @__PURE__ */ d("div", {
+						className: "flex items-center gap-4 mb-8",
+						children: [/* @__PURE__ */ u("div", {
+							className: "auth-brand-badge flex h-20 w-20 items-center justify-center rounded-full text-3xl font-semibold",
+							children: (k.name || k.username || k.email).charAt(0).toUpperCase()
+						}), /* @__PURE__ */ d("div", { children: [
+							/* @__PURE__ */ u("h1", {
+								className: "text-2xl font-semibold text-text-primary",
+								children: k.name || k.username
+							}),
+							/* @__PURE__ */ u("p", {
+								className: "text-text-secondary",
+								children: k.email
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "flex items-center gap-2 mt-2",
+								children: [/* @__PURE__ */ u("span", {
+									className: `px-2.5 py-1 rounded-full text-xs font-medium ${Q(k.role)}`,
+									children: k.role.replace("_", " ")
+								}), /* @__PURE__ */ u("span", {
+									className: `px-2.5 py-1 rounded-full text-xs font-medium ${$(k.status)}`,
+									children: k.status
+								})]
+							})
+						] })]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "grid grid-cols-2 gap-6",
+						children: [
+							/* @__PURE__ */ d("div", {
+								className: "p-4 rounded-lg bg-bg-canvas/50",
+								children: [/* @__PURE__ */ u("label", {
+									className: "block text-sm font-medium text-text-secondary mb-1",
+									children: "Username"
+								}), /* @__PURE__ */ u("p", {
+									className: "text-text-primary font-medium",
+									children: k.username
+								})]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "p-4 rounded-lg bg-bg-canvas/50",
+								children: [/* @__PURE__ */ u("label", {
+									className: "block text-sm font-medium text-text-secondary mb-1",
+									children: "Email"
+								}), /* @__PURE__ */ u("p", {
+									className: "text-text-primary font-medium",
+									children: k.email
+								})]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "p-4 rounded-lg bg-bg-canvas/50",
+								children: [/* @__PURE__ */ u("label", {
+									className: "block text-sm font-medium text-text-secondary mb-1",
+									children: "Email Verified"
+								}), /* @__PURE__ */ u("p", {
+									className: "text-text-primary font-medium",
+									children: k.emailVerified ? /* @__PURE__ */ u("span", {
+										className: "text-status-success-text",
+										children: "Yes"
+									}) : /* @__PURE__ */ u("span", {
+										className: "text-status-warning-text",
+										children: "No"
+									})
+								})]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "p-4 rounded-lg bg-bg-canvas/50",
+								children: [/* @__PURE__ */ u("label", {
+									className: "block text-sm font-medium text-text-secondary mb-1",
+									children: "MFA Enabled"
+								}), /* @__PURE__ */ u("p", {
+									className: "text-text-primary font-medium",
+									children: k.mfaEnabled ? /* @__PURE__ */ u("span", {
+										className: "text-status-success-text",
+										children: "Yes"
+									}) : /* @__PURE__ */ u("span", {
+										className: "text-text-secondary",
+										children: "No"
+									})
+								})]
+							}),
+							k.phoneNumber && /* @__PURE__ */ d("div", {
+								className: "p-4 rounded-lg bg-bg-canvas/50",
+								children: [/* @__PURE__ */ u("label", {
+									className: "block text-sm font-medium text-text-secondary mb-1",
+									children: "Phone Number"
+								}), /* @__PURE__ */ u("p", {
+									className: "text-text-primary font-medium",
+									children: k.phoneNumber
+								})]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "p-4 rounded-lg bg-bg-canvas/50",
+								children: [/* @__PURE__ */ u("label", {
+									className: "block text-sm font-medium text-text-secondary mb-1",
+									children: "Last Login"
+								}), /* @__PURE__ */ u("p", {
+									className: "text-text-primary font-medium",
+									children: k.lastLoginAt ? new Date(k.lastLoginAt).toLocaleString() : "Never"
+								})]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "p-4 rounded-lg bg-bg-canvas/50",
+								children: [/* @__PURE__ */ u("label", {
+									className: "block text-sm font-medium text-text-secondary mb-1",
+									children: "Created"
+								}), /* @__PURE__ */ u("p", {
+									className: "text-text-primary font-medium",
+									children: new Date(k.createdAt).toLocaleString()
+								})]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "p-4 rounded-lg bg-bg-canvas/50",
+								children: [/* @__PURE__ */ u("label", {
+									className: "block text-sm font-medium text-text-secondary mb-1",
+									children: "Last Updated"
+								}), /* @__PURE__ */ u("p", {
+									className: "text-text-primary font-medium",
+									children: new Date(k.updatedAt).toLocaleString()
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "mt-8 pt-6 border-t border-border-subtle flex gap-3",
+						children: [
+							/* @__PURE__ */ u("button", {
+								onClick: () => X(k),
+								className: "auth-primary-button px-4 py-2.5 font-medium",
+								children: "Edit User"
+							}),
+							k.status !== "DELETED" && /* @__PURE__ */ u("button", {
+								onClick: () => B({
+									type: "deactivate",
+									user: k
+								}),
+								className: "px-4 py-2.5 rounded-xl border border-status-error-border text-status-error-text font-medium hover:bg-status-error-bg-subtle transition-colors",
+								children: "Delete User"
+							}),
+							v && k.status === "DELETED" && /* @__PURE__ */ u("button", {
+								onClick: () => B({
+									type: "hard-delete",
+									user: k
+								}),
+								className: "px-4 py-2.5 rounded-xl bg-status-error-bg text-white font-medium hover:bg-status-error-bg-hover transition-colors",
+								children: "Permanently Delete"
+							})
+						]
+					})
+				]
+			})
+		]
+	}) : /* @__PURE__ */ d("div", {
+		className: "max-w-2xl mx-auto p-6",
+		children: [
+			Z,
+			/* @__PURE__ */ d("button", {
+				onClick: () => {
+					O("list"), Y();
+				},
+				className: "mb-6 flex items-center gap-2 text-text-link hover:underline font-medium",
+				children: [/* @__PURE__ */ u("svg", {
+					className: "w-4 h-4",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					stroke: "currentColor",
+					children: /* @__PURE__ */ u("path", {
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						strokeWidth: 2,
+						d: "M10 19l-7-7m0 0l7-7m-7 7h18"
+					})
+				}), "Back to Users"]
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "p-6 rounded-xl border border-border-subtle bg-bg-surface shadow-sm",
+				children: [
+					/* @__PURE__ */ u("h1", {
+						className: "text-2xl font-semibold text-text-primary mb-2",
+						children: "Edit User"
+					}),
+					k && /* @__PURE__ */ d("p", {
+						className: "text-text-secondary mb-6",
+						children: ["Editing: ", /* @__PURE__ */ u("strong", { children: k.email })]
+					}),
+					N && /* @__PURE__ */ d("div", {
+						className: "mb-6 flex items-start gap-3 p-4 rounded-xl bg-status-error-bg-subtle border border-status-error-border",
+						children: [/* @__PURE__ */ u(r, { className: "w-5 h-5 text-status-error-text flex-shrink-0 mt-0.5" }), /* @__PURE__ */ u("div", {
+							className: "flex-1",
+							children: /* @__PURE__ */ u("p", {
+								className: "text-sm text-status-error-text",
+								children: N
+							})
+						})]
+					}),
+					/* @__PURE__ */ d("form", {
+						onSubmit: fe,
+						className: "space-y-6",
+						children: [
+							/* @__PURE__ */ d("div", {
+								className: "grid grid-cols-2 gap-4",
+								children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+									className: "block text-sm font-medium text-text-primary mb-2",
+									children: "Username"
+								}), /* @__PURE__ */ u("input", {
+									type: "text",
+									value: j.username,
+									onChange: (e) => M({
+										...j,
+										username: e.target.value
+									}),
+									className: "block w-full px-4 py-3 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all"
+								})] }), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+									className: "block text-sm font-medium text-text-primary mb-2",
+									children: "Name"
+								}), /* @__PURE__ */ u("input", {
+									type: "text",
+									value: j.name,
+									onChange: (e) => M({
+										...j,
+										name: e.target.value
+									}),
+									className: "block w-full px-4 py-3 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all"
+								})] })]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "grid grid-cols-2 gap-4",
+								children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+									className: "block text-sm font-medium text-text-primary mb-2",
+									children: "First Name"
+								}), /* @__PURE__ */ u("input", {
+									type: "text",
+									value: j.firstName,
+									onChange: (e) => M({
+										...j,
+										firstName: e.target.value
+									}),
+									className: "block w-full px-4 py-3 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all"
+								})] }), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+									className: "block text-sm font-medium text-text-primary mb-2",
+									children: "Last Name"
+								}), /* @__PURE__ */ u("input", {
+									type: "text",
+									value: j.lastName,
+									onChange: (e) => M({
+										...j,
+										lastName: e.target.value
+									}),
+									className: "block w-full px-4 py-3 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all"
+								})] })]
+							}),
+							/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+								className: "block text-sm font-medium text-text-primary mb-2",
+								children: "Phone Number"
+							}), /* @__PURE__ */ u("input", {
+								type: "tel",
+								value: j.phoneNumber,
+								onChange: (e) => M({
+									...j,
+									phoneNumber: e.target.value
+								}),
+								className: "block w-full px-4 py-3 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all"
+							})] }),
+							/* @__PURE__ */ d("div", {
+								className: "grid grid-cols-2 gap-4",
+								children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+									className: "block text-sm font-medium text-text-primary mb-2",
+									children: "Role"
+								}), /* @__PURE__ */ u("select", {
+									value: j.role,
+									onChange: (e) => M({
+										...j,
+										role: e.target.value
+									}),
+									className: "block w-full px-4 py-3 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all",
+									children: f.map((e) => /* @__PURE__ */ u("option", {
+										value: e,
+										children: e.replace("_", " ")
+									}, e))
+								})] }), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+									className: "block text-sm font-medium text-text-primary mb-2",
+									children: "Status"
+								}), /* @__PURE__ */ u("select", {
+									value: j.status,
+									onChange: (e) => M({
+										...j,
+										status: e.target.value
+									}),
+									className: "block w-full px-4 py-3 border border-border-default rounded-xl bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all",
+									children: p.map((e) => /* @__PURE__ */ u("option", {
+										value: e,
+										children: e
+									}, e))
+								})] })]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "flex items-center gap-3 p-4 rounded-xl bg-bg-canvas/50",
+								children: [/* @__PURE__ */ u("input", {
+									type: "checkbox",
+									id: "emailVerified",
+									checked: j.emailVerified,
+									onChange: (e) => M({
+										...j,
+										emailVerified: e.target.checked
+									}),
+									className: "w-5 h-5 rounded border-border-default text-text-link focus:ring-action-primary-bg"
+								}), /* @__PURE__ */ u("label", {
+									htmlFor: "emailVerified",
+									className: "text-sm font-medium text-text-primary",
+									children: "Email Verified"
+								})]
+							}),
+							/* @__PURE__ */ d("div", {
+								className: "flex gap-3 pt-4",
+								children: [/* @__PURE__ */ u("button", {
+									type: "submit",
+									disabled: x,
+									className: "auth-primary-button flex items-center gap-2 px-6 py-3 font-medium",
+									children: x ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(i, { className: "w-4 h-4 animate-spin" }), "Saving..."] }) : "Save Changes"
+								}), /* @__PURE__ */ u("button", {
+									type: "button",
+									onClick: () => {
+										O("list"), Y();
+									},
+									className: "px-6 py-3 rounded-xl border border-border-default text-text-primary font-medium hover:bg-bg-sunken transition-colors",
+									children: "Cancel"
+								})]
+							})
+						]
+					})
+				]
+			})
+		]
+	}) : /* @__PURE__ */ u("div", {
+		className: "max-w-6xl mx-auto p-6",
+		children: /* @__PURE__ */ d("div", {
+			className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
+			children: [
+				/* @__PURE__ */ u("div", {
+					className: "w-16 h-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center",
+					children: /* @__PURE__ */ u(r, { className: "w-8 h-8 text-status-warning-text" })
+				}),
+				/* @__PURE__ */ u("h2", {
+					className: "text-xl font-semibold text-text-primary mb-2",
+					children: ae("auth.users.authRequired", "Authentication Required")
+				}),
+				/* @__PURE__ */ u("p", {
+					className: "text-text-secondary",
+					children: "Please sign in to manage users"
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { m as UsersPage };
+
+//# sourceMappingURL=UsersPage.js.map