rckrdmrd/template-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
fa4dd11b5e
template-saas/docs/05-frontend/pages/PAGE-SETTINGS.md
Adrian Flores Cortes 0ead18e28f [SPRINT-3] docs: Add page specifications and dead code analysis 
## 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>
2026-02-03 20:27:51 -06:00

4.4 KiB
Raw Blame History

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