Refactor: Improve transaction chart visualizations

The AI has updated the transaction charts to match the total revenue chart's style, implementing specific display rules for different chart types (job, cost, revenue, profit) including cumulative values, shaded areas, and line representations.

src/components/TransactionChart.tsx

@@ -232,21 +232,20 @@ const TransactionChart: React.FC<TransactionChartProps> = ({
           <Legend />
           <Area
             type="monotone"
-            dataKey="costs"
+            dataKey="cumulativeCosts"
             stroke="#EF4444"
             fill="#EF4444"
-            fillOpacity={0.6}
+            fillOpacity={0.3}
-            name="Costs"
-          />
-          <Area
-            type="monotone"
-            dataKey="cumulativeCosts"
-            stroke="#DC2626"
-            fill="none"
-            strokeWidth={2}
-            strokeDasharray="5 5"
             name="Cumulative Costs"
           />
+          <Line
+            type="monotone"
+            dataKey="costs"
+            stroke="#DC2626"
+            strokeWidth={2}
+            name="Costs per Day"
+            dot={false}
+          />
         </AreaChart>
       );
     }
@@ -265,28 +264,27 @@ const TransactionChart: React.FC<TransactionChartProps> = ({
           <Legend />
           <Area
             type="monotone"
-            dataKey="revenue"
+            dataKey="cumulativeRevenue"
             stroke="#10B981"
             fill="#10B981"
-            fillOpacity={0.6}
+            fillOpacity={0.3}
-            name="Revenue"
-          />
-          <Area
-            type="monotone"
-            dataKey="cumulativeRevenue"
-            stroke="#059669"
-            fill="none"
-            strokeWidth={2}
-            strokeDasharray="5 5"
             name="Cumulative Revenue"
           />
+          <Line
+            type="monotone"
+            dataKey="revenue"
+            stroke="#059669"
+            strokeWidth={2}
+            name="Revenue per Day"
+            dot={false}
+          />
         </AreaChart>
       );
     }
 
-    // Combined profit chart (costs, revenue, profit)
+    // Profit chart - entire job view
     return (
-      <LineChart data={data} margin={{ top: 20, right: 80, left: 80, bottom: 5 }}>
+      <AreaChart data={data} margin={{ top: 20, right: 80, left: 80, bottom: 5 }}>
         <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
         <XAxis dataKey="formattedDate" stroke="#9CA3AF" />
         <YAxis stroke="#9CA3AF" tickFormatter={formatTooltipValue} width={70} />
@@ -295,63 +293,32 @@ const TransactionChart: React.FC<TransactionChartProps> = ({
           labelStyle={{ color: '#F3F4F6' }}
           contentStyle={{ backgroundColor: '#1F2937', border: '1px solid #374151' }}
         />
-        <Legend 
+        <Legend />
-          onClick={(e) => toggleLine(e.dataKey as string)}
+        <Area
-          wrapperStyle={{ cursor: 'pointer' }}
-        />
-        {!hiddenLines.has('costs') && (
-          <Line
           type="monotone"
-            dataKey="costs"
+          dataKey="cumulativeCosts"
           stroke="#EF4444"
-            strokeWidth={2}
+          fill="#EF4444"
-            name="Costs"
+          fillOpacity={0.3}
-            dot={{ fill: '#EF4444', strokeWidth: 2, r: 4 }}
+          name="Cumulative Costs"
         />
-        )}
+        <Area
-        {!hiddenLines.has('revenue') && (
-          <Line
           type="monotone"
-            dataKey="revenue"
+          dataKey="cumulativeRevenue"
           stroke="#10B981"
-            strokeWidth={2}
+          fill="#10B981"
-            name="Revenue"
+          fillOpacity={0.3}
-            dot={{ fill: '#10B981', strokeWidth: 2, r: 4 }}
+          name="Cumulative Revenue"
         />
-        )}
-        {!hiddenLines.has('profit') && (
         <Line
           type="monotone"
           dataKey="profit"
           stroke="#3B82F6"
           strokeWidth={2}
-            name="Profit"
+          name="Profit per Day"
-            dot={{ fill: '#3B82F6', strokeWidth: 2, r: 4 }}
-          />
-        )}
-        {!hiddenLines.has('cumulativeRevenue') && (
-          <Line
-            type="monotone"
-            dataKey="cumulativeRevenue"
-            stroke="#059669"
-            strokeWidth={2}
-            strokeDasharray="5 5"
-            name="Cumulative Revenue"
           dot={false}
         />
-        )}
+      </AreaChart>
-        {!hiddenLines.has('cumulativeProfit') && (
-          <Line
-            type="monotone"
-            dataKey="cumulativeProfit"
-            stroke="#1E40AF"
-            strokeWidth={2}
-            strokeDasharray="5 5"
-            name="Cumulative Profit"
-            dot={false}
-          />
-        )}
-      </LineChart>
     );
   };