From 7a61a3d62acdb7d52013f01f676a9e50817898bc 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:31:09 +0000
Subject: [PATCH] Fix: JobCardMetrics layout and performance indicator

- Moved progress percentages below ISK values in JobCardMetrics.
- Corrected performance calculation in JobCardMetrics to accurately reflect progress.
---
 src/components/JobCardMetrics.tsx | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/components/JobCardMetrics.tsx b/src/components/JobCardMetrics.tsx
index 92f1e6c..9cfc281 100644
--- a/src/components/JobCardMetrics.tsx
+++ b/src/components/JobCardMetrics.tsx
@@ -1,4 +1,3 @@
-
 import { useState } from 'react';
 import { formatISK, parseISKAmount } from '@/utils/priceUtils';
 import { IndJob } from '@/lib/types';
@@ -29,15 +28,13 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
   const profit = totalIncome - totalExpenditure;
   const margin = totalIncome > 0 ? ((profit / totalIncome) * 100) : 0;
 
-  // Calculate performance metrics
+  // Calculate performance metrics - Fixed logic
   const itemsSold = sortedIncome.reduce((sum, tx) => sum + tx.quantity, 0);
-  const expectedRevenuePerItem = job.projectedRevenue && job.outputQuantity > 0 ? job.projectedRevenue / job.outputQuantity : 0;
-  const actualRevenuePerItem = itemsSold > 0 ? totalIncome / itemsSold : 0;
-  const performanceRatio = expectedRevenuePerItem > 0 ? (actualRevenuePerItem / expectedRevenuePerItem) : 0;
-  const performancePercentage = performanceRatio * 100;
+  const revenuePerformanceRatio = job.projectedRevenue > 0 ? (totalIncome / job.projectedRevenue) : 0;
+  const revenuePerformancePercentage = revenuePerformanceRatio * 100;
 
-  // Show performance indicator only if we have the necessary data
-  const showPerformanceIndicator = job.projectedRevenue > 0 && job.outputQuantity > 0 && itemsSold > 0;
+  // Show performance indicator only if we have the necessary data and have sold items
+  const showPerformanceIndicator = job.projectedRevenue > 0 && itemsSold > 0;
 
   const handleFieldClick = (fieldName: string, currentValue: number, e: React.MouseEvent) => {
     e.stopPropagation();
@@ -85,7 +82,7 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
         </JobTransactionPopover>
         {job.projectedCost > 0 && (
           <div className="text-xs text-gray-400 space-y-1">
-            vs {editingField === 'projectedCost' ? (
+            <div>vs {editingField === 'projectedCost' ? (
               <Input
                 value={tempValues.projectedCost || ''}
                 onChange={(e) => setTempValues({ ...tempValues, projectedCost: e.target.value })}
@@ -104,7 +101,7 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
               >
                 {formatISK(job.projectedCost)}
               </span>
-            )}
+            )}</div>
             <div 
               className={`text-xs font-medium px-2 py-0.5 rounded-full inline-block ${
                 totalExpenditure <= job.projectedCost 
@@ -127,7 +124,7 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
         </JobTransactionPopover>
         {job.projectedRevenue > 0 && (
           <div className="text-xs text-gray-400 space-y-1">
-            vs {editingField === 'projectedRevenue' ? (
+            <div>vs {editingField === 'projectedRevenue' ? (
               <Input
                 value={tempValues.projectedRevenue || ''}
                 onChange={(e) => setTempValues({ ...tempValues, projectedRevenue: e.target.value })}
@@ -146,7 +143,7 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
               >
                 {formatISK(job.projectedRevenue)}
               </span>
-            )}
+            )}</div>
             <div className="flex justify-center gap-2">
               <div 
                 className={`text-xs font-medium px-2 py-0.5 rounded-full inline-block ${
@@ -161,15 +158,15 @@ const JobCardMetrics: React.FC<JobCardMetricsProps> = ({ job }) => {
               {showPerformanceIndicator && (
                 <div 
                   className={`text-xs font-medium px-2 py-0.5 rounded-full inline-block ${
-                    performancePercentage >= 100 
+                    revenuePerformancePercentage >= 100 
                       ? 'bg-green-900/50 text-green-400' 
-                      : performancePercentage >= 90 
+                      : revenuePerformancePercentage >= 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)}%)`}
+                  title={`Performance: ${formatISK(totalIncome)} actual vs ${formatISK(job.projectedRevenue)} expected (${revenuePerformancePercentage.toFixed(1)}%)`}
                 >
-                  {performancePercentage >= 100 ? '📈' : performancePercentage >= 90 ? '⚠️' : '📉'} {performancePercentage.toFixed(0)}%
+                  {revenuePerformancePercentage >= 100 ? '📈' : revenuePerformancePercentage >= 90 ? '⚠️' : '📉'} {revenuePerformancePercentage.toFixed(0)}%
                 </div>
               )}
             </div>