@burdenoff/microfe-auth 2026.510.127

package/dist/auth/pages/UserDetailsPage.js

@@ -0,0 +1,338 @@
+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 { useEffect as o, useState as s } from "react";
+import { useNavigate as c, useParams as l } from "react-router-dom";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/auth/pages/UserDetailsPage.tsx
+var f = [
+	"SUPER_ADMIN",
+	"TENANT_ADMIN",
+	"ORG_ADMIN"
+], p = (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";
+	}
+}, m = (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";
+	}
+};
+function h() {
+	let { id: h } = l(), g = c(), _ = e((e) => e.isAuthenticated), v = e((e) => e.user), { canViewUsers: y, canDeleteUsers: b, isLoading: x } = n(), { getUser: S, deleteUser: C, hardDeleteUser: w } = t(), [T, E] = s(null), [D, O] = s(!0), [k, A] = s(null), [j, M] = s(null), [N, P] = s(null);
+	o(() => {
+		let e = !1;
+		if (!h) {
+			A("Missing user id"), O(!1);
+			return;
+		}
+		if (!_) {
+			O(!1);
+			return;
+		}
+		return O(!0), A(null), S(h).then((t) => {
+			e || (t ? E(t) : A("User not found"));
+		}).catch((t) => {
+			e || A(t instanceof Error ? t.message : "Failed to fetch user details");
+		}).finally(() => {
+			e || O(!1);
+		}), () => {
+			e = !0;
+		};
+	}, [
+		h,
+		S,
+		_
+	]);
+	let F = async () => {
+		if (T) try {
+			let e = await C(T.id);
+			if (e.success) {
+				M(`User "${T.email}" has been deactivated.`), P(null);
+				let e = await S(T.id);
+				e && E(e);
+			} else A(e.message);
+		} catch (e) {
+			A(e instanceof Error ? e.message : "Failed to delete user");
+		}
+	}, I = async () => {
+		if (T) try {
+			let e = await w(T.id);
+			e.success ? (P(null), g("/auth/users")) : A(e.message);
+		} catch (e) {
+			A(e instanceof Error ? e.message : "Failed to hard delete user");
+		}
+	};
+	return _ ? v && !f.includes(v.role) ? /* @__PURE__ */ u("div", {
+		className: "max-w-4xl 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("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."
+			})]
+		})
+	}) : x || D ? /* @__PURE__ */ u("div", {
+		className: "max-w-4xl 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 user..."
+			})]
+		})
+	}) : y ? k || !T ? /* @__PURE__ */ d("div", {
+		className: "max-w-4xl mx-auto p-6",
+		children: [/* @__PURE__ */ d("button", {
+			onClick: () => g("/auth/users"),
+			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: "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("p", {
+				className: "text-sm text-status-error-text",
+				children: k || "User not found"
+			})]
+		})]
+	}) : /* @__PURE__ */ d("div", {
+		className: "max-w-4xl mx-auto p-6",
+		children: [
+			/* @__PURE__ */ u(a, {
+				open: N !== null,
+				onOpenChange: (e) => {
+					e || P(null);
+				},
+				title: N === "hard-delete" ? "Permanently delete user?" : "Deactivate user?",
+				description: N === "hard-delete" ? `This permanently deletes "${T.email}" and cannot be undone.` : `"${T.email}" will be prevented from signing in until reactivated.`,
+				confirmText: N === "hard-delete" ? "Delete permanently" : "Deactivate user",
+				variant: N === "hard-delete" ? "danger" : "warning",
+				onConfirm: async () => {
+					N === "hard-delete" ? await I() : N === "deactivate" && await F();
+				}
+			}),
+			/* @__PURE__ */ d("button", {
+				onClick: () => g("/auth/users"),
+				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"]
+			}),
+			j && /* @__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: j
+				}), /* @__PURE__ */ u("button", {
+					onClick: () => M(null),
+					className: "mt-2 text-sm text-status-success-text hover:underline",
+					children: "Dismiss"
+				})]
+			}),
+			/* @__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: (T.name || T.username || T.email).charAt(0).toUpperCase()
+						}), /* @__PURE__ */ d("div", { children: [
+							/* @__PURE__ */ u("h1", {
+								className: "text-2xl font-semibold text-text-primary",
+								children: T.name || T.username
+							}),
+							/* @__PURE__ */ u("p", {
+								className: "text-text-secondary",
+								"data-testid": "user-email",
+								children: T.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 ${p(T.role)}`,
+									children: T.role.replace("_", " ")
+								}), /* @__PURE__ */ u("span", {
+									className: `px-2.5 py-1 rounded-full text-xs font-medium ${m(T.status)}`,
+									children: T.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: T.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: T.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: T.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: T.mfaEnabled ? /* @__PURE__ */ u("span", {
+										className: "text-status-success-text",
+										children: "Yes"
+									}) : /* @__PURE__ */ u("span", {
+										className: "text-text-secondary",
+										children: "No"
+									})
+								})]
+							}),
+							T.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: T.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: T.lastLoginAt ? new Date(T.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(T.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(T.updatedAt).toLocaleString()
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "mt-8 pt-6 border-t border-border-subtle flex gap-3",
+						children: [T.status !== "DELETED" && b && /* @__PURE__ */ u("button", {
+							onClick: () => P("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: "Deactivate User"
+						}), b && T.status === "DELETED" && /* @__PURE__ */ u("button", {
+							onClick: () => P("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: "Permanently Delete"
+						})]
+					})
+				]
+			})
+		]
+	}) : /* @__PURE__ */ u("div", {
+		className: "max-w-4xl 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("h2", {
+				className: "text-xl font-semibold text-text-primary mb-2",
+				children: "Admin Access Required"
+			}), /* @__PURE__ */ u("p", {
+				className: "text-text-secondary",
+				children: "You need administrator privileges to view user details."
+			})]
+		})
+	}) : /* @__PURE__ */ u("div", {
+		className: "max-w-4xl 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("h2", {
+				className: "text-xl font-semibold text-text-primary mb-2",
+				children: "Authentication Required"
+			}), /* @__PURE__ */ u("p", {
+				className: "text-text-secondary",
+				children: "Please sign in to view user details"
+			})]
+		})
+	});
+}
+//#endregion
+export { h as UserDetailsPage };
+
+//# sourceMappingURL=UserDetailsPage.js.map

package/dist/auth/pages/UserDetailsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserDetailsPage.js","names":[],"sources":["../../../src/auth/pages/UserDetailsPage.tsx"],"sourcesContent":["import { useState, useEffect } from \"react\";\nimport { useNavigate, useParams } from \"react-router-dom\";\nimport { useAuthPermissions, useUserOperations } from \"../hooks\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { ConfirmActionDialog } from \"../components/ConfirmActionDialog\";\nimport { SpinnerIcon, AlertIcon } from \"../components/AuthIcons\";\nimport type { User, UserRole, UserStatus } from \"../types\";\n\nconst ALLOWED_ROLES: UserRole[] = [\"SUPER_ADMIN\", \"TENANT_ADMIN\", \"ORG_ADMIN\"];\n\nconst getRoleColor = (role: UserRole) => {\n  switch (role) {\n    case \"SUPER_ADMIN\":\n      return \"bg-accent-purple-subtle text-accent-purple\";\n    case \"TENANT_ADMIN\":\n      return \"bg-status-info-bg-subtle text-status-info-text\";\n    case \"ORG_ADMIN\":\n      return \"bg-accent-indigo-subtle text-accent-indigo\";\n    case \"WORKSPACE_ADMIN\":\n      return \"bg-accent-cyan-subtle text-accent-cyan\";\n    case \"MEMBER\":\n      return \"bg-status-success-bg-subtle text-status-success-text\";\n    case \"GUEST\":\n      return \"bg-bg-sunken text-text-primary\";\n    default:\n      return \"bg-bg-sunken text-text-primary\";\n  }\n};\n\nconst getStatusColor = (status: UserStatus) => {\n  switch (status) {\n    case \"ACTIVE\":\n      return \"bg-status-success-bg-subtle text-status-success-text\";\n    case \"INACTIVE\":\n      return \"bg-status-warning-bg-subtle text-status-warning-text\";\n    case \"SUSPENDED\":\n      return \"bg-status-warning-bg-subtle text-status-warning-text\";\n    case \"DELETED\":\n      return \"bg-status-error-bg-subtle text-status-error-text\";\n    default:\n      return \"bg-bg-sunken text-text-primary\";\n  }\n};\n\n/**\n * User details page (admin only).\n *\n * Route: /auth/users/:id\n *\n * Renders the full profile of a single user, with admin actions\n * (edit, deactivate, hard-delete). Reuses the same getUser query\n * that UsersPage relies on.\n */\nexport function UserDetailsPage() {\n  const { id } = useParams<{ id: string }>();\n  const navigate = useNavigate();\n  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);\n  const currentUser = useAuthStore((state) => state.user);\n  const {\n    canViewUsers,\n    canDeleteUsers,\n    isLoading: permissionsLoading,\n  } = useAuthPermissions();\n  const { getUser, deleteUser, hardDeleteUser } = useUserOperations();\n\n  const [user, setUser] = useState<User | null>(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n  const [pendingAction, setPendingAction] = useState<\n    \"deactivate\" | \"hard-delete\" | null\n  >(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    if (!id) {\n      setError(\"Missing user id\");\n      setLoading(false);\n      return;\n    }\n    if (!isAuthenticated) {\n      setLoading(false);\n      return;\n    }\n\n    setLoading(true);\n    setError(null);\n    getUser(id)\n      .then((fetched) => {\n        if (cancelled) return;\n        if (!fetched) {\n          setError(\"User not found\");\n        } else {\n          setUser(fetched);\n        }\n      })\n      .catch((err: unknown) => {\n        if (cancelled) return;\n        setError(\n          err instanceof Error ? err.message : \"Failed to fetch user details\",\n        );\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [id, getUser, isAuthenticated]);\n\n  const handleDeactivate = async () => {\n    if (!user) return;\n    try {\n      const result = await deleteUser(user.id);\n      if (result.success) {\n        setSuccessMessage(`User \"${user.email}\" has been deactivated.`);\n        setPendingAction(null);\n        // Refresh\n        const fresh = await getUser(user.id);\n        if (fresh) setUser(fresh);\n      } else {\n        setError(result.message);\n      }\n    } catch (err) {\n      setError(err instanceof Error ? err.message : \"Failed to delete user\");\n    }\n  };\n\n  const handleHardDelete = async () => {\n    if (!user) return;\n    try {\n      const result = await hardDeleteUser(user.id);\n      if (result.success) {\n        setPendingAction(null);\n        navigate(\"/auth/users\");\n      } else {\n        setError(result.message);\n      }\n    } catch (err) {\n      setError(\n        err instanceof Error ? err.message : \"Failed to hard delete user\",\n      );\n    }\n  };\n\n  // Auth + role guards\n  if (!isAuthenticated) {\n    return (\n      <div className=\"max-w-4xl mx-auto p-6\">\n        <div className=\"text-center py-16 border-2 border-dashed border-border-subtle rounded-xl\">\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            Authentication Required\n          </h2>\n          <p className=\"text-text-secondary\">\n            Please sign in to view user details\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  if (currentUser && !ALLOWED_ROLES.includes(currentUser.role)) {\n    return (\n      <div className=\"max-w-4xl mx-auto p-6\">\n        <div className=\"text-center py-16 border-2 border-dashed border-border-subtle rounded-xl\">\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            You are not allowed to access this page\n          </h2>\n          <p className=\"text-text-secondary\">\n            This page is restricted to administrators only.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  if (permissionsLoading || loading) {\n    return (\n      <div className=\"max-w-4xl mx-auto p-6\">\n        <div className=\"text-center py-16\">\n          <SpinnerIcon className=\"w-8 h-8 mx-auto text-text-secondary animate-spin\" />\n          <p className=\"mt-4 text-text-secondary\">Loading user...</p>\n        </div>\n      </div>\n    );\n  }\n\n  if (!canViewUsers) {\n    return (\n      <div className=\"max-w-4xl mx-auto p-6\">\n        <div className=\"text-center py-16 border-2 border-dashed border-border-subtle rounded-xl\">\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            Admin Access Required\n          </h2>\n          <p className=\"text-text-secondary\">\n            You need administrator privileges to view user details.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  if (error || !user) {\n    return (\n      <div className=\"max-w-4xl mx-auto p-6\">\n        <button\n          onClick={() => navigate(\"/auth/users\")}\n          className=\"mb-6 flex items-center gap-2 text-text-link hover:underline font-medium\"\n        >\n          <svg\n            className=\"w-4 h-4\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M10 19l-7-7m0 0l7-7m-7 7h18\"\n            />\n          </svg>\n          Back to Users\n        </button>\n        <div className=\"flex items-start gap-3 p-4 rounded-xl bg-status-error-bg-subtle border border-status-error-border\">\n          <AlertIcon className=\"w-5 h-5 text-status-error-text flex-shrink-0 mt-0.5\" />\n          <p className=\"text-sm text-status-error-text\">\n            {error || \"User not found\"}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"max-w-4xl mx-auto p-6\">\n      <ConfirmActionDialog\n        open={pendingAction !== null}\n        onOpenChange={(open) => {\n          if (!open) setPendingAction(null);\n        }}\n        title={\n          pendingAction === \"hard-delete\"\n            ? \"Permanently delete user?\"\n            : \"Deactivate user?\"\n        }\n        description={\n          pendingAction === \"hard-delete\"\n            ? `This permanently deletes \"${user.email}\" and cannot be undone.`\n            : `\"${user.email}\" will be prevented from signing in until reactivated.`\n        }\n        confirmText={\n          pendingAction === \"hard-delete\"\n            ? \"Delete permanently\"\n            : \"Deactivate user\"\n        }\n        variant={pendingAction === \"hard-delete\" ? \"danger\" : \"warning\"}\n        onConfirm={async () => {\n          if (pendingAction === \"hard-delete\") await handleHardDelete();\n          else if (pendingAction === \"deactivate\") await handleDeactivate();\n        }}\n      />\n\n      <button\n        onClick={() => navigate(\"/auth/users\")}\n        className=\"mb-6 flex items-center gap-2 text-text-link hover:underline font-medium\"\n      >\n        <svg\n          className=\"w-4 h-4\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M10 19l-7-7m0 0l7-7m-7 7h18\"\n          />\n        </svg>\n        Back to Users\n      </button>\n\n      {successMessage && (\n        <div className=\"mb-6 p-4 rounded-xl bg-status-success-bg-subtle border border-status-success-border\">\n          <p className=\"text-status-success-text\">{successMessage}</p>\n          <button\n            onClick={() => setSuccessMessage(null)}\n            className=\"mt-2 text-sm text-status-success-text hover:underline\"\n          >\n            Dismiss\n          </button>\n        </div>\n      )}\n\n      <div className=\"p-6 rounded-xl border border-border-subtle bg-bg-surface shadow-sm\">\n        <div className=\"flex items-center gap-4 mb-8\">\n          <div className=\"auth-brand-badge flex h-20 w-20 items-center justify-center rounded-full text-3xl font-semibold\">\n            {(user.name || user.username || user.email).charAt(0).toUpperCase()}\n          </div>\n          <div>\n            <h1 className=\"text-2xl font-semibold text-text-primary\">\n              {user.name || user.username}\n            </h1>\n            <p className=\"text-text-secondary\" data-testid=\"user-email\">\n              {user.email}\n            </p>\n            <div className=\"flex items-center gap-2 mt-2\">\n              <span\n                className={`px-2.5 py-1 rounded-full text-xs font-medium ${getRoleColor(user.role)}`}\n              >\n                {user.role.replace(\"_\", \" \")}\n              </span>\n              <span\n                className={`px-2.5 py-1 rounded-full text-xs font-medium ${getStatusColor(user.status)}`}\n              >\n                {user.status}\n              </span>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"grid grid-cols-2 gap-6\">\n          <div className=\"p-4 rounded-lg bg-bg-canvas/50\">\n            <label className=\"block text-sm font-medium text-text-secondary mb-1\">\n              Username\n            </label>\n            <p className=\"text-text-primary font-medium\">{user.username}</p>\n          </div>\n          <div className=\"p-4 rounded-lg bg-bg-canvas/50\">\n            <label className=\"block text-sm font-medium text-text-secondary mb-1\">\n              Email\n            </label>\n            <p className=\"text-text-primary font-medium\">{user.email}</p>\n          </div>\n          <div className=\"p-4 rounded-lg bg-bg-canvas/50\">\n            <label className=\"block text-sm font-medium text-text-secondary mb-1\">\n              Email Verified\n            </label>\n            <p className=\"text-text-primary font-medium\">\n              {user.emailVerified ? (\n                <span className=\"text-status-success-text\">Yes</span>\n              ) : (\n                <span className=\"text-status-warning-text\">No</span>\n              )}\n            </p>\n          </div>\n          <div className=\"p-4 rounded-lg bg-bg-canvas/50\">\n            <label className=\"block text-sm font-medium text-text-secondary mb-1\">\n              MFA Enabled\n            </label>\n            <p className=\"text-text-primary font-medium\">\n              {user.mfaEnabled ? (\n                <span className=\"text-status-success-text\">Yes</span>\n              ) : (\n                <span className=\"text-text-secondary\">No</span>\n              )}\n            </p>\n          </div>\n          {user.phoneNumber && (\n            <div className=\"p-4 rounded-lg bg-bg-canvas/50\">\n              <label className=\"block text-sm font-medium text-text-secondary mb-1\">\n                Phone Number\n              </label>\n              <p className=\"text-text-primary font-medium\">\n                {user.phoneNumber}\n              </p>\n            </div>\n          )}\n          <div className=\"p-4 rounded-lg bg-bg-canvas/50\">\n            <label className=\"block text-sm font-medium text-text-secondary mb-1\">\n              Last Login\n            </label>\n            <p className=\"text-text-primary font-medium\">\n              {user.lastLoginAt\n                ? new Date(user.lastLoginAt).toLocaleString()\n                : \"Never\"}\n            </p>\n          </div>\n          <div className=\"p-4 rounded-lg bg-bg-canvas/50\">\n            <label className=\"block text-sm font-medium text-text-secondary mb-1\">\n              Created\n            </label>\n            <p className=\"text-text-primary font-medium\">\n              {new Date(user.createdAt).toLocaleString()}\n            </p>\n          </div>\n          <div className=\"p-4 rounded-lg bg-bg-canvas/50\">\n            <label className=\"block text-sm font-medium text-text-secondary mb-1\">\n              Last Updated\n            </label>\n            <p className=\"text-text-primary font-medium\">\n              {new Date(user.updatedAt).toLocaleString()}\n            </p>\n          </div>\n        </div>\n\n        <div className=\"mt-8 pt-6 border-t border-border-subtle flex gap-3\">\n          {user.status !== \"DELETED\" && canDeleteUsers && (\n            <button\n              onClick={() => setPendingAction(\"deactivate\")}\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\"\n            >\n              Deactivate User\n            </button>\n          )}\n          {canDeleteUsers && user.status === \"DELETED\" && (\n            <button\n              onClick={() => setPendingAction(\"hard-delete\")}\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\"\n            >\n              Permanently Delete\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/auth/pages/UserProfilePage.d.ts

@@ -0,0 +1,5 @@
+/**
+ * User Profile page for viewing and editing own profile
+ */
+export declare function UserProfilePage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UserProfilePage.d.ts.map

package/dist/auth/pages/UserProfilePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserProfilePage.d.ts","sourceRoot":"","sources":["../../../src/auth/pages/UserProfilePage.tsx"],"names":[],"mappings":"AAsBA;;GAEG;AACH,wBAAgB,eAAe,4CAmgB9B"}