Configurações do Sistema M13
Integrações API · Dados da Empresa
Centro de configurações da BTM SGL. Conexões com APIs externas (OpenAI, Focus NFe, PNCP, etc.) e dados cadastrais que alimentam todos os módulos.
{totalConfiguradas}/{INTEGRACOES.length} INTEGRAÇÕES PRONTAS
setTab('integracoes')}>
Integrações API {INTEGRACOES.length}
setTab('empresa')}>
Dados da Empresa
{tab === 'integracoes' &&
{ setDrawer(int); setDrawerTab('conexao'); }} />}
{tab === 'empresa' &&
{drawer && (
updateIntegracao(drawer.id, v)}
onClose={() => setDrawer(null)}
tab={drawerTab}
onTab={setDrawerTab}
/>
)}
);
}
// ============ INTEGRAÇÕES GRID ============
function IntegracoesGrid({ config, onOpen }) {
return (
Configurações pré-API
Os campos abaixo serão preenchidos com as credenciais reais quando as conexões forem habilitadas. Hoje, todas as integrações estão em modo simulado (mock). Os dados configurados persistem localmente (localStorage).
{INTEGRACOES.map(int => {
const valores = config.integracoes?.[int.id] || {};
const reqCampos = int.campos.filter(c => c.req);
// Campo obrigatório com valor padrão já conta como preenchido.
const preenchidos = reqCampos.filter(c => valores[c.id] || c.default !== undefined).length;
const status =
preenchidos === 0 ? { label: 'NÃO CONFIGURADO', cls: '', dot: 'var(--fg-3)' } :
preenchidos < reqCampos.length ? { label: 'INCOMPLETO', cls: 'badge-amber', dot: 'var(--amber)' } :
{ label: 'CONFIGURADO', cls: 'badge-lime', dot: 'var(--lime)' };
return (
onOpen(int)} style={{ padding: 16 }}>
{int.logo}
{int.nome}
{int.cat}
{status.label}
{preenchidos}/{reqCampos.length} campos req.
{int.desc}
{int.campos.length} parâmetros · {int.mapeamentos.length} mapeamentos
Configurar →
);
})}
);
}
// ============ INTEGRAÇÃO DRAWER ============
function IntegracaoDrawer({ integracao, valores, onSave, onClose, tab, onTab }) {
const [edited, setEdited] = React.useState({});
const [testing, setTesting] = React.useState(false);
const [testResult, setTestResult] = React.useState(null);
const merged = { ...valores, ...edited };
const reqCampos = integracao.campos.filter(c => c.req);
// Campo obrigatório com valor padrão já conta como preenchido.
const preenchidos = reqCampos.filter(c => merged[c.id] || c.default !== undefined).length;
const completo = preenchidos === reqCampos.length;
const isOpenAI = integracao.id === 'openai';
const handleSave = () => {
onSave(merged);
setEdited({});
};
const handleTest = async () => {
setTesting(true);
setTestResult(null);
try {
const r = await window.testOpenAI();
setTestResult(r);
} catch (e) {
setTestResult({ ok: false, error: (e && e.message) || 'Erro inesperado ao testar.' });
} finally {
setTesting(false);
}
};
return (
Integração · {integracao.cat} M13 {completo ? 'CONFIGURADO' : preenchidos === 0 ? 'NÃO CONFIGURADO' : 'INCOMPLETO'} }
title={
{integracao.logo}
{integracao.nome}
}
subtitle={integracao.desc}
tabs={[
{ id: 'conexao', label: 'Conexão', count: preenchidos + '/' + reqCampos.length },
{ id: 'map', label: 'Mapeamentos', count: integracao.mapeamentos.length },
{ id: 'logs', label: 'Logs' },
]}
activeTab={tab}
onTabChange={onTab}
footer={
<>
{integracao.docsUrl && (
)}
}
>
{tab === 'conexao' &&
{campo.label}
Gerenciada no servidor (Supabase Secrets)
SEGURO
{campo.hint &&
{campo.hint}
}
);
}
function TestResultBanner({ result }) {
if (!result) return null;
if (result.ok) {
return (
Conexão OK
{result.modelos} modelos disponíveis · resposta em {result.latencia}ms.
);
}
return (
Falha na conexão
{result.error}
);
}
function TabConexao({ integracao, merged, setEdited, edited, valores, isOpenAI, testResult, testing }) {
const setCampo = (id, v) => setEdited({ ...edited, [id]: v });
return (
{isOpenAI && testing && (
)}
{isOpenAI && !testing &&
}
PARÂMETROS DE CONEXÃO
{integracao.campos.map(c => (
c.serverManaged
? setCampo(c.id, v)} />
))}
Credenciais sensíveis
Em produção, as chaves/tokens serão armazenadas criptografadas no servidor (AES-256). Hoje, persistem no localStorage do navegador apenas para testes da interface.
{Object.keys(edited).length > 0 && (
Salvar no rodapé para persistir.
)}
{campo.label}{campo.req && * }
onChange(e.target.value)}>
{campo.opcoes.map(o => {o} )}
{campo.hint &&
{campo.hint}
}
);
}
if (campo.tipo === 'radio') {
return (
{campo.label}{campo.req && * }
{campo.opcoes.map(o => (
onChange(o)}>{o.toUpperCase()}
))}
{campo.hint &&
{campo.hint}
}
);
}
if (campo.tipo === 'toggle') {
const v = valor !== undefined ? valor : campo.default;
return (
{campo.label}
{campo.hint &&
{campo.hint}
}
onChange(!v)}>
);
}
if (campo.tipo === 'tags') {
const tags = valor || campo.default || [];
return (
);
}
// text, secret, number
return (
{campo.label}{campo.req && * }
onChange(campo.tipo === 'number' ? parseFloat(e.target.value) : e.target.value)}
/>
{campo.hint &&
{campo.hint}
}
{campo.exemplo && !valor &&
Exemplo: {campo.exemplo}
}
);
}
function TabMapeamentos({ integracao }) {
return (
FLUXOS MAPEADOS DESTA INTEGRAÇÃO
{integracao.mapeamentos.map((m, i) => (
{m.editavel ? (
e.stopPropagation()}>
) : (
SISTEMA
)}
))}
SISTEMA são automáticos e não podem ser desabilitados (são parte do contrato da integração). Os editáveis permitem personalização do fluxo.
);
}
function TabLogs({ integracao }) {
// Mock logs - in real system would come from server
const logs = [
{ ts: '12/05 14:32:18', endpoint: '/v1/chat/completions', method: 'POST', status: 200, dur: '1.24s', preview: '{"messages":[...], "model":"gpt-4o"}' },
{ ts: '12/05 14:18:42', endpoint: '/v1/chat/completions', method: 'POST', status: 200, dur: '0.89s', preview: '{"messages":[...], "model":"gpt-4o-mini"}' },
{ ts: '12/05 11:42:08', endpoint: '/v1/chat/completions', method: 'POST', status: 429, dur: '0.12s', preview: 'rate_limit_exceeded · tentar em 60s' },
{ ts: '12/05 10:14:55', endpoint: '/v1/embeddings', method: 'POST', status: 200, dur: '0.42s', preview: '{"input":"...", "model":"text-embedding-3-small"}' },
{ ts: '12/05 09:22:14', endpoint: '/v1/chat/completions', method: 'POST', status: 200, dur: '2.18s', preview: '{"messages":[...], "stream":true}' },
];
return (
5 chamadas nas últimas 24h · 1 erro (rate limit)
Timestamp
Endpoint
Method
Status
Duração
Preview
{logs.map((l, i) => (
{l.ts}
{l.endpoint}
{l.method}
= 200 && l.status < 300 ? 'badge-lime' : l.status >= 400 && l.status < 500 ? 'badge-amber' : 'badge-red'}`}>
{l.status}
{l.dur}
{l.preview}
))}
Logs simulados · em produção virão do servidor com retenção de 30 dias
);
}
// ============ EMPRESA TAB ============
function EmpresaTab({ empresa, onUpdate, onUpdateContas }) {
return (
onUpdate('cnpj', v)} placeholder="00.000.000/0000-00" req />
onUpdate('razao', v)} req />
onUpdate('fantasia', v)} />
onUpdate('ie', v)} />
onUpdate('im', v)} />
onUpdate('atividade', v)} />
onUpdate('telefone', v)} />
onUpdate('email', v)} />
onUpdate('cep', v)} placeholder="00000-000" />
onUpdate('uf', v)} />
onUpdate('logradouro', v)} />
onUpdate('numero', v)} />
onUpdate('complemento', v)} />
onUpdate('bairro', v)} />
onUpdate('cidade', v)} />
REGIME ATIVO
{[
{ id: 'lucro-real', l: 'LUCRO REAL' },
{ id: 'presumido', l: 'PRESUMIDO' },
{ id: 'simples', l: 'SIMPLES' },
].map(r => (
onUpdate('regime', r.id)}>{r.l}
))}
{empresa.regime === 'simples' && (
<>
ANEXO DO SIMPLES
{['ANEXO I', 'ANEXO II', 'ANEXO III', 'ANEXO IV', 'ANEXO V'].map(a => (
onUpdate('anexoSimples', a)}>{a.replace('ANEXO ', '')}
))}
)}
onUpdate('rbt12', v)} hint="Receita bruta dos últimos 12 meses" />
{empresa.regime === 'lucro-real' && (
)}
Certificado Digital ICP-Brasil
{empresa.certTipo}
{empresa.certEmissor}
VÁLIDO
Vencimento: {empresa.certVencimento}
{empresa.contas.map(c => (
{c.banco}
{c.principal && PRINCIPAL }
AG {c.agencia} · CC {c.conta} {c.pix && '· PIX ' + c.pix}
))}
);
}
function FormRow({ label, value, onChange, placeholder, hint, req }) {
return (
{label}{req && * }
onChange(e.target.value)} />
{hint &&
{hint}
}
);
}
window.MConfig = MConfig;