{options.map(o=>{
const on = o.key===value;
return (
);
})}
)}
);
};
// Dropdown de seleção MÚLTIPLA (spec 2026-07-29 — Leads & economics por oferta).
// O `Dropdown` acima é de escolha única; este marca vários itens ao mesmo tempo.
// REGRA DE NEGÓCIO: nenhum marcado = TODOS (é o default do filtro de produto no backend,
// que recebe `products` vazio e não filtra nada). Por isso não existe opção "Todos" na
// lista: limpar a seleção JÁ é "todos", e o botão de limpar é o caminho para voltar.
// `values` é array de keys; `onChange(next)` recebe o array novo (imutável).
const MultiDropdown = ({ icon, label, values = [], options, onChange, allLabel = 'Todos', maxChips = 3 }) => {
const [open, setOpen] = React.useState(false);
const ref = React.useRef(null);
React.useEffect(()=>{
const h = (e)=>{ if(ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', h);
return ()=>document.removeEventListener('mousedown', h);
},[]);
const sel = new Set(values);
const toggle = (k)=> onChange(sel.has(k) ? values.filter(v=>v!==k) : [...values, k]);
const labelOf = (k)=> (options.find(o=>o.key===k) || {}).label || k;
return (
);
};
// Spinner do indicador de conexão (classe fenix-spin respeita prefers-reduced-motion)
const Spinner = ({ color='var(--warning)', size=12, bw=2 }) => (
);
// Tela de carregamento (spec 2026-06-25): mostrada na área de conteúdo enquanto não há
// dado real. connecting = 1º load; offline = caiu antes de qualquer dado.
const LoadingScreen = ({ conn='connecting' }) => {
const offline = conn === 'offline';
return (
{offline ? 'Sem conexão' : 'Conectando à API'}
{offline ? 'Reconectando…' : 'Carregando seus dados…'}
);
};
const ls = {
wrap:{ minHeight:'60vh', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:16 },
title:{ font:'var(--text-h3)', color:'var(--fg-1)' },
sub:{ font:'var(--text-body-sm)', color:'var(--fg-3)' },
};
// --- Loading cheio por interação (spec 2026-07-23) ---
// mark(): chamado pelos setters de filtro/aba embrulhados — registra "o próximo fetch é do
// usuário" (janela de 300ms; efeitos do React rodam logo após o commit, sobra folga).
// begin(): chamado no INÍCIO do load() de cada efeito — liga o overlay só se veio de mark().
// end(began): chamado no FIM (sucesso OU erro) — desliga respeitando o mínimo de 400ms
// (anti-flash: cache do backend responde em ~100-300ms). Contador `pending` cobre o caso
// de 2 efeitos dispararem pela mesma interação (ex.: afiliados+trend e produtos na Visão).
function useFullLoading() {
const markTs = React.useRef(0);
const pending = React.useRef(0);
const since = React.useRef(0);
const timer = React.useRef(null);
const [show, setShow] = React.useState(false);
React.useEffect(() => () => clearTimeout(timer.current), []); // cleanup no unmount
const mark = () => { markTs.current = Date.now(); };
const begin = () => {
if (Date.now() - markTs.current > 300) return false; // polling/retry: não é do usuário
pending.current += 1;
if (pending.current === 1) {
since.current = Date.now();
clearTimeout(timer.current);
setShow(true);
}
return true;
};
const end = (began) => {
if (!began) return;
pending.current = Math.max(0, pending.current - 1);
if (pending.current === 0) {
const rest = Math.max(0, 400 - (Date.now() - since.current));
clearTimeout(timer.current);
timer.current = setTimeout(() => setShow(false), rest);
}
};
return { mark, begin, end, show };
}
// --- Retry de reconexão (spec 2026-07-30-reconexao-self-contained) ---
// Falha de primeira carga NÃO pode ser terminal: enquanto `active`, agenda nova
// tentativa a cada 15s (mesma cadência do App global) até a API voltar. Uso:
// const retry = useAutoRetry(err); // active = err, não err && !data:
// React.useEffect(() => {...}, [..., retry]) // com dado velho o retry roda em
// silêncio (o refire não passa por mark(), então não pisca overlay). OBRIGATÓRIO
// em toda página self-contained — card de offline estático sem retry é proibido.
function useAutoRetry(active, delayMs = 15000) {
const [tick, setTick] = React.useState(0);
React.useEffect(() => {
if (!active) return;
const t = setTimeout(() => setTick(n => n + 1), delayMs);
return () => clearTimeout(t);
}, [active, tick, delayMs]);
return tick;
}
// Overlay cheio: mesmo miolo da LoadingScreen sobre fundo OPACO, cobrindo a área de
// conteúdo (o pai precisa de position:relative). Conteúdo continua montado por baixo
// (scroll preservado). Cobre a barra de filtros de propósito: impede troca dupla no
// meio de um fetch.
const FullLoadingOverlay = ({ show, conn = 'connecting' }) => (
{show && (
)}
);
// Selo de status: connecting | live | offline (spec 2026-06-25)
const ConnStamp = ({ conn, lastUpdate }) => {
if (conn === 'live') {
return (
Atualizado às {lastUpdate ? lastUpdate.toLocaleTimeString('pt-BR',{hour:'2-digit',minute:'2-digit'}) : '—'}