updates on the api integration and the design changes on the whole website

src/pages/nearle/vehicles/vehicles.js

@@ -64,7 +64,12 @@ const emptyForm = {
   maxvolume: '',
   partner: null,
   batterypercentage: '',
-  status: 'active'
+  // Confirmed live: POST /admin/vehicles rejects "active"/"Active"/
+  // "inactive"/"Inactive"/"Unavailable"/"Maintenance"/"Offline" — the only
+  // value that worked was "Available". Status is a required field with a
+  // narrow, still not fully mapped enum, so this only offers the one
+  // confirmed-working value rather than guessing a second one that fails.
+  status: 'Available'
 };
 
 const Vehicles = () => {
@@ -88,7 +93,10 @@ const Vehicles = () => {
 
   const stats = useMemo(() => {
     const total = vehicles.length;
-    const active = vehicles.filter((v) => String(v.status).toLowerCase() === 'active').length;
+    // Only 'Available' is a confirmed-valid status on this resource (see the
+    // comment on emptyForm.status above) — no vehicle can ever have a status
+    // of 'active', so counting against that string always read 0.
+    const active = vehicles.filter((v) => String(v.status).toLowerCase() === 'available').length;
     const lowBattery = vehicles.filter((v) => Number(v.batterypercentage) > 0 && Number(v.batterypercentage) < 20).length;
     return { total, active, lowBattery };
   }, [vehicles]);
@@ -137,7 +145,7 @@ const Vehicles = () => {
       maxvolume: row.maxvolume ?? '',
       partner: partnerMap.get(row.partnerid) || null,
       batterypercentage: row.batterypercentage ?? '',
-      status: row.status || 'active'
+      status: row.status || 'Available'
     });
     setDialogOpen(true);
   };
@@ -184,7 +192,7 @@ const Vehicles = () => {
           <StatCard title="Total Vehicles" value={stats.total} icon={<MdDirectionsCar size={20} />} color={BRAND} />
         </Grid>
         <Grid item xs={4}>
-          <StatCard title="Active" value={stats.active} icon={<MdDirectionsCar size={20} />} color="#10b981" />
+          <StatCard title="Available" value={stats.active} icon={<MdDirectionsCar size={20} />} color="#10b981" />
         </Grid>
         <Grid item xs={4}>
           <StatCard title="Low Battery" value={stats.lowBattery} icon={<MdBatteryStd size={20} />} color="#f59e0b" />
@@ -323,10 +331,12 @@ const Vehicles = () => {
             <Grid item xs={12} sm={6}>
               <Stack spacing={1}>
                 <InputLabel>Status</InputLabel>
-                <Select fullWidth value={form.status} onChange={(e) => setForm((f) => ({ ...f, status: e.target.value }))}>
-                  <MenuItem value="active">Active</MenuItem>
-                  <MenuItem value="inactive">Inactive</MenuItem>
-                </Select>
+                {/* Only "Available" is confirmed to work against POST
+                /admin/vehicles (Active/Inactive/Unavailable/Maintenance/
+                Offline all rejected live) — not offering a second option
+                that's known to fail. On edit this preserves whatever the
+                vehicle's real status already is. */}
+                <TextField fullWidth value={form.status} disabled />
               </Stack>
             </Grid>
             <Grid item xs={12} sm={4}>