// sellerA.jsx — Seller panel: Dashboard, Vendas, Transações, Taxas
const SCard = ({ title, sub, right, children, pad = true, style }) => (
  <div className="card col" style={style}>
    <div className="row between" style={{ padding: "18px 22px", borderBottom: "1px solid var(--line)" }}>
      <div className="col gap-2"><span className="section-title">{title}</span>{sub && <span className="faint" style={{ fontSize: 12.5 }}>{sub}</span>}</div>
      {right}
    </div>
    <div style={{ padding: pad ? 22 : 0, flex: 1 }}>{children}</div>
  </div>
);

const METH_LEGEND = { pix: ["PIX", "var(--green)"], credit: ["Crédito", "var(--blue)"], card: ["Crédito", "var(--blue)"], boleto: ["Boleto", "var(--ink-faint)"] };

function SellerDashboard({ go }) {
  const d = DATA;
  const recent = d.sales.slice(0, 6);
  const [period, setPeriod] = React.useState("7d");
  const { data: ov } = useApi(() => api.seller.overview(period), [period]);
  const { data: sales } = useApi(() => api.seller.salesDaily(7), []);
  const { data: appr } = useApi(() => api.seller.approvalByMethod(), []);
  const m = ov && ov.metrics;
  const salesVals = sales ? sales.map(s => s.valueCents / 100) : d.series7;
  const salesTotal = sales ? sales.reduce((a, s) => a + s.valueCents, 0) : 29640000;

  return (
    <div className="col gap-24 fade-up">
      <PageHead title="Dashboard" sub={`Visão geral do seu e‑commerce · ${ov ? ov.storeName : "Lumina Store"}`}>
        <Segmented options={[{ value: "hoje", label: "Hoje" }, { value: "7d", label: "7 dias" }, { value: "30d", label: "30 dias" }]} value={period} onChange={setPeriod} />
        <button className="btn btn-ghost" onClick={async () => { const r = await api.seller.transactions({ pageSize: 999 }); exportCsv("vendas", r.data.map(t => ({ id: t.id, metodo: t.method, status: t.status, liquido_cents: t.netToSubmerchantCents, valor_cents: t.amountCents, criada: t.createdAt }))); }}><I.download size={16} /> Exportar</button>
      </PageHead>

      {/* KPI row — contract order */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }} className="kpi-grid">
        <KPI label="Volume hoje" value={m ? fmtMetric(m.volumeToday, { cents: false }) : "—"} delta={m && m.volumeToday.deltaPct} icon="bolt" accent="var(--accent)" />
        <KPI label="Volume no mês" value={m ? fmtMetric(m.volumeMonth, { cents: false }) : "—"} delta={m && m.volumeMonth.deltaPct} icon="trend" accent="var(--green)" />
        <KPI label="Ticket médio" value={m ? fmtMetric(m.avgTicket) : "—"} delta={m && m.avgTicket.deltaPct} icon="cart" accent="var(--blue)" />
        <KPI label="Taxa de aprovação" value={m ? fmtMetric(m.approvalRate) : "—"} delta={m && m.approvalRate.deltaPct} icon="checkCircle" accent="var(--green)" />
      </div>

      {/* balances */}
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 16 }} className="bal-grid">
        <div className="card card-pad col gap-16" style={{ background: "linear-gradient(135deg, rgba(255,90,0,0.14), var(--surface) 60%)", borderColor: "var(--accent-line)" }}>
          <div className="row between"><span className="kpi-label">Saldo disponível</span><I.wallet size={18} style={{ color: "var(--accent)" }} /></div>
          <div className="num" style={{ fontSize: 38, fontWeight: 600 }}>{m ? fmtMetric(m.availableBalance) : "—"}</div>
          <div className="row gap-10">
            <button className="btn btn-primary btn-sm" onClick={() => go("s/repasses")}>Sacar agora</button>
            <button className="btn btn-ghost btn-sm" onClick={() => go("s/taxas")}>Antecipar</button>
          </div>
        </div>
        <div className="card card-pad col gap-12 between">
          <div className="row between"><span className="kpi-label">Saldo pendente</span><I.clock size={18} style={{ color: "var(--amber)" }} /></div>
          <div className="num" style={{ fontSize: 28, fontWeight: 600 }}>{m ? fmtMetric(m.pendingBalance) : "—"}</div>
          <span className="faint" style={{ fontSize: 12.5 }}>Liberação progressiva D+2 a D+30</span>
        </div>
        <div className="card card-pad col gap-12 between">
          <div className="row between"><span className="kpi-label">Próximo repasse</span><I.calendar size={18} style={{ color: "var(--blue)" }} /></div>
          <div className="num" style={{ fontSize: 28, fontWeight: 600 }}>{m ? fmtMetric(m.nextPayout) : "—"}</div>
          <span className="badge badge-blue" style={{ alignSelf: "flex-start" }}><span className="dot" />Amanhã, 09h</span>
        </div>
      </div>

      {/* charts */}
      <div style={{ display: "grid", gridTemplateColumns: "1.7fr 1fr", gap: 16 }} className="chart-grid">
        <SCard title="Vendas por dia" sub="Últimos 7 dias" right={<div className="num" style={{ fontSize: 18, fontWeight: 600 }}>{cBRL(salesTotal, { cents: false })}</div>}>
          <AreaChart data={salesVals} height={180} />
          <div className="row between" style={{ marginTop: 10 }}>{["Seg", "Ter", "Qua", "Qui", "Sex", "Sáb", "Dom"].map(x => <span key={x} className="faint" style={{ fontSize: 11.5 }}>{x}</span>)}</div>
        </SCard>
        <SCard title="Aprovação por método" sub="Distribuição do volume">
          <div className="row gap-20" style={{ alignItems: "center" }}>
            <Donut size={120} thickness={15} segments={(appr ? appr.byMethod : [{ method: "pix", sharePct: 58 }, { method: "credit", sharePct: 31 }, { method: "boleto", sharePct: 11 }]).map(b => ({ value: b.sharePct, color: METH_LEGEND[b.method][1] }))}
              center={<div className="col" style={{ alignItems: "center" }}><span className="num" style={{ fontSize: 22, fontWeight: 600 }}>{appr ? PCT(appr.overallApprovalPct) : "98,7%"}</span><span className="faint" style={{ fontSize: 10.5 }}>aprovação</span></div>} />
            <div className="col gap-12 grow">
              {(appr ? appr.byMethod : [{ method: "pix", sharePct: 58 }, { method: "credit", sharePct: 31 }, { method: "boleto", sharePct: 11 }]).map(b => (
                <div key={b.method} className="col gap-4">
                  <div className="row between"><span className="row gap-8" style={{ fontSize: 13.5 }}><span style={{ width: 8, height: 8, borderRadius: 3, background: METH_LEGEND[b.method][1] }} />{METH_LEGEND[b.method][0]}</span><span className="num" style={{ fontSize: 13.5, fontWeight: 600 }}>{b.sharePct}%</span></div>
                </div>
              ))}
            </div>
          </div>
        </SCard>
      </div>

      {/* widgets */}
      <div style={{ display: "grid", gridTemplateColumns: "1.7fr 1fr", gap: 16 }} className="chart-grid">
        <SCard title="Últimas vendas" pad={false} right={<button className="btn btn-subtle btn-sm" onClick={() => go("s/vendas")}>Ver todas <I.chevR size={15} /></button>}>
          <table className="tbl"><thead><tr><th>Pedido</th><th>Cliente</th><th>Método</th><th>Status</th><th style={{ textAlign: "right" }}>Valor</th></tr></thead>
            <tbody>{recent.map(s => (
              <tr key={s.txn} className="clickable" onClick={() => go("s/vendas")}>
                <td className="mono" style={{ fontWeight: 600 }}>{s.id}</td>
                <td>{s.customer}</td><td><Method m={s.method} /></td><td><Status s={s.status} /></td>
                <td className="num" style={{ textAlign: "right", fontWeight: 600 }}>{BRL(s.amount)}</td>
              </tr>))}</tbody></table>
        </SCard>
        <div className="col gap-16">
          <SCard title="Últimos repasses" pad={false}>
            <div className="col">{d.repasses.slice(0, 3).map((r, i) => (
              <div key={r.id} className="row between" style={{ padding: "14px 22px", borderTop: i ? "1px solid var(--line)" : "none" }}>
                <div className="row gap-12"><div style={{ width: 34, height: 34, borderRadius: 9, background: "var(--surface-2)", display: "flex", alignItems: "center", justifyContent: "center" }}><I.bank size={16} style={{ color: "var(--ink-soft)" }} /></div><div className="col"><span style={{ fontSize: 13.5, fontWeight: 600 }}>{r.bank}</span><span className="faint" style={{ fontSize: 12 }}>{r.account}</span></div></div>
                <div className="col" style={{ alignItems: "flex-end" }}><span className="num" style={{ fontSize: 13.5, fontWeight: 600 }}>{BRL(r.amount)}</span><Status s={r.status} /></div>
              </div>))}</div>
          </SCard>
          <SCard title="Notificações" pad={false}>
            <div className="col">{d.notifications.slice(0, 3).map((n, i) => { const C = I[n.icon]; return (
              <div key={i} className="row gap-12" style={{ padding: "13px 22px", borderTop: i ? "1px solid var(--line)" : "none" }}>
                <div style={{ width: 30, height: 30, borderRadius: 8, flexShrink: 0, background: `var(--${n.type}-wash)`, color: `var(--${n.type === "orange" ? "accent" : n.type})`, display: "flex", alignItems: "center", justifyContent: "center" }}><C size={16} /></div>
                <div className="col grow" style={{ minWidth: 0 }}><span style={{ fontSize: 13.5, fontWeight: 600 }}>{n.title}</span><span className="faint" style={{ fontSize: 12, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{n.text}</span></div>
                <span className="faint" style={{ fontSize: 11.5, whiteSpace: "nowrap" }}>{n.time}</span>
              </div>);})}</div>
          </SCard>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Vendas ---------------- */
function SellerVendas() {
  const [method, setMethod] = React.useState("");
  const { data } = useApi(() => api.seller.transactions({ method, pageSize: 50 }), [method]);
  const rows = data ? data.data : [];
  const cnt = (s) => rows.filter(x => x.status === s).length;
  const total = rows.reduce((a, x) => a + x.amountCents, 0);
  return (
    <div className="col gap-24 fade-up">
      <PageHead title="Vendas" sub={`${data ? data.pagination.total : "—"} pedidos`}>
        <Segmented options={[{ value: "", label: "Todos" }, { value: "pix", label: "PIX" }, { value: "card", label: "Crédito" }]} value={method} onChange={setMethod} />
      </PageHead>
      <div className="row gap-16 wrap">
        <KPI label="Total (página)" value={cBRL(total, { cents: false })} icon="money" accent="var(--accent)" />
        <KPI label="Pagas" value={cnt("paid")} icon="checkCircle" accent="var(--green)" />
        <KPI label="Pendentes" value={cnt("pending")} icon="clock" accent="var(--amber)" />
        <KPI label="Estornadas" value={cnt("refunded")} icon="xCircle" accent="var(--violet)" />
      </div>
      <div className="card" style={{ overflow: "hidden" }}>
        <div style={{ overflowX: "auto" }}>
          <table className="tbl"><thead><tr><th>Pedido</th><th>Método</th><th>Status</th><th>Líquido</th><th>Data</th><th style={{ textAlign: "right" }}>Valor</th></tr></thead>
            <tbody>{!data ? <tr><td colSpan={6} className="faint" style={{ padding: 28, textAlign: "center" }}>Carregando…</td></tr>
              : rows.length === 0 ? <tr><td colSpan={6} className="faint" style={{ padding: 28, textAlign: "center" }}>Nenhuma venda ainda.</td></tr>
              : rows.map(s => (
              <tr key={s.id}>
                <td className="mono" style={{ fontWeight: 600 }}>{s.id.slice(-8)}</td>
                <td><Method m={s.method} /></td><td><Status s={s.status} /></td>
                <td className="num muted">{cBRL(s.netToSubmerchantCents)}</td>
                <td className="faint mono" style={{ fontSize: 13 }}>{fmtDate(new Date(s.createdAt))}</td>
                <td className="num" style={{ textAlign: "right", fontWeight: 600 }}>{cBRL(s.amountCents)}</td>
              </tr>))}</tbody></table>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Transações ---------------- */
const TXN_FILTERS = [{ value: "", label: "Todas" }, { value: "paid", label: "Paga" }, { value: "pending", label: "Pendente" }, { value: "failed", label: "Falha" }, { value: "charged_back", label: "Chargeback" }, { value: "refunded", label: "Estornada" }];
const TXN_METHODS = [{ value: "", label: "Todos" }, { value: "pix", label: "PIX" }, { value: "card", label: "Crédito" }];
function SellerTransacoes() {
  const [sel, setSel] = React.useState(null);
  const [refunding, setRefunding] = React.useState(false);
  const [status, setStatus] = React.useState("");
  const [method, setMethod] = React.useState("");
  const [page, setPage] = React.useState(1);
  const [q, setQ] = React.useState("");
  const { data, loading } = useApi(() => api.seller.transactions({ status, method, page, pageSize: 12 }), [status, method, page]);
  const allRowsPage = data ? data.data : [];
  const rows = q ? allRowsPage.filter(t => (t.id || "").toLowerCase().includes(q.toLowerCase())) : allRowsPage;
  const { data: all } = useApi(() => api.seller.transactions({ pageSize: 999 }), []);
  const allRows = all ? all.data : [];
  const cnt = (s) => allRows.filter(t => t.status === s).length;
  return (
    <div className="col gap-24 fade-up">
      <PageHead title="Transações" sub="Histórico completo de processamento" />
      <div className="row gap-16 wrap">
        {[["Pagas", "paid", "var(--green)"], ["Pendentes", "pending", "var(--amber)"], ["Falhas", "failed", "var(--red)"], ["Chargebacks", "charged_back", "var(--red)"], ["Estornadas", "refunded", "var(--violet)"]].map(([l, k, c]) => (
          <div key={k} className="card card-pad col gap-8 grow" style={{ minWidth: 150 }}>
            <span className="kpi-label">{l}</span>
            <div className="num" style={{ fontSize: 24, fontWeight: 600, color: c }}>{cnt(k)}</div>
          </div>))}
      </div>
      <div className="card" style={{ overflow: "hidden" }}>
        <div className="row between wrap gap-12" style={{ padding: 16, borderBottom: "1px solid var(--line)" }}>
          <div className="row gap-10 wrap">
            <div className="input-affix" style={{ width: 240 }}><I.search size={16} className="affix affix-l" /><input className="input" placeholder="Buscar ID da transação" value={q} onChange={e => setQ(e.target.value)} /></div>
            <Segmented options={TXN_METHODS} value={method} onChange={v => { setMethod(v); setPage(1); }} />
          </div>
          <Segmented options={TXN_FILTERS} value={status} onChange={v => { setStatus(v); setPage(1); }} />
        </div>
        <div style={{ overflowX: "auto" }}>
          <table className="tbl"><thead><tr><th>ID transação</th><th>Método</th><th>Status</th><th>Líquido ao seller</th><th>Criada em</th><th style={{ textAlign: "right" }}>Valor</th><th></th></tr></thead>
            <tbody>{rows.map(t => (
              <tr key={t.id} className="clickable" onClick={() => setSel(t)}>
                <td className="mono" style={{ color: "var(--accent)", fontWeight: 600 }}>{t.id}</td>
                <td><Method m={t.method} /></td><td><Status s={t.status} /></td>
                <td className="num muted">{cBRL(t.netToSubmerchantCents)}</td>
                <td className="faint mono" style={{ fontSize: 13 }}>{fmtDate(new Date(t.createdAt))}</td>
                <td className="num" style={{ textAlign: "right", fontWeight: 600 }}>{cBRL(t.amountCents)}</td>
                <td><I.chevR size={16} style={{ color: "var(--ink-faint)" }} /></td>
              </tr>))}</tbody></table>
        </div>
        <div className="row between" style={{ padding: "14px 20px", borderTop: "1px solid var(--line)" }}>
          <span className="faint" style={{ fontSize: 13 }}>{data ? `Página ${data.pagination.page} de ${data.pagination.totalPages} · ${data.pagination.total} transações` : "Carregando…"}</span>
          <div className="row gap-8">
            <button className="btn btn-ghost btn-sm" disabled={page <= 1} onClick={() => setPage(page - 1)}><I.chevL size={15} /></button>
            <button className="btn btn-ghost btn-sm" disabled={data && page >= data.pagination.totalPages} onClick={() => setPage(page + 1)}>Próximo <I.chevR size={15} /></button>
          </div>
        </div>
      </div>
      <Modal open={!!sel} onClose={() => setSel(null)} title="Detalhe da transação" sub={sel?.id} width={460}>
        {sel && <div className="col" style={{ padding: 22, gap: 18 }}>
          <div className="card card-pad col gap-2 center" style={{ background: "var(--surface-2)" }}>
            <span className="faint" style={{ fontSize: 12.5 }}>Valor</span>
            <span className="num" style={{ fontSize: 32, fontWeight: 600 }}>{cBRL(sel.amountCents)}</span>
            <Status s={sel.status} />
          </div>
          {[["Método", METHOD_LABEL(sel.method)], ["Líquido ao seller", cBRL(sel.netToSubmerchantCents)], ["Gateway", "AFEX Pay"], ["Criada em", fmtDate(new Date(sel.createdAt), true)], ["Liquidada em", sel.paidAt ? fmtDate(new Date(sel.paidAt), true) : "—"]].map(([k, v]) => (
            <div key={k} className="row between"><span className="muted" style={{ fontSize: 13.5 }}>{k}</span><span style={{ fontSize: 13.5, fontWeight: 600 }}>{v}</span></div>))}
          <div className="col gap-10">
            <span className="label">Histórico</span>
            {[["Criada", "ok"], ["Autorizada", "ok"], ["Capturada", sel.status === "paid" ? "ok" : "wait"], ["Liquidada", sel.status === "paid" ? "ok" : "wait"]].map(([t, s]) => (
              <div key={t} className="row gap-10"><div style={{ width: 18, height: 18, borderRadius: "50%", background: s === "ok" ? "var(--green)" : "var(--surface-3)", display: "flex", alignItems: "center", justifyContent: "center" }}>{s === "ok" && <I.check size={11} />}</div><span style={{ fontSize: 13 }}>{t}</span></div>))}
          </div>
          {sel.status === "paid" && <button className="btn btn-danger btn-block" disabled={refunding} onClick={async () => {
            setRefunding(true);
            try { await api.seller.refund(sel.id); setSel({ ...sel, status: "refunded" }); }
            catch (e) { alert(e.message); }
            setRefunding(false);
          }}>{refunding ? "Estornando…" : "Estornar venda"}</button>}
        </div>}
      </Modal>
    </div>
  );
}

/* ---------------- Taxas ---------------- */
function SellerTaxas() {
  const { data: fee } = useApi(() => api.seller.fee(), []);
  const pixRate = fee ? fee.pixPercent : null;
  const cardRate = fee ? fee.cardPercent : null;
  const fixedCents = fee ? fee.fixedFeeCents : 0;
  const fixedReais = fixedCents / 100;
  const [valor, setValor] = React.useState(100);
  const [metodo, setMetodo] = React.useState("PIX");
  const taxa = (metodo === "PIX" ? pixRate : cardRate) || 0;
  const liquido = Math.max(0, valor - valor * taxa / 100 - fixedReais);
  return (
    <div className="col gap-24 fade-up">
      <PageHead title="Taxas e recebimento" sub="Suas condições comerciais AFEX Pay" />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 16 }} className="kpi-grid">
        {[["PIX", pixRate, "pix", "var(--green)", "Recebimento na hora"], ["Cartão de crédito", cardRate, "card", "var(--blue)", "À vista e parcelado"]].map(([l, v, ic, c, sub]) => {
          const C = I[ic];
          return <div key={l} className="card card-pad col gap-12">
            <div className="row between"><span className="kpi-label">{l}</span><C size={18} style={{ color: c }} /></div>
            <div className="num" style={{ fontSize: 32, fontWeight: 600 }}>{v == null ? "—" : PCT(v, 2)}</div>
            <span className="faint" style={{ fontSize: 12.5 }}>{sub}</span>
          </div>;
        })}
        <div className="card card-pad col gap-12">
          <div className="row between"><span className="kpi-label">Taxa fixa</span><I.money size={18} style={{ color: "var(--ink-soft)" }} /></div>
          <div className="num" style={{ fontSize: 32, fontWeight: 600 }}>{cBRL(fixedCents)}</div>
          <span className="faint" style={{ fontSize: 12.5 }}>por transação aprovada</span>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 16 }} className="chart-grid">
        {/* Simulator */}
        <div className="card card-pad col gap-20">
          <div className="col gap-2"><span className="section-title">Simulador de recebimento</span><span className="faint" style={{ fontSize: 12.5 }}>Veja quanto você recebe líquido</span></div>
          <div className="field"><label className="label">Valor da venda</label>
            <div className="input-affix"><span className="affix affix-l">R$</span><input className="input num" type="number" value={valor} onChange={e => setValor(+e.target.value || 0)} style={{ fontSize: 18, fontWeight: 600 }} /></div>
          </div>
          <div className="field"><label className="label">Método de pagamento</label><Segmented options={["PIX", "Crédito"]} value={metodo} onChange={setMetodo} /></div>
          <div className="divider" />
          <div className="col gap-12">
            <div className="row between"><span className="muted">Valor bruto</span><span className="num" style={{ fontWeight: 600 }}>{BRL(valor)}</span></div>
            <div className="row between"><span className="muted">Taxa AFEX ({PCT(taxa, 2)})</span><span className="num" style={{ fontWeight: 600, color: "var(--red)" }}>− {BRL(valor * taxa / 100)}</span></div>
            {fixedReais > 0 && <div className="row between"><span className="muted">Taxa fixa</span><span className="num" style={{ fontWeight: 600, color: "var(--red)" }}>− {BRL(fixedReais)}</span></div>}
            <div className="row between card-pad" style={{ background: "var(--green-wash)", borderRadius: "var(--r)", padding: "14px 16px" }}>
              <span style={{ fontWeight: 600 }}>Você recebe</span><span className="num" style={{ fontSize: 24, fontWeight: 600, color: "var(--green)" }}>{BRL(liquido)}</span>
            </div>
          </div>
        </div>

        <div className="col gap-16">
          <div className="card card-pad col gap-16">
            <span className="section-title">Comparativo de taxas por método</span>
            <div className="col gap-14">{[["PIX", pixRate || 0, "var(--green)"], ["Crédito", cardRate || 0, "var(--blue)"]].map(([l, v, c]) => (
              <div key={l} className="col gap-6"><div className="row between"><span style={{ fontSize: 13.5 }}>{l}</span><span className="num" style={{ fontSize: 13.5, fontWeight: 600 }}>{PCT(v, 2)}</span></div><div className="bar"><i style={{ width: `${Math.min(100, (v / 5) * 100)}%`, background: c }} /></div></div>))}</div>
          </div>
          <div className="card card-pad col gap-12">
            <span className="section-title">Prazos de recebimento</span>
            <div className="row gap-10 wrap">{[["D+0", "PIX", "var(--green)"], ["D+2", "Crédito", "var(--blue)"], ["D+7", "Antecip. parcial", "var(--accent)"], ["D+14", "Sem antecip.", "var(--ink-soft)"]].map(([d, l, c]) => (
              <div key={d} className="col gap-4 grow center card-pad" style={{ background: "var(--surface-2)", borderRadius: "var(--r)", padding: "16px 8px", minWidth: 90 }}>
                <span className="num" style={{ fontSize: 22, fontWeight: 600, color: c }}>{d}</span><span className="faint" style={{ fontSize: 11.5, textAlign: "center" }}>{l}</span>
              </div>))}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* helpers */
function METHOD_LABEL(m) { return ({ pix: "PIX", credito: "Crédito", cartao: "Crédito", boleto: "Boleto", debito: "Débito" })[m] || m; }
function STATUS_LABEL(s) { return ({ aprovada: "Aprovada", pendente: "Pendente", recusada: "Recusada", reembolsada: "Reembolsada" })[s] || s; }
function fmtDate(d, full) {
  const opt = full ? { day: "2-digit", month: "short", year: "numeric", hour: "2-digit", minute: "2-digit" } : { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" };
  return d.toLocaleString("pt-BR", opt).replace(".", "");
}

Object.assign(window, { SellerDashboard, SellerVendas, SellerTransacoes, SellerTaxas, SCard, METHOD_LABEL, STATUS_LABEL, fmtDate });