TechTorque-2025 · Akith-002 · Nov 5, 2025 · Nov 4, 2025 · Nov 4, 2025 · Nov 4, 2025
diff --git a/src/app/components/AddVehicleForm.tsx b/src/app/components/AddVehicleForm.tsx
@@ -29,7 +29,7 @@
    try {
      await vehicleService.registerVehicle(formData);
      onSuccess();
    } catch (err: any) {
      setError(err.response?.data?.message || 'Failed to add vehicle');
    } finally {
      setLoading(false);
@@ -45,8 +45,8 @@
   };
 
   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 @@
       )}
 
       <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 @@
             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 @@
             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/components/EditVehicleForm.tsx b/src/app/components/EditVehicleForm.tsx
@@ -36,7 +36,7 @@
    try {
      await vehicleService.updateVehicle(vehicleId, formData);
      onSuccess();
    } catch (err: any) {
      setError(err.response?.data?.message || 'Failed to update vehicle');
    } finally {
      setLoading(false);
@@ -61,7 +61,7 @@
         </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

diff --git 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>