import React, { useState, useEffect } from 'react'; import { getCurrentUser } from '../api/users.ts'; const Settings = () => { const [activeTab, setActiveTab] = useState('profile'); const [currentUser, setCurrentUser] = useState(null); const [loading, setLoading] = useState(true); // Cargar información del usuario al montar el componente useEffect(() => { const loadUserData = async () => { try { const token = localStorage.getItem('access'); if (token) { const userData = await getCurrentUser(token); setCurrentUser(userData); } } catch (error) { console.error('Error al cargar datos del usuario:', error); } finally { setLoading(false); } }; loadUserData(); }, []); // Solo mostrar tabs permitidas si es importador const isImportador = typeof window !== 'undefined' && localStorage.getItem('user_is_importador') === 'true'; const tabs = [ { id: 'profile', name: 'Perfil', icon: 'user' }, { id: 'organization', name: 'Organización', icon: 'building' }, { id: 'security', name: 'Seguridad', icon: 'shield' }, { id: 'notifications', name: 'Notificaciones', icon: 'bell' } ].filter(tab => isImportador ? tab.id === 'profile' || tab.id === 'security' || tab.id === 'notifications' : true ); const getTabIcon = (iconType) => { const icons = { user: ( ), building: ( ), shield: ( ), bell: ( ) }; return icons[iconType]; }; const renderProfileTab = () => (

Información Personal

{loading ? (
) : ( <> {/* Avatar y información básica */}
{currentUser?.profile_picture ? ( Avatar del usuario ) : (
)}

{currentUser ? `${currentUser.first_name} ${currentUser.last_name}` : 'Usuario'}

{currentUser?.username || 'Sin username'}

ID: {currentUser?.id || 'Sin ID'}

{/* Formulario de información */}
{currentUser?.rfc && (
)}
)}
); const renderOrganizationTab = () => (

Configuración de Organización

Gestiona la configuración relacionada con tu organización.

Próximamente

Las configuraciones de organización estarán disponibles pronto.

); const renderSecurityTab = () => (

Seguridad

Cambiar contraseña

); const renderNotificationsTab = () => (

Notificaciones

Recibir notificaciones importantes por correo electrónico

Notificar cuando se suban o actualicen documentos

Recibir actualizaciones del sistema y mantenimiento

); const renderTabContent = () => { switch (activeTab) { case 'profile': return renderProfileTab(); case 'organization': return renderOrganizationTab(); case 'security': return renderSecurityTab(); case 'notifications': return renderNotificationsTab(); default: return renderProfileTab(); } }; return (
{/* Header */}

Configuración

Gestiona tu perfil, configuración de cuenta y preferencias.

{/* Sidebar de navegación */} {/* Contenido principal */}
{renderTabContent()}
); }; export default Settings;