Debugging

frontend/src/features/fuel-logs/components/VehicleSelector.tsx

@@ -16,9 +16,9 @@ const VehicleSelectorComponent: React.FC<Props> = ({ value, onChange, error, req
   const { data: vehicles, isLoading } = useVehicles();
 
   // DEBUG: Log vehicle selector renders and data changes
-  console.log('[VehicleSelector] Render - value:', value, 'vehicles count:', vehicles?.length, 'isLoading:', isLoading);
+  console.log('[VehicleSelector] Render - value:', value, 'vehicles count:', Array.isArray(vehicles) ? vehicles.length : 0, 'isLoading:', isLoading);
 
-  if (!isLoading && (vehicles?.length || 0) === 0) {
+  if (!isLoading && (!vehicles || vehicles.length === 0)) {
     return (
       <Box p={2} borderRadius={1} bgcolor={'background.default'}>
         <Typography variant="body2" color="text.secondary">
@@ -32,14 +32,14 @@ const VehicleSelectorComponent: React.FC<Props> = ({ value, onChange, error, req
     <FormControl fullWidth error={!!error} required={required}>
       <InputLabel>Select Vehicle</InputLabel>
       <Select value={value || ''} onChange={(e) => onChange(e.target.value as string)} label="Select Vehicle" disabled={disabled}>
-        {vehicles?.map((v: Vehicle) => (
+        {vehicles && Array.isArray(vehicles) ? vehicles.map((v: Vehicle) => (
           <MenuItem key={v.id} value={v.id}>
             <Box display="flex" alignItems="center" gap={1}>
               <DirectionsCarIcon fontSize="small" />
               <Typography variant="body2">{`${v.year || ''} ${v.make || ''} ${v.model || ''}`.trim()}</Typography>
             </Box>
           </MenuItem>
-        ))}
+        )) : null}
       </Select>
       {error && <FormHelperText>{error}</FormHelperText>}
     </FormControl>