82 lines
2.9 KiB
TypeScript
82 lines
2.9 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';
|
||
|
|
import { usePermissions } from '../../hooks/usePermissions';
|
||
|
|
|
||
|
|
// Define las pestañas del módulo. Ajusta los permisos según sea necesario.
|
||
|
|
const suscripcionesSubModules = [
|
||
|
|
{ label: 'Suscriptores', path: 'suscriptores', requiredPermission: 'SU001' },
|
||
|
|
// { label: 'Facturación', path: 'facturacion', requiredPermission: 'SU005' },
|
||
|
|
// { label: 'Promociones', path: 'promociones', requiredPermission: 'SU006' },
|
||
|
|
];
|
||
|
|
|
||
|
|
const SuscripcionesIndexPage: React.FC = () => {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const location = useLocation();
|
||
|
|
const { tienePermiso, isSuperAdmin } = usePermissions();
|
||
|
|
const [selectedSubTab, setSelectedSubTab] = useState<number | false>(false);
|
||
|
|
|
||
|
|
// Filtra los sub-módulos a los que el usuario tiene acceso
|
||
|
|
const accessibleSubModules = suscripcionesSubModules.filter(
|
||
|
|
(subModule) => isSuperAdmin || tienePermiso(subModule.requiredPermission)
|
||
|
|
);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (accessibleSubModules.length === 0) {
|
||
|
|
// Si no tiene acceso a ningún submódulo, no hacemos nada.
|
||
|
|
// El enrutador principal debería manejar esto.
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const currentBasePath = '/suscripciones';
|
||
|
|
const subPath = location.pathname.startsWith(`${currentBasePath}/`)
|
||
|
|
? location.pathname.substring(currentBasePath.length + 1)
|
||
|
|
: (location.pathname === currentBasePath ? accessibleSubModules[0]?.path : undefined);
|
||
|
|
|
||
|
|
const activeTabIndex = accessibleSubModules.findIndex(
|
||
|
|
(subModule) => subModule.path === subPath
|
||
|
|
);
|
||
|
|
|
||
|
|
if (activeTabIndex !== -1) {
|
||
|
|
setSelectedSubTab(activeTabIndex);
|
||
|
|
} else if (location.pathname === currentBasePath) {
|
||
|
|
navigate(accessibleSubModules[0].path, { replace: true });
|
||
|
|
} else {
|
||
|
|
setSelectedSubTab(false);
|
||
|
|
}
|
||
|
|
}, [location.pathname, navigate, accessibleSubModules]);
|
||
|
|
|
||
|
|
const handleSubTabChange = (_event: React.SyntheticEvent, newValue: number) => {
|
||
|
|
navigate(accessibleSubModules[newValue].path);
|
||
|
|
};
|
||
|
|
|
||
|
|
if (accessibleSubModules.length === 0) {
|
||
|
|
return <Typography sx={{ p: 2 }}>No tiene permisos para acceder a este módulo.</Typography>;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box>
|
||
|
|
<Typography variant="h5" gutterBottom>Módulo de Suscripciones</Typography>
|
||
|
|
<Paper square elevation={1}>
|
||
|
|
<Tabs
|
||
|
|
value={selectedSubTab}
|
||
|
|
onChange={handleSubTabChange}
|
||
|
|
indicatorColor="primary"
|
||
|
|
textColor="primary"
|
||
|
|
variant="scrollable"
|
||
|
|
scrollButtons="auto"
|
||
|
|
aria-label="sub-módulos de suscripciones"
|
||
|
|
>
|
||
|
|
{accessibleSubModules.map((subModule) => (
|
||
|
|
<Tab key={subModule.path} label={subModule.label} />
|
||
|
|
))}
|
||
|
|
</Tabs>
|
||
|
|
</Paper>
|
||
|
|
<Box sx={{ pt: 2 }}>
|
||
|
|
<Outlet />
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SuscripcionesIndexPage;
|