@burdenoff/microfe-auth 2026.527.1 → 2026.527.2

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

@@ -1 +1 @@
-{"version":3,"file":"SecurityPage.js","names":[],"sources":["../../../src/auth/pages/SecurityPage.tsx"],"sourcesContent":["import { useId, useRef, useEffect, useState } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { ConfirmActionDialog } from \"../components/ConfirmActionDialog\";\nimport { useAuthOperations, useAccountOperations } from \"../hooks\";\nimport { formatDate } from \"../utils\";\nimport { nativeImpact, nativeNotify } from \"../../utils/nativeBridge\";\n\n// Icons\nconst ShieldIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\n    />\n  </svg>\n);\n\nconst LockIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\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);\n\n// Hidden — moved to Developer Portal\n// const KeyIcon = ({ className }: { className?: string }) => (\n//   <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n//     <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5}\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//   </svg>\n// );\n\n// const DelegationIcon = ({ className }: { className?: string }) => (\n//   <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n//     <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5}\n//       d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\" />\n//   </svg>\n// );\n\nconst UsersIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z\"\n    />\n  </svg>\n);\n\nconst UserProfileIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\n    />\n  </svg>\n);\n\nconst LinkIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1\"\n    />\n  </svg>\n);\n\nconst ChevronRightIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M9 5l7 7-7 7\"\n    />\n  </svg>\n);\n\nconst CheckCircleIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"currentColor\"\n    viewBox=\"0 0 20 20\"\n    aria-hidden=\"true\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst ExclamationIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"currentColor\"\n    viewBox=\"0 0 20 20\"\n    aria-hidden=\"true\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst SpinnerIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <circle\n      className=\"opacity-25\"\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      strokeWidth=\"4\"\n    />\n    <path\n      className=\"opacity-75\"\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n    />\n  </svg>\n);\n\ninterface NavItem {\n  name: string;\n  description: string;\n  path: string;\n  icon: React.FC<{ className?: string }>;\n  color: string;\n  bgColor: string;\n  adminOnly?: boolean;\n}\n\nconst DELETE_ACCOUNT_CONFIRMATION = \"DELETE MY ACCOUNT\";\n\n/**\n * Security Dashboard - Main hub for all authentication features\n */\nexport function SecurityPage() {\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 user = useAuthStore((state) => state.user);\n  const { signOut } = useAuthOperations({\n    disableCurrentUserQuery: true,\n  });\n  const { deactivateAccount, deleteAccount, isDeactivating, isDeleting } =\n    useAccountOperations();\n  const [isLoggingOut, setIsLoggingOut] = useState(false);\n  const [showLogoutDialog, setShowLogoutDialog] = useState(false);\n\n  const navigationItems: NavItem[] = [\n    {\n      name: tr(\"auth.security.navProfile\", \"User Profile\"),\n      description: tr(\n        \"auth.security.navProfileDesc\",\n        \"View and edit your profile information\",\n      ),\n      path: \"/auth/profile\",\n      icon: UserProfileIcon,\n      color: \"text-accent-teal\",\n      bgColor: \"bg-accent-teal-subtle\",\n    },\n    {\n      name: tr(\"auth.security.navMfa\", \"Two-Factor Authentication\"),\n      description: tr(\n        \"auth.security.navMfaDesc\",\n        \"Secure your account with TOTP\",\n      ),\n      path: \"/auth/mfa\",\n      icon: LockIcon,\n      color: \"text-accent-purple\",\n      bgColor: \"bg-accent-purple-subtle\",\n    },\n    // Hidden — moved to Developer Portal\n    // {\n    //   name: tr(\"auth.security.navApiKeys\", \"API Keys\"),\n    //   description: tr(\"auth.security.navApiKeysDesc\", \"Manage programmatic access tokens\"),\n    //   path: \"/auth/api-keys\",\n    //   icon: KeyIcon,\n    //   color: \"text-status-warning-text\",\n    //   bgColor: \"bg-status-warning-bg-subtle\",\n    // },\n    // {\n    //   name: tr(\"auth.security.navDelegations\", \"Delegations\"),\n    //   description: tr(\"auth.security.navDelegationsDesc\", \"Manage apps acting on your behalf\"),\n    //   path: \"/auth/delegations\",\n    //   icon: DelegationIcon,\n    //   color: \"text-status-warning-text\",\n    //   bgColor: \"bg-status-warning-bg-subtle\",\n    // },\n    {\n      name: tr(\"auth.security.navUsers\", \"Users\"),\n      description: tr(\"auth.security.navUsersDesc\", \"Manage system users\"),\n      path: \"/auth/users\",\n      icon: UsersIcon,\n      color: \"text-accent-indigo\",\n      bgColor: \"bg-accent-indigo-subtle\",\n      adminOnly: true,\n    },\n  ];\n\n  const quickActions = [\n    {\n      name: tr(\"auth.security.navSso\", \"SSO Configuration\"),\n      description: tr(\"auth.security.navSsoDesc\", \"Enterprise single sign-on\"),\n      path: \"/auth/sso\",\n      icon: LinkIcon,\n      color: \"text-accent-cyan\",\n      bgColor: \"bg-accent-cyan-subtle\",\n      adminOnly: true,\n    },\n  ];\n\n  // Account management modal states\n  const [showDeactivateModal, setShowDeactivateModal] = useState(false);\n  const [showDeleteModal, setShowDeleteModal] = useState(false);\n  const [accountPassword, setAccountPassword] = useState(\"\");\n  const [deleteConfirmPhrase, setDeleteConfirmPhrase] = useState(\"\");\n  const [accountError, setAccountError] = useState<string | null>(null);\n  const [accountSuccess, setAccountSuccess] = useState<string | null>(null);\n\n  // Accessible IDs for modal labels and form fields\n  const deactivateTitleId = useId();\n  const deactivatePasswordId = useId();\n  const deactivateErrorId = useId();\n  const deleteTitleId = useId();\n  const deletePasswordId = useId();\n  const deleteConfirmId = useId();\n  const deleteErrorId = useId();\n\n  // Focus management: refs to restore focus and manage modal focus\n  const deactivateTriggerRef = useRef<HTMLButtonElement>(null);\n  const deleteTriggerRef = useRef<HTMLButtonElement>(null);\n  const deactivateDialogRef = useRef<HTMLDivElement>(null);\n  const deleteDialogRef = useRef<HTMLDivElement>(null);\n\n  // Move focus into modal when it opens; restore to trigger on close\n  useEffect(() => {\n    if (showDeactivateModal) {\n      deactivateDialogRef.current?.focus();\n    } else {\n      deactivateTriggerRef.current?.focus();\n    }\n  }, [showDeactivateModal]);\n\n  useEffect(() => {\n    if (showDeleteModal) {\n      deleteDialogRef.current?.focus();\n    } else {\n      deleteTriggerRef.current?.focus();\n    }\n  }, [showDeleteModal]);\n\n  const handleLogout = async () => {\n    setIsLoggingOut(true);\n    try {\n      await signOut();\n      navigate(\"/auth/login\");\n      setShowLogoutDialog(false);\n    } catch (error) {\n      console.error(\"Logout failed:\", error);\n      setIsLoggingOut(false);\n    }\n  };\n\n  const handleDeactivateAccount = async () => {\n    setAccountError(null);\n    try {\n      const result = await deactivateAccount(accountPassword);\n      if (result.success) {\n        // Immediately redirect to login page\n        navigate(\"/auth/login\", { replace: true });\n      } else {\n        setAccountError(\n          result.message ||\n            tr(\n              \"auth.security.deactivateFailed\",\n              \"Failed to deactivate account\",\n            ),\n        );\n      }\n    } catch (error) {\n      setAccountError(\n        error instanceof Error\n          ? error.message\n          : tr(\n              \"auth.security.deactivateFailed\",\n              \"Failed to deactivate account\",\n            ),\n      );\n    }\n  };\n\n  const handleDeleteAccount = async () => {\n    setAccountError(null);\n    if (deleteConfirmPhrase !== DELETE_ACCOUNT_CONFIRMATION) {\n      setAccountError(\n        tr(\n          \"auth.security.deleteConfirmMismatch\",\n          'Please type \"DELETE MY ACCOUNT\" to confirm',\n        ),\n      );\n      return;\n    }\n    void nativeImpact(\"medium\");\n    try {\n      const result = await deleteAccount(accountPassword, deleteConfirmPhrase);\n      if (result.success) {\n        void nativeNotify(\"success\");\n        // Immediately redirect to login page\n        navigate(\"/auth/login\", { replace: true });\n      } else {\n        void nativeNotify(\"error\");\n        setAccountError(\n          result.message ||\n            tr(\"auth.security.deleteFailed\", \"Failed to delete account\"),\n        );\n      }\n    } catch (error) {\n      void nativeNotify(\"error\");\n      setAccountError(\n        error instanceof Error\n          ? error.message\n          : tr(\"auth.security.deleteFailed\", \"Failed to delete account\"),\n      );\n    }\n  };\n\n  const closeModals = () => {\n    setShowDeactivateModal(false);\n    setShowDeleteModal(false);\n    setAccountPassword(\"\");\n    setDeleteConfirmPhrase(\"\");\n    setAccountError(null);\n    setAccountSuccess(null);\n  };\n\n  const isAdmin =\n    user?.role === \"SUPER_ADMIN\" ||\n    user?.role === \"TENANT_ADMIN\" ||\n    user?.role === \"ORG_ADMIN\";\n  const filteredNavItems = navigationItems.filter(\n    (item) => !item.adminOnly || isAdmin,\n  );\n  const filteredQuickActions = quickActions.filter(\n    (item) => !item.adminOnly || isAdmin,\n  );\n\n  return (\n    <div className=\"bg-bg-canvas p-6\">\n      <ConfirmActionDialog\n        open={showLogoutDialog}\n        onOpenChange={setShowLogoutDialog}\n        title={tr(\"auth.security.signOutDialogTitle\", \"Sign out now?\")}\n        description={tr(\n          \"auth.security.signOutDialogDescription\",\n          \"You will be signed out of this device and returned to the login screen.\",\n        )}\n        confirmText={tr(\"auth.security.signOutDialogConfirm\", \"Sign out\")}\n        variant=\"warning\"\n        isPending={isLoggingOut}\n        onConfirm={handleLogout}\n      />\n      <main className=\"max-w-7xl mx-auto space-y-8\">\n        <div className=\"flex items-center gap-3\">\n          <div className=\"auth-brand-badge flex h-10 w-10 items-center justify-center rounded-xl\">\n            <ShieldIcon className=\"w-6 h-6 text-white\" />\n          </div>\n          <div>\n            <h1 className=\"text-lg font-bold text-text-primary\">\n              {tr(\"auth.security.title\", \"Security Center\")}\n            </h1>\n            <p className=\"text-xs text-text-secondary \">\n              {tr(\"auth.security.subtitle\", \"Account & Authentication\")}\n            </p>\n          </div>\n        </div>\n\n        {/* Security Status Banner */}\n        <div className=\"auth-hero-card rounded-2xl p-6\">\n          <div className=\"flex flex-col md:flex-row md:items-center md:justify-between gap-4\">\n            <div className=\"flex items-center gap-4\">\n              <div className=\"w-14 h-14 rounded-2xl bg-bg-surface/20 backdrop-blur flex items-center justify-center\">\n                <ShieldIcon className=\"w-8 h-8 text-white\" />\n              </div>\n              <div>\n                <h2 className=\"text-xl font-bold\">\n                  {tr(\"auth.security.securityStatus\", \"Security Status\")}\n                </h2>\n                <p className=\"opacity-80\">\n                  {user?.mfaEnabled\n                    ? tr(\n                        \"auth.security.wellProtected\",\n                        \"Your account is well protected\",\n                      )\n                    : tr(\n                        \"auth.security.enableMfaSuggestion\",\n                        \"Enable MFA for better security\",\n                      )}\n                </p>\n              </div>\n            </div>\n            <div className=\"flex items-center gap-3\">\n              {user?.mfaEnabled ? (\n                <span className=\"inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-bg-surface/20 backdrop-blur text-white font-medium\">\n                  <CheckCircleIcon className=\"w-5 h-5 text-status-success-text\" />\n                  {tr(\"auth.security.mfaEnabled\", \"MFA Enabled\")}\n                </span>\n              ) : (\n                <button\n                  type=\"button\"\n                  onClick={() => navigate(\"/auth/mfa\")}\n                  className=\"inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-bg-surface text-text-link font-semibold hover:bg-status-info-bg-subtle transition-colors shadow-lg\"\n                >\n                  <ExclamationIcon className=\"w-5 h-5 text-status-warning-text\" />\n                  {tr(\"auth.security.enableMfaNow\", \"Enable MFA Now\")}\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Account Information Card */}\n        <div className=\"mb-8 p-6 rounded-2xl bg-bg-surface  border border-border-subtle  shadow-sm\">\n          <h3 className=\"text-lg font-semibold text-text-primary mb-4\">\n            {tr(\"auth.security.accountInfo\", \"Account Information\")}\n          </h3>\n          <dl className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n            <div className=\"sm:col-span-2 lg:col-span-1\">\n              <dt className=\"text-sm font-medium text-text-secondary\">\n                {tr(\"auth.security.email\", \"Email\")}\n              </dt>\n              <dd className=\"mt-1 text-text-primary\">\n                <span className=\"block truncate\" title={user?.email}>\n                  {user?.email}\n                </span>\n                {user?.emailVerified && (\n                  <span className=\"mt-1 inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-status-success-bg-subtle text-status-success-text text-xs font-medium\">\n                    <CheckCircleIcon className=\"w-3 h-3\" />\n                    {tr(\"auth.security.verified\", \"Verified\")}\n                  </span>\n                )}\n              </dd>\n            </div>\n            <div>\n              <dt className=\"text-sm font-medium text-text-secondary\">\n                {tr(\"auth.security.username\", \"Username\")}\n              </dt>\n              <dd\n                className=\"mt-1 text-text-primary truncate\"\n                title={user?.username ?? undefined}\n              >\n                {user?.username || \"-\"}\n              </dd>\n            </div>\n            <div>\n              <dt className=\"text-sm font-medium text-text-secondary\">\n                {tr(\"auth.security.role\", \"Role\")}\n              </dt>\n              <dd className=\"mt-1\">\n                <span className=\"inline-flex px-2.5 py-0.5 rounded-full bg-accent-indigo-subtle text-accent-indigo text-xs font-medium\">\n                  {user?.role || \"USER\"}\n                </span>\n              </dd>\n            </div>\n            <div>\n              <dt className=\"text-sm font-medium text-text-secondary\">\n                {tr(\"auth.security.memberSince\", \"Member Since\")}\n              </dt>\n              <dd className=\"mt-1 text-text-primary\">\n                {user?.createdAt ? formatDate(user.createdAt) : \"-\"}\n              </dd>\n            </div>\n          </dl>\n        </div>\n\n        {/* Main Navigation Grid */}\n        <div className=\"mb-8\">\n          <h3 className=\"text-lg font-semibold text-text-primary mb-4\">\n            {tr(\"auth.security.securityAuth\", \"Security & Authentication\")}\n          </h3>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n            {filteredNavItems.map((item) => (\n              <button\n                key={item.path}\n                type=\"button\"\n                onClick={() => navigate(item.path)}\n                aria-label={item.name}\n                className=\"group relative p-5 rounded-2xl bg-bg-surface  border border-border-subtle  hover:border-border-default  hover:shadow-lg transition-all duration-200 text-left\"\n              >\n                <div className=\"flex items-start gap-4\">\n                  <div\n                    className={`w-12 h-12 rounded-xl ${item.bgColor} flex items-center justify-center flex-shrink-0 transition-transform group-hover:scale-110`}\n                  >\n                    <item.icon className={`w-6 h-6 ${item.color}`} />\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <h4 className=\"text-base font-semibold text-text-primary group-hover:text-accent-indigo transition-colors\">\n                      {item.name}\n                    </h4>\n                    <p className=\"mt-1 text-sm text-text-secondary \">\n                      {item.description}\n                    </p>\n                  </div>\n                  <ChevronRightIcon className=\"w-5 h-5 text-text-tertiary group-hover:text-indigo-500 transition-colors flex-shrink-0\" />\n                </div>\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {/* Quick Actions */}\n        <div className=\"mb-8\">\n          <h3 className=\"text-lg font-semibold text-text-primary mb-4\">\n            {tr(\"auth.security.quickActions\", \"Quick Actions\")}\n          </h3>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n            {filteredQuickActions.map((item) => (\n              <button\n                key={item.path}\n                type=\"button\"\n                onClick={() => navigate(item.path)}\n                aria-label={item.name}\n                className=\"group relative p-5 rounded-2xl bg-bg-surface  border border-border-subtle  hover:border-border-default  hover:shadow-lg transition-all duration-200 text-left\"\n              >\n                <div className=\"flex items-start gap-4\">\n                  <div\n                    className={`w-12 h-12 rounded-xl ${item.bgColor} flex items-center justify-center flex-shrink-0 transition-transform group-hover:scale-110`}\n                  >\n                    <item.icon className={`w-6 h-6 ${item.color}`} />\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <h4 className=\"text-base font-semibold text-text-primary group-hover:text-accent-indigo transition-colors\">\n                      {item.name}\n                    </h4>\n                    <p className=\"mt-1 text-sm text-text-secondary \">\n                      {item.description}\n                    </p>\n                  </div>\n                  <ChevronRightIcon className=\"w-5 h-5 text-text-tertiary group-hover:text-indigo-500 transition-colors flex-shrink-0\" />\n                </div>\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {/* Password & Danger Zone */}\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n          {/* Password Section */}\n          <div className=\"p-6 rounded-2xl bg-bg-surface  border border-border-subtle \">\n            <div className=\"flex items-start justify-between\">\n              <div>\n                <h3 className=\"text-lg font-semibold text-text-primary\">\n                  {tr(\"auth.security.password\", \"Password\")}\n                </h3>\n                <p className=\"mt-1 text-sm text-text-secondary \">\n                  {tr(\n                    \"auth.security.updatePassword\",\n                    \"Update your password to keep your account secure\",\n                  )}\n                </p>\n                <p className=\"mt-2 text-xs text-text-tertiary \">\n                  {tr(\"auth.security.lastChanged\", \"Last changed: Never\")}\n                </p>\n              </div>\n            </div>\n            <button\n              type=\"button\"\n              onClick={() => navigate(\"/auth/reset-password\")}\n              className=\"auth-primary-button mt-4 w-full px-5 py-2.5 font-semibold sm:w-auto\"\n            >\n              {tr(\"auth.security.changePassword\", \"Change Password\")}\n            </button>\n          </div>\n\n          {/* Danger Zone */}\n          <div className=\"p-6 rounded-2xl bg-status-error-bg-subtle border border-status-error-border\">\n            <h3 className=\"text-lg font-semibold text-status-error-text\">\n              {tr(\"auth.security.dangerZone\", \"Danger Zone\")}\n            </h3>\n            <p className=\"mt-1 text-sm text-status-error-text/80\">\n              {tr(\n                \"auth.security.dangerWarning\",\n                \"These actions affect your account. Proceed with caution.\",\n              )}\n            </p>\n            <div className=\"mt-4 flex flex-wrap gap-3\">\n              <button\n                ref={deactivateTriggerRef}\n                type=\"button\"\n                onClick={() => setShowDeactivateModal(true)}\n                className=\"px-5 py-2.5 rounded-xl border-2 border-status-warning-border text-status-warning-text font-semibold hover:bg-status-warning-bg-subtle transition-all duration-200\"\n              >\n                {tr(\"auth.security.deactivateAccount\", \"Deactivate Account\")}\n              </button>\n              <button\n                ref={deleteTriggerRef}\n                type=\"button\"\n                onClick={() => setShowDeleteModal(true)}\n                className=\"px-5 py-2.5 rounded-xl border-2 border-status-error-border text-status-error-text font-semibold hover:bg-status-error-bg-subtle transition-all duration-200\"\n              >\n                {tr(\"auth.security.deleteAccount\", \"Delete Account\")}\n              </button>\n            </div>\n          </div>\n        </div>\n\n        {/* Deactivate Account Modal */}\n        {showDeactivateModal && (\n          <div\n            className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4\"\n            role=\"presentation\"\n            onClick={(e) => {\n              if (e.target === e.currentTarget) closeModals();\n            }}\n          >\n            <div\n              ref={deactivateDialogRef}\n              role=\"dialog\"\n              aria-modal=\"true\"\n              aria-labelledby={deactivateTitleId}\n              tabIndex={-1}\n              className=\"w-full max-w-md bg-bg-surface rounded-2xl shadow-2xl p-6 outline-none\"\n            >\n              <h3\n                id={deactivateTitleId}\n                className=\"text-xl font-bold text-text-primary mb-2\"\n              >\n                {tr(\"auth.security.deactivateTitle\", \"Deactivate Account\")}\n              </h3>\n              <p className=\"text-sm text-text-secondary mb-4\">\n                {tr(\n                  \"auth.security.deactivateDesc\",\n                  \"Your account will be temporarily disabled. You can reactivate it by signing in again with your credentials.\",\n                )}\n              </p>\n              {accountError && (\n                <div\n                  id={deactivateErrorId}\n                  role=\"alert\"\n                  className=\"mb-4 p-3 rounded-lg bg-status-error-bg-subtle text-status-error-text text-sm\"\n                >\n                  {accountError}\n                </div>\n              )}\n              {accountSuccess && (\n                <div\n                  role=\"status\"\n                  className=\"mb-4 p-3 rounded-lg bg-status-success-bg-subtle text-status-success-text text-sm\"\n                >\n                  {accountSuccess}\n                </div>\n              )}\n              <div className=\"mb-4\">\n                <label\n                  htmlFor={deactivatePasswordId}\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr(\n                    \"auth.security.enterPasswordConfirm\",\n                    \"Enter your password to confirm\",\n                  )}\n                </label>\n                <input\n                  id={deactivatePasswordId}\n                  type=\"password\"\n                  value={accountPassword}\n                  onChange={(e) => setAccountPassword(e.target.value)}\n                  aria-required=\"true\"\n                  aria-describedby={\n                    accountError ? deactivateErrorId : undefined\n                  }\n                  aria-invalid={!!accountError}\n                  autoComplete=\"current-password\"\n                  className=\"w-full px-4 py-2 rounded-lg border border-border-default bg-bg-surface text-text-primary focus:ring-2 focus:ring-status-warning-bg focus:border-transparent\"\n                  placeholder={tr(\n                    \"auth.security.yourPassword\",\n                    \"Your password\",\n                  )}\n                />\n              </div>\n              <div className=\"flex gap-3\">\n                <button\n                  type=\"button\"\n                  onClick={closeModals}\n                  className=\"flex-1 px-4 py-2 rounded-lg border border-border-default text-text-primary font-medium hover:bg-bg-sunken transition-colors\"\n                >\n                  {tr(\"auth.security.cancel\", \"Cancel\")}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => void handleDeactivateAccount()}\n                  disabled={!accountPassword || isDeactivating}\n                  className=\"flex-1 px-4 py-2 rounded-lg bg-status-warning-bg text-white font-medium hover:bg-status-warning-bg-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2\"\n                >\n                  {isDeactivating && (\n                    <SpinnerIcon className=\"w-4 h-4 animate-spin\" />\n                  )}\n                  {tr(\"auth.security.deactivateBtn\", \"Deactivate\")}\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {/* Delete Account Modal */}\n        {showDeleteModal && (\n          <div\n            className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4\"\n            role=\"presentation\"\n            onClick={(e) => {\n              if (e.target === e.currentTarget) closeModals();\n            }}\n          >\n            <div\n              ref={deleteDialogRef}\n              role=\"dialog\"\n              aria-modal=\"true\"\n              aria-labelledby={deleteTitleId}\n              tabIndex={-1}\n              className=\"w-full max-w-md bg-bg-surface rounded-2xl shadow-2xl p-6 outline-none\"\n            >\n              <h3\n                id={deleteTitleId}\n                className=\"text-xl font-bold text-status-error-text mb-2\"\n              >\n                {tr(\"auth.security.deleteTitle\", \"Delete Account Permanently\")}\n              </h3>\n              <p className=\"text-sm text-text-secondary mb-4\">\n                {tr(\n                  \"auth.security.deleteDesc\",\n                  \"This action is irreversible. All your data will be permanently deleted and cannot be recovered.\",\n                )}\n              </p>\n              {accountError && (\n                <div\n                  id={deleteErrorId}\n                  role=\"alert\"\n                  className=\"mb-4 p-3 rounded-lg bg-status-error-bg-subtle text-status-error-text text-sm\"\n                >\n                  {accountError}\n                </div>\n              )}\n              {accountSuccess && (\n                <div\n                  role=\"status\"\n                  className=\"mb-4 p-3 rounded-lg bg-status-success-bg-subtle text-status-success-text text-sm\"\n                >\n                  {accountSuccess}\n                </div>\n              )}\n              <div className=\"mb-4\">\n                <label\n                  htmlFor={deletePasswordId}\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr(\n                    \"auth.security.enterPasswordDelete\",\n                    \"Enter your password\",\n                  )}\n                </label>\n                <input\n                  id={deletePasswordId}\n                  type=\"password\"\n                  value={accountPassword}\n                  onChange={(e) => setAccountPassword(e.target.value)}\n                  aria-required=\"true\"\n                  aria-describedby={accountError ? deleteErrorId : undefined}\n                  aria-invalid={!!accountError}\n                  autoComplete=\"current-password\"\n                  className=\"w-full px-4 py-2 rounded-lg border border-border-default bg-bg-surface text-text-primary focus:ring-2 focus:ring-status-error-bg focus:border-transparent\"\n                  placeholder={tr(\n                    \"auth.security.yourPassword\",\n                    \"Your password\",\n                  )}\n                />\n              </div>\n              <div className=\"mb-4\">\n                <label\n                  htmlFor={deleteConfirmId}\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr(\"auth.security.type\", \"Type\")}{\" \"}\n                  <code className=\"px-1 py-0.5 rounded bg-bg-sunken text-status-error-text font-mono text-sm\">\n                    {DELETE_ACCOUNT_CONFIRMATION}\n                  </code>{\" \"}\n                  {tr(\"auth.security.toConfirm\", \"to confirm\")}\n                </label>\n                <input\n                  id={deleteConfirmId}\n                  type=\"text\"\n                  value={deleteConfirmPhrase}\n                  onChange={(e) => setDeleteConfirmPhrase(e.target.value)}\n                  aria-required=\"true\"\n                  aria-describedby={accountError ? deleteErrorId : undefined}\n                  aria-invalid={\n                    deleteConfirmPhrase.length > 0 &&\n                    deleteConfirmPhrase !== DELETE_ACCOUNT_CONFIRMATION\n                  }\n                  autoComplete=\"off\"\n                  className=\"w-full px-4 py-2 rounded-lg border border-border-default bg-bg-surface text-text-primary focus:ring-2 focus:ring-status-error-bg focus:border-transparent font-mono\"\n                  placeholder={tr(\n                    \"auth.security.deleteConfirmPlaceholder\",\n                    \"DELETE MY ACCOUNT\",\n                  )}\n                />\n              </div>\n              <div className=\"flex gap-3\">\n                <button\n                  type=\"button\"\n                  onClick={closeModals}\n                  className=\"flex-1 px-4 py-2 rounded-lg border border-border-default text-text-primary font-medium hover:bg-bg-sunken transition-colors\"\n                >\n                  {tr(\"auth.security.cancel\", \"Cancel\")}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => void handleDeleteAccount()}\n                  disabled={\n                    !accountPassword ||\n                    deleteConfirmPhrase !== DELETE_ACCOUNT_CONFIRMATION ||\n                    isDeleting\n                  }\n                  className=\"flex-1 px-4 py-2 rounded-lg bg-status-error-bg text-white font-medium hover:bg-status-error-bg-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2\"\n                >\n                  {isDeleting && (\n                    <SpinnerIcon className=\"w-4 h-4 animate-spin\" />\n                  )}\n                  {tr(\"auth.security.deleteForever\", \"Delete Forever\")}\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {/* Footer */}\n        <footer className=\"mt-12 pt-6 border-t border-border-subtle \">\n          <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 text-sm text-text-secondary \">\n            <p>\n              {tr(\"auth.security.signedInAs\", \"Signed in as\")}{\" \"}\n              <span className=\"font-medium text-text-primary \">\n                {user?.email}\n              </span>\n            </p>\n            <div className=\"flex items-center gap-4\">\n              <button\n                type=\"button\"\n                onClick={() => navigate(\"/auth/login\")}\n                className=\"hover:text-text-primary transition-colors\"\n              >\n                {tr(\"auth.security.switchAccount\", \"Switch Account\")}\n              </button>\n              <span className=\"text-text-muted\" aria-hidden=\"true\">\n                |\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => setShowLogoutDialog(true)}\n                className=\"hover:text-status-error-text transition-colors\"\n              >\n                {tr(\"auth.security.signOut\", \"Sign Out\")}\n              </button>\n            </div>\n          </div>\n        </footer>\n      </main>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAUA,IAAM,KAAc,EAAE,mBACpB,kBAAC,OAAD;CACa;CACX,MAAK;CACL,SAAQ;CACR,QAAO;CACP,eAAY;WAEZ,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA;CACE,CAAA,EAGF,MAAY,EAAE,mBAClB,kBAAC,OAAD;CACa;CACX,MAAK;CACL,SAAQ;CACR,QAAO;CACP,eAAY;WAEZ,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA;CACE,CAAA,EAkBF,MAAa,EAAE,mBACnB,kBAAC,OAAD;CACa;CACX,MAAK;CACL,SAAQ;CACR,QAAO;CACP,eAAY;WAEZ,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA;CACE,CAAA,EAGF,MAAmB,EAAE,mBACzB,kBAAC,OAAD;CACa;CACX,MAAK;CACL,SAAQ;CACR,QAAO;CACP,eAAY;WAEZ,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA;CACE,CAAA,EAGF,MAAY,EAAE,mBAClB,kBAAC,OAAD;CACa;CACX,MAAK;CACL,SAAQ;CACR,QAAO;CACP,eAAY;WAEZ,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA;CACE,CAAA,EAGF,KAAoB,EAAE,mBAC1B,kBAAC,OAAD;CACa;CACX,MAAK;CACL,SAAQ;CACR,QAAO;CACP,eAAY;WAEZ,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA;CACE,CAAA,EAGF,KAAmB,EAAE,mBACzB,kBAAC,OAAD;CACa;CACX,MAAK;CACL,SAAQ;CACR,eAAY;WAEZ,kBAAC,QAAD;EACE,UAAS;EACT,GAAE;EACF,UAAS;EACT,CAAA;CACE,CAAA,EAGF,KAAmB,EAAE,mBACzB,kBAAC,OAAD;CACa;CACX,MAAK;CACL,SAAQ;CACR,eAAY;WAEZ,kBAAC,QAAD;EACE,UAAS;EACT,GAAE;EACF,UAAS;EACT,CAAA;CACE,CAAA,EAGF,KAAe,EAAE,mBACrB,kBAAC,OAAD;CAAgB;CAAW,MAAK;CAAO,SAAQ;CAAY,eAAY;WAAvE,CACE,kBAAC,UAAD;EACE,WAAU;EACV,IAAG;EACH,IAAG;EACH,GAAE;EACF,QAAO;EACP,aAAY;EACZ,CAAA,EACF,kBAAC,QAAD;EACE,WAAU;EACV,MAAK;EACL,GAAE;EACF,CAAA,CACE;IAaF,IAA8B;AAKpC,SAAgB,IAAe;CAC7B,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAA6B;EACpD,IAAM,IAAa,EAAE,EAAI;AACzB,SAAO,MAAe,IAAM,IAAW;IAGnC,IAAW,GAAa,EACxB,IAAO,GAAc,MAAU,EAAM,KAAK,EAC1C,EAAE,gBAAY,EAAkB,EACpC,yBAAyB,IAC1B,CAAC,EACI,EAAE,uBAAmB,mBAAe,mBAAgB,kBACxD,GAAsB,EAClB,CAAC,GAAc,KAAmB,EAAS,GAAM,EACjD,CAAC,GAAkB,KAAuB,EAAS,GAAM,EAEzD,KAA6B;EACjC;GACE,MAAM,EAAG,4BAA4B,eAAe;GACpD,aAAa,EACX,gCACA,yCACD;GACD,MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACV;EACD;GACE,MAAM,EAAG,wBAAwB,4BAA4B;GAC7D,aAAa,EACX,4BACA,gCACD;GACD,MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACV;EAkBD;GACE,MAAM,EAAG,0BAA0B,QAAQ;GAC3C,aAAa,EAAG,8BAA8B,sBAAsB;GACpE,MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACT,WAAW;GACZ;EACF,EAEK,KAAe,CACnB;EACE,MAAM,EAAG,wBAAwB,oBAAoB;EACrD,aAAa,EAAG,4BAA4B,4BAA4B;EACxE,MAAM;EACN,MAAM;EACN,OAAO;EACP,SAAS;EACT,WAAW;EACZ,CACF,EAGK,CAAC,GAAqB,KAA0B,EAAS,GAAM,EAC/D,CAAC,GAAiB,KAAsB,EAAS,GAAM,EACvD,CAAC,GAAiB,KAAsB,EAAS,GAAG,EACpD,CAAC,GAAqB,KAA0B,EAAS,GAAG,EAC5D,CAAC,GAAc,KAAmB,EAAwB,KAAK,EAC/D,CAAC,GAAgB,KAAqB,EAAwB,KAAK,EAGnE,IAAoB,GAAO,EAC3B,IAAuB,GAAO,EAC9B,IAAoB,GAAO,EAC3B,IAAgB,GAAO,EACvB,IAAmB,GAAO,EAC1B,IAAkB,GAAO,EACzB,IAAgB,GAAO,EAGvB,IAAuB,EAA0B,KAAK,EACtD,IAAmB,EAA0B,KAAK,EAClD,IAAsB,EAAuB,KAAK,EAClD,IAAkB,EAAuB,KAAK;AAWpD,CARA,QAAgB;AACd,EAAI,IACF,EAAoB,SAAS,OAAO,GAEpC,EAAqB,SAAS,OAAO;IAEtC,CAAC,EAAoB,CAAC,EAEzB,QAAgB;AACd,EAAI,IACF,EAAgB,SAAS,OAAO,GAEhC,EAAiB,SAAS,OAAO;IAElC,CAAC,EAAgB,CAAC;CAErB,IAAM,KAAe,YAAY;AAC/B,IAAgB,GAAK;AACrB,MAAI;AAGF,GAFA,MAAM,IAAS,EACf,EAAS,cAAc,EACvB,EAAoB,GAAM;WACnB,GAAO;AAEd,GADA,QAAQ,MAAM,kBAAkB,EAAM,EACtC,EAAgB,GAAM;;IAIpB,KAA0B,YAAY;AAC1C,IAAgB,KAAK;AACrB,MAAI;GACF,IAAM,IAAS,MAAM,GAAkB,EAAgB;AACvD,GAAI,EAAO,UAET,EAAS,eAAe,EAAE,SAAS,IAAM,CAAC,GAE1C,EACE,EAAO,WACL,EACE,kCACA,+BACD,CACJ;WAEI,GAAO;AACd,KACE,aAAiB,QACb,EAAM,UACN,EACE,kCACA,+BACD,CACN;;IAIC,KAAsB,YAAY;AAEtC,MADA,EAAgB,KAAK,EACjB,MAAwB,GAA6B;AACvD,KACE,EACE,uCACA,+CACD,CACF;AACD;;AAEG,IAAa,SAAS;AAC3B,MAAI;GACF,IAAM,IAAS,MAAM,GAAc,GAAiB,EAAoB;AACxE,GAAI,EAAO,WACJ,EAAa,UAAU,EAE5B,EAAS,eAAe,EAAE,SAAS,IAAM,CAAC,KAErC,EAAa,QAAQ,EAC1B,EACE,EAAO,WACL,EAAG,8BAA8B,2BAA2B,CAC/D;WAEI,GAAO;AAEd,GADK,EAAa,QAAQ,EAC1B,EACE,aAAiB,QACb,EAAM,UACN,EAAG,8BAA8B,2BAA2B,CACjE;;IAIC,UAAoB;AAMxB,EALA,EAAuB,GAAM,EAC7B,EAAmB,GAAM,EACzB,EAAmB,GAAG,EACtB,EAAuB,GAAG,EAC1B,EAAgB,KAAK,EACrB,EAAkB,KAAK;IAGnB,IACJ,GAAM,SAAS,iBACf,GAAM,SAAS,kBACf,GAAM,SAAS,aACX,KAAmB,GAAgB,QACtC,MAAS,CAAC,EAAK,aAAa,EAC9B,EACK,KAAuB,GAAa,QACvC,MAAS,CAAC,EAAK,aAAa,EAC9B;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,IAAD;GACE,MAAM;GACN,cAAc;GACd,OAAO,EAAG,oCAAoC,gBAAgB;GAC9D,aAAa,EACX,0CACA,0EACD;GACD,aAAa,EAAG,sCAAsC,WAAW;GACjE,SAAQ;GACR,WAAW;GACX,WAAW;GACX,CAAA,EACF,kBAAC,QAAD;GAAM,WAAU;aAAhB;IACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAY,WAAU,sBAAuB,CAAA;MACzC,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,uBAAuB,kBAAkB;MAC1C,CAAA,EACL,kBAAC,KAAD;MAAG,WAAU;gBACV,EAAG,0BAA0B,2BAA2B;MACvD,CAAA,CACA,EAAA,CAAA,CACF;;IAGN,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD,EAAY,WAAU,sBAAuB,CAAA;QACzC,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;QAAI,WAAU;kBACX,EAAG,gCAAgC,kBAAkB;QACnD,CAAA,EACL,kBAAC,KAAD;QAAG,WAAU;kBACV,GAAM,aACH,EACE,+BACA,iCACD,GACD,EACE,qCACA,iCACD;QACH,CAAA,CACA,EAAA,CAAA,CACF;UACN,kBAAC,OAAD;OAAK,WAAU;iBACZ,GAAM,aACL,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CACE,kBAAC,GAAD,EAAiB,WAAU,oCAAqC,CAAA,EAC/D,EAAG,4BAA4B,cAAc,CACzC;YAEP,kBAAC,UAAD;QACE,MAAK;QACL,eAAe,EAAS,YAAY;QACpC,WAAU;kBAHZ,CAKE,kBAAC,GAAD,EAAiB,WAAU,oCAAqC,CAAA,EAC/D,EAAG,8BAA8B,iBAAiB,CAC5C;;OAEP,CAAA,CACF;;KACF,CAAA;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,6BAA6B,sBAAsB;MACpD,CAAA,EACL,kBAAC,MAAD;MAAI,WAAU;gBAAd;OACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,uBAAuB,QAAQ;SAChC,CAAA,EACL,kBAAC,MAAD;SAAI,WAAU;mBAAd,CACE,kBAAC,QAAD;UAAM,WAAU;UAAiB,OAAO,GAAM;oBAC3C,GAAM;UACF,CAAA,EACN,GAAM,iBACL,kBAAC,QAAD;UAAM,WAAU;oBAAhB,CACE,kBAAC,GAAD,EAAiB,WAAU,WAAY,CAAA,EACtC,EAAG,0BAA0B,WAAW,CACpC;YAEN;WACD;;OACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;QAAI,WAAU;kBACX,EAAG,0BAA0B,WAAW;QACtC,CAAA,EACL,kBAAC,MAAD;QACE,WAAU;QACV,OAAO,GAAM,YAAY,KAAA;kBAExB,GAAM,YAAY;QAChB,CAAA,CACD,EAAA,CAAA;OACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;QAAI,WAAU;kBACX,EAAG,sBAAsB,OAAO;QAC9B,CAAA,EACL,kBAAC,MAAD;QAAI,WAAU;kBACZ,kBAAC,QAAD;SAAM,WAAU;mBACb,GAAM,QAAQ;SACV,CAAA;QACJ,CAAA,CACD,EAAA,CAAA;OACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;QAAI,WAAU;kBACX,EAAG,6BAA6B,eAAe;QAC7C,CAAA,EACL,kBAAC,MAAD;QAAI,WAAU;kBACX,GAAM,YAAY,GAAW,EAAK,UAAU,GAAG;QAC7C,CAAA,CACD,EAAA,CAAA;OACH;QACD;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,8BAA8B,4BAA4B;MAC3D,CAAA,EACL,kBAAC,OAAD;MAAK,WAAU;gBACZ,GAAiB,KAAK,MACrB,kBAAC,UAAD;OAEE,MAAK;OACL,eAAe,EAAS,EAAK,KAAK;OAClC,cAAY,EAAK;OACjB,WAAU;iBAEV,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD;UACE,WAAW,wBAAwB,EAAK,QAAQ;oBAEhD,kBAAC,EAAK,MAAN,EAAW,WAAW,WAAW,EAAK,SAAW,CAAA;UAC7C,CAAA;SACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,MAAD;WAAI,WAAU;qBACX,EAAK;WACH,CAAA,EACL,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAK;WACJ,CAAA,CACA;;SACN,kBAAC,GAAD,EAAkB,WAAU,0FAA2F,CAAA;SACnH;;OACC,EAtBF,EAAK,KAsBH,CACT;MACE,CAAA,CACF;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAG,8BAA8B,gBAAgB;MAC/C,CAAA,EACL,kBAAC,OAAD;MAAK,WAAU;gBACZ,GAAqB,KAAK,MACzB,kBAAC,UAAD;OAEE,MAAK;OACL,eAAe,EAAS,EAAK,KAAK;OAClC,cAAY,EAAK;OACjB,WAAU;iBAEV,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD;UACE,WAAW,wBAAwB,EAAK,QAAQ;oBAEhD,kBAAC,EAAK,MAAN,EAAW,WAAW,WAAW,EAAK,SAAW,CAAA;UAC7C,CAAA;SACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,MAAD;WAAI,WAAU;qBACX,EAAK;WACH,CAAA,EACL,kBAAC,KAAD;WAAG,WAAU;qBACV,EAAK;WACJ,CAAA,CACA;;SACN,kBAAC,GAAD,EAAkB,WAAU,0FAA2F,CAAA;SACnH;;OACC,EAtBF,EAAK,KAsBH,CACT;MACE,CAAA,CACF;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CAEE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,OAAD,EAAA,UAAA;QACE,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,0BAA0B,WAAW;SACtC,CAAA;QACL,kBAAC,KAAD;SAAG,WAAU;mBACV,EACC,gCACA,mDACD;SACC,CAAA;QACJ,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAG,6BAA6B,sBAAsB;SACrD,CAAA;QACA,EAAA,CAAA;OACF,CAAA,EACN,kBAAC,UAAD;OACE,MAAK;OACL,eAAe,EAAS,uBAAuB;OAC/C,WAAU;iBAET,EAAG,gCAAgC,kBAAkB;OAC/C,CAAA,CACL;SAGN,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,MAAD;QAAI,WAAU;kBACX,EAAG,4BAA4B,cAAc;QAC3C,CAAA;OACL,kBAAC,KAAD;QAAG,WAAU;kBACV,EACC,+BACA,2DACD;QACC,CAAA;OACJ,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,UAAD;SACE,KAAK;SACL,MAAK;SACL,eAAe,EAAuB,GAAK;SAC3C,WAAU;mBAET,EAAG,mCAAmC,qBAAqB;SACrD,CAAA,EACT,kBAAC,UAAD;SACE,KAAK;SACL,MAAK;SACL,eAAe,EAAmB,GAAK;SACvC,WAAU;mBAET,EAAG,+BAA+B,iBAAiB;SAC7C,CAAA,CACL;;OACF;QACF;;IAGL,KACC,kBAAC,OAAD;KACE,WAAU;KACV,MAAK;KACL,UAAU,MAAM;AACd,MAAI,EAAE,WAAW,EAAE,iBAAe,GAAa;;eAGjD,kBAAC,OAAD;MACE,KAAK;MACL,MAAK;MACL,cAAW;MACX,mBAAiB;MACjB,UAAU;MACV,WAAU;gBANZ;OAQE,kBAAC,MAAD;QACE,IAAI;QACJ,WAAU;kBAET,EAAG,iCAAiC,qBAAqB;QACvD,CAAA;OACL,kBAAC,KAAD;QAAG,WAAU;kBACV,EACC,gCACA,8GACD;QACC,CAAA;OACH,KACC,kBAAC,OAAD;QACE,IAAI;QACJ,MAAK;QACL,WAAU;kBAET;QACG,CAAA;OAEP,KACC,kBAAC,OAAD;QACE,MAAK;QACL,WAAU;kBAET;QACG,CAAA;OAER,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,SAAD;SACE,SAAS;SACT,WAAU;mBAET,EACC,sCACA,iCACD;SACK,CAAA,EACR,kBAAC,SAAD;SACE,IAAI;SACJ,MAAK;SACL,OAAO;SACP,WAAW,MAAM,EAAmB,EAAE,OAAO,MAAM;SACnD,iBAAc;SACd,oBACE,IAAe,IAAoB,KAAA;SAErC,gBAAc,CAAC,CAAC;SAChB,cAAa;SACb,WAAU;SACV,aAAa,EACX,8BACA,gBACD;SACD,CAAA,CACE;;OACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,UAAD;SACE,MAAK;SACL,SAAS;SACT,WAAU;mBAET,EAAG,wBAAwB,SAAS;SAC9B,CAAA,EACT,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,KAAK,IAAyB;SAC7C,UAAU,CAAC,KAAmB;SAC9B,WAAU;mBAJZ,CAMG,KACC,kBAAC,GAAD,EAAa,WAAU,wBAAyB,CAAA,EAEjD,EAAG,+BAA+B,aAAa,CACzC;WACL;;OACF;;KACF,CAAA;IAIP,KACC,kBAAC,OAAD;KACE,WAAU;KACV,MAAK;KACL,UAAU,MAAM;AACd,MAAI,EAAE,WAAW,EAAE,iBAAe,GAAa;;eAGjD,kBAAC,OAAD;MACE,KAAK;MACL,MAAK;MACL,cAAW;MACX,mBAAiB;MACjB,UAAU;MACV,WAAU;gBANZ;OAQE,kBAAC,MAAD;QACE,IAAI;QACJ,WAAU;kBAET,EAAG,6BAA6B,6BAA6B;QAC3D,CAAA;OACL,kBAAC,KAAD;QAAG,WAAU;kBACV,EACC,4BACA,kGACD;QACC,CAAA;OACH,KACC,kBAAC,OAAD;QACE,IAAI;QACJ,MAAK;QACL,WAAU;kBAET;QACG,CAAA;OAEP,KACC,kBAAC,OAAD;QACE,MAAK;QACL,WAAU;kBAET;QACG,CAAA;OAER,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,SAAD;SACE,SAAS;SACT,WAAU;mBAET,EACC,qCACA,sBACD;SACK,CAAA,EACR,kBAAC,SAAD;SACE,IAAI;SACJ,MAAK;SACL,OAAO;SACP,WAAW,MAAM,EAAmB,EAAE,OAAO,MAAM;SACnD,iBAAc;SACd,oBAAkB,IAAe,IAAgB,KAAA;SACjD,gBAAc,CAAC,CAAC;SAChB,cAAa;SACb,WAAU;SACV,aAAa,EACX,8BACA,gBACD;SACD,CAAA,CACE;;OACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,SAAD;SACE,SAAS;SACT,WAAU;mBAFZ;UAIG,EAAG,sBAAsB,OAAO;UAAE;UACnC,kBAAC,QAAD;WAAM,WAAU;qBACb;WACI,CAAA;UAAC;UACP,EAAG,2BAA2B,aAAa;UACtC;YACR,kBAAC,SAAD;SACE,IAAI;SACJ,MAAK;SACL,OAAO;SACP,WAAW,MAAM,EAAuB,EAAE,OAAO,MAAM;SACvD,iBAAc;SACd,oBAAkB,IAAe,IAAgB,KAAA;SACjD,gBACE,EAAoB,SAAS,KAC7B,MAAwB;SAE1B,cAAa;SACb,WAAU;SACV,aAAa,EACX,0CACA,oBACD;SACD,CAAA,CACE;;OACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,UAAD;SACE,MAAK;SACL,SAAS;SACT,WAAU;mBAET,EAAG,wBAAwB,SAAS;SAC9B,CAAA,EACT,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,KAAK,IAAqB;SACzC,UACE,CAAC,KACD,MAAwB,KACxB;SAEF,WAAU;mBARZ,CAUG,KACC,kBAAC,GAAD,EAAa,WAAU,wBAAyB,CAAA,EAEjD,EAAG,+BAA+B,iBAAiB,CAC7C;WACL;;OACF;;KACF,CAAA;IAIR,kBAAC,UAAD;KAAQ,WAAU;eAChB,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,KAAD,EAAA,UAAA;OACG,EAAG,4BAA4B,eAAe;OAAE;OACjD,kBAAC,QAAD;QAAM,WAAU;kBACb,GAAM;QACF,CAAA;OACL,EAAA,CAAA,EACJ,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,EAAS,cAAc;SACtC,WAAU;mBAET,EAAG,+BAA+B,iBAAiB;SAC7C,CAAA;QACT,kBAAC,QAAD;SAAM,WAAU;SAAkB,eAAY;mBAAO;SAE9C,CAAA;QACP,kBAAC,UAAD;SACE,MAAK;SACL,eAAe,EAAoB,GAAK;SACxC,WAAU;mBAET,EAAG,yBAAyB,WAAW;SACjC,CAAA;QACL;SACF;;KACC,CAAA;IACJ;KACH"}
+{"version":3,"file":"SecurityPage.js","names":[],"sources":["../../../src/auth/pages/SecurityPage.tsx"],"sourcesContent":["import { useId, useRef, useEffect, useState } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useNavigate } from \"react-router-dom\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { ConfirmActionDialog } from \"../components/ConfirmActionDialog\";\nimport { useAuthOperations } from \"../hooks/useAuthOperations\";\nimport { useAccountOperations } from \"../hooks/useAccountOperations\";\nimport { formatDate } from \"../utils/formatters\";\nimport { nativeImpact, nativeNotify } from \"../../utils/nativeBridge\";\n\n// Icons\nconst ShieldIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\"\n    />\n  </svg>\n);\n\nconst LockIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\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);\n\n// Hidden — moved to Developer Portal\n// const KeyIcon = ({ className }: { className?: string }) => (\n//   <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n//     <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5}\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//   </svg>\n// );\n\n// const DelegationIcon = ({ className }: { className?: string }) => (\n//   <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n//     <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5}\n//       d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\" />\n//   </svg>\n// );\n\nconst UsersIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z\"\n    />\n  </svg>\n);\n\nconst UserProfileIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"\n    />\n  </svg>\n);\n\nconst LinkIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={1.5}\n      d=\"M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1\"\n    />\n  </svg>\n);\n\nconst ChevronRightIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    aria-hidden=\"true\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M9 5l7 7-7 7\"\n    />\n  </svg>\n);\n\nconst CheckCircleIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"currentColor\"\n    viewBox=\"0 0 20 20\"\n    aria-hidden=\"true\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst ExclamationIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"currentColor\"\n    viewBox=\"0 0 20 20\"\n    aria-hidden=\"true\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\"\n      clipRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst SpinnerIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <circle\n      className=\"opacity-25\"\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      strokeWidth=\"4\"\n    />\n    <path\n      className=\"opacity-75\"\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n    />\n  </svg>\n);\n\ninterface NavItem {\n  name: string;\n  description: string;\n  path: string;\n  icon: React.FC<{ className?: string }>;\n  color: string;\n  bgColor: string;\n  adminOnly?: boolean;\n}\n\nconst DELETE_ACCOUNT_CONFIRMATION = \"DELETE MY ACCOUNT\";\n\n/**\n * Security Dashboard - Main hub for all authentication features\n */\nexport function SecurityPage() {\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 user = useAuthStore((state) => state.user);\n  const { signOut } = useAuthOperations({\n    disableCurrentUserQuery: true,\n  });\n  const { deactivateAccount, deleteAccount, isDeactivating, isDeleting } =\n    useAccountOperations();\n  const [isLoggingOut, setIsLoggingOut] = useState(false);\n  const [showLogoutDialog, setShowLogoutDialog] = useState(false);\n\n  const navigationItems: NavItem[] = [\n    {\n      name: tr(\"auth.security.navProfile\", \"User Profile\"),\n      description: tr(\n        \"auth.security.navProfileDesc\",\n        \"View and edit your profile information\",\n      ),\n      path: \"/auth/profile\",\n      icon: UserProfileIcon,\n      color: \"text-accent-teal\",\n      bgColor: \"bg-accent-teal-subtle\",\n    },\n    {\n      name: tr(\"auth.security.navMfa\", \"Two-Factor Authentication\"),\n      description: tr(\n        \"auth.security.navMfaDesc\",\n        \"Secure your account with TOTP\",\n      ),\n      path: \"/auth/mfa\",\n      icon: LockIcon,\n      color: \"text-accent-purple\",\n      bgColor: \"bg-accent-purple-subtle\",\n    },\n    // Hidden — moved to Developer Portal\n    // {\n    //   name: tr(\"auth.security.navApiKeys\", \"API Keys\"),\n    //   description: tr(\"auth.security.navApiKeysDesc\", \"Manage programmatic access tokens\"),\n    //   path: \"/auth/api-keys\",\n    //   icon: KeyIcon,\n    //   color: \"text-status-warning-text\",\n    //   bgColor: \"bg-status-warning-bg-subtle\",\n    // },\n    // {\n    //   name: tr(\"auth.security.navDelegations\", \"Delegations\"),\n    //   description: tr(\"auth.security.navDelegationsDesc\", \"Manage apps acting on your behalf\"),\n    //   path: \"/auth/delegations\",\n    //   icon: DelegationIcon,\n    //   color: \"text-status-warning-text\",\n    //   bgColor: \"bg-status-warning-bg-subtle\",\n    // },\n    {\n      name: tr(\"auth.security.navUsers\", \"Users\"),\n      description: tr(\"auth.security.navUsersDesc\", \"Manage system users\"),\n      path: \"/auth/users\",\n      icon: UsersIcon,\n      color: \"text-accent-indigo\",\n      bgColor: \"bg-accent-indigo-subtle\",\n      adminOnly: true,\n    },\n  ];\n\n  const quickActions = [\n    {\n      name: tr(\"auth.security.navSso\", \"SSO Configuration\"),\n      description: tr(\"auth.security.navSsoDesc\", \"Enterprise single sign-on\"),\n      path: \"/auth/sso\",\n      icon: LinkIcon,\n      color: \"text-accent-cyan\",\n      bgColor: \"bg-accent-cyan-subtle\",\n      adminOnly: true,\n    },\n  ];\n\n  // Account management modal states\n  const [showDeactivateModal, setShowDeactivateModal] = useState(false);\n  const [showDeleteModal, setShowDeleteModal] = useState(false);\n  const [accountPassword, setAccountPassword] = useState(\"\");\n  const [deleteConfirmPhrase, setDeleteConfirmPhrase] = useState(\"\");\n  const [accountError, setAccountError] = useState<string | null>(null);\n  const [accountSuccess, setAccountSuccess] = useState<string | null>(null);\n\n  // Accessible IDs for modal labels and form fields\n  const deactivateTitleId = useId();\n  const deactivatePasswordId = useId();\n  const deactivateErrorId = useId();\n  const deleteTitleId = useId();\n  const deletePasswordId = useId();\n  const deleteConfirmId = useId();\n  const deleteErrorId = useId();\n\n  // Focus management: refs to restore focus and manage modal focus\n  const deactivateTriggerRef = useRef<HTMLButtonElement>(null);\n  const deleteTriggerRef = useRef<HTMLButtonElement>(null);\n  const deactivateDialogRef = useRef<HTMLDivElement>(null);\n  const deleteDialogRef = useRef<HTMLDivElement>(null);\n\n  // Move focus into modal when it opens; restore to trigger on close\n  useEffect(() => {\n    if (showDeactivateModal) {\n      deactivateDialogRef.current?.focus();\n    } else {\n      deactivateTriggerRef.current?.focus();\n    }\n  }, [showDeactivateModal]);\n\n  useEffect(() => {\n    if (showDeleteModal) {\n      deleteDialogRef.current?.focus();\n    } else {\n      deleteTriggerRef.current?.focus();\n    }\n  }, [showDeleteModal]);\n\n  const handleLogout = async () => {\n    setIsLoggingOut(true);\n    try {\n      await signOut();\n      navigate(\"/auth/login\");\n      setShowLogoutDialog(false);\n    } catch (error) {\n      console.error(\"Logout failed:\", error);\n      setIsLoggingOut(false);\n    }\n  };\n\n  const handleDeactivateAccount = async () => {\n    setAccountError(null);\n    try {\n      const result = await deactivateAccount(accountPassword);\n      if (result.success) {\n        // Immediately redirect to login page\n        navigate(\"/auth/login\", { replace: true });\n      } else {\n        setAccountError(\n          result.message ||\n            tr(\n              \"auth.security.deactivateFailed\",\n              \"Failed to deactivate account\",\n            ),\n        );\n      }\n    } catch (error) {\n      setAccountError(\n        error instanceof Error\n          ? error.message\n          : tr(\n              \"auth.security.deactivateFailed\",\n              \"Failed to deactivate account\",\n            ),\n      );\n    }\n  };\n\n  const handleDeleteAccount = async () => {\n    setAccountError(null);\n    if (deleteConfirmPhrase !== DELETE_ACCOUNT_CONFIRMATION) {\n      setAccountError(\n        tr(\n          \"auth.security.deleteConfirmMismatch\",\n          'Please type \"DELETE MY ACCOUNT\" to confirm',\n        ),\n      );\n      return;\n    }\n    void nativeImpact(\"medium\");\n    try {\n      const result = await deleteAccount(accountPassword, deleteConfirmPhrase);\n      if (result.success) {\n        void nativeNotify(\"success\");\n        // Immediately redirect to login page\n        navigate(\"/auth/login\", { replace: true });\n      } else {\n        void nativeNotify(\"error\");\n        setAccountError(\n          result.message ||\n            tr(\"auth.security.deleteFailed\", \"Failed to delete account\"),\n        );\n      }\n    } catch (error) {\n      void nativeNotify(\"error\");\n      setAccountError(\n        error instanceof Error\n          ? error.message\n          : tr(\"auth.security.deleteFailed\", \"Failed to delete account\"),\n      );\n    }\n  };\n\n  const closeModals = () => {\n    setShowDeactivateModal(false);\n    setShowDeleteModal(false);\n    setAccountPassword(\"\");\n    setDeleteConfirmPhrase(\"\");\n    setAccountError(null);\n    setAccountSuccess(null);\n  };\n\n  const isAdmin =\n    user?.role === \"SUPER_ADMIN\" ||\n    user?.role === \"TENANT_ADMIN\" ||\n    user?.role === \"ORG_ADMIN\";\n  const filteredNavItems = navigationItems.filter(\n    (item) => !item.adminOnly || isAdmin,\n  );\n  const filteredQuickActions = quickActions.filter(\n    (item) => !item.adminOnly || isAdmin,\n  );\n\n  return (\n    <div className=\"bg-bg-canvas p-6\">\n      <ConfirmActionDialog\n        open={showLogoutDialog}\n        onOpenChange={setShowLogoutDialog}\n        title={tr(\"auth.security.signOutDialogTitle\", \"Sign out now?\")}\n        description={tr(\n          \"auth.security.signOutDialogDescription\",\n          \"You will be signed out of this device and returned to the login screen.\",\n        )}\n        confirmText={tr(\"auth.security.signOutDialogConfirm\", \"Sign out\")}\n        variant=\"warning\"\n        isPending={isLoggingOut}\n        onConfirm={handleLogout}\n      />\n      <main className=\"max-w-7xl mx-auto space-y-8\">\n        <div className=\"flex items-center gap-3\">\n          <div className=\"auth-brand-badge flex size-10 items-center justify-center rounded-xl\">\n            <ShieldIcon className=\"size-6 text-white\" />\n          </div>\n          <div>\n            <h1 className=\"text-lg font-bold text-text-primary\">\n              {tr(\"auth.security.title\", \"Security Center\")}\n            </h1>\n            <p className=\"text-xs text-text-secondary \">\n              {tr(\"auth.security.subtitle\", \"Account & Authentication\")}\n            </p>\n          </div>\n        </div>\n\n        {/* Security Status Banner */}\n        <div className=\"auth-hero-card rounded-2xl p-6\">\n          <div className=\"flex flex-col md:flex-row md:items-center md:justify-between gap-4\">\n            <div className=\"flex items-center gap-4\">\n              <div className=\"size-14 rounded-2xl bg-bg-surface/20 backdrop-blur flex items-center justify-center\">\n                <ShieldIcon className=\"size-8 text-white\" />\n              </div>\n              <div>\n                <h2 className=\"text-xl font-bold\">\n                  {tr(\"auth.security.securityStatus\", \"Security Status\")}\n                </h2>\n                <p className=\"opacity-80\">\n                  {user?.mfaEnabled\n                    ? tr(\n                        \"auth.security.wellProtected\",\n                        \"Your account is well protected\",\n                      )\n                    : tr(\n                        \"auth.security.enableMfaSuggestion\",\n                        \"Enable MFA for better security\",\n                      )}\n                </p>\n              </div>\n            </div>\n            <div className=\"flex items-center gap-3\">\n              {user?.mfaEnabled ? (\n                <span className=\"inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-bg-surface/20 backdrop-blur text-white font-medium\">\n                  <CheckCircleIcon className=\"size-5 text-status-success-text\" />\n                  {tr(\"auth.security.mfaEnabled\", \"MFA Enabled\")}\n                </span>\n              ) : (\n                <button\n                  type=\"button\"\n                  onClick={() => navigate(\"/auth/mfa\")}\n                  className=\"inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-bg-surface text-text-link font-semibold hover:bg-status-info-bg-subtle transition-colors shadow-lg\"\n                >\n                  <ExclamationIcon className=\"size-5 text-status-warning-text\" />\n                  {tr(\"auth.security.enableMfaNow\", \"Enable MFA Now\")}\n                </button>\n              )}\n            </div>\n          </div>\n        </div>\n\n        {/* Account Information Card */}\n        <div className=\"mb-8 p-6 rounded-2xl bg-bg-surface  border border-border-subtle  shadow-sm\">\n          <h3 className=\"text-lg font-semibold text-text-primary mb-4\">\n            {tr(\"auth.security.accountInfo\", \"Account Information\")}\n          </h3>\n          <dl className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n            <div className=\"sm:col-span-2 lg:col-span-1\">\n              <dt className=\"text-sm font-medium text-text-secondary\">\n                {tr(\"auth.security.email\", \"Email\")}\n              </dt>\n              <dd className=\"mt-1 text-text-primary\">\n                <span className=\"block truncate\" title={user?.email}>\n                  {user?.email}\n                </span>\n                {user?.emailVerified && (\n                  <span className=\"mt-1 inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-status-success-bg-subtle text-status-success-text text-xs font-medium\">\n                    <CheckCircleIcon className=\"size-3\" />\n                    {tr(\"auth.security.verified\", \"Verified\")}\n                  </span>\n                )}\n              </dd>\n            </div>\n            <div>\n              <dt className=\"text-sm font-medium text-text-secondary\">\n                {tr(\"auth.security.username\", \"Username\")}\n              </dt>\n              <dd\n                className=\"mt-1 text-text-primary truncate\"\n                title={user?.username ?? undefined}\n              >\n                {user?.username || \"-\"}\n              </dd>\n            </div>\n            <div>\n              <dt className=\"text-sm font-medium text-text-secondary\">\n                {tr(\"auth.security.role\", \"Role\")}\n              </dt>\n              <dd className=\"mt-1\">\n                <span className=\"inline-flex px-2.5 py-0.5 rounded-full bg-accent-indigo-subtle text-accent-indigo text-xs font-medium\">\n                  {user?.role || \"USER\"}\n                </span>\n              </dd>\n            </div>\n            <div>\n              <dt className=\"text-sm font-medium text-text-secondary\">\n                {tr(\"auth.security.memberSince\", \"Member Since\")}\n              </dt>\n              <dd className=\"mt-1 text-text-primary\">\n                {user?.createdAt ? formatDate(user.createdAt) : \"-\"}\n              </dd>\n            </div>\n          </dl>\n        </div>\n\n        {/* Main Navigation Grid */}\n        <div className=\"mb-8\">\n          <h3 className=\"text-lg font-semibold text-text-primary mb-4\">\n            {tr(\"auth.security.securityAuth\", \"Security & Authentication\")}\n          </h3>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n            {filteredNavItems.map((item) => (\n              <button\n                key={item.path}\n                type=\"button\"\n                onClick={() => navigate(item.path)}\n                aria-label={item.name}\n                className=\"group relative p-5 rounded-2xl bg-bg-surface  border border-border-subtle  hover:border-border-default  hover:shadow-lg transition-all duration-200 text-left\"\n              >\n                <div className=\"flex items-start gap-4\">\n                  <div\n                    className={`size-12 rounded-xl ${item.bgColor} flex items-center justify-center flex-shrink-0 transition-transform group-hover:scale-110`}\n                  >\n                    <item.icon className={`size-6 ${item.color}`} />\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <h4 className=\"text-base font-semibold text-text-primary group-hover:text-accent-indigo transition-colors\">\n                      {item.name}\n                    </h4>\n                    <p className=\"mt-1 text-sm text-text-secondary \">\n                      {item.description}\n                    </p>\n                  </div>\n                  <ChevronRightIcon className=\"size-5 text-text-tertiary group-hover:text-indigo-500 transition-colors flex-shrink-0\" />\n                </div>\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {/* Quick Actions */}\n        <div className=\"mb-8\">\n          <h3 className=\"text-lg font-semibold text-text-primary mb-4\">\n            {tr(\"auth.security.quickActions\", \"Quick Actions\")}\n          </h3>\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n            {filteredQuickActions.map((item) => (\n              <button\n                key={item.path}\n                type=\"button\"\n                onClick={() => navigate(item.path)}\n                aria-label={item.name}\n                className=\"group relative p-5 rounded-2xl bg-bg-surface  border border-border-subtle  hover:border-border-default  hover:shadow-lg transition-all duration-200 text-left\"\n              >\n                <div className=\"flex items-start gap-4\">\n                  <div\n                    className={`size-12 rounded-xl ${item.bgColor} flex items-center justify-center flex-shrink-0 transition-transform group-hover:scale-110`}\n                  >\n                    <item.icon className={`size-6 ${item.color}`} />\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <h4 className=\"text-base font-semibold text-text-primary group-hover:text-accent-indigo transition-colors\">\n                      {item.name}\n                    </h4>\n                    <p className=\"mt-1 text-sm text-text-secondary \">\n                      {item.description}\n                    </p>\n                  </div>\n                  <ChevronRightIcon className=\"size-5 text-text-tertiary group-hover:text-indigo-500 transition-colors flex-shrink-0\" />\n                </div>\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {/* Password & Danger Zone */}\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n          {/* Password Section */}\n          <div className=\"p-6 rounded-2xl bg-bg-surface  border border-border-subtle \">\n            <div className=\"flex items-start justify-between\">\n              <div>\n                <h3 className=\"text-lg font-semibold text-text-primary\">\n                  {tr(\"auth.security.password\", \"Password\")}\n                </h3>\n                <p className=\"mt-1 text-sm text-text-secondary \">\n                  {tr(\n                    \"auth.security.updatePassword\",\n                    \"Update your password to keep your account secure\",\n                  )}\n                </p>\n                <p className=\"mt-2 text-xs text-text-tertiary \">\n                  {tr(\"auth.security.lastChanged\", \"Last changed: Never\")}\n                </p>\n              </div>\n            </div>\n            <button\n              type=\"button\"\n              onClick={() => navigate(\"/auth/reset-password\")}\n              className=\"auth-primary-button mt-4 w-full px-5 py-2.5 font-semibold sm:w-auto\"\n            >\n              {tr(\"auth.security.changePassword\", \"Change Password\")}\n            </button>\n          </div>\n\n          {/* Danger Zone */}\n          <div className=\"p-6 rounded-2xl bg-status-error-bg-subtle border border-status-error-border\">\n            <h3 className=\"text-lg font-semibold text-status-error-text\">\n              {tr(\"auth.security.dangerZone\", \"Danger Zone\")}\n            </h3>\n            <p className=\"mt-1 text-sm text-status-error-text/80\">\n              {tr(\n                \"auth.security.dangerWarning\",\n                \"These actions affect your account. Proceed with caution.\",\n              )}\n            </p>\n            <div className=\"mt-4 flex flex-wrap gap-3\">\n              <button\n                ref={deactivateTriggerRef}\n                type=\"button\"\n                onClick={() => setShowDeactivateModal(true)}\n                className=\"px-5 py-2.5 rounded-xl border-2 border-status-warning-border text-status-warning-text font-semibold hover:bg-status-warning-bg-subtle transition-all duration-200\"\n              >\n                {tr(\"auth.security.deactivateAccount\", \"Deactivate Account\")}\n              </button>\n              <button\n                ref={deleteTriggerRef}\n                type=\"button\"\n                onClick={() => setShowDeleteModal(true)}\n                className=\"px-5 py-2.5 rounded-xl border-2 border-status-error-border text-status-error-text font-semibold hover:bg-status-error-bg-subtle transition-all duration-200\"\n              >\n                {tr(\"auth.security.deleteAccount\", \"Delete Account\")}\n              </button>\n            </div>\n          </div>\n        </div>\n\n        {/* Deactivate Account Modal */}\n        {showDeactivateModal && (\n          <div\n            className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4\"\n            role=\"presentation\"\n            onClick={(e) => {\n              if (e.target === e.currentTarget) closeModals();\n            }}\n          >\n            <div\n              ref={deactivateDialogRef}\n              role=\"dialog\"\n              aria-modal=\"true\"\n              aria-labelledby={deactivateTitleId}\n              tabIndex={-1}\n              className=\"w-full max-w-md bg-bg-surface rounded-2xl shadow-2xl p-6 outline-none\"\n            >\n              <h3\n                id={deactivateTitleId}\n                className=\"text-xl font-bold text-text-primary mb-2\"\n              >\n                {tr(\"auth.security.deactivateTitle\", \"Deactivate Account\")}\n              </h3>\n              <p className=\"text-sm text-text-secondary mb-4\">\n                {tr(\n                  \"auth.security.deactivateDesc\",\n                  \"Your account will be temporarily disabled. You can reactivate it by signing in again with your credentials.\",\n                )}\n              </p>\n              {accountError && (\n                <div\n                  id={deactivateErrorId}\n                  role=\"alert\"\n                  className=\"mb-4 p-3 rounded-lg bg-status-error-bg-subtle text-status-error-text text-sm\"\n                >\n                  {accountError}\n                </div>\n              )}\n              {accountSuccess && (\n                <div\n                  role=\"status\"\n                  className=\"mb-4 p-3 rounded-lg bg-status-success-bg-subtle text-status-success-text text-sm\"\n                >\n                  {accountSuccess}\n                </div>\n              )}\n              <div className=\"mb-4\">\n                <label\n                  htmlFor={deactivatePasswordId}\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr(\n                    \"auth.security.enterPasswordConfirm\",\n                    \"Enter your password to confirm\",\n                  )}\n                </label>\n                <input\n                  id={deactivatePasswordId}\n                  type=\"password\"\n                  value={accountPassword}\n                  onChange={(e) => setAccountPassword(e.target.value)}\n                  aria-required=\"true\"\n                  aria-describedby={\n                    accountError ? deactivateErrorId : undefined\n                  }\n                  aria-invalid={!!accountError}\n                  autoComplete=\"current-password\"\n                  className=\"w-full px-4 py-2 rounded-lg border border-border-default bg-bg-surface text-text-primary focus:ring-2 focus:ring-status-warning-bg focus:border-transparent\"\n                  placeholder={tr(\n                    \"auth.security.yourPassword\",\n                    \"Your password\",\n                  )}\n                />\n              </div>\n              <div className=\"flex gap-3\">\n                <button\n                  type=\"button\"\n                  onClick={closeModals}\n                  className=\"flex-1 px-4 py-2 rounded-lg border border-border-default text-text-primary font-medium hover:bg-bg-sunken transition-colors\"\n                >\n                  {tr(\"auth.security.cancel\", \"Cancel\")}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => void handleDeactivateAccount()}\n                  disabled={!accountPassword || isDeactivating}\n                  className=\"flex-1 px-4 py-2 rounded-lg bg-status-warning-bg text-white font-medium hover:bg-status-warning-bg-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2\"\n                >\n                  {isDeactivating && (\n                    <SpinnerIcon className=\"size-4 animate-spin\" />\n                  )}\n                  {tr(\"auth.security.deactivateBtn\", \"Deactivate\")}\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {/* Delete Account Modal */}\n        {showDeleteModal && (\n          <div\n            className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4\"\n            role=\"presentation\"\n            onClick={(e) => {\n              if (e.target === e.currentTarget) closeModals();\n            }}\n          >\n            <div\n              ref={deleteDialogRef}\n              role=\"dialog\"\n              aria-modal=\"true\"\n              aria-labelledby={deleteTitleId}\n              tabIndex={-1}\n              className=\"w-full max-w-md bg-bg-surface rounded-2xl shadow-2xl p-6 outline-none\"\n            >\n              <h3\n                id={deleteTitleId}\n                className=\"text-xl font-bold text-status-error-text mb-2\"\n              >\n                {tr(\"auth.security.deleteTitle\", \"Delete Account Permanently\")}\n              </h3>\n              <p className=\"text-sm text-text-secondary mb-4\">\n                {tr(\n                  \"auth.security.deleteDesc\",\n                  \"This action is irreversible. All your data will be permanently deleted and cannot be recovered.\",\n                )}\n              </p>\n              {accountError && (\n                <div\n                  id={deleteErrorId}\n                  role=\"alert\"\n                  className=\"mb-4 p-3 rounded-lg bg-status-error-bg-subtle text-status-error-text text-sm\"\n                >\n                  {accountError}\n                </div>\n              )}\n              {accountSuccess && (\n                <div\n                  role=\"status\"\n                  className=\"mb-4 p-3 rounded-lg bg-status-success-bg-subtle text-status-success-text text-sm\"\n                >\n                  {accountSuccess}\n                </div>\n              )}\n              <div className=\"mb-4\">\n                <label\n                  htmlFor={deletePasswordId}\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr(\n                    \"auth.security.enterPasswordDelete\",\n                    \"Enter your password\",\n                  )}\n                </label>\n                <input\n                  id={deletePasswordId}\n                  type=\"password\"\n                  value={accountPassword}\n                  onChange={(e) => setAccountPassword(e.target.value)}\n                  aria-required=\"true\"\n                  aria-describedby={accountError ? deleteErrorId : undefined}\n                  aria-invalid={!!accountError}\n                  autoComplete=\"current-password\"\n                  className=\"w-full px-4 py-2 rounded-lg border border-border-default bg-bg-surface text-text-primary focus:ring-2 focus:ring-status-error-bg focus:border-transparent\"\n                  placeholder={tr(\n                    \"auth.security.yourPassword\",\n                    \"Your password\",\n                  )}\n                />\n              </div>\n              <div className=\"mb-4\">\n                <label\n                  htmlFor={deleteConfirmId}\n                  className=\"block text-sm font-medium text-text-primary mb-1\"\n                >\n                  {tr(\"auth.security.type\", \"Type\")}{\" \"}\n                  <code className=\"px-1 py-0.5 rounded bg-bg-sunken text-status-error-text font-mono text-sm\">\n                    {DELETE_ACCOUNT_CONFIRMATION}\n                  </code>{\" \"}\n                  {tr(\"auth.security.toConfirm\", \"to confirm\")}\n                </label>\n                <input\n                  id={deleteConfirmId}\n                  type=\"text\"\n                  value={deleteConfirmPhrase}\n                  onChange={(e) => setDeleteConfirmPhrase(e.target.value)}\n                  aria-required=\"true\"\n                  aria-describedby={accountError ? deleteErrorId : undefined}\n                  aria-invalid={\n                    deleteConfirmPhrase.length > 0 &&\n                    deleteConfirmPhrase !== DELETE_ACCOUNT_CONFIRMATION\n                  }\n                  autoComplete=\"off\"\n                  className=\"w-full px-4 py-2 rounded-lg border border-border-default bg-bg-surface text-text-primary focus:ring-2 focus:ring-status-error-bg focus:border-transparent font-mono\"\n                  placeholder={tr(\n                    \"auth.security.deleteConfirmPlaceholder\",\n                    \"DELETE MY ACCOUNT\",\n                  )}\n                />\n              </div>\n              <div className=\"flex gap-3\">\n                <button\n                  type=\"button\"\n                  onClick={closeModals}\n                  className=\"flex-1 px-4 py-2 rounded-lg border border-border-default text-text-primary font-medium hover:bg-bg-sunken transition-colors\"\n                >\n                  {tr(\"auth.security.cancel\", \"Cancel\")}\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => void handleDeleteAccount()}\n                  disabled={\n                    !accountPassword ||\n                    deleteConfirmPhrase !== DELETE_ACCOUNT_CONFIRMATION ||\n                    isDeleting\n                  }\n                  className=\"flex-1 px-4 py-2 rounded-lg bg-status-error-bg text-white font-medium hover:bg-status-error-bg-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2\"\n                >\n                  {isDeleting && (\n                    <SpinnerIcon className=\"size-4 animate-spin\" />\n                  )}\n                  {tr(\"auth.security.deleteForever\", \"Delete Forever\")}\n                </button>\n              </div>\n            </div>\n          </div>\n        )}\n\n        {/* Footer */}\n        <footer className=\"mt-12 pt-6 border-t border-border-subtle \">\n          <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 text-sm text-text-secondary \">\n            <p>\n              {tr(\"auth.security.signedInAs\", \"Signed in as\")}{\" \"}\n              <span className=\"font-medium text-text-primary \">\n                {user?.email}\n              </span>\n            </p>\n            <div className=\"flex items-center gap-4\">\n              <button\n                type=\"button\"\n                onClick={() => navigate(\"/auth/login\")}\n                className=\"hover:text-text-primary transition-colors\"\n              >\n                {tr(\"auth.security.switchAccount\", \"Switch Account\")}\n              </button>\n              <span className=\"text-text-muted\" aria-hidden=\"true\">\n                |\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => setShowLogoutDialog(true)}\n                className=\"hover:text-status-error-text transition-colors\"\n              >\n                {tr(\"auth.security.signOut\", \"Sign Out\")}\n              </button>\n            </div>\n          </div>\n        </footer>\n      </main>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/auth/pages/SessionsPage.js

@@ -1,7 +1,6 @@
 import { useAuthStore as e } from "../store/authStore.js";
-import { useSessionOperations as t } from "../hooks/useSessionOperations.js";
-import "../hooks/index.js";
-import { AlertIcon as n, SpinnerIcon as r } from "../components/AuthIcons.js";
+import { AlertIcon as t, SpinnerIcon as n } from "../components/AuthIcons.js";
+import { useSessionOperations as r } from "../hooks/useSessionOperations.js";
 import { formatRelativeTime as i, parseBrowserName as a, parseDeviceName as o } from "../utils/formatters.js";
 import { ConfirmActionDialog as s } from "../components/ConfirmActionDialog.js";
 import { useMemo as c, useState as l } from "react";
@@ -12,7 +11,7 @@ function p() {
 	let { t: p } = u(), m = (e, t) => {
 		let n = p(e);
 		return n === e ? t : n;
-	}, h = e((e) => e.isAuthenticated), { activeSessions: g, revokeSession: _, revokeAllSessions: v, isLoading: y, page: b, totalPages: x, totalCount: S, hasMore: C, goToNextPage: w, goToPrevPage: T } = t({
+	}, h = e((e) => e.isAuthenticated), { activeSessions: g, revokeSession: _, revokeAllSessions: v, isLoading: y, page: b, totalPages: x, totalCount: S, hasMore: C, goToNextPage: w, goToPrevPage: T } = r({
 		disableTokenInfoQuery: !0,
 		pageSize: 20
 	}), E = c(() => {
@@ -115,8 +114,8 @@ function p() {
 			D && /* @__PURE__ */ f("div", {
 				role: "alert",
 				className: "mb-6 flex items-start gap-3 p-4 rounded-xl bg-status-error-bg-subtle border border-status-error-border",
-				children: [/* @__PURE__ */ d(n, {
-					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",
@@ -135,8 +134,8 @@ function p() {
 				"aria-live": "polite",
 				"aria-busy": "true",
 				className: "flex items-center justify-center py-12",
-				children: [/* @__PURE__ */ d(r, {
-					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",
@@ -146,9 +145,9 @@ function p() {
 				className: "text-center py-16 border-2 border-dashed border-border-subtle rounded-xl",
 				role: "status",
 				children: [/* @__PURE__ */ d("div", {
-					className: "w-16 h-16 mx-auto mb-4 rounded-full bg-bg-muted flex items-center justify-center",
+					className: "size-16 mx-auto mb-4 rounded-full bg-bg-muted 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",
@@ -175,10 +174,10 @@ function p() {
 						children: [/* @__PURE__ */ f("div", {
 							className: "flex items-start gap-4",
 							children: [/* @__PURE__ */ d("div", {
-								className: "w-12 h-12 rounded-xl bg-bg-accent flex items-center justify-center flex-shrink-0",
+								className: "size-12 rounded-xl bg-bg-accent flex items-center justify-center flex-shrink-0",
 								"aria-hidden": "true",
 								children: /* @__PURE__ */ d("svg", {
-									className: "w-6 h-6 text-text-link",
+									className: "size-6 text-text-link",
 									fill: "none",
 									viewBox: "0 0 24 24",
 									stroke: "currentColor",
@@ -214,7 +213,7 @@ function p() {
 												className: "flex items-center gap-1.5",
 												children: [
 													/* @__PURE__ */ d("svg", {
-														className: "w-4 h-4",
+														className: "size-4",
 														fill: "none",
 														viewBox: "0 0 24 24",
 														stroke: "currentColor",
@@ -237,7 +236,7 @@ function p() {
 												className: "flex items-center gap-1.5",
 												children: [
 													/* @__PURE__ */ f("svg", {
-														className: "w-4 h-4",
+														className: "size-4",
 														fill: "none",
 														viewBox: "0 0 24 24",
 														stroke: "currentColor",
@@ -265,7 +264,7 @@ function p() {
 												className: "flex items-center gap-1.5",
 												children: [
 													/* @__PURE__ */ d("svg", {
-														className: "w-4 h-4",
+														className: "size-4",
 														fill: "none",
 														viewBox: "0 0 24 24",
 														stroke: "currentColor",
@@ -312,7 +311,7 @@ function p() {
 						className: "flex items-center gap-2 px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors font-medium text-sm",
 						"aria-label": m("auth.sessions.prevPage", "Previous page"),
 						children: [/* @__PURE__ */ d("svg", {
-							className: "w-4 h-4",
+							className: "size-4",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
@@ -350,7 +349,7 @@ function p() {
 						className: "flex items-center gap-2 px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors font-medium text-sm",
 						"aria-label": m("auth.sessions.nextPage", "Next page"),
 						children: [m("auth.sessions.next", "Next"), /* @__PURE__ */ d("svg", {
-							className: "w-4 h-4",
+							className: "size-4",
 							fill: "none",
 							viewBox: "0 0 24 24",
 							stroke: "currentColor",
@@ -372,9 +371,9 @@ function p() {
 			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(n, {
-						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",
 						"aria-hidden": "true"
 					})
 				}),

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

@@ -1 +1 @@
-{"version":3,"file":"SessionsPage.js","names":[],"sources":["../../../src/auth/pages/SessionsPage.tsx"],"sourcesContent":["import { useState, useMemo } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useSessionOperations } from \"../hooks\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { ConfirmActionDialog } from \"../components/ConfirmActionDialog\";\nimport {\n  formatRelativeTime,\n  parseDeviceName,\n  parseBrowserName,\n} from \"../utils\";\nimport { SpinnerIcon, AlertIcon } from \"../components/AuthIcons\";\n\n/**\n * Active sessions management page with professional UI\n *\n * Fragment: SessionCard_Session (src/operations/global/fragments/SessionCard.fragment.graphql)\n * Query: ActiveSessions (src/operations/global/queries/sessions.graphql)\n */\nexport function SessionsPage() {\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 isAuthenticated = useAuthStore((state) => state.isAuthenticated);\n  const {\n    activeSessions,\n    revokeSession,\n    revokeAllSessions,\n    isLoading,\n    page,\n    totalPages,\n    totalCount,\n    hasMore,\n    goToNextPage,\n    goToPrevPage,\n  } = useSessionOperations({ disableTokenInfoQuery: true, pageSize: 20 });\n\n  // One entry per device: keep the most-recently-active session for each device name\n  const dedupedSessions = useMemo(() => {\n    const byDevice = new Map<string, (typeof activeSessions)[number]>();\n    for (const s of activeSessions) {\n      const device = parseDeviceName(s.userAgent ?? \"\");\n      const existing = byDevice.get(device);\n      if (\n        !existing ||\n        new Date(s.lastActivityAt) > new Date(existing.lastActivityAt)\n      ) {\n        byDevice.set(device, s);\n      }\n    }\n    return [...byDevice.values()];\n  }, [activeSessions]);\n\n  const [error, setError] = useState<string | null>(null);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n  const [pendingSessionId, setPendingSessionId] = useState<string | null>(null);\n  const [showRevokeAllDialog, setShowRevokeAllDialog] = useState(false);\n\n  const handleRevokeSession = async (sessionId: string) => {\n    try {\n      await revokeSession(sessionId);\n      setSuccessMessage(\"Session revoked successfully\");\n      setPendingSessionId(null);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : \"Failed to revoke session\");\n    }\n  };\n\n  const handleRevokeAll = async () => {\n    try {\n      await revokeAllSessions();\n      setSuccessMessage(\"All other sessions have been revoked\");\n      setShowRevokeAllDialog(false);\n    } catch (err) {\n      setError(\n        err instanceof Error ? err.message : \"Failed to revoke all sessions\",\n      );\n    }\n  };\n\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          <div className=\"w-16 h-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center\">\n            <AlertIcon\n              className=\"w-8 h-8 text-status-warning-text\"\n              aria-hidden=\"true\"\n            />\n          </div>\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            {tr(\"auth.sessions.authRequired\", \"Authentication Required\")}\n          </h2>\n          <p className=\"text-text-secondary\">\n            {tr(\n              \"auth.sessions.signInToView\",\n              \"Please sign in to view your active sessions\",\n            )}\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={pendingSessionId !== null}\n        onOpenChange={(open) => {\n          if (!open) {\n            setPendingSessionId(null);\n          }\n        }}\n        title=\"Revoke this session?\"\n        description=\"The selected device will be signed out immediately and will need to authenticate again.\"\n        confirmText=\"Revoke session\"\n        variant=\"danger\"\n        isPending={isLoading}\n        onConfirm={async () => {\n          if (pendingSessionId) {\n            await handleRevokeSession(pendingSessionId);\n          }\n        }}\n      />\n      <ConfirmActionDialog\n        open={showRevokeAllDialog}\n        onOpenChange={setShowRevokeAllDialog}\n        title=\"Revoke every other session?\"\n        description=\"All devices except your current one will be signed out immediately.\"\n        confirmText=\"Revoke all other sessions\"\n        variant=\"warning\"\n        isPending={isLoading}\n        onConfirm={handleRevokeAll}\n      />\n\n      {/* Live regions for screen reader announcements */}\n      <div aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n        {successMessage}\n      </div>\n      <div\n        role=\"alert\"\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        className=\"sr-only\"\n      >\n        {error}\n      </div>\n\n      {/* Header */}\n      <div className=\"flex items-center justify-between mb-8\">\n        <div>\n          <h1 className=\"text-3xl font-semibold text-text-primary\">\n            {tr(\"auth.sessions.title\", \"Active Sessions\")}\n          </h1>\n          <p className=\"text-text-secondary mt-2\">\n            {tr(\"auth.sessions.sessionCount\", \"You have\")} {totalCount}{\" \"}\n            {tr(\n              totalCount !== 1\n                ? \"auth.sessions.sessionsPlural\"\n                : \"auth.sessions.sessionsSingular\",\n              totalCount !== 1 ? \"active sessions\" : \"active session\",\n            )}\n          </p>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          {/* Export button — commented out until wspace-export-svc is wired for auth_sessions\n          <button\n            type=\"button\"\n            onClick={handleExport}\n            disabled={isExporting}\n            aria-label={tr(\n              \"auth.sessions.exportAriaLabel\",\n              \"Export sessions data\",\n            )}\n            className=\"flex items-center gap-2 px-4 py-2.5 rounded-xl border border-border-default text-text-primary font-medium hover:bg-bg-sunken disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200\"\n          >\n            {isExporting ? (\n              <>\n                <SpinnerIcon\n                  className=\"w-4 h-4 animate-spin\"\n                  aria-hidden=\"true\"\n                />\n                {tr(\"auth.sessions.exporting\", \"Exporting...\")}\n              </>\n            ) : (\n              <>\n                <svg\n                  className=\"w-4 h-4\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\n                  />\n                </svg>\n                {tr(\"auth.sessions.export\", \"Export\")}\n              </>\n            )}\n          </button>\n          */}\n          {totalCount > 1 && (\n            <button\n              type=\"button\"\n              onClick={() => setShowRevokeAllDialog(true)}\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 duration-200\"\n            >\n              {tr(\"auth.sessions.revokeAll\", \"Revoke All Sessions\")}\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Success Message */}\n      {successMessage && (\n        <div\n          role=\"status\"\n          className=\"mb-6 p-4 rounded-xl bg-status-success-bg-subtle border border-status-success-border\"\n        >\n          <p className=\"text-status-success-text\">{successMessage}</p>\n          <button\n            type=\"button\"\n            onClick={() => setSuccessMessage(null)}\n            className=\"mt-2 text-sm text-status-success-text hover:underline transition-colors duration-200\"\n          >\n            Dismiss\n          </button>\n        </div>\n      )}\n\n      {/* Error Message */}\n      {error && (\n        <div\n          role=\"alert\"\n          className=\"mb-6 flex items-start gap-3 p-4 rounded-xl bg-status-error-bg-subtle border border-status-error-border\"\n        >\n          <AlertIcon\n            className=\"w-5 h-5 text-status-error-text flex-shrink-0 mt-0.5\"\n            aria-hidden=\"true\"\n          />\n          <div className=\"flex-1\">\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n            <button\n              type=\"button\"\n              onClick={() => setError(null)}\n              className=\"mt-2 text-sm text-status-error-text hover:underline transition-colors duration-200\"\n            >\n              Dismiss\n            </button>\n          </div>\n        </div>\n      )}\n\n      {isLoading ? (\n        <div\n          aria-live=\"polite\"\n          aria-busy=\"true\"\n          className=\"flex items-center justify-center py-12\"\n        >\n          <SpinnerIcon\n            className=\"w-8 h-8 text-text-link animate-spin\"\n            aria-hidden=\"true\"\n          />\n          <span className=\"ml-3 text-text-secondary\">\n            {tr(\"auth.sessions.loading\", \"Loading sessions...\")}\n          </span>\n        </div>\n      ) : dedupedSessions.length === 0 ? (\n        <div\n          className=\"text-center py-16 border-2 border-dashed border-border-subtle rounded-xl\"\n          role=\"status\"\n        >\n          <div className=\"w-16 h-16 mx-auto mb-4 rounded-full bg-bg-muted flex items-center justify-center\">\n            <svg\n              className=\"w-8 h-8 text-text-tertiary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={1.5}\n                d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n              />\n            </svg>\n          </div>\n          <p className=\"text-text-secondary\">\n            {tr(\"auth.sessions.noSessions\", \"No active sessions found\")}\n          </p>\n        </div>\n      ) : (\n        <div className=\"space-y-4\" aria-live=\"polite\" aria-busy={isLoading}>\n          {dedupedSessions.map((session) => (\n            <div\n              key={session.id}\n              className=\"p-6 rounded-xl border border-border-default bg-bg-surface shadow-sm hover:shadow-md transition-shadow\"\n            >\n              <div className=\"flex items-start justify-between\">\n                <div className=\"flex items-start gap-4\">\n                  {/* Device Icon */}\n                  <div\n                    className=\"w-12 h-12 rounded-xl bg-bg-accent flex items-center justify-center flex-shrink-0\"\n                    aria-hidden=\"true\"\n                  >\n                    <svg\n                      className=\"w-6 h-6 text-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={1.5}\n                        d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n                      />\n                    </svg>\n                  </div>\n\n                  <div className=\"flex-1\">\n                    <div className=\"flex items-center gap-3 mb-1\">\n                      <h3 className=\"text-lg font-semibold text-text-primary\">\n                        {session.isCurrent &&\n                        parseDeviceName(session.userAgent) === \"Unknown Device\"\n                          ? tr(\"auth.sessions.thisDevice\", \"This Device\")\n                          : parseDeviceName(session.userAgent)}\n                      </h3>\n                      {session.isCurrent && (\n                        <span\n                          role=\"status\"\n                          className=\"px-2.5 py-1 rounded-full bg-status-success-bg-subtle text-status-success-text text-xs font-medium\"\n                        >\n                          {tr(\n                            \"auth.sessions.currentSession\",\n                            \"Current Session\",\n                          )}\n                        </span>\n                      )}\n                    </div>\n                    <p className=\"text-sm text-text-secondary mb-2\">\n                      {parseBrowserName(session.userAgent) ===\n                        \"Unknown Browser\" && session.isCurrent\n                        ? tr(\"auth.sessions.currentBrowser\", \"Current Browser\")\n                        : parseBrowserName(session.userAgent)}\n                    </p>\n                    <dl className=\"flex flex-wrap gap-4 text-sm text-text-secondary\">\n                      {session.ipAddress && session.ipAddress !== \"unknown\" && (\n                        <div className=\"flex items-center gap-1.5\">\n                          <svg\n                            className=\"w-4 h-4\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                            stroke=\"currentColor\"\n                            aria-hidden=\"true\"\n                          >\n                            <path\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                              strokeWidth={2}\n                              d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9\"\n                            />\n                          </svg>\n                          <dt className=\"sr-only\">IP address</dt>\n                          <dd>{session.ipAddress}</dd>\n                        </div>\n                      )}\n                      {session.location && (\n                        <div className=\"flex items-center gap-1.5\">\n                          <svg\n                            className=\"w-4 h-4\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                            stroke=\"currentColor\"\n                            aria-hidden=\"true\"\n                          >\n                            <path\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                              strokeWidth={2}\n                              d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n                            />\n                            <path\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                              strokeWidth={2}\n                              d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n                            />\n                          </svg>\n                          <dt className=\"sr-only\">Location</dt>\n                          <dd>{session.location}</dd>\n                        </div>\n                      )}\n                      <div className=\"flex items-center gap-1.5\">\n                        <svg\n                          className=\"w-4 h-4\"\n                          fill=\"none\"\n                          viewBox=\"0 0 24 24\"\n                          stroke=\"currentColor\"\n                          aria-hidden=\"true\"\n                        >\n                          <path\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth={2}\n                            d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n                          />\n                        </svg>\n                        <dt className=\"sr-only\">Last active</dt>\n                        <dd>\n                          {tr(\"auth.sessions.lastActive\", \"Last active\")}{\" \"}\n                          {formatRelativeTime(session.lastActivityAt)}\n                        </dd>\n                      </div>\n                    </dl>\n                  </div>\n                </div>\n\n                {!session.isCurrent && (\n                  <button\n                    type=\"button\"\n                    onClick={() => setPendingSessionId(session.id)}\n                    aria-label={`${tr(\"auth.sessions.revoke\", \"Revoke\")} ${parseDeviceName(session.userAgent)} session`}\n                    className=\"ml-4 px-4 py-2 rounded-lg text-sm font-medium border border-status-error-border text-status-error-text bg-bg-surface hover:bg-status-error-bg-subtle transition-colors duration-200\"\n                  >\n                    {tr(\"auth.sessions.revoke\", \"Revoke\")}\n                  </button>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Pagination controls */}\n      {!isLoading && totalPages > 1 && (\n        <div className=\"flex items-center justify-between mt-6 pt-4 border-t border-border-subtle\">\n          <button\n            type=\"button\"\n            onClick={goToPrevPage}\n            disabled={page === 0}\n            className=\"flex items-center gap-2 px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors font-medium text-sm\"\n            aria-label={tr(\"auth.sessions.prevPage\", \"Previous page\")}\n          >\n            <svg\n              className=\"w-4 h-4\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n            {tr(\"auth.sessions.prev\", \"Previous\")}\n          </button>\n\n          <span className=\"text-sm text-text-secondary\">\n            {tr(\"auth.sessions.pageOf\", \"Page\")}{\" \"}\n            <span className=\"font-medium text-text-primary\">{page + 1}</span>{\" \"}\n            {tr(\"auth.sessions.of\", \"of\")}{\" \"}\n            <span className=\"font-medium text-text-primary\">{totalPages}</span>\n          </span>\n\n          <button\n            type=\"button\"\n            onClick={goToNextPage}\n            disabled={!hasMore}\n            className=\"flex items-center gap-2 px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors font-medium text-sm\"\n            aria-label={tr(\"auth.sessions.nextPage\", \"Next page\")}\n          >\n            {tr(\"auth.sessions.next\", \"Next\")}\n            <svg\n              className=\"w-4 h-4\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M9 5l7 7-7 7\"\n              />\n            </svg>\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SessionsPage.js","names":[],"sources":["../../../src/auth/pages/SessionsPage.tsx"],"sourcesContent":["import { useState, useMemo } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport { useSessionOperations } from \"../hooks/useSessionOperations\";\nimport { useAuthStore } from \"../store/authStore\";\nimport { ConfirmActionDialog } from \"../components/ConfirmActionDialog\";\nimport {\n  formatRelativeTime,\n  parseDeviceName,\n  parseBrowserName,\n} from \"../utils/formatters\";\nimport { SpinnerIcon, AlertIcon } from \"../components/AuthIcons\";\n\n/**\n * Active sessions management page with professional UI\n *\n * Fragment: SessionCard_Session (src/operations/global/fragments/SessionCard.fragment.graphql)\n * Query: ActiveSessions (src/operations/global/queries/sessions.graphql)\n */\nexport function SessionsPage() {\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 isAuthenticated = useAuthStore((state) => state.isAuthenticated);\n  const {\n    activeSessions,\n    revokeSession,\n    revokeAllSessions,\n    isLoading,\n    page,\n    totalPages,\n    totalCount,\n    hasMore,\n    goToNextPage,\n    goToPrevPage,\n  } = useSessionOperations({ disableTokenInfoQuery: true, pageSize: 20 });\n\n  // One entry per device: keep the most-recently-active session for each device name\n  const dedupedSessions = useMemo(() => {\n    const byDevice = new Map<string, (typeof activeSessions)[number]>();\n    for (const s of activeSessions) {\n      const device = parseDeviceName(s.userAgent ?? \"\");\n      const existing = byDevice.get(device);\n      if (\n        !existing ||\n        new Date(s.lastActivityAt) > new Date(existing.lastActivityAt)\n      ) {\n        byDevice.set(device, s);\n      }\n    }\n    return [...byDevice.values()];\n  }, [activeSessions]);\n\n  const [error, setError] = useState<string | null>(null);\n  const [successMessage, setSuccessMessage] = useState<string | null>(null);\n  const [pendingSessionId, setPendingSessionId] = useState<string | null>(null);\n  const [showRevokeAllDialog, setShowRevokeAllDialog] = useState(false);\n\n  const handleRevokeSession = async (sessionId: string) => {\n    try {\n      await revokeSession(sessionId);\n      setSuccessMessage(\"Session revoked successfully\");\n      setPendingSessionId(null);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : \"Failed to revoke session\");\n    }\n  };\n\n  const handleRevokeAll = async () => {\n    try {\n      await revokeAllSessions();\n      setSuccessMessage(\"All other sessions have been revoked\");\n      setShowRevokeAllDialog(false);\n    } catch (err) {\n      setError(\n        err instanceof Error ? err.message : \"Failed to revoke all sessions\",\n      );\n    }\n  };\n\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          <div className=\"size-16 mx-auto mb-4 rounded-full bg-status-warning-bg-subtle flex items-center justify-center\">\n            <AlertIcon\n              className=\"size-8 text-status-warning-text\"\n              aria-hidden=\"true\"\n            />\n          </div>\n          <h2 className=\"text-xl font-semibold text-text-primary mb-2\">\n            {tr(\"auth.sessions.authRequired\", \"Authentication Required\")}\n          </h2>\n          <p className=\"text-text-secondary\">\n            {tr(\n              \"auth.sessions.signInToView\",\n              \"Please sign in to view your active sessions\",\n            )}\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={pendingSessionId !== null}\n        onOpenChange={(open) => {\n          if (!open) {\n            setPendingSessionId(null);\n          }\n        }}\n        title=\"Revoke this session?\"\n        description=\"The selected device will be signed out immediately and will need to authenticate again.\"\n        confirmText=\"Revoke session\"\n        variant=\"danger\"\n        isPending={isLoading}\n        onConfirm={async () => {\n          if (pendingSessionId) {\n            await handleRevokeSession(pendingSessionId);\n          }\n        }}\n      />\n      <ConfirmActionDialog\n        open={showRevokeAllDialog}\n        onOpenChange={setShowRevokeAllDialog}\n        title=\"Revoke every other session?\"\n        description=\"All devices except your current one will be signed out immediately.\"\n        confirmText=\"Revoke all other sessions\"\n        variant=\"warning\"\n        isPending={isLoading}\n        onConfirm={handleRevokeAll}\n      />\n\n      {/* Live regions for screen reader announcements */}\n      <div aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n        {successMessage}\n      </div>\n      <div\n        role=\"alert\"\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n        className=\"sr-only\"\n      >\n        {error}\n      </div>\n\n      {/* Header */}\n      <div className=\"flex items-center justify-between mb-8\">\n        <div>\n          <h1 className=\"text-3xl font-semibold text-text-primary\">\n            {tr(\"auth.sessions.title\", \"Active Sessions\")}\n          </h1>\n          <p className=\"text-text-secondary mt-2\">\n            {tr(\"auth.sessions.sessionCount\", \"You have\")} {totalCount}{\" \"}\n            {tr(\n              totalCount !== 1\n                ? \"auth.sessions.sessionsPlural\"\n                : \"auth.sessions.sessionsSingular\",\n              totalCount !== 1 ? \"active sessions\" : \"active session\",\n            )}\n          </p>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          {/* Export button — commented out until wspace-export-svc is wired for auth_sessions\n          <button\n            type=\"button\"\n            onClick={handleExport}\n            disabled={isExporting}\n            aria-label={tr(\n              \"auth.sessions.exportAriaLabel\",\n              \"Export sessions data\",\n            )}\n            className=\"flex items-center gap-2 px-4 py-2.5 rounded-xl border border-border-default text-text-primary font-medium hover:bg-bg-sunken disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200\"\n          >\n            {isExporting ? (\n              <>\n                <SpinnerIcon\n                  className=\"size-4 animate-spin\"\n                  aria-hidden=\"true\"\n                />\n                {tr(\"auth.sessions.exporting\", \"Exporting...\")}\n              </>\n            ) : (\n              <>\n                <svg\n                  className=\"size-4\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\n                  />\n                </svg>\n                {tr(\"auth.sessions.export\", \"Export\")}\n              </>\n            )}\n          </button>\n          */}\n          {totalCount > 1 && (\n            <button\n              type=\"button\"\n              onClick={() => setShowRevokeAllDialog(true)}\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 duration-200\"\n            >\n              {tr(\"auth.sessions.revokeAll\", \"Revoke All Sessions\")}\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Success Message */}\n      {successMessage && (\n        <div\n          role=\"status\"\n          className=\"mb-6 p-4 rounded-xl bg-status-success-bg-subtle border border-status-success-border\"\n        >\n          <p className=\"text-status-success-text\">{successMessage}</p>\n          <button\n            type=\"button\"\n            onClick={() => setSuccessMessage(null)}\n            className=\"mt-2 text-sm text-status-success-text hover:underline transition-colors duration-200\"\n          >\n            Dismiss\n          </button>\n        </div>\n      )}\n\n      {/* Error Message */}\n      {error && (\n        <div\n          role=\"alert\"\n          className=\"mb-6 flex items-start gap-3 p-4 rounded-xl bg-status-error-bg-subtle border border-status-error-border\"\n        >\n          <AlertIcon\n            className=\"size-5 text-status-error-text flex-shrink-0 mt-0.5\"\n            aria-hidden=\"true\"\n          />\n          <div className=\"flex-1\">\n            <p className=\"text-sm text-status-error-text\">{error}</p>\n            <button\n              type=\"button\"\n              onClick={() => setError(null)}\n              className=\"mt-2 text-sm text-status-error-text hover:underline transition-colors duration-200\"\n            >\n              Dismiss\n            </button>\n          </div>\n        </div>\n      )}\n\n      {isLoading ? (\n        <div\n          aria-live=\"polite\"\n          aria-busy=\"true\"\n          className=\"flex items-center justify-center py-12\"\n        >\n          <SpinnerIcon\n            className=\"size-8 text-text-link animate-spin\"\n            aria-hidden=\"true\"\n          />\n          <span className=\"ml-3 text-text-secondary\">\n            {tr(\"auth.sessions.loading\", \"Loading sessions...\")}\n          </span>\n        </div>\n      ) : dedupedSessions.length === 0 ? (\n        <div\n          className=\"text-center py-16 border-2 border-dashed border-border-subtle rounded-xl\"\n          role=\"status\"\n        >\n          <div className=\"size-16 mx-auto mb-4 rounded-full bg-bg-muted flex items-center justify-center\">\n            <svg\n              className=\"size-8 text-text-tertiary\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={1.5}\n                d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n              />\n            </svg>\n          </div>\n          <p className=\"text-text-secondary\">\n            {tr(\"auth.sessions.noSessions\", \"No active sessions found\")}\n          </p>\n        </div>\n      ) : (\n        <div className=\"space-y-4\" aria-live=\"polite\" aria-busy={isLoading}>\n          {dedupedSessions.map((session) => (\n            <div\n              key={session.id}\n              className=\"p-6 rounded-xl border border-border-default bg-bg-surface shadow-sm hover:shadow-md transition-shadow\"\n            >\n              <div className=\"flex items-start justify-between\">\n                <div className=\"flex items-start gap-4\">\n                  {/* Device Icon */}\n                  <div\n                    className=\"size-12 rounded-xl bg-bg-accent flex items-center justify-center flex-shrink-0\"\n                    aria-hidden=\"true\"\n                  >\n                    <svg\n                      className=\"size-6 text-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={1.5}\n                        d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\n                      />\n                    </svg>\n                  </div>\n\n                  <div className=\"flex-1\">\n                    <div className=\"flex items-center gap-3 mb-1\">\n                      <h3 className=\"text-lg font-semibold text-text-primary\">\n                        {session.isCurrent &&\n                        parseDeviceName(session.userAgent) === \"Unknown Device\"\n                          ? tr(\"auth.sessions.thisDevice\", \"This Device\")\n                          : parseDeviceName(session.userAgent)}\n                      </h3>\n                      {session.isCurrent && (\n                        <span\n                          role=\"status\"\n                          className=\"px-2.5 py-1 rounded-full bg-status-success-bg-subtle text-status-success-text text-xs font-medium\"\n                        >\n                          {tr(\n                            \"auth.sessions.currentSession\",\n                            \"Current Session\",\n                          )}\n                        </span>\n                      )}\n                    </div>\n                    <p className=\"text-sm text-text-secondary mb-2\">\n                      {parseBrowserName(session.userAgent) ===\n                        \"Unknown Browser\" && session.isCurrent\n                        ? tr(\"auth.sessions.currentBrowser\", \"Current Browser\")\n                        : parseBrowserName(session.userAgent)}\n                    </p>\n                    <dl className=\"flex flex-wrap gap-4 text-sm text-text-secondary\">\n                      {session.ipAddress && session.ipAddress !== \"unknown\" && (\n                        <div className=\"flex items-center gap-1.5\">\n                          <svg\n                            className=\"size-4\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                            stroke=\"currentColor\"\n                            aria-hidden=\"true\"\n                          >\n                            <path\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                              strokeWidth={2}\n                              d=\"M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9\"\n                            />\n                          </svg>\n                          <dt className=\"sr-only\">IP address</dt>\n                          <dd>{session.ipAddress}</dd>\n                        </div>\n                      )}\n                      {session.location && (\n                        <div className=\"flex items-center gap-1.5\">\n                          <svg\n                            className=\"size-4\"\n                            fill=\"none\"\n                            viewBox=\"0 0 24 24\"\n                            stroke=\"currentColor\"\n                            aria-hidden=\"true\"\n                          >\n                            <path\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                              strokeWidth={2}\n                              d=\"M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z\"\n                            />\n                            <path\n                              strokeLinecap=\"round\"\n                              strokeLinejoin=\"round\"\n                              strokeWidth={2}\n                              d=\"M15 11a3 3 0 11-6 0 3 3 0 016 0z\"\n                            />\n                          </svg>\n                          <dt className=\"sr-only\">Location</dt>\n                          <dd>{session.location}</dd>\n                        </div>\n                      )}\n                      <div className=\"flex items-center gap-1.5\">\n                        <svg\n                          className=\"size-4\"\n                          fill=\"none\"\n                          viewBox=\"0 0 24 24\"\n                          stroke=\"currentColor\"\n                          aria-hidden=\"true\"\n                        >\n                          <path\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth={2}\n                            d=\"M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n                          />\n                        </svg>\n                        <dt className=\"sr-only\">Last active</dt>\n                        <dd>\n                          {tr(\"auth.sessions.lastActive\", \"Last active\")}{\" \"}\n                          {formatRelativeTime(session.lastActivityAt)}\n                        </dd>\n                      </div>\n                    </dl>\n                  </div>\n                </div>\n\n                {!session.isCurrent && (\n                  <button\n                    type=\"button\"\n                    onClick={() => setPendingSessionId(session.id)}\n                    aria-label={`${tr(\"auth.sessions.revoke\", \"Revoke\")} ${parseDeviceName(session.userAgent)} session`}\n                    className=\"ml-4 px-4 py-2 rounded-lg text-sm font-medium border border-status-error-border text-status-error-text bg-bg-surface hover:bg-status-error-bg-subtle transition-colors duration-200\"\n                  >\n                    {tr(\"auth.sessions.revoke\", \"Revoke\")}\n                  </button>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Pagination controls */}\n      {!isLoading && totalPages > 1 && (\n        <div className=\"flex items-center justify-between mt-6 pt-4 border-t border-border-subtle\">\n          <button\n            type=\"button\"\n            onClick={goToPrevPage}\n            disabled={page === 0}\n            className=\"flex items-center gap-2 px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors font-medium text-sm\"\n            aria-label={tr(\"auth.sessions.prevPage\", \"Previous page\")}\n          >\n            <svg\n              className=\"size-4\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M15 19l-7-7 7-7\"\n              />\n            </svg>\n            {tr(\"auth.sessions.prev\", \"Previous\")}\n          </button>\n\n          <span className=\"text-sm text-text-secondary\">\n            {tr(\"auth.sessions.pageOf\", \"Page\")}{\" \"}\n            <span className=\"font-medium text-text-primary\">{page + 1}</span>{\" \"}\n            {tr(\"auth.sessions.of\", \"of\")}{\" \"}\n            <span className=\"font-medium text-text-primary\">{totalPages}</span>\n          </span>\n\n          <button\n            type=\"button\"\n            onClick={goToNextPage}\n            disabled={!hasMore}\n            className=\"flex items-center gap-2 px-4 py-2 rounded-lg border border-border-default text-text-primary bg-bg-surface hover:bg-bg-sunken disabled:opacity-40 disabled:cursor-not-allowed transition-colors font-medium text-sm\"\n            aria-label={tr(\"auth.sessions.nextPage\", \"Next page\")}\n          >\n            {tr(\"auth.sessions.next\", \"Next\")}\n            <svg\n              className=\"size-4\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              aria-hidden=\"true\"\n            >\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={2}\n                d=\"M9 5l7 7-7 7\"\n              />\n            </svg>\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}