# US-MGN-009-003-001: Vista Kanban de Pipeline por Etapas

**RF Asociado:** [RF-MGN-009-002](../../02-modelado/requerimientos-funcionales/mgn-009/RF-MGN-009-002-pipeline-de-ventas-kanban.md)
**Módulo:** MGN-009 - CRM Básico
**Epic:** Pipeline de Ventas
**Prioridad:** P0
**Story Points:** 5
**Sprint:** Sprint 21
**Estado:** Ready for Development
**Fecha:** 2025-11-24

---

## User Story
**Como** vendedor, **Quiero** visualizar oportunidades en un tablero Kanban por etapas, **Para** gestionar el pipeline visualmente.

## Descripción Detallada
Vista Kanban muestra columnas por etapa:
- Prospecting | Qualification | Proposal | Negotiation | Won | Lost

Cada tarjeta muestra:
- Nombre de oportunidad
- Cliente
- Monto
- Probabilidad
- Días en etapa

## Criterios de Aceptación

### Escenario 1: Ver Kanban con oportunidades
**Dado que** hay 20 oportunidades distribuidas en 4 etapas,
**Cuando** accedo a /crm/pipeline,
**Entonces** veo 4 columnas con tarjetas de oportunidades.

### Escenario 2: Drag & drop entre etapas
**Dado que** oportunidad está en Qualification,
**Cuando** arrastro tarjeta a Proposal,
**Entonces** sistema actualiza stage=proposal, probability=50%.

### Escenario 3: Totales por columna
**Dado que** columna Proposal tiene 5 oportunidades con total $200K,
**Cuando** veo columna,
**Entonces** header muestra "Proposal (5) - $200K".

### Escenario 4: Filtrar por vendedor
**Dado que** soy sales_manager,
**Cuando** filtro por vendedor "Juan",
**Entonces** Kanban muestra solo oportunidades de Juan.

## Reglas de Negocio
- **RN-1:** Columnas representan etapas (stages).
- **RN-2:** Drag & drop actualiza stage y probability.
- **RN-3:** Totales se calculan en tiempo real.
- **RN-4:** sales_user ve solo sus oportunidades, sales_manager ve todas.

## Tareas Técnicas

### Backend
- [ ] Endpoint: `GET /api/v1/crm/pipeline?user_id&date_from&date_to`
- [ ] Service: `PipelineService.getGroupedByStage(filters)`
- [ ] Endpoint: `PATCH /api/v1/crm/opportunities/:id/move` (drag & drop)

### Frontend
- [ ] Página: `PipelineKanbanPage.tsx`
- [ ] Componente: `KanbanBoard.tsx` (usar react-beautiful-dnd)
- [ ] Componente: `OpportunityCard.tsx`
- [ ] Drag & drop funcional
- [ ] Filtros: Vendedor, Fecha
- [ ] Component tests

---

## Estimación Detallada
| Tarea | Horas |
|-------|-------|
| Backend | 1.5 |
| Frontend | 3 |
| Testing | 1.5 |
| **TOTAL** | **6 horas = 5 SP** |

---

## Definition of Done
- [ ] Kanban visual funcional
- [ ] Drag & drop funciona
- [ ] Totales correctos
- [ ] Filtros aplican
- [ ] Tests >80%
- [ ] QA/PO aprobado

---

## Referencias
- [RF-MGN-009-002](../../02-modelado/requerimientos-funcionales/mgn-009/RF-MGN-009-002-pipeline-de-ventas-kanban.md)