feat(jobs): add dedicated workspace page
Make /jobs/:id the canonical application workspace while preserving list state and compatibility links. Replace popup and expandable-row navigation with accessible whole-row routing and richer job details.
This commit is contained in:
cesnimda
@@ -13,11 +13,10 @@ 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 MailOutlineIcon from "@mui/icons-material/MailOutline";
|
||||
import MemoryIcon from "@mui/icons-material/Memory";
|
||||
import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
|
||||
|
||||
import { Navigate, Route, Routes, useLocation, useNavigate, createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
import { Navigate, Route, Routes, useLocation, useNavigate, useParams, createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
|
||||
import { ToastProvider } from "./toast";
|
||||
import { ConfirmProvider } from "./confirm";
|
||||
@@ -83,6 +82,7 @@ type MeResponse = {
|
||||
function breadcrumbsFor(path: string, t: (k: any) => string): string[] {
|
||||
if (path.startsWith("/dashboard")) return [t("home"), t("analytics"), t("overview")];
|
||||
if (path.startsWith("/discover")) return [t("home"), "Discover jobs"];
|
||||
if (/^\/jobs\/\d+/.test(path)) return [t("home"), t("jobApplications"), "Job details"];
|
||||
if (path.startsWith("/jobs")) return [t("home"), t("jobApplications")];
|
||||
if (path.startsWith("/reminders")) return [t("home"), t("reminders")];
|
||||
if (path.startsWith("/operations")) return [t("home"), "Operations"];
|
||||
@@ -107,6 +107,7 @@ function titleFor(path: string, t: (k: any) => string): string {
|
||||
if (path.startsWith("/reminders")) return t("reminders");
|
||||
if (path.startsWith("/operations")) return "Operations";
|
||||
if (path.startsWith("/discover")) return "Discover jobs";
|
||||
if (/^\/jobs\/\d+/.test(path)) return "Job details";
|
||||
if (path.startsWith("/jobs")) return t("jobApplications");
|
||||
if (path.startsWith("/kanban")) return t("kanbanBoard");
|
||||
if (path.startsWith("/companies")) return t("companies");
|
||||
@@ -127,6 +128,7 @@ function titleFor(path: string, t: (k: any) => string): string {
|
||||
function subtitleFor(path: string, t: (k: any) => string): string | undefined {
|
||||
if (path === "/dashboard") return t("dashboardPageSubtitle");
|
||||
if (path.startsWith("/discover")) return "Search official job-board feeds and save opportunities to your tracker.";
|
||||
if (/^\/jobs\/\d+/.test(path)) return "Manage this application, its documents, timeline, and correspondence.";
|
||||
if (path.startsWith("/jobs")) return t("jobsPageSubtitle");
|
||||
if (path.startsWith("/kanban")) return t("kanbanPageSubtitle");
|
||||
if (path.startsWith("/reminders")) return t("remindersPageSubtitle");
|
||||
@@ -139,6 +141,12 @@ function PageLoader() {
|
||||
return <Box sx={{ p: 4 }}><Typography variant="h6">Loading...</Typography></Box>;
|
||||
}
|
||||
|
||||
function LegacyApplicationRedirect() {
|
||||
const { id } = useParams();
|
||||
const location = useLocation();
|
||||
return <Navigate to={`/jobs/${id ?? ""}${location.search}`} replace state={location.state} />;
|
||||
}
|
||||
|
||||
function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMode, onThemeModeChange }: { jobPageSize: 15 | 20 | 25; setJobPageSize: (n: 15 | 20 | 25) => void; jobColumns: JobTableColumns; setJobColumns: (c: JobTableColumns) => void; themeMode: ThemeModePref; onThemeModeChange: (v: ThemeModePref) => void; }) {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
@@ -270,8 +278,6 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo
|
||||
{ to: "/reminders", label: t("reminders"), icon: <AlarmIcon fontSize="small" />, badgeCount: reminderCount, 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: "/correspondence", label: "Correspondence", icon: <MailOutlineIcon fontSize="small" />, section: t("manage") },
|
||||
{ to: "/correspondence/review", label: "Gmail review", icon: <MailOutlineIcon fontSize="small" />, section: t("manage") },
|
||||
{ to: "/career", label: "Career Workspace", icon: <DescriptionOutlinedIcon fontSize="small" />, section: t("manage") },
|
||||
{ to: "/career/builder", label: "CV Builder", icon: <DescriptionOutlinedIcon fontSize="small" />, section: t("manage") },
|
||||
{ to: "/trash", label: t("trash"), icon: <DeleteOutlineIcon fontSize="small" />, section: t("manage") },
|
||||
@@ -353,6 +359,7 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo
|
||||
<Route path="/dashboard" element={<DashboardView />} />
|
||||
<Route path="/discover" element={<JobDiscoveryPage />} />
|
||||
<Route path="/jobs" element={<JobTable refreshToken={refreshToken} pageSize={jobPageSize} onPageSizeChange={setAndPersistPageSize} columns={jobColumns} onColumnsChange={setAndPersistColumns} mode="jobs" />} />
|
||||
<Route path="/jobs/:id" element={<ApplicationWorkspacePage />} />
|
||||
<Route path="/reminders" element={<RemindersView />} />
|
||||
<Route path="/operations" element={<OperationsPage />} />
|
||||
<Route path="/kanban" element={<KanbanBoard />} />
|
||||
@@ -360,7 +367,7 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo
|
||||
<Route path="/correspondence" element={<CorrespondenceInboxPage />} />
|
||||
<Route path="/correspondence/review" element={<Navigate to="/correspondence?view=review" replace />} />
|
||||
<Route path="/profile" element={<ProfilePage />} />
|
||||
<Route path="/applications/:id" element={<ApplicationWorkspacePage />} />
|
||||
<Route path="/applications/:id" element={<LegacyApplicationRedirect />} />
|
||||
<Route path="/career" element={<CareerWorkspacePage />} />
|
||||
<Route path="/career/builder" element={<CvBuilderPage />} />
|
||||
<Route path="/career/builder/:id" element={<CvBuilderEditor />} />
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import "@testing-library/jest-dom";
|
||||
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
|
||||
import { MemoryRouter, Route, Routes, useLocation, useNavigate } from "react-router-dom";
|
||||
import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
|
||||
import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom";
|
||||
|
||||
import { api } from "./api";
|
||||
import JobTable from "./components/JobTable";
|
||||
@@ -9,6 +9,7 @@ import { ConfirmProvider } from "./confirm";
|
||||
import { I18nProvider } from "./i18n/I18nProvider";
|
||||
import { PromptProvider } from "./prompt";
|
||||
import { ToastProvider } from "./toast";
|
||||
import ApplicationWorkspacePage from "./views/ApplicationWorkspacePage";
|
||||
|
||||
jest.mock("./components/Attachments", () => () => <div>Documents section</div>);
|
||||
jest.mock("./components/Correspondence", () => () => <div>Communication section</div>);
|
||||
@@ -57,6 +58,14 @@ const overview = {
|
||||
followUpAt: null,
|
||||
nextAction: null,
|
||||
jobUrl: null,
|
||||
savedAt: "2026-08-01T00:00:00Z",
|
||||
description: "Build APIs",
|
||||
translatedDescription: null,
|
||||
descriptionLanguage: "en",
|
||||
tags: [".NET", "SQL"],
|
||||
notes: "Ask about the platform team.",
|
||||
source: "nav",
|
||||
countryCode: "NO",
|
||||
hasJobDescription: true,
|
||||
cv: { variantId: null, variantName: null, themeId: null, hasTailoredCvText: false, updatedAtUtc: null },
|
||||
hasCoverLetter: false,
|
||||
@@ -71,11 +80,9 @@ const overview = {
|
||||
|
||||
function LocationControls() {
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<>
|
||||
<output data-testid="location">{location.pathname}{location.search}</output>
|
||||
<button onClick={() => navigate(1)}>Browser forward</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -86,10 +93,11 @@ function renderTable(path = "/jobs") {
|
||||
<I18nProvider>
|
||||
<ConfirmProvider>
|
||||
<PromptProvider>
|
||||
<MemoryRouter initialEntries={[path]} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
|
||||
<MemoryRouter initialEntries={[path]}>
|
||||
<LocationControls />
|
||||
<Routes>
|
||||
<Route path="/jobs" element={<JobTable refreshToken={0} pageSize={15} onPageSizeChange={() => {}} columns={{ status: true, dateApplied: true, daysSince: true, jobUrl: false }} onColumnsChange={() => {}} />} />
|
||||
<Route path="/jobs/:id" element={<ApplicationWorkspacePage />} />
|
||||
</Routes>
|
||||
</MemoryRouter>
|
||||
</PromptProvider>
|
||||
@@ -104,46 +112,57 @@ beforeEach(() => {
|
||||
if (url === "/companies") return Promise.resolve({ data: [{ id: 1, name: "Acme" }] } as any);
|
||||
if (url === "/jobapplications") return Promise.resolve({ data: { items: [job], total: 1, page: 1, pageSize: 15 } } as any);
|
||||
if (url === "/jobapplications/42/workspace") return Promise.resolve({ data: overview } as any);
|
||||
if (url === "/jobapplications/999/workspace") return Promise.reject({ response: { status: 404, data: { detail: "Application not found." } } });
|
||||
return Promise.resolve({ data: [] } as any);
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => jest.clearAllMocks());
|
||||
|
||||
test("opens the workspace in a route-backed overlay and preserves list state through Back/Forward", async () => {
|
||||
test("opens the dedicated workspace from the whole row and preserves list state on return", async () => {
|
||||
renderTable();
|
||||
|
||||
const search = await screen.findByRole("textbox", { name: /search/i });
|
||||
fireEvent.change(search, { target: { value: "backend" } });
|
||||
fireEvent.click(await screen.findByRole("button", { name: /open: backend developer/i }));
|
||||
fireEvent.click(await screen.findByRole("row", { name: /open backend developer/i }));
|
||||
|
||||
await screen.findByRole("dialog", { name: /application workspace/i });
|
||||
expect(screen.getByTestId("location")).toHaveTextContent("/jobs?q=backend&workspace=42");
|
||||
expect(screen.getByRole("link", { name: /open full-page workspace/i })).toHaveAttribute("href", "/applications/42?section=overview");
|
||||
expect(await screen.findByText("Backend Developer")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("location")).toHaveTextContent("/jobs/42");
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: "Match" }));
|
||||
expect(await screen.findByText("Match section")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("location")).toHaveTextContent("/jobs?q=backend&workspace=42§ion=match");
|
||||
expect(screen.getByTestId("location")).toHaveTextContent("/jobs/42?section=match");
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /back to applications/i }));
|
||||
await waitFor(() => expect(screen.queryByRole("dialog", { name: /application workspace/i })).not.toBeInTheDocument());
|
||||
expect(screen.getByTestId("location")).toHaveTextContent("/jobs?q=backend");
|
||||
expect(screen.getByRole("textbox", { name: /search/i })).toHaveValue("backend");
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /browser forward/i }));
|
||||
await screen.findByRole("dialog", { name: /application workspace/i });
|
||||
expect(screen.getByTestId("location")).toHaveTextContent("/jobs?q=backend&workspace=42§ion=match");
|
||||
await waitFor(() => expect(screen.getByTestId("location")).toHaveTextContent("/jobs?q=backend"));
|
||||
expect(await screen.findByRole("textbox", { name: /search/i })).toHaveValue("backend");
|
||||
});
|
||||
|
||||
test("opens a direct workspace URL and closes it without inventing browser history", async () => {
|
||||
renderTable("/jobs?workspace=42§ion=match");
|
||||
test("opens a direct workspace URL and returns to applications", async () => {
|
||||
renderTable("/jobs/42?section=match");
|
||||
|
||||
await screen.findByRole("dialog", { name: /application workspace/i });
|
||||
expect(await screen.findByText("Match section")).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByRole("button", { name: /back to applications/i }));
|
||||
await waitFor(() => expect(screen.getByTestId("location")).toHaveTextContent("/jobs"));
|
||||
await waitFor(() => expect(screen.queryByRole("dialog", { name: /application workspace/i })).not.toBeInTheDocument());
|
||||
});
|
||||
|
||||
test("row controls do not trigger navigation", async () => {
|
||||
renderTable();
|
||||
|
||||
const row = await screen.findByRole("row", { name: /open backend developer/i });
|
||||
const checkbox = within(row).getByRole("checkbox");
|
||||
fireEvent.click(checkbox);
|
||||
|
||||
expect(screen.getByTestId("location")).toHaveTextContent(/^\/jobs$/);
|
||||
expect(checkbox).toBeChecked();
|
||||
});
|
||||
|
||||
test("handles a deleted or inaccessible job without rendering a broken workspace", async () => {
|
||||
renderTable("/jobs/999");
|
||||
|
||||
expect(await screen.findByRole("alert")).toHaveTextContent("Could not open this application");
|
||||
expect(screen.getByRole("button", { name: /back to applications/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("hydrates list filters, sort and page from a shareable URL", async () => {
|
||||
|
||||
@@ -26,6 +26,14 @@ export type WorkspaceOverview = {
|
||||
followUpAt: string | null;
|
||||
nextAction: string | null;
|
||||
jobUrl: string | null;
|
||||
savedAt: string;
|
||||
description: string | null;
|
||||
translatedDescription: string | null;
|
||||
descriptionLanguage: string | null;
|
||||
tags: string[];
|
||||
notes: string | null;
|
||||
source: string | null;
|
||||
countryCode: string | null;
|
||||
hasJobDescription: boolean;
|
||||
cv: WorkspaceCv;
|
||||
hasCoverLetter: boolean;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
|
||||
import {
|
||||
@@ -6,9 +6,6 @@ import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Chip,
|
||||
Collapse,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
IconButton,
|
||||
@@ -34,9 +31,6 @@ import useMediaQuery from "@mui/material/useMediaQuery";
|
||||
import { alpha, useTheme } from "@mui/material/styles";
|
||||
import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
|
||||
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
|
||||
import LaunchIcon from "@mui/icons-material/Launch";
|
||||
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
||||
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
|
||||
import RestoreFromTrashOutlinedIcon from "@mui/icons-material/RestoreFromTrashOutlined";
|
||||
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
||||
import ViewColumnIcon from "@mui/icons-material/ViewColumn";
|
||||
@@ -49,7 +43,6 @@ import { useCompanies } from "../hooks/useCompanies";
|
||||
import { useDebouncedValue } from "../hooks/useDebouncedValue";
|
||||
import { formatSalary } from "../salary";
|
||||
import { statusLabel, statusTone } from "../pipeline";
|
||||
import JobDetailsDialog from "./JobDetailsDialog";
|
||||
import EditJobDialog from "./EditJobDialog";
|
||||
import { useToast } from "../toast";
|
||||
import SavedViewsMenu, { SavedViewParams } from "./SavedViewsMenu";
|
||||
@@ -58,8 +51,6 @@ import { useI18n } from "../i18n/I18nProvider";
|
||||
import { JobApplication } from "../types";
|
||||
import { useViewResource } from "../hooks/useViewResource";
|
||||
import { getWorkflowAction, needsInterviewPrep, needsWorkflowWork } from "../jobWorkflowSignals";
|
||||
import { ApplicationWorkspace } from "../views/ApplicationWorkspacePage";
|
||||
import { workspaceSection, WorkspaceSectionKey } from "../applicationWorkspace";
|
||||
|
||||
interface PagedResult<T> {
|
||||
items: T[];
|
||||
@@ -79,13 +70,10 @@ type RowActionSignal = {
|
||||
type JobRowViewModel = {
|
||||
job: JobApplication;
|
||||
toneName: string;
|
||||
overview: string;
|
||||
tags: string[];
|
||||
actionSignals: RowActionSignal[];
|
||||
primaryAction: RowActionSignal | null;
|
||||
appliedDateLabel: string;
|
||||
isSelected: boolean;
|
||||
isExpanded: boolean;
|
||||
};
|
||||
|
||||
export type JobTableColumns = {
|
||||
@@ -174,11 +162,8 @@ function EmptyJobsState({ firstTime, onOpenSettings, t }: { firstTime: boolean;
|
||||
);
|
||||
}
|
||||
|
||||
function generateOverview(job: JobApplication): string {
|
||||
if (job.fullSummary) return job.fullSummary;
|
||||
if (job.shortSummary) return job.shortSummary;
|
||||
const src = (job.description || job.notes || "").replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
|
||||
return src.length > 220 ? `${src.slice(0, 220)}...` : src;
|
||||
function isInteractiveTarget(target: EventTarget | null): boolean {
|
||||
return target instanceof Element && Boolean(target.closest("button, a, input, select, textarea, [role='button'], [role='menuitem'], [role='checkbox']"));
|
||||
}
|
||||
|
||||
export default function JobTable({ refreshToken, pageSize, onPageSizeChange, columns, onColumnsChange, mode = "jobs" }: Props) {
|
||||
@@ -189,10 +174,10 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
|
||||
const { confirmAction } = useDialogActions();
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const listRouteRef = useRef(`${location.pathname}${location.search}`);
|
||||
const [jobs, setJobs] = useState<JobApplication[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(() => queryPage(location.search));
|
||||
const [expanded, setExpanded] = useState<number[]>([]);
|
||||
const [selectedIds, setSelectedIds] = useState<number[]>([]);
|
||||
const [search, setSearch] = useState(() => new URLSearchParams(location.search).get("q") ?? "");
|
||||
const debouncedSearch = useDebouncedValue(search, 250);
|
||||
@@ -205,18 +190,12 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
|
||||
const [readinessFilter, setReadinessFilter] = useState<ReadinessFilter>(() => queryReadiness(location.search));
|
||||
const { companies, error: companiesError, reload: reloadCompanies } = useCompanies();
|
||||
const [companyFilterId, setCompanyFilterId] = useState<number | "All">(() => queryCompany(location.search));
|
||||
const [detailsJobId, setDetailsJobId] = useState<number | null>(null);
|
||||
const [detailsInitialTab, setDetailsInitialTab] = useState(0);
|
||||
const [detailsFollowUpMode, setDetailsFollowUpMode] = useState<string | undefined>(undefined);
|
||||
const [editJobId, setEditJobId] = useState<number | null>(null);
|
||||
const [reloadToken, setReloadToken] = useState(0);
|
||||
const [statusAnchor, setStatusAnchor] = useState<null | HTMLElement>(null);
|
||||
const [statusJobId, setStatusJobId] = useState<number | null>(null);
|
||||
const [sortBy, setSortBy] = useState<JobSortKey>(() => querySort(location.search));
|
||||
const [sortDir, setSortDir] = useState<"asc" | "desc">(() => new URLSearchParams(location.search).get("sortDir") === "asc" ? "asc" : "desc");
|
||||
const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
|
||||
const workspaceJobId = Number(searchParams.get("workspace")) || null;
|
||||
const workspaceSectionKey = workspaceSection(searchParams.get("section"));
|
||||
|
||||
const updateListRoute = useCallback((updates: Record<string, string | null>) => {
|
||||
const next = new URLSearchParams(location.search);
|
||||
@@ -224,9 +203,15 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
|
||||
if (value) next.set(key, value);
|
||||
else next.delete(key);
|
||||
});
|
||||
navigate({ pathname: location.pathname, search: next.toString() ? `?${next.toString()}` : "" }, { replace: true, state: location.state });
|
||||
const search = next.toString() ? `?${next.toString()}` : "";
|
||||
listRouteRef.current = `${location.pathname}${search}`;
|
||||
navigate({ pathname: location.pathname, search }, { replace: true, state: location.state });
|
||||
}, [location.pathname, location.search, location.state, navigate]);
|
||||
|
||||
useEffect(() => {
|
||||
listRouteRef.current = `${location.pathname}${location.search}`;
|
||||
}, [location.pathname, location.search]);
|
||||
|
||||
useEffect(() => {
|
||||
const next = new URLSearchParams(location.search);
|
||||
setSearch(next.get("q") ?? "");
|
||||
@@ -301,33 +286,9 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
|
||||
});
|
||||
};
|
||||
|
||||
const updateWorkspaceRoute = (jobId: number, section: WorkspaceSectionKey = "overview") => {
|
||||
const next = new URLSearchParams(location.search);
|
||||
next.set("workspace", String(jobId));
|
||||
if (section === "overview") next.delete("section");
|
||||
else next.set("section", section);
|
||||
navigate({ pathname: location.pathname, search: `?${next.toString()}` }, { state: { workspaceOverlay: true } });
|
||||
};
|
||||
|
||||
const updateWorkspaceSection = (section: WorkspaceSectionKey) => {
|
||||
if (!workspaceJobId) return;
|
||||
const next = new URLSearchParams(location.search);
|
||||
next.set("workspace", String(workspaceJobId));
|
||||
if (section === "overview") next.delete("section");
|
||||
else next.set("section", section);
|
||||
navigate({ pathname: location.pathname, search: `?${next.toString()}` }, { replace: true, state: location.state });
|
||||
};
|
||||
|
||||
const closeWorkspace = () => {
|
||||
if (location.state?.workspaceOverlay) {
|
||||
navigate(-1);
|
||||
return;
|
||||
}
|
||||
const next = new URLSearchParams(location.search);
|
||||
next.delete("workspace");
|
||||
next.delete("section");
|
||||
navigate({ pathname: location.pathname, search: next.toString() ? `?${next.toString()}` : "" }, { replace: true });
|
||||
};
|
||||
const openJob = useCallback((jobId: number, path?: string) => {
|
||||
navigate(path ?? `/jobs/${jobId}`, { state: { from: listRouteRef.current } });
|
||||
}, [navigate]);
|
||||
|
||||
const params = useMemo(() => ({
|
||||
page: page + 1,
|
||||
@@ -363,22 +324,6 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
|
||||
}
|
||||
}, [jobsResource.data, jobsResource.error]);
|
||||
|
||||
useEffect(() => {
|
||||
const paramsSearch = new URLSearchParams(location.search);
|
||||
const openId = Number(paramsSearch.get("open") || 0);
|
||||
const tabIndex = Number(paramsSearch.get("tab") || 0);
|
||||
const followMode = paramsSearch.get("followMode") || undefined;
|
||||
if (!openId || jobs.length === 0) return;
|
||||
const job = jobs.find((j) => j.id === openId);
|
||||
if (!job) return;
|
||||
setDetailsJobId(openId);
|
||||
setDetailsInitialTab(Number.isFinite(tabIndex) ? Math.max(0, Math.min(9, tabIndex)) : 0);
|
||||
setDetailsFollowUpMode(followMode);
|
||||
paramsSearch.delete("open");
|
||||
paramsSearch.delete("tab");
|
||||
navigate({ pathname: location.pathname, search: paramsSearch.toString() ? `?${paramsSearch.toString()}` : "" }, { replace: true });
|
||||
}, [jobs, location.pathname, location.search, navigate]);
|
||||
|
||||
const requestSort = (key: JobSortKey) => {
|
||||
const nextDirection = sortBy === key ? (sortDir === "asc" ? "desc" : "asc") : "asc";
|
||||
setSortBy(key);
|
||||
@@ -387,10 +332,6 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
|
||||
updateListRoute({ sortBy: key === "dateApplied" ? null : key, sortDir: key === "dateApplied" && nextDirection === "desc" ? null : nextDirection, page: null });
|
||||
};
|
||||
|
||||
const toggleExpanded = (id: number) => {
|
||||
setExpanded((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
|
||||
};
|
||||
|
||||
const filteredJobs = useMemo(() => {
|
||||
if (readinessFilter === "all") return jobs;
|
||||
if (readinessFilter === "interview") return jobs.filter((job) => needsInterviewPrep(job));
|
||||
@@ -485,29 +426,26 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
|
||||
return {
|
||||
label: action.label,
|
||||
detail: action.detail,
|
||||
onClick: () => navigate(action.path),
|
||||
onClick: () => openJob(job.id, action.path),
|
||||
variant: action.key === "follow-up" ? "contained" : "outlined",
|
||||
color: action.key === "follow-up" ? "warning" : "primary",
|
||||
};
|
||||
}, [navigate, t]);
|
||||
}, [openJob, t]);
|
||||
|
||||
const rowModels = useMemo<JobRowViewModel[]>(() => filteredJobs.map((job) => {
|
||||
const actionSignal = buildWorkflowActionSignal(job);
|
||||
return {
|
||||
job,
|
||||
toneName: statusTone(job.status),
|
||||
overview: generateOverview(job),
|
||||
tags: parseTags(job.tags),
|
||||
actionSignals: actionSignal ? [actionSignal] : [],
|
||||
primaryAction: actionSignal,
|
||||
appliedDateLabel: job.dateApplied ? new Date(job.dateApplied).toLocaleDateString() : "—",
|
||||
isSelected: selectedIdSet.has(job.id),
|
||||
isExpanded: expanded.includes(job.id),
|
||||
};
|
||||
}), [buildWorkflowActionSignal, expanded, filteredJobs, selectedIdSet]);
|
||||
}), [buildWorkflowActionSignal, filteredJobs, selectedIdSet]);
|
||||
|
||||
const statusOptions = ["Waiting", "Interview", "Offer", "Rejected", "Ghosted"] as const;
|
||||
const visibleDesktopColumns = 4 + Number(columns.status) + Number(columns.dateApplied) + Number(columns.daysSince) + Number(columns.jobUrl);
|
||||
const visibleDesktopColumns = 6 + Number(columns.status) + Number(columns.dateApplied) + Number(columns.daysSince) + Number(columns.jobUrl);
|
||||
const selectedCompanyIsLoading = companyFilterId !== "All" && !companies.some((company) => company.id === companyFilterId);
|
||||
|
||||
return (
|
||||
@@ -697,17 +635,32 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
|
||||
</Box>
|
||||
|
||||
{jobsResource.loading ? <Typography sx={{ py: 2, textAlign: "center" }}>{t("loading")}</Typography> : null}
|
||||
{!jobsResource.loading && !jobsResource.error && rowModels.map(({ job, toneName, actionSignals, tags, overview, primaryAction, appliedDateLabel, isSelected }) => {
|
||||
{!jobsResource.loading && !jobsResource.error && rowModels.map(({ job, toneName, actionSignals, tags, appliedDateLabel, isSelected }) => {
|
||||
const compactTags = tags.slice(0, 6);
|
||||
return (
|
||||
<Paper
|
||||
key={job.id}
|
||||
role={mode === "jobs" && !job.isDeleted ? "link" : undefined}
|
||||
tabIndex={mode === "jobs" && !job.isDeleted ? 0 : undefined}
|
||||
aria-label={mode === "jobs" && !job.isDeleted ? `Open ${job.jobTitle} at ${job.company?.name ?? "company"}` : undefined}
|
||||
onClick={(event) => {
|
||||
if (mode === "jobs" && !job.isDeleted && !isInteractiveTarget(event.target)) openJob(job.id);
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
if (mode === "jobs" && !job.isDeleted && event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
|
||||
event.preventDefault();
|
||||
openJob(job.id);
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
p: 1.5,
|
||||
borderRadius: 3.5,
|
||||
cursor: mode === "jobs" && !job.isDeleted ? "pointer" : "default",
|
||||
backgroundColor: alpha(theme.palette.primary.main, 0.03),
|
||||
borderColor: alpha(theme.palette.primary.main, 0.08),
|
||||
boxShadow: `0 10px 24px ${alpha(theme.palette.common.black, theme.palette.mode === "dark" ? 0.18 : 0.06)}`,
|
||||
"&:hover": mode === "jobs" && !job.isDeleted ? { backgroundColor: "action.hover" } : undefined,
|
||||
"&:focus-visible": { outline: "3px solid", outlineColor: "primary.main", outlineOffset: 2 },
|
||||
}}
|
||||
>
|
||||
<Stack spacing={1.25}>
|
||||
@@ -778,27 +731,6 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
|
||||
</Box>
|
||||
) : null}
|
||||
|
||||
<Box>
|
||||
<Typography variant="overline" sx={{ color: "text.secondary" }}>{t("jobTableOverview")}</Typography>
|
||||
<Typography variant="body2" sx={{ color: "text.secondary", mt: 0.25, whiteSpace: "pre-wrap", textWrap: "pretty" }}>
|
||||
{overview || t("jobTableNoSummaryYet")}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{primaryAction ? (
|
||||
<Box>
|
||||
<Typography variant="caption" sx={{ color: "text.secondary", fontWeight: 700, display: "block", mb: 0.5 }}>
|
||||
{t("editJobNextAction")}
|
||||
</Typography>
|
||||
<Button variant={primaryAction.variant} color={primaryAction.color} onClick={primaryAction.onClick} fullWidth sx={{ minHeight: 42, fontWeight: 700 }}>
|
||||
{primaryAction.label}
|
||||
</Button>
|
||||
<Typography variant="caption" sx={{ color: "text.secondary", display: "block", mt: 0.75, textWrap: "pretty" }}>
|
||||
{primaryAction.detail}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : null}
|
||||
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: 1 }}>
|
||||
<Button variant="outlined" startIcon={<EditOutlinedIcon />} onClick={() => setEditJobId(job.id)} sx={{ minHeight: 42, fontWeight: 700 }}>
|
||||
{t("jobTableEdit")}
|
||||
@@ -806,9 +738,6 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
|
||||
<Button variant="outlined" startIcon={<MoreHorizIcon />} onClick={(e) => { setStatusJobId(job.id); setStatusAnchor(e.currentTarget); }} sx={{ minHeight: 42, fontWeight: 700 }}>
|
||||
{t("jobTableQuickStatus")}
|
||||
</Button>
|
||||
<Button variant="outlined" startIcon={<LaunchIcon />} onClick={() => updateWorkspaceRoute(job.id)} sx={{ minHeight: 42, fontWeight: 700 }}>
|
||||
{t("jobTableOpen")}
|
||||
</Button>
|
||||
{(mode === "trash" || (includeDeleted && job.isDeleted)) ? (
|
||||
<Button variant="outlined" startIcon={<RestoreFromTrashOutlinedIcon />} onClick={() => void restore(job.id)} sx={{ minHeight: 42, fontWeight: 700 }}>
|
||||
{t("jobTableRestore")}
|
||||
@@ -833,30 +762,47 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell padding="checkbox"><Checkbox checked={selectedAllOnPage} indeterminate={selectedIds.length > 0 && !selectedAllOnPage} onChange={(e) => toggleSelectAll(e.target.checked)} /></TableCell>
|
||||
<TableCell width={1} />
|
||||
<TableCell sortDirection={sortBy === "company" ? sortDir : false}><TableSortLabel active={sortBy === "company"} direction={sortBy === "company" ? sortDir : "asc"} onClick={() => requestSort("company")}>{t("jobTableCompany")}</TableSortLabel></TableCell>
|
||||
<TableCell sortDirection={sortBy === "jobTitle" ? sortDir : false}><TableSortLabel active={sortBy === "jobTitle"} direction={sortBy === "jobTitle" ? sortDir : "asc"} onClick={() => requestSort("jobTitle")}>{t("jobTableRole")}</TableSortLabel></TableCell>
|
||||
<TableCell sortDirection={sortBy === "location" ? sortDir : false}><TableSortLabel active={sortBy === "location"} direction={sortBy === "location" ? sortDir : "asc"} onClick={() => requestSort("location")}>{t("jobTableLocation")}</TableSortLabel></TableCell>
|
||||
{columns.status ? <TableCell sortDirection={sortBy === "status" ? sortDir : false}><TableSortLabel active={sortBy === "status"} direction={sortBy === "status" ? sortDir : "asc"} onClick={() => requestSort("status")}>{t("jobTableStatus")}</TableSortLabel></TableCell> : null}
|
||||
{columns.dateApplied ? <TableCell sortDirection={sortBy === "dateApplied" ? sortDir : false}><TableSortLabel active={sortBy === "dateApplied"} direction={sortBy === "dateApplied" ? sortDir : "asc"} onClick={() => requestSort("dateApplied")}>{t("jobTableDateApplied")}</TableSortLabel></TableCell> : null}
|
||||
{columns.daysSince ? <TableCell sortDirection={sortBy === "daysSince" ? sortDir : false}><TableSortLabel active={sortBy === "daysSince"} direction={sortBy === "daysSince" ? sortDir : "asc"} onClick={() => requestSort("daysSince")}>{t("jobTableDays")}</TableSortLabel></TableCell> : null}
|
||||
<TableCell>{t("jobDetailsDeadline")}</TableCell>
|
||||
{columns.jobUrl ? <TableCell>{t("settingsColumnJobUrl")}</TableCell> : null}
|
||||
<TableCell align="right">{t("jobTableActions")}</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{jobsResource.loading ? <TableRow><TableCell colSpan={visibleDesktopColumns}><Typography sx={{ py: 2, textAlign: "center" }}>{t("loading")}</Typography></TableCell></TableRow> : null}
|
||||
{!jobsResource.loading && !jobsResource.error && rowModels.map(({ job, toneName, actionSignals, primaryAction, appliedDateLabel, overview, tags, isSelected, isExpanded }) => {
|
||||
{!jobsResource.loading && !jobsResource.error && rowModels.map(({ job, toneName, actionSignals, appliedDateLabel, isSelected }) => {
|
||||
const tone = toneName === "error" ? theme.palette.error.main : toneName === "warning" ? theme.palette.warning.main : toneName === "success" ? theme.palette.success.main : toneName === "info" ? theme.palette.info.main : theme.palette.primary.main;
|
||||
const detailTags = tags.slice(0, 8);
|
||||
return (
|
||||
<React.Fragment key={job.id}>
|
||||
<TableRow sx={{ backgroundColor: alpha(tone, theme.palette.mode === "dark" ? 0.1 : 0.06) }}>
|
||||
<TableRow
|
||||
key={job.id}
|
||||
hover={mode === "jobs" && !job.isDeleted}
|
||||
tabIndex={mode === "jobs" && !job.isDeleted ? 0 : undefined}
|
||||
aria-label={mode === "jobs" && !job.isDeleted ? `Open ${job.jobTitle} at ${job.company?.name ?? "company"}` : undefined}
|
||||
onClick={(event) => {
|
||||
if (mode === "jobs" && !job.isDeleted && !isInteractiveTarget(event.target)) openJob(job.id);
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
if (mode === "jobs" && !job.isDeleted && event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
|
||||
event.preventDefault();
|
||||
openJob(job.id);
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
cursor: mode === "jobs" && !job.isDeleted ? "pointer" : "default",
|
||||
backgroundColor: alpha(tone, theme.palette.mode === "dark" ? 0.1 : 0.06),
|
||||
"&:focus-visible": { outline: "3px solid", outlineColor: "primary.main", outlineOffset: -3 },
|
||||
}}
|
||||
>
|
||||
<TableCell padding="checkbox"><Checkbox checked={isSelected} onChange={(e) => toggleSelected(job.id, e.target.checked)} /></TableCell>
|
||||
<TableCell><IconButton size="small" onClick={() => toggleExpanded(job.id)}>{isExpanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}</IconButton></TableCell>
|
||||
<TableCell>{job.company?.name ?? ""}</TableCell>
|
||||
<TableCell sx={{ minWidth: 140, fontWeight: 700 }}>{job.company?.name ?? ""}</TableCell>
|
||||
<TableCell>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 1, flexWrap: "wrap" }}>
|
||||
<span>{job.jobTitle}</span>
|
||||
<Typography component="span" sx={{ fontWeight: 800, overflowWrap: "anywhere" }}>{job.jobTitle}</Typography>
|
||||
{actionSignals.map((signal) => (
|
||||
<Chip
|
||||
key={`${job.id}-${signal.label}-${signal.detail}`}
|
||||
@@ -873,48 +819,20 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
|
||||
))}
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell sx={{ minWidth: 130 }}>{job.location || "—"}</TableCell>
|
||||
{columns.status ? <TableCell><Chip label={statusLabel(t, job.status)} size="small" color={toneName as any} /></TableCell> : null}
|
||||
{columns.dateApplied ? <TableCell>{appliedDateLabel}</TableCell> : null}
|
||||
{columns.daysSince ? <TableCell>{job.daysSince}</TableCell> : null}
|
||||
{columns.daysSince ? <TableCell>{job.daysSince ?? "—"}</TableCell> : null}
|
||||
<TableCell>{job.deadline ? new Date(job.deadline).toLocaleDateString() : "—"}</TableCell>
|
||||
{columns.jobUrl ? <TableCell>{job.jobUrl ? <a href={job.jobUrl} target="_blank" rel="noreferrer">{t("jobTableLink")}</a> : ""}</TableCell> : null}
|
||||
<TableCell align="right">
|
||||
<Box sx={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 0.75 }}>
|
||||
{primaryAction ? (
|
||||
<>
|
||||
<Typography variant="caption" sx={{ color: "text.secondary", fontWeight: 700 }}>
|
||||
{t("editJobNextAction")}
|
||||
</Typography>
|
||||
<Button size="small" variant={primaryAction.variant} color={primaryAction.color} onClick={primaryAction.onClick} aria-label={`${t("editJobNextAction")}: ${job.jobTitle} — ${primaryAction.label}`}>
|
||||
{primaryAction.label}
|
||||
</Button>
|
||||
<Typography variant="caption" sx={{ color: "text.secondary", maxWidth: 220, textAlign: "right" }}>
|
||||
{primaryAction.detail}
|
||||
</Typography>
|
||||
</>
|
||||
) : null}
|
||||
<Box sx={{ display: "flex", justifyContent: "flex-end", gap: 0.5 }}>
|
||||
<Box sx={{ display: "flex", justifyContent: "flex-end", gap: 0.5, whiteSpace: "nowrap" }}>
|
||||
<Tooltip title={t("jobTableEdit")}><IconButton size="small" onClick={() => setEditJobId(job.id)}><EditOutlinedIcon fontSize="small" /></IconButton></Tooltip>
|
||||
<Tooltip title={t("jobTableQuickStatus")}><IconButton size="small" onClick={(e) => { setStatusJobId(job.id); setStatusAnchor(e.currentTarget); }}><MoreHorizIcon fontSize="small" /></IconButton></Tooltip>
|
||||
<Tooltip title={t("jobTableOpen")}><IconButton size="small" aria-label={`${t("jobTableOpen")}: ${job.jobTitle}`} onClick={() => updateWorkspaceRoute(job.id)}><LaunchIcon fontSize="small" /></IconButton></Tooltip>
|
||||
{(mode === "trash" || (includeDeleted && job.isDeleted)) ? <Tooltip title={t("jobTableRestore")}><IconButton size="small" onClick={() => void restore(job.id)}><RestoreFromTrashOutlinedIcon fontSize="small" /></IconButton></Tooltip> : <Tooltip title={t("jobTableSoftDelete")}><IconButton size="small" onClick={() => void softDelete(job)}><DeleteOutlineIcon fontSize="small" /></IconButton></Tooltip>}
|
||||
</Box>
|
||||
</Box>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell sx={{ py: 0 }} colSpan={visibleDesktopColumns}>
|
||||
<Collapse in={isExpanded} timeout="auto" unmountOnExit>
|
||||
<Box sx={{ p: 2, display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr 1fr" }, gap: 2 }}>
|
||||
<Box><Typography variant="overline">{t("jobTableLocation")}</Typography><Typography>{job.location ?? "-"}</Typography></Box>
|
||||
<Box><Typography variant="overline">{t("addJobModalSalary")}</Typography><Typography>{formatSalary(job) ?? "-"}</Typography></Box>
|
||||
<Box><Typography variant="overline">{t("settingsColumnJobUrl")}</Typography><Typography>{job.jobUrl ? <a href={job.jobUrl} target="_blank" rel="noreferrer">{t("jobTableOpenListing")}</a> : "-"}</Typography></Box>
|
||||
<Box sx={{ gridColumn: "1 / -1" }}><Typography variant="overline">{t("jobTableSkills")}</Typography><Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 0.5 }}>{detailTags.length ? detailTags.map((tag) => <Chip key={tag} label={tag} size="small" />) : <Typography sx={{ color: "text.secondary" }}>{t("jobTableNoTags")}</Typography>}</Box></Box>
|
||||
<Box sx={{ gridColumn: "1 / -1" }}><Typography variant="overline">{t("jobTableOverview")}</Typography><Typography sx={{ whiteSpace: "pre-wrap" }}>{overview || t("jobTableNoSummaryYet")}</Typography></Box>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
{filteredJobs.length === 0 && !jobsResource.loading && !jobsResource.error ? (
|
||||
@@ -927,27 +845,6 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
|
||||
<TablePagination component="div" count={total} page={page} onPageChange={(_, next) => { setPage(next); updateListRoute({ page: next > 0 ? String(next + 1) : null }); }} rowsPerPage={pageSize} onRowsPerPageChange={(e) => { onPageSizeChange(Number(e.target.value) as 15 | 20 | 25); setPage(0); updateListRoute({ page: null }); }} rowsPerPageOptions={[15, 20, 25]} />
|
||||
</Paper>
|
||||
|
||||
<JobDetailsDialog open={detailsJobId !== null} jobId={detailsJobId} initialTab={detailsInitialTab} initialFollowUpMode={detailsFollowUpMode} onClose={() => { setDetailsJobId(null); setDetailsInitialTab(0); setDetailsFollowUpMode(undefined); }} onOpenWorkspace={(id) => { setDetailsJobId(null); updateWorkspaceRoute(id); }} />
|
||||
<Dialog
|
||||
open={workspaceJobId !== null}
|
||||
onClose={closeWorkspace}
|
||||
fullScreen={isMobile}
|
||||
fullWidth
|
||||
maxWidth="xl"
|
||||
slotProps={{ paper: { "aria-label": "Application workspace" } }}
|
||||
>
|
||||
<DialogContent sx={{ p: { xs: 1.5, sm: 2.5 } }}>
|
||||
{workspaceJobId ? (
|
||||
<ApplicationWorkspace
|
||||
jobIdOverride={workspaceJobId}
|
||||
sectionOverride={workspaceSectionKey}
|
||||
onSectionChange={updateWorkspaceSection}
|
||||
onClose={closeWorkspace}
|
||||
fullPageHref={`/applications/${workspaceJobId}?section=${workspaceSectionKey}`}
|
||||
/>
|
||||
) : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
<EditJobDialog open={editJobId !== null} jobId={editJobId} onClose={() => setEditJobId(null)} onSaved={() => setReloadToken((token) => token + 1)} />
|
||||
<Menu anchorEl={statusAnchor} open={Boolean(statusAnchor)} onClose={() => { setStatusAnchor(null); setStatusJobId(null); }}>
|
||||
{statusOptions.map((status) => <MenuItem key={status} onClick={() => { if (statusJobId) void setStatusQuick(statusJobId, status); setStatusAnchor(null); setStatusJobId(null); }}>{t("jobTableSetStatus", { status })}</MenuItem>)}
|
||||
|
||||
@@ -103,7 +103,7 @@ export default function QuickCommandDialog({ open, onClose, onNavigate, onOpenAd
|
||||
id: `job-${job.id}`,
|
||||
label: `${job.company?.name ?? t("company")} - ${job.jobTitle}`,
|
||||
hint: t("openJobListAndSearchResult"),
|
||||
action: () => onNavigate(`/jobs?open=${job.id}`),
|
||||
action: () => onNavigate(`/jobs/${job.id}`),
|
||||
})),
|
||||
...companies.slice(0, 6).map((company) => ({
|
||||
id: `company-${company.id}`,
|
||||
|
||||
@@ -16,10 +16,23 @@ export type JobWorkspaceOpenOptions = {
|
||||
followMode?: string;
|
||||
};
|
||||
|
||||
const WORKSPACE_SECTION_BY_TAB: Record<number, string> = {
|
||||
[JOB_DETAILS_TABS.overview]: "overview",
|
||||
[JOB_DETAILS_TABS.correspondence]: "communication",
|
||||
[JOB_DETAILS_TABS.attachments]: "documents",
|
||||
[JOB_DETAILS_TABS.tailoredCv]: "cv",
|
||||
[JOB_DETAILS_TABS.followUp]: "communication",
|
||||
[JOB_DETAILS_TABS.candidateFit]: "match",
|
||||
[JOB_DETAILS_TABS.focusPlan]: "analysis",
|
||||
[JOB_DETAILS_TABS.interviewPrep]: "interview",
|
||||
[JOB_DETAILS_TABS.readiness]: "checklist",
|
||||
[JOB_DETAILS_TABS.history]: "timeline",
|
||||
};
|
||||
|
||||
export function buildJobWorkspacePath(jobId: number, options: JobWorkspaceOpenOptions = {}) {
|
||||
const params = new URLSearchParams();
|
||||
params.set('open', String(jobId));
|
||||
if (typeof options.tab === 'number') params.set('tab', String(options.tab));
|
||||
const section = typeof options.tab === "number" ? WORKSPACE_SECTION_BY_TAB[options.tab] : undefined;
|
||||
if (section && section !== "overview") params.set("section", section);
|
||||
if (options.followMode) params.set('followMode', options.followMode);
|
||||
return `/jobs?${params.toString()}`;
|
||||
return `/jobs/${jobId}${params.size ? `?${params.toString()}` : ""}`;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
|
||||
import { useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
|
||||
|
||||
import {
|
||||
Alert, Box, Button, Chip, Divider, IconButton, List, ListItemButton, ListItemText, Paper,
|
||||
@@ -13,6 +13,7 @@ import MailOutlineIcon from "@mui/icons-material/MailOutline";
|
||||
import FolderOutlinedIcon from "@mui/icons-material/FolderOutlined";
|
||||
import AutoFixHighIcon from "@mui/icons-material/AutoFixHigh";
|
||||
import ChecklistIcon from "@mui/icons-material/Checklist";
|
||||
import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
|
||||
|
||||
import { getApiErrorMessage } from "../api";
|
||||
import Attachments from "../components/Attachments";
|
||||
@@ -26,6 +27,7 @@ import {
|
||||
ApplicationCoverLetterSection, ApplicationCvSection,
|
||||
} from "../components/ApplicationAssets";
|
||||
import { ApplicationInterviewPrep } from "../components/InterviewPrep";
|
||||
import EditJobDialog from "../components/EditJobDialog";
|
||||
import {
|
||||
WORKSPACE_SECTIONS, WorkspaceOverview, WorkspaceSectionKey, applicationWorkspaceApi, workspaceSection,
|
||||
} from "../applicationWorkspace";
|
||||
@@ -56,15 +58,23 @@ export function ApplicationWorkspace({
|
||||
}: ApplicationWorkspaceProps) {
|
||||
const { id } = useParams();
|
||||
const jobId = jobIdOverride ?? Number(id);
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const [params, setParams] = useSearchParams();
|
||||
const section = sectionOverride ?? workspaceSection(params.get("section"));
|
||||
|
||||
const [overview, setOverview] = useState<WorkspaceOverview | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [editOpen, setEditOpen] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!Number.isInteger(jobId) || jobId <= 0) {
|
||||
setOverview(null);
|
||||
setError("This application link is invalid.");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
setError(null);
|
||||
setOverview(await applicationWorkspaceApi.overview(jobId));
|
||||
} catch (err) {
|
||||
setError(getApiErrorMessage(err, "Could not open this application."));
|
||||
@@ -77,9 +87,12 @@ export function ApplicationWorkspace({
|
||||
|
||||
const go = (next: WorkspaceSectionKey) => {
|
||||
if (onSectionChange) onSectionChange(next);
|
||||
else setParams({ section: next }, { replace: true });
|
||||
else setParams({ section: next }, { replace: true, state: location.state });
|
||||
};
|
||||
const close = onClose ?? (() => navigate("/jobs"));
|
||||
const close = onClose ?? (() => {
|
||||
const from = (location.state as { from?: unknown } | null)?.from;
|
||||
navigate(typeof from === "string" && from.startsWith("/") && !from.startsWith("//") ? from : "/jobs", { replace: true });
|
||||
});
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
@@ -131,9 +144,9 @@ export function ApplicationWorkspace({
|
||||
</Paper>
|
||||
|
||||
<Box sx={{ display: "grid", gap: 2 }}>
|
||||
<WorkspaceHeader overview={overview} />
|
||||
<WorkspaceHeader overview={overview} onEdit={() => setEditOpen(true)} />
|
||||
{section === "overview" && <OverviewSection overview={overview} onGo={go} onReload={load} />}
|
||||
{section === "job-details" && <JobDetailsSection overview={overview} />}
|
||||
{section === "job-details" && <JobDetailsSection overview={overview} onEdit={() => setEditOpen(true)} />}
|
||||
{/* Deterministic answer first, then the AI panel below it — the page never generates on load. */}
|
||||
{section === "analysis" && jobId > 0 && <ApplicationAnalysis jobId={jobId} />}
|
||||
{section === "match" && jobId > 0 && <ApplicationMatch jobId={jobId} />}
|
||||
@@ -164,10 +177,16 @@ export function ApplicationWorkspace({
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
<EditJobDialog
|
||||
open={editOpen}
|
||||
jobId={jobId > 0 ? jobId : null}
|
||||
onClose={() => setEditOpen(false)}
|
||||
onSaved={() => { setEditOpen(false); void load(); }}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
function WorkspaceHeader({ overview }: { overview: WorkspaceOverview | null }) {
|
||||
function WorkspaceHeader({ overview, onEdit }: { overview: WorkspaceOverview | null; onEdit: () => void }) {
|
||||
if (!overview) return <Paper sx={{ p: 2.5, borderRadius: 3 }}><Skeleton width="45%" height={34} /><Skeleton width="30%" /></Paper>;
|
||||
return (
|
||||
<Paper sx={{ p: 2.5, borderRadius: 3 }}>
|
||||
@@ -179,8 +198,14 @@ function WorkspaceHeader({ overview }: { overview: WorkspaceOverview | null }) {
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack direction="row" spacing={1} alignItems="center">
|
||||
<Tooltip title="Edit application">
|
||||
<IconButton size="small" aria-label="Edit application" onClick={onEdit}>
|
||||
<EditOutlinedIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Chip size="small" label={overview.status} color="primary" variant="outlined" />
|
||||
<Chip size="small" label={overview.stageGroup} />
|
||||
{overview.source ? <Chip size="small" label={overview.source.toUpperCase()} variant="outlined" /> : null}
|
||||
{overview.jobUrl && (
|
||||
<Tooltip title="Open original advert">
|
||||
<IconButton size="small" aria-label="Open original advert" href={overview.jobUrl} target="_blank" rel="noopener noreferrer">
|
||||
@@ -267,34 +292,72 @@ function OverviewSection({ overview, onGo, onReload }: {
|
||||
);
|
||||
}
|
||||
|
||||
function JobDetailsSection({ overview }: { overview: WorkspaceOverview | null }) {
|
||||
function JobDetailsSection({ overview, onEdit }: { overview: WorkspaceOverview | null; onEdit: () => void }) {
|
||||
if (!overview) return <Skeleton variant="rounded" height={200} />;
|
||||
const rows: [string, string][] = [
|
||||
["Company", overview.company ?? "—"],
|
||||
["Location", overview.location ?? "—"],
|
||||
["Country", overview.countryCode ?? "—"],
|
||||
["Source", overview.source ?? "—"],
|
||||
["Salary", overview.salary ?? "—"],
|
||||
["Status", overview.status],
|
||||
["Discovered", overview.savedAt ? new Date(overview.savedAt).toLocaleDateString() : "—"],
|
||||
["Applied", overview.dateApplied ? new Date(overview.dateApplied).toLocaleDateString() : "—"],
|
||||
["Deadline", overview.deadline ? new Date(overview.deadline).toLocaleDateString() : "—"],
|
||||
["Follow-up", overview.followUpAt ? new Date(overview.followUpAt).toLocaleDateString() : "Not scheduled"],
|
||||
["Next action", overview.nextAction ?? "—"],
|
||||
];
|
||||
return (
|
||||
<Paper sx={{ p: 2, borderRadius: 3 }}>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 800, mb: 1 }}>Job details</Typography>
|
||||
{!overview.hasJobDescription && (
|
||||
<Alert severity="warning" sx={{ mb: 1.5, borderRadius: 2 }}>
|
||||
No advert text saved. Analysis and matching need it — add it from the application dialog.
|
||||
</Alert>
|
||||
)}
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "160px 1fr" }, rowGap: 0.75, columnGap: 2 }}>
|
||||
{rows.map(([k, v]) => (
|
||||
<React.Fragment key={k}>
|
||||
<Typography variant="body2" color="text.secondary">{k}</Typography>
|
||||
<Typography variant="body2">{v}</Typography>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Box>
|
||||
</Paper>
|
||||
<Stack spacing={2}>
|
||||
<Paper sx={{ p: 2.5, borderRadius: 3 }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between" gap={1} sx={{ mb: 1.5 }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 800 }}>Application information</Typography>
|
||||
<Button size="small" startIcon={<EditOutlinedIcon />} onClick={onEdit}>Edit</Button>
|
||||
</Stack>
|
||||
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", sm: "repeat(2, minmax(0, 1fr))", lg: "repeat(4, minmax(0, 1fr))" }, gap: 1.5 }}>
|
||||
{rows.map(([k, v]) => (
|
||||
<Box key={k} sx={{ minWidth: 0 }}>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 700 }}>{k}</Typography>
|
||||
<Typography variant="body2" sx={{ overflowWrap: "anywhere" }}>{v}</Typography>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
{overview.tags.length > 0 ? (
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.75, mt: 2 }}>
|
||||
{overview.tags.map((tag) => <Chip key={tag} size="small" label={tag} />)}
|
||||
</Box>
|
||||
) : null}
|
||||
{overview.notes ? (
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ fontWeight: 700 }}>Notes</Typography>
|
||||
<Typography variant="body2" sx={{ mt: 0.5, whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}>{overview.notes}</Typography>
|
||||
</Box>
|
||||
) : null}
|
||||
</Paper>
|
||||
|
||||
<Paper sx={{ p: { xs: 2, sm: 2.5 }, borderRadius: 3 }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 800, mb: 1.5 }}>Job description</Typography>
|
||||
{!overview.hasJobDescription ? (
|
||||
<Alert severity="warning" sx={{ borderRadius: 2 }} action={<Button color="inherit" size="small" onClick={onEdit}>Add advert</Button>}>
|
||||
No advert text saved. Analysis and matching need the job description.
|
||||
</Alert>
|
||||
) : (
|
||||
<Stack spacing={2.5}>
|
||||
{overview.translatedDescription ? (
|
||||
<Box>
|
||||
<Typography variant="overline" color="text.secondary">Translated advert</Typography>
|
||||
<Typography sx={{ mt: 0.5, whiteSpace: "pre-wrap", overflowWrap: "anywhere", lineHeight: 1.7 }}>{overview.translatedDescription}</Typography>
|
||||
</Box>
|
||||
) : null}
|
||||
{overview.description ? (
|
||||
<Box>
|
||||
{overview.translatedDescription ? <Typography variant="overline" color="text.secondary">Original advert{overview.descriptionLanguage ? ` · ${overview.descriptionLanguage.toUpperCase()}` : ""}</Typography> : null}
|
||||
<Typography sx={{ mt: 0.5, whiteSpace: "pre-wrap", overflowWrap: "anywhere", lineHeight: 1.7 }}>{overview.description}</Typography>
|
||||
</Box>
|
||||
) : null}
|
||||
</Stack>
|
||||
)}
|
||||
</Paper>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -663,7 +663,7 @@ export default function CorrespondenceInboxPage() {
|
||||
{item.labelCount > 0 ? <Chip size="small" label={`${item.labelCount} labels`} variant="outlined" /> : null}
|
||||
{item.attachmentCount > 0 ? <Chip size="small" label={`${item.attachmentCount} attachments`} variant="outlined" /> : null}
|
||||
<Button size="small" variant="text" onClick={() => void showMessage(item)}>{selectedMessageId === item.id ? "Hide message" : "View message"}</Button>
|
||||
<Button size="small" variant="text" onClick={() => navigate(`/jobs?open=${item.jobApplicationId}`)}>Open job</Button>
|
||||
<Button size="small" variant="text" onClick={() => navigate(`/jobs/${item.jobApplicationId}?section=communication`)}>Open job</Button>
|
||||
{item.provider === "gmail" && item.externalThreadId ? (
|
||||
<Button size="small" color="warning" variant="text" disabled={unlinkingThreadId === item.externalThreadId} onClick={() => void unlinkGmailThread(item)}>
|
||||
{unlinkingThreadId === item.externalThreadId ? "Unlinking…" : "Unlink thread"}
|
||||
|
||||
@@ -109,7 +109,7 @@ export default function GmailReviewPage({ embedded = false }: { embedded?: boole
|
||||
});
|
||||
await load();
|
||||
toast(`Created suggested job and imported ${res.data.imported} message${res.data.imported === 1 ? "" : "s"}.`, "success");
|
||||
navigate(`/jobs?open=${res.data.jobApplicationId}`);
|
||||
navigate(`/jobs/${res.data.jobApplicationId}?section=communication`);
|
||||
} catch (error) {
|
||||
toast(getApiErrorMessage(error, "Failed to create the suggested job."), "error");
|
||||
} finally {
|
||||
@@ -216,7 +216,7 @@ export default function GmailReviewPage({ embedded = false }: { embedded?: boole
|
||||
/>
|
||||
))}
|
||||
{thread.jobCandidates[0] ? (
|
||||
<Button size="small" variant="text" onClick={() => navigate(`/jobs?open=${thread.jobCandidates[0].jobApplicationId}`)}>
|
||||
<Button size="small" variant="text" onClick={() => navigate(`/jobs/${thread.jobCandidates[0].jobApplicationId}?section=communication`)}>
|
||||
Open top job
|
||||
</Button>
|
||||
) : null}
|
||||
|
||||
@@ -93,7 +93,7 @@ function renderWithProviders(initialPath: string, routes: React.ReactNode) {
|
||||
<I18nProvider>
|
||||
<ConfirmProvider>
|
||||
<PromptProvider>
|
||||
<MemoryRouter initialEntries={[initialPath]} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
|
||||
<MemoryRouter initialEntries={[initialPath]}>
|
||||
<Routes>{routes}</Routes>
|
||||
</MemoryRouter>
|
||||
</PromptProvider>
|
||||
@@ -134,32 +134,32 @@ test('follow-up workflow signals route all overview surfaces to the same follow-
|
||||
|
||||
const dashboardRender = renderWithProviders('/dashboard', <>
|
||||
<Route path="/dashboard" element={<><LocationIndicator /><DashboardView /></>} />
|
||||
<Route path="/jobs" element={<LocationIndicator />} />
|
||||
<Route path="/jobs/:id" element={<LocationIndicator />} />
|
||||
</>);
|
||||
|
||||
await screen.findByText(/follow-up is due for this role/i);
|
||||
fireEvent.click(await screen.findByRole('button', { name: /follow up/i }));
|
||||
await waitFor(() => expect(screen.getByTestId('location-indicator')).toHaveTextContent('/jobs?open=42&tab=4&followMode=waiting-update'));
|
||||
await waitFor(() => expect(screen.getByTestId('location-indicator')).toHaveTextContent('/jobs/42?section=communication&followMode=waiting-update'));
|
||||
dashboardRender.unmount();
|
||||
|
||||
setupApiMocks({ reminders: [job], jobs: [job] });
|
||||
const remindersRender = renderWithProviders('/reminders', <>
|
||||
<Route path="/reminders" element={<><LocationIndicator /><RemindersView /></>} />
|
||||
<Route path="/jobs" element={<LocationIndicator />} />
|
||||
<Route path="/jobs/:id" element={<LocationIndicator />} />
|
||||
</>);
|
||||
|
||||
fireEvent.click(await screen.findByRole('button', { name: /follow up/i }));
|
||||
await waitFor(() => expect(screen.getByTestId('location-indicator')).toHaveTextContent('/jobs?open=42&tab=4&followMode=waiting-update'));
|
||||
await waitFor(() => expect(screen.getByTestId('location-indicator')).toHaveTextContent('/jobs/42?section=communication&followMode=waiting-update'));
|
||||
remindersRender.unmount();
|
||||
|
||||
setupApiMocks({ reminders: [job], jobs: [job] });
|
||||
renderWithProviders('/table', <>
|
||||
<Route path="/table" element={<><LocationIndicator /><JobTable refreshToken={0} pageSize={15} onPageSizeChange={() => {}} columns={{ status: true, dateApplied: true, daysSince: true, jobUrl: false }} onColumnsChange={() => {}} mode="jobs" /></>} />
|
||||
<Route path="/jobs" element={<LocationIndicator />} />
|
||||
<Route path="/jobs/:id" element={<LocationIndicator />} />
|
||||
</>);
|
||||
|
||||
fireEvent.click(await screen.findByRole('button', { name: /backend developer — follow up signal/i }));
|
||||
await waitFor(() => expect(screen.getByTestId('location-indicator')).toHaveTextContent('/jobs?open=42&tab=4&followMode=waiting-update'));
|
||||
await waitFor(() => expect(screen.getByTestId('location-indicator')).toHaveTextContent('/jobs/42?section=communication&followMode=waiting-update'));
|
||||
});
|
||||
|
||||
test('package-work workflow signals route all overview surfaces to the shared tailored-cv workspace', async () => {
|
||||
@@ -186,31 +186,31 @@ test('package-work workflow signals route all overview surfaces to the shared ta
|
||||
|
||||
const dashboardRender = renderWithProviders('/dashboard', <>
|
||||
<Route path="/dashboard" element={<><LocationIndicator /><DashboardView /></>} />
|
||||
<Route path="/jobs" element={<LocationIndicator />} />
|
||||
<Route path="/jobs/:id" element={<LocationIndicator />} />
|
||||
</>);
|
||||
|
||||
fireEvent.click(await screen.findByRole('button', { name: /build package/i }));
|
||||
await waitFor(() => expect(screen.getByTestId('location-indicator')).toHaveTextContent('/jobs?open=43&tab=3'));
|
||||
await waitFor(() => expect(screen.getByTestId('location-indicator')).toHaveTextContent('/jobs/43?section=cv'));
|
||||
dashboardRender.unmount();
|
||||
|
||||
setupApiMocks({ reminders: [job], jobs: [job] });
|
||||
const remindersRender = renderWithProviders('/reminders', <>
|
||||
<Route path="/reminders" element={<><LocationIndicator /><RemindersView /></>} />
|
||||
<Route path="/jobs" element={<LocationIndicator />} />
|
||||
<Route path="/jobs/:id" element={<LocationIndicator />} />
|
||||
</>);
|
||||
|
||||
fireEvent.click(await screen.findByRole('button', { name: /build package/i }));
|
||||
await waitFor(() => expect(screen.getByTestId('location-indicator')).toHaveTextContent('/jobs?open=43&tab=3'));
|
||||
await waitFor(() => expect(screen.getByTestId('location-indicator')).toHaveTextContent('/jobs/43?section=cv'));
|
||||
remindersRender.unmount();
|
||||
|
||||
setupApiMocks({ reminders: [job], jobs: [job] });
|
||||
renderWithProviders('/table', <>
|
||||
<Route path="/table" element={<><LocationIndicator /><JobTable refreshToken={0} pageSize={15} onPageSizeChange={() => {}} columns={{ status: true, dateApplied: true, daysSince: true, jobUrl: false }} onColumnsChange={() => {}} mode="jobs" /></>} />
|
||||
<Route path="/jobs" element={<LocationIndicator />} />
|
||||
<Route path="/jobs/:id" element={<LocationIndicator />} />
|
||||
</>);
|
||||
|
||||
fireEvent.click(await screen.findByRole('button', { name: /platform engineer — build package signal/i }));
|
||||
await waitFor(() => expect(screen.getByTestId('location-indicator')).toHaveTextContent('/jobs?open=43&tab=3'));
|
||||
await waitFor(() => expect(screen.getByTestId('location-indicator')).toHaveTextContent('/jobs/43?section=cv'));
|
||||
});
|
||||
|
||||
test('job table readiness filter follows workflow signals instead of raw notes or cv text heuristics', async () => {
|
||||
|
||||
Reference in New Issue
Block a user