Continuación de CRUDs e inicio de Reportes.

2025-05-27 11:21:00 -03:00
parent 3c1fe15b1f
commit 298bc0d094
61 changed files with 41554 additions and 33 deletions
--- a/Frontend/src/pages/Reportes/ReportesIndexPage.tsx
+++ b/Frontend/src/pages/Reportes/ReportesIndexPage.tsx
@@ -0,0 +1,91 @@
+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;