feat(admin): migrate system diagnostics and retain SMTP drafts

2026-10-20 15:40:19 +02:00
parent 1d34406d1b
commit d824f59d2b
12 changed files with 1047 additions and 155 deletions
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";

 import {
  Alert,
@@ -13,10 +13,14 @@ import {
  Typography,
  Checkbox,
  FormControlLabel,
+  LinearProgress,
 } from "@mui/material";

 import { api, getApiErrorMessage } from "../api";
 import { useI18n } from "../i18n/I18nProvider";
+import { PageHeader, PageSection } from "../layout/PageLayout";
+import type { TranslationKey } from "../i18n/translations";
+import { checkSessionCookie, getSessionContext, isSessionInvalidated } from "../sessionBoundary";

 type AiServiceMetrics = {
  healthy: boolean;
@@ -201,7 +205,7 @@ function benchmarkTone(value?: number | null) {
 function SummaryCard({ title, value, subtitle, tone = "default" }: { title: string; value: string; subtitle?: string; tone?: "default" | "success" | "warning" | "error" }) {
  const color = tone === "success" ? "success.main" : tone === "warning" ? "warning.main" : tone === "error" ? "error.main" : "text.primary";
  return (
-    <Paper sx={{ p: 2, borderRadius: 3 }}>
+    <Paper variant="outlined" sx={{ p: "var(--app-card-padding)", borderRadius: 1, minWidth: 0 }}>
      <Typography variant="overline" sx={{ color: "text.secondary" }}>{title}</Typography>
      <Typography component="p" variant="h5" sx={{ fontWeight: 950, color }}>{value}</Typography>
      <Typography variant="body2" sx={{ color: "text.secondary", mt: 1 }}>{subtitle || "-"}</Typography>
@@ -210,9 +214,15 @@ function SummaryCard({ title, value, subtitle, tone = "default" }: { title: stri
 }

 function DetailRow({ label, value }: { label: string; value: React.ReactNode }) {
-  return <Typography variant="body2"><strong>{label}:</strong> {value}</Typography>;
+  return <Typography variant="body2" sx={{ overflowWrap: "anywhere", minWidth: 0 }}><strong>{label}:</strong> {value}</Typography>;
 }

+type ReadKind = "status" | "email" | "benchmark" | "maintenance";
+type ActionKind = "save" | "test" | "probe" | "maintenance";
+const readPaths: Record<ReadKind, string> = { status: "/admin/system", email: "/admin/system/email-settings", benchmark: "/admin/system/cv-benchmark", maintenance: "/admin/system/maintenance-jobs" };
+const readErrorKeys: Record<ReadKind, TranslationKey> = { status: "adminSystemLoadFailed", email: "adminSystemEmailSettingsLoadFailed", benchmark: "adminSystemBenchmarkLoadFailed", maintenance: "adminSystemMaintenanceLoadFailed" };
+const actionErrorKeys: Record<ActionKind, TranslationKey> = { save: "adminSystemEmailSaveFailed", test: "adminSystemTestEmailFailed", probe: "adminSystemProbeFailed", maintenance: "adminMaintenanceFailed" };
+
 export default function AdminSystemPage() {
  const { language, t } = useI18n();
  const [tab, setTab] = useState(0);
@@ -220,50 +230,114 @@ export default function AdminSystemPage() {
  const [emailSettings, setEmailSettings] = useState<EditableEmailSettings | null>(null);
  const [benchmarkStatus, setBenchmarkStatus] = useState<CvBenchmarkStatus | null>(null);
  const [maintenanceJobs, setMaintenanceJobs] = useState<MaintenanceJob[]>([]);
-  const [runningMaintenanceJob, setRunningMaintenanceJob] = useState<string | null>(null);
-  const [maintenanceMessage, setMaintenanceMessage] = useState<string | null>(null);
  const [smtpPassword, setSmtpPassword] = useState("");
  const [clearPassword, setClearPassword] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [runningProbe, setRunningProbe] = useState(false);
-  const [savingSettings, setSavingSettings] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [readErrors, setReadErrors] = useState<Partial<Record<ReadKind, unknown>>>({});
+  const [accessDenied, setAccessDenied] = useState(false);
+  const [action, setAction] = useState<ActionKind | null>(null);
+  const [actionError, setActionError] = useState<{ kind: ActionKind; cause: unknown } | null>(null);
+  const [message, setMessage] = useState<TranslationKey | null>(null);
  const [testEmailTo, setTestEmailTo] = useState("");
  const [testEmailSubject, setTestEmailSubject] = useState("Jobbjakt SMTP test");
  const [testEmailMessage, setTestEmailMessage] = useState(() => t("adminSystemDefaultTestMessage"));
-  const [sendingTestEmail, setSendingTestEmail] = useState(false);
+  const mounted = useRef(false);
+  const generation = useRef(0);
+  const readPending = useRef(false);
+  const actionPending = useRef(false);
+  const denied = useRef(false);
+  const controller = useRef<AbortController | null>(null);
+  const draftRevision = useRef(0);
+  const passwordRevision = useRef(0);
+  const savedRevision = useRef(0);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const headingRef = useRef<HTMLHeadingElement>(null);
+  const restoreFocus = useRef<HTMLElement | null>(null);
+  const navigationId = useId();

-  const load = useCallback(async () => {
+  const load = useCallback(async (kind?: ReadKind, afterWrite = false) => {
+    checkSessionCookie();
+    if (!mounted.current || denied.current || isSessionInvalidated() || readPending.current || actionPending.current && !afterWrite) return;
+    const context = getSessionContext();
+    const lifetime = generation.current;
+    const active = () => { checkSessionCookie(); return mounted.current && lifetime === generation.current && !isSessionInvalidated() && getSessionContext() === context; };
+    readPending.current = true;
+    const abort = new AbortController();
+    controller.current = abort;
    setLoading(true);
-    setError(null);
-    try {
-      const [statusRes, emailRes, benchmarkRes, maintenanceRes] = await Promise.all([
-        api.get<SystemStatus>("/admin/system"),
-        api.get<EditableEmailSettings>("/admin/system/email-settings"),
-        api.get<CvBenchmarkStatus>("/admin/system/cv-benchmark").catch(() => ({ data: null } as any)),
-        api.get<MaintenanceJob[]>("/admin/system/maintenance-jobs").catch(() => ({ data: [] } as any)),
-      ]);
-      setStatus(statusRes.data);
-      setEmailSettings(emailRes.data);
-      setBenchmarkStatus(benchmarkRes.data ?? null);
-      setMaintenanceJobs(maintenanceRes.data ?? []);
-      setSmtpPassword("");
-      setClearPassword(false);
-    } catch (e: any) {
-      setError(getApiErrorMessage(e, t("adminSystemLoadFailed")));
-      setStatus(null);
-      setEmailSettings(null);
-      setBenchmarkStatus(null);
-      setMaintenanceJobs([]);
-    } finally {
-      setLoading(false);
-    }
-  }, [t]);
+    const revision = draftRevision.current;
+    await Promise.all((kind ? [kind] : Object.keys(readPaths) as ReadKind[]).map(async (part) => {
+      try {
+        const response = await api.get(readPaths[part], { signal: abort.signal });
+        if (!active() || abort.signal.aborted || denied.current) return;
+        if (part === "status") setStatus(response.data);
+        if (part === "email" && revision === draftRevision.current && revision === savedRevision.current) setEmailSettings(response.data);
+        if (part === "benchmark") setBenchmarkStatus(response.data ?? null);
+        if (part === "maintenance") setMaintenanceJobs(response.data ?? []);
+        setReadErrors(errors => { const next = { ...errors }; delete next[part]; return next; });
+      } catch (cause) {
+        if (active() && !abort.signal.aborted) {
+          const responseStatus = (cause as { response?: { status?: number } })?.response?.status;
+          if (responseStatus === 401 || responseStatus === 403) {
+            denied.current = true; setAccessDenied(true);
+            setStatus(null); setEmailSettings(null); setBenchmarkStatus(null); setMaintenanceJobs([]);
+            setSmtpPassword(""); setClearPassword(false);
+          }
+          setReadErrors(errors => ({ ...errors, [part]: cause }));
+        }
+      }
+    }));
+    if (active() && !abort.signal.aborted) { readPending.current = false; setLoading(false); }
+  }, []);

  useEffect(() => {
+    mounted.current = true;
+    generation.current += 1;
    void load();
+    return () => { mounted.current = false; generation.current += 1; controller.current?.abort(); readPending.current = false; };
  }, [load]);

+  useEffect(() => {
+    if (loading || action || !restoreFocus.current) return;
+    const target = restoreFocus.current;
+    restoreFocus.current = null;
+    if (document.activeElement !== bodyRef.current) return;
+    if (target.isConnected && !target.matches(":disabled")) target.focus();
+    else headingRef.current?.focus();
+  }, [loading, action]);
+
+  const rememberFocus = () => {
+    const target = document.activeElement;
+    if (target instanceof HTMLElement && bodyRef.current?.contains(target)) { restoreFocus.current = target; bodyRef.current.focus(); }
+  };
+  const refresh = (kind?: ReadKind) => { if (!readPending.current && !actionPending.current) { rememberFocus(); void load(kind); } };
+  const updateSettings = (update: Partial<EditableEmailSettings>) => {
+    draftRevision.current += 1;
+    setEmailSettings(previous => previous ? { ...previous, ...update } : previous);
+  };
+  const locked = loading || action !== null || accessDenied;
+  const runAction = async (kind: ActionKind, write: (active: () => boolean) => Promise<void>, success: TranslationKey) => {
+    checkSessionCookie();
+    if (!mounted.current || denied.current || isSessionInvalidated() || readPending.current || actionPending.current) return;
+    const context = getSessionContext();
+    const lifetime = generation.current;
+    const active = () => { checkSessionCookie(); return mounted.current && lifetime === generation.current && !isSessionInvalidated() && getSessionContext() === context; };
+    actionPending.current = true;
+    rememberFocus(); setAction(kind); setActionError(null); setMessage(null);
+    try { await write(active); if (active()) setMessage(success); }
+    catch (cause) { if (active()) setActionError({ kind, cause }); }
+    finally { actionPending.current = false; if (active()) setAction(null); }
+  };
+  const readNotice = (kind: ReadKind) => {
+    if (!readErrors[kind]) return null;
+    const title = t(kind === "status" && status ? "adminSystemRefreshFailed" : readErrorKeys[kind]);
+    const detail = getApiErrorMessage(readErrors[kind], title);
+    return <Alert severity="error" sx={{ overflowWrap: "anywhere", display: "grid", gridTemplateColumns: "auto minmax(0, 1fr)", "& .MuiAlert-message": { minWidth: 0 }, "& .MuiAlert-action": { gridColumn: 2, m: 0, p: 0, justifySelf: "start" } }} action={!accessDenied ? <Button color="inherit" disabled={locked} onClick={() => refresh(kind)}>{t("retry")}</Button> : undefined}>
+      <Typography variant="body2">{title}</Typography>
+      {detail !== title ? <Typography variant="body2">{detail}</Typography> : null}
+    </Alert>;
+  };
+
  const dbTone = useMemo(() => {
    if (!status) return "default" as const;
    if (!status.database.looksConfigured || !status.database.canConnect) return "error" as const;
@@ -307,106 +381,79 @@ export default function AdminSystemPage() {
    }).slice(0, 10);
  }, [benchmarkIndex, t]);

-  const sendTestEmail = async () => {
-    setSendingTestEmail(true);
-    try {
+  const sendTestEmail = () => runAction("test", async () => {
      await api.post("/users/send-test-email", {
        toEmail: testEmailTo.trim() || null,
        subject: testEmailSubject.trim() || null,
        message: testEmailMessage.trim() || null,
      });
-      setError(null);
-    } catch (e: any) {
-      setError(getApiErrorMessage(e, t("adminSystemTestEmailFailed")));
-    } finally {
-      setSendingTestEmail(false);
-    }
-  };
+  }, "adminSystemTestEmailSent");

  const saveEmailSettings = async () => {
    if (!emailSettings) return;
-    setSavingSettings(true);
-    try {
+    const revision = draftRevision.current;
+    const secretRevision = passwordRevision.current;
+    const snapshot = emailSettings;
+    await runAction("save", async (active) => {
      const res = await api.put<EditableEmailSettings>("/admin/system/email-settings", {
-        enabled: emailSettings.enabled,
-        host: emailSettings.host,
-        port: Number(emailSettings.port) || 587,
-        user: emailSettings.user,
+        enabled: snapshot.enabled,
+        host: snapshot.host,
+        port: Number(snapshot.port) || 587,
+        user: snapshot.user,
        password: smtpPassword.trim() || null,
        clearPassword,
-        from: emailSettings.from,
-        fromName: emailSettings.fromName,
-        enableSsl: emailSettings.enableSsl,
-        timeoutMs: Number(emailSettings.timeoutMs) || 15000,
+        from: snapshot.from,
+        fromName: snapshot.fromName,
+        enableSsl: snapshot.enableSsl,
+        timeoutMs: Number(snapshot.timeoutMs) || 15000,
      });
-      setEmailSettings(res.data);
-      setSmtpPassword("");
-      setClearPassword(false);
-      await load();
-    } catch (e: any) {
-      setError(getApiErrorMessage(e, t("adminSystemEmailSaveFailed")));
-    } finally {
-      setSavingSettings(false);
-    }
+      if (!active()) return;
+      if (draftRevision.current === revision) { setEmailSettings(res.data); savedRevision.current = revision; }
+      if (passwordRevision.current === secretRevision) { setSmtpPassword(""); setClearPassword(false); }
+      setReadErrors(errors => { const next = { ...errors }; delete next.email; return next; });
+    }, "adminSystemSettingsSaved");
  };

  const runMaintenanceJob = async (jobId: string) => {
-    setRunningMaintenanceJob(jobId);
-    setMaintenanceMessage(null);
-    setError(null);
-    try {
+    if (jobId !== "cv-benchmark" || !cvBenchmarkJob?.available || readErrors.maintenance) return;
+    await runAction("maintenance", async () => {
      await api.post(`/admin/system/maintenance-jobs/${encodeURIComponent(jobId)}/runs`);
-      setMaintenanceMessage(t("adminMaintenanceQueued"));
-    } catch (e: any) {
-      setError(getApiErrorMessage(e, t("adminMaintenanceFailed")));
-    } finally {
-      setRunningMaintenanceJob(null);
-    }
+    }, "adminMaintenanceQueued");
  };

  return (
-    <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-      <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, alignItems: "center", flexWrap: "wrap" }}>
-        <Box>
-          <Typography component="h2" variant="h5" sx={{ fontWeight: 950 }}>{t("adminSystemTitle")}</Typography>
-          <Typography sx={{ color: "text.secondary" }}>{t("adminSystemSubtitle")}</Typography>
-        </Box>
+    <Box ref={bodyRef} role="region" aria-label={t("adminSystemTitle")} aria-busy={locked} tabIndex={-1} sx={{ display: "flex", flexDirection: "column", gap: "var(--app-section-gap)", minWidth: 0, overflowWrap: "anywhere", "& .MuiButton-root": { whiteSpace: "normal", overflowWrap: "anywhere", maxWidth: "100%", minHeight: { xs: 44, sm: 36 }, "@media (pointer: coarse)": { minHeight: 44 } }, "& .MuiChip-root": { maxWidth: "100%", height: "auto" }, "& .MuiChip-label": { whiteSpace: "normal", overflowWrap: "anywhere", py: 0.5 } }}>
+      <PageHeader level="h2" titleRef={headingRef} title={t("adminSystemTitle")} description={t("adminSystemSubtitle")} actions={
        <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
          <Button
            variant="outlined"
            onClick={async () => {
-              setRunningProbe(true);
-              setError(null);
-              try {
-                await api.post("/admin/system/ai/probe");
-                await load();
-              } catch (e: any) {
-                setError(getApiErrorMessage(e, t("adminSystemProbeFailed")));
-              } finally {
-                setRunningProbe(false);
-              }
+              await runAction("probe", async (active) => { await api.post("/admin/system/ai/probe"); if (active()) await load("status", true); }, "adminSystemProbeCompleted");
            }}
-            disabled={loading || runningProbe}
+            disabled={locked || !status || !!readErrors.status}
          >
-            {runningProbe ? t("adminSystemRunningProbe") : t("adminSystemRunProbe")}
+            {action === "probe" ? t("adminSystemRunningProbe") : t("adminSystemRunProbe")}
          </Button>
-          <Button variant="contained" onClick={() => void load()} disabled={loading}>
+          <Button variant="contained" onClick={() => refresh()} disabled={locked}>
            {loading ? t("adminSystemRefreshing") : t("adminSystemRefresh")}
          </Button>
-        </Box>
-      </Box>
+        </Box> } />

-      <Tabs value={tab} onChange={(_, value) => setTab(value)}>
-        <Tab label={t("adminSystemStatusTab")} />
-        <Tab label={t("adminSystemSettingsTab")} />
+      <Tabs value={tab} aria-label={t("adminSystemTitle")} onChange={(_, value) => setTab(value)} variant="scrollable" scrollButtons="auto" allowScrollButtonsMobile>
+        <Tab id={`${navigationId}-tab-0`} aria-controls={`${navigationId}-panel-0`} label={t("adminSystemStatusTab")} />
+        <Tab id={`${navigationId}-tab-1`} aria-controls={`${navigationId}-panel-1`} label={t("adminSystemSettingsTab")} />
      </Tabs>

-      {error ? <Alert severity="error">{error}</Alert> : null}
+      {loading ? <LinearProgress aria-label={t("loading")} /> : null}
+      {actionError ? <Alert severity="error" sx={{ overflowWrap: "anywhere" }}>{getApiErrorMessage(actionError.cause, t(actionErrorKeys[actionError.kind]))}</Alert> : null}
+      {message ? <Alert severity="success" role="status">{t(message)}</Alert> : null}
+      {readNotice("status")}
      {status?.database.warning && tab === 0 ? <Alert severity={status.database.canConnect ? "warning" : "error"}>{status.database.warning}</Alert> : null}
      {status?.ai.lastError && tab === 0 ? <Alert severity={status.ai.healthy ? "warning" : "error"}>{status.ai.lastError}</Alert> : null}

-      {tab === 0 ? (
-        <>
+      <Box role="tabpanel" id={`${navigationId}-panel-0`} aria-labelledby={`${navigationId}-tab-0`} hidden={tab !== 0} sx={{ minWidth: 0 }}>
+      <Stack spacing={1}>{readNotice("benchmark")}{readNotice("maintenance")}</Stack>
+      {status ? <Stack spacing={2}>
          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(4, 1fr)" }, gap: 2 }}>
            <SummaryCard
              title={t("adminSystemEnvironment")}
@@ -438,8 +485,7 @@ export default function AdminSystemPage() {
          </Box>

          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", lg: "1.2fr 1fr" }, gap: 2 }}>
-            <Paper sx={{ p: 2, borderRadius: 3 }}>
-              <Typography component="h3" variant="h6" sx={{ fontWeight: 900, mb: 1 }}>{t("adminSystemDatabaseStorage")}</Typography>
+            <PageSection surface level="h3" title={t("adminSystemDatabaseStorage")}>
              <Stack spacing={0.75}>
                <DetailRow label={t("adminSystemProvider")} value={status?.database.provider || "-"} />
                <DetailRow label={t("adminSystemTarget")} value={status?.database.target || "-"} />
@@ -454,10 +500,9 @@ export default function AdminSystemPage() {
                <DetailRow label={t("adminSystemJobs")} value={status?.storage.jobCount ?? 0} />
                <DetailRow label={t("adminSystemDeletedJobs")} value={status?.storage.deletedCount ?? 0} />
              </Stack>
-            </Paper>
+            </PageSection>

-            <Paper sx={{ p: 2, borderRadius: 3 }}>
-              <Typography component="h3" variant="h6" sx={{ fontWeight: 900, mb: 1 }}>{t("adminSystemRuntimeAuth")}</Typography>
+            <PageSection surface level="h3" title={t("adminSystemRuntimeAuth")}>
              <Stack spacing={0.75}>
                <DetailRow label={t("adminSystemFramework")} value={status?.runtime.framework || "-"} />
                <DetailRow label={t("adminSystemOs")} value={status?.runtime.osDescription || "-"} />
@@ -470,12 +515,11 @@ export default function AdminSystemPage() {
                <DetailRow label={t("adminSystemGoogleConfigured")} value={status?.auth.googleConfigured ? t("yes") : t("noWord")} />
                <DetailRow label={t("adminSystemGmailConfigured")} value={status?.auth.gmailConfigured ? t("yes") : t("noWord")} />
              </Stack>
-            </Paper>
+            </PageSection>
          </Box>

          <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", lg: "1fr 1fr" }, gap: 2 }}>
-            <Paper sx={{ p: 2, borderRadius: 3 }}>
-              <Typography component="h3" variant="h6" sx={{ fontWeight: 900, mb: 1 }}>{t("adminSystemEmailConfig")}</Typography>
+            <PageSection surface level="h3" title={t("adminSystemEmailConfig")}>
              <Stack spacing={0.75}>
                <DetailRow label={t("adminSystemEnabled")} value={status?.email.enabled ? t("yes") : t("noWord")} />
                <DetailRow label={t("adminSystemFrom")} value={status?.email.from || "-"} />
@@ -484,10 +528,9 @@ export default function AdminSystemPage() {
                <DetailRow label={t("adminSystemPort")} value={status?.email.port ?? "-"} />
                <DetailRow label={t("adminSystemSsl")} value={status?.email.enableSsl ? t("yes") : t("noWord")} />
              </Stack>
-            </Paper>
+            </PageSection>

-            <Paper sx={{ p: 2, borderRadius: 3 }}>
-              <Typography component="h3" variant="h6" sx={{ fontWeight: 900, mb: 1 }}>{t("adminSystemSummarizerRuntime")}</Typography>
+            <PageSection surface level="h3" title={t("adminSystemSummarizerRuntime")}>
              <Stack spacing={0.75}>
                <DetailRow label={t("adminSystemModel")} value={status?.ai.model || "-"} />
                <DetailRow label={t("adminSystemDevice")} value={status?.ai.device || "-"} />
@@ -505,11 +548,10 @@ export default function AdminSystemPage() {
                <DetailRow label={t("adminSystemLastSuccessfulProbe")} value={formatDate(status?.ai.lastProbeSuccessAt, language === "nb" ? "nb-NO" : "en")} />
                <DetailRow label={t("adminSystemLastSummarizationSuccess")} value={formatDate(status?.ai.lastSuccessAt, language === "nb" ? "nb-NO" : "en")} />
              </Stack>
-            </Paper>
+            </PageSection>
          </Box>

-          <Paper sx={{ p: 2, borderRadius: 3 }}>
-            <Typography component="h3" variant="h6" sx={{ fontWeight: 900, mb: 1 }}>{t("adminSystemSummarizerTelemetry")}</Typography>
+          <PageSection surface level="h3" title={t("adminSystemSummarizerTelemetry")}>
            <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr 1fr", md: "repeat(8, 1fr)" }, gap: 2 }}>
              <Box><Typography variant="overline" sx={{ color: "text.secondary" }}>{t("adminSystemRequests")}</Typography><Typography component="p" variant="h6" sx={{ fontWeight: 900 }}>{status?.ai.requests ?? 0}</Typography></Box>
              <Box><Typography variant="overline" sx={{ color: "text.secondary" }}>{t("adminSystemCacheHits")}</Typography><Typography component="p" variant="h6" sx={{ fontWeight: 900 }}>{status?.ai.cacheHits ?? 0}</Typography></Box>
@@ -534,12 +576,11 @@ export default function AdminSystemPage() {
                <Chip key={`loaded-${model}`} label={t("adminSystemLoadedModel", { model })} color="primary" variant="outlined" size="small" />
              ))}
            </Box>
-          </Paper>
+          </PageSection>

-          <Paper sx={{ p: 2, borderRadius: 3 }}>
+          <PageSection surface level="h3" title={t("adminBenchmarkTitle")}>
            <Box sx={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 2, flexWrap: "wrap", mb: 1 }}>
              <Box>
-                <Typography component="h3" variant="h6" sx={{ fontWeight: 900 }}>{t("adminBenchmarkTitle")}</Typography>
                <Typography variant="body2" sx={{ color: "text.secondary", mt: 0.25 }}>
                  {cvBenchmarkJob?.description || t("adminBenchmarkRunScript")}
                </Typography>
@@ -552,15 +593,15 @@ export default function AdminSystemPage() {
                ) : null}
                <Button
                  variant="contained"
-                  disabled={!cvBenchmarkJob?.available || runningMaintenanceJob === "cv-benchmark"}
+                  disabled={locked || !cvBenchmarkJob?.available || !!readErrors.maintenance}
                  onClick={() => void runMaintenanceJob("cv-benchmark")}
                >
-                  {runningMaintenanceJob === "cv-benchmark" ? t("adminMaintenanceStarting") : t("adminMaintenanceRunBenchmark")}
+                  {action === "maintenance" ? t("adminMaintenanceStarting") : t("adminMaintenanceRunBenchmark")}
                </Button>
              </Stack>
            </Box>
-            {!cvBenchmarkJob?.available ? <Alert severity="info" sx={{ mb: 1.5 }}>{t("adminMaintenanceUnavailable")}</Alert> : null}
-            {maintenanceMessage ? <Alert severity="success" sx={{ mb: 1.5 }}>{maintenanceMessage}</Alert> : null}
+            {!loading && !readErrors.maintenance && !cvBenchmarkJob?.available ? <Alert severity="info" sx={{ mb: 1.5 }}>{t("adminMaintenanceUnavailable")}</Alert> : null}
+            {!readErrors.benchmark && !loading ? <>
            <Stack spacing={0.75}>
              <DetailRow label={t("adminBenchmarkRoot")} value={benchmarkStatus?.rootPath || "-"} />
              <DetailRow label={t("adminBenchmarkLastUpdate")} value={formatDate(benchmarkStatus?.lastUpdatedAtUtc, language === "nb" ? "nb-NO" : "en")} />
@@ -621,39 +662,40 @@ export default function AdminSystemPage() {
                  {benchmarkStatus?.reportMarkdown || t("adminBenchmarkRunScript")}
                </Typography>
              </Box>
-            )}
-          </Paper>
-        </>
-      ) : (
-        <Box sx={{ display: "grid", gap: 2 }}>
-          <Paper sx={{ p: 2, borderRadius: 3 }}>
-            <Typography component="h3" variant="h6" sx={{ fontWeight: 900, mb: 1 }}>{t("adminSystemEmailSettingsTitle")}</Typography>
+            )}</> : null}
+          </PageSection>
+        </Stack> : null}
+      </Box>
+      <Box role="tabpanel" id={`${navigationId}-panel-1`} aria-labelledby={`${navigationId}-tab-1`} hidden={tab !== 1} sx={{ minWidth: 0 }}>
+        <Box sx={{ display: "grid", gap: 2, minWidth: 0 }}>
+          {readNotice("email")}
+          {emailSettings ? <PageSection surface level="h3" title={t("adminSystemEmailSettingsTitle")}>
            <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>{t("adminSystemEmailSettingsBody")}</Typography>
            <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 1.5 }}>
              <FormControlLabel
-                control={<Checkbox checked={Boolean(emailSettings?.enabled)} onChange={(e) => setEmailSettings((prev) => prev ? { ...prev, enabled: e.target.checked } : prev)} />}
+                control={<Checkbox checked={Boolean(emailSettings?.enabled)} onChange={(e) => updateSettings({ enabled: e.target.checked })} />}
                label={t("adminSystemEnabled")}
                sx={{ gridColumn: { xs: "1 / -1", md: "1 / -1" } }}
              />
-              <TextField label={t("adminSystemHost")} value={emailSettings?.host ?? ""} onChange={(e) => setEmailSettings((prev) => prev ? { ...prev, host: e.target.value } : prev)} fullWidth />
-              <TextField label={t("adminSystemPort")} type="number" value={emailSettings?.port ?? 587} onChange={(e) => setEmailSettings((prev) => prev ? { ...prev, port: Number(e.target.value) } : prev)} fullWidth />
-              <TextField label={t("adminSystemUsername")} value={emailSettings?.user ?? ""} onChange={(e) => setEmailSettings((prev) => prev ? { ...prev, user: e.target.value } : prev)} fullWidth />
-              <TextField label={t("adminSystemPassword")} type="password" value={smtpPassword} onChange={(e) => { setSmtpPassword(e.target.value); if (e.target.value.trim()) setClearPassword(false); }} helperText={emailSettings?.hasPassword ? t("adminSystemPasswordStored") : t("adminSystemPasswordMissing")} fullWidth />
-              <TextField label={t("adminSystemFrom")} value={emailSettings?.from ?? ""} onChange={(e) => setEmailSettings((prev) => prev ? { ...prev, from: e.target.value } : prev)} fullWidth />
-              <TextField label={t("adminSystemFromName")} value={emailSettings?.fromName ?? ""} onChange={(e) => setEmailSettings((prev) => prev ? { ...prev, fromName: e.target.value } : prev)} fullWidth />
-              <TextField label={t("adminSystemTimeoutMs")} type="number" value={emailSettings?.timeoutMs ?? 15000} onChange={(e) => setEmailSettings((prev) => prev ? { ...prev, timeoutMs: Number(e.target.value) } : prev)} fullWidth />
-              <FormControlLabel control={<Checkbox checked={Boolean(emailSettings?.enableSsl)} onChange={(e) => setEmailSettings((prev) => prev ? { ...prev, enableSsl: e.target.checked } : prev)} />} label={t("adminSystemSsl")} />
-              <FormControlLabel control={<Checkbox checked={clearPassword} onChange={(e) => { setClearPassword(e.target.checked); if (e.target.checked) setSmtpPassword(""); }} />} label={t("adminSystemClearStoredPassword")} sx={{ gridColumn: { xs: "1 / -1", md: "1 / -1" } }} />
+              <TextField label={t("adminSystemHost")} value={emailSettings?.host ?? ""} onChange={(e) => updateSettings({ host: e.target.value })} fullWidth />
+              <TextField label={t("adminSystemPort")} type="number" value={emailSettings?.port ?? 587} onChange={(e) => updateSettings({ port: Number(e.target.value) })} fullWidth />
+              <TextField label={t("adminSystemUsername")} value={emailSettings?.user ?? ""} onChange={(e) => updateSettings({ user: e.target.value })} fullWidth />
+              <TextField label={t("adminSystemPassword")} type="password" value={smtpPassword} onChange={(e) => { draftRevision.current += 1; passwordRevision.current += 1; setSmtpPassword(e.target.value); if (e.target.value.trim()) setClearPassword(false); }} helperText={emailSettings?.hasPassword ? t("adminSystemPasswordStored") : t("adminSystemPasswordMissing")} fullWidth />
+              <TextField label={t("adminSystemFrom")} value={emailSettings?.from ?? ""} onChange={(e) => updateSettings({ from: e.target.value })} fullWidth />
+              <TextField label={t("adminSystemFromName")} value={emailSettings?.fromName ?? ""} onChange={(e) => updateSettings({ fromName: e.target.value })} fullWidth />
+              <TextField label={t("adminSystemTimeoutMs")} type="number" value={emailSettings?.timeoutMs ?? 15000} onChange={(e) => updateSettings({ timeoutMs: Number(e.target.value) })} fullWidth />
+              <FormControlLabel control={<Checkbox checked={Boolean(emailSettings?.enableSsl)} onChange={(e) => updateSettings({ enableSsl: e.target.checked })} />} label={t("adminSystemSsl")} />
+              <FormControlLabel control={<Checkbox checked={clearPassword} onChange={(e) => { draftRevision.current += 1; passwordRevision.current += 1; setClearPassword(e.target.checked); if (e.target.checked) setSmtpPassword(""); }} />} label={t("adminSystemClearStoredPassword")} sx={{ gridColumn: { xs: "1 / -1", md: "1 / -1" } }} />
            </Box>
+            {draftRevision.current !== savedRevision.current ? <Typography variant="body2" color="text.secondary" role="status" sx={{ mt: 1.5 }}>{t("adminSystemUnsavedChanges")}</Typography> : null}
            <Box sx={{ display: "flex", justifyContent: "flex-end", mt: 1.5 }}>
-              <Button variant="contained" disabled={savingSettings || !emailSettings} onClick={() => void saveEmailSettings()}>
-                {savingSettings ? t("adminSystemSaving") : t("adminSystemSaveSettings")}
+              <Button variant="contained" disabled={locked || !!readErrors.email} onClick={() => void saveEmailSettings()}>
+                {action === "save" ? t("adminSystemSaving") : t("adminSystemSaveSettings")}
              </Button>
            </Box>
-          </Paper>
+          </PageSection> : null}

-          <Paper sx={{ p: 2, borderRadius: 3 }}>
-            <Typography component="h3" variant="h6" sx={{ fontWeight: 900, mb: 1 }}>{t("adminSystemSmtpTest")}</Typography>
+          <PageSection surface level="h3" title={t("adminSystemSmtpTest")}>
            <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>
              {t("adminSystemSmtpTestBody")}
            </Typography>
@@ -663,13 +705,13 @@ export default function AdminSystemPage() {
              <TextField label={t("adminSystemMessage")} multiline minRows={3} value={testEmailMessage} onChange={(e) => setTestEmailMessage(e.target.value)} sx={{ gridColumn: { xs: "1 / -1", md: "1 / -1" } }} />
            </Box>
            <Box sx={{ display: "flex", justifyContent: "flex-end", mt: 1.5 }}>
-              <Button variant="contained" disabled={sendingTestEmail} onClick={() => void sendTestEmail()}>
-                {sendingTestEmail ? t("adminSystemSending") : t("adminSystemSendTestEmail")}
+              <Button variant="contained" disabled={locked || !emailSettings || !!readErrors.email} onClick={() => void sendTestEmail()}>
+                {action === "test" ? t("adminSystemSending") : t("adminSystemSendTestEmail")}
              </Button>
            </Box>
-          </Paper>
+          </PageSection>
        </Box>
-      )}
+      </Box>
    </Box>
  );
 }