// Módulo LOJA — PDV (Caixa), Crediário, Financeiro

// ---------- PDV ----------
const PdvPage = () => {
  const [cart, setCart] = React.useState([
    { ...PRODUTOS[2], tam: "P", qty: 1, desc: 0 },
    { ...PRODUTOS[5], tam: "M", qty: 1, desc: 0 },
  ]);
  const [cliente, setCliente] = React.useState(CLIENTES[0]);
  const [step, setStep] = React.useState("carrinho"); // cliente | produtos | carrinho | pagamento | confirmacao
  const [pgMix, setPgMix] = React.useState([{ tipo: "Pix", valor: 0 }]);

  const subtotal = cart.reduce((s, i) => s + (i.preco - i.desc) * i.qty, 0);
  const descCashback = 50;
  const frete = 0;
  const total = subtotal - descCashback + frete;

  const removeItem = (i) => setCart(cart.filter((_, idx) => idx !== i));

  return (
    <div className="page" style={{maxWidth:'none'}}>
      <div className="page-head">
        <div>
          <span className="eyebrow"><span className="play"/>Caixa aberto desde 09:14 · Saldo R$ 1.420</span>
          <h1 style={{marginTop:10}}>Caixa (PDV)</h1>
          <p className="lead">Operação de loja física · Bruna Carvalho · Terminal 01</p>
        </div>
        <div className="actions">
          <button className="btn ghost"><Ic name="moneyIn" size={13}/> Suprimento</button>
          <button className="btn ghost"><Ic name="download" size={13}/> Sangria</button>
          <button className="btn ghost"><Ic name="x" size={13}/> Fechar caixa</button>
        </div>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 380px', gap:18, alignItems:'start'}}>
        {/* LEFT — produtos */}
        <div className="stack">
          {/* Cliente bar */}
          <div className="card tight">
            <div className="row gap-12">
              <div className="t-mono-label" style={{width:60}}>CLIENTE</div>
              <ClientAvatar name={cliente.nome} size="lg"/>
              <div style={{flex:1, minWidth:0}}>
                <div className="row gap-8" style={{alignItems:'baseline'}}>
                  <div style={{fontSize:14, fontWeight:500}}>{cliente.nome}</div>
                  <Level n={cliente.nivel}/>
                  <Badge kind="green" dot>Champion</Badge>
                </div>
                <div className="row gap-12 t-3" style={{fontSize:11.5}}>
                  <span className="mono">{cliente.instagram}</span>
                  <span>·</span>
                  <span>{cliente.telefone}</span>
                  <span>·</span>
                  <span>Última compra {cliente.ultimaCompra}</span>
                </div>
              </div>
              <div className="row gap-12">
                <div className="text-right">
                  <div className="t-mono-label" style={{fontSize:9.5}}>Cashback</div>
                  <div className="t-green mono" style={{fontSize:15, fontWeight:600}}>{brl(cliente.cashback)}</div>
                </div>
                <div className="text-right">
                  <div className="t-mono-label" style={{fontSize:9.5}}>Crédito</div>
                  <div className="mono" style={{fontSize:15, fontWeight:600}}>{brl(cliente.credito)}</div>
                </div>
                <button className="btn ghost sm">Trocar</button>
              </div>
            </div>
          </div>

          {/* Search */}
          <div className="card tight">
            <div className="row gap-8">
              <Ic name="barcode" size={18} className="t-accent"/>
              <input
                className="grow"
                placeholder="Leia código de barras ou digite nome/SKU…"
                style={{background:'transparent', border:'none', outline:'none', color:'var(--text)', fontSize:14, padding:'4px 0', fontFamily:'var(--font)'}}
                autoFocus/>
              <button className="btn sm ghost"><Ic name="search" size={12}/> Busca avançada</button>
            </div>
          </div>

          {/* Quick-pick grid */}
          <div className="card">
            <div className="card-head">
              <h3>Catálogo · em destaque</h3>
              <div className="row gap-6">
                <select className="input"><option>Verão 26</option><option>Inverno 25</option></select>
                <div className="mode-switch">
                  <button className="active"><Ic name="grid" size={12}/></button>
                  <button><Ic name="list" size={12}/></button>
                </div>
              </div>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(140px, 1fr))', gap:10}}>
              {PRODUTOS.slice(0, 8).map(p => (
                <div key={p.id} style={{background:'var(--bg-3)', border:'1px solid var(--line)', borderRadius:10, padding:10, cursor:'pointer'}}>
                  <div style={{height:80, background:'var(--bg)', borderRadius:6, display:'flex', alignItems:'center', justifyContent:'center', fontSize:32, marginBottom:8}}>
                    {p.foto}
                  </div>
                  <div className="t-mono-label" style={{fontSize:9, letterSpacing:'0.14em'}}>{p.id}</div>
                  <div style={{fontSize:12, fontWeight:500, marginTop:2, lineHeight:1.2}}>{p.nome}</div>
                  <div className="t-green mono mt-4" style={{fontSize:13, fontWeight:600}}>{brl(p.preco)}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* RIGHT — cart + pagamento */}
        <div style={{ position:'sticky', top:0 }}>
          <div className="card" style={{padding:0}}>
            <div style={{padding:'14px 16px 12px', borderBottom:'1px solid var(--line)'}}>
              <div className="row" style={{justifyContent:'space-between'}}>
                <div className="row gap-8">
                  <Ic name="cart" size={16} className="t-accent"/>
                  <div style={{fontSize:14, fontWeight:500}}>Carrinho</div>
                  <Badge kind="accent">{cart.reduce((s,i)=>s+i.qty,0)} itens</Badge>
                </div>
                <button className="t-3 mono" style={{fontSize:10.5, background:'none', border:'none', cursor:'pointer', letterSpacing:'0.12em'}}>LIMPAR</button>
              </div>
            </div>

            <div style={{maxHeight:260, overflowY:'auto'}}>
              {cart.map((i, idx) => (
                <div key={idx} className="row gap-10" style={{padding:'10px 16px', borderBottom:'1px solid var(--line)'}}>
                  <div className="product-thumb">{i.foto}</div>
                  <div style={{flex:1, minWidth:0}}>
                    <div style={{fontSize:12.5, fontWeight:500, lineHeight:1.2}}>{i.nome}</div>
                    <div className="t-3" style={{fontSize:10.5, marginTop:2}}>
                      <span className="mono">Tam {i.tam}</span> · <span className="mono">{i.id}</span>
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="mono" style={{fontSize:12.5, fontWeight:500}}>{brl(i.preco)}</div>
                    <div className="row gap-4 mt-4" style={{justifyContent:'flex-end'}}>
                      <button onClick={() => removeItem(idx)} className="t-3" style={{background:'none', border:'none', cursor:'pointer', fontSize:10, letterSpacing:'0.08em'}}>excluir</button>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{padding:'12px 16px', background:'var(--bg-3)', borderTop:'1px solid var(--line)'}}>
              <div className="row" style={{justifyContent:'space-between', fontSize:12, padding:'2px 0'}}>
                <span className="t-3">Subtotal</span><span className="mono">{brl(subtotal)}</span>
              </div>
              <div className="row" style={{justifyContent:'space-between', fontSize:12, padding:'2px 0'}}>
                <span className="t-3">Desc. cashback aplicado</span><span className="mono t-green">- {brl(descCashback)}</span>
              </div>
              <div className="row" style={{justifyContent:'space-between', fontSize:12, padding:'2px 0'}}>
                <span className="t-3">Frete</span><span className="mono">{brl(frete)}</span>
              </div>
              <div className="row" style={{justifyContent:'space-between', borderTop:'1px solid var(--line)', marginTop:8, paddingTop:10}}>
                <span style={{fontSize:14, fontWeight:500}}>TOTAL</span>
                <span className="t-green mono" style={{fontSize:22, fontWeight:600}}>{brl(total)}</span>
              </div>
            </div>

            <div style={{padding:'12px 16px'}}>
              <div className="t-mono-label mb-8">Forma de pagamento</div>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:6}}>
                <PaymentChip icon="pix" label="Pix" active/>
                <PaymentChip icon="qr" label="Crédito"/>
                <PaymentChip icon="dollar" label="Débito"/>
                <PaymentChip icon="file" label="Dinheiro"/>
                <PaymentChip icon="tag" label="Crediário"/>
                <PaymentChip icon="sparkles" label="Cashback"/>
              </div>

              <div className="mt-12 mb-8">
                <div className="t-mono-label mb-8">Pagamento misto · em uso</div>
                <div className="row gap-8" style={{padding:'8px 10px', background:'var(--bg-3)', border:'1px solid var(--line)', borderRadius:6, fontSize:12}}>
                  <Ic name="pix" size={14} className="t-accent"/>
                  <span className="grow">Pix · QR code 5 min</span>
                  <span className="mono">{brl(total - 50)}</span>
                </div>
                <div className="row gap-8 mt-4" style={{padding:'8px 10px', background:'var(--bg-3)', border:'1px solid var(--line)', borderRadius:6, fontSize:12}}>
                  <Ic name="sparkles" size={14} className="t-green"/>
                  <span className="grow">Cashback do cliente</span>
                  <span className="mono t-green">{brl(50)}</span>
                </div>
              </div>

              <button className="btn primary lg" style={{width:'100%', justifyContent:'center'}}>
                Finalizar venda · {brl(total)} <Ic name="arrowRight" size={14}/>
              </button>
              <div className="row gap-8 mt-8">
                <button className="btn ghost sm grow"><Ic name="print" size={11}/> Comprovante</button>
                <button className="btn ghost sm grow"><Ic name="whatsapp" size={11}/> Enviar</button>
                <button className="btn ghost sm grow"><Ic name="truck" size={11}/> Etiqueta</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

const PaymentChip = ({ icon, label, active }) => (
  <button className={"btn " + (active ? "accent" : "")} style={{justifyContent:'center', flexDirection:'column', height:54, gap:3, fontSize:11}}>
    <Ic name={icon} size={16}/>
    {label}
  </button>
);

// ---------- CREDIÁRIO ----------
const CrediarioPage = () => {
  const total = PARCELAS_CREDIARIO.reduce((s,p) => s + p.valor, 0);
  const vencidas = PARCELAS_CREDIARIO.filter(p => p.status.includes("Vencido"));
  const vencendo = PARCELAS_CREDIARIO.filter(p => p.status.includes("Vence"));
  const emDia = PARCELAS_CREDIARIO.filter(p => p.status === "Em dia");

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <span className="eyebrow"><span className="play"/>Carteira de crediário</span>
          <h1 style={{marginTop:10}}>Crediário</h1>
          <p className="lead">Parcelas em aberto · cobrança automática · renegociação.</p>
        </div>
        <div className="actions">
          <button className="btn ghost"><Ic name="download" size={13}/> Exportar</button>
          <button className="btn ghost"><Ic name="settings" size={13}/> Regras</button>
          <button className="btn accent"><Ic name="whatsapp" size={13}/> Cobrar atrasados (2)</button>
        </div>
      </div>

      <div className="stat-grid cols-4 mb-24">
        <Stat glow label="Em aberto · total" value={brlNoCents(8421)}/>
        <Stat glow="green" label="A receber este mês" value={brlNoCents(3120)} delta={8.4}/>
        <Stat label="Vencendo em 7 dias" value={vencendo.length} hint={brl(vencendo.reduce((s,p)=>s+p.valor,0))}/>
        <Stat glow="cyan" label="Inadimplência" value="4.2%" delta={-1.8}/>
      </div>

      <Tabs active="parcelas" onChange={()=>{}} tabs={[
        { id: "parcelas", label: "Parcelas", count: PARCELAS_CREDIARIO.length },
        { id: "renegociacao", label: "Renegociações" },
        { id: "regras", label: "Regras de cobrança" },
        { id: "ranking", label: "Ranking devedores" },
      ]}/>

      <div className="filter-row">
        <div className="input search">
          <Ic name="search" size={13} className="t-3"/>
          <input placeholder="Cliente, @, nº parcela…"/>
        </div>
        <select className="input"><option>Todos status</option><option>Vencidas</option><option>Vencendo</option><option>Em dia</option></select>
        <select className="input"><option>Todos os meses</option><option>Maio 26</option><option>Junho 26</option></select>
      </div>

      <div className="tbl-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th>Cliente</th><th>@Instagram</th><th>Parcela</th><th style={{textAlign:'right'}}>Valor</th><th>Vencimento</th><th>Status</th><th style={{width:200}}>Ações</th>
            </tr>
          </thead>
          <tbody>
            {PARCELAS_CREDIARIO.map((p, i) => (
              <tr key={i}>
                <td className="row gap-8"><ClientAvatar name={p.cliente}/> <span className="strong">{p.cliente}</span></td>
                <td className="t-3 mono">{p.instagram}</td>
                <td className="mono">{p.parcela}</td>
                <td className="num">{brl(p.valor)}</td>
                <td className="mono">{p.vencimento}</td>
                <td><StatusBadge status={p.status}/></td>
                <td>
                  <div className="row gap-6">
                    <button className="btn sm primary">Registrar pgto</button>
                    <button className="btn sm ghost"><Ic name="whatsapp" size={11}/></button>
                    <button className="btn sm ghost">Renegociar</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="card mt-24">
        <div className="card-head"><h3>Automações de cobrança</h3><Toggle on/></div>
        <table className="tbl">
          <thead><tr><th>Quando</th><th>Canal</th><th>Mensagem</th><th>Disparos · 30d</th><th>Status</th></tr></thead>
          <tbody>
            <tr><td>3 dias antes do vencimento</td><td><Badge kind="green" dot>WhatsApp</Badge></td><td className="t-3" style={{fontSize:11.5}}>"Oi {`{primeiro_nome}`}! Sua parcela de R$ {`{parcela_valor}`} vence em 3 dias…"</td><td className="num">41</td><td><Toggle on/></td></tr>
            <tr><td>No dia do vencimento</td><td><Badge kind="green" dot>WhatsApp</Badge></td><td className="t-3" style={{fontSize:11.5}}>"Lembrete: sua parcela vence hoje. Pague pelo Pix…"</td><td className="num">28</td><td><Toggle on/></td></tr>
            <tr><td>3 dias após atraso</td><td><Badge kind="purple" dot>Equipe</Badge></td><td className="t-3" style={{fontSize:11.5}}>Notificação interna para equipe de cobrança</td><td className="num">12</td><td><Toggle on/></td></tr>
          </tbody>
        </table>
      </div>
    </div>
  );
};

// ---------- FINANCEIRO / DRE ----------
const FinanceiroPage = () => {
  const [tab, setTab] = React.useState("dre");

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <span className="eyebrow"><span className="play"/>Maio 2026</span>
          <h1 style={{marginTop:10}}>Financeiro</h1>
          <p className="lead">DRE, fluxo de caixa, contas e lançamentos.</p>
        </div>
        <div className="actions">
          <select className="input"><option>Mai/26</option><option>Abr/26</option><option>1º trim/26</option></select>
          <button className="btn ghost"><Ic name="download" size={13}/> Exportar</button>
          <button className="btn"><Ic name="plus" size={13}/> Lançamento</button>
        </div>
      </div>

      <Tabs active={tab} onChange={setTab} tabs={[
        { id: "dre", label: "DRE" },
        { id: "fluxo", label: "Fluxo de caixa" },
        { id: "contas", label: "Contas" },
        { id: "lancamentos", label: "Lançamentos" },
        { id: "apagar", label: "A pagar", count: 14 },
      ]}/>

      {tab === "dre" && <DreView/>}
      {tab === "fluxo" && <FluxoView/>}
      {tab === "contas" && <ContasView/>}
      {tab === "lancamentos" && <LancamentosView/>}
      {tab === "apagar" && <APagarView/>}
    </div>
  );
};

const DreLine = ({ label, value, sub, indent = 0, kind, total }) => (
  <div className="row" style={{
    justifyContent:'space-between',
    padding: total ? '12px 14px' : '8px 14px',
    paddingLeft: 14 + indent * 18,
    background: total === 'big' ? 'var(--bg-3)' : (total ? 'rgba(232,86,0,0.04)' : 'transparent'),
    borderBottom: '1px solid var(--line)',
    borderTop: total === 'big' ? '1px solid var(--line)' : undefined,
  }}>
    <div className="row gap-8">
      <span style={{fontSize: total ? 13 : 12.5, fontWeight: total ? 500 : 400, color: total === 'big' ? 'var(--text)' : (indent > 0 ? 'var(--text-2)' : 'var(--text)') }}>{label}</span>
      {sub && <span className="t-3" style={{fontSize:11}}>{sub}</span>}
    </div>
    <span className={"mono" + (kind === 'neg' ? ' t-red' : kind === 'pos' ? ' t-green' : '')} style={{fontSize: total ? 15 : 13, fontWeight: total ? 600 : 500, fontFeatureSettings:'"tnum"'}}>{value}</span>
  </div>
);

const DreView = () => (
  <div className="stack">
    <div className="stat-grid cols-4">
      <Stat glow="green" label="Receita líquida" value={brlNoCents(132450)} delta={18.2}/>
      <Stat label="Margem bruta" value="58.4%" delta={2.4}/>
      <Stat glow label="Resultado operacional" value={brlNoCents(38120)} delta={24.8}/>
      <Stat label="Margem líquida" value="28.8%" delta={3.1}/>
    </div>

    <div className="card" style={{padding:0}}>
      <div style={{padding:'14px 18px', borderBottom:'1px solid var(--line)', display:'flex', justifyContent:'space-between'}}>
        <div className="row gap-8"><Ic name="layers" size={16}/><h3 style={{margin:0, fontSize:14}}>Demonstrativo · Mai 2026</h3></div>
        <div className="row gap-12 t-3" style={{fontSize:11}}>
          <span>Comparado a Abr/26</span>
          <Badge kind="green" dot>+18.2%</Badge>
        </div>
      </div>

      <DreLine label="Receita bruta" value={brlNoCents(142840)}/>
      <DreLine label="Vendas Live" indent={1} value={brlNoCents(82847)} sub="58%"/>
      <DreLine label="Vendas Loja física" indent={1} value={brlNoCents(31425)} sub="22%"/>
      <DreLine label="Vendas Site" indent={1} value={brlNoCents(19998)} sub="14%"/>
      <DreLine label="Vendas WhatsApp" indent={1} value={brlNoCents(8570)} sub="6%"/>
      <DreLine label="(−) Devoluções e descontos" value={"-" + brlNoCents(10390)} kind="neg"/>
      <DreLine label="Receita líquida" value={brlNoCents(132450)} total/>
      <DreLine label="(−) CMV — Custo dos produtos vendidos" value={"-" + brlNoCents(55104)} kind="neg"/>
      <DreLine label="Margem bruta" value={brlNoCents(77346)} sub="58.4%" total/>
      <DreLine label="(−) Despesas operacionais" value={"-" + brlNoCents(39226)} kind="neg"/>
      <DreLine label="Salários e comissões" indent={1} value={"-" + brlNoCents(18420)}/>
      <DreLine label="Aluguel e condomínio" indent={1} value={"-" + brlNoCents(4800)}/>
      <DreLine label="Marketing (WhatsApp · ads)" indent={1} value={"-" + brlNoCents(6240)}/>
      <DreLine label="Logística e frete" indent={1} value={"-" + brlNoCents(3840)}/>
      <DreLine label="Impostos (Simples)" indent={1} value={"-" + brlNoCents(4180)}/>
      <DreLine label="Outras despesas" indent={1} value={"-" + brlNoCents(1746)}/>
      <DreLine label="Resultado operacional" value={brlNoCents(38120)} total="big" kind="pos"/>
    </div>
  </div>
);

const FluxoView = () => (
  <div className="stack">
    <div className="stat-grid cols-4">
      <Stat label="Saldo total" value={brlNoCents(42180)} glow="green"/>
      <Stat label="Entradas · 30d" value={brlNoCents(142840)} delta={18.2}/>
      <Stat label="Saídas · 30d" value={brlNoCents(104720)} delta={9.4}/>
      <Stat label="Saldo previsto · 30d" value={brlNoCents(58420)} delta={28.2}/>
    </div>
    <div className="card">
      <div className="card-head"><h3>Fluxo realizado vs. previsto · próximos 30 dias</h3></div>
      <LineChart data={VENDAS_POR_DIA} accent="var(--cyan)"/>
    </div>
  </div>
);

const ContasView = () => (
  <div className="stack">
    <div className="card">
      <div className="card-head"><h3>Contas cadastradas</h3><button className="btn sm"><Ic name="plus" size={11}/> Nova conta</button></div>
      <table className="tbl">
        <thead><tr><th>Conta</th><th>Tipo</th><th style={{textAlign:'right'}}>Saldo</th><th>Última mov.</th><th></th></tr></thead>
        <tbody>
          <tr><td className="strong row gap-8"><Ic name="file" size={14} className="t-3"/>Caixa físico — Loja</td><td>Espécie</td><td className="num">{brl(1420.00)}</td><td className="t-3 mono">há 14m</td><td><span className="menu-dot">⋯</span></td></tr>
          <tr><td className="strong row gap-8"><Ic name="package" size={14} className="t-cyan"/>Conta Inter PJ</td><td>Conta bancária</td><td className="num">{brl(28740.50)}</td><td className="t-3 mono">há 2h</td><td><span className="menu-dot">⋯</span></td></tr>
          <tr><td className="strong row gap-8"><Ic name="pix" size={14} className="t-accent"/>Mercado Pago</td><td>Maquininha + Pix</td><td className="num">{brl(12018.30)}</td><td className="t-3 mono">há 8m</td><td><span className="menu-dot">⋯</span></td></tr>
          <tr><td className="strong row gap-8"><Ic name="dollar" size={14} className="t-3"/>Reserva poupança</td><td>Conta bancária</td><td className="num">{brl(15000.00)}</td><td className="t-3 mono">há 12d</td><td><span className="menu-dot">⋯</span></td></tr>
        </tbody>
      </table>
    </div>
  </div>
);

const LancamentosView = () => (
  <div className="tbl-wrap">
    <table className="tbl">
      <thead><tr><th>Data</th><th>Tipo</th><th>Categoria</th><th>Descrição</th><th>Conta</th><th style={{textAlign:'right'}}>Valor</th></tr></thead>
      <tbody>
        <tr><td className="mono">19/05</td><td><Badge kind="green" dot>Receita</Badge></td><td>Vendas Live</td><td>Live #48 · 31 pedidos pagos</td><td>Mercado Pago</td><td className="num t-green">+ {brl(5870.40)}</td></tr>
        <tr><td className="mono">19/05</td><td><Badge kind="red" dot>Despesa</Badge></td><td>Marketing</td><td>Recarga WhatsApp · 5.000 envios</td><td>Inter PJ</td><td className="num t-red">- {brl(450.00)}</td></tr>
        <tr><td className="mono">18/05</td><td><Badge kind="green" dot>Receita</Badge></td><td>Vendas Loja</td><td>Fechamento caixa 18/05</td><td>Caixa físico</td><td className="num t-green">+ {brl(2840.00)}</td></tr>
        <tr><td className="mono">18/05</td><td><Badge kind="red" dot>Despesa</Badge></td><td>Logística</td><td>Postagem Correios · 28 etiquetas</td><td>Inter PJ</td><td className="num t-red">- {brl(842.30)}</td></tr>
        <tr><td className="mono">17/05</td><td><Badge kind="red" dot>Despesa</Badge></td><td>Fornecedor</td><td>NF Aurora Studio · pedido OC-184</td><td>Inter PJ</td><td className="num t-red">- {brl(3420.00)}</td></tr>
        <tr><td className="mono">15/05</td><td><Badge kind="red" dot>Despesa</Badge></td><td>Aluguel</td><td>Aluguel loja maio/26</td><td>Inter PJ</td><td className="num t-red">- {brl(4800.00)}</td></tr>
      </tbody>
    </table>
  </div>
);

const APagarView = () => (
  <div className="stack">
    <div className="stat-grid cols-3 mb-12">
      <Stat label="A pagar · próximos 7 dias" value={brl(8420.00)} glow="cyan"/>
      <Stat label="Vencidos" value={brl(840.00)} hint="1 conta"/>
      <Stat label="A pagar · 30 dias" value={brl(22480.00)}/>
    </div>
    <div className="tbl-wrap">
      <table className="tbl">
        <thead><tr><th>Descrição</th><th>Categoria</th><th>Fornecedor</th><th>Vencimento</th><th style={{textAlign:'right'}}>Valor</th><th>Status</th><th></th></tr></thead>
        <tbody>
          <tr><td className="strong">Fornecedor Aurora · OC-186</td><td>Mercadorias</td><td>Aurora Studio Atacado</td><td className="mono">22/05</td><td className="num">{brl(4280.00)}</td><td><StatusBadge status="Pendente"/></td><td><button className="btn sm primary">Pagar</button></td></tr>
          <tr><td className="strong">Salários · maio</td><td>Folha</td><td>—</td><td className="mono">25/05</td><td className="num">{brl(8420.00)}</td><td><StatusBadge status="Pendente"/></td><td><button className="btn sm primary">Pagar</button></td></tr>
          <tr><td className="strong">Energia loja</td><td>Operacional</td><td>Equatorial</td><td className="mono">15/05</td><td className="num">{brl(840.00)}</td><td><StatusBadge status="Vencido"/></td><td><button className="btn sm danger">Pagar agora</button></td></tr>
          <tr><td className="strong">Internet + telefone</td><td>Operacional</td><td>Vivo Empresas</td><td className="mono">28/05</td><td className="num">{brl(380.00)}</td><td><StatusBadge status="Pendente"/></td><td><button className="btn sm">Pagar</button></td></tr>
        </tbody>
      </table>
    </div>
  </div>
);

Object.assign(window, { PdvPage, CrediarioPage, FinanceiroPage });