# US-MAI004-001: Ver tablero de planeación

**ID:** US-MAI004-001
**Módulo:** MAI-004 (Planeación TMS)
**Prioridad:** Alta
**Story Points:** 13

---

## Historia de Usuario

**Como** planner de tráfico
**Quiero** ver un tablero visual con todas las OTs pendientes y recursos disponibles
**Para** planificar eficientemente las asignaciones del día

---

## Criterios de Aceptación

### CA-001: Vista Gantt
**Dado** que accedo al módulo de planeación
**Cuando** selecciono vista Gantt
**Entonces** veo una línea de tiempo con unidades en filas y días en columnas, mostrando viajes programados

### CA-002: Vista Kanban
**Dado** que prefiero organizar por estado
**Cuando** selecciono vista Kanban
**Entonces** veo columnas: Pendiente, En Planeación, Planificado, Despachado

### CA-003: Panel de OTs pendientes
**Dado** que hay OTs sin asignar
**Cuando** veo el tablero
**Entonces** aparece un panel lateral con lista de OTs pendientes de planificar

### CA-004: Filtros
**Dado** que tengo muchas OTs
**Cuando** aplico filtros (fecha, cliente, región, prioridad)
**Entonces** el tablero muestra solo OTs que cumplen los criterios

### CA-005: Detalle de OT
**Dado** que quiero ver información de una OT
**Cuando** hago clic en ella
**Entonces** se abre panel con detalles: cliente, origen, destino, carga, restricciones

---

## Mockup / UI

```
┌─────────────────────────────────────────────────────────────────────────┐
│ PLANEACIÓN TMS                                    [Gantt] [Kanban]      │
├─────────────────────────────────────────────────────────────────────────┤
│ Filtros: [Fecha ▼] [Cliente ▼] [Región ▼] [Prioridad ▼]    [Buscar...] │
├─────────────────────┬───────────────────────────────────────────────────┤
│ OTs PENDIENTES (12) │              CALENDARIO SEMANAL                   │
│                     │  Recurso  │ Lun 27 │ Mar 28 │ Mie 29 │ Jue 30   │
│ ┌─────────────────┐ │  ─────────┼────────┼────────┼────────┼────────  │
│ │ 🔴 OT-1234      │ │  U-001    │ ▓▓▓▓▓▓ │        │ ▓▓▓▓   │          │
│ │ CDMX → GDL      │ │  U-002    │        │ ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ │          │
│ │ 8 ton, 28 ene   │ │  U-003    │ ░░░░   │        │        │ ▓▓▓▓▓▓   │
│ └─────────────────┘ │  U-004    │        │ ▓▓▓    │        │          │
│ ┌─────────────────┐ │  U-005    │ DISP.  │ DISP.  │ DISP.  │ DISP.    │
│ │ 🟡 OT-1235      │ │           │        │        │        │          │
│ │ MTY → CDMX      │ │  ▓▓▓ = Asignado   ░░░ = Mantenimiento           │
│ │ 5 ton, 29 ene   │ │                                                   │
│ └─────────────────┘ │                                                   │
│ ┌─────────────────┐ │───────────────────────────────────────────────────│
│ │ 🟢 OT-1236      │ │ RECURSOS DISPONIBLES (28 ene)                     │
│ │ GDL → TIJ       │ │ Unidades: 5/12  Operadores: 8/15  Remolques: 10  │
│ │ 12 ton, 30 ene  │ │                                                   │
│ └─────────────────┘ │                                                   │
└─────────────────────┴───────────────────────────────────────────────────┘

🔴 Urgente (SLA <24h)  🟡 Normal  🟢 Flexible
```

---

## Notas Técnicas

- Usar biblioteca de Gantt (DHTMLX, Bryntum, o similar)
- Carga lazy de semanas para performance
- WebSocket para actualizaciones en tiempo real
- Cache de disponibilidad con TTL de 30 segundos

---

## Definición de Done

- [ ] Vista Gantt funcional
- [ ] Vista Kanban funcional
- [ ] Panel de OTs pendientes
- [ ] Filtros implementados
- [ ] Detalle de OT en panel lateral
- [ ] Performance <3s con 500 OTs
- [ ] Tests E2E