Fase 3:
- Backend API: Autenticación y autorización básicas con JWT implementadas. Cambio de contraseña funcional. Módulo "Tipos de Pago" (CRUD completo) implementado en el backend (Controlador, Servicio, Repositorio) usando Dapper, transacciones y con lógica de historial. Se incluyen permisos en el token JWT. - Frontend React: Estructura base con Vite, TypeScript, MUI. Contexto de autenticación (AuthContext) que maneja el estado del usuario y el token. Página de Login. Modal de Cambio de Contraseña (forzado y opcional). Hook usePermissions para verificar permisos. Página GestionarTiposPagoPage con tabla, paginación, filtro, modal para crear/editar, y menú de acciones, respetando permisos. Layout principal (MainLayout) con navegación por Tabs (funcionalidad básica de navegación). Estructura de enrutamiento (AppRoutes) que maneja rutas públicas, protegidas y anidadas para módulos.
This commit is contained in:
@@ -1,46 +1,152 @@
|
||||
import React from 'react';
|
||||
import type { ReactNode } from 'react'; // Importar como tipo
|
||||
import { Box, AppBar, Toolbar, Typography, Button } from '@mui/material';
|
||||
import React, { type ReactNode, useState, useEffect } from 'react';
|
||||
import { Box, AppBar, Toolbar, Typography, Button, Tabs, Tab, Paper } from '@mui/material';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import ChangePasswordModal from '../components/ChangePasswordModal';
|
||||
import { useNavigate, useLocation } from 'react-router-dom'; // Para manejar la navegación y la ruta actual
|
||||
|
||||
interface MainLayoutProps {
|
||||
children: ReactNode; // Para renderizar las páginas hijas
|
||||
children: ReactNode; // Esto será el <Outlet /> que renderiza las páginas del módulo
|
||||
}
|
||||
|
||||
// Definir los módulos y sus rutas base
|
||||
const modules = [
|
||||
{ label: 'Inicio', path: '/' },
|
||||
{ label: 'Distribución', path: '/distribucion' }, // Asumiremos rutas base como /distribucion, /contables, etc.
|
||||
{ label: 'Contables', path: '/contables' },
|
||||
{ label: 'Impresión', path: '/impresion' },
|
||||
{ label: 'Reportes', path: '/reportes' },
|
||||
{ label: 'Radios', path: '/radios' },
|
||||
{ label: 'Usuarios', path: '/usuarios' },
|
||||
];
|
||||
|
||||
const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
|
||||
const { user, logout } = useAuth();
|
||||
const {
|
||||
user,
|
||||
logout,
|
||||
showForcedPasswordChangeModal,
|
||||
isPasswordChangeForced,
|
||||
passwordChangeCompleted,
|
||||
setShowForcedPasswordChangeModal,
|
||||
isAuthenticated
|
||||
} = useAuth();
|
||||
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation(); // Para obtener la ruta actual
|
||||
|
||||
// Estado para el tab seleccionado
|
||||
const [selectedTab, setSelectedTab] = useState<number | false>(false);
|
||||
|
||||
// Efecto para sincronizar el tab seleccionado con la ruta actual
|
||||
useEffect(() => {
|
||||
const currentModulePath = modules.findIndex(module =>
|
||||
location.pathname === module.path || (module.path !== '/' && location.pathname.startsWith(module.path + '/'))
|
||||
);
|
||||
if (currentModulePath !== -1) {
|
||||
setSelectedTab(currentModulePath);
|
||||
} else if (location.pathname === '/') {
|
||||
setSelectedTab(0); // Seleccionar "Inicio" si es la raíz
|
||||
} else {
|
||||
setSelectedTab(false); // Ningún tab coincide (podría ser una sub-ruta no principal)
|
||||
}
|
||||
}, [location.pathname]);
|
||||
|
||||
const handleModalClose = (passwordChangedSuccessfully: boolean) => {
|
||||
// ... (lógica de handleModalClose existente) ...
|
||||
if (passwordChangedSuccessfully) {
|
||||
passwordChangeCompleted();
|
||||
} else {
|
||||
if (isPasswordChangeForced) {
|
||||
logout();
|
||||
} else {
|
||||
setShowForcedPasswordChangeModal(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
|
||||
setSelectedTab(newValue);
|
||||
navigate(modules[newValue].path); // Navegar a la ruta base del módulo
|
||||
};
|
||||
|
||||
// Si el modal de cambio de clave forzado está activo, no mostramos la navegación principal aún.
|
||||
// El modal se superpone.
|
||||
if (showForcedPasswordChangeModal && isPasswordChangeForced) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
|
||||
<ChangePasswordModal
|
||||
open={showForcedPasswordChangeModal}
|
||||
onClose={handleModalClose}
|
||||
isFirstLogin={isPasswordChangeForced}
|
||||
/>
|
||||
{/* Podrías querer un fondo o layout mínimo aquí si el modal no es pantalla completa */}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
|
||||
<AppBar position="static">
|
||||
<Toolbar>
|
||||
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
||||
Gestión Integral
|
||||
Sistema de Gestión - El Día
|
||||
</Typography>
|
||||
{user && <Typography sx={{ mr: 2 }}>Hola, {user.Username}</Typography> }
|
||||
{user && <Typography sx={{ mr: 2 }}>Hola, {user.nombreCompleto}</Typography>}
|
||||
{isAuthenticated && !isPasswordChangeForced && (
|
||||
<Button
|
||||
color="inherit"
|
||||
onClick={() => setShowForcedPasswordChangeModal(true)} // Ahora abre el modal
|
||||
>
|
||||
Cambiar Contraseña
|
||||
</Button>
|
||||
)}
|
||||
<Button color="inherit" onClick={logout}>Cerrar Sesión</Button>
|
||||
</Toolbar>
|
||||
{/* Aquí iría el MaterialTabControl o similar para la navegación principal */}
|
||||
{/* Navegación Principal por Módulos */}
|
||||
<Paper square elevation={0} > {/* Usamos Paper para un fondo consistente para los Tabs */}
|
||||
<Tabs
|
||||
value={selectedTab}
|
||||
onChange={handleTabChange}
|
||||
indicatorColor="secondary" // O "primary"
|
||||
textColor="inherit" // O "primary" / "secondary"
|
||||
variant="scrollable" // Permite scroll si hay muchos tabs
|
||||
scrollButtons="auto" // Muestra botones de scroll si es necesario
|
||||
aria-label="módulos principales"
|
||||
sx={{ backgroundColor: 'primary.main', color: 'white' }} // Color de fondo para los tabs
|
||||
>
|
||||
{modules.map((module) => (
|
||||
<Tab key={module.path} label={module.label} />
|
||||
))}
|
||||
</Tabs>
|
||||
</Paper>
|
||||
</AppBar>
|
||||
|
||||
{/* Contenido del Módulo (renderizado por <Outlet /> en AppRoutes) */}
|
||||
<Box
|
||||
component="main"
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
p: 3, // Padding
|
||||
// Puedes añadir color de fondo si lo deseas
|
||||
// backgroundColor: (theme) => theme.palette.background.default,
|
||||
// overflowY: 'auto' // Si el contenido del módulo es muy largo
|
||||
}}
|
||||
>
|
||||
{/* 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' }}>
|
||||
|
||||
<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 **/}
|
||||
Usuario: {user?.username} | Acceso: {user?.esSuperAdmin ? 'Super Admin' : `Perfil ID ${user?.userId}`} | Versión: {/* TODO: Obtener versión */}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Modal para cambio de clave opcional (no forzado) */}
|
||||
{/* Si showForcedPasswordChangeModal es true pero isPasswordChangeForced es false,
|
||||
se mostrará aquí también. */}
|
||||
<ChangePasswordModal
|
||||
open={showForcedPasswordChangeModal}
|
||||
onClose={handleModalClose}
|
||||
isFirstLogin={isPasswordChangeForced} // Esto controla el comportamiento del modal
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user