Painel Visual de Gestão — ITASUL OS
Mapa operacional interativo do fluxo de locação do Grupo ITASUL: etapas conectadas, cartões clicáveis, painel de detalhes, equipe, indicadores e central de melhorias.
App web estático: HTML + CSS + JavaScript (módulos ES). Sem build, sem dependências, sem backend, sem integrações externas (nada de WhatsApp, TotalLoc, bancos de dados ou envio de mensagens).
Como usar
npm start # abre em http://localhost:8080 (ou: npm start 3000)
npm test # testes unitários (node --test)
npm run test:e2e # testes de interface (usa o Playwright já instalado no ambiente)
Também funciona hospedado em qualquer servidor estático (GitHub Pages, Vercel etc.). Não abra index.html direto pelo file:// (módulos ES exigem http).
Tema claro e escuro
- Botão sol/lua no cabeçalho (visível em todas as seções) alterna na hora entre modo claro e modo escuro. Todas as cores vêm de variáveis CSS (
:root e [data-theme="escuro"] em src/styles.css): mapa, setas, cartões, painéis, tabelas, formulários, diálogos, menus e mensagens se adaptam.
- A escolha é salva no
localStorage (chave itasul-tema) e vence a preferência do sistema. Sem escolha salva, o painel segue o tema do sistema operacional (inclusive ao vivo). "Dados → Usar o tema do sistema" apaga a escolha.
- Um pequeno script no
<head> aplica o tema antes da primeira pintura (sem "flash"). O botão tem aria-pressed e nome acessível que indica o tema ativo.
- Estados nunca dependem só de cor: indicadores trazem ícone + rótulo (Crítico/Atenção/Em dia), tarefas trazem ícone no status, etapas sem responsável dizem "A definir", mensagens trazem ✔/✖.
Telas
- Mapa do processo — 11 etapas + 2 ramais (Análise Munck, Destinação de caçambas). Arraste para mover, roda do mouse/botões para zoom, "Ajustar" para enquadrar. Seletor de caminho (Caçambas, Equipamentos, Caminhão Munck, Manutenção) destaca só as etapas do caminho, numeradas, sem perder a visão geral. Em telas pequenas abre em lista.
- Painel lateral amplo (clique numa etapa) — a aba Visão completa reúne objetivo, responsável (principal/substituto), pendências, tarefas (adicionar, editar, concluir, reabrir), entradas e entregas (com links para as etapas vizinhas e aviso ⇄ de transferência entre setores), indicadores, sugestões de melhoria e atividades previstas. As demais abas (Responsabilidades, Tarefas, Responsáveis, Entradas e entregas, Indicadores, Problemas, Melhorias, Histórico) detalham/editam cada parte. Na aba Responsáveis dá para vincular/desvincular pessoas e cadastrar um funcionário novo já ligado à etapa. Vincular não define responsável: isso é sempre uma escolha explícita.
- Registros — orçamentos, locações, entregas, pendências financeiras, equipamentos indisponíveis e manutenções, com status, data, etapa e responsável. Sem valores financeiros nem dados pessoais. São a base dos indicadores.
- Rotina diária — tarefas por funcionário e por dia (‹ › e seletor de data), com filtros Pendentes / Concluídas / Atrasadas / Bloqueadas. Mostra as tarefas com prazo no dia, as anteriores ainda abertas e as sem prazo; permite criar, editar, concluir e reabrir ali mesmo. "A definir" lista tarefas sem responsável. Só aparece o que foi cadastrado; nada é atribuído automaticamente.
- Dependências — cada ligação do mapa é uma dependência: a etapa anterior só conta como concluída se tiver tarefas e todas estiverem concluídas. Se tiver tarefas em aberto, a etapa seguinte mostra ⏳ no mapa, a seta fica pontilhada, o painel diz "etapa anterior NÃO concluída" e o indicador "Etapas aguardando etapa anterior" a lista. Sem tarefas na anterior, o painel avisa que não dá para verificar. Ramais (Munck, destinação) são dependências opcionais e não geram alerta.
- Equipe e Responsabilidades — cada funcionário mostra cargo e setor ("A definir" se faltar), papel em cada etapa (principal / substituto / participa), tarefas atribuídas com contagem de pendentes, atrasadas e bloqueadas, e atalhos para nova tarefa e rotina. Abaixo: tarefas sem responsável, cobertura por etapa e a tabela de transferências de responsabilidade entre setores (origem, destino, entrega exigida, situação). Antes: cadastro único de funcionários vinculados a várias etapas, hierarquia por "quem coordena" e tabela de cobertura (quem responde por cada etapa; "A definir" em destaque).
Formas do mapa
Seletor "Forma do mapa" acima do mapa (a escolha fica salva neste navegador, chave itasul-forma). Todas usam os mesmos dados, filtros, caminhos, seleção, painel de detalhes, indicadores e tema — trocar de forma não altera nenhum dado (as posições gravadas só valem para a Serpentina; as demais são calculadas na hora).
- Serpentina (padrão): fluxo em serpentina sem cruzamento de setas, cartões grandes.
- Raias por setor: uma faixa por setor, o fluxo avança da esquerda para a direita (mostra quem entrega para quem).
- Árvore: camadas de cima para baixo, setas longas desviam dos cartões intermediários.
- Circular: etapas em círculo na ordem do fluxo, com o retorno 11→5 como corda.
- Linha do tempo: lista vertical em ordem de fluxo; cada etapa mostra para onde segue, com ⇄ nas transferências entre setores e ↺ no retorno (os chips levam à etapa seguinte).
- Quadro por setor: uma coluna por setor com resumo (etapas, tarefas abertas, atrasadas, sem responsável).
- Matriz setor × etapa: linhas = setores, colunas = etapas na ordem do fluxo. Cada célula diz o papel do setor naquela etapa: ● executa, → entrega trabalho para o setor ou ← recebe dele (o retorno 11→5 aparece marcado ↺). Rola dentro do quadro com a coluna de setores e o cabeçalho fixos; o resumo de cada setor fica na última coluna.
- Lista: a lista simples de antes (abre por padrão em telas até 1100 px, se não houver escolha salva).
O botão "Ver como lista/mapa" continua alternando com a última forma usada. As formas de mapa têm zoom, arrastar, "Ajustar" e navegação por setas; com o painel aberto, a etapa selecionada é centralizada em zoom legível.
Cores por setor
Cada setor tem uma cor própria (variantes para claro e escuro, tokens .sec-* em src/styles.css): barra lateral e número do cartão, selos, raias, colunas do quadro, linha do tempo, matriz e setas. A legenda Setores acima do mapa é também um filtro (clique para filtrar/desfiltrar). A cor nunca é o único sinal: setor aparece escrito e os estados (A definir, bloqueada, aguardando) mantêm ícone e texto. Setores criados por você recebem uma cor extra estável.
Animação "cérebro"
Nas formas de mapa (serpentina, raias, árvore, circular) o fluxo ganha vida: uma malha neural discreta ao fundo, sinais que viajam pelas ligações na cor do setor de origem, neurônios (cartões) que disparam em onda seguindo as camadas do fluxo (etapas com tarefa bloqueada pulsam mais rápido, em vermelho; as aguardando, em âmbar), cascata a jusante ao selecionar uma etapa e sinapses acesas ao passar o mouse. O botão 🧠 Animação liga/desliga (a escolha fica salva, chave itasul-animacao). Quem usa "reduzir movimento" no sistema começa com a animação desligada e pode ligá-la. É só visual: não altera nenhum dado.
Mapa: leitura, zoom e teclado
- Cartões 288×184 com texto grande; em 1280–1920 px o mapa inteiro cabe na tela com nome ≥ 14 px, rodapé ≥ 11 px e selos ≥ 10,5 px renderizados. Até 1100 px o painel abre em lista (o mapa continua disponível pelo botão).
- Com o painel aberto, o mapa centraliza a etapa selecionada em zoom ≥ 78 %; Ajustar mostra o mapa inteiro. Arrastar o fundo move o mapa e não fecha o painel; um clique simples no fundo fecha.
- Teclado: Tab percorre os cartões; setas movem o foco para o cartão vizinho; Enter/Espaço abrem a etapa.
Regras de dependência (bloqueios)
Uma etapa só é marcada como "aguardando" quando todas as condições valem: a ligação não é um retorno (11→5 "retorno à disponibilidade" é só informativo), nenhuma ponta é ramal opcional (Munck, destinação), a etapa anterior tem tarefas em aberto e a etapa atual ainda não foi concluída. Sem tarefas na anterior, nada é afirmado.
Dados e segurança
- Dados de versões anteriores são migrados automaticamente (v1 → v2): nada é apagado; apenas é adicionada a lista de registros e as etapas padrão voltam à nova posição (etapas criadas por você ficam abaixo do mapa).
- Persistência em
localStorage (chave itasul-painel-v1), só neste navegador. Exportar backup gera um JSON.
- Importar valida o arquivo, pede confirmação e guarda antes uma cópia de segurança (Restaurar cópia de segurança desfaz). Reiniciar também guarda cópia. Arquivo inválido nunca altera os dados.
- Todo texto cadastrado é exibido como texto (sem
innerHTML), evitando injeção de HTML.
- Nada é atribuído automaticamente: responsáveis nascem "A definir"; nenhum valor financeiro, nome ou resultado é pré-cadastrado.
Arquitetura
index.html
src/
main.js orquestra telas, filtros, indicadores, menu de dados
styles.css identidade ITASUL (vermelho, preto, branco, cinza, amarelo discreto)
data/seed.js etapas, ligações, caminhos, ideias da IA (hipóteses editáveis)
state/store.js estado, persistência, CRUD, histórico, import/export
state/layouts.js formas do mapa (raias, árvore, circular): posições calculadas, sem tocar nos dados
state/logic.js funções puras: atrasos, filtros, indicadores, transferências
ui/sectors.js cor/classe por setor
ui/ dom.js (helpers) · form.js (modal) · map.js · views.js (linha do tempo, quadro, lista) · panel.js · team.js · improvements.js · records.js
tests/unit/ estado, lógica, migração e geometria do layout (node:test)
tests/e2e/smoke.mjs teste de interface em navegador real (fluxo geral)
tests/e2e/gestao.mjs teste de interface: funcionários, tarefas, rotina, dependências, indicadores
tests/e2e/cerebro.mjs cores por setor, animação (movimento real dos sinais, cascata, desligar, reduzir movimento) e matriz setor × etapa
tests/e2e/formas.mjs formas do mapa: 7 visões, seleção, filtros, caminhos, teclado, zoom/arrasto, persistência, contraste AA nos 2 temas, responsivo
tests/e2e/refino.mjs refinamento: legibilidade do mapa (px renderizados), cabeçalho/indicadores, arrasto/zoom/seleção, teclado, tema em todas as superfícies
tests/e2e/helpers/contraste.mjs verificador de contraste WCAG AA usado pelos roteiros
tests/e2e/auditoria.mjs auditoria funcional + visual: 13 cartões, filtros, caminhos, tema, contraste WCAG AA nos 2 temas, responsividade (360–1920 px), teclado
ui/theme.js tema claro/escuro (resolução, persistência, acompanhamento do sistema)
tools/serve.mjs servidor estático para desenvolvimento
Modelo: etapas (processos) ≠ funcionários (pessoas) ≠ tarefas. Uma pessoa liga-se a várias etapas por stageIds/responsável/substituto sem duplicar cadastro; uma etapa pode ter várias pessoas e tarefas.
Status
Funcional: tudo da primeira versão, mais painel amplo consolidado, reabrir tarefas, vínculo de pessoas pelo painel, registros operacionais, indicadores calculados e clicáveis, layout em serpentina sem cruzamento de setas, navegação entre etapas vizinhas.
Depende de cadastro seu: funcionários, responsáveis (todas as etapas começam "A definir"), responsabilidades, tarefas, registros, problemas recorrentes, sugestões. Fluxo, atividades e entradas/saídas das etapas são hipóteses do briefing — revise.
Pendente / fora do escopo: compartilhamento entre usuários/dispositivos (dados ficam no navegador; use exportar/importar), integração com TotalLoc/WhatsApp (não autorizada), arrastar etapas para reposicionar, histórico por tarefa/funcionário, zoom por pinça, login e permissões. Tarefas recorrentes (frequência "Diária" etc.) são um rótulo: concluir marca a tarefa inteira, não cada ocorrência.
