From eab320fee100859aa9429a683da3807bba2edea0 Mon Sep 17 00:00:00 2001
From: Pramudi Samarawickrama <pramupiyumika@gmail.com>
Date: Wed, 5 Nov 2025 01:56:48 +0530
Subject: [PATCH 1/4] style chnaged

---
 .../dashboards/CustomerDashboard.tsx          | 19 +++++++++++++++----
 .../dashboard/vehicles/[vehicleId]/page.tsx   |  5 ++++-
 src/app/dashboard/vehicles/page.tsx           | 13 ++++++++++++-
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/app/components/dashboards/CustomerDashboard.tsx b/src/app/components/dashboards/CustomerDashboard.tsx
index 1ef60e1..7c107eb 100644
--- a/src/app/components/dashboards/CustomerDashboard.tsx
+++ b/src/app/components/dashboards/CustomerDashboard.tsx
@@ -107,28 +107,39 @@ const CustomerDashboard: React.FC<CustomerDashboardProps> = ({ profile }) => {
             href="/dashboard/vehicles"
             className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 transition-colors text-center"
           >
-            <div className="text-3xl mb-2">🚗</div>
+            <svg className="mx-auto w-12 h-12 mb-2 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              {/* Car-style icon similar to Vehicles empty state */}
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 12l1.5-4.5A2 2 0 0 1 6.4 6h11.2a2 2 0 0 1 1.9 1.5L21 12" />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM19 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 12h18v2H3v-2z" />
+            </svg>
             <p className="theme-text-primary font-medium">Vehicles</p>
           </Link>
           <Link
             href="/customer/appointments"
             className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 transition-colors text-center"
           >
-            <div className="text-3xl mb-2">📅</div>
+            <svg className="mx-auto w-12 h-12 mb-2 theme-text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
             <p className="theme-text-primary font-medium">Appointments</p>
           </Link>
           <Link
             href="/customer/history"
             className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 transition-colors text-center"
           >
-            <div className="text-3xl mb-2">📋</div>
+            <svg className="mx-auto w-12 h-12 mb-2 theme-text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+            </svg>
             <p className="theme-text-primary font-medium">History</p>
           </Link>
           <Link
             href="/profile"
             className="p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 transition-colors text-center"
           >
-            <div className="text-3xl mb-2">👤</div>
+            <svg className="mx-auto w-12 h-12 mb-2 theme-text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
             <p className="theme-text-primary font-medium">Profile</p>
           </Link>
         </div>
diff --git a/src/app/dashboard/vehicles/[vehicleId]/page.tsx b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
index bf25bce..416842e 100644
--- a/src/app/dashboard/vehicles/[vehicleId]/page.tsx
+++ b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
@@ -147,7 +147,10 @@ export default function VehicleDetailsPage() {
             htmlFor="photo-upload"
             className={`cursor-pointer block ${uploadingPhotos ? 'opacity-50' : ''}`}
           >
-            <div className="theme-text-muted text-4xl mb-3">📷</div>
+            <svg className="mx-auto w-16 h-16 theme-text-muted mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
             <p className="theme-text-secondary mb-2 font-medium">
               {uploadingPhotos ? 'Uploading...' : 'Click to upload vehicle photos'}
             </p>
diff --git a/src/app/dashboard/vehicles/page.tsx b/src/app/dashboard/vehicles/page.tsx
index 9885cc5..e019775 100644
--- a/src/app/dashboard/vehicles/page.tsx
+++ b/src/app/dashboard/vehicles/page.tsx
@@ -111,7 +111,18 @@ export default function VehiclesPage() {
       {/* Vehicles Grid */}
       {vehicles.length === 0 ? (
         <div className="text-center py-16 automotive-card">
-          <div className="text-gray-400 dark:text-gray-600 text-6xl mb-4">🚗</div>
+          <svg
+            className="mx-auto w-24 h-24 text-gray-400 dark:text-gray-600 mb-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            {/* Car-style icon: body + wheels */}
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 12l1.5-4.5A2 2 0 0 1 6.4 6h11.2a2 2 0 0 1 1.9 1.5L21 12" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM19 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 12h18v2H3v-2z" />
+          </svg>
           <h3 className="text-xl font-semibold theme-text-primary mb-2">No vehicles yet</h3>
           <p className="theme-text-muted mb-6">Get started by adding your first vehicle</p>
           <button

From 48e3e7eaa23818a1d0b3be2c002e4ac104c15805 Mon Sep 17 00:00:00 2001
From: Pramudi Samarawickrama <pramupiyumika@gmail.com>
Date: Wed, 5 Nov 2025 02:24:17 +0530
Subject: [PATCH 2/4] style: update AddVehicleForm and VehiclesPage for
 improved UI consistency and readability

---
 src/app/components/AddVehicleForm.tsx | 55 ++++++++++++++-------------
 src/app/dashboard/vehicles/page.tsx   |  4 +-
 2 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/app/components/AddVehicleForm.tsx b/src/app/components/AddVehicleForm.tsx
index 324c503..3fb6a5a 100644
--- a/src/app/components/AddVehicleForm.tsx
+++ b/src/app/components/AddVehicleForm.tsx
@@ -45,8 +45,8 @@ export default function AddVehicleForm({ onSuccess, onCancel }: AddVehicleFormPr
   };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      <h2 className="text-2xl font-bold mb-4 theme-text-primary">Add New Vehicle</h2>
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <h2 className="text-4xl font-black mb-2 theme-text-primary">Add New Vehicle</h2>
 
       {error && (
         <div className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 px-4 py-3 rounded-lg">
@@ -55,34 +55,34 @@ export default function AddVehicleForm({ onSuccess, onCancel }: AddVehicleFormPr
       )}
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div>
-          <label className="block text-sm font-medium mb-2 theme-text-secondary">Make *</label>
+        <div className="theme-form-group">
+          <label className="block text-sm font-semibold theme-text-secondary mb-2">Make *</label>
           <input
             type="text"
             name="make"
             value={formData.make}
             onChange={handleChange}
             required
-            className="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500 transition-all theme-bg-primary theme-text-primary automotive-border"
+            className="theme-input w-full"
             placeholder="e.g., Toyota"
           />
         </div>
 
-        <div>
-          <label className="block text-sm font-medium mb-2 theme-text-secondary">Model *</label>
+        <div className="theme-form-group">
+          <label className="block text-sm font-semibold theme-text-secondary mb-2">Model *</label>
           <input
             type="text"
             name="model"
             value={formData.model}
             onChange={handleChange}
             required
-            className="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500 transition-all theme-bg-primary theme-text-primary automotive-border"
+            className="theme-input w-full"
             placeholder="e.g., Camry"
           />
         </div>
 
-        <div>
-          <label className="block text-sm font-medium mb-2 theme-text-secondary">Year *</label>
+        <div className="theme-form-group">
+          <label className="block text-sm font-semibold theme-text-secondary mb-2">Year *</label>
           <input
             type="number"
             name="year"
@@ -91,12 +91,12 @@ export default function AddVehicleForm({ onSuccess, onCancel }: AddVehicleFormPr
             required
             min="1900"
             max="2100"
-            className="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500 transition-all theme-bg-primary theme-text-primary automotive-border"
+            className="theme-input w-full"
           />
         </div>
 
-        <div>
-          <label className="block text-sm font-medium mb-2 theme-text-secondary">VIN *</label>
+        <div className="theme-form-group">
+          <label className="block text-sm font-semibold theme-text-secondary mb-2">VIN *</label>
           <input
             type="text"
             name="vin"
@@ -105,63 +105,66 @@ export default function AddVehicleForm({ onSuccess, onCancel }: AddVehicleFormPr
             required
             maxLength={17}
             pattern="[A-HJ-NPR-Z0-9]{17}"
-            className="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500 transition-all theme-bg-primary theme-text-primary automotive-border"
+            className="theme-input w-full"
             placeholder="17 characters (no I, O, Q)"
           />
         </div>
 
-        <div>
-          <label className="block text-sm font-medium mb-2 theme-text-secondary">License Plate *</label>
+        <div className="theme-form-group">
+          <label className="block text-sm font-semibold theme-text-secondary mb-2">License Plate *</label>
           <input
             type="text"
             name="licensePlate"
             value={formData.licensePlate}
             onChange={handleChange}
             required
-            className="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500 transition-all theme-bg-primary theme-text-primary automotive-border"
+            className="theme-input w-full"
             placeholder="e.g., ABC-1234"
           />
         </div>
 
-        <div>
-          <label className="block text-sm font-medium mb-2 theme-text-secondary">Color</label>
+        <div className="theme-form-group">
+          <label className="block text-sm font-semibold theme-text-secondary mb-2">Color</label>
           <input
             type="text"
             name="color"
             value={formData.color}
             onChange={handleChange}
-            className="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500 transition-all theme-bg-primary theme-text-primary automotive-border"
+            className="theme-input w-full"
             placeholder="e.g., Blue"
           />
         </div>
 
-        <div>
-          <label className="block text-sm font-medium mb-2 theme-text-secondary">Mileage</label>
+        <div className="theme-form-group">
+          <label className="block text-sm font-semibold theme-text-secondary mb-2">Mileage</label>
           <input
             type="number"
             name="mileage"
             value={formData.mileage}
             onChange={handleChange}
             min="0"
-            className="w-full px-4 py-3 border rounded-xl focus:ring-2 focus:ring-blue-500 transition-all theme-bg-primary theme-text-primary automotive-border"
+            className="theme-input w-full"
             placeholder="e.g., 50000"
           />
         </div>
       </div>
 
-      <div className="flex gap-3 justify-end pt-6">
+      <div>
         <button
           type="button"
           onClick={onCancel}
-          className="theme-button-secondary px-6 py-3 font-medium rounded-xl"
+          className="theme-button-secondary w-full text-lg font-semibold py-4 rounded-xl flex items-center justify-center"
           disabled={loading}
         >
           Cancel
         </button>
+      </div>
+
+      <div>
         <button
           type="submit"
           disabled={loading}
-          className="theme-button-primary px-6 py-3 font-medium rounded-xl disabled:opacity-60"
+          className="theme-button-primary w-full text-lg font-semibold py-4 rounded-xl flex items-center justify-center disabled:opacity-60"
         >
           {loading ? 'Adding...' : 'Add Vehicle'}
         </button>
diff --git a/src/app/dashboard/vehicles/page.tsx b/src/app/dashboard/vehicles/page.tsx
index e019775..de3b4ff 100644
--- a/src/app/dashboard/vehicles/page.tsx
+++ b/src/app/dashboard/vehicles/page.tsx
@@ -80,7 +80,7 @@ export default function VehiclesPage() {
 
       {/* Add Vehicle Modal */}
       {showAddForm && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
+        <div className="fixed inset-0 theme-bg-primary bg-opacity-70 dark:bg-blue-950 dark:bg-opacity-70 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
           <div className="automotive-card p-8 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
             <AddVehicleForm
               onSuccess={handleAddSuccess}
@@ -92,7 +92,7 @@ export default function VehiclesPage() {
 
       {/* Edit Vehicle Modal */}
       {editingVehicle && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
+        <div className="fixed inset-0 theme-bg-primary bg-opacity-70 dark:bg-blue-950 dark:bg-opacity-70 flex items-center justify-center p-4 z-50 backdrop-blur-sm">
           <div className="automotive-card p-8 max-w-md w-full">
             <EditVehicleForm
               vehicleId={editingVehicle.vehicleId}

From 3df8d37148290eba70962d4fad6269e0c6163e27 Mon Sep 17 00:00:00 2001
From: Pramudi Samarawickrama <pramupiyumika@gmail.com>
Date: Wed, 5 Nov 2025 03:09:58 +0530
Subject: [PATCH 3/4] style: edit form

---
 src/app/components/EditVehicleForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/EditVehicleForm.tsx b/src/app/components/EditVehicleForm.tsx
index 51fc9b9..3a2e249 100644
--- a/src/app/components/EditVehicleForm.tsx
+++ b/src/app/components/EditVehicleForm.tsx
@@ -61,7 +61,7 @@ export default function EditVehicleForm({
         </div>
       )}
 
-      <div className="space-y-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         <div>
           <label className="block text-sm font-medium mb-2 theme-text-secondary">Color</label>
           <input

From 2a56f18755b89934516b814257feea05d42e9bcb Mon Sep 17 00:00:00 2001
From: Pramudi Samarawickrama <pramupiyumika@gmail.com>
Date: Wed, 5 Nov 2025 03:10:20 +0530
Subject: [PATCH 4/4] style: VehicleDetailsPage layout and improve UI elements
 for better user experience

---
 .../dashboard/vehicles/[vehicleId]/page.tsx   | 215 +++++++++---------
 1 file changed, 112 insertions(+), 103 deletions(-)

diff --git a/src/app/dashboard/vehicles/[vehicleId]/page.tsx b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
index 416842e..e301c34 100644
--- a/src/app/dashboard/vehicles/[vehicleId]/page.tsx
+++ b/src/app/dashboard/vehicles/[vehicleId]/page.tsx
@@ -84,118 +84,127 @@ export default function VehicleDetailsPage() {
 
   return (
     <div className="container mx-auto px-4 py-8 theme-bg-primary min-h-screen">
-      <button
-        onClick={() => router.push('/dashboard/vehicles')}
-        className="mb-6 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 flex items-center gap-2 font-medium"
-      >
-        ← Back to Vehicles
-      </button>
+      <div className="flex items-center justify-between mb-6">
+        <button
+          onClick={() => router.push('/dashboard/vehicles')}
+          className="text-sm md:text-base text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 flex items-center gap-2 font-medium"
+        >
+          ← Back to Vehicles
+        </button>
+        
+      </div>
 
-      <div className="automotive-card p-6 mb-6">
-        <div className="flex justify-between items-start mb-6">
-          <div>
-            <h1 className="text-3xl font-bold theme-text-primary mb-2">
-              {vehicle.year} {vehicle.make} {vehicle.model}
-            </h1>
-            <p className="theme-text-muted">VIN: {vehicle.vin}</p>
-          </div>
-          {vehicle.color && (
-            <span className="px-4 py-2 bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300 rounded-full border border-blue-200 dark:border-blue-800 font-medium">
-              {vehicle.color}
-            </span>
-          )}
-        </div>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Left: Images + gallery */}
+        <div className="lg:col-span-2 space-y-6">
+          <div className="automotive-card p-6">
+            <div className="w-full rounded-lg overflow-hidden shadow-md bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-gray-800">
+              {vehicle.photos && vehicle.photos.length > 0 ? (
+                <img
+                  src={vehicle.photos[0] as unknown as string}
+                  alt={`${vehicle.make} ${vehicle.model}`}
+                  className="w-full h-72 object-cover"
+                />
+              ) : (
+                <div className="w-full h-72 flex items-center justify-center bg-gray-100 dark:bg-gray-800">
+                  <span className="text-gray-500 dark:text-gray-400">No photo available</span>
+                </div>
+              )}
+            </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div>
-            <h3 className="text-sm font-medium theme-text-muted mb-1">License Plate</h3>
-            <p className="text-lg font-semibold theme-text-primary">{vehicle.licensePlate}</p>
-          </div>
-          <div>
-            <h3 className="text-sm font-medium theme-text-muted mb-1">Mileage</h3>
-            <p className="text-lg font-semibold theme-text-primary">{vehicle.mileage.toLocaleString()} miles</p>
-          </div>
-          <div>
-            <h3 className="text-sm font-medium theme-text-muted mb-1">Registered</h3>
-            <p className="text-lg theme-text-secondary">
-              {new Date(vehicle.createdAt).toLocaleDateString()}
-            </p>
+            {/* Thumbnail strip */}
+            {vehicle.photos && vehicle.photos.length > 1 && (
+              <div className="mt-4 flex gap-3">
+                {vehicle.photos.map((p, i) => (
+                  <button key={i} className="w-24 h-16 rounded-md overflow-hidden border border-gray-200 dark:border-gray-700" onClick={() => window.scrollTo({top:0, behavior:'smooth'})}>
+                    <img src={p as unknown as string} alt={`photo-${i}`} className="w-full h-full object-cover" />
+                  </button>
+                ))}
+              </div>
+            )}
+
+            {/* Photo upload CTA (small) */}
+            <div className="mt-4">
+              <label htmlFor="photo-upload" className={`inline-flex items-center gap-2 text-sm theme-text-secondary cursor-pointer ${uploadingPhotos ? 'opacity-60' : ''}`}>
+                <input id="photo-upload" type="file" multiple accept="image/*" onChange={handlePhotoUpload} className="hidden" disabled={uploadingPhotos} />
+                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 3v12m0 0l3-3m-3 3l-3-3"/></svg>
+                <span>{uploadingPhotos ? 'Uploading photos...' : 'Upload photos'}</span>
+              </label>
+            </div>
           </div>
-          <div>
-            <h3 className="text-sm font-medium theme-text-muted mb-1">Last Updated</h3>
-            <p className="text-lg theme-text-secondary">
-              {new Date(vehicle.updatedAt).toLocaleDateString()}
-            </p>
+
+          {/* Service history */}
+          <div className="automotive-card p-6">
+            <h2 className="text-xl font-semibold theme-text-primary mb-4">Service History</h2>
+            {serviceHistory.length === 0 ? (
+              <div className="text-center py-12 theme-text-muted">
+                <p className="font-medium">No service history available</p>
+                <p className="text-sm mt-2">Service records will appear here once completed</p>
+              </div>
+            ) : (
+              <ul className="space-y-4">
+                {serviceHistory.map((s) => (
+                  <li key={s.serviceId} className="flex items-start gap-4">
+                    <div className="mt-1">
+                      <div className="w-3 h-3 rounded-full bg-blue-500 mt-1" />
+                    </div>
+                    <div className="flex-1">
+                      <div className="flex items-center justify-between">
+                        <h3 className="font-semibold theme-text-primary">{s.type}</h3>
+                        <div className="text-sm font-semibold text-green-600 dark:text-green-400">${s.cost.toFixed(2)}</div>
+                      </div>
+                      <div className="text-sm theme-text-muted">{new Date(s.date).toLocaleDateString()}</div>
+                      {s.description && <p className="mt-2 text-sm theme-text-secondary">{s.description}</p>}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            )}
           </div>
         </div>
-      </div>
 
-      {/* Photo Upload Section */}
-      <div className="automotive-card p-6 mb-6">
-        <h2 className="text-xl font-bold mb-4 theme-text-primary">Vehicle Photos</h2>
-        <div className="border-2 border-dashed automotive-border rounded-xl p-8 text-center theme-bg-secondary hover:border-blue-400 transition-colors">
-          <input
-            type="file"
-            id="photo-upload"
-            multiple
-            accept="image/*"
-            onChange={handlePhotoUpload}
-            className="hidden"
-            disabled={uploadingPhotos}
-          />
-          <label
-            htmlFor="photo-upload"
-            className={`cursor-pointer block ${uploadingPhotos ? 'opacity-50' : ''}`}
-          >
-            <svg className="mx-auto w-16 h-16 theme-text-muted mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
-            </svg>
-            <p className="theme-text-secondary mb-2 font-medium">
-              {uploadingPhotos ? 'Uploading...' : 'Click to upload vehicle photos'}
-            </p>
-            <p className="text-sm theme-text-muted">
-              PNG, JPG up to 10MB (Max 50MB total)
-            </p>
-          </label>
-        </div>
-      </div>
+        {/* Right: Details card */}
+        <aside className="space-y-6">
+          <div className="automotive-card p-6  sticky top-6">
+            <div>
+              <h1 className="text-2xl md:text-3xl font-bold theme-text-primary">{vehicle.year} {vehicle.make} {vehicle.model}</h1>
+              <p className="text-sm theme-text-muted mt-1">VIN: <span className="font-medium theme-text-secondary">{vehicle.vin}</span></p>
+            </div>
 
-      {/* Service History Section */}
-      <div className="automotive-card p-6">
-        <h2 className="text-xl font-bold mb-4 theme-text-primary">Service History</h2>
-        {serviceHistory.length === 0 ? (
-          <div className="text-center py-8 theme-text-muted">
-            <p className="font-medium">No service history available</p>
-            <p className="text-sm mt-2">Service records will appear here once completed</p>
-          </div>
-        ) : (
-          <div className="space-y-4">
-            {serviceHistory.map((service) => (
-              <div
-                key={service.serviceId}
-                className="automotive-border rounded-xl p-4 theme-bg-secondary hover:theme-bg-tertiary transition-colors"
-              >
-                <div className="flex justify-between items-start">
-                  <div>
-                    <h3 className="font-semibold text-lg theme-text-primary">{service.type}</h3>
-                    <p className="text-sm theme-text-muted">
-                      {new Date(service.date).toLocaleDateString()}
-                    </p>
-                    {service.description && (
-                      <p className="text-sm theme-text-secondary mt-2">{service.description}</p>
-                    )}
-                  </div>
-                  <div className="text-right">
-                    <p className="text-lg font-bold text-green-600 dark:text-green-400">
-                      ${service.cost.toFixed(2)}
-                    </p>
-                  </div>
-                </div>
+            <div className="mt-4 grid grid-cols-2 gap-3">
+              <div>
+                <h4 className="text-xs theme-text-muted">License</h4>
+                <div className="font-semibold theme-text-primary">{vehicle.licensePlate}</div>
               </div>
-            ))}
+              <div>
+                <h4 className="text-xs theme-text-muted">Mileage</h4>
+                <div className="font-semibold theme-text-primary">{vehicle.mileage.toLocaleString()} mi</div>
+              </div>
+              <div>
+                <h4 className="text-xs theme-text-muted">Color</h4>
+                <div className="font-semibold theme-text-primary">{vehicle.color || '—'}</div>
+              </div>
+              <div>
+                <h4 className="text-xs theme-text-muted">Registered</h4>
+                <div className="font-semibold theme-text-primary">{new Date(vehicle.createdAt).toLocaleDateString()}</div>
+              </div>
+            </div>
+
+            
+          </div>
+
+          {/* meta card */}
+          <div className="automotive-card p-4 text-sm theme-text-muted">
+            <div className="flex items-center justify-between">
+              <div>Created</div>
+              <div className="font-medium theme-text-primary">{new Date(vehicle.createdAt).toLocaleDateString()}</div>
+            </div>
+            <div className="flex items-center justify-between mt-3">
+              <div>Last updated</div>
+              <div className="font-medium theme-text-primary">{new Date(vehicle.updatedAt).toLocaleDateString()}</div>
+            </div>
           </div>
-        )}
+        </aside>
       </div>
     </div>
   );