91 lines
3.5 KiB
TypeScript
91 lines
3.5 KiB
TypeScript
|
import React, { useState, useEffect } from 'react';
|
||
|
|
import { Box, Tabs, Tab, Paper, Typography } from '@mui/material';
|
||
|
|
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
|
||
|
|
|
||
|
|
const reportesSubModules = [
|
||
|
|
{ label: 'Existencia de Papel', path: 'existencia-papel' },
|
||
|
|
// { label: 'Consumo Bobinas Mensual', path: 'consumo-bobinas-mensual' }, // Ejemplo
|
||
|
|
// ... agregar otros reportes aquí a medida que se implementen
|
||
|
|
];
|
||
|
|
|
||
|
|
const ReportesIndexPage: React.FC = () => {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const location = useLocation();
|
||
|
|
const [selectedSubTab, setSelectedSubTab] = useState<number | false>(false);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const currentBasePath = '/reportes';
|
||
|
|
// Extrae la parte de la ruta que sigue a '/reportes/'
|
||
|
|
const subPathSegment = location.pathname.startsWith(currentBasePath + '/')
|
||
|
|
? location.pathname.substring(currentBasePath.length + 1).split('/')[0] // Toma solo el primer segmento
|
||
|
|
: undefined;
|
||
|
|
|
||
|
|
let activeTabIndex = -1;
|
||
|
|
|
||
|
|
if (subPathSegment) {
|
||
|
|
activeTabIndex = reportesSubModules.findIndex(
|
||
|
|
(subModule) => subModule.path === subPathSegment
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (activeTabIndex !== -1) {
|
||
|
|
setSelectedSubTab(activeTabIndex);
|
||
|
|
} else {
|
||
|
|
// Si estamos exactamente en '/reportes' y hay sub-módulos, navegar al primero.
|
||
|
|
if (location.pathname === currentBasePath && reportesSubModules.length > 0) {
|
||
|
|
navigate(reportesSubModules[0].path, { replace: true }); // Navega a la sub-ruta
|
||
|
|
// setSelectedSubTab(0); // Esto se manejará en la siguiente ejecución del useEffect debido al cambio de ruta
|
||
|
|
} else {
|
||
|
|
setSelectedSubTab(false); // Ninguna sub-ruta activa o conocida, o no hay sub-módulos
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, [location.pathname, navigate]); // Solo depende de location.pathname y navigate
|
||
|
|
|
||
|
|
const handleSubTabChange = (_event: React.SyntheticEvent, newValue: number) => {
|
||
|
|
// No es necesario setSelectedSubTab aquí directamente, el useEffect lo manejará.
|
||
|
|
navigate(reportesSubModules[newValue].path);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Si no hay sub-módulos definidos, podría ser un estado inicial
|
||
|
|
if (reportesSubModules.length === 0) {
|
||
|
|
return (
|
||
|
|
<Box sx={{ p: 2 }}>
|
||
|
|
<Typography variant="h5" gutterBottom>Módulo de Reportes</Typography>
|
||
|
|
<Typography>No hay reportes configurados.</Typography>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box>
|
||
|
|
<Typography variant="h5" gutterBottom>
|
||
|
|
Módulo de Reportes
|
||
|
|
</Typography>
|
||
|
|
<Paper square elevation={1}>
|
||
|
|
<Tabs
|
||
|
|
value={selectedSubTab} // 'false' es un valor válido para Tabs si ninguna pestaña está seleccionada
|
||
|
|
onChange={handleSubTabChange}
|
||
|
|
indicatorColor="primary"
|
||
|
|
textColor="primary"
|
||
|
|
variant="scrollable"
|
||
|
|
scrollButtons="auto"
|
||
|
|
aria-label="sub-módulos de reportes"
|
||
|
|
>
|
||
|
|
{reportesSubModules.map((subModule) => (
|
||
|
|
<Tab key={subModule.path} label={subModule.label} />
|
||
|
|
))}
|
||
|
|
</Tabs>
|
||
|
|
</Paper>
|
||
|
|
<Box sx={{ pt: 2 }}>
|
||
|
|
{/* Outlet renderizará ReporteExistenciaPapelPage u otros
|
||
|
|
Solo renderiza el Outlet si hay una pestaña seleccionada VÁLIDA.
|
||
|
|
Si selectedSubTab es 'false' (porque ninguna ruta coincide con los sub-módulos),
|
||
|
|
se muestra el mensaje.
|
||
|
|
*/}
|
||
|
|
{selectedSubTab !== false ? <Outlet /> : <Typography sx={{p:2}}>Seleccione un reporte del menú lateral o de las pestañas.</Typography>}
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ReportesIndexPage;
|