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

6.8 KiB
Raw 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