From 67ba168a229b4093cf641d7d6842b3901e0203ae Mon Sep 17 00:00:00 2001
From: natib21 <yaschalew10@gmail.com>
Date: Tue, 30 Jun 2026 14:21:16 +0000
Subject: [PATCH] fix: convert numeric strings to numbers in fuel calculations

Problem:
- purchasesData from API returns numeric columns as strings
- Calling .toFixed() on strings throws "toFixed is not a function"
- Occurs in stats cards and table rows

Solution:
- Wrap p.liters, p.costPerLiter, p.totalCost in Number() before calculations
- Total Liters stat card: sum + Number(p.liters)
- Total Cost stat card: sum + Number(p.totalCost)
- Avg Price/L stat card: use Number() on both divisor and dividend
- Table rows: Number(purchase.liters).toFixed(2), etc.

Fixes render error in FuelPurchasePage when loading fuel purchases list.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../src/pages/fleet/FuelPurchasePage.tsx           | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/edr-freight-web/backoffice/src/pages/fleet/FuelPurchasePage.tsx b/apps/edr-freight-web/backoffice/src/pages/fleet/FuelPurchasePage.tsx
index be9a60567..983da8734 100644
--- a/apps/edr-freight-web/backoffice/src/pages/fleet/FuelPurchasePage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/fleet/FuelPurchasePage.tsx
@@ -148,7 +148,7 @@ export default function FuelPurchasePage() {
             </Text>
             <Text fw={700} size="lg">
               {purchasesData
-                .reduce((sum: number, p: FuelPurchase) => sum + p.liters, 0)
+                .reduce((sum: number, p: FuelPurchase) => sum + Number(p.liters), 0)
                 .toFixed(2)}{" "}
               L
             </Text>
@@ -161,7 +161,7 @@ export default function FuelPurchasePage() {
             </Text>
             <Text fw={700} size="lg">
               ETB {purchasesData
-                .reduce((sum: number, p: FuelPurchase) => sum + p.totalCost, 0)
+                .reduce((sum: number, p: FuelPurchase) => sum + Number(p.totalCost), 0)
                 .toLocaleString("en-US", { maximumFractionDigits: 2 })}
             </Text>
           </Card>
@@ -174,8 +174,8 @@ export default function FuelPurchasePage() {
             <Text fw={700} size="lg">
               ETB{" "}
               {(
-                purchasesData.reduce((sum: number, p: FuelPurchase) => sum + p.totalCost, 0) /
-                  purchasesData.reduce((sum: number, p: FuelPurchase) => sum + p.liters, 0) || 0
+                purchasesData.reduce((sum: number, p: FuelPurchase) => sum + Number(p.totalCost), 0) /
+                  purchasesData.reduce((sum: number, p: FuelPurchase) => sum + Number(p.liters), 0) || 0
               ).toFixed(2)}
             </Text>
           </Card>
@@ -201,9 +201,9 @@ export default function FuelPurchasePage() {
               <Table.Tr key={purchase.id}>
                 <Table.Td>{purchase.vehicleName || purchase.vehicleId}</Table.Td>
                 <Table.Td>{new Date(purchase.purchaseDate).toLocaleDateString()}</Table.Td>
-                <Table.Td align="right">{purchase.liters.toFixed(2)}</Table.Td>
-                <Table.Td align="right">ETB {purchase.costPerLiter.toFixed(2)}</Table.Td>
-                <Table.Td align="right">ETB {purchase.totalCost.toLocaleString("en-US", { maximumFractionDigits: 2 })}</Table.Td>
+                <Table.Td align="right">{Number(purchase.liters).toFixed(2)}</Table.Td>
+                <Table.Td align="right">ETB {Number(purchase.costPerLiter).toFixed(2)}</Table.Td>
+                <Table.Td align="right">ETB {Number(purchase.totalCost).toLocaleString("en-US", { maximumFractionDigits: 2 })}</Table.Td>
                 <Table.Td>{purchase.fuelStation || "—"}</Table.Td>
                 <Table.Td>
                   <Badge size="sm">{purchase.paymentMethod}</Badge>