feat: fixed logo and made login a "separate" page

src/App.jsx

@@ -1,4 +1,3 @@
-// App.jsx
 import { useState } from 'react';
 import { Box, useMediaQuery } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
@@ -16,33 +15,39 @@ const DRAWER_EXPANDED = OPEN_WIDTH;
 const DRAWER_COLLAPSED = MINI_WIDTH;
 const APPBAR_HEIGHT = 64;
 
-function PrivateRoute({ children }) {
-  const { user } = useAuth();
-  return user ? children : <Navigate to="/login" replace />;
-}
-
 export default function App() {
   const theme = useTheme();
   const isMobile = useMediaQuery('(max-width:900px)');
-  const [zone] = useState('public');
   const [drawerExpanded, setDrawerExpanded] = useState(true);
   const [currentView, setCurrentView] = useState('Dashboard');
+  const { user, initializing } = useAuth();
 
   const mainLeft = isMobile ? 0 : (drawerExpanded ? DRAWER_EXPANDED : DRAWER_COLLAPSED);
 
+  // Evita flicker mientras se restaura sesión
+  if (initializing) return null;
+
+  // === RUTAS PÚBLICAS (sin shell) ===
+  if (!user) {
+    return (
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="*" element={<Navigate to="/login" replace />} />
+      </Routes>
+    );
+  }
+
+  // === RUTAS PRIVADAS (con shell) ===
   return (
     <>
       <AppHeader
         zone="private"
-        currentPage={currentView}              // <-- show this in the header
+        currentPage={currentView}
-        leftOffset={mainLeft}                 // <-- keep title clear of the drawer
+        leftOffset={mainLeft}
       />
 
       <MenuDrawerPrivate
-        onSelect={(value) => {
+        onSelect={(value) => setCurrentView(value)}
-          // normalize any custom route keys
-          setCurrentView(value);
-        }}
         onExpandedChange={(expanded) => setDrawerExpanded(expanded)}
       />
 
@@ -59,23 +64,26 @@ export default function App() {
         }}
       >
         <Routes>
-          <Route path="/login" element={<LoginPage />} />
+          {/* Si ya está autenticado, /login redirige al dashboard */}
+          <Route path="/login" element={<Navigate to="/" replace />} />
 
           <Route
             path="/"
             element={
-              <PrivateRoute>
+              <>
-                {zone === 'public' && currentView === 'Dashboard' && <Dashboard />}
+                {currentView === 'Dashboard' && <Dashboard />}
-                {zone === 'public' && currentView === '/Users/UserManagement' && <UserManagement />}
+                {currentView === '/Users/UserManagement' && <UserManagement />}
-                {zone === 'public' && currentView === '/ProductsManagement/CatalogManagement/ProductCollections' && <FurnitureVariantManagement />}
+                {currentView === '/ProductsManagement/CatalogManagement/ProductCollections' && (
-              </PrivateRoute>
+                  <FurnitureVariantManagement />
+                )}
+              </>
             }
           />
         </Routes>
       </Box>
 
       <Box sx={{ height: 64 }} />
-      <Footer zone={zone} />
+      <Footer zone="private" />
     </>
   );
-}
+}

src/context/AuthContext.jsx

@@ -4,10 +4,12 @@ const AuthContext = createContext();
 
 export function AuthProvider({ children }) {
   const [user, setUser] = useState(null);
+  const [initializing, setInitializing] = useState(true);
 
   useEffect(() => {
     const storedUser = localStorage.getItem('user');
     if (storedUser) setUser(JSON.parse(storedUser));
+    setInitializing(false);
   }, []);
 
   const login = (userData) => {
@@ -22,7 +24,7 @@ export function AuthProvider({ children }) {
   };
 
   return (
-    <AuthContext.Provider value={{ user, login, logout }}>
+    <AuthContext.Provider value={{ user, login, logout, initializing }}>
       {children}
     </AuthContext.Provider>
   );
@@ -30,4 +32,4 @@ export function AuthProvider({ children }) {
 
 export function useAuth() {
   return useContext(AuthContext);
-}
+}

src/private/LoginPage.jsx

@@ -15,8 +15,15 @@ export default function LoginPage() {
     return (
         <Box display="flex" justifyContent="center" alignItems="center" height="100vh">
             <Paper sx={{ p: 4, borderRadius: 2, boxShadow: 3, textAlign: 'center' }}>
-                <Typography variant="h5" mb={2}>Login to Dream Views</Typography>
 
+                <Box mb={2}>
+                    <Typography variant="h5" mb={2}>Login</Typography>
+                    <img
+                        src="/Logo.png"
+                        alt="Dream Views"
+                        style={{ width: '200px', height: 'auto' }}
+                    />
+                </Box>
                 <GoogleLogin
                     onSuccess={(cred) => {
                         const idToken = cred?.credential;
@@ -42,7 +49,7 @@ export default function LoginPage() {
                                 idToken: googleIdToken,
                                 thalosToken: payload?.token || '',
                             });
-                            navigate('/');
+                            navigate('/', { replace: true });
                         }}
                         onError={(err) => {
                             console.error('Thalos exchange failed:', err);
@@ -50,7 +57,16 @@ export default function LoginPage() {
                         }}
                     />
                 )}
+
+                <Box mt={4}>
+                    <p>By</p>
+                    <img
+                        src="https://imaageq.com/images/Imaageq%20black-no%20slogan.webp"
+                        alt="ImaageQ"
+                        style={{ width: '72px', height: 'auto', opacity: 0.8 }}
+                    />
+                </Box>
             </Paper>
         </Box>
     );
-}
+}