rework route tree, outlet not working

src/App.tsx

@@ -1,12 +1,12 @@
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { AuthProvider } from './context/AuthContext';
 import { LoginForm } from './routes/Login/LoginForm';
-import { Authenticated } from './routes/Login/Authenticated';
+import { Authenticated } from './components/Authenticated';
 import { Dashboard } from './routes/Authenticated/Dashboard/Dashboard';
 import { Apps } from './routes/Authenticated/Apps/Apps';
 import { AppDetail } from './routes/Authenticated/Apps/App';
 import { Servers } from './routes/Authenticated/Servers/Servers';
-import { Server} from './routes/Authenticated/Servers/Server';
+import { Server } from './routes/Authenticated/Servers/Server';
 
 function App() {
   return (
@@ -17,53 +17,14 @@ function App() {
           <Route path="/login" element={<LoginForm />} />
           
           {/* Protected routes */}
-          <Route
-            path="/dashboard"
-            element={
-              <Authenticated>
-                <Dashboard />
-              </Authenticated>
-            }
-          />
-          
-          <Route
-            path="/apps"
-            element={
-              <Authenticated>
-                <Apps />
-              </Authenticated>
-            }
-          />
-          
-          <Route
-            path="/apps/:server/:appName"
-            element={
-              <Authenticated>
-                <AppDetail />
-              </Authenticated>
-            }
-          />
-          
-          <Route
-            path="/servers"
-            element={
-              <Authenticated>
-                <Servers />
-              </Authenticated>
-            }
-          />
-          
-          <Route
-            path="/servers/:serverName"
-            element={
-              <Authenticated>
-                <Server/>
-              </Authenticated>
-            }
-          />
-          
-          {/* Redirect root to dashboard */}
-          <Route path="/" element={<Navigate to="/dashboard" replace />} />
+          <Route element={<Authenticated />}>
+            <Route path="/" element={<Navigate to="/dashboard" replace />} />
+            <Route path="/dashboard" element={<Dashboard />} />
+            <Route path="/apps" element={<Apps />} />
+            <Route path="/apps/:server/:appName" element={<AppDetail />} />
+            <Route path="/servers" element={<Servers />} />
+            <Route path="/servers/:serverName" element={<Server />} />
+          </Route>
           
           {/* 404 catch-all */}
           <Route path="*" element={<Navigate to="/dashboard" replace />} />

src/components/Authenticated.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+export const Authenticated: React.FC = () => {
+  const { isAuthenticated, loading } = useAuth();
+
+    console.log('🛡️ ProtectedRoute:', { isAuthenticated, loading });
+
+  if (loading) {
+    return (
+      <div style={{ 
+        display: 'flex', 
+        justifyContent: 'center', 
+        alignItems: 'center', 
+        height: '100vh' 
+      }}>
+        <p>Loading...</p>
+      </div>
+    );
+  }
+
+  return isAuthenticated ? <Outlet /> : <Navigate to="/login" replace />;
+};

src/context/AuthContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode, useEffect, useState } from 'react';
+import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react';
 import { apiService } from '../services/api';
 import type { LoginCredentials, User } from '../types';
 
@@ -23,36 +23,36 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
   const isMockMode = import.meta.env.VITE_MOCK_AUTH === 'true';
 
   useEffect(() => {
-      // Check if user is already logged in on mount
-      const checkAuth = async () => {
-        try {
-          // In mock mode, automatically set a mock user
-          if (isMockMode) {
-            setUser({
-              id: 'mock-user-1',
-              username: 'developer',
-              email: 'dev@coopcloud.tech',
-            });
-            setLoading(false);
-            return;
-          }
-
-          const token = localStorage.getItem('auth_token');
-          if (token) {
-            const currentUser = await apiService.getCurrentUser();
-            setUser(currentUser);
-          }
-        } catch (error) {
-          console.error('Auth check failed:', error);
-          localStorage.removeItem('auth_token');
-        } finally {
+    const checkAuth = async () => {
+      console.log('🔍 checkAuth running, isMockMode:', isMockMode);
+      try {
+        if (isMockMode) {
+          console.log('✅ Mock mode - setting mock user');
+          setUser({
+            id: 'mock-user-1',
+            username: 'developer',
+            email: 'dev@coopcloud.tech',
+          });
           setLoading(false);
+          console.log('✅ Mock user set, loading set to false');
+          return;
         }
-      };
 
-      checkAuth();
-    }, [isMockMode]);
+        const token = localStorage.getItem('auth_token');
+        if (token) {
+          const currentUser = await apiService.getCurrentUser();
+          setUser(currentUser);
+        }
+      } catch (error) {
+        console.error('Auth check failed:', error);
+        localStorage.removeItem('auth_token');
+      } finally {
+        setLoading(false);
+      }
+    };
 
+    checkAuth();
+  }, [isMockMode]);
 
   const login = async (credentials: LoginCredentials) => {
     try {
@@ -75,6 +75,15 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     logout,
     isAuthenticated: !!user,
   };
+  console.log('📊 AuthContext state:', { user, loading, isAuthenticated: !!user });
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-};
+};
+
+export function useAuth() { 
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}

src/routes/Login/Authenticated.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Navigate } from 'react-router-dom';
-import { useAuth } from '../../hooks/useAuth';
-
-interface AuthenticatedProps {
-  children: React.ReactNode;
-}
-
-export const Authenticated: React.FC<AuthenticatedProps> = ({ children }) => {
-  const { isAuthenticated, loading } = useAuth();
-
-  if (loading) {
-    return (
-      <div style={{ 
-        display: 'flex', 
-        justifyContent: 'center', 
-        alignItems: 'center', 
-        height: '100vh' 
-      }}>
-        <p>Loading...</p>
-      </div>
-    );
-  }
-
-  return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />;
-};