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

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 (