⚖
@@ -2093,6 +2114,62 @@ function renderCohort(cohorts, t) {
update();
})();
+var _forecastChart = null;
+async function loadForecast() {
+ try {
+ var resp = await fetch('/admin/api/bi/forecast?metric=volume&days=30');
+ var data = await resp.json();
+ if (!data.historical || data.historical.length === 0) {
+ document.getElementById('forecastInfo').textContent = 'No data';
+ return;
+ }
+ var theme = getChartTheme();
+ var histLabels = data.historical.map(function(d){return d.dia;});
+ var predLabels = data.predicted.map(function(d){return d.dia;});
+ var allLabels = histLabels.concat(predLabels);
+ var histValues = data.historical.map(function(d){return d.vol_usd;});
+ var predValues = new Array(histLabels.length).fill(null).concat(data.predicted.map(function(d){return d.vol_usd;}));
+ var upperValues = new Array(histLabels.length).fill(null).concat(data.confidence_upper.map(function(d){return d.vol_usd;}));
+ var lowerValues = new Array(histLabels.length).fill(null).concat(data.confidence_lower.map(function(d){return d.vol_usd;}));
+ // Extend historical with nulls for prediction period
+ var histFull = histValues.concat(new Array(predLabels.length).fill(null));
+
+ if (_forecastChart) _forecastChart.destroy();
+ var ctx = document.getElementById('forecastChart');
+ if (!ctx) return;
+ _forecastChart = new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: allLabels,
+ datasets: [
+ { label: 'Historical', data: histFull, borderColor: theme.blue, backgroundColor: 'transparent', borderWidth: 2, pointRadius: 0, tension: 0.3 },
+ { label: 'Forecast', data: predValues, borderColor: theme.green, backgroundColor: 'transparent', borderWidth: 2, borderDash: [6,3], pointRadius: 0, tension: 0.3 },
+ { label: 'Upper 95%', data: upperValues, borderColor: 'transparent', backgroundColor: theme.green + '15', fill: '+1', pointRadius: 0 },
+ { label: 'Lower 95%', data: lowerValues, borderColor: 'transparent', backgroundColor: 'transparent', fill: false, pointRadius: 0 }
+ ]
+ },
+ options: {
+ responsive: true, maintainAspectRatio: false,
+ plugins: { legend: { position: 'top', labels: { color: theme.text, usePointStyle: true, pointStyle: 'line', font: { size: 11 } } } },
+ scales: {
+ x: { ticks: { color: theme.text, maxTicksLimit: 15, font: { size: 10 } }, grid: { color: theme.grid } },
+ y: { ticks: { color: theme.text, callback: function(v){return '$' + (v>=1000 ? Math.round(v/1000)+'K' : v);} }, grid: { color: theme.grid } }
+ }
+ }
+ });
+ document.getElementById('forecastInfo').textContent = data.predicted.length + '-day forecast';
+ } catch (e) {
+ console.error('Forecast error:', e);
+ document.getElementById('forecastInfo').textContent = 'Forecast error';
+ }
+}
+
+function exportBIExcel() {
+ var s = document.getElementById('dateStart').value;
+ var e = document.getElementById('dateEnd').value;
+ if (s && e) window.location.href = '/admin/api/export/bi-excel?start=' + s + '&end=' + e;
+}
+
// Init - runs immediately (script is at bottom of body, DOM is ready)
// Also handles case where DOMContentLoaded already fired
function _startBI() {
@@ -2104,7 +2181,7 @@ function _startBI() {
// Apply theme-aware Chart.js defaults
applyChartDefaults(getChartTheme());
- loadBI(); loadRevenue(); loadStrategic(); fetchLiveRate();
+ loadBI(); loadRevenue(); loadStrategic(); loadForecast(); fetchLiveRate();
setInterval(fetchLiveRate, 3000);
// Re-render charts on theme toggle
diff --git a/src/admin-cliente.js b/src/admin-cliente.js
index dea0cf7..610f692 100644
--- a/src/admin-cliente.js
+++ b/src/admin-cliente.js
@@ -205,6 +205,9 @@ function buildAdminClienteHTML(user) {
.date-inputs label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.date-inputs input[type="date"] { padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: inherit; background: var(--bg); color: var(--text); }
.period-info { margin-left: auto; font-size: 12px; color: var(--text-muted); font-weight: 500; background: var(--bg); padding: 6px 12px; border-radius: 6px; }
+ .export-btn { background: var(--green); color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s; }
+ .export-btn:hover { opacity: 0.85; transform: translateY(-1px); }
+ [data-theme="dark"] .export-btn { background: rgba(0,255,136,0.15); color: #00FF88; border: 1px solid rgba(0,255,136,0.3); }
/* === Hero KPIs === */
.hero-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 28px; }
@@ -413,6 +416,7 @@ ${buildHeader({ role: role, userName: user.nome, activePage: 'cliente' })}
--
Health
+ ' +
+ (churn.factors || []).slice(0,3).map(function(f){
+ var ic = f.status === 'good' ? '✅' : f.status === 'warning' ? '⚠' : '❌';
+ return ic + ' ' + f.name + ': ' + f.score + '/100';
+ }).join(' ') + '
';
+}
+
// === Data Loading ===
function loadData() {
if (!selectedClientId) return;
diff --git a/src/admin-providers.js b/src/admin-providers.js
new file mode 100644
index 0000000..2a04bd9
--- /dev/null
+++ b/src/admin-providers.js
@@ -0,0 +1,1074 @@
+/**
+ * Admin Providers Dashboard - Provider Performance Analysis
+ * Admin-only: provider comparison, success rates, volume analysis, failed transaction breakdown
+ */
+const { buildHeader, buildFooter, buildHead, getChartJsScript } = require('./ui-template');
+
+function buildAdminProvidersHTML(user) {
+ const role = user.role || 'admin';
+ const pageScripts = getChartJsScript();
+
+ const now = new Date();
+ const today = now.toISOString().slice(0, 10);
+ const thirtyDaysAgo = new Date(now.getTime() - 30 * 86400000).toISOString().slice(0, 10);
+
+ const pageCSS = `
+ /* Smooth scroll for anchor navigation */
+ html { scroll-behavior: smooth; scroll-padding-top: 20px; }
+
+ /* === TRADING CONSOLE: Light Mode (professional clean) === */
+ body.trading-console {
+ --tc-accent: #1E8E3E;
+ --tc-accent-bg: rgba(30,142,62,0.08);
+ --tc-accent-border: rgba(30,142,62,0.15);
+ --tc-glass: rgba(255,255,255,0.85);
+ --tc-grid: rgba(0,0,0,0.06);
+ background: var(--bg);
+ color: var(--text);
+ }
+
+ /* === TRADING CONSOLE: Dark Mode (Bloomberg terminal) === */
+ [data-theme="dark"] body.trading-console {
+ --bg: #0D1117;
+ --card: #131A24;
+ --text: #E2E8F0;
+ --text-secondary: #94A3B8;
+ --text-muted: #64748B;
+ --border: rgba(0,255,136,0.1);
+ --green: #00FF88;
+ --green-bg: rgba(0,255,136,0.08);
+ --blue: #58A6FF;
+ --blue-bg: rgba(88,166,255,0.08);
+ --orange: #F0883E;
+ --orange-bg: rgba(240,136,62,0.08);
+ --red: #FF4444;
+ --red-bg: rgba(255,68,68,0.08);
+ --purple: #BC8CFF;
+ --purple-bg: rgba(188,140,255,0.08);
+ --admin-accent: #00FF88;
+ --admin-bg: rgba(0,255,136,0.05);
+ --tc-accent: #00FF88;
+ --tc-accent-bg: rgba(0,255,136,0.08);
+ --tc-accent-border: rgba(0,255,136,0.15);
+ --tc-glass: rgba(15,25,35,0.92);
+ --tc-grid: rgba(0,255,136,0.06);
+ background: #0A0F18 !important;
+ color: var(--text);
+ color-scheme: dark;
+ }
+
+ /* Console Cards - Light */
+ body.trading-console .hero-card,
+ body.trading-console .chart-card,
+ body.trading-console .metric-card,
+ body.trading-console .filter-bar {
+ background: var(--card);
+ border: 1px solid var(--border);
+ box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+ }
+ /* Console Cards - Dark */
+ [data-theme="dark"] body.trading-console .hero-card,
+ [data-theme="dark"] body.trading-console .chart-card,
+ [data-theme="dark"] body.trading-console .metric-card,
+ [data-theme="dark"] body.trading-console .filter-bar {
+ background: rgba(255,255,255,0.03);
+ border: 1px solid rgba(0,255,136,0.1);
+ box-shadow: 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,255,136,0.05);
+ }
+
+ /* Console Values - Light: clean professional */
+ body.trading-console .hero-value {
+ font-variant-numeric: tabular-nums;
+ }
+ /* Console Values - Dark: monospace terminal */
+ [data-theme="dark"] body.trading-console .hero-value {
+ font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+ text-shadow: 0 0 8px rgba(226,232,240,0.15);
+ }
+
+ /* Console Section Titles - Light */
+ body.trading-console .section-title {
+ color: var(--text-secondary);
+ letter-spacing: 1px;
+ }
+ body.trading-console .section-title .icon {
+ background: var(--tc-accent-bg) !important;
+ color: var(--tc-accent) !important;
+ }
+ /* Console Section Titles - Dark */
+ [data-theme="dark"] body.trading-console .section-title {
+ color: rgba(0,255,136,0.7);
+ font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+ letter-spacing: 2px;
+ }
+ [data-theme="dark"] body.trading-console .section-title .icon {
+ background: rgba(0,255,136,0.08) !important;
+ color: #00FF88 !important;
+ }
+
+ /* Console Tables - Light */
+ body.trading-console .data-table th {
+ background: var(--bg);
+ color: var(--text-muted);
+ }
+ /* Console Tables - Dark */
+ [data-theme="dark"] body.trading-console .data-table th {
+ background: rgba(0,255,136,0.03);
+ color: rgba(0,255,136,0.6);
+ font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+ }
+ [data-theme="dark"] body.trading-console .data-table td {
+ font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+ font-size: 12px;
+ border-bottom-color: rgba(0,255,136,0.06);
+ }
+ [data-theme="dark"] body.trading-console .data-table tr:hover td {
+ background: rgba(0,255,136,0.05);
+ }
+
+ /* Console Buttons - Dark only overrides */
+ [data-theme="dark"] body.trading-console .preset-btn {
+ background: rgba(255,255,255,0.03);
+ color: var(--text-secondary);
+ border-color: rgba(0,255,136,0.1);
+ }
+ [data-theme="dark"] body.trading-console .preset-btn:hover {
+ border-color: #00FF88; color: #00FF88;
+ }
+ [data-theme="dark"] body.trading-console .preset-btn.active {
+ background: rgba(0,255,136,0.15);
+ color: #00FF88; border-color: rgba(0,255,136,0.3);
+ }
+ [data-theme="dark"] body.trading-console .date-inputs input[type="date"] {
+ background: rgba(255,255,255,0.03);
+ color: var(--text); border-color: rgba(0,255,136,0.1);
+ }
+
+ /* Console Loading - Dark */
+ [data-theme="dark"] body.trading-console .loading-overlay { background: rgba(10,15,24,0.85); }
+
+ /* Console Footer - Dark */
+ [data-theme="dark"] body.trading-console .app-footer {
+ background: #0A0F18; border-top-color: rgba(0,255,136,0.1); color: var(--text-muted);
+ }
+
+ /* Console Scrollbars - Dark */
+ [data-theme="dark"] body.trading-console ::-webkit-scrollbar { width: 6px; height: 6px; }
+ [data-theme="dark"] body.trading-console ::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
+ [data-theme="dark"] body.trading-console ::-webkit-scrollbar-thumb { background: rgba(0,255,136,0.2); border-radius: 3px; }
+ [data-theme="dark"] body.trading-console ::-webkit-scrollbar-thumb:hover { background: rgba(0,255,136,0.35); }
+
+ /* Filter Bar */
+ .filter-bar {
+ background: var(--card); border-radius: 16px; padding: 20px 24px;
+ border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+ margin-bottom: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
+ }
+ .filter-bar-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
+ .filter-presets { display: flex; gap: 8px; }
+ .preset-btn {
+ padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px;
+ background: var(--bg); font-size: 13px; font-weight: 600; cursor: pointer;
+ color: var(--text-secondary); transition: all 0.15s; font-family: inherit;
+ }
+ .preset-btn:hover { border-color: var(--admin-accent); color: var(--admin-accent); }
+ .preset-btn.active {
+ background: var(--admin-accent); color: white; border-color: var(--admin-accent);
+ }
+ .filter-divider { width: 1px; height: 32px; background: var(--border); }
+ .date-inputs { display: flex; align-items: center; gap: 8px; }
+ .date-inputs label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
+ .date-inputs input[type="date"] {
+ padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
+ font-size: 13px; font-family: inherit; background: var(--bg); color: var(--text);
+ }
+ .period-info {
+ margin-left: auto; font-size: 12px; color: var(--text-muted);
+ font-weight: 500; background: var(--bg); padding: 6px 12px; border-radius: 6px;
+ }
+
+ /* Export Button */
+ .btn-export {
+ padding: 8px 18px; border: 1px solid var(--border); border-radius: 8px;
+ background: var(--bg); font-size: 13px; font-weight: 600; cursor: pointer;
+ color: var(--text-secondary); transition: all 0.15s; font-family: inherit;
+ display: inline-flex; align-items: center; gap: 6px;
+ }
+ .btn-export:hover { border-color: var(--admin-accent); color: var(--admin-accent); }
+ [data-theme="dark"] body.trading-console .btn-export {
+ background: rgba(255,255,255,0.03);
+ color: var(--text-secondary);
+ border-color: rgba(0,255,136,0.1);
+ }
+ [data-theme="dark"] body.trading-console .btn-export:hover {
+ border-color: #00FF88; color: #00FF88;
+ }
+
+ /* Hero KPI Cards */
+ .hero-grid {
+ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px;
+ }
+ .hero-card {
+ background: var(--card); border-radius: 16px; padding: 20px 18px;
+ border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+ position: relative; overflow: hidden;
+ min-width: 0;
+ }
+ .hero-card::before {
+ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
+ }
+ .hero-card.providers-count::before { background: linear-gradient(90deg, var(--purple), #AB47BC); }
+ .hero-card.success-rate::before { background: linear-gradient(90deg, var(--green), #4CAF50); }
+ .hero-card.total-volume::before { background: linear-gradient(90deg, var(--blue), #42A5F5); }
+ .hero-card.settlement::before { background: linear-gradient(90deg, var(--orange), #FFA726); }
+ .hero-label {
+ font-size: 11px; font-weight: 700; color: var(--text-muted);
+ text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
+ }
+ .hero-value {
+ font-size: clamp(14px, 1.6vw, 26px); font-weight: 800; color: var(--text); margin-bottom: 4px;
+ font-variant-numeric: tabular-nums;
+ word-break: break-word; overflow-wrap: break-word;
+ min-width: 0; line-height: 1.2;
+ }
+ .hero-sub { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
+
+ /* Section Headers */
+ .section-title {
+ font-size: 14px; font-weight: 700; color: var(--text-secondary);
+ text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px;
+ display: flex; align-items: center; gap: 8px;
+ }
+ .section-title .icon {
+ width: 28px; height: 28px; border-radius: 8px; display: flex;
+ align-items: center; justify-content: center; font-size: 14px;
+ }
+
+ /* Charts Grid */
+ .charts-row {
+ display: grid; grid-template-columns: 1fr 2fr; gap: 20px; margin-bottom: 28px;
+ }
+ .charts-row.equal { grid-template-columns: 1fr 1fr; }
+ .charts-row.triple { grid-template-columns: 1fr 1fr 1fr; }
+ .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; color: var(--text); margin-bottom: 16px;
+ display: flex; align-items: center; gap: 8px;
+ }
+ .chart-card h3 .badge {
+ font-size: 10px; padding: 3px 8px; border-radius: 10px;
+ font-weight: 700; background: var(--bg); color: var(--text-muted);
+ }
+ .chart-wrap { position: relative; height: 280px; }
+ .chart-wrap.short { height: 220px; }
+
+ /* Data Tables */
+ .data-table {
+ width: 100%; border-collapse: collapse; font-size: 13px;
+ }
+ .data-table th {
+ text-align: left; padding: 10px 12px; font-weight: 700; font-size: 11px;
+ text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted);
+ border-bottom: 2px solid var(--border);
+ cursor: pointer; user-select: none; white-space: nowrap;
+ }
+ .data-table th:hover { color: var(--tc-accent); }
+ .data-table th .sort-arrow { font-size: 9px; margin-left: 4px; opacity: 0.5; }
+ .data-table th.sorted .sort-arrow { opacity: 1; }
+ .data-table td {
+ padding: 10px 12px; border-bottom: 1px solid var(--border);
+ color: var(--text); font-variant-numeric: tabular-nums;
+ }
+ .data-table tr:last-child td { border-bottom: none; }
+ .data-table tr:hover td { background: var(--bg); }
+
+ /* Status badges */
+ .status-badge {
+ display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px;
+ border-radius: 12px;
+ }
+ .status-badge.good { background: var(--green-bg); color: var(--green); }
+ .status-badge.warning { background: var(--orange-bg); color: var(--orange); }
+ .status-badge.bad { background: var(--red-bg); color: var(--red); }
+
+ /* Loading */
+ .loading-overlay {
+ position: absolute; inset: 0; background: rgba(255,255,255,0.8);
+ display: flex; align-items: center; justify-content: center;
+ border-radius: 16px; z-index: 10; font-size: 13px; color: var(--text-muted);
+ }
+
+ /* Responsive - Small Desktop */
+ @media (max-width: 1200px) {
+ .hero-grid { grid-template-columns: repeat(2, 1fr); }
+ .hero-value { font-size: clamp(15px, 2.4vw, 22px); }
+ .charts-row.triple { grid-template-columns: 1fr 1fr; }
+ .charts-row.triple > :last-child { grid-column: span 2; }
+ }
+
+ /* Responsive - Tablet */
+ @media (max-width: 900px) {
+ .charts-row { grid-template-columns: 1fr; }
+ .charts-row.equal { grid-template-columns: 1fr; }
+ .charts-row.triple { grid-template-columns: 1fr; }
+ .charts-row.triple > :last-child { grid-column: span 1; }
+ .filter-divider { display: none; }
+ .filter-bar { gap: 10px; }
+ }
+
+ /* Responsive - Mobile */
+ @media (max-width: 768px) {
+ /* Filter bar - stack vertically */
+ .filter-bar {
+ padding: 14px 16px; gap: 10px;
+ flex-direction: column; align-items: stretch;
+ }
+ .filter-bar-label { text-align: center; }
+ .filter-presets { flex-wrap: wrap; justify-content: center; }
+ .preset-btn { padding: 10px 14px; min-height: 44px; font-size: 13px; flex: 1; min-width: 70px; text-align: center; }
+ .date-inputs {
+ flex-wrap: wrap; justify-content: center; gap: 6px;
+ }
+ .date-inputs input[type="date"] { flex: 1; min-width: 130px; min-height: 44px; }
+ .period-info { margin-left: 0; width: 100%; text-align: center; }
+
+ /* Hero KPIs */
+ .hero-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
+ .hero-card { padding: 16px 18px; border-radius: 12px; }
+ .hero-value { font-size: 22px; }
+ .hero-label { font-size: 10px; }
+ .hero-sub { font-size: 11px; }
+
+ /* Charts - single column */
+ .charts-row, .charts-row.equal, .charts-row.triple { grid-template-columns: 1fr; }
+ .chart-card { padding: 18px; border-radius: 12px; }
+ .chart-wrap { height: 250px; }
+
+ /* Tables - horizontal scroll */
+ .chart-card:has(.data-table) { padding: 18px 0; }
+ .chart-card:has(.data-table) > h3 { padding: 0 18px; }
+ .data-table { font-size: 12px; }
+ .data-table th { padding: 10px 10px; font-size: 10px; white-space: nowrap; }
+ .data-table td { padding: 10px 10px; white-space: nowrap; }
+ [style*="overflow-x:auto"], [style*="overflow:auto"] {
+ -webkit-overflow-scrolling: touch;
+ scrollbar-width: thin;
+ }
+
+ /* Section titles */
+ .section-title { font-size: 13px; margin-bottom: 12px; }
+ }
+
+ /* Responsive - Small Mobile */
+ @media (max-width: 480px) {
+ /* Filter compact */
+ .filter-bar { padding: 12px; }
+ .preset-btn { padding: 8px 10px; font-size: 12px; min-height: 40px; }
+ .date-inputs input[type="date"] { font-size: 12px; padding: 8px 10px; min-height: 40px; }
+
+ /* Hero - single column */
+ .hero-grid { grid-template-columns: 1fr; gap: 10px; }
+ .hero-card { padding: 14px 16px; }
+ .hero-value { font-size: 20px; }
+
+ /* Charts compact */
+ .chart-card { padding: 14px; }
+ .chart-wrap { height: 200px; }
+ .chart-wrap.short { height: 160px; }
+ .chart-card h3 { font-size: 13px; }
+
+ /* Tables even more compact */
+ .data-table { font-size: 11px; }
+ .data-table th { padding: 8px 6px; font-size: 9px; }
+ .data-table td { padding: 8px 6px; }
+
+ /* Section titles */
+ .section-title { font-size: 12px; letter-spacing: 0.5px; }
+ .section-title .icon { width: 24px; height: 24px; font-size: 12px; }
+ }
+
+ /* Dark Mode overrides */
+ [data-theme="dark"] .loading-overlay { background: rgba(13,17,23,0.85); }
+ [data-theme="dark"] .preset-btn { background: var(--card); color: var(--text-secondary); border-color: var(--border); }
+ [data-theme="dark"] .preset-btn:hover { border-color: var(--admin-accent); color: var(--green); }
+ [data-theme="dark"] .date-inputs input[type="date"] { background: var(--card); color: var(--text); border-color: var(--border); }
+ [data-theme="dark"] .data-table tr:hover td { background: rgba(255,255,255,0.03); }
+ `;
+
+ return `
+
+
+${buildHead('Provider Performance', pageCSS, pageScripts)}
+
+
+
+${buildHeader({ role: role, userName: user.nome, activePage: 'providers' })}
+
+