Tratativas ARTESP

Sistema web que lê os laudos de fiscalização em PDF, extrai cada apontamento com a respectiva foto e controla a tratativa até a evidência de superação que volta para o órgão regulador. Módulo Cronogramas do SGV, o sistema de gestão viária que usei na área de engenharia.

Problema

Cada ciclo de fiscalização chega como um pacote de laudos em PDF, às vezes de 200 MB, com centenas de fichas de apontamento e a foto de cada uma dentro da página. Abrir ficha por ficha, transcrever rodovia, km, data e ocorrência para uma planilha, recortar a foto na mão e depois montar o documento de evidência consumia dias de trabalho por lote, e o erro de transcrição só aparecia quando o órgão devolvia a tratativa.

Solução

• Importa o PDF direto no navegador, detecta o layout do laudo entre dois formatos conhecidos e extrai rodovia, pista, trecho, km, data e ocorrência
• Recorta a foto de cada ficha da própria página do PDF e associa à ficha certa, com três estratégias em cascata para os laudos fora de alinhamento
• Classifica o apontamento por disciplina e cronograma, aprendendo com as escolhas anteriores de quem importa
• Controla a tratativa com foto do antes e do depois, data de execução, responsável e situação
• Gera o relatório A4 de evidência, com capa e a marca configurável, pronto para virar documento formal
• Quatro perfis de acesso: Administrador, Gestor, Executor e Leitor, com as regras valendo também no banco, via RLS
• Funciona offline e sincroniza de forma incremental quando há rede
• Diagnostica a importação: informa quantas fichas vieram sem foto e separa as três causas possíveis, em vez de deixar a falha passar em silêncio

Demonstração

As três imagens acima são placeholders. A lista dos prints que faltam está no fim deste arquivo.

Stack e decisões técnicas

Escolha	Por que
HTML, CSS e JavaScript puro, sem framework e sem build	O sistema precisa rodar em máquina corporativa sem instalação e sem permissão de administrador. Basta abrir o arquivo
pdf.js embutido no próprio HTML	A leitura do laudo acontece no navegador do usuário. Nenhum documento da empresa sai da máquina para ser processado
Leitura por url e não por data no pdf.js	Com data, um laudo de 200 MB vai inteiro para a memória e as últimas páginas voltam sem foto. Por url o pdf.js lê em pedaços, e as imagens de cada página são liberadas depois do recorte
Filtro de tamanho e de proporção nas imagens	Logotipo e carimbo de cabeçalho passavam como se fossem foto e desalinhavam a associação entre imagem e ficha. O filtro descartou 30 faixas nos 8 PDFs medidos sem perder nenhuma foto
Chave natural por apontamento	Bloqueia a reimportação do mesmo laudo e mantém o vínculo estável quando a ficha é editada
Supabase com RLS e buckets separados	A permissão vale no banco, não só na tela. O sistema é estático, então a regra não pode morar no front
Sincronização incremental	A versão ingênua fazia 2.738 requisições em série a cada sincronização. Hoje sobem apenas os apontamentos e tratativas que faltam do outro lado
Credenciais fora do código	assets/sgv-config.js fica no .gitignore, e a tela de Configurações permite apontar outro projeto sem tocar no código
De arquivo único offline para nuvem	A primeira versão era um HTML só, com IndexedDB e troca de backup à mão. Isso parou de servir quando mais gente passou a lançar tratativa ao mesmo tempo. Ela está preservada em docs/historico/
Entrada manual como rede de segurança	Sempre existe ficha fora do padrão ou página corrompida. Sem a entrada manual, o apontamento simplesmente sumiria do controle

Resultados

Indicador	Número
Apontamentos gerenciados	[PREENCHER]
Laudos processados por lote	8 PDFs no lote medido em julho de 2026
Tamanho dos laudos processados	até 200 MB por arquivo
Requisições por sincronização, antes e depois	2.738 em série, hoje apenas o que falta
Tempo de tratamento de um lote, antes	[PREENCHER]
Tempo de tratamento de um lote, depois	[PREENCHER]
Pessoas usando o sistema	[PREENCHER]

Como rodar

1. Crie um projeto no Supabase e rode sql/schema.sql inteiro no SQL Editor. O script é idempotente e cria tabelas, funções de permissão, políticas de RLS e os buckets de fotos.
2. Copie assets/sgv-config.example.js para assets/sgv-config.js e preencha a URL e a chave anon do seu projeto.
3. Sirva a pasta em qualquer servidor estático e abra login.html. O primeiro usuário cadastrado vira administrador. Para ver o sistema funcionando, importe dados-exemplo/relatorio-fiscalizacao-exemplo.pdf.

Estrutura do projeto

tratativas-artesp/
├── cronogramas.html      o módulo: importação de PDF, tratativas e relatório
├── index.html            painel inicial com atalhos
├── login.html            entrar, criar conta e recuperar senha
├── configuracoes.html    conexão, disciplinas, marca do relatório e dados
├── usuarios.html         usuários e permissões (somente administrador)
├── assets/
│   ├── sgv-core.js       autenticação, permissões, topbar e preferências
│   ├── sgv-core.css      design system: cores, botões, chips, modais
│   ├── sgv-modulo.css    cartão de ficha, antes e depois, fotos
│   ├── sgv-report.js     folha A4 dos relatórios de evidência
│   ├── sgv-brand.js      marca do relatório (sem logotipo nesta cópia pública)
│   └── sgv-config.example.js  modelo da conexão com o Supabase
├── sql/schema.sql        tabelas, permissões, RLS e buckets
├── dados-exemplo/        laudo fictício para importar e testar
└── docs/
    ├── img/              capturas de tela
    └── historico/        a versão single-file offline que veio antes

Prints que faltam

1. docs/img/01-lista-apontamentos.png: lista já com o laudo de exemplo importado, mostrando os filtros de cronograma, disciplina e situação.
2. docs/img/02-tratativa-antes-depois.png: uma ficha aberta, com a foto do antes vinda do PDF e o campo da foto do depois.
3. docs/img/03-relatorio-a4.png: a prévia do relatório A4 de evidência.

---

Desenvolvido por Jonathan Vaz linkedin.com/in/jonathan-vaz-260764b3 · jvaz.eng.dev@gmail.com