Tumble the profit display around a bit

src/components/JobCard.tsx

@@ -190,16 +190,24 @@ const JobCard: React.FC<JobCardProps> = ({ job, onEdit, onDelete }) => {
             )}
           </div>
           <div className="text-center">
-            <div className="text-sm text-gray-400">Profit</div>
+            <div className="flex items-center justify-center gap-1 text-gray-400">
+              <span className="text-sm">Profit</span>
+            </div>
             <div className={`font-semibold ${profit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
               {formatISK(profit)}
+              <Badge variant={profit >= 0 ? 'default' : 'destructive'} className="ml-1 text-xs">
+                {margin.toFixed(1)}%
+              </Badge>
             </div>
-            <Badge variant={profit >= 0 ? 'default' : 'destructive'} className="text-xs">
-              {margin.toFixed(1)}%
-            </Badge>
             {job.projectedRevenue > 0 && job.projectedCost > 0 && (
-              <div className="text-xs text-gray-400 mt-1">
+              <div className="text-xs text-gray-400">
                 vs Projected: {formatISK(job.projectedRevenue - job.projectedCost)}
+                <Badge 
+                  variant={profit >= (job.projectedRevenue - job.projectedCost) ? 'default' : 'destructive'} 
+                  className="ml-1 text-xs"
+                >
+                  {((profit / (job.projectedRevenue - job.projectedCost)) * 100).toFixed(1)}%
+                </Badge>
               </div>
             )}
           </div>