cesnimda/jobtrackingapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish settings and admin system pages

Browse Source
This commit is contained in:
cesnimda
2026-03-28 15:30:21 +01:00
parent 4103f84f85
commit 0694cba722
10 changed files with 604 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
job-tracker-ui/src/components/BackupCard.tsx
+2 -2
View File
@@ -28,8 +28,8 @@ export default function BackupCard() {
link.remove();
window.setTimeout(() => URL.revokeObjectURL(url), 5000);
toast(t("backupDownloaded"), "success");
} catch {
toast(t("backupFailed"), "error");
} catch (error: any) {
toast(getApiErrorMessage(error, t("backupFailed")), "error");
} finally {
setDownloading(false);
}
job-tracker-ui/src/components/DashboardView.tsx
+17 -6
View File
@@ -222,22 +222,33 @@ export default function DashboardView() {
<Box>
<SectionCard
sx={{
background: theme.palette.mode === "dark"
? `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))`
: `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))`,
backgroundColor: "background.paper",
borderColor: theme.palette.mode === "dark" ? alpha(theme.palette.primary.main, 0.22) : "divider",
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
+8 -2
View File
@@ -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(String(msg), "error");
toast(getApiErrorMessage(e, t("googleAuthFailed")), "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 -2
View File
@@ -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
+145 -58
View File
@@ -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 }}>
<Typography variant="caption" sx={{ mb: 0.75 }}>{t("settingsAccent")}</Typography>
<input
aria-label={t("settingsAccent")}
type="color"
value={accentOk ? accentColor : "#15803d"}
onChange={(e) => onAccentColorChange(e.target.value)}
style={{ width: 160, height: 56, border: "none", background: "transparent", padding: 0 }}
/>
</FormControl>
<Button variant="outlined" onClick={onResetAccentColor}>
<Box>
<Typography variant="caption" sx={{ mb: 0.75, display: "block" }}>{t("settingsAccent")}</Typography>
<Button
variant="outlined"
onClick={(e) => setAccentAnchor(e.currentTarget)}
sx={{ gap: 1.25, justifyContent: "flex-start", minWidth: 180 }}
>
<Box sx={{ width: 20, height: 20, borderRadius: 999, bgcolor: accentOk ? accentColor : "#15803d", border: "1px solid", borderColor: "divider" }} />
{accentOk ? accentColor.toUpperCase() : "#15803D"}
</Button>
</Box>
<Button variant="outlined" onClick={resetAccent}>
{t("settingsReset")}
</Button>
</Box>
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 2 }}>
{ACCENTS.map((c) => (
<button
key={c}
type="button"
onClick={() => onAccentColorChange(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)",
background: c,
cursor: "pointer",
}}
<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" }}
/>
))}
</Box>
<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={() => setAccentDraft(c)}
title={c}
aria-label={`${t("settingsAccent")} ${c}`}
style={{
width: 28,
height: 28,
borderRadius: 999,
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>
<RulesSettingsCard />
</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 variant="body2" sx={{ color: "text.secondary" }}>{t("settingsNotificationsDelivery")}</Typography>
</Paper>
<Paper sx={{ p: 2 }}>
<Typography sx={{ fontWeight: 950, mb: 0.5 }}>{t("settingsNotificationsWhatYouGetTitle")}</Typography>
<Typography sx={{ color: "text.secondary", mb: 1.5 }}>{t("settingsNotificationsWhatYouGetBody")}</Typography>
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
<Button variant="outlined" onClick={() => navigate("/reminders")}>{t("settingsOpenReminderInbox")}</Button>
<Button variant="text" onClick={() => navigate("/admin/system")}>{t("settingsCheckSystemStatus")}</Button>
</Box>
</Paper>
</Box>
<Paper sx={{ p: 2 }}>
<Typography sx={{ fontWeight: 950, mb: 0.5 }}>{t("settingsNotificationsTitle")}</Typography>
<Typography sx={{ color: "text.secondary", mb: 2 }}>{t("settingsNotificationsBody")}</Typography>
<Box sx={{ display: "grid", gap: 1 }}>
<FormControlLabel
control={<Checkbox checked={notificationPrefs.emailFollowUpReminders} onChange={(e) => setNotificationPrefs((prev) => ({ ...prev, emailFollowUpReminders: e.target.checked }))} />}
label={t("settingsNotificationsFollowUpReminders")}
/>
<FormControlLabel
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>
</TabPanel>
<TabPanel value={tab} index={3}>