Updated frameworks.

frontend/Dockerfile

@@ -26,7 +26,7 @@ ENV VITE_AUTH0_AUDIENCE=$VITE_AUTH0_AUDIENCE
 ENV VITE_API_BASE_URL=$VITE_API_BASE_URL
 
 COPY . .
-RUN npm run build:docker
+RUN npm run build
 
 # Stage 4: Production stage with nginx
 FROM nginx:alpine AS production

frontend/package.json

@@ -12,9 +12,9 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router-dom": "^7.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.8.0",
     "@auth0/auth0-react": "^2.2.3",
     "axios": "^1.6.2",
     "zustand": "^4.4.6",
@@ -26,25 +26,26 @@
     "clsx": "^2.0.0",
     "react-hot-toast": "^2.4.1",
     "framer-motion": "^11.0.0",
-    "@mui/material": "^6.0.0",
-    "@emotion/react": "^11.11.1",
+    "@mui/material": "^5.15.0",
+    "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^6.0.0"
+    "@emotion/cache": "^11.11.0",
+    "@mui/icons-material": "^5.15.0"
   },
   "devDependencies": {
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^6.12.0",
     "@typescript-eslint/parser": "^6.12.0",
     "@vitejs/plugin-react": "^4.2.0",
     "autoprefixer": "^10.4.16",
-    "babel-plugin-react-compiler": "rc",
     "eslint": "^8.54.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
     "postcss": "^8.4.32",
     "tailwindcss": "^3.3.6",
     "terser": "^5.24.0",
+    "@emotion/babel-plugin": "^11.11.0",
     "typescript": "^5.6.3",
     "vite": "^5.0.6",
     "vitest": "^1.0.1",

frontend/src/core/auth/Auth0Provider.tsx

@@ -44,9 +44,11 @@ const TokenInjector: React.FC<{ children: React.ReactNode }> = ({ children }) =>
   const { getAccessTokenSilently, isAuthenticated } = useAuth0();
 
   React.useEffect(() => {
+    let interceptorId: number | undefined;
+
     if (isAuthenticated) {
       // Add token to all API requests
-      apiClient.interceptors.request.use(async (config) => {
+      interceptorId = apiClient.interceptors.request.use(async (config) => {
         try {
           const token = await getAccessTokenSilently();
           config.headers.Authorization = `Bearer ${token}`;
@@ -56,6 +58,13 @@ const TokenInjector: React.FC<{ children: React.ReactNode }> = ({ children }) =>
         return config;
       });
     }
+
+    // Cleanup function to remove interceptor
+    return () => {
+      if (interceptorId !== undefined) {
+        apiClient.interceptors.request.eject(interceptorId);
+      }
+    };
   }, [isAuthenticated, getAccessTokenSilently]);
 
   return <>{children}</>;

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

@@ -1,9 +1,9 @@
 /**
- * @ai-summary React 19 useOptimistic hook for vehicle operations
- * @ai-context Provides optimistic updates for better perceived performance
+ * @ai-summary React 18 compatible optimistic updates hook for vehicle operations
+ * @ai-context Provides optimistic updates for better perceived performance using useState and useTransition
  */
 
-import { useOptimistic, useTransition } from 'react';
+import { useState, useTransition, useEffect } from 'react';
 import { Vehicle, CreateVehicleRequest } from '../types/vehicles.types';
 import { useQueryClient } from '@tanstack/react-query';
 import { vehiclesApi } from '../api/vehicles.api';
@@ -30,13 +30,20 @@ function vehicleReducer(state: Vehicle[], action: VehicleAction): Vehicle[] {
 }
 
 export function useOptimisticVehicles(vehicles: Vehicle[] = []) {
-  const [optimisticVehicles, addOptimistic] = useOptimistic(
-    vehicles,
-    vehicleReducer
-  );
+  const [optimisticVehicles, setOptimisticVehicles] = useState<Vehicle[]>(vehicles);
   const [isPending, startTransition] = useTransition();
   const queryClient = useQueryClient();
 
+  // React 18 compatible optimistic update function
+  const addOptimistic = (action: VehicleAction) => {
+    setOptimisticVehicles(currentVehicles => vehicleReducer(currentVehicles, action));
+  };
+
+  // Sync optimistic state with actual vehicles when they change
+  useEffect(() => {
+    setOptimisticVehicles(vehicles);
+  }, [vehicles]);
+
   const optimisticCreateVehicle = async (data: CreateVehicleRequest) => {
     // Create optimistic vehicle with temporary ID
     const optimisticVehicle: Vehicle = {

frontend/vite.config.ts

@@ -2,17 +2,11 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 
-const ReactCompilerConfig = {
-  compilationMode: 'infer'
-};
-
 export default defineConfig({
   plugins: [
     react({
       babel: {
-        plugins: [
-          ['babel-plugin-react-compiler', ReactCompilerConfig],
-        ],
+        plugins: ['@emotion/babel-plugin'],
       },
     }),
   ],
@@ -38,10 +32,9 @@ export default defineConfig({
           'react-vendor': ['react', 'react-dom'],
           'react-router': ['react-router-dom'],
           
-          // UI library
-          'mui-core': ['@mui/material', '@mui/system'],
+          // UI library (emotion bundled with mui-core to prevent runtime errors)
+          'mui-core': ['@mui/material', '@mui/system', '@emotion/react', '@emotion/styled'],
           'mui-icons': ['@mui/icons-material'],
-          'emotion': ['@emotion/react', '@emotion/styled'],
           
           // Authentication
           'auth': ['@auth0/auth0-react'],