@burdenoff/microfe-auth 2026.916.1 → 2026.917.2

package/dist/auth/pages/UsersPage.js

@@ -5,11 +5,12 @@ import { useUserOperations as i } from "../hooks/useUserOperations.js";
 import { useAuthPermissions as a } from "../hooks/useAuthPermissions.js";
 import { ConfirmActionDialog as o } from "../components/ConfirmActionDialog.js";
 import { nativeImpact as s, nativeNotify as c } from "../../utils/nativeBridge.js";
-import { useCallback as ee, useEffect as te, useId as l, useState as u } from "react";
-import { useNavigate as ne } from "react-router";
+import { validatePhoneNumber as ee, validateUserFields as te } from "../utils/validation.js";
+import { useCallback as ne, useEffect as re, useId as l, useState as u } from "react";
+import { useNavigate as ie } from "react-router";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 import { Button as m } from "@burdenoff/fe-libs/button";
-import { EmphasisPanel as re, IllustratedEmptyState as h, NextSteps as ie, PagePurpose as ae } from "@burdenoff/fe-libs/ui";
+import { EmphasisPanel as ae, IllustratedEmptyState as h, NextSteps as oe, PagePurpose as se } from "@burdenoff/fe-libs/ui";
 //#region src/auth/pages/UsersPage.tsx
 var g = [
 	"TENANT_ADMIN",
@@ -24,11 +25,11 @@ var g = [
 	"DELETED"
 ];
 function v() {
-	let v = t(), oe = ne(), y = e((e) => e.isAuthenticated), se = e((e) => e.user), { canViewUsers: ce, canUpdateUsers: le, canDeleteUsers: b, isLoading: ue } = a(), { listUsers: x, updateUser: de, deleteUser: fe, hardDeleteUser: pe, isLoading: S } = i(), C = l(), w = l(), T = l(), E = l(), me = l(), [D, O] = u(!1), k = async () => {
-		O(!0);
+	let v = t(), ce = ie(), y = e((e) => e.isAuthenticated), le = e((e) => e.user), { canViewUsers: ue, canUpdateUsers: de, canDeleteUsers: b, isLoading: fe } = a(), { listUsers: x, updateUser: pe, deleteUser: me, hardDeleteUser: he, isLoading: S } = i(), C = l(), ge = l(), w = l(), T = l(), _e = l(), [E, D] = u(!1), O = async () => {
+		D(!0);
 		try {
 			let e = {};
-			G && (e.search = G), K && (e.role = K), q && (e.status = q);
+			K && (e.search = K), q && (e.role = q), J && (e.status = J);
 			let t = (await x(e, {
 				offset: 0,
 				limit: 1e4
@@ -65,11 +66,11 @@ function v() {
 			].join(","))], a = new Blob([i.join("\n")], { type: "text/csv;charset=utf-8;" }), o = URL.createObjectURL(a), s = document.createElement("a");
 			s.href = o, s.download = `users-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.csv`, s.click(), URL.revokeObjectURL(o);
 		} catch (e) {
-			z(e instanceof Error ? e.message : "Failed to export users");
+			R(e instanceof Error ? e.message : "Failed to export users");
 		} finally {
-			O(!1);
+			D(!1);
 		}
-	}, [A, he] = u([]), [j, ge] = u(0), [_e, ve] = u(!1), [M, N] = u("list"), [P, F] = u(null), [I, L] = u({
+	}, [k, ve] = u([]), [A, ye] = u(0), [be, xe] = u(!1), [j, M] = u("list"), [N, P] = u(null), [F, I] = u({
 		username: "",
 		firstName: "",
 		lastName: "",
@@ -78,34 +79,34 @@ function v() {
 		role: "MEMBER",
 		status: "ACTIVE",
 		emailVerified: !1
-	}), [R, z] = u(null), [ye, B] = u(!1), [V, H] = u(null), [U, W] = u(null), [G, be] = u(""), [K, xe] = u(""), [q, Se] = u(""), [J, Y] = u(0), X = ee(async () => {
+	}), [L, R] = u(null), [z, B] = u(null), [Se, V] = u(!1), [H, U] = u(null), [W, G] = u(null), [K, Ce] = u(""), [q, we] = u(""), [J, Te] = u(""), [Y, X] = u(0), Z = ne(async () => {
 		if (y) try {
-			B(!1);
+			V(!1);
 			let e = {};
-			G && (e.search = G), K && (e.role = K), q && (e.status = q);
+			K && (e.search = K), q && (e.role = q), J && (e.status = J);
 			let t = await x(e, {
-				offset: J * 10,
+				offset: Y * 10,
 				limit: 10
 			});
-			he(t.users), ge(t.totalCount), ve(t.hasMore), z(null);
+			ve(t.users), ye(t.totalCount), xe(t.hasMore), R(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") ? (B(!0), z(null)) : z(t);
+			t.toLowerCase().includes("not authorized") || t.toLowerCase().includes("forbidden") ? (V(!0), R(null)) : R(t);
 		}
 	}, [
 		x,
-		G,
 		K,
 		q,
 		J,
+		Y,
 		y
 	]);
-	te(() => {
-		X();
-	}, [X]);
-	let Z = () => {
-		L({
+	re(() => {
+		Z();
+	}, [Z]);
+	let Q = () => {
+		I({
 			username: "",
 			firstName: "",
 			lastName: "",
@@ -114,42 +115,50 @@ function v() {
 			role: "MEMBER",
 			status: "ACTIVE",
 			emailVerified: !1
-		}), F(null), z(null), H(null);
-	}, Ce = async (e) => {
-		if (e.preventDefault(), P) {
-			z(null);
-			try {
-				await de(P.id, {
-					username: I.username || void 0,
-					firstName: I.firstName || void 0,
-					lastName: I.lastName || void 0,
-					name: I.name || void 0,
-					phoneNumber: I.phoneNumber || void 0,
-					role: I.role,
-					status: I.status,
-					emailVerified: I.emailVerified
-				}), H(v("auth.users.updateSuccess", "User updated successfully!")), N("list"), Z(), X();
-			} catch (e) {
-				z(e instanceof Error ? e.message : "Failed to update user");
-			}
+		}), P(null), R(null), B(null), U(null);
+	}, Ee = async (e) => {
+		if (e.preventDefault(), !N) return;
+		if (R(null), B(null), !ee(F.phoneNumber).valid) {
+			let e = v("auth.users.phoneNumber_invalid", "Invalid phone number");
+			B(e), R(e);
+			return;
+		}
+		let t = te(F, { requireAll: !1 });
+		if (!t.valid) {
+			R(t.errors.map((e) => v(`auth.users.${e.field}_${e.code}`, e.message)).join(" · "));
+			return;
+		}
+		try {
+			await pe(N.id, {
+				username: t.values.username || void 0,
+				firstName: t.values.firstName || void 0,
+				lastName: t.values.lastName || void 0,
+				name: F.name || void 0,
+				phoneNumber: F.phoneNumber || void 0,
+				role: F.role,
+				status: F.status,
+				emailVerified: F.emailVerified
+			}), U(v("auth.users.updateSuccess", "User updated successfully!")), M("list"), Q(), Z();
+		} catch (e) {
+			R(e instanceof Error ? e.message : "Failed to update user");
 		}
-	}, we = async (e) => {
+	}, De = async (e) => {
 		s("medium");
 		try {
-			let t = await fe(e.id);
-			t.success ? (c("success"), H(v("auth.users.userDeactivated", "User \"{email}\" has been deactivated.").replace("{email}", e.email)), W(null), X()) : (c("error"), z(t.message));
+			let t = await me(e.id);
+			t.success ? (c("success"), U(v("auth.users.userDeactivated", "User \"{email}\" has been deactivated.").replace("{email}", e.email)), G(null), Z()) : (c("error"), R(t.message));
 		} catch (e) {
-			c("error"), z(e instanceof Error ? e.message : "Failed to delete user");
+			c("error"), R(e instanceof Error ? e.message : "Failed to delete user");
 		}
-	}, Te = async (e) => {
+	}, Oe = async (e) => {
 		try {
-			let t = await pe(e.id);
-			t.success ? (H(v("auth.users.userPermanentlyDeleted", "User \"{email}\" has been permanently deleted.").replace("{email}", e.email)), W(null), X()) : z(t.message);
+			let t = await he(e.id);
+			t.success ? (U(v("auth.users.userPermanentlyDeleted", "User \"{email}\" has been permanently deleted.").replace("{email}", e.email)), G(null), Z()) : R(t.message);
 		} catch (e) {
-			z(e instanceof Error ? e.message : "Failed to hard delete user");
+			R(e instanceof Error ? e.message : "Failed to hard delete user");
 		}
-	}, Q = (e) => {
-		F(e), L({
+	}, ke = (e) => {
+		P(e), I({
 			username: e.username || "",
 			firstName: e.firstName || "",
 			lastName: e.lastName || "",
@@ -158,26 +167,26 @@ function v() {
 			role: e.role,
 			status: e.status,
 			emailVerified: e.emailVerified
-		}), N("edit"), z(null);
+		}), M("edit"), R(null);
 	}, $ = /* @__PURE__ */ f(o, {
-		open: U !== null,
+		open: W !== null,
 		onOpenChange: (e) => {
-			e || W(null);
+			e || G(null);
 		},
-		title: U?.type === "hard-delete" ? v("auth.users.hardDeleteTitle", "Permanently delete user?") : v("auth.users.deactivateTitle", "Deactivate user?"),
-		description: U?.type === "hard-delete" ? U ? v("auth.users.hardDeleteDesc", "This permanently deletes \"{email}\" and cannot be undone.").replace("{email}", U.user.email) : "" : U ? v("auth.users.deactivateDesc", "\"{email}\" will be prevented from signing in until reactivated.").replace("{email}", U.user.email) : "",
-		confirmText: U?.type === "hard-delete" ? v("auth.users.hardDeleteConfirm", "Delete permanently") : v("auth.users.deactivateConfirm", "Deactivate user"),
-		variant: U?.type === "hard-delete" ? "danger" : "warning",
+		title: W?.type === "hard-delete" ? v("auth.users.hardDeleteTitle", "Permanently delete user?") : v("auth.users.deactivateTitle", "Deactivate user?"),
+		description: W?.type === "hard-delete" ? W ? v("auth.users.hardDeleteDesc", "This permanently deletes \"{email}\" and cannot be undone.").replace("{email}", W.user.email) : "" : W ? v("auth.users.deactivateDesc", "\"{email}\" will be prevented from signing in until reactivated.").replace("{email}", W.user.email) : "",
+		confirmText: W?.type === "hard-delete" ? v("auth.users.hardDeleteConfirm", "Delete permanently") : v("auth.users.deactivateConfirm", "Deactivate user"),
+		variant: W?.type === "hard-delete" ? "danger" : "warning",
 		onConfirm: async () => {
-			if (U) {
-				if (U.type === "hard-delete") {
-					await Te(U.user);
+			if (W) {
+				if (W.type === "hard-delete") {
+					await Oe(W.user);
 					return;
 				}
-				await we(U.user);
+				await De(W.user);
 			}
 		}
-	}), Ee = (e) => {
+	}), Ae = (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";
@@ -187,7 +196,7 @@ function v() {
 			case "GUEST": return "bg-bg-sunken text-text-primary";
 			default: return "bg-bg-sunken text-text-primary";
 		}
-	}, De = (e) => {
+	}, je = (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";
@@ -196,7 +205,7 @@ function v() {
 			default: return "bg-bg-sunken text-text-primary";
 		}
 	};
-	return y ? ue ? /* @__PURE__ */ f("div", {
+	return y ? fe ? /* @__PURE__ */ f("div", {
 		className: "max-w-6xl mx-auto p-6",
 		children: /* @__PURE__ */ p("div", {
 			className: "text-center py-16",
@@ -205,7 +214,7 @@ function v() {
 				children: v("auth.users.loadingPermissions", "Loading permissions...")
 			})]
 		})
-	}) : !ce || ye ? /* @__PURE__ */ f("div", {
+	}) : !ue || Se ? /* @__PURE__ */ f("div", {
 		className: "max-w-6xl mx-auto p-6",
 		children: /* @__PURE__ */ f(h, {
 			illustration: "empty-generic",
@@ -216,7 +225,7 @@ function v() {
 				v("auth.users.requiredRoles", "Required roles: Super Admin, Tenant Admin, or Org Admin")
 			] })
 		})
-	}) : M === "list" ? /* @__PURE__ */ p("div", {
+	}) : j === "list" ? /* @__PURE__ */ p("div", {
 		className: "max-w-6xl mx-auto p-6",
 		children: [
 			$,
@@ -230,18 +239,18 @@ function v() {
 					children: [
 						v("auth.users.subtitle", "Manage users in your organization"),
 						" (",
-						j,
+						A,
 						" ",
 						v("auth.users.paginationUsers", "total"),
 						")"
 					]
 				})] }), /* @__PURE__ */ f("button", {
 					type: "button",
-					onClick: () => void k(),
-					disabled: D,
+					onClick: () => void O(),
+					disabled: E,
 					"aria-label": v("auth.users.exportAriaLabel", "Export user list"),
 					className: "flex items-center gap-2 px-4 py-2.5 rounded-xl border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium",
-					children: D ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(r, {
+					children: E ? /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(r, {
 						className: "size-4 animate-spin",
 						"aria-hidden": "true"
 					}), v("auth.users.exporting", "Exporting...")] }) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("svg", {
@@ -259,11 +268,11 @@ function v() {
 					}), v("auth.users.export", "Export")] })
 				})]
 			}),
-			/* @__PURE__ */ f(ae, {
+			/* @__PURE__ */ f(se, {
 				className: "mb-6",
 				children: v("auth.users.purpose", "Manage everyone with access to your organization. Search and filter accounts, review their role and status, edit details, or deactivate people who should no longer have access.")
 			}),
-			/* @__PURE__ */ p(re, {
+			/* @__PURE__ */ p(ae, {
 				className: "mb-6",
 				children: [
 					/* @__PURE__ */ f("p", {
@@ -272,7 +281,7 @@ function v() {
 					}),
 					/* @__PURE__ */ f("p", {
 						className: "mt-1 text-3xl font-semibold text-text-primary",
-						children: j
+						children: A
 					}),
 					/* @__PURE__ */ f("p", {
 						className: "mt-1 text-sm text-text-secondary",
@@ -284,30 +293,30 @@ function v() {
 				"aria-live": "polite",
 				"aria-atomic": "true",
 				className: "sr-only",
-				children: V
+				children: H
 			}),
 			/* @__PURE__ */ f("div", {
 				role: "alert",
 				"aria-live": "assertive",
 				"aria-atomic": "true",
 				className: "sr-only",
-				children: R
+				children: L
 			}),
-			V && /* @__PURE__ */ p("output", {
-				id: me,
+			H && /* @__PURE__ */ p("output", {
+				id: _e,
 				className: "block mb-6 p-4 rounded-xl bg-status-success-bg-subtle border border-status-success-border",
 				children: [/* @__PURE__ */ f("p", {
 					className: "text-status-success-text",
-					children: V
+					children: H
 				}), /* @__PURE__ */ f("button", {
 					type: "button",
-					onClick: () => H(null),
+					onClick: () => U(null),
 					className: "mt-2 text-sm text-status-success-text hover:underline",
 					children: v("auth.users.dismiss", "Dismiss")
 				})]
 			}),
-			R && /* @__PURE__ */ p("div", {
-				id: E,
+			L && /* @__PURE__ */ p("div", {
+				id: T,
 				role: "alert",
 				className: "mb-6 flex items-start gap-3 p-4 rounded-xl bg-status-error-bg-subtle border border-status-error-border",
 				children: [/* @__PURE__ */ f(n, {
@@ -317,10 +326,10 @@ function v() {
 					className: "flex-1",
 					children: [/* @__PURE__ */ f("p", {
 						className: "text-sm text-status-error-text",
-						children: R
+						children: L
 					}), /* @__PURE__ */ f("button", {
 						type: "button",
-						onClick: () => z(null),
+						onClick: () => R(null),
 						className: "mt-2 text-sm text-status-error-text hover:underline",
 						children: v("auth.users.dismiss", "Dismiss")
 					})]
@@ -342,22 +351,22 @@ function v() {
 								type: "search",
 								"aria-label": v("auth.users.searchLabel", "Search users"),
 								placeholder: v("auth.users.searchPlaceholder", "Search by email, username, or name..."),
-								value: G,
+								value: K,
 								onChange: (e) => {
-									be(e.target.value), Y(0);
+									Ce(e.target.value), X(0);
 								},
 								className: "w-full 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__ */ p("div", { children: [/* @__PURE__ */ f("label", {
-							htmlFor: w,
+							htmlFor: ge,
 							className: "sr-only",
 							children: v("auth.users.filterRoleLabel", "Filter by role")
 						}), /* @__PURE__ */ p("select", {
-							id: w,
-							value: K,
+							id: ge,
+							value: q,
 							onChange: (e) => {
-								xe(e.target.value), Y(0);
+								we(e.target.value), X(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__ */ f("option", {
@@ -369,14 +378,14 @@ function v() {
 							}, e))]
 						})] }),
 						/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
-							htmlFor: T,
+							htmlFor: w,
 							className: "sr-only",
 							children: v("auth.users.filterStatusLabel", "Filter by status")
 						}), /* @__PURE__ */ p("select", {
-							id: T,
-							value: q,
+							id: w,
+							value: J,
 							onChange: (e) => {
-								Se(e.target.value), Y(0);
+								Te(e.target.value), X(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__ */ f("option", {
@@ -401,10 +410,10 @@ function v() {
 					className: "ml-3 text-text-secondary",
 					children: v("auth.users.loadingUsers", "Loading users...")
 				})]
-			}) : A.length === 0 ? /* @__PURE__ */ f(h, {
-				illustration: G || K || q ? "empty-search" : "empty-people",
+			}) : k.length === 0 ? /* @__PURE__ */ f(h, {
+				illustration: K || q || J ? "empty-search" : "empty-people",
 				title: v("auth.users.noUsersFound", "No users found"),
-				description: G || K || q ? v("auth.users.noUsersFilteredDesc", "No users match your current search or filters. Try clearing them to see everyone.") : v("auth.users.noUsersDesc", "Once people join your organization they'll show up here for you to manage.")
+				description: K || q || J ? v("auth.users.noUsersFilteredDesc", "No users match your current search or filters. Try clearing them to see everyone.") : v("auth.users.noUsersDesc", "Once people join your organization they'll show up here for you to manage.")
 			}) : /* @__PURE__ */ p(d, { children: [
 				/* @__PURE__ */ f("div", {
 					className: "rounded-xl border border-border-subtle bg-bg-surface overflow-hidden shadow-sm",
@@ -447,7 +456,7 @@ function v() {
 										children: v("auth.users.columnActions", "Actions")
 									})
 								]
-							}) }), /* @__PURE__ */ f("tbody", { children: A.map((e) => /* @__PURE__ */ p("tr", {
+							}) }), /* @__PURE__ */ f("tbody", { children: k.map((e) => /* @__PURE__ */ p("tr", {
 								className: "border-b border-border-subtle last:border-b-0 hover:bg-bg-sunken/50 transition-colors",
 								children: [
 									/* @__PURE__ */ f("td", {
@@ -472,14 +481,14 @@ function v() {
 									/* @__PURE__ */ f("td", {
 										className: "p-4",
 										children: /* @__PURE__ */ f("span", {
-											className: `inline-block px-2.5 py-1 rounded-full text-xs font-medium whitespace-nowrap ${Ee(e.role)}`,
+											className: `inline-block px-2.5 py-1 rounded-full text-xs font-medium whitespace-nowrap ${Ae(e.role)}`,
 											children: e.role.replace("_", " ")
 										})
 									}),
 									/* @__PURE__ */ f("td", {
 										className: "p-4",
 										children: /* @__PURE__ */ f("span", {
-											className: `inline-block px-2.5 py-1 rounded-full text-xs font-medium whitespace-nowrap ${De(e.status)}`,
+											className: `inline-block px-2.5 py-1 rounded-full text-xs font-medium whitespace-nowrap ${je(e.status)}`,
 											children: e.status
 										})
 									}),
@@ -528,21 +537,21 @@ function v() {
 											children: [
 												/* @__PURE__ */ f("button", {
 													type: "button",
-													onClick: () => oe(`/auth/users/${e.id}`),
+													onClick: () => ce(`/auth/users/${e.id}`),
 													"aria-label": `${v("auth.users.actionView", "View")} ${e.name || e.username || e.email}`,
 													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: v("auth.users.actionView", "View")
 												}),
-												le && /* @__PURE__ */ f("button", {
+												de && /* @__PURE__ */ f("button", {
 													type: "button",
-													onClick: () => Q(e),
+													onClick: () => ke(e),
 													"aria-label": `${v("auth.users.actionEdit", "Edit")} ${e.name || e.username || e.email}`,
 													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: v("auth.users.actionEdit", "Edit")
 												}),
 												b && e.status !== "DELETED" && /* @__PURE__ */ f("button", {
 													type: "button",
-													onClick: () => W({
+													onClick: () => G({
 														type: "deactivate",
 														user: e
 													}),
@@ -565,15 +574,15 @@ function v() {
 						children: [
 							v("auth.users.showing", "Showing"),
 							" ",
-							J * 10 + 1,
+							Y * 10 + 1,
 							" ",
 							v("auth.users.to", "to"),
 							" ",
-							Math.min((J + 1) * 10, j),
+							Math.min((Y + 1) * 10, A),
 							" ",
 							v("auth.users.of", "of"),
 							" ",
-							j,
+							A,
 							" ",
 							v("auth.users.paginationUsers", "users")
 						]
@@ -583,15 +592,15 @@ function v() {
 							className: "flex gap-2",
 							children: [/* @__PURE__ */ f("button", {
 								type: "button",
-								onClick: () => Y((e) => Math.max(0, e - 1)),
-								disabled: J === 0,
+								onClick: () => X((e) => Math.max(0, e - 1)),
+								disabled: Y === 0,
 								"aria-label": v("auth.users.previousPageAriaLabel", "Go to previous page"),
 								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: v("auth.users.previousPage", "Previous")
 							}), /* @__PURE__ */ f("button", {
 								type: "button",
-								onClick: () => Y((e) => e + 1),
-								disabled: !_e,
+								onClick: () => X((e) => e + 1),
+								disabled: !be,
 								"aria-label": v("auth.users.nextPageAriaLabel", "Go to next page"),
 								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: v("auth.users.nextPage", "Next")
@@ -599,7 +608,7 @@ function v() {
 						})
 					})]
 				}),
-				/* @__PURE__ */ f(ie, {
+				/* @__PURE__ */ f(oe, {
 					className: "mt-8",
 					storageKey: "auth-users",
 					steps: [{
@@ -614,19 +623,19 @@ function v() {
 						id: "export-users",
 						label: v("auth.users.nextExport", "Export the user list"),
 						description: v("auth.users.nextExportDesc", "Download a CSV of users matching your current filters."),
-						onClick: () => void k()
+						onClick: () => void O()
 					}]
 				})
 			] })
 		]
-	}) : M === "view" && P ? /* @__PURE__ */ p("div", {
+	}) : j === "view" && N ? /* @__PURE__ */ p("div", {
 		className: "max-w-4xl mx-auto p-6",
 		children: [
 			$,
 			/* @__PURE__ */ p("button", {
 				type: "button",
 				onClick: () => {
-					N("list"), Z();
+					M("list"), Q();
 				},
 				className: "mb-6 flex items-center gap-2 text-text-link hover:underline font-medium",
 				children: [/* @__PURE__ */ f("svg", {
@@ -649,24 +658,24 @@ function v() {
 						className: "flex items-center gap-4 mb-8",
 						children: [/* @__PURE__ */ f("div", {
 							className: "auth-brand-badge flex size-20 items-center justify-center rounded-full text-3xl font-semibold",
-							children: (P.name || P.username || P.email).charAt(0).toUpperCase()
+							children: (N.name || N.username || N.email).charAt(0).toUpperCase()
 						}), /* @__PURE__ */ p("div", { children: [
 							/* @__PURE__ */ f("h1", {
 								className: "text-2xl font-semibold text-text-primary",
-								children: P.name || P.username
+								children: N.name || N.username
 							}),
 							/* @__PURE__ */ f("p", {
 								className: "text-text-secondary",
-								children: P.email
+								children: N.email
 							}),
 							/* @__PURE__ */ p("div", {
 								className: "flex items-center gap-2 mt-2",
 								children: [/* @__PURE__ */ f("span", {
-									className: `px-2.5 py-1 rounded-full text-xs font-medium ${Ee(P.role)}`,
-									children: P.role.replace("_", " ")
+									className: `px-2.5 py-1 rounded-full text-xs font-medium ${Ae(N.role)}`,
+									children: N.role.replace("_", " ")
 								}), /* @__PURE__ */ f("span", {
-									className: `px-2.5 py-1 rounded-full text-xs font-medium ${De(P.status)}`,
-									children: P.status
+									className: `px-2.5 py-1 rounded-full text-xs font-medium ${je(N.status)}`,
+									children: N.status
 								})]
 							})
 						] })]
@@ -681,7 +690,7 @@ function v() {
 									children: v("auth.users.viewDetailsUsername", "Username")
 								}), /* @__PURE__ */ f("p", {
 									className: "text-text-primary font-medium",
-									children: P.username
+									children: N.username
 								})]
 							}),
 							/* @__PURE__ */ p("div", {
@@ -691,7 +700,7 @@ function v() {
 									children: v("auth.users.viewDetailsEmail", "Email")
 								}), /* @__PURE__ */ f("p", {
 									className: "text-text-primary font-medium",
-									children: P.email
+									children: N.email
 								})]
 							}),
 							/* @__PURE__ */ p("div", {
@@ -701,7 +710,7 @@ function v() {
 									children: v("auth.users.viewDetailsEmailVerified", "Email Verified")
 								}), /* @__PURE__ */ f("p", {
 									className: "text-text-primary font-medium",
-									children: P.emailVerified ? /* @__PURE__ */ f("span", {
+									children: N.emailVerified ? /* @__PURE__ */ f("span", {
 										className: "text-status-success-text",
 										children: v("auth.users.verifiedYes", "Yes")
 									}) : /* @__PURE__ */ f("span", {
@@ -717,7 +726,7 @@ function v() {
 									children: v("auth.users.viewDetailsMfaEnabled", "MFA Enabled")
 								}), /* @__PURE__ */ f("p", {
 									className: "text-text-primary font-medium",
-									children: P.mfaEnabled ? /* @__PURE__ */ f("span", {
+									children: N.mfaEnabled ? /* @__PURE__ */ f("span", {
 										className: "text-status-success-text",
 										children: v("auth.users.verifiedYes", "Yes")
 									}) : /* @__PURE__ */ f("span", {
@@ -726,14 +735,14 @@ function v() {
 									})
 								})]
 							}),
-							P.phoneNumber && /* @__PURE__ */ p("div", {
+							N.phoneNumber && /* @__PURE__ */ p("div", {
 								className: "p-4 rounded-lg bg-bg-canvas/50",
 								children: [/* @__PURE__ */ f("label", {
 									className: "block text-sm font-medium text-text-secondary mb-1",
 									children: v("auth.users.viewDetailsPhoneNumber", "Phone Number")
 								}), /* @__PURE__ */ f("p", {
 									className: "text-text-primary font-medium",
-									children: P.phoneNumber
+									children: N.phoneNumber
 								})]
 							}),
 							/* @__PURE__ */ p("div", {
@@ -743,7 +752,7 @@ function v() {
 									children: v("auth.users.viewDetailsLastLogin", "Last Login")
 								}), /* @__PURE__ */ f("p", {
 									className: "text-text-primary font-medium",
-									children: P.lastLoginAt ? new Date(P.lastLoginAt).toLocaleString() : v("auth.users.lastLoginNever", "Never")
+									children: N.lastLoginAt ? new Date(N.lastLoginAt).toLocaleString() : v("auth.users.lastLoginNever", "Never")
 								})]
 							}),
 							/* @__PURE__ */ p("div", {
@@ -753,7 +762,7 @@ function v() {
 									children: v("auth.users.viewDetailsCreated", "Created")
 								}), /* @__PURE__ */ f("p", {
 									className: "text-text-primary font-medium",
-									children: new Date(P.createdAt).toLocaleString()
+									children: new Date(N.createdAt).toLocaleString()
 								})]
 							}),
 							/* @__PURE__ */ p("div", {
@@ -763,7 +772,7 @@ function v() {
 									children: v("auth.users.viewDetailsLastUpdated", "Last Updated")
 								}), /* @__PURE__ */ f("p", {
 									className: "text-text-primary font-medium",
-									children: new Date(P.updatedAt).toLocaleString()
+									children: new Date(N.updatedAt).toLocaleString()
 								})]
 							})
 						]
@@ -773,25 +782,25 @@ function v() {
 						children: [
 							/* @__PURE__ */ f(m, {
 								type: "button",
-								onClick: () => Q(P),
+								onClick: () => ke(N),
 								variant: "default",
 								className: "font-semibold",
 								children: v("auth.users.editUser", "Edit User")
 							}),
-							P.status !== "DELETED" && /* @__PURE__ */ f("button", {
+							N.status !== "DELETED" && /* @__PURE__ */ f("button", {
 								type: "button",
-								onClick: () => W({
+								onClick: () => G({
 									type: "deactivate",
-									user: P
+									user: N
 								}),
 								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: v("auth.users.deleteUser", "Delete User")
 							}),
-							b && P.status === "DELETED" && se?.role === "SUPER_ADMIN" && /* @__PURE__ */ f("button", {
+							b && N.status === "DELETED" && le?.role === "SUPER_ADMIN" && /* @__PURE__ */ f("button", {
 								type: "button",
-								onClick: () => W({
+								onClick: () => G({
 									type: "hard-delete",
-									user: P
+									user: N
 								}),
 								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: v("auth.users.permanentlyDelete", "Permanently Delete")
@@ -808,7 +817,7 @@ function v() {
 			/* @__PURE__ */ p("button", {
 				type: "button",
 				onClick: () => {
-					N("list"), Z();
+					M("list"), Q();
 				},
 				className: "mb-6 flex items-center gap-2 text-text-link hover:underline font-medium",
 				children: [/* @__PURE__ */ f("svg", {
@@ -831,28 +840,28 @@ function v() {
 						className: "text-2xl font-semibold text-text-primary mb-2",
 						children: v("auth.users.editUser", "Edit User")
 					}),
-					P && /* @__PURE__ */ p("p", {
+					N && /* @__PURE__ */ p("p", {
 						className: "text-text-secondary mb-6",
 						children: [
 							v("auth.users.editingUser", "Editing:"),
 							" ",
-							/* @__PURE__ */ f("strong", { children: P.email })
+							/* @__PURE__ */ f("strong", { children: N.email })
 						]
 					}),
-					R && /* @__PURE__ */ p("div", {
+					L && /* @__PURE__ */ p("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__ */ f(n, { className: "size-5 text-status-error-text flex-shrink-0 mt-0.5" }), /* @__PURE__ */ f("div", {
 							className: "flex-1",
 							children: /* @__PURE__ */ f("p", {
 								className: "text-sm text-status-error-text",
-								children: R
+								children: L
 							})
 						})]
 					}),
 					/* @__PURE__ */ p("form", {
-						onSubmit: Ce,
+						onSubmit: Ee,
 						className: "space-y-6",
-						"aria-describedby": R ? E : void 0,
+						"aria-describedby": L ? T : void 0,
 						noValidate: !0,
 						children: [
 							/* @__PURE__ */ p("div", {
@@ -865,9 +874,9 @@ function v() {
 									id: "edit-username",
 									type: "text",
 									"aria-label": v("auth.users.fieldUsername", "Username"),
-									value: I.username,
-									onChange: (e) => L({
-										...I,
+									value: F.username,
+									onChange: (e) => I({
+										...F,
 										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"
@@ -879,9 +888,9 @@ function v() {
 									id: "edit-name",
 									type: "text",
 									"aria-label": v("auth.users.fieldName", "Name"),
-									value: I.name,
-									onChange: (e) => L({
-										...I,
+									value: F.name,
+									onChange: (e) => I({
+										...F,
 										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"
@@ -897,9 +906,9 @@ function v() {
 									id: "edit-firstName",
 									type: "text",
 									"aria-label": v("auth.users.fieldFirstName", "First Name"),
-									value: I.firstName,
-									onChange: (e) => L({
-										...I,
+									value: F.firstName,
+									onChange: (e) => I({
+										...F,
 										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"
@@ -911,29 +920,42 @@ function v() {
 									id: "edit-lastName",
 									type: "text",
 									"aria-label": v("auth.users.fieldLastName", "Last Name"),
-									value: I.lastName,
-									onChange: (e) => L({
-										...I,
+									value: F.lastName,
+									onChange: (e) => I({
+										...F,
 										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__ */ p("div", { children: [/* @__PURE__ */ f("label", {
-								htmlFor: "edit-phoneNumber",
-								className: "block text-sm font-medium text-text-primary mb-2",
-								children: v("auth.users.fieldPhoneNumber", "Phone Number")
-							}), /* @__PURE__ */ f("input", {
-								id: "edit-phoneNumber",
-								type: "tel",
-								"aria-label": v("auth.users.fieldPhoneNumber", "Phone Number"),
-								value: I.phoneNumber,
-								onChange: (e) => L({
-									...I,
-									phoneNumber: e.target.value
+							/* @__PURE__ */ p("div", { children: [
+								/* @__PURE__ */ f("label", {
+									htmlFor: "edit-phoneNumber",
+									className: "block text-sm font-medium text-text-primary mb-2",
+									children: v("auth.users.fieldPhoneNumber", "Phone Number")
+								}),
+								/* @__PURE__ */ f("input", {
+									id: "edit-phoneNumber",
+									type: "tel",
+									"aria-label": v("auth.users.fieldPhoneNumber", "Phone Number"),
+									"aria-invalid": z ? !0 : void 0,
+									"aria-describedby": z ? "edit-phoneNumber-error" : void 0,
+									value: F.phoneNumber,
+									onChange: (e) => {
+										I({
+											...F,
+											phoneNumber: e.target.value
+										}), z && (B(null), R(null));
+									},
+									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"
 								}),
-								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"
-							})] }),
+								z && /* @__PURE__ */ f("p", {
+									id: "edit-phoneNumber-error",
+									role: "alert",
+									className: "mt-2 text-sm text-[var(--color-status-error-text)]",
+									children: z
+								})
+							] }),
 							/* @__PURE__ */ p("div", {
 								className: "grid grid-cols-2 gap-4",
 								children: [/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("label", {
@@ -943,9 +965,9 @@ function v() {
 								}), /* @__PURE__ */ f("select", {
 									id: "edit-role",
 									"aria-label": v("auth.users.fieldRole", "Role"),
-									value: I.role,
-									onChange: (e) => L({
-										...I,
+									value: F.role,
+									onChange: (e) => I({
+										...F,
 										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",
@@ -960,9 +982,9 @@ function v() {
 								}), /* @__PURE__ */ f("select", {
 									id: "edit-status",
 									"aria-label": v("auth.users.fieldStatus", "Status"),
-									value: I.status,
-									onChange: (e) => L({
-										...I,
+									value: F.status,
+									onChange: (e) => I({
+										...F,
 										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",
@@ -977,9 +999,9 @@ function v() {
 								children: [/* @__PURE__ */ f("input", {
 									type: "checkbox",
 									id: "emailVerified",
-									checked: I.emailVerified,
-									onChange: (e) => L({
-										...I,
+									checked: F.emailVerified,
+									onChange: (e) => I({
+										...F,
 										emailVerified: e.target.checked
 									}),
 									className: "size-5 rounded border-border-default text-text-link focus:ring-action-primary-bg"
@@ -990,7 +1012,7 @@ function v() {
 								})]
 							}),
 							/* @__PURE__ */ p("div", {
-								className: "flex gap-3 pt-4",
+								className: "flex gap-3 pt-6 mt-6 border-t border-border-default",
 								children: [/* @__PURE__ */ f(m, {
 									type: "submit",
 									disabled: S,
@@ -1001,9 +1023,9 @@ function v() {
 								}), /* @__PURE__ */ f("button", {
 									type: "button",
 									onClick: () => {
-										N("list"), Z();
+										M("list"), Q();
 									},
-									className: "px-6 py-3 rounded-xl border border-border-default text-text-primary font-medium hover:bg-bg-sunken transition-colors",
+									className: "inline-flex items-center h-10 px-8 rounded-xl border border-border-default text-text-primary font-medium hover:bg-bg-sunken transition-colors",
 									children: v("auth.users.cancel", "Cancel")
 								})]
 							})