From 15b4f8482873a10f83f89b034d81f8cd07e921e5 Mon Sep 17 00:00:00 2001
From: Pedro Silva <pedro_rike@hotmail.com.br>
Date: Sun, 26 Jul 2026 14:04:32 -0300
Subject: [PATCH 1/5] feat: add sorting functionality and publication date to
 job table

---
 .../new_dashboard/NewDashboardPage.tsx        |  23 ++-
 .../new_dashboard/components/jobs/JobRow.tsx  |   3 +
 .../components/jobs/JobTable.tsx              | 183 +++++++++++++++++-
 .../new_dashboard/hooks/useDashboardJobs.ts   |  29 ++-
 .../infrastructure/dashboardJobsApi.ts        |  28 ++-
 frontend/tests/unit/new_dashboard/api.test.ts |   3 +
 .../tests/unit/new_dashboard/jobs.test.tsx    |  78 +++++++-
 7 files changed, 327 insertions(+), 20 deletions(-)

diff --git a/frontend/src/domains/new_dashboard/NewDashboardPage.tsx b/frontend/src/domains/new_dashboard/NewDashboardPage.tsx
index 6e14fe6..350f423 100644
--- a/frontend/src/domains/new_dashboard/NewDashboardPage.tsx
+++ b/frontend/src/domains/new_dashboard/NewDashboardPage.tsx
@@ -180,6 +180,20 @@ export default function NewDashboardPage() {
     saveUserProfile,
     saveSearchPreferences,
   } = useUserDashboardData(user, { onError: showToast });
+  const preferredModelFilter = useMemo(
+    () => getModelFilterFromJobTypes(searchPreferences.jobTypes),
+    [searchPreferences.jobTypes],
+  );
+  const initialRecommendationSearch = useMemo(
+    () =>
+      isLoadingUserData
+        ? null
+        : {
+            keywords: [],
+            filters: modelFilterToApiFilter(preferredModelFilter),
+          },
+    [isLoadingUserData, preferredModelFilter],
+  );
   const {
     trackedJobs,
     recommendedJobs,
@@ -190,7 +204,10 @@ export default function NewDashboardPage() {
     changeJobStatus,
     changeJobNotesLocally,
     saveJobNotes,
-  } = useDashboardJobs(user, { onError: showToast });
+  } = useDashboardJobs(user, {
+    onError: showToast,
+    initialRecommendationSearch,
+  });
 
   const matchedTrackedJobs = useMemo(
     () =>
@@ -213,10 +230,6 @@ export default function NewDashboardPage() {
       ),
     [filterType, matchedRecommendedJobs],
   );
-  const preferredModelFilter = useMemo(
-    () => getModelFilterFromJobTypes(searchPreferences.jobTypes),
-    [searchPreferences.jobTypes],
-  );
   const showPreferenceNotice =
     !hasUserChangedJobFilters &&
     preferredModelFilter !== "Todos" &&
diff --git a/frontend/src/domains/new_dashboard/components/jobs/JobRow.tsx b/frontend/src/domains/new_dashboard/components/jobs/JobRow.tsx
index b1f410a..a754948 100644
--- a/frontend/src/domains/new_dashboard/components/jobs/JobRow.tsx
+++ b/frontend/src/domains/new_dashboard/components/jobs/JobRow.tsx
@@ -63,6 +63,9 @@ export function JobRow({ job, onOpen, onStatusChange }: JobRowProps) {
       <td className="px-4 py-5 align-middle text-sm text-muted-foreground">
         {job.level}
       </td>
+      <td className="whitespace-nowrap px-4 py-5 align-middle text-sm text-muted-foreground">
+        {job.posted}
+      </td>
       <td className="px-4 py-5 align-middle">
         <span
           className="rounded-full bg-emerald-100 px-2 py-1 text-[11px] font-bold text-emerald-700"
diff --git a/frontend/src/domains/new_dashboard/components/jobs/JobTable.tsx b/frontend/src/domains/new_dashboard/components/jobs/JobTable.tsx
index ff4c43b..b98ef1a 100644
--- a/frontend/src/domains/new_dashboard/components/jobs/JobTable.tsx
+++ b/frontend/src/domains/new_dashboard/components/jobs/JobTable.tsx
@@ -1,8 +1,85 @@
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { useState } from "react";
+import {
+  ArrowDown,
+  ArrowUp,
+  ArrowUpDown,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
+import { useMemo, useState } from "react";
 import type { Job, JobStatus } from "../../types";
 import { JobRow } from "./JobRow";
 
+type SortColumn = "source" | "level" | "posted";
+type SortDirection = "asc" | "desc";
+
+const levelOrder: Record<Job["level"], number> = {
+  "Estágio/Trainee": 0,
+  Júnior: 1,
+  Pleno: 2,
+  Sênior: 3,
+};
+
+function publicationTimestamp(job: Job) {
+  const rawPostedAt = job.rawPayload?.postedAt;
+  if (typeof rawPostedAt === "string" && rawPostedAt.trim()) {
+    const timestamp = new Date(rawPostedAt).getTime();
+    if (!Number.isNaN(timestamp)) return timestamp;
+  }
+
+  const formattedDate = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(job.posted);
+  if (!formattedDate) return null;
+
+  const [, day, month, year] = formattedDate;
+  return Date.UTC(Number(year), Number(month) - 1, Number(day));
+}
+
+function compareNullableValues<T>(
+  first: T | null,
+  second: T | null,
+  direction: SortDirection,
+  compare: (left: T, right: T) => number,
+) {
+  if (first === null && second === null) return 0;
+  if (first === null) return 1;
+  if (second === null) return -1;
+
+  const result = compare(first, second);
+  return direction === "asc" ? result : -result;
+}
+
+function compareJobs(
+  first: Job,
+  second: Job,
+  column: SortColumn,
+  direction: SortDirection,
+) {
+  if (column === "source") {
+    return compareNullableValues(
+      first.source.trim() || null,
+      second.source.trim() || null,
+      direction,
+      (left, right) =>
+        left.localeCompare(right, "pt-BR", { sensitivity: "base" }),
+    );
+  }
+
+  if (column === "level") {
+    return compareNullableValues(
+      levelOrder[first.level],
+      levelOrder[second.level],
+      direction,
+      (left, right) => left - right,
+    );
+  }
+
+  return compareNullableValues(
+    publicationTimestamp(first),
+    publicationTimestamp(second),
+    direction,
+    (left, right) => left - right,
+  );
+}
+
 interface JobTableProps {
   jobs: Job[];
   onOpenJob: (job: Job) => void;
@@ -27,6 +104,27 @@ export function JobTable({
 }: JobTableProps) {
   const [requestedPage, setRequestedPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
+  const [sort, setSort] = useState<{
+    column: SortColumn;
+    direction: SortDirection;
+  } | null>(null);
+
+  const sortedJobs = useMemo(() => {
+    if (!sort) return jobs;
+
+    return jobs
+      .map((job, index) => ({ job, index }))
+      .sort(
+        (first, second) =>
+          compareJobs(
+            first.job,
+            second.job,
+            sort.column,
+            sort.direction,
+          ) || first.index - second.index,
+      )
+      .map(({ job }) => job);
+  }, [jobs, sort]);
 
   if (jobs.length === 0) {
     return (
@@ -47,8 +145,8 @@ export function JobTable({
   const currentPage = Math.min(pagination?.page ?? requestedPage, totalPages);
   const firstItemIndex = (currentPage - 1) * effectivePageSize;
   const visibleJobs = isRemotePaginated
-    ? jobs
-    : jobs.slice(firstItemIndex, firstItemIndex + pageSize);
+    ? sortedJobs
+    : sortedJobs.slice(firstItemIndex, firstItemIndex + pageSize);
   const firstVisibleItem = firstItemIndex + 1;
   const lastVisibleItem = Math.min(
     firstItemIndex + visibleJobs.length,
@@ -66,6 +164,39 @@ export function JobTable({
     },
   );
 
+  const toggleSort = (column: SortColumn) => {
+    setSort((current) => {
+      if (current?.column === column) {
+        return {
+          column,
+          direction: current.direction === "asc" ? "desc" : "asc",
+        };
+      }
+
+      return {
+        column,
+        direction: column === "posted" ? "desc" : "asc",
+      };
+    });
+  };
+
+  const sortIcon = (column: SortColumn) => {
+    if (sort?.column !== column) {
+      return <ArrowUpDown className="h-3.5 w-3.5" aria-hidden="true" />;
+    }
+
+    return sort.direction === "asc" ? (
+      <ArrowUp className="h-3.5 w-3.5" aria-hidden="true" />
+    ) : (
+      <ArrowDown className="h-3.5 w-3.5" aria-hidden="true" />
+    );
+  };
+
+  const ariaSort = (column: SortColumn) => {
+    if (sort?.column !== column) return "none";
+    return sort.direction === "asc" ? "ascending" : "descending";
+  };
+
   return (
     <div className="overflow-hidden rounded-lg border border-border bg-card">
       <div className="overflow-x-auto">
@@ -73,9 +204,49 @@ export function JobTable({
           <thead className="border-b border-border bg-muted/45 text-xs uppercase text-muted-foreground">
             <tr>
               <th className="px-6 py-4 font-bold">Cargo / Empresa</th>
-              <th className="px-4 py-4 font-bold">Fonte</th>
+              <th
+                className="px-4 py-4 font-bold"
+                aria-sort={ariaSort("source")}
+              >
+                <button
+                  type="button"
+                  onClick={() => toggleSort("source")}
+                  className="inline-flex items-center gap-1.5 hover:text-foreground"
+                  aria-label="Ordenar por fonte"
+                >
+                  Fonte
+                  {sortIcon("source")}
+                </button>
+              </th>
               <th className="px-4 py-4 font-bold">Modelo</th>
-              <th className="px-4 py-4 font-bold">Nível</th>
+              <th
+                className="px-4 py-4 font-bold"
+                aria-sort={ariaSort("level")}
+              >
+                <button
+                  type="button"
+                  onClick={() => toggleSort("level")}
+                  className="inline-flex items-center gap-1.5 hover:text-foreground"
+                  aria-label="Ordenar por nível"
+                >
+                  Nível
+                  {sortIcon("level")}
+                </button>
+              </th>
+              <th
+                className="px-4 py-4 font-bold"
+                aria-sort={ariaSort("posted")}
+              >
+                <button
+                  type="button"
+                  onClick={() => toggleSort("posted")}
+                  className="inline-flex items-center gap-1.5 hover:text-foreground"
+                  aria-label="Ordenar por data de publicação"
+                >
+                  Publicada em
+                  {sortIcon("posted")}
+                </button>
+              </th>
               <th className="px-4 py-4 font-bold">Match</th>
               <th className="px-6 py-4 text-right font-bold">Ações</th>
             </tr>
diff --git a/frontend/src/domains/new_dashboard/hooks/useDashboardJobs.ts b/frontend/src/domains/new_dashboard/hooks/useDashboardJobs.ts
index b53d5f9..2447efa 100644
--- a/frontend/src/domains/new_dashboard/hooks/useDashboardJobs.ts
+++ b/frontend/src/domains/new_dashboard/hooks/useDashboardJobs.ts
@@ -14,6 +14,10 @@ import { requestDashboardNotificationsRefresh } from "../utils/notificationEvent
 
 interface UseDashboardJobsOptions {
   onError?: (message: string) => void;
+  initialRecommendationSearch?: {
+    keywords: string[];
+    filters: SearchJobFilters;
+  } | null;
 }
 
 const TRACKED_JOBS_CACHE_PREFIX = "new-dashboard-tracked-jobs";
@@ -25,6 +29,13 @@ const DEFAULT_RECOMMENDED_PAGINATION: SearchJobsResult["pagination"] = {
   hasNext: false,
   hasPrev: false,
 };
+const DEFAULT_INITIAL_RECOMMENDATION_SEARCH = {
+  keywords: [],
+  filters: {},
+} satisfies {
+  keywords: string[];
+  filters: SearchJobFilters;
+};
 
 function errorMessage(error: unknown, fallback: string) {
   return error instanceof Error ? error.message : fallback;
@@ -72,7 +83,10 @@ function notifyJobEvent(job: Job, status?: JobStatus) {
 
 export function useDashboardJobs(
   user: User | null,
-  { onError }: UseDashboardJobsOptions = {},
+  {
+    onError,
+    initialRecommendationSearch = DEFAULT_INITIAL_RECOMMENDATION_SEARCH,
+  }: UseDashboardJobsOptions = {},
 ) {
   const [trackedJobs, setTrackedJobs] = useState<Job[]>([]);
   const [recommendedJobs, setRecommendedJobs] = useState<Job[]>([]);
@@ -103,7 +117,14 @@ export function useDashboardJobs(
 
     const [savedResult, recommendedResult] = await Promise.allSettled([
       getDashboardSavedJobs(),
-      searchDashboardJobs([], {}, 1, DEFAULT_RECOMMENDED_PAGINATION.limit),
+      initialRecommendationSearch
+        ? searchDashboardJobs(
+            initialRecommendationSearch.keywords,
+            initialRecommendationSearch.filters,
+            1,
+            DEFAULT_RECOMMENDED_PAGINATION.limit,
+          )
+        : Promise.resolve(null),
     ]);
 
     const loadedTrackedJobs =
@@ -120,7 +141,7 @@ export function useDashboardJobs(
       }
     }
 
-    if (recommendedResult.status === "fulfilled") {
+    if (recommendedResult.status === "fulfilled" && recommendedResult.value) {
       const savedLinks = new Set(
         effectiveTrackedJobs.map((job) => job.jobLink),
       );
@@ -140,7 +161,7 @@ export function useDashboardJobs(
     if (errors.length > 0) onError?.(errors.join(" "));
 
     setIsLoadingJobs(false);
-  }, [onError, user]);
+  }, [initialRecommendationSearch, onError, user]);
 
   useEffect(() => {
     let isMounted = true;
diff --git a/frontend/src/domains/new_dashboard/infrastructure/dashboardJobsApi.ts b/frontend/src/domains/new_dashboard/infrastructure/dashboardJobsApi.ts
index 34d6364..44a4ea7 100644
--- a/frontend/src/domains/new_dashboard/infrastructure/dashboardJobsApi.ts
+++ b/frontend/src/domains/new_dashboard/infrastructure/dashboardJobsApi.ts
@@ -20,6 +20,7 @@ const ApiSearchJobSchema = z
     location: z.string().nullable().optional(),
     modality: z.string().nullable().optional(),
     description: z.string().nullable().optional(),
+    postedAt: z.string().nullable().optional(),
     url: z.string().nullable().optional(),
     matchScore: z.number().int().min(0).max(100).nullable().optional(),
     matchSource: z.string().nullable().optional(),
@@ -173,6 +174,27 @@ function stableMatchScore(value: string) {
   return 70 + (hash % 26);
 }
 
+function formatPublicationDate(value: string | null | undefined) {
+  const rawDate = value?.trim();
+  if (!rawDate) return "Não informado";
+
+  const isoDate = /^(\d{4})-(\d{2})-(\d{2})/.exec(rawDate);
+  if (isoDate) {
+    const [, year, month, day] = isoDate;
+    return `${day}/${month}/${year}`;
+  }
+
+  const parsedDate = new Date(rawDate);
+  if (Number.isNaN(parsedDate.getTime())) return "Não informado";
+
+  return new Intl.DateTimeFormat("pt-BR", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    timeZone: "UTC",
+  }).format(parsedDate);
+}
+
 function compactTags(values: Array<string | null | undefined>) {
   return [
     ...new Set(
@@ -225,7 +247,7 @@ export function toRecommendedJob(job: ApiSearchJob, index: number): Job {
         ? job.matchScore
         : stableMatchScore(`${title}:${job.company ?? ""}`),
     tags: tags.length > 0 ? tags : ["Geral"],
-    posted: "Encontrada recentemente",
+    posted: formatPublicationDate(job.postedAt),
     status: "saved",
     jobLink,
     source:
@@ -249,9 +271,7 @@ export function toDashboardSavedJob(job: ApiSavedJob): Job {
     level: inferLevel(title),
     matchScore: stableMatchScore(`${title}:${job.company ?? ""}`),
     tags: job.keyword?.trim() ? [job.keyword.trim()] : ["Geral"],
-    posted: job.createdAt
-      ? new Date(job.createdAt).toLocaleDateString("pt-BR")
-      : "Salva recentemente",
+    posted: "Não informado",
     status: job.status,
     jobLink: job.jobLink,
     source: job.source?.trim() || "Manual",
diff --git a/frontend/tests/unit/new_dashboard/api.test.ts b/frontend/tests/unit/new_dashboard/api.test.ts
index 94c36c1..42f4312 100644
--- a/frontend/tests/unit/new_dashboard/api.test.ts
+++ b/frontend/tests/unit/new_dashboard/api.test.ts
@@ -60,6 +60,7 @@ describe("new_dashboard api adapters", () => {
             keywords: ["React", "TypeScript"],
             url: "",
             description: "Detalhe",
+            postedAt: "2026-07-25T18:54:24Z",
             matchScore: 91,
             matchSource: "backend_profile",
             matchedTechnologies: ["React", "TypeScript"],
@@ -106,6 +107,7 @@ describe("new_dashboard api adapters", () => {
       company: "ACME",
       source: "LinkedIn",
       tags: ["React", "TypeScript"],
+      posted: "25/07/2026",
       rawPayload: expect.objectContaining({
         description: "Detalhe",
         matchSource: "backend_profile",
@@ -533,6 +535,7 @@ describe("new_dashboard api adapters", () => {
     );
 
     expect(recommended.jobLink).toContain("canddate.local/jobs/");
+    expect(recommended.posted).toBe("Não informado");
     expect(recommended.rawPayload).toMatchObject({
       title: "Dev",
       company: "ACME",
diff --git a/frontend/tests/unit/new_dashboard/jobs.test.tsx b/frontend/tests/unit/new_dashboard/jobs.test.tsx
index c94942f..dc10ee9 100644
--- a/frontend/tests/unit/new_dashboard/jobs.test.tsx
+++ b/frontend/tests/unit/new_dashboard/jobs.test.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import { useState } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { AddJobModal } from "@/domains/new_dashboard/components/jobs/AddJobModal";
@@ -124,6 +124,9 @@ describe("new_dashboard job components", () => {
     );
 
     expect(screen.getByText(/exibindo 1-10 de 12 vagas/i)).toBeInTheDocument();
+    expect(
+      screen.getByRole("columnheader", { name: /publicada em/i }),
+    ).toBeInTheDocument();
     fireEvent.click(screen.getByRole("button", { name: /próxima página/i }));
     expect(screen.getByText(/exibindo 11-12 de 12 vagas/i)).toBeInTheDocument();
     fireEvent.change(screen.getByLabelText(/vagas por página/i), {
@@ -166,10 +169,83 @@ describe("new_dashboard job components", () => {
     fireEvent.click(screen.getAllByRole("button", { name: /detalhes/i })[0]);
     fireEvent.click(screen.getByRole("button", { name: /salvar/i }));
 
+    expect(screen.getByText("Hoje")).toBeInTheDocument();
     expect(onOpen).toHaveBeenCalledWith(baseJob);
     expect(onStatusChange).toHaveBeenCalledWith(baseJob.id, "saved");
   });
 
+  it("ordena a tabela por fonte, nível e data de publicação", () => {
+    const jobs: Job[] = [
+      {
+        ...baseJob,
+        id: "linkedin-senior",
+        jobTitle: "Vaga LinkedIn",
+        source: "LinkedIn",
+        level: "Sênior",
+        posted: "10/07/2026",
+        rawPayload: { postedAt: "2026-07-10T12:00:00Z" },
+      },
+      {
+        ...baseJob,
+        id: "adzuna-junior",
+        jobTitle: "Vaga Adzuna",
+        source: "Adzuna",
+        level: "Júnior",
+        posted: "25/07/2026",
+        rawPayload: { postedAt: "2026-07-25T12:00:00Z" },
+      },
+      {
+        ...baseJob,
+        id: "greenhouse-pleno",
+        jobTitle: "Vaga Greenhouse",
+        source: "Greenhouse",
+        level: "Pleno",
+        posted: "Não informado",
+        rawPayload: {},
+      },
+    ];
+
+    render(
+      <JobTable
+        jobs={jobs}
+        onOpenJob={vi.fn()}
+        onStatusChange={vi.fn()}
+      />,
+    );
+
+    const visibleTitles = () =>
+      screen
+        .getAllByRole("row")
+        .slice(1)
+        .map((row) => within(row).getAllByRole("cell")[0].textContent);
+
+    fireEvent.click(screen.getByRole("button", { name: /ordenar por fonte/i }));
+    expect(visibleTitles()).toEqual([
+      "Vaga AdzunaACME",
+      "Vaga GreenhouseACME",
+      "Vaga LinkedInACME",
+    ]);
+    expect(
+      screen.getByRole("columnheader", { name: /^fonte$/i }),
+    ).toHaveAttribute("aria-sort", "ascending");
+
+    fireEvent.click(screen.getByRole("button", { name: /ordenar por nível/i }));
+    expect(visibleTitles()).toEqual([
+      "Vaga AdzunaACME",
+      "Vaga GreenhouseACME",
+      "Vaga LinkedInACME",
+    ]);
+
+    fireEvent.click(
+      screen.getByRole("button", { name: /ordenar por data de publicação/i }),
+    );
+    expect(visibleTitles()).toEqual([
+      "Vaga AdzunaACME",
+      "Vaga LinkedInACME",
+      "Vaga GreenhouseACME",
+    ]);
+  });
+
   it("mostra detalhes completos da vaga e atualiza status/notas", () => {
     const onClose = vi.fn();
     const onStatusChange = vi.fn();

From 923b8333cc1ce4defd80addd017151849ae90d08 Mon Sep 17 00:00:00 2001
From: Pedro Silva <pedro_rike@hotmail.com.br>
Date: Sun, 26 Jul 2026 14:16:58 -0300
Subject: [PATCH 2/5] feat: add mobile navigation bar and update header styles

---
 .../new_dashboard/NewDashboardPage.tsx        |  5 +-
 .../components/layout/Header.tsx              | 31 +++++++----
 .../components/layout/MobileTabBar.tsx        | 51 +++++++++++++++++++
 .../components/layout/Sidebar.tsx             |  2 +-
 .../new_dashboard/dashboard.layout.test.tsx   | 19 ++++++-
 5 files changed, 96 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/domains/new_dashboard/components/layout/MobileTabBar.tsx

diff --git a/frontend/src/domains/new_dashboard/NewDashboardPage.tsx b/frontend/src/domains/new_dashboard/NewDashboardPage.tsx
index 350f423..e5abc49 100644
--- a/frontend/src/domains/new_dashboard/NewDashboardPage.tsx
+++ b/frontend/src/domains/new_dashboard/NewDashboardPage.tsx
@@ -8,6 +8,7 @@ import { AddJobModal } from "./components/jobs/AddJobModal";
 import { JobDetailModal } from "./components/jobs/JobDetailModal";
 import { JobTab } from "./components/jobs/JobTab";
 import { Header } from "./components/layout/Header";
+import { MobileTabBar } from "./components/layout/MobileTabBar";
 import { Sidebar } from "./components/layout/Sidebar";
 import { MentoringTab } from "./components/mentoring/MentoringTab";
 import { ProfileTab } from "./components/profile/ProfileTab";
@@ -540,11 +541,13 @@ export default function NewDashboardPage() {
       <div className="flex min-w-0 flex-1 flex-col">
         <Header userProfile={userProfile} />
 
-        <main className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden bg-background">
+        <main className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden bg-background pb-[calc(4.5rem+env(safe-area-inset-bottom))] lg:pb-0">
           {renderContent()}
         </main>
       </div>
 
+      <MobileTabBar />
+
       {selectedJob ? (
         <JobDetailModal
           job={selectedJob}
diff --git a/frontend/src/domains/new_dashboard/components/layout/Header.tsx b/frontend/src/domains/new_dashboard/components/layout/Header.tsx
index 41c0e33..d403888 100644
--- a/frontend/src/domains/new_dashboard/components/layout/Header.tsx
+++ b/frontend/src/domains/new_dashboard/components/layout/Header.tsx
@@ -192,11 +192,14 @@ export function Header({
   }, []);
 
   return (
-    <header className="relative z-20 flex h-[58px] shrink-0 items-center justify-between border-b border-border bg-card px-6 md:px-8">
-      <h1 className="text-[20px] font-bold leading-none text-foreground">
+    <header className="relative z-20 flex h-[58px] shrink-0 items-center justify-between gap-2 border-b border-border bg-card px-3 sm:px-6 md:px-8">
+      <h1 className="min-w-0 truncate text-base font-bold leading-none text-foreground sm:text-[20px]">
         {activeTitle}
       </h1>
-      <div ref={actionsRef} className="relative flex items-center gap-3">
+      <div
+        ref={actionsRef}
+        className="relative flex shrink-0 items-center gap-1 sm:gap-2 md:gap-3"
+      >
         <ThemeToggle />
 
         <div className="relative">
@@ -228,7 +231,7 @@ export function Header({
           </button>
 
           {showMessagesMenu ? (
-            <div className="absolute right-0 mt-3 w-[286px] rounded-xl border border-border bg-card p-4 text-sm text-foreground shadow-xl">
+            <div className="absolute right-0 mt-3 w-[min(286px,calc(100vw-1.5rem))] rounded-xl border border-border bg-card p-4 text-sm text-foreground shadow-xl">
               <div className="flex items-center justify-between border-b border-border pb-3">
                 <span className="font-bold">Caixa de Mensagens</span>
                 <span className="text-xs font-bold text-primary">
@@ -299,7 +302,7 @@ export function Header({
           </button>
 
           {showNotificationsMenu ? (
-            <div className="absolute right-0 mt-3 w-[286px] rounded-xl border border-border bg-card p-4 text-sm text-foreground shadow-xl">
+            <div className="absolute right-0 mt-3 w-[min(286px,calc(100vw-1.5rem))] rounded-xl border border-border bg-card p-4 text-sm text-foreground shadow-xl">
               <div className="flex items-center justify-between border-b border-border pb-3">
                 <span className="font-bold">Notificações Recentes</span>
                 <button
@@ -349,17 +352,17 @@ export function Header({
               setShowMessagesMenu(false);
               setShowNotificationsMenu(false);
             }}
-            className="flex h-12 items-center gap-3 rounded-xl border border-border bg-muted/45 px-3 pr-2 text-left transition-colors hover:bg-muted"
+            className="flex h-10 w-10 items-center justify-center rounded-full border border-border bg-muted/45 p-0 text-left transition-colors hover:bg-muted md:h-12 md:w-auto md:justify-start md:gap-3 md:rounded-xl md:px-3 md:pr-2"
             aria-label="Menu do usuário"
           >
             {avatarUrl ? (
               <img
                 src={avatarUrl}
                 alt={`Avatar de ${displayName}`}
-                className="h-9 w-9 shrink-0 rounded-full border border-border object-cover"
+                className="h-8 w-8 shrink-0 rounded-full border border-border object-cover md:h-9 md:w-9"
               />
             ) : (
-              <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-bold text-primary-foreground">
+              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-bold text-primary-foreground md:h-9 md:w-9">
                 {initials}
               </span>
             )}
@@ -375,7 +378,7 @@ export function Header({
           </button>
 
           {showUserMenu ? (
-            <div className="absolute right-0 mt-3 w-64 overflow-hidden rounded-xl border border-border bg-card text-sm text-foreground shadow-xl">
+            <div className="absolute right-0 mt-3 w-[min(16rem,calc(100vw-1.5rem))] overflow-hidden rounded-xl border border-border bg-card text-sm text-foreground shadow-xl">
               <div className="border-b border-border px-4 py-3 text-xs text-muted-foreground">
                 {accountLabel}
               </div>
@@ -396,6 +399,16 @@ export function Header({
               >
                 Segurança
               </button>
+              <button
+                type="button"
+                onClick={() => {
+                  setShowUserMenu(false);
+                  navigate("/ajuda");
+                }}
+                className="block w-full px-4 py-3 text-left hover:bg-muted"
+              >
+                Ajuda
+              </button>
               <button
                 type="button"
                 onClick={logout}
diff --git a/frontend/src/domains/new_dashboard/components/layout/MobileTabBar.tsx b/frontend/src/domains/new_dashboard/components/layout/MobileTabBar.tsx
new file mode 100644
index 0000000..b4fbd26
--- /dev/null
+++ b/frontend/src/domains/new_dashboard/components/layout/MobileTabBar.tsx
@@ -0,0 +1,51 @@
+import { cn } from "@/shared/lib/utils";
+import { Link, useLocation } from "react-router-dom";
+import { Icons } from "../shared/Icons";
+
+const tabs = [
+  { label: "Início", to: "/home", icon: Icons.Home },
+  { label: "Dashboard", to: "/dashboard", icon: Icons.Dashboard },
+  { label: "Vagas", to: "/vagas", icon: Icons.Vagas },
+  { label: "Mentoria", to: "/mentoria", icon: Icons.Mentoria },
+];
+
+export function MobileTabBar() {
+  const location = useLocation();
+
+  return (
+    <nav
+      className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-card/95 px-2 pt-1.5 shadow-[0_-8px_24px_rgba(0,0,0,0.12)] backdrop-blur lg:hidden"
+      style={{
+        paddingBottom: "max(0.5rem, env(safe-area-inset-bottom))",
+      }}
+      aria-label="Navegação principal mobile"
+    >
+      <div className="mx-auto grid max-w-lg grid-cols-4 gap-1">
+        {tabs.map((tab) => {
+          const Icon = tab.icon;
+          const active = location.pathname === tab.to;
+
+          return (
+            <Link
+              key={tab.to}
+              to={tab.to}
+              aria-current={active ? "page" : undefined}
+              className={cn(
+                "flex min-w-0 flex-col items-center justify-center gap-1 rounded-xl px-1 py-1.5 text-[11px] font-semibold transition-colors",
+                active
+                  ? "bg-primary/10 text-primary"
+                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+              )}
+            >
+              <Icon
+                className="h-5 w-5 shrink-0"
+                strokeWidth={active ? 2.5 : 2}
+              />
+              <span className="max-w-full truncate">{tab.label}</span>
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}
diff --git a/frontend/src/domains/new_dashboard/components/layout/Sidebar.tsx b/frontend/src/domains/new_dashboard/components/layout/Sidebar.tsx
index 3cef449..fab6bb8 100644
--- a/frontend/src/domains/new_dashboard/components/layout/Sidebar.tsx
+++ b/frontend/src/domains/new_dashboard/components/layout/Sidebar.tsx
@@ -22,7 +22,7 @@ export function Sidebar() {
   const { logout } = useAuth();
 
   return (
-    <aside className="flex h-screen w-[236px] shrink-0 flex-col border-r border-border bg-card px-4 pb-6 pt-3">
+    <aside className="hidden h-screen w-[236px] shrink-0 flex-col border-r border-border bg-card px-4 pb-6 pt-3 lg:flex">
       <div className="px-2 py-2">
         <CandidateLogo size="md" />
       </div>
diff --git a/frontend/tests/unit/new_dashboard/dashboard.layout.test.tsx b/frontend/tests/unit/new_dashboard/dashboard.layout.test.tsx
index 5b2c3f2..20edd02 100644
--- a/frontend/tests/unit/new_dashboard/dashboard.layout.test.tsx
+++ b/frontend/tests/unit/new_dashboard/dashboard.layout.test.tsx
@@ -1,10 +1,11 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { DashboardTab } from "@/domains/new_dashboard/components/dashboard/DashboardTab";
 import { KanbanBoard } from "@/domains/new_dashboard/components/dashboard/KanbanBoard";
 import { CandidateLogo } from "@/domains/new_dashboard/components/shared/CandidateLogo";
 import { Header } from "@/domains/new_dashboard/components/layout/Header";
+import { MobileTabBar } from "@/domains/new_dashboard/components/layout/MobileTabBar";
 import { Sidebar } from "@/domains/new_dashboard/components/layout/Sidebar";
 import { ThemeToggle } from "@/domains/new_dashboard/components/layout/ThemeToggle";
 import type { Job } from "@/domains/new_dashboard/types";
@@ -177,4 +178,20 @@ describe("new_dashboard dashboard and layout components", () => {
     fireEvent.click(screen.getByRole("button", { name: /sair/i }));
     expect(logout).toHaveBeenCalledTimes(1);
   });
+
+  it("renderiza a navegação mobile e destaca a aba ativa", () => {
+    renderWithRouter(<MobileTabBar />, "/vagas");
+
+    const navigation = screen.getByRole("navigation", {
+      name: /navegação principal mobile/i,
+    });
+    const activeLink = within(navigation).getByRole("link", { name: /vagas/i });
+
+    expect(within(navigation).getAllByRole("link")).toHaveLength(4);
+    expect(activeLink).toHaveAttribute("aria-current", "page");
+    expect(within(navigation).getByRole("link", { name: /início/i })).toHaveAttribute(
+      "href",
+      "/home",
+    );
+  });
 });

From 274e929df47187a9dd3a5febe9468451753dbaf6 Mon Sep 17 00:00:00 2001
From: Pedro Silva <pedro_rike@hotmail.com.br>
Date: Sun, 26 Jul 2026 14:24:46 -0300
Subject: [PATCH 3/5] feat: update JobFilter styles for responsive design and
 enhance test coverage

---
 .../components/jobs/JobFilter.tsx             | 14 +++++------
 .../tests/unit/new_dashboard/jobs.test.tsx    | 24 +++++++++++++++----
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/frontend/src/domains/new_dashboard/components/jobs/JobFilter.tsx b/frontend/src/domains/new_dashboard/components/jobs/JobFilter.tsx
index 59b8213..eaf2c99 100644
--- a/frontend/src/domains/new_dashboard/components/jobs/JobFilter.tsx
+++ b/frontend/src/domains/new_dashboard/components/jobs/JobFilter.tsx
@@ -39,8 +39,8 @@ export function JobFilter({
   setMatchSort,
 }: JobFilterProps) {
   return (
-    <div className="grid gap-4 rounded-2xl border border-border bg-card p-4 md:grid-cols-[minmax(280px,1fr)_168px_168px_180px_180px_180px]">
-      <label className="relative block">
+    <div className="grid min-w-0 grid-cols-1 gap-4 rounded-2xl border border-border bg-card p-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-[minmax(280px,1fr)_repeat(5,minmax(0,180px))]">
+      <label className="relative block min-w-0">
         <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
         <input
           value={searchQuery}
@@ -55,7 +55,7 @@ export function JobFilter({
         onChange={(event) =>
           setFilterType(event.target.value as JobModelFilter)
         }
-        className="h-11 rounded-lg border border-input bg-background px-3 text-sm outline-none transition-colors focus:border-ring"
+        className="h-11 w-full min-w-0 rounded-lg border border-input bg-background px-3 text-sm outline-none transition-colors focus:border-ring"
       >
         <option value="Todos">Modelo (Todos)</option>
         {jobModelFilterOptions
@@ -70,7 +70,7 @@ export function JobFilter({
       <select
         value={filterLevel}
         onChange={(event) => setFilterLevel(event.target.value)}
-        className="h-11 rounded-lg border border-input bg-background px-3 text-sm outline-none transition-colors focus:border-ring"
+        className="h-11 w-full min-w-0 rounded-lg border border-input bg-background px-3 text-sm outline-none transition-colors focus:border-ring"
       >
         <option value="Todos">Sênioridade (Todos)</option>
         {jobLevels.map((level) => (
@@ -83,7 +83,7 @@ export function JobFilter({
         onChange={(event) =>
           setContinentFilter(event.target.value as ContinentFilter)
         }
-        className="h-11 rounded-lg border border-input bg-background px-3 text-sm outline-none transition-colors focus:border-ring"
+        className="h-11 w-full min-w-0 rounded-lg border border-input bg-background px-3 text-sm outline-none transition-colors focus:border-ring"
       >
         {continentOptions.map((continent) => (
           <option key={continent} value={continent}>
@@ -97,7 +97,7 @@ export function JobFilter({
         onChange={(event) =>
           setCountryFilter(event.target.value as CountryFilter)
         }
-        className="h-11 rounded-lg border border-input bg-background px-3 text-sm outline-none transition-colors focus:border-ring"
+        className="h-11 w-full min-w-0 rounded-lg border border-input bg-background px-3 text-sm outline-none transition-colors focus:border-ring"
       >
         {countryOptions.map((country) => (
           <option key={country} value={country}>
@@ -109,7 +109,7 @@ export function JobFilter({
       <select
         value={matchSort}
         onChange={(event) => setMatchSort(event.target.value as MatchSort)}
-        className="h-11 rounded-lg border border-input bg-background px-3 text-sm outline-none transition-colors focus:border-ring"
+        className="h-11 w-full min-w-0 rounded-lg border border-input bg-background px-3 text-sm outline-none transition-colors focus:border-ring"
       >
         <option value="default">Match (padrão)</option>
         <option value="desc">Maior match</option>
diff --git a/frontend/tests/unit/new_dashboard/jobs.test.tsx b/frontend/tests/unit/new_dashboard/jobs.test.tsx
index dc10ee9..e236290 100644
--- a/frontend/tests/unit/new_dashboard/jobs.test.tsx
+++ b/frontend/tests/unit/new_dashboard/jobs.test.tsx
@@ -8,7 +8,7 @@ import { JobRow } from "@/domains/new_dashboard/components/jobs/JobRow";
 import { JobTab } from "@/domains/new_dashboard/components/jobs/JobTab";
 import { JobTable } from "@/domains/new_dashboard/components/jobs/JobTable";
 import { initialPreferences } from "@/domains/new_dashboard/constants";
-import type { Job } from "@/domains/new_dashboard/types";
+import type { Job, JobModelFilter } from "@/domains/new_dashboard/types";
 import type {
   ContinentFilter,
   CountryFilter,
@@ -72,8 +72,23 @@ describe("new_dashboard job components", () => {
       />,
     );
 
+    const searchInput = screen.getByPlaceholderText(
+      /buscar por cargo, empresa ou keywords/i,
+    );
+    const filterGrid = searchInput.closest("label")?.parentElement;
+
+    expect(filterGrid).toHaveClass(
+      "grid-cols-1",
+      "sm:grid-cols-2",
+      "xl:grid-cols-3",
+      "2xl:grid-cols-[minmax(280px,1fr)_repeat(5,minmax(0,180px))]",
+    );
+    screen.getAllByRole("combobox").forEach((select) => {
+      expect(select).toHaveClass("w-full", "min-w-0");
+    });
+
     fireEvent.change(
-      screen.getByPlaceholderText(/buscar por cargo, empresa ou keywords/i),
+      searchInput,
       {
         target: { value: "react" },
       },
@@ -147,8 +162,6 @@ describe("new_dashboard job components", () => {
           page: 2,
           limit: 10,
           totalPages: 3,
-          hasNext: true,
-          hasPrev: true,
         }}
         onPageChange={onPageChange}
         onPageSizeChange={vi.fn()}
@@ -361,7 +374,8 @@ describe("new_dashboard job components", () => {
 
     function Harness() {
       const [searchQuery, setSearchQuery] = useState("");
-      const [filterType, setFilterType] = useState("Todos");
+      const [filterType, setFilterType] =
+        useState<JobModelFilter>("Todos");
       const [filterLevel, setFilterLevel] = useState("Todos");
       const [continentFilter, setContinentFilter] =
         useState<ContinentFilter>("Todos");

From c4944215a6af52d2a21252c469dc14e816818312 Mon Sep 17 00:00:00 2001
From: Pedro Silva <pedro_rike@hotmail.com.br>
Date: Sun, 26 Jul 2026 14:27:03 -0300
Subject: [PATCH 4/5] feat: update JobTable header text for consistency and add
 corresponding test

---
 .../src/domains/new_dashboard/components/jobs/JobTable.tsx    | 4 ++--
 frontend/tests/unit/new_dashboard/jobs.test.tsx               | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/domains/new_dashboard/components/jobs/JobTable.tsx b/frontend/src/domains/new_dashboard/components/jobs/JobTable.tsx
index b98ef1a..c756352 100644
--- a/frontend/src/domains/new_dashboard/components/jobs/JobTable.tsx
+++ b/frontend/src/domains/new_dashboard/components/jobs/JobTable.tsx
@@ -201,9 +201,9 @@ export function JobTable({
     <div className="overflow-hidden rounded-lg border border-border bg-card">
       <div className="overflow-x-auto">
         <table className="w-full border-collapse text-left">
-          <thead className="border-b border-border bg-muted/45 text-xs uppercase text-muted-foreground">
+          <thead className="border-b border-border bg-muted/45 text-xs text-muted-foreground">
             <tr>
-              <th className="px-6 py-4 font-bold">Cargo / Empresa</th>
+              <th className="px-6 py-4 font-bold">Cargo / empresa</th>
               <th
                 className="px-4 py-4 font-bold"
                 aria-sort={ariaSort("source")}
diff --git a/frontend/tests/unit/new_dashboard/jobs.test.tsx b/frontend/tests/unit/new_dashboard/jobs.test.tsx
index e236290..d4bf255 100644
--- a/frontend/tests/unit/new_dashboard/jobs.test.tsx
+++ b/frontend/tests/unit/new_dashboard/jobs.test.tsx
@@ -139,6 +139,9 @@ describe("new_dashboard job components", () => {
     );
 
     expect(screen.getByText(/exibindo 1-10 de 12 vagas/i)).toBeInTheDocument();
+    expect(
+      screen.getByRole("columnheader", { name: "Cargo / empresa" }),
+    ).toBeInTheDocument();
     expect(
       screen.getByRole("columnheader", { name: /publicada em/i }),
     ).toBeInTheDocument();

From e609af7d0a924ddb123abce25a55f223fea0ce38 Mon Sep 17 00:00:00 2001
From: Pedro Silva <pedro_rike@hotmail.com.br>
Date: Sun, 26 Jul 2026 14:32:36 -0300
Subject: [PATCH 5/5] feat: add FormattedJobDescription component and integrate
 it into JobDetailModal

---
 .../jobs/FormattedJobDescription.tsx          | 151 ++++++++++++++++++
 .../components/jobs/JobDetailModal.tsx        |   9 +-
 .../tests/unit/new_dashboard/jobs.test.tsx    |  32 +++-
 3 files changed, 187 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/domains/new_dashboard/components/jobs/FormattedJobDescription.tsx

diff --git a/frontend/src/domains/new_dashboard/components/jobs/FormattedJobDescription.tsx b/frontend/src/domains/new_dashboard/components/jobs/FormattedJobDescription.tsx
new file mode 100644
index 0000000..ba39af9
--- /dev/null
+++ b/frontend/src/domains/new_dashboard/components/jobs/FormattedJobDescription.tsx
@@ -0,0 +1,151 @@
+import { Fragment, type ReactNode } from "react";
+
+interface FormattedJobDescriptionProps {
+  description: string;
+}
+
+const discardedElements = new Set([
+  "button",
+  "canvas",
+  "embed",
+  "form",
+  "iframe",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "noscript",
+  "object",
+  "script",
+  "style",
+  "svg",
+]);
+
+function decodeEncodedMarkup(value: string) {
+  let decoded = value;
+
+  for (
+    let attempt = 0;
+    attempt < 3 && /&(?:amp;)?(?:lt|gt);/i.test(decoded);
+    attempt += 1
+  ) {
+    const document = new DOMParser().parseFromString(decoded, "text/html");
+    const nextValue = document.body.textContent ?? decoded;
+
+    if (nextValue === decoded) break;
+    decoded = nextValue;
+  }
+
+  return decoded;
+}
+
+function safeExternalUrl(value: string | null) {
+  if (!value) return null;
+
+  try {
+    const url = new URL(value, window.location.origin);
+    return url.protocol === "http:" || url.protocol === "https:"
+      ? url.href
+      : null;
+  } catch {
+    return null;
+  }
+}
+
+function renderNode(node: Node, key: string): ReactNode {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.textContent;
+  }
+
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return null;
+  }
+
+  const element = node as HTMLElement;
+  const tag = element.tagName.toLowerCase();
+
+  if (discardedElements.has(tag)) {
+    return null;
+  }
+
+  const children = Array.from(element.childNodes).map((child, index) =>
+    renderNode(child, `${key}-${index}`),
+  );
+
+  switch (tag) {
+    case "a": {
+      const href = safeExternalUrl(element.getAttribute("href"));
+
+      return href ? (
+        <a key={key} href={href} target="_blank" rel="noreferrer nofollow">
+          {children}
+        </a>
+      ) : (
+        <span key={key}>{children}</span>
+      );
+    }
+    case "br":
+      return <br key={key} />;
+    case "strong":
+    case "b":
+      return <strong key={key}>{children}</strong>;
+    case "em":
+    case "i":
+      return <em key={key}>{children}</em>;
+    case "h1":
+      return <h1 key={key}>{children}</h1>;
+    case "h2":
+      return <h2 key={key}>{children}</h2>;
+    case "h3":
+      return <h3 key={key}>{children}</h3>;
+    case "h4":
+    case "h5":
+    case "h6":
+      return <h4 key={key}>{children}</h4>;
+    case "ul":
+      return <ul key={key}>{children}</ul>;
+    case "ol":
+      return <ol key={key}>{children}</ol>;
+    case "li":
+      return <li key={key}>{children}</li>;
+    case "p":
+      return <p key={key}>{children}</p>;
+    case "blockquote":
+      return <blockquote key={key}>{children}</blockquote>;
+    case "code":
+      return <code key={key}>{children}</code>;
+    case "pre":
+      return <pre key={key}>{children}</pre>;
+    case "hr":
+      return <hr key={key} />;
+    case "div":
+      return <div key={key}>{children}</div>;
+    default:
+      return <Fragment key={key}>{children}</Fragment>;
+  }
+}
+
+export function FormattedJobDescription({
+  description,
+}: FormattedJobDescriptionProps) {
+  const decodedDescription = decodeEncodedMarkup(description);
+  const document = new DOMParser().parseFromString(
+    decodedDescription,
+    "text/html",
+  );
+  const hasMarkup = /<\/?[a-z][\s\S]*>/i.test(decodedDescription);
+
+  return (
+    <div className="max-h-80 overflow-y-auto rounded-md border border-border bg-background p-4 text-sm leading-6 text-muted-foreground [&_a]:font-semibold [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-2 [&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_h1]:mb-3 [&_h1]:text-xl [&_h1]:font-bold [&_h2]:mb-3 [&_h2]:text-lg [&_h2]:font-bold [&_h3]:mb-2 [&_h3]:mt-5 [&_h3]:text-base [&_h3]:font-bold [&_h4]:mb-2 [&_h4]:mt-4 [&_h4]:font-bold [&_hr]:my-4 [&_li]:mb-1 [&_ol]:mb-4 [&_ol]:list-decimal [&_ol]:pl-5 [&_p]:mb-3 [&_pre]:overflow-x-auto [&_pre]:whitespace-pre-wrap [&_strong]:font-bold [&_strong]:text-foreground [&_ul]:mb-4 [&_ul]:list-disc [&_ul]:pl-5">
+      {hasMarkup ? (
+        Array.from(document.body.childNodes).map((node, index) =>
+          renderNode(node, String(index)),
+        )
+      ) : (
+        <p className="whitespace-pre-wrap">
+          {document.body.textContent ?? decodedDescription}
+        </p>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/domains/new_dashboard/components/jobs/JobDetailModal.tsx b/frontend/src/domains/new_dashboard/components/jobs/JobDetailModal.tsx
index 9670161..1d46fdc 100644
--- a/frontend/src/domains/new_dashboard/components/jobs/JobDetailModal.tsx
+++ b/frontend/src/domains/new_dashboard/components/jobs/JobDetailModal.tsx
@@ -2,6 +2,7 @@ import { ExternalLink } from "lucide-react";
 import { jobStatusClasses, jobStatuses } from "../../constants";
 import type { Job, JobStatus } from "../../types";
 import { Modal } from "../shared/Modal";
+import { FormattedJobDescription } from "./FormattedJobDescription";
 
 interface JobDetailModalProps {
   job: Job;
@@ -49,7 +50,9 @@ export function JobDetailModal({
   onStatusChange,
   onNotesChange,
 }: JobDetailModalProps) {
-  const payloadEntries = Object.entries(job.rawPayload ?? {});
+  const payloadEntries = Object.entries(job.rawPayload ?? {}).filter(
+    ([key]) => key !== "description",
+  );
   const description = payloadValueToText(job.rawPayload?.description);
   const hasDescription = description !== "Não informado";
 
@@ -131,9 +134,7 @@ export function JobDetailModal({
             <span className="text-xs font-bold uppercase text-muted-foreground">
               Descrição
             </span>
-            <p className="max-h-48 overflow-y-auto whitespace-pre-wrap rounded-md border border-border bg-background p-3 text-sm leading-6 text-muted-foreground">
-              {description}
-            </p>
+            <FormattedJobDescription description={description} />
           </div>
         ) : null}
 
diff --git a/frontend/tests/unit/new_dashboard/jobs.test.tsx b/frontend/tests/unit/new_dashboard/jobs.test.tsx
index d4bf255..acb688e 100644
--- a/frontend/tests/unit/new_dashboard/jobs.test.tsx
+++ b/frontend/tests/unit/new_dashboard/jobs.test.tsx
@@ -315,7 +315,37 @@ describe("new_dashboard job components", () => {
 
     expect(screen.getByText("LinkedIn, Gupy")).toBeInTheDocument();
     expect(screen.getByText(/seniority/i)).toBeInTheDocument();
-    expect(screen.getAllByText(/detalhes avançados da vaga/i)).toHaveLength(2);
+    expect(screen.getByText(/detalhes avançados da vaga/i)).toBeInTheDocument();
+  });
+
+  it("formata HTML codificado e descarta conteúdo inseguro da descrição", () => {
+    const { container } = render(
+      <JobDetailModal
+        job={{
+          ...baseJob,
+          rawPayload: {
+            description:
+              "&lt;h3&gt;Sobre a vaga&lt;/h3&gt;&lt;p&gt;Crie produtos com &lt;strong&gt;React&lt;/strong&gt;.&lt;/p&gt;&lt;ul&gt;&lt;li&gt;TypeScript&lt;/li&gt;&lt;/ul&gt;&lt;a href=&quot;https://example.com/details&quot;&gt;Saiba mais&lt;/a&gt;&lt;script&gt;alert('xss')&lt;/script&gt;",
+          },
+        }}
+        onClose={vi.fn()}
+        onStatusChange={vi.fn()}
+        onNotesChange={vi.fn()}
+      />,
+    );
+
+    expect(
+      screen.getByRole("heading", { name: "Sobre a vaga" }),
+    ).toBeInTheDocument();
+    expect(container.querySelector("strong")).toHaveTextContent("React");
+    expect(screen.getByRole("listitem")).toHaveTextContent("TypeScript");
+    expect(screen.getByRole("link", { name: "Saiba mais" })).toHaveAttribute(
+      "href",
+      "https://example.com/details",
+    );
+    expect(container.querySelector("script")).not.toBeInTheDocument();
+    expect(screen.queryByText(/alert\('xss'\)/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/&lt;h3&gt;/i)).not.toBeInTheDocument();
   });
 
   it("valida e salva uma vaga manual nova", () => {