trading-platform/orchestration/tareas/TASK-2026-01-25-OQI-004-INVESTMENT-ADVANCED/05-EJECUCION.md

05-EJECUCION - OQI-004 Investment Advanced Components

Tarea: TASK-2026-01-25-OQI-004-INVESTMENT-ADVANCED Fecha: 2026-01-25 Estado: COMPLETADA

---

Resumen de Ejecucion

Se crearon 4 componentes criticos para el modulo de cuentas de inversion (OQI-004), resolviendo los gaps P0 (account creation) y P1 (risk analysis, portfolio optimization) identificados en la auditoria.

Componentes Creados

1. CreateAccountWizard.tsx (620 LOC)

Ubicacion: apps/frontend/src/modules/investment/components/CreateAccountWizard.tsx

Funcionalidad:

• Wizard multi-step con 4 pasos: Amount, KYC, Terms, Confirm
• Paso 1 (Amount): Seleccion de monto, auto-reinvest, distribucion
• Paso 2 (KYC): Verificacion de identidad con formulario completo
• Paso 3 (Terms): Terminos y condiciones + Risk disclosure
• Paso 4 (Confirm): Resumen y confirmacion final
• Proyeccion de retornos estimados
• Quick amount buttons para seleccion rapida
• Validacion por paso con navegacion controlada

Props:

interface CreateAccountWizardProps {
  product: ProductSelection;
  onComplete?: (data: AccountCreationData) => void;
  onCancel?: () => void;
  isSubmitting?: boolean;
  minInvestment?: number;
  maxInvestment?: number;
  requiresKYC?: boolean;
}

Tipos exportados:

• ProductSelection: Datos del producto seleccionado
• KYCData: Datos de verificacion KYC
• AccountCreationData: Datos completos para crear cuenta

---

2. RiskAnalysisPanel.tsx (480 LOC)

Ubicacion: apps/frontend/src/modules/investment/components/RiskAnalysisPanel.tsx

Funcionalidad:

• Risk score gauge circular con indicador visual
• Desglose de riesgos: Market, Liquidity, Operational, Concentration
• Metricas clave: Sharpe Ratio, Sortino Ratio, Max Drawdown, Volatility
• Seccion VaR: VaR 95%, VaR 99%, CVaR (Expected Shortfall)
• Comparacion con benchmark (Alpha, Beta)
• Metricas adicionales: Downside Deviation, Calmar Ratio
• Recomendaciones con acciones sugeridas
• Modos compact y full
• Selector de periodo (1M, 3M, 6M, 1Y, ALL)

Props:

interface RiskAnalysisPanelProps {
  accountId: string;
  accountName: string;
  metrics: RiskMetrics;
  score: RiskScore;
  recommendations?: RiskRecommendation[];
  benchmarkName?: string;
  period?: '1M' | '3M' | '6M' | '1Y' | 'ALL';
  onPeriodChange?: (period: string) => void;
  onViewDetails?: () => void;
  compact?: boolean;
  isLoading?: boolean;
}

Tipos exportados:

• RiskMetrics: VaR, Sharpe, Sortino, Drawdown, etc.
• RiskScore: Overall score + breakdown por categoria
• RiskRecommendation: Recomendaciones con tipo y accion

---

3. PortfolioOptimizerWidget.tsx (520 LOC)

Ubicacion: apps/frontend/src/modules/investment/components/PortfolioOptimizerWidget.tsx

Funcionalidad:

• Selector de estrategia: Conservative, Balanced, Aggressive
• Comparacion visual current vs recommended allocation (pie charts)
• Leyenda con drift por cuenta
• Metricas de impacto esperado: Return, Volatility, Sharpe, Max Drawdown
• Grafico de proyeccion a 5 anos
• Detalle de ajustes requeridos por cuenta
• Confirmacion de rebalanceo con preview
• Estados: optimized, rebalance needed

Props:

interface PortfolioOptimizerWidgetProps {
  accounts: AccountAllocation[];
  totalValue: number;
  currentResult?: OptimizationResult;
  onOptimize?: (strategy: OptimizationStrategy) => void;
  onApplyRebalance?: (allocations: AccountAllocation[]) => void;
  isOptimizing?: boolean;
  isApplying?: boolean;
  showSimulation?: boolean;
}

Tipos exportados:

• AccountAllocation: Allocation actual y recomendada por cuenta
• OptimizationResult: Resultado con metricas y accounts
• PortfolioSimulation: Datos de simulacion por ano
• OptimizationStrategy: 'conservative' | 'balanced' | 'aggressive' | 'custom'

---

4. AccountTransferModal.tsx (450 LOC)

Ubicacion: apps/frontend/src/modules/investment/components/AccountTransferModal.tsx

Funcionalidad:

• Modal con backdrop y cierre al hacer click fuera
• Selector de cuenta origen con balance disponible
• Selector de cuenta destino
• Boton swap para intercambiar cuentas
• Input de monto con quick amount buttons (25%, 50%, 75%, Max)
• Calculo de fee y total deduction
• Campo de nota opcional
• Paso de confirmacion con resumen visual
• Validacion completa: balance, min/max, status de cuentas
• Estado de exito con feedback

Props:

interface AccountTransferModalProps {
  isOpen: boolean;
  accounts: TransferAccount[];
  defaultSourceId?: string;
  defaultDestinationId?: string;
  transferFee?: TransferFee;
  minTransfer?: number;
  maxTransfer?: number;
  onTransfer?: (data: TransferData) => void;
  onClose?: () => void;
  isSubmitting?: boolean;
}

Tipos exportados:

• TransferAccount: Cuenta con balance y status
• TransferFee: Configuracion de fee (fixed/percentage)
• TransferData: Datos de la transferencia

---

Actualizaciones de Archivos

index.ts

// Account Creation & Management (OQI-004)
export { default as CreateAccountWizard } from './CreateAccountWizard';
export type { ProductSelection, KYCData, AccountCreationData } from './CreateAccountWizard';

export { default as AccountTransferModal } from './AccountTransferModal';
export type { TransferAccount, TransferFee, TransferData } from './AccountTransferModal';

// Risk & Optimization Components (OQI-004)
export { default as RiskAnalysisPanel } from './RiskAnalysisPanel';
export type { RiskMetrics, RiskScore, RiskRecommendation } from './RiskAnalysisPanel';

export { default as PortfolioOptimizerWidget } from './PortfolioOptimizerWidget';
export type { AccountAllocation, OptimizationResult, PortfolioSimulation, OptimizationStrategy } from './PortfolioOptimizerWidget';

FRONTEND_INVENTORY.yml

• resumen.total_componentes: 127 -> 131
• componentes_modulos.investment.cantidad: 2 -> 6
• auditoria.progreso_por_epic.OQI-004.componentes: 10 -> 14
• auditoria.progreso_por_epic.OQI-004.progreso: 35% -> 55%

MASTER_INVENTORY.yml

• resumen_general.total_componentes_frontend: 131 -> 135
• epicas[OQI-004].componentes: 10 -> 14
• epicas[OQI-004].progreso: 35% -> 55%

---

Patrones y Convenciones

Aspecto	Convencion Seguida
Framework	React 18 + TypeScript
Estilos	Tailwind CSS dark theme
Iconos	Lucide-react (consistent con investment)
Estados	useState, useCallback, useMemo, useEffect
Exports	default + named types
Props	Interface con tipos explicitos
Colores	slate-800/900 backgrounds, blue/emerald/amber accents
Modales	Backdrop + portal pattern
Wizards	Multi-step con validacion por paso

---

Integracion Pendiente

Componente	Backend Requerido	Prioridad
CreateAccountWizard	POST /investment/accounts	P0
RiskAnalysisPanel	GET /investment/accounts/{id}/risk-analysis	P1
PortfolioOptimizerWidget	POST /investment/accounts/optimize	P1
AccountTransferModal	POST /investment/accounts/transfer	P2

---

Metricas

Metrica	Valor
Componentes creados	4
Lineas de codigo total	2,070
Tipos exportados	13
Progreso OQI-004	35% -> 55%
Gaps criticos reducidos	2 -> 0