/* global React, SEQ_UI */ const { Icon, brl, Avatar } = window.SEQ_UI; const PAGAMENTOS_FALLBACK = [ { id: "pg-001", cliente: "Diogo Costa", proposta: "Agendamento · entrada", valor: 2000, metodo: "PIX", status: "pago", data: "30 abr · 18:02", taxa: 0.99 }, { id: "pg-002", cliente: "André Sapato", proposta: "Lançamento · entrada", valor: 4950, metodo: "Cartão · 6x", status: "pago", data: "22 abr · 10:31", taxa: 178.20 }, ]; const STATUS_INV = { paid: "pago", sent: "aguardando", overdue: "atrasado", cancelled: "estornado", draft: "rascunho" }; function transformInvoice(inv) { const client = inv.clients; const due = inv.due_date || inv.dueDate; const status = STATUS_INV[inv.status] || inv.status; return { id: inv.id, cliente: client?.name || "—", proposta: inv.title, valor: (inv.amount ?? 0) / 100, metodo: (inv.allowed_methods?.[0] || inv.allowedMethods?.[0] || "PIX").toUpperCase(), status, data: due ? new Date(due).toLocaleDateString("pt-BR", { day: "2-digit", month: "short" }) : "—", taxa: 0.99, }; } function Pagamentos() { const [PAGAMENTOS, setItems] = React.useState(PAGAMENTOS_FALLBACK); const [modal, setModal] = React.useState(false); const [actionId, setActionId] = React.useState(null); const [busyId, setBusyId] = React.useState(null); React.useEffect(() => { window.SEQ_API.listInvoices() .then(d => { if (d.invoices?.length) setItems(d.invoices.map(transformInvoice)); }) .catch(() => {}); }, []); React.useEffect(() => { if (!actionId) return; const close = () => setActionId(null); window.addEventListener("click", close); return () => window.removeEventListener("click", close); }, [actionId]); async function markPaid(id) { setBusyId(id); try { await fetch(`/api/invoices/${id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ status: "paid" }), credentials: "include", }); window.location.reload(); } catch (e) { setBusyId(null); alert("Falha ao marcar como pago."); } } const recebido = PAGAMENTOS.filter(p=>p.status==="pago").reduce((s,p)=>s+p.valor,0); const aguardando = PAGAMENTOS.filter(p=>p.status==="aguardando").reduce((s,p)=>s+p.valor,0); const atrasado = PAGAMENTOS.filter(p=>p.status==="atrasado").reduce((s,p)=>s+p.valor,0); const liquidoMes = recebido - PAGAMENTOS.filter(p=>p.status==="pago").reduce((s,p)=>s+p.taxa,0); return (
Propostas | Pagamentos
Nº 07 · CAIXA · 30 DIAS

O que caiu na conta.

Próxima liquidação · 02 mai · D+1
{/* KPIs */}
{/* Receitas + métodos */}
RECEITA · ÚLTIMOS 14 DIAS
POR MÉTODO
{[ { k: "PIX", v: 0.62, n: brl(13680), c: "var(--kp-green)" }, { k: "Cartão", v: 0.28, n: brl(6440), c: "var(--kp-pink)" }, { k: "Boleto", v: 0.10, n: brl(2200), c: "var(--kp-cold)" }, ].map(r => (
{r.k} {r.n}
))}
{/* Tabela */}
Cliente
Proposta
Valor
Método
Status · Data
{PAGAMENTOS.map((p,i) => { const canMarkPaid = p.status === "aguardando" || p.status === "atrasado"; return (
s[0]).slice(0,2).join("")} size={32} bg="var(--kp-cold)"/> {p.cliente}
{p.proposta} {brl(p.valor)} {p.metodo}
{p.data}
e.stopPropagation()}> {canMarkPaid ? ( ) : ( )} {actionId === p.id && !canMarkPaid && (
SEM AÇÕES
)}
); })}
{/* Recorrências + payouts */}
RECORRÊNCIAS ATIVAS · 4
Mensal: R$ 6.290,00
{[ { c: "Café Sapatão", v: brl(1490), p: "todo dia 10" }, { c: "Lemos Saúde", v: brl(1800), p: "todo dia 5" }, { c: "Pet Hub", v: brl(2200), p: "todo dia 20" }, { c: "Tórtola", v: brl(800), p: "todo dia 1" }, ].map((r,i) => (
{r.c} {r.p} {r.v}
))}
PRÓXIMO PAYOUT
{brl(2000)}
Banco Itaú · ag 0123 · cc ••••42 · liquidação 02 mai
{modal && setModal(false)} onCreated={()=>{ setModal(false); window.location.reload(); }} />}
); } function NewInvoiceModal({ onClose, onCreated }) { const [clients, setClients] = React.useState([]); const [clientId, setClientId] = React.useState(""); const [title, setTitle] = React.useState(""); const [amount, setAmount] = React.useState(""); const [dueDate, setDueDate] = React.useState(""); const [method, setMethod] = React.useState("pix"); const [send, setSend] = React.useState(false); const [submitting, setSubmitting] = React.useState(false); const [error, setError] = React.useState(null); React.useEffect(() => { window.SEQ_API.listClients() .then(d => setClients(d.clients || [])) .catch(() => {}); }, []); async function submit(e) { e.preventDefault(); if (!clientId || !title.trim() || !amount || !dueDate) return; setSubmitting(true); setError(null); try { const cents = Math.round(parseFloat(amount.replace(",", ".").replace(/[^0-9.]/g, "")) * 100); await window.SEQ_API.createInvoice({ clientId, title: title.trim(), amount: cents, dueDate, allowedMethods: [method], send, }); onCreated(); } catch (err) { setError(err.message || "Falha ao criar cobrança."); setSubmitting(false); } } return (
e.stopPropagation()} className="kp-card" style={{ padding: 28, maxWidth: 560, width: "100%", background: "var(--kp-paper)" }}>
NOVA COBRANÇA

Quanto e de quem?

{error &&
⚠ {error}
}
); } function KCard({ label, value, sub, bg, pulse }) { return (
{pulse && } {label}
{value}
{sub}
); } function PayStatus({ status }) { const map = { pago: { l: "Pago", c: "var(--kp-green)" }, aguardando: { l: "Aguardando", c: "var(--kp-soft)" }, atrasado: { l: "Atrasado", c: "#FFB5B5" }, estornado: { l: "Estornado", c: "var(--kp-warm)" }, }; const m = map[status] || map.aguardando; return {m.l}; } function Sparkline() { const data = [12, 18, 9, 22, 28, 15, 24, 35, 30, 42, 38, 48, 44, 52]; const max = Math.max(...data); return (
{data.map((v,i) => (
))}
); } window.SEQ_PAGAMENTOS = Pagamentos;