From 8b2a44e1ea1ac4e169a5eb3b36f03457f51e4a68 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Tue, 8 Jul 2025 10:27:34 +0000
Subject: [PATCH] Refactor JobCardMetrics display

Consistently style the revenue progress and performance indicator, either with or without a backdrop/icon.
---
 src/components/JobCardMetrics.tsx | 56 ++++++++++++++++++++-----------
 1 file changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/components/JobCardMetrics.tsx b/src/components/JobCardMetrics.tsx
index 1c65141..92f1e6c 100644
--- a/src/components/JobCardMetrics.tsx
+++ b/src/components/JobCardMetrics.tsx
@@ -84,7 +84,7 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
           </div>
         </JobTransactionPopover>
         {job.projectedCost > 0 && (
-          <div className="text-xs text-gray-400">
+          <div className="text-xs text-gray-400 space-y-1">
             vs {editingField === 'projectedCost' ? (
               <Input
                 value={tempValues.projectedCost || ''}
@@ -105,8 +105,15 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
                 {formatISK(job.projectedCost)}
               </span>
             )}
-            <div className={`text-xs font-medium ${totalExpenditure <= job.projectedCost ? 'text-green-400' : 'text-red-400'}`}>
-              {((totalExpenditure / job.projectedCost) * 100).toFixed(0)}%
+            <div 
+              className={`text-xs font-medium px-2 py-0.5 rounded-full inline-block ${
+                totalExpenditure <= job.projectedCost 
+                  ? 'bg-green-900/50 text-green-400' 
+                  : 'bg-red-900/50 text-red-400'
+              }`}
+              title={`Cost efficiency: ${((totalExpenditure / job.projectedCost) * 100).toFixed(1)}% of projected cost`}
+            >
+              {totalExpenditure <= job.projectedCost ? '✅' : '⚠️'} {((totalExpenditure / job.projectedCost) * 100).toFixed(0)}%
             </div>
           </div>
         )}
@@ -119,7 +126,7 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
           </div>
         </JobTransactionPopover>
         {job.projectedRevenue > 0 && (
-          <div className="text-xs text-gray-400">
+          <div className="text-xs text-gray-400 space-y-1">
             vs {editingField === 'projectedRevenue' ? (
               <Input
                 value={tempValues.projectedRevenue || ''}
@@ -140,25 +147,34 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
                 {formatISK(job.projectedRevenue)}
               </span>
             )}
-            <div className={`text-xs font-medium ${totalIncome >= job.projectedRevenue ? 'text-green-400' : 'text-red-400'}`}>
-              {((totalIncome / job.projectedRevenue) * 100).toFixed(0)}%
+            <div className="flex justify-center gap-2">
+              <div 
+                className={`text-xs font-medium px-2 py-0.5 rounded-full inline-block ${
+                  totalIncome >= job.projectedRevenue 
+                    ? 'bg-green-900/50 text-green-400' 
+                    : 'bg-yellow-900/50 text-yellow-400'
+                }`}
+                title={`Revenue progress: ${((totalIncome / job.projectedRevenue) * 100).toFixed(1)}% of projected revenue`}
+              >
+                {totalIncome >= job.projectedRevenue ? '🎯' : '📊'} {((totalIncome / job.projectedRevenue) * 100).toFixed(0)}%
+              </div>
+              {showPerformanceIndicator && (
+                <div 
+                  className={`text-xs font-medium px-2 py-0.5 rounded-full inline-block ${
+                    performancePercentage >= 100 
+                      ? 'bg-green-900/50 text-green-400' 
+                      : performancePercentage >= 90 
+                        ? 'bg-yellow-900/50 text-yellow-400' 
+                        : 'bg-red-900/50 text-red-400'
+                  }`}
+                  title={`Performance: ${formatISK(actualRevenuePerItem)}/item vs ${formatISK(expectedRevenuePerItem)}/item expected (${performancePercentage.toFixed(1)}%)`}
+                >
+                  {performancePercentage >= 100 ? '📈' : performancePercentage >= 90 ? '⚠️' : '📉'} {performancePercentage.toFixed(0)}%
+                </div>
+              )}
             </div>
           </div>
         )}
-        {showPerformanceIndicator && (
-          <div 
-            className={`text-xs font-medium px-2 py-0.5 rounded-full inline-block ${
-              performancePercentage >= 100 
-                ? 'bg-green-900/50 text-green-400' 
-                : performancePercentage >= 90 
-                  ? 'bg-yellow-900/50 text-yellow-400' 
-                  : 'bg-red-900/50 text-red-400'
-            }`}
-            title={`Performance: ${formatISK(actualRevenuePerItem)}/item vs ${formatISK(expectedRevenuePerItem)}/item expected (${performancePercentage.toFixed(1)}%)`}
-          >
-            {performancePercentage >= 100 ? '📈' : performancePercentage >= 90 ? '⚠️' : '📉'} {performancePercentage.toFixed(0)}%
-          </div>
-        )}
       </div>
       <div className="text-center space-y-1">
         <div className="text-xs font-medium text-gray-300 uppercase tracking-wide">Profit</div>