fix issues

apps/website/lib/di/container.ts

@@ -2,6 +2,7 @@ import { Container } from 'inversify';
 
 // Module imports
 import { ApiModule } from './modules/api.module';
+import { AuthModule } from './modules/auth.module';
 import { CoreModule } from './modules/core.module';
 import { DashboardModule } from './modules/dashboard.module';
 import { DriverModule } from './modules/driver.module';
@@ -23,6 +24,7 @@ export function createContainer(): Container {
   container.load(
     CoreModule,
     ApiModule,
+    AuthModule,
     LeagueModule,
     DriverModule,
     TeamModule,

apps/website/lib/di/index.ts

@@ -13,6 +13,7 @@ export * from './providers/ContainerProvider';
 // Modules
 export * from './modules/analytics.module';
 export * from './modules/api.module';
+export * from './modules/auth.module';
 export * from './modules/core.module';
 export * from './modules/dashboard.module';
 export * from './modules/driver.module';

apps/website/lib/di/modules/auth.module.ts

@@ -0,0 +1,30 @@
+import { ContainerModule } from 'inversify';
+import { AuthService } from '../../services/auth/AuthService';
+import { SessionService } from '../../services/auth/SessionService';
+import { AuthApiClient } from '../../api/auth/AuthApiClient';
+
+import {
+  AUTH_SERVICE_TOKEN,
+  SESSION_SERVICE_TOKEN,
+  AUTH_API_CLIENT_TOKEN
+} from '../tokens';
+
+export const AuthModule = new ContainerModule((options) => {
+  const bind = options.bind;
+
+  // Session Service
+  bind<SessionService>(SESSION_SERVICE_TOKEN)
+    .toDynamicValue((ctx) => {
+      const authApiClient = ctx.get<AuthApiClient>(AUTH_API_CLIENT_TOKEN);
+      return new SessionService(authApiClient);
+    })
+    .inSingletonScope();
+
+  // Auth Service
+  bind<AuthService>(AUTH_SERVICE_TOKEN)
+    .toDynamicValue((ctx) => {
+      const authApiClient = ctx.get<AuthApiClient>(AUTH_API_CLIENT_TOKEN);
+      return new AuthService(authApiClient);
+    })
+    .inSingletonScope();
+});

apps/website/lib/di/modules/league.module.ts

@@ -91,6 +91,9 @@ export const LeagueModule = new ContainerModule((options) => {
 
   // League Membership Service
   bind<LeagueMembershipService>(LEAGUE_MEMBERSHIP_SERVICE_TOKEN)
-    .to(LeagueMembershipService)
+    .toDynamicValue((ctx) => {
+      const leagueApiClient = ctx.get<LeaguesApiClient>(LEAGUE_API_CLIENT_TOKEN);
+      return new LeagueMembershipService(leagueApiClient);
+    })
     .inSingletonScope();
 });

apps/website/lib/infrastructure/logging/ConsoleLogger.ts

@@ -35,14 +35,29 @@ export class ConsoleLogger implements Logger {
     const emoji = this.EMOJIS[level];
     const prefix = this.PREFIXES[level];
     
-    console.groupCollapsed(`%c${emoji} [${source.toUpperCase()}] ${prefix}: ${message}`, `color: ${color}; font-weight: bold;`);
+    // Edge runtime doesn't support console.groupCollapsed/groupEnd
+    // Fallback to simple logging for compatibility
+    const supportsGrouping = typeof console.groupCollapsed === 'function' && typeof console.groupEnd === 'function';
+    
+    if (supportsGrouping) {
+      // Safe to call - we've verified both functions exist
+      (console as any).groupCollapsed(`%c${emoji} [${source.toUpperCase()}] ${prefix}: ${message}`, `color: ${color}; font-weight: bold;`);
+    } else {
+      // Simple format for edge runtime
+      console.log(`${emoji} [${source.toUpperCase()}] ${prefix}: ${message}`);
+    }
     
     console.log(`%cTimestamp:`, 'color: #666; font-weight: bold;', new Date().toISOString());
     console.log(`%cSource:`, 'color: #666; font-weight: bold;', source);
     
     if (context) {
       console.log(`%cContext:`, 'color: #666; font-weight: bold;');
-      console.dir(context, { depth: 3, colors: true });
+      // console.dir may not be available in edge runtime
+      if (typeof console.dir === 'function') {
+        console.dir(context, { depth: 3, colors: true });
+      } else {
+        console.log(JSON.stringify(context, null, 2));
+      }
     }
     
     if (error) {
@@ -56,7 +71,10 @@ export class ConsoleLogger implements Logger {
       }
     }
     
-    console.groupEnd();
+    if (supportsGrouping) {
+      // Safe to call - we've verified the function exists
+      (console as any).groupEnd();
+    }
   }
 
   debug(message: string, context?: unknown): void {

apps/website/lib/providers/QueryClientProvider.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { QueryClient, QueryClientProvider as TanstackQueryClientProvider } from '@tanstack/react-query';
+import { ReactNode, useState } from 'react';
+
+interface QueryClientProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Provides React Query client to the application
+ * 
+ * Must wrap any components that use React Query hooks (useQuery, useMutation, etc.)
+ * Creates a new QueryClient instance per component tree to avoid state sharing
+ */
+export function QueryClientProvider({ children }: QueryClientProviderProps) {
+  // Create a new QueryClient instance for each component tree
+  // This prevents state sharing between different renders
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // Disable automatic refetching in production for better performance
+            refetchOnWindowFocus: process.env.NODE_ENV === 'development',
+            refetchOnReconnect: true,
+            retry: 1,
+            staleTime: 5 * 60 * 1000, // 5 minutes
+          },
+          mutations: {
+            retry: 0,
+          },
+        },
+      })
+  );
+
+  return (
+    <TanstackQueryClientProvider client={queryClient}>
+      {children}
+    </TanstackQueryClientProvider>
+  );
+}