// finance-commissions.jsx — Gestão de Comissionamento
// Página completa: dashboard, lista de comissões, regras, pagamentos.
// Segue o mesmo design system: cards, tabs, drawers, sliding-pill filter,
// row cards com borda lateral, badges, dark/light mode.
(function() {
const { Ic, Drawer, Modal, Avatar, Page, ActionButton } = window;
// ---------- Helpers ----------
const fmtBRL = (v) => 'R$ ' + (Number(v) || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const fmtBRLcompact = (v) => {
const n = Number(v) || 0;
if (n >= 1_000_000) return 'R$ ' + (n / 1_000_000).toFixed(1).replace('.', ',') + ' Mi';
if (n >= 10_000) return 'R$ ' + (n / 1_000).toFixed(1).replace('.', ',') + ' mil';
return fmtBRL(n);
};
const fmtPct = (v) => (Number(v) || 0).toLocaleString('pt-BR', { minimumFractionDigits: 1, maximumFractionDigits: 2 }) + '%';
const today = new Date();
const todayISO = today.toISOString().slice(0, 10);
// ---------- Mock data ----------
const TEAMS = ['Equipe Alpha', 'Equipe Beta', 'Equipe Gamma'];
const SELLERS = [
{ id: 's1', name: 'Karla Zambelly', team: 'Equipe Alpha' },
{ id: 's2', name: 'Paulo Henrique', team: 'Equipe Alpha' },
{ id: 's3', name: 'Francisco Junior', team: 'Equipe Beta' },
{ id: 's4', name: 'Mariana Costa', team: 'Equipe Beta' },
{ id: 's5', name: 'Rafael Oliveira', team: 'Equipe Gamma' },
{ id: 's6', name: 'Beatriz Lima', team: 'Equipe Gamma' },
];
const TYPE_LABELS = {
percentual: { label: 'Percentual', icon: 'reports', accent: '#10b981' },
fixa: { label: 'Valor Fixo', icon: 'dollar', accent: '#0ea5e9' },
meta: { label: 'Por Meta', icon: 'star', accent: '#f59e0b' },
progressiva: { label: 'Progressiva', icon: 'reports', accent: '#f97316' },
equipe: { label: 'Por Equipe', icon: 'users', accent: '#6366f1' },
individual: { label: 'Individual', icon: 'user', accent: '#8b5cf6' },
produto: { label: 'Por Produto', icon: 'package', accent: '#06b6d4' },
campanha: { label: 'Por Campanha', icon: 'megaphone', accent: '#ec4899' },
recorrencia: { label: 'Recorrência', icon: 'repeat', accent: '#14b8a6' },
indicacao: { label: 'Indicação', icon: 'user', accent: '#a855f7' },
};
const STATUS_LABELS = {
pendente: { label: 'Pendente', bg: '#3b82f6', soft: '#dbeafe', text: '#1d4ed8', icon: 'clock' },
aprovada: { label: 'Aprovada', bg: '#10b981', soft: '#d1fae5', text: '#047857', icon: 'check' },
paga: { label: 'Paga', bg: '#14b8a6', soft: '#ccfbf1', text: '#0f766e', icon: 'check-double' },
bloqueada: { label: 'Bloqueada', bg: '#f59e0b', soft: '#fef3c7', text: '#b45309', icon: 'shield' },
cancelada: { label: 'Cancelada', bg: '#ef4444', soft: '#fee2e2', text: '#b91c1c', icon: 'x' },
};
const MOCK_RULES = [
{ id: 'r1', name: 'Comissão padrão de venda', type: 'percentual', percent: 8, fixed: 0, team: 'Equipe Alpha', sellers: ['s1','s2'], status: 'ativa', priority: 1, start: '2026-01-01', end: '2026-12-31', desc: '8% sobre o valor da venda concretizada.' },
{ id: 'r2', name: 'Meta trimestral premium', type: 'meta', percent: 0, fixed: 1500, team: 'Equipe Beta', sellers: ['s3','s4'], status: 'ativa', priority: 2, start: '2026-04-01', end: '2026-06-30', desc: 'R$ 1.500 ao bater R$ 50.000 em vendas no trimestre.' },
{ id: 'r3', name: 'Progressiva — vendas', type: 'progressiva', percent: 0, fixed: 0, team: 'Equipe Gamma', sellers: ['s5','s6'], status: 'ativa', priority: 3, start: '2026-01-01', end: '2026-12-31', desc: 'Até 20k = 5% · 20–50k = 8% · acima = 12%.', tiers: [{ from: 0, to: 20000, pct: 5 }, { from: 20000, to: 50000, pct: 8 }, { from: 50000, to: null, pct: 12 }] },
{ id: 'r4', name: 'Campanha Black Friday', type: 'campanha', percent: 12, fixed: 0, team: '', sellers: [], status: 'pausada', priority: 4, start: '2026-11-20', end: '2026-11-30', desc: 'Campanha sazonal · todos os vendedores · 12%.' },
{ id: 'r5', name: 'Indicação cliente novo', type: 'indicacao', percent: 0, fixed: 250, team: '', sellers: [], status: 'ativa', priority: 5, start: '2026-01-01', end: '2026-12-31', desc: 'R$ 250 por cliente novo trazido via indicação.' },
{ id: 'r6', name: 'Comissão produto premium', type: 'produto', percent: 15, fixed: 0, team: 'Equipe Alpha', sellers: [], status: 'ativa', priority: 6, start: '2026-03-01', end: '2026-12-31', desc: '15% sobre venda da linha Premium.' },
];
// generate commissions
const MOCK_COMMISSIONS = (() => {
const base = [
{ seller: 's1', saleValue: 12450.00, sale: 'Venda #35088451', ruleId: 'r1', date: '15/04/2026', status: 'paga' },
{ seller: 's1', saleValue: 8900.00, sale: 'Venda #35088460', ruleId: 'r1', date: '18/04/2026', status: 'aprovada' },
{ seller: 's2', saleValue: 15200.00, sale: 'Venda #35088471', ruleId: 'r1', date: '20/04/2026', status: 'pendente' },
{ seller: 's2', saleValue: 6750.00, sale: 'Venda #35088482', ruleId: 'r6', date: '22/04/2026', status: 'aprovada' },
{ seller: 's3', saleValue: 58000.00, sale: 'Meta Q2 atingida', ruleId: 'r2', date: '12/04/2026', status: 'paga' },
{ seller: 's3', saleValue: 11400.00, sale: 'Venda #35088488', ruleId: 'r1', date: '23/04/2026', status: 'pendente' },
{ seller: 's4', saleValue: 22500.00, sale: 'Venda #35088495', ruleId: 'r3', date: '24/04/2026', status: 'aprovada' },
{ seller: 's4', saleValue: 3200.00, sale: 'Venda #35088501', ruleId: 'r5', date: '25/04/2026', status: 'bloqueada' },
{ seller: 's5', saleValue: 19800.00, sale: 'Venda #35088510', ruleId: 'r3', date: '18/04/2026', status: 'paga' },
{ seller: 's5', saleValue: 41200.00, sale: 'Venda #35088514', ruleId: 'r3', date: '22/04/2026', status: 'aprovada' },
{ seller: 's6', saleValue: 7600.00, sale: 'Indicação — Lucas Mendes', ruleId: 'r5', date: '14/04/2026', status: 'paga' },
{ seller: 's6', saleValue: 13800.00, sale: 'Venda #35088522', ruleId: 'r1', date: '24/04/2026', status: 'pendente' },
{ seller: 's2', saleValue: 4200.00, sale: 'Venda #35088528', ruleId: 'r6', date: '26/04/2026', status: 'cancelada' },
{ seller: 's4', saleValue: 9100.00, sale: 'Venda #35088534', ruleId: 'r1', date: '27/04/2026', status: 'pendente' },
];
return base.map((b, i) => {
const rule = MOCK_RULES.find(r => r.id === b.ruleId);
let commission = 0;
let pct = 0;
if (rule) {
if (rule.type === 'percentual' || rule.type === 'campanha' || rule.type === 'produto') {
pct = rule.percent;
commission = b.saleValue * (rule.percent / 100);
} else if (rule.type === 'meta' || rule.type === 'indicacao') {
commission = rule.fixed;
} else if (rule.type === 'progressiva' && rule.tiers) {
const tier = rule.tiers.find(t => b.saleValue >= t.from && (t.to == null || b.saleValue < t.to)) || rule.tiers[0];
pct = tier.pct;
commission = b.saleValue * (tier.pct / 100);
}
}
return {
id: 'c' + (i + 1).toString().padStart(3, '0'),
...b,
rule,
pct,
commission,
};
});
})();
// ---------- Period filter (sliding pill) ----------
const PERIOD_OPTIONS = [
{ id: 'todos', label: 'TODOS', icon: 'check-double' },
{ id: 'mes', label: 'MÊS', icon: 'calendar' },
{ id: '7d', label: '07', sub: 'DIAS' },
{ id: '15d', label: '15', sub: 'DIAS' },
{ id: '30d', label: '30', sub: 'DIAS' },
{ id: 'periodo', label: 'DATA', icon: 'calendar' },
];
function PeriodFilter({ value, onChange, fromDate, toDate, setFromDate, setToDate }) {
const rowRef = React.useRef(null);
const btnRefs = React.useRef({});
const [pill, setPill] = React.useState({ x: 0, w: 0, ready: false });
const updatePill = React.useCallback(() => {
const row = rowRef.current; const btn = btnRefs.current[value];
if (!row || !btn) { setPill(p => ({ ...p, ready: false })); return; }
const rRect = row.getBoundingClientRect();
const bRect = btn.getBoundingClientRect();
setPill({ x: bRect.left - rRect.left, w: bRect.width, ready: true });
}, [value]);
React.useLayoutEffect(() => { updatePill(); }, [updatePill]);
React.useEffect(() => {
const onR = () => updatePill();
window.addEventListener('resize', onR);
return () => window.removeEventListener('resize', onR);
}, [updatePill]);
return (
{ btnRefs.current[opt.id] = el; }} type="button"
className={'com-period-btn' + (value === opt.id ? ' on' : '')}
onClick={() => onChange(opt.id)} title={opt.label}>
{opt.icon && {opt.label}
{opt.sub && {opt.sub} }
))}
{ setFromDate(f); setToDate(t); onChange('periodo'); }} placeholder="Período" className="com-period-range" />
);
}
// ---------- KPI Card ----------
function ComKpi({ label, value, sub, tone = 'neutral', icon, trend }) {
return (
{label}
{value}
{sub &&
{sub}
}
{trend != null && (
= 0 ? 'is-pos' : 'is-neg')}>
= 0 ? 'arrow-up-right' : 'arrow-down-to-line'} size={11} />
{(trend >= 0 ? '+' : '') + fmtPct(trend)}
)}
);
}
// Skeleton do KPI — mesma estrutura/medidas do ComKpi real (ícone + label + valor viram blocos).
function ComKpiSkeleton({ tone = 'neutral', icon, label }) {
return (
);
}
// ---------- Status / Type pills ----------
function StatusPill({ status }) {
const m = STATUS_LABELS[status] || STATUS_LABELS.pendente;
return (
);
}
function TypePill({ type, compact }) {
const m = TYPE_LABELS[type] || { label: type, icon: 'reports', accent: 'var(--text-muted)' };
return (
);
}
// ---------- Empty / Loading ----------
function EmptyState({ icon = 'reports', title, sub, actionLabel, onAction }) {
return (
{title}
{sub &&
{sub}
}
{actionLabel &&
}
);
}
function SkeletonRow() {
return (
);
}
// ---------- Toast ----------
// Unificado com o Toast padrão global (window.showToast). Mantemos a assinatura
// antiga show(titulo, tone[, descricao]) p/ os componentes que recebem showToast por prop;
// ela apenas delega para o padrão do app.
const TONE_MAP = { success: 'sucesso', error: 'erro', warning: 'aviso', warn: 'aviso', info: 'info' };
function useToast() {
const show = React.useCallback((titulo, tone = 'success', descricao) => {
window.showToast({ tipo: TONE_MAP[tone] || 'neutro', titulo, descricao });
}, []);
return { show, node: null };
}
// ---------- Tabs (sliding pill) ----------
function Tabs({ tabs, value, onChange }) {
const rowRef = React.useRef(null);
const btnRefs = React.useRef({});
const [pill, setPill] = React.useState({ x: 0, w: 0, ready: false });
const updatePill = React.useCallback(() => {
const row = rowRef.current;
const btn = btnRefs.current[value];
if (!row || !btn) { setPill(p => ({ ...p, ready: false })); return; }
const rRect = row.getBoundingClientRect();
const bRect = btn.getBoundingClientRect();
setPill({ x: bRect.left - rRect.left, w: bRect.width, ready: true });
}, [value]);
React.useLayoutEffect(() => { updatePill(); }, [updatePill]);
React.useEffect(() => {
const onR = () => updatePill();
window.addEventListener('resize', onR);
return () => window.removeEventListener('resize', onR);
}, [updatePill]);
return (
{ btnRefs.current[t.id] = el; }}
className={'com-tab' + (value === t.id ? ' on' : '')}
role="tab"
aria-selected={value === t.id}
onClick={() => onChange(t.id)}
>
{t.count} }
))}
);
}
// ---------- Main page ----------
function FinCommissions() {
const { show: showToast, node: toastNode } = useToast();
const [tab, setTab] = React.useState('dashboard'); // dashboard | comissoes | regras | pagamentos
const [tabDir, setTabDir] = React.useState('right'); // animation direction
const TAB_ORDER = ['dashboard', 'comissoes', 'regras', 'pagamentos'];
const setTabAnimated = React.useCallback((next) => {
setTab(prev => {
const a = TAB_ORDER.indexOf(prev), b = TAB_ORDER.indexOf(next);
setTabDir(b > a ? 'right' : 'left');
return next;
});
}, []);
const [commissions, setCommissions] = React.useState(MOCK_COMMISSIONS.slice());
const [rules, setRules] = React.useState(MOCK_RULES.slice());
const [drawerComm, setDrawerComm] = React.useState(null);
const [drawerRule, setDrawerRule] = React.useState(null);
const [drawerSeller, setDrawerSeller] = React.useState(null);
const [confirmGroupPay, setConfirmGroupPay] = React.useState(null); // seller group object
const [confirmGroupAction, setConfirmGroupAction] = React.useState(null); // { group, action: 'pay' | 'cancel' }
const [showPayModal, setShowPayModal] = React.useState(false);
const [confirmRule, setConfirmRule] = React.useState(null); // { rule, action: 'delete' | 'suspend' | 'activate' }
const [confirmComm, setConfirmComm] = React.useState(null); // { commission, action: 'cancel' | 'pay' }
const [loading, setLoading] = React.useState(true);
// Simulate initial load
React.useEffect(() => {
const t = setTimeout(() => setLoading(false), 600);
return () => clearTimeout(t);
}, []);
// KPI computation
const kpis = React.useMemo(() => {
const total = commissions.reduce((s, c) => s + c.commission, 0);
const paga = commissions.filter(c => c.status === 'paga').reduce((s, c) => s + c.commission, 0);
const pendente = commissions.filter(c => c.status === 'pendente' || c.status === 'aprovada').reduce((s, c) => s + c.commission, 0);
const prevista = commissions.filter(c => c.status !== 'cancelada' && c.status !== 'bloqueada').reduce((s, c) => s + c.commission, 0);
const vendedores = new Set(commissions.map(c => c.seller)).size;
const porEquipe = {};
commissions.forEach(c => {
const s = SELLERS.find(s => s.id === c.seller);
if (!s) return;
porEquipe[s.team] = (porEquipe[s.team] || 0) + c.commission;
});
const topEquipe = Object.entries(porEquipe).sort((a, b) => b[1] - a[1])[0];
const media = vendedores > 0 ? total / vendedores : 0;
return { total, paga, pendente, prevista, vendedores, topEquipe, media, porEquipe };
}, [commissions]);
const updateCommission = (id, patch) => {
setCommissions(prev => prev.map(c => c.id === id ? { ...c, ...patch } : c));
};
return (
}
>
{/* Fixed top: tabs */}
c.status === 'aprovada' || c.status === 'pendente').length },
]}
value={tab}
onChange={setTabAnimated}
/>
{/* Scrollable tab body */}
{tab === 'dashboard' && (
)}
{tab === 'comissoes' && (
setDrawerComm(c)}
/>
)}
{tab === 'regras' && (
setDrawerRule({ id: null })}
onOpen={r => setDrawerRule(r)}
onAction={(rule, action) => setConfirmRule({ rule, action })}
/>
)}
{tab === 'pagamentos' && (
setShowPayModal(true)}
updateCommission={updateCommission}
showToast={showToast}
onOpen={g => setDrawerSeller(g)}
onConfirmPay={g => setConfirmGroupPay(g)}
/>
)}
setDrawerSeller(null)}
onOpenCommission={(c) => { setDrawerComm(c); }}
onPayAll={() => {
liveGroup.items.forEach(c => updateCommission(c.id, { status: 'paga', paidAt: todayISO }));
showToast('Comissões pagas', 'success', `${liveGroup.items.length} comissão(ões) de ${liveGroup.seller.name}`);
setDrawerSeller(null);
}}
onCancelMany={(items) => {
if (items.length === 0) return;
setConfirmGroupAction({ group: { ...liveGroup, items }, action: 'cancel' });
}}
onPayMany={(items) => {
if (items.length === 0) return;
setConfirmGroupAction({ group: { ...liveGroup, items }, action: 'pay' });
}}
showToast={showToast}
/>
);
})()}
{drawerComm && (
setDrawerComm(null)}
onUpdate={(patch) => { updateCommission(drawerComm.id, patch); setDrawerComm(c => ({ ...c, ...patch })); }}
onConfirm={(action) => setConfirmComm({ commission: drawerComm, action })}
onEdit={() => { /* edit hook — open same drawer in edit mode (placeholder) */ showToast('Em breve', 'info', 'O modo de edição estará disponível em breve.'); }}
showToast={showToast}
/>
)}
{drawerRule && (
setDrawerRule(null)}
onSave={(r) => {
if (drawerRule.id) {
setRules(prev => prev.map(x => x.id === drawerRule.id ? { ...x, ...r } : x));
showToast('Regra atualizada', 'success', r.name);
} else {
setRules(prev => [{ ...r, id: 'r' + (prev.length + 1), status: 'ativa', priority: prev.length + 1 }, ...prev]);
showToast('Regra criada', 'success', r.name);
}
setDrawerRule(null);
}}
/>
)}
{showPayModal && (
c.status === 'aprovada' || c.status === 'pendente')}
onClose={() => setShowPayModal(false)}
onPay={(ids, info) => {
setCommissions(prev => prev.map(c => ids.includes(c.id) ? { ...c, status: 'paga', paidAt: info.date, payMethod: info.method, payNote: info.note } : c));
setShowPayModal(false);
showToast('Comissões pagas', 'success', `${ids.length} comissão(ões) paga(s) com sucesso.`);
}}
/>
)}
{confirmGroupPay && (
setConfirmGroupPay(null)}
onConfirm={(info) => {
confirmGroupPay.items.forEach(c => updateCommission(c.id, { status: 'paga', paidAt: info.date, payMethod: info.method, payNote: info.note }));
showToast('Comissões pagas', 'success', `${confirmGroupPay.items.length} comissão(ões) de ${confirmGroupPay.seller.name}`);
setConfirmGroupPay(null);
}}
/>
)}
{confirmGroupAction && confirmGroupAction.action === 'pay' && (
setConfirmGroupAction(null)}
onConfirm={(info) => {
confirmGroupAction.group.items.forEach(c => updateCommission(c.id, { status: 'paga', paidAt: info.date, payMethod: info.method, payNote: info.note }));
showToast('Comissões pagas', 'success', `${confirmGroupAction.group.items.length} comissão(ões) paga(s).`);
setConfirmGroupAction(null);
}}
/>
)}
{confirmGroupAction && confirmGroupAction.action === 'cancel' && (
{
confirmGroupAction.group.items.forEach(c => updateCommission(c.id, { status: 'cancelada' }));
showToast('Comissões canceladas', 'success', `${confirmGroupAction.group.items.length} comissão(ões) cancelada(s).`);
setConfirmGroupAction(null);
}}
onClose={() => setConfirmGroupAction(null)}
/>
)}
{confirmRule && (
{
if (confirmRule.action === 'delete') {
setRules(prev => prev.filter(r => r.id !== confirmRule.rule.id));
showToast('Regra excluída', 'success', confirmRule.rule.name);
} else if (confirmRule.action === 'suspend') {
setRules(prev => prev.map(r => r.id === confirmRule.rule.id ? { ...r, status: 'pausada' } : r));
showToast('Regra suspensa', 'warn', confirmRule.rule.name);
} else {
setRules(prev => prev.map(r => r.id === confirmRule.rule.id ? { ...r, status: 'ativa' } : r));
showToast('Regra reativada', 'success', confirmRule.rule.name);
}
setConfirmRule(null);
}}
onClose={() => setConfirmRule(null)}
/>
)}
{confirmComm && (() => {
const cfg = (() => {
switch (confirmComm.action) {
case 'cancel':
return {
tone: 'danger',
title: 'Cancelar comissão?',
message: 'Esta comissão será marcada como cancelada. A ação pode ser revertida manualmente.',
confirmLabel: 'Sim, cancelar',
apply: () => ({ status: 'cancelada' }),
toast: 'Comissão cancelada',
};
case 'pay':
return {
tone: 'success',
title: 'Pagar comissão?',
message: `Marcar a comissão de ${fmtBRL(confirmComm.commission.commission)} como paga?`,
confirmLabel: 'Pagar agora',
apply: () => ({ status: 'paga', paidAt: todayISO }),
toast: 'Comissão paga',
};
case 'approve':
return {
tone: 'success',
title: 'Aprovar comissão?',
message: `A comissão de ${fmtBRL(confirmComm.commission.commission)} ficará liberada para pagamento.`,
confirmLabel: 'Sim, aprovar',
apply: () => ({ status: 'aprovada' }),
toast: 'Comissão aprovada',
};
case 'block':
return {
tone: 'warn',
title: 'Bloquear comissão?',
message: 'A comissão ficará bloqueada para revisão e não poderá ser paga até ser liberada.',
confirmLabel: 'Sim, bloquear',
apply: () => ({ status: 'bloqueada' }),
toast: 'Comissão bloqueada',
};
case 'release':
return {
tone: 'success',
title: 'Liberar comissão?',
message: 'A comissão voltará para o status pendente e poderá ser analisada novamente.',
confirmLabel: 'Liberar',
apply: () => ({ status: 'pendente' }),
toast: 'Comissão liberada',
};
default:
return null;
}
})();
if (!cfg) return null;
return (
{
const patch = cfg.apply();
updateCommission(confirmComm.commission.id, patch);
setDrawerComm(c => c ? { ...c, ...patch } : c);
// cancel/block usam tom de aviso; demais ações são sucesso.
showToast(cfg.toast, (confirmComm.action === 'cancel' || confirmComm.action === 'block') ? 'warn' : 'success');
setConfirmComm(null);
}}
onClose={() => setConfirmComm(null)}
/>
);
})()}
{toastNode}
);
}
// ---------- Charts (lightweight, system-styled) ----------
function BarsByTeam({ data, total }) {
const entries = Object.entries(data || {}).sort((a, b) => b[1] - a[1]);
if (entries.length === 0) return Sem dados
;
const max = Math.max(...entries.map(([, v]) => v));
return (
{entries.map(([k, v]) => (
{k}
0 ? (v / max) * 100 : 0) + '%' }} />
{fmtBRLcompact(v)}
))}
Sem dados
;
return (
{parts.map((p, i) => (
{parts.map((p, i) => (
{p.label}
{fmtBRLcompact(p.value)}
))}
);
}
function TopSellers({ commissions }) {
const map = {};
commissions.forEach(c => { map[c.seller] = (map[c.seller] || 0) + c.commission; });
const top = Object.entries(map).map(([id, v]) => ({ seller: SELLERS.find(s => s.id === id), value: v }))
.filter(x => x.seller).sort((a, b) => b.value - a.value).slice(0, 4);
const max = Math.max(...top.map(t => t.value), 1);
return (
{top.map((t, i) => (
#{i + 1}
{t.seller.name}
{t.seller.team}
{fmtBRLcompact(t.value)}
))}
{/* Dashboard filter */}
Período
setTeam(e.target.value)}>
Todas equipes
{TEAMS.map(t => {t} )}
{/* KPI strip — 6 main metrics */}
{loading ? (
[
{ tone: 'brand', icon: 'reports', label: 'TOTAL DE COMISSÕES' },
{ tone: 'paga', icon: 'check-double', label: 'PAGAS' },
{ tone: 'pendente', icon: 'clock', label: 'A PAGAR' },
{ tone: 'prev', icon: 'star', label: 'PREVISTA NO MÊS' },
{ tone: 'team', icon: 'users', label: 'VENDEDORES' },
{ tone: 'avg', icon: 'user', label: 'MÉDIA POR VENDEDOR' },
].map((k, i) => c.status==='paga').length} comissões`} />
c.status==='pendente'||c.status==='aprovada').length} pendentes`} />
{/* Secondary KPI strip — extras */}
{loading ? (
[
{ tone: 'brand', icon: 'reports', label: 'TICKET MÉDIO' },
{ tone: 'paga', icon: 'check-double', label: 'TAXA PAGAMENTO' },
{ tone: 'pendente', icon: 'shield', label: 'BLOQUEADAS' },
{ tone: 'prev', icon: 'reports', label: 'PREVISTA PRÓX. MÊS' },
{ tone: 'team', icon: 'flag', label: 'REGRAS ATIVAS' },
{ tone: 'avg', icon: 'star', label: 'META DO MÊS' },
].map((k, i) => c.status==='paga').length} / ${commissions.length}`} />
c.status==='bloqueada').length} comissões`} />
{/* Meta progress bar */}
Progresso da meta · Abril 2026
{fmtBRL(kpis.paga)} de {fmtBRL(metaMes)}
{metaPct.toFixed(1)}%
{/* Charts row */}
abril/26
pago × pendente
por comissão
<>
close()}>Voltar
close(onConfirm)}>
}
>
);
}
// ---------- Tab: Comissões (list) ----------
function CommissionsTab({ loading, commissions, onOpen }) {
const [period, setPeriod] = React.useState('mes');
const [from, setFrom] = React.useState(todayISO);
const [to, setTo] = React.useState(todayISO);
const [query, setQuery] = React.useState('');
const [statusFilter, setStatusFilter] = React.useState('todos');
const [teamFilter, setTeamFilter] = React.useState('todos');
const [sort, setSort] = React.useState({ col: 'date', dir: 'desc' });
const [page, setPage] = React.useState(1);
const PAGE_SIZE = 10;
const [selected, setSelected] = React.useState(new Set());
const filtered = React.useMemo(() => {
const q = query.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
return commissions.filter(c => {
const seller = SELLERS.find(s => s.id === c.seller);
if (statusFilter !== 'todos' && c.status !== statusFilter) return false;
if (teamFilter !== 'todos' && (!seller || seller.team !== teamFilter)) return false;
if (q) {
const hay = ((seller && seller.name) + ' ' + c.sale + ' ' + c.id + ' ' + (c.rule && c.rule.name || '')).toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
if (!hay.includes(q)) return false;
}
return true;
}).sort((a, b) => {
const dir = sort.dir === 'asc' ? 1 : -1;
if (sort.col === 'commission') return (a.commission - b.commission) * dir;
if (sort.col === 'saleValue') return (a.saleValue - b.saleValue) * dir;
if (sort.col === 'seller') {
const sa = (SELLERS.find(s => s.id === a.seller) || {}).name || '';
const sb = (SELLERS.find(s => s.id === b.seller) || {}).name || '';
return sa.localeCompare(sb) * dir;
}
if (sort.col === 'date') {
const da = a.date.split('/').reverse().join('-');
const db = b.date.split('/').reverse().join('-');
return da.localeCompare(db) * dir;
}
return 0;
});
}, [commissions, query, statusFilter, teamFilter, sort]);
const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
const slice = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
React.useEffect(() => { setPage(1); }, [query, statusFilter, teamFilter]);
const toggleSel = (id) => {
setSelected(prev => {
const n = new Set(prev);
if (n.has(id)) n.delete(id); else n.add(id);
return n;
});
};
const toggleAll = () => {
setSelected(prev => {
if (slice.every(c => prev.has(c.id))) {
const n = new Set(prev);
slice.forEach(c => n.delete(c.id));
return n;
}
const n = new Set(prev);
slice.forEach(c => n.add(c.id));
return n;
});
};
const setSortCol = (col) => setSort(s => s.col === col ? { col, dir: s.dir === 'asc' ? 'desc' : 'asc' } : { col, dir: 'desc' });
return (
<>
{/* Toolbar */}
Status:
{[
{ id: 'todos', label: 'Todos', dot: null },
{ id: 'pendente', label: 'Pendente', dot: '#3b82f6' },
{ id: 'aprovada', label: 'Aprovada', dot: '#10b981' },
{ id: 'paga', label: 'Paga', dot: '#14b8a6' },
{ id: 'bloqueada', label: 'Bloqueada', dot: '#f59e0b' },
{ id: 'cancelada', label: 'Cancelada', dot: '#ef4444' },
].map(s => (
setStatusFilter(s.id)}>
{s.dot &&
))}
{selected.size > 0 && (
{selected.size} selecionadas setSelected(new Set())}>
)}
{/* Table */}
setSortCol('seller')}>Vendedor / Equipe
Tipo
setSortCol('saleValue')}>Venda / Valor
% Aplicado
setSortCol('commission')}>Comissão
Status
setSortCol('date')}>Data
Ações
{loading ? (
{Array.from({ length: 6 }).map((_, i) =>
) : slice.length === 0 ? (
) : (
{slice.map(c => {
const seller = SELLERS.find(s => s.id === c.seller);
const tipoAccent = (TYPE_LABELS[c.rule && c.rule.type] || {}).accent || '#10b981';
return (
onOpen(c)}>
e.stopPropagation()}>
{seller ? seller.name : '—'}
{seller ? seller.team : '—'}
{c.sale}
{fmtBRL(c.saleValue)}
{c.pct > 0 ? c.pct.toFixed(1) + '%' : '—'}
{fmtBRL(c.commission)}
{c.date}
e.stopPropagation()}>
onOpen(c)}>
);
})}
)}
{/* Pagination */}
{!loading && slice.length > 0 && (
Mostrando {(page - 1) * PAGE_SIZE + 1} –{Math.min(page * PAGE_SIZE, filtered.length)} de {filtered.length}
setPage(p => Math.max(1, p - 1))}>
{page} / {totalPages}
setPage(p => Math.min(totalPages, p + 1))}>Próxima
)}
);
}
function SortHead({ col, sort, onClick, children }) {
const active = sort.col === col;
return (
{children}
);
}
// ---------- Tab: Regras ----------
function RulesTab({ loading, rules, onCreate, onOpen, onAction }) {
const [query, setQuery] = React.useState('');
const [type, setType] = React.useState('todos');
const filtered = rules.filter(r => {
if (type !== 'todos' && r.type !== type) return false;
if (query) {
const q = query.toLowerCase();
if (!(r.name.toLowerCase().includes(q) || r.desc.toLowerCase().includes(q))) return false;
}
return true;
});
return (
<>
{loading ? (
{Array.from({ length: 6 }).map((_, i) =>
)}
{filtered.map(r => {
const t = TYPE_LABELS[r.type] || {};
return (
onOpen(r)}>
{r.name}
{r.desc}
onOpen(r)}>
{r.status === 'ativa' ? (
onAction(r, 'suspend')}>
) : (
onAction(r, 'activate')}>
)}
onAction(r, 'delete')}>
);
})}
Total a pagar
{fmtBRL(total)}
{pendentes.length} comissão(ões) · {groups.length} vendedor(es)
{loading ? (
{Array.from({ length: skelCount('com-pay-groups', 3) }).map((_, i) =>
)}
{groups.map(g => (
onOpen && onOpen(g)}
>
{g.seller.name}
{g.seller.team} · {g.items.length} comissão(ões)
{fmtBRL(g.total)}
{g.items.length} {g.items.length === 1 ? 'Venda' : 'Vendas'}
1 Vendedor
1 Equipe
{g.items.filter(c => c.status === 'pendente').length} Pendentes
{g.items.filter(c => c.status === 'aprovada').length} Aprovadas
))}
onConfirm('cancel')} />
onConfirm('block')} />
onConfirm('approve')} />
)}
{commission.status === 'aprovada' && (
<>
onConfirm('cancel')} />
onConfirm('block')} />
onConfirm('pay')} />
)}
{commission.status === 'bloqueada' && (
<>
onConfirm('release')} />
)}
{(commission.status === 'paga' || commission.status === 'cancelada') && (
<>
{/* Big value */}
Valor da comissão
{fmtBRL(commission.commission)}
{seller ? seller.name : '—'}
{seller ? seller.team : '—'}
{/* Cálculo */}
{calc.map((l, i) => (
{l.label}
{l.value}
))}
{/* Regra */}
{rule && (
{rule.name}
{rule.desc}
)}
{/* Timeline */}
{timeline.map((it, i) => (
))}
{/* Observações */}