← story.propek
STORY 8.6
Frontend: Ficha 360 do Cliente
Epic: CRM Propek v2
PENDING
Implementar a pagina completa da Ficha 360 do cliente (`/clientes/[id]`) que consolida em uma unica tela todos os dados do cliente: cabecalho, timeline unificada, historico de pedidos, deals, follow-ups pendentes e notas do atendente.
ACCEPTANCE CRITERIA (0/11)
AC1: Rota `/clientes/[id]` renderiza a Ficha 360 completa do cliente identificado pelo ID
AC2: Rota `/clientes` renderiza lista de clientes com busca (nome, telefone, CNPJ) e paginacao, usando `GET /api/crm/customers` existente
AC3: Cabecalho da ficha exibe: nome do cliente / razao social, CNPJ (se B2B), telefone como link WhatsApp (`https://wa.me/55{phone}`), email, tipo (B2B|B2C badge), status (Ativo/Inativo/At-Risk), lead score/classificacao, data primeiro contato, data ultima compra
AC4: Secao Timeline Unificada exibida com eventos em ordem cronologica invertida (mais recente primeiro) do endpoint `GET /api/crm/customers/:id/timeline`, cada evento com: icone do tipo, timestamp relativo ("ha 5 min", usando date-fns), descricao, ator; paginacao "Carregar mais" ao fim da lista
AC5: Secao Historico de Pedidos exibida como tabela com: data, produtos (lista), valor total, status, tracking code (link externo Melhor Envio), NPS do pedido
AC6: Secao Follow-ups Pendentes exibida com: lista de follow-ups do cliente (do `GET /api/crm/follow-ups?customer_id=:id`), cada item com data, tipo, status (badge colorido), atendente responsavel
AC7: Secao Notas do Atendente exibida com: lista de notas existentes (GET /api/crm/customers/:id/notes), formulario para adicionar nova nota com campo de texto e seletor de tipo (Geral/Decisao/Alerta), ao submeter chama POST /api/crm/customers/:id/notes
AC8: Deals do cliente exibidos em card separado: lista de deals (abertos e fechados) via `GET /api/crm/deals?customer_id=:id` — mostrar stage atual, pipeline type, valor, SLA status
AC9: Todas as secoes carregam dados da API — sem dados hardcoded
AC10: Estado de loading com skeletons em cada secao enquanto dados carregam (cada secao e independente e carrega em paralelo)
AC11: Botao "Atender" no cabecalho linka para /conversations/:id da conversa ativa do cliente (se existir)