// ============================================================
// Super Admin — Dashboard de Créditos (visão interna Octale)
// MOSTRA custo Jusbrasil, margem e markup — esta é a visão do
// dono da plataforma, não do cliente. 1 crédito = R$1.
// ============================================================
// ─── Helpers de formatação (pt-BR) ────────────────────────────
const scMoney = (v) =>
'R$ ' + (Number(v) || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const scCred = (v) =>
(Number(v) || 0).toLocaleString('pt-BR', { minimumFractionDigits: 0, maximumFractionDigits: 2 }) + ' créditos';
const scNum = (v) => (Number(v) || 0).toLocaleString('pt-BR');
const scPct = (v) => (Number(v) || 0).toLocaleString('pt-BR', { minimumFractionDigits: 0, maximumFractionDigits: 1 }) + '%';
const scDate = (d) => { try { return d ? new Date(d).toLocaleDateString('pt-BR') : '—'; } catch (e) { return '—'; } };
const scDateTime = (d) => { try { return d ? new Date(d).toLocaleString('pt-BR') : '—'; } catch (e) { return '—'; } };
const SC_SERVICE_LABELS = {
download_autos: 'Download de autos',
busca_ativa_oab: 'Busca ativa por OAB',
consulta_cnj_tribunal: 'Consulta CNJ (Tribunal)',
consulta_cnj_jus: 'Consulta CNJ (Jus)',
monitoramento_diarios: 'Monitoramento de diários',
distribuicao_processos: 'Distribuição de novos processos',
};
const scServiceLabel = (s) => SC_SERVICE_LABELS[s] || s || '—';
const SC_TX_TYPE = { purchase: 'Recarga', debit: 'Débito', refund: 'Estorno', bonus: 'Bônus', expiration: 'Expiração' };
const SC_TX_STATUS = { completed: 'Concluído', cancelled: 'Estornado', pending: 'Pendente' };
const scTxType = (t) => SC_TX_TYPE[t] || t || '—';
const scTxStatus = (s) => SC_TX_STATUS[s] || s || '—';
const SC_PLAN_LABELS = {
essencial: 'Essencial', starter: 'Starter', pro: 'Pro', business: 'Business',
trial: 'Trial', enterprise: 'Enterprise',
};
const scPlanLabel = (p) => SC_PLAN_LABELS[p] || p || '—';
const SC_STATUS_COLORS = {
trial: '#D49A1A', active: '#1F9D55', suspended: '#C2253E', cancelled: '#888',
};
const SC_STATUS_LABELS = {
trial: 'Trial', active: 'Ativa', suspended: 'Suspensa', cancelled: 'Cancelada',
};
// markup interno = (preço − custo) / custo * 100
const scMarkup = (credits, cost) => {
const c = Number(cost) || 0;
const p = Number(credits) || 0;
if (c <= 0) return '—';
return Math.round(((p - c) / c) * 100) + '%';
};
// ─── Componentes visuais reutilizáveis ─────────────────────────
const ScCard = ({ children, style }) => (
{children}
);
const ScKpi = ({ label, value, sub, accent, tag }) => (
{label}
{tag && (
{tag}
)}
{value}
{sub &&
{sub}
}
);
const ScSpinner = ({ label = 'Carregando…' }) => (
);
const ScEmpty = ({ children = 'Sem dados.' }) => (
{children}
);
const ScSectionTitle = ({ children, style }) => (
{children}
);
const ScBadge = ({ children, bg = '#888', color = '#fff' }) => (
{children}
);
// barra de progresso simples
const ScProgress = ({ pct, color = 'var(--octale-neon)', height = 10 }) => {
const p = Math.max(0, Math.min(100, Number(pct) || 0));
return (
);
};
const scGridStyle = { display: 'grid', gap: 14, gridTemplateColumns: 'repeat(auto-fill, minmax(210px, 1fr))' };
// ════════════════════════════════════════════════════════════
// §6.1 — VISÃO GERAL
// ════════════════════════════════════════════════════════════
const ScVisaoGeral = () => {
const [data, setData] = React.useState(null);
const [loading, setLoading] = React.useState(true);
const [err, setErr] = React.useState('');
React.useEffect(() => {
let alive = true;
setLoading(true);
(async () => {
try {
const d = await window.OctaleApi.creditsAdmin.home();
if (alive) setData(d || {});
} catch (e) {
if (alive) setErr(e.message || 'Erro ao carregar visão geral.');
} finally {
if (alive) setLoading(false);
}
})();
return () => { alive = false; };
}, []);
if (loading) return ;
if (err) return {err};
const d = data || {};
const criticos = Array.isArray(d.criticalTenants) ? d.criticalTenants : [];
const semRecarga = Array.isArray(d.noRechargeTenants) ? d.noRechargeTenants : [];
return (
Saldo crítico (<20)
{criticos.length === 0 ? Nenhum tenant em saldo crítico. : (
{criticos.map(t => (
{t.name}
{scCred(t.balance)}
))}
{semRecarga.map(t => (
{t.name}
))}
);
};
// ════════════════════════════════════════════════════════════
// §6.2 — POR TENANT
// ════════════════════════════════════════════════════════════
const ScTenantTransactions = ({ tenantId }) => {
const [state, setState] = React.useState({ rows: [], total: 0, page: 1, hasMore: false, loading: true });
const load = React.useCallback((page) => {
setState(s => ({ ...s, loading: true }));
(async () => {
try {
const r = await window.OctaleApi.creditsAdmin.tenantTransactions(tenantId, { page, limit: 20 });
setState({
rows: Array.isArray(r?.data) ? r.data : [],
total: r?.total || 0,
page: r?.page || page,
hasMore: !!r?.hasMore,
loading: false,
});
} catch (e) {
setState({ rows: [], total: 0, page, hasMore: false, loading: false });
}
})();
}, [tenantId]);
React.useEffect(() => { load(1); }, [load]);
if (state.loading && state.rows.length === 0) return ;
if (state.rows.length === 0) return Nenhuma transação registrada.;
return (
{['Data', 'Tipo', 'Serviço', 'Valor', 'Saldo', 'Status'].map(h => (
| {h} |
))}
{state.rows.map((tx, i) => (
| {scDateTime(tx.created_at)} |
{scTxType(tx.type)} |
{tx.service ? scServiceLabel(tx.service) : '—'} |
{(Number(tx.amount) || 0) > 0 ? '+' : ''}{scCred(tx.amount)}
|
{scCred(tx.balance_after)} |
{scTxStatus(tx.status)} |
))}
Página {state.page} · {scNum(state.total)} transaç{state.total === 1 ? 'ão' : 'ões'}
);
};
const ScTenantDetail = ({ tenantId }) => {
const [data, setData] = React.useState(null);
const [loading, setLoading] = React.useState(true);
const [err, setErr] = React.useState('');
React.useEffect(() => {
let alive = true;
setLoading(true); setErr('');
(async () => {
try {
const d = await window.OctaleApi.creditsAdmin.tenant(tenantId);
if (alive) setData(d || {});
} catch (e) {
if (alive) setErr(e.message || 'Erro ao carregar tenant.');
} finally {
if (alive) setLoading(false);
}
})();
return () => { alive = false; };
}, [tenantId]);
if (loading) return ;
if (err) return {err};
const d = data || {};
const org = d.organization || {};
const wallet = d.wallet || {};
const quotas = Array.isArray(d.quotas) ? d.quotas : [];
return (
{org.name || 'Tenant'}
Plano {scPlanLabel(org.plan)}
{org.renews_at && <> · renova {scDate(org.renews_at)}}
{org.renewal && <> · renova {scDate(org.renewal)}}
Saldo
{scCred(wallet.balance)}
Consumo por serviço (quota)
{quotas.length === 0 ? Sem quotas configuradas. : (
{quotas.map((q, i) => {
const limit = Number(q.quota_limit) || 0;
const used = Number(q.consumed) || 0;
const pct = limit > 0 ? (used / limit) * 100 : 0;
const over = limit > 0 && used > limit;
return (
{scServiceLabel(q.service)}
{scNum(used)} / {limit > 0 ? scNum(limit) : '∞'}
);
})}
);
};
const ScPorTenant = () => {
const [tenants, setTenants] = React.useState([]);
const [loading, setLoading] = React.useState(true);
const [err, setErr] = React.useState('');
const [selected, setSelected] = React.useState(null);
const [q, setQ] = React.useState('');
React.useEffect(() => {
let alive = true;
setLoading(true);
(async () => {
try {
const list = await window.OctaleApi.creditsAdmin.tenants();
if (alive) setTenants(Array.isArray(list) ? list : []);
} catch (e) {
if (alive) setErr(e.message || 'Erro ao carregar tenants.');
} finally {
if (alive) setLoading(false);
}
})();
return () => { alive = false; };
}, []);
const filtered = q.trim()
? tenants.filter(t => (t.name || '').toLowerCase().includes(q.trim().toLowerCase()))
: tenants;
return (
setQ(e.target.value)}
placeholder="Buscar tenant…"
style={{ width: '100%', boxSizing: 'border-box', padding: '8px 10px 8px 30px', borderRadius: 8, border: '1px solid var(--border)', fontSize: 13 }}
/>
{loading ? : err ? {err} : filtered.length === 0 ? Nenhum tenant. : (
{filtered.map(t => {
const active = selected === t.id;
return (
);
})}
{selected ? : (
Selecione um tenant à esquerda para ver os detalhes.
)}
);
};
// ════════════════════════════════════════════════════════════
// §6.3 — POR SERVIÇO
// ════════════════════════════════════════════════════════════
const ScPorServico = () => {
const [data, setData] = React.useState(null);
const [loading, setLoading] = React.useState(true);
const [err, setErr] = React.useState('');
const [sort, setSort] = React.useState({ key: null, dir: 1 });
React.useEffect(() => {
let alive = true;
setLoading(true);
(async () => {
try {
const d = await window.OctaleApi.creditsAdmin.byService();
if (alive) setData(d || {});
} catch (e) {
if (alive) setErr(e.message || 'Erro ao carregar serviços.');
} finally {
if (alive) setLoading(false);
}
})();
return () => { alive = false; };
}, []);
if (loading) return ;
if (err) return {err};
const d = data || {};
const services = Array.isArray(d.services) ? d.services.slice() : [];
if (sort.key) {
services.sort((a, b) => {
const va = a[sort.key], vb = b[sort.key];
if (typeof va === 'number' || typeof vb === 'number') return ((Number(va) || 0) - (Number(vb) || 0)) * sort.dir;
return String(va || '').localeCompare(String(vb || '')) * sort.dir;
});
}
const toggleSort = (key) => setSort(s => s.key === key ? { key, dir: -s.dir } : { key, dir: 1 });
const cols = [
{ key: 'service', label: 'Serviço', align: 'left', render: (r) => scServiceLabel(r.service) },
{ key: 'calls', label: 'Chamadas', align: 'right', render: (r) => scNum(r.calls) },
{ key: 'revenue', label: 'Receita (créditos)', align: 'right', render: (r) => scCred(r.revenue) },
{ key: 'cost', label: 'Custo Jusbrasil', align: 'right', render: (r) => scMoney(r.cost) },
{ key: 'margin', label: 'Margem', align: 'right', render: (r) => scMoney(r.margin) },
{ key: 'excess', label: 'Excedente', align: 'right', render: (r) => scNum(r.excess) },
{ key: 'failureRate', label: 'Taxa de falha', align: 'right', render: (r) => scPct(r.failureRate) },
];
const svcByKey = (k) => (d.services || []).find(s => s.service === k) || null;
const callout = (title, item, valFn, color) => (
{title}
{item ? (
<>
{scServiceLabel(item.service)}
{valFn(item)}
) : —
}
);
return (
{callout('Maior volume', svcByKey(d.topByVolume), (i) => scNum(i.calls) + ' chamadas', 'var(--octale-black)')}
{callout('Maior excedente', svcByKey(d.topByExcess), (i) => scNum(i.excess) + ' excedentes', '#D49A1A')}
{callout('Maior taxa de falha', svcByKey(d.topByFailure), (i) => scPct(i.failureRate), '#C2253E')}
{services.length === 0 ? Nenhum serviço com dados. : (
{cols.map(c => (
| toggleSort(c.key)} style={{
textAlign: c.align, fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.05em',
color: 'var(--fg-muted)', padding: '10px 12px', borderBottom: '1px solid var(--border)', whiteSpace: 'nowrap', cursor: 'pointer', userSelect: 'none',
}}>
{c.label}{sort.key === c.key ? (sort.dir === 1 ? ' ▲' : ' ▼') : ''}
|
))}
{services.map((r, i) => (
{cols.map(c => (
| = 10 ? '#C2253E' : 'var(--octale-black)',
}}>{c.render(r)} |
))}
))}
)}
);
};
// ════════════════════════════════════════════════════════════
// §6.4 — FINANCEIRO
// ════════════════════════════════════════════════════════════
const ScFinanceiro = () => {
const [data, setData] = React.useState(null);
const [loading, setLoading] = React.useState(true);
const [err, setErr] = React.useState('');
React.useEffect(() => {
let alive = true;
setLoading(true);
(async () => {
try {
const d = await window.OctaleApi.creditsAdmin.financial();
if (alive) setData(d || {});
} catch (e) {
if (alive) setErr(e.message || 'Erro ao carregar financeiro.');
} finally {
if (alive) setLoading(false);
}
})();
return () => { alive = false; };
}, []);
if (loading) return ;
if (err) return {err};
const d = data || {};
const topPkg = d.topPackage;
const topPkgLabel = topPkg ? (typeof topPkg === 'string' ? topPkg : (topPkg.label || topPkg.id || '—')) : '—';
return (
);
};
// ════════════════════════════════════════════════════════════
// §6.5 — SAÚDE API
// ════════════════════════════════════════════════════════════
const ScSaudeApi = () => {
const [data, setData] = React.useState(null);
const [loading, setLoading] = React.useState(true);
const [err, setErr] = React.useState('');
React.useEffect(() => {
let alive = true;
setLoading(true);
(async () => {
try {
const d = await window.OctaleApi.creditsAdmin.apiHealth();
if (alive) setData(d || {});
} catch (e) {
if (alive) setErr(e.message || 'Erro ao carregar saúde da API.');
} finally {
if (alive) setLoading(false);
}
})();
return () => { alive = false; };
}, []);
if (loading) return ;
if (err) return {err};
const d = data || {};
const nearTier2 = Array.isArray(d.nearTier2) ? d.nearTier2 : [];
const successRate = Number(d.successRate) || 0;
return (
= 95 ? '#1F9D55' : successRate >= 85 ? '#D49A1A' : '#C2253E'} sub={`${scNum(d.total)} chamadas totais`} />
Faturamento mínimo Jusbrasil (R$ 1.000)
{scMoney(d.jusbrasilSpend)} de {scMoney(d.jusbrasilMinimum || 1000)}
= 100 ? '#1F9D55' : 'var(--octale-neon)'} />
{scPct(d.jusbrasilMinimumProgress)} do mínimo atingido
Aproximação da 2ª faixa
{nearTier2.length === 0 ? Nenhum serviço próximo da 2ª faixa. : (
{nearTier2.map((s, i) => {
const vol = Number(s.volume) || 0;
const warn = vol >= 1800;
return (
{warn && }
{scServiceLabel(s.service)}
{scNum(vol)} chamadas
);
})}
);
};
// ════════════════════════════════════════════════════════════
// §6.6 — CONFIG & EXPORTAÇÕES
// ════════════════════════════════════════════════════════════
const ScPriceRow = ({ price, onSaved }) => {
const [credits, setCredits] = React.useState(String(price.credits_per_unit ?? ''));
const [cost, setCost] = React.useState(String(price.jusbrasil_cost ?? ''));
const [active, setActive] = React.useState(!!price.active);
const [saving, setSaving] = React.useState(false);
const [msg, setMsg] = React.useState('');
const dirty =
String(price.credits_per_unit ?? '') !== credits ||
String(price.jusbrasil_cost ?? '') !== cost ||
!!price.active !== active;
const save = async () => {
setSaving(true); setMsg('');
try {
await window.OctaleApi.creditsAdmin.updatePrice(price.service, {
credits_per_unit: Number(credits) || 0,
jusbrasil_cost: Number(cost) || 0,
active,
});
setMsg('ok');
if (onSaved) onSaved(price.service, { credits_per_unit: Number(credits) || 0, jusbrasil_cost: Number(cost) || 0, active });
setTimeout(() => setMsg(''), 2500);
} catch (e) {
setMsg('err');
} finally {
setSaving(false);
}
};
const inputStyle = { width: 90, boxSizing: 'border-box', padding: '5px 8px', borderRadius: 6, border: '1px solid var(--border)', fontSize: 12.5, textAlign: 'right' };
return (
| {price.label || scServiceLabel(price.service)} |
{price.unit_label || '—'} |
setCredits(e.target.value)} style={inputStyle} />
|
setCost(e.target.value)} style={inputStyle} />
|
{scMarkup(credits, cost)}
|
|
{msg === 'ok' && }
{msg === 'err' && erro}
|
);
};
const ScConfig = () => {
const [data, setData] = React.useState(null);
const [loading, setLoading] = React.useState(true);
const [err, setErr] = React.useState('');
React.useEffect(() => {
let alive = true;
setLoading(true);
(async () => {
try {
const d = await window.OctaleApi.creditsAdmin.config();
if (alive) setData(d || {});
} catch (e) {
if (alive) setErr(e.message || 'Erro ao carregar configuração.');
} finally {
if (alive) setLoading(false);
}
})();
return () => { alive = false; };
}, []);
const exportTypes = [
{ type: 'consumption-by-tenant', label: 'Consumo por tenant' },
{ type: 'api-calls', label: 'Log de chamadas API' },
{ type: 'refunds', label: 'Estornos' },
{ type: 'open-balance', label: 'Saldo em aberto' },
];
const doExport = (type, format) => {
try {
const url = window.OctaleApi.creditsAdmin.exportUrl(type, format);
if (url) window.open(url, '_blank');
} catch (e) { /* silencioso */ }
};
if (loading) return ;
if (err) return {err};
const d = data || {};
const prices = Array.isArray(d.prices) ? d.prices : [];
const packages = Array.isArray(d.packages) ? d.packages : [];
const plans = Array.isArray(d.plans) ? d.plans : [];
const th = { textAlign: 'left', fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.05em', color: 'var(--fg-muted)', padding: '10px 12px', borderBottom: '1px solid var(--border)', whiteSpace: 'nowrap' };
return (
Preços por serviço
Markup = (preço − custo) / custo. Visão interna.
{prices.length === 0 ? Nenhum preço configurado. : (
| Serviço |
Unidade |
Créditos/unid. |
Custo Jusbrasil |
Markup |
Ativo |
|
{prices.map((p, i) => )}
)}
Pacotes de crédito
{packages.length === 0 ? Nenhum pacote. : (
{packages.map((pk, i) => (
{pk.label || pk.id}
{scCred(pk.credits)}{pk.bonus ? ` + ${scNum(pk.bonus)} bônus` : ''}
{scMoney(pk.amount_brl)}
))}
Planos
{plans.length === 0 ? Nenhum plano. : (
| Plano |
Preço |
Usuários |
Quotas |
{plans.map((pl, i) => (
| {pl.label || scPlanLabel(pl.plan_id)} |
{scMoney(pl.price_brl)} |
{pl.users_limit != null ? scNum(pl.users_limit) : '∞'} |
{pl.quotas && typeof pl.quotas === 'object'
? Object.entries(pl.quotas).map(([k, v]) => `${scServiceLabel(k)}: ${scNum(v)}`).join(' · ')
: '—'}
|
))}
)}
Exportações
{exportTypes.map(ex => (
{ex.label}
))}
);
};
// ════════════════════════════════════════════════════════════
// RAIZ — SuperAdminCredits (nav de sub-abas)
// ════════════════════════════════════════════════════════════
const SC_SUBTABS = [
{ id: 'overview', label: 'Visão Geral', icon: 'trendingUp' },
{ id: 'tenant', label: 'Por Tenant', icon: 'building' },
{ id: 'service', label: 'Por Serviço', icon: 'coins' },
{ id: 'financial', label: 'Financeiro', icon: 'creditCard' },
{ id: 'health', label: 'Saúde API', icon: 'bell' },
{ id: 'config', label: 'Config & Exportações', icon: 'settings' },
];
const SuperAdminCredits = () => {
const [sub, setSub] = React.useState('overview');
const renderSub = () => {
switch (sub) {
case 'overview': return ;
case 'tenant': return ;
case 'service': return ;
case 'financial': return ;
case 'health': return ;
case 'config': return ;
default: return ;
}
};
return (
{SC_SUBTABS.map(t => {
const active = sub === t.id;
return (
);
})}
{renderSub()}
);
};
window.SuperAdminCredits = SuperAdminCredits;