feat: Implement revenue/profit recap and fixes

- Added a hover-over recap for total revenue and profit, displaying contributing jobs in a popup.
- Fixed the issue where the lower parts of letters in job names were cut off.
- Implemented job ID copy-to-clipboard functionality on click.

src/components/RecapPopover.tsx

@@ -0,0 +1,74 @@
+
+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';
+
+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 jobContributions = jobs
+    .map(job => ({
+      job,
+      value: calculateJobValue(job)
+    }))
+    .filter(({ value }) => value !== 0)
+    .sort((a, b) => Math.abs(b.value) - Math.abs(a.value));
+
+  const handleJobClick = (jobId: string) => {
+    navigate(`/${jobId}`);
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        {children}
+      </PopoverTrigger>
+      <PopoverContent className="w-80 bg-gray-800/95 border-gray-600 text-white max-h-96 overflow-y-auto">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-lg text-white">{title}</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={() => handleJobClick(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"
+              >
+                <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;