feat(frontend): exibe histórico de candidatura

frontend/src/domains/new_dashboard/NewDashboardPage.tsx

@@ -163,6 +163,7 @@ export default function NewDashboardPage() {
  const [countryFilter, setCountryFilter] = useState<CountryFilter>("Todos");
  const [matchSort, setMatchSort] = useState<MatchSort>("default");
  const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+ const [timelineVersion, setTimelineVersion] = useState(0);
  const [searchParams, setSearchParams] = useSearchParams();
  const [isAddJobOpen, setIsAddJobOpen] = useState(false);
  const [toast, setToast] = useState("");
@@ -357,6 +358,7 @@ export default function NewDashboardPage() {
  const updatedJob = await changeJobStatus(jobId, status);
  if (updatedJob && selectedJobId === jobId) {
  setSelectedJobId(updatedJob.id);
+ setTimelineVersion((current) => current + 1);
  }
  showToast(`Vaga atualizada para: ${jobStatuses[status]}`);
  } catch {
@@ -572,6 +574,8 @@ export default function NewDashboardPage() {
  onClose={handleCloseJob}
  onStatusChange={handleStatusChange}
  onNotesChange={handleNotesChange}
+ isTracked={trackedJobs.some((job) => job.id === selectedJob.id)}
+ timelineVersion={timelineVersion}
  />
  ) : null}
 

frontend/src/domains/new_dashboard/components/jobs/JobDetailModal.tsx

@@ -1,6 +1,8 @@
 import { ExternalLink } from "lucide-react";
+import { useEffect, useState } from "react";
 import { jobStatusClasses, jobStatuses } from "../../constants";
-import type { Job, JobStatus } from "../../types";
+import type { Job, JobStatus, JobTimelineEvent } from "../../types";
+import { getDashboardSavedJobEvents } from "../../infrastructure/dashboardJobsApi";
 import { Modal } from "../shared/Modal";
 import { FormattedJobDescription } from "./FormattedJobDescription";
 
@@ -9,6 +11,8 @@ interface JobDetailModalProps {
  onClose: () => void;
  onStatusChange: (jobId: string, status: JobStatus) => void;
  onNotesChange: (jobId: string, notes: string) => void;
+ isTracked?: boolean;
+ timelineVersion?: number;
 }
 
 const payloadLabels: Record<string, string> = {
@@ -44,12 +48,69 @@ function isExternalUrl(value: string) {
  return /^https?:\/\//i.test(value);
 }
 
+function formatTimelineDate(value: string) {
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return "Data não informada";
+
+ return new Intl.DateTimeFormat("pt-BR", {
+ dateStyle: "short",
+ timeStyle: "short",
+ }).format(date);
+}
+
+function orderTimeline(events: JobTimelineEvent[]) {
+ return [...events].sort(
+ (first, second) =>
+ new Date(first.createdAt).getTime() - new Date(second.createdAt).getTime(),
+ );
+}
+
+function timelineMetadataText(metadata: Record<string, unknown> | null) {
+ if (!metadata) return "";
+
+ return Object.entries(metadata)
+ .map(([key, value]) => `${key}: ${payloadValueToText(value)}`)
+ .join(" • ");
+}
+
 export function JobDetailModal({
  job,
  onClose,
  onStatusChange,
  onNotesChange,
+ isTracked = false,
+ timelineVersion = 0,
 }: JobDetailModalProps) {
+ const [timeline, setTimeline] = useState<JobTimelineEvent[]>([]);
+ const [isTimelineLoading, setIsTimelineLoading] = useState(false);
+ const [timelineError, setTimelineError] = useState(false);
+
+ useEffect(() => {
+ if (!isTracked) return;
+
+ let active = true;
+ void Promise.resolve()
+ .then(() => {
+ if (!active) return null;
+ setIsTimelineLoading(true);
+ setTimelineError(false);
+ return getDashboardSavedJobEvents(job.id);
+ })
+ .then((events) => {
+ if (active && events) setTimeline(orderTimeline(events));
+ })
+ .catch(() => {
+ if (active) setTimelineError(true);
+ })
+ .finally(() => {
+ if (active) setIsTimelineLoading(false);
+ });
+
+ return () => {
+ active = false;
+ };
+ }, [isTracked, job.id, timelineVersion]);
+
  const payloadEntries = Object.entries(job.rawPayload ?? {}).filter(
  ([key]) => key !== "description",
  );
@@ -199,6 +260,51 @@ export function JobDetailModal({
  className="min-h-28 w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:border-ring"
  />
  </label>
+
+ {isTracked ? (
+ <section className="space-y-2" aria-labelledby="timeline-title">
+ <h3
+ id="timeline-title"
+ className="text-xs font-bold uppercase text-muted-foreground"
+ >
+ Histórico da candidatura
+ </h3>
+ {isTimelineLoading ? (
+ <p className="text-sm text-muted-foreground">Carregando histórico...</p>
+ ) : null}
+ {timelineError ? (
+ <p className="text-sm text-destructive">
+ Não foi possível carregar o histórico.
+ </p>
+ ) : null}
+ {!isTimelineLoading && !timelineError && timeline.length === 0 ? (
+ <p className="text-sm text-muted-foreground">
+ Nenhuma mudança de status registrada.
+ </p>
+ ) : null}
+ {!isTimelineLoading && !timelineError && timeline.length > 0 ? (
+ <ol className="space-y-2 border-l border-border pl-4">
+ {timeline.map((event) => (
+ <li key={event.id} className="relative text-sm">
+ <span className="absolute -left-[21px] top-1.5 h-2 w-2 rounded-full bg-primary" />
+ <p className="font-semibold">
+ Status alterado de {jobStatuses[event.fromStatus]} para{" "}
+ {jobStatuses[event.toStatus]}
+ </p>
+ <time className="text-xs text-muted-foreground" dateTime={event.createdAt}>
+ {formatTimelineDate(event.createdAt)}
+ </time>
+ {timelineMetadataText(event.metadata) ? (
+ <p className="text-xs text-muted-foreground">
+ {timelineMetadataText(event.metadata)}
+ </p>
+ ) : null}
+ </li>
+ ))}
+ </ol>
+ ) : null}
+ </section>
+ ) : null}
  </div>
  </Modal>
  );

frontend/src/domains/new_dashboard/infrastructure/dashboardJobsApi.ts

@@ -4,6 +4,7 @@ import type {
  Job,
  JobLevel,
  JobStatus,
+ JobTimelineEvent,
  JobType,
  MatchSort,
  NewJob,
@@ -54,8 +55,18 @@ const ApiSavedJobSchema = z.object({
  updatedAt: z.string().optional(),
 });
 
+const ApiSavedJobEventSchema = z.object({
+ id: z.string(),
+ type: z.literal("status_changed"),
+ fromStatus: z.enum(["saved", "applied", "interviewing", "rejected", "accepted"]),
+ toStatus: z.enum(["saved", "applied", "interviewing", "rejected", "accepted"]),
+ metadata: z.record(z.string(), z.unknown()).nullable().optional(),
+ createdAt: z.string(),
+});
+
 type ApiSearchJob = z.infer<typeof ApiSearchJobSchema>;
 type ApiSavedJob = z.infer<typeof ApiSavedJobSchema>;
+type ApiSavedJobEvent = z.infer<typeof ApiSavedJobEventSchema>;
 type SearchJobsResponse = z.infer<typeof SearchJobsResponseSchema>;
 
 export type SearchJobFilters = {
@@ -279,6 +290,13 @@ export function toDashboardSavedJob(job: ApiSavedJob): Job {
  };
 }
 
+function toDashboardSavedJobEvent(event: ApiSavedJobEvent): JobTimelineEvent {
+ return {
+ ...event,
+ metadata: event.metadata ?? null,
+ };
+}
+
 function toSearchJobsResult(
  response: SearchJobsResponse,
  page: number,
@@ -355,6 +373,11 @@ export async function getDashboardSavedJobs() {
  return z.array(ApiSavedJobSchema).parse(data).map(toDashboardSavedJob);
 }
 
+export async function getDashboardSavedJobEvents(id: string) {
+ const { data } = await api.get(`/saved-jobs/${id}/events`);
+ return z.array(ApiSavedJobEventSchema).parse(data).map(toDashboardSavedJobEvent);
+}
+
 export async function createDashboardSavedJob(
  job: Job | NewJob,
  status: JobStatus = "saved",

frontend/src/domains/new_dashboard/types/job.ts

@@ -52,6 +52,14 @@ export type JobType = z.infer<typeof JobTypeSchema>;
 export type JobLevel = z.infer<typeof JobLevelSchema>;
 export type Job = z.infer<typeof JobSchema>;
 export type NewJob = z.infer<typeof NewJobSchema>;
+export type JobTimelineEvent = {
+ id: string;
+ type: "status_changed";
+ fromStatus: JobStatus;
+ toStatus: JobStatus;
+ metadata: Record<string, unknown> | null;
+ createdAt: string;
+};
 export type MatchSort = "default" | "desc" | "asc";
 export type JobModelFilter =
  | "Todos"

frontend/tests/unit/new_dashboard/api.test.ts

@@ -14,6 +14,7 @@ vi.mock("@/shared/lib/apiClient", () => ({
 import {
  createDashboardSavedJob,
  deleteDashboardSavedJob,
+ getDashboardSavedJobEvents,
  getDashboardSavedJobs,
  searchDashboardJobs,
  toRecommendedJob,
@@ -379,6 +380,32 @@ it("mapeia entityId para jobId apenas quando entityType é job, e readAt para is
  });
  });
 
+ it("busca e tipa os eventos da vaga salva", async () => {
+ apiMock.get.mockResolvedValue({
+ data: [
+ {
+ id: "event-1",
+ type: "status_changed",
+ fromStatus: "saved",
+ toStatus: "applied",
+ metadata: { source: "dashboard" },
+ createdAt: "2026-07-10T12:00:00.000Z",
+ },
+ ],
+ });
+
+ const events = await getDashboardSavedJobEvents("saved-1");
+
+ expect(apiMock.get).toHaveBeenCalledWith("/saved-jobs/saved-1/events");
+ expect(events).toEqual([
+ expect.objectContaining({
+ fromStatus: "saved",
+ toStatus: "applied",
+ metadata: { source: "dashboard" },
+ }),
+ ]);
+ });
+
  it("cria, atualiza e remove vagas salvas", async () => {
  apiMock.post.mockResolvedValue({
  data: {

frontend/src/domains/new_dashboard/NewDashboardPage.tsx

@@ -163,6 +163,7 @@ export default function NewDashboardPage() {
  const [countryFilter, setCountryFilter] = useState<CountryFilter>("Todos");
  const [matchSort, setMatchSort] = useState<MatchSort>("default");
  const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+ const [timelineVersion, setTimelineVersion] = useState(0);
  const [searchParams, setSearchParams] = useSearchParams();
  const [isAddJobOpen, setIsAddJobOpen] = useState(false);
  const [toast, setToast] = useState("");
@@ -357,6 +358,7 @@ export default function NewDashboardPage() {
  const updatedJob = await changeJobStatus(jobId, status);
  if (updatedJob && selectedJobId === jobId) {
  setSelectedJobId(updatedJob.id);
+ setTimelineVersion((current) => current + 1);
  }
  showToast(`Vaga atualizada para: ${jobStatuses[status]}`);
  } catch {
@@ -572,6 +574,8 @@ export default function NewDashboardPage() {
  onClose={handleCloseJob}
  onStatusChange={handleStatusChange}
  onNotesChange={handleNotesChange}
+ isTracked={trackedJobs.some((job) => job.id === selectedJob.id)}
+ timelineVersion={timelineVersion}
  />
  ) : null}
 

frontend/src/domains/new_dashboard/components/jobs/JobDetailModal.tsx

@@ -1,6 +1,8 @@
 import { ExternalLink } from "lucide-react";
+import { useEffect, useState } from "react";
 import { jobStatusClasses, jobStatuses } from "../../constants";
-import type { Job, JobStatus } from "../../types";
+import type { Job, JobStatus, JobTimelineEvent } from "../../types";
+import { getDashboardSavedJobEvents } from "../../infrastructure/dashboardJobsApi";
 import { Modal } from "../shared/Modal";
 import { FormattedJobDescription } from "./FormattedJobDescription";
 
@@ -9,6 +11,8 @@ interface JobDetailModalProps {
  onClose: () => void;
  onStatusChange: (jobId: string, status: JobStatus) => void;
  onNotesChange: (jobId: string, notes: string) => void;
+ isTracked?: boolean;
+ timelineVersion?: number;
 }
 
 const payloadLabels: Record<string, string> = {
@@ -44,12 +48,69 @@ function isExternalUrl(value: string) {
  return /^https?:\/\//i.test(value);
 }
 
+function formatTimelineDate(value: string) {
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return "Data não informada";
+
+ return new Intl.DateTimeFormat("pt-BR", {
+ dateStyle: "short",
+ timeStyle: "short",
+ }).format(date);
+}
+
+function orderTimeline(events: JobTimelineEvent[]) {
+ return [...events].sort(
+ (first, second) =>
+ new Date(first.createdAt).getTime() - new Date(second.createdAt).getTime(),
+ );
+}
+
+function timelineMetadataText(metadata: Record<string, unknown> | null) {
+ if (!metadata) return "";
+
+ return Object.entries(metadata)
+ .map(([key, value]) => `${key}: ${payloadValueToText(value)}`)
+ .join(" • ");
+}
+
 export function JobDetailModal({
  job,
  onClose,
  onStatusChange,
  onNotesChange,
+ isTracked = false,
+ timelineVersion = 0,
 }: JobDetailModalProps) {
+ const [timeline, setTimeline] = useState<JobTimelineEvent[]>([]);
+ const [isTimelineLoading, setIsTimelineLoading] = useState(false);
+ const [timelineError, setTimelineError] = useState(false);
+
+ useEffect(() => {
+ if (!isTracked) return;
+
+ let active = true;
+ void Promise.resolve()
+ .then(() => {
+ if (!active) return null;
+ setIsTimelineLoading(true);
+ setTimelineError(false);
+ return getDashboardSavedJobEvents(job.id);
+ })
+ .then((events) => {
+ if (active && events) setTimeline(orderTimeline(events));
+ })
+ .catch(() => {
+ if (active) setTimelineError(true);
+ })
+ .finally(() => {
+ if (active) setIsTimelineLoading(false);
+ });
+
+ return () => {
+ active = false;
+ };
+ }, [isTracked, job.id, timelineVersion]);
+
  const payloadEntries = Object.entries(job.rawPayload ?? {}).filter(
  ([key]) => key !== "description",
  );
@@ -199,6 +260,51 @@ export function JobDetailModal({
  className="min-h-28 w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:border-ring"
  />
  </label>
+
+ {isTracked ? (
+ <section className="space-y-2" aria-labelledby="timeline-title">
+ <h3
+ id="timeline-title"
+ className="text-xs font-bold uppercase text-muted-foreground"
+ >
+ Histórico da candidatura
+ </h3>
+ {isTimelineLoading ? (
+ <p className="text-sm text-muted-foreground">Carregando histórico...</p>
+ ) : null}
+ {timelineError ? (
+ <p className="text-sm text-destructive">
+ Não foi possível carregar o histórico.
+ </p>
+ ) : null}
+ {!isTimelineLoading && !timelineError && timeline.length === 0 ? (
+ <p className="text-sm text-muted-foreground">
+ Nenhuma mudança de status registrada.
+ </p>
+ ) : null}
+ {!isTimelineLoading && !timelineError && timeline.length > 0 ? (
+ <ol className="space-y-2 border-l border-border pl-4">
+ {timeline.map((event) => (
+ <li key={event.id} className="relative text-sm">
+ <span className="absolute -left-[21px] top-1.5 h-2 w-2 rounded-full bg-primary" />
+ <p className="font-semibold">
+ Status alterado de {jobStatuses[event.fromStatus]} para{" "}
+ {jobStatuses[event.toStatus]}
+ </p>
+ <time className="text-xs text-muted-foreground" dateTime={event.createdAt}>
+ {formatTimelineDate(event.createdAt)}
+ </time>
+ {timelineMetadataText(event.metadata) ? (
+ <p className="text-xs text-muted-foreground">
+ {timelineMetadataText(event.metadata)}
+ </p>
+ ) : null}
+ </li>
+ ))}
+ </ol>
+ ) : null}
+ </section>
+ ) : null}
  </div>
  </Modal>
  );

frontend/src/domains/new_dashboard/infrastructure/dashboardJobsApi.ts

@@ -4,6 +4,7 @@ import type {
  Job,
  JobLevel,
  JobStatus,
+ JobTimelineEvent,
  JobType,
  MatchSort,
  NewJob,
@@ -54,8 +55,18 @@ const ApiSavedJobSchema = z.object({
  updatedAt: z.string().optional(),
 });
 
+const ApiSavedJobEventSchema = z.object({
+ id: z.string(),
+ type: z.literal("status_changed"),
+ fromStatus: z.enum(["saved", "applied", "interviewing", "rejected", "accepted"]),
+ toStatus: z.enum(["saved", "applied", "interviewing", "rejected", "accepted"]),
+ metadata: z.record(z.string(), z.unknown()).nullable().optional(),
+ createdAt: z.string(),
+});
+
 type ApiSearchJob = z.infer<typeof ApiSearchJobSchema>;
 type ApiSavedJob = z.infer<typeof ApiSavedJobSchema>;
+type ApiSavedJobEvent = z.infer<typeof ApiSavedJobEventSchema>;
 type SearchJobsResponse = z.infer<typeof SearchJobsResponseSchema>;
 
 export type SearchJobFilters = {
@@ -279,6 +290,13 @@ export function toDashboardSavedJob(job: ApiSavedJob): Job {
  };
 }
 
+function toDashboardSavedJobEvent(event: ApiSavedJobEvent): JobTimelineEvent {
+ return {
+ ...event,
+ metadata: event.metadata ?? null,
+ };
+}
+
 function toSearchJobsResult(
  response: SearchJobsResponse,
  page: number,
@@ -355,6 +373,11 @@ export async function getDashboardSavedJobs() {
  return z.array(ApiSavedJobSchema).parse(data).map(toDashboardSavedJob);
 }
 
+export async function getDashboardSavedJobEvents(id: string) {
+ const { data } = await api.get(`/saved-jobs/${id}/events`);
+ return z.array(ApiSavedJobEventSchema).parse(data).map(toDashboardSavedJobEvent);
+}
+
 export async function createDashboardSavedJob(
  job: Job | NewJob,
  status: JobStatus = "saved",

frontend/src/domains/new_dashboard/types/job.ts

@@ -52,6 +52,14 @@ export type JobType = z.infer<typeof JobTypeSchema>;
 export type JobLevel = z.infer<typeof JobLevelSchema>;
 export type Job = z.infer<typeof JobSchema>;
 export type NewJob = z.infer<typeof NewJobSchema>;
+export type JobTimelineEvent = {
+ id: string;
+ type: "status_changed";
+ fromStatus: JobStatus;
+ toStatus: JobStatus;
+ metadata: Record<string, unknown> | null;
+ createdAt: string;
+};
 export type MatchSort = "default" | "desc" | "asc";
 export type JobModelFilter =
  | "Todos"

frontend/tests/unit/new_dashboard/api.test.ts

@@ -14,6 +14,7 @@ vi.mock("@/shared/lib/apiClient", () => ({
 import {
  createDashboardSavedJob,
  deleteDashboardSavedJob,
+ getDashboardSavedJobEvents,
  getDashboardSavedJobs,
  searchDashboardJobs,
  toRecommendedJob,
@@ -379,6 +380,32 @@ it("mapeia entityId para jobId apenas quando entityType é job, e readAt para is
  });
  });
 
+ it("busca e tipa os eventos da vaga salva", async () => {
+ apiMock.get.mockResolvedValue({
+ data: [
+ {
+ id: "event-1",
+ type: "status_changed",
+ fromStatus: "saved",
+ toStatus: "applied",
+ metadata: { source: "dashboard" },
+ createdAt: "2026-07-10T12:00:00.000Z",
+ },
+ ],
+ });
+
+ const events = await getDashboardSavedJobEvents("saved-1");
+
+ expect(apiMock.get).toHaveBeenCalledWith("/saved-jobs/saved-1/events");
+ expect(events).toEqual([
+ expect.objectContaining({
+ fromStatus: "saved",
+ toStatus: "applied",
+ metadata: { source: "dashboard" },
+ }),
+ ]);
+ });
+
  it("cria, atualiza e remove vagas salvas", async () => {
  apiMock.post.mockResolvedValue({
  data: {

frontend/src/domains/new_dashboard/NewDashboardPage.tsx

@@ -163,6 +163,7 @@ export default function NewDashboardPage() {
  const [countryFilter, setCountryFilter] = useState<CountryFilter>("Todos");
  const [matchSort, setMatchSort] = useState<MatchSort>("default");
  const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+ const [timelineVersion, setTimelineVersion] = useState(0);
  const [searchParams, setSearchParams] = useSearchParams();
  const [isAddJobOpen, setIsAddJobOpen] = useState(false);
  const [toast, setToast] = useState("");
@@ -357,6 +358,7 @@ export default function NewDashboardPage() {
  const updatedJob = await changeJobStatus(jobId, status);
  if (updatedJob && selectedJobId === jobId) {
  setSelectedJobId(updatedJob.id);
+ setTimelineVersion((current) => current + 1);
  }
  showToast(`Vaga atualizada para: ${jobStatuses[status]}`);
  } catch {
@@ -572,6 +574,8 @@ export default function NewDashboardPage() {
  onClose={handleCloseJob}
  onStatusChange={handleStatusChange}
  onNotesChange={handleNotesChange}
+ isTracked={trackedJobs.some((job) => job.id === selectedJob.id)}
+ timelineVersion={timelineVersion}
  />
  ) : null}
 

frontend/src/domains/new_dashboard/components/jobs/JobDetailModal.tsx

@@ -1,6 +1,8 @@
 import { ExternalLink } from "lucide-react";
+import { useEffect, useState } from "react";
 import { jobStatusClasses, jobStatuses } from "../../constants";
-import type { Job, JobStatus } from "../../types";
+import type { Job, JobStatus, JobTimelineEvent } from "../../types";
+import { getDashboardSavedJobEvents } from "../../infrastructure/dashboardJobsApi";
 import { Modal } from "../shared/Modal";
 import { FormattedJobDescription } from "./FormattedJobDescription";
 
@@ -9,6 +11,8 @@ interface JobDetailModalProps {
  onClose: () => void;
  onStatusChange: (jobId: string, status: JobStatus) => void;
  onNotesChange: (jobId: string, notes: string) => void;
+ isTracked?: boolean;
+ timelineVersion?: number;
 }
 
 const payloadLabels: Record<string, string> = {
@@ -44,12 +48,69 @@ function isExternalUrl(value: string) {
  return /^https?:\/\//i.test(value);
 }
 
+function formatTimelineDate(value: string) {
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return "Data não informada";
+
+ return new Intl.DateTimeFormat("pt-BR", {
+ dateStyle: "short",
+ timeStyle: "short",
+ }).format(date);
+}
+
+function orderTimeline(events: JobTimelineEvent[]) {
+ return [...events].sort(
+ (first, second) =>
+ new Date(first.createdAt).getTime() - new Date(second.createdAt).getTime(),
+ );
+}
+
+function timelineMetadataText(metadata: Record<string, unknown> | null) {
+ if (!metadata) return "";
+
+ return Object.entries(metadata)
+ .map(([key, value]) => `${key}: ${payloadValueToText(value)}`)
+ .join(" • ");
+}
+
 export function JobDetailModal({
  job,
  onClose,
  onStatusChange,
  onNotesChange,
+ isTracked = false,
+ timelineVersion = 0,
 }: JobDetailModalProps) {
+ const [timeline, setTimeline] = useState<JobTimelineEvent[]>([]);
+ const [isTimelineLoading, setIsTimelineLoading] = useState(false);
+ const [timelineError, setTimelineError] = useState(false);
+
+ useEffect(() => {
+ if (!isTracked) return;
+
+ let active = true;
+ void Promise.resolve()
+ .then(() => {
+ if (!active) return null;
+ setIsTimelineLoading(true);
+ setTimelineError(false);
+ return getDashboardSavedJobEvents(job.id);
+ })
+ .then((events) => {
+ if (active && events) setTimeline(orderTimeline(events));
+ })
+ .catch(() => {
+ if (active) setTimelineError(true);
+ })
+ .finally(() => {
+ if (active) setIsTimelineLoading(false);
+ });
+
+ return () => {
+ active = false;
+ };
+ }, [isTracked, job.id, timelineVersion]);
+
  const payloadEntries = Object.entries(job.rawPayload ?? {}).filter(
  ([key]) => key !== "description",
  );
@@ -199,6 +260,51 @@ export function JobDetailModal({
  className="min-h-28 w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:border-ring"
  />
  </label>
+
+ {isTracked ? (
+ <section className="space-y-2" aria-labelledby="timeline-title">
+ <h3
+ id="timeline-title"
+ className="text-xs font-bold uppercase text-muted-foreground"
+ >
+ Histórico da candidatura
+ </h3>
+ {isTimelineLoading ? (
+ <p className="text-sm text-muted-foreground">Carregando histórico...</p>
+ ) : null}
+ {timelineError ? (
+ <p className="text-sm text-destructive">
+ Não foi possível carregar o histórico.
+ </p>
+ ) : null}
+ {!isTimelineLoading && !timelineError && timeline.length === 0 ? (
+ <p className="text-sm text-muted-foreground">
+ Nenhuma mudança de status registrada.
+ </p>
+ ) : null}
+ {!isTimelineLoading && !timelineError && timeline.length > 0 ? (
+ <ol className="space-y-2 border-l border-border pl-4">
+ {timeline.map((event) => (
+ <li key={event.id} className="relative text-sm">
+ <span className="absolute -left-[21px] top-1.5 h-2 w-2 rounded-full bg-primary" />
+ <p className="font-semibold">
+ Status alterado de {jobStatuses[event.fromStatus]} para{" "}
+ {jobStatuses[event.toStatus]}
+ </p>
+ <time className="text-xs text-muted-foreground" dateTime={event.createdAt}>
+ {formatTimelineDate(event.createdAt)}
+ </time>
+ {timelineMetadataText(event.metadata) ? (
+ <p className="text-xs text-muted-foreground">
+ {timelineMetadataText(event.metadata)}
+ </p>
+ ) : null}
+ </li>
+ ))}
+ </ol>
+ ) : null}
+ </section>
+ ) : null}
  </div>
  </Modal>
  );

frontend/src/domains/new_dashboard/infrastructure/dashboardJobsApi.ts

@@ -4,6 +4,7 @@ import type {
  Job,
  JobLevel,
  JobStatus,
+ JobTimelineEvent,
  JobType,
  MatchSort,
  NewJob,
@@ -54,8 +55,18 @@ const ApiSavedJobSchema = z.object({
  updatedAt: z.string().optional(),
 });
 
+const ApiSavedJobEventSchema = z.object({
+ id: z.string(),
+ type: z.literal("status_changed"),
+ fromStatus: z.enum(["saved", "applied", "interviewing", "rejected", "accepted"]),
+ toStatus: z.enum(["saved", "applied", "interviewing", "rejected", "accepted"]),
+ metadata: z.record(z.string(), z.unknown()).nullable().optional(),
+ createdAt: z.string(),
+});
+
 type ApiSearchJob = z.infer<typeof ApiSearchJobSchema>;
 type ApiSavedJob = z.infer<typeof ApiSavedJobSchema>;
+type ApiSavedJobEvent = z.infer<typeof ApiSavedJobEventSchema>;
 type SearchJobsResponse = z.infer<typeof SearchJobsResponseSchema>;
 
 export type SearchJobFilters = {
@@ -279,6 +290,13 @@ export function toDashboardSavedJob(job: ApiSavedJob): Job {
  };
 }
 
+function toDashboardSavedJobEvent(event: ApiSavedJobEvent): JobTimelineEvent {
+ return {
+ ...event,
+ metadata: event.metadata ?? null,
+ };
+}
+
 function toSearchJobsResult(
  response: SearchJobsResponse,
  page: number,
@@ -355,6 +373,11 @@ export async function getDashboardSavedJobs() {
  return z.array(ApiSavedJobSchema).parse(data).map(toDashboardSavedJob);
 }
 
+export async function getDashboardSavedJobEvents(id: string) {
+ const { data } = await api.get(`/saved-jobs/${id}/events`);
+ return z.array(ApiSavedJobEventSchema).parse(data).map(toDashboardSavedJobEvent);
+}
+
 export async function createDashboardSavedJob(
  job: Job | NewJob,
  status: JobStatus = "saved",

frontend/src/domains/new_dashboard/types/job.ts

@@ -52,6 +52,14 @@ export type JobType = z.infer<typeof JobTypeSchema>;
 export type JobLevel = z.infer<typeof JobLevelSchema>;
 export type Job = z.infer<typeof JobSchema>;
 export type NewJob = z.infer<typeof NewJobSchema>;
+export type JobTimelineEvent = {
+ id: string;
+ type: "status_changed";
+ fromStatus: JobStatus;
+ toStatus: JobStatus;
+ metadata: Record<string, unknown> | null;
+ createdAt: string;
+};
 export type MatchSort = "default" | "desc" | "asc";
 export type JobModelFilter =
  | "Todos"

frontend/tests/unit/new_dashboard/api.test.ts

@@ -14,6 +14,7 @@ vi.mock("@/shared/lib/apiClient", () => ({
 import {
  createDashboardSavedJob,
  deleteDashboardSavedJob,
+ getDashboardSavedJobEvents,
  getDashboardSavedJobs,
  searchDashboardJobs,
  toRecommendedJob,
@@ -379,6 +380,32 @@ it("mapeia entityId para jobId apenas quando entityType é job, e readAt para is
  });
  });
 
+ it("busca e tipa os eventos da vaga salva", async () => {
+ apiMock.get.mockResolvedValue({
+ data: [
+ {
+ id: "event-1",
+ type: "status_changed",
+ fromStatus: "saved",
+ toStatus: "applied",
+ metadata: { source: "dashboard" },
+ createdAt: "2026-07-10T12:00:00.000Z",
+ },
+ ],
+ });
+
+ const events = await getDashboardSavedJobEvents("saved-1");
+
+ expect(apiMock.get).toHaveBeenCalledWith("/saved-jobs/saved-1/events");
+ expect(events).toEqual([
+ expect.objectContaining({
+ fromStatus: "saved",
+ toStatus: "applied",
+ metadata: { source: "dashboard" },
+ }),
+ ]);
+ });
+
  it("cria, atualiza e remove vagas salvas", async () => {
  apiMock.post.mockResolvedValue({
  data: {

frontend/src/domains/new_dashboard/NewDashboardPage.tsx

@@ -163,6 +163,7 @@ export default function NewDashboardPage() {
  const [countryFilter, setCountryFilter] = useState<CountryFilter>("Todos");
  const [matchSort, setMatchSort] = useState<MatchSort>("default");
  const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+ const [timelineVersion, setTimelineVersion] = useState(0);
  const [searchParams, setSearchParams] = useSearchParams();
  const [isAddJobOpen, setIsAddJobOpen] = useState(false);
  const [toast, setToast] = useState("");
@@ -357,6 +358,7 @@ export default function NewDashboardPage() {
  const updatedJob = await changeJobStatus(jobId, status);
  if (updatedJob && selectedJobId === jobId) {
  setSelectedJobId(updatedJob.id);
+ setTimelineVersion((current) => current + 1);
  }
  showToast(`Vaga atualizada para: ${jobStatuses[status]}`);
  } catch {
@@ -572,6 +574,8 @@ export default function NewDashboardPage() {
  onClose={handleCloseJob}
  onStatusChange={handleStatusChange}
  onNotesChange={handleNotesChange}
+ isTracked={trackedJobs.some((job) => job.id === selectedJob.id)}
+ timelineVersion={timelineVersion}
  />
  ) : null}
 

frontend/src/domains/new_dashboard/components/jobs/JobDetailModal.tsx

@@ -1,6 +1,8 @@
 import { ExternalLink } from "lucide-react";
+import { useEffect, useState } from "react";
 import { jobStatusClasses, jobStatuses } from "../../constants";
-import type { Job, JobStatus } from "../../types";
+import type { Job, JobStatus, JobTimelineEvent } from "../../types";
+import { getDashboardSavedJobEvents } from "../../infrastructure/dashboardJobsApi";
 import { Modal } from "../shared/Modal";
 import { FormattedJobDescription } from "./FormattedJobDescription";
 
@@ -9,6 +11,8 @@ interface JobDetailModalProps {
  onClose: () => void;
  onStatusChange: (jobId: string, status: JobStatus) => void;
  onNotesChange: (jobId: string, notes: string) => void;
+ isTracked?: boolean;
+ timelineVersion?: number;
 }
 
 const payloadLabels: Record<string, string> = {
@@ -44,12 +48,69 @@ function isExternalUrl(value: string) {
  return /^https?:\/\//i.test(value);
 }
 
+function formatTimelineDate(value: string) {
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return "Data não informada";
+
+ return new Intl.DateTimeFormat("pt-BR", {
+ dateStyle: "short",
+ timeStyle: "short",
+ }).format(date);
+}
+
+function orderTimeline(events: JobTimelineEvent[]) {
+ return [...events].sort(
+ (first, second) =>
+ new Date(first.createdAt).getTime() - new Date(second.createdAt).getTime(),
+ );
+}
+
+function timelineMetadataText(metadata: Record<string, unknown> | null) {
+ if (!metadata) return "";
+
+ return Object.entries(metadata)
+ .map(([key, value]) => `${key}: ${payloadValueToText(value)}`)
+ .join(" • ");
+}
+
 export function JobDetailModal({
  job,
  onClose,
  onStatusChange,
  onNotesChange,
+ isTracked = false,
+ timelineVersion = 0,
 }: JobDetailModalProps) {
+ const [timeline, setTimeline] = useState<JobTimelineEvent[]>([]);
+ const [isTimelineLoading, setIsTimelineLoading] = useState(false);
+ const [timelineError, setTimelineError] = useState(false);
+
+ useEffect(() => {
+ if (!isTracked) return;
+
+ let active = true;
+ void Promise.resolve()
+ .then(() => {
+ if (!active) return null;
+ setIsTimelineLoading(true);
+ setTimelineError(false);
+ return getDashboardSavedJobEvents(job.id);
+ })
+ .then((events) => {
+ if (active && events) setTimeline(orderTimeline(events));
+ })
+ .catch(() => {
+ if (active) setTimelineError(true);
+ })
+ .finally(() => {
+ if (active) setIsTimelineLoading(false);
+ });
+
+ return () => {
+ active = false;
+ };
+ }, [isTracked, job.id, timelineVersion]);
+
  const payloadEntries = Object.entries(job.rawPayload ?? {}).filter(
  ([key]) => key !== "description",
  );
@@ -199,6 +260,51 @@ export function JobDetailModal({
  className="min-h-28 w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:border-ring"
  />
  </label>
+
+ {isTracked ? (
+ <section className="space-y-2" aria-labelledby="timeline-title">
+ <h3
+ id="timeline-title"
+ className="text-xs font-bold uppercase text-muted-foreground"
+ >
+ Histórico da candidatura
+ </h3>
+ {isTimelineLoading ? (
+ <p className="text-sm text-muted-foreground">Carregando histórico...</p>
+ ) : null}
+ {timelineError ? (
+ <p className="text-sm text-destructive">
+ Não foi possível carregar o histórico.
+ </p>
+ ) : null}
+ {!isTimelineLoading && !timelineError && timeline.length === 0 ? (
+ <p className="text-sm text-muted-foreground">
+ Nenhuma mudança de status registrada.
+ </p>
+ ) : null}
+ {!isTimelineLoading && !timelineError && timeline.length > 0 ? (
+ <ol className="space-y-2 border-l border-border pl-4">
+ {timeline.map((event) => (
+ <li key={event.id} className="relative text-sm">
+ <span className="absolute -left-[21px] top-1.5 h-2 w-2 rounded-full bg-primary" />
+ <p className="font-semibold">
+ Status alterado de {jobStatuses[event.fromStatus]} para{" "}
+ {jobStatuses[event.toStatus]}
+ </p>
+ <time className="text-xs text-muted-foreground" dateTime={event.createdAt}>
+ {formatTimelineDate(event.createdAt)}
+ </time>
+ {timelineMetadataText(event.metadata) ? (
+ <p className="text-xs text-muted-foreground">
+ {timelineMetadataText(event.metadata)}
+ </p>
+ ) : null}
+ </li>
+ ))}
+ </ol>
+ ) : null}
+ </section>
+ ) : null}
  </div>
  </Modal>
  );

frontend/src/domains/new_dashboard/infrastructure/dashboardJobsApi.ts

@@ -4,6 +4,7 @@ import type {
  Job,
  JobLevel,
  JobStatus,
+ JobTimelineEvent,
  JobType,
  MatchSort,
  NewJob,
@@ -54,8 +55,18 @@ const ApiSavedJobSchema = z.object({
  updatedAt: z.string().optional(),
 });
 
+const ApiSavedJobEventSchema = z.object({
+ id: z.string(),
+ type: z.literal("status_changed"),
+ fromStatus: z.enum(["saved", "applied", "interviewing", "rejected", "accepted"]),
+ toStatus: z.enum(["saved", "applied", "interviewing", "rejected", "accepted"]),
+ metadata: z.record(z.string(), z.unknown()).nullable().optional(),
+ createdAt: z.string(),
+});
+
 type ApiSearchJob = z.infer<typeof ApiSearchJobSchema>;
 type ApiSavedJob = z.infer<typeof ApiSavedJobSchema>;
+type ApiSavedJobEvent = z.infer<typeof ApiSavedJobEventSchema>;
 type SearchJobsResponse = z.infer<typeof SearchJobsResponseSchema>;
 
 export type SearchJobFilters = {
@@ -279,6 +290,13 @@ export function toDashboardSavedJob(job: ApiSavedJob): Job {
  };
 }
 
+function toDashboardSavedJobEvent(event: ApiSavedJobEvent): JobTimelineEvent {
+ return {
+ ...event,
+ metadata: event.metadata ?? null,
+ };
+}
+
 function toSearchJobsResult(
  response: SearchJobsResponse,
  page: number,
@@ -355,6 +373,11 @@ export async function getDashboardSavedJobs() {
  return z.array(ApiSavedJobSchema).parse(data).map(toDashboardSavedJob);
 }
 
+export async function getDashboardSavedJobEvents(id: string) {
+ const { data } = await api.get(`/saved-jobs/${id}/events`);
+ return z.array(ApiSavedJobEventSchema).parse(data).map(toDashboardSavedJobEvent);
+}
+
 export async function createDashboardSavedJob(
  job: Job | NewJob,
  status: JobStatus = "saved",

frontend/src/domains/new_dashboard/types/job.ts

@@ -52,6 +52,14 @@ export type JobType = z.infer<typeof JobTypeSchema>;
 export type JobLevel = z.infer<typeof JobLevelSchema>;
 export type Job = z.infer<typeof JobSchema>;
 export type NewJob = z.infer<typeof NewJobSchema>;
+export type JobTimelineEvent = {
+ id: string;
+ type: "status_changed";
+ fromStatus: JobStatus;
+ toStatus: JobStatus;
+ metadata: Record<string, unknown> | null;
+ createdAt: string;
+};
 export type MatchSort = "default" | "desc" | "asc";
 export type JobModelFilter =
  | "Todos"

frontend/tests/unit/new_dashboard/api.test.ts

@@ -14,6 +14,7 @@ vi.mock("@/shared/lib/apiClient", () => ({
 import {
  createDashboardSavedJob,
  deleteDashboardSavedJob,
+ getDashboardSavedJobEvents,
  getDashboardSavedJobs,
  searchDashboardJobs,
  toRecommendedJob,
@@ -379,6 +380,32 @@ it("mapeia entityId para jobId apenas quando entityType é job, e readAt para is
  });
  });
 
+ it("busca e tipa os eventos da vaga salva", async () => {
+ apiMock.get.mockResolvedValue({
+ data: [
+ {
+ id: "event-1",
+ type: "status_changed",
+ fromStatus: "saved",
+ toStatus: "applied",
+ metadata: { source: "dashboard" },
+ createdAt: "2026-07-10T12:00:00.000Z",
+ },
+ ],
+ });
+
+ const events = await getDashboardSavedJobEvents("saved-1");
+
+ expect(apiMock.get).toHaveBeenCalledWith("/saved-jobs/saved-1/events");
+ expect(events).toEqual([
+ expect.objectContaining({
+ fromStatus: "saved",
+ toStatus: "applied",
+ metadata: { source: "dashboard" },
+ }),
+ ]);
+ });
+
  it("cria, atualiza e remove vagas salvas", async () => {
  apiMock.post.mockResolvedValue({
  data: {

frontend/src/domains/new_dashboard/NewDashboardPage.tsx

@@ -163,6 +163,7 @@ export default function NewDashboardPage() {
  const [countryFilter, setCountryFilter] = useState<CountryFilter>("Todos");
  const [matchSort, setMatchSort] = useState<MatchSort>("default");
  const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+ const [timelineVersion, setTimelineVersion] = useState(0);
  const [searchParams, setSearchParams] = useSearchParams();
  const [isAddJobOpen, setIsAddJobOpen] = useState(false);
  const [toast, setToast] = useState("");
@@ -357,6 +358,7 @@ export default function NewDashboardPage() {
  const updatedJob = await changeJobStatus(jobId, status);
  if (updatedJob && selectedJobId === jobId) {
  setSelectedJobId(updatedJob.id);
+ setTimelineVersion((current) => current + 1);
  }
  showToast(`Vaga atualizada para: ${jobStatuses[status]}`);
  } catch {
@@ -572,6 +574,8 @@ export default function NewDashboardPage() {
  onClose={handleCloseJob}
  onStatusChange={handleStatusChange}
  onNotesChange={handleNotesChange}
+ isTracked={trackedJobs.some((job) => job.id === selectedJob.id)}
+ timelineVersion={timelineVersion}
  />
  ) : null}
 

frontend/src/domains/new_dashboard/components/jobs/JobDetailModal.tsx

@@ -1,6 +1,8 @@
 import { ExternalLink } from "lucide-react";
+import { useEffect, useState } from "react";
 import { jobStatusClasses, jobStatuses } from "../../constants";
-import type { Job, JobStatus } from "../../types";
+import type { Job, JobStatus, JobTimelineEvent } from "../../types";
+import { getDashboardSavedJobEvents } from "../../infrastructure/dashboardJobsApi";
 import { Modal } from "../shared/Modal";
 import { FormattedJobDescription } from "./FormattedJobDescription";
 
@@ -9,6 +11,8 @@ interface JobDetailModalProps {
  onClose: () => void;
  onStatusChange: (jobId: string, status: JobStatus) => void;
  onNotesChange: (jobId: string, notes: string) => void;
+ isTracked?: boolean;
+ timelineVersion?: number;
 }
 
 const payloadLabels: Record<string, string> = {
@@ -44,12 +48,69 @@ function isExternalUrl(value: string) {
  return /^https?:\/\//i.test(value);
 }
 
+function formatTimelineDate(value: string) {
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return "Data não informada";
+
+ return new Intl.DateTimeFormat("pt-BR", {
+ dateStyle: "short",
+ timeStyle: "short",
+ }).format(date);
+}
+
+function orderTimeline(events: JobTimelineEvent[]) {
+ return [...events].sort(
+ (first, second) =>
+ new Date(first.createdAt).getTime() - new Date(second.createdAt).getTime(),
+ );
+}
+
+function timelineMetadataText(metadata: Record<string, unknown> | null) {
+ if (!metadata) return "";
+
+ return Object.entries(metadata)
+ .map(([key, value]) => `${key}: ${payloadValueToText(value)}`)
+ .join(" • ");
+}
+
 export function JobDetailModal({
  job,
  onClose,
  onStatusChange,
  onNotesChange,
+ isTracked = false,
+ timelineVersion = 0,
 }: JobDetailModalProps) {
+ const [timeline, setTimeline] = useState<JobTimelineEvent[]>([]);
+ const [isTimelineLoading, setIsTimelineLoading] = useState(false);
+ const [timelineError, setTimelineError] = useState(false);
+
+ useEffect(() => {
+ if (!isTracked) return;
+
+ let active = true;
+ void Promise.resolve()
+ .then(() => {
+ if (!active) return null;
+ setIsTimelineLoading(true);
+ setTimelineError(false);
+ return getDashboardSavedJobEvents(job.id);
+ })
+ .then((events) => {
+ if (active && events) setTimeline(orderTimeline(events));
+ })
+ .catch(() => {
+ if (active) setTimelineError(true);
+ })
+ .finally(() => {
+ if (active) setIsTimelineLoading(false);
+ });
+
+ return () => {
+ active = false;
+ };
+ }, [isTracked, job.id, timelineVersion]);
+
  const payloadEntries = Object.entries(job.rawPayload ?? {}).filter(
  ([key]) => key !== "description",
  );
@@ -199,6 +260,51 @@ export function JobDetailModal({
  className="min-h-28 w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:border-ring"
  />
  </label>
+
+ {isTracked ? (
+ <section className="space-y-2" aria-labelledby="timeline-title">
+ <h3
+ id="timeline-title"
+ className="text-xs font-bold uppercase text-muted-foreground"
+ >
+ Histórico da candidatura
+ </h3>
+ {isTimelineLoading ? (
+ <p className="text-sm text-muted-foreground">Carregando histórico...</p>
+ ) : null}
+ {timelineError ? (
+ <p className="text-sm text-destructive">
+ Não foi possível carregar o histórico.
+ </p>
+ ) : null}
+ {!isTimelineLoading && !timelineError && timeline.length === 0 ? (
+ <p className="text-sm text-muted-foreground">
+ Nenhuma mudança de status registrada.
+ </p>
+ ) : null}
+ {!isTimelineLoading && !timelineError && timeline.length > 0 ? (
+ <ol className="space-y-2 border-l border-border pl-4">
+ {timeline.map((event) => (
+ <li key={event.id} className="relative text-sm">
+ <span className="absolute -left-[21px] top-1.5 h-2 w-2 rounded-full bg-primary" />
+ <p className="font-semibold">
+ Status alterado de {jobStatuses[event.fromStatus]} para{" "}
+ {jobStatuses[event.toStatus]}
+ </p>
+ <time className="text-xs text-muted-foreground" dateTime={event.createdAt}>
+ {formatTimelineDate(event.createdAt)}
+ </time>
+ {timelineMetadataText(event.metadata) ? (
+ <p className="text-xs text-muted-foreground">
+ {timelineMetadataText(event.metadata)}
+ </p>
+ ) : null}
+ </li>
+ ))}
+ </ol>
+ ) : null}
+ </section>
+ ) : null}
  </div>
  </Modal>
  );

frontend/src/domains/new_dashboard/infrastructure/dashboardJobsApi.ts

@@ -4,6 +4,7 @@ import type {
  Job,
  JobLevel,
  JobStatus,
+ JobTimelineEvent,
  JobType,
  MatchSort,
  NewJob,
@@ -54,8 +55,18 @@ const ApiSavedJobSchema = z.object({
  updatedAt: z.string().optional(),
 });
 
+const ApiSavedJobEventSchema = z.object({
+ id: z.string(),
+ type: z.literal("status_changed"),
+ fromStatus: z.enum(["saved", "applied", "interviewing", "rejected", "accepted"]),
+ toStatus: z.enum(["saved", "applied", "interviewing", "rejected", "accepted"]),
+ metadata: z.record(z.string(), z.unknown()).nullable().optional(),
+ createdAt: z.string(),
+});
+
 type ApiSearchJob = z.infer<typeof ApiSearchJobSchema>;
 type ApiSavedJob = z.infer<typeof ApiSavedJobSchema>;
+type ApiSavedJobEvent = z.infer<typeof ApiSavedJobEventSchema>;
 type SearchJobsResponse = z.infer<typeof SearchJobsResponseSchema>;
 
 export type SearchJobFilters = {
@@ -279,6 +290,13 @@ export function toDashboardSavedJob(job: ApiSavedJob): Job {
  };
 }
 
+function toDashboardSavedJobEvent(event: ApiSavedJobEvent): JobTimelineEvent {
+ return {
+ ...event,
+ metadata: event.metadata ?? null,
+ };
+}
+
 function toSearchJobsResult(
  response: SearchJobsResponse,
  page: number,
@@ -355,6 +373,11 @@ export async function getDashboardSavedJobs() {
  return z.array(ApiSavedJobSchema).parse(data).map(toDashboardSavedJob);
 }
 
+export async function getDashboardSavedJobEvents(id: string) {
+ const { data } = await api.get(`/saved-jobs/${id}/events`);
+ return z.array(ApiSavedJobEventSchema).parse(data).map(toDashboardSavedJobEvent);
+}
+
 export async function createDashboardSavedJob(
  job: Job | NewJob,
  status: JobStatus = "saved",

frontend/src/domains/new_dashboard/types/job.ts

@@ -52,6 +52,14 @@ export type JobType = z.infer<typeof JobTypeSchema>;
 export type JobLevel = z.infer<typeof JobLevelSchema>;
 export type Job = z.infer<typeof JobSchema>;
 export type NewJob = z.infer<typeof NewJobSchema>;
+export type JobTimelineEvent = {
+ id: string;
+ type: "status_changed";
+ fromStatus: JobStatus;
+ toStatus: JobStatus;
+ metadata: Record<string, unknown> | null;
+ createdAt: string;
+};
 export type MatchSort = "default" | "desc" | "asc";
 export type JobModelFilter =
  | "Todos"

frontend/tests/unit/new_dashboard/api.test.ts

@@ -14,6 +14,7 @@ vi.mock("@/shared/lib/apiClient", () => ({
 import {
  createDashboardSavedJob,
  deleteDashboardSavedJob,
+ getDashboardSavedJobEvents,
  getDashboardSavedJobs,
  searchDashboardJobs,
  toRecommendedJob,
@@ -379,6 +380,32 @@ it("mapeia entityId para jobId apenas quando entityType é job, e readAt para is
  });
  });
 
+ it("busca e tipa os eventos da vaga salva", async () => {
+ apiMock.get.mockResolvedValue({
+ data: [
+ {
+ id: "event-1",
+ type: "status_changed",
+ fromStatus: "saved",
+ toStatus: "applied",
+ metadata: { source: "dashboard" },
+ createdAt: "2026-07-10T12:00:00.000Z",
+ },
+ ],
+ });
+
+ const events = await getDashboardSavedJobEvents("saved-1");
+
+ expect(apiMock.get).toHaveBeenCalledWith("/saved-jobs/saved-1/events");
+ expect(events).toEqual([
+ expect.objectContaining({
+ fromStatus: "saved",
+ toStatus: "applied",
+ metadata: { source: "dashboard" },
+ }),
+ ]);
+ });
+
  it("cria, atualiza e remove vagas salvas", async () => {
  apiMock.post.mockResolvedValue({
  data: {

frontend/src/domains/new_dashboard/NewDashboardPage.tsx

@@ -163,6 +163,7 @@ export default function NewDashboardPage() {
  const [countryFilter, setCountryFilter] = useState<CountryFilter>("Todos");
  const [matchSort, setMatchSort] = useState<MatchSort>("default");
  const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+ const [timelineVersion, setTimelineVersion] = useState(0);
  const [searchParams, setSearchParams] = useSearchParams();
  const [isAddJobOpen, setIsAddJobOpen] = useState(false);
  const [toast, setToast] = useState("");
@@ -357,6 +358,7 @@ export default function NewDashboardPage() {
  const updatedJob = await changeJobStatus(jobId, status);
  if (updatedJob && selectedJobId === jobId) {
  setSelectedJobId(updatedJob.id);
+ setTimelineVersion((current) => current + 1);
  }
  showToast(`Vaga atualizada para: ${jobStatuses[status]}`);
  } catch {
@@ -572,6 +574,8 @@ export default function NewDashboardPage() {
  onClose={handleCloseJob}
  onStatusChange={handleStatusChange}
  onNotesChange={handleNotesChange}
+ isTracked={trackedJobs.some((job) => job.id === selectedJob.id)}
+ timelineVersion={timelineVersion}
  />
  ) : null}
 

frontend/src/domains/new_dashboard/components/jobs/JobDetailModal.tsx

@@ -1,6 +1,8 @@
 import { ExternalLink } from "lucide-react";
+import { useEffect, useState } from "react";
 import { jobStatusClasses, jobStatuses } from "../../constants";
-import type { Job, JobStatus } from "../../types";
+import type { Job, JobStatus, JobTimelineEvent } from "../../types";
+import { getDashboardSavedJobEvents } from "../../infrastructure/dashboardJobsApi";
 import { Modal } from "../shared/Modal";
 import { FormattedJobDescription } from "./FormattedJobDescription";
 
@@ -9,6 +11,8 @@ interface JobDetailModalProps {
  onClose: () => void;
  onStatusChange: (jobId: string, status: JobStatus) => void;
  onNotesChange: (jobId: string, notes: string) => void;
+ isTracked?: boolean;
+ timelineVersion?: number;
 }
 
 const payloadLabels: Record<string, string> = {
@@ -44,12 +48,69 @@ function isExternalUrl(value: string) {
  return /^https?:\/\//i.test(value);
 }
 
+function formatTimelineDate(value: string) {
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return "Data não informada";
+
+ return new Intl.DateTimeFormat("pt-BR", {
+ dateStyle: "short",
+ timeStyle: "short",
+ }).format(date);
+}
+
+function orderTimeline(events: JobTimelineEvent[]) {
+ return [...events].sort(
+ (first, second) =>
+ new Date(first.createdAt).getTime() - new Date(second.createdAt).getTime(),
+ );
+}
+
+function timelineMetadataText(metadata: Record<string, unknown> | null) {
+ if (!metadata) return "";
+
+ return Object.entries(metadata)
+ .map(([key, value]) => `${key}: ${payloadValueToText(value)}`)
+ .join(" • ");
+}
+
 export function JobDetailModal({
  job,
  onClose,
  onStatusChange,
  onNotesChange,
+ isTracked = false,
+ timelineVersion = 0,
 }: JobDetailModalProps) {
+ const [timeline, setTimeline] = useState<JobTimelineEvent[]>([]);
+ const [isTimelineLoading, setIsTimelineLoading] = useState(false);
+ const [timelineError, setTimelineError] = useState(false);
+
+ useEffect(() => {
+ if (!isTracked) return;
+
+ let active = true;
+ void Promise.resolve()
+ .then(() => {
+ if (!active) return null;
+ setIsTimelineLoading(true);
+ setTimelineError(false);
+ return getDashboardSavedJobEvents(job.id);
+ })
+ .then((events) => {
+ if (active && events) setTimeline(orderTimeline(events));
+ })
+ .catch(() => {
+ if (active) setTimelineError(true);
+ })
+ .finally(() => {
+ if (active) setIsTimelineLoading(false);
+ });
+
+ return () => {
+ active = false;
+ };
+ }, [isTracked, job.id, timelineVersion]);
+
  const payloadEntries = Object.entries(job.rawPayload ?? {}).filter(
  ([key]) => key !== "description",
  );
@@ -199,6 +260,51 @@ export function JobDetailModal({
  className="min-h-28 w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:border-ring"
  />
  </label>
+
+ {isTracked ? (
+ <section className="space-y-2" aria-labelledby="timeline-title">
+ <h3
+ id="timeline-title"
+ className="text-xs font-bold uppercase text-muted-foreground"
+ >
+ Histórico da candidatura
+ </h3>
+ {isTimelineLoading ? (
+ <p className="text-sm text-muted-foreground">Carregando histórico...</p>
+ ) : null}
+ {timelineError ? (
+ <p className="text-sm text-destructive">
+ Não foi possível carregar o histórico.
+ </p>
+ ) : null}
+ {!isTimelineLoading && !timelineError && timeline.length === 0 ? (
+ <p className="text-sm text-muted-foreground">
+ Nenhuma mudança de status registrada.
+ </p>
+ ) : null}
+ {!isTimelineLoading && !timelineError && timeline.length > 0 ? (
+ <ol className="space-y-2 border-l border-border pl-4">
+ {timeline.map((event) => (
+ <li key={event.id} className="relative text-sm">
+ <span className="absolute -left-[21px] top-1.5 h-2 w-2 rounded-full bg-primary" />
+ <p className="font-semibold">
+ Status alterado de {jobStatuses[event.fromStatus]} para{" "}
+ {jobStatuses[event.toStatus]}
+ </p>
+ <time className="text-xs text-muted-foreground" dateTime={event.createdAt}>
+ {formatTimelineDate(event.createdAt)}
+ </time>
+ {timelineMetadataText(event.metadata) ? (
+ <p className="text-xs text-muted-foreground">
+ {timelineMetadataText(event.metadata)}
+ </p>
+ ) : null}
+ </li>
+ ))}
+ </ol>
+ ) : null}
+ </section>
+ ) : null}
  </div>
  </Modal>
  );

frontend/src/domains/new_dashboard/infrastructure/dashboardJobsApi.ts

@@ -4,6 +4,7 @@ import type {
  Job,
  JobLevel,
  JobStatus,
+ JobTimelineEvent,
  JobType,
  MatchSort,
  NewJob,
@@ -54,8 +55,18 @@ const ApiSavedJobSchema = z.object({
  updatedAt: z.string().optional(),
 });
 
+const ApiSavedJobEventSchema = z.object({
+ id: z.string(),
+ type: z.literal("status_changed"),
+ fromStatus: z.enum(["saved", "applied", "interviewing", "rejected", "accepted"]),
+ toStatus: z.enum(["saved", "applied", "interviewing", "rejected", "accepted"]),
+ metadata: z.record(z.string(), z.unknown()).nullable().optional(),
+ createdAt: z.string(),
+});
+
 type ApiSearchJob = z.infer<typeof ApiSearchJobSchema>;
 type ApiSavedJob = z.infer<typeof ApiSavedJobSchema>;
+type ApiSavedJobEvent = z.infer<typeof ApiSavedJobEventSchema>;
 type SearchJobsResponse = z.infer<typeof SearchJobsResponseSchema>;
 
 export type SearchJobFilters = {
@@ -279,6 +290,13 @@ export function toDashboardSavedJob(job: ApiSavedJob): Job {
  };
 }
 
+function toDashboardSavedJobEvent(event: ApiSavedJobEvent): JobTimelineEvent {
+ return {
+ ...event,
+ metadata: event.metadata ?? null,
+ };
+}
+
 function toSearchJobsResult(
  response: SearchJobsResponse,
  page: number,
@@ -355,6 +373,11 @@ export async function getDashboardSavedJobs() {
  return z.array(ApiSavedJobSchema).parse(data).map(toDashboardSavedJob);
 }
 
+export async function getDashboardSavedJobEvents(id: string) {
+ const { data } = await api.get(`/saved-jobs/${id}/events`);
+ return z.array(ApiSavedJobEventSchema).parse(data).map(toDashboardSavedJobEvent);
+}
+
 export async function createDashboardSavedJob(
  job: Job | NewJob,
  status: JobStatus = "saved",

frontend/src/domains/new_dashboard/types/job.ts

@@ -52,6 +52,14 @@ export type JobType = z.infer<typeof JobTypeSchema>;
 export type JobLevel = z.infer<typeof JobLevelSchema>;
 export type Job = z.infer<typeof JobSchema>;
 export type NewJob = z.infer<typeof NewJobSchema>;
+export type JobTimelineEvent = {
+ id: string;
+ type: "status_changed";
+ fromStatus: JobStatus;
+ toStatus: JobStatus;
+ metadata: Record<string, unknown> | null;
+ createdAt: string;
+};
 export type MatchSort = "default" | "desc" | "asc";
 export type JobModelFilter =
  | "Todos"

frontend/tests/unit/new_dashboard/api.test.ts

@@ -14,6 +14,7 @@ vi.mock("@/shared/lib/apiClient", () => ({
 import {
  createDashboardSavedJob,
  deleteDashboardSavedJob,
+ getDashboardSavedJobEvents,
  getDashboardSavedJobs,
  searchDashboardJobs,
  toRecommendedJob,
@@ -379,6 +380,32 @@ it("mapeia entityId para jobId apenas quando entityType é job, e readAt para is
  });
  });
 
+ it("busca e tipa os eventos da vaga salva", async () => {
+ apiMock.get.mockResolvedValue({
+ data: [
+ {
+ id: "event-1",
+ type: "status_changed",
+ fromStatus: "saved",
+ toStatus: "applied",
+ metadata: { source: "dashboard" },
+ createdAt: "2026-07-10T12:00:00.000Z",
+ },
+ ],
+ });
+
+ const events = await getDashboardSavedJobEvents("saved-1");
+
+ expect(apiMock.get).toHaveBeenCalledWith("/saved-jobs/saved-1/events");
+ expect(events).toEqual([
+ expect.objectContaining({
+ fromStatus: "saved",
+ toStatus: "applied",
+ metadata: { source: "dashboard" },
+ }),
+ ]);
+ });
+
  it("cria, atualiza e remove vagas salvas", async () => {
  apiMock.post.mockResolvedValue({
  data: {

frontend/src/domains/new_dashboard/NewDashboardPage.tsx

@@ -163,6 +163,7 @@ export default function NewDashboardPage() {
  const [countryFilter, setCountryFilter] = useState<CountryFilter>("Todos");
  const [matchSort, setMatchSort] = useState<MatchSort>("default");
  const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+ const [timelineVersion, setTimelineVersion] = useState(0);
  const [searchParams, setSearchParams] = useSearchParams();
  const [isAddJobOpen, setIsAddJobOpen] = useState(false);
  const [toast, setToast] = useState("");
@@ -357,6 +358,7 @@ export default function NewDashboardPage() {
  const updatedJob = await changeJobStatus(jobId, status);
  if (updatedJob && selectedJobId === jobId) {
  setSelectedJobId(updatedJob.id);
+ setTimelineVersion((current) => current + 1);
  }
  showToast(`Vaga atualizada para: ${jobStatuses[status]}`);
  } catch {
@@ -572,6 +574,8 @@ export default function NewDashboardPage() {
  onClose={handleCloseJob}
  onStatusChange={handleStatusChange}
  onNotesChange={handleNotesChange}
+ isTracked={trackedJobs.some((job) => job.id === selectedJob.id)}
+ timelineVersion={timelineVersion}
  />
  ) : null}
 

frontend/src/domains/new_dashboard/components/jobs/JobDetailModal.tsx

@@ -1,6 +1,8 @@
 import { ExternalLink } from "lucide-react";
+import { useEffect, useState } from "react";
 import { jobStatusClasses, jobStatuses } from "../../constants";
-import type { Job, JobStatus } from "../../types";
+import type { Job, JobStatus, JobTimelineEvent } from "../../types";
+import { getDashboardSavedJobEvents } from "../../infrastructure/dashboardJobsApi";
 import { Modal } from "../shared/Modal";
 import { FormattedJobDescription } from "./FormattedJobDescription";
 
@@ -9,6 +11,8 @@ interface JobDetailModalProps {
  onClose: () => void;
  onStatusChange: (jobId: string, status: JobStatus) => void;
  onNotesChange: (jobId: string, notes: string) => void;
+ isTracked?: boolean;
+ timelineVersion?: number;
 }
 
 const payloadLabels: Record<string, string> = {
@@ -44,12 +48,69 @@ function isExternalUrl(value: string) {
  return /^https?:\/\//i.test(value);
 }
 
+function formatTimelineDate(value: string) {
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return "Data não informada";
+
+ return new Intl.DateTimeFormat("pt-BR", {
+ dateStyle: "short",
+ timeStyle: "short",
+ }).format(date);
+}
+
+function orderTimeline(events: JobTimelineEvent[]) {
+ return [...events].sort(
+ (first, second) =>
+ new Date(first.createdAt).getTime() - new Date(second.createdAt).getTime(),
+ );
+}
+
+function timelineMetadataText(metadata: Record<string, unknown> | null) {
+ if (!metadata) return "";
+
+ return Object.entries(metadata)
+ .map(([key, value]) => `${key}: ${payloadValueToText(value)}`)
+ .join(" • ");
+}
+
 export function JobDetailModal({
  job,
  onClose,
  onStatusChange,
  onNotesChange,
+ isTracked = false,
+ timelineVersion = 0,
 }: JobDetailModalProps) {
+ const [timeline, setTimeline] = useState<JobTimelineEvent[]>([]);
+ const [isTimelineLoading, setIsTimelineLoading] = useState(false);
+ const [timelineError, setTimelineError] = useState(false);
+
+ useEffect(() => {
+ if (!isTracked) return;
+
+ let active = true;
+ void Promise.resolve()
+ .then(() => {
+ if (!active) return null;
+ setIsTimelineLoading(true);
+ setTimelineError(false);
+ return getDashboardSavedJobEvents(job.id);
+ })
+ .then((events) => {
+ if (active && events) setTimeline(orderTimeline(events));
+ })
+ .catch(() => {
+ if (active) setTimelineError(true);
+ })
+ .finally(() => {
+ if (active) setIsTimelineLoading(false);
+ });
+
+ return () => {
+ active = false;
+ };
+ }, [isTracked, job.id, timelineVersion]);
+
  const payloadEntries = Object.entries(job.rawPayload ?? {}).filter(
  ([key]) => key !== "description",
  );
@@ -199,6 +260,51 @@ export function JobDetailModal({
  className="min-h-28 w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:border-ring"
  />
  </label>
+
+ {isTracked ? (
+ <section className="space-y-2" aria-labelledby="timeline-title">
+ <h3
+ id="timeline-title"
+ className="text-xs font-bold uppercase text-muted-foreground"
+ >
+ Histórico da candidatura
+ </h3>
+ {isTimelineLoading ? (
+ <p className="text-sm text-muted-foreground">Carregando histórico...</p>
+ ) : null}
+ {timelineError ? (
+ <p className="text-sm text-destructive">
+ Não foi possível carregar o histórico.
+ </p>
+ ) : null}
+ {!isTimelineLoading && !timelineError && timeline.length === 0 ? (
+ <p className="text-sm text-muted-foreground">
+ Nenhuma mudança de status registrada.
+ </p>
+ ) : null}
+ {!isTimelineLoading && !timelineError && timeline.length > 0 ? (
+ <ol className="space-y-2 border-l border-border pl-4">
+ {timeline.map((event) => (
+ <li key={event.id} className="relative text-sm">
+ <span className="absolute -left-[21px] top-1.5 h-2 w-2 rounded-full bg-primary" />
+ <p className="font-semibold">
+ Status alterado de {jobStatuses[event.fromStatus]} para{" "}
+ {jobStatuses[event.toStatus]}
+ </p>
+ <time className="text-xs text-muted-foreground" dateTime={event.createdAt}>
+ {formatTimelineDate(event.createdAt)}
+ </time>
+ {timelineMetadataText(event.metadata) ? (
+ <p className="text-xs text-muted-foreground">
+ {timelineMetadataText(event.metadata)}
+ </p>
+ ) : null}
+ </li>
+ ))}
+ </ol>
+ ) : null}
+ </section>
+ ) : null}
  </div>
  </Modal>
  );

frontend/src/domains/new_dashboard/infrastructure/dashboardJobsApi.ts

@@ -4,6 +4,7 @@ import type {
  Job,
  JobLevel,
  JobStatus,
+ JobTimelineEvent,
  JobType,
  MatchSort,
  NewJob,
@@ -54,8 +55,18 @@ const ApiSavedJobSchema = z.object({
  updatedAt: z.string().optional(),
 });
 
+const ApiSavedJobEventSchema = z.object({
+ id: z.string(),
+ type: z.literal("status_changed"),
+ fromStatus: z.enum(["saved", "applied", "interviewing", "rejected", "accepted"]),
+ toStatus: z.enum(["saved", "applied", "interviewing", "rejected", "accepted"]),
+ metadata: z.record(z.string(), z.unknown()).nullable().optional(),
+ createdAt: z.string(),
+});
+
 type ApiSearchJob = z.infer<typeof ApiSearchJobSchema>;
 type ApiSavedJob = z.infer<typeof ApiSavedJobSchema>;
+type ApiSavedJobEvent = z.infer<typeof ApiSavedJobEventSchema>;
 type SearchJobsResponse = z.infer<typeof SearchJobsResponseSchema>;
 
 export type SearchJobFilters = {
@@ -279,6 +290,13 @@ export function toDashboardSavedJob(job: ApiSavedJob): Job {
  };
 }
 
+function toDashboardSavedJobEvent(event: ApiSavedJobEvent): JobTimelineEvent {
+ return {
+ ...event,
+ metadata: event.metadata ?? null,
+ };
+}
+
 function toSearchJobsResult(
  response: SearchJobsResponse,
  page: number,
@@ -355,6 +373,11 @@ export async function getDashboardSavedJobs() {
  return z.array(ApiSavedJobSchema).parse(data).map(toDashboardSavedJob);
 }
 
+export async function getDashboardSavedJobEvents(id: string) {
+ const { data } = await api.get(`/saved-jobs/${id}/events`);
+ return z.array(ApiSavedJobEventSchema).parse(data).map(toDashboardSavedJobEvent);
+}
+
 export async function createDashboardSavedJob(
  job: Job | NewJob,
  status: JobStatus = "saved",

frontend/src/domains/new_dashboard/types/job.ts

@@ -52,6 +52,14 @@ export type JobType = z.infer<typeof JobTypeSchema>;
 export type JobLevel = z.infer<typeof JobLevelSchema>;
 export type Job = z.infer<typeof JobSchema>;
 export type NewJob = z.infer<typeof NewJobSchema>;
+export type JobTimelineEvent = {
+ id: string;
+ type: "status_changed";
+ fromStatus: JobStatus;
+ toStatus: JobStatus;
+ metadata: Record<string, unknown> | null;
+ createdAt: string;
+};
 export type MatchSort = "default" | "desc" | "asc";
 export type JobModelFilter =
  | "Todos"

frontend/tests/unit/new_dashboard/api.test.ts

@@ -14,6 +14,7 @@ vi.mock("@/shared/lib/apiClient", () => ({
 import {
  createDashboardSavedJob,
  deleteDashboardSavedJob,
+ getDashboardSavedJobEvents,
  getDashboardSavedJobs,
  searchDashboardJobs,
  toRecommendedJob,
@@ -379,6 +380,32 @@ it("mapeia entityId para jobId apenas quando entityType é job, e readAt para is
  });
  });
 
+ it("busca e tipa os eventos da vaga salva", async () => {
+ apiMock.get.mockResolvedValue({
+ data: [
+ {
+ id: "event-1",
+ type: "status_changed",
+ fromStatus: "saved",
+ toStatus: "applied",
+ metadata: { source: "dashboard" },
+ createdAt: "2026-07-10T12:00:00.000Z",
+ },
+ ],
+ });
+
+ const events = await getDashboardSavedJobEvents("saved-1");
+
+ expect(apiMock.get).toHaveBeenCalledWith("/saved-jobs/saved-1/events");
+ expect(events).toEqual([
+ expect.objectContaining({
+ fromStatus: "saved",
+ toStatus: "applied",
+ metadata: { source: "dashboard" },
+ }),
+ ]);
+ });
+
  it("cria, atualiza e remove vagas salvas", async () => {
  apiMock.post.mockResolvedValue({
  data: {

frontend/src/domains/new_dashboard/NewDashboardPage.tsx

@@ -163,6 +163,7 @@ export default function NewDashboardPage() {
  const [countryFilter, setCountryFilter] = useState<CountryFilter>("Todos");
  const [matchSort, setMatchSort] = useState<MatchSort>("default");
  const [selectedJobId, setSelectedJobId] = useState<string | null>(null);
+ const [timelineVersion, setTimelineVersion] = useState(0);
  const [searchParams, setSearchParams] = useSearchParams();
  const [isAddJobOpen, setIsAddJobOpen] = useState(false);
  const [toast, setToast] = useState("");
@@ -357,6 +358,7 @@ export default function NewDashboardPage() {
  const updatedJob = await changeJobStatus(jobId, status);
  if (updatedJob && selectedJobId === jobId) {
  setSelectedJobId(updatedJob.id);
+ setTimelineVersion((current) => current + 1);
  }
  showToast(`Vaga atualizada para: ${jobStatuses[status]}`);
  } catch {
@@ -572,6 +574,8 @@ export default function NewDashboardPage() {
  onClose={handleCloseJob}
  onStatusChange={handleStatusChange}
  onNotesChange={handleNotesChange}
+ isTracked={trackedJobs.some((job) => job.id === selectedJob.id)}
+ timelineVersion={timelineVersion}
  />
  ) : null}
 

frontend/src/domains/new_dashboard/components/jobs/JobDetailModal.tsx

@@ -1,6 +1,8 @@
 import { ExternalLink } from "lucide-react";
+import { useEffect, useState } from "react";
 import { jobStatusClasses, jobStatuses } from "../../constants";
-import type { Job, JobStatus } from "../../types";
+import type { Job, JobStatus, JobTimelineEvent } from "../../types";
+import { getDashboardSavedJobEvents } from "../../infrastructure/dashboardJobsApi";
 import { Modal } from "../shared/Modal";
 import { FormattedJobDescription } from "./FormattedJobDescription";
 
@@ -9,6 +11,8 @@ interface JobDetailModalProps {
  onClose: () => void;
  onStatusChange: (jobId: string, status: JobStatus) => void;
  onNotesChange: (jobId: string, notes: string) => void;
+ isTracked?: boolean;
+ timelineVersion?: number;
 }
 
 const payloadLabels: Record<string, string> = {
@@ -44,12 +48,69 @@ function isExternalUrl(value: string) {
  return /^https?:\/\//i.test(value);
 }
 
+function formatTimelineDate(value: string) {
+ const date = new Date(value);
+ if (Number.isNaN(date.getTime())) return "Data não informada";
+
+ return new Intl.DateTimeFormat("pt-BR", {
+ dateStyle: "short",
+ timeStyle: "short",
+ }).format(date);
+}
+
+function orderTimeline(events: JobTimelineEvent[]) {
+ return [...events].sort(
+ (first, second) =>
+ new Date(first.createdAt).getTime() - new Date(second.createdAt).getTime(),
+ );
+}
+
+function timelineMetadataText(metadata: Record<string, unknown> | null) {
+ if (!metadata) return "";
+
+ return Object.entries(metadata)
+ .map(([key, value]) => `${key}: ${payloadValueToText(value)}`)
+ .join(" • ");
+}
+
 export function JobDetailModal({
  job,
  onClose,
  onStatusChange,
  onNotesChange,
+ isTracked = false,
+ timelineVersion = 0,
 }: JobDetailModalProps) {
+ const [timeline, setTimeline] = useState<JobTimelineEvent[]>([]);
+ const [isTimelineLoading, setIsTimelineLoading] = useState(false);
+ const [timelineError, setTimelineError] = useState(false);
+
+ useEffect(() => {
+ if (!isTracked) return;
+
+ let active = true;
+ void Promise.resolve()
+ .then(() => {
+ if (!active) return null;
+ setIsTimelineLoading(true);
+ setTimelineError(false);
+ return getDashboardSavedJobEvents(job.id);
+ })
+ .then((events) => {
+ if (active && events) setTimeline(orderTimeline(events));
+ })
+ .catch(() => {
+ if (active) setTimelineError(true);
+ })
+ .finally(() => {
+ if (active) setIsTimelineLoading(false);
+ });
+
+ return () => {
+ active = false;
+ };
+ }, [isTracked, job.id, timelineVersion]);
+
  const payloadEntries = Object.entries(job.rawPayload ?? {}).filter(
  ([key]) => key !== "description",
  );
@@ -199,6 +260,51 @@ export function JobDetailModal({
  className="min-h-28 w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:border-ring"
  />
  </label>
+
+ {isTracked ? (
+ <section className="space-y-2" aria-labelledby="timeline-title">
+ <h3
+ id="timeline-title"
+ className="text-xs font-bold uppercase text-muted-foreground"
+ >
+ Histórico da candidatura
+ </h3>
+ {isTimelineLoading ? (
+ <p className="text-sm text-muted-foreground">Carregando histórico...</p>
+ ) : null}
+ {timelineError ? (
+ <p className="text-sm text-destructive">
+ Não foi possível carregar o histórico.
+ </p>
+ ) : null}
+ {!isTimelineLoading && !timelineError && timeline.length === 0 ? (
+ <p className="text-sm text-muted-foreground">
+ Nenhuma mudança de status registrada.
+ </p>
+ ) : null}
+ {!isTimelineLoading && !timelineError && timeline.length > 0 ? (
+ <ol className="space-y-2 border-l border-border pl-4">
+ {timeline.map((event) => (
+ <li key={event.id} className="relative text-sm">
+ <span className="absolute -left-[21px] top-1.5 h-2 w-2 rounded-full bg-primary" />
+ <p className="font-semibold">
+ Status alterado de {jobStatuses[event.fromStatus]} para{" "}
+ {jobStatuses[event.toStatus]}
+ </p>
+ <time className="text-xs text-muted-foreground" dateTime={event.createdAt}>
+ {formatTimelineDate(event.createdAt)}
+ </time>
+ {timelineMetadataText(event.metadata) ? (
+ <p className="text-xs text-muted-foreground">
+ {timelineMetadataText(event.metadata)}
+ </p>
+ ) : null}
+ </li>
+ ))}
+ </ol>
+ ) : null}
+ </section>
+ ) : null}
  </div>
  </Modal>
  );

frontend/src/domains/new_dashboard/infrastructure/dashboardJobsApi.ts

@@ -4,6 +4,7 @@ import type {
  Job,
  JobLevel,
  JobStatus,
+ JobTimelineEvent,
  JobType,
  MatchSort,
  NewJob,
@@ -54,8 +55,18 @@ const ApiSavedJobSchema = z.object({
  updatedAt: z.string().optional(),
 });
 
+const ApiSavedJobEventSchema = z.object({
+ id: z.string(),
+ type: z.literal("status_changed"),
+ fromStatus: z.enum(["saved", "applied", "interviewing", "rejected", "accepted"]),
+ toStatus: z.enum(["saved", "applied", "interviewing", "rejected", "accepted"]),
+ metadata: z.record(z.string(), z.unknown()).nullable().optional(),
+ createdAt: z.string(),
+});
+
 type ApiSearchJob = z.infer<typeof ApiSearchJobSchema>;
 type ApiSavedJob = z.infer<typeof ApiSavedJobSchema>;
+type ApiSavedJobEvent = z.infer<typeof ApiSavedJobEventSchema>;
 type SearchJobsResponse = z.infer<typeof SearchJobsResponseSchema>;
 
 export type SearchJobFilters = {
@@ -279,6 +290,13 @@ export function toDashboardSavedJob(job: ApiSavedJob): Job {
  };
 }
 
+function toDashboardSavedJobEvent(event: ApiSavedJobEvent): JobTimelineEvent {
+ return {
+ ...event,
+ metadata: event.metadata ?? null,
+ };
+}
+
 function toSearchJobsResult(
  response: SearchJobsResponse,
  page: number,
@@ -355,6 +373,11 @@ export async function getDashboardSavedJobs() {
  return z.array(ApiSavedJobSchema).parse(data).map(toDashboardSavedJob);
 }
 
+export async function getDashboardSavedJobEvents(id: string) {
+ const { data } = await api.get(`/saved-jobs/${id}/events`);
+ return z.array(ApiSavedJobEventSchema).parse(data).map(toDashboardSavedJobEvent);
+}
+
 export async function createDashboardSavedJob(
  job: Job | NewJob,
  status: JobStatus = "saved",

frontend/src/domains/new_dashboard/types/job.ts

@@ -52,6 +52,14 @@ export type JobType = z.infer<typeof JobTypeSchema>;
 export type JobLevel = z.infer<typeof JobLevelSchema>;
 export type Job = z.infer<typeof JobSchema>;
 export type NewJob = z.infer<typeof NewJobSchema>;
+export type JobTimelineEvent = {
+ id: string;
+ type: "status_changed";
+ fromStatus: JobStatus;
+ toStatus: JobStatus;
+ metadata: Record<string, unknown> | null;
+ createdAt: string;
+};
 export type MatchSort = "default" | "desc" | "asc";
 export type JobModelFilter =
  | "Todos"

frontend/tests/unit/new_dashboard/api.test.ts

@@ -14,6 +14,7 @@ vi.mock("@/shared/lib/apiClient", () => ({
 import {
  createDashboardSavedJob,
  deleteDashboardSavedJob,
+ getDashboardSavedJobEvents,
  getDashboardSavedJobs,
  searchDashboardJobs,
  toRecommendedJob,
@@ -379,6 +380,32 @@ it("mapeia entityId para jobId apenas quando entityType é job, e readAt para is
  });
  });
 
+ it("busca e tipa os eventos da vaga salva", async () => {
+ apiMock.get.mockResolvedValue({
+ data: [
+ {
+ id: "event-1",
+ type: "status_changed",
+ fromStatus: "saved",
+ toStatus: "applied",
+ metadata: { source: "dashboard" },
+ createdAt: "2026-07-10T12:00:00.000Z",
+ },
+ ],
+ });
+
+ const events = await getDashboardSavedJobEvents("saved-1");
+
+ expect(apiMock.get).toHaveBeenCalledWith("/saved-jobs/saved-1/events");
+ expect(events).toEqual([
+ expect.objectContaining({
+ fromStatus: "saved",
+ toStatus: "applied",
+ metadata: { source: "dashboard" },
+ }),
+ ]);
+ });
+
  it("cria, atualiza e remove vagas salvas", async () => {
  apiMock.post.mockResolvedValue({
  data: {