95958e9a96
- Dark/light mode toggle across all pages (login, dashboard, corporate, admin, BI) - BI Executive redesigned as permanent dark trading console (Bloomberg-style) - Floating vertical nav with anchor scroll for mobile navigation - Chart.js bundled locally (eliminates CDN dependency) - Chart.js inlined in HTML for guaranteed loading - Fix: themeScript </script> tag had literal backslash breaking HTML parser - Fix: each chart wrapped in individual try/catch for graceful degradation - No-cache headers on BI page to prevent stale HTML - Robust init that handles DOMContentLoaded already fired Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
511 lines
20 KiB
JavaScript
511 lines
20 KiB
JavaScript
/**
|
|
* Admin Home Dashboard - Fast daily overview
|
|
* 3 flows: BRL→USD, USD→BRL, USD→USD (balance)
|
|
*/
|
|
const { buildHeader, buildFooter, buildHead, getChartJsScript } = require('./ui-template');
|
|
|
|
function buildAdminHomeHTML(stats, user) {
|
|
const now = new Date().toLocaleString('pt-BR');
|
|
const hoje = new Date().toLocaleDateString('pt-BR', { weekday: 'long', day: 'numeric', month: 'long' });
|
|
// Support both admin and corporate roles
|
|
const role = user.role || 'corporate';
|
|
|
|
const formatBRL = (v) => v.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
|
|
const formatUSD = (v) => v.toLocaleString('pt-BR', { style: 'currency', currency: 'USD' });
|
|
|
|
// Calculate variations
|
|
const calcVar = (hoje, ontem) => ontem > 0
|
|
? ((hoje - ontem) / ontem * 100).toFixed(1)
|
|
: (hoje > 0 ? 100 : 0);
|
|
|
|
const brlUsdVar = calcVar(stats.brlUsd.hoje.qtd, stats.brlUsd.ontem.qtd);
|
|
const usdBrlVar = calcVar(stats.usdBrl.hoje.qtd, stats.usdBrl.ontem.qtd);
|
|
const usdUsdVar = calcVar(stats.usdUsd.hoje.qtd, stats.usdUsd.ontem.qtd);
|
|
|
|
const totalHoje = stats.brlUsd.hoje.qtd + stats.usdBrl.hoje.qtd + stats.usdUsd.hoje.qtd;
|
|
const totalOntem = stats.brlUsd.ontem.qtd + stats.usdBrl.ontem.qtd + stats.usdUsd.ontem.qtd;
|
|
const totalVar = calcVar(totalHoje, totalOntem);
|
|
|
|
const pageScripts = getChartJsScript();
|
|
|
|
const pageCSS = `
|
|
/* Trading Terminal - Live Rates */
|
|
.trading-terminal {
|
|
background: linear-gradient(135deg, #0F1923 0%, #1A2332 50%, #0D1B2A 100%);
|
|
border-top: 1px solid rgba(0,255,136,0.15);
|
|
border-bottom: 1px solid rgba(0,255,136,0.15);
|
|
padding: 16px 40px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.trading-terminal::before {
|
|
content: '';
|
|
position: absolute; top: 0; left: 0; right: 0; height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(0,255,136,0.3), transparent);
|
|
}
|
|
.trading-terminal::after {
|
|
content: '';
|
|
position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(0,255,136,0.3), transparent);
|
|
}
|
|
.live-rate-bar {
|
|
display: flex; align-items: center; justify-content: center; gap: 20px;
|
|
max-width: 1600px; margin: 0 auto;
|
|
}
|
|
.terminal-title {
|
|
font-size: 10px; font-weight: 700; color: rgba(0,255,136,0.6);
|
|
text-transform: uppercase; letter-spacing: 2px; margin-right: 8px;
|
|
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
|
|
}
|
|
.live-rate-dot {
|
|
width: 7px; height: 7px; border-radius: 50%; background: #00FF88;
|
|
display: inline-block; animation: blink 1.5s infinite;
|
|
box-shadow: 0 0 6px rgba(0,255,136,0.6);
|
|
}
|
|
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
|
|
.rate-pair-group {
|
|
display: flex; align-items: center; gap: 8px;
|
|
background: rgba(255,255,255,0.03);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
border-radius: 8px; padding: 8px 14px;
|
|
}
|
|
.rate-pair-label {
|
|
font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.35);
|
|
text-transform: uppercase; letter-spacing: 1px; writing-mode: vertical-rl;
|
|
text-orientation: mixed; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
|
|
}
|
|
.live-rate-btn {
|
|
display: flex; flex-direction: column; align-items: center; gap: 1px;
|
|
padding: 8px 18px; border-radius: 6px; border: 1px solid transparent;
|
|
font-family: inherit; font-size: 14px; font-weight: 700; cursor: default;
|
|
transition: all 0.25s; min-width: 150px; justify-content: center;
|
|
position: relative;
|
|
}
|
|
.rate-flags { font-size: 9px; opacity: 0.5; letter-spacing: 1px; line-height: 1; }
|
|
.live-rate-btn.compra {
|
|
background: rgba(0,255,136,0.08); color: #00FF88;
|
|
border-color: rgba(0,255,136,0.2);
|
|
}
|
|
.live-rate-btn.compra:hover { background: rgba(0,255,136,0.14); }
|
|
.live-rate-btn.venda {
|
|
background: rgba(255,68,68,0.08); color: #FF4444;
|
|
border-color: rgba(255,68,68,0.2);
|
|
}
|
|
.live-rate-btn.venda:hover { background: rgba(255,68,68,0.14); }
|
|
.live-rate-btn .rate-value {
|
|
font-size: 22px; font-weight: 800; letter-spacing: -0.5px;
|
|
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
|
|
font-variant-numeric: tabular-nums;
|
|
text-shadow: 0 0 12px currentColor;
|
|
}
|
|
.live-rate-btn .rate-type {
|
|
font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px;
|
|
opacity: 0.5; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
|
|
}
|
|
.live-rate-btn.pulse .rate-value { animation: ratePulse 0.4s ease; }
|
|
@keyframes ratePulse {
|
|
0% { transform: scale(1); text-shadow: 0 0 12px currentColor; }
|
|
50% { transform: scale(1.06); text-shadow: 0 0 24px currentColor, 0 0 48px currentColor; }
|
|
100% { transform: scale(1); text-shadow: 0 0 12px currentColor; }
|
|
}
|
|
.live-rate-time {
|
|
font-size: 10px; color: rgba(255,255,255,0.25);
|
|
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.date-banner {
|
|
background: var(--card); border-radius: 12px; padding: 16px 24px;
|
|
margin-bottom: 24px; border: 1px solid var(--border);
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
}
|
|
.date-banner h2 { font-size: 18px; font-weight: 700; text-transform: capitalize; }
|
|
.date-banner .time { font-size: 13px; color: var(--text-secondary); }
|
|
|
|
.kpi-grid {
|
|
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
|
|
margin-bottom: 28px;
|
|
}
|
|
.kpi-card {
|
|
background: var(--card); border-radius: 16px; padding: 24px;
|
|
border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
}
|
|
.kpi-card.highlight { border-left: 4px solid var(--admin-accent); }
|
|
.kpi-card.brl-usd { border-left: 4px solid var(--blue); }
|
|
.kpi-card.usd-brl { border-left: 4px solid var(--green); }
|
|
.kpi-card.usd-usd { border-left: 4px solid var(--purple); }
|
|
.kpi-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
|
|
.kpi-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; }
|
|
.kpi-badge {
|
|
font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 12px;
|
|
}
|
|
.kpi-badge.up { background: var(--green-bg); color: var(--green); }
|
|
.kpi-badge.down { background: var(--red-bg); color: var(--red); }
|
|
.kpi-badge.neutral { background: var(--blue-bg); color: var(--blue); }
|
|
.kpi-value { font-size: 36px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
|
|
.kpi-sub { font-size: 13px; color: var(--text-muted); }
|
|
|
|
.charts-grid {
|
|
display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
|
|
margin-bottom: 28px;
|
|
}
|
|
.chart-card {
|
|
background: var(--card); border-radius: 16px; padding: 24px;
|
|
border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
}
|
|
.chart-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 20px; color: var(--text); }
|
|
.chart-wrap { height: 280px; position: relative; }
|
|
|
|
.detail-grid {
|
|
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
|
|
}
|
|
.detail-card {
|
|
background: var(--card); border-radius: 16px; padding: 24px;
|
|
border: 1px solid var(--border);
|
|
}
|
|
.detail-card h3 {
|
|
font-size: 14px; font-weight: 700; margin-bottom: 16px;
|
|
display: flex; align-items: center; gap: 8px;
|
|
}
|
|
.detail-card h3 .icon {
|
|
width: 28px; height: 28px; border-radius: 8px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 14px;
|
|
}
|
|
.detail-card h3 .icon.out { background: var(--blue-bg); }
|
|
.detail-card h3 .icon.in { background: var(--green-bg); }
|
|
.detail-card h3 .icon.balance { background: var(--purple-bg); }
|
|
.detail-row {
|
|
display: flex; justify-content: space-between; padding: 10px 0;
|
|
border-bottom: 1px solid #F3F4F6; font-size: 13px;
|
|
}
|
|
.detail-row:last-child { border-bottom: none; }
|
|
.detail-label { color: var(--text-secondary); }
|
|
.detail-value { font-weight: 600; color: var(--text); }
|
|
.detail-value.green { color: var(--green); }
|
|
.detail-value.red { color: var(--red); }
|
|
|
|
@media (max-width: 1200px) {
|
|
.kpi-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.detail-grid { grid-template-columns: 1fr; }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.trading-terminal { padding: 12px 16px; }
|
|
.live-rate-bar { flex-wrap: wrap; gap: 10px; justify-content: center; }
|
|
.terminal-title { display: none; }
|
|
.rate-pair-group { padding: 8px 12px; width: 100%; justify-content: center; }
|
|
.live-rate-btn { min-width: 120px; padding: 8px 14px; flex: 1; }
|
|
.live-rate-btn .rate-value { font-size: 18px; }
|
|
.live-rate-time { width: 100%; text-align: center; }
|
|
.kpi-grid, .charts-grid { grid-template-columns: 1fr; }
|
|
.date-banner {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
text-align: center;
|
|
padding: 14px 16px;
|
|
}
|
|
.date-banner h2 { font-size: 16px; }
|
|
.date-banner .time { font-size: 12px; }
|
|
.kpi-card { padding: 16px; }
|
|
.kpi-value { font-size: 28px; }
|
|
.kpi-label { font-size: 11px; }
|
|
.kpi-sub { font-size: 12px; }
|
|
.kpi-badge { font-size: 10px; padding: 3px 8px; }
|
|
.chart-card { padding: 16px; }
|
|
.chart-card h3 { font-size: 13px; margin-bottom: 14px; }
|
|
.chart-wrap { height: 220px; }
|
|
.detail-card { padding: 16px; }
|
|
.detail-card h3 { font-size: 13px; }
|
|
.detail-row { font-size: 12px; padding: 8px 0; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.trading-terminal { padding: 10px 12px; }
|
|
.live-rate-bar { gap: 8px; flex-direction: column; align-items: center; }
|
|
.rate-pair-group { padding: 10px; gap: 6px; }
|
|
.rate-pair-label { writing-mode: horizontal-tb; font-size: 10px; }
|
|
.live-rate-btn { min-width: 110px; padding: 8px 12px; }
|
|
.live-rate-btn .rate-value { font-size: 16px; }
|
|
.live-rate-btn .rate-type { font-size: 8px; }
|
|
.rate-flags { font-size: 9px; }
|
|
.live-rate-time { font-size: 9px; }
|
|
.kpi-value { font-size: 24px; }
|
|
.chart-wrap { height: 180px; }
|
|
.detail-card h3 .icon { width: 24px; height: 24px; font-size: 12px; }
|
|
.detail-row { font-size: 11px; }
|
|
}
|
|
`;
|
|
|
|
return `<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
${buildHead('Home', pageCSS, pageScripts)}
|
|
</head>
|
|
<body>
|
|
|
|
${buildHeader({ role: role, userName: user.nome, activePage: 'home' })}
|
|
|
|
<div class="trading-terminal">
|
|
<div class="live-rate-bar">
|
|
<span class="live-rate-dot"></span>
|
|
<span class="terminal-title">Live Rates</span>
|
|
|
|
<div class="rate-pair-group">
|
|
<span class="rate-pair-label">USD</span>
|
|
<button class="live-rate-btn compra">
|
|
<span class="rate-flags">\uD83C\uDDFA\uD83C\uDDF8 \u2192 \uD83C\uDDE7\uD83C\uDDF7</span>
|
|
<span class="rate-type">Compra</span>
|
|
<span class="rate-value" id="rateUsdCompra">--</span>
|
|
</button>
|
|
<button class="live-rate-btn venda">
|
|
<span class="rate-flags">\uD83C\uDDE7\uD83C\uDDF7 \u2192 \uD83C\uDDFA\uD83C\uDDF8</span>
|
|
<span class="rate-type">Venda</span>
|
|
<span class="rate-value" id="rateUsdVenda">--</span>
|
|
</button>
|
|
</div>
|
|
|
|
<span class="live-rate-time" id="rateTime">--</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="app-container">
|
|
<div class="date-banner">
|
|
<h2>${hoje}</h2>
|
|
<div class="time">Atualizado: ${now}</div>
|
|
</div>
|
|
|
|
<div class="kpi-grid">
|
|
<div class="kpi-card highlight">
|
|
<div class="kpi-header">
|
|
<div class="kpi-label">Total de Ordens Hoje</div>
|
|
<div class="kpi-badge ${Number(totalVar) >= 0 ? 'up' : 'down'}">${Number(totalVar) >= 0 ? '+' : ''}${totalVar}%</div>
|
|
</div>
|
|
<div class="kpi-value">${totalHoje}</div>
|
|
<div class="kpi-sub">Ontem: ${totalOntem} ordens</div>
|
|
</div>
|
|
<div class="kpi-card brl-usd">
|
|
<div class="kpi-header">
|
|
<div class="kpi-label">BRL → USD</div>
|
|
<div class="kpi-badge ${Number(brlUsdVar) >= 0 ? 'up' : 'down'}">${Number(brlUsdVar) >= 0 ? '+' : ''}${brlUsdVar}%</div>
|
|
</div>
|
|
<div class="kpi-value">${stats.brlUsd.hoje.qtd}</div>
|
|
<div class="kpi-sub">Ontem: ${stats.brlUsd.ontem.qtd}</div>
|
|
</div>
|
|
<div class="kpi-card usd-brl">
|
|
<div class="kpi-header">
|
|
<div class="kpi-label">USD → BRL</div>
|
|
<div class="kpi-badge ${Number(usdBrlVar) >= 0 ? 'up' : 'down'}">${Number(usdBrlVar) >= 0 ? '+' : ''}${usdBrlVar}%</div>
|
|
</div>
|
|
<div class="kpi-value">${stats.usdBrl.hoje.qtd}</div>
|
|
<div class="kpi-sub">Ontem: ${stats.usdBrl.ontem.qtd}</div>
|
|
</div>
|
|
<div class="kpi-card usd-usd">
|
|
<div class="kpi-header">
|
|
<div class="kpi-label">USD → USD (Balance)</div>
|
|
<div class="kpi-badge ${Number(usdUsdVar) >= 0 ? 'up' : 'down'}">${Number(usdUsdVar) >= 0 ? '+' : ''}${usdUsdVar}%</div>
|
|
</div>
|
|
<div class="kpi-value">${stats.usdUsd.hoje.qtd}</div>
|
|
<div class="kpi-sub">Ontem: ${stats.usdUsd.ontem.qtd}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="charts-grid">
|
|
<div class="chart-card">
|
|
<h3>Quantidade de Ordens por Fluxo</h3>
|
|
<div class="chart-wrap"><canvas id="chartQtd"></canvas></div>
|
|
</div>
|
|
<div class="chart-card">
|
|
<h3>Volume USD por Fluxo</h3>
|
|
<div class="chart-wrap"><canvas id="chartVol"></canvas></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-grid">
|
|
<div class="detail-card">
|
|
<h3><span class="icon out">→</span> BRL → USD (Remessas)</h3>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Ordens Hoje</span>
|
|
<span class="detail-value">${stats.brlUsd.hoje.qtd}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Ordens Ontem</span>
|
|
<span class="detail-value">${stats.brlUsd.ontem.qtd}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Volume BRL Hoje</span>
|
|
<span class="detail-value">${formatBRL(stats.brlUsd.hoje.total_brl)}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Volume USD Hoje</span>
|
|
<span class="detail-value">${formatUSD(stats.brlUsd.hoje.total_usd)}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Variacao</span>
|
|
<span class="detail-value ${Number(brlUsdVar) >= 0 ? 'green' : 'red'}">${Number(brlUsdVar) >= 0 ? '+' : ''}${brlUsdVar}%</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-card">
|
|
<h3><span class="icon in">←</span> USD → BRL (Recebimentos)</h3>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Ordens Hoje</span>
|
|
<span class="detail-value">${stats.usdBrl.hoje.qtd}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Ordens Ontem</span>
|
|
<span class="detail-value">${stats.usdBrl.ontem.qtd}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Volume BRL Hoje</span>
|
|
<span class="detail-value">${formatBRL(stats.usdBrl.hoje.total_brl)}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Volume USD Hoje</span>
|
|
<span class="detail-value">${formatUSD(stats.usdBrl.hoje.total_usd)}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Variacao</span>
|
|
<span class="detail-value ${Number(usdBrlVar) >= 0 ? 'green' : 'red'}">${Number(usdBrlVar) >= 0 ? '+' : ''}${usdBrlVar}%</span>
|
|
</div>
|
|
</div>
|
|
<div class="detail-card">
|
|
<h3><span class="icon balance">↔</span> USD → USD (Balance)</h3>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Ordens Hoje</span>
|
|
<span class="detail-value">${stats.usdUsd.hoje.qtd}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Ordens Ontem</span>
|
|
<span class="detail-value">${stats.usdUsd.ontem.qtd}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Volume USD Hoje</span>
|
|
<span class="detail-value">${formatUSD(stats.usdUsd.hoje.total_usd)}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Volume USD Ontem</span>
|
|
<span class="detail-value">${formatUSD(stats.usdUsd.ontem.total_usd)}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">Variacao</span>
|
|
<span class="detail-value ${Number(usdUsdVar) >= 0 ? 'green' : 'red'}">${Number(usdUsdVar) >= 0 ? '+' : ''}${usdUsdVar}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
${buildFooter()}
|
|
|
|
<script>
|
|
const stats = ${JSON.stringify(stats)};
|
|
|
|
// Chart: Quantidade
|
|
new Chart(document.getElementById('chartQtd'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['BRL → USD', 'USD → BRL', 'USD → USD'],
|
|
datasets: [
|
|
{
|
|
label: 'Hoje',
|
|
data: [stats.brlUsd.hoje.qtd, stats.usdBrl.hoje.qtd, stats.usdUsd.hoje.qtd],
|
|
backgroundColor: ['#1A73E8', '#2E7D32', '#7B1FA2'],
|
|
borderRadius: 6,
|
|
barPercentage: 0.7
|
|
},
|
|
{
|
|
label: 'Ontem',
|
|
data: [stats.brlUsd.ontem.qtd, stats.usdBrl.ontem.qtd, stats.usdUsd.ontem.qtd],
|
|
backgroundColor: ['#90CAF9', '#A5D6A7', '#CE93D8'],
|
|
borderRadius: 6,
|
|
barPercentage: 0.7
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { position: 'top', labels: { font: { size: 12, weight: 600 }, usePointStyle: true } }
|
|
},
|
|
scales: {
|
|
y: { beginAtZero: true, grid: { color: '#F3F4F6' }, ticks: { font: { size: 11 } } },
|
|
x: { grid: { display: false }, ticks: { font: { size: 11, weight: 600 } } }
|
|
}
|
|
}
|
|
});
|
|
|
|
// Chart: Volume USD
|
|
new Chart(document.getElementById('chartVol'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['BRL → USD', 'USD → BRL', 'USD → USD'],
|
|
datasets: [
|
|
{
|
|
label: 'Hoje (USD)',
|
|
data: [stats.brlUsd.hoje.total_usd, stats.usdBrl.hoje.total_usd, stats.usdUsd.hoje.total_usd],
|
|
backgroundColor: ['#1A73E8', '#2E7D32', '#7B1FA2'],
|
|
borderRadius: 6,
|
|
barPercentage: 0.7
|
|
},
|
|
{
|
|
label: 'Ontem (USD)',
|
|
data: [stats.brlUsd.ontem.total_usd, stats.usdBrl.ontem.total_usd, stats.usdUsd.ontem.total_usd],
|
|
backgroundColor: ['#90CAF9', '#A5D6A7', '#CE93D8'],
|
|
borderRadius: 6,
|
|
barPercentage: 0.7
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { position: 'top', labels: { font: { size: 12, weight: 600 }, usePointStyle: true } },
|
|
tooltip: {
|
|
callbacks: {
|
|
label: (ctx) => ctx.dataset.label + ': $' + ctx.raw.toLocaleString('en-US', { minimumFractionDigits: 2 })
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: { color: '#F3F4F6' },
|
|
ticks: {
|
|
font: { size: 11 },
|
|
callback: (v) => '$' + (v >= 1000 ? (v/1000).toFixed(0) + 'k' : v)
|
|
}
|
|
},
|
|
x: { grid: { display: false }, ticks: { font: { size: 11, weight: 600 } } }
|
|
}
|
|
}
|
|
});
|
|
|
|
// Live Rates
|
|
let _lastUsdBid = null, _lastUsdAsk = null;
|
|
function pulseEl(el) { el.closest('.live-rate-btn').classList.add('pulse'); setTimeout(() => el.closest('.live-rate-btn').classList.remove('pulse'), 500); }
|
|
async function fetchLiveRate() {
|
|
try {
|
|
const resp = await fetch('/api/cotacao');
|
|
const json = await resp.json();
|
|
const usd = json.USDBRL;
|
|
if (usd) {
|
|
const bidRaw = parseFloat(usd.bid), askRaw = parseFloat(usd.ask);
|
|
const bid = bidRaw * (1 - 0.0043);
|
|
const ask = askRaw * (1 + 0.0005);
|
|
const elC = document.getElementById('rateUsdCompra'), elV = document.getElementById('rateUsdVenda');
|
|
elC.textContent = bid.toFixed(4); elV.textContent = ask.toFixed(4);
|
|
if (_lastUsdBid !== null && bidRaw !== _lastUsdBid) pulseEl(elC);
|
|
if (_lastUsdAsk !== null && askRaw !== _lastUsdAsk) pulseEl(elV);
|
|
_lastUsdBid = bidRaw; _lastUsdAsk = askRaw;
|
|
}
|
|
document.getElementById('rateTime').textContent = new Date().toLocaleTimeString('pt-BR');
|
|
} catch (e) { /* retry next cycle */ }
|
|
}
|
|
fetchLiveRate();
|
|
setInterval(fetchLiveRate, 3000);
|
|
</script>
|
|
</body>
|
|
</html>`;
|
|
}
|
|
|
|
module.exports = { buildAdminHomeHTML };
|