Capítulo 03 - Telas e Fluxos

Este capítulo descreve o que o usuário vê e como interage com o sistema, seguindo a ordem dos grupos do menu lateral. Para a lista de módulos e suas permissões, consulte o Capítulo 02. Para a base tecnológica e arquitetura, consulte o Capítulo 01.

3.1 Shell Visual da Aplicação

Toda página autenticada segue um layout fixo de três regiões:

Aside esquerdo — menu de navegação colapsável; minimiza para ícones via botão de seta no topo.
Header fixo (65 px) — toggle mobile do aside à esquerda; dropdown do usuário (Perfil / Logout) à direita. A área central do header não contém links de navegação.
Área de conteúdo — ocupa o restante da tela; cada página injeta seu conteúdo dinamicamente.

A aplicação está configurada como PWA: possui manifest.json, service worker registrado e ícones de instalação — permitindo adicionar o portal à tela inicial de dispositivos móveis.

3.2 Fluxo de Autenticação

O usuário acessa /login — tela sem aside nem header autenticado. Após login bem-sucedido, é redirecionado para o dashboard principal. As demais telas (recuperação de senha, redefinição, confirmação) seguem o mesmo layout público.

3.3 Painéis

3.3.1 Dashboard Padrão

Primeira tela após o login. Apresenta uma visão executiva da frota em tempo real.

Filtro de usuário (visível apenas para administradores): seletor + botão "Aplicar" para visualizar os indicadores de outro usuário.

Quatro cards de KPI em linha:

Card	Cor	Valor
Total de Veículos	Azul	Contagem
Patrimônio FIPE	Verde	R$ formatado
Veículos Parados	Ciano	Contagem
Em Movimento	Amarelo	Contagem

Card: Eventos de Excesso de Velocidade nas últimas 24h.

Tabela: Últimas Posições — colunas: Veículo (placa), Data/Hora, Endereço, Velocidade (km/h).

3.4 Produtividade

3.4.1 Meu Dashboard

Dashboard pessoal do usuário logado. O widget de críticas é carregado via AJAX, sem bloquear o carregamento da página principal.

3.4.2 Equipe

Visão consolidada de produtividade dos membros da equipe gerenciada.

3.4.3 Dashboard Geral

Visão organizacional ampla. Não possui entrada no menu lateral — disponível apenas mediante acesso direto.

3.4.4 Configuração de SLA

CRUD padrão (ver convenção na seção 3.10) para definição de metas e parâmetros de SLA utilizados nos cálculos de produtividade.

3.5 Câmeras

3.5.1 Devices (listagem)

Ponto de entrada do módulo. A partir de cada linha da listagem, o usuário acessa todas as sub-telas da câmera. A ação "Atualizar Status" está disponível diretamente na listagem.

3.5.2 Visualização ao Vivo

Live individual: player HLS integrado para visualização de câmera única.
Grid de câmeras: múltiplas câmeras lado a lado. Streams são iniciados e encerrados individualmente pelos botões na grade.

3.5.3 Gravações

Filtro por câmera e período → listagem de clipes → player integrado com controle de reprodução. A mesma tela oferece a ação de solicitar download de trechos específicos.

3.5.4 Downloads

Gerenciamento centralizado de arquivos de vídeo solicitados. O usuário acompanha o status de cada pedido e realiza o download ou streaming quando pronto.

3.5.5 Comandos

Envio de instruções remotas às câmeras. O histórico é exibido em formato de bolhas de conversa, similar a um chat.

3.6 Rastreamento

3.6.1 Painel de Rastreadores

Lista/grade operacional com status de cada rastreador (online/offline, última comunicação). Os dados são atualizados periodicamente via AJAX, sem recarregar a página.

3.6.2 Mapa em Tempo Real

Tela dominada pelo mapa Google Maps. Posições são consumidas via AJAX: lista geral de veículos e posição individual por ID.

3.6.3 Replay de Rastreamento

O usuário seleciona veículo e intervalo de datas/horas; o sistema carrega o histórico via AJAX e reproduz o trajeto animado sobre o mapa.

3.6.4 Relatórios

Tela	Exports
Relatório de Rotas	Excel, PDF
Utilização (Km e Horas)	PDF

Ambas seguem o padrão: formulário de filtro (veículo + período) → botões de exportação.

3.6.5 Telemetria — Painel Analítico

Ao acessar, um loader overlay cobre a tela enquanto os dados são processados. A tela é organizada em seções nomeadas.

Filtros: seleção de veículo + data inicial + data final (com seletor de usuário para administradores). O painel não exibe dados sem veículo selecionado.

Seção 1 — Visão Geral:

Card	Cor	Interação
KM Rodados (Período)	Azul	Clique → abre rota no Google Maps
KM Rodados (Hoje)	Verde	Clique → abre rota de hoje no Google Maps
Tempo Ocioso Total	Amarelo	Clique → modal com lista detalhada
Excessos de Velocidade	Vermelho	Clique → modal com ocorrências
Velocidade Média	Ciano	—
Velocidade Máxima	Escuro	—

Botão "Ver Velocidades por Dia" → modal com tabela de velocidade média e máxima por dia do período.

Seção 2 — Métricas de Tempo e Eficiência (4 cards):

Tempo de Condução
Tempo Parado
Eficiência Operacional (% tempo em movimento / tempo total)
KM/Hora Útil

Seção 3 — Paradas (3 cards):

Número de Paradas → clique abre modal com tabela (colunas: Início, Fim, Duração, Tipo). Os tipos de parada são: Curta (< 30 min), Longa (30 min – 3h), Pernoite (> 3h em período noturno ou cruzando meia-noite) e DSR (> 24h).
Tempo Médio de Parada
Distância Média Entre Paradas (km)

Seção 4 — Segurança (3 cards):

Acelerações Bruscas → clique abre modal com tabela (data/hora, aceleração m/s², velocidade, localização)
Freadas Bruscas → clique abre modal com mesmo padrão
Horário de Maior Movimento → exibe a hora de pico; clique abre modal com gráfico de KM por hora do dia (0h–23h)

Seção 5 — Velocidade (3 cards):

Tempo em Baixa Velocidade (< 30 km/h)
Tempo em Velocidade Média (30–70 km/h)
Tempo em Alta Velocidade (> 70 km/h)

Exportações em PDF (botões persistentes na tela): Relatório de Velocidades por Dia e Relatório de Excesso de Velocidade.

3.6.6 Score de Direção — Ranking

Dashboard de ranking de motoristas com pontuações. A partir de uma linha do ranking, o usuário navega para a tela de detalhe individual, que exibe análise de comportamento, análise via IA, integração com plataforma parceira de análise e exportação em PDF.

Sub-fluxo — Perfis de Score: CRUD para configurar os critérios de pontuação.

3.6.7 Premiação

CRUD de programas de premiação para motoristas com base no score de direção.

3.6.8 Espelhamentos

CRUD de mapas públicos compartilháveis. Ações disponíveis: criar, editar, excluir, ativar/desativar e regenerar senha de geofence. O link gerado abre a área pública descrita na seção 3.12.

3.7 Ponto (EPONTODIG)

3.7.1 Painel de Ponto

Dashboard com indicadores consolidados das jornadas de trabalho dos motoristas.

3.7.2 Ponto Automático

Tela mais interativa do módulo. Fluxo principal:

Seleção do motorista e período.
Acionamento do processamento ou reprocessamento de um dia específico.
Polling periódico para exibir progresso do job em andamento.
Após processamento, períodos calculados são exibidos para revisão.
Cada período pode ser editado em modal inline ou excluído.

3.7.3 Ponto Manual

Formulário simples para lançamento de registro de ponto: motorista, data e hora. Registros existentes são listados na mesma tela e podem ser excluídos.

3.7.4 Relatório de Jornada

Acessada por rota direta (sem item no menu lateral). Oferece:

Visualização do espelho de ponto.
Downloads: AFD, AEJ e espelho em PDF.
Análise de jornada.
Modal de ajuda contextual disponível na página.

3.8 Cooca+

3.8.1 Portal de Compras

A tela exibe os dados do(s) cooperado(s) vinculados aos grupos do usuário. Quando o usuário possui múltiplos grupos com matrícula Cooca+ cadastrada, os resultados são organizados em abas (uma por grupo). Se nenhum grupo possuir matrícula configurada, um alerta de aviso é exibido.

Os dados das três visões são carregados sob demanda via AJAX:

Painel principal: limite, saldo e dados gerais do cooperado.
Reservas: listagem de reservas ativas.
Títulos a Pagar: obrigações financeiras junto à CoocaMais.

3.9 Gestão

3.9.1 Painel Financeiro

Dashboard com visão consolidada do mês selecionado. Possui filtro de mês/ano no topo (padrão: mês atual).

Quatro cards de KPI:

Card	Cor	Detalhe
Total Receitas	Verde	Subtítulo: contagem de fretes do mês
Total Despesas	Vermelho	Subtítulo: contagem de abastecimentos
Transferências	Ciano	Detalhado em Adiantamentos (−) e Devoluções (+)
Saldo	(variável)	Receitas − Despesas − Adiantamentos + Devoluções

Ações rápidas no toolbar: botões "Nova Receita", "Nova Despesa", "Nova Transferência" — atalhos para criação direta sem passar pela listagem.

Últimas 5 entradas para cada tipo (Receitas, Despesas, Transferências) em tabelas abaixo dos cards.

Gráfico mensal: evolução comparativa de receitas vs. despesas dos últimos 6 meses.

3.9.2 Movimentações — Receitas, Despesas e Transferências

As três telas seguem o padrão CRUD (ver seção 3.10): listagem com botão "Cadastrar", formulário de criação e formulário de edição.

3.9.3 Acertos

Fluxo com etapa extra na criação: o usuário pode buscar itens pendentes via AJAX para compor o acerto antes de salvar. A tela de detalhe exibe o acerto completo após o registro.

3.10 Cadastros

Convenção CRUD

A maioria das telas de cadastro e configuração do sistema segue este padrão visual:

Listagem: tabela com registros, botão "Cadastrar" no topo, ações por linha (Editar, Excluir). A exclusão abre modal de confirmação.
Criação: formulário limpo.
Edição: mesmo formulário, pré-preenchido.

3.10.1 Pessoas

Formulário com duas abas: Geral (dados pessoais/empresariais) e Adicional (informações complementares).

3.10.2 Veículos (tela mais rica do domínio)

A edição de um veículo é organizada em seis abas:

Aba	Conteúdo
Geral	Dados de identificação e características do veículo
Parâmetros	Configurações operacionais (inclui limite de velocidade usado na Telemetria)
Rastreadores	Vinculação e remoção de rastreadores
Motoristas	Motorista atual + histórico de vínculos; ação "Encerrar vínculo atual"
Histórico (CRM)	Linha do tempo de notas e ocorrências
Pernoite	Configuração de alertas de pernoite

O formulário também disponibiliza o botão Consultar FIPE, que preenche automaticamente o valor de mercado via integração externa.

3.10.3 Rastreadores

CRUD padrão de dispositivos de rastreamento com vínculo a veículos.

3.10.4 CRM do Veículo

Tela dedicada ao histórico operacional de um veículo, acessada por link contextual. Não aparece no menu lateral — é acessada por links dentro do cadastro do veículo. Possui:

Filtros: origem, tipo de evento, data início e data fim.
Resumo: indicadores consolidados do histórico.
Linha do tempo: notas e ocorrências com opção de adicionar nova nota.

3.11 Administrador

Todas as telas desta seção seguem a convenção CRUD da seção 3.10. Os destaques de interação:

Usuários: além do CRUD, cada usuário possui duas sub-telas de configuração:
- Permissões de Módulos: matriz de módulos × níveis de acesso.
- Vínculos de Veículos e Grupos: define o escopo de dados visível para o usuário.
Permissões em Massa: não segue o padrão CRUD. Tela especial para aplicar permissões a múltiplos usuários de uma só vez.
Clientes de API: o fluxo de geração de token exibe o token uma única vez na tela — após fechar, não pode ser recuperado.
Alertas Sinal: a tela de detalhe permite marcar como resolvido e adicionar contatos responsáveis.

3.12 Área Pública — Espelhamento

Acessível sem autenticação via link tokenizado, esta tela usa um layout simplificado — sem menu de navegação, header autenticado ou footer. Exibe apenas o mapa ao vivo com os veículos do link compartilhado. Quando o token é inválido ou expirado, o sistema exibe uma tela de erro específica.