104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
|
|
import { useState } from 'react';
|
|
import { IndJob } from '@/lib/types';
|
|
import { formatISK } from '@/utils/priceUtils';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { ChevronDown, ChevronUp } from 'lucide-react';
|
|
import { getStatusBackgroundColor } from '@/utils/jobStatusUtils';
|
|
|
|
interface RecapPopoverProps {
|
|
title: string;
|
|
jobs: IndJob[];
|
|
children: React.ReactNode;
|
|
calculateJobValue: (job: IndJob) => number;
|
|
}
|
|
|
|
const RecapPopover: React.FC<RecapPopoverProps> = ({
|
|
title,
|
|
jobs,
|
|
children,
|
|
calculateJobValue
|
|
}) => {
|
|
const navigate = useNavigate();
|
|
const [sortDescending, setSortDescending] = useState(true);
|
|
|
|
const jobContributions = jobs
|
|
.map(job => ({
|
|
job,
|
|
value: calculateJobValue(job)
|
|
}))
|
|
.filter(({ value }) => value !== 0)
|
|
.sort((a, b) => sortDescending ? Math.abs(b.value) - Math.abs(a.value) : Math.abs(a.value) - Math.abs(b.value));
|
|
|
|
const handleJobClick = (jobId: string) => {
|
|
navigate(`/${jobId}`);
|
|
};
|
|
|
|
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>
|
|
{children}
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[30rem] bg-gray-800/95 border-gray-600 text-white max-h-[40rem] overflow-y-auto">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-lg text-white flex items-center justify-between">
|
|
<span>{title}</span>
|
|
<button
|
|
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>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
{jobContributions.length === 0 ? (
|
|
<p className="text-gray-400 text-sm">No contributions to display</p>
|
|
) : (
|
|
jobContributions.map(({ job, value }) => (
|
|
<div
|
|
key={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">
|
|
<div className="text-sm font-medium text-blue-400 truncate" title={job.outputItem}>
|
|
{job.outputItem}
|
|
</div>
|
|
<div className="text-xs text-gray-400">
|
|
ID: {job.id}
|
|
</div>
|
|
</div>
|
|
<div className={`text-sm font-medium ml-2 ${value >= 0 ? 'text-green-400' : 'text-red-400'}`}>
|
|
{formatISK(value)}
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</CardContent>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
export default RecapPopover;
|