# ML Module - Trading Platform Frontend

Dashboard dedicado para visualizaciones de predicciones ML generadas por el ML Engine.

## Estructura del Módulo

```
ml/
├── components/
│   ├── AMDPhaseIndicator.tsx    # Indicador de fase AMD (Accumulation/Manipulation/Distribution)
│   ├── PredictionCard.tsx       # Tarjeta de señal ML individual
│   ├── SignalsTimeline.tsx      # Timeline de señales históricas
│   ├── AccuracyMetrics.tsx      # Métricas de accuracy del modelo
│   └── index.ts                 # Barrel exports
├── pages/
│   └── MLDashboard.tsx          # Página principal del dashboard ML
└── README.md
```

## Componentes

### AMDPhaseIndicator
Muestra la fase AMD actual del mercado con:
- Indicador visual de la fase (Accumulation/Manipulation/Distribution)
- Nivel de confianza
- Duración de la fase
- Probabilidades de próxima fase
- Niveles clave de soporte/resistencia

**Props:**
```typescript
{
  phase: 'accumulation' | 'manipulation' | 'distribution' | 'unknown';
  confidence: number;
  phaseDuration?: number;
  nextPhaseProbability?: {
    accumulation: number;
    manipulation: number;
    distribution: number;
  };
  keyLevels?: {
    support: number;
    resistance: number;
  };
  className?: string;
  compact?: boolean;  // Versión compacta para cards
}
```

### PredictionCard
Tarjeta que muestra detalles de una señal ML:
- Dirección (LONG/SHORT)
- Niveles de precio (Entry/SL/TP)
- Métricas (Confidence, R:R, P(TP))
- Estado de validez
- Botón para ejecutar trade

**Props:**
```typescript
{
  signal: MLSignal;
  onExecuteTrade?: (signal: MLSignal) => void;
  showExecuteButton?: boolean;
  className?: string;
}
```

### SignalsTimeline
Timeline de señales recientes con su estado:
- Vista cronológica de señales
- Estados: pending, success, failed, expired
- Métricas de cada señal
- Resultado P&L si está disponible

**Props:**
```typescript
{
  signals: SignalHistoryItem[];
  maxItems?: number;  // Default: 10
  className?: string;
}
```

### AccuracyMetrics
Muestra métricas de performance del modelo ML:
- Overall accuracy
- Win rate
- Total signals / Successful / Failed
- Average Risk:Reward
- Sharpe ratio y Profit factor
- Best performing phase

**Props:**
```typescript
{
  metrics: ModelMetrics;
  period?: string;  // e.g., "Last 30 days"
  className?: string;
}
```

## Páginas

### MLDashboard
Dashboard principal que integra todos los componentes:

**Características:**
- Vista general de todas las predicciones activas
- Filtros por símbolo y estado (active only)
- Indicador de fase AMD prominente
- Grid de señales activas
- Timeline de señales históricas
- Métricas de accuracy del modelo
- Auto-refresh cada 60 segundos

## Integración con API

El módulo consume los siguientes endpoints del ML Engine:

```typescript
GET /api/v1/signals/active          // Señales activas
GET /api/v1/signals/latest/:symbol  // Última señal por símbolo
GET /api/v1/amd/detect/:symbol      // Fase AMD actual
GET /api/v1/predict/range/:symbol   // Predicción de rango
POST /api/v1/signals/generate       // Generar nueva señal
```

## Estilos y Diseño

### Paleta de Colores (Tailwind)

**Fases AMD:**
- Accumulation: `bg-blue-500` / `text-blue-400`
- Manipulation: `bg-amber-500` / `text-amber-400`
- Distribution: `bg-red-500` / `text-red-400`

**Señales:**
- BUY/LONG: `bg-green-500` / `text-green-400`
- SELL/SHORT: `bg-red-500` / `text-red-400`

**Confianza:**
- Alta (≥70%): `text-green-400`
- Media (50-70%): `text-yellow-400`
- Baja (<50%): `text-red-400`

### Layout
- Grid responsive (1 col mobile, 3 cols desktop)
- Cards con `shadow-lg` y `rounded-lg`
- Dark mode por defecto
- Transiciones suaves con `transition-colors`

## Rutas

```
/ml-dashboard  → MLDashboard page
```

Accesible desde:
- Navegación principal
- Link en MLSignalsPanel (panel lateral de Trading)

## Uso

```typescript
// En App.tsx (ya integrado)
import MLDashboard from './modules/ml/pages/MLDashboard';

<Route path="/ml-dashboard" element={<MLDashboard />} />
```

```typescript
// Usar componentes individuales
import {
  AMDPhaseIndicator,
  PredictionCard,
  SignalsTimeline,
  AccuracyMetrics
} from './modules/ml/components';

<AMDPhaseIndicator
  phase="accumulation"
  confidence={0.85}
  compact={true}
/>
```

## Mejoras Futuras

- [ ] Filtros avanzados (por timeframe, volatility regime)
- [ ] Gráficos de performance histórica
- [ ] Exportar señales a CSV/PDF
- [ ] Alertas push para nuevas señales
- [ ] Comparación de modelos ML
- [ ] Backtesting visual integrado
- [ ] Real-time WebSocket updates

## Notas de Desarrollo

- Todos los componentes son TypeScript strict
- Usa React Hooks (useState, useEffect, useCallback)
- Error handling con try/catch
- Loading states para UX fluida
- Responsive design mobile-first
- Optimizado para performance (memoización donde sea necesario)
