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>

frontend/src/features/vehicles/hooks/useVehicles.ts

@@ -2,6 +2,7 @@
  * @ai-summary React hooks for vehicles feature
  */
 
+import React from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useAuth0 } from '@auth0/auth0-react';
 import { vehiclesApi } from '../api/vehicles.api';
@@ -22,7 +23,7 @@ export const useVehicles = () => {
 
   console.log('[useVehicles] Hook called - isAuthenticated:', isAuthenticated, 'isLoading:', isLoading);
 
-  return useQuery({
+  const query = useQuery({
     queryKey: ['vehicles'],
     queryFn: () => {
       console.log('[useVehicles] Query function called - fetching vehicles');
@@ -42,13 +43,19 @@ export const useVehicles = () => {
     retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
     refetchOnWindowFocus: false, // Prevent refetch on window focus
     refetchOnMount: false, // Only fetch on mount if data is stale
-    onSuccess: (data) => {
-      console.log('[useVehicles] Query success - vehicles loaded:', data?.length);
-    },
-    onError: (error) => {
-      console.log('[useVehicles] Query error:', error);
-    },
   });
+
+  // Handle success/error with useEffect instead of deprecated callbacks
+  React.useEffect(() => {
+    if (query.data) {
+      console.log('[useVehicles] Query success - vehicles loaded:', Array.isArray(query.data) ? query.data.length : 0);
+    }
+    if (query.error) {
+      console.log('[useVehicles] Query error:', query.error);
+    }
+  }, [query.data, query.error]);
+
+  return query;
 };
 
 export const useVehicle = (id: string) => {

frontend/src/features/vehicles/mobile/VehiclesMobileScreen.tsx

@@ -45,7 +45,7 @@ export const VehiclesMobileScreen: React.FC<VehiclesMobileScreenProps> = ({
   const {
     optimisticVehicles,
     isPending: isOptimisticPending
-  } = useOptimisticVehicles(vehicles || []);
+  } = useOptimisticVehicles(Array.isArray(vehicles) ? vehicles : []);
   
   // Enhanced search with transitions
   const {

frontend/src/features/vehicles/pages/VehiclesPage.tsx

@@ -29,7 +29,7 @@ export const VehiclesPage: React.FC = () => {
     isPending: isOptimisticPending, 
     optimisticCreateVehicle, 
     optimisticDeleteVehicle 
-  } = useOptimisticVehicles(vehicles || []);
+  } = useOptimisticVehicles(Array.isArray(vehicles) ? vehicles : []);
   
   const { 
     searchQuery, 
@@ -110,7 +110,7 @@ export const VehiclesPage: React.FC = () => {
         </Box>
 
         {/* Search functionality */}
-        {vehicles && vehicles.length > 0 && (
+        {vehicles && Array.isArray(vehicles) && vehicles.length > 0 && (
           <Box sx={{ mb: 3 }}>
             <TextField
               fullWidth