← story.propek
STORY 8.5
Frontend: Pipeline Visual (Kanban)
Epic: CRM Propek v2
PENDING
Implementar a tela de Pipeline Visual (`/pipeline`) com Kanban drag-and-drop separado por B2B e B2C, mostrando deals agrupados por stage com indicadores visuais de SLA e valor acumulado por coluna.
ACCEPTANCE CRITERIA (0/11)
AC1: Rota `/pipeline` renderiza a tela de Pipeline com duas tabs no topo: "B2B" e "B2C" — ao clicar alterna o pipeline exibido (estado persistido no Zustand `pipeline-store`)
AC2: Kanban exibe colunas correspondendo aos stages do pipeline selecionado: B2B (7 stages: Lead Qualificado, Diagnostico, Proposta/Pedido, Confirmado, Enviado, Entregue, Pos-Venda); B2C (5 stages: Pedido, Enviado, Entregue, NPS, Recompra)
AC3: Header de cada coluna exibe: nome do stage, contagem de deals e valor total (SUM estimated_value em R$)
AC4: Card de deal exibe: nome do cliente (business_name para B2B, contact_name para B2C), dias no stage atual, valor estimado (R$), data do ultimo contato, proximo follow-up agendado, iniciais do atendente atribuido
AC5: Indicador visual de SLA no card: borda verde (days_in_stage < 50% do SLA), borda amarela (50-100%), borda vermelha (>100% — deal parado)
AC6: Drag-and-drop funcional com `@dnd-kit/core` — ao soltar card em outra coluna, chama `PATCH /api/crm/deals/:id/stage` com o novo stage; UI atualiza otimisticamente antes do response
AC7: Se mover para 'confirmado' e estimated_value e 0, abre modal inline pedindo o valor antes de confirmar a mudanca de stage
AC8: Filtros implementados: por atendente (dropdown com lista de atendentes), por periodo (ultimo 7d/30d/90d), toggle "Apenas parados" (exibe so deals com sla_status='red')
AC9: Polling de 60 segundos ativo via `usePipelineView()` (`refetchInterval: 60000`) — pipeline atualiza automaticamente
AC10: Estado de loading com skeleton loaders nas colunas enquanto carrega
AC11: Ao clicar em um card de deal, abre um drawer lateral (`deal-detail-drawer.tsx`) com informacoes completas do deal (dados do GET /api/crm/deals/:id)