feat: add NAV job discovery

job-tracker-ui/src/App.tsx

@@ -43,6 +43,7 @@ import { getThemeModePref, setThemeModePref, ThemeModePref } from "./themePrefs"
 const AddJobModal = lazy(() => import("./components/AddJobModal"));
 const KanbanBoard = lazy(() => import("./components/KanbanBoard"));
 const DashboardView = lazy(() => import("./components/DashboardView"));
+const JobDiscoveryPage = lazy(() => import("./views/JobDiscoveryPage"));
 const CompaniesTable = lazy(() => import("./components/CompaniesTable"));
 const SettingsView = lazy(() => import("./components/SettingsView"));
 const RemindersView = lazy(() => import("./components/RemindersView"));
@@ -76,6 +77,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 (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")];
@@ -97,6 +99,7 @@ function breadcrumbsFor(path: string, t: (k: any) => string): string[] {
 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("/discover")) return "Discover jobs";
   if (path.startsWith("/jobs")) return t("jobApplications");
   if (path.startsWith("/kanban")) return t("kanbanBoard");
   if (path.startsWith("/companies")) return t("companies");
@@ -116,6 +119,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 (path.startsWith("/jobs")) return t("jobsPageSubtitle");
   if (path.startsWith("/kanban")) return t("kanbanPageSubtitle");
   if (path.startsWith("/reminders")) return t("remindersPageSubtitle");
@@ -242,6 +246,7 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo
   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: "/discover", label: "Discover jobs", icon: <SearchIcon 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") },
@@ -322,6 +327,7 @@ function Shell({ jobPageSize, setJobPageSize, jobColumns, setJobColumns, themeMo
           <Routes>
             <Route path="/" element={<Navigate to="/dashboard" replace />} />
             <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="/reminders" element={<RemindersView />} />
             <Route path="/kanban" element={<KanbanBoard />} />

job-tracker-ui/src/job-discovery.test.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { api } from "./api";
+import JobDiscoveryPage from "./views/JobDiscoveryPage";
+
+jest.mock("./api", () => ({ api: { get: jest.fn() } }));
+const mockedApi = api as jest.Mocked<typeof api>;
+
+test("searches NAV and offers the existing reviewed save flow", async () => {
+  mockedApi.get.mockResolvedValue({ data: [{ id: "abc", title: "Backend Developer", company: "Acme", location: "OSLO", url: "https://arbeidsplassen.nav.no/stillinger/stilling/abc", source: "nav", countryCode: "NO" }] } as any);
+  render(<MemoryRouter><JobDiscoveryPage /></MemoryRouter>);
+
+  fireEvent.change(screen.getByLabelText("Role or company"), { target: { value: "backend" } });
+  fireEvent.click(screen.getByRole("button", { name: "Search NAV" }));
+
+  expect(await screen.findByText("Backend Developer")).toBeInTheDocument();
+  await waitFor(() => expect(mockedApi.get).toHaveBeenCalledWith("/job-discovery/search", { params: { q: "backend", location: undefined } }));
+  expect(screen.getByRole("button", { name: "Save to tracker" })).toBeInTheDocument();
+});

job-tracker-ui/src/views/JobDiscoveryPage.tsx

@@ -0,0 +1,54 @@
+import { FormEvent, useState } from "react";
+import { Alert, Box, Button, Card, CardActions, CardContent, CircularProgress, Stack, TextField, Typography } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import AddIcon from "@mui/icons-material/Add";
+import { useNavigate } from "react-router-dom";
+import { api } from "../api";
+
+type DiscoveredJob = { id: string; title: string; company?: string; location?: string; modifiedAt?: string; url: string; source: string; countryCode: string; };
+
+export default function JobDiscoveryPage() {
+  const navigate = useNavigate();
+  const [query, setQuery] = useState("");
+  const [location, setLocation] = useState("");
+  const [jobs, setJobs] = useState<DiscoveredJob[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const search = async (event: FormEvent) => {
+    event.preventDefault(); setLoading(true); setError("");
+    try {
+      const response = await api.get<DiscoveredJob[]>("/job-discovery/search", { params: { q: query || undefined, location: location || undefined } });
+      setJobs(response.data ?? []);
+    } catch { setError("NAV job discovery is temporarily unavailable."); }
+    finally { setLoading(false); }
+  };
+
+  return (
+    <Stack spacing={3}>
+      <Box component="form" onSubmit={search} sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "2fr 1fr auto" }, gap: 1.5 }}>
+        <TextField label="Role or company" value={query} onChange={(event) => setQuery(event.target.value)} />
+        <TextField label="Municipality" value={location} onChange={(event) => setLocation(event.target.value)} />
+        <Button type="submit" variant="contained" startIcon={loading ? <CircularProgress size={18} color="inherit" /> : <SearchIcon />} disabled={loading}>Search NAV</Button>
+      </Box>
+      <Alert severity="info">Official Norwegian vacancies from NAV. FINN, Indeed and LinkedIn jobs can still be captured by URL.</Alert>
+      {error ? <Alert severity="error">{error}</Alert> : null}
+      {!loading && jobs.length === 0 ? <Typography color="text.secondary">Search recent active vacancies by role, company, or municipality.</Typography> : null}
+      <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", lg: "repeat(2, minmax(0, 1fr))" }, gap: 2 }}>
+        {jobs.map((job) => (
+          <Card key={job.id} variant="outlined">
+            <CardContent>
+              <Typography variant="h6" sx={{ fontWeight: 800 }}>{job.title}</Typography>
+              <Typography color="text.secondary">{[job.company, job.location].filter(Boolean).join(" · ")}</Typography>
+              <Typography variant="caption" color="text.secondary">NAV · Norway{job.modifiedAt ? " · Updated " + new Date(job.modifiedAt).toLocaleDateString() : ""}</Typography>
+            </CardContent>
+            <CardActions>
+              <Button href={job.url} target="_blank" rel="noreferrer">View listing</Button>
+              <Button startIcon={<AddIcon />} onClick={() => navigate("/jobs?add=" + encodeURIComponent(job.url))}>Save to tracker</Button>
+            </CardActions>
+          </Card>
+        ))}
+      </Box>
+    </Stack>
+  );
+}