fix: refactor auth logic to use AuthGuard and resolve blank page

App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { HashRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
 import { Layout } from './components/Layout';
 import { Dashboard } from './pages/Dashboard';
@@ -8,34 +8,62 @@ import { SuperAdmin } from './pages/SuperAdmin';
 import { TeamManagement } from './pages/TeamManagement';
 import { Login } from './pages/Login';
 import { UserProfile } from './pages/UserProfile';
+import { getUserById } from './services/dataService';
+import { User } from './types';
 
-const AppLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+const AuthGuard: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
   const location = useLocation();
-  const isLoginPage = location.pathname === '/login';
 
-  if (isLoginPage) {
+  useEffect(() => {
-    return <>{children}</>;
+    const checkAuth = async () => {
+      const storedUserId = localStorage.getItem('ctms_user_id');
+      if (!storedUserId) {
+        setLoading(false);
+        return;
       }
 
-  return <Layout>{children}</Layout>;
+      try {
+        const fetchedUser = await getUserById(storedUserId);
+        if (fetchedUser) {
+          setUser(fetchedUser);
+        } else {
+          localStorage.removeItem('ctms_user_id');
+        }
+      } catch (err) {
+        console.error("Auth check failed", err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    checkAuth();
+  }, [location.pathname]);
+
+  if (loading) {
+    return <div className="flex h-screen items-center justify-center bg-slate-50 text-slate-400">Carregando...</div>;
+  }
+
+  if (!user) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <Layout currentUser={user}>{children}</Layout>;
 };
 
 const App: React.FC = () => {
   return (
     <Router>
-      <AppLayout>
       <Routes>
         <Route path="/login" element={<Login />} />
-          <Route path="/" element={<Dashboard />} />
+        <Route path="/" element={<AuthGuard><Dashboard /></AuthGuard>} />
-          <Route path="/users" element={<Navigate to="/admin/users" replace />} />
+        <Route path="/admin/users" element={<AuthGuard><TeamManagement /></AuthGuard>} />
-          <Route path="/admin/users" element={<TeamManagement />} />
+        <Route path="/users/:id" element={<AuthGuard><UserDetail /></AuthGuard>} />
-          <Route path="/users/:id" element={<UserDetail />} />
+        <Route path="/attendances/:id" element={<AuthGuard><AttendanceDetail /></AuthGuard>} />
-          <Route path="/attendances/:id" element={<AttendanceDetail />} />
+        <Route path="/super-admin" element={<AuthGuard><SuperAdmin /></AuthGuard>} />
-          <Route path="/super-admin" element={<SuperAdmin />} />
+        <Route path="/profile" element={<AuthGuard><UserProfile /></AuthGuard>} />
-          <Route path="/profile" element={<UserProfile />} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
-      </AppLayout>
     </Router>
   );
 };

components/Layout.tsx

@@ -20,29 +20,10 @@ const SidebarItem = ({ to, icon: Icon, label, collapsed }: { to: string, icon: a
   </NavLink>
 );
 
-export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const Layout: React.FC<{ children: React.ReactNode, currentUser: User }> = ({ children, currentUser }) => {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const location = useLocation();
   const navigate = useNavigate();
-  const [currentUser, setCurrentUser] = useState<User | null>(null);
-
-  useEffect(() => {
-    const fetchUser = async () => {
-      const storedUserId = localStorage.getItem('ctms_user_id');
-      if (!storedUserId) {
-        navigate('/login');
-        return;
-      }
-      
-      const user = await getUserById(storedUserId);
-      if (user) {
-        setCurrentUser(user);
-      } else {
-        navigate('/login');
-      }
-    };
-    fetchUser();
-  }, [navigate]);
 
   const handleLogout = () => {
     localStorage.removeItem('ctms_user_id');
@@ -50,8 +31,6 @@ export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) =>
     navigate('/login');
   };
 
-  if (!currentUser) return null; // Brief null return while navigating or fetching
-
   const isSuperAdmin = currentUser.role === 'super_admin';
 
   return (