// app.jsx — AFEX PAY shell, router, navigation const { useState: uS, useEffect: uE } = React; const SELLER_NAV = [ { id: "s/dashboard", label: "Dashboard", icon: "grid" }, { id: "s/vendas", label: "Vendas", icon: "cart" }, { id: "s/transacoes", label: "Transações", icon: "swap" }, { id: "s/taxas", label: "Taxas", icon: "percent" }, { id: "s/repasses", label: "Repasses", icon: "wallet" }, { id: "s/integracoes", label: "Integrações", icon: "plug" }, { id: "s/api", label: "APIs", icon: "code" }, { id: "s/relatorios", label: "Relatórios", icon: "chart" }, { id: "s/config", label: "Configurações", icon: "gear" }, { id: "s/suporte", label: "Suporte", icon: "help" }, ]; const ADMIN_NAV = [ { id: "a/dashboard", label: "Dashboard", icon: "grid" }, { id: "a/sellers", label: "Sellers", icon: "users" }, { id: "a/transacoes", label: "Transações", icon: "swap" }, { id: "a/repasses", label: "Repasses", icon: "wallet" }, { id: "a/taxas", label: "Gestão de taxas", icon: "percent" }, { id: "a/compliance", label: "Compliance", icon: "shield" }, { id: "a/integracoes", label: "Integrações", icon: "plug" }, { id: "a/relatorios", label: "Relatórios", icon: "chart" }, { id: "a/config", label: "Configurações", icon: "gear" }, ]; const ROUTES = { "auth/login": (p) => , "auth/signup": (p) => , "auth/forgot": (p) => , "auth/verify": (p) => , "auth/reset": (p) => , "auth/2fa": (p) => , "onboarding": (p) => , "s/dashboard": (p) => , "s/vendas": () => , "s/transacoes": () => , "s/taxas": () => , "s/repasses": () => , "s/integracoes": (p) => , "s/api": () => , "s/relatorios": () => , "s/config": () => , "s/suporte": () => , "a/dashboard": (p) => , "a/sellers": () => , "a/transacoes": () => , "a/repasses": () => , "a/taxas": () => , "a/compliance": () => , "a/integracoes": () => , "a/relatorios": () => , "a/config": () => , }; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#FF5A00", "theme": "dark", "density": "regular" }/*EDITMODE-END*/; function Sidebar({ route, go, nav, ws, collapsed }) { return ( ); } function Topbar({ go, ws, setWs, onMenu, user, onLogout }) { const [notif, setNotif] = uS(false); const uName = user ? (user.name || user.email) : (ws === "a" ? "Roberto Lima" : "Marina Alves"); const uMail = user ? user.email : (ws === "a" ? "Super admin" : "contato@luminastore.com.br"); const [wsMenu, setWsMenu] = uS(false); const [userMenu, setUserMenu] = uS(false); uE(() => { const h = () => { setNotif(false); setWsMenu(false); setUserMenu(false); }; window.addEventListener("click", h); return () => window.removeEventListener("click", h); }, []); const stop = e => e.stopPropagation(); return (
{/* workspace switcher */}
{wsMenu && (
{[["s", "Painel do Seller", "Lumina Store", "var(--accent)"], ["a", "Painel Admin", "AFEX Pay · Global", "var(--violet)"]].map(([k, t, s, c]) => ( ))}
)}
{/* notifications */}
{notif && (
Notificações
{DATA.notifications.map((n, i) => { const C = I[n.icon]; const c = n.type === "orange" ? "accent" : n.type; return (
e.currentTarget.style.background = "var(--surface-2)"} onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
{n.title}{n.text}
{n.time}
);})}
)}
{/* user */}
{userMenu && (
{uName}{uMail}
{[["gear", "Configurações", () => go(ws === "a" ? "a/config" : "s/config")], ["help", "Ajuda & suporte", () => go("s/suporte")]].map(([ic, t, fn]) => { const C = I[ic]; return ;})}
)}
); } function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [route, setRoute] = uS(() => localStorage.getItem("afex_route") || "auth/login"); const [ws, setWs] = uS(() => localStorage.getItem("afex_ws") || "s"); const [user, setUser] = uS(null); const [authReady, setAuthReady] = uS(false); const [mobileNav, setMobileNav] = uS(false); const main = React.useRef(null); const go = (r) => { // Role gate: keep a logged-in user inside their own workspace. if (user) { if (user.role === "seller" && r.startsWith("a/")) r = "s/dashboard"; if (user.role === "admin" && r.startsWith("s/")) r = "a/dashboard"; } setRoute(r); localStorage.setItem("afex_route", r); if (r.startsWith("a/")) { setWs("a"); localStorage.setItem("afex_ws", "a"); } else if (r.startsWith("s/")) { setWs("s"); localStorage.setItem("afex_ws", "s"); } setMobileNav(false); if (main.current) main.current.scrollTop = 0; }; const switchWs = (k) => { setWs(k); localStorage.setItem("afex_ws", k); }; const logout = async () => { try { await api.auth.logout(); } catch (e) { /* ignore */ } setUser(null); go("auth/login"); }; // Session gate — validates any stored token against /auth/me on load and // routes the user to their workspace (or to login). uE(() => { let cancelled = false; const finish = () => { if (!cancelled) setAuthReady(true); }; const urlToken = new URLSearchParams(window.location.search).get("token"); if (urlToken) { go("auth/reset"); finish(); return; } if (!api.auth.token()) { const r = localStorage.getItem("afex_route") || "auth/login"; if (!r.startsWith("auth/") && r !== "onboarding") go("auth/login"); finish(); return; } api.auth.me() .then((u) => { if (cancelled) return; setUser(u); setWs(u.role === "admin" ? "a" : "s"); const r = localStorage.getItem("afex_route") || ""; const wrong = r.startsWith("auth/") || r === "" || (u.role === "admin" && r.startsWith("s/")) || (u.role === "seller" && r.startsWith("a/")); if (wrong) { const home = u.role === "admin" ? "a/dashboard" : "s/dashboard"; setRoute(home); localStorage.setItem("afex_route", home); } }) .catch(() => { if (!cancelled) { api.auth.setToken(null); go("auth/login"); } }) .finally(finish); return () => { cancelled = true; }; }, []); // apply tweaks uE(() => { const r = document.documentElement; r.style.setProperty("--accent", t.accent); r.setAttribute("data-theme", t.theme === "light" ? "light" : "dark"); r.style.setProperty("--density", t.density === "compact" ? "0.82" : t.density === "comfy" ? "1.12" : "1"); }, [t]); const isFull = route.startsWith("auth/") || route === "onboarding"; const View = ROUTES[route] || ROUTES["s/dashboard"]; const nav = ws === "a" ? ADMIN_NAV : SELLER_NAV; if (!authReady) { return
Carregando…
; } return (
{isFull ? (
{View({ go })}
) : (
{mobileNav &&
setMobileNav(false)} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", zIndex: 99 }} className="show-mobile-fixed" />}
setMobileNav(true)} user={user} onLogout={logout} />
{View({ go })}
)} setTweak("accent", v)} /> setTweak("theme", v)} /> setTweak("density", v)} />
); } ReactDOM.createRoot(document.getElementById("root")).render();