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

fix: atualiza dashboard.js com template consistente

Browse Source 
- Header com mesma estrutura do ui-template
- Logo com fundo branco e bordas arredondadas
- Conteudo limitado a 1600px e centralizado
- Estilos responsivos atualizados

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
root
2026-02-08 14:04:46 -05:00
parent ae8a675e52
commit 9bf17d290a
1 changed files with 53 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/dashboard.js
View File

@@ -40,25 +40,46 @@ function buildHTML(data, agente, isAgentDashboard = true, diasPeriodo = null, as
}
.header {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white; padding: 24px 40px;
display: flex; justify-content: space-between; align-items: center;
color: white;
box-shadow: 0 2px 8px rgba(74,37,112,0.3);
}
.header h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.header .subtitle { font-size: 13px; opacity: 0.8; margin-top: 4px; font-weight: 400; }
.header-right { display: flex; align-items: center; gap: 16px; }
.header-inner {
max-width: 1600px;
margin: 0 auto;
padding: 16px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-logo {
height: 36px;
width: auto;
background: white;
padding: 6px 12px;
border-radius: 8px;
}
.header h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.header .subtitle { font-size: 12px; opacity: 0.8; margin-top: 2px; font-weight: 400; }
.header-right { display: flex; align-items: center; gap: 12px; }
.header .badge {
background: rgba(255,255,255,0.15); backdrop-filter: blur(10px);
padding: 8px 16px; border-radius: 24px; font-size: 12px; font-weight: 600;
padding: 6px 14px; border-radius: 20px; font-size: 11px; font-weight: 600;
border: 1px solid rgba(255,255,255,0.2);
}
.header .live-dot {
display: inline-block; width: 8px; height: 8px; background: #4ADE80;
border-radius: 50%; margin-right: 6px; animation: pulse 2s infinite;
}
.header .app-name-badge {
background: rgba(255,255,255,0.2);
padding: 6px 14px;
border-radius: 6px;
font-size: 14px;
font-weight: 800;
}
.btn-logout {
background: rgba(255,255,255,0.15); color: white; border: 1px solid rgba(255,255,255,0.3);
padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600;
padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 600;
cursor: pointer; text-decoration: none; font-family: inherit; transition: all 0.15s;
}
.btn-logout:hover { background: rgba(255,255,255,0.25); }
@@ -410,7 +431,7 @@ function buildHTML(data, agente, isAgentDashboard = true, diasPeriodo = null, as
.chart-card { min-height: 320px; }
.container { padding: 20px; }
.filters { padding: 12px 20px; flex-wrap: wrap; }
.header { padding: 20px; flex-direction: column; gap: 12px; }
.header-inner { padding: 16px 20px; flex-direction: column; gap: 12px; }
}
@media (max-width: 600px) {
.kpi-grid { grid-template-columns: 1fr; }
@@ -428,29 +449,31 @@ ${isEmulating ? `
</div>
` : ''}
<div class="header">
<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 class="header-inner">
<div style="display:flex;align-items:center;gap:16px;">
<img src="/public/logo.png" alt="CambioReal" class="header-logo">
<div>
<h1 style="display:flex;align-items:center;gap:10px;">
<span class="app-name-badge">BI - CCC</span>
${agente.nome}${agente.agente_id ? ` &mdash; #${agente.agente_id}` : ''}
</h1>
<div class="subtitle">Dashboard de Transacoes ${isAdminDash ? `(${data.length.toLocaleString('pt-BR')} registros)` : ''}</div>
</div>
</div>
<div class="header-right">
${isAdminDash ? `
<select onchange="window.location.href='/admin/dashboard?dias='+this.value" style="padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.1);color:white;font-size:13px;cursor:pointer;">
<option value="30" ${diasPeriodo === 30 ? 'selected' : ''}>30 dias</option>
<option value="60" ${diasPeriodo === 60 ? 'selected' : ''}>60 dias</option>
<option value="90" ${diasPeriodo === 90 ? 'selected' : ''}>90 dias</option>
<option value="180" ${diasPeriodo === 180 ? 'selected' : ''}>180 dias</option>
<option value="365" ${diasPeriodo === 365 ? 'selected' : ''}>1 ano</option>
</select>
<a href="/admin" class="btn-logout">Voltar</a>
` : ''}
<div class="badge"><span class="live-dot"></span>Ao vivo &mdash; ${now}</div>
<a href="/logout" class="btn-logout">Sair</a>
</div>
</div>
<div class="header-right">
${isAdminDash ? `
<select onchange="window.location.href='/admin/dashboard?dias='+this.value" style="padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.3);background:rgba(255,255,255,0.1);color:white;font-size:13px;cursor:pointer;">
<option value="30" ${diasPeriodo === 30 ? 'selected' : ''}>30 dias</option>
<option value="60" ${diasPeriodo === 60 ? 'selected' : ''}>60 dias</option>
<option value="90" ${diasPeriodo === 90 ? 'selected' : ''}>90 dias</option>
<option value="180" ${diasPeriodo === 180 ? 'selected' : ''}>180 dias</option>
<option value="365" ${diasPeriodo === 365 ? 'selected' : ''}>1 ano</option>
</select>
<a href="/admin" class="btn-logout" style="background:rgba(255,255,255,0.15);">Voltar</a>
` : ''}
<div class="badge"><span class="live-dot"></span>Ao vivo &mdash; ${now}</div>
<a href="/logout" class="btn-logout">Sair</a>
</div>
</div>