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
+    <Card
-      to={`/${job.id}`}
+      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)}`}
-      className="block h-full no-underline"
+      onClick={handleCardClick}
     >
-      <Card
+      <CardHeader className="flex-shrink-0">
-        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)}`}
+        <JobCardHeader
-      >
+          job={job}
-        <CardHeader className="flex-shrink-0">
+          onEdit={onEdit}
-          <JobCardHeader
+          onDelete={onDelete}
-            job={job}
+          onUpdateProduced={onUpdateProduced}
-            onEdit={onEdit}
+          onImportBOM={onImportBOM}
-            onDelete={onDelete}
+        />
-            onUpdateProduced={onUpdateProduced}
+      </CardHeader>
-            onImportBOM={onImportBOM}
+      <CardContent className="flex-1 flex flex-col space-y-4">
-          />
+        <JobCardDetails job={job} />
-        </CardHeader>
+        <div className="flex-1" />
-        <CardContent className="flex-1 flex flex-col space-y-4">
+        <JobCardMetrics job={job} />
-          <JobCardDetails job={job} />
+      </CardContent>
-          <div className="flex-1" />
+    </Card>
-          <JobCardMetrics job={job} />
-        </CardContent>
-      </Card>
-    </Link>
   );
 };
 

src/components/JobCardDetails.tsx

@@ -28,7 +28,6 @@ const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
   };
 
   const handleFieldClick = (fieldName: string, currentValue: string | null, e: React.MouseEvent) => {
-    e.stopPropagation();
     setEditingField(fieldName);
     setTempValues({ ...tempValues, [fieldName]: currentValue || '' });
   };
@@ -73,15 +72,16 @@ const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
           onChange={(e) => setTempValues({ ...tempValues, [fieldName]: e.target.value })}
           onBlur={() => handleFieldUpdate(fieldName, tempValues[fieldName])}
           onKeyDown={(e) => handleKeyPress(fieldName, e)}
-          onClick={(e) => e.stopPropagation()}
           className="h-6 px-2 py-1 bg-gray-800 border-gray-600 text-white text-xs"
           autoFocus
+          data-no-navigate
         />
       ) : (
         <span
           onClick={(e) => handleFieldClick(fieldName, value, e)}
           className="cursor-pointer hover:text-blue-400 flex-1"
           title="Click to edit"
+          data-no-navigate
         >
           {formatDateTime(value)}
         </span>
@@ -136,7 +136,10 @@ const JobCardDetails: React.FC<JobCardDetailsProps> = ({ job }) => {
       {job.billOfMaterials && job.billOfMaterials.length > 0 && (
         <HoverCard>
           <HoverCardTrigger asChild>
-            <div className="text-sm text-gray-400 mt-2 cursor-pointer hover:text-blue-400">
+            <div
+              className="text-sm text-gray-400 mt-2 cursor-pointer hover:text-blue-400"
+              data-no-navigate
+            >
               BOM: {job.billOfMaterials.length} items (hover to view)
             </div>
           </HoverCardTrigger>

src/components/JobCardHeader.tsx

@@ -51,7 +51,6 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
   };
 
   const handleStatusChange = async (newStatus: string, e: React.MouseEvent) => {
-    e.stopPropagation();
     try {
       await updateJob(job.id, { status: newStatus });
       toast({
@@ -178,7 +177,6 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
   };
 
   const handleJobNameClick = async (e: React.MouseEvent) => {
-    e.stopPropagation();
     try {
       await navigator.clipboard.writeText(job.outputItem);
       setCopyingName(true);
@@ -199,29 +197,24 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
   };
 
   const handleProducedClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
     if (job.status !== 'Closed') {
       setIsEditingProduced(true);
     }
   };
 
   const handleEditClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
     onEdit(job);
   };
 
   const handleDeleteClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
     onDelete(job.id);
   };
 
   const handleImportClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
     importBillOfMaterials();
   };
 
   const handleExportClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
     exportBillOfMaterials();
   };
 
@@ -234,10 +227,11 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
     <div className="flex justify-between items-start">
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2 mb-2">
-          <CardTitle 
+          <CardTitle
             className="text-blue-400 truncate cursor-pointer hover:text-blue-300 transition-colors flex items-center gap-1"
             onClick={handleJobNameClick}
             title="Click to copy job name"
+            data-no-navigate
           >
             {job.outputItem}
             {copyingName && <Copy className="w-4 h-4 text-green-400" />}
@@ -254,16 +248,17 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
                   onChange={(e) => setProducedValue(e.target.value)}
                   onBlur={handleProducedUpdate}
                   onKeyDown={handleProducedKeyPress}
-                  onClick={(e) => e.stopPropagation()}
                   className="w-24 h-6 px-2 py-1 inline-block bg-gray-800 border-gray-600 text-white"
                   min="0"
                   autoFocus
+                  data-no-navigate
                 />
               ) : (
                 <span
                   onClick={handleProducedClick}
                   className={job.status !== 'Closed' ? "cursor-pointer hover:text-blue-400" : undefined}
                   title={job.status !== 'Closed' ? "Click to edit" : undefined}
+                  data-no-navigate
                 >
                   {(job.produced || 0).toLocaleString()}
                 </span>
@@ -279,7 +274,10 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
         <div className="flex items-center gap-2">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <div className={`${getStatusColor(job.status)} text-white px-3 py-1 rounded-sm text-xs font-semibold cursor-pointer hover:opacity-80 transition-opacity`}>
+              <div
+                className={`${getStatusColor(job.status)} text-white px-3 py-1 rounded-sm text-xs font-semibold cursor-pointer hover:opacity-80 transition-opacity`}
+                data-no-navigate
+              >
                 {job.status}
               </div>
             </DropdownMenuTrigger>
@@ -289,6 +287,7 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
                   key={status}
                   onClick={(e) => handleStatusChange(status, e)}
                   className="hover:bg-gray-700 cursor-pointer"
+                  data-no-navigate
                 >
                   <div className={`w-3 h-3 rounded-sm ${getStatusColor(status)} mr-2`} />
                   {status}
@@ -301,6 +300,7 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
             size="sm"
             onClick={handleEditClick}
             className="border-gray-600 hover:bg-gray-800"
+            data-no-navigate
           >
             Edit
           </Button>
@@ -308,6 +308,7 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
             variant="destructive"
             size="sm"
             onClick={handleDeleteClick}
+            data-no-navigate
           >
             Delete
           </Button>
@@ -319,6 +320,7 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
             className="p-1 h-6 w-6"
             onClick={handleImportClick}
             title="Import BOM from clipboard"
+            data-no-navigate
           >
             <Import className="w-4 h-4 text-blue-400" />
           </Button>
@@ -329,6 +331,7 @@ const JobCardHeader: React.FC<JobCardHeaderProps> = ({
             onClick={handleExportClick}
             disabled={!job.billOfMaterials?.length}
             title="Export BOM to clipboard"
+            data-no-navigate
           >
             {copyingBom ? (
               <Check className="w-4 h-4 text-green-400" />

src/components/JobCardMetrics.tsx

@@ -1,4 +1,3 @@
-
 import { useState } from 'react';
 import { formatISK, parseISKAmount } from '@/utils/priceUtils';
 import { IndJob } from '@/lib/types';
@@ -29,7 +28,6 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
   const margin = totalIncome > 0 ? ((profit / totalIncome) * 100) : 0;
 
   const handleFieldClick = (fieldName: string, currentValue: number, e: React.MouseEvent) => {
-    e.stopPropagation();
     setEditingField(fieldName);
     setTempValues({ ...tempValues, [fieldName]: formatISK(currentValue) });
   };
@@ -76,15 +74,16 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
                 onChange={(e) => setTempValues({ ...tempValues, projectedCost: e.target.value })}
                 onBlur={() => handleFieldUpdate('projectedCost', tempValues.projectedCost)}
                 onKeyDown={(e) => handleKeyPress('projectedCost', e)}
-                onClick={(e) => e.stopPropagation()}
                 className="w-24 h-6 px-2 py-1 inline-block bg-gray-800 border-gray-600 text-white text-xs"
                 autoFocus
+                data-no-navigate
               />
             ) : (
               <span
                 onClick={(e) => handleFieldClick('projectedCost', job.projectedCost, e)}
                 className="cursor-pointer hover:text-blue-400"
                 title="Click to edit"
+                data-no-navigate
               >
                 {formatISK(job.projectedCost)}
               </span>
@@ -106,15 +105,16 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
                 onChange={(e) => setTempValues({ ...tempValues, projectedRevenue: e.target.value })}
                 onBlur={() => handleFieldUpdate('projectedRevenue', tempValues.projectedRevenue)}
                 onKeyDown={(e) => handleKeyPress('projectedRevenue', e)}
-                onClick={(e) => e.stopPropagation()}
                 className="w-24 h-6 px-2 py-1 inline-block bg-gray-800 border-gray-600 text-white text-xs"
                 autoFocus
+                data-no-navigate
               />
             ) : (
               <span
                 onClick={(e) => handleFieldClick('projectedRevenue', job.projectedRevenue, e)}
                 className="cursor-pointer hover:text-blue-400"
                 title="Click to edit"
+                data-no-navigate
               >
                 {formatISK(job.projectedRevenue)}
               </span>