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>
This commit is contained in:
natib21
2026-06-30 14:21:16 +00:00
parent 796e63cc59
commit 67ba168a22

View File

@@ -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>