Fix loading job page when clicking on interactive elements

src/components/JobCard.tsx

@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { IndJob } from '@/lib/types';
 import JobCardHeader from './JobCardHeader';
@@ -22,6 +22,8 @@ const JobCard: React.FC<JobCardProps> = ({
   onImportBOM,
   isTracked = false
 }) => {
+  const navigate = useNavigate();
+
   const getStatusBackgroundColor = (status: string) => {
     switch (status) {
       case 'Planned': return 'bg-gray-600/20';
@@ -35,30 +37,40 @@ const JobCard: React.FC<JobCardProps> = ({
     }
   };
 
+  const handleCardClick = (e: React.MouseEvent) => {
+    // Check if the click target or any of its parents has the data-no-navigate attribute
+    const target = e.target as HTMLElement;
+    const hasNoNavigate = target.closest('[data-no-navigate]');
+    
+    if (hasNoNavigate) {
+      // Don't navigate if clicking on elements marked as non-navigating
+      return;
+    }
+    
+    // Only navigate if clicking on areas that aren't marked as non-navigating
+    navigate(`/${job.id}`);
+  };
+
   return (
-    <Link
-      to={`/${job.id}`}
-      className="block h-full no-underline"
+    <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}
     >
-      <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>
+      <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>
   );
 };