// backoffice-accounting.jsx — Módulo Contábil // Resultados financeiros e contábeis: DRE, Plano de Contas e Fluxo de Caixa. (function () { const { fmtBRL, fmtBRLcompact, data, TONES } = window.BO; // ───────── Skeletons ───────── function BoKpiSkeleton({ count = 6 }) { return Array.from({ length: count }).map((_, i) => (
)); } // Linhas de painel (label à esquerda + valor à direita) — reusa o mesmo container do real. function BoPanelRowsSkeleton({ count = 4 }) { return Array.from({ length: count }).map((_, i) => (
)); } // ───────── Aba: DRE ───────── function DRETab({ loading }) { if (loading) { return (
{Array.from({ length: skelCount('bo-dre', 8) }).map((_, i) => (
))}
); } return (
Exportar}>
{data.dre.map((l, i) => { const isBase = l.tipo === 'base' || l.tipo === 'resultado'; const isResult = l.tipo === 'resultado'; const neg = l.valor < 0; return (
{l.label} {neg ? '−' : ''}{fmtBRL(Math.abs(l.valor)).replace('R$ ', 'R$ ')}
); })}
{[['Margem bruta', 69.1, '#10b981'], ['Margem operacional', 38.2, '#3b82f6'], ['Margem líquida', 32.7, '#8b5cf6']].map(([label, v, c]) => (
{label} {String(v).replace('.', ',')}%
))} {[['Receita líquida', data.contabilKpis.receitaTotal, '#047857'], ['Despesas totais', -data.contabilKpis.despesaTotal, '#b91c1c'], ['Resultado operacional', data.contabilKpis.resultadoOperacional, '#1d4ed8'], ['Lucro líquido', data.contabilKpis.lucroLiquido, '#6d28d9']].map(([l, v, c]) => (
{l}
{v < 0 ? '−' : ''}{fmtBRLcompact(Math.abs(v))}
))}
); } // ───────── Aba: Plano de Contas ───────── function PlanoTab() { const max = Math.max(...data.planoContas.map((g) => g.total)); return (
{data.planoContas.map((g) => { const t = TONES[g.tone] || TONES.slate; return ( {fmtBRLcompact(g.total)}}> {g.contas.map((cc) => (
{cc.nome} {fmtBRLcompact(cc.valor)}
))} ); })}
); } // ───────── Aba: Fluxo de Caixa ───────── function FluxoTab() { const [view, setView] = React.useState('mensal'); const maxV = Math.max(...data.fluxo.flatMap((f) => [f.entrada, f.saida])); const totEnt = data.fluxo.reduce((s, f) => s + f.entrada, 0); const totSai = data.fluxo.reduce((s, f) => s + f.saida, 0); return ( {['diario', 'semanal', 'mensal', 'anual'].map((v) => ( setView(v)}>{v[0].toUpperCase() + v.slice(1)}))}
}>
Entradas
{fmtBRLcompact(totEnt)}
Saídas
{fmtBRLcompact(totSai)}
Saldo
{fmtBRLcompact(totEnt - totSai)}
Entradas Saídas
{data.fluxo.map((f) => (
{f.mes}
))}
); } function BackofficeAccounting() { const [tab, setTab] = React.useState('dre'); const [loading, setLoading] = React.useState(true); // skeleton no mount (scaffolding p/ API real) React.useEffect(() => setLoading(false), []); React.useEffect(() => { if (data.dre.length) skelRemember('bo-dre', data.dre.length); }, []); const k = data.contabilKpis; return ( Balancete}>
{loading ? : <> }
{[['dre', 'DRE'], ['plano', 'Plano de Contas'], ['fluxo', 'Fluxo de Caixa']].map(([id, label]) => (
setTab(id)}>{label}
))}
{tab === 'dre' && } {tab === 'plano' && } {tab === 'fluxo' && } ); } window.BackofficeAccounting = BackofficeAccounting; })();