Antoni Nuñez Romeu
73 lines
2.7 KiB
Markdown
73 lines
2.7 KiB
Markdown
# 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
|
|
1. El botón solo debe aparecer cuando el usuario tiene `is_admin: true`
|
|
2. El botón debe seguir el mismo estilo que los otros elementos del menú del perfil
|
|
3. Al hacer clic, debe navegar a la vista de administración existente
|
|
4. 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
|
|
1. **Renderizado condicional:**
|
|
```jsx
|
|
{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>
|
|
)}
|
|
```
|
|
|
|
2. **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
|
|
1. ✅ Botón visible solo para usuarios admin
|
|
2. ✅ Botón no visible para usuarios normales
|
|
3. ✅ Estilo consistente con otros elementos del menú
|
|
4. ✅ Al hacer clic, navega a la vista de administración
|
|
5. ✅ 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 |