{data.map((d, i) => { const saldo = d.receita - d.despesa; const rH = (d.receita / max) * 180; const dH = (d.despesa / max) * 180; return (

{d.month}

= 0 ? "var(--success)" : "var(--error)", fontVariantNumeric: "tabular-nums", fontWeight: 600 }}> {saldo >= 0 ? "+" : ""}{(saldo / 1000).toFixed(0)}k

); })}

); }; /* ============================================================ FinancialRow — single line item (receivable or payable) ============================================================ */ const FinancialRow = ({ item, kind, compact }) => { const st = FIN_STATUS_META[item.status] || FIN_STATUS_META.pendente; const dleft = daysUntil(item.dueDate); const overdue = item.status === "atrasado"; return (

{kind === "rec" ? item.clientName : item.supplier}

{item.description}

{!compact && (

{fmtDate(item.dueDate)}

{overdue ? `${Math.abs(dleft)}d atrasado` : dleft === 0 ? "vence hoje" : `${dleft}d`}

)}

{kind === "rec" ? "+" : ""}{fmtBRL(item.value)}

); }; /* ============================================================ ReceivablesPanel ============================================================ */ const ReceivablesPanel = ({ items }) => { const [filter, setFilter] = useStateFin("todos"); const list = filter === "todos" ? items : items.filter(i => i.status === filter); const totals = useMemoFin(() => ({ recebido: items.filter(i => i.status === "recebido").reduce((s, i) => s + i.value, 0), pendente: items.filter(i => i.status === "pendente").reduce((s, i) => s + i.value, 0), atrasado: items.filter(i => i.status === "atrasado").reduce((s, i) => s + i.value, 0), }), [items]); return ( <>

RECEBIDO

{fmtBRL(totals.recebido)}

PENDENTE

{fmtBRL(totals.pendente)}

EM ATRASO

{fmtBRL(totals.atrasado)}

setFilter("todos")} count={items.length}>Todas setFilter("pendente")} count={items.filter(i => i.status === "pendente").length}>Pendentes setFilter("atrasado")} count={items.filter(i => i.status === "atrasado").length}>Atrasadas setFilter("recebido")} count={items.filter(i => i.status === "recebido").length}>Recebidas

{list.map(r => { const st = FIN_STATUS_META[r.status]; const dleft = daysUntil(r.dueDate); return ( ); })}

ID	Cliente	Descrição	Forma	Vencimento	Valor	Status
{r.id}	{r.clientName}	{r.description}	{r.method}	{fmtDate(r.dueDate)} {r.status === "recebido" && r.receivedAt && recebido em {fmtDate(r.receivedAt)} }	{fmtBRL(r.value)}	{st.label}

); }; /* ============================================================ PayablesPanel ============================================================ */ const PayablesPanel = ({ items }) => { const [filter, setFilter] = useStateFin("todos"); const list = filter === "todos" ? items : items.filter(i => i.status === filter); const byCat = useMemoFin(() => { const m = {}; items.forEach(p => { m[p.category] = (m[p.category] || 0) + p.value; }); return Object.entries(m).sort((a, b) => b[1] - a[1]); }, [items]); return ( <> {/* By category breakdown */}

Despesas por categoria

{byCat.map(([cat, value]) => { const meta = PAY_CATEGORY_META[cat] || { color: "#737373", icon: "package" }; const total = items.reduce((s, i) => s + i.value, 0); const share = (value / total) * 100; return (

{cat}

{fmtBRL(value)}

{share.toFixed(1)}% do total

); })}

setFilter("todos")} count={items.length}>Todas setFilter("pendente")} count={items.filter(i => i.status === "pendente").length}>Pendentes setFilter("atrasado")} count={items.filter(i => i.status === "atrasado").length}>Atrasadas setFilter("pago")} count={items.filter(i => i.status === "pago").length}>Pagas

{list.map(p => { const st = FIN_STATUS_META[p.status]; const meta = PAY_CATEGORY_META[p.category] || { color: "#737373", icon: "package" }; const dleft = daysUntil(p.dueDate); return ( ); })}

ID	Fornecedor	Descrição	Categoria	NF	Vencimento	Valor	Status
{p.id}	{p.supplier}	{p.description}	{p.category}	{p.invoice}	{fmtDate(p.dueDate)} {p.status === "pago" && p.paidAt && pago em {fmtDate(p.paidAt)} }	{fmtBRL(p.value)}	{st.label}

); }; /* ============================================================ MarginsPanel — per-project profitability ============================================================ */ const MarginsPanel = ({ items, navigate }) => { const totals = useMemoFin(() => ({ budget: items.reduce((s, i) => s + i.budget, 0), materials: items.reduce((s, i) => s + i.materials, 0), labor: items.reduce((s, i) => s + i.labor, 0), overhead: items.reduce((s, i) => s + i.overhead, 0), profit: items.reduce((s, i) => s + i.profit, 0), }), [items]); return ( <>

RECEITA TOTAL

{fmtBRL(totals.budget)}

MATERIAL

{fmtBRL(totals.materials)}

MÃO DE OBRA

{fmtBRL(totals.labor)}

OVERHEAD

{fmtBRL(totals.overhead)}

LUCRO

{fmtBRL(totals.profit)}

margem {((totals.profit / totals.budget) * 100).toFixed(1)}%

{items.map(m => { const margin = (m.profit / m.budget) * 100; const marginColor = margin >= 35 ? "var(--success)" : margin >= 25 ? "var(--amber-bright)" : margin >= 15 ? "var(--warning)" : "var(--error)"; return ( navigate("projects")}> ); })}

Obra	Receita	Material	Mão de obra	Overhead	Lucro	Margem	Status
{m.name} {m.projectId}	{fmtBRL(m.budget)}	{fmtBRL(m.materials)}	{fmtBRL(m.labor)}	{fmtBRL(m.overhead)}	{fmtBRL(m.profit)}	{margin.toFixed(1)}%

); }; /* expose */ Object.assign(window, { FinancialPage });