Da tabela para a tela que o colaborador usa todo dia
Cada mockup abaixo é gerado diretamente das tabelas da Fase 2 — nenhum campo aparece numa tela sem existir no schema, e nenhuma tela introduz um conceito novo que a Fase 1 não tenha decidido. Dados de exemplo (nomes de loja, números) são fictícios, só para ilustrar layout e hierarquia visual.
Visão geral & princípios
O que guiou o desenhoCinco telas cobrem a operação descrita nas seções 7 a 11 da Fase 1: o painel de indicadores, o funil comercial (Kanban), a ficha completa de um lead, o painel de células territoriais e a rotina diária do colaborador. Três princípios de desenho valem para todas elas:
1 · Volume nunca sozinho
Todo número de quantidade (leads cadastrados, contatos feitos) aparece ao lado do indicador de qualidade correspondente (% classe A/B) — a nota da seção 10 da Fase 1 vira regra fixa de layout, não sugestão.
2 · Funil e status de contato não se misturam
O Kanban tem 8 colunas fixas (seção 9). "Sem resposta" nunca é uma coluna — é uma etiqueta dentro do card, para o card não ficar pulando de lugar por causa de um estado temporário.
3 · Fonte e proveniência sempre visíveis, nunca escondidas
Todo campo estimado (seção 5) é marcado na própria tela, não só na ficha detalhada — evita que um colaborador trate uma estimativa como fato confirmado só porque a tela não deixou isso claro.
4 · Nada de log manual
A aba de auditoria da ficha do lead é só leitura — reflete o que o trigger do banco (Fase 2) já grava sozinho. Não existe botão "registrar evento" em lugar nenhum da interface.
Painel (indicadores)
Implementa a seção 10As três camadas da Fase 1 — funil/resultado, produtividade, cobertura territorial — viram três blocos na mesma tela, sempre nessa ordem, para que ninguém precise trocar de tela para ver quantidade e qualidade juntas.
celulas_territoriais.status
Funil comercial — Kanban
Implementa a seção 98 colunas fixas, uma por funil_estagio. O status_contato aparece como etiqueta dentro do card — no exemplo abaixo, o segundo card da coluna "Em contato" está com a etiqueta sem resposta destacada, exatamente para chamar atenção sem mover o card de coluna.
funil_estagio
letra colorida = classe (A–D)
etiqueta cinza/vermelha = status_contato
Ficha do lead
Implementa as seções 2, 5, 6, 9 e 12Cinco abas, cada uma mapeada a uma tabela ou grupo de colunas da Fase 2. A aba "Dados" abre por padrão:
As outras quatro abas, resumidas:
Proveniência
| Campo | Tipo | Fonte |
|---|---|---|
| numero_unidades | confirmado | Site oficial |
| confirmado | Google Maps | |
| indício de volume | estimado | Instagram (engajamento) |
Score — 87 pts (versão 3 dos pesos)
Interações (mais recente primeiro)
- 31/08 15:40
WhatsApp — pediu tabela de preços - 28/08 10:22
Ligação — confirmou interesse
Auditoria (somente leitura)
- 31/08 15:41
funil_estagio: interessado → tabela_enviada - 27/08 09:03
lead_score: 79 → 87 (novo dado: site)
Células territoriais
Implementa a seção 3Responde diretamente "quais regiões ainda faltam prospectar" — cada linha é uma célula, com o critério composto de cobertura resumido em três colunas.
| Célula | Status | Termos | Fontes | Reciclagem |
|---|---|---|---|---|
| Moema | consolidado | 11 | 3 | em 62 dias |
| Vila Mariana | mapeado | 9 | 2 | aguardando validação |
| Tucuruvi | em progresso | 5 | 2 | — |
| Grajaú | não iniciado | 0 | 0 | — |
| Santo Amaro | reciclar | 10 | 3 | vencida há 4 dias |
Rotina diária
Implementa a seção 8Guia a sequência do dia em vez de deixar o colaborador decidir por onde começar — os quatro blocos da Fase 1 viram checklist, com os follow-ups de hoje sempre visíveis ao lado.
Riscos & limitações de UI
Para a Fase 4- Kanban com 8 colunas exige rolagem horizontal em telas menores — aceitável em desktop (uso principal do colaborador em campo é via celular para consulta rápida, não para arrastar cards); a Fase 4 decide se o mobile usa uma visão em lista em vez de Kanban.
- Aba "Proveniência" pode crescer muito em leads bem enriquecidos — a Fase 4 precisa decidir paginação ou agrupamento por seção (identificação, contato, porte) em vez de lista única.
- Nenhuma tela de permissão por papel foi desenhada ainda — o schema já diferencia admin/gestor/colaborador (ex.: só gestor decide duplicata nível 3), mas a interface disso é decisão de implementação da Fase 4, não de layout.
- Estados vazios não estão ilustrados (célula sem nenhum lead, dia sem follow-up) — mockups aqui mostram sempre dado preenchido; a Fase 4 precisa definir a mensagem de cada estado vazio.
Próximos passos
Fase 4Com schema e telas alinhados, a Fase 4 — CRM MVP implementa a primeira versão funcional: as cinco telas acima viram aplicação real conectada ao banco da Fase 2, com autenticação por usuário e as permissões por papel que ficaram em aberto na seção 7. Nenhuma decisão de layout fica pendente de aprovação — a Fase 4 pode começar diretamente pela escolha de stack técnico.