From 04073dc6a0002cfcb2a264568270f5f61645e130 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Thu, 30 Jul 2026 05:24:43 +0000
Subject: [PATCH] jobs list rows are links to /jobs/:id instead of a navigate
 button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

the row was a <button onClick={navigate(`/jobs/${id}`)}> with the id only in the
closure — no href, no cmd/middle-click. it's now a <Link>; the active-row highlight
already keys off useParams().id so nothing else changed. the stop/delete action stays
a button.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx b/src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx
index 2b025b3d..af95e1a8 100644
--- a/src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx
+++ b/src/apps/officer-web/Screens/Dashboard/Jobs/JobsPage.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, type ReactNode, type MouseEvent } from 'react';
-import { useParams, useNavigate } from 'react-router';
+import { useParams, Link } from 'react-router';
 import {
   Search,
   CheckCircle2,
@@ -97,7 +97,6 @@ const useJobsData = () => {
 
 type JobRowProps = { job: JobSummary; onAction: (ev: MouseEvent, job: JobSummary) => void };
 const JobRow = ({ job, onAction }: JobRowProps) => {
-  const navigate = useNavigate();
   const { id: activeId } = useParams<{ id: string }>();
   const isRunning = job.status === 'running';
   const target = basename(job.target);
@@ -105,8 +104,8 @@ const JobRow = ({ job, onAction }: JobRowProps) => {
     <div
       className={`group w-full border-b border-duck-dark/5 flex items-center transition-colors ${job.id === activeId ? 'bg-duck-teal/10' : 'hover:bg-duck-dark/5'}`}
     >
-      <button
-        onClick={() => navigate(`/jobs/${job.id}`)}
+      <Link
+        to={`/jobs/${job.id}`}
         className="flex-1 min-w-0 text-left px-4 py-2.5 flex items-center gap-3 cursor-pointer"
       >
         <StatusIcon status={job.status} />
@@ -122,7 +121,7 @@ const JobRow = ({ job, onAction }: JobRowProps) => {
             {job.error && <span className="text-xs text-red-500 truncate max-w-[160px]">{job.error}</span>}
           </div>
         </div>
-      </button>
+      </Link>
       <button
         onClick={(ev) => onAction(ev, job)}
         title={isRunning ? 'Stop' : 'Delete'}