"use client"; import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react"; import { createPortal } from "react-dom"; import { AnimatePresence, motion, useReducedMotion } from "framer-motion"; import { Activity, CalendarClock, ChartPie, CheckCircle2, Clock3, Eye, FileDown, Gauge, History, Hourglass, Image as IconeDeImagem, Link2, Loader2, MapPin, MessageCircle, Minus, Monitor, MousePointerClick, PackageCheck, PackageSearch, RefreshCw, Repeat, Send, Smartphone, Tablet, Timer, TrendingDown, TrendingUp, Undo2, UserCheck, Users, X, XCircle, type LucideIcon, } from "lucide-react"; import { duracaoLegivel, FUSO, haQuantoTempo, linkDoWhatsapp, MINIMO_PARA_MEDIR_SINAIS, porcentoLegivel, type AcaoDoCliente, type AparelhoDaEquipe, type AparelhoDoLink, type ChanceDoOrcamento, type MetricasDoLink, type Passo, type SecaoDaFolha, type TipoDeAparelho, type VisitaDoLink, } from "@/lib/metricas-do-link"; import { AnelDeValor, COR_DO_TIPO, COR_DOS_OUTROS, CORES_DE_SERIE, MiniAnel, RelogioDeHoras, Rosca, type Fatia } from "./graficos"; /* A janela "Métricas do link" do orçamento. Quatro abas: Resumo (a chance pelo link, os números e o que fazer agora), Visitas (a linha do tempo e o relógio de quando o cliente abre), Aparelhos (em quantos aparelhos foi aberto, e o "fui eu") e Chance (de onde sai o número). Os números vêm prontos da rota /api/quotes/[id]/metricas-do-link; aqui é só desenho. Enquanto a janela está aberta, ela pergunta de novo a cada 20 segundos: dá para ver o cliente abrindo o orçamento na hora. */ type Aba = "resumo" | "visitas" | "aparelhos" | "chance"; const ABAS: Array<{ id: Aba; rotulo: string; curto: string; Icone: LucideIcon }> = [ { id: "resumo", rotulo: "Resumo", curto: "Resumo", Icone: Gauge }, { id: "visitas", rotulo: "Visitas", curto: "Visitas", Icone: History }, { id: "aparelhos", rotulo: "Aparelhos", curto: "Aparelhos", Icone: Smartphone }, { id: "chance", rotulo: "Chance pelo link", curto: "Chance", Icone: TrendingUp }, ]; const ROTULO_DA_SECAO: Record = { itens: "os itens", total: "o total", condicoes: "as condições", observacoes: "as observações", fim: "até o fim", }; const ACAO: Record = { pdf: { rotulo: "Baixou o PDF", Icone: FileDown }, aprovar: { rotulo: "Clicou em aprovar", Icone: MousePointerClick }, aprovou: { rotulo: "Aprovou", Icone: PackageCheck }, artes: { rotulo: "Abriu as artes", Icone: IconeDeImagem }, acompanhar: { rotulo: "Acompanhou o pedido", Icone: PackageSearch }, }; const ICONE_DO_TIPO: Record = { celular: Smartphone, computador: Monitor, tablet: Tablet }; const NOME_DO_TIPO: Record = { celular: "Celular", computador: "Computador", tablet: "Tablet" }; const ICONE_DO_PASSO: Record = { renovar: Link2, comecou: MousePointerClick, agora: Activity, "nao-abriu": Send, aparelhos: Users, pdf: FileDown, esfriando: Hourglass, rapido: Timer, validade: CalendarClock, horario: Clock3, }; /* ---------------------------------------------------------------- */ /* Datas */ /* ---------------------------------------------------------------- */ const formatoDiaMes = new Intl.DateTimeFormat("pt-BR", { timeZone: FUSO, day: "2-digit", month: "2-digit" }); const formatoHora = new Intl.DateTimeFormat("pt-BR", { timeZone: FUSO, hour: "2-digit", minute: "2-digit" }); const formatoSemana = new Intl.DateTimeFormat("pt-BR", { timeZone: FUSO, weekday: "short" }); const formatoChave = new Intl.DateTimeFormat("en-CA", { timeZone: FUSO, year: "numeric", month: "2-digit", day: "2-digit" }); const dataHora = (iso: string | null) => (iso ? `${formatoDiaMes.format(new Date(iso))} às ${formatoHora.format(new Date(iso))}` : ""); /** "25/09 às 13:19", no horário de Brasília (o cartão do orçamento usa). */ export const quandoFoi = dataHora; const hora = (iso: string) => formatoHora.format(new Date(iso)); const porcento = porcentoLegivel; function rotuloDoDia(iso: string, agora: number) { const chave = formatoChave.format(new Date(iso)); if (chave === formatoChave.format(new Date(agora))) return "Hoje"; if (chave === formatoChave.format(new Date(agora - 86_400_000))) return "Ontem"; const semana = formatoSemana.format(new Date(iso)).replace(".", ""); return `${semana.charAt(0).toUpperCase()}${semana.slice(1)}, ${formatoDiaMes.format(new Date(iso))}`; } function tempoDesde(dias: number) { const horas = dias * 24; if (horas < 1) return `${Math.max(1, Math.round(horas * 60))} min`; if (horas < 24) return `${Math.round(horas)} ${Math.round(horas) === 1 ? "hora" : "horas"}`; const inteiros = Math.floor(dias); return `${inteiros} ${inteiros === 1 ? "dia" : "dias"}`; } /* ---------------------------------------------------------------- */ /* Dados da rota */ /* ---------------------------------------------------------------- */ export function useMetricasDoLink(quoteId: string | null, opcoes: { ativo: boolean; aoVivo: boolean }) { const [metricas, setMetricas] = useState(null); const [erro, setErro] = useState(null); const [carregando, setCarregando] = useState(false); const vez = useRef(0); const recarregar = useCallback(async () => { if (!quoteId) return; const minha = ++vez.current; setCarregando(true); try { const resposta = await fetch(`/api/quotes/${quoteId}/metricas-do-link`, { cache: "no-store" }); const dados = (await resposta.json().catch(() => null)) as (MetricasDoLink & { error?: string }) | null; if (minha !== vez.current) return; if (!resposta.ok || !dados) { setErro(dados?.error || "Não deu para carregar as métricas agora."); return; } setMetricas(dados); setErro(null); } catch { if (minha === vez.current) setErro("Sem conexão com o servidor. Tente de novo em instantes."); } finally { if (minha === vez.current) setCarregando(false); } }, [quoteId]); useEffect(() => { if (opcoes.ativo) void recarregar(); }, [opcoes.ativo, recarregar]); useEffect(() => { if (!opcoes.aoVivo) return; const relogio = window.setInterval(() => { if (document.visibilityState === "visible") void recarregar(); }, 20_000); return () => window.clearInterval(relogio); }, [opcoes.aoVivo, recarregar]); return { metricas, erro, carregando, recarregar }; } /* ---------------------------------------------------------------- */ /* Peças */ /* ---------------------------------------------------------------- */ function Eyebrow({ children }: { children: ReactNode }) { return

{children}

; } const SELO: Record = { atencao: "linear-gradient(135deg, #ff4d4f 0%, #e01329 100%)", bom: "linear-gradient(135deg, var(--ks-emerald) 0%, #0e9e70 100%)", neutro: "linear-gradient(135deg, var(--ks-brand-500) 0%, var(--ks-brand-700) 100%)", }; function Selo({ tom, Icone }: { tom: Passo["tom"]; Icone: LucideIcon }) { return ( ); } export function faixaDaChance(chance: number) { if (chance >= 0.5) return { rotulo: "Chance alta", cor: "var(--ks-color-status-success)", Icone: TrendingUp }; if (chance >= 0.25) return { rotulo: "Chance média", cor: "var(--ks-color-status-warning)", Icone: Minus }; return { rotulo: "Chance baixa", cor: "var(--ks-color-status-danger)", Icone: TrendingDown }; } /* Um botão cheio só: o da primeira sugestão. Os outros ficam em contorno, para a lista não virar uma coluna de botões verdes iguais. */ function BotaoDoWhatsapp({ href, cheio, rotulo = "Chamar no WhatsApp" }: { href: string; cheio: boolean; rotulo?: string }) { return ( {rotulo} ); } /* ---------------------------------------------------------------- */ /* Aba Resumo */ /* ---------------------------------------------------------------- */ function AnelDaChance({ chance, tamanho = 132 }: { chance: ChanceDoOrcamento; tamanho?: number }) { if (chance.estado === "fechado") { return ( virou pedido ); } if (chance.estado === "aprovado") { return ( sem pedido ); } if (chance.estado === "recusado") { return ( recusado ); } if (chance.estado === "sem-conta") { return ( — sem conta ); } const faixa = faixaDaChance(chance.atual.chance); return ( {porcento(chance.atual.chance).replace("%", "")} % de fechar ); } function FraseDaChance({ chance, recorrente }: { chance: ChanceDoOrcamento; recorrente?: boolean }) { if (chance.estado === "fechado") { return (

Este orçamento virou pedido{chance.em ? ` em ${dataHora(chance.em)}` : ""}. As aberturas continuam registradas abaixo.

); } if (chance.estado === "aprovado") { return (

Marcado como aprovado no painel, mas o pedido ainda não foi gerado. O pedido nasce quando você clica em Gerar pedido ou quando o cliente aprova pelo link.

); } if (chance.estado === "recusado") return

Este orçamento foi recusado.

; if (chance.estado === "sem-conta") return

{chance.motivo}

; const { atual } = chance; const situacao = chance.aberto ? `O cliente abriu pela primeira vez há ${tempoDesde(chance.diasDesde)} e ainda não respondeu.` : `O link ainda não foi aberto, ${tempoDesde(chance.diasDesde)} depois de criado.`; /* Quando o histórico da empresa move o número, a frase diz: senão o anel mostra um valor e o texto outro, sem explicação. */ const puxou = atual.empresa.casos > 0 && Math.round(atual.chance * 100) !== Math.round(atual.geral.taxa * 100); return (

{situacao} {recorrente ? " Ele já comprou de você antes." : ""} Orçamentos nessa situação viraram pedido em{" "} {porcento(atual.geral.taxa)} das vezes ( {atual.geral.casos.toLocaleString("pt-BR")} casos) {puxou ? ( <> ; com o histórico da sua empresa, fica em{" "} {porcento(atual.chance)}. ) : ( "." )}

); } function Kpi({ Icone, valor, rotulo, sub }: { Icone: LucideIcon; valor: string; rotulo: string; sub?: string }) { return (
{valor}
{rotulo}
{sub ?
{sub}
: null}
); } function LinhaDoPasso({ passo, whatsapp, destaque, aoRenovar, aoReenviar, ocupado, }: { passo: Passo; whatsapp: string | null; destaque: boolean; aoRenovar?: () => void; aoReenviar?: () => void; ocupado: boolean; }) { const link = passo.botao === "whatsapp" && passo.mensagem ? linkDoWhatsapp(whatsapp, passo.mensagem) : null; return (
  • {passo.titulo}

    {passo.texto}

    {link ? : null} {passo.botao === "renovar" && aoRenovar ? ( ) : null} {passo.botao === "reenviar" && aoReenviar ? ( ) : null}
    • ); } function AbaResumo({ metricas, aoRenovar, aoReenviar, ocupado, irPara, }: { metricas: MetricasDoLink; aoRenovar?: () => void; aoReenviar?: () => void; ocupado: boolean; irPara: (aba: Aba) => void; }) { const { resumo, chance, passos, sinais } = metricas; const recorrente = chance.estado === "aberto" && chance.recorrente; return (
    {chance.estado === "aberto" ? (
    {(() => { const faixa = faixaDaChance(chance.atual.chance); return ( <> {faixa.rotulo} pelo link ); })()}
    ) : null} {chance.estado === "aberto" && chance.daqui.length ? (

    Se ninguém fizer nada:{" "} {chance.daqui.map((ponto, indice) => ( {indice ? " · " : ""} {ponto.rotulo.toLowerCase()} {porcento(ponto.chance)} ))} .{" "}

    ) : null}
    {/* Link aberto só antes do registro detalhado: não há visita, aparelho nem tempo guardados. Zero ali diria "não leu", o que não se sabe — então fica um traço. */} {resumo.aberturasDetalhadas === 0 && resumo.legado ? ( <> ) : ( <> 1 ? `voltou ${resumo.visitas - 1} ${resumo.visitas - 1 === 1 ? "vez" : "vezes"}` : resumo.visitas === 1 ? "ainda não voltou" : undefined } /> 1 ? "pode ter sido repassado" : undefined} /> )}
    {/* Só aberturas de antes do registro detalhado (em produção desde 1º/10/2026): o traço nos números precisa de explicação, senão parece que o painel escondeu os dados. */} {resumo.aberturasDetalhadas === 0 && resumo.legado ? (

    Essas aberturas são de antes de 1º/10/2026, quando o registro detalhado entrou no ar: o painel sabe quantas foram e quando, não o aparelho nem o tempo de leitura. As próximas aberturas entram completas, mesmo depois do pedido.

    ) : null}
    O que fazer agora {passos.length ? (
      {passos.slice(0, 4).map((passo, indice, lista) => { const primeiroComWhatsapp = lista.findIndex( (item) => item.botao === "whatsapp" && item.mensagem && linkDoWhatsapp(metricas.orcamento.cliente.whatsapp, item.mensagem) ); return ( ); })}
    ) : (

    {chance.estado === "fechado" ? "Pedido gerado. Se o cliente abrir o link de novo, a abertura continua entrando aqui." : chance.estado === "recusado" ? "Nada a fazer: o orçamento foi recusado." : "Nenhuma ação pedida agora. Assim que o cliente abrir ou fizer algo no link, aparece aqui."}

    )}
    {sinais.length ? (
    O que aconteceu no link
    {sinais.map((sinal) => ( {sinal.texto} ))}
    ) : null}
    ); } /* ---------------------------------------------------------------- */ /* Aba Visitas */ /* ---------------------------------------------------------------- */ type ItemDaLinha = | { tipo: "visita"; em: string; visita: VisitaDoLink } | { tipo: "envio"; em: string; canal: "whatsapp" | "link" }; function LinhaDaVisita({ visita, aparelho, cor }: { visita: VisitaDoLink; aparelho: AparelhoDoLink | undefined; cor: string }) { const Icone = ICONE_DO_TIPO[aparelho?.tipo ?? "celular"]; const duracao = Date.parse(visita.fim) - Date.parse(visita.inicio); const vistas = visita.secoes.filter((secao) => secao !== "fim").map((secao) => ROTULO_DA_SECAO[secao]); const detalhes = [ visita.segundos ? `${duracaoLegivel(visita.segundos)} lendo` : "sem leitura ativa", vistas.length ? `viu ${vistas.join(", ")}` : "", visita.aberturas > 1 ? `${visita.aberturas} aberturas` : "", ].filter(Boolean); return (
  • {hora(visita.inicio)} {duracao >= 60_000 ? `–${hora(visita.fim)}` : ""} {aparelho?.nome ?? "Aparelho"} {visita.depoisDoPedido ? ( depois do pedido ) : null}
    {detalhes.join(" · ")}
    {visita.origem || visita.lugar ? (
    {visita.origem ? veio de {visita.origem} : null} {visita.lugar ? ( {visita.lugar} ) : null}
    ) : null} {visita.acoes.length ? (
    {[...new Set(visita.acoes.map((acao) => acao.tipo))].map((tipo) => { const { rotulo, Icone: IconeDaAcao } = ACAO[tipo]; return ( {rotulo} ); })}
    ) : null}
    • ); } function AbaVisitas({ metricas, cores, agora, irPara, }: { metricas: MetricasDoLink; cores: Map; agora: number; irPara: (aba: Aba) => void; }) { const { resumo, visitas, envios, aparelhos, equipe } = metricas; const porId = useMemo(() => new Map(aparelhos.map((aparelho) => [aparelho.id, aparelho])), [aparelhos]); const dias = useMemo(() => { const itens: ItemDaLinha[] = [ ...visitas.map((visita) => ({ tipo: "visita" as const, em: visita.inicio, visita })), ...envios.map((envio) => ({ tipo: "envio" as const, em: envio.em, canal: envio.canal })), ].sort((a, b) => Date.parse(b.em) - Date.parse(a.em)); const grupos: Array<{ rotulo: string; itens: ItemDaLinha[] }> = []; for (const item of itens) { const rotulo = rotuloDoDia(item.em, agora); const ultimo = grupos[grupos.length - 1]; if (ultimo && ultimo.rotulo === rotulo) ultimo.itens.push(item); else grupos.push({ rotulo, itens: [item] }); } return grupos; }, [visitas, envios, agora]); const totalDeHoras = resumo.horas.reduce((soma, valor) => soma + valor, 0); return (
    {resumo.faixa ? ( <> {resumo.faixa.inicio}h–{resumo.faixa.fim}h mais abre ) : ( <> {totalDeHoras} {totalDeHoras === 1 ? "abertura" : "aberturas"} )}
    Quando ele abre

    {resumo.faixa ? `${resumo.faixa.aberturas} das ${resumo.faixa.total} aberturas foram entre ${resumo.faixa.inicio}h e ${resumo.faixa.fim}h (horário de Brasília).` : totalDeHoras ? "Cada barra é uma hora do dia; quanto mais comprida, mais aberturas naquela hora. Ainda não dá para dizer um horário preferido." : "As horas aparecem aqui quando o cliente abrir o link."}

    {resumo.primeira ? (

    Primeira abertura: {dataHora(resumo.primeira)} {resumo.ultima ? ` · Última: ${dataHora(resumo.ultima)}` : ""}

    ) : null}
    Linha do tempo {dias.length ? (
    {dias.map((dia) => (
    {dia.rotulo}
      {dia.itens.map((item) => item.tipo === "visita" ? ( ) : (
    • {hora(item.em)} ·{" "} {item.canal === "whatsapp" ? "A empresa mandou o link pelo WhatsApp" : "A empresa copiou o link"}
      • ) )}
    ))}
    ) : (

    Nenhuma visita registrada ainda.

    )} {resumo.legado ? (

    Antes do registro detalhado, o link foi aberto {resumo.legado.aberturas} {resumo.legado.aberturas === 1 ? "vez" : "vezes"} {resumo.legado.primeira ? `, a primeira em ${dataHora(resumo.legado.primeira)}` : ""}. Dessas não há aparelho nem tempo de leitura.

    ) : null} {equipe.aberturas ? (

    {equipe.aberturas} {equipe.aberturas === 1 ? "abertura foi" : "aberturas foram"} da própria equipe e não {equipe.aberturas === 1 ? "entra" : "entram"} na conta.{" "}

    ) : null}
    ); } /* ---------------------------------------------------------------- */ /* Aba Aparelhos */ /* ---------------------------------------------------------------- */ function Legenda({ itens }: { itens: Array<{ id: string; cor: string; rotulo: string; valor: number; total: number }> }) { return (
      {itens.map((item) => (
    • {item.rotulo} {item.valor} {item.total ? porcento(item.valor / item.total) : "0%"}
      • ))}
    ); } function LinhaDoAparelho({ aparelho, cor, agora, acao, }: { aparelho: AparelhoDoLink; cor: string; agora: number; acao?: ReactNode; }) { const Icone = ICONE_DO_TIPO[aparelho.tipo]; const numeros = [ `${aparelho.aberturas} ${aparelho.aberturas === 1 ? "abertura" : "aberturas"}`, aparelho.visitas ? `${aparelho.visitas} ${aparelho.visitas === 1 ? "visita" : "visitas"}` : "", aparelho.segundos ? `${duracaoLegivel(aparelho.segundos)} lendo` : "", `última ${haQuantoTempo(aparelho.ultima, agora)}`, ].filter(Boolean); return (
  • {aparelho.nome}
    {aparelho.detalhe ?
    {aparelho.detalhe}
    : null}
    {numeros.join(" · ")} {aparelho.lugar ? ( {aparelho.lugar} ) : null}
    {acao ?
    {acao}
    : null}
    • ); } function AbaAparelhos({ metricas, cores, agora, podeMarcar, aoMarcar, }: { metricas: MetricasDoLink; cores: Map; agora: number; podeMarcar: boolean; aoMarcar: (leitores: string[], marcar: boolean) => Promise; }) { const { aparelhos, equipe, resumo } = metricas; const [confirmando, setConfirmando] = useState(null); const [marcando, setMarcando] = useState(null); const totalDeAberturas = aparelhos.reduce((soma, aparelho) => soma + aparelho.aberturas, 0); const porTipo = (["celular", "computador", "tablet"] as TipoDeAparelho[]) .map((tipo) => ({ id: tipo, rotulo: NOME_DO_TIPO[tipo], cor: COR_DO_TIPO[tipo], valor: aparelhos.filter((aparelho) => aparelho.tipo === tipo).reduce((soma, aparelho) => soma + aparelho.aberturas, 0), })) .filter((fatia) => fatia.valor > 0); const principais = aparelhos.slice(0, 4); const resto = aparelhos.slice(4); const porAparelho: Fatia[] = [ ...principais.map((aparelho) => ({ id: aparelho.id, rotulo: aparelho.nome, valor: aparelho.aberturas, cor: cores.get(aparelho.id) ?? COR_DOS_OUTROS })), ...(resto.length ? [{ id: "outros", rotulo: `Outros ${resto.length}`, valor: resto.reduce((soma, aparelho) => soma + aparelho.aberturas, 0), cor: COR_DOS_OUTROS }] : []), ]; async function marcar(id: string, leitores: string[], valor: boolean) { setMarcando(id); const deu = await aoMarcar(leitores, valor); setMarcando(null); if (deu) setConfirmando(null); } if (!aparelhos.length && !equipe.aparelhos.length) { return (

    {resumo.legado ? "As aberturas deste link são de antes do registro detalhado: não há aparelho guardado delas. As próximas aparecem aqui." : "Quando o cliente abrir o link, o aparelho dele aparece aqui."}

    ); } return (
    {aparelhos.length ? (
    `${fatia.rotulo} ${fatia.valor}`).join(", ")}`} > {totalDeAberturas} {totalDeAberturas === 1 ? "abertura" : "aberturas"}
    Tipo de aparelho
    ({ ...fatia, total: totalDeAberturas }))} />
    `${fatia.rotulo} ${fatia.valor}`).join(", ")}`} > {aparelhos.length} {aparelhos.length === 1 ? "aparelho" : "aparelhos"}
    Aberturas por aparelho
    ({ ...fatia, total: totalDeAberturas }))} />
    ) : null} {aparelhos.length >= 2 ? (

    Aberto em {aparelhos.length} aparelhos diferentes. Pode ser o mesmo cliente no celular e no computador, ou o orçamento repassado a outra pessoa (um sócio, o financeiro). Se algum desses foi você, marque em “Fui eu” para ele sair da conta.

    ) : null} {aparelhos.length ? (
    Aparelhos do cliente
      {aparelhos.map((aparelho) => ( Tirar da conta do cliente? ) : ( ) } /> ))}
    ) : null} {equipe.aparelhos.length ? (
    Da própria equipe (não entram na conta)
      {equipe.aparelhos.map((aparelho: AparelhoDaEquipe) => ( void marcar(aparelho.id, aparelho.leitores, false)} disabled={marcando === aparelho.id} className="ks-button ks-button-ghost ks-button-sm" > {marcando === aparelho.id ? : } Não fui eu ) : ( {aparelho.marcadoAMao ? "marcado como da equipe" : "navegador do painel"} ) } /> ))}
    ) : null}

    O aparelho vem do que o próprio navegador informa. Dois navegadores no mesmo celular (o do WhatsApp e o Chrome, por exemplo) contam como um aparelho só; dois aparelhos iguais, do mesmo modelo e com o mesmo sistema, podem aparecer como um. A cidade aparece quando a rede informa.

    ); } /* ---------------------------------------------------------------- */ /* Aba Chance */ /* ---------------------------------------------------------------- */ function Fator({ Icone, titulo, children }: { Icone: LucideIcon; titulo: string; children: ReactNode }) { return (
  • {titulo}
    {children}
    • ); } function AbaChance({ metricas }: { metricas: MetricasDoLink }) { const { chance } = metricas; if (chance.estado !== "aberto") { return (
    ); } const { atual } = chance; const faixa = faixaDaChance(atual.chance); const inicio = chance.coorte.desde ? formatoDiaMes.format(new Date(chance.coorte.desde)) : null; const fim = chance.coorte.ate ? formatoDiaMes.format(new Date(chance.coorte.ate)) : null; const precisao = { alta: "alta", media: "média", baixa: "baixa" }[atual.precisao]; return (
    {faixa.rotulo} pelo link · precisão {precisao}
    {chance.daqui.length ? (
    Se ninguém fizer nada
    {chance.daqui.map((ponto, indice) => (
    {porcento(ponto.chance)} {ponto.rotulo}
    ))}

    É o que aconteceu com os orçamentos que ficaram esse tempo a mais sem resposta. A cada dia parado, menos deles viram pedido.

    ) : null}
    Como a conta é feita
      {chance.aberto && chance.naPrimeiraAbertura ? ( <> Quando o cliente abre, {porcento(chance.naPrimeiraAbertura.geral.taxa)} dos orçamentos acabam virando pedido. Dos que continuam sem resposta depois de {tempoDesde(chance.diasDesde)}, {porcento(atual.geral.taxa)} viram. ) : ( <> Dos orçamentos com link que continuavam sem ser abertos e sem pedido depois de {tempoDesde(chance.diasDesde)}, {porcento(atual.geral.taxa)}{" "} viraram pedido (muitos fechados por outro caminho, como uma conversa direta). )} {chance.recorrencia && chance.recorrencia.outroGrupo !== null ? ( <> Nessa mesma situação, {chance.recorrente ? "quem já comprou antes" : "quem compra pela primeira vez"} fecha{" "} {porcento(chance.recorrencia.mesmoGrupo)}; {chance.recorrente ? "quem compra pela primeira vez" : "quem já comprou antes"} fecha{" "} {porcento(chance.recorrencia.outroGrupo)}. A conta usa o grupo deste cliente. ) : ( <>Ainda não há casos suficientes nessa situação para separar quem já comprou de quem compra pela primeira vez: vale a média de todos. )} {atual.empresa.casos ? ( <> {atual.empresa.fechados} {atual.empresa.fechados === 1 ? "virou" : "viraram"} pedido. Com esse tanto de casos, a sua empresa pesa{" "} {porcento(atual.empresa.peso)} na conta; o resto vem dos {atual.geral.casos.toLocaleString("pt-BR")} orçamentos parecidos da plataforma. Quanto mais orçamentos a empresa tiver, mais a conta fica com a cara dela. ) : ( <>Ainda sem casos parecidos na sua empresa: a conta usa só os {atual.geral.casos.toLocaleString("pt-BR")} orçamentos parecidos da plataforma. )} Orçamentos reais com link, criados {inicio && fim ? `entre ${inicio} e ${fim}` : "de janeiro em diante"}, com pelo menos 60 dias de história para já se saber se viraram pedido. Nenhum peso foi inventado: cada número acima é a proporção do que de fato aconteceu.

    Voltas ao link, aparelhos diferentes, tempo de leitura e cliques ainda não entram na conta: começaram a ser registrados agora. Eles passam a pesar quando {MINIMO_PARA_MEDIR_SINAIS} orçamentos com esse registro tiverem terminado, para o peso de cada um ser medido e não chutado (hoje: {chance.comRegistroDetalhado.toLocaleString("pt-BR")}).

    ); } /* ---------------------------------------------------------------- */ /* A janela */ /* ---------------------------------------------------------------- */ export function JanelaDasMetricas({ aberta, aoFechar, quoteId, metricas, erro, carregando, aoRecarregar, aoRenovarLink, aoReenviarLink, podeMarcarEquipe, }: { aberta: boolean; aoFechar: () => void; quoteId: string; metricas: MetricasDoLink | null; erro: string | null; carregando: boolean; aoRecarregar: () => Promise | void; aoRenovarLink?: () => Promise | void; aoReenviarLink?: () => Promise | void; podeMarcarEquipe: boolean; }) { const parado = useReducedMotion(); const [aba, setAba] = useState("resumo"); const [ocupado, setOcupado] = useState(false); const [aviso, setAviso] = useState(null); const [montado, setMontado] = useState(false); const painel = useRef(null); const antes = useRef(null); useEffect(() => setMontado(true), []); useEffect(() => { if (!aberta) return; /* Toda vez que abre, começa pelo Resumo: é onde está o que fazer agora. */ setAba("resumo"); antes.current = document.activeElement as HTMLElement | null; const rolagem = document.body.style.overflow; document.body.style.overflow = "hidden"; const aoTeclar = (evento: KeyboardEvent) => { if (evento.key === "Escape") { evento.stopPropagation(); aoFechar(); } }; window.addEventListener("keydown", aoTeclar); window.setTimeout(() => painel.current?.focus(), 30); return () => { document.body.style.overflow = rolagem; window.removeEventListener("keydown", aoTeclar); antes.current?.focus?.(); }; }, [aberta, aoFechar]); useEffect(() => { if (!aviso) return; const relogio = window.setTimeout(() => setAviso(null), 4000); return () => window.clearTimeout(relogio); }, [aviso]); const cores = useMemo(() => { const mapa = new Map(); if (!metricas) return mapa; [...metricas.aparelhos] .sort((a, b) => Date.parse(a.primeira) - Date.parse(b.primeira)) .forEach((aparelho, indice) => mapa.set(aparelho.id, CORES_DE_SERIE[indice] ?? COR_DOS_OUTROS)); return mapa; }, [metricas]); const agora = metricas ? Date.parse(metricas.geradoEm) : 0; /* O botão fica girando até a janela já mostrar o resultado: sem isso, o aviso de "pronto" aparece com a lista ainda antiga. */ async function executar(tarefa: (() => Promise | void) | undefined, mensagem: string) { if (!tarefa) return; setOcupado(true); try { await tarefa(); await aoRecarregar(); setAviso(mensagem); } finally { setOcupado(false); } } async function marcarEquipe(leitores: string[], marcar: boolean) { try { const resposta = await fetch(`/api/quotes/${quoteId}/metricas-do-link`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ acao: "equipe", leitores, marcar }), }); const dados = (await resposta.json().catch(() => null)) as { error?: string } | null; if (!resposta.ok) { setAviso(dados?.error || "Não deu para marcar o aparelho."); return false; } await aoRecarregar(); setAviso(marcar ? "Pronto: esse aparelho saiu da conta do cliente." : "Pronto: esse aparelho voltou para a conta do cliente."); return true; } catch { setAviso("Sem conexão. Tente de novo."); return false; } } if (!montado) return null; const cliente = metricas?.orcamento.cliente.nome; const numero = metricas?.orcamento.numero; const agoraAberto = Boolean(metricas?.resumo.abertoAgora); return createPortal( {aberta ? ( { if (evento.target === evento.currentTarget) aoFechar(); }} > {/* Alça do celular: diz que a folha desce. */}

    {numero ? `Orçamento #${numero}` : "Orçamento"} {cliente ? ` · ${cliente}` : ""}

    {/* No celular não cabe a pílula do lado: o estado vem aqui. */} {metricas ? (

    {agoraAberto ? "Aberto agora" : metricas.resumo.ultima ? `Última atividade ${haQuantoTempo(metricas.resumo.ultima, agora)}` : "Ainda não aberto"}

    ) : null}
    {metricas ? ( {agoraAberto ? ( ) : null} {agoraAberto ? "Aberto agora" : metricas.resumo.ultima ? `Última atividade ${haQuantoTempo(metricas.resumo.ultima, agora)}` : "Ainda não aberto"} ) : null}
    {!metricas ? ( erro ? (

    {erro}

    ) : (
    Juntando as aberturas do link…
    ) ) : ( /* Ao atualizar, o que já estava na tela fica, só mais claro: nada pula de lugar. */
    {aba === "resumo" ? ( void executar(aoRenovarLink, "Link gerado de novo e copiado. Mande outra vez para o cliente.") : undefined} aoReenviar={aoReenviarLink ? () => void executar(aoReenviarLink, "Abrimos o WhatsApp com a mensagem e o link.") : undefined} /> ) : null} {aba === "visitas" ? : null} {aba === "aparelhos" ? ( ) : null} {aba === "chance" ? : null}
    )}
    {aviso ? ( {aviso} ) : null}     ) : null}     , document.body ); }