cassel/bi-agents
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: design system unificado com template e cores CambioReal

Browse Source 
- Cria src/ui-template.js com header, footer e estilos compartilhados
- Atualiza admin-home.js e admin-panel.js para usar template
- Atualiza dashboard.js com logo e cores CambioReal (#7600be)
- Atualiza login.html com novo branding BI-CCC
- Adiciona public/logo.png (CambioReal original)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
root
2026-02-08 13:20:05 -05:00
parent 2bf38c28c9
commit 1321b949e4
6 changed files with 390 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/dashboard.js
View File

@@ -15,10 +15,10 @@ function buildHTML(data, agente, isAgentDashboard = true, diasPeriodo = null, as
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--primary: #6C3FA0;
--primary-light: #8B5FBF;
--primary-dark: #4A2570;
--primary-bg: #F3EEFA;
--primary: #7600be;
--primary-light: #9B2DE5;
--primary-dark: #5A0091;
--primary-bg: #F5EAFA;
--bg: #F0F2F5;
--card: #FFFFFF;
--text: #1A1D23;
@@ -428,9 +428,15 @@ ${isEmulating ? `
</div>
` : ''}
<div class="header">
<div>
<h1>${agente.nome}${agente.agente_id ? ` &mdash; Agente ${agente.agente_id}` : ''}</h1>
<div class="subtitle">Dashboard de Transacoes BRL &harr; USD ${isAdminDash ? `(${data.length.toLocaleString('pt-BR')} registros)` : ''}</div>
<div style="display:flex;align-items:center;gap:16px;">
<img src="/public/logo.png" alt="CambioReal" style="height:40px;width:auto;">
<div>
<h1 style="display:flex;align-items:center;gap:12px;">
<span style="background:rgba(255,255,255,0.2);padding:4px 12px;border-radius:6px;font-size:14px;">BI - CCC</span>
${agente.nome}${agente.agente_id ? ` &mdash; Agente ${agente.agente_id}` : ''}
</h1>
<div class="subtitle">Dashboard de Transacoes BRL &harr; USD ${isAdminDash ? `(${data.length.toLocaleString('pt-BR')} registros)` : ''}</div>
</div>
</div>
<div class="header-right">
${isAdminDash ? `
@@ -596,7 +602,7 @@ function showLoading(msg) {
overlay = document.createElement('div');
overlay.id = 'loadingOverlay';
overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:9999;flex-direction:column;gap:16px;';
overlay.innerHTML = '<div style="width:50px;height:50px;border:4px solid #fff;border-top-color:#6C3FA0;border-radius:50%;animation:spin 1s linear infinite;"></div><div style="color:#fff;font-size:16px;" id="loadingText">Carregando...</div><style>@keyframes spin{to{transform:rotate(360deg)}}</style>';
overlay.innerHTML = '<div style="width:50px;height:50px;border:4px solid #fff;border-top-color:#7600be;border-radius:50%;animation:spin 1s linear infinite;"></div><div style="color:#fff;font-size:16px;" id="loadingText">Carregando...</div><style>@keyframes spin{to{transform:rotate(360deg)}}</style>';
document.body.appendChild(overlay);
}
document.getElementById('loadingText').textContent = msg || 'Carregando...';
@@ -816,7 +822,7 @@ function renderCharts(gran) {
const clientMap = {};
filtered.forEach(r => { clientMap[r.cliente] = (clientMap[r.cliente] || 0) + r.valor_dolar; });
const topClientes = Object.entries(clientMap).sort((a,b) => b[1] - a[1]).slice(0, 10);
const colors = ['#6C3FA0','#8B5FBF','#2980B9','#27AE60','#E67E22','#E74C3C','#3498DB','#1ABC9C','#9B59B6','#F39C12'];
const colors = ['#7600be','#8B5FBF','#2980B9','#27AE60','#E67E22','#E74C3C','#3498DB','#1ABC9C','#9B59B6','#F39C12'];
charts.clientes = new Chart(document.getElementById('chartClientes'), {
type: 'bar',
data: {
@@ -839,7 +845,7 @@ function renderCharts(gran) {
data: {
labels,
datasets: [
{ label: 'Taxa Cobrada', data: periods.map(p => p.taxaMedia), borderColor: '#6C3FA0', backgroundColor: 'rgba(108,63,160,0.08)', fill: true, tension: 0.4, pointRadius: 4, pointBackgroundColor: '#6C3FA0', borderWidth: 2 },
{ label: 'Taxa Cobrada', data: periods.map(p => p.taxaMedia), borderColor: '#7600be', backgroundColor: 'rgba(108,63,160,0.08)', fill: true, tension: 0.4, pointRadius: 4, pointBackgroundColor: '#7600be', borderWidth: 2 },
{ label: 'PTAX', data: periods.map(p => p.ptaxMedia), borderColor: '#2980B9', backgroundColor: 'rgba(41,128,185,0.08)', fill: true, tension: 0.4, pointRadius: 4, pointBackgroundColor: '#2980B9', borderWidth: 2 }
]
},
@@ -1660,12 +1666,12 @@ function renderNettingAnalysis(gran) {
datasets: [{
label: 'Eficiencia Netting %',
data: efficiencyData,
borderColor: '#6C3FA0',
borderColor: '#7600be',
backgroundColor: 'rgba(108,63,160,0.1)',
fill: true,
tension: 0.4,
pointRadius: 5,
pointBackgroundColor: '#6C3FA0',
pointBackgroundColor: '#7600be',
borderWidth: 3
}, {
label: 'Meta 100%',