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-GOALS.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

6.7 KiB
Raw Blame History

Goals Pages Specification

Modulo: goals Ultima actualizacion: 2026-02-03 Total Paginas: 5

1. GoalsPage (Dashboard)

Ruta: /dashboard/goals Archivo: src/pages/dashboard/goals/GoalsPage.tsx

Descripcion

Dashboard principal del modulo de metas. Muestra un resumen de las metas del usuario y de la organizacion, con metricas clave y accesos rapidos.

Componentes Utilizados

  • Summary Cards (custom) - Tarjetas de resumen con iconos
  • Goals List - Listado de metas activas
  • Top Performers - Ranking de usuarios
  • Quick Actions - Enlaces rapidos a otras paginas

Hooks Utilizados

  • useGoalDefinitions() - Obtiene definiciones de metas activas
  • useMyGoalsSummary() - Obtiene resumen de metas del usuario
  • useGoalCompletionReport() - Obtiene reporte de completitud general
  • useGoalUserReport() - Obtiene ranking de usuarios

Funcionalidades

  1. Mostrar metricas personales (activas, logradas, en riesgo, progreso promedio)
  2. Mostrar overview de la organizacion
  3. Listar metas activas con estado y asignados
  4. Mostrar top 5 performers
  5. Accesos rapidos a otras secciones

Estados

  • Loading: Spinner centrado
  • Success: Muestra dashboard completo
  • Empty: Mensajes individuales por seccion

Acciones del Usuario

Accion Resultado
Click en meta Navega a detalle
Click en Quick Action Navega a seccion

Permisos Requeridos

  • Usuario autenticado

2. DefinitionsPage

Ruta: /dashboard/goals/definitions Archivo: src/pages/dashboard/goals/DefinitionsPage.tsx

Descripcion

Listado y gestion de definiciones de metas. Permite crear, editar, duplicar y eliminar definiciones de metas.

Componentes Utilizados

  • Filters Panel - Filtros por status, periodo, categoria
  • Definitions Table - Tabla con paginacion
  • Status Badge - Badges de estado con color

Hooks Utilizados

  • useGoalDefinitions(filters) - Lista definiciones con filtros
  • useDeleteGoalDefinition() - Elimina definicion
  • useUpdateGoalStatus() - Cambia estado de definicion
  • useDuplicateGoalDefinition() - Duplica definicion

Funcionalidades

  1. Filtrar por status (draft, active, paused, completed, cancelled)
  2. Filtrar por periodo (daily, weekly, monthly, quarterly, yearly)
  3. Filtrar por categoria
  4. Buscar por nombre
  5. Cambiar estado inline via select
  6. Ver, editar, duplicar, eliminar desde tabla

Estados

  • Loading: Spinner centrado
  • Error: Mensaje de error
  • Empty: Icono + mensaje + CTA para crear
  • Success: Tabla con definiciones

Acciones del Usuario

Accion Resultado
Click "+ New Definition" Navega a formulario
Cambiar status select Actualiza estado
Click "View" Navega a detalle
Click "Edit" Navega a edicion
Click "Duplicate" Crea copia
Click "Delete" Confirm + elimina

Permisos Requeridos

  • goals:read - Ver listado
  • goals:write - Crear/editar/duplicar
  • goals:delete - Eliminar

3. MyGoalsPage

Ruta: /dashboard/goals/my-goals Archivo: src/pages/dashboard/goals/MyGoalsPage.tsx

Descripcion

Vista personal de metas asignadas al usuario actual. Permite ver progreso y actualizar avance manualmente.

Componentes Utilizados

  • Summary Cards - Resumen de estadisticas personales
  • Goal Cards - Tarjetas de meta con barra de progreso
  • Progress Form - Formulario inline para actualizar progreso

Hooks Utilizados

  • useMyGoals() - Lista metas asignadas al usuario
  • useMyGoalsSummary() - Resumen de estadisticas
  • useUpdateMyGoalProgress() - Actualiza progreso de meta

Funcionalidades

  1. Ver resumen personal (total, activas, logradas, en riesgo, progreso promedio)
  2. Ver tarjetas de cada meta con progreso visual
  3. Ver dias restantes por meta
  4. Actualizar progreso manualmente con notas
  5. Navegar a detalle de asignacion

Estados

  • Loading: Spinner centrado
  • Error: Mensaje de error
  • Empty: Mensaje "No goals assigned" + link
  • Success: Lista de tarjetas de metas

Acciones del Usuario

Accion Resultado
Click "Update Progress" Abre formulario inline
Submit progreso Guarda nuevo valor
Click "Cancel" Cierra formulario
Click "View Details" Navega a detalle

Permisos Requeridos

  • Usuario autenticado

4. ReportsPage

Ruta: /dashboard/goals/reports Archivo: src/pages/dashboard/goals/ReportsPage.tsx

Descripcion

Reportes detallados de metas con estadisticas de completitud, rendimiento por usuario y exportacion CSV.

Componentes Utilizados

  • Date Range Filter - Filtro de fechas
  • Summary Cards - KPIs principales
  • Status Distribution Bars - Barras de progreso por estado
  • User Performance Table - Tabla de rendimiento
  • Active Goals List - Lista de metas activas

Hooks Utilizados

  • useGoalCompletionReport(startDate, endDate) - Reporte de completitud
  • useGoalUserReport() - Reporte por usuario
  • useGoalDefinitions({status: 'active'}) - Metas activas

Funcionalidades

  1. Filtrar por rango de fechas
  2. Ver KPIs: total, logradas, tasa completitud, progreso promedio
  3. Ver distribucion por estado (achieved, active, failed)
  4. Ver usuarios con logros y top performer
  5. Ver tabla de rendimiento por usuario con ranking
  6. Exportar a CSV (summary y user report)

Estados

  • Loading: Spinner centrado
  • Success: Dashboard de reportes
  • Empty: Mensajes por seccion

Acciones del Usuario

Accion Resultado
Seleccionar fecha inicio Filtra datos
Seleccionar fecha fin Filtra datos
Click "Clear Filters" Limpia filtros
Click "Export Summary" Descarga CSV summary
Click "Export User Report" Descarga CSV usuarios
Click "View" en meta Navega a detalle

Permisos Requeridos

  • goals:read - Ver reportes
  • reports:export - Exportar CSV

5. AssignmentsPage

Ruta: /dashboard/goals/assignments Archivo: src/pages/dashboard/goals/AssignmentsPage.tsx

Descripcion

Gestion de asignaciones de metas a usuarios. Permite ver, filtrar y gestionar asignaciones.

Componentes Utilizados

  • Filters Panel - Filtros multiples
  • Assignments Table - Tabla con paginacion
  • Status Badge - Badges de estado

Hooks Utilizados

  • useGoalAssignments(filters) - Lista asignaciones
  • useDeleteAssignment() - Elimina asignacion

Funcionalidades

  1. Filtrar por definicion, usuario, estado
  2. Ver tabla con progreso visual
  3. Navegar a detalle de asignacion

Estados

  • Loading: Spinner centrado
  • Error: Mensaje de error
  • Empty: Mensaje + CTA
  • Success: Tabla de asignaciones

Permisos Requeridos

  • goals:read - Ver listado
  • goals:assign - Crear asignaciones
  • goals:delete - Eliminar asignaciones

Documentacion generada - Template SaaS - 2026-02-03