# 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*