0ead18e28f
## ST-3.3 Documentation (3 SP) - Add 11 page specification files documenting 25 pages - Create docs/05-frontend/pages/ directory - Specs: Goals, MLM, Portfolio, RBAC, Notifications, Analytics, Audit, Storage, Webhooks, Settings - Add _INDEX.md with complete listing ## ST-3.4 Dead Code Analysis (1 SP) - Analyze usePortfolio hook usage (18/21 functions used) - Document components ready for future use - Decision: Keep all code as preparation for features - Create DEAD-CODE-REPORT.md ## Frontend Submodule - WCAG improvements (11 files) - 160 unit tests (8 new test files) Sprint 3 (P2) completed: 14 SP Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
180 lines
4.4 KiB
Markdown
180 lines
4.4 KiB
Markdown
# Settings Pages Specification
|
|
|
|
**Modulo:** settings
|
|
**Ultima actualizacion:** 2026-02-03
|
|
**Total Paginas:** 4
|
|
|
|
---
|
|
|
|
## 1. SettingsPage (Container)
|
|
|
|
**Ruta:** `/dashboard/settings`
|
|
**Archivo:** `src/pages/settings/SettingsPage.tsx`
|
|
|
|
### Descripcion
|
|
Pagina contenedora de configuracion con navegacion por tabs. Agrupa las diferentes secciones de configuracion del usuario.
|
|
|
|
### Componentes Utilizados
|
|
- Tabs Navigation - Navegacion entre secciones
|
|
- Tab Content - Contenido dinamico segun tab
|
|
|
|
### Hooks Utilizados
|
|
- `useAuth()` - Estado de autenticacion
|
|
- `useCurrentUser()` - Datos del usuario actual
|
|
|
|
### Tabs Disponibles
|
|
|
|
| Tab | Componente | Descripcion |
|
|
|-----|------------|-------------|
|
|
| General | GeneralSettings | Perfil del usuario |
|
|
| Notifications | NotificationSettings | Preferencias de notificaciones |
|
|
| Security | SecuritySettings | Password y sesiones |
|
|
| AI | AISettings | Configuracion de IA |
|
|
|
|
### Acciones del Usuario
|
|
| Accion | Resultado |
|
|
|--------|-----------|
|
|
| Click en tab | Cambia seccion |
|
|
|
|
### Permisos Requeridos
|
|
- Usuario autenticado
|
|
|
|
---
|
|
|
|
## 2. GeneralSettings
|
|
|
|
**Archivo:** `src/pages/settings/GeneralSettings.tsx`
|
|
|
|
### Descripcion
|
|
Configuracion del perfil del usuario. Permite editar nombre y avatar.
|
|
|
|
### Componentes Utilizados
|
|
- Profile Form - Formulario de perfil
|
|
- Avatar Upload - Subir/cambiar avatar
|
|
|
|
### Hooks Utilizados
|
|
- `useCurrentUser()` - Datos actuales
|
|
- `useUpdateProfile()` - Actualiza perfil
|
|
- `useForm()` - Manejo de formulario
|
|
|
|
### Campos del Formulario
|
|
|
|
| Campo | Tipo | Validacion | Editable |
|
|
|-------|------|------------|----------|
|
|
| First name | text | Opcional | Si |
|
|
| Last name | text | Opcional | Si |
|
|
| Email | email | Requerido | No (read-only) |
|
|
| Avatar | file | Image only | Si |
|
|
|
|
### Estados
|
|
- Loading: Skeleton del formulario
|
|
- Success: Formulario con datos
|
|
- Saving: Boton disabled + spinner
|
|
|
|
### Acciones del Usuario
|
|
| Accion | Resultado |
|
|
|--------|-----------|
|
|
| Editar campos | Habilita boton guardar |
|
|
| Click avatar | Abre file picker |
|
|
| Submit | Guarda cambios |
|
|
|
|
---
|
|
|
|
## 3. NotificationSettings
|
|
|
|
**Archivo:** `src/pages/settings/NotificationSettings.tsx`
|
|
|
|
### Descripcion
|
|
Preferencias de notificaciones del usuario. Configura canales y tipos de eventos.
|
|
|
|
### Componentes Utilizados
|
|
- Toggle Switches - Switches para on/off
|
|
- Event Checkboxes - Seleccion de eventos
|
|
|
|
### Hooks Utilizados
|
|
- `useNotificationPreferences()` - Preferencias actuales
|
|
- `useUpdatePreferences()` - Actualiza preferencias
|
|
|
|
### Configuraciones Disponibles
|
|
|
|
| Categoria | Opciones |
|
|
|-----------|----------|
|
|
| Canales | Email, Push, In-app |
|
|
| Eventos | Billing, Security, Updates, Marketing |
|
|
|
|
### Estados
|
|
- Loading: Skeletons de toggles
|
|
- Success: Toggles con estado actual
|
|
- Saving: Toggle disabled momentaneamente
|
|
|
|
### Acciones del Usuario
|
|
| Accion | Resultado |
|
|
|--------|-----------|
|
|
| Toggle canal | Activa/desactiva canal |
|
|
| Toggle evento | Activa/desactiva evento |
|
|
|
|
---
|
|
|
|
## 4. SecuritySettings
|
|
|
|
**Archivo:** `src/pages/settings/SecuritySettings.tsx`
|
|
|
|
### Descripcion
|
|
Configuracion de seguridad de la cuenta. Permite cambiar password y ver sesiones activas.
|
|
|
|
### Componentes Utilizados
|
|
- Password Form - Formulario de cambio de password
|
|
- Sessions List - Lista de sesiones activas
|
|
|
|
### Hooks Utilizados
|
|
- `useAuth()` - Operaciones de auth
|
|
- `useChangePassword()` - Cambia password
|
|
- `useSessions()` - Lista sesiones
|
|
- `useRevokeSession()` - Cierra sesion
|
|
|
|
### Secciones
|
|
|
|
#### Cambiar Password
|
|
|
|
| Campo | Tipo | Validacion |
|
|
|-------|------|------------|
|
|
| Current password | password | Requerido |
|
|
| New password | password | Min 8 chars, complexity |
|
|
| Confirm password | password | Debe coincidir |
|
|
|
|
#### Sesiones Activas
|
|
|
|
| Info | Descripcion |
|
|
|------|-------------|
|
|
| Device | Tipo de dispositivo |
|
|
| Browser | Navegador |
|
|
| IP | Direccion IP |
|
|
| Location | Ubicacion aproximada |
|
|
| Last active | Ultima actividad |
|
|
| Current | Si es la sesion actual |
|
|
|
|
### Estados
|
|
- Loading: Spinner en secciones
|
|
- Success: Formulario y lista
|
|
- Password Changed: Toast de exito
|
|
- Session Revoked: Toast de exito
|
|
|
|
### Acciones del Usuario
|
|
| Accion | Resultado |
|
|
|--------|-----------|
|
|
| Submit password form | Cambia password |
|
|
| Click "Revoke" en sesion | Cierra sesion remota |
|
|
| Click "Revoke all" | Cierra todas menos actual |
|
|
|
|
### Permisos Requeridos
|
|
- Usuario autenticado
|
|
|
|
### Notas
|
|
- La sesion actual no puede revocarse desde aqui
|
|
- El cambio de password cierra otras sesiones
|
|
- MFA esta planificado pero no implementado
|
|
|
|
---
|
|
|
|
*Documentacion generada - Template SaaS - 2026-02-03*
|