import React, { useState, useEffect } from 'react'; import { Link, useLocation, useNavigate } from 'react-router-dom'; import { useUser } from '../context/UserContext'; export default function Sidebar({ isMobileOpen, onMobileClose }) { // Leer si el usuario es importador desde localStorage const isImportador = typeof window !== 'undefined' && localStorage.getItem('user_is_importador') === 'true'; // Leer grupos del usuario desde localStorage let userGroups = []; if (typeof window !== 'undefined') { try { userGroups = JSON.parse(localStorage.getItem('user_groups') || '[]'); } catch { userGroups = []; } } // Si los grupos son exactamente [3,5] const isGroup35 = Array.isArray(userGroups) && userGroups.length === 2 && userGroups.includes(3) && userGroups.includes(5); // Leer DEBUG_MODE desde variables de entorno const isDebugMode = import.meta.env.VITE_DEBUG_MODE === 'true'; // Estados para responsividad const [isCollapsed, setIsCollapsed] = useState(false); const [internalMobileOpen, setInternalMobileOpen] = useState(false); // Usar estado interno si no se pasan props const mobileOpen = isMobileOpen !== undefined ? isMobileOpen : internalMobileOpen; const handleMobileClose = onMobileClose || (() => setInternalMobileOpen(false)); const handleMobileOpen = () => setInternalMobileOpen(true); const location = useLocation(); const navigate = useNavigate(); const { user: currentUser, loading } = useUser(); const handleLogout = () => { localStorage.removeItem('access'); localStorage.removeItem('refresh'); window.dispatchEvent(new CustomEvent('authStateChanged')); navigate('/login'); }; // Cerrar menú móvil cuando se navega o cuando la pantalla es grande useEffect(() => { const handleResize = () => { if (window.innerWidth >= 1024) { // lg breakpoint handleMobileClose(); } }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); // Cerrar menú móvil cuando cambia la ubicación useEffect(() => { handleMobileClose(); }, [location.pathname]); // El usuario y loading ahora vienen del contexto global // Definir todas las secciones const allMenuSections = [ { title: 'Organización', items: [ { name: 'Home', path: '/admin', icon: ( ) }, // Ocultar 'Mi Organización' si es importador o si esGroup35 ...( (!isImportador && !isGroup35) ? [ { name: 'Mi Organización', path: '/organization', icon: ( ) } ] : [] ) ] }, { title: 'Servicios', items: [ { name: 'Procesos', path: '/procesos', icon: ( ) }, { name: 'Auditor', path: '/auditor', icon: ( ) } ] }, { title: 'Documentación', items: [ // Mostrar Reportes siempre { name: 'Reportes', path: '/reports', icon: ( ) }, { name: 'Expedientes', path: '/expedientes', icon: ( ) }, { name: 'Documentos', path: '/documents', icon: ( ) }, { name: 'Datastage', path: '/datastage', icon: ( ), onClick: () => navigate('/datastage') } ] }, // Nueva sección Tableros - Solo mostrar si DEBUG_MODE es true ...( (isDebugMode && !isGroup35) ? [ { title: 'Tableros', items: [ { name: 'Resumen de cumplimiento', path: '/tablero/cumplimiento', icon: ( ) } ] } ] : [] ), ...( isGroup35 ? [] : [ { title: 'Acceso a Usuarios', items: [ // Botón Importadores como primer elemento { name: 'Importadores', path: '/importers', icon: ( ) }, ...( isImportador ? [] : [ { name: 'Usuarios', path: '/users', icon: ( ) } ] ), { name: 'Ventanilla Única', path: '/vucem', icon: ( ) } ] } ] ) ]; // Filtrar secciones según si es importador y modo debug // Modificar items según si es importador const menuSections = allMenuSections .map(section => { if (section.title === 'Organización') { return { ...section, items: section.items.filter(item => !(isImportador && item.name === 'Mi Organización')) }; } // Para Tableros, filtrar la sección si es importador o si no está en modo debug if (section.title === 'Tableros' && (isImportador || !isDebugMode)) { return null; } return section; }) .filter(Boolean); return ( <> {/* Botón flotante para abrir menú en móvil - solo cuando se usa standalone */} {!mobileOpen && isMobileOpen === undefined && ( )} {/* Overlay para móviles */} {mobileOpen && (
)} {/* Sidebar */}
{/* Header - Logo y colapsar */}
{!isCollapsed && (
{/* Logo de la organización */}

EFC Dashboard

)} {/* Botones de control */}
{/* Botón cerrar en móvil */} {/* Botón colapsar en desktop */}
{/* Navigation */} {/* Configuración */}
{!isCollapsed && ( Configuración )}
{/* Footer - Perfil del Usuario */}
{!isCollapsed ? (
{/* Información del usuario */}
{currentUser?.profile_picture ? ( Avatar del usuario ) : (
)}
{loading ? (
) : currentUser ? ( <>

{currentUser.first_name} {currentUser.last_name}

{currentUser.username}

) : ( <>

Usuario

Sin datos

)} {/* Debug temporal */} {process.env.NODE_ENV === 'development' && (
Debug: {loading ? 'Cargando...' : currentUser ? 'Datos OK' : 'Sin datos'}
)}
{/* Botón de logout más pequeño */}
) : (
{/* Avatar pequeño */} {currentUser?.profile_picture ? ( Avatar del usuario ) : (
)} {/* Botón de logout compacto */}
)}
); } // Hook personalizado para manejar el menú móvil desde otros componentes export function useMobileSidebar() { const [isOpen, setIsOpen] = useState(false); const toggle = () => setIsOpen(prev => !prev); const close = () => setIsOpen(false); return { isOpen, toggle, close }; } // Componente botón para abrir menú móvil export function MobileMenuButton({ onClick }) { return ( ); }