Diseño: Acceso al Panel de Administración

Resumen

Añadir un botón de acceso al panel de administración en la página de perfil (pestaña "Usuario") que solo sea visible para usuarios con permisos de administrador.

Objetivo

Proporcionar una forma intuitiva y consistente para que los usuarios administradores accedan al panel de administración desde la interfaz principal.

Requisitos

El botón solo debe aparecer cuando el usuario tiene is_admin: true
El botón debe seguir el mismo estilo que los otros elementos del menú del perfil
Al hacer clic, debe navegar a la vista de administración existente
No debe afectar la experiencia de usuarios no administradores

Diseño Detallado

Ubicación

Página: ProfileView (pestaña "Usuario" en BottomNav)
Sección: Dentro de .profile-menu, después de "Configuración de Texto"
Posición: Antes del botón "Cerrar Sesión"

Componente

Tipo: Botón con ícono, texto y chevron (igual que otros items del menú)
Ícono: Engranaje (⚙️) con fondo de color primario
Texto: "Panel de Administración"
Estilo: Idéntico a .profile-menu-item existente

Comportamiento

Renderizado condicional:

{currentUser?.is_admin && (
  <button className="profile-menu-item" onClick={onAdminClick}>
    <div className="menu-item-icon menu-item-icon--primary">
      <svg>...</svg>
    </div>
    <span className="menu-item-label">Panel de Administración</span>
    <svg className="menu-item-chevron">...</svg>
  </button>
)}

Navegación:
- Recibir función onAdminClick como prop
- En App.jsx, implementar handleAdminClick que cambie screen a 'admin'

Cambios en Archivos

1. `frontend/src/views/ProfileView.jsx`

Añadir prop onAdminClick
Renderizar botón condicionalmente basado en currentUser?.is_admin

2. `frontend/src/App.jsx`

Añadir función handleAdminClick que establezca screen en 'admin'
Pasar onAdminClick={handleAdminClick} a ProfileView

Estilos

No se requieren cambios en CSS - se reutilizan las clases existentes:

.profile-menu-item
.menu-item-icon--primary
.menu-item-label
.menu-item-chevron

Criterios de Aceptación

✅ Botón visible solo para usuarios admin
✅ Botón no visible para usuarios normales
✅ Estilo consistente con otros elementos del menú
✅ Al hacer clic, navega a la vista de administración
✅ No se muestra en dispositivos móviles si el usuario no es admin

Impacto

Archivos modificados: 2 (ProfileView.jsx, App.jsx)
Complejidad: Baja
Riesgo: Mínimo - solo añade un elemento condicional

2.7 KiB Raw Blame History