From 8c064f30ff8d00c157d7011886936f77dc313690 Mon Sep 17 00:00:00 2001
From: RandithaK <bharkula3@gmail.com>
Date: Wed, 12 Nov 2025 15:35:59 +0530
Subject: [PATCH] fix: Handle potential null values for mileage and totalAmount
 in vehicle components

---
 src/app/components/VehicleCard.tsx                  | 2 +-
 src/app/components/dashboards/CustomerDashboard.tsx | 2 +-
 src/app/dashboard/vehicles/[vehicleId]/page.tsx     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/VehicleCard.tsx b/src/app/components/VehicleCard.tsx
index c2a70f4..fcdac0f 100644
--- a/src/app/components/VehicleCard.tsx
+++ b/src/app/components/VehicleCard.tsx
@@ -28,7 +28,7 @@ export default function VehicleCard({ vehicle, onDelete, onEdit }: VehicleCardPr
       <div className="space-y-2 mb-4 py-3 automotive-border-t">
         <div className="flex justify-between text-sm">
           <span className="theme-text-muted">Mileage:</span>
-          <span className="font-semibold theme-text-primary">{vehicle.mileage.toLocaleString()} miles</span>
+          <span className="font-semibold theme-text-primary">{(vehicle.mileage ?? 0).toLocaleString()} miles</span>
         </div>
       </div>
 
diff --git a/src/app/components/dashboards/CustomerDashboard.tsx b/src/app/components/dashboards/CustomerDashboard.tsx
index fab65b5..1867e12 100644
--- a/src/app/components/dashboards/CustomerDashboard.tsx
+++ b/src/app/components/dashboards/CustomerDashboard.tsx
@@ -155,7 +155,7 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
               overdueInvoices.slice(0, 3).map((invoice) => (
                 <div key={invoice.invoiceId} className="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
                   <p className="theme-text-primary font-medium text-sm">Invoice {invoice.invoiceNumber}</p>
-                  <p className="theme-text-muted text-xs mb-1">Amount due: LKR {invoice.totalAmount.toLocaleString()}</p>
+                  <p className="theme-text-muted text-xs mb-1">Amount due: LKR {(invoice.totalAmount ?? 0).toLocaleString()}</p>
                   <Link
                     href={`/dashboard/invoices/${invoice.invoiceId}`}
                     className="text-xs text-blue-600 dark:text-blue-400 hover:underline"
diff --git a/src/app/dashboard/vehicles/[vehicleId]/page.tsx b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
index be97817..854f162 100644
--- a/src/app/dashboard/vehicles/[vehicleId]/page.tsx
+++ b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
@@ -183,7 +183,7 @@ export default function VehicleDetailsPage() {
               </div>
               <div>
                 <h4 className="text-xs theme-text-muted">Mileage</h4>
-                <div className="font-semibold theme-text-primary">{vehicle.mileage.toLocaleString()} mi</div>
+                <div className="font-semibold theme-text-primary">{(vehicle.mileage ?? 0).toLocaleString()} mi</div>
               </div>
               <div>
                 <h4 className="text-xs theme-text-muted">Color</h4>