import React, { useState } from 'react'; import { Link, useLocation, useNavigate } from 'react-router-dom'; import { useUser } from '../context/UserContext'; export default function Sidebar() { // Leer si el usuario es importador desde localStorage const isImportador = typeof window !== 'undefined' && localStorage.getItem('user_is_importador') === 'true'; const [isCollapsed, setIsCollapsed] = useState(false); 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'); }; // El usuario y loading ahora vienen del contexto global // Definir todas las secciones const allMenuSections = [ { title: 'Organización', items: [ { name: 'Home', path: '/admin', icon: ( ) }, { name: 'Mi Organización', path: '/organization', icon: ( ) } ] }, { title: 'Servicios', items: [ { name: 'Procesos', path: '/procesos', icon: ( ) } ] }, { title: 'Documentación', items: [ { name: 'Reportes', path: '/reports', icon: ( ) }, { name: 'Expedientes', path: '/expedientes', icon: ( ) }, { name: 'Documentos', path: '/documents', icon: ( ) } ] }, // Nueva sección Tableros { title: 'Tableros', items: [ { name: 'Uso de Almacenamiento', path: '/tablero/almacenamiento', icon: ( ) } ] }, { title: 'Acceso a Usuarios', items: [ ...( isImportador ? [] : [ { name: 'Usuarios', path: '/users', icon: ( ) } ] ), { name: 'Vucem', path: '/vucem', icon: ( ) } ] } ]; // Filtrar secciones según si es importador // 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 Acceso a Usuarios, no filtrar la sección, solo los items ya están condicionados arriba if (section.title === 'Tableros' && isImportador) { return null; } return section; }) .filter(Boolean); return (
{/* Header - Logo y colapsar */}
{!isCollapsed && (
{/* Logo de la organización */}

EFC Dashboard

)}
{/* 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 */}
)}
); }