# COMPONENTS-MASTER-MATRIX.md
## Matriz Maestra de Componentes - Trading Platform Frontend

**Proyecto:** trading-platform
**Fecha:** 2026-01-25
**Total Componentes:** 122+

---

## Tabla Maestra de Componentes

### OQI-001: Fundamentos Auth (11 componentes)

| # | Componente | Tipo | Función | Props Clave | APIs Consumidas | Multimedia | Estado |
|---|------------|------|---------|-------------|-----------------|------------|--------|
| 1 | Login.tsx | Página | Autenticación multi-método | - | POST /auth/login, POST /auth/phone/send-otp | Logos OAuth (SVG) | ✅ 100% |
| 2 | Register.tsx | Página | Registro con validación | - | POST /auth/register | - | ✅ 100% |
| 3 | ForgotPassword.tsx | Página | Reset contraseña | - | POST /auth/forgot-password | - | ✅ 100% |
| 4 | VerifyEmail.tsx | Página | Verificación email | token (query) | POST /auth/verify-email | - | ✅ 100% |
| 5 | ResetPassword.tsx | Página | Cambio contraseña | token (query) | POST /auth/reset-password | - | ✅ 100% |
| 6 | AuthCallback.tsx | Página | OAuth callback | provider (param) | POST /auth/oauth/callback | - | ✅ 100% |
| 7 | SecuritySettings.tsx | Página | Gestión sesiones + 2FA | - | GET /auth/sessions, DELETE /auth/sessions/:id | Avatares (inline) | ⚠️ 70% (2FA UI falta) |
| 8 | SocialLoginButtons | Componente | Botones OAuth (5 providers) | providers[], onSuccess | - | 5 logos SVG inline | ✅ 100% |
| 9 | PhoneLoginForm | Componente | Auth vía SMS/WhatsApp | onSuccess | POST /auth/phone/send-otp, POST /auth/phone/verify-otp | - | ✅ 100% |
| 10 | SessionsList | Componente | Lista sesiones activas | sessions[], onRevoke | DELETE /auth/sessions/:id | Device icons (SVG) | ✅ 100% |
| 11 | DeviceCard | Componente | Card dispositivo individual | session, onRevoke | - | Device type icon | ✅ 100% |

**Progreso:** 70% (2FA UI pendiente)

---

### OQI-002: Educativo (14+ componentes)

| # | Componente | Tipo | Función | Props Clave | APIs Consumidas | Multimedia | Estado |
|---|------------|------|---------|-------------|-----------------|------------|--------|
| 12 | Courses.tsx | Página | Catálogo con filtros | - | GET /education/courses, GET /education/categories | Thumbnails cursos | ✅ 100% |
| 13 | CourseDetail.tsx | Página | Detalle curso + módulos | slug (param) | GET /education/courses/:slug, GET /education/courses/:id/modules | Cover image | ✅ 100% |
| 14 | Lesson.tsx | Página | Lección con video + notas | courseSlug, lessonId | GET /education/lessons/:id, POST /education/lessons/:id/progress | **Video (streaming)** | ✅ 100% |
| 15 | Quiz.tsx | Página | Quiz con scoring | courseSlug, lessonId | GET /education/quizzes/:id, POST /education/quizzes/:id/submit | - | ✅ 100% |
| 16 | MyLearning.tsx | Página | Progreso usuario | - | GET /education/enrollments | Course thumbnails | ✅ 100% |
| 17 | Leaderboard.tsx | Página | Rankings XP | - | GET /education/leaderboard | Avatares usuarios | ✅ 100% |
| 18 | **VideoProgressPlayer** | Componente | **Player avanzado (554 líneas)** | src, bookmarks, onProgress | POST /education/lessons/:id/progress | **Video HTML5** | ✅ 100% implementado |
| 19 | CourseCard | Componente | Tarjeta visual curso | course | - | Thumbnail image | ✅ 100% |
| 20 | CourseProgressTracker | Componente | Barra progreso | progress, total | - | - | ✅ 100% |
| 21 | LessonNotes | Componente | Notas de lección | lessonId, notes | POST /api/notes (assumed) | - | ✅ 100% |
| 22 | QuizQuestion | Componente | Pregunta individual | question, onAnswer | - | - | ✅ 100% |
| 23 | AchievementBadge | Componente | Medalla gamificación | achievement | - | Badge icon/image | ✅ 100% |
| 24 | CertificatePreview | Componente | Vista previa certificado | certificate | GET /api/certificates/:id | **PDF preview** | ⚠️ 50% |
| 25 | RecommendedCourses | Componente | Sugerencias | userId | GET /education/courses (filtered) | Thumbnails | ✅ 100% |
| 26 | LearningPathVisualizer | Componente | Visualización path | path | - | SVG graph | ✅ 100% |

**Progreso:** 30% (Video upload, Live streaming, Creator UI pendientes)

---

### OQI-003: Trading Charts (37 componentes)

| # | Componente | Tipo | Función | Props Clave | APIs Consumidas | Multimedia | Estado |
|---|------------|------|---------|-------------|-----------------|------------|--------|
| 27 | Trading.tsx | Página | Dashboard complejo | - | Múltiples (20+ endpoints) | Charts real-time | ✅ 80% |
| 28 | CandlestickChart | Componente | Gráfico OHLCV | symbol, interval | GET /trading/market/klines/:symbol | **Chart canvas** | ✅ 100% |
| 29 | CandlestickChartWithML | Componente | Chart + ML overlays | symbol, signals | GET /trading/market/klines + ML APIs | **Chart + overlays** | ✅ 100% |
| 30 | TradingChart | Componente | Wrapper principal | symbol, timeframe | - | Chart | ✅ 100% |
| 31 | ChartToolbar | Componente | Controles timeframe | onTimeframeChange | - | Icons (SVG) | ✅ 100% |
| 32 | ChartDrawingToolsPanel | Componente | Herramientas dibujo | onToolSelect | - | Tool icons | ⚠️ 50% (sin persistencia) |
| 33 | IndicatorConfigPanel | Componente | Config indicadores | onApply | - | - | ⚠️ 0% (sin renderizado) |
| 34 | MLSignalsPanel | Componente | Panel señales ML | signals | GET /api/v1/signals/active | - | ✅ 100% |
| 35 | ICTAnalysisCard | Componente | Análisis ICT/SMC | analysis | POST /api/ict/:symbol | - | ✅ 100% |
| 36 | EnsembleSignalCard | Componente | Señal ensemble | signal | POST /api/ensemble/:symbol | - | ✅ 100% |
| 37 | OrderForm | Componente | Formulario orden | onSubmit | POST /trading/paper/orders | - | ✅ 100% |
| 38 | AdvancedOrderEntry | Componente | Órdenes avanzadas (OCO) | onSubmit | POST /trading/paper/orders | - | ✅ 100% |
| 39 | QuickOrderPanel | Componente | Panel órdenes rápidas | symbol | POST /trading/paper/orders | - | ✅ 100% |
| 40 | PositionsList | Componente | Lista posiciones | positions | GET /trading/paper/positions | - | ✅ 100% |
| 41 | PositionModifierDialog | Componente | Modificar SL/TP | position, onModify | PUT /trading/paper/positions/:id | - | ✅ 100% |
| 42 | LivePositionCard | Componente | Card posición | position | - | - | ✅ 100% |
| 43 | PaperTradingPanel | Componente | Panel paper trading | - | GET /trading/paper/account | - | ✅ 100% |
| 44 | OrderBookPanel | Componente | Order book real-time | symbol | GET /trading/market/order-book/:symbol | - | ⚠️ 60% (polling) |
| 45 | AlertsPanel | Componente | Gestión alertas | alerts | GET /trading/alerts, POST /trading/alerts | - | ✅ 100% |
| 46 | TradeAlertsNotificationCenter | Componente | Centro notificaciones | alerts | - | - | ✅ 100% |
| 47 | TradeExecutionHistory | Componente | Historial ejecuciones | trades | GET /trading/paper/orders | - | ✅ 100% |
| 48 | TradesHistory | Componente | Historial trades | trades | GET /trading/paper/orders | - | ✅ 100% |
| 49 | TradeJournalPanel | Componente | Diario trading | entries | POST /api/journal (assumed) | - | ✅ 100% |
| 50 | RiskMonitor | Componente | Monitor riesgo | account | GET /trading/paper/account | - | ✅ 100% |
| 51 | RiskBasedPositionSizer | Componente | Calculadora tamaño | riskPercent | - | - | ✅ 100% |
| 52 | AccountHealthDashboard | Componente | Salud cuenta | account | GET /trading/paper/account | - | ✅ 100% |
| 53 | AccountSummary | Componente | Resumen cuenta | account | GET /trading/paper/account | - | ✅ 100% |
| 54 | TradingMetricsCard | Componente | Métricas trading | metrics | - | - | ✅ 100% |
| 55 | TradingStatsPanel | Componente | Estadísticas | stats | - | - | ✅ 100% |
| 56 | WatchlistSidebar | Componente | Watchlist símbolos | symbols | GET /trading/watchlist (assumed) | - | ✅ 100% |
| 57 | WatchlistItem | Componente | Item watchlist | symbol | - | - | ✅ 100% |
| 58 | SymbolInfoPanel | Componente | Info símbolo | symbol | GET /trading/market/ticker/:symbol | - | ✅ 100% |
| 59 | AddSymbolModal | Componente | Modal agregar | onAdd | - | - | ✅ 100% |
| 60 | MT4ConnectionStatus | Componente | Estado MT4 | - | GET /api/llm/mt4/account | Device icon | ⚠️ 0% (stub) |
| 61 | MT4LiveTradesPanel | Componente | Trades MT4 real-time | - | WebSocket (ws://localhost:3082/mt4) | - | ❌ 0% (NO EXISTE) |
| 62 | MT4PositionsManager | Componente | Gestor posiciones MT4 | - | GET /api/llm/mt4/positions | - | ❌ 0% (NO EXISTE) |
| 63 | ExportButton | Componente | Exportar datos | data, format | - | - | ✅ 100% |

**Progreso:** 40% (Indicadores, Drawing tools, MT4 pendientes)

---

### OQI-004: Cuentas Inversión (10 componentes)

| # | Componente | Tipo | Función | Props Clave | APIs Consumidas | Multimedia | Estado |
|---|------------|------|---------|-------------|-----------------|------------|--------|
| 64 | Investment.tsx | Página | Overview inversión | - | GET /investment/accounts/summary | - | ✅ 100% |
| 65 | Portfolio.tsx | Página | Portafolio usuario | - | GET /investment/accounts | - | ✅ 100% |
| 66 | Products.tsx | Página | Catálogo productos | - | GET /investment/products | Product images | ✅ 100% |
| 67 | ProductDetail.tsx | Página | Detalle producto | productId | GET /investment/products/:productId | Cover image | ✅ 100% |
| 68 | AccountDetail.tsx | Página | Detalle cuenta | accountId | GET /investment/accounts/:accountId | - | ✅ 100% |
| 69 | Withdrawals.tsx | Página | Gestión retiros | - | GET /investment/accounts/:accountId/withdrawals | - | ✅ 100% |
| 70 | Transactions.tsx | Página | Historial transacciones | - | GET /investment/accounts/:accountId/transactions | - | ✅ 100% |
| 71 | Reports.tsx | Página | Reportes performance | - | GET /investment/accounts/:accountId/performance | **Charts (Recharts)** | ✅ 100% |
| 72 | DepositForm | Componente | Formulario depósito | accountId, onSuccess | POST /investment/accounts/:accountId/deposits | - | ✅ 100% |
| 73 | WithdrawForm | Componente | Formulario retiro | accountId, onSuccess | POST /investment/accounts/:accountId/withdrawals | - | ✅ 100% |

**Progreso:** 35% (Creación cuentas, Optimización pendientes)

---

### OQI-005: Pagos Stripe (15 componentes)

| # | Componente | Tipo | Función | Props Clave | APIs Consumidas | Multimedia | Estado |
|---|------------|------|---------|-------------|-----------------|------------|--------|
| 74 | Pricing.tsx | Página | Catálogo planes | - | GET /payments/plans | - | ✅ 100% |
| 75 | Billing.tsx | Página | Gestión suscripción | - | GET /payments/subscription | - | ✅ 100% |
| 76 | CheckoutSuccess.tsx | Página | Post-pago exitoso | sessionId (query) | - | Success icon | ✅ 100% |
| 77 | CheckoutCancel.tsx | Página | Pago cancelado | - | - | Cancel icon | ✅ 100% |
| 78 | PricingCard | Componente | Card plan | plan, onSelect | - | - | ✅ 100% |
| 79 | SubscriptionCard | Componente | Tarjeta suscripción | subscription | - | - | ✅ 100% |
| 80 | SubscriptionUpgradeFlow | Componente | Flujo upgrade | currentPlan, onUpgrade | POST /payments/subscription/change-plan | - | ⚠️ 50% (preview MOCK) |
| 81 | PaymentMethodForm | Componente | Agregar método | onSuccess | POST /payments/methods | - | ⚠️ 50% (sin Stripe.js) |
| 82 | PaymentMethodsList | Componente | Listar métodos | methods, onDelete | GET /payments/methods, DELETE /payments/methods/:id | Card brand icons | ✅ 100% |
| 83 | BillingInfoForm | Componente | Info facturación | onSave | PUT /payments/billing-info | - | ✅ 100% |
| 84 | CouponForm | Componente | Aplicar cupón | onApply | POST /payments/coupons/validate | - | ✅ 100% |
| 85 | WalletCard | Componente | Card billetera | balance | GET /payments/wallet | - | ✅ 100% |
| 86 | WalletDepositModal | Componente | Modal depósito | onSuccess | POST /payments/wallet/deposit | - | ✅ 100% |
| 87 | WalletWithdrawModal | Componente | Modal retiro | onSuccess | POST /payments/wallet/withdraw | - | ✅ 100% |
| 88 | InvoiceList | Componente | Listado facturas | invoices | GET /payments/invoices | - | ✅ 100% |

**Progreso:** 50% (PCI-DSS compliance, Refunds UI pendientes)

---

### OQI-006: ML Signals (12 componentes)

| # | Componente | Tipo | Función | Props Clave | APIs Consumidas | Multimedia | Estado |
|---|------------|------|---------|-------------|-----------------|------------|--------|
| 89 | MLDashboard.tsx | Página | Dashboard predicciones | - | GET /api/v1/signals/active | - | ✅ 100% |
| 90 | PredictionCard | Componente | Card señal ML | signal | - | - | ✅ 100% |
| 91 | AMDPhaseIndicator | Componente | Indicador fases AMD | phase, probabilities | GET /api/v1/amd/detect/:symbol | - | ✅ 100% |
| 92 | SignalsTimeline | Componente | Timeline histórica | signals | - | - | ✅ 100% |
| 93 | AccuracyMetrics | Componente | Métricas modelo | metrics | - | - | ✅ 100% |
| 94 | SignalPerformanceTracker | Componente | Tracker performance | signals | - | - | ✅ 100% |
| 95 | ConfidenceMeter | Componente | Medidor confianza | confidence, votes | - | - | ✅ 100% |
| 96 | ModelAccuracyDashboard | Componente | Dashboard accuracy | model | - | - | ✅ 100% |
| 97 | BacktestResultsVisualization | Componente | Visualización backtest | results | GET /api/v1/backtest/results/:strategyId | **Charts (Recharts)** | ✅ 100% |
| 98 | EnsembleSignalCard | Componente | Señal ensemble | signal | POST /api/ensemble/:symbol | - | ✅ 100% |
| 99 | ICTAnalysisCard | Componente | Análisis ICT | analysis | POST /api/ict/:symbol | - | ✅ 100% |
| 100 | MarkdownRenderer | Componente | Renderizar markdown | content | - | - | ✅ 100% (bonus) |

**Progreso:** 60% (WebSocket real-time, Exportación pendientes)

---

### OQI-007: LLM Strategy Agent (11 componentes)

| # | Componente | Tipo | Función | Props Clave | APIs Consumidas | Multimedia | Estado |
|---|------------|------|---------|-------------|-----------------|------------|--------|
| 101 | Assistant.tsx | Página | Chat LLM | - | POST /api/v1/llm/sessions/:sessionId/chat | - | ✅ 100% |
| 102 | ChatHeader | Componente | Encabezado chat | sessionTitle, onEdit | - | - | ✅ 100% |
| 103 | ChatInput | Componente | Input mensaje | onSend | - | - | ✅ 100% |
| 104 | ChatMessage | Componente | Renderizar mensaje | message, role | - | - | ✅ 100% |
| 105 | MessageList | Componente | Lista mensajes | messages | - | - | ✅ 100% |
| 106 | MessageFeedback | Componente | Feedback (thumbs) | messageId, onFeedback | POST /api/feedback (assumed) | - | ✅ 100% |
| 107 | MessageSearch | Componente | Búsqueda mensajes | messages, onSelect | - | - | ✅ 100% |
| 108 | ConversationHistory | Componente | Historial sesiones | sessions | GET /api/v1/llm/sessions | - | ✅ 100% |
| 109 | ToolCallCard | Componente | Visualizar tool calls | toolCall | - | - | ✅ 100% |
| 110 | SignalExecutionPanel | Componente | Ejecutar trade desde chat | signal, onExecute | POST /trading/paper/orders | - | ✅ 100% |
| 111 | MarkdownRenderer | Componente | Renderizar respuestas | content | - | - | ✅ 100% |

**Progreso:** 25% (Persistencia, Streaming, Memory pendientes)

---

### OQI-008: Portfolio Manager (9 componentes)

| # | Componente | Tipo | Función | Props Clave | APIs Consumidas | Multimedia | Estado |
|---|------------|------|---------|-------------|-----------------|------------|--------|
| 112 | PortfolioDashboard.tsx | Página | Dashboard portfolios | - | GET /portfolio/portfolios | **Charts (SVG + Canvas)** | ✅ 100% |
| 113 | CreatePortfolio.tsx | Página | Crear portfolio | - | POST /portfolio/portfolios | - | ✅ 100% |
| 114 | CreateGoal.tsx | Página | Crear meta | - | POST /portfolio/goals | - | ✅ 100% |
| 115 | EditAllocations.tsx | Página | Modificar asignaciones | portfolioId | PUT /portfolio/portfolios/:portfolioId/allocations | - | ✅ 100% |
| 116 | AllocationChart | Componente | Gráfico pie/donut | allocations | - | **Chart SVG** | ✅ 100% |
| 117 | AllocationTable | Componente | Tabla asignaciones | allocations | - | - | ✅ 100% |
| 118 | PerformanceChart | Componente | Gráfico line histórica | performance | - | **Chart Canvas 2D** | ✅ 100% |
| 119 | GoalCard | Componente | Card meta | goal | - | Progress icon | ✅ 100% |
| 120 | RebalanceCard | Componente | Card rebalance | recommendation | GET /portfolio/recommendations/rebalance/:portfolioId | - | ✅ 100% |

**Progreso:** 20% (Markowitz, Benchmarks, Auto-rebalance pendientes)

---

### OQI-009: MT4 Gateway (3 componentes)

| # | Componente | Tipo | Función | Props Clave | APIs Consumidas | Multimedia | Estado |
|---|------------|------|---------|-------------|-----------------|------------|--------|
| 121 | MT4ConnectionStatus | Componente | Estado conexión MT4 | - | GET /api/llm/mt4/account | Device icon | ⚠️ 0% (stub) |
| 122 | MT4LiveTradesPanel | Componente | Trades en vivo | - | WebSocket (ws://localhost:3082/mt4) | - | ❌ 0% (NO EXISTE) |
| 123 | MT4PositionsManager | Componente | Gestor posiciones | - | GET /api/llm/mt4/positions | - | ❌ 0% (NO EXISTE) |

**Progreso:** 15% (Epic completo NO FUNCIONA)

---

## Estadísticas Globales

| Métrica | Valor |
|---------|-------|
| **Total Componentes** | 123 |
| **Páginas** | 32 |
| **Componentes Reutilizables** | 91 |
| **APIs Únicas** | 113 |
| **Componentes con Multimedia** | 25 (~20%) |
| **Completitud Promedio** | 38% |
| **Componentes 100% Funcionales** | 97 (79%) |
| **Componentes Parciales** | 15 (12%) |
| **Componentes No Funcionales** | 11 (9%) |

---

## Análisis de Uso de Multimedia por Componente

| Tipo Media | Componentes | Cantidad |
|------------|-------------|----------|
| **Video HTML5** | VideoProgressPlayer, Lesson | 2 |
| **Charts (Canvas/SVG)** | CandlestickChart, AllocationChart, PerformanceChart, BacktestResults | 7+ |
| **Images (Thumbnails)** | Courses, Products, CourseCard | 5+ |
| **Icons SVG Inline** | Todos (Lucide React, Heroicons) | 120+ |
| **PDF Preview** | CertificatePreview | 1 |
| **Audio** | NINGUNO | 0 |

---

**Matriz actualizada:** 2026-01-25
**Próxima actualización:** Después de completar Fase 1 (P0 gaps)