302 lines
16 KiB
TypeScript
302 lines
16 KiB
TypeScript
import React, { Suspense, lazy, useEffect, useMemo, useState } from "react";
|
|
|
|
import { Box, Button, CssBaseline, IconButton, Typography } from "@mui/material";
|
|
import useMediaQuery from "@mui/material/useMediaQuery";
|
|
import { CssVarsProvider } from "@mui/material/styles";
|
|
|
|
import DashboardIcon from "@mui/icons-material/Dashboard";
|
|
import WorkOutlineIcon from "@mui/icons-material/WorkOutline";
|
|
import ViewKanbanIcon from "@mui/icons-material/ViewKanban";
|
|
import BusinessIcon from "@mui/icons-material/Business";
|
|
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
|
|
import SettingsIcon from "@mui/icons-material/Settings";
|
|
import AlarmIcon from "@mui/icons-material/Alarm";
|
|
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
|
|
import ShieldIcon from "@mui/icons-material/Shield";
|
|
import SearchIcon from "@mui/icons-material/Search";
|
|
import MemoryIcon from "@mui/icons-material/Memory";
|
|
|
|
import { Navigate, Route, Routes, useLocation, useNavigate, createBrowserRouter, RouterProvider } from "react-router-dom";
|
|
|
|
import { getTheme } from "./theme";
|
|
import { ToastProvider } from "./toast";
|
|
import { ConfirmProvider } from "./confirm";
|
|
import { PromptProvider } from "./prompt";
|
|
|
|
import JobTable from "./components/JobTable";
|
|
import type { JobTableColumns } from "./components/JobTable";
|
|
import { I18nProvider, useI18n } from "./i18n/I18nProvider";
|
|
import LoginPage from "./pages/LoginPage";
|
|
import ForgotPasswordPage from "./pages/ForgotPasswordPage";
|
|
import ResetPasswordPage from "./pages/ResetPasswordPage";
|
|
import RouteErrorPage from "./pages/RouteErrorPage";
|
|
import { api } from "./api";
|
|
import { clearAuthToken, getAuthToken } from "./auth";
|
|
import AppShell, { NavItem } from "./layout/AppShell";
|
|
import { clearAccentColor, getAccentColor, getThemeModePref, setAccentColor, setThemeModePref, ThemeModePref } from "./themePrefs";
|
|
|
|
const AddJobModal = lazy(() => import("./components/AddJobModal"));
|
|
const KanbanBoard = lazy(() => import("./components/KanbanBoard"));
|
|
const DashboardView = lazy(() => import("./components/DashboardView"));
|
|
const CompaniesTable = lazy(() => import("./components/CompaniesTable"));
|
|
const SettingsView = lazy(() => import("./components/SettingsView"));
|
|
const RemindersView = lazy(() => import("./components/RemindersView"));
|
|
const QuickCommandDialog = lazy(() => import("./components/QuickCommandDialog"));
|
|
const ProfilePage = lazy(() => import("./pages/ProfilePage"));
|
|
const AdminAuditPage = lazy(() => import("./pages/AdminAuditPage"));
|
|
const AdminUsersPage = lazy(() => import("./pages/AdminUsersPage"));
|
|
const AdminSystemPage = lazy(() => import("./pages/AdminSystemPage"));
|
|
const NotFoundPage = lazy(() => import("./pages/NotFoundPage"));
|
|
|
|
type AuthConfig = { requireAuth: boolean };
|
|
type MeResponse = {
|
|
provider?: "local" | "google" | "external";
|
|
id?: string;
|
|
email?: string;
|
|
userName?: string;
|
|
firstName?: string;
|
|
lastName?: string;
|
|
displayName?: string;
|
|
avatarImageDataUrl?: string;
|
|
roles?: string[];
|
|
};
|
|
|
|
function breadcrumbsFor(path: string, t: (k: any) => string): string[] {
|
|
if (path.startsWith("/dashboard")) return [t("home"), t("analytics"), t("overview")];
|
|
if (path.startsWith("/jobs")) return [t("home"), t("jobApplications")];
|
|
if (path.startsWith("/reminders")) return [t("home"), t("reminders")];
|
|
if (path.startsWith("/kanban")) return [t("home"), t("kanbanBoard")];
|
|
if (path.startsWith("/companies")) return [t("home"), t("companies")];
|
|
if (path.startsWith("/trash")) return [t("home"), t("trash")];
|
|
if (path.startsWith("/settings")) return [t("home"), t("settings")];
|
|
if (path.startsWith("/profile")) return [t("home"), t("account"), t("profile")];
|
|
if (path.startsWith("/admin/audit")) return [t("home"), t("admin"), t("auditLog")];
|
|
if (path.startsWith("/admin/users")) return [t("home"), t("admin"), t("users")];
|
|
if (path.startsWith("/admin/system")) return [t("home"), t("admin"), t("system")];
|
|
return [t("home")];
|
|
}
|
|
|
|
function titleFor(path: string, t: (k: any) => string): string {
|
|
if (path === "/dashboard") return t("dashboard");
|
|
if (path.startsWith("/reminders")) return t("reminders");
|
|
if (path.startsWith("/jobs")) return t("jobApplications");
|
|
if (path.startsWith("/kanban")) return t("kanbanBoard");
|
|
if (path.startsWith("/companies")) return t("companies");
|
|
if (path.startsWith("/trash")) return t("trash");
|
|
if (path.startsWith("/settings")) return t("settings");
|
|
if (path.startsWith("/profile")) return t("profile");
|
|
if (path.startsWith("/admin/audit")) return t("auditLog");
|
|
if (path.startsWith("/admin/users")) return t("users");
|
|
if (path.startsWith("/admin/system")) return t("systemStatus");
|
|
return t("appTitle");
|
|
}
|
|
|
|
function PageLoader() {
|
|
return <Box sx={{ p: 4 }}><Typography variant="h6">Loading...</Typography></Box>;
|
|
}
|
|
|
|
function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMode, onThemeModeChange, accentColor, onAccentColorChange, onResetAccentColor }: { jobPageSize: 15 | 20 | 25; setJobPageSize: (n: 15 | 20 | 25) => void; jobColumns: JobTableColumns; setJobColumns: (c: JobTableColumns) => void; themeMode: ThemeModePref; onThemeModeChange: (v: ThemeModePref) => void; accentColor: string; onAccentColorChange: (v: string) => void; onResetAccentColor: () => void; }) {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const { t } = useI18n();
|
|
const compactHeaderActions = useMediaQuery("(max-width:767.95px)");
|
|
|
|
const [addOpen, setAddOpen] = useState(false);
|
|
const [quickOpen, setQuickOpen] = useState(false);
|
|
const [refreshToken, setRefreshToken] = useState(0);
|
|
const [requireAuth, setRequireAuth] = useState<boolean | null>(null);
|
|
const [isAdmin, setIsAdmin] = useState(false);
|
|
const [me, setMe] = useState<MeResponse | null>(null);
|
|
const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false);
|
|
const [notifCount, setNotifCount] = useState(0);
|
|
|
|
const path = location.pathname;
|
|
const isJobs = path.startsWith("/jobs");
|
|
|
|
useEffect(() => {
|
|
api.get<AuthConfig>("/auth/config").then((r) => setRequireAuth(Boolean(r.data?.requireAuth))).catch(() => setRequireAuth(false));
|
|
}, []);
|
|
useEffect(() => {
|
|
api.get<MeResponse>("/auth/me").then((r) => { setMe(r.data); setIsAdmin(Boolean(r.data?.roles?.includes("Admin"))); }).catch(() => { setMe(null); setIsAdmin(false); });
|
|
}, []);
|
|
useEffect(() => {
|
|
const load = () => {
|
|
api.get<any[]>("/jobapplications/reminders", { params: { upcomingDays: 14 } }).then((r) => setNotifCount(Array.isArray(r.data) ? r.data.length : 0)).catch(() => setNotifCount(0));
|
|
};
|
|
load();
|
|
const id = window.setInterval(load, 60000);
|
|
return () => window.clearInterval(id);
|
|
}, []);
|
|
useEffect(() => {
|
|
const onKeyDown = (e: KeyboardEvent) => {
|
|
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
|
|
e.preventDefault();
|
|
setQuickOpen(true);
|
|
}
|
|
};
|
|
window.addEventListener("keydown", onKeyDown);
|
|
return () => window.removeEventListener("keydown", onKeyDown);
|
|
}, []);
|
|
|
|
const token = getAuthToken();
|
|
if (requireAuth === null) return <Box sx={{ p: 4 }}><Typography variant="h6">Loading...</Typography></Box>;
|
|
if (requireAuth && !token) return <Navigate to="/login" replace state={{ from: path }} />;
|
|
|
|
const pageTitle = titleFor(path, t);
|
|
const breadcrumbs = breadcrumbsFor(path, t);
|
|
const setAndPersistPageSize = (n: 15 | 20 | 25) => { setJobPageSize(n); window.localStorage.setItem("jobPageSize", String(n)); };
|
|
const setAndPersistColumns = (next: JobTableColumns) => { setJobColumns(next); window.localStorage.setItem("jobColumns", JSON.stringify(next)); };
|
|
const fullName = [me?.firstName, me?.lastName].filter(Boolean).join(" ");
|
|
|
|
const nav: NavItem[] = [
|
|
{ to: "/dashboard", label: t("dashboard"), icon: <DashboardIcon fontSize="small" />, section: t("manage") },
|
|
{ to: "/jobs", label: t("jobApplications"), icon: <WorkOutlineIcon fontSize="small" />, section: t("manage") },
|
|
{ to: "/reminders", label: t("reminders"), icon: <AlarmIcon fontSize="small" />, badgeCount: notifCount, section: t("manage") },
|
|
{ to: "/kanban", label: t("kanbanBoard"), icon: <ViewKanbanIcon fontSize="small" />, section: t("manage") },
|
|
{ to: "/companies", label: t("companies"), icon: <BusinessIcon fontSize="small" />, section: t("manage") },
|
|
{ to: "/trash", label: t("trash"), icon: <DeleteOutlineIcon fontSize="small" />, section: t("manage") },
|
|
];
|
|
|
|
const navBottom: NavItem[] = [
|
|
{ to: "/admin/audit", label: t("auditLog"), icon: <ShieldIcon fontSize="small" />, hidden: !isAdmin, section: t("admin") },
|
|
{ to: "/admin/users", label: t("users"), icon: <AccountCircleIcon fontSize="small" />, hidden: !isAdmin, section: t("admin") },
|
|
{ to: "/admin/system", label: t("system"), icon: <MemoryIcon fontSize="small" />, hidden: !isAdmin, section: t("admin") },
|
|
{ to: "/profile", label: t("profile"), icon: <AccountCircleIcon fontSize="small" />, section: t("account") },
|
|
{ to: "/settings", label: t("settings"), icon: <SettingsIcon fontSize="small" />, section: t("account") },
|
|
];
|
|
|
|
const rightActions = (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 1,
|
|
flexWrap: "nowrap",
|
|
justifyContent: "flex-end",
|
|
width: { xs: "100%", sm: "auto" },
|
|
flex: { xs: 1, sm: "0 0 auto" },
|
|
}}
|
|
>
|
|
{compactHeaderActions ? (
|
|
<IconButton
|
|
color="secondary"
|
|
size="small"
|
|
title={t("quickSearch")}
|
|
onClick={() => setQuickOpen(true)}
|
|
sx={{ border: "1px solid", borderColor: "divider", borderRadius: 2.5, width: 42, height: 42, flex: "0 0 auto" }}
|
|
>
|
|
<SearchIcon fontSize="small" />
|
|
</IconButton>
|
|
) : (
|
|
<Button variant="outlined" startIcon={<SearchIcon />} onClick={() => setQuickOpen(true)}>{t("quickSearch")}</Button>
|
|
)}
|
|
{isJobs ? (
|
|
<Button variant="contained" onClick={() => setAddOpen(true)} sx={{ flex: { xs: 1, sm: "0 0 auto" }, minHeight: 42 }}>
|
|
{t("addJob")}
|
|
</Button>
|
|
) : null}
|
|
</Box>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<AppShell
|
|
pageTitle={pageTitle}
|
|
breadcrumbs={breadcrumbs}
|
|
pathname={path}
|
|
nav={nav}
|
|
navBottom={navBottom}
|
|
drawerOpen={mobileDrawerOpen}
|
|
onToggleDrawer={setMobileDrawerOpen}
|
|
onNavigate={(to) => { setMobileDrawerOpen(false); navigate(to); }}
|
|
user={{ email: me?.email, userName: me?.userName, displayName: me?.displayName || fullName || undefined, avatarImageDataUrl: me?.avatarImageDataUrl, roleLabel: isAdmin ? t("superAdmin") : t("user") }}
|
|
notificationsCount={notifCount}
|
|
onOpenNotifications={() => navigate("/reminders")}
|
|
onOpenSettings={() => navigate("/settings")}
|
|
onOpenProfile={() => navigate("/profile")}
|
|
onSignOut={() => { clearAuthToken(); navigate("/login"); }}
|
|
rightActions={rightActions}
|
|
>
|
|
<Suspense fallback={<PageLoader />}>
|
|
<Routes>
|
|
<Route path="/" element={<Navigate to="/jobs" replace />} />
|
|
<Route path="/dashboard" element={<DashboardView />} />
|
|
<Route path="/jobs" element={<JobTable refreshToken={refreshToken} pageSize={jobPageSize} onPageSizeChange={setAndPersistPageSize} columns={jobColumns} onColumnsChange={setAndPersistColumns} mode="jobs" />} />
|
|
<Route path="/reminders" element={<RemindersView />} />
|
|
<Route path="/kanban" element={<KanbanBoard />} />
|
|
<Route path="/companies" element={<CompaniesTable />} />
|
|
<Route path="/profile" element={<ProfilePage />} />
|
|
<Route path="/admin/audit" element={<AdminAuditPage />} />
|
|
<Route path="/admin/users" element={<AdminUsersPage />} />
|
|
<Route path="/admin/system" element={<AdminSystemPage />} />
|
|
<Route path="/trash" element={<JobTable refreshToken={refreshToken} pageSize={jobPageSize} onPageSizeChange={setAndPersistPageSize} columns={jobColumns} onColumnsChange={setAndPersistColumns} mode="trash" />} />
|
|
<Route path="/settings" element={<SettingsView pageSize={jobPageSize} onPageSizeChange={setAndPersistPageSize} columns={jobColumns} onColumnsChange={setAndPersistColumns} themeMode={themeMode} onThemeModeChange={onThemeModeChange} accentColor={accentColor} onAccentColorChange={onAccentColorChange} onResetAccentColor={onResetAccentColor} />} />
|
|
<Route path="*" element={<NotFoundPage />} />
|
|
</Routes>
|
|
</Suspense>
|
|
</AppShell>
|
|
|
|
<Suspense fallback={null}>
|
|
<AddJobModal open={addOpen} onClose={() => setAddOpen(false)} onCreated={() => { setRefreshToken((t) => t + 1); }} />
|
|
<QuickCommandDialog open={quickOpen} onClose={() => setQuickOpen(false)} onNavigate={(to) => navigate(to)} onOpenAddJob={() => setAddOpen(true)} />
|
|
</Suspense>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default function App() {
|
|
const systemPrefersDark = useMediaQuery("(prefers-color-scheme: dark)", { defaultMatches: true, noSsr: true });
|
|
const [themeMode, setThemeMode] = useState<ThemeModePref>(() => getThemeModePref());
|
|
const [accentColor, setAccentColorState] = useState<string>(() => getAccentColor());
|
|
const effectiveMode: "light" | "dark" = themeMode === "light" ? "light" : themeMode === "dark" ? "dark" : systemPrefersDark ? "dark" : "light";
|
|
const theme = useMemo(() => getTheme(effectiveMode, accentColor), [effectiveMode, accentColor]);
|
|
|
|
useEffect(() => {
|
|
const sync = () => { setThemeMode(getThemeModePref()); setAccentColorState(getAccentColor()); };
|
|
window.addEventListener("auth-changed", sync);
|
|
return () => window.removeEventListener("auth-changed", sync);
|
|
}, []);
|
|
|
|
const onThemeModeChange = (v: ThemeModePref) => { setThemeModePref(v); setThemeMode(v); };
|
|
const onAccentColorChange = (v: string) => { setAccentColor(v); setAccentColorState(getAccentColor()); };
|
|
const onResetAccentColor = () => { clearAccentColor(); setAccentColorState(getAccentColor()); };
|
|
|
|
const [jobPageSize, setJobPageSize] = useState<15 | 20 | 25>(() => {
|
|
const raw = window.localStorage.getItem("jobPageSize");
|
|
const n = raw ? Number(raw) : 15;
|
|
return (n === 20 || n === 25 ? n : 15) as 15 | 20 | 25;
|
|
});
|
|
const [jobColumns, setJobColumns] = useState<JobTableColumns>(() => {
|
|
const raw = window.localStorage.getItem("jobColumns");
|
|
if (!raw) return { status: true, dateApplied: true, daysSince: true, jobUrl: false };
|
|
try {
|
|
const p = JSON.parse(raw) as Partial<JobTableColumns>;
|
|
return { status: p.status ?? true, dateApplied: p.dateApplied ?? true, daysSince: p.daysSince ?? true, jobUrl: p.jobUrl ?? false };
|
|
} catch {
|
|
return { status: true, dateApplied: true, daysSince: true, jobUrl: false };
|
|
}
|
|
});
|
|
|
|
const router = useMemo(() => createBrowserRouter([
|
|
{ path: "/login", element: <LoginPage />, errorElement: <RouteErrorPage /> },
|
|
{ path: "/forgot-password", element: <ForgotPasswordPage />, errorElement: <RouteErrorPage /> },
|
|
{ path: "/reset-password", element: <ResetPasswordPage />, errorElement: <RouteErrorPage /> },
|
|
{ path: "/*", element: <Shell jobPageSize={jobPageSize} setJobPageSize={setJobPageSize} jobColumns={jobColumns} setJobColumns={setJobColumns} themeMode={themeMode} onThemeModeChange={onThemeModeChange} accentColor={accentColor} onAccentColorChange={onAccentColorChange} onResetAccentColor={onResetAccentColor} />, errorElement: <RouteErrorPage /> },
|
|
], { future: { v7_relativeSplatPath: true } }), [jobColumns, jobPageSize, themeMode, accentColor]);
|
|
|
|
return (
|
|
<ToastProvider>
|
|
<ConfirmProvider>
|
|
<PromptProvider>
|
|
<CssVarsProvider key={`${effectiveMode}:${accentColor}`} theme={theme as any} defaultMode={effectiveMode} disableTransitionOnChange>
|
|
<CssBaseline enableColorScheme />
|
|
<I18nProvider>
|
|
<RouterProvider router={router} future={{ v7_startTransition: true }} />
|
|
</I18nProvider>
|
|
</CssVarsProvider>
|
|
</PromptProvider>
|
|
</ConfirmProvider>
|
|
</ToastProvider>
|
|
);
|
|
}
|