Update

src/components/RecapPopover.tsx

@@ -1,4 +1,5 @@
 
+import { useState } from 'react';
 import { IndJob } from '@/lib/types';
 import { formatISK } from '@/utils/priceUtils';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -29,12 +30,16 @@ const RecapPopover: React.FC<RecapPopoverProps> = ({
       value: calculateJobValue(job)
     }))
     .filter(({ value }) => value !== 0)
-    .sort((a, b) => Math.abs(b.value) - Math.abs(a.value));
+    .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 = () => {
+    setSortDescending(!sortDescending);
+  };
+
   return (
     <Popover>
       <PopoverTrigger asChild>
@@ -42,7 +47,16 @@ const RecapPopover: React.FC<RecapPopoverProps> = ({
       </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">{title}</CardTitle>
+          <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"
+            >
+              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 ? (
@@ -52,7 +66,7 @@ const RecapPopover: React.FC<RecapPopoverProps> = ({
               <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"
+                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}>