// App.jsx const NAV = [ { id: "dashboard", label: "Visão geral", icon: "Home", kbd: "G" }, { id: "diarios", label: "Diários", icon: "Book", kbd: "D" }, { id: "cronograma", label: "Cronograma", icon: "Calendar", kbd: "C" }, { id: "progresso", label: "Progresso", icon: "Chart", kbd: "P" }, { id: "financeiro", label: "Financeiro", icon: "Wallet", kbd: "F" }, { id: "notas", label: "Notas fiscais",icon: "Receipt", kbd: "N" }, { id: "cameras", label: "Câmeras", icon: "Cam", kbd: "L" }, { id: "documentos", label: "Documentos", icon: "Doc", kbd: "A" }, ]; const NAV_LABELS = Object.fromEntries(NAV.map(n => [n.id, n.label])); // Módulo liberado? PORTAL_PERMISSOES vem do backend (default: tudo true). // Ids do NAV batem 1:1 com as chaves de permissão. function isModuleEnabled(id) { const perms = window.PORTAL_PERMISSOES || {}; return perms[id] !== false; } function enabledNav() { return NAV.filter((n) => isModuleEnabled(n.id)); } const PAGES = { dashboard: (p) => , diarios: () => , cronograma:() => , progresso: () => , financeiro:() => , notas: () => , cameras: () => , documentos:() => , }; function Sidebar({ active, onNav, onLogout }) { const user = window.PORTAL_USER || {}; // Mostra a identidade de QUEM está logado (a conta ClientUser), não o síndico // cadastrado na obra — a conta pode ser de outra pessoa (ex: gestor, conselho). // Fallback: nome do síndico da obra, depois email. const displayName = user.nome || PROJECT.sindico || user.email || "Cliente"; const displayRole = user.cargo || "Sindico"; const initials = displayName .split(/\s+/).filter(Boolean).slice(0, 2).map((p) => p[0]?.toUpperCase()).join("") || "C"; // Indicator pill — slides between active items const navRef = React.useRef(null); const [indicator, setIndicator] = React.useState({ top: 0, height: 0, visible: false }); React.useLayoutEffect(() => { const el = navRef.current?.querySelector(`[data-nav="${active}"]`); if (!el || !navRef.current) return; const parentRect = navRef.current.getBoundingClientRect(); const rect = el.getBoundingClientRect(); setIndicator({ top: rect.top - parentRect.top, height: rect.height, visible: true, }); }, [active]); return ( ); } function Topbar({ active, onNav }) { const obra = window.PORTAL_USER ? (PROJECT.name || "Obra") : ""; const [searchOpen, setSearchOpen] = React.useState(false); const [searchQ, setSearchQ] = React.useState(""); const [bellOpen, setBellOpen] = React.useState(false); // Busca local (diarios + documentos) — navega para a pagina ao clicar em um resultado. const searchResults = React.useMemo(() => { const q = searchQ.trim().toLowerCase(); if (!q) return []; const out = []; for (const d of DIARIES) { const hay = [d.id, d.date, d.statusLabel, d.note, (d.activities || []).join(" ")].join(" ").toLowerCase(); if (hay.includes(q)) out.push({ type: "diario", label: d.id + " · " + fmtDateShort(d.date), sub: (d.activities[0] || "").slice(0, 80), target: "diarios" }); if (out.length >= 6) break; } for (const doc of DOCS_OBRA.concat(DOCS_EQUIPE)) { if (out.length >= 10) break; if (doc.name.toLowerCase().includes(q)) out.push({ type: "documento", label: doc.name, sub: doc.category + " · " + doc.size, target: "documentos" }); } return out; }, [searchQ]); // Fecha popovers ao trocar de pagina React.useEffect(() => { setSearchOpen(false); setBellOpen(false); }, [active]); // Esc fecha popovers React.useEffect(() => { const onKey = (e) => { if (e.key === "Escape") { setSearchOpen(false); setBellOpen(false); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); const notifications = React.useMemo(() => { const out = []; // Proximo marco for (const m of MILESTONES.slice(0, 3)) { out.push({ title: m.label, body: m.fin ? "Compromisso financeiro em " + m.days + " dias" : "Marco em " + m.days + " dias", date: m.date, target: m.fin ? "financeiro" : "cronograma", kind: m.fin ? "fin" : "marco", }); } // Ultimo diario if (DIARIES[0]) { const d = DIARIES[0]; out.push({ title: "Novo diario de obra", body: (d.activities[0] || d.statusLabel).slice(0, 100), date: d.date, target: "diarios", kind: "diario", }); } // Proxima parcela nao paga const nextParc = (FIN.installments || []).find((p) => p.status !== "paid"); if (nextParc) { out.push({ title: "Parcela " + nextParc.n + " em aberto", body: fmtBRL(nextParc.amount) + " · venc. " + fmtDate(nextParc.due), date: nextParc.due, target: "financeiro", kind: "parcela", }); } return out.slice(0, 5); }, []); return (
{obra} / {NAV_LABELS[active]}
canteiro ativo
{/* Search */}
{searchOpen && (
setSearchQ(e.target.value)} placeholder="Buscar diarios, documentos, datas..." style={{ width: "100%", border: "1px solid var(--border)", borderRadius: 6, padding: "8px 10px", fontSize: 13, marginBottom: 8, outline: "none", }} />
{searchQ.trim() === "" ? (
Digite ao menos 2 caracteres para buscar.
) : searchResults.length === 0 ? (
Nenhum resultado encontrado.
) : searchResults.map((r, i) => ( ))}
)}
{/* Notificacoes */}
{bellOpen && (
Novidades {notifications.length}
{notifications.length === 0 ? (
Nada novo por enquanto.
) : notifications.map((n, i) => ( ))}
)}
); } // Page transition wrapper function PageTransition({ pageKey, children }) { return (
{children}
); } // Tweaks panel const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "density": "comfortable", "sidebar": "full", "motion": "refined" }/*EDITMODE-END*/; function TweaksPanel({ open, state, setState }) { if (!open) return null; const Row = ({ label, options, k }) => (
{options.map(o => ( ))}
); return (
Tweaksv1
); } function useIsMobile() { const [isMobile, setIsMobile] = React.useState(() => window.innerWidth < 768); React.useEffect(() => { const mq = window.matchMedia("(max-width: 767px)"); const onChange = (e) => setIsMobile(e.matches); mq.addEventListener ? mq.addEventListener("change", onChange) : mq.addListener(onChange); return () => { mq.removeEventListener ? mq.removeEventListener("change", onChange) : mq.removeListener(onChange); }; }, []); return isMobile; } function FullPageLoader({ label }) { return (
{label || "Carregando..."}
); } function App() { const isMobile = useIsMobile(); // 'unknown' | 'loading' | 'logged' | 'logged-out' const [authState, setAuthState] = React.useState("unknown"); const [dataReady, setDataReady] = React.useState(false); const [active, setActive] = React.useState(() => localStorage.getItem("portal-page") || "dashboard"); const [tweaks, setTweaks] = React.useState(TWEAK_DEFAULTS); const [tweaksOpen, setTweaksOpen] = React.useState(false); const logged = authState === "logged"; React.useEffect(() => localStorage.setItem("portal-page", active), [active]); // Bootstrap: tenta reusar sessao existente do cookie HTTP-only React.useEffect(() => { let cancelled = false; (async () => { try { await portalApi.me(); // 200 se cookie valido if (cancelled) return; setAuthState("loading"); const ok = await loadPortalData(); if (cancelled) return; if (ok) { setDataReady(true); setAuthState("logged"); } else { setAuthState("logged-out"); } } catch { if (!cancelled) setAuthState("logged-out"); } })(); return () => { cancelled = true; }; }, []); const handleLoginSuccess = React.useCallback(() => { setDataReady(true); setAuthState("logged"); }, []); const handleLogout = React.useCallback(async () => { try { await portalApi.logout(); } catch (_) {} setDataReady(false); setAuthState("logged-out"); }, []); // Motion setting toggles a data-attr on root React.useEffect(() => { document.documentElement.dataset.motion = tweaks.motion || "refined"; }, [tweaks.motion]); // Edit mode bridge React.useEffect(() => { const onMsg = (e) => { const d = e.data || {}; if (d.type === "__activate_edit_mode") setTweaksOpen(true); if (d.type === "__deactivate_edit_mode") setTweaksOpen(false); }; window.addEventListener("message", onMsg); try { window.parent.postMessage({ type: "__edit_mode_available" }, "*"); } catch (_) {} return () => window.removeEventListener("message", onMsg); }, []); const setTweak = (k, v) => { setTweaks(prev => { const next = { ...prev, [k]: v }; try { window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*"); } catch (_) {} return next; }); }; // Keyboard shortcuts React.useEffect(() => { const onKey = (e) => { if (!logged) return; if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return; const hit = NAV.find(n => n.kbd.toLowerCase() === e.key.toLowerCase()); if (hit && isModuleEnabled(hit.id)) setActive(hit.id); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [logged]); if (authState === "unknown") { return ; } if (authState === "loading") { return ; } if (!logged) { return ( <> {isMobile ? : } ); } if (!dataReady) { return ; } if (isMobile) { return ( <> ); } // Se a página ativa foi desabilitada pelo admin, renderiza a primeira liberada // (derivado — não mexe no estado salvo; se o módulo voltar, volta a aparecer). const navEnabled = enabledNav(); const activeAllowed = isModuleEnabled(active) && PAGES[active]; const effectiveActive = activeAllowed ? active : (navEnabled[0]?.id || "dashboard"); const Page = PAGES[effectiveActive] || PAGES.dashboard; return (
); } // Guard: Babel standalone re-processa scripts quando o DOM muda, e o brand // patcher (strucon-brand.jsx) usa MutationObserver que pode disparar novamente // a execucao do app.jsx em alguns navegadores. Reutilizamos o root existente // em vez de criar um novo — evita o warning "createRoot() on a container that // has already been passed to createRoot() before" + NotFoundError. (() => { const rootEl = document.getElementById("root"); if (!rootEl) return; if (!rootEl.__portalReactRoot) { rootEl.__portalReactRoot = ReactDOM.createRoot(rootEl); } rootEl.__portalReactRoot.render(); })();