From e9a539997b15585dfdda0b16339717e8699352eb Mon Sep 17 00:00:00 2001
From: PhatPhuckDave <david.majdandzic@hotmail.com>
Date: Mon, 7 Jul 2025 16:31:30 +0200
Subject: [PATCH] "Rework" navigation to be less javascript-y

---
 src/components/JobCard.tsx | 49 ++++++++++++++++++--------------------
 1 file changed, 23 insertions(+), 26 deletions(-)

diff --git a/src/components/JobCard.tsx b/src/components/JobCard.tsx
index c0b5945..a27c71b 100644
--- a/src/components/JobCard.tsx
+++ b/src/components/JobCard.tsx
@@ -1,5 +1,4 @@
-
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { IndJob } from '@/lib/types';
 import JobCardHeader from './JobCardHeader';
@@ -23,12 +22,6 @@ const JobCard: React.FC<JobCardProps> = ({
   onImportBOM,
   isTracked = false
 }) => {
-  const navigate = useNavigate();
-
-  const handleCardClick = () => {
-    navigate(`/${job.id}`);
-  };
-
   const getStatusBackgroundColor = (status: string) => {
     switch (status) {
       case 'Planned': return 'bg-gray-600/20';
@@ -43,25 +36,29 @@ const JobCard: React.FC<JobCardProps> = ({
   };
 
   return (
-    <Card
-      className={`bg-gray-900 border-gray-700 text-white h-full flex flex-col cursor-pointer hover:bg-gray-800/50 transition-colors ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''} ${getStatusBackgroundColor(job.status)}`}
-      onClick={handleCardClick}
+    <Link
+      to={`/${job.id}`}
+      className="block h-full no-underline"
     >
-      <CardHeader className="flex-shrink-0">
-        <JobCardHeader
-          job={job}
-          onEdit={onEdit}
-          onDelete={onDelete}
-          onUpdateProduced={onUpdateProduced}
-          onImportBOM={onImportBOM}
-        />
-      </CardHeader>
-      <CardContent className="flex-1 flex flex-col space-y-4">
-        <JobCardDetails job={job} />
-        <div className="flex-1" />
-        <JobCardMetrics job={job} />
-      </CardContent>
-    </Card>
+      <Card
+        className={`bg-gray-900 border-gray-700 text-white h-full flex flex-col cursor-pointer hover:bg-gray-800/50 transition-colors ${job.status === 'Tracked' ? 'border-l-4 border-l-cyan-600' : ''} ${getStatusBackgroundColor(job.status)}`}
+      >
+        <CardHeader className="flex-shrink-0">
+          <JobCardHeader
+            job={job}
+            onEdit={onEdit}
+            onDelete={onDelete}
+            onUpdateProduced={onUpdateProduced}
+            onImportBOM={onImportBOM}
+          />
+        </CardHeader>
+        <CardContent className="flex-1 flex flex-col space-y-4">
+          <JobCardDetails job={job} />
+          <div className="flex-1" />
+          <JobCardMetrics job={job} />
+        </CardContent>
+      </Card>
+    </Link>
   );
 };