From f12fdc81958f883f2099a0e81df4c30a0a2dab3f Mon Sep 17 00:00:00 2001
From: PhatPhuckDave <david.majdandzic@hotmail.com>
Date: Fri, 4 Jul 2025 17:05:50 +0200
Subject: [PATCH] Tumble the profit display around a bit

---
 src/components/JobCard.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/JobCard.tsx b/src/components/JobCard.tsx
index 06d0bf0..ecd2ac9 100644
--- a/src/components/JobCard.tsx
+++ b/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>