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