);
}
// ─── Metas & Progresso ───────────────────────────────────────────────────────
function MetasWidget({ start, end, empresaAtual }) {
const [metas, setMetas] = React.useState(null);
const [kpiData, setKpiData] = React.useState(null);
const [showForm, setShowForm] = React.useState(false);
const [draft, setDraft] = React.useState({ tipo: 'faturamento', periodo: 'mensal', valor_alvo: '' });
const [editId, setEditId] = React.useState(null);
const [editDraft, setEditDraft] = React.useState({ tipo: '', valor_alvo: '' });
const now = new Date();
const mesAtual = now.getMonth() + 1;
const anoAtual = now.getFullYear();
React.useEffect(() => {
if (!window.tmSupabase) return;
window.tmSupabase.from('metas').select('*')
.eq('ano', anoAtual)
.then(({ data }) => setMetas(data || []));
}, []);
React.useEffect(() => {
if (!window.tmSupabase) return;
const s0 = start.toISOString();
const s1 = new Date(end.getTime() + 86400000).toISOString();
Promise.all([
window.tmSupabase.from('pedidos').select('total, cliente_nome')
.eq('status', 'Atendido').gte('created_at', s0).lte('created_at', s1),
window.tmSupabase.from('clientes').select('id')
.gte('created_at', s0).lte('created_at', s1),
]).then(([pedRes, cliRes]) => {
const peds = pedRes.data || [];
const fat = peds.reduce((a, p) => a + (parseFloat(p.total) || 0), 0);
setKpiData({
faturamento: fat,
pedidos: peds.length,
novos_clientes: (cliRes.data || []).length,
margem: 0,
});
});
}, [start.getTime(), end.getTime()]);
const salvarMeta = async () => {
if (!window.tmSupabase || !draft.valor_alvo) return;
const rec = {
tipo: draft.tipo,
periodo: draft.periodo,
ano: anoAtual,
mes: draft.periodo === 'mensal' ? mesAtual : null,
valor_alvo: parseFloat(draft.valor_alvo) || 0,
empresa_id: empresaAtual?.id || null,
};
const { data } = await window.tmSupabase.from('metas').insert(rec).select().single();
if (data) setMetas(prev => [...(prev || []), data]);
setShowForm(false);
setDraft({ tipo: 'faturamento', periodo: 'mensal', valor_alvo: '' });
};
const iniciarEdicao = (m) => {
setEditId(m.id);
setEditDraft({ tipo: m.tipo, valor_alvo: String(m.valor_alvo || '') });
setShowForm(false);
};
const salvarEdicao = async () => {
if (!window.tmSupabase || !editId || !editDraft.valor_alvo) return;
const updates = { tipo: editDraft.tipo, valor_alvo: parseFloat(editDraft.valor_alvo) || 0 };
await window.tmSupabase.from('metas').update(updates).eq('id', editId);
setMetas(prev => (prev || []).map(m => m.id === editId ? { ...m, ...updates } : m));
setEditId(null);
};
const apagarMeta = async (m) => {
const label = tipoLabel[m.tipo] || m.tipo;
if (!confirm(`Apagar meta "${label}"?\n\nEssa ação não pode ser desfeita.`)) return;
if (window.tmSupabase) {
await window.tmSupabase.from('metas').delete().eq('id', m.id);
}
setMetas(prev => (prev || []).filter(x => x.id !== m.id));
};
if (metas === null || kpiData === null) {
return
;
}
const metasMes = metas.filter(m =>
(m.periodo === 'mensal' && m.mes === mesAtual && m.ano === anoAtual) ||
(m.periodo === 'anual' && m.ano === anoAtual)
);
const getAtual = (tipo) => {
if (tipo === 'faturamento') return kpiData.faturamento;
if (tipo === 'pedidos') return kpiData.pedidos;
if (tipo === 'novos_clientes') return kpiData.novos_clientes;
return 0;
};
const tipoLabel = { faturamento: 'Faturamento', pedidos: 'Pedidos', novos_clientes: 'Novos clientes', margem: 'Margem' };
const diasNoMes = new Date(anoAtual, mesAtual, 0).getDate();
const diasPassados = now.getDate();
const diasRestantes = diasNoMes - diasPassados;
return (
{metasMes.length === 0 && !showForm ? (
Nenhuma meta definida para este mês
) : (
{metasMes.map(m => {
const atual = getAtual(m.tipo);
const alvo = parseFloat(m.valor_alvo) || 1;
const pct = Math.min((atual / alvo) * 100, 100);
const previsao = diasPassados > 0 ? (atual / diasPassados) * diasNoMes : 0;
const ritmoDiario = diasRestantes > 0 ? Math.max(0, (alvo - atual) / diasRestantes) : 0;
const isMoney = m.tipo === 'faturamento' || m.tipo === 'margem';
const isEditing = editId === m.id;
if (isEditing) {
return (
Editar meta
setEditDraft({ ...editDraft, valor_alvo: e.target.value })} />
);
}
return (
{tipoLabel[m.tipo] || m.tipo}
= 100 ? 'var(--tm-success)' : 'var(--tm-fg-3)', fontVariantNumeric: 'tabular-nums' }}>
{isMoney ? `R$ ${brl(atual)}` : atual} / {isMoney ? `R$ ${brl(alvo)}` : alvo}
= 100 ? 'var(--tm-success)' : pct >= 70 ? 'var(--tm-brand-champagne)' : pct >= 40 ? 'var(--tm-warning)' : 'var(--tm-danger)',
}} />
{pct.toFixed(0)}% atingido
Previsão: {isMoney ? `R$ ${brl(previsao)}` : Math.round(previsao)}
{diasRestantes > 0 && atual < alvo && (
{isMoney ? `R$ ${brl(ritmoDiario)}` : Math.ceil(ritmoDiario)}/dia necessário
)}
);
})}
{!showForm && (
)}
)}
{showForm && (
Nova meta
setDraft({ ...draft, valor_alvo: e.target.value })} />
)}
);
}
// ─── Mini Calendário Operacional ─────────────────────────────────────────────
function MiniCalendario() {
const [events, setEvents] = React.useState(null);
const [selectedDay, setSelectedDay] = React.useState(null);
const now = new Date();
const ano = now.getFullYear();
const mes = now.getMonth();
const hojeNum = now.getDate();
const hojeISO = now.toISOString().slice(0, 10);
const primeiroDia = new Date(ano, mes, 1).getDay();
const diasNoMes = new Date(ano, mes + 1, 0).getDate();
React.useEffect(() => {
if (!window.tmSupabase) return;
const mesStart = new Date(ano, mes, 1).toISOString().slice(0, 10);
const mesEnd = new Date(ano, mes + 1, 0).toISOString().slice(0, 10);
Promise.all([
window.tmSupabase.from('contas_receber').select('referencia, cliente_nome, valor, vencimento, status')
.gte('vencimento', mesStart).lte('vencimento', mesEnd),
window.tmSupabase.from('contas_pagar').select('referencia, fornecedor, valor, vencimento, status')
.gte('vencimento', mesStart).lte('vencimento', mesEnd),
window.tmSupabase.from('pedidos').select('numero, cliente_nome, status, created_at')
.in('status', ['Em andamento', 'Pendente'])
.gte('created_at', mesStart + 'T00:00:00').lte('created_at', mesEnd + 'T23:59:59'),
]).then(([crRes, cpRes, pedRes]) => {
const byDay = {};
const addEvent = (day, evt) => {
if (!byDay[day]) byDay[day] = [];
byDay[day].push(evt);
};
(crRes.data || []).forEach(c => {
if (!c.vencimento) return;
const day = parseInt(c.vencimento.slice(8, 10));
const vencido = c.vencimento < hojeISO && c.status !== 'Recebido';
addEvent(day, {
type: 'receber',
color: vencido ? 'var(--tm-danger)' : c.status === 'Recebido' ? 'var(--tm-success)' : 'var(--tm-info, #5B9BD5)',
text: `Receber: ${c.referencia || c.cliente_nome}`,
valor: `R$ ${brl(parseFloat(c.valor) || 0)}`,
vencido,
});
});
(cpRes.data || []).forEach(c => {
if (!c.vencimento) return;
const day = parseInt(c.vencimento.slice(8, 10));
const vencido = c.vencimento < hojeISO && c.status !== 'Pago';
addEvent(day, {
type: 'pagar',
color: vencido ? 'var(--tm-danger)' : c.status === 'Pago' ? 'var(--tm-success)' : 'var(--tm-warning)',
text: `Pagar: ${c.referencia || c.fornecedor}`,
valor: `R$ ${brl(parseFloat(c.valor) || 0)}`,
vencido,
});
});
(pedRes.data || []).forEach(p => {
if (!p.created_at) return;
const day = new Date(p.created_at).getDate();
addEvent(day, {
type: 'pedido',
color: 'var(--tm-brand-champagne)',
text: `Pedido ${p.numero}: ${p.cliente_nome}`,
valor: p.status,
});
});
setEvents(byDay);
});
}, []);
if (!events) return
;
const mesLabel = new Date(ano, mes).toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' });
const diasSemana = ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'];
const cells = [];
for (let i = 0; i < primeiroDia; i++) cells.push(null);
for (let d = 1; d <= diasNoMes; d++) cells.push(d);
const dayEvents = selectedDay ? (events[selectedDay] || []) : null;
return (
{mesLabel}
{diasSemana.map(d => (
{d}
))}
{cells.map((day, i) => {
if (day === null) return
;
const dayEvts = events[day] || [];
const isToday = day === hojeNum;
const isSelected = day === selectedDay;
const hasVencido = dayEvts.some(e => e.vencido);
return (
setSelectedDay(day === selectedDay ? null : day)}
style={{
position: 'relative', padding: '5px 2px', borderRadius: 4, cursor: 'pointer',
fontSize: 11.5, fontWeight: isToday ? 700 : 400,
color: isToday ? 'var(--tm-brand-champagne)' : isSelected ? 'var(--tm-fg-1)' : 'var(--tm-fg-2)',
background: isSelected ? 'rgba(201,163,107,0.15)' : isToday ? 'rgba(201,163,107,0.08)' : 'transparent',
transition: 'background 0.12s',
}}
>
{day}
{dayEvts.length > 0 && (
{dayEvts.slice(0, 3).map((e, j) => (
))}
)}
);
})}
{dayEvents && dayEvents.length > 0 && (
{selectedDay} de {new Date(ano, mes).toLocaleDateString('pt-BR', { month: 'long' })}
{dayEvents.map((e, i) => (
))}
)}
Receber
Pagar
Vencido
);
}
// ─── AI Insights (heuristic, no LLM) ────────────────────────────────────────
function AIInsights({ start, end }) {
const [insights, setInsights] = React.useState(null);
const [currentIdx, setCurrentIdx] = React.useState(0);
React.useEffect(() => {
if (!window.tmSupabase) return;
const s0 = start.toISOString();
const s1 = new Date(end.getTime() + 86400000).toISOString();
const ha30dias = new Date(Date.now() - 30 * 86400000).toISOString();
Promise.all([
window.tmSupabase.from('pedidos').select('total, cliente_nome, created_at, status')
.eq('status', 'Atendido'),
window.tmSupabase.from('pedido_itens').select('produto_id, quantidade, preco_lista, descricao, created_at'),
window.tmSupabase.from('produtos').select('id, nome, estoque, linha'),
window.tmSupabase.from('distribuidores').select('nome, uf, total_faturado'),
]).then(([pedRes, itensRes, prodRes, distRes]) => {
const peds = pedRes.data || [];
const itens = itensRes.data || [];
const prods = prodRes.data || [];
const dists = distRes.data || [];
const result = [];
// Insight: linha com crescimento
const startDate = new Date(start);
const endDate = new Date(end);
const diff = endDate - startDate;
const prevStart = new Date(startDate.getTime() - diff);
const prevEnd = new Date(startDate.getTime() - 1);
const prodMap = {};
prods.forEach(p => { prodMap[p.id] = p; });
const linhaAtual = {};
const linhaPrev = {};
itens.forEach(it => {
const prod = prodMap[it.produto_id];
if (!prod) return;
const linha = prod.linha || 'Sem linha';
const dt = new Date(it.created_at);
const val = (parseFloat(it.quantidade) || 0) * (parseFloat(it.preco_lista) || 0);
if (dt >= startDate && dt <= endDate) {
linhaAtual[linha] = (linhaAtual[linha] || 0) + val;
} else if (dt >= prevStart && dt <= prevEnd) {
linhaPrev[linha] = (linhaPrev[linha] || 0) + val;
}
});
Object.entries(linhaAtual).forEach(([linha, val]) => {
const prev = linhaPrev[linha] || 0;
if (prev > 0) {
const growth = ((val - prev) / prev * 100);
if (growth > 15) {
result.push({ icon: 'trending-up', color: 'var(--tm-success)', text: `A linha ${linha} cresceu ${growth.toFixed(0)}% neste período` });
} else if (growth < -15) {
result.push({ icon: 'trending-down', color: 'var(--tm-danger)', text: `A linha ${linha} caiu ${Math.abs(growth).toFixed(0)}% vs período anterior` });
}
}
});
// Insight: estoque acabando
const vendaDiaria = {};
itens.forEach(it => {
if (!it.produto_id) return;
const dt = new Date(it.created_at);
if (dt >= new Date(ha30dias)) {
vendaDiaria[it.produto_id] = (vendaDiaria[it.produto_id] || 0) + (parseFloat(it.quantidade) || 0);
}
});
prods.forEach(p => {
const est = parseFloat(p.estoque) || 0;
const vd = (vendaDiaria[p.id] || 0) / 30;
if (est > 0 && vd > 0) {
const dias = Math.floor(est / vd);
if (dias <= 14 && dias > 0) {
result.push({ icon: 'alert-triangle', color: 'var(--tm-warning)', text: `Estoque de "${p.nome}" acaba em ${dias} dias no ritmo atual` });
}
}
});
// Insight: distribuidores inativos
const lastPedByClient = {};
peds.forEach(p => {
const d = new Date(p.created_at);
if (!lastPedByClient[p.cliente_nome] || d > lastPedByClient[p.cliente_nome]) {
lastPedByClient[p.cliente_nome] = d;
}
});
let inativos = 0;
dists.forEach(d => {
const last = lastPedByClient[d.nome];
if (last) {
const dias = Math.floor((Date.now() - last.getTime()) / 86400000);
if (dias > 45) inativos++;
}
});
if (inativos > 0) {
result.push({ icon: 'users', color: 'var(--tm-info, #5B9BD5)', text: `${inativos} distribuidor${inativos !== 1 ? 'es' : ''} está${inativos !== 1 ? 'ão' : ''} há mais de 45 dias sem comprar` });
}
// Insight: faturamento do período
const fatAtual = peds.filter(p => new Date(p.created_at) >= startDate && new Date(p.created_at) <= endDate)
.reduce((a, p) => a + (parseFloat(p.total) || 0), 0);
const fatPrev = peds.filter(p => new Date(p.created_at) >= prevStart && new Date(p.created_at) <= prevEnd)
.reduce((a, p) => a + (parseFloat(p.total) || 0), 0);
if (fatPrev > 0) {
const growth = ((fatAtual - fatPrev) / fatPrev * 100);
if (Math.abs(growth) > 5) {
result.push({
icon: growth > 0 ? 'arrow-up-right' : 'arrow-down-right',
color: growth > 0 ? 'var(--tm-success)' : 'var(--tm-danger)',
text: `Faturamento ${growth > 0 ? 'cresceu' : 'caiu'} ${Math.abs(growth).toFixed(0)}% vs período anterior`,
});
}
}
// Fallback insight
if (result.length === 0) {
result.push({ icon: 'sparkles', color: 'var(--tm-brand-champagne)', text: 'Tudo operando normalmente — sem anomalias detectadas neste período' });
}
setInsights(result);
});
}, [start.getTime(), end.getTime()]);
// Auto-rotate
React.useEffect(() => {
if (!insights || insights.length <= 1) return;
const timer = setInterval(() => {
setCurrentIdx(i => (i + 1) % insights.length);
}, 6000);
return () => clearInterval(timer);
}, [insights]);
if (!insights) return null;
const current = insights[currentIdx] || insights[0];
if (!current) return null;
return (
Insight da IA
{current.text}
{insights.length > 1 && (
{currentIdx + 1}/{insights.length}
)}
);
}
Object.assign(window, { SmartAlerts, VendasPorLinha, TopDistribuidores, TopSkus, ActivityFeed, FluxoFinanceiro, RankingComercial, MapaVendas, EstoqueInteligente, RecompraDash, MetasWidget, MiniCalendario, AIInsights });