rckrdmrd/template-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
template-saas/docs/05-frontend/pages/PAGE-MLM.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

234 lines
6.8 KiB
Markdown
Raw Permalink Blame History

# MLM Pages Specification
**Modulo:** mlm
**Ultima actualizacion:** 2026-02-03
**Total Paginas:** 5
---
## 1. MLMPage (Dashboard)
**Ruta:** `/dashboard/mlm`
**Archivo:** `src/pages/dashboard/mlm/MLMPage.tsx`
### Descripcion
Dashboard principal del modulo MLM (Marketing Multinivel). Muestra resumen de red, rango actual, progreso hacia siguiente rango y estructuras activas.
### Componentes Utilizados
- Summary Cards - Tarjetas con metricas clave
- Rank Display - Muestra rango actual con badge visual
- Next Rank Progress - Barras de progreso hacia siguiente rango
- Volume Summary - Resumen de volumenes
- Active Structures Grid - Grid de estructuras activas
- Quick Actions - Enlaces rapidos
### Hooks Utilizados
- `useMyDashboard()` - Obtiene dashboard personal MLM
- `useStructures({isActive: true})` - Lista estructuras activas
### Funcionalidades
1. Ver metricas principales (downline total, referidos directos, volumen grupo, ganancias)
2. Ver rango actual con nivel y badge
3. Ver progreso hacia siguiente rango (PV, GV, referidos requeridos)
4. Ver resumen de volumenes (personal, grupo, downline activos)
5. Ver estructuras MLM activas
6. Accesos rapidos a otras secciones
### Estados
- Loading: Spinner centrado
- Success: Dashboard completo
- No Rank: Mensaje "No rank assigned yet"
- Top Rank: Mensaje "You've reached the highest rank!"
### Acciones del Usuario
| Accion | Resultado |
|--------|-----------|
| Click en estructura | Navega a detalle |
| Click Quick Action | Navega a seccion |
### Permisos Requeridos
- Usuario autenticado
---
## 2. StructuresPage
**Ruta:** `/dashboard/mlm/structures`
**Archivo:** `src/pages/dashboard/mlm/StructuresPage.tsx`
### Descripcion
Listado y gestion de estructuras MLM. Permite crear, ver y eliminar estructuras con diferentes tipos (unilevel, binary, matrix, hybrid).
### Componentes Utilizados
- Filters Panel - Filtros por tipo y estado
- Structure Cards Grid - Grid de tarjetas de estructura
- Type Badge - Badge con color segun tipo
### Hooks Utilizados
- `useStructures(filters)` - Lista estructuras con filtros
- `useDeleteStructure()` - Elimina estructura
### Funcionalidades
1. Filtrar por tipo (unilevel, binary, matrix, hybrid)
2. Filtrar por estado (activo/inactivo)
3. Buscar por nombre
4. Ver tarjetas con configuracion (max depth, max width, commission levels)
5. Ver estado activo/inactivo
6. Eliminar estructura con confirmacion
### Estados
- Loading: Spinner centrado
- Error: Mensaje de error
- Empty: Icono + mensaje + CTA
- Success: Grid de tarjetas
### Acciones del Usuario
| Accion | Resultado |
|--------|-----------|
| Click "+ Add Structure" | Navega a formulario |
| Cambiar filtro tipo | Filtra estructuras |
| Cambiar filtro estado | Filtra estructuras |
| Buscar | Filtra por nombre |
| Click "View Details" | Navega a detalle |
| Click "Delete" | Confirm + elimina |
### Permisos Requeridos
- `mlm:read` - Ver listado
- `mlm:write` - Crear/editar
- `mlm:delete` - Eliminar
---
## 3. MyNetworkPage
**Ruta:** `/dashboard/mlm/my-network`
**Archivo:** `src/pages/dashboard/mlm/MyNetworkPage.tsx`
### Descripcion
Vista de la red personal del usuario. Muestra arbol jerarquico de downline, estadisticas y permite generar enlaces de invitacion.
### Componentes Utilizados
- Invite Link Banner - Banner con link de invitacion
- Summary Cards - Metricas de red
- My Rank Card - Tarjeta de rango actual
- Volume Summary Card - Resumen de volumenes
- Network Tree - Arbol de red con nodos expandibles
- Quick Actions - Enlaces rapidos
### Hooks Utilizados
- `useMyDashboard()` - Datos del dashboard
- `useMyNetwork(maxDepth)` - Arbol de red con profundidad configurable
- `useMyRank()` - Informacion de rango
- `useGenerateInviteLink()` - Genera link de invitacion
### Funcionalidades
1. Generar link de invitacion unico
2. Copiar link al clipboard
3. Ver metricas (downline total, referidos directos, activos, volumen grupo)
4. Ver rango actual con color y nivel
5. Ver volumenes (personal, grupo, ganancias)
6. Ver arbol de red con profundidad configurable (1-10 niveles)
7. Ver status de cada nodo (pending, active, inactive, suspended)
### Estados
- Loading: Spinner centrado
- Success: Dashboard con arbol
- Empty Network: Mensaje "You're not part of any MLM structure"
- Invite Generated: Muestra banner con link
### Acciones del Usuario
| Accion | Resultado |
|--------|-----------|
| Click "Generate Invite Link" | Genera y muestra link |
| Click "Copy" | Copia link al clipboard |
| Cambiar selector depth | Recarga arbol con nueva profundidad |
| Click Quick Action | Navega a seccion |
### Permisos Requeridos
- Usuario autenticado
---
## 4. RanksPage
**Ruta:** `/dashboard/mlm/ranks`
**Archivo:** `src/pages/dashboard/mlm/RanksPage.tsx`
### Descripcion
Gestion de rangos MLM. Permite ver, crear, editar y eliminar rangos con sus requisitos y bonificaciones.
### Componentes Utilizados
- Filters Panel - Filtro por estructura y estado
- Ranks Table - Tabla con nivel, badge, requisitos
- Level Badge - Badge circular con color y nivel
- Requirements Display - Muestra PV, GV, referidos
### Hooks Utilizados
- `useRanks(filters)` - Lista rangos con filtros
- `useStructures({isActive: true})` - Estructuras para filtro
- `useDeleteRank()` - Elimina rango
- `useEvaluateRanks(structureId)` - Evalua rangos de toda la estructura
### Funcionalidades
1. Filtrar por estructura
2. Filtrar por estado (activo/inactivo)
3. Ver tabla con nivel, nombre, requisitos, bonus rate, estado
4. Evaluar rangos de todos los miembros de una estructura
5. Editar y eliminar rangos
### Estados
- Loading: Spinner centrado
- Error: Mensaje de error
- Empty: Icono + mensaje + CTA
- Success: Tabla de rangos
### Acciones del Usuario
| Accion | Resultado |
|--------|-----------|
| Click "+ Add Rank" | Navega a formulario |
| Seleccionar estructura | Filtra rangos |
| Click "Evaluate All Ranks" | Evalua y actualiza rangos |
| Click "Edit" | Navega a edicion |
| Click "Delete" | Confirm + elimina |
### Permisos Requeridos
- `mlm:read` - Ver listado
- `mlm:write` - Crear/editar/evaluar
- `mlm:delete` - Eliminar
---
## 5. MyEarningsPage (MLM)
**Ruta:** `/dashboard/mlm/my-earnings`
**Archivo:** `src/pages/dashboard/mlm/MyEarningsPage.tsx`
### Descripcion
Vista de ganancias MLM del usuario. Muestra comisiones por nivel, bonos y historial.
### Componentes Utilizados
- Earnings Summary Cards - Tarjetas de resumen
- Earnings by Level Chart - Grafico por nivel
- Recent Commissions Table - Tabla de comisiones recientes
### Hooks Utilizados
- `useMyMLMEarnings()` - Ganancias MLM del usuario
### Funcionalidades
1. Ver total de ganancias
2. Ver ganancias por nivel de la red
3. Ver bonificaciones
4. Ver historial de comisiones
### Estados
- Loading: Spinner centrado
- Empty: Mensaje sin datos
- Success: Dashboard de ganancias
### Permisos Requeridos
- Usuario autenticado
---
*Documentacion generada - Template SaaS - 2026-02-03*
Reference in New Issue View Git Blame Copy Permalink