rckrdmrd/template-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
e7767e03be
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

231 lines
6.7 KiB
Markdown
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*
Reference in New Issue View Git Blame Copy Permalink