Ajustes de reportes y controles.
Se implementan DataGrid a los reportes y se mejoran los controles de selección y presentación.
This commit is contained in:
@@ -5,38 +5,37 @@ import ChangePasswordModal from '../components/Modals/Usuarios/ChangePasswordMod
|
||||
import { useNavigate, useLocation } from 'react-router-dom'; // Para manejar la navegación y la ruta actual
|
||||
|
||||
interface MainLayoutProps {
|
||||
children: ReactNode; // Esto será el <Outlet /> que renderiza las páginas del módulo
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
// 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' },
|
||||
{ label: 'Inicio', path: '/' },
|
||||
{ label: 'Distribución', path: '/distribucion' },
|
||||
{ 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,
|
||||
showForcedPasswordChangeModal,
|
||||
// ... (resto de las props de useAuth) ...
|
||||
isAuthenticated,
|
||||
isPasswordChangeForced,
|
||||
passwordChangeCompleted,
|
||||
showForcedPasswordChangeModal,
|
||||
setShowForcedPasswordChangeModal,
|
||||
isAuthenticated
|
||||
passwordChangeCompleted
|
||||
} = 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 + '/'))
|
||||
@@ -44,14 +43,13 @@ const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
|
||||
if (currentModulePath !== -1) {
|
||||
setSelectedTab(currentModulePath);
|
||||
} else if (location.pathname === '/') {
|
||||
setSelectedTab(0); // Seleccionar "Inicio" si es la raíz
|
||||
setSelectedTab(0);
|
||||
} else {
|
||||
setSelectedTab(false); // Ningún tab coincide (podría ser una sub-ruta no principal)
|
||||
setSelectedTab(false);
|
||||
}
|
||||
}, [location.pathname]);
|
||||
|
||||
const handleModalClose = (passwordChangedSuccessfully: boolean) => {
|
||||
// ... (lógica de handleModalClose existente) ...
|
||||
if (passwordChangedSuccessfully) {
|
||||
passwordChangeCompleted();
|
||||
} else {
|
||||
@@ -65,54 +63,54 @@ const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
|
||||
|
||||
const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
|
||||
setSelectedTab(newValue);
|
||||
navigate(modules[newValue].path); // Navegar a la ruta base del módulo
|
||||
navigate(modules[newValue].path);
|
||||
};
|
||||
|
||||
// Si el modal de cambio de clave forzado está activo, no mostramos la navegación principal aún.
|
||||
// El modal se superpone.
|
||||
// Determinar si el módulo actual es el de Reportes
|
||||
const isReportesModule = location.pathname.startsWith('/reportes');
|
||||
|
||||
if (showForcedPasswordChangeModal && isPasswordChangeForced) {
|
||||
// ... (lógica del modal forzado sin cambios) ...
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
|
||||
<ChangePasswordModal
|
||||
<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 y Tabs sin cambios) ... */}
|
||||
<Toolbar>
|
||||
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
||||
Sistema de Gestión - El Día
|
||||
</Typography>
|
||||
{user && <Typography sx={{ mr: 2 }}>Hola, {user.nombreCompleto}</Typography>}
|
||||
{isAuthenticated && !isPasswordChangeForced && (
|
||||
<Button
|
||||
<Button
|
||||
color="inherit"
|
||||
onClick={() => setShowForcedPasswordChangeModal(true)} // Ahora abre el modal
|
||||
>
|
||||
onClick={() => setShowForcedPasswordChangeModal(true)}
|
||||
>
|
||||
Cambiar Contraseña
|
||||
</Button>
|
||||
</Button>
|
||||
)}
|
||||
<Button color="inherit" onClick={logout}>Cerrar Sesión</Button>
|
||||
</Toolbar>
|
||||
{/* Navegación Principal por Módulos */}
|
||||
<Paper square elevation={0} > {/* Usamos Paper para un fondo consistente para los Tabs */}
|
||||
<Paper square elevation={0} >
|
||||
<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
|
||||
indicatorColor="secondary"
|
||||
textColor="inherit"
|
||||
variant="scrollable"
|
||||
scrollButtons="auto"
|
||||
aria-label="módulos principales"
|
||||
sx={{ backgroundColor: 'primary.main', color: 'white' }} // Color de fondo para los tabs
|
||||
sx={{ backgroundColor: 'primary.main', color: 'white' }}
|
||||
>
|
||||
{modules.map((module) => (
|
||||
<Tab key={module.path} label={module.label} />
|
||||
@@ -121,13 +119,15 @@ const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
|
||||
</Paper>
|
||||
</AppBar>
|
||||
|
||||
{/* Contenido del Módulo (renderizado por <Outlet /> en AppRoutes) */}
|
||||
{/* Contenido del Módulo */}
|
||||
<Box
|
||||
component="main"
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
p: 3, // Padding
|
||||
// overflowY: 'auto' // Si el contenido del módulo es muy largo
|
||||
py: isReportesModule ? 0 : 3, // Padding vertical condicional. Si es el módulo de Reportes, px es 0 si no 3
|
||||
px: isReportesModule ? 0 : 3, // Padding horizontal condicional. Si es el módulo de Reportes, px es 0 si no 3
|
||||
display: 'flex', // IMPORTANTE: Para que el hijo (ReportesIndexPage) pueda usar height: '100%'
|
||||
flexDirection: 'column' // IMPORTANTE
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
@@ -139,14 +139,11 @@ const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Modal para cambio de clave opcional (no forzado) */}
|
||||
{/* Si showForcedPasswordChangeModal es true pero isPasswordChangeForced es false,
|
||||
se mostrará aquí también. */}
|
||||
<ChangePasswordModal
|
||||
<ChangePasswordModal
|
||||
open={showForcedPasswordChangeModal}
|
||||
onClose={handleModalClose}
|
||||
isFirstLogin={isPasswordChangeForced} // Esto controla el comportamiento del modal
|
||||
/>
|
||||
isFirstLogin={isPasswordChangeForced}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user