// ════════════════════════════════════════════════════════════════ // ICONS — light stroke, geometric, lucide-style // ════════════════════════════════════════════════════════════════ const Icon = ({ name, size = 16, stroke = 1.5 }) => { const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round", }; const paths = { dashboard: <>, building: <>, link: <>, activity: <>, user: <>, settings: <>, plus: <>, check: <>, checkbig: <>, x: <>, arrowRight: <>, copy: <>, refresh: <>, eye: <>, eyeOff: <>, search: <>, chevronRight: <>, chevronDown: <>, moreHorizontal: <>, moreVertical: <>, download: <>, external: <>, lock: <>, shield: <>, zap: <>, clock: <>, alert: <>, info: <>, cloud: <>, database: <>, box: <>, chart: <>, arrowLeft: <>, logout: <>, file: <>, sparkle: <>, bell: <>, key: <>, pen: <>, contaazul: null, powerbi: null, }; return {paths[name]}; }; // Brand-ish logo marks const ContaAzulMark = ({ size = 24 }) => ( ); const PowerBIMark = ({ size = 24 }) => ( ); const SupabaseMark = ({ size = 24 }) => ( ); const BridgeMark = ({ size = 18 }) => ( ); // ════════════════════════════════════════════════════════════════ // MARQUEE // ════════════════════════════════════════════════════════════════ const Marquee = () => { const items = [ "7 dias de garantia", "100% LGPD compliant", "Refresh token automático", "OAuth 2.0 da Conta Azul", "Endpoint estático para Power BI", "+500 empresas #conectados", "Suporte em pt-BR", "Vault criptografado", ]; const all = [...items, ...items]; return (
{all.map((t, i) => ( {t} ◆ ))}
); }; // ════════════════════════════════════════════════════════════════ // SIDEBAR // ════════════════════════════════════════════════════════════════ const Sidebar = ({ route, setRoute, user, empresas }) => { const itemsTop = [ { id: "dashboard", label: "Dashboard", icon: "dashboard" }, { id: "empresas", label: "Empresas", icon: "building", badge: empresas.length }, { id: "logs", label: "Logs da API", icon: "activity" }, ]; const itemsBottom = [ { id: "conta", label: "Conta", icon: "user" }, { id: "settings", label: "Configurações", icon: "settings", disabled: true }, ]; const isActive = (id) => { if (id === "dashboard") return route.name === "dashboard"; if (id === "empresas") return ["empresas", "empresa-new", "empresa", "oauth"].includes(route.name); return route.name === id; }; return ( ); }; // ════════════════════════════════════════════════════════════════ // COPY TOAST // ════════════════════════════════════════════════════════════════ const useCopyToast = () => { const [msg, setMsg] = React.useState(""); const [show, setShow] = React.useState(false); const timerRef = React.useRef(); const copy = (text, label = "URL copiada para a área de transferência") => { try { navigator.clipboard?.writeText(text); } catch (e) {} setMsg(label); setShow(true); clearTimeout(timerRef.current); timerRef.current = setTimeout(() => setShow(false), 2200); }; const Toast = () => (
{msg}
); return { copy, Toast }; }; // ════════════════════════════════════════════════════════════════ // FLOW MAP (you → platform → contaazul → powerbi) // ════════════════════════════════════════════════════════════════ const FlowMap = ({ activeStep = 0 }) => { // 0 = none, 1 = user→bridge, 2 = bridge→contaazul, 3 = contaazul→powerbi const nodes = [ { icon: , label: "Você" }, { icon: , label: "API Bridge" }, { icon: , label: "Conta Azul", brand: true }, { icon: , label: "Power BI", brand: true }, ]; return (
Fluxo da Autorização
{nodes.map((n, i) => (
= i + 1 ? " active" : "")}>
{n.icon}
{n.label}
{i < nodes.length - 1 && (
= i + 1 ? " active" : "")}>
)} ))}
); }; // ════════════════════════════════════════════════════════════════ // TOKEN TIMER (30min countdown ring) // ════════════════════════════════════════════════════════════════ const TokenTimer = ({ minutesElapsed = 12, total = 30, paused = false }) => { const left = Math.max(0, total - minutesElapsed); const pct = Math.max(0, Math.min(1, left / total)); const r = 72; const C = 2 * Math.PI * r; const dash = C * pct; const offset = C - dash; const state = left < 5 ? "danger" : left < 15 ? "warn" : "ok"; return (
Refresh Token Timer
{state === "ok" ? "Token ativo" : state === "warn" ? "Renovar logo" : "Renovação iminente"}
{left}
min restantes
O access_token atual é usado por até 30 minutos. Após esse limite, a próxima chamada do Power BI dispara o refresh_token automaticamente — o usuário não percebe.
); }; // ════════════════════════════════════════════════════════════════ // STATUS BADGE // ════════════════════════════════════════════════════════════════ const StatusBadge = ({ status }) => { const map = { connected: { cls: "badge-green", label: "Conectado", dot: true, pulse: true }, needs_refresh: { cls: "badge-yellow", label: "Refresh pendente", dot: true }, pending: { cls: "badge-neutral", label: "Aguardando autorização", dot: false }, connecting: { cls: "badge-orange", label: "Conectando…", dot: true, pulse: true }, error: { cls: "badge-red", label: "Erro de autenticação", dot: true }, }; const s = map[status] || map.pending; return ( {s.dot && } {s.label} ); }; // ════════════════════════════════════════════════════════════════ // PAGE HEAD // ════════════════════════════════════════════════════════════════ const PageHead = ({ overline, title, sub, children }) => (
{overline && {overline}}

{title}

{sub &&

{sub}

}
{children &&
{children}
}
); Object.assign(window, { Icon, ContaAzulMark, PowerBIMark, SupabaseMark, BridgeMark, Marquee, Sidebar, useCopyToast, FlowMap, TokenTimer, StatusBadge, PageHead, });