@burdenoff/microfe-auth 2026.624.2 → 2026.625.1

package/dist/auth/pages/UserDetailsPage.js

@@ -8,8 +8,9 @@ import { useEffect as s, useState as c } from "react";
 import { useNavigate as l, useParams as u } from "react-router-dom";
 import { useI18n as d } from "@burdenoff/fe-libs/shared/providers/shell";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { EmphasisPanel as h, IllustratedEmptyState as g, NextSteps as _, PagePurpose as v } from "@burdenoff/fe-libs/ui";
 //#region src/auth/pages/UserDetailsPage.tsx
-var h = (e) => {
+var y = (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";
@@ -19,7 +20,7 @@ var h = (e) => {
 		case "GUEST": return "bg-bg-sunken text-text-primary";
 		default: return "bg-bg-sunken text-text-primary";
 	}
-}, g = (e) => {
+}, b = (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";
@@ -28,59 +29,59 @@ var h = (e) => {
 		default: return "bg-bg-sunken text-text-primary";
 	}
 };
-function _() {
-	let { id: _ } = u(), v = l(), { t: y } = d(), b = (e, t) => {
-		let n = y(e);
+function x() {
+	let { id: x } = u(), S = l(), { t: C } = d(), w = (e, t) => {
+		let n = C(e);
 		return n === e ? t : n;
-	}, x = e((e) => e.isAuthenticated), S = e((e) => e.user), { canViewUsers: C, canDeleteUsers: w, isLoading: T } = i(), { getUser: E, deleteUser: D, hardDeleteUser: O } = r(), [k, A] = c(null), [j, M] = c(!0), [N, P] = c(null), [F, I] = c(null), [L, R] = c(null), [z, { loading: B }] = a(), [V, H] = c(null);
+	}, T = e((e) => e.isAuthenticated), E = e((e) => e.user), { canViewUsers: D, canDeleteUsers: O, isLoading: k } = i(), { getUser: A, deleteUser: j, hardDeleteUser: M } = r(), [N, P] = c(null), [F, I] = c(!0), [L, R] = c(null), [z, B] = c(null), [V, H] = c(null), [U, { loading: W }] = a(), [G, K] = c(null);
 	s(() => {
 		let e = !1;
-		if (!_) {
-			P("Missing user id"), M(!1);
+		if (!x) {
+			R("Missing user id"), I(!1);
 			return;
 		}
-		if (!x) {
-			M(!1);
+		if (!T) {
+			I(!1);
 			return;
 		}
-		return M(!0), P(null), E(_).then((t) => {
-			e || (t ? A(t) : P(b("auth.userDetails.userNotFound", "User not found")));
+		return I(!0), R(null), A(x).then((t) => {
+			e || (t ? P(t) : R(w("auth.userDetails.userNotFound", "User not found")));
 		}).catch((t) => {
-			e || P(t instanceof Error ? t.message : "Failed to fetch user details");
+			e || R(t instanceof Error ? t.message : "Failed to fetch user details");
 		}).finally(() => {
-			e || M(!1);
+			e || I(!1);
 		}), () => {
 			e = !0;
 		};
 	}, [
-		_,
-		E,
-		x
+		x,
+		A,
+		T
 	]);
-	let U = async () => {
-		if (k) try {
-			let e = await D(k.id);
+	let q = async () => {
+		if (N) try {
+			let e = await j(N.id);
 			if (e.success) {
-				I(b("auth.userDetails.userDeactivated", "User \"{email}\" has been deactivated.").replace("{email}", k.email)), R(null);
-				let e = await E(k.id);
-				e && A(e);
-			} else P(e.message);
+				B(w("auth.userDetails.userDeactivated", "User \"{email}\" has been deactivated.").replace("{email}", N.email)), H(null);
+				let e = await A(N.id);
+				e && P(e);
+			} else R(e.message);
 		} catch (e) {
-			P(e instanceof Error ? e.message : "Failed to delete user");
+			R(e instanceof Error ? e.message : "Failed to delete user");
 		}
-	}, W = async () => {
-		if (k) try {
-			let e = await O(k.id);
-			e.success ? (R(null), v("/auth/users")) : P(e.message);
+	}, J = async () => {
+		if (N) try {
+			let e = await M(N.id);
+			e.success ? (H(null), S("/auth/users")) : R(e.message);
 		} catch (e) {
-			P(e instanceof Error ? e.message : "Failed to hard delete user");
+			R(e instanceof Error ? e.message : "Failed to hard delete user");
 		}
-	}, G = async () => {
-		if (k) {
-			H(null);
+	}, Y = async () => {
+		if (N) {
+			K(null);
 			try {
-				await z({ variables: { input: {
-					name: `User Data Export - ${k.email}`,
+				await U({ variables: { input: {
+					name: `User Data Export - ${N.email}`,
 					entityTypes: [
 						"user_profile",
 						"user_sessions",
@@ -91,11 +92,11 @@ function _() {
 					includeMetadata: !0
 				} } });
 			} catch (e) {
-				H(e instanceof Error ? e.message : "Failed to start export");
+				K(e instanceof Error ? e.message : "Failed to start export");
 			}
 		}
 	};
-	return x ? T || j ? /* @__PURE__ */ p("div", {
+	return T ? k || F ? /* @__PURE__ */ p("div", {
 		className: "max-w-4xl mx-auto p-6",
 		children: /* @__PURE__ */ m("div", {
 			className: "text-center py-16",
@@ -106,14 +107,14 @@ function _() {
 				"aria-hidden": "true"
 			}), /* @__PURE__ */ p("p", {
 				className: "mt-4 text-text-secondary",
-				children: b("auth.userDetails.loading", "Loading user...")
+				children: w("auth.userDetails.loading", "Loading user...")
 			})]
 		})
-	}) : C ? N || !k ? /* @__PURE__ */ m("div", {
+	}) : D ? L || !N ? /* @__PURE__ */ m("div", {
 		className: "max-w-4xl mx-auto p-6",
 		children: [/* @__PURE__ */ m("button", {
 			type: "button",
-			onClick: () => v("/auth/users"),
+			onClick: () => S("/auth/users"),
 			className: "mb-6 flex items-center gap-2 text-text-link hover:underline font-medium",
 			children: [/* @__PURE__ */ p("svg", {
 				className: "size-4",
@@ -127,39 +128,36 @@ function _() {
 					strokeWidth: 2,
 					d: "M10 19l-7-7m0 0l7-7m-7 7h18"
 				})
-			}), b("auth.userDetails.backToUsers", "Back to Users")]
-		}), /* @__PURE__ */ m("div", {
+			}), w("auth.userDetails.backToUsers", "Back to Users")]
+		}), /* @__PURE__ */ p("div", {
 			role: "alert",
-			className: "flex items-start gap-3 p-4 rounded-xl bg-status-error-bg-subtle border border-status-error-border",
-			children: [/* @__PURE__ */ p(t, {
-				className: "size-5 text-status-error-text flex-shrink-0 mt-0.5",
-				"aria-hidden": "true"
-			}), /* @__PURE__ */ p("p", {
-				className: "text-sm text-status-error-text",
-				children: N ?? b("auth.userDetails.userNotFound", "User not found")
-			})]
+			children: /* @__PURE__ */ p(g, {
+				illustration: "empty-search",
+				title: w("auth.userDetails.userNotFound", "User not found"),
+				description: L ?? w("auth.userDetails.userNotFoundDesc", "We couldn't find this user. They may have been removed, or the link is out of date.")
+			})
 		})]
 	}) : /* @__PURE__ */ m("div", {
 		className: "max-w-4xl mx-auto p-6",
 		children: [
 			/* @__PURE__ */ p(o, {
-				open: L !== null,
+				open: V !== null,
 				onOpenChange: (e) => {
-					e || R(null);
+					e || H(null);
 				},
-				title: L === "hard-delete" ? b("auth.userDetails.hardDeleteTitle", "Permanently delete user?") : b("auth.userDetails.deactivateTitle", "Deactivate user?"),
-				description: L === "hard-delete" ? b("auth.userDetails.hardDeleteDesc", "This permanently deletes \"{email}\" and cannot be undone.").replace("{email}", k.email) : b("auth.userDetails.deactivateDesc", "\"{email}\" will be prevented from signing in until reactivated.").replace("{email}", k.email),
-				confirmText: L === "hard-delete" ? b("auth.userDetails.hardDeleteConfirm", "Delete permanently") : b("auth.userDetails.deactivateConfirm", "Deactivate user"),
-				variant: L === "hard-delete" ? "danger" : "warning",
+				title: V === "hard-delete" ? w("auth.userDetails.hardDeleteTitle", "Permanently delete user?") : w("auth.userDetails.deactivateTitle", "Deactivate user?"),
+				description: V === "hard-delete" ? w("auth.userDetails.hardDeleteDesc", "This permanently deletes \"{email}\" and cannot be undone.").replace("{email}", N.email) : w("auth.userDetails.deactivateDesc", "\"{email}\" will be prevented from signing in until reactivated.").replace("{email}", N.email),
+				confirmText: V === "hard-delete" ? w("auth.userDetails.hardDeleteConfirm", "Delete permanently") : w("auth.userDetails.deactivateConfirm", "Deactivate user"),
+				variant: V === "hard-delete" ? "danger" : "warning",
 				onConfirm: async () => {
-					L === "hard-delete" ? await W() : L === "deactivate" && await U();
+					V === "hard-delete" ? await J() : V === "deactivate" && await q();
 				}
 			}),
 			/* @__PURE__ */ m("div", {
 				className: "flex items-center justify-between mb-6",
 				children: [/* @__PURE__ */ m("button", {
 					type: "button",
-					onClick: () => v("/auth/users"),
+					onClick: () => S("/auth/users"),
 					className: "flex items-center gap-2 text-text-link hover:underline font-medium",
 					children: [/* @__PURE__ */ p("svg", {
 						className: "size-4",
@@ -173,17 +171,17 @@ function _() {
 							strokeWidth: 2,
 							d: "M10 19l-7-7m0 0l7-7m-7 7h18"
 						})
-					}), b("auth.userDetails.backToUsers", "Back to Users")]
+					}), w("auth.userDetails.backToUsers", "Back to Users")]
 				}), /* @__PURE__ */ p("button", {
 					type: "button",
-					onClick: () => void G(),
-					disabled: B,
-					"aria-label": b("auth.userDetails.exportAriaLabel", "Export user data"),
+					onClick: () => void Y(),
+					disabled: W,
+					"aria-label": w("auth.userDetails.exportAriaLabel", "Export user data"),
 					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: B ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(n, {
+					children: W ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(n, {
 						className: "size-4 animate-spin",
 						"aria-hidden": "true"
-					}), b("auth.userDetails.exporting", "Exporting...")] }) : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("svg", {
+					}), w("auth.userDetails.exporting", "Exporting...")] }) : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("svg", {
 						className: "size-4",
 						fill: "none",
 						viewBox: "0 0 24 24",
@@ -195,10 +193,14 @@ function _() {
 							strokeWidth: 2,
 							d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
 						})
-					}), b("auth.userDetails.exportButton", "Export User Data")] })
+					}), w("auth.userDetails.exportButton", "Export User Data")] })
 				})]
 			}),
-			V && /* @__PURE__ */ m("div", {
+			/* @__PURE__ */ p(v, {
+				className: "mb-6",
+				children: w("auth.userDetails.purpose", "The full record for this person — their role, status, verification, and activity. From here you can export their data, deactivate them, or (for super admins) permanently delete a removed account.")
+			}),
+			G && /* @__PURE__ */ m("div", {
 				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__ */ p(t, {
@@ -206,51 +208,54 @@ function _() {
 					"aria-hidden": "true"
 				}), /* @__PURE__ */ p("p", {
 					className: "text-sm text-status-error-text",
-					children: V
+					children: G
 				})]
 			}),
-			F && /* @__PURE__ */ m("div", {
+			z && /* @__PURE__ */ m("div", {
 				className: "mb-6 p-4 rounded-xl bg-status-success-bg-subtle border border-status-success-border",
 				children: [/* @__PURE__ */ p("p", {
 					className: "text-status-success-text",
-					children: F
+					children: z
 				}), /* @__PURE__ */ p("button", {
 					type: "button",
-					onClick: () => I(null),
+					onClick: () => B(null),
 					className: "mt-2 text-sm text-status-success-text hover:underline",
-					children: b("auth.userDetails.dismiss", "Dismiss")
+					children: w("auth.userDetails.dismiss", "Dismiss")
 				})]
 			}),
 			/* @__PURE__ */ m("div", {
 				className: "p-6 rounded-xl border border-border-subtle bg-bg-surface shadow-sm",
 				children: [
-					/* @__PURE__ */ m("div", {
-						className: "flex items-center gap-4 mb-8",
-						children: [/* @__PURE__ */ p("div", {
-							className: "auth-brand-badge flex size-20 items-center justify-center rounded-full text-3xl font-semibold",
-							"aria-hidden": "true",
-							children: (k.name || k.username || k.email).charAt(0).toUpperCase()
-						}), /* @__PURE__ */ m("div", { children: [
-							/* @__PURE__ */ p("h1", {
-								className: "text-2xl font-semibold text-text-primary",
-								children: k.name || k.username
-							}),
-							/* @__PURE__ */ p("p", {
-								className: "text-text-secondary",
-								"data-testid": "user-email",
-								children: k.email
-							}),
-							/* @__PURE__ */ m("div", {
-								className: "flex items-center gap-2 mt-2",
-								children: [/* @__PURE__ */ p("span", {
-									className: `px-2.5 py-1 rounded-full text-xs font-medium ${h(k.role)}`,
-									children: k.role.replace("_", " ")
-								}), /* @__PURE__ */ p("span", {
-									className: `px-2.5 py-1 rounded-full text-xs font-medium ${g(k.status)}`,
-									children: k.status
-								})]
-							})
-						] })]
+					/* @__PURE__ */ p(h, {
+						className: "mb-8",
+						children: /* @__PURE__ */ m("div", {
+							className: "flex items-center gap-4",
+							children: [/* @__PURE__ */ p("div", {
+								className: "auth-brand-badge flex size-20 items-center justify-center rounded-full text-3xl font-semibold",
+								"aria-hidden": "true",
+								children: (N.name || N.username || N.email).charAt(0).toUpperCase()
+							}), /* @__PURE__ */ m("div", { children: [
+								/* @__PURE__ */ p("h1", {
+									className: "text-2xl font-semibold text-text-primary",
+									children: N.name || N.username
+								}),
+								/* @__PURE__ */ p("p", {
+									className: "text-text-secondary",
+									"data-testid": "user-email",
+									children: N.email
+								}),
+								/* @__PURE__ */ m("div", {
+									className: "flex items-center gap-2 mt-2",
+									children: [/* @__PURE__ */ p("span", {
+										className: `px-2.5 py-1 rounded-full text-xs font-medium ${y(N.role)}`,
+										children: N.role.replace("_", " ")
+									}), /* @__PURE__ */ p("span", {
+										className: `px-2.5 py-1 rounded-full text-xs font-medium ${b(N.status)}`,
+										children: N.status
+									})]
+								})
+							] })]
+						})
 					}),
 					/* @__PURE__ */ m("dl", {
 						className: "grid grid-cols-2 gap-6",
@@ -259,35 +264,35 @@ function _() {
 								className: "p-4 rounded-lg bg-bg-canvas/50",
 								children: [/* @__PURE__ */ p("dt", {
 									className: "text-sm font-medium text-text-secondary mb-1",
-									children: b("auth.userDetails.username", "Username")
+									children: w("auth.userDetails.username", "Username")
 								}), /* @__PURE__ */ p("dd", {
 									className: "text-text-primary font-medium",
-									children: k.username
+									children: N.username
 								})]
 							}),
 							/* @__PURE__ */ m("div", {
 								className: "p-4 rounded-lg bg-bg-canvas/50",
 								children: [/* @__PURE__ */ p("dt", {
 									className: "text-sm font-medium text-text-secondary mb-1",
-									children: b("auth.userDetails.email", "Email")
+									children: w("auth.userDetails.email", "Email")
 								}), /* @__PURE__ */ p("dd", {
 									className: "text-text-primary font-medium",
-									children: k.email
+									children: N.email
 								})]
 							}),
 							/* @__PURE__ */ m("div", {
 								className: "p-4 rounded-lg bg-bg-canvas/50",
 								children: [/* @__PURE__ */ p("dt", {
 									className: "text-sm font-medium text-text-secondary mb-1",
-									children: b("auth.userDetails.emailVerified", "Email Verified")
+									children: w("auth.userDetails.emailVerified", "Email Verified")
 								}), /* @__PURE__ */ p("dd", {
 									className: "text-text-primary font-medium",
-									children: k.emailVerified ? /* @__PURE__ */ p("span", {
+									children: N.emailVerified ? /* @__PURE__ */ p("span", {
 										className: "text-status-success-text",
-										children: b("auth.userDetails.yes", "Yes")
+										children: w("auth.userDetails.yes", "Yes")
 									}) : /* @__PURE__ */ p("span", {
 										className: "text-status-warning-text",
-										children: b("auth.userDetails.no", "No")
+										children: w("auth.userDetails.no", "No")
 									})
 								})]
 							}),
@@ -295,104 +300,109 @@ function _() {
 								className: "p-4 rounded-lg bg-bg-canvas/50",
 								children: [/* @__PURE__ */ p("dt", {
 									className: "text-sm font-medium text-text-secondary mb-1",
-									children: b("auth.userDetails.mfaEnabled", "MFA Enabled")
+									children: w("auth.userDetails.mfaEnabled", "MFA Enabled")
 								}), /* @__PURE__ */ p("dd", {
 									className: "text-text-primary font-medium",
-									children: k.mfaEnabled ? /* @__PURE__ */ p("span", {
+									children: N.mfaEnabled ? /* @__PURE__ */ p("span", {
 										className: "text-status-success-text",
-										children: b("auth.userDetails.yes", "Yes")
+										children: w("auth.userDetails.yes", "Yes")
 									}) : /* @__PURE__ */ p("span", {
 										className: "text-text-secondary",
-										children: b("auth.userDetails.no", "No")
+										children: w("auth.userDetails.no", "No")
 									})
 								})]
 							}),
-							k.phoneNumber && /* @__PURE__ */ m("div", {
+							N.phoneNumber && /* @__PURE__ */ m("div", {
 								className: "p-4 rounded-lg bg-bg-canvas/50",
 								children: [/* @__PURE__ */ p("dt", {
 									className: "text-sm font-medium text-text-secondary mb-1",
-									children: b("auth.userDetails.phoneNumber", "Phone Number")
+									children: w("auth.userDetails.phoneNumber", "Phone Number")
 								}), /* @__PURE__ */ p("dd", {
 									className: "text-text-primary font-medium",
-									children: k.phoneNumber
+									children: N.phoneNumber
 								})]
 							}),
 							/* @__PURE__ */ m("div", {
 								className: "p-4 rounded-lg bg-bg-canvas/50",
 								children: [/* @__PURE__ */ p("dt", {
 									className: "text-sm font-medium text-text-secondary mb-1",
-									children: b("auth.userDetails.lastLogin", "Last Login")
+									children: w("auth.userDetails.lastLogin", "Last Login")
 								}), /* @__PURE__ */ p("dd", {
 									className: "text-text-primary font-medium",
-									children: k.lastLoginAt ? new Date(k.lastLoginAt).toLocaleString() : b("auth.userDetails.never", "Never")
+									children: N.lastLoginAt ? new Date(N.lastLoginAt).toLocaleString() : w("auth.userDetails.never", "Never")
 								})]
 							}),
 							/* @__PURE__ */ m("div", {
 								className: "p-4 rounded-lg bg-bg-canvas/50",
 								children: [/* @__PURE__ */ p("dt", {
 									className: "text-sm font-medium text-text-secondary mb-1",
-									children: b("auth.userDetails.created", "Created")
+									children: w("auth.userDetails.created", "Created")
 								}), /* @__PURE__ */ p("dd", {
 									className: "text-text-primary font-medium",
-									children: new Date(k.createdAt).toLocaleString()
+									children: new Date(N.createdAt).toLocaleString()
 								})]
 							}),
 							/* @__PURE__ */ m("div", {
 								className: "p-4 rounded-lg bg-bg-canvas/50",
 								children: [/* @__PURE__ */ p("dt", {
 									className: "text-sm font-medium text-text-secondary mb-1",
-									children: b("auth.userDetails.lastUpdated", "Last Updated")
+									children: w("auth.userDetails.lastUpdated", "Last Updated")
 								}), /* @__PURE__ */ p("dd", {
 									className: "text-text-primary font-medium",
-									children: new Date(k.updatedAt).toLocaleString()
+									children: new Date(N.updatedAt).toLocaleString()
 								})]
 							})
 						]
 					}),
 					/* @__PURE__ */ m("div", {
 						className: "mt-8 pt-6 border-t border-border-subtle flex gap-3",
-						children: [k.status !== "DELETED" && w && /* @__PURE__ */ p("button", {
+						children: [N.status !== "DELETED" && O && /* @__PURE__ */ p("button", {
 							type: "button",
-							onClick: () => R("deactivate"),
+							onClick: () => H("deactivate"),
 							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: b("auth.userDetails.deactivateUser", "Deactivate User")
-						}), w && k.status === "DELETED" && S?.role === "SUPER_ADMIN" && /* @__PURE__ */ p("button", {
+							children: w("auth.userDetails.deactivateUser", "Deactivate User")
+						}), O && N.status === "DELETED" && E?.role === "SUPER_ADMIN" && /* @__PURE__ */ p("button", {
 							type: "button",
-							onClick: () => R("hard-delete"),
+							onClick: () => H("hard-delete"),
 							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: b("auth.userDetails.permanentlyDelete", "Permanently Delete")
+							children: w("auth.userDetails.permanentlyDelete", "Permanently Delete")
 						})]
+					}),
+					/* @__PURE__ */ p(_, {
+						className: "mt-8",
+						storageKey: "auth-user-details",
+						steps: [{
+							id: "back-to-users",
+							label: w("auth.userDetails.nextBack", "Return to the user list"),
+							description: w("auth.userDetails.nextBackDesc", "Browse or search everyone in your organization."),
+							onClick: () => S("/auth/users")
+						}, {
+							id: "export-user",
+							label: w("auth.userDetails.nextExport", "Export this user's data"),
+							description: w("auth.userDetails.nextExportDesc", "Download their profile, sessions, and audit history as CSV."),
+							onClick: () => void Y()
+						}]
 					})
 				]
 			})
 		]
 	}) : /* @__PURE__ */ p("div", {
 		className: "max-w-4xl mx-auto p-6",
-		children: /* @__PURE__ */ m("div", {
-			className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
-			children: [/* @__PURE__ */ p("h2", {
-				className: "text-xl font-semibold text-text-primary mb-2",
-				children: b("auth.userDetails.adminRequired", "Admin Access Required")
-			}), /* @__PURE__ */ p("p", {
-				className: "text-text-secondary",
-				children: b("auth.userDetails.adminRequiredDesc", "You need administrator privileges to view user details.")
-			})]
+		children: /* @__PURE__ */ p(g, {
+			illustration: "empty-generic",
+			title: w("auth.userDetails.adminRequired", "Admin Access Required"),
+			description: w("auth.userDetails.adminRequiredDesc", "You need administrator privileges to view user details.")
 		})
 	}) : /* @__PURE__ */ p("div", {
 		className: "max-w-4xl mx-auto p-6",
-		children: /* @__PURE__ */ m("div", {
-			className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
-			children: [/* @__PURE__ */ p("h2", {
-				className: "text-xl font-semibold text-text-primary mb-2",
-				children: b("auth.userDetails.authRequired", "Authentication Required")
-			}), /* @__PURE__ */ p("p", {
-				className: "text-text-secondary",
-				children: b("auth.userDetails.signInToView", "Please sign in to view user details")
-			})]
+		children: /* @__PURE__ */ p(g, {
+			illustration: "empty-generic",
+			title: w("auth.userDetails.authRequired", "Authentication Required"),
+			description: w("auth.userDetails.signInToView", "Please sign in to view user details")
 		})
 	});
 }
 //#endregion
-export { _ as UserDetailsPage };
+export { x as UserDetailsPage };
 
 //# sourceMappingURL=UserDetailsPage.js.map