Fase 2: Creatción de la UI (React + Vite). Implementación de Log In reemplazando texto plano. Y creación de tool para migrar contraseñas.

Frontend/src/layouts/MainLayout.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { ReactNode } from 'react'; // Importar como tipo
+import { Box, AppBar, Toolbar, Typography, Button } from '@mui/material';
+import { useAuth } from '../contexts/AuthContext';
+
+interface MainLayoutProps {
+  children: ReactNode; // Para renderizar las páginas hijas
+}
+
+const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
+    const { user, logout } = useAuth();
+
+    return (
+        <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+            <AppBar position="static">
+                <Toolbar>
+                    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+                        Gestión Integral
+                    </Typography>
+                    {user && <Typography sx={{ mr: 2 }}>Hola, {user.Username}</Typography> }
+                    <Button color="inherit" onClick={logout}>Cerrar Sesión</Button>
+                </Toolbar>
+                {/* Aquí iría el MaterialTabControl o similar para la navegación principal */}
+            </AppBar>
+            <Box
+                component="main"
+                sx={{
+                    flexGrow: 1,
+                    p: 3, // Padding
+                    // Puedes añadir color de fondo si lo deseas
+                    // backgroundColor: (theme) => theme.palette.background.default,
+                }}
+            >
+                {/* El contenido de la página actual se renderizará aquí */}
+                {children}
+            </Box>
+            {/* Aquí podría ir un Footer o StatusStrip */}
+             <Box component="footer" sx={{ p: 1, mt: 'auto', backgroundColor: 'primary.dark', color: 'white', textAlign: 'center' }}>
+                <Typography variant="body2">
+                    {/* Replicar info del StatusStrip original */}
+                    Usuario: {user?.Username} | Acceso: {user?.EsSuperAdmin ? 'Super Admin' : 'Perfil...'} | Versión: {/** Obtener versión **/}
+                </Typography>
+            </Box>
+        </Box>
+    );
+};
+
+export default MainLayout;