Carregando...
) : filtered.length === 0 ? (
{/* Filtro estado */}
{ufs.length > 0 && (
setFilters(f => ({ ...f, estado: v }))} />
)}
{/* KPIs */}
{/* Curva de crescimento + Mapa */}
{topCurva ? (
v >= 1000 ? `${(v/1000).toFixed(0)}k` : v }, beginAtZero: true },
},
plugins: {
legend: { display: true, position: 'bottom', labels: { color: 'rgba(255,255,255,0.5)', font: { size: 10 }, boxWidth: 12, padding: 8 } },
tooltip: { backgroundColor: 'rgba(11,11,13,0.92)', callbacks: { label: ctx => `${ctx.dataset.label}: R$ ${brl(ctx.parsed.y)}` } },
},
}} height={220} />
) : (
{loading ? 'Carregando...' : 'Sem dados suficientes'}
)}
{mapStatus === 'loading' && (
)}
{mapStatus === 'error' && (
Mapa indisponivel
)}
{/* Ranking multi-criterio + Inativos */}
{[
{ id: 'volume', label: 'Volume' },
{ id: 'frequencia', label: 'Frequencia' },
{ id: 'ticket', label: 'Ticket' },
{ id: 'recorrencia', label: 'Recorrencia' },
{ id: 'regiao', label: 'Regiao' },
].map(t => (
setRankTab(t.id)}>
{t.label}
))}
{!dados ? (
Carregando...
) : dados.inativos.length === 0 ? (
Todos os distribuidores ativos!
) : (
{dados.inativos.slice(0, 8).map((d, i) => (
onNav('crm/distribuidores')}>
90 ? 'var(--tm-danger)' : '#D4A04A', flexShrink: 0 }} />
{d.nome}
{d.diasInativo}d inativo
{d.cicloMedio ? ` · ciclo ${d.cicloMedio}d` : ''}
{d.ultimaCompra ? ` · ultima: ${relFmtDate(d.ultimaCompra.toISOString())}` : ''}
))}
)}
Carregando...
) : filtered.length === 0 ? (
Nenhum distribuidor encontrado
) : (
| # | Distribuidor | Classe | Cidade |
Pedidos | Faturamento |
Ciclo |
{filtered.slice(0, 30).map((d, i) => (
| {i+1} |
{d.nome} |
|
{d.cidade ? `${d.cidade}${d.uf ? ` · ${d.uf}` : ''}` : d.uf || '—'} |
{d.pedReal || '—'} |
0 ? 600 : 400, color: d.fatReal > 0 ? 'var(--tm-fg-1)' : 'var(--tm-fg-4)', whiteSpace:'nowrap' }}>
{d.fatReal > 0 ? `R$ ${brl(d.fatReal)}` : '—'}
|
{d.cicloMedio ? `${d.cicloMedio}d` : '—'}
|
))}
)}
);
}
// ═══════════════════════════════════════════════════════════════════════════════
// CLIENTES & RECORRÊNCIA (Fase 3)
// ═══════════════════════════════════════════════════════════════════════════════
function RelClientesSection({ filters, onNav }) {
const [dados, setDados] = React.useState(null);
const [prevData, setPrevData] = React.useState(null);
const [busca, setBusca] = React.useState('');
const [viewTab, setViewTab] = React.useState('geral');
const { start, end } = calcPeriod(filters.periodId, filters.customStart, filters.customEnd);
const { start: prevStart, end: prevEnd } = calcPreviousPeriod(start, end);
React.useEffect(() => {
if (!window.tmSupabase) { setDados({ clientes: [], freqFaixas: [], risco: [], ltvRanking: [] }); setPrevData({}); return; }
setDados(null);
const s0 = start.toISOString();
const s1 = new Date(end.getTime() + 86400000).toISOString();
const ps0 = prevStart.toISOString();
const ps1 = new Date(prevEnd.getTime() + 86400000).toISOString();
Promise.all([
window.tmSupabase.from('clientes').select('id,nome,cidade,uf,celular,email,cliente_desde').order('nome'),
window.tmSupabase.from('distribuidores').select('id,nome,cidade,uf,celular,email,cliente_desde').order('nome'),
window.tmSupabase.from('saloes').select('id,nome,cidade,uf,celular,email,cliente_desde').order('nome'),
window.tmSupabase.from('pedidos').select('cliente_nome,total,status,created_at').eq('status','Atendido').gte('created_at', s0).lte('created_at', s1),
window.tmSupabase.from('pedidos').select('cliente_nome,total,status,created_at').eq('status','Atendido').gte('created_at', ps0).lte('created_at', ps1),
window.tmSupabase.from('pedidos').select('cliente_nome,total,created_at').eq('status','Atendido').order('created_at', { ascending: true }),
window.tmSupabase.from('pedido_itens').select('pedido_id,descricao,sku,quantidade,preco_lista'),
window.tmSupabase.from('pedidos').select('id,cliente_nome').eq('status','Atendido'),
]).then(([cRes, dRes, sRes, pRes, prevRes, allPedRes, itensRes, pedIdRes]) => {
const peds = pRes.data || [];
const prevPeds = prevRes.data || [];
const allPeds = allPedRes.data || [];
const itens = itensRes.data || [];
const pedIds = pedIdRes.data || [];
const fatMap = {};
peds.forEach(p => {
const k = p.cliente_nome;
if (!fatMap[k]) fatMap[k] = { total: 0, qtd: 0, ultima: null };
fatMap[k].total += parseFloat(p.total) || 0;
fatMap[k].qtd += 1;
if (!fatMap[k].ultima || p.created_at > fatMap[k].ultima) fatMap[k].ultima = p.created_at;
});
// All-time data by client
const byClient = {};
allPeds.forEach(p => {
const n = p.cliente_nome;
if (!byClient[n]) byClient[n] = { datas: [], totalLtv: 0 };
byClient[n].datas.push(new Date(p.created_at));
byClient[n].totalLtv += parseFloat(p.total) || 0;
});
const now = Date.now();
const merge = (list, tipo) => list.map(c => {
const hist = byClient[c.nome] || { datas: [], totalLtv: 0 };
const datas = hist.datas.sort((a, b) => a - b);
let cicloMedio = null;
if (datas.length >= 2) {
const intervalos = [];
for (let i = 1; i < datas.length; i++) intervalos.push((datas[i] - datas[i-1]) / 86400000);
cicloMedio = Math.round(intervalos.reduce((a, b) => a + b, 0) / intervalos.length);
}
const ultimaCompra = datas.length > 0 ? datas[datas.length - 1] : null;
const diasInativo = ultimaCompra ? Math.floor((now - ultimaCompra.getTime()) / 86400000) : 999;
const emRisco = cicloMedio && diasInativo > cicloMedio * 1.5;
return {
...c, tipo,
fat: fatMap[c.nome]?.total || 0,
pedQtd: fatMap[c.nome]?.qtd || 0,
ultimaCompra: fatMap[c.nome]?.ultima,
totalCompras: datas.length,
ltv: hist.totalLtv,
cicloMedio,
diasInativo,
emRisco,
proximaCompra: cicloMedio && ultimaCompra ? new Date(ultimaCompra.getTime() + cicloMedio * 86400000) : null,
};
});
const all = [
...merge(cRes.data || [], 'Cliente'),
...merge(dRes.data || [], 'Distribuidor'),
...merge(sRes.data || [], 'Salao'),
].sort((a, b) => b.fat - a.fat);
// Frequencia histogram
const freqBuckets = { '1 compra': 0, '2-3 compras': 0, '4-6 compras': 0, '7-12 compras': 0, '13+ compras': 0 };
all.forEach(c => {
const n = c.totalCompras;
if (n === 0) return;
if (n === 1) freqBuckets['1 compra']++;
else if (n <= 3) freqBuckets['2-3 compras']++;
else if (n <= 6) freqBuckets['4-6 compras']++;
else if (n <= 12) freqBuckets['7-12 compras']++;
else freqBuckets['13+ compras']++;
});
const freqFaixas = Object.entries(freqBuckets).map(([label, count]) => ({ label, count }));
// Risco de perda
const risco = all.filter(c => c.emRisco && c.totalCompras >= 2).sort((a, b) => b.ltv - a.ltv);
// LTV ranking
const ltvRanking = all.filter(c => c.ltv > 0).sort((a, b) => b.ltv - a.ltv).slice(0, 20);
// Produtos favoritos por cliente (top 5 clients)
const pedIdMap = {};
pedIds.forEach(p => { pedIdMap[p.id] = p.cliente_nome; });
const prodByClient = {};
itens.forEach(it => {
const cli = pedIdMap[it.pedido_id];
if (!cli) return;
if (!prodByClient[cli]) prodByClient[cli] = {};
const k = it.descricao || it.sku;
if (!prodByClient[cli][k]) prodByClient[cli][k] = 0;
prodByClient[cli][k] += it.quantidade || 0;
});
const topClients = all.filter(c => c.ltv > 0).slice(0, 5);
const prodFavoritos = topClients.map(c => {
const prods = prodByClient[c.nome] || {};
const top3 = Object.entries(prods).sort((a, b) => b[1] - a[1]).slice(0, 3);
return { nome: c.nome, produtos: top3 };
});
setDados({ clientes: all, freqFaixas, risco, ltvRanking, prodFavoritos });
setPrevData({ fat: prevPeds.reduce((a, p) => a + (parseFloat(p.total) || 0), 0), n: prevPeds.length });
});
}, [filters.periodId, filters.customStart, filters.customEnd]);
const d = dados || {};
const filtered = (d.clientes || []).filter(c => {
const q = busca.toLowerCase();
return !q || c.nome.toLowerCase().includes(q) || (c.cidade || '').toLowerCase().includes(q) || c.tipo.toLowerCase().includes(q);
});
const comCompra = filtered.filter(c => c.fat > 0);
const totalFat = comCompra.reduce((a, c) => a + c.fat, 0);
const recorrentes = filtered.filter(c => c.totalCompras >= 2).length;
const loading = dados === null;
return (
{/* KPIs */}
{/* View tabs */}
{[
{ id: 'geral', label: 'Visao Geral' },
{ id: 'recorrencia', label: 'Recorrencia' },
{ id: 'risco', label: 'Risco de Perda' },
{ id: 'ltv', label: 'LTV Ranking' },
].map(t => (
setViewTab(t.id)}>
{t.label}
))}
{viewTab === 'geral' && (
<>
{/* Frequencia histograma + Produtos favoritos */}
{loading ? (
Carregando...
) : (d.prodFavoritos || []).length === 0 ? (
Sem dados
) : (
{d.prodFavoritos.map((cli, idx) => (
{cli.nome}
{cli.produtos.map(([prod, qty]) => (
{prod.length > 25 ? prod.slice(0, 23) + '..' : prod} ({qty}x)
))}
))}
{/* Main table */}
setBusca(e.target.value)} style={{ fontSize: 12, padding: '4px 10px', width: 200 }} />}>
{loading ? (
Carregando...
) : filtered.length === 0 ? (
Nenhum contato encontrado
) : (
| # | Nome | Tipo | Cidade | Pedidos | Ultima | Faturamento |
|---|
{filtered.slice(0, 50).map((c, i) => (
| {i + 1} |
{c.nome} |
{c.tipo} |
{c.cidade || '—'} |
{c.totalCompras || '—'} |
{relFmtDate(c.ultimaCompra)} |
0 ? 600 : 400, color: c.fat > 0 ? 'var(--tm-fg-1)' : 'var(--tm-fg-4)', whiteSpace: 'nowrap' }}>
{c.fat > 0 ? `R$ ${brl(c.fat)}` : '—'}
|
))}
)}
)}
{viewTab === 'recorrencia' && (
{loading ? (
Carregando...
) : (() => {
const comCiclo = filtered.filter(c => c.cicloMedio && c.proximaCompra).sort((a, b) => a.proximaCompra - b.proximaCompra);
if (comCiclo.length === 0) return Nenhum cliente com ciclo calculavel (necessario 2+ compras)
;
const hoje = new Date();
return (
| Cliente | Tipo | Ciclo medio | Total compras | Ultima compra | Proxima prevista | Status |
|---|
{comCiclo.slice(0, 40).map(c => {
const atrasado = c.proximaCompra < hoje;
const diasPara = Math.ceil((c.proximaCompra - hoje) / 86400000);
return (
| {c.nome} |
{c.tipo} |
{c.cicloMedio}d |
{c.totalCompras} |
{relFmtDate(c.ultimaCompra)} |
{c.proximaCompra.toLocaleDateString('pt-BR')} |
{atrasado ? (
{Math.abs(diasPara)}d atrasado
) : diasPara <= 7 ? (
em {diasPara}d
) : (
em {diasPara}d
)}
|
);
})}
);
})()}
)}
{viewTab === 'risco' && (
{loading ? (
Carregando...
) : (d.risco || []).length === 0 ? (
) : (
| Cliente | Tipo | Ciclo | Dias inativo | LTV | Atraso |
|---|
{d.risco.slice(0, 30).map(c => {
const atraso = c.diasInativo - c.cicloMedio;
return (
| {c.nome} |
{c.tipo} |
{c.cicloMedio}d |
{c.diasInativo}d |
R$ {brl(c.ltv)} |
+{atraso}d |
);
})}
)}
)}
{viewTab === 'ltv' && (
{loading ? (
Carregando...
) : (
({ nome: c.nome, valor: c.ltv }))}
valueKey="valor" labelKey="nome"
formatFn={v => `R$ ${brl(v)}`}
maxItems={20}
/>
)}
)}
);
}
// ═══════════════════════════════════════════════════════════════════════════════
// FINANCEIRO AVANÇADO (Fase 3)
// ═══════════════════════════════════════════════════════════════════════════════
function RelFinanceiroSection({ filters, onNav }) {
const [dados, setDados] = React.useState(null);
const [prevFat, setPrevFat] = React.useState(null);
const [taxRate, setTaxRate] = React.useState(15);
const { start, end } = calcPeriod(filters.periodId, filters.customStart, filters.customEnd);
const { start: prevStart, end: prevEnd } = calcPreviousPeriod(start, end);
React.useEffect(() => {
if (!window.tmSupabase) { setDados({}); setPrevFat(0); return; }
setDados(null);
const s0 = start.toISOString();
const s1 = new Date(end.getTime() + 86400000).toISOString();
const ps0 = prevStart.toISOString();
const ps1 = new Date(prevEnd.getTime() + 86400000).toISOString();
Promise.all([
window.tmSupabase.from('pedidos').select('id,total,status,created_at,cliente_nome').eq('status','Atendido').gte('created_at', s0).lte('created_at', s1),
window.tmSupabase.from('contas_receber').select('valor,valor_recebido,status,vencimento,forma_pagamento,cliente_nome,referencia,parcela'),
window.tmSupabase.from('contas_pagar').select('valor,status,vencimento,categoria,fornecedor'),
window.tmSupabase.from('pedidos').select('total').eq('status','Atendido').gte('created_at', ps0).lte('created_at', ps1),
window.tmSupabase.from('pedido_itens').select('pedido_id,quantidade,preco_lista,preco_custo'),
window.tmSupabase.from('pedidos').select('id,total,created_at,cliente_nome').eq('status','Atendido').order('created_at', { ascending: false }).limit(200),
]).then(([pRes, crRes, cpRes, prevRes, itensRes, recentRes]) => {
const pedidos = pRes.data || [];
const cr = crRes.data || [];
const cp = cpRes.data || [];
const itens = itensRes.data || [];
const recentPeds = recentRes.data || [];
const faturamento = pedidos.reduce((a, p) => a + (parseFloat(p.total) || 0), 0);
const recebido = cr.filter(r => r.status === 'Recebido').reduce((a, r) => a + (parseFloat(r.valor_recebido) || parseFloat(r.valor) || 0), 0);
const aReceber = cr.filter(r => r.status !== 'Recebido').reduce((a, r) => a + ((parseFloat(r.valor) || 0) - (parseFloat(r.valor_recebido) || 0)), 0);
const vencidos = cr.filter(r => r.status !== 'Recebido' && r.vencimento && new Date(r.vencimento) < new Date());
const totalVencido = vencidos.reduce((a, r) => a + ((parseFloat(r.valor) || 0) - (parseFloat(r.valor_recebido) || 0)), 0);
const pago = cp.filter(r => r.status === 'Pago').reduce((a, r) => a + (parseFloat(r.valor) || 0), 0);
const aPagar = cp.filter(r => r.status !== 'Pago').reduce((a, r) => a + (parseFloat(r.valor) || 0), 0);
// CMV from pedido_itens
const pedIdsInPeriod = new Set(pedidos.map(p => p.id));
let cmv = 0;
itens.forEach(it => {
if (!pedIdsInPeriod.has(it.pedido_id)) return;
const custo = parseFloat(it.preco_custo) || 0;
const qty = it.quantidade || 0;
cmv += custo * qty;
});
// Aging de inadimplencia
const hoje = new Date();
const aging = [
{ label: '0-30 dias', valor: 0 },
{ label: '31-60 dias', valor: 0 },
{ label: '61-90 dias', valor: 0 },
{ label: '90+ dias', valor: 0 },
];
vencidos.forEach(r => {
const venc = new Date(r.vencimento);
const dias = Math.floor((hoje - venc) / 86400000);
const saldo = (parseFloat(r.valor) || 0) - (parseFloat(r.valor_recebido) || 0);
if (dias <= 30) aging[0].valor += saldo;
else if (dias <= 60) aging[1].valor += saldo;
else if (dias <= 90) aging[2].valor += saldo;
else aging[3].valor += saldo;
});
// Projecao 30 dias (media diaria * 30)
const diasPeriodo = Math.max(1, Math.ceil((end - start) / 86400000));
const mediaDiaria = faturamento / diasPeriodo;
const projecao30 = mediaDiaria * 30;
// Margem por venda (recent 50)
const margemPorVenda = [];
const pedIdSet = new Set(pedidos.map(p => p.id));
const custoByPedido = {};
itens.forEach(it => {
if (!custoByPedido[it.pedido_id]) custoByPedido[it.pedido_id] = 0;
custoByPedido[it.pedido_id] += (parseFloat(it.preco_custo) || 0) * (it.quantidade || 0);
});
pedidos.slice(0, 50).forEach(p => {
const total = parseFloat(p.total) || 0;
const custo = custoByPedido[p.id] || 0;
const margem = total > 0 && custo > 0 ? ((total - custo) / total) * 100 : null;
margemPorVenda.push({ id: p.id, cliente: p.cliente_nome, total, custo, margem, data: p.created_at });
});
// Fluxo de caixa visual (daily in period)
const fluxoDiario = {};
pedidos.forEach(p => {
const day = new Date(p.created_at).toISOString().slice(0, 10);
if (!fluxoDiario[day]) fluxoDiario[day] = { entrada: 0, saida: 0 };
fluxoDiario[day].entrada += parseFloat(p.total) || 0;
});
cp.filter(c => c.status === 'Pago' && c.vencimento).forEach(c => {
const day = new Date(c.vencimento).toISOString().slice(0, 10);
if (!fluxoDiario[day]) fluxoDiario[day] = { entrada: 0, saida: 0 };
fluxoDiario[day].saida += parseFloat(c.valor) || 0;
});
const fluxoSorted = Object.entries(fluxoDiario).sort((a, b) => a[0].localeCompare(b[0])).slice(-30);
const saldoLiquido = recebido - pago;
setDados({
faturamento, recebido, aReceber, totalVencido, vencidosQtd: vencidos.length,
pago, aPagar, saldoLiquido, cr, cp, nPed: pedidos.length,
cmv, aging, projecao30, margemPorVenda, fluxoSorted,
});
setPrevFat((prevRes.data || []).reduce((a, p) => a + (parseFloat(p.total) || 0), 0));
});
}, [filters.periodId, filters.customStart, filters.customEnd]);
const d = dados || {};
const loading = dados === null;
// DRE Real
const impostos = (d.faturamento || 0) * (taxRate / 100);
const lucroBruto = (d.faturamento || 0) - (d.cmv || 0);
const lucroLiquido = lucroBruto - impostos - (d.pago || 0);
const margemBruta = d.faturamento > 0 ? (lucroBruto / d.faturamento) * 100 : 0;
const margemLiquida = d.faturamento > 0 ? (lucroLiquido / d.faturamento) * 100 : 0;
const dreRows = [
{ label: 'Receita Bruta', valor: d.faturamento, tone: '' },
{ label: `(-) Impostos (${taxRate}%)`, valor: impostos, tone: 'down' },
{ label: '(-) CMV (Custo Mercadoria)', valor: d.cmv, tone: 'down' },
{ label: `(=) Lucro Bruto (${margemBruta.toFixed(1)}%)`, valor: lucroBruto, tone: lucroBruto >= 0 ? 'up' : 'down', bold: true },
{ label: '(-) Despesas Operacionais', valor: d.pago, tone: 'down' },
{ label: `(=) Lucro Liquido (${margemLiquida.toFixed(1)}%)`, valor: lucroLiquido, tone: lucroLiquido >= 0 ? 'up' : 'down', bold: true },
];
// Fluxo de caixa chart data
const fluxoChartData = React.useMemo(() => {
if (!d.fluxoSorted || d.fluxoSorted.length === 0) return null;
const labels = d.fluxoSorted.map(([day]) => {
const dt = new Date(day + 'T12:00:00');
return dt.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' });
});
return {
labels,
datasets: [
{ label: 'Entradas', data: d.fluxoSorted.map(([, v]) => v.entrada), backgroundColor: 'rgba(91,177,122,0.7)', borderRadius: 3 },
{ label: 'Saidas', data: d.fluxoSorted.map(([, v]) => -v.saida), backgroundColor: 'rgba(217,101,94,0.7)', borderRadius: 3 },
],
};
}, [d.fluxoSorted]);
const formaMap = {};
(d.cr || []).forEach(r => {
const f = r.forma_pagamento || 'Outros';
if (!formaMap[f]) formaMap[f] = { val: 0, qtd: 0 };
formaMap[f].val += parseFloat(r.valor) || 0;
formaMap[f].qtd += 1;
});
const formaRows = Object.entries(formaMap).sort((a, b) => b[1].val - a[1].val);
const totalForma = formaRows.reduce((a, [, v]) => a + v.val, 0);
return (
{/* KPIs */}
0 ? `${d.vencidosQtd} titulos` : 'em dia'} />
{/* DRE + Aging */}
Impostos:
setTaxRate(Math.max(0, Math.min(100, Number(e.target.value))))}
style={{ width: 48, height: 24, fontSize: 11, textAlign: 'center', borderRadius: 4, border: '1px solid var(--tm-line-2)', background: 'var(--tm-bg-2)', color: 'var(--tm-fg-1)', fontFamily: 'inherit' }} />
%
}>
{loading ? (
Carregando...
) : dreRows.map((row, i) => (
{row.label}
R$ {brl(row.valor || 0)}
))}
{!loading && d.aging && (
{d.aging.map(f => (
{f.label}
0 ? 'var(--tm-danger)' : 'var(--tm-fg-3)' }}>
R$ {brl(f.valor)}
))}
)}
{/* Fluxo de caixa + Recebiveis forma pgto */}
{!fluxoChartData ? (
{loading ? 'Carregando...' : 'Sem dados'}
) : (
v >= 1000 ? `${(v/1000).toFixed(0)}k` : v < -1000 ? `${(v/1000).toFixed(0)}k` : v } },
},
plugins: {
legend: { display: true, position: 'bottom', labels: { color: 'rgba(255,255,255,0.5)', font: { size: 10 }, boxWidth: 10 } },
tooltip: { backgroundColor: 'rgba(11,11,13,0.92)', callbacks: { label: ctx => `${ctx.dataset.label}: R$ ${brl(Math.abs(ctx.parsed.y))}` } },
},
}} height={220} />
)}
{dados ? 'Sem dados' : 'Carregando...'}
) : (
{formaRows.map(([forma, v]) => {
const pct = totalForma > 0 ? (v.val / totalForma) * 100 : 0;
return (
{forma}
R$ {brl(v.val)}
{v.qtd}x
);
})}
{/* Margem por venda */}
{loading ? (
Carregando...
) : (d.margemPorVenda || []).filter(m => m.margem !== null).length === 0 ? (
Sem dados de custo. Preencha preco_custo nos itens.
) : (
| Cliente | Data | Venda | Custo | Margem |
|---|
{(d.margemPorVenda || []).filter(m => m.margem !== null).slice(0, 30).map(m => (
| {m.cliente || '—'} |
{relFmtDate(m.data)} |
R$ {brl(m.total)} |
R$ {brl(m.custo)} |
= 30 ? 'var(--tm-success)' : m.margem >= 15 ? '#D4A04A' : 'var(--tm-danger)' }}>
{m.margem.toFixed(1)}%
|
))}
)}
Carregando...
) : (d.maisVendidos || []).length === 0 ? (
Carregando...
) : displayItems.length === 0 ? (