/* global React, SEQ_UI, SEQ_LAYOUT */ const { brl, Avatar, Icon, StatusChip } = window.SEQ_UI; const { Pill } = window.SEQ_LAYOUT; // ─── Helpers ──────────────────────────────────────────── function getClientId() { const h = window.location.hash || ""; const q = h.split("?")[1]; return q ? new URLSearchParams(q).get("id") : null; } function fmtDate(iso) { if (!iso) return "—"; return new Date(iso).toLocaleDateString("pt-BR", { day: "2-digit", month: "short", year: "numeric" }); } function fmtRel(iso) { if (!iso) return "—"; const days = Math.floor((Date.now() - new Date(iso).getTime()) / 86400000); if (days <= 0) return "hoje"; if (days === 1) return "ontem"; if (days < 30) return `há ${days}d`; if (days < 365) return `há ${Math.round(days / 30)}m`; return `há ${(days / 365).toFixed(1)} anos`; } function monthsLabel(n) { return n === 1 ? "1 mês" : `${n} meses`; } function initials(name) { return (name || "").split(" ").map(s => s[0]).slice(0, 2).join(""); } const COLOR_POOL = ["var(--kp-pink)", "var(--kp-green)", "var(--kp-cold)", "var(--kp-yellow)"]; // ─── Investimentos: combinar fontes em uma timeline única ─── function combineLedger(invoices, investments, subscriptions) { const rows = []; for (const i of invoices.filter(x => x.status === "paid")) { rows.push({ id: `inv-${i.id}`, kind: "invoice", label: i.title || "Cobrança paga", amount: i.amount || 0, date: i.createdAt, meta: "Asaas · invoice", }); } for (const x of investments) { rows.push({ id: `inv-m-${x.id}`, investmentId: x.id, kind: "manual", label: x.description || "Investimento manual", amount: x.amount || 0, date: x.occurredAt, meta: x.source === "manual" ? "Registro manual" : x.source, removable: true, }); } for (const s of subscriptions) { if ((s.totalPaid ?? 0) > 0) { rows.push({ id: `sub-${s.id}`, kind: "subscription", label: `Assinatura ${s.billingCycle || ""}`.trim(), amount: s.totalPaid, date: s.createdAt, meta: `${s.chargeCount ?? 0} cobranças · ${s.status}`, }); } } rows.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); return rows; } // ─── Monthly bars (últimos 6 meses) ─── function buildMonthly(ledger) { const out = []; const now = new Date(); for (let i = 5; i >= 0; i--) { const d = new Date(now.getFullYear(), now.getMonth() - i, 1); const label = d.toLocaleDateString("pt-BR", { month: "short" }).replace(".", ""); out.push({ key: `${d.getFullYear()}-${d.getMonth()}`, label, total: 0 }); } for (const r of ledger) { const dt = new Date(r.date); const k = `${dt.getFullYear()}-${dt.getMonth()}`; const slot = out.find(o => o.key === k); if (slot) slot.total += r.amount; } const max = Math.max(1, ...out.map(o => o.total)); return { rows: out, max }; } // ─── Page ─────────────────────────────────────────────── function ClienteDetalhe() { const [clientId, setClientId] = React.useState(getClientId()); const [data, setData] = React.useState(null); const [loading, setLoading] = React.useState(true); const [error, setError] = React.useState(null); const [investOpen, setInvestOpen] = React.useState(false); React.useEffect(() => { function onHash() { setClientId(getClientId()); } window.addEventListener("hashchange", onHash); return () => window.removeEventListener("hashchange", onHash); }, []); const reload = React.useCallback(() => { if (!clientId) return; setLoading(true); window.SEQ_API.getClient(clientId) .then(d => { setData(d); setError(null); }) .catch(e => setError(e.message || "Falha ao carregar")) .finally(() => setLoading(false)); }, [clientId]); React.useEffect(() => { reload(); }, [reload]); if (!clientId) { return (
SEM CLIENTE SELECIONADO
← Voltar pra lista
); } if (loading && !data) { return
Carregando…
; } if (error || !data) { return (
⚠ {error || "Cliente não encontrado"}
← Voltar
); } const { client, stats, invoices, proposals, subscriptions, investments } = data; const ledger = combineLedger(invoices || [], investments || [], subscriptions || []); const monthly = buildMonthly(ledger); const color = COLOR_POOL[(client.name?.charCodeAt(0) || 0) % COLOR_POOL.length]; return (
{/* Top bar */}
Clientes |
{client.name}
{client.company || "Pessoa física"}
WhatsApp
{/* Hero card + KPIs */}
{/* Hero card escuro estilo Coinest */}
CLIENTE DESDE
{fmtDate(stats.sinceAt)}
{monthsLabel(stats.monthsActive)} · {fmtRel(stats.sinceAt)}
TOTAL JÁ INVESTIDO
{brl(stats.totalInvested / 100)}
{stats.paidInvoiceCount} cobranças pagas · {stats.activeSubscriptions} recorrência ativa
{/* KPI grid */}
} /> } /> } /> } />
{/* Bottom: ledger + sidebar info */}
{/* Ledger + chart */}
{/* Right column */}
{investOpen && ( setInvestOpen(false)} onSaved={() => { setInvestOpen(false); reload(); }} /> )}
); } // ─── KPI card ─────────────────────────────────────────── function KPICard({ label, value, sub, bg, icon }) { return (
{icon} {label}
8 ? 26 : 36, fontStyle: "italic", lineHeight: 1.05, marginTop: 10 }}> {value}
{sub}
); } // ─── Monthly bars ─────────────────────────────────────── function MonthlyBars({ data }) { return (
EVOLUÇÃO · ÚLTIMOS 6 MESES
Quanto entrou por mês
{data.rows.map((r, i) => { const h = data.max > 0 ? Math.max(4, (r.total / data.max) * 140) : 4; return (
{r.total > 0 ? brl(r.total / 100) : ""}
{r.label}
); })}
); } // ─── Ledger ───────────────────────────────────────────── function Ledger({ ledger, clientId, onChange }) { async function remove(investmentId) { if (!confirm("Apagar este registro de investimento?")) return; try { await window.SEQ_API.deleteClientInvestment(clientId, investmentId); onChange(); } catch (e) { alert(e.message); } } return (
HISTÓRICO
O que esse cliente já investiu
{ledger.length} {ledger.length === 1 ? "registro" : "registros"}
{ledger.length === 0 && (
Sem investimentos registrados ainda.
)}
{ledger.map((r, i) => (
{r.kind === "manual" ? : }
{r.label}
{fmtDate(r.date)} · {r.meta}
{brl(r.amount / 100)} {r.removable ? ( ) : }
))}
); } // ─── Contact card ─────────────────────────────────────── function ContactCard({ client }) { return (
CONTATO
{client.company && }
); } function Field({ label, value, mono }) { return (
{label}
{value || "—"}
); } // ─── Proposals list ───────────────────────────────────── function ProposalsList({ proposals }) { if (!proposals.length) return null; return (
PROPOSTAS · {proposals.length}
{proposals.slice(0, 5).map((p, i) => (
{p.title}
{fmtDate(p.createdAt)} · {p.viewCount ?? 0} views
))}
); } // ─── Subscriptions list ───────────────────────────────── function SubscriptionsList({ subscriptions }) { if (!subscriptions.length) return null; return (
RECORRÊNCIAS · {subscriptions.length}
{subscriptions.map((s, i) => (
{brl((s.amount || 0) / 100)} / {s.billingCycle}
{s.chargeCount ?? 0} cobranças · próxima {s.nextChargeDate ? fmtDate(s.nextChargeDate) : "—"}
{s.status}
))}
); } // ─── Investment modal ─────────────────────────────────── function InvestmentModal({ clientId, onClose, onSaved }) { const [amount, setAmount] = React.useState(""); const [description, setDescription] = React.useState(""); const [occurredAt, setOccurredAt] = React.useState(new Date().toISOString().split("T")[0]); const [submitting, setSubmitting] = React.useState(false); const [error, setError] = React.useState(null); async function submit(e) { e.preventDefault(); const cleaned = String(amount).replace(/[^0-9.,]/g, "").replace(",", "."); const cents = cleaned ? Math.round(parseFloat(cleaned) * 100) : 0; if (!cents) { setError("Valor obrigatório"); return; } setSubmitting(true); setError(null); try { await window.SEQ_API.createClientInvestment(clientId, { amount: cents, description: description.trim() || undefined, occurredAt, }); onSaved(); } catch (err) { setError(err.message || "Falha ao salvar."); setSubmitting(false); } } return (
e.stopPropagation()} className="kp-card" style={{ padding: 28, maxWidth: 480, width: "100%", background: "var(--kp-paper)" }}>
NOVO INVESTIMENTO

Quanto entrou agora?

{error &&
⚠ {error}
}
); } window.SEQ_CLIENTE = ClienteDetalhe;