@burdenoff/microfe-auth 2026.526.1 → 2026.527.2

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

@@ -1 +1 @@
-{"version":3,"file":"UserProfilePage.js","names":[],"sources":["../../../src/auth/pages/UserProfilePage.tsx"],"sourcesContent":["import { useState, useEffect, useRef, useId } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useAuth as useShellAuth } from \"@burdenoff/fe-libs/shared/providers/shell/AuthProvider\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useUserOperations } from \"../hooks\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport {\n  SpinnerIcon,\n  AlertIcon,\n  UserIcon,\n  EmailIcon,\n  CheckIcon,\n} from \"../components/AuthIcons\";\nimport {\n  useInitiateAvatarUploadMutation,\n  useCompleteAvatarUploadMutation,\n} from \"../../generated/wspace-operations\";\nimport { useGatewayClient } from \"@burdenoff/fe-libs/shared/graphql\";\n\ninterface ProfileFormData {\n  username: string;\n  firstName: string;\n  lastName: string;\n  name: string;\n  phoneNumber: string;\n}\n\n/**\n * User Profile page for viewing and editing own profile\n */\nexport function UserProfilePage() {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const navigate = useNavigate();\n  const shellAuth = useShellAuth();\n  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);\n  const currentUser = useAuthStore((state) => state.user);\n  const setStoreUser = useAuthStore((state) => state.setUser);\n  const { updateCurrentUserProfile, isLoading } = useUserOperations();\n\n  const usernameId = useId();\n  const displayNameId = useId();\n  const firstNameId = useId();\n  const lastNameId = useId();\n  const phoneNumberId = useId();\n\n  const currentWorkspaceId = useAuthStore((state) => state.currentWorkspaceId);\n  const wspaceClient = useGatewayClient(\"workspace\");\n  const [initiateUpload] = useInitiateAvatarUploadMutation({\n    client: wspaceClient,\n  });\n  const [completeUpload] = useCompleteAvatarUploadMutation({\n    client: wspaceClient,\n  });\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const [isUploadingAvatar, setIsUploadingAvatar] = useState(false);\n\n  const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    const file = e.target.files?.[0];\n    if (!file) return;\n    if (!file.type.startsWith(\"image/\")) {\n      setError(\n        tr(\"auth.profile.invalidImageType\", \"Please select an image file\"),\n      );\n      return;\n    }\n    if (!currentWorkspaceId) {\n      setError(\n        tr(\n          \"auth.profile.noWorkspace\",\n          \"Please select a workspace before uploading a profile picture\",\n        ),\n      );\n      return;\n    }\n    setIsUploadingAvatar(true);\n    setError(null);\n    const wsHeaders = { \"x-workspace-id\": currentWorkspaceId };\n    try {\n      const extension = file.name.split(\".\").pop()?.toLowerCase() ?? \"\";\n      const initiateResult = await initiateUpload({\n        variables: {\n          input: {\n            fileName: file.name,\n            fileSize: file.size.toString(),\n            mimeType: file.type,\n            extension,\n          },\n        },\n        context: { headers: wsHeaders },\n      });\n      const session = initiateResult.data?.initiateUpload.session;\n      const uploadUrl = initiateResult.data?.initiateUpload.uploadUrl;\n      if (!session || !uploadUrl) throw new Error(\"Failed to initiate upload\");\n\n      const uploadResp = await fetch(uploadUrl, {\n        method: \"PUT\",\n        headers: { \"Content-Type\": file.type },\n        body: file,\n      });\n      if (!uploadResp.ok) throw new Error(\"Failed to upload file\");\n\n      const completeResult = await completeUpload({\n        variables: { input: { sessionId: session.id } },\n        context: { headers: wsHeaders },\n      });\n      const avatarUrl = completeResult.data?.completeUpload.file?.downloadUrl;\n      if (!avatarUrl) throw new Error(\"Upload succeeded but no URL returned\");\n\n      await updateCurrentUserProfile({ avatar: avatarUrl });\n      // Update both the local authStore and the shell AuthProvider so the nav\n      // bar avatar reflects the change immediately without a page reload.\n      if (currentUser) {\n        setStoreUser({ ...currentUser, avatar: avatarUrl });\n      }\n      shellAuth.updateUser({ avatar: avatarUrl });\n      setSuccessMessage(\n        tr(\"auth.profile.avatarUpdated\", \"Profile picture updated!\"),\n      );\n    } catch (err) {\n      setError(\n        err instanceof Error\n          ? err.message\n          : tr(\"auth.profile.avatarFailed\", \"Failed to upload picture\"),\n      );\n    } finally {\n      setIsUploadingAvatar(false);\n      if (fileInputRef.current) fileInputRef.current.value = \"\";\n    }\n  };\n\n  const [isEditing, setIsEditing] = useState(false);\n  const [formData, setFormData] = useState<ProfileFormData>({\n    username: \"\",\n    firstName: \"\",\n    lastName: \"\",\n    name: \"\",\n    phoneNumber: \"\",\n  });\n  const [error, setError] = useState<string | null>(null);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n\n  // Populate form with current user data\n  useEffect(() => {\n    if (currentUser) {\n      setFormData({\n        username: currentUser.username || \"\",\n        firstName: currentUser.firstName || \"\",\n        lastName: currentUser.lastName || \"\",\n        name: currentUser.name || \"\",\n        phoneNumber: currentUser.phoneNumber || \"\",\n      });\n    }\n  }, [currentUser]);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(null);\n    setSuccessMessage(null);\n\n    try {\n      await updateCurrentUserProfile({\n        username: formData.username || undefined,\n        firstName: formData.firstName || undefined,\n        lastName: formData.lastName || undefined,\n        name: formData.name || undefined,\n        phoneNumber: formData.phoneNumber || undefined,\n      });\n      setSuccessMessage(\n        tr(\"auth.profile.updateSuccess\", \"Profile updated successfully!\"),\n      );\n      setIsEditing(false);\n    } catch (err) {\n      setError(\n        err instanceof Error\n          ? err.message\n          : tr(\"auth.profile.updateFailed\", \"Failed to update profile\"),\n      );\n    }\n  };\n\n  const cancelEdit = () => {\n    if (currentUser) {\n      setFormData({\n        username: currentUser.username || \"\",\n        firstName: currentUser.firstName || \"\",\n        lastName: currentUser.lastName || \"\",\n        name: currentUser.name || \"\",\n        phoneNumber: currentUser.phoneNumber || \"\",\n      });\n    }\n    setIsEditing(false);\n    setError(null);\n  };\n\n  // Not authenticated\n  if (!isAuthenticated || !currentUser) {\n    return (\n      <AuthLayout\n        title={tr(\"auth.profile.title\", \"Profile\")}\n        subtitle={tr(\"auth.profile.subtitle\", \"View and manage your profile\")}\n      >\n        <div className=\"text-center py-12\">\n          <div className=\"w-16 h-16 mx-auto mb-4 rounded-full bg-[var(--color-status-warning-bg-subtle)] flex items-center justify-center\">\n            <AlertIcon className=\"w-8 h-8 text-[var(--color-status-warning-text)]\" />\n          </div>\n          <h2 className=\"text-xl font-semibold text-[var(--color-text-primary)] mb-2\">\n            {tr(\"auth.profile.authRequired\", \"Authentication Required\")}\n          </h2>\n          <p className=\"text-[var(--color-text-secondary)] mb-6\">\n            {tr(\n              \"auth.profile.signInToView\",\n              \"Please sign in to view your profile\",\n            )}\n          </p>\n          <button\n            onClick={() => navigate(\"/auth/login\")}\n            className=\"auth-primary-button px-6 py-3 font-semibold\"\n          >\n            {tr(\"auth.profile.signIn\", \"Sign In\")}\n          </button>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  return (\n    <div className=\"max-w-4xl mx-auto p-6\">\n      {/* Header */}\n      <div className=\"mb-8\">\n        <h1 className=\"text-3xl font-semibold text-[var(--color-text-primary)]\">\n          {tr(\"auth.profile.myProfile\", \"My Profile\")}\n        </h1>\n        <p className=\"text-[var(--color-text-secondary)] mt-2\">\n          {tr(\n            \"auth.profile.viewAndManage\",\n            \"View and manage your account information\",\n          )}\n        </p>\n      </div>\n\n      {/* Success Message */}\n      {successMessage && (\n        <div className=\"mb-6 flex items-center gap-3 p-4 rounded-xl bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)]\">\n          <CheckIcon className=\"w-5 h-5 text-[var(--color-status-success-text)] flex-shrink-0\" />\n          <p className=\"text-[var(--color-status-success-text)]\">\n            {successMessage}\n          </p>\n          <button\n            onClick={() => setSuccessMessage(null)}\n            className=\"ml-auto text-sm text-[var(--color-status-success-text)] hover:underline transition-colors duration-200\"\n          >\n            {tr(\"auth.profile.dismiss\", \"Dismiss\")}\n          </button>\n        </div>\n      )}\n\n      {/* Error Message */}\n      {error && (\n        <div className=\"mb-6 flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]\">\n          <AlertIcon className=\"w-5 h-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5\" />\n          <div className=\"flex-1\">\n            <p className=\"text-sm text-[var(--color-status-error-text)]\">\n              {error}\n            </p>\n          </div>\n          <button\n            onClick={() => setError(null)}\n            className=\"text-sm text-[var(--color-status-error-text)] hover:underline transition-colors duration-200\"\n          >\n            {tr(\"auth.profile.dismiss\", \"Dismiss\")}\n          </button>\n        </div>\n      )}\n\n      {/* Profile Card */}\n      <div className=\"rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-sm overflow-hidden\">\n        {/* Profile Header */}\n        <div className=\"auth-hero-card p-6\">\n          <div className=\"flex items-center gap-4\">\n            <div className=\"relative group\">\n              {currentUser.avatar ? (\n                <img\n                  src={currentUser.avatar}\n                  alt={tr(\"auth.profile.avatarAlt\", \"Profile picture\")}\n                  className=\"w-20 h-20 rounded-full object-cover shadow-lg\"\n                />\n              ) : (\n                <div className=\"w-20 h-20 rounded-full bg-bg-surface/20 backdrop-blur-sm flex items-center justify-center text-white text-3xl font-semibold shadow-lg\">\n                  {(\n                    currentUser.name ||\n                    currentUser.username ||\n                    currentUser.email\n                  )\n                    .charAt(0)\n                    .toUpperCase()}\n                </div>\n              )}\n              <button\n                type=\"button\"\n                onClick={() => fileInputRef.current?.click()}\n                disabled={isUploadingAvatar}\n                aria-label={tr(\n                  \"auth.profile.changeAvatar\",\n                  \"Change profile picture\",\n                )}\n                className=\"absolute inset-0 rounded-full flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 cursor-pointer\"\n              >\n                {isUploadingAvatar ? (\n                  <SpinnerIcon className=\"w-6 h-6 text-white animate-spin\" />\n                ) : (\n                  <svg\n                    className=\"w-6 h-6 text-white\"\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=\"M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z\"\n                    />\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M15 13a3 3 0 11-6 0 3 3 0 016 0z\"\n                    />\n                  </svg>\n                )}\n              </button>\n              <input\n                ref={fileInputRef}\n                type=\"file\"\n                accept=\"image/*\"\n                className=\"hidden\"\n                onChange={(e) => void handleAvatarUpload(e)}\n                aria-hidden=\"true\"\n              />\n            </div>\n            <div className=\"text-white\">\n              <h2 className=\"text-2xl font-semibold\">\n                {currentUser.name ||\n                  `${currentUser.firstName || \"\"} ${currentUser.lastName || \"\"}`.trim() ||\n                  currentUser.username}\n              </h2>\n              <p className=\"text-white/80 flex items-center gap-2\">\n                <EmailIcon className=\"w-4 h-4\" />\n                {currentUser.email}\n              </p>\n              <div className=\"flex items-center gap-2 mt-2\">\n                <span className=\"px-2.5 py-1 rounded-full text-xs font-medium bg-bg-surface/20 backdrop-blur-sm\">\n                  {currentUser.role?.replace(\"_\", \" \") ||\n                    tr(\"auth.profile.member\", \"Member\")}\n                </span>\n                {currentUser.emailVerified && (\n                  <span className=\"px-2.5 py-1 rounded-full text-xs font-medium bg-status-success-text/30 flex items-center gap-1\">\n                    <CheckIcon className=\"w-3 h-3\" />\n                    {tr(\"auth.profile.verified\", \"Verified\")}\n                  </span>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Profile Body */}\n        <div className=\"p-6\">\n          {isEditing ? (\n            /* Edit Form */\n            <form onSubmit={handleSubmit} className=\"space-y-6\">\n              <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                <div>\n                  <label\n                    htmlFor={usernameId}\n                    className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\"\n                  >\n                    {tr(\"auth.profile.username\", \"Username\")}\n                  </label>\n                  <div className=\"relative\">\n                    <div className=\"absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none\">\n                      <UserIcon\n                        className=\"w-5 h-5 text-[var(--color-text-tertiary)]\"\n                        aria-hidden=\"true\"\n                      />\n                    </div>\n                    <input\n                      id={usernameId}\n                      type=\"text\"\n                      value={formData.username}\n                      onChange={(e) =>\n                        setFormData({ ...formData, username: e.target.value })\n                      }\n                      className=\"block w-full pl-[3.5rem] pr-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300\"\n                      placeholder={tr(\n                        \"auth.profile.usernamePlaceholder\",\n                        \"Enter username\",\n                      )}\n                    />\n                  </div>\n                </div>\n\n                <div>\n                  <label\n                    htmlFor={displayNameId}\n                    className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\"\n                  >\n                    {tr(\"auth.profile.displayName\", \"Display Name\")}\n                  </label>\n                  <input\n                    id={displayNameId}\n                    type=\"text\"\n                    value={formData.name}\n                    onChange={(e) =>\n                      setFormData({ ...formData, name: e.target.value })\n                    }\n                    className=\"block w-full px-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300\"\n                    placeholder={tr(\n                      \"auth.profile.displayNamePlaceholder\",\n                      \"Enter display name\",\n                    )}\n                  />\n                </div>\n\n                <div>\n                  <label\n                    htmlFor={firstNameId}\n                    className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\"\n                  >\n                    {tr(\"auth.profile.firstName\", \"First Name\")}\n                  </label>\n                  <input\n                    id={firstNameId}\n                    type=\"text\"\n                    value={formData.firstName}\n                    onChange={(e) =>\n                      setFormData({ ...formData, firstName: e.target.value })\n                    }\n                    className=\"block w-full px-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300\"\n                    placeholder={tr(\n                      \"auth.profile.firstNamePlaceholder\",\n                      \"Enter first name\",\n                    )}\n                  />\n                </div>\n\n                <div>\n                  <label\n                    htmlFor={lastNameId}\n                    className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\"\n                  >\n                    {tr(\"auth.profile.lastName\", \"Last Name\")}\n                  </label>\n                  <input\n                    id={lastNameId}\n                    type=\"text\"\n                    value={formData.lastName}\n                    onChange={(e) =>\n                      setFormData({ ...formData, lastName: e.target.value })\n                    }\n                    className=\"block w-full px-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300\"\n                    placeholder={tr(\n                      \"auth.profile.lastNamePlaceholder\",\n                      \"Enter last name\",\n                    )}\n                  />\n                </div>\n\n                <div className=\"md:col-span-2\">\n                  <label\n                    htmlFor={phoneNumberId}\n                    className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\"\n                  >\n                    {tr(\"auth.profile.phoneNumber\", \"Phone Number\")}\n                  </label>\n                  <input\n                    id={phoneNumberId}\n                    type=\"tel\"\n                    value={formData.phoneNumber}\n                    onChange={(e) =>\n                      setFormData({ ...formData, phoneNumber: e.target.value })\n                    }\n                    className=\"block w-full px-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300\"\n                    placeholder={tr(\n                      \"auth.profile.phonePlaceholder\",\n                      \"Enter phone number\",\n                    )}\n                  />\n                </div>\n              </div>\n\n              <div className=\"flex gap-3 pt-4 border-t border-[var(--color-border-default)]\">\n                <button\n                  type=\"submit\"\n                  disabled={isLoading}\n                  className=\"auth-primary-button flex items-center gap-2 px-6 py-3 font-medium\"\n                >\n                  {isLoading ? (\n                    <>\n                      <SpinnerIcon className=\"w-4 h-4 animate-spin\" />\n                      {tr(\"auth.profile.saving\", \"Saving...\")}\n                    </>\n                  ) : (\n                    tr(\"auth.profile.saveChanges\", \"Save Changes\")\n                  )}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={cancelEdit}\n                  className=\"px-6 py-3 rounded-xl border border-[var(--color-border-default)] text-[var(--color-text-secondary)] font-medium hover:bg-[var(--color-bg-muted)] transition-colors duration-200\"\n                >\n                  {tr(\"auth.profile.cancel\", \"Cancel\")}\n                </button>\n              </div>\n            </form>\n          ) : (\n            /* View Mode */\n            <>\n              <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.username\", \"Username\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.username || \"-\"}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.displayName\", \"Display Name\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.name || \"-\"}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.firstName\", \"First Name\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.firstName || \"-\"}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.lastName\", \"Last Name\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.lastName || \"-\"}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.email\", \"Email\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium flex items-center gap-2\">\n                    {currentUser.email}\n                    {currentUser.emailVerified && (\n                      <span className=\"inline-flex items-center gap-1 text-[var(--color-status-success-text)] text-xs\">\n                        <CheckIcon className=\"w-3 h-3\" />\n                        {tr(\"auth.profile.verified\", \"Verified\")}\n                      </span>\n                    )}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.phoneNumber\", \"Phone Number\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.phoneNumber || \"-\"}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.role\", \"Role\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.role?.replace(\"_\", \" \") ||\n                      tr(\"auth.profile.member\", \"Member\")}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.mfaStatus\", \"MFA Status\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.mfaEnabled ? (\n                      <span className=\"text-[var(--color-status-success-text)] flex items-center gap-1\">\n                        <CheckIcon className=\"w-4 h-4\" />\n                        {tr(\"auth.profile.enabled\", \"Enabled\")}\n                      </span>\n                    ) : (\n                      <span className=\"text-[var(--color-status-warning-text)]\">\n                        {tr(\"auth.profile.notEnabled\", \"Not Enabled\")}\n                      </span>\n                    )}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.lastLogin\", \"Last Login\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.lastLoginAt\n                      ? new Date(currentUser.lastLoginAt).toLocaleString()\n                      : tr(\"auth.profile.never\", \"Never\")}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.accountCreated\", \"Account Created\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.createdAt\n                      ? new Date(currentUser.createdAt).toLocaleString()\n                      : \"-\"}\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"flex gap-3 pt-6 mt-6 border-t border-[var(--color-border-default)]\">\n                <button\n                  onClick={() => setIsEditing(true)}\n                  className=\"auth-primary-button px-6 py-3 font-medium\"\n                >\n                  {tr(\"auth.profile.editProfile\", \"Edit Profile\")}\n                </button>\n                <button\n                  onClick={() => navigate(\"/auth/security\")}\n                  className=\"px-6 py-3 rounded-xl border border-[var(--color-border-default)] text-[var(--color-text-secondary)] font-medium hover:bg-[var(--color-bg-muted)] transition-colors duration-200\"\n                >\n                  {tr(\"auth.profile.securitySettings\", \"Security Settings\")}\n                </button>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n\n      {/* Quick Links */}\n      <div className=\"mt-8 grid grid-cols-1 md:grid-cols-3 gap-4\">\n        <button\n          onClick={() => navigate(\"/auth/mfa\")}\n          className=\"p-4 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] hover:border-[var(--color-action-primary-border)] transition-colors duration-200 text-left group\"\n        >\n          <div className=\"w-10 h-10 rounded-lg bg-[var(--color-bg-accent)] flex items-center justify-center mb-3 group-hover:bg-[var(--color-action-primary-bg-subtle)] transition-colors duration-200\">\n            <svg\n              className=\"w-5 h-5 text-[var(--color-text-link)]\"\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=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"font-medium text-[var(--color-text-primary)]\">\n            {tr(\"auth.profile.twoFactorAuth\", \"Two-Factor Auth\")}\n          </h3>\n          <p className=\"text-sm text-[var(--color-text-tertiary)] mt-1\">\n            {currentUser.mfaEnabled\n              ? tr(\"auth.profile.manageMfa\", \"Manage MFA settings\")\n              : tr(\"auth.profile.enableMfa\", \"Enable MFA for extra security\")}\n          </p>\n        </button>\n\n        <button\n          onClick={() => navigate(\"/auth/api-keys\")}\n          className=\"p-4 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] hover:border-[var(--color-action-secondary-border)] transition-colors duration-200 text-left group\"\n        >\n          <div className=\"w-10 h-10 rounded-lg bg-[var(--color-action-secondary-bg-subtle)] flex items-center justify-center mb-3 group-hover:bg-[var(--color-action-secondary-bg-subtle)] transition-colors duration-200\">\n            <svg\n              className=\"w-5 h-5 text-[var(--color-action-secondary-text)]\"\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=\"M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"font-medium text-[var(--color-text-primary)]\">\n            {tr(\"auth.profile.apiKeys\", \"API Keys\")}\n          </h3>\n          <p className=\"text-sm text-[var(--color-text-tertiary)] mt-1\">\n            {tr(\n              \"auth.profile.manageApiKeys\",\n              \"Manage your API access credentials\",\n            )}\n          </p>\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"UserProfilePage.js","names":[],"sources":["../../../src/auth/pages/UserProfilePage.tsx"],"sourcesContent":["import { useState, useEffect, useRef, useId } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useAuth as useShellAuth } from \"@burdenoff/fe-libs/shared/providers/shell/AuthProvider\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useUserOperations } from \"../hooks/useUserOperations\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { AuthLayout } from \"../components/AuthLayout\";\nimport {\n  SpinnerIcon,\n  AlertIcon,\n  UserIcon,\n  EmailIcon,\n  CheckIcon,\n} from \"../components/AuthIcons\";\nimport {\n  useInitiateAvatarUploadMutation,\n  useCompleteAvatarUploadMutation,\n} from \"../../generated/wspace-operations\";\nimport { useGatewayClient } from \"@burdenoff/fe-libs/shared/graphql\";\n\ninterface ProfileFormData {\n  username: string;\n  firstName: string;\n  lastName: string;\n  name: string;\n  phoneNumber: string;\n}\n\n/**\n * User Profile page for viewing and editing own profile\n */\nexport function UserProfilePage() {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n\n  const navigate = useNavigate();\n  const shellAuth = useShellAuth();\n  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);\n  const currentUser = useAuthStore((state) => state.user);\n  const setStoreUser = useAuthStore((state) => state.setUser);\n  const { updateCurrentUserProfile, isLoading } = useUserOperations();\n\n  const usernameId = useId();\n  const displayNameId = useId();\n  const firstNameId = useId();\n  const lastNameId = useId();\n  const phoneNumberId = useId();\n\n  const currentWorkspaceId = useAuthStore((state) => state.currentWorkspaceId);\n  const wspaceClient = useGatewayClient(\"workspace\");\n  const [initiateUpload] = useInitiateAvatarUploadMutation({\n    client: wspaceClient,\n  });\n  const [completeUpload] = useCompleteAvatarUploadMutation({\n    client: wspaceClient,\n  });\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const [isUploadingAvatar, setIsUploadingAvatar] = useState(false);\n\n  const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {\n    const file = e.target.files?.[0];\n    if (!file) return;\n    if (!file.type.startsWith(\"image/\")) {\n      setError(\n        tr(\"auth.profile.invalidImageType\", \"Please select an image file\"),\n      );\n      return;\n    }\n    if (!currentWorkspaceId) {\n      setError(\n        tr(\n          \"auth.profile.noWorkspace\",\n          \"Please select a workspace before uploading a profile picture\",\n        ),\n      );\n      return;\n    }\n    setIsUploadingAvatar(true);\n    setError(null);\n    const wsHeaders = { \"x-workspace-id\": currentWorkspaceId };\n    try {\n      const extension = file.name.split(\".\").pop()?.toLowerCase() ?? \"\";\n      const initiateResult = await initiateUpload({\n        variables: {\n          input: {\n            fileName: file.name,\n            fileSize: file.size.toString(),\n            mimeType: file.type,\n            extension,\n          },\n        },\n        context: { headers: wsHeaders },\n      });\n      const session = initiateResult.data?.initiateUpload.session;\n      const uploadUrl = initiateResult.data?.initiateUpload.uploadUrl;\n      if (!session || !uploadUrl) throw new Error(\"Failed to initiate upload\");\n\n      const uploadResp = await fetch(uploadUrl, {\n        method: \"PUT\",\n        headers: { \"Content-Type\": file.type },\n        body: file,\n      });\n      if (!uploadResp.ok) throw new Error(\"Failed to upload file\");\n\n      const completeResult = await completeUpload({\n        variables: { input: { sessionId: session.id } },\n        context: { headers: wsHeaders },\n      });\n      const avatarUrl = completeResult.data?.completeUpload.file?.downloadUrl;\n      if (!avatarUrl) throw new Error(\"Upload succeeded but no URL returned\");\n\n      await updateCurrentUserProfile({ avatar: avatarUrl });\n      // Update both the local authStore and the shell AuthProvider so the nav\n      // bar avatar reflects the change immediately without a page reload.\n      if (currentUser) {\n        setStoreUser({ ...currentUser, avatar: avatarUrl });\n      }\n      shellAuth.updateUser({ avatar: avatarUrl });\n      setSuccessMessage(\n        tr(\"auth.profile.avatarUpdated\", \"Profile picture updated!\"),\n      );\n    } catch (err) {\n      setError(\n        err instanceof Error\n          ? err.message\n          : tr(\"auth.profile.avatarFailed\", \"Failed to upload picture\"),\n      );\n    } finally {\n      setIsUploadingAvatar(false);\n      if (fileInputRef.current) fileInputRef.current.value = \"\";\n    }\n  };\n\n  const [isEditing, setIsEditing] = useState(false);\n  const [formData, setFormData] = useState<ProfileFormData>({\n    username: \"\",\n    firstName: \"\",\n    lastName: \"\",\n    name: \"\",\n    phoneNumber: \"\",\n  });\n  const [error, setError] = useState<string | null>(null);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n\n  // Populate form with current user data\n  useEffect(() => {\n    if (currentUser) {\n      setFormData({\n        username: currentUser.username || \"\",\n        firstName: currentUser.firstName || \"\",\n        lastName: currentUser.lastName || \"\",\n        name: currentUser.name || \"\",\n        phoneNumber: currentUser.phoneNumber || \"\",\n      });\n    }\n  }, [currentUser]);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(null);\n    setSuccessMessage(null);\n\n    try {\n      await updateCurrentUserProfile({\n        username: formData.username || undefined,\n        firstName: formData.firstName || undefined,\n        lastName: formData.lastName || undefined,\n        name: formData.name || undefined,\n        phoneNumber: formData.phoneNumber || undefined,\n      });\n      setSuccessMessage(\n        tr(\"auth.profile.updateSuccess\", \"Profile updated successfully!\"),\n      );\n      setIsEditing(false);\n    } catch (err) {\n      setError(\n        err instanceof Error\n          ? err.message\n          : tr(\"auth.profile.updateFailed\", \"Failed to update profile\"),\n      );\n    }\n  };\n\n  const cancelEdit = () => {\n    if (currentUser) {\n      setFormData({\n        username: currentUser.username || \"\",\n        firstName: currentUser.firstName || \"\",\n        lastName: currentUser.lastName || \"\",\n        name: currentUser.name || \"\",\n        phoneNumber: currentUser.phoneNumber || \"\",\n      });\n    }\n    setIsEditing(false);\n    setError(null);\n  };\n\n  // Not authenticated\n  if (!isAuthenticated || !currentUser) {\n    return (\n      <AuthLayout\n        title={tr(\"auth.profile.title\", \"Profile\")}\n        subtitle={tr(\"auth.profile.subtitle\", \"View and manage your profile\")}\n      >\n        <div className=\"text-center py-12\">\n          <div className=\"size-16 mx-auto mb-4 rounded-full bg-[var(--color-status-warning-bg-subtle)] flex items-center justify-center\">\n            <AlertIcon className=\"size-8 text-[var(--color-status-warning-text)]\" />\n          </div>\n          <h2 className=\"text-xl font-semibold text-[var(--color-text-primary)] mb-2\">\n            {tr(\"auth.profile.authRequired\", \"Authentication Required\")}\n          </h2>\n          <p className=\"text-[var(--color-text-secondary)] mb-6\">\n            {tr(\n              \"auth.profile.signInToView\",\n              \"Please sign in to view your profile\",\n            )}\n          </p>\n          <button type=\"button\"\n            onClick={() => navigate(\"/auth/login\")}\n            className=\"auth-primary-button px-6 py-3 font-semibold\"\n          >\n            {tr(\"auth.profile.signIn\", \"Sign In\")}\n          </button>\n        </div>\n      </AuthLayout>\n    );\n  }\n\n  return (\n    <div className=\"max-w-4xl mx-auto p-6\">\n      {/* Header */}\n      <div className=\"mb-8\">\n        <h1 className=\"text-3xl font-semibold text-[var(--color-text-primary)]\">\n          {tr(\"auth.profile.myProfile\", \"My Profile\")}\n        </h1>\n        <p className=\"text-[var(--color-text-secondary)] mt-2\">\n          {tr(\n            \"auth.profile.viewAndManage\",\n            \"View and manage your account information\",\n          )}\n        </p>\n      </div>\n\n      {/* Success Message */}\n      {successMessage && (\n        <div className=\"mb-6 flex items-center gap-3 p-4 rounded-xl bg-[var(--color-status-success-bg-subtle)] border border-[var(--color-status-success-border)]\">\n          <CheckIcon className=\"size-5 text-[var(--color-status-success-text)] flex-shrink-0\" />\n          <p className=\"text-[var(--color-status-success-text)]\">\n            {successMessage}\n          </p>\n          <button type=\"button\"\n            onClick={() => setSuccessMessage(null)}\n            className=\"ml-auto text-sm text-[var(--color-status-success-text)] hover:underline transition-colors duration-200\"\n          >\n            {tr(\"auth.profile.dismiss\", \"Dismiss\")}\n          </button>\n        </div>\n      )}\n\n      {/* Error Message */}\n      {error && (\n        <div className=\"mb-6 flex items-start gap-3 p-4 rounded-xl bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)]\">\n          <AlertIcon className=\"size-5 text-[var(--color-status-error-text)] flex-shrink-0 mt-0.5\" />\n          <div className=\"flex-1\">\n            <p className=\"text-sm text-[var(--color-status-error-text)]\">\n              {error}\n            </p>\n          </div>\n          <button type=\"button\"\n            onClick={() => setError(null)}\n            className=\"text-sm text-[var(--color-status-error-text)] hover:underline transition-colors duration-200\"\n          >\n            {tr(\"auth.profile.dismiss\", \"Dismiss\")}\n          </button>\n        </div>\n      )}\n\n      {/* Profile Card */}\n      <div className=\"rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] shadow-sm overflow-hidden\">\n        {/* Profile Header */}\n        <div className=\"auth-hero-card p-6\">\n          <div className=\"flex items-center gap-4\">\n            <div className=\"relative group\">\n              {currentUser.avatar ? (\n                <img\n                  src={currentUser.avatar}\n                  alt={tr(\"auth.profile.avatarAlt\", \"Profile picture\")}\n                  className=\"size-20 rounded-full object-cover shadow-lg\"\n                />\n              ) : (\n                <div className=\"size-20 rounded-full bg-bg-surface/20 backdrop-blur-sm flex items-center justify-center text-white text-3xl font-semibold shadow-lg\">\n                  {(\n                    currentUser.name ||\n                    currentUser.username ||\n                    currentUser.email\n                  )\n                    .charAt(0)\n                    .toUpperCase()}\n                </div>\n              )}\n              <button\n                type=\"button\"\n                onClick={() => fileInputRef.current?.click()}\n                disabled={isUploadingAvatar}\n                aria-label={tr(\n                  \"auth.profile.changeAvatar\",\n                  \"Change profile picture\",\n                )}\n                className=\"absolute inset-0 rounded-full flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 cursor-pointer\"\n              >\n                {isUploadingAvatar ? (\n                  <SpinnerIcon className=\"size-6 text-white animate-spin\" />\n                ) : (\n                  <svg\n                    className=\"size-6 text-white\"\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=\"M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z\"\n                    />\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M15 13a3 3 0 11-6 0 3 3 0 016 0z\"\n                    />\n                  </svg>\n                )}\n              </button>\n              <input\n                ref={fileInputRef}\n                type=\"file\"\n                accept=\"image/*\"\n                className=\"hidden\"\n                onChange={(e) => void handleAvatarUpload(e)}\n                aria-hidden=\"true\"\n              />\n            </div>\n            <div className=\"text-white\">\n              <h2 className=\"text-2xl font-semibold\">\n                {currentUser.name ||\n                  `${currentUser.firstName || \"\"} ${currentUser.lastName || \"\"}`.trim() ||\n                  currentUser.username}\n              </h2>\n              <p className=\"text-white/80 flex items-center gap-2\">\n                <EmailIcon className=\"size-4\" />\n                {currentUser.email}\n              </p>\n              <div className=\"flex items-center gap-2 mt-2\">\n                <span className=\"px-2.5 py-1 rounded-full text-xs font-medium bg-bg-surface/20 backdrop-blur-sm\">\n                  {currentUser.role?.replace(\"_\", \" \") ||\n                    tr(\"auth.profile.member\", \"Member\")}\n                </span>\n                {currentUser.emailVerified && (\n                  <span className=\"px-2.5 py-1 rounded-full text-xs font-medium bg-status-success-text/30 flex items-center gap-1\">\n                    <CheckIcon className=\"size-3\" />\n                    {tr(\"auth.profile.verified\", \"Verified\")}\n                  </span>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Profile Body */}\n        <div className=\"p-6\">\n          {isEditing ? (\n            /* Edit Form */\n            <form onSubmit={handleSubmit} className=\"space-y-6\">\n              <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                <div>\n                  <label\n                    htmlFor={usernameId}\n                    className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\"\n                  >\n                    {tr(\"auth.profile.username\", \"Username\")}\n                  </label>\n                  <div className=\"relative\">\n                    <div className=\"absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none\">\n                      <UserIcon\n                        className=\"size-5 text-[var(--color-text-tertiary)]\"\n                        aria-hidden=\"true\"\n                      />\n                    </div>\n                    <input\n                      id={usernameId}\n                      type=\"text\"\n                      value={formData.username}\n                      onChange={(e) =>\n                        setFormData({ ...formData, username: e.target.value })\n                      }\n                      className=\"block w-full pl-[3.5rem] pr-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300\"\n                      placeholder={tr(\n                        \"auth.profile.usernamePlaceholder\",\n                        \"Enter username\",\n                      )}\n                    />\n                  </div>\n                </div>\n\n                <div>\n                  <label\n                    htmlFor={displayNameId}\n                    className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\"\n                  >\n                    {tr(\"auth.profile.displayName\", \"Display Name\")}\n                  </label>\n                  <input\n                    id={displayNameId}\n                    type=\"text\"\n                    value={formData.name}\n                    onChange={(e) =>\n                      setFormData({ ...formData, name: e.target.value })\n                    }\n                    className=\"block w-full px-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300\"\n                    placeholder={tr(\n                      \"auth.profile.displayNamePlaceholder\",\n                      \"Enter display name\",\n                    )}\n                  />\n                </div>\n\n                <div>\n                  <label\n                    htmlFor={firstNameId}\n                    className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\"\n                  >\n                    {tr(\"auth.profile.firstName\", \"First Name\")}\n                  </label>\n                  <input\n                    id={firstNameId}\n                    type=\"text\"\n                    value={formData.firstName}\n                    onChange={(e) =>\n                      setFormData({ ...formData, firstName: e.target.value })\n                    }\n                    className=\"block w-full px-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300\"\n                    placeholder={tr(\n                      \"auth.profile.firstNamePlaceholder\",\n                      \"Enter first name\",\n                    )}\n                  />\n                </div>\n\n                <div>\n                  <label\n                    htmlFor={lastNameId}\n                    className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\"\n                  >\n                    {tr(\"auth.profile.lastName\", \"Last Name\")}\n                  </label>\n                  <input\n                    id={lastNameId}\n                    type=\"text\"\n                    value={formData.lastName}\n                    onChange={(e) =>\n                      setFormData({ ...formData, lastName: e.target.value })\n                    }\n                    className=\"block w-full px-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300\"\n                    placeholder={tr(\n                      \"auth.profile.lastNamePlaceholder\",\n                      \"Enter last name\",\n                    )}\n                  />\n                </div>\n\n                <div className=\"md:col-span-2\">\n                  <label\n                    htmlFor={phoneNumberId}\n                    className=\"block text-sm font-medium text-[var(--color-text-primary)] mb-2\"\n                  >\n                    {tr(\"auth.profile.phoneNumber\", \"Phone Number\")}\n                  </label>\n                  <input\n                    id={phoneNumberId}\n                    type=\"tel\"\n                    value={formData.phoneNumber}\n                    onChange={(e) =>\n                      setFormData({ ...formData, phoneNumber: e.target.value })\n                    }\n                    className=\"block w-full px-4 py-3 border border-[var(--color-border-default)] rounded-xl bg-[var(--color-bg-surface)] text-[var(--color-text-primary)] focus:outline-none focus:ring-2 focus:ring-action-primary-bg/20 focus:border-action-primary-bg transition-all duration-300\"\n                    placeholder={tr(\n                      \"auth.profile.phonePlaceholder\",\n                      \"Enter phone number\",\n                    )}\n                  />\n                </div>\n              </div>\n\n              <div className=\"flex gap-3 pt-4 border-t border-[var(--color-border-default)]\">\n                <button\n                  type=\"submit\"\n                  disabled={isLoading}\n                  className=\"auth-primary-button flex items-center gap-2 px-6 py-3 font-medium\"\n                >\n                  {isLoading ? (\n                    <>\n                      <SpinnerIcon className=\"size-4 animate-spin\" />\n                      {tr(\"auth.profile.saving\", \"Saving...\")}\n                    </>\n                  ) : (\n                    tr(\"auth.profile.saveChanges\", \"Save Changes\")\n                  )}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={cancelEdit}\n                  className=\"px-6 py-3 rounded-xl border border-[var(--color-border-default)] text-[var(--color-text-secondary)] font-medium hover:bg-[var(--color-bg-muted)] transition-colors duration-200\"\n                >\n                  {tr(\"auth.profile.cancel\", \"Cancel\")}\n                </button>\n              </div>\n            </form>\n          ) : (\n            /* View Mode */\n            <>\n              <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.username\", \"Username\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.username || \"-\"}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.displayName\", \"Display Name\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.name || \"-\"}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.firstName\", \"First Name\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.firstName || \"-\"}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.lastName\", \"Last Name\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.lastName || \"-\"}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.email\", \"Email\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium flex items-center gap-2\">\n                    {currentUser.email}\n                    {currentUser.emailVerified && (\n                      <span className=\"inline-flex items-center gap-1 text-[var(--color-status-success-text)] text-xs\">\n                        <CheckIcon className=\"size-3\" />\n                        {tr(\"auth.profile.verified\", \"Verified\")}\n                      </span>\n                    )}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.phoneNumber\", \"Phone Number\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.phoneNumber || \"-\"}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.role\", \"Role\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.role?.replace(\"_\", \" \") ||\n                      tr(\"auth.profile.member\", \"Member\")}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.mfaStatus\", \"MFA Status\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.mfaEnabled ? (\n                      <span className=\"text-[var(--color-status-success-text)] flex items-center gap-1\">\n                        <CheckIcon className=\"size-4\" />\n                        {tr(\"auth.profile.enabled\", \"Enabled\")}\n                      </span>\n                    ) : (\n                      <span className=\"text-[var(--color-status-warning-text)]\">\n                        {tr(\"auth.profile.notEnabled\", \"Not Enabled\")}\n                      </span>\n                    )}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.lastLogin\", \"Last Login\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.lastLoginAt\n                      ? new Date(currentUser.lastLoginAt).toLocaleString()\n                      : tr(\"auth.profile.never\", \"Never\")}\n                  </p>\n                </div>\n\n                <div className=\"p-4 rounded-xl bg-[var(--color-bg-muted)]\">\n                  <label className=\"block text-sm font-medium text-[var(--color-text-tertiary)] mb-1\">\n                    {tr(\"auth.profile.accountCreated\", \"Account Created\")}\n                  </label>\n                  <p className=\"text-[var(--color-text-primary)] font-medium\">\n                    {currentUser.createdAt\n                      ? new Date(currentUser.createdAt).toLocaleString()\n                      : \"-\"}\n                  </p>\n                </div>\n              </div>\n\n              <div className=\"flex gap-3 pt-6 mt-6 border-t border-[var(--color-border-default)]\">\n                <button type=\"button\"\n                  onClick={() => setIsEditing(true)}\n                  className=\"auth-primary-button px-6 py-3 font-medium\"\n                >\n                  {tr(\"auth.profile.editProfile\", \"Edit Profile\")}\n                </button>\n                <button type=\"button\"\n                  onClick={() => navigate(\"/auth/security\")}\n                  className=\"px-6 py-3 rounded-xl border border-[var(--color-border-default)] text-[var(--color-text-secondary)] font-medium hover:bg-[var(--color-bg-muted)] transition-colors duration-200\"\n                >\n                  {tr(\"auth.profile.securitySettings\", \"Security Settings\")}\n                </button>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n\n      {/* Quick Links */}\n      <div className=\"mt-8 grid grid-cols-1 md:grid-cols-3 gap-4\">\n        <button type=\"button\"\n          onClick={() => navigate(\"/auth/mfa\")}\n          className=\"p-4 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] hover:border-[var(--color-action-primary-border)] transition-colors duration-200 text-left group\"\n        >\n          <div className=\"size-10 rounded-lg bg-[var(--color-bg-accent)] flex items-center justify-center mb-3 group-hover:bg-[var(--color-action-primary-bg-subtle)] transition-colors duration-200\">\n            <svg\n              className=\"size-5 text-[var(--color-text-link)]\"\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=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"font-medium text-[var(--color-text-primary)]\">\n            {tr(\"auth.profile.twoFactorAuth\", \"Two-Factor Auth\")}\n          </h3>\n          <p className=\"text-sm text-[var(--color-text-tertiary)] mt-1\">\n            {currentUser.mfaEnabled\n              ? tr(\"auth.profile.manageMfa\", \"Manage MFA settings\")\n              : tr(\"auth.profile.enableMfa\", \"Enable MFA for extra security\")}\n          </p>\n        </button>\n\n        <button type=\"button\"\n          onClick={() => navigate(\"/auth/api-keys\")}\n          className=\"p-4 rounded-xl border border-[var(--color-border-default)] bg-[var(--color-bg-surface)] hover:border-[var(--color-action-secondary-border)] transition-colors duration-200 text-left group\"\n        >\n          <div className=\"size-10 rounded-lg bg-[var(--color-action-secondary-bg-subtle)] flex items-center justify-center mb-3 group-hover:bg-[var(--color-action-secondary-bg-subtle)] transition-colors duration-200\">\n            <svg\n              className=\"size-5 text-[var(--color-action-secondary-text)]\"\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=\"M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z\"\n              />\n            </svg>\n          </div>\n          <h3 className=\"font-medium text-[var(--color-text-primary)]\">\n            {tr(\"auth.profile.apiKeys\", \"API Keys\")}\n          </h3>\n          <p className=\"text-sm text-[var(--color-text-tertiary)] mt-1\">\n            {tr(\n              \"auth.profile.manageApiKeys\",\n              \"Manage your API access credentials\",\n            )}\n          </p>\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/auth/pages/UsersPage.js

@@ -1,8 +1,7 @@
 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 { AlertIcon as t, SpinnerIcon as n } from "../components/AuthIcons.js";
+import { useUserOperations as r } from "../hooks/useUserOperations.js";
+import { useAuthPermissions as i } from "../hooks/useAuthPermissions.js";
 import { ConfirmActionDialog as a } from "../components/ConfirmActionDialog.js";
 import { nativeImpact as o, nativeNotify as s } from "../../utils/nativeBridge.js";
 import { useCallback as ee, useEffect as te, useId as c, useState as l } from "react";
@@ -26,7 +25,7 @@ function h() {
 	let h = ne(), { t: ie } = re(), g = (e, t) => {
 		let n = ie(e);
 		return n === e ? t : n;
-	}, _ = e((e) => e.isAuthenticated), v = e((e) => e.user), { canViewUsers: ae, canUpdateUsers: oe, canDeleteUsers: y, isLoading: se } = n(), { listUsers: b, updateUser: ce, deleteUser: le, hardDeleteUser: ue, isLoading: x } = t(), S = c(), C = c(), w = c(), T = c(), de = c(), [E, D] = l(!1), fe = async () => {
+	}, _ = e((e) => e.isAuthenticated), v = e((e) => e.user), { canViewUsers: ae, canUpdateUsers: oe, canDeleteUsers: y, isLoading: se } = i(), { listUsers: b, updateUser: ce, deleteUser: le, hardDeleteUser: ue, isLoading: x } = r(), S = c(), C = c(), w = c(), T = c(), de = c(), [E, D] = l(!1), fe = async () => {
 		D(!0);
 		try {
 			let e = {};
@@ -208,9 +207,9 @@ function h() {
 			className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
 			children: [
 				/* @__PURE__ */ d("div", {
-					className: "w-16 h-16 mx-auto mb-4 rounded-full bg-status-error-bg-subtle flex items-center justify-center",
+					className: "size-16 mx-auto mb-4 rounded-full bg-status-error-bg-subtle flex items-center justify-center",
 					children: /* @__PURE__ */ d("svg", {
-						className: "w-8 h-8 text-status-error-text",
+						className: "size-8 text-status-error-text",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -236,7 +235,7 @@ function h() {
 		className: "max-w-6xl mx-auto p-6",
 		children: /* @__PURE__ */ f("div", {
 			className: "text-center py-16",
-			children: [/* @__PURE__ */ d(i, { className: "w-8 h-8 mx-auto text-text-secondary animate-spin" }), /* @__PURE__ */ d("p", {
+			children: [/* @__PURE__ */ d(n, { className: "size-8 mx-auto text-text-secondary animate-spin" }), /* @__PURE__ */ d("p", {
 				className: "mt-4 text-text-secondary",
 				children: g("auth.users.loadingPermissions", "Loading permissions...")
 			})]
@@ -247,9 +246,9 @@ function h() {
 			className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
 			children: [
 				/* @__PURE__ */ d("div", {
-					className: "w-16 h-16 mx-auto mb-4 rounded-full bg-status-error-bg-subtle flex items-center justify-center",
+					className: "size-16 mx-auto mb-4 rounded-full bg-status-error-bg-subtle flex items-center justify-center",
 					children: /* @__PURE__ */ d("svg", {
-						className: "w-8 h-8 text-status-error-text",
+						className: "size-8 text-status-error-text",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -300,11 +299,11 @@ function h() {
 					disabled: E,
 					"aria-label": g("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: E ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(i, {
-						className: "w-4 h-4 animate-spin",
+					children: E ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(n, {
+						className: "size-4 animate-spin",
 						"aria-hidden": "true"
 					}), g("auth.users.exporting", "Exporting...")] }) : /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("svg", {
-						className: "w-4 h-4",
+						className: "size-4",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -349,8 +348,8 @@ function h() {
 				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__ */ d(r, {
-					className: "w-5 h-5 text-status-error-text flex-shrink-0 mt-0.5",
+				children: [/* @__PURE__ */ d(t, {
+					className: "size-5 text-status-error-text flex-shrink-0 mt-0.5",
 					"aria-hidden": "true"
 				}), /* @__PURE__ */ f("div", {
 					className: "flex-1",
@@ -432,8 +431,8 @@ function h() {
 				"aria-live": "polite",
 				"aria-busy": "true",
 				className: "flex items-center justify-center py-12",
-				children: [/* @__PURE__ */ d(i, {
-					className: "w-8 h-8 text-text-link animate-spin",
+				children: [/* @__PURE__ */ d(n, {
+					className: "size-8 text-text-link animate-spin",
 					"aria-hidden": "true"
 				}), /* @__PURE__ */ d("span", {
 					className: "ml-3 text-text-secondary",
@@ -442,9 +441,9 @@ function h() {
 			}) : O.length === 0 ? /* @__PURE__ */ f("div", {
 				className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
 				children: [/* @__PURE__ */ d("div", {
-					className: "w-16 h-16 mx-auto mb-4 rounded-full bg-bg-sunken flex items-center justify-center",
+					className: "size-16 mx-auto mb-4 rounded-full bg-bg-sunken flex items-center justify-center",
 					children: /* @__PURE__ */ d("svg", {
-						className: "w-8 h-8 text-text-tertiary",
+						className: "size-8 text-text-tertiary",
 						fill: "none",
 						viewBox: "0 0 24 24",
 						stroke: "currentColor",
@@ -471,32 +470,32 @@ function h() {
 							children: [
 								/* @__PURE__ */ d("th", {
 									scope: "col",
-									className: "text-left py-4 px-4 text-sm font-medium text-text-secondary w-[280px]",
+									className: "text-left p-4 text-sm font-medium text-text-secondary w-[280px]",
 									children: g("auth.users.columnUser", "User")
 								}),
 								/* @__PURE__ */ d("th", {
 									scope: "col",
-									className: "text-left py-4 px-4 text-sm font-medium text-text-secondary w-[130px]",
+									className: "text-left p-4 text-sm font-medium text-text-secondary w-[130px]",
 									children: g("auth.users.columnRole", "Role")
 								}),
 								/* @__PURE__ */ d("th", {
 									scope: "col",
-									className: "text-left py-4 px-4 text-sm font-medium text-text-secondary w-[100px]",
+									className: "text-left p-4 text-sm font-medium text-text-secondary w-[100px]",
 									children: g("auth.users.columnStatus", "Status")
 								}),
 								/* @__PURE__ */ d("th", {
 									scope: "col",
-									className: "text-left py-4 px-4 text-sm font-medium text-text-secondary w-[80px]",
+									className: "text-left p-4 text-sm font-medium text-text-secondary w-[80px]",
 									children: g("auth.users.columnVerified", "Verified")
 								}),
 								/* @__PURE__ */ d("th", {
 									scope: "col",
-									className: "text-left py-4 px-4 text-sm font-medium text-text-secondary w-[100px]",
+									className: "text-left p-4 text-sm font-medium text-text-secondary w-[100px]",
 									children: g("auth.users.columnLastLogin", "Last Login")
 								}),
 								/* @__PURE__ */ d("th", {
 									scope: "col",
-									className: "text-right py-4 px-4 text-sm font-medium text-text-secondary w-[180px]",
+									className: "text-right p-4 text-sm font-medium text-text-secondary w-[180px]",
 									children: g("auth.users.columnActions", "Actions")
 								})
 							]
@@ -504,11 +503,11 @@ function h() {
 							className: "border-b border-border-subtle last:border-b-0 hover:bg-bg-sunken/50 transition-colors",
 							children: [
 								/* @__PURE__ */ d("td", {
-									className: "py-4 px-4",
+									className: "p-4",
 									children: /* @__PURE__ */ f("div", {
 										className: "flex items-center gap-3 min-w-0",
 										children: [/* @__PURE__ */ d("div", {
-											className: "auth-brand-badge flex h-10 w-10 shrink-0 items-center justify-center rounded-full font-medium",
+											className: "auth-brand-badge flex size-10 shrink-0 items-center justify-center rounded-full font-medium",
 											children: (e.name || e.username || e.email).charAt(0).toUpperCase()
 										}), /* @__PURE__ */ f("div", {
 											className: "min-w-0 flex-1",
@@ -523,25 +522,25 @@ function h() {
 									})
 								}),
 								/* @__PURE__ */ d("td", {
-									className: "py-4 px-4",
+									className: "p-4",
 									children: /* @__PURE__ */ d("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__ */ d("td", {
-									className: "py-4 px-4",
+									className: "p-4",
 									children: /* @__PURE__ */ d("span", {
 										className: `inline-block px-2.5 py-1 rounded-full text-xs font-medium whitespace-nowrap ${$(e.status)}`,
 										children: e.status
 									})
 								}),
 								/* @__PURE__ */ d("td", {
-									className: "py-4 px-4",
+									className: "p-4",
 									children: e.emailVerified ? /* @__PURE__ */ f("span", {
 										className: "inline-flex items-center gap-1 text-status-success-text whitespace-nowrap",
 										children: [/* @__PURE__ */ d("svg", {
-											className: "w-4 h-4 flex-shrink-0",
+											className: "size-4 flex-shrink-0",
 											fill: "currentColor",
 											viewBox: "0 0 20 20",
 											children: /* @__PURE__ */ d("path", {
@@ -556,7 +555,7 @@ function h() {
 									}) : /* @__PURE__ */ f("span", {
 										className: "inline-flex items-center gap-1 text-status-warning-text whitespace-nowrap",
 										children: [/* @__PURE__ */ d("svg", {
-											className: "w-4 h-4 flex-shrink-0",
+											className: "size-4 flex-shrink-0",
 											fill: "currentColor",
 											viewBox: "0 0 20 20",
 											children: /* @__PURE__ */ d("path", {
@@ -571,11 +570,11 @@ function h() {
 									})
 								}),
 								/* @__PURE__ */ d("td", {
-									className: "py-4 px-4 text-sm text-text-secondary whitespace-nowrap",
+									className: "p-4 text-sm text-text-secondary whitespace-nowrap",
 									children: e.lastLoginAt ? new Date(e.lastLoginAt).toLocaleDateString() : g("auth.users.lastLoginNever", "Never")
 								}),
 								/* @__PURE__ */ d("td", {
-									className: "py-4 px-4",
+									className: "p-4",
 									children: /* @__PURE__ */ f("div", {
 										className: "flex justify-end gap-1.5 flex-nowrap",
 										children: [
@@ -657,12 +656,13 @@ function h() {
 		children: [
 			Z,
 			/* @__PURE__ */ f("button", {
+				type: "button",
 				onClick: () => {
 					j("list"), Y();
 				},
 				className: "mb-6 flex items-center gap-2 text-text-link hover:underline font-medium",
 				children: [/* @__PURE__ */ d("svg", {
-					className: "w-4 h-4",
+					className: "size-4",
 					fill: "none",
 					viewBox: "0 0 24 24",
 					stroke: "currentColor",
@@ -680,7 +680,7 @@ function h() {
 					/* @__PURE__ */ f("div", {
 						className: "flex items-center gap-4 mb-8",
 						children: [/* @__PURE__ */ d("div", {
-							className: "auth-brand-badge flex h-20 w-20 items-center justify-center rounded-full text-3xl font-semibold",
+							className: "auth-brand-badge flex size-20 items-center justify-center rounded-full text-3xl font-semibold",
 							children: (M.name || M.username || M.email).charAt(0).toUpperCase()
 						}), /* @__PURE__ */ f("div", { children: [
 							/* @__PURE__ */ d("h1", {
@@ -804,11 +804,13 @@ function h() {
 						className: "mt-8 pt-6 border-t border-border-subtle flex gap-3",
 						children: [
 							/* @__PURE__ */ d("button", {
+								type: "button",
 								onClick: () => X(M),
 								className: "auth-primary-button px-4 py-2.5 font-medium",
 								children: g("auth.users.editUser", "Edit User")
 							}),
 							M.status !== "DELETED" && /* @__PURE__ */ d("button", {
+								type: "button",
 								onClick: () => H({
 									type: "deactivate",
 									user: M
@@ -817,6 +819,7 @@ function h() {
 								children: g("auth.users.deleteUser", "Delete User")
 							}),
 							y && M.status === "DELETED" && v?.role === "SUPER_ADMIN" && /* @__PURE__ */ d("button", {
+								type: "button",
 								onClick: () => H({
 									type: "hard-delete",
 									user: M
@@ -834,12 +837,13 @@ function h() {
 		children: [
 			Z,
 			/* @__PURE__ */ f("button", {
+				type: "button",
 				onClick: () => {
 					j("list"), Y();
 				},
 				className: "mb-6 flex items-center gap-2 text-text-link hover:underline font-medium",
 				children: [/* @__PURE__ */ d("svg", {
-					className: "w-4 h-4",
+					className: "size-4",
 					fill: "none",
 					viewBox: "0 0 24 24",
 					stroke: "currentColor",
@@ -868,7 +872,7 @@ function h() {
 					}),
 					I && /* @__PURE__ */ f("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__ */ d(r, { className: "w-5 h-5 text-status-error-text flex-shrink-0 mt-0.5" }), /* @__PURE__ */ d("div", {
+						children: [/* @__PURE__ */ d(t, { className: "size-5 text-status-error-text flex-shrink-0 mt-0.5" }), /* @__PURE__ */ d("div", {
 							className: "flex-1",
 							children: /* @__PURE__ */ d("p", {
 								className: "text-sm text-status-error-text",
@@ -1002,7 +1006,7 @@ function h() {
 										...P,
 										emailVerified: e.target.checked
 									}),
-									className: "w-5 h-5 rounded border-border-default text-text-link focus:ring-action-primary-bg"
+									className: "size-5 rounded border-border-default text-text-link focus:ring-action-primary-bg"
 								}), /* @__PURE__ */ d("label", {
 									htmlFor: "emailVerified",
 									className: "text-sm font-medium text-text-primary",
@@ -1015,7 +1019,7 @@ function h() {
 									type: "submit",
 									disabled: x,
 									className: "auth-primary-button flex items-center gap-2 px-6 py-3 font-medium",
-									children: x ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(i, { className: "w-4 h-4 animate-spin" }), g("auth.users.saving", "Saving...")] }) : g("auth.users.saveChanges", "Save Changes")
+									children: x ? /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(n, { className: "size-4 animate-spin" }), g("auth.users.saving", "Saving...")] }) : g("auth.users.saveChanges", "Save Changes")
 								}), /* @__PURE__ */ d("button", {
 									type: "button",
 									onClick: () => {
@@ -1036,8 +1040,8 @@ function h() {
 			className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
 			children: [
 				/* @__PURE__ */ d("div", {
-					className: "w-16 h-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center",
-					children: /* @__PURE__ */ d(r, { className: "w-8 h-8 text-status-warning-text" })
+					className: "size-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center",
+					children: /* @__PURE__ */ d(t, { className: "size-8 text-status-warning-text" })
 				}),
 				/* @__PURE__ */ d("h2", {
 					className: "text-xl font-semibold text-text-primary mb-2",