📋 Visão Geral
O Cockpit é o módulo operacional principal do CRMAppy. É onde o trabalho
comercial acontece no dia a dia — o vendedor seleciona uma empresa, vê todos os dados
de relacionamento e registra ações (ligações, e-mails, tarefas, mensagens).
A tela é dividida em dois painéis: à esquerda, a lista de empresas com ações ativas;
à direita, os detalhes completos da empresa selecionada — dados cadastrais,
registro de ação, notas e histórico de conversas.
🖥️ Anatomia da Tela
🔍 Buscar empresa por nome...
🏢 Clínica São Lucas
Segmento: Saúde · Clínica Médica
Responsável: Fernando L.
Contato: Dr. Marcos Souza · (11) 9 9999-0000
Estágio: Proposta
✏️ Registrar Ação
Tipo · Canal · Direção · Data · Horário · Assunto
➕ Registrar
📝 Notas
Notas internas sobre a empresa...
🕓 Histórico de Conversas
Ligação (E) · 02/06 · 09:30 · Reunião de alinhamento
Whats (E) · 30/05 · 14:15 · Envio de proposta
◀ Painel Esquerdo — Lista de Empresas
Exibe todas as empresas da carteira do usuário que possuem ações ativas (não concluídas).
A lista é carregada automaticamente ao abrir o módulo e a primeira empresa é selecionada por padrão.
🔍
Campo de Busca
Filtra empresas por nome em tempo real. A busca começa a partir de 2 caracteres digitados.
Se a empresa não estiver na lista de ativos, o sistema faz uma busca ampla no banco com
debounce de 280ms — evitando chamadas desnecessárias enquanto o usuário ainda digita.
O dropdown de resultados suporta navegação por teclado (↑ ↓ Enter Esc) e
destaca visualmente o trecho que corresponde ao que foi digitado.
🏢
Lista de Empresas Agrupadas
As empresas aparecem agrupadas por critério (componente EmpresasAgrupadasList).
Cada item exibe o nome da empresa e o número de ações ativas. Ao passar o mouse sobre
uma empresa, o sistema já inicia o carregamento dos detalhes em segundo plano
(prefetch) — tornando a seleção instantânea.
💡 Prefetch inteligente
Ao passar o mouse sobre uma empresa na lista, o Cockpit já carrega os dados dela
em segundo plano. Quando você clica, a abertura é imediata — sem espera de carregamento.
▶ Painel Direito — Detalhes da Empresa
Ao selecionar uma empresa, o painel direito carrega quatro blocos em sequência vertical.
🏢
Bloco 1 — Dados da Empresa (CompanyDetailsCard)
Exibe as informações cadastrais da empresa selecionada: razão social, segmento,
responsáveis (assignees), contatos vinculados com canais de comunicação e estágio
no funil comercial. Permite salvar e atualizar contatos diretamente pelo painel,
sem sair do Cockpit.
✏️
Bloco 2 — Registrar Ação (RegisterActionCard)
Formulário para registrar uma nova interação com a empresa. Visível apenas para
o usuário que é responsável (assignee) pela empresa. Campos disponíveis:
tipo de ação (ligação, mensagem, tarefa), canal, direção (enviado/recebido),
data, horário e assunto. Ao salvar, o histórico é atualizado automaticamente.
📝
Bloco 3 — Notas (NotesSection)
Área de anotações internas sobre a empresa — visível e editável pelo responsável.
As notas são salvas em tempo real e sincronizadas com o cache local do Cockpit,
sem precisar recarregar os dados da empresa.
🕓
Bloco 4 — Histórico de Conversas (ConversationHistoryCard)
Lista cronológica de todas as ações já registradas para a empresa: tipo, canal,
data, horário e assunto. Usuários com permissão canViewAllChats visualizam
o histórico mesmo sem serem responsáveis pela empresa.
🔽 Funil de Vendas
O Cockpit organiza o processo comercial em 5 estágios sequenciais. Cada empresa
avança no funil conforme as interações evoluem.
📡
Captura
Primeiro contato identificado. Empresa entra no radar comercial.
🔎
Qualificação
Empresa avaliada quanto a potencial e aderência ao produto.
📄
Proposta
Proposta comercial apresentada e em análise pelo cliente.
🤝
Negociação
Condições sendo discutidas. Decisão próxima.
✅
Fechamento
Negócio concluído. Empresa converte para cliente.
🔐 Permissões de Acesso
O Cockpit aplica controle de acesso por empresa — não apenas por papel de usuário.
O que cada pessoa vê depende de ser ou não responsável pela empresa selecionada.
✅ Responsável pela empresa (Assignee)
- ✓ Ver dados cadastrais completos
- ✓ Registrar novas ações
- ✓ Editar e salvar notas
- ✓ Ver histórico de conversas
- ✓ Atualizar contatos
👁 Acesso de visualização (canViewAllChats)
- ✓ Ver dados cadastrais
- ✓ Ver histórico de conversas
- ✗ Registrar ações
- ✗ Editar notas
- ✗ Atualizar contatos
⚠️ Empresa sem permissão
Se o usuário selecionar uma empresa da qual não é responsável e não tem
permissão de visualização (canViewAllChats), o painel exibe a mensagem:
"Você não tem permissão para acessar esta empresa."
▶️ Fluxo de Uso
-
1
Abra o Cockpit pelo menu lateral
A lista de empresas com ações ativas carrega automaticamente. A primeira empresa da lista já aparece selecionada.
-
2
Localize a empresa desejada
Percorra a lista ou use o campo de busca digitando o nome da empresa. O sistema filtra a lista local ou busca no banco se necessário.
-
3
Selecione a empresa
Clique no nome. O painel direito carrega os 4 blocos: dados da empresa, formulário de ação, notas e histórico.
-
4
Registre a ação
No bloco "Registrar Ação", preencha tipo, canal, direção, data e assunto. Clique em salvar. O histórico se atualiza automaticamente.
-
5
Consulte o histórico e faça anotações
Use o bloco de Notas para registrar informações internas e o Histórico de Conversas para revisar interações anteriores.
🔄 Atualização dos Dados
ℹ️ O Cockpit tem cache manual — funciona diferente dos outros módulos
Os dados do Cockpit são mantidos em cache local enquanto a sessão está aberta.
Quando uma ação é registrada, o sistema atualiza o cache e a lista de empresas
automaticamente — sem recarregar a página. Ao trocar de empresa, os dados
são carregados do cache (instantâneo) ou do servidor (primeira vez).
| Evento | O que acontece |
|---|
| Ação registrada | Lista de empresas recarrega · Detalhes da empresa atual atualizam · Histórico atualiza |
| Mudança em outro módulo | O evento chats:changed dispara atualização automática do Cockpit |
| Hover na lista | Prefetch dos detalhes em segundo plano para seleção instantânea |
| Troca de empresa | Throttle de 300ms evita múltiplas chamadas ao clicar rapidamente entre empresas |