/* global React, ReactDOM */
const { useState, useEffect, useMemo, useRef, useCallback } = React;
const ACCENT = { hex: "#E08B2A", soft: "#FBE7CB", ink: "#7A4A11" };
/* Obras pinadas no mapa (compartilhadas entre o card do dashboard e a tela /mapa) */
const OBRAS = [
{ nome: "Estação Brasilândia · Linha 6", bairro: "Brasilândia", lat: -23.467, lng: -46.690, status: "ok", estacas: 384 },
{ nome: "Estação Pompeia · Linha 6", bairro: "Pompeia", lat: -23.527, lng: -46.682, status: "ok", estacas: 240 },
{ nome: "Pátio Logístico Vila Leopoldina", bairro: "Vila Leopoldina", lat: -23.527, lng: -46.728, status: "warn", estacas: 168 },
{ nome: "Túnel TBM-3 · Trecho Norte", bairro: "Santana", lat: -23.503, lng: -46.625, status: "ok", estacas: 96 },
{ nome: "Bloco B7 · Tatuapé", bairro: "Tatuapé", lat: -23.539, lng: -46.575, status: "warn", estacas: 72 },
{ nome: "Reservatório R-8 · Itaquera", bairro: "Itaquera", lat: -23.540, lng: -46.461, status: "alert", estacas: 50 },
{ nome: "Edifício Faria Lima Tower", bairro: "Itaim Bibi", lat: -23.578, lng: -46.689, status: "ok", estacas: 124 },
{ nome: "Centro Logístico Cumbica", bairro: "Guarulhos", lat: -23.435, lng: -46.480, status: "ok", estacas: 210 },
];
// Cor do pin no mapa por status. Aceita os legados (ok/warn/alert) usados
// pela mini-map do dashboard e os status reais da MapaPage (offline /
// ocioso / perfurando / concretando / erro), derivados de gps_posicao.
const corObra = (s, accentHex) => {
switch (s) {
case "ok": return "#22A06B";
case "warn": return accentHex;
case "alert": return "#D14343";
case "ocioso": return "#22A06B"; // verde
case "perfurando": return "#D14343"; // vermelho
case "concretando": return "#3B82F6"; // azul
case "erro": return "#E0A02A"; // ambar
case "offline": return "#94A3B8"; // cinza
default: return accentHex || "#94A3B8";
}
};
const rotuloObra = (s) => ({
ok: "operando", warn: "atenção", alert: "alerta",
perfurando: "perfurando", concretando: "concretando",
ocioso: "ocioso", offline: "offline", erro: "erro",
})[s] || s || "—";
/* ============================================================
GOOGLE MAPS — loader e helpers de geocoding
============================================================ */
let _googleMapsPromise = null;
function loadGoogleMaps() {
if (_googleMapsPromise) return _googleMapsPromise;
_googleMapsPromise = new Promise((resolve, reject) => {
if (window.google && window.google.maps) return resolve(window.google);
const key = window.GOOGLE_MAPS_KEY;
if (!key) return reject(new Error("GOOGLE_MAPS_KEY ausente — confira /config.js"));
const cb = "__gmapsCb_" + Math.random().toString(36).slice(2);
window[cb] = () => { resolve(window.google); try { delete window[cb]; } catch (e) {} };
const s = document.createElement("script");
s.src = `https://maps.googleapis.com/maps/api/js?key=${encodeURIComponent(key)}&libraries=places,geocoding&language=pt-BR®ion=BR&callback=${cb}`;
s.async = true;
s.defer = true;
s.onerror = () => reject(new Error("Falha ao carregar o script do Google Maps"));
document.head.appendChild(s);
});
return _googleMapsPromise;
}
// Preset dark do Google Maps. Aplicado via map.setOptions({styles}) quando
// document.documentElement[data-theme] === 'dark'. Em light, passamos
// styles: [] pra restaurar o estilo padrao.
const MAP_STYLE_DARK = [
{ elementType: "geometry", stylers: [{ color: "#1B2433" }] },
{ elementType: "labels.icon", stylers: [{ visibility: "off" }] },
{ elementType: "labels.text.fill", stylers: [{ color: "#8A93A6" }] },
{ elementType: "labels.text.stroke", stylers: [{ color: "#0F1827" }] },
{ featureType: "administrative", elementType: "geometry", stylers: [{ color: "#3A4660" }] },
{ featureType: "administrative.country", elementType: "labels.text.fill", stylers: [{ color: "#B8C2D6" }] },
{ featureType: "administrative.land_parcel", stylers: [{ visibility: "off" }] },
{ featureType: "administrative.locality", elementType: "labels.text.fill", stylers: [{ color: "#C5D0E5" }] },
{ featureType: "poi", elementType: "labels.text.fill", stylers: [{ color: "#8A93A6" }] },
{ featureType: "poi.park", elementType: "geometry", stylers: [{ color: "#162033" }] },
{ featureType: "poi.park", elementType: "labels.text.fill", stylers: [{ color: "#5A6478" }] },
{ featureType: "poi.park", elementType: "labels.text.stroke", stylers: [{ color: "#0F1827" }] },
{ featureType: "road", elementType: "geometry.fill", stylers: [{ color: "#2A3447" }] },
{ featureType: "road", elementType: "labels.text.fill", stylers: [{ color: "#8A93A6" }] },
{ featureType: "road.arterial", elementType: "geometry", stylers: [{ color: "#323D52" }] },
{ featureType: "road.highway", elementType: "geometry", stylers: [{ color: "#3A4660" }] },
{ featureType: "road.local", elementType: "labels.text.fill", stylers: [{ color: "#5A6478" }] },
{ featureType: "transit", elementType: "labels.text.fill", stylers: [{ color: "#5A6478" }] },
{ featureType: "water", elementType: "geometry", stylers: [{ color: "#0B131F" }] },
{ featureType: "water", elementType: "labels.text.fill", stylers: [{ color: "#3D4860" }] },
];
async function geocodeEndereco(query, extra = {}) {
const g = await loadGoogleMaps();
return new Promise((resolve, reject) => {
new g.maps.Geocoder().geocode(
{ address: query, region: "br", componentRestrictions: { country: "br" }, ...extra },
(results, status) => {
if (status === "OK" && results && results[0]) {
const loc = results[0].geometry.location;
resolve({ lat: loc.lat(), lng: loc.lng(), formatted: results[0].formatted_address, raw: results[0] });
} else {
reject(new Error("Geocode falhou: " + status));
}
}
);
});
}
// Reverse geocoding: dado lat/lng, devolve componentes do endereco mais
// proximo. Usado pelo botao "Buscar endereço pelas coordenadas" no modal
// de edicao da maquina (preenche endereco/cidade a partir de lat/lon).
async function reverseGeocode(lat, lng) {
const g = await loadGoogleMaps();
return new Promise((resolve, reject) => {
new g.maps.Geocoder().geocode({ location: { lat: Number(lat), lng: Number(lng) } }, (results, status) => {
if (status === "OK" && results && results[0]) {
resolve({ formatted: results[0].formatted_address, raw: results[0] });
} else {
reject(new Error("Reverse geocode falhou: " + status));
}
});
});
}
async function geocodePorPlaceId(placeId) {
const g = await loadGoogleMaps();
return new Promise((resolve, reject) => {
new g.maps.Geocoder().geocode({ placeId }, (results, status) => {
if (status === "OK" && results && results[0]) {
const loc = results[0].geometry.location;
resolve({ lat: loc.lat(), lng: loc.lng(), formatted: results[0].formatted_address, raw: results[0] });
} else {
reject(new Error("Place details falhou: " + status));
}
});
});
}
// Autocomplete de enderecos/POIs via Places API (New). Se a API nao
// estiver habilitada/liberada na chave do GCP, falha silenciosamente
// na primeira tentativa e desliga pro resto da sessao — evita console
// spam. UI continua funcional (CEP + geocode no save sao via Geocoding
// API que e' separada). `window.__autocompleteIndisponivel` e' inspecionado
// pela UI pra mostrar uma notinha discreta no modal.
let _autocompleteDesligado = false;
async function autocompleteEnderecos(input) {
if (_autocompleteDesligado) return [];
if (!input || !input.trim()) return [];
const g = await loadGoogleMaps();
try {
const placesLib = await g.maps.importLibrary("places");
const { AutocompleteSuggestion, AutocompleteSessionToken } = placesLib;
const sessionToken = new AutocompleteSessionToken();
const { suggestions } = await AutocompleteSuggestion.fetchAutocompleteSuggestions({
input,
sessionToken,
language: "pt-BR",
region: "br",
includedRegionCodes: ["br"],
});
return (suggestions || [])
.filter(s => s.placePrediction)
.map(s => {
const p = s.placePrediction;
const txt = (v) => (v && typeof v === 'object' ? v.text : v) || "";
return {
description: txt(p.text),
structured_formatting: {
main_text: txt(p.mainText),
secondary_text: txt(p.secondaryText),
},
place_id: p.placeId,
};
});
} catch (e) {
// Loga so a primeira vez (com instrucao) e desliga novas tentativas.
if (!_autocompleteDesligado) {
_autocompleteDesligado = true;
window.__autocompleteIndisponivel = true;
console.info(
"[Autocomplete desligado] Places API (New) bloqueada. Habilite no GCP " +
"e/ou ajuste API key restrictions. UI continua funcional via CEP/geocode."
);
}
return [];
}
}
function parseEnderecoGoogle(geocodeResult) {
const comps = geocodeResult?.address_components || [];
const get = (...types) => {
for (const t of types) {
const c = comps.find(x => x.types.includes(t));
if (c) return c.long_name;
}
return "";
};
const rua = get("route");
const bairro = get("sublocality_level_1", "sublocality", "neighborhood");
return {
rua: [rua, bairro].filter(Boolean).join(", ") || (geocodeResult?.formatted_address || "").split(",")[0],
cidade: get("administrative_area_level_2", "locality") || "",
uf: get("administrative_area_level_1") || "",
};
}
/* ============================================================
ICONS
============================================================ */
const I = {
dash: (p) => ,
pile: (p) => ,
map: (p) => ,
signal:(p)=> ,
bell: (p) => ,
cog: (p) => ,
search:(p)=> ,
arrow:(p) => ,
eye: (p) => ,
up: (p) => ,
down: (p) => ,
chev: (p) => ,
plus: (p) => ,
pencil: (p) => ,
check: (p) => ,
undo: (p) => ,
trash: (p) => ,
user: (p) => ,
truck:(p) => ,
clock:(p) => ,
sun: (p) => ,
moon: (p) => ,
funnel:(p) => ,
};
// ── Tema (light/dark) ─────────────────────────────────────────────
// Persistencia simples em localStorage. Valor padrao = "light". O
// inline script no index.html ja aplica o atributo antes do React
// montar (evita flash); o useTema mantem o estado em sincronia.
const TEMA_KEY = 'compugeo_theme';
// Quantidade de pastas mostradas inicialmente na sidebar. O usuario carrega
// mais clicando no botao no fim da lista. Valor sera configuravel pela
// tela de configuracoes (futuro) — por isso ja persiste em localStorage.
const PASTAS_PAG_KEY = 'compugeo_pastas_pagina';
const PASTAS_PAG_PADRAO = 25;
function lerPastasPagina() {
try {
const v = parseInt(localStorage.getItem(PASTAS_PAG_KEY), 10);
return Number.isFinite(v) && v > 0 ? v : PASTAS_PAG_PADRAO;
} catch (_) { return PASTAS_PAG_PADRAO; }
}
// Helper compartilhado: salva uma alteracao parcial nas preferencias do
// usuario via PUT /api/configuracoes. O backend faz merge dentro de
// `preferencias_usuario.dados`, entao mandar so o caminho alterado
// (`{ dashboard: { producaoMensal: { tipoGrafico: 'barras' } } }`)
// nao apaga as outras chaves.
function salvarPrefUsuario(parcial) {
return fetch('/api/configuracoes', {
method: 'PUT',
credentials: 'same-origin',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ dados: parcial }),
}).catch(() => {});
}
function lerTemaSalvo() {
// Default de fabrica = dark. So volta 'light' se o usuario salvou
// explicitamente esse valor no localStorage.
try {
const t = localStorage.getItem(TEMA_KEY);
return t === 'light' ? 'light' : 'dark';
} catch (_) { return 'dark'; }
}
function aplicarTema(tema) {
document.documentElement.setAttribute('data-theme', tema);
try { localStorage.setItem(TEMA_KEY, tema); } catch (_) {}
// Sincroniza o theme-color (status-bar do iOS PWA / Chrome Android) com
// a cor da .dash-head do tema ativo. Sem isso, ao alternar tema dentro
// do app a tira do topo continuava na cor do tema antigo.
try {
let meta = document.querySelector('meta[name="theme-color"]:not([media])');
if (!meta) {
meta = document.createElement('meta');
meta.setAttribute('name', 'theme-color');
document.head.appendChild(meta);
}
meta.setAttribute('content', tema === 'dark' ? '#121C2B' : '#0B2545');
} catch (_) {}
}
function useTema() {
const [tema, setTema] = useState(() => lerTemaSalvo());
// Salva no servidor (preferencias_usuario.dados.preferencias.tema). Em
// paralelo continua escrevendo no localStorage via aplicarTema pra
// garantir o "no-flash" no proximo boot (o inline script em index.html
// le localStorage antes de qualquer fetch). Sync remoto e' fire-and-
// forget — se falhar, o local ainda foi gravado.
const salvarRemoto = (novo) => {
salvarPrefUsuario({ preferencias: { tema: novo } });
};
const alternar = () => setTema(t => {
const novo = t === 'dark' ? 'light' : 'dark';
aplicarTema(novo);
salvarRemoto(novo);
return novo;
});
const definir = (novo) => {
if (novo !== 'light' && novo !== 'dark') return;
aplicarTema(novo);
salvarRemoto(novo);
setTema(novo);
};
return [tema, alternar, definir];
}
function TemaToggle({ tema, onAlternar }) {
const titulo = tema === 'dark' ? 'Trocar para tema claro' : 'Trocar para tema escuro';
return (
);
}
/* ============================================================
LOGIN
============================================================ */
function LoginScreen({ accent, onLogin }) {
const [user, setUser] = useState("");
const [pw, setPw] = useState("");
const [show, setShow] = useState(false);
const [remember, setRemember] = useState(true);
const [loading, setLoading] = useState(false);
const [erro, setErro] = useState("");
const onSubmit = async (e) => {
e.preventDefault();
setErro("");
const email = user.trim();
if (!email || !pw) {
setErro("Informe e-mail e senha.");
return;
}
setLoading(true);
try {
const resp = await fetch("/api/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
credentials: "same-origin",
body: JSON.stringify({ email, senha: pw, manter: remember }),
});
if (!resp.ok) {
const corpo = await resp.json().catch(() => ({}));
setLoading(false);
setErro(corpo.erro || "Falha no login.");
return;
}
const corpo = await resp.json();
setLoading(false);
onLogin({
cliente: corpo.cliente || "",
admin: !!corpo.admin,
papel: corpo.papel || (corpo.admin ? "admin_sistema" : "usuario"),
nome: corpo.nome || "",
email: corpo.email || "",
politicaAceita: !!corpo.politicaAceita,
});
} catch (err) {
setLoading(false);
setErro("Não foi possível conectar. Tente novamente.");
}
};
return (
ENTRAR NA PLATAFORMA
Bem-vindo de volta
Acesse o painel da sua obra para continuar.
);
}
/* ============================================================
SELEÇÃO DE EMPRESA (admin)
============================================================ */
// Tela de aceite da politica de privacidade. Mostrada na PRIMEIRA sessao
// (politica_aceita_em IS NULL no banco). Bloqueia o acesso ao Dashboard
// ate o usuario marcar o checkbox e clicar em "Aceitar e continuar".
// Tem botao "Sair" pra quem nao quer aceitar — derruba a sessao.
// Layout responsivo: em mobile (<600px) ocupa tela cheia, sem bordas
// arredondadas; botoes empilhados. Em desktop, card centralizado.
function PoliticaScreen({ accent, onAceito, onSair }) {
const [aceito, setAceito] = useState(false);
const [salvando, setSalvando] = useState(false);
const [erro, setErro] = useState(null);
const [mobile, setMobile] = useState(() => typeof window !== "undefined" && window.innerWidth < 600);
useEffect(() => {
const onResize = () => setMobile(window.innerWidth < 600);
window.addEventListener("resize", onResize);
return () => window.removeEventListener("resize", onResize);
}, []);
const enviar = async () => {
if (!aceito || salvando) return;
setSalvando(true);
setErro(null);
try {
const r = await fetch("/api/politica-aceitar", {
method: "POST",
credentials: "same-origin",
});
if (!r.ok) {
const j = await r.json().catch(() => ({}));
throw new Error(j.erro || `Erro ${r.status}`);
}
onAceito();
} catch (e) {
setErro(String(e.message || e));
setSalvando(false);
}
};
return (
Primeiro acesso
Política de Privacidade
Antes de continuar, leia e aceite a Política de Privacidade. Você só precisa fazer isso uma vez.
{erro && (
{erro}
)}
);
}
function EmpresaSelectScreen({ accent, onSelecionar, onSair }) {
const [empresas, setEmpresas] = useState([]);
const [filtro, setFiltro] = useState("");
const [carregando, setCarregando] = useState(true);
const [erro, setErro] = useState("");
const [enviando, setEnviando] = useState(false);
useEffect(() => {
let vivo = true;
(async () => {
try {
const r = await fetch("/api/empresas", { credentials: "same-origin" });
if (!r.ok) {
if (!vivo) return;
setErro("Falha ao carregar empresas.");
setCarregando(false);
return;
}
const lista = await r.json();
if (!vivo) return;
setEmpresas(Array.isArray(lista) ? lista : []);
setCarregando(false);
} catch {
if (!vivo) return;
setErro("Não foi possível conectar.");
setCarregando(false);
}
})();
return () => { vivo = false; };
}, []);
const escolher = async (empresa) => {
setErro("");
setEnviando(true);
try {
const r = await fetch("/api/selecionar-empresa", {
method: "POST",
headers: { "Content-Type": "application/json" },
credentials: "same-origin",
body: JSON.stringify({ empresa }),
});
if (!r.ok) {
const c = await r.json().catch(() => ({}));
setErro(c.erro || "Falha ao selecionar empresa.");
setEnviando(false);
return;
}
const c = await r.json();
onSelecionar(c.cliente || empresa);
} catch {
setErro("Não foi possível conectar.");
setEnviando(false);
}
};
const filtradas = empresas.filter(e =>
e.toLowerCase().includes(filtro.trim().toLowerCase())
);
return (
ADMINISTRADOR
Selecione a empresa
Você está autenticado como administrador. Escolha a empresa que deseja acessar.
{erro &&
{erro}
}
{carregando &&
Carregando…
}
{!carregando && filtradas.length === 0 && (
{empresas.length === 0 ? "Nenhuma empresa cadastrada." : "Nenhuma empresa encontrada."}
)}
{!carregando && filtradas.map((e) => (
))}
);
}
/* ============================================================
DASHBOARD
============================================================ */
const SPARK_VAZIA = [0, 0, 0, 0, 0, 0, 0];
const KPI_VAZIO = { valor: 0, delta: null, sparkline: SPARK_VAZIA };
const KPI_MAQUINAS_VAZIO = { valor: "0/0", delta: null, sparkline: [], media: 0, taxa: 0, online: 0, total: 0 };
const KPIS_VAZIOS = { estacas: KPI_VAZIO, metros: KPI_VAZIO, concreto: KPI_VAZIO, maquinas: KPI_MAQUINAS_VAZIO };
const fmtInt = n => Math.round(Number(n) || 0).toLocaleString("pt-BR");
function Dashboard({ accent, cliente, papel = "usuario", nome = "", email = "", onClienteChange, onSair }) {
// Helpers de permissao (defesa em profundidade — backend e a fonte real
// da verdade; aqui so escondemos elementos para nao confundir o usuario).
const podeAdministrar = papel === "admin_sistema" || papel === "admin_cliente";
const ehAdminSistema = papel === "admin_sistema";
const [tema, alternarTema, definirTema] = useTema();
// Drawer da sidebar em mobile (<768px). Em desktop fica sempre visivel,
// entao esse estado e ignorado pelo CSS.
const [sidebarAberto, setSidebarAberto] = useState(false);
const fecharSidebar = useCallback(() => setSidebarAberto(false), []);
// Lista de empresas pra o dropdown de filtro do admin_sistema.
const [empresas, setEmpresas] = useState([]);
useEffect(() => {
if (!ehAdminSistema) return;
fetch("/api/empresas", { credentials: "same-origin" })
.then(r => r.ok ? r.json() : [])
.then(arr => setEmpresas(Array.isArray(arr) ? arr : []))
.catch(() => {});
}, [ehAdminSistema]);
// Troca o cliente filtrado (ou limpa para "todos"). Re-emite o JWT.
const trocarCliente = useCallback(async (alvo) => {
try {
const r = await fetch("/api/selecionar-empresa", {
method: "POST",
credentials: "same-origin",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ empresa: alvo || "" }),
});
if (!r.ok) {
const e = await r.json().catch(() => ({}));
throw new Error(e.erro || `Erro ${r.status}`);
}
const j = await r.json();
if (typeof onClienteChange === "function") onClienteChange(j.cliente || "");
} catch (e) {
window.alert(`Falha ao trocar cliente: ${e.message || e}`);
}
}, [onClienteChange]);
const [active, setActive] = useState("dashboard");
// Obra atualmente em foco na tela de detalhes (clicada no FrontList).
// null quando nao ha obra selecionada.
const [obraSelecionada, setObraSelecionada] = useState(null);
const [estacasOpen, setEstacasOpen] = useState(false);
const [pastas, setPastas] = useState(null);
const [pastasErr, setPastasErr] = useState(null);
// Maquinas pra alimentar o mini-mapa do Dashboard (mesmos dados que
// a MapaPage usa). Carrega 1 vez ao montar — o usuario abre a tela
// cheia pra editar/atualizar.
const [maquinasMapa, setMaquinasMapa] = useState([]);
useEffect(() => {
fetch('/api/maquinas-mapa', { credentials: 'same-origin' })
.then(r => r.ok ? r.json() : [])
.then(arr => setMaquinasMapa(Array.isArray(arr) ? arr : []))
.catch(() => {});
}, []);
const obrasMiniMapa = React.useMemo(() => maquinasMapa
.filter(m => {
if (m.lat == null || m.lon == null) return false;
const lat = Number(m.lat), lon = Number(m.lon);
if (!Number.isFinite(lat) || !Number.isFinite(lon)) return false;
if (lat === 0 && lon === 0) return false;
if (lat < -90 || lat > 90 || lon < -180 || lon > 180) return false;
return true;
})
.map(m => ({
id: m.id,
nome: m.tag || m.nome || m.num_serie,
bairro: m.cidade || '',
lat: Number(m.lat),
lng: Number(m.lon),
status: m.status,
estacas: 0,
})), [maquinasMapa]);
// Paginacao da lista de pastas na sidebar. O passo de carregamento (+25
// por padrao) virá da tela de configuracoes; aqui só lemos do storage.
const [limitePastas, setLimitePastas] = useState(() => lerPastasPagina());
// Reset ao recarregar a lista pra nao manter estado de "muitas paginas
// abertas" entre cargas (ex: depois de salvar uma copia editada).
useEffect(() => { setLimitePastas(lerPastasPagina()); }, [pastas]);
const [pastaAberta, setPastaAberta] = useState(null);
const [maquinaAberta, setMaquinaAberta] = useState(null);
// Filtro especial vindo da busca livre (ex.: ">25"). Quando setado,
// mostra a planilha PastaPlanilha alimentada por /api/lista-prof.
const [filtroProf, setFiltroProf] = useState(null); // { operador, metros }
const [planilha, setPlanilha] = useState(null);
const [planilhaCarregando, setPlanilhaCarregando] = useState(false);
const [estacaAberta, setEstacaAberta] = useState(null);
// De onde a estaca aberta foi acessada: "dashboard" (widget "Ultimas
// estacas executadas") ou "planilha" (pasta lateral, busca, filtro). Usado
// pelo rotulo do botao Voltar do EstacaGrafico em mobile ("← Dashboard"
// vs "← Planilha"). null quando nenhuma estaca esta' aberta.
const [origemEstaca, setOrigemEstaca] = useState(null);
// Lista de navegação ativa (origem: pasta clicada OU últimas estacas).
// Cada item: { pasta, arquivo }. Usada pelo foot-nav e pelo ↑/↓.
const [navLista, setNavLista] = useState([]);
// Tipo da pasta atualmente expandida na sidebar — "contrato" ou
// "obra-editada". Necessario porque uma obra editada pode ter o mesmo
// nome de um contrato existente.
const [tipoPastaAberta, setTipoPastaAberta] = useState(null);
// Fluxo de edicao manual da estaca (duplo-clique). Etapa 1: pedir login
// de admin; etapa 2: abrir o editor com os dados da estaca selecionada.
const [estacaParaEditar, setEstacaParaEditar] = useState(null); // { arquivo, contrato }
// Pos-admin reauth, se a sessao nao tinha operador, pedimos credenciais
// dele antes de abrir o editor — admin nao pode aparecer como autor.
const [operadorParaIdentificar, setOperadorParaIdentificar] = useState(null); // { arquivo }
const [editorAberto, setEditorAberto] = useState(null); // { arquivo, contrato }
// Apos autorizar a edicao, perguntamos se o usuario quer abrir na mesma
// aba (modal sobre o dashboard) ou em uma nova aba (editor-tab.html).
const [escolhaTab, setEscolhaTab] = useState(null); // { arquivo, contrato }
// Apos autenticar admin para um contrato, libera todas as estacas dele
// sem pedir senha novamente. Trocando de contrato (pasta), volta a pedir.
const [contratoAutorizado, setContratoAutorizado] = useState(null);
const [kpis, setKpis] = useState(KPIS_VAZIOS);
const [metricaProd, setMetricaProd] = useState("estacas");
const [granProd, setGranProd] = useState("mensal"); // "mensal" | "diaria"
const [periodoProd, setPeriodoProd] = useState(6); // meses (mensal) ou dias (diaria)
const [maquinaProd, setMaquinaProd] = useState(""); // "" = todas; senao num_serie
const [maquinasProd, setMaquinasProd] = useState([]); // [{numSerie, tag}]
const [diametroProd, setDiametroProd] = useState(""); // "" = todos; senao mm
const [diametrosProd, setDiametrosProd] = useState([]); // [{diametro, estacas}]
// tipoGrafico e ocultarDiasSemProducao agora moram em preferencias_usuario
// (sincronizam entre dispositivos do mesmo login). Os defaults aplicam ate
// o fetch de /api/configuracoes chegar — quando chega, o useEffect abaixo
// sobrescreve via setCfgDashboard.
const [tipoGraficoProd, setTipoGraficoProdState] = useState('linha');
const setTipoGraficoProd = useCallback((v) => {
const novo = v === 'barras' ? 'barras' : 'linha';
setTipoGraficoProdState(novo);
salvarPrefUsuario({ dashboard: { producaoMensal: { tipoGrafico: novo } } });
}, []);
const [ocultarSemProd, setOcultarSemProdState] = useState(false);
const setOcultarSemProd = useCallback((v) => {
const novo = !!v;
setOcultarSemProdState(novo);
salvarPrefUsuario({ dashboard: { producaoMensal: { ocultarDiasSemProducao: novo } } });
}, []);
// Config do dashboard carregada de /api/configuracoes — define ordem
// dos KPIs, tipo do grafico de producao, ocultar dias sem producao,
// e os defaults dos selects (aplicados so na primeira vez).
const [cfgDashboard, setCfgDashboard] = useState(null);
const [producao, setProducao] = useState([]);
const [toasts, setToasts] = useState([]);
const [importandoDmp, setImportandoDmp] = useState(false);
// Estado da importacao em lote de .cge: null quando ocioso; durante a
// importacao guarda { fase, total, processadas, atual, resumo, erro }.
// Ao fim, vira { fase: 'pronto', resumo: {...} } e o modal mostra o
// sumario; usuario fecha manualmente para o estado voltar a null.
const [importCge, setImportCge] = useState(null);
const [importMenuAberto, setImportMenuAberto] = useState(false);
// Modal de cadastro manual de obra (botao "Adicionar nova obra" do dash).
const [novaObraAberta, setNovaObraAberta] = useState(false);
// Quando preenchido, o mesmo modal abre em modo edicao com prefill.
const [obraEditando, setObraEditando] = useState(null);
// {nome, contrato} pra abrir o modal de criar com esses campos prefilled
// (vem do fluxo de "obra detectada nao cadastrada").
const [novaObraInicial, setNovaObraInicial] = useState(null);
// Bump pra forcar o FrontList a buscar novamente apos cadastro/edicao de obra.
const [obrasReloadKey, setObrasReloadKey] = useState(0);
// Pares (obra, contrato) detectados em estacas novas mas sem cadastro.
const [orfaos, setOrfaos] = useState([]);
const [orfaosAberto, setOrfaosAberto] = useState(false);
// Pares dispensados pelo usuario nesta sessao — nao reabre o modal pra
// eles. Persiste em sessionStorage pra sobreviver navegacao interna.
const dispensadosOrfaosRef = useRef(null);
const [refreshKey, setRefreshKey] = useState(0);
// Bump usado para forcar o iframe do EstacaGrafico a recarregar os dados
// quando o arquivo aberto nao muda mas o conteudo mudou (ex: salvar uma
// copia editada existente). Quando o arquivo muda (original → copia
// nova), nao precisa do bump — a propria mudanca de prop dispara reload.
const [chartReloadKey, setChartReloadKey] = useState(0);
const inputDmpRef = useRef(null);
const inputCgeRef = useRef(null);
const inputCgePastaRef = useRef(null);
const importMenuRef = useRef(null);
const importEsRef = useRef(null);
// Estado de "estaca nao lida" e' calculado pelo servidor (estaca_leitura)
// e vem em cada item de `pastas` como `arquivosNaoLidos: [...]`.
// Aqui mantemos apenas helpers que leem desses campos. Sem localStorage:
// estado persiste no banco e funciona em qualquer device/browser.
// Cache dos arquivos ja vistos no PileTable, mantido aqui (no
// Dashboard) e nao dentro do PileTable. Razao: o PileTable e
// desmontado toda vez que o usuario navega para outra tela
// (pasta, maquina, grafico, mapa); se o cache morresse junto,
// arquivos novos chegados durante a ausencia do usuario seriam
// tratados como ja conhecidos no remount e nunca virariam toast.
const conhecidasUltimasRef = useRef(null);
// Limite de 2 abas de edicao simultaneas. Guarda as `Window` retornadas
// por window.open pra contar quantas ainda estao abertas (descarta as
// que o usuario ja fechou via `w.closed`). Reseta no remount do
// Dashboard (troca de cliente) e no reload do browser — aceitavel.
const abasEditorAbertasRef = useRef([]);
const notify = useCallback((mensagem, tipo = "info") => {
const id = Date.now() + Math.random();
setToasts(t => [...t, { id, mensagem, tipo }]);
setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 6000);
}, []);
// Inicializa o Set de pares dispensados a partir do sessionStorage.
useEffect(() => {
try {
const raw = sessionStorage.getItem("compugeo_obras_orfaos_dispensadas");
dispensadosOrfaosRef.current = new Set(raw ? JSON.parse(raw) : []);
} catch (_) {
dispensadosOrfaosRef.current = new Set();
}
}, []);
// Detecta obras nao cadastradas a partir das estacas novas. Dedupe por
// par (obra, contrato); ignora vazios e pares ja dispensados; intersecta
// com /api/obras pra remover os ja cadastrados.
const checarOrfaos = useCallback(async (novasLista) => {
if (!dispensadosOrfaosRef.current) return;
// Respeita a config do dashboard — usuario pode desligar o aviso.
if (cfgDashboard && cfgDashboard.detectarObrasOrfas === false) return;
// admin_sistema em modo "ver tudo" (cliente vazio): /api/ultimas-estacas
// devolve estacas de TODOS os clientes e /api/obras devolve [] — a
// intersecao abaixo trataria todo par (obra, contrato) como orfao,
// misturando dados de clientes diferentes no modal. Pula a deteccao
// ate o admin selecionar uma empresa. Cadastrar uma obra nesse modo
// ja' e' bloqueado pelo servidor (POST /api/obras → 403).
if (papel === 'admin_sistema' && !cliente) return;
const paresMap = new Map();
for (const e of novasLista || []) {
const nome = String(e.obra || "").trim();
const contrato = String(e.contrato || "").trim();
if (!nome || !contrato) continue;
const key = `${nome.toLowerCase()}|${contrato.toLowerCase()}`;
if (dispensadosOrfaosRef.current.has(key)) continue;
if (!paresMap.has(key)) paresMap.set(key, { nome, contrato, estacas: 0 });
paresMap.get(key).estacas++;
}
if (paresMap.size === 0) return;
try {
const r = await fetch("/api/obras", { credentials: "same-origin" });
if (!r.ok) return;
const cadastradas = await r.json();
const cadastradasSet = new Set(
(Array.isArray(cadastradas) ? cadastradas : []).map(o =>
`${String(o.nome || "").toLowerCase()}|${String(o.contrato || "").toLowerCase()}`
)
);
for (const key of [...paresMap.keys()]) {
if (cadastradasSet.has(key)) paresMap.delete(key);
}
} catch (_) {
return;
}
if (paresMap.size === 0) return;
// Merge com orfaos atuais (caso o modal ja esteja aberto com outros).
setOrfaos(prev => {
const merged = new Map(prev.map(o => [
`${o.nome.toLowerCase()}|${o.contrato.toLowerCase()}`, { ...o },
]));
for (const [key, val] of paresMap) {
if (!merged.has(key)) merged.set(key, val);
else merged.get(key).estacas += val.estacas;
}
return [...merged.values()];
});
setOrfaosAberto(true);
}, [cfgDashboard, papel, cliente]);
// Wrapper que o PileTable chama: roda o notify habitual + dispara a
// verificacao de orfaos quando vem a lista de estacas novas.
const handleNovasEstacas = useCallback((mensagem, novasLista) => {
notify(mensagem);
if (Array.isArray(novasLista) && novasLista.length > 0) {
checarOrfaos(novasLista);
}
// Refaz o fetch da lista de obras pra atualizar a contagem de
// estacas executadas (calculada via JOIN no backend, mas o front
// so re-busca quando o reloadKey muda).
setObrasReloadKey(k => k + 1);
}, [notify, checarOrfaos]);
// Carrega config de Dashboard:
// - sempre que o usuario entra/volta para a tela "dashboard"
// (pra refletir mudancas feitas em Configuracoes sem precisar F5);
// - os defaults dos selects (metrica/granularidade/periodo/maquina)
// aplicam APENAS no primeiro mount, pra nao atropelar selecoes
// que o usuario fez nos selects do proprio dashboard.
const aplicouDefaultsProdRef = useRef(false);
// Sinaliza que o primeiro fetch de /api/configuracoes terminou. Antes
// disso, o card de Producao nao busca dados nem renderiza o chart —
// evita o flash "linha 6 meses" seguido de "barras 90 dias" enquanto
// os defaults reais sobem do servidor.
const [cfgInicialCarregada, setCfgInicialCarregada] = useState(false);
useEffect(() => {
// active 'dashboard' eh o caso comum; tambem aceita undefined pra
// o mount inicial onde active pode nao estar setado ainda.
if (active && active !== 'dashboard') return;
let vivo = true;
fetch('/api/configuracoes', { credentials: 'same-origin' })
.then(r => r.ok ? r.json() : null)
.then(j => {
if (!vivo) return;
if (!j || !j.dados) {
// Mesmo sem cfg valida, libera o chart pra renderizar com
// defaults — evita ficar travado em "carregando" infinito.
setCfgInicialCarregada(true);
return;
}
// Sync de tema entre dispositivos do mesmo login. So aplicamos se
// o servidor tiver o tema EXPLICITAMENTE salvo em
// preferencias_usuario (j.prefsUsuario), nunca pelo default — caso
// contrario um usuario que estava com 'light' antes de mudarmos o
// default de fabrica pra 'dark' veria a cor flipar sem ter mexido.
const temaSalvo = j.prefsUsuario?.preferencias?.tema;
if ((temaSalvo === 'dark' || temaSalvo === 'light') && temaSalvo !== tema) {
definirTema(temaSalvo);
}
if (!j.dados.dashboard) return;
const d = j.dados.dashboard;
setCfgDashboard(d);
const pm = d.producaoMensal || {};
// tipoGrafico e ocultarDiasSemProducao vivem em preferencias_usuario
// e refletem mudancas remotas (ex: usuario mexeu no celular e abriu
// o desktop) — entao sao atualizados a cada fetch da config, nao so
// no primeiro mount.
if (pm.tipoGrafico === 'barras' || pm.tipoGrafico === 'linha') {
setTipoGraficoProdState(pm.tipoGrafico);
}
if (typeof pm.ocultarDiasSemProducao === 'boolean') {
setOcultarSemProdState(pm.ocultarDiasSemProducao);
}
if (!aplicouDefaultsProdRef.current) {
if (pm.metricaPadrao) setMetricaProd(pm.metricaPadrao);
if (pm.granularidadePadrao) setGranProd(pm.granularidadePadrao);
if (Number.isFinite(Number(pm.periodoPadrao)) && Number(pm.periodoPadrao) > 0) {
setPeriodoProd(Number(pm.periodoPadrao));
}
if (typeof pm.maquinaPadrao === 'string') setMaquinaProd(pm.maquinaPadrao);
aplicouDefaultsProdRef.current = true;
}
setCfgInicialCarregada(true);
})
.catch(() => { if (vivo) setCfgInicialCarregada(true); });
return () => { vivo = false; };
}, [active]);
// `refreshKey` permite reexecutar os fetches de KPIs/produção apos uma
// importacao de .DMP, sem recarregar a pagina. Alem disso, faz polling
// a cada 60s (mesma cadencia da PileTable) e refresh ao voltar pra aba —
// assim o delta do KPI (% vs media dos 7 dias) acompanha as estacas
// novas que foram aparecendo durante o dia.
useEffect(() => {
let cancelado = false;
const fetchKpis = () => {
fetch(`/api/dashboard`, { credentials: "same-origin" })
.then(r => r.json())
.then(data => { if (!cancelado && data && !data.erro) setKpis(data); })
.catch(() => {});
};
fetchKpis();
const id = setInterval(fetchKpis, 60 * 1000);
const onVisibility = () => {
if (document.visibilityState === "visible") fetchKpis();
};
document.addEventListener("visibilitychange", onVisibility);
return () => {
cancelado = true;
clearInterval(id);
document.removeEventListener("visibilitychange", onVisibility);
};
}, [refreshKey]);
useEffect(() => {
// Espera a primeira /api/configuracoes responder antes de buscar
// producao — sem isso o front faz UM fetch com defaults do React
// (mensal/6) e DEPOIS outro com os defaults do usuario (diaria/90),
// causando flash do chart "errado" na carga.
if (!cfgInicialCarregada) return;
let cancelado = false;
const partes = [];
partes.push(granProd === "diaria" ? `granularidade=diaria&dias=${periodoProd}` : `granularidade=mensal&meses=${periodoProd}`);
if (maquinaProd) partes.push(`numSerie=${encodeURIComponent(maquinaProd)}`);
if (diametroProd) partes.push(`diametro=${encodeURIComponent(diametroProd)}`);
fetch(`/api/producao?${partes.join('&')}`, { credentials: "same-origin" })
.then(r => r.json())
.then(data => { if (!cancelado && Array.isArray(data)) setProducao(data); })
.catch(() => {});
return () => { cancelado = true; };
}, [cfgInicialCarregada, granProd, periodoProd, maquinaProd, diametroProd, refreshKey]);
// Lista de maquinas com producao pra alimentar o dropdown de filtro do
// card de producao. Recarrega quando troca de cliente ou refresh manual.
useEffect(() => {
let cancelado = false;
fetch(`/api/maquinas-producao`, { credentials: "same-origin" })
.then(r => r.json())
.then(data => {
if (cancelado || !Array.isArray(data)) return;
setMaquinasProd(data);
// Se a maquina selecionada nao existe mais (mudou de cliente, etc.)
// volta pra "todas" pra nao mostrar grafico vazio.
if (maquinaProd && !data.some(m => String(m.numSerie) === String(maquinaProd))) {
setMaquinaProd("");
}
})
.catch(() => {});
return () => { cancelado = true; };
}, [cliente, refreshKey]); // eslint-disable-line react-hooks/exhaustive-deps
// Lista de diametros com producao pra alimentar o filtro de diametro no
// popover do card de producao. Mesmo padrao do fetch de maquinas.
useEffect(() => {
let cancelado = false;
fetch(`/api/diametros-producao`, { credentials: "same-origin" })
.then(r => r.json())
.then(data => {
if (cancelado || !Array.isArray(data)) return;
setDiametrosProd(data);
if (diametroProd && !data.some(d => String(d.diametro) === String(diametroProd))) {
setDiametroProd("");
}
})
.catch(() => {});
return () => { cancelado = true; };
}, [cliente, refreshKey]); // eslint-disable-line react-hooks/exhaustive-deps
const importarDmp = useCallback(async (arquivo) => {
if (!arquivo) return;
if (!/\.dmp$/i.test(arquivo.name)) {
notify("Selecione um arquivo .dmp", "erro");
return;
}
setImportandoDmp(true);
try {
const fd = new FormData();
fd.append("arquivo", arquivo);
const resp = await fetch("/api/import-dmp", {
method: "POST",
credentials: "same-origin",
body: fd,
});
const data = await resp.json().catch(() => ({}));
if (!resp.ok) {
notify(data.erro || "Falha ao importar DMP", "erro");
return;
}
const {
total = 0,
importadas = 0,
ignoradas = 0,
importadasNomes = [],
ignoradasNomes = [],
erros = [],
} = data;
notify(
`DMP processado: ${importadas} importada(s), ${ignoradas} ignorada(s) de ${total} estaca(s).`,
importadas > 0 ? "ok" : "info"
);
const partes = [];
partes.push(`Resumo da importação (${total} estaca(s) no DMP):`);
partes.push(`• Importadas: ${importadas}`);
partes.push(`• Ignoradas (já existiam): ${ignoradas}`);
partes.push(`• Falhas: ${erros.length}`);
if (importadasNomes.length > 0) {
partes.push("");
partes.push(`Importadas com sucesso:`);
partes.push(importadasNomes.map(n => `• ${n}`).join("\n"));
}
if (ignoradasNomes.length > 0) {
partes.push("");
partes.push(`Ignoradas (já existiam no banco):`);
partes.push(ignoradasNomes.map(n => `• ${n}`).join("\n"));
}
if (erros.length > 0) {
partes.push("");
partes.push(`Não foi possível importar:`);
partes.push(erros.map(e => `• ${e.nome}: ${e.motivo}`).join("\n"));
}
window.alert(partes.join("\n"));
if (importadas > 0) {
setPastas(null);
setRefreshKey(k => k + 1);
}
} catch (e) {
notify("Erro de rede ao importar: " + (e.message || e), "erro");
} finally {
setImportandoDmp(false);
}
}, [notify]);
// Importacao em lote de .cge — fluxo: POST start (multipart) → recebe
// jobId → SSE de progresso ate 'fim'. Pasta ja vem filtrada pelo caller
// (so .cge no nivel raiz). Modal de progresso fica aberto durante todo
// o ciclo; usuario fecha manualmente apos ver o resumo.
const importarCgeArquivos = useCallback(async (filesList) => {
const files = Array.from(filesList || []).filter(f => /\.cge$/i.test(f.name));
if (files.length === 0) {
notify("Nenhum arquivo .cge encontrado.", "erro");
return;
}
setImportCge({ fase: "enviando", total: files.length, processadas: 0, atual: null, resumo: null, erro: null });
try {
const fd = new FormData();
for (const f of files) fd.append("arquivos", f, f.name);
const startResp = await fetch("/api/import-cge/start", {
method: "POST",
credentials: "same-origin",
body: fd,
});
if (!startResp.ok) {
const erro = await startResp.json().catch(() => ({}));
throw new Error(erro.erro || `Erro ${startResp.status}`);
}
const { jobId, total } = await startResp.json();
setImportCge(prev => prev ? { ...prev, fase: "processando", total } : prev);
await new Promise((resolve, reject) => {
const es = new EventSource(`/api/import-cge/progress?jobId=${encodeURIComponent(jobId)}`);
importEsRef.current = es;
// Flag para suprimir 'onerror' espurio que alguns navegadores
// disparam logo apos o servidor encerrar o stream com res.end()
// — se ja recebemos 'fim', ignoramos o erro subsequente.
let completou = false;
es.onmessage = (ev) => {
let d; try { d = JSON.parse(ev.data); } catch { return; }
if (d.tipo === "iniciando") {
setImportCge(prev => prev ? { ...prev, atual: d.arquivo, total: d.total ?? prev.total } : prev);
} else if (d.tipo === "arquivo") {
setImportCge(prev => prev ? { ...prev, processadas: d.indice, atual: null } : prev);
} else if (d.tipo === "estado") {
setImportCge(prev => prev ? { ...prev, total: d.total ?? prev.total, processadas: d.processadas ?? prev.processadas } : prev);
} else if (d.tipo === "fim") {
completou = true;
es.close(); importEsRef.current = null;
const resumo = {
total: d.total ?? 0,
importadas: d.importadas ?? 0,
ignoradas: d.ignoradas ?? 0,
importadasNomes: d.importadasNomes || [],
ignoradasNomes: d.ignoradasNomes || [],
erros: d.erros || [],
};
// Fecha o modal de progresso — o resumo vai por toast + alert
// (mesmo padrao do DMP). Garante que o usuario sempre ve o
// resultado, mesmo que a importacao tenha sido instantanea.
setImportCge(null);
const tipoToast = resumo.erros.length > 0
? "erro"
: (resumo.importadas > 0 ? "ok" : "info");
notify(
`Importação: ${resumo.importadas} importada(s), ${resumo.ignoradas} duplicada(s)` +
(resumo.erros.length ? `, ${resumo.erros.length} com erro` : "") +
` de ${resumo.total} arquivo(s).`,
tipoToast
);
// Alert com detalhes — usuario confirma e fecha. Mesmo
// formato do resumo do DMP para manter consistencia.
const partes = [];
partes.push(`Resumo da importação (${resumo.total} arquivo(s)):`);
partes.push(`• Importadas: ${resumo.importadas}`);
partes.push(`• Duplicadas (já existiam): ${resumo.ignoradas}`);
partes.push(`• Falhas: ${resumo.erros.length}`);
if (resumo.importadasNomes.length > 0) {
partes.push("");
partes.push("Importadas com sucesso:");
partes.push(resumo.importadasNomes.map(n => `• ${n}`).join("\n"));
}
if (resumo.ignoradasNomes.length > 0) {
partes.push("");
partes.push("Já existiam (ignoradas):");
partes.push(resumo.ignoradasNomes.map(n => `• ${n}`).join("\n"));
}
if (resumo.erros.length > 0) {
partes.push("");
partes.push("Com erro:");
partes.push(resumo.erros.map(e => `• ${e.nome}: ${e.motivo}`).join("\n"));
}
window.alert(partes.join("\n"));
if (resumo.importadas > 0) {
setPastas(null);
setRefreshKey(k => k + 1);
}
resolve();
} else if (d.tipo === "erro") {
completou = true;
es.close(); importEsRef.current = null;
reject(new Error(d.motivo || "Falha na importacao"));
}
};
es.onerror = () => {
if (completou) return; // close natural pos-fim — ignora.
es.close(); importEsRef.current = null;
reject(new Error("Conexão com o servidor caiu durante a importação."));
};
});
} catch (e) {
const msg = e.message || "Erro desconhecido";
setImportCge(null);
notify(`Falha na importação: ${msg}`, "erro");
window.alert(`Falha na importação: ${msg}`);
}
}, [notify]);
// Fecha o menu de import ao clicar fora.
useEffect(() => {
if (!importMenuAberto) return;
const onDocClick = (e) => {
const root = importMenuRef.current;
if (!root) return;
if (!root.contains(e.target)) setImportMenuAberto(false);
};
document.addEventListener("mousedown", onDocClick);
return () => document.removeEventListener("mousedown", onDocClick);
}, [importMenuAberto]);
// Garante fechar SSE se o componente desmontar no meio de uma importacao.
useEffect(() => () => {
if (importEsRef.current) {
try { importEsRef.current.close(); } catch (_) {}
importEsRef.current = null;
}
}, []);
// Pasta tem arquivo nao lido = backend devolveu algum item em arquivosNaoLidos.
const pastaTemNovo = (p) => Array.isArray(p?.arquivosNaoLidos) && p.arquivosNaoLidos.length > 0;
// Estaca individual nao lida = pertence ao array `arquivosNaoLidos` da pasta.
const arquivoNaoLido = (p, arq) => Array.isArray(p?.arquivosNaoLidos) && p.arquivosNaoLidos.includes(arq);
// Marca uma estaca como lida (idempotente). Atualiza estado local
// imediatamente (otimista) e dispara POST em background.
const marcarEstacaLida = useCallback((arquivo) => {
if (!arquivo) return;
setPastas(prev => {
if (!Array.isArray(prev)) return prev;
let mudou = false;
const proximo = prev.map(p => {
const ate = p.arquivosNaoLidos || [];
if (!ate.includes(arquivo)) return p;
mudou = true;
return { ...p, arquivosNaoLidos: ate.filter(a => a !== arquivo) };
});
return mudou ? proximo : prev;
});
fetch("/api/estaca-leitura", {
method: "POST",
credentials: "same-origin",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ arquivo }),
}).catch(() => {});
}, []);
// Sempre que o usuario abre uma estaca, registra como lida — cobre
// todos os entry points (clique na sidebar, prev/next, busca, etc).
useEffect(() => {
if (estacaAberta?.arquivo) marcarEstacaLida(estacaAberta.arquivo);
}, [estacaAberta?.arquivo, marcarEstacaLida]);
useEffect(() => {
if (pastas !== null) return;
let cancelado = false;
fetch(`/api/lista-estacas`, { credentials: "same-origin" })
.then(r => r.json())
.then(data => { if (!cancelado) setPastas(Array.isArray(data) ? data : []); })
.catch(err => { if (!cancelado) setPastasErr(err.message || "Erro"); });
return () => { cancelado = true; };
}, [pastas]);
// Polling da sidebar — pega arquivos novos que chegam pelo sistema externo
// de monitoramento (parser em producao escreve direto no banco). Cadencia
// de 60s alinhada com PileTable/KPIs. Refresh tambem quando a aba volta
// a ficar visivel — pega novidades acumuladas com a aba em background.
// So atualiza o estado se o conteudo mudou de fato, pra evitar re-render
// sem necessidade (a comparacao por JSON e barata pro tamanho dessa lista).
useEffect(() => {
let cancelado = false;
const recarregar = () => {
fetch(`/api/lista-estacas`, { credentials: "same-origin" })
.then(r => r.ok ? r.json() : Promise.reject(r.status))
.then(data => {
if (cancelado || !Array.isArray(data)) return;
setPastas(prev => {
if (!Array.isArray(prev)) return data;
return JSON.stringify(prev) === JSON.stringify(data) ? prev : data;
});
})
.catch(() => {});
};
const id = setInterval(recarregar, 60 * 1000);
const onVisibility = () => {
if (document.visibilityState === "visible") recarregar();
};
document.addEventListener("visibilitychange", onVisibility);
return () => {
cancelado = true;
clearInterval(id);
document.removeEventListener("visibilitychange", onVisibility);
};
}, []);
useEffect(() => {
if (!pastaAberta && !maquinaAberta && !filtroProf) { setPlanilha(null); return; }
let cancelado = false;
setPlanilhaCarregando(true);
setPlanilha(null);
const url = pastaAberta
? `/api/resumo-pasta?pasta=${encodeURIComponent(pastaAberta)}`
: maquinaAberta
? `/api/resumo-maquina?serie=${encodeURIComponent(maquinaAberta)}`
: filtroProf.operador
? `/api/lista-prof?op=${encodeURIComponent(filtroProf.operador)}&metros=${encodeURIComponent(filtroProf.metros)}&limite=500`
: `/api/lista-prof?min=${encodeURIComponent(filtroProf.min)}&max=${encodeURIComponent(filtroProf.max)}&limite=500`;
fetch(url, { credentials: "same-origin" })
.then(r => r.json())
.then(data => {
if (cancelado) return;
let linhas = Array.isArray(data) ? data : [];
// Em pasta "obra-editada", o resumo-pasta devolve TODAS as estacas
// do contrato (originais + editadas). Filtramos pra mostrar apenas
// os arquivos listados na pasta editada (vindos da listagem da
// sidebar — ja filtrados pelo backend por editado=TRUE).
if (pastaAberta && tipoPastaAberta === "obra-editada") {
const pastaObj = (pastas || []).find(p =>
p.nomePasta === pastaAberta && (p.tipo || "contrato") === "obra-editada"
);
const arquivosEditados = new Set(pastaObj?.arquivos || []);
linhas = linhas.filter(l => arquivosEditados.has(l.arquivo));
}
setPlanilha(linhas);
setPlanilhaCarregando(false);
})
.catch(() => {
if (cancelado) return;
setPlanilha([]);
setPlanilhaCarregando(false);
});
return () => { cancelado = true; };
}, [pastaAberta, tipoPastaAberta, maquinaAberta, filtroProf, pastas]);
const totalEstacas = useMemo(() => {
if (!Array.isArray(pastas)) return null;
// Contabiliza apenas pastas reais (contratos). Pastas tipo
// "obra-editada" sao virtuais — agrupam estacas ja contadas no
// contrato — entao nao entram na soma para nao duplicar.
return pastas.reduce((acc, p) => acc + ((p.tipo || "contrato") === "contrato" ? (p.arquivos?.length || 0) : 0), 0);
}, [pastas]);
const nav = [
{ id: "dashboard", label: "Dashboard", icon: I.dash },
{ id: "estacas", label: "Estacas", icon: I.pile, badge: totalEstacas, expandable: true },
{ id: "mapa", label: "Mapa", icon: I.map },
// "Monitoramento Remoto" ainda nao foi implementado — exposto so pro
// admin_sistema enquanto a feature nao fica pronta.
...(ehAdminSistema ? [{ id: "monitoramento", label: "Monitoramento Remoto", icon: I.signal, dot: true }] : []),
// "Usuarios" e "Maquinas" sao restritos ao admin_sistema. admin_cliente
// gerencia os usuarios da propria empresa pela tela de Configuracoes
// (Empresa e conta) — nao tem entrada propria na sidebar.
...(ehAdminSistema ? [{ id: "usuarios", label: "Usuários", icon: I.user || I.dash }] : []),
...(ehAdminSistema ? [{ id: "maquinas", label: "Máquinas", icon: I.truck || I.dash }] : []),
// "Historico de acessos" — auditoria de login restrita ao admin_sistema.
// admin_cliente e usuario comum nao veem o item na sidebar.
...(ehAdminSistema ? [{ id: "log-acessos", label: "Histórico de acessos", icon: I.clock || I.dash }] : []),
];
const onNavClick = (n) => {
if (n.id === "estacas") {
setEstacasOpen(o => !o);
setActive(n.id);
return;
}
setActive(n.id);
if (n.id === "dashboard" || n.id === "mapa" || n.id === "monitoramento" || n.id === "usuarios" || n.id === "maquinas" || n.id === "log-acessos") {
setPastaAberta(null);
setMaquinaAberta(null);
setFiltroProf(null);
setEstacaAberta(null);
setEstacasOpen(false);
}
// Fecha o drawer apos navegar (sem efeito em desktop).
setSidebarAberto(false);
};
const abrirContratoBusca = (contrato) => {
setMaquinaAberta(null);
setFiltroProf(null);
setEstacaAberta(null);
setActive("estacas");
setEstacasOpen(true);
setPastaAberta(contrato);
};
const abrirMaquinaBusca = (tag) => {
setPastaAberta(null);
setFiltroProf(null);
setEstacaAberta(null);
setActive("estacas");
setMaquinaAberta(String(tag));
};
// Aciona a tela de planilha filtrada por profundidade. Dois formatos:
// { operador: '>', metros: 25 } → comparacao
// { min: 20, max: 30 } → intervalo
const abrirFiltroProf = (payload) => {
if (!payload) return;
setPastaAberta(null);
setMaquinaAberta(null);
setEstacaAberta(null);
setActive("estacas");
if (payload.operador) {
setFiltroProf({ operador: payload.operador, metros: Number(payload.metros) });
} else if (payload.min != null && payload.max != null) {
setFiltroProf({ min: Number(payload.min), max: Number(payload.max) });
}
};
const abrirEstacaBusca = (contrato, arquivo, listaCustom = null) => {
setMaquinaAberta(null);
setFiltroProf(null);
setActive("estacas");
setEstacasOpen(true);
if (contrato) setPastaAberta(contrato);
setEstacaAberta({ pasta: contrato || "", arquivo });
setOrigemEstaca("planilha");
if (Array.isArray(listaCustom) && listaCustom.length) {
setNavLista(listaCustom);
} else {
const p = (pastas || []).find(x => x.nomePasta === contrato);
const arquivos = (p?.arquivos || [arquivo]);
setNavLista(arquivos.map(arq => ({ pasta: contrato || "", arquivo: arq })));
}
};
// Abre uma estaca diretamente do widget "Ultimas estacas executadas" do
// Dashboard. Diferente de abrirEstacaBusca: NAO troca o `active` nem
// setPastaAberta — assim, ao fechar o grafico, o usuario volta pro
// Dashboard (e nao cai na view de "estacas" com a pasta aberta atras).
const abrirEstacaDoDashboard = (contrato, arquivo, listaCustom = null) => {
setMaquinaAberta(null);
setFiltroProf(null);
setEstacaAberta({ pasta: contrato || "", arquivo });
setOrigemEstaca("dashboard");
if (Array.isArray(listaCustom) && listaCustom.length) {
setNavLista(listaCustom);
} else {
setNavLista([{ pasta: contrato || "", arquivo }]);
}
};
// Atualiza o grafico aberto no painel apos uma mudanca persistida no banco
// (save ou restore). Quando o arquivo muda (original → nova copia editada)
// basta trocar `estacaAberta` — a propria mudanca de prop faz o iframe
// recarregar. Quando e o mesmo arquivo (UPDATE in-place ou restore numa
// copia ja aberta), bumpamos chartReloadKey para forcar o postMessage.
const atualizarGraficoApos = (arquivoOrigem) => {
if (!estacaAberta) return;
if (arquivoOrigem && arquivoOrigem !== estacaAberta.arquivo) {
setEstacaAberta({ pasta: estacaAberta.pasta, arquivo: arquivoOrigem });
} else {
setChartReloadKey(k => k + 1);
}
};
const togglePasta = (nomePasta, tipoPasta = "contrato") => {
setActive("estacas");
setMaquinaAberta(null);
setEstacaAberta(null);
const ehAbrindo = !(pastaAberta === nomePasta && (tipoPastaAberta || "contrato") === tipoPasta);
setPastaAberta(ehAbrindo ? nomePasta : null);
setTipoPastaAberta(ehAbrindo ? tipoPasta : null);
// Em mobile, fecha o drawer ao abrir uma pasta — o usuario ve a lista
// de cards no main em vez do accordion expandido na sidebar. Mantem
// o drawer aberto quando o clique fecha a pasta (ehAbrindo=false), pra
// o usuario continuar navegando entre contratos sem reabrir o menu.
// Em desktop o setState e inerte (sidebar fixa).
if (ehAbrindo) setSidebarAberto(false);
};
// Exclui uma copia editada. O botao na sidebar so aparece em pastas
// tipo 'obra-editada' — o backend tambem rejeita originais (editado=FALSE)
// com 403, entao copia editada e o unico caso valido aqui.
const excluirEstacaEditada = async (nomePasta, arquivo) => {
const ok = window.confirm(`Excluir a estaca editada "${stripSufixoEditado(arquivo)}"?\n\nEsta ação não pode ser desfeita. O arquivo original não será afetado.`);
if (!ok) return;
try {
const r = await fetch(`/api/estaca-editada?arquivo=${encodeURIComponent(arquivo)}`, {
method: "DELETE",
credentials: "same-origin",
});
const j = await r.json().catch(() => ({}));
if (!r.ok) {
notify(j.erro || "Falha ao excluir estaca", "erro");
return;
}
// Se a estaca era a aberta no painel, fecha o grafico.
if (estacaAberta && estacaAberta.pasta === nomePasta && estacaAberta.arquivo === arquivo) {
setEstacaAberta(null);
}
// Se essa era a unica estaca da pasta editada aberta, fecha a pasta —
// ela vai sumir no proximo render (listarContratos nao emite pastas
// sem arquivos), entao deixar setada manteria estado fantasma.
const pastaAtual = (pastas || []).find(p => p.nomePasta === nomePasta && (p.tipo || "contrato") === "obra-editada");
const restantes = (pastaAtual?.arquivos || []).filter(a => a !== arquivo);
if (restantes.length === 0 && pastaAberta === nomePasta && tipoPastaAberta === "obra-editada") {
setPastaAberta(null);
setTipoPastaAberta(null);
}
setPastas(null); // dispara o useEffect de fetch da sidebar
notify("Estaca editada excluída.", "ok");
} catch (err) {
notify("Erro de rede ao excluir.", "erro");
}
};
// Abre o fluxo de edicao manual: se o admin ja autorizou esse contrato
// nessa sessao, vai direto pra escolha de aba; caso contrario pede
// credenciais antes. Trocar de contrato invalida a autorizacao anterior.
const pedirEdicao = (arquivo, contrato) => {
if (contratoAutorizado && contratoAutorizado === contrato) {
setEscolhaTab({ arquivo, contrato });
return;
}
setEstacaParaEditar({ arquivo, contrato });
};
const abrirEstaca = (nomePasta, arquivo, tipoPasta = "contrato") => {
setActive("estacas");
setMaquinaAberta(null);
setPastaAberta(nomePasta);
setTipoPastaAberta(tipoPasta);
setEstacaAberta({ pasta: nomePasta, arquivo });
setOrigemEstaca("planilha");
// Duas pastas podem dividir o mesmo nomePasta (contrato + obra-editada);
// o tipo desempata pra que navLista seja consistente com a pasta clicada
// — sem isso, abrir uma estaca editada pegava a lista do contrato e o
// foot-nav nao encontrava o arquivo na navLista (sumia).
const p = (pastas || []).find(x =>
x.nomePasta === nomePasta && (x.tipo || "contrato") === tipoPasta
);
const arquivos = (p?.arquivos || [arquivo]);
setNavLista(arquivos.map(arq => ({ pasta: nomePasta, arquivo: arq })));
// Fecha o drawer apos abrir uma estaca — relevante em mobile, onde a
// sidebar e off-canvas. Em desktop o setState e' inerte (sidebar fixa).
setSidebarAberto(false);
};
// Navegação (←/→/↑/↓ do teclado e botões prev/next do foot-nav React)
// percorre a navLista ativa — pasta clicada na sidebar, lista de últimas
// estacas, planilha de máquina ou resultado de busca.
// IMPORTANTE: usa setState funcional pra ler o estado MAIS RECENTE.
// Sem isso, presses rapidos entre re-renders pegavam closure stale com
// estacaAberta antiga; a 2a/3a chamada calculava o mesmo "proximo" da
// primeira e React abortava o setState (Object.is identico) — usuario
// perdia teclas. Como `prev` vem direto do React, sempre eh o atual.
const navegarEstaca = useCallback((direcao) => {
setEstacaAberta(prev => {
if (!prev || navLista.length === 0) return prev;
const idx = navLista.findIndex(
x => x.pasta === prev.pasta && x.arquivo === prev.arquivo
);
if (idx === -1) return prev;
let novoIdx;
if (direcao === "ArrowDown" || direcao === "ArrowRight" || direcao === "next") {
novoIdx = Math.min(idx + 1, navLista.length - 1);
} else if (direcao === "ArrowUp" || direcao === "ArrowLeft" || direcao === "prev") {
novoIdx = Math.max(idx - 1, 0);
} else return prev;
if (novoIdx === idx) return prev;
return navLista[novoIdx];
});
}, [navLista]);
useEffect(() => {
if (!estacaAberta || navLista.length === 0) return;
const abortarCargaIframe = () => {
const iframe = document.querySelector('.dash-grafico-iframe');
try { iframe?.contentWindow?.postMessage({ tipo: 'abort-carga' }, '*'); } catch (_) {}
};
const ativarKeepAliveIframe = () => {
const iframe = document.querySelector('.dash-grafico-iframe');
try { iframe?.contentWindow?.postMessage({ tipo: 'ativar-keepalive' }, '*'); } catch (_) {}
// Foca o iframe — Chrome reduz throttling em iframes com foco.
try { iframe?.contentWindow?.focus(); } catch (_) {}
};
const onKey = (e) => {
if (e.key !== "ArrowUp" && e.key !== "ArrowDown" && e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
const alvo = e.target;
if (alvo && (alvo.tagName === "INPUT" || alvo.tagName === "TEXTAREA" || alvo.isContentEditable)) return;
e.preventDefault();
ativarKeepAliveIframe();
abortarCargaIframe();
navegarEstaca(e.key);
};
const onMessage = (ev) => {
if (!ev.data || ev.data.tipo !== "estaca-nav") return;
abortarCargaIframe();
navegarEstaca(ev.data.direcao);
};
window.addEventListener("keydown", onKey);
window.addEventListener("message", onMessage);
return () => {
window.removeEventListener("keydown", onKey);
window.removeEventListener("message", onMessage);
};
}, [estacaAberta, navLista, navegarEstaca]);
// Mantem a estaca ativa visivel no scroll da lista da sidebar. Quando o
// usuario navega com setas (ou clica numa estaca fora da viewport pelo
// resultado de busca), o item .is-active e' rolado pra dentro do
// .dash-nav-files. `block: 'nearest'` so' rola se ja nao estiver visivel
// — clicks dentro da janela visivel nao causam jump. rAF garante que o
// React ja' aplicou a classe `is-active` antes do scroll.
useEffect(() => {
if (!estacaAberta) return;
const id = requestAnimationFrame(() => {
const el = document.querySelector('.dash-nav-file.is-active');
if (el && typeof el.scrollIntoView === 'function') {
el.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
}
});
return () => cancelAnimationFrame(id);
}, [estacaAberta]);
return (
{(() => {
// Linha 1: nome do usuario (fallback no email se nao tiver
// nome cadastrado, e em "Conta" se nem email). Linha 2:
// empresa do usuario, ou "—" pra admin_sistema sem empresa
// selecionada.
const nomeExibir = (nome && nome.trim()) || (email && email.split('@')[0]) || 'Conta';
const empresaExibir = (cliente && cliente.trim()) || '—';
const inicial = (nomeExibir || '?').trim().charAt(0).toUpperCase();
return (
<>
{podeAdministrar && (
<>
{
const f = e.target.files && e.target.files[0];
e.target.value = "";
if (f) importarDmp(f);
}}
/>
{
// IMPORTANTE: e.target.files e' o FileList vivo do input.
// Setar value="" zera esse mesmo objeto, entao precisamos
// copiar pra Array antes de limpar.
const arquivos = Array.from(e.target.files || []);
e.target.value = "";
if (arquivos.length) importarCgeArquivos(arquivos);
}}
/>
{
// Mesmo cuidado do input de .cge: copia FileList -> Array
// ANTES de limpar o value, senao o FileList vivo zera.
const arquivos = Array.from(e.target.files || []);
e.target.value = "";
if (!arquivos.length) return;
// Pega so arquivos no NIVEL RAIZ da pasta selecionada
// (ignora subpastas) e so .cge.
const noNivel = arquivos.filter(f => {
const p = f.webkitRelativePath || f.name;
const partes = p.split("/").filter(Boolean);
// Top-level = exatamente 2 segmentos: /
return partes.length === 2 && /\.cge$/i.test(f.name);
});
if (!noNivel.length) {
notify("Nenhum arquivo .cge encontrado no nível raiz da pasta.", "erro");
return;
}
importarCgeArquivos(noNivel);
}}
/>
{importMenuAberto && (
)}
)}
{(() => {
// Defs dos KPIs disponiveis. Cada def sabe como gerar
// suas props a partir do estado atual de `kpis` (vindo
// de /api/dashboard) — assim a ordem e visibilidade
// ficam controladas por cfgDashboard.kpis sem
// duplicar logica de fetching.
const defsKpi = {
estacas: () => ({
label: "Estacas executadas hoje",
value: fmtInt(kpis.estacas.valor),
delta: kpis.estacas.delta ?? 0,
unit: "estacas",
sparkline: kpis.estacas.sparkline,
media: kpis.estacas.media,
accent: accent.hex,
muted: false,
info: "Quantidade de estacas com fim de concretagem registrado hoje, até este horário. O delta compara com a média dos últimos 7 dias contando apenas estacas concluídas até o mesmo horário, e ignora dias sem produção.",
}),
metros: () => ({
label: "Metros perfurados hoje",
value: fmtInt(kpis.metros.valor),
delta: kpis.metros.delta ?? 0,
unit: "m totais",
sparkline: kpis.metros.sparkline,
media: kpis.metros.media,
accent: "#3B6EE0",
muted: true,
info: "Soma da profundidade total das estacas concluídas hoje (em metros), até este horário. O delta compara com a média dos últimos 7 dias até o mesmo horário, ignorando dias sem produção.",
}),
concreto: () => ({
label: "Volume de concreto hoje",
value: fmtInt(kpis.concreto.valor),
delta: kpis.concreto.delta ?? 0,
unit: "m³",
sparkline: kpis.concreto.sparkline,
media: kpis.concreto.media,
accent: "#7B61D6",
muted: true,
info: "Soma do volume de concreto das estacas concluídas hoje (em m³), até este horário. O delta compara com a média dos últimos 7 dias até o mesmo horário, ignorando dias sem produção.",
}),
maquinas: () => {
const m = kpis.maquinas || KPI_MAQUINAS_VAZIO;
const taxa = Number.isFinite(m.taxa) ? m.taxa : 0;
return {
label: "Maquinas online",
value: m.valor,
delta: m.delta ?? 0,
unit: `taxa ${taxa.toFixed(1)}%`,
sparkline: m.sparkline,
media: m.media,
accent: "#22A06B",
muted: true,
info: "Máquinas que reportaram sinal nos últimos 10 minutos sobre o total da frota ativa. A taxa é a média do pico diário de máquinas online (em qualquer janela de 15min) dos últimos 7 dias, sobre o total da frota.",
// Card clicavel → abre a tela de monitoramento da frota
// (lista de maquinas + relatorio por maquina).
onClick: () => setActive("frota"),
};
},
};
// Ordem da config; se config nao carregou ainda, usa
// ordem default (estacas, metros, concreto, maquinas).
const lista = (cfgDashboard && Array.isArray(cfgDashboard.kpis) && cfgDashboard.kpis.length > 0)
? cfgDashboard.kpis
: [
{ id: 'estacas', visivel: true },
{ id: 'metros', visivel: true },
{ id: 'concreto', visivel: true },
{ id: 'maquinas', visivel: true },
];
return lista
.filter(k => k && k.visivel !== false && defsKpi[k.id])
.map(k => {
const props = defsKpi[k.id]();
return ;
});
})()}
}
>
{cfgInicialCarregada ? (
) : (
// Placeholder com a mesma altura do chart (.prod-chart e'
// height: 240px) pra evitar o pulo de layout quando ele
// entra com os valores reais do usuario.
)}
setObraEditando(obra)}
/>
}
>
{/* Card do mapa removido temporariamente — tabela ocupa toda a largura.
Pra restaurar, descomentar o bloco abaixo e remover .dash-row-full
+ .dash-table-full do row/card acima.
setActive("mapa")}>Abrir mapa →}
>
Ocioso Perfurando Concretando Erro Offline
*/}
)}
{toasts.map(t => (
{t.mensagem}
))}
{estacaParaEditar && (
setEstacaParaEditar(null)}
onSucesso={() => {
const { arquivo, contrato } = estacaParaEditar;
// Autoriza esse contrato para o resto da sessao do dashboard
// — proximas estacas dele dispensam senha. Trocar de contrato
// sobrescreve a autorizacao e volta a pedir.
setContratoAutorizado(contrato || null);
setEstacaParaEditar(null);
setEscolhaTab({ arquivo, contrato });
}}
/>
)}
{escolhaTab && (
setEscolhaTab(null)}
onMesmaAba={() => {
const alvo = escolhaTab;
setEscolhaTab(null);
setEditorAberto(alvo);
}}
onNovaAba={() => {
// Filtra refs de abas que o usuario ja fechou — antes de checar
// o limite, pra nao bloquear quando todas as anteriores ja foram
// fechadas. `w.closed` e' true tambem se a aba foi fechada por
// outro motivo (crash, etc.).
abasEditorAbertasRef.current = abasEditorAbertasRef.current.filter(w => w && !w.closed);
if (abasEditorAbertasRef.current.length >= 2) {
notify("Limite de 2 abas de edição abertas. Feche uma para abrir outra.", "erro");
setEscolhaTab(null);
return;
}
const { arquivo, contrato } = escolhaTab;
const url = `/editor-tab.html?arquivo=${encodeURIComponent(arquivo)}&contrato=${encodeURIComponent(contrato || "")}`;
// Sem `noopener` pra conseguir guardar a referencia da Window
// retornada. A aba aberta e' a propria app (/editor-tab.html),
// entao nao ha risco de seguranca com o opener disponivel.
const w = window.open(url, "_blank");
if (w) abasEditorAbertasRef.current.push(w);
setEscolhaTab(null);
}}
/>
)}
{editorAberto && (
{
const contrato = editorAberto.contrato;
if (!contrato || !Array.isArray(pastas)) return [];
// Procura a pasta que de fato contem o arquivo aberto — usuario
// pode estar editando tanto um original (tipo "contrato") quanto
// uma copia editada ("obra-editada"). Prefere a pasta que casa
// com o tipo da estaca aberta.
const candidatas = pastas.filter(x => x.nomePasta === contrato);
const dona = candidatas.find(p => (p.arquivos || []).includes(editorAberto.arquivo)) || candidatas[0];
return dona?.arquivos || [];
})()}
onNavegar={(novoArquivo) => {
// So troca o arquivo do editor. NAO mexe em estacaAberta aqui:
// mudar a estaca aberta dispara reload do iframe do grafico
// por tras (postMessage + scrollIntoView), o que aparece como
// um "reload" da pagina de fundo durante a navegacao.
setEditorAberto(prev => prev ? { ...prev, arquivo: novoArquivo } : prev);
}}
onFechar={() => {
// Ao fechar, sincroniza a estaca aberta no painel com a ultima
// estaca vista no editor — usuario volta pro grafico dela.
const arquivoFinal = editorAberto.arquivo;
setEstacaAberta(prev => prev && prev.arquivo !== arquivoFinal
? { ...prev, arquivo: arquivoFinal }
: prev);
setEditorAberto(null);
}}
onSalvo={({ alteracoes, arquivoOrigem } = {}) => {
setEditorAberto(null);
// Recarrega listagem da sidebar para refletir nova pasta de obra editada.
setPastas(null);
if (alteracoes) atualizarGraficoApos(arquivoOrigem);
}}
onRestaurado={({ arquivoOrigem } = {}) => {
// Restaurar gravou os valores originais na copia editada. Fecha o
// editor e volta o usuario para o grafico, que e recarregado com
// os dados restaurados.
setEditorAberto(null);
setPastas(null);
atualizarGraficoApos(arquivoOrigem);
notify("Valores originais restaurados.", "ok");
}}
onListaInvalida={() => setPastas(null)}
notify={notify}
/>
)}
{importCge && (
setImportCge(null)}
/>
)}
{(novaObraAberta || obraEditando || novaObraInicial) && (
{ setNovaObraAberta(false); setObraEditando(null); setNovaObraInicial(null); }}
onSalva={(obra, acao) => {
setNovaObraAberta(false);
setObraEditando(null);
setNovaObraInicial(null);
setObrasReloadKey(k => k + 1);
// Tira da lista de orfaos se a obra recem-cadastrada casa com
// um par pendente. Fecha o OrfaosModal se nao sobrar nenhum.
setOrfaos(prev => {
const key = `${String(obra.nome || "").toLowerCase()}|${String(obra.contrato || "").toLowerCase()}`;
const next = prev.filter(o => `${o.nome.toLowerCase()}|${o.contrato.toLowerCase()}` !== key);
if (next.length === 0) setOrfaosAberto(false);
return next;
});
const msgs = {
criar: `Obra "${obra.nome}" cadastrada.`,
salvar: `Obra "${obra.nome}" atualizada.`,
finalizar: `Obra "${obra.nome}" finalizada.`,
reabrir: `Obra "${obra.nome}" reaberta.`,
};
notify(msgs[acao] || msgs.salvar, "ok");
}}
onExcluida={(obra) => {
setNovaObraAberta(false);
setObraEditando(null);
setNovaObraInicial(null);
setObrasReloadKey(k => k + 1);
notify(`Obra "${obra.nome}" excluída.`, "ok");
}}
/>
)}
{orfaosAberto && orfaos.length > 0 && (
setOrfaosAberto(false)}
onIgnorar={() => {
for (const o of orfaos) {
dispensadosOrfaosRef.current.add(`${o.nome.toLowerCase()}|${o.contrato.toLowerCase()}`);
}
try {
sessionStorage.setItem(
"compugeo_obras_orfaos_dispensadas",
JSON.stringify([...dispensadosOrfaosRef.current])
);
} catch (_) {}
setOrfaos([]);
setOrfaosAberto(false);
}}
onCadastrar={(o) => setNovaObraInicial({ nome: o.nome, contrato: o.contrato })}
/>
)}
);
}
/* ---------- Modal de progresso da importacao em lote de .cge ---------- */
function ImportCgeProgressModal({ estado, onClose }) {
const finalizado = estado.fase === "pronto";
const proc = estado.processadas || 0;
const total = estado.total || 0;
const pct = total > 0 ? Math.min(100, Math.round((proc / total) * 100)) : 0;
const r = estado.resumo;
return (
{ if (e.target === e.currentTarget && finalizado) onClose(); }}>
{editando ? "Atualize os dados da obra." : "Preencha os dados de cadastro da obra."}
);
}
/* ---------- Modal de obras detectadas mas nao cadastradas ----------
* Aparece quando o PileTable detecta arquivos novos cujo par
* (obra, contrato) nao tem cadastro em /api/obras. Lista os pares
* orfaos com botao Cadastrar por linha. "Agora nao" guarda os pares
* em sessionStorage pra nao reabrir o modal pra eles. */
function OrfaosModal({ accent, orfaos, onClose, onIgnorar, onCadastrar }) {
useEffect(() => {
const onKey = (e) => { if (e.key === "Escape") { e.preventDefault(); onClose(); } };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [onClose]);
return (
);
}
/* ---------- Modal "Mesma aba ou Nova aba?" (pos-autorizacao da edicao) ----------
* Pergunta onde abrir o editor. Mesma aba = modal sobreposto ao dashboard.
* Nova aba = abre /editor-tab.html, uma shell minimalista que reaproveita
* o editor sem carregar o resto do dashboard. */
function EscolhaTabModal({ accent, onClose, onMesmaAba, onNovaAba }) {
const btnMesmaRef = React.useRef(null);
// Foca o botao "Mesma aba" assim que o modal abre — Enter aciona o
// botao focado por padrao no navegador. Cancelar/Nova aba continuam
// acessiveis via clique ou Tab. Esc fecha o modal (handler abaixo).
React.useEffect(() => {
btnMesmaRef.current?.focus();
}, []);
React.useEffect(() => {
const onKey = (e) => {
if (e.key === 'Escape') {
e.preventDefault();
onClose();
}
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [onClose]);
return (
`
);
infoRef.current.open({ map, anchor: marker });
});
}
markersRef.current.push(marker);
});
// Pulsacao dos pins via setIcon em senoide. Periodo ~1.4s; escala
// varia entre base e base+2.5, opacidade entre .55 e 1. Throttle de
// ~80ms (12.5 fps) basta pra parecer suave e mantem CPU baixo mesmo
// com varios markers. So no mapa principal — no mini fica estatico.
if (mini) return;
if (pulseRafRef.current) cancelAnimationFrame(pulseRafRef.current);
let ultimaAtualizacao = 0;
const t0 = performance.now();
const loop = (t) => {
if (t - ultimaAtualizacao >= 80) {
ultimaAtualizacao = t;
const fase = ((t - t0) % 1400) / 1400; // 0..1
const onda = Math.sin(fase * Math.PI * 2) * 0.5 + 0.5; // 0..1
markersRef.current.forEach(m => {
const base = m._pulseBase || 6;
m.setIcon({
path: g.maps.SymbolPath.CIRCLE,
fillColor: m._pulseColor,
fillOpacity: 0.55 + onda * 0.45,
strokeColor: "#ffffff",
strokeWeight: 2,
scale: base + onda * 2.5,
});
});
}
pulseRafRef.current = requestAnimationFrame(loop);
};
pulseRafRef.current = requestAnimationFrame(loop);
return () => {
if (pulseRafRef.current) cancelAnimationFrame(pulseRafRef.current);
pulseRafRef.current = null;
};
}, [pronto, obrasKey, accentHex, mini]);
React.useEffect(() => {
if (!focar || !mapRef.current) return;
mapRef.current.panTo({ lat: focar.lat, lng: focar.lng });
mapRef.current.setZoom(14);
}, [focar]);
return
;
}
/* ---------- Painel de mapa (tela cheia) ---------- */
// Cor por status da maquina. Status vem do backend (statusDaMaquina em
// repositorioMaquina.js) e e' derivado do ultimo `gps_posicao.estado`:
// 0=ocioso, 1=perfurando, 2=concretando, 4=erro. Sem ping nos ultimos
// 10min → offline.
function corStatusMaquina(status) {
switch (status) {
case "ocioso": return "#22A06B"; // verde
case "perfurando": return "#D14343"; // vermelho
case "concretando": return "#3B82F6"; // azul
case "erro": return "#E0A02A"; // ambar (estado nao especificado pelo usuario)
case "offline":
default: return "#94A3B8"; // cinza
}
}
function rotuloStatus(s) {
return ({ offline: "Offline", ocioso: "Ocioso", perfurando: "Perfurando", concretando: "Concretando", erro: "Erro" })[s] || "—";
}
/* ============================================================
FROTA — tela de monitoramento de maquinas, aberta pelo KPI
"Maquinas online" do dashboard. Duas telas:
1) FrotaPage — lista da frota: status bar + tabela
(desktop) / cards (mobile). Dados de
/api/maquinas-mapa.
2) FrotaRelatorio — relatorio por maquina: KPIs de tempo por
status + grafico dos ultimos 7 dias. Dados
de /api/frota-relatorio (agregacao de
gps_posicao — ver relatorioFrota() em
repositorioMaquina.js).
============================================================ */
// Tempo relativo curto ("agora", "há 12s", "há 4 min", "há 3 h",
// "há 2 dias") a partir de um timestamp.
function tempoRelativo(ts) {
if (!ts) return "—";
const ms = new Date(ts).getTime();
if (!Number.isFinite(ms)) return "—";
const seg = Math.floor(Math.max(0, Date.now() - ms) / 1000);
if (seg < 10) return "agora";
if (seg < 60) return `há ${seg}s`;
const min = Math.floor(seg / 60);
if (min < 60) return `há ${min} min`;
const h = Math.floor(min / 60);
if (h < 24) return `há ${h} h`;
const d = Math.floor(h / 24);
return `há ${d} dia${d === 1 ? "" : "s"}`;
}
// Data/hora curta "DD/MM HH:MM:SS" — exibida junto do tempo relativo.
function dataHoraCurta(ts) {
if (!ts) return "";
const d = new Date(ts);
if (!Number.isFinite(d.getTime())) return "";
const p = (n) => String(n).padStart(2, "0");
return `${p(d.getDate())}/${p(d.getMonth() + 1)} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
}
// Classe do badge de status (cores em login-dash.css → .frota-badge--*).
function classeBadgeStatus(s) {
return `frota-badge frota-badge--${s || "offline"}`;
}
// "5h 48min" a partir de horas decimais.
function fmtHoras(h) {
const total = Math.max(0, Math.round((Number(h) || 0) * 60));
return `${Math.floor(total / 60)}h ${String(total % 60).padStart(2, "0")}min`;
}
// Nome do estado a partir do codigo numerico (gps_posicao.estado).
const FROTA_ESTADO_NOME = { 0: "ocioso", 1: "perfurando", 2: "concretando" };
// "HH:MM" (24h) → minutos do dia. "09:15" → 555.
function hmParaMin(s) {
const [h, m] = String(s || "0:0").split(":").map(Number);
return (Number.isFinite(h) ? h : 0) * 60 + (Number.isFinite(m) ? m : 0);
}
// minutos do dia → "HH:MM" pro eixo de hora real do modo timeline.
function fmtHoraDia(min) {
const t = ((Math.round(min) % 1440) + 1440) % 1440;
return `${String(Math.floor(t / 60)).padStart(2, "0")}:${String(t % 60).padStart(2, "0")}`;
}
// Grafico de barras empilhadas — tempo por status nos 7 dias mais recentes
// COM producao (dias sem producao sao pulados, ver relatorioFrota()).
// `dias` = [{ d, ocioso, perfurando, concretando, segmentos }] — horas por
// status + `segmentos` (sequencia cronologica de runs do dia).
//
// Dois modos (prop `modo`):
// - "totais" : cada barra = total de horas por status no dia, 3
// segmentos ordenados (ocioso/perfurando/concretando).
// Altura fixa de 240px, eixo Y em horas.
// - "timeline" : cada barra = a sequencia REAL do dia. Eixo Y = HORA REAL
// DO DIA (ex.: 06:00 → 18:00), nao tempo acumulado. A
// janela vai do 1o ao ultimo log de qualquer dia visivel,
// arredondada pra hora cheia. Cada run e' posicionada no
// horario em que aconteceu (start/fim de `s.hi`/`s.hf`);
// periodos sem sinal viram espaco vazio. Zoom vertical de
// 1px/min; o wrapper rola na vertical (.is-timeline no
// CSS). nativo mostra o intervalo de cada run.
//
// O SVG mede o container (ResizeObserver) e renderiza o viewBox na largura
// real em px — mesmo padrao do ProductionChart. Antes usava
// preserveAspectRatio="none", que esticava o SVG e distorcia texto/barras.
// Com viewBox 1:1 o vetor escala nitido.
const FROTA_PX_POR_MIN = 1; // zoom vertical do modo timeline
function FrotaChart({ dias, modo = "totais" }) {
// Backend ja retorna so dias com producao (ate 7), entao todo `dia` aqui
// tem barra/segmentos pra desenhar. Se a serie nao tem producao alguma,
// mostra aviso no lugar do grafico.
const visiveis = (dias || []);
const wrapRef = useRef(null);
const [W, setW] = useState(720);
useEffect(() => {
const el = wrapRef.current;
if (!el || typeof ResizeObserver === "undefined") return;
const atualizar = () => {
const w = el.clientWidth;
if (w > 0) setW(Math.max(320, Math.round(w)));
};
atualizar();
const ro = new ResizeObserver(atualizar);
ro.observe(el);
return () => ro.disconnect();
}, []);
const ehTimeline = modo === "timeline";
if (visiveis.length === 0) {
return (
<div className={`frota-chart-wrap ${ehTimeline ? "is-timeline" : ""}`} ref={wrapRef}>
<div className="frota-chart-vazio">Sem dados no período.</div>
</div>
);
}
// Janela de relogio do modo timeline: do 1o ao ultimo log de qualquer dia
// visivel, arredondada pra hora cheia. Default 06:00–18:00 se nao houver
// runs (jornada tipica de obra).
let janIni = Infinity, janFim = -Infinity;
visiveis.forEach(d => (d.segmentos || []).forEach(s => {
const a = hmParaMin(s.hi);
let b = hmParaMin(s.hf);
if (b < a) b += 1440; // run cruzando meia-noite
if (a < janIni) janIni = a;
if (b > janFim) janFim = b;
}));
if (!Number.isFinite(janIni) || janFim <= janIni) {
janIni = 6 * 60; janFim = 18 * 60;
} else {
janIni = Math.floor(janIni / 60) * 60;
janFim = Math.ceil(janFim / 60) * 60;
if (janFim <= janIni) janFim = janIni + 60;
}
const janDur = janFim - janIni; // minutos
// Geometria. Totais: altura fixa 240, eixo em horas. Timeline: altura =
// janela de relogio * PX_POR_MIN (zoom vertical), rotulo do dia no topo.
const ML = ehTimeline ? 54 : 44, MR = 14;
const MT = ehTimeline ? 26 : 12;
const MB = ehTimeline ? 14 : 30;
const iH = ehTimeline ? Math.round(janDur * FROTA_PX_POR_MIN) : 240 - MT - MB;
const H = MT + iH + MB;
const iW = W - ML - MR;
const n = visiveis.length;
const gw = iW / n;
const bw = Math.min(46, gw * 0.46);
// Timeline: minuto-do-dia → y. Totais: horas → y.
const yDeMin = (min) => MT + ((min - janIni) / janDur) * iH;
const totalDia = (d) => d.ocioso + d.perfurando + d.concretando;
const maxH = Math.max(12, ...visiveis.map(totalDia)); // so usado no modo totais
const escalaY = (v) => (v / maxH) * iH;
// Linhas de grade + rotulos do eixo Y.
let gridLinhas;
if (ehTimeline) {
// Marcacoes de hora em hora (ou de 2h se a janela for muito larga).
const gIntervalo = janDur > 900 ? 120 : 60;
gridLinhas = [];
for (let m = janIni; m <= janFim + 0.5; m += gIntervalo) {
gridLinhas.push({ y: yDeMin(m), label: fmtHoraDia(m) });
}
} else {
const ticks = 4;
gridLinhas = Array.from({ length: ticks + 1 }, (_, i) => ({
y: MT + (iH * i) / ticks,
label: `${Math.round(maxH - (maxH * i) / ticks)}h`,
}));
}
const yBase = ehTimeline ? MT : MT + iH; // baseline: topo no timeline, base no totais
return (
<div className={`frota-chart-wrap ${ehTimeline ? "is-timeline" : ""}`} ref={wrapRef}>
<svg
className="frota-chart-svg"
viewBox={`0 0 ${W} ${H}`}
width={W}
height={H}
role="img"
aria-label={ehTimeline
? "Linha do tempo dos estados por dia, eixo em hora real"
: "Tempo por status nos últimos 7 dias"}
>
{/* hachura cinza pros gaps offline do modo timeline */}
<defs>
<pattern id="frotaHachura" width="7" height="7" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
<rect width="7" height="7" fill="rgba(148,163,184,0.10)"/>
<line x1="3.5" y1="0" x2="3.5" y2="7" stroke="rgba(148,163,184,0.55)" strokeWidth="1.6"/>
</pattern>
</defs>
{gridLinhas.map((g, i) => (
<g key={`g${i}`}>
<line x1={ML} x2={W - MR} y1={g.y} y2={g.y} className="frota-chart-grid"/>
<text x={ML - 8} y={g.y + 4} textAnchor="end" className="frota-chart-axis">{g.label}</text>
</g>
))}
{visiveis.map((d, i) => {
const x = ML + i * gw + (gw - bw) / 2;
const cx = ML + i * gw + gw / 2;
// Timeline: cada run posicionada pela HORA REAL (s.hi/s.hf); gaps
// viram espaco vazio. Totais: 3 segmentos empilhados de baixo p/ cima.
let conteudo;
if (ehTimeline) {
const segs = d.segmentos || [];
// Gaps entre runs consecutivas = periodos offline / sem sinal —
// preenchidos com hachura cinza em vez de ficarem vazios.
const gaps = [];
for (let g = 0; g + 1 < segs.length; g++) {
const de = hmParaMin(segs[g].hf);
const ate = hmParaMin(segs[g + 1].hi);
if (ate > de + 0.01) gaps.push({ de, ate, k: `gap${g}` });
}
conteudo = [
// gaps primeiro (atras), runs por cima
...gaps.map(gp => {
const y0 = yDeMin(gp.de);
const h = yDeMin(gp.ate) - y0;
if (h <= 0) return null;
return (
<rect key={gp.k} x={x} y={y0} width={bw} height={h} fill="url(#frotaHachura)">
<title>{`${fmtHoraDia(gp.de)}–${fmtHoraDia(gp.ate)} · Offline`}
);
}),
...segs.map((s, si) => {
const a = hmParaMin(s.hi);
let b = hmParaMin(s.hf);
if (b < a) b += 1440;
const y0 = yDeMin(a);
const h = yDeMin(b) - y0;
if (h <= 0) return null;
const nome = FROTA_ESTADO_NOME[s.estado] || "ocioso";
return (
{`${s.hi}–${s.hf} · ${rotuloStatus(nome)}`}
);
}),
];
} else {
let yy = MT + iH;
conteudo = [
{ k: "ocioso", v: d.ocioso },
{ k: "perfurando", v: d.perfurando },
{ k: "concretando", v: d.concretando },
].map(s => {
const h = escalaY(s.v);
if (h <= 0) return null;
yy -= h;
return ;
});
}
return (
{conteudo}
{d.d}
);
})}
);
}
// Card de relatorio de uma maquina — exibido INLINE na FrotaPage, entre a
// status bar e a lista (nao e' uma tela separada). KPIs de tempo por
// status no periodo selecionado + grafico fixo dos ultimos 7 dias. O %
// e' sobre "tempo com sinal" (ocioso + perfurando + concretando) — estado
// de erro e periodos offline ficam de fora. Ver relatorioFrota() em
// repositorioMaquina.js.
function FrotaRelatorio({ maquina, onFechar }) {
const [periodo, setPeriodo] = useState("7d");
const [relatorio, setRelatorio] = useState(null); // null = 1a carga
const [carregando, setCarregando] = useState(true);
const [erro, setErro] = useState(null);
// Modo do grafico: "totais" (horas somadas por status) ou "timeline"
// (sequencia cronologica dos estados ao longo do dia). So afeta a
// visualizacao — os dois modos usam os mesmos dados ja carregados.
const [modoGrafico, setModoGrafico] = useState("totais");
const cardRef = React.useRef(null);
const PERIODOS = [
{ id: "hoje", label: "Hoje" },
{ id: "7d", label: "7 dias" },
{ id: "mes", label: "Mês" },
];
// `reqRef` da' um id incremental a cada request; respostas de requests
// antigos (periodo trocado no meio, ou poll concorrente) sao descartadas.
const reqRef = React.useRef(0);
// Busca o relatorio. `silencioso` (poll de 60s): nao pisca o "Carregando…"
// nem esmaece os KPIs, e mantem o ultimo dado bom se a request falhar.
// NAO faz setRelatorio(null) — manter KPIs/grafico na tela enquanto
// recarrega evita o flash e o remount do grafico. Só os KPIs dependem do
// periodo; o grafico e' sempre os 7 dias mais recentes com producao, entao
// nao "recarrega" — so re-renderiza com os mesmos dados (instantaneo).
// Obs.: como FrotaRelatorio e' montado com key={maquina.id} na FrotaPage,
// trocar de maquina remonta o componente — `relatorio` volta a null e a
// 1a carga mostra o "Carregando…" normalmente.
const buscarRelatorio = React.useCallback((silencioso) => {
const meu = ++reqRef.current;
if (!silencioso) {
setErro(null);
setCarregando(true);
}
const serie = maquina.num_serie || "";
fetch(`/api/frota-relatorio?serie=${encodeURIComponent(serie)}&periodo=${encodeURIComponent(periodo)}`, { credentials: "same-origin" })
.then(r => r.ok ? r.json() : r.json().then(j => Promise.reject(j.erro || `Erro ${r.status}`)))
.then(data => {
if (meu !== reqRef.current) return; // resposta obsoleta
setRelatorio(data && data.kpis ? data : { kpis: [], dias: [] });
setCarregando(false);
setErro(null);
})
.catch(e => {
if (meu !== reqRef.current) return;
// Poll silencioso: mantem o ultimo dado bom e ignora o erro.
if (!silencioso) {
setErro(String(e || "Falha ao carregar relatório"));
setCarregando(false);
}
});
}, [maquina.num_serie, periodo]);
// Carga inicial + refetch ao trocar de periodo (com dim nos KPIs).
useEffect(() => { buscarRelatorio(false); }, [buscarRelatorio]);
// Polling de 60s + refresh ao voltar pra aba — silencioso (sem dim, sem
// flash). Mesma cadencia da lista da frota e do resto do app.
useEffect(() => {
const id = setInterval(() => buscarRelatorio(true), 60 * 1000);
const onVis = () => {
if (document.visibilityState === "visible") buscarRelatorio(true);
};
document.addEventListener("visibilitychange", onVis);
return () => {
clearInterval(id);
document.removeEventListener("visibilitychange", onVis);
};
}, [buscarRelatorio]);
// Ao abrir (ou trocar de maquina) traz o card pra dentro da viewport —
// sem isso, clicar numa linha la' embaixo da lista mostraria o card fora
// da tela. `nearest` nao mexe no scroll se ja' estiver visivel.
useEffect(() => {
cardRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
}, [maquina.num_serie]);
return (
{/* Card de relatorio — aparece inline entre a status bar e a lista
quando uma maquina e' selecionada; some ao fechar ou clicar de
novo na mesma linha. Animacao de expansao em .frota-detalhe. */}
{selecionada && (
{maquina.fonte_gps === 'auto'
? 'Esta máquina já recebe GPS automaticamente; endereço/cidade aqui são referência.'
: 'Informe o CEP (preenche automaticamente) ou digite o endereço com auto-completar.'}
{expandido ? (
/* Tela cheia: uma unica grade com TODAS as maquinas + o card "Adicionar".
Colunas e linhas sao calculadas pra deixar o layout o mais quadrado
possivel (cols = ceil(sqrt(N * aspect))). */
(() => {
// Layout fixo 4 colunas x 3 linhas (ate 12 maquinas por tela).
// Acima de 12, sobram cards na proxima "pagina" — mas como
// viewport esta com overflow hidden no fullscreen, somente os
// 12 primeiros aparecem. Ajustar se for necessario paginar.
return (
{machines.slice(0, 12).map(m => (
))}
);
})()
) : (
{paginas}
)}
{modalOpen && (
{ if (e.currentTarget === e.target) fecharModal(); }}>
Adicionar máquina
Cadastre uma máquina para monitoramento em tempo real
);
}
/* ---------- Tela de detalhes da obra (iframe) ---------- */
// Renderiza detalhes-obra.html dentro de um iframe em modo ?embed=1
// (esconde o sidebar interno do HTML). Os dados sao hardcoded no HTML
// por enquanto — quando o cadastro de obras estiver pronto, dados reais
// poderao ser passados via query param ou postMessage.
//
// Tema: o tema atual do SPA e' passado no src inicial via ?theme=...
// pra evitar flash de tema claro no load. Trocas posteriores enquanto
// a tela esta aberta sao notificadas via postMessage (MutationObserver
// no detecta o data-theme mudar). Espelha o padrao usado pelo
// GoogleMap pra reagir a tema.
function DetalhesObraPage({ obraId }) {
const iframeRef = React.useRef(null);
// Tema inicial — usado so na construcao do src; depois disso, e' o
// postMessage que sincroniza.
const temaInicialRef = React.useRef(
(typeof document !== 'undefined'
? document.documentElement.getAttribute('data-theme')
: null) || 'light'
);
const src = "/detalhes-obra.html?embed=1"
+ `&theme=${encodeURIComponent(temaInicialRef.current)}`
+ (obraId ? `&id=${encodeURIComponent(obraId)}` : "");
React.useEffect(() => {
const enviarTema = () => {
const tema = document.documentElement.getAttribute('data-theme') || 'light';
const win = iframeRef.current && iframeRef.current.contentWindow;
if (!win) return;
try { win.postMessage({ tipo: 'set-theme', theme: tema }, '*'); } catch (_) {}
};
const obs = new MutationObserver(enviarTema);
obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
return () => obs.disconnect();
}, []);
return (
);
}
/* ---------- Painel do gráfico (iframe da tela de estacas) ---------- */
// Remove o sufixo _editado_ aplicado as copias geradas pelo
// editor. So o backend usa o nome completo (precisa ser unico); na UI
// exibimos o nome original.
function stripSufixoEditado(arquivo) {
return String(arquivo || "").replace(/_editado_\d+$/i, "");
}
// Extrai "PA2_P15" + "26/05/04" de "PA2_P15 - 240526071530.cge"
// (formato gerado por dmpToCge.js: - yymmddHHMM.cge).
function parseEstacaArquivo(arquivo) {
if (!arquivo) return { nome: "", data: "" };
const limpo = stripSufixoEditado(arquivo);
const m = limpo.match(/^(.*?)\s*-\s*(\d{2})(\d{2})(\d{2})\d{4}\.cge$/i);
if (!m) return { nome: limpo.replace(/\.cge$/i, ""), data: "" };
return { nome: m[1].trim(), data: `${m[2]}/${m[3]}/${m[4]}` };
}
function labelEstaca(arquivo) {
const { nome, data } = parseEstacaArquivo(arquivo);
return data ? `${nome} · ${data}` : nome || "—";
}
function EstacaGrafico({ pasta, arquivo, reloadKey = 0, navLista = [], onNavegar, obra = null, temEditadas = false, onVoltar, origem = "planilha", pausado = false }) {
const iframeRef = React.useRef(null);
const frameRef = React.useRef(null);
const carregadoRef = React.useRef(false);
const srcInicialRef = React.useRef(`/graficos.html?embed=1&pasta=${encodeURIComponent(pasta)}&arquivo=${encodeURIComponent(arquivo)}`);
const [gerandoPdf, setGerandoPdf] = React.useState(false);
const [modalRelOpen, setModalRelOpen] = React.useState(false);
// Nome da obra vem do cabecalho dos dados, que so o iframe tem acesso
// direto. O iframe envia { tipo: 'estaca-meta', obra } via postMessage
// logo apos carregar — guardamos aqui pra exibir no pagehead.
const [obraNome, setObraNome] = React.useState("");
React.useEffect(() => { setObraNome(""); }, [arquivo]);
React.useEffect(() => {
const onMsg = (ev) => {
if (ev.data?.tipo !== 'estaca-meta') return;
if (ev.data.arquivo && ev.data.arquivo !== arquivo) return;
setObraNome(ev.data.obra || "");
};
window.addEventListener('message', onMsg);
return () => window.removeEventListener('message', onMsg);
}, [arquivo]);
// Mantem navLista em ref pra calcular vizinhas no postMessage sem
// disparar o effect de carregar-estaca toda vez que a lista muda
// (evita re-fetch desnecessario quando so o navLista mudou).
const navListaRef = React.useRef(navLista);
React.useEffect(() => { navListaRef.current = navLista; }, [navLista]);
const calcularVizinhas = React.useCallback((p, a) => {
const lista = navListaRef.current || [];
const idx = lista.findIndex(x => x.pasta === p && x.arquivo === a);
if (idx === -1) return [];
const viz = [];
// 2 antes + 2 depois — cobre navegacao rapida sem encarecer demais.
for (let d = 1; d <= 2; d++) {
if (idx - d >= 0) viz.push(lista[idx - d]);
if (idx + d < lista.length) viz.push(lista[idx + d]);
}
return viz;
}, []);
// Recarrega o iframe sempre que o arquivo aberto muda OU quando o
// pai sinaliza atualizacao via reloadKey (ex: salvar uma copia editada
// ja aberta, em que o nome do arquivo nao muda mas o conteudo sim).
// Quando o editor de estacas abre (pausado=true), o iframe de fundo
// fica coberto pelo modal — entao pulamos qualquer postMessage ate o
// editor fechar (reduz CPU/GPU). A re-execucao do efeito quando
// `pausado` cai para false pega a estaca atual e sincroniza.
const reloadKeyAnteriorRef = React.useRef(reloadKey);
React.useEffect(() => {
if (!carregadoRef.current) return; // primeira carga vai pelo src
if (pausado) return;
const iframe = iframeRef.current;
if (!iframe || !iframe.contentWindow) return;
if (reloadKey !== reloadKeyAnteriorRef.current) {
try { iframe.contentWindow.postMessage({ tipo: 'invalidar-cache', pasta, arquivo }, '*'); } catch (_) {}
reloadKeyAnteriorRef.current = reloadKey;
}
const vizinhas = calcularVizinhas(pasta, arquivo);
iframe.contentWindow.postMessage({ tipo: "carregar-estaca", pasta, arquivo, vizinhas }, "*");
}, [pasta, arquivo, reloadKey, pausado, calcularVizinhas]);
// Ping periodico pra manter o iframe "acordado" — o parent nao e
// throttled, entao esses postMessages forcam o iframe a processar
// mensagens regularmente, impedindo que o Chrome reduza sua prioridade.
React.useEffect(() => {
if (pausado) return;
const id = setInterval(() => {
const iframe = iframeRef.current;
try { iframe?.contentWindow?.postMessage({ tipo: 'ping' }, '*'); } catch (_) {}
}, 500);
return () => clearInterval(id);
}, [pausado]);
// Recebe status do iframe pra refletir o estado de "gerando" no botão pai
React.useEffect(() => {
const onMsg = (ev) => {
if (ev.data?.tipo !== "pdf-status") return;
setGerandoPdf(ev.data.estado === "inicio");
};
window.addEventListener("message", onMsg);
return () => window.removeEventListener("message", onMsg);
}, []);
const gerarPdf = (graficos = null) => {
const iframe = iframeRef.current;
if (!iframe || !iframe.contentWindow) return;
iframe.contentWindow.postMessage({ tipo: "gerar-pdf", graficos }, "*");
};
const gerarPng = (graficos = null) => {
const iframe = iframeRef.current;
if (!iframe || !iframe.contentWindow) return;
iframe.contentWindow.postMessage({ tipo: "gerar-png", graficos }, "*");
};
// Ao entrar/trocar de estaca, posiciona o iframe ocupando toda a viewport.
// O usuario rola pra cima pra ver o pagehead (Voltar/PDF) e pra baixo
// pra ver o foot-nav.
React.useEffect(() => {
const frame = frameRef.current;
if (!frame) return;
const t = setTimeout(() => {
frame.scrollIntoView({ behavior: "auto", block: "start" });
}, 60);
return () => clearTimeout(t);
}, [pasta, arquivo]);
return (
{/* Link "← Planilha" visivel so em mobile. O .dash-actions (que tem
o botao desktop) esta hidden em mobile pra liberar espaco ao chart;
este atalho cumpre o mesmo papel — mesmo visual do "← Dashboard"
da FrotaPage (texto plano em azul, sem pill). */}