// ═══════════════════════════════════════════════════════════════════ // Tutorial guiado — spotlight + tooltip // Mostra um overlay escuro com recorte iluminado no elemento alvo, // e um tooltip ao lado com a explicação. Avança/volta entre passos // e troca de tela automaticamente quando o passo exige outra screen. // // 2 trilhas: // • TUTORIAL_DIRETORIA — pra Maria (Diretora) // • TUTORIAL_VENDEDOR — pros colaboradores // // Cada passo: // { tela: 'dashboard', target: '[data-tut="..."]', titulo, descricao } // tela = null → só fica no centro (passo de intro/conclusão) // target = null → tooltip centralizado, sem spotlight // ═══════════════════════════════════════════════════════════════════ const TUTORIAL_DIRETORIA = [ { tela: 'dashboard', target: null, titulo: 'Bem-vinda, Maria! 👋', descricao: 'Vou te mostrar em 3 minutos onde tudo está. Você pode pular a qualquer momento (ESC) e reabrir esse tour pelo menu "Minha conta".' }, // ── PAINEL ───────────────────────────────────────────────────────── { tela: 'dashboard', target: '[data-tut="sidebar-nav"]', titulo: 'Menu principal', descricao: 'Painel, Leads, Regras, Histórico, Treinamentos e Avisos. Cada área é uma aba.' }, { tela: 'dashboard', target: '[data-tut="btn-validacao"]', titulo: 'Tabela de validação', descricao: 'Excel SEM valores em R$ — só leads + responsáveis + jornada. Você manda pro time conferir antes de pagar.' }, { tela: 'dashboard', target: '[data-tut="btn-folha-detalhada"]', titulo: 'Folha detalhada (Excel)', descricao: 'Planilha com 3 abas: resumo por pessoa, detalhe (cada centavo + motivo) e visão por lead.' }, { tela: 'dashboard', target: '[data-tut="btn-excel"]', titulo: 'Exportar Excel', descricao: 'Planilha bruta dos leads e comissões — pra mexer livre, juntar com outros dados.' }, { tela: 'dashboard', target: '[data-tut="btn-pdf"]', titulo: 'Gerar folha (PDF)', descricao: 'PDF formatado pronto pra imprimir ou arquivar.' }, { tela: 'dashboard', target: '[data-tut="btn-fechar"]', titulo: 'Fechar trimestre', descricao: 'Arquiva tudo no Histórico e abre o próximo trimestre automaticamente. Leads ainda em aberto migram pro novo período.' }, { tela: 'dashboard', target: '[data-tut="stats-trimestre"]', titulo: 'Números do trimestre', descricao: 'A pagar, faturado, % do orçamento gasto em variável e leads ativos. Tudo atualiza em tempo real a cada lançamento.' }, { tela: 'dashboard', target: '[data-tut="metas-origem"]', titulo: 'Metas por origem', descricao: 'Quanto cada canal (ativa, hunter, fidelização, eventos…) fechou em relação à meta do trimestre.' }, { tela: 'dashboard', target: '[data-tut="ranking"]', titulo: 'Ranking de comissão', descricao: 'Top 6 vendedores por valor de comissão acumulada no trimestre.' }, { tela: 'dashboard', target: '[data-tut="folha-inline"]', titulo: 'Folha detalhada — quanto cada um ganhou e por quê', descricao: 'Clica no nome de uma pessoa pra abrir: aparece lead a lead, qual gatilho disparou e quanto rendeu. É a explicação completa de cada centavo.' }, // ── LEADS ────────────────────────────────────────────────────────── { tela: 'leads', target: '[data-tut="btn-novo-lead"]', titulo: 'Cadastrar lead', descricao: 'Aqui você cria um lead novo: nome, cliente, origem, tipo (projeto/edital), valor, participantes e gatilhos.' }, { tela: 'leads', target: '[data-tut="filtros-leads"]', titulo: 'Filtros e busca', descricao: 'Filtra por tipo, origem ou status, ou busca pelo nome do lead/cliente.' }, { tela: 'leads', target: '[data-tut="tabela-leads"]', titulo: 'Editar leads', descricao: 'Toque numa linha pra abrir o detalhe — marcar gatilhos, mexer no valor, duplicar ou apagar.' }, // ── REGRAS ───────────────────────────────────────────────────────── { tela: 'regras', target: '[data-tut="abas-regras"]', titulo: 'Regras do comissionamento', descricao: 'Regras por origem, comissão variável, fixa por markup, taxa por setor, rateio por salário e cadastro de vendedores.' }, { tela: 'regras', target: '[data-tut="btn-novo-vendedor"]', titulo: 'Adicionar / editar vendedor', descricao: 'Clica aqui pra cadastrar uma pessoa nova, ou em qualquer linha existente pra editar salário, papel, setor ou desativar.' }, // ── TREINAMENTOS ─────────────────────────────────────────────────── { tela: 'treinamentos', target: '[data-tut="btn-novo-treinamento"]', titulo: 'Adicionar treinamento', descricao: 'Cadastra cursos, palestras ou conteúdos do squad comercial. Aparece pra todo o time.' }, // ── AVISOS ───────────────────────────────────────────────────────── { tela: 'avisos', target: '[data-tut="form-aviso"]', titulo: 'Publicar aviso', descricao: 'Publica comunicados pro time. Aparece no feed deles e pode ser enviado por e-mail (abre o Hostinger).' }, { tela: 'avisos', target: '[data-tut="lista-avisos"]', titulo: 'Avisos publicados', descricao: 'Aqui você apaga avisos antigos. Cada card tem o botão "Excluir" no rodapé.' }, // ── FIM ──────────────────────────────────────────────────────────── { tela: 'dashboard', target: null, titulo: 'Pronto! 🎉', descricao: 'Você já conhece todo o sistema. Pra rever esse tour é só clicar em "Ver tutorial" no menu lateral, na seção Minha conta.' }, ]; const TUTORIAL_VENDEDOR = [ { tela: 'extrato', target: null, titulo: 'Bem-vindo! 👋', descricao: 'Vou te mostrar em 2 minutos onde acompanhar suas comissões, mexer com leads e usar o simulador.' }, // ── PERFIL / FOTO ───────────────────────────────────────────────── { tela: 'extrato', target: '[data-tut="sidebar-avatar"]', titulo: 'Sua foto de perfil', descricao: 'Clica no seu avatar (com o "+" verde) pra trocar a foto. Ela aparece pra todo o time no ranking e nos leads.' }, // ── EXTRATO ─────────────────────────────────────────────────────── { tela: 'extrato', target: '[data-tut="contador-leads"]', titulo: 'Leads do trimestre', descricao: 'Quantos leads você participou neste trimestre, e em quais fases eles estão.' }, { tela: 'extrato', target: '[data-tut="ranking-time"]', titulo: 'Ranking do time', descricao: 'Onde você está no ranking de comissões do Escalab — comparado com os colegas no mesmo trimestre.' }, { tela: 'extrato', target: '[data-tut="meus-leads"]', titulo: 'Seus leads', descricao: 'Cada lead em que você participou + quanto ele vale de comissão pra você (variável + fixa).' }, { tela: 'extrato', target: '[data-tut="info-liberacao"]', titulo: 'Valores ainda não liberados', descricao: 'Os valores que você vê aqui são uma projeção. A Maria libera o pagamento no fim do trimestre, depois de fechar e validar os números.' }, { tela: 'extrato', target: '[data-tut="btn-requerimento"]', titulo: 'Abrir requerimento', descricao: 'Manda uma solicitação direta pra Maria: revisar um lead, contestar um valor, pedir reclassificação, etc.' }, { tela: 'extrato', target: '[data-tut="btn-senha"]', titulo: 'Alterar senha / enviar por e-mail', descricao: 'Troca sua senha de acesso pelo Firebase ou pede pra receber teu extrato completo por e-mail.' }, // ── SIMULADOR ───────────────────────────────────────────────────── { tela: 'simulador', target: '[data-tut="sim-passos"]', titulo: 'Simulador em 5 passos', descricao: 'Cada passo já vem preenchido automaticamente com base no contexto. Tu só ajusta o que quiser testar — origem, valor, gatilhos, time.' }, { tela: 'simulador', target: '[data-tut="sim-resultado"]', titulo: 'Resultado em tempo real', descricao: 'Mostra o quanto você receberia + como o valor seria dividido entre o time naquele cenário hipotético.' }, // ── TREINAMENTOS ────────────────────────────────────────────────── { tela: 'treinamentos', target: '[data-tut="lista-treinamentos"]', titulo: 'Treinamentos', descricao: 'Cursos e palestras do squad comercial. Você pode adicionar um treinamento que viu/participou — útil pra registrar conteúdo do time.' }, // ── AVISOS ──────────────────────────────────────────────────────── { tela: 'avisos', target: '[data-tut="lista-avisos-vendedor"]', titulo: 'Avisos', descricao: 'Comunicados oficiais da Maria pra todo o time aparecem aqui. Quando tiver aviso novo, abre um popup automático no login.' }, // ── FIM ─────────────────────────────────────────────────────────── { tela: 'extrato', target: null, titulo: 'Pronto! 👏', descricao: 'Você já conhece o sistema. Pra rever esse tour é só clicar em "Ver tutorial" no menu lateral, na seção Minha conta.' }, ]; // ═══════════════════════════════════════════════════════════════════ // Tutorial — componente do overlay // ═══════════════════════════════════════════════════════════════════ function Tutorial({ open, steps, onClose, onScreenChange }) { const [idx, setIdx] = useState(0); const [rect, setRect] = useState(null); // Reseta o índice toda vez que abrir. useEffect(() => { if (open) setIdx(0); }, [open]); const step = open ? (steps[idx] || null) : null; // Troca de tela antes de procurar o alvo. useEffect(() => { if (!open || !step) return; if (step.tela && onScreenChange) onScreenChange(step.tela); }, [open, step?.tela]); // eslint-disable-line // Procura o alvo no DOM. Tenta várias vezes pois a tela pode estar // renderizando ainda (componentes pesados como tabelas demoram um frame ou dois). useEffect(() => { if (!open || !step) { setRect(null); return; } if (!step.target) { setRect(null); return; } let cancelado = false; const tentativas = [50, 120, 220, 380, 600, 900]; let tentativaIdx = 0; const tentar = () => { if (cancelado) return; const el = document.querySelector(step.target); if (el) { // Rola pro alvo ficar na tela antes de medir. el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' }); // Mede no próximo frame, depois do scroll iniciar. requestAnimationFrame(() => { if (cancelado) return; const r = el.getBoundingClientRect(); setRect({ top: r.top, left: r.left, width: r.width, height: r.height }); }); } else if (tentativaIdx < tentativas.length) { setTimeout(tentar, tentativas[tentativaIdx++]); } else { // Desistiu de encontrar — mostra tooltip centralizado. setRect(null); } }; tentar(); return () => { cancelado = true; }; }, [open, idx, step?.target]); // Re-mede em resize e scroll. Sem isso, mudar de tamanho deixa o spotlight no lugar errado. useEffect(() => { if (!open || !step?.target) return; const onResize = () => { const el = document.querySelector(step.target); if (el) { const r = el.getBoundingClientRect(); setRect({ top: r.top, left: r.left, width: r.width, height: r.height }); } }; window.addEventListener('resize', onResize); window.addEventListener('scroll', onResize, true); return () => { window.removeEventListener('resize', onResize); window.removeEventListener('scroll', onResize, true); }; }, [open, idx, step?.target]); // ESC fecha useEffect(() => { if (!open) return; const onKey = (e) => { if (e.key === 'Escape') onClose(); if (e.key === 'ArrowRight') setIdx(i => Math.min(steps.length - 1, i + 1)); if (e.key === 'ArrowLeft') setIdx(i => Math.max(0, i - 1)); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [open, steps.length, onClose]); if (!open || !step) return null; const ehUltimo = idx === steps.length - 1; const ehPrimeiro = idx === 0; // Calcula posição do tooltip de forma que NUNCA saia da viewport. // Prefere abaixo do alvo; se não couber, em cima; se nem isso, ao lado; // por último, centraliza no meio da tela (quando target = null ou não achou). const TOOLTIP_W = Math.min(360, window.innerWidth - 32); const TOOLTIP_H_ESTIMADO = 220; const margem = 16; let tooltipTop, tooltipLeft, setaPos = null; if (rect) { const espacoAbaixo = window.innerHeight - rect.top - rect.height; const espacoAcima = rect.top; if (espacoAbaixo >= TOOLTIP_H_ESTIMADO + margem) { tooltipTop = rect.top + rect.height + 12; setaPos = 'cima'; } else if (espacoAcima >= TOOLTIP_H_ESTIMADO + margem) { tooltipTop = rect.top - TOOLTIP_H_ESTIMADO - 12; setaPos = 'baixo'; } else { tooltipTop = Math.max(margem, window.innerHeight / 2 - TOOLTIP_H_ESTIMADO / 2); } // Horizontal: alinha com o alvo, mas clampa nas bordas da viewport tooltipLeft = Math.max(margem, Math.min(window.innerWidth - TOOLTIP_W - margem, rect.left + rect.width / 2 - TOOLTIP_W / 2)); } else { tooltipTop = window.innerHeight / 2 - TOOLTIP_H_ESTIMADO / 2; tooltipLeft = window.innerWidth / 2 - TOOLTIP_W / 2; } return (
{/* Overlay escuro com cutout — usando box-shadow gigante. Um div com tamanho do alvo + box-shadow espalhada cria o efeito "spotlight" sem precisar de SVG mask. */} {rect ? ( <>
) : (
{ /* impede fechar acidental */ }} style={{ position: 'absolute', inset: 0, background: 'rgba(0,15,18,.72)' }} /> )} {/* Tooltip */}
{/* Header colorido */}
Tutorial · {idx + 1} de {steps.length}
{/* Corpo */}

{step.titulo}

{step.descricao}

{/* Barra de progresso */}
{/* Footer com botões */}
{!ehPrimeiro && ( )}
); } Object.assign(window, { Tutorial, TUTORIAL_DIRETORIA, TUTORIAL_VENDEDOR });