# 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: 1. Seleção do motorista e período. 2. Acionamento do processamento ou reprocessamento de um dia específico. 3. **Polling periódico** para exibir progresso do job em andamento. 4. Após processamento, períodos calculados são exibidos para revisão. 5. 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.