Enable clicking on sort on individual job popovers

src/components/JobTransactionPopover.tsx

@@ -1,8 +1,8 @@
 
 import { useState } from 'react';
-import { IndJob, IndTransaction } from '@/lib/types';
+import { IndJob } from '@/lib/types';
 import { formatISK } from '@/utils/priceUtils';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 
@@ -59,7 +59,8 @@ const JobTransactionPopover: React.FC<JobTransactionPopoverProps> = ({
       return sortDescending ? bValue - aValue : aValue - bValue;
     });
 
-  const toggleSort = () => {
+  const toggleSort = (e: React.MouseEvent) => {
+    e.stopPropagation();
     setSortDescending(!sortDescending);
   };
 
@@ -93,6 +94,7 @@ const JobTransactionPopover: React.FC<JobTransactionPopoverProps> = ({
               onClick={toggleSort}
               className="flex items-center gap-1 text-sm font-normal text-gray-300 hover:text-white transition-colors"
               title="Click to toggle sort order"
+              data-no-navigate
             >
               Sort {sortDescending ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />}
             </button>

src/components/RecapPopover.tsx

@@ -36,10 +36,21 @@ const RecapPopover: React.FC<RecapPopoverProps> = ({
     navigate(`/${jobId}`);
   };
 
-  const toggleSort = () => {
+  const toggleSort = (e: React.MouseEvent) => {
+    e.stopPropagation();
     setSortDescending(!sortDescending);
   };
 
+  const handleItemClick = (e: React.MouseEvent, jobId: string) => {
+    // Check if the clicked element or its parent has data-no-navigate
+    const target = e.target as HTMLElement;
+    const hasNoNavigate = target.closest('[data-no-navigate]');
+    
+    if (!hasNoNavigate) {
+      handleJobClick(jobId);
+    }
+  };
+
   return (
     <Popover>
       <PopoverTrigger asChild>
@@ -53,6 +64,7 @@ const RecapPopover: React.FC<RecapPopoverProps> = ({
               onClick={toggleSort}
               className="flex items-center gap-1 text-sm font-normal text-gray-300 hover:text-white transition-colors"
               title="Click to toggle sort order"
+              data-no-navigate
             >
               Sort {sortDescending ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />}
             </button>
@@ -65,7 +77,7 @@ const RecapPopover: React.FC<RecapPopoverProps> = ({
             jobContributions.map(({ job, value }) => (
               <div
                 key={job.id}
-                onClick={() => handleJobClick(job.id)}
+                onClick={(e) => handleItemClick(e, job.id)}
                 className={`flex justify-between items-center p-2 rounded hover:bg-gray-700/50 cursor-pointer transition-colors border-l-2 border-l-gray-600 ${getStatusBackgroundColor(job.status)}`}
               >
                 <div className="flex-1 min-w-0">