Polish settings and admin system pages

job-tracker-ui/src/admin-system-page.test.tsx

@@ -1,14 +1,26 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 import AdminSystemPage from './pages/AdminSystemPage';
 import { I18nProvider } from './i18n/I18nProvider';
 import { api } from './api';
 
+jest.mock('./api', () => ({
+  api: {
+    get: jest.fn(),
+    post: jest.fn(),
+    put: jest.fn(),
+    patch: jest.fn(),
+    delete: jest.fn(),
+    interceptors: { request: { use: jest.fn() }, response: { use: jest.fn() } },
+  },
+  getApiErrorMessage: (error: any, fallback?: string) => fallback || 'Request failed.',
+}));
+
 const mockedApi = api as jest.Mocked<typeof api>;
 
 describe('AdminSystemPage', () => {
-  it('renders AI service health, latency, and OCR readiness', async () => {
+  beforeEach(() => {
     mockedApi.get.mockImplementation((url: string) => {
       if (url === '/admin/system') {
         return Promise.resolve({
@@ -54,9 +66,45 @@ describe('AdminSystemPage', () => {
           },
         } as any);
       }
+      if (url === '/admin/system/email-settings') {
+        return Promise.resolve({
+          data: {
+            enabled: true,
+            host: 'smtp.example.test',
+            port: 587,
+            user: 'mailer@example.test',
+            from: 'noreply@example.test',
+            fromName: 'Jobbjakt',
+            enableSsl: true,
+            timeoutMs: 15000,
+            usesOverrides: false,
+            hasPassword: true,
+          },
+        } as any);
+      }
       return Promise.resolve({ data: {} } as any);
     });
+    mockedApi.put.mockResolvedValue({
+      data: {
+        enabled: true,
+        host: 'smtp.changed.test',
+        port: 2525,
+        user: 'mailer@example.test',
+        from: 'noreply@example.test',
+        fromName: 'Jobbjakt',
+        enableSsl: true,
+        timeoutMs: 15000,
+        usesOverrides: true,
+        hasPassword: true,
+      },
+    } as any);
+  });
 
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders AI service health, latency, and OCR readiness', async () => {
     render(
       <I18nProvider>
         <AdminSystemPage />
@@ -64,7 +112,7 @@ describe('AdminSystemPage', () => {
     );
 
     await waitFor(() => {
-      expect(screen.getByText('AI service')).toBeTruthy();
+      expect(screen.getByText('Production')).toBeTruthy();
     });
 
     expect(screen.getByText(/25.8 ms probe/i)).toBeTruthy();
@@ -72,4 +120,27 @@ describe('AdminSystemPage', () => {
     expect(screen.getByText('OCR avg latency')).toBeTruthy();
     expect(screen.getByText('88.4 ms')).toBeTruthy();
   });
+
+  it('loads and saves smtp settings from the settings tab', async () => {
+    render(
+      <I18nProvider>
+        <AdminSystemPage />
+      </I18nProvider>,
+    );
+
+    expect(await screen.findByText('AI service')).toBeTruthy();
+    fireEvent.click(screen.getByRole('tab', { name: /settings/i }));
+
+    const hostInput = await screen.findByLabelText(/host/i);
+    fireEvent.change(hostInput, { target: { value: 'smtp.changed.test' } });
+    fireEvent.change(screen.getByLabelText(/port/i), { target: { value: '2525' } });
+    fireEvent.click(screen.getByRole('button', { name: /save settings/i }));
+
+    await waitFor(() => {
+      expect(mockedApi.put).toHaveBeenCalledWith('/admin/system/email-settings', expect.objectContaining({
+        host: 'smtp.changed.test',
+        port: 2525,
+      }));
+    });
+  });
 });

job-tracker-ui/src/components/BackupCard.tsx

@@ -28,8 +28,8 @@ export default function BackupCard() {
       link.remove();
       window.setTimeout(() => URL.revokeObjectURL(url), 5000);
       toast(t("backupDownloaded"), "success");
-    } catch {
+    } catch (error: any) {
-      toast(t("backupFailed"), "error");
+      toast(getApiErrorMessage(error, t("backupFailed")), "error");
     } finally {
       setDownloading(false);
     }

job-tracker-ui/src/components/DashboardView.tsx

@@ -222,22 +222,33 @@ export default function DashboardView() {
     <Box>
       <SectionCard
         sx={{
-          background: theme.palette.mode === "dark"
+          backgroundColor: "background.paper",
-            ? `radial-gradient(circle at top left, ${alpha(theme.palette.primary.main, 0.26)}, transparent 35%), linear-gradient(135deg, rgba(15,23,42,0.94), rgba(15,23,42,0.78))`
+          borderColor: theme.palette.mode === "dark" ? alpha(theme.palette.primary.main, 0.22) : "divider",
-            : `radial-gradient(circle at top left, ${alpha(theme.palette.primary.main, 0.18)}, transparent 35%), linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96))`,
+          boxShadow: theme.palette.mode === "dark"
+            ? `0 20px 48px ${alpha(theme.palette.common.black, 0.34)}`
+            : "0 18px 50px rgba(15, 23, 42, 0.06)",
           overflow: "hidden",
           position: "relative",
+          '&::before': {
+            content: '""',
+            position: 'absolute',
+            inset: 0,
+            pointerEvents: 'none',
+            background: theme.palette.mode === 'dark'
+              ? `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.14)}, transparent 42%)`
+              : `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.08)}, transparent 42%)`,
+          },
         }}
       >
         <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, flexWrap: "wrap", alignItems: "flex-start" }}>
           <Box sx={{ maxWidth: 760 }}>
-            <Typography variant="overline" sx={{ color: theme.palette.mode === "dark" ? alpha(theme.palette.primary.light, 0.95) : "primary.main", fontWeight: 800 }}>
+            <Typography variant="overline" sx={{ color: theme.palette.primary.main, fontWeight: 800 }}>
               {t("dashboardHeroLabel")}
             </Typography>
-            <Typography variant="h4" sx={{ fontWeight: 950, mt: 0.5, letterSpacing: -0.6, color: theme.palette.mode === "dark" ? "common.white" : "text.primary" }}>
+            <Typography variant="h4" sx={{ fontWeight: 950, mt: 0.5, letterSpacing: -0.6, color: "text.primary" }}>
               {t("dashboardOverviewTitle")}
             </Typography>
-            <Typography variant="body1" sx={{ color: theme.palette.mode === "dark" ? alpha(theme.palette.common.white, 0.82) : "text.secondary", mt: 1.25, maxWidth: 680 }}>
+            <Typography variant="body1" sx={{ color: "text.secondary", mt: 1.25, maxWidth: 680 }}>
               {t("dashboardOverviewBody")}
             </Typography>
 

job-tracker-ui/src/components/GoogleAuthCard.tsx

@@ -137,8 +137,7 @@ export default function GoogleAuthCard({ onSignedIn }: { onSignedIn?: () => void
                 onSignedIn?.();
               }
             } catch (e: any) {
-              const msg = e?.response?.data || e?.message || t("googleAuthFailed");
+              toast(getApiErrorMessage(e, t("googleAuthFailed")), "error");
-              toast(String(msg), "error");
             } finally {
               setWorking(false);
             }
@@ -250,3 +249,10 @@ export default function GoogleAuthCard({ onSignedIn }: { onSignedIn?: () => void
     </Paper>
   );
 }
+raphy>
+          ) : null}
+        </Box>
+      )}
+    </Paper>
+  );
+}

job-tracker-ui/src/components/RulesSettingsCard.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 
 import { Alert, Box, Button, Paper, TextField, Typography } from "@mui/material";
 
-import { api } from "../api";
+import { api, getApiErrorMessage } from "../api";
 import { useToast } from "../toast";
 import { useI18n } from "../i18n/I18nProvider";
 
@@ -31,7 +31,7 @@ export default function RulesSettingsCard() {
       })
       .catch((e: any) => {
         setS(null);
-        setLoadError(String(e?.response?.data || e?.message || t("rulesLoadFailed")));
+        setLoadError(getApiErrorMessage(e, t("rulesLoadFailed")));
       });
   }, [t]);
 

job-tracker-ui/src/components/SettingsView.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 
 import {
   Box,
@@ -9,9 +9,11 @@ import {
   InputLabel,
   MenuItem,
   Paper,
+  Popover,
   Select,
   Tab,
   Tabs,
+  TextField,
   Typography,
 } from "@mui/material";
 
@@ -43,7 +45,39 @@ function TabPanel({ value, index, children }: { value: number; index: number; ch
   return <Box sx={{ mt: 2 }}>{children}</Box>;
 }
 
-const ACCENTS = ["#15803d", "#16a34a", "#22c55e", "#0f766e", "#2563eb", "#65a30d"];
+const ACCENTS = ["#15803d", "#16a34a", "#22c55e", "#0f766e", "#2563eb", "#65a30d", "#8b5cf6", "#f97316"];
+const NOTIFICATION_PREFS_KEY = "settings.notificationPrefs";
+
+type NotificationPrefs = {
+  emailFollowUpReminders: boolean;
+  emailGhostedJobAlerts: boolean;
+  inAppReminderHighlights: boolean;
+};
+
+function loadNotificationPrefs(): NotificationPrefs {
+  try {
+    const raw = window.localStorage.getItem(NOTIFICATION_PREFS_KEY);
+    if (!raw) {
+      return {
+        emailFollowUpReminders: true,
+        emailGhostedJobAlerts: true,
+        inAppReminderHighlights: true,
+      };
+    }
+    return {
+      emailFollowUpReminders: true,
+      emailGhostedJobAlerts: true,
+      inAppReminderHighlights: true,
+      ...JSON.parse(raw),
+    };
+  } catch {
+    return {
+      emailFollowUpReminders: true,
+      emailGhostedJobAlerts: true,
+      inAppReminderHighlights: true,
+    };
+  }
+}
 
 export default function SettingsView({
   pageSize,
@@ -59,8 +93,32 @@ export default function SettingsView({
   const navigate = useNavigate();
   const [tab, setTab] = useState(0);
   const { language, setLanguage, t } = useI18n();
+  const [accentAnchor, setAccentAnchor] = useState<HTMLElement | null>(null);
+  const [accentDraft, setAccentDraft] = useState(accentColor);
+  const [notificationPrefs, setNotificationPrefs] = useState<NotificationPrefs>(() => loadNotificationPrefs());
 
   const accentOk = useMemo(() => /^#[0-9a-fA-F]{6}$/.test(accentColor), [accentColor]);
+  const accentDraftOk = useMemo(() => /^#[0-9a-fA-F]{6}$/.test(accentDraft), [accentDraft]);
+
+  useEffect(() => {
+    setAccentDraft(accentOk ? accentColor : "#15803d");
+  }, [accentColor, accentOk]);
+
+  useEffect(() => {
+    window.localStorage.setItem(NOTIFICATION_PREFS_KEY, JSON.stringify(notificationPrefs));
+  }, [notificationPrefs]);
+
+  const applyAccent = () => {
+    if (!accentDraftOk) return;
+    onAccentColorChange(accentDraft);
+    setAccentAnchor(null);
+  };
+
+  const resetAccent = () => {
+    onResetAccentColor();
+    setAccentDraft("#15803d");
+    setAccentAnchor(null);
+  };
 
   return (
     <Paper sx={{ mt: 0, p: 2 }}>
@@ -99,40 +157,70 @@ export default function SettingsView({
             </FormControl>
 
             <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, flexWrap: "wrap" }}>
-              <FormControl sx={{ width: 160 }}>
+              <Box>
-                <Typography variant="caption" sx={{ mb: 0.75 }}>{t("settingsAccent")}</Typography>
+                <Typography variant="caption" sx={{ mb: 0.75, display: "block" }}>{t("settingsAccent")}</Typography>
-                <input
+                <Button
-                  aria-label={t("settingsAccent")}
+                  variant="outlined"
-                  type="color"
+                  onClick={(e) => setAccentAnchor(e.currentTarget)}
-                  value={accentOk ? accentColor : "#15803d"}
+                  sx={{ gap: 1.25, justifyContent: "flex-start", minWidth: 180 }}
-                  onChange={(e) => onAccentColorChange(e.target.value)}
+                >
-                  style={{ width: 160, height: 56, border: "none", background: "transparent", padding: 0 }}
+                  <Box sx={{ width: 20, height: 20, borderRadius: 999, bgcolor: accentOk ? accentColor : "#15803d", border: "1px solid", borderColor: "divider" }} />
-                />
+                  {accentOk ? accentColor.toUpperCase() : "#15803D"}
-              </FormControl>
+                </Button>
-              <Button variant="outlined" onClick={onResetAccentColor}>
+              </Box>
+              <Button variant="outlined" onClick={resetAccent}>
                 {t("settingsReset")}
               </Button>
             </Box>
 
-            <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 2 }}>
+            <Popover
+              open={Boolean(accentAnchor)}
+              anchorEl={accentAnchor}
+              onClose={() => setAccentAnchor(null)}
+              anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+            >
+              <Box sx={{ p: 2, width: 280, display: "grid", gap: 1.5 }}>
+                <Typography sx={{ fontWeight: 900 }}>{t("settingsAccent")}</Typography>
+                <input
+                  aria-label={t("settingsAccent")}
+                  type="color"
+                  value={accentDraftOk ? accentDraft : "#15803d"}
+                  onChange={(e) => setAccentDraft(e.target.value)}
+                  style={{ width: "100%", height: 52, border: "none", background: "transparent", padding: 0, cursor: "pointer" }}
+                />
+                <TextField
+                  label={t("settingsAccent")}
+                  value={accentDraft}
+                  onChange={(e) => setAccentDraft(e.target.value)}
+                  error={!accentDraftOk}
+                  helperText={accentDraftOk ? t("settingsAccentHelp") : t("settingsAccentInvalid")}
+                  fullWidth
+                />
+                <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
                   {ACCENTS.map((c) => (
                     <button
                       key={c}
                       type="button"
-                  onClick={() => onAccentColorChange(c)}
+                      onClick={() => setAccentDraft(c)}
                       title={c}
                       aria-label={`${t("settingsAccent")} ${c}`}
                       style={{
                         width: 28,
                         height: 28,
                         borderRadius: 999,
-                    border: c.toLowerCase() === accentColor.toLowerCase() ? "2px solid rgba(255,255,255,0.85)" : "1px solid rgba(148,163,184,0.35)",
+                        border: c.toLowerCase() === accentDraft.toLowerCase() ? "2px solid rgba(15,23,42,0.9)" : "1px solid rgba(148,163,184,0.35)",
                         background: c,
                         cursor: "pointer",
                       }}
                     />
                   ))}
                 </Box>
+                <Box sx={{ display: "flex", justifyContent: "flex-end", gap: 1 }}>
+                  <Button variant="text" onClick={() => setAccentAnchor(null)}>{t("cancel")}</Button>
+                  <Button variant="contained" onClick={applyAccent} disabled={!accentDraftOk}>{t("save")}</Button>
+                </Box>
+              </Box>
+            </Popover>
 
             <Typography variant="caption" sx={{ color: "text.secondary", display: "block", mt: 1 }}>
               {t("settingsSavedPerUser")}
@@ -213,36 +301,35 @@ export default function SettingsView({
       </TabPanel>
 
       <TabPanel value={tab} index={1}>
-        <Box sx={{ display: "grid", gap: 2 }}>
-          <Paper sx={{ p: 2 }}>
-            <Typography sx={{ fontWeight: 950, mb: 0.5 }}>{t("settingsFollowUpsTitle")}</Typography>
-            <Typography sx={{ color: "text.secondary", mb: 1.5 }}>{t("settingsFollowUpsBody")}</Typography>
-            <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
-              <Button variant="outlined" onClick={() => navigate("/reminders")}>{t("settingsOpenReminderInbox")}</Button>
-              <Button variant="text" onClick={() => navigate("/jobs")}>{t("settingsReviewJobs")}</Button>
-            </Box>
-          </Paper>
         <RulesSettingsCard />
-        </Box>
       </TabPanel>
 
       <TabPanel value={tab} index={2}>
-        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2 }}>
         <Paper sx={{ p: 2 }}>
           <Typography sx={{ fontWeight: 950, mb: 0.5 }}>{t("settingsNotificationsTitle")}</Typography>
-            <Typography sx={{ color: "text.secondary", mb: 1.5 }}>{t("settingsNotificationsBody")}</Typography>
+          <Typography sx={{ color: "text.secondary", mb: 2 }}>{t("settingsNotificationsBody")}</Typography>
-            <Typography variant="body2" sx={{ color: "text.secondary" }}>{t("settingsNotificationsDelivery")}</Typography>
+          <Box sx={{ display: "grid", gap: 1 }}>
-          </Paper>
+            <FormControlLabel
-
+              control={<Checkbox checked={notificationPrefs.emailFollowUpReminders} onChange={(e) => setNotificationPrefs((prev) => ({ ...prev, emailFollowUpReminders: e.target.checked }))} />}
-          <Paper sx={{ p: 2 }}>
+              label={t("settingsNotificationsFollowUpReminders")}
-            <Typography sx={{ fontWeight: 950, mb: 0.5 }}>{t("settingsNotificationsWhatYouGetTitle")}</Typography>
+            />
-            <Typography sx={{ color: "text.secondary", mb: 1.5 }}>{t("settingsNotificationsWhatYouGetBody")}</Typography>
+            <FormControlLabel
-            <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
+              control={<Checkbox checked={notificationPrefs.emailGhostedJobAlerts} onChange={(e) => setNotificationPrefs((prev) => ({ ...prev, emailGhostedJobAlerts: e.target.checked }))} />}
+              label={t("settingsNotificationsGhostedJobs")}
+            />
+            <FormControlLabel
+              control={<Checkbox checked={notificationPrefs.inAppReminderHighlights} onChange={(e) => setNotificationPrefs((prev) => ({ ...prev, inAppReminderHighlights: e.target.checked }))} />}
+              label={t("settingsNotificationsInAppReminders")}
+            />
+          </Box>
+          <Typography variant="caption" sx={{ color: "text.secondary", display: "block", mt: 1.5 }}>
+            {t("settingsNotificationsDelivery")}
+          </Typography>
+          <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 1.5 }}>
             <Button variant="outlined" onClick={() => navigate("/reminders")}>{t("settingsOpenReminderInbox")}</Button>
             <Button variant="text" onClick={() => navigate("/admin/system")}>{t("settingsCheckSystemStatus")}</Button>
           </Box>
         </Paper>
-        </Box>
       </TabPanel>
 
       <TabPanel value={tab} index={3}>

job-tracker-ui/src/i18n/translations.ts

@@ -145,15 +145,18 @@ export const translations = {
     settingsColumnDateApplied: "Date applied",
     settingsColumnDays: "Days",
     settingsColumnJobUrl: "Job URL",
-    settingsFollowUpsTitle: "Follow-up rules",
+    settingsFollowUpsTitle: "Follow-up rules by scenario",
-    settingsFollowUpsBody: "Set when applied, offer, and feedback stages should surface follow-up work or be treated as ghosted. These rules drive the reminder inbox and the job table flags.",
+    settingsFollowUpsBody: "Set when applied, offer, and feedback scenarios should surface follow-up work or be treated as ghosted.",
     settingsOpenReminderInbox: "Open reminders",
     settingsReviewJobs: "Review jobs",
-    settingsNotificationsTitle: "Email notifications",
+    settingsNotificationsTitle: "Notification settings",
-    settingsNotificationsBody: "Notifications are sent via SMTP. Configure the API with `Email:*` settings or env vars like `EMAIL_SMTP_HOST`, then Jobbjakt can deliver password reset and reminder emails.",
+    settingsNotificationsBody: "Choose which reminders should show up in your workflow. SMTP delivery can be checked from the system page.",
-    settingsNotificationsDelivery: "Use the system status page to confirm SMTP is configured before testing outbound email.",
+    settingsNotificationsDelivery: "SMTP delivery and test mail live under Admin → System → Settings.",
-    settingsNotificationsWhatYouGetTitle: "What gets sent",
+    settingsNotificationsFollowUpReminders: "Email reminders for follow-ups",
-    settingsNotificationsWhatYouGetBody: "Right now the app sends password reset mail and can surface reminder-driven follow-up workflows. Gmail OAuth stays separate from SMTP delivery.",
+    settingsNotificationsGhostedJobs: "Email alerts for ghosted jobs",
+    settingsNotificationsInAppReminders: "Highlight reminders in the app",
+    settingsAccentHelp: "Drag in the color picker, then save when it looks right.",
+    settingsAccentInvalid: "Use a full hex color like #15803D.",
     settingsCheckSystemStatus: "Check system status",
     profileTitle: "Profile",
     profileHeadlinePlaceholder: "Add a short headline to personalize your account view.",
@@ -527,6 +530,8 @@ export const translations = {
     adminAuditActions: "Actions",
     adminAuditNoEvents: "No events.",
     adminSystemEnvironment: "Environment",
+    adminSystemStatusTab: "Status",
+    adminSystemSettingsTab: "Settings",
     adminSystemDatabase: "Database",
     adminSystemConnected: "Connected",
     adminSystemOffline: "Offline",
@@ -539,6 +544,16 @@ export const translations = {
     adminSystemDatabaseStorage: "Database and storage",
     adminSystemRuntimeAuth: "Runtime and auth",
     adminSystemEmailConfig: "Email configuration",
+    adminSystemEmailSettingsTitle: "SMTP settings",
+    adminSystemEmailSettingsBody: "Update the effective SMTP settings used for password resets, reminders, and admin test email delivery.",
+    adminSystemUsername: "SMTP username",
+    adminSystemPassword: "SMTP password",
+    adminSystemPasswordStored: "A password is already stored. Leave this blank to keep it.",
+    adminSystemPasswordMissing: "No SMTP password stored yet.",
+    adminSystemTimeoutMs: "Timeout (ms)",
+    adminSystemClearStoredPassword: "Clear stored password",
+    adminSystemSaveSettings: "Save settings",
+    adminSystemSaving: "Saving...",
     adminSystemSummarizerRuntime: "AI runtime",
     adminSystemSmtpTest: "SMTP test email",
     adminSystemSmtpTestBody: "Send a quick delivery check using the configured SMTP settings. Leave the recipient blank to use your admin email.",
@@ -585,7 +600,7 @@ export const translations = {
     signedInAs: "Signed in as {name}.",
     unlinkGoogle: "Unlink Google",
     backupTitle: "Data safety",
-    backupBody: "One-click encrypted backup (Windows DPAPI).",
+    backupBody: "One-click encrypted backup of your current data.",
     backupPreparing: "Preparing...",
     backupDownload: "Download encrypted backup",
     backupDownloaded: "Backup downloaded.",
@@ -863,7 +878,7 @@ export const translations = {
     jobDetailsNoReadiness: "No readiness analysis available yet.",
     jobDetailsNoHistory: "No history yet.",
     jobDetailsNothingHighlighted: "Nothing highlighted yet.",
-    rulesTitle: "Follow-up + Ghosting Rules",
+    rulesTitle: "Follow-up rules by scenario",
     rulesBody: "Set how long to wait before a follow-up is due and when a thread should be treated as ghosted.",
     rulesLoading: "Loading your follow-up settings…",
     rulesLoadFailed: "Could not load your follow-up settings.",
@@ -1420,7 +1435,7 @@ export const translations = {
     signedInAs: "Logget inn som {name}.",
     unlinkGoogle: "Koble fra Google",
     backupTitle: "Datasikkerhet",
-    backupBody: "Kryptert sikkerhetskopi med ett klikk (Windows DPAPI).",
+    backupBody: "Kryptert sikkerhetskopi av gjeldende data med ett klikk.",
     backupPreparing: "Forbereder...",
     backupDownload: "Last ned kryptert sikkerhetskopi",
     backupDownloaded: "Sikkerhetskopi lastet ned.",
@@ -1698,7 +1713,7 @@ export const translations = {
     jobDetailsNoReadiness: "Ingen beredskapsanalyse tilgjengelig ennå.",
     jobDetailsNoHistory: "Ingen historikk ennå.",
     jobDetailsNothingHighlighted: "Ingenting fremhevet ennå.",
-    rulesTitle: "Regler for oppfølging og ghosting",
+    rulesTitle: "Oppfølgingsregler per scenario",
     rulesBody: "Velg hvor lenge du vil vente før oppfølging forfaller, og når en tråd skal regnes som ghostet.",
     rulesLoading: "Laster inn oppfølgingsinnstillingene dine…",
     rulesLoadFailed: "Kunne ikke laste oppfølgingsinnstillingene dine.",

job-tracker-ui/src/pages/AdminSystemPage.tsx

@@ -7,8 +7,12 @@ import {
   Chip,
   Paper,
   Stack,
+  Tab,
+  Tabs,
   TextField,
   Typography,
+  Checkbox,
+  FormControlLabel,
 } from "@mui/material";
 
 import { api, getApiErrorMessage } from "../api";
@@ -43,6 +47,19 @@ type AiServiceMetrics = {
   lastError?: string | null;
 };
 
+type EditableEmailSettings = {
+  enabled: boolean;
+  host: string;
+  port: number;
+  user: string;
+  from: string;
+  fromName: string;
+  enableSsl: boolean;
+  timeoutMs: number;
+  usesOverrides: boolean;
+  hasPassword: boolean;
+};
+
 type SystemStatus = {
   environment: string;
   contentRoot: string;
@@ -121,9 +138,14 @@ function DetailRow({ label, value }: { label: string; value: React.ReactNode })
 
 export default function AdminSystemPage() {
   const { t } = useI18n();
+  const [tab, setTab] = useState(0);
   const [status, setStatus] = useState<SystemStatus | null>(null);
+  const [emailSettings, setEmailSettings] = useState<EditableEmailSettings | 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 [testEmailTo, setTestEmailTo] = useState("");
   const [testEmailSubject, setTestEmailSubject] = useState("Jobbjakt SMTP test");
@@ -134,11 +156,18 @@ export default function AdminSystemPage() {
     setLoading(true);
     setError(null);
     try {
-      const res = await api.get<SystemStatus>("/admin/system");
+      const [statusRes, emailRes] = await Promise.all([
-      setStatus(res.data);
+        api.get<SystemStatus>("/admin/system"),
+        api.get<EditableEmailSettings>("/admin/system/email-settings"),
+      ]);
+      setStatus(statusRes.data);
+      setEmailSettings(emailRes.data);
+      setSmtpPassword("");
+      setClearPassword(false);
     } catch (e: any) {
       setError(getApiErrorMessage(e, "Failed to load system status."));
       setStatus(null);
+      setEmailSettings(null);
     } finally {
       setLoading(false);
     }
@@ -170,6 +199,7 @@ export default function AdminSystemPage() {
         subject: testEmailSubject.trim() || null,
         message: testEmailMessage.trim() || null,
       });
+      setError(null);
     } catch (e: any) {
       setError(getApiErrorMessage(e, "Failed to send test email."));
     } finally {
@@ -177,6 +207,33 @@ export default function AdminSystemPage() {
     }
   };
 
+  const saveEmailSettings = async () => {
+    if (!emailSettings) return;
+    setSavingSettings(true);
+    try {
+      const res = await api.put<EditableEmailSettings>("/admin/system/email-settings", {
+        enabled: emailSettings.enabled,
+        host: emailSettings.host,
+        port: Number(emailSettings.port) || 587,
+        user: emailSettings.user,
+        password: smtpPassword.trim() || null,
+        clearPassword,
+        from: emailSettings.from,
+        fromName: emailSettings.fromName,
+        enableSsl: emailSettings.enableSsl,
+        timeoutMs: Number(emailSettings.timeoutMs) || 15000,
+      });
+      setEmailSettings(res.data);
+      setSmtpPassword("");
+      setClearPassword(false);
+      await load();
+    } catch (e: any) {
+      setError(getApiErrorMessage(e, "Failed to save email settings."));
+    } finally {
+      setSavingSettings(false);
+    }
+  };
+
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
       <Box sx={{ display: "flex", justifyContent: "space-between", gap: 2, alignItems: "center", flexWrap: "wrap" }}>
@@ -209,10 +266,17 @@ export default function AdminSystemPage() {
         </Box>
       </Box>
 
-      {error ? <Alert severity="error">{error}</Alert> : null}
+      <Tabs value={tab} onChange={(_, value) => setTab(value)}>
-      {status?.database.warning ? <Alert severity={status.database.canConnect ? "warning" : "error"}>{status.database.warning}</Alert> : null}
+        <Tab label={t("adminSystemStatusTab")} />
-      {status?.ai.lastError ? <Alert severity={status.ai.healthy ? "warning" : "error"}>{status.ai.lastError}</Alert> : null}
+        <Tab label={t("adminSystemSettingsTab")} />
+      </Tabs>
 
+      {error ? <Alert severity="error">{error}</Alert> : null}
+      {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 sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "repeat(4, 1fr)" }, gap: 2 }}>
             <SummaryCard
               title={t("adminSystemEnvironment")}
@@ -308,23 +372,6 @@ export default function AdminSystemPage() {
             </Paper>
           </Box>
 
-      <Paper sx={{ p: 2, borderRadius: 3 }}>
-        <Typography variant="h6" sx={{ fontWeight: 900, mb: 1 }}>{t("adminSystemSmtpTest")}</Typography>
-        <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>
-          {t("adminSystemSmtpTestBody")}
-        </Typography>
-        <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 1.5 }}>
-          <TextField label={t("adminSystemRecipientEmail")} value={testEmailTo} onChange={(e) => setTestEmailTo(e.target.value)} placeholder={t("adminSystemRecipientPlaceholder")} />
-          <TextField label={t("adminSystemSubject")} value={testEmailSubject} onChange={(e) => setTestEmailSubject(e.target.value)} />
-          <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>
-        </Box>
-      </Paper>
-
           <Paper sx={{ p: 2, borderRadius: 3 }}>
             <Typography variant="h6" sx={{ fontWeight: 900, mb: 1 }}>{t("adminSystemSummarizerTelemetry")}</Typography>
             <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr 1fr", md: "repeat(8, 1fr)" }, gap: 2 }}>
@@ -346,6 +393,53 @@ export default function AdminSystemPage() {
               <Chip label={status?.ai.ocrAvailable ? `OCR ${status.ai.ocrLanguages || "enabled"}` : t("adminSystemOcrUnavailable")} variant="outlined" size="small" />
             </Box>
           </Paper>
+        </>
+      ) : (
+        <Box sx={{ display: "grid", gap: 2 }}>
+          <Paper sx={{ p: 2, borderRadius: 3 }}>
+            <Typography variant="h6" sx={{ fontWeight: 900, mb: 1 }}>{t("adminSystemEmailSettingsTitle")}</Typography>
+            <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)} />}
+                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" } }} />
+            </Box>
+            <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>
+            </Box>
+          </Paper>
+
+          <Paper sx={{ p: 2, borderRadius: 3 }}>
+            <Typography variant="h6" sx={{ fontWeight: 900, mb: 1 }}>{t("adminSystemSmtpTest")}</Typography>
+            <Typography variant="body2" sx={{ color: "text.secondary", mb: 1.5 }}>
+              {t("adminSystemSmtpTestBody")}
+            </Typography>
+            <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 1.5 }}>
+              <TextField label={t("adminSystemRecipientEmail")} value={testEmailTo} onChange={(e) => setTestEmailTo(e.target.value)} placeholder={t("adminSystemRecipientPlaceholder")} />
+              <TextField label={t("adminSystemSubject")} value={testEmailSubject} onChange={(e) => setTestEmailSubject(e.target.value)} />
+              <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>
+            </Box>
+          </Paper>
+        </Box>
+      )}
     </Box>
   );
 }

job-tracker-ui/src/pages/AdminUsersPage.tsx

@@ -79,8 +79,7 @@ export default function AdminUsersPage() {
       await api.post(`/users/${u.id}/send-password-reset`);
       toast(t("adminUsersResetSent"), "success");
     } catch (e: any) {
-      const msg = e?.response?.data || e?.message || t("adminUsersResetFailed");
+      toast(getApiErrorMessage(e, t("adminUsersResetFailed")), "error");
-      toast(String(msg), "error");
     }
   }, [t, toast]);
 
@@ -216,3 +215,9 @@ export default function AdminUsersPage() {
     </Paper>
   );
 }
+pography>
+        ) : null}
+      </Paper>
+    </Paper>
+  );
+}

job-tracker-ui/src/settings-view.test.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+
+import SettingsView from './components/SettingsView';
+import { I18nProvider } from './i18n/I18nProvider';
+import { ToastProvider } from './toast';
+import { api } from './api';
+
+jest.mock('./api', () => ({
+  api: {
+    get: jest.fn(),
+    post: jest.fn(),
+    put: jest.fn(),
+    patch: jest.fn(),
+    delete: jest.fn(),
+    interceptors: { request: { use: jest.fn() }, response: { use: jest.fn() } },
+  },
+  getApiErrorMessage: (error: any, fallback?: string) => fallback || 'Request failed.',
+}));
+
+jest.mock('./components/ImportExportJobs', () => () => <div>Import Export Stub</div>);
+jest.mock('./components/GoogleAuthCard', () => () => <div>Google Auth Stub</div>);
+jest.mock('./components/BackupCard', () => () => <div>Backup Stub</div>);
+jest.mock('./components/AuthStatusCard', () => () => <div>Auth Status Stub</div>);
+
+const mockedApi = api as jest.Mocked<typeof api>;
+
+function renderView(onAccentColorChange = jest.fn()) {
+  return {
+    onAccentColorChange,
+    ...render(
+      <MemoryRouter>
+        <ToastProvider>
+          <I18nProvider>
+            <SettingsView
+              pageSize={20}
+              onPageSizeChange={jest.fn()}
+              columns={{ status: true, dateApplied: true, daysSince: true, jobUrl: false }}
+              onColumnsChange={jest.fn()}
+              themeMode="dark"
+              onThemeModeChange={jest.fn()}
+              accentColor="#15803d"
+              onAccentColorChange={onAccentColorChange}
+              onResetAccentColor={jest.fn()}
+            />
+          </I18nProvider>
+        </ToastProvider>
+      </MemoryRouter>,
+    ),
+  };
+}
+
+beforeEach(() => {
+  mockedApi.get.mockImplementation((url: string) => {
+    if (url === '/rules') {
+      return Promise.resolve({
+        data: {
+          id: 1,
+          appliedFollowUpDays: 14,
+          appliedGhostDays: 30,
+          offerFollowUpDays: 7,
+          offerGhostDays: 14,
+          feedbackFollowUpDays: 7,
+          feedbackGhostDays: 14,
+        },
+      } as any);
+    }
+    return Promise.resolve({ data: {} } as any);
+  });
+  window.localStorage.clear();
+});
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+test('settings view uses one follow-up section, one notification section, and staged accent apply', async () => {
+  const { onAccentColorChange } = renderView();
+
+  fireEvent.click(screen.getByRole('button', { name: /#15803D/i }));
+  const accentInput = (await screen.findAllByLabelText('Accent'))[1] as HTMLInputElement;
+  fireEvent.change(accentInput, { target: { value: '#2563eb' } });
+  expect(onAccentColorChange).not.toHaveBeenCalled();
+  fireEvent.click(screen.getByRole('button', { name: /^save$/i }));
+  expect(onAccentColorChange).toHaveBeenCalledWith('#2563eb');
+
+  fireEvent.click(screen.getByRole('tab', { name: /follow-ups/i }));
+  expect(await screen.findByText(/follow-up rules by scenario/i)).toBeInTheDocument();
+  expect(screen.queryAllByText(/open reminders/i)).toHaveLength(0);
+
+  fireEvent.click(screen.getByRole('tab', { name: /notifications/i }));
+  expect(screen.getByText(/notification settings/i)).toBeInTheDocument();
+  expect(screen.getAllByText(/check system status/i).length).toBe(1);
+  expect(screen.getByLabelText(/email reminders for follow-ups/i)).toBeInTheDocument();
+  expect(screen.getByLabelText(/email alerts for ghosted jobs/i)).toBeInTheDocument();
+});