Polish settings and admin system pages
This commit is contained in:
@@ -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}>
|
||||
|
||||
Reference in New Issue
Block a user