diff --git a/src/components/JobTransactionPopover.tsx b/src/components/JobTransactionPopover.tsx index f6d4620..0607afe 100644 --- a/src/components/JobTransactionPopover.tsx +++ b/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 = ({ 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 = ({ 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 ? : } diff --git a/src/components/RecapPopover.tsx b/src/components/RecapPopover.tsx index 43c7cd1..925ae8a 100644 --- a/src/components/RecapPopover.tsx +++ b/src/components/RecapPopover.tsx @@ -36,10 +36,21 @@ const RecapPopover: React.FC = ({ 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 ( @@ -53,6 +64,7 @@ const RecapPopover: React.FC = ({ 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 ? : } @@ -65,7 +77,7 @@ const RecapPopover: React.FC = ({ jobContributions.map(({ job, value }) => (
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)}`} >