Fix loading job page when clicking on interactive elements

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" />