1390 lines
90 KiB
JavaScript
1390 lines
90 KiB
JavaScript
/**
|
|
* Admin Cliente Dashboard - Visao 360 Estrategica por Cliente
|
|
* Health Score, Churn Risk, Revenue Intelligence, Netting, Behavioral Insights
|
|
*/
|
|
const { buildHeader, buildFooter, buildHead, getChartJsScript } = require('./ui-template');
|
|
|
|
function buildAdminClienteHTML(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 = `
|
|
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
|
|
|
|
/* === TRADING CONSOLE === */
|
|
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);
|
|
}
|
|
[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;
|
|
}
|
|
|
|
/* Cards */
|
|
body.trading-console .hero-card, body.trading-console .chart-card,
|
|
body.trading-console .metric-card, body.trading-console .filter-bar,
|
|
body.trading-console .profile-card, body.trading-console .intel-card {
|
|
background: var(--card); border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
|
}
|
|
[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,
|
|
[data-theme="dark"] body.trading-console .profile-card, [data-theme="dark"] body.trading-console .intel-card {
|
|
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);
|
|
}
|
|
body.trading-console .hero-value { font-variant-numeric: tabular-nums; }
|
|
[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);
|
|
}
|
|
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; }
|
|
[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; }
|
|
body.trading-console .data-table th { background: var(--bg); color: var(--text-muted); }
|
|
[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); }
|
|
[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 .gran-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 .gran-btn:hover { border-color: #F9A825; color: #F9A825; }
|
|
[data-theme="dark"] body.trading-console .gran-btn.active { background: rgba(249,168,37,0.15); color: #F9A825; border-color: rgba(249,168,37,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); }
|
|
[data-theme="dark"] body.trading-console .app-footer { background: #0A0F18; border-top-color: rgba(0,255,136,0.1); color: var(--text-muted); }
|
|
[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; }
|
|
|
|
/* === Console Nav === */
|
|
.console-nav { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 1000; display: flex; flex-direction: column; }
|
|
.console-nav-btn {
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
|
|
width: 38px; padding: 14px 0; background: var(--card); border: 1px solid var(--border);
|
|
border-right: none; border-radius: 8px 0 0 8px; margin-bottom: -1px;
|
|
color: var(--text-muted); font-size: 11px; font-weight: 600; cursor: pointer;
|
|
transition: all 0.2s; text-decoration: none; box-shadow: -2px 0 6px rgba(0,0,0,0.04);
|
|
}
|
|
.console-nav-btn:hover { color: var(--text); background: var(--bg); width: 42px; }
|
|
.console-nav-btn.active { color: var(--tc-accent); background: var(--bg); width: 44px; border-color: var(--tc-accent); border-right: 1px solid var(--bg); z-index: 2; }
|
|
[data-theme="dark"] .console-nav-btn { background: #161B22; border-color: rgba(0,255,136,0.1); color: rgba(255,255,255,0.35); }
|
|
[data-theme="dark"] .console-nav-btn:hover { background: #1A2332; color: rgba(255,255,255,0.7); }
|
|
[data-theme="dark"] .console-nav-btn.active { background: #0D1117; color: #00FF88; border-color: rgba(0,255,136,0.3); border-right-color: #0D1117; text-shadow: 0 0 8px rgba(0,255,136,0.4); }
|
|
.console-nav-btn .nav-icon { font-size: 15px; line-height: 1; }
|
|
.console-nav-btn .nav-label { writing-mode: vertical-rl; text-orientation: mixed; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
|
|
[data-theme="dark"] .console-nav-btn .nav-label { font-family: 'SF Mono','Fira Code','Consolas',monospace; }
|
|
@media (min-width: 769px) { body.trading-console .app-container { padding-right: 50px; } }
|
|
@media (max-width: 768px) { .console-nav-btn .nav-label { display: none; } .console-nav-btn { width: 36px; padding: 12px 0; } }
|
|
@media (max-width: 480px) { .console-nav-btn { width: 30px; padding: 10px 0; } .console-nav-btn .nav-icon { font-size: 13px; } }
|
|
|
|
/* === Client Search === */
|
|
.client-search-wrap { position: relative; max-width: 600px; margin: 0 auto 24px; }
|
|
.client-search-input {
|
|
width: 100%; padding: 14px 20px; border: 2px solid var(--border); border-radius: 12px;
|
|
font-size: 15px; font-family: inherit; background: var(--card); color: var(--text); transition: border-color 0.2s; outline: none;
|
|
}
|
|
.client-search-input:focus { border-color: var(--tc-accent); }
|
|
.client-search-input::placeholder { color: var(--text-muted); }
|
|
[data-theme="dark"] .client-search-input { background: rgba(255,255,255,0.03); border-color: rgba(0,255,136,0.15); }
|
|
[data-theme="dark"] .client-search-input:focus { border-color: #00FF88; }
|
|
.client-dropdown {
|
|
position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
|
|
background: var(--card); border: 1px solid var(--border); border-radius: 12px;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.15); max-height: 360px; overflow-y: auto; display: none; margin-top: 4px;
|
|
}
|
|
.client-dropdown.open { display: block; }
|
|
[data-theme="dark"] .client-dropdown { background: #161B22; border-color: rgba(0,255,136,0.15); }
|
|
.client-dropdown-item { padding: 12px 20px; cursor: pointer; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--border); transition: background 0.1s; }
|
|
.client-dropdown-item:last-child { border-bottom: none; }
|
|
.client-dropdown-item:hover { background: var(--bg); }
|
|
[data-theme="dark"] .client-dropdown-item:hover { background: rgba(0,255,136,0.05); }
|
|
.client-dropdown-item .item-id { font-size: 11px; color: var(--text-muted); margin-left: 8px; }
|
|
.client-selected-badge {
|
|
display: none; align-items: center; gap: 12px; padding: 12px 20px;
|
|
background: var(--tc-accent-bg); border: 1px solid var(--tc-accent-border); border-radius: 12px;
|
|
font-size: 15px; font-weight: 600; color: var(--text); max-width: 600px; margin: 0 auto 24px;
|
|
}
|
|
.client-selected-badge.visible { display: flex; }
|
|
.client-selected-badge .badge-name { flex: 1; }
|
|
.client-selected-badge .badge-clear {
|
|
background: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px;
|
|
font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-secondary); font-family: inherit;
|
|
}
|
|
.client-selected-badge .badge-clear:hover { border-color: var(--red); color: var(--red); }
|
|
|
|
/* Empty State */
|
|
.empty-state { text-align: center; padding: 40px 20px 20px; color: var(--text-muted); }
|
|
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.3; }
|
|
.empty-state h2 { font-size: 20px; font-weight: 700; margin-bottom: 6px; color: var(--text-secondary); }
|
|
.empty-state p { font-size: 14px; margin-bottom: 0; }
|
|
|
|
/* Top Clients Grid */
|
|
.top-clients-section { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
|
|
.top-clients-tier { margin-bottom: 20px; }
|
|
.tier-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 0 4px; }
|
|
.tier-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
|
.tier-dot.tier-high { background: var(--green, #1E8E3E); }
|
|
.tier-dot.tier-mid { background: var(--blue, #58A6FF); }
|
|
.tier-dot.tier-low { background: var(--orange, #F0883E); }
|
|
.tier-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
|
|
.tier-count { font-size: 11px; color: var(--text-muted); margin-left: auto; }
|
|
.top-clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
|
|
.top-client-card {
|
|
padding: 14px 16px; border-radius: 10px; cursor: pointer; transition: all 0.15s;
|
|
background: var(--card); border: 1px solid var(--border); position: relative; overflow: hidden;
|
|
}
|
|
.top-client-card:hover { border-color: var(--tc-accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
|
[data-theme="dark"] .top-client-card { background: rgba(255,255,255,0.02); }
|
|
[data-theme="dark"] .top-client-card:hover { background: rgba(0,255,136,0.04); border-color: #00FF88; box-shadow: 0 4px 16px rgba(0,255,136,0.08); }
|
|
.top-client-card .tc-rank { position: absolute; top: 8px; right: 10px; font-size: 10px; font-weight: 800; color: var(--text-muted); opacity: 0.5; }
|
|
.top-client-card .tc-name { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 24px; }
|
|
.top-client-card .tc-stats { display: flex; gap: 12px; font-size: 11px; color: var(--text-secondary); }
|
|
.top-client-card .tc-stats span { display: flex; align-items: center; gap: 3px; }
|
|
.top-client-card .tc-vol { font-weight: 700; color: var(--tc-accent); }
|
|
[data-theme="dark"] .top-client-card .tc-name { font-family: 'SF Mono','Fira Code','Consolas',monospace; }
|
|
@media (max-width: 480px) { .top-clients-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .top-client-card { padding: 10px 12px; } }
|
|
|
|
/* === Profile Card === */
|
|
.profile-card { border-radius: 16px; padding: 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
|
|
.profile-left { display: flex; align-items: center; gap: 16px; min-width: 200px; }
|
|
.profile-avatar {
|
|
width: 56px; height: 56px; border-radius: 50%; background: var(--tc-accent-bg); color: var(--tc-accent);
|
|
display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; flex-shrink: 0;
|
|
}
|
|
.profile-name { font-size: 20px; font-weight: 800; color: var(--text); }
|
|
.profile-id { font-size: 12px; color: var(--text-muted); }
|
|
.profile-stats { display: flex; gap: 20px; flex-wrap: wrap; flex: 1; }
|
|
.profile-stat { text-align: center; min-width: 70px; }
|
|
.profile-stat-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.profile-stat-value { font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
|
|
[data-theme="dark"] .profile-stat-value { font-family: 'SF Mono','Fira Code','Consolas',monospace; }
|
|
|
|
/* Health Score in Profile */
|
|
.health-score-box {
|
|
display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 90px;
|
|
padding: 12px 16px; border-radius: 12px; border: 2px solid var(--border);
|
|
}
|
|
.health-score-box.score-green { border-color: var(--green); background: var(--green-bg); }
|
|
.health-score-box.score-blue { border-color: var(--blue); background: var(--blue-bg); }
|
|
.health-score-box.score-orange { border-color: var(--orange); background: var(--orange-bg); }
|
|
.health-score-box.score-red { border-color: var(--red); background: var(--red-bg); }
|
|
.health-score-number { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
|
|
.health-score-number.green { color: var(--green); }
|
|
.health-score-number.blue { color: var(--blue); }
|
|
.health-score-number.orange { color: var(--orange); }
|
|
.health-score-number.red { color: var(--red); }
|
|
.health-score-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
|
|
[data-theme="dark"] .health-score-number { font-family: 'SF Mono','Fira Code','Consolas',monospace; text-shadow: 0 0 12px currentColor; }
|
|
|
|
/* === Filter Bar === */
|
|
.filter-bar { background: var(--card); border-radius: 16px; padding: 20px 24px; border: 1px solid var(--border); 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-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; }
|
|
.hero-card { background: var(--card); border-radius: 16px; padding: 18px 16px; border: 1px solid var(--border); position: relative; overflow: hidden; min-width: 0; }
|
|
.hero-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
|
|
.hero-card.volume::before { background: linear-gradient(90deg, var(--blue), #42A5F5); }
|
|
.hero-card.transactions::before { background: linear-gradient(90deg, var(--purple), #AB47BC); }
|
|
.hero-card.spread::before { background: linear-gradient(90deg, var(--green), #4CAF50); }
|
|
.hero-card.ticket::before { background: linear-gradient(90deg, #00897B, #26A69A); }
|
|
.hero-card.arpa::before { background: linear-gradient(90deg, #F9A825, #FFD54F); }
|
|
.hero-card.avgspread::before { background: linear-gradient(90deg, var(--orange), #FFA726); }
|
|
.hero-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
|
|
.hero-value { font-size: clamp(13px, 1.4vw, 24px); font-weight: 800; color: var(--text); margin-bottom: 4px; font-variant-numeric: tabular-nums; word-break: break-word; min-width: 0; line-height: 1.2; }
|
|
.hero-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 12px; }
|
|
.hero-badge.up { background: var(--green-bg); color: var(--green); }
|
|
.hero-badge.down { background: var(--red-bg); color: var(--red); }
|
|
.hero-badge.neutral { background: var(--blue-bg); color: var(--blue); }
|
|
.hero-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
|
|
|
|
/* === Sections === */
|
|
.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 */
|
|
.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
|
|
.charts-row.triple { grid-template-columns: 1fr 1fr 1fr; }
|
|
.charts-row.wide-left { grid-template-columns: 2fr 1fr; }
|
|
.chart-card { background: var(--card); border-radius: 16px; padding: 24px; border: 1px solid var(--border); }
|
|
.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; }
|
|
.gran-selector { display: flex; align-items: center; gap: 6px; }
|
|
.gran-btn { padding: 6px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-secondary); transition: all 0.15s; font-family: inherit; }
|
|
.gran-btn:hover { border-color: #F9A825; color: #F9A825; }
|
|
.gran-btn.active { background: #F9A825; color: white; border-color: #F9A825; }
|
|
|
|
/* === Intel Cards (Health/Risk/Netting) === */
|
|
.intel-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 28px; }
|
|
.intel-card { border-radius: 16px; padding: 24px; }
|
|
.intel-card h3 { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
|
|
|
|
/* Health Breakdown */
|
|
.health-gauge-wrap { display: flex; align-items: center; gap: 24px; }
|
|
.health-gauge { position: relative; width: 140px; height: 140px; flex-shrink: 0; }
|
|
.health-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
|
|
.health-gauge-bg { fill: none; stroke: var(--border); stroke-width: 10; }
|
|
.health-gauge-fill { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; }
|
|
.health-gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
|
.health-gauge-score { font-size: 36px; font-weight: 800; line-height: 1; }
|
|
.health-gauge-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
|
|
[data-theme="dark"] .health-gauge-score { font-family: 'SF Mono','Fira Code','Consolas',monospace; text-shadow: 0 0 16px currentColor; }
|
|
.health-breakdown { flex: 1; display: flex; flex-direction: column; gap: 8px; }
|
|
.health-row { display: flex; justify-content: space-between; align-items: center; }
|
|
.health-row-label { font-size: 12px; color: var(--text-secondary); }
|
|
.health-row-bar { width: 80px; height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
|
|
.health-row-fill { height: 100%; border-radius: 3px; transition: width 0.6s; }
|
|
.health-row-val { font-size: 12px; font-weight: 700; min-width: 30px; text-align: right; }
|
|
|
|
/* Risk Indicators */
|
|
.risk-level-badge { display: inline-block; padding: 4px 14px; border-radius: 8px; font-size: 12px; font-weight: 800; letter-spacing: 1px; }
|
|
.risk-level-badge.baixo { background: var(--green-bg); color: var(--green); }
|
|
.risk-level-badge.medio { background: var(--blue-bg); color: var(--blue); }
|
|
.risk-level-badge.alto { background: var(--orange-bg); color: var(--orange); }
|
|
.risk-level-badge.critico { background: var(--red-bg); color: var(--red); }
|
|
.risk-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
|
|
.risk-row:last-child { border-bottom: none; }
|
|
.risk-row-label { font-size: 12px; color: var(--text-secondary); }
|
|
.risk-row-value { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
|
|
.risk-row-value.positive { color: var(--green); }
|
|
.risk-row-value.negative { color: var(--red); }
|
|
.risk-row-value.neutral { color: var(--text-muted); }
|
|
|
|
/* Netting */
|
|
.netting-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
|
|
.netting-row:last-child { border-bottom: none; }
|
|
.netting-label { font-size: 13px; color: var(--text-secondary); font-weight: 600; }
|
|
.netting-value { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
|
|
.netting-value.green { color: var(--green); }
|
|
.netting-value.red { color: var(--red); }
|
|
.netting-value.blue { color: var(--blue); }
|
|
.gauge-bar { height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; margin: 8px 0; }
|
|
.gauge-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s; }
|
|
.gauge-bar-fill.green { background: linear-gradient(90deg, var(--green), #4CAF50); }
|
|
.gauge-bar-fill.blue { background: linear-gradient(90deg, var(--blue), #42A5F5); }
|
|
|
|
/* === Data Table === */
|
|
.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: 10px; margin-left: 4px; opacity: 0.4; }
|
|
.data-table th.sorted .sort-arrow { opacity: 1; color: var(--tc-accent); }
|
|
.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); }
|
|
.data-table tfoot td { font-weight: 700; border-top: 2px solid var(--border); background: var(--bg); }
|
|
.flow-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; }
|
|
.flow-tag.brl-usd { background: var(--blue-bg); color: var(--blue); }
|
|
.flow-tag.usd-brl { background: var(--green-bg); color: var(--green); }
|
|
|
|
/* Pagination */
|
|
.table-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; flex-wrap: wrap; }
|
|
.table-controls select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; font-family: inherit; background: var(--bg); color: var(--text); }
|
|
.pagination { display: flex; align-items: center; gap: 4px; }
|
|
.page-btn { padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-secondary); font-family: inherit; }
|
|
.page-btn:hover { border-color: var(--tc-accent); color: var(--tc-accent); }
|
|
.page-btn.active { background: var(--tc-accent); color: white; border-color: var(--tc-accent); }
|
|
.page-btn:disabled { opacity: 0.4; cursor: default; }
|
|
.page-info { font-size: 12px; color: var(--text-muted); }
|
|
.btn-export { padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-secondary); font-family: inherit; }
|
|
.btn-export:hover { border-color: var(--tc-accent); color: var(--tc-accent); }
|
|
|
|
/* Misc */
|
|
.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); }
|
|
[data-theme="dark"] .loading-overlay { background: rgba(13,17,23,0.85); }
|
|
.content-area { display: none; }
|
|
.content-area.visible { display: block; }
|
|
[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); }
|
|
|
|
/* === Skeleton Loading Shimmer === */
|
|
@keyframes shimmer {
|
|
0% { background-position: -400px 0; }
|
|
100% { background-position: 400px 0; }
|
|
}
|
|
.skel {
|
|
background: linear-gradient(90deg, var(--card-bg,var(--card)) 25%, var(--border) 50%, var(--card-bg,var(--card)) 75%);
|
|
background-size: 800px 100%;
|
|
animation: shimmer 1.5s infinite ease-in-out;
|
|
border-radius: 6px;
|
|
display: inline-block;
|
|
}
|
|
.skel-value { height: 32px; width: 55%; }
|
|
.skel-badge { height: 18px; width: 70px; }
|
|
.skel-text { height: 14px; width: 80%; margin: 4px 0; }
|
|
.skel-chart { height: 100%; width: 100%; min-height: 180px; border-radius: 12px; position: absolute; top: 0; left: 0; z-index: 2; }
|
|
.skel-row { height: 32px; margin: 6px 0; width: 100%; }
|
|
.skel-gauge { height: 40px; width: 90px; }
|
|
.skel-avatar { width: 56px; height: 56px; border-radius: 50%; }
|
|
.skel-name { height: 22px; width: 160px; }
|
|
.skel-stat { height: 18px; width: 70px; }
|
|
|
|
/* === Merchant / Checkout === */
|
|
.merchant-badge {
|
|
display: none; padding: 4px 12px; border-radius: 8px; font-size: 11px; font-weight: 800;
|
|
letter-spacing: 0.5px; background: var(--purple-bg); color: var(--purple, #7B1FA2);
|
|
text-transform: uppercase; margin-top: 4px;
|
|
}
|
|
.merchant-badge.visible { display: inline-block; }
|
|
.hero-card.checkout::before { background: linear-gradient(90deg, var(--purple, #7B1FA2), #AB47BC); }
|
|
.checkout-section { display: none; }
|
|
.checkout-section.visible { display: block; }
|
|
.flow-tag.checkout { background: var(--purple-bg); color: var(--purple, #7B1FA2); }
|
|
.top-payer-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; }
|
|
.top-payer-row:last-child { border-bottom: none; }
|
|
.top-payer-row:hover { background: var(--bg); }
|
|
[data-theme="dark"] .top-payer-row:hover { background: rgba(0,255,136,0.04); }
|
|
.top-payer-rank { width: 28px; font-size: 11px; font-weight: 800; color: var(--text-muted); text-align: center; }
|
|
.top-payer-info { flex: 1; min-width: 0; }
|
|
.top-payer-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.top-payer-stats { font-size: 11px; color: var(--text-muted); }
|
|
.top-payer-vol { font-size: 14px; font-weight: 700; color: var(--purple, #7B1FA2); font-variant-numeric: tabular-nums; }
|
|
[data-theme="dark"] .top-payer-vol { color: #BC8CFF; }
|
|
[data-theme="dark"] .top-payer-name { font-family: 'SF Mono','Fira Code','Consolas',monospace; }
|
|
|
|
/* === Responsive === */
|
|
@media (max-width: 1200px) { .hero-grid { grid-template-columns: repeat(3, 1fr); } .intel-grid { grid-template-columns: 1fr 1fr; } }
|
|
@media (max-width: 900px) { .charts-row, .charts-row.wide-left { grid-template-columns: 1fr; } .charts-row.triple { grid-template-columns: 1fr 1fr; } .charts-row.triple > :last-child { grid-column: span 2; } .intel-grid { grid-template-columns: 1fr; } .filter-divider { display: none; } .profile-card { flex-direction: column; text-align: center; } .profile-left { flex-direction: column; } .profile-stats { justify-content: center; } .health-gauge-wrap { flex-direction: column; align-items: center; } }
|
|
@media (max-width: 768px) { .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; flex: 1; min-width: 55px; text-align: center; } .date-inputs { flex-wrap: wrap; justify-content: center; } .date-inputs input[type="date"] { flex: 1; min-width: 130px; min-height: 44px; } .period-info { margin-left: 0; width: 100%; text-align: center; } .hero-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .hero-card { padding: 14px; } .hero-value { font-size: 20px; } .charts-row, .charts-row.triple { grid-template-columns: 1fr; } .charts-row.triple > :last-child { grid-column: span 1; } .chart-card { padding: 18px; } .chart-wrap { height: 250px; } .section-title { font-size: 13px; } .table-controls { flex-direction: column; align-items: stretch; } .data-table { font-size: 12px; } .data-table th { padding: 10px 8px; font-size: 10px; } .data-table td { padding: 10px 8px; white-space: nowrap; } }
|
|
@media (max-width: 480px) { .hero-grid { grid-template-columns: 1fr; } .chart-card { padding: 14px; } .chart-wrap { height: 200px; } .chart-wrap.short { height: 160px; } .data-table { font-size: 11px; } .data-table th { padding: 8px 6px; font-size: 9px; } .data-table td { padding: 8px 6px; } .intel-card { padding: 16px; } .health-gauge { width: 110px; height: 110px; } .health-gauge-score { font-size: 28px; } }
|
|
`;
|
|
|
|
return `<!DOCTYPE html>
|
|
<html lang="pt-BR">
|
|
<head>
|
|
${buildHead('Clientes 360', pageCSS, pageScripts)}
|
|
</head>
|
|
<body class="trading-console">
|
|
|
|
${buildHeader({ role: role, userName: user.nome, activePage: 'cliente', permissions: user.permissions || [] })}
|
|
|
|
<div class="app-container">
|
|
|
|
<!-- Client Search -->
|
|
<div class="client-search-wrap" id="searchWrap">
|
|
<input type="text" class="client-search-input" id="searchInput" placeholder="Buscar cliente por nome..." autocomplete="off">
|
|
<div class="client-dropdown" id="searchDropdown"></div>
|
|
</div>
|
|
<div class="client-selected-badge" id="selectedBadge">
|
|
<span class="badge-name" id="badgeName"></span>
|
|
<button class="badge-clear" onclick="clearClient()">Limpar</button>
|
|
</div>
|
|
|
|
<!-- Empty State + Top Clients -->
|
|
<div id="emptyState">
|
|
<div class="empty-state">
|
|
<div class="empty-icon">🔍</div>
|
|
<h2>Selecione um cliente</h2>
|
|
<p>Busque acima ou clique em um dos top clientes abaixo</p>
|
|
</div>
|
|
<div class="top-clients-section" id="topClientsSection"></div>
|
|
</div>
|
|
|
|
<!-- Content Area -->
|
|
<div class="content-area" id="contentArea">
|
|
|
|
<!-- Profile Card with Health Score -->
|
|
<div class="profile-card" id="profileCard">
|
|
<div class="profile-left">
|
|
<div class="profile-avatar" id="profileAvatar"><div class="skel skel-avatar"></div></div>
|
|
<div>
|
|
<div class="profile-name" id="profileName"><div class="skel skel-name"></div></div>
|
|
<div class="profile-id" id="profileId"><div class="skel skel-text"></div></div>
|
|
<div class="merchant-badge" id="merchantBadge">MERCHANT</div>
|
|
</div>
|
|
</div>
|
|
<div class="profile-stats">
|
|
<div class="profile-stat"><div class="profile-stat-label">Primeira Op</div><div class="profile-stat-value" id="profileFirstOp"><div class="skel skel-stat"></div></div></div>
|
|
<div class="profile-stat"><div class="profile-stat-label">Ultima Op</div><div class="profile-stat-value" id="profileLastOp"><div class="skel skel-stat"></div></div></div>
|
|
<div class="profile-stat"><div class="profile-stat-label">Meses Ativo</div><div class="profile-stat-value" id="profileMonths"><div class="skel skel-stat"></div></div></div>
|
|
<div class="profile-stat"><div class="profile-stat-label">LTV (Receita)</div><div class="profile-stat-value" id="profileLTV"><div class="skel skel-stat"></div></div></div>
|
|
<div class="profile-stat"><div class="profile-stat-label">Vol. Lifetime</div><div class="profile-stat-value" id="profileVolume"><div class="skel skel-stat"></div></div></div>
|
|
<div class="profile-stat"><div class="profile-stat-label">Ops Lifetime</div><div class="profile-stat-value" id="profileOps"><div class="skel skel-stat"></div></div></div>
|
|
</div>
|
|
<div class="health-score-box" id="healthScoreBox">
|
|
<div class="health-score-number" id="healthScoreNum"><div class="skel skel-gauge"></div></div>
|
|
<div class="health-score-label" id="healthScoreLabel">Health</div>
|
|
</div>
|
|
<div id="churnRisk" style="padding:0 16px 16px;"></div>
|
|
</div>
|
|
|
|
<!-- Date Filter -->
|
|
<div class="filter-bar" id="filterBar">
|
|
<span class="filter-bar-label">Periodo:</span>
|
|
<div class="filter-presets">
|
|
<button class="preset-btn" data-preset="7d">7d</button>
|
|
<button class="preset-btn active" data-preset="30d">30d</button>
|
|
<button class="preset-btn" data-preset="90d">90d</button>
|
|
<button class="preset-btn" data-preset="ytd">YTD</button>
|
|
<button class="preset-btn" data-preset="all">Tudo</button>
|
|
</div>
|
|
<div class="filter-divider"></div>
|
|
<div class="date-inputs">
|
|
<label>De:</label><input type="date" id="dateStart" value="${thirtyDaysAgo}">
|
|
<label>Ate:</label><input type="date" id="dateEnd" value="${today}">
|
|
</div>
|
|
<span class="period-info" id="periodInfo">--</span>
|
|
<button class="export-btn" onclick="window.location.href='/admin/api/export/clients-excel'" title="Export Top Clients to Excel">Export Excel</button>
|
|
</div>
|
|
|
|
<!-- CambioPay label (merchant only) -->
|
|
<div class="checkout-section" id="cambioPayLabel">
|
|
<div class="section-title">
|
|
<span class="icon">💱</span>
|
|
CambioPay (Transfers)
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hero KPIs (6) -->
|
|
<div class="hero-grid" id="heroGrid">
|
|
<div class="hero-card volume"><div class="hero-label">Volume USD</div><div class="hero-value" id="kpiVolume"><div class="skel skel-value"></div></div><span class="hero-badge neutral" id="kpiVolBadge"><div class="skel skel-badge"></div></span></div>
|
|
<div class="hero-card transactions"><div class="hero-label">Transacoes</div><div class="hero-value" id="kpiTx"><div class="skel skel-value"></div></div><span class="hero-badge neutral" id="kpiTxBadge"><div class="skel skel-badge"></div></span></div>
|
|
<div class="hero-card spread"><div class="hero-label">Receita USD</div><div class="hero-value" id="kpiSpread"><div class="skel skel-value"></div></div><span class="hero-badge neutral" id="kpiSpreadBadge"><div class="skel skel-badge"></div></span></div>
|
|
<div class="hero-card ticket"><div class="hero-label">Ticket Medio</div><div class="hero-value" id="kpiTicket"><div class="skel skel-value"></div></div><div class="hero-sub">USD / operacao</div></div>
|
|
<div class="hero-card arpa"><div class="hero-label">ARPA</div><div class="hero-value" id="kpiARPA"><div class="skel skel-value"></div></div><div class="hero-sub">receita / mes</div></div>
|
|
<div class="hero-card avgspread"><div class="hero-label">Spread Medio</div><div class="hero-value" id="kpiAvgSpread"><div class="skel skel-value"></div></div><div class="hero-sub">% ponderado</div></div>
|
|
</div>
|
|
|
|
<!-- Checkout KPIs (merchant only) -->
|
|
<div class="checkout-section" id="checkoutKpiSection">
|
|
<div class="section-title" id="sectionCheckout">
|
|
<span class="icon">🛒</span>
|
|
CambioCheckout (Merchant)
|
|
</div>
|
|
<div class="hero-grid" id="checkoutHeroGrid">
|
|
<div class="hero-card checkout"><div class="hero-label">Checkout Volume</div><div class="hero-value" id="ckVolume"><div class="skel skel-value"></div></div><span class="hero-badge neutral" id="ckVolBadge"><div class="skel skel-badge"></div></span></div>
|
|
<div class="hero-card checkout"><div class="hero-label">Payers Unicos</div><div class="hero-value" id="ckPayers"><div class="skel skel-value"></div></div><div class="hero-sub">pagadores distintos</div></div>
|
|
<div class="hero-card checkout"><div class="hero-label">Receita Checkout</div><div class="hero-value" id="ckRevenue"><div class="skel skel-value"></div></div><span class="hero-badge neutral" id="ckRevBadge"><div class="skel skel-badge"></div></span></div>
|
|
<div class="hero-card checkout"><div class="hero-label">Checkout Ops</div><div class="hero-value" id="ckOps"><div class="skel skel-value"></div></div><span class="hero-badge neutral" id="ckOpsBadge"><div class="skel skel-badge"></div></span></div>
|
|
<div class="hero-card checkout"><div class="hero-label">Ticket Checkout</div><div class="hero-value" id="ckTicket"><div class="skel skel-value"></div></div><div class="hero-sub">USD / operacao</div></div>
|
|
<div class="hero-card checkout"><div class="hero-label">Spread Checkout</div><div class="hero-value" id="ckSpread"><div class="skel skel-value"></div></div><div class="hero-sub">% medio</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Checkout Analytics (merchant only) -->
|
|
<div class="checkout-section" id="checkoutAnalyticsSection">
|
|
<div class="charts-row wide-left">
|
|
<div class="chart-card">
|
|
<h3>Checkout Mensal: Volume + Payers</h3>
|
|
<div class="chart-wrap"><div class="skel skel-chart" id="skelCheckoutMonthly"></div><canvas id="chartCheckoutMonthly"></canvas></div>
|
|
</div>
|
|
<div class="chart-card">
|
|
<h3>Top 10 Pagadores</h3>
|
|
<div id="topPayersList" style="max-height:310px;overflow-y:auto;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section: Saude & Risco -->
|
|
<div class="section-title" id="sectionHealth">
|
|
<span class="icon">🎯</span>
|
|
Saude & Inteligencia de Risco
|
|
</div>
|
|
<div class="intel-grid">
|
|
<div class="intel-card">
|
|
<h3>Health Score</h3>
|
|
<div class="health-gauge-wrap">
|
|
<div class="health-gauge">
|
|
<svg viewBox="0 0 140 140"><circle class="health-gauge-bg" cx="70" cy="70" r="60"/><circle class="health-gauge-fill" id="healthGaugeFill" cx="70" cy="70" r="60" stroke-dasharray="377" stroke-dashoffset="377"/></svg>
|
|
<div class="health-gauge-center"><div class="health-gauge-score" id="healthGaugeScore"><div class="skel skel-gauge"></div></div><div class="health-gauge-label" id="healthGaugeLabel"><div class="skel skel-text"></div></div></div>
|
|
</div>
|
|
<div class="health-breakdown" id="healthBreakdown">
|
|
<div class="health-row"><span class="health-row-label">Volume</span><div class="health-row-bar"><div class="health-row-fill" id="hbVol" style="width:0%;background:var(--blue);"></div></div><span class="health-row-val" id="hbVolVal">0</span></div>
|
|
<div class="health-row"><span class="health-row-label">Frequencia</span><div class="health-row-bar"><div class="health-row-fill" id="hbFreq" style="width:0%;background:var(--green);"></div></div><span class="health-row-val" id="hbFreqVal">0</span></div>
|
|
<div class="health-row"><span class="health-row-label">Recencia</span><div class="health-row-bar"><div class="health-row-fill" id="hbRec" style="width:0%;background:var(--orange);"></div></div><span class="health-row-val" id="hbRecVal">0</span></div>
|
|
<div class="health-row"><span class="health-row-label">Crescimento</span><div class="health-row-bar"><div class="health-row-fill" id="hbGrow" style="width:0%;background:var(--purple);"></div></div><span class="health-row-val" id="hbGrowVal">0</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="intel-card">
|
|
<h3>Indicadores de Churn</h3>
|
|
<div style="margin-bottom:12px;text-align:center;"><span class="risk-level-badge" id="riskBadge"><div class="skel skel-badge"></div></span></div>
|
|
<div id="riskIndicators">
|
|
<div class="risk-row"><span class="risk-row-label">Variacao Volume</span><span class="risk-row-value neutral" id="riskVol"><div class="skel skel-badge"></div></span></div>
|
|
<div class="risk-row"><span class="risk-row-label">Variacao Transacoes</span><span class="risk-row-value neutral" id="riskTx"><div class="skel skel-badge"></div></span></div>
|
|
<div class="risk-row"><span class="risk-row-label">Dias Inativo</span><span class="risk-row-value neutral" id="riskDays"><div class="skel skel-badge"></div></span></div>
|
|
<div class="risk-row"><span class="risk-row-label">Intervalo Medio</span><span class="risk-row-value neutral" id="riskInterval"><div class="skel skel-badge"></div></span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="intel-card">
|
|
<h3>Netting & Posicao</h3>
|
|
<div id="nettingContent">
|
|
<div class="netting-row"><span class="netting-label">Saida (BRL→USD)</span><span class="netting-value red" id="netOut"><div class="skel skel-badge"></div></span></div>
|
|
<div class="netting-row"><span class="netting-label">Entrada (USD→BRL)</span><span class="netting-value green" id="netIn"><div class="skel skel-badge"></div></span></div>
|
|
<div class="netting-row" style="border-top:2px solid var(--border);padding-top:12px;"><span class="netting-label" style="font-weight:700;">Posicao Liquida</span><span class="netting-value" id="netPos"><div class="skel skel-badge"></div></span></div>
|
|
<div style="margin-top:12px;"><div style="font-size:11px;color:var(--text-muted);margin-bottom:4px;">Eficiencia Netting</div><div class="netting-value blue" id="netEff" style="font-size:24px;"><div class="skel skel-gauge"></div></div><div class="gauge-bar"><div class="gauge-bar-fill blue" id="netEffBar" style="width:0%"></div></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section: Revenue Intelligence -->
|
|
<div class="section-title" id="sectionRevenue">
|
|
<span class="icon">💰</span>
|
|
Revenue Intelligence
|
|
</div>
|
|
<div class="charts-row">
|
|
<div class="chart-card">
|
|
<h3>Receita USD Mensal + Volume</h3>
|
|
<div class="chart-wrap"><div class="skel skel-chart" id="skelMonthlyRev"></div><canvas id="chartMonthlyRev"></canvas></div>
|
|
</div>
|
|
<div class="chart-card">
|
|
<h3>Crescimento MoM %</h3>
|
|
<div class="chart-wrap"><div class="skel skel-chart" id="skelMoM"></div><canvas id="chartMoM"></canvas></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section: Timeline -->
|
|
<div class="section-title" id="sectionTimeline">
|
|
<span class="icon">📈</span>
|
|
Linha do Tempo
|
|
</div>
|
|
<div class="chart-card" style="margin-bottom:28px;">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
|
|
<h3 style="margin:0;">Volume + Quantidade Diaria</h3>
|
|
<div class="gran-selector">
|
|
<button class="gran-btn active" data-tl-gran="D">D</button>
|
|
<button class="gran-btn" data-tl-gran="W">W</button>
|
|
<button class="gran-btn" data-tl-gran="M">M</button>
|
|
</div>
|
|
</div>
|
|
<div class="chart-wrap"><div class="skel skel-chart" id="skelTimeline"></div><canvas id="chartTimeline"></canvas></div>
|
|
</div>
|
|
|
|
<!-- Section: Flow Analysis -->
|
|
<div class="section-title" id="sectionFlows">
|
|
<span class="icon">⇄</span>
|
|
Analise de Fluxo
|
|
</div>
|
|
<div class="charts-row">
|
|
<div class="chart-card">
|
|
<h3>BRL→USD vs USD→BRL</h3>
|
|
<div class="chart-wrap short"><div class="skel skel-chart" id="skelFlowDonut"></div><canvas id="chartFlowDonut"></canvas></div>
|
|
</div>
|
|
<div class="chart-card">
|
|
<h3>Tendencia Spread % por Fluxo</h3>
|
|
<div class="chart-wrap"><div class="skel skel-chart" id="skelSpreadTrend"></div><canvas id="chartSpreadTrend"></canvas></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section: Transactions -->
|
|
<div class="section-title" id="sectionTable">
|
|
<span class="icon">📋</span>
|
|
Historico de Transacoes
|
|
</div>
|
|
<div class="chart-card" style="margin-bottom:28px;">
|
|
<div class="table-controls">
|
|
<div style="display:flex;align-items:center;gap:12px;">
|
|
<span class="page-info" id="tableInfo">--</span>
|
|
<select id="pageSizeSelect"><option value="25" selected>25</option><option value="50">50</option><option value="100">100</option></select>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:8px;">
|
|
<button class="btn-export" onclick="exportCSV()">CSV</button>
|
|
<div class="pagination" id="pagination"></div>
|
|
</div>
|
|
</div>
|
|
<div style="overflow-x:auto;-webkit-overflow-scrolling:touch;">
|
|
<table class="data-table" id="txTable">
|
|
<thead><tr>
|
|
<th data-col="date">Data <span class="sort-arrow">▲</span></th>
|
|
<th data-col="flow">Fluxo <span class="sort-arrow">▲</span></th>
|
|
<th data-col="usd">USD <span class="sort-arrow">▲</span></th>
|
|
<th data-col="brl">BRL <span class="sort-arrow">▲</span></th>
|
|
<th data-col="rate">Taxa <span class="sort-arrow">▲</span></th>
|
|
<th data-col="ptax">PTAX <span class="sort-arrow">▲</span></th>
|
|
<th data-col="spread_pct">Spread% <span class="sort-arrow">▲</span></th>
|
|
<th data-col="iof">IOF <span class="sort-arrow">▲</span></th>
|
|
<th data-col="status">Status <span class="sort-arrow">▲</span></th>
|
|
<th data-col="provider">Provider <span class="sort-arrow">▲</span></th>
|
|
</tr></thead>
|
|
<tbody id="txTableBody"><tr class="skel-tr"><td colspan="10"><div class="skel skel-row"></div></td></tr><tr class="skel-tr"><td colspan="10"><div class="skel skel-row"></div></td></tr><tr class="skel-tr"><td colspan="10"><div class="skel skel-row"></div></td></tr></tbody>
|
|
<tfoot id="txTableFoot"></tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section: Behavioral Insights -->
|
|
<div class="section-title" id="sectionInsights">
|
|
<span class="icon">🧠</span>
|
|
Insights Comportamentais
|
|
</div>
|
|
<div class="charts-row triple">
|
|
<div class="chart-card"><h3>Atividade por Dia da Semana</h3><div class="chart-wrap short"><div class="skel skel-chart" id="skelDow"></div><canvas id="chartDow"></canvas></div></div>
|
|
<div class="chart-card"><h3>Ticket Medio Mensal</h3><div class="chart-wrap short"><div class="skel skel-chart" id="skelAvgSize"></div><canvas id="chartAvgSize"></canvas></div></div>
|
|
<div class="chart-card"><h3>Providers / Metodos</h3><div class="chart-wrap short"><div class="skel skel-chart" id="skelProvider"></div><canvas id="chartProvider"></canvas></div></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Console Nav -->
|
|
<nav class="console-nav" id="consoleNav" style="display:none;">
|
|
<a href="#searchWrap" class="console-nav-btn" data-section="searchWrap"><span class="nav-icon">🔍</span><span class="nav-label">Busca</span></a>
|
|
<a href="#heroGrid" class="console-nav-btn" data-section="heroGrid"><span class="nav-icon">📊</span><span class="nav-label">KPIs</span></a>
|
|
<a href="#sectionCheckout" class="console-nav-btn checkout-section" data-section="sectionCheckout"><span class="nav-icon">🛒</span><span class="nav-label">Checkout</span></a>
|
|
<a href="#sectionHealth" class="console-nav-btn" data-section="sectionHealth"><span class="nav-icon">🎯</span><span class="nav-label">Saude</span></a>
|
|
<a href="#sectionRevenue" class="console-nav-btn" data-section="sectionRevenue"><span class="nav-icon">💰</span><span class="nav-label">Revenue</span></a>
|
|
<a href="#sectionTimeline" class="console-nav-btn" data-section="sectionTimeline"><span class="nav-icon">📈</span><span class="nav-label">Timeline</span></a>
|
|
<a href="#sectionFlows" class="console-nav-btn" data-section="sectionFlows"><span class="nav-icon">⇄</span><span class="nav-label">Fluxos</span></a>
|
|
<a href="#sectionTable" class="console-nav-btn" data-section="sectionTable"><span class="nav-icon">📋</span><span class="nav-label">Tabela</span></a>
|
|
<a href="#sectionInsights" class="console-nav-btn" data-section="sectionInsights"><span class="nav-icon">🧠</span><span class="nav-label">Insights</span></a>
|
|
</nav>
|
|
|
|
${buildFooter()}
|
|
|
|
<script>
|
|
// === State ===
|
|
var selectedClientId = null, profileData = null, clientData = null;
|
|
var currentStart = '${thirtyDaysAgo}', currentEnd = '${today}';
|
|
var currentPage = 1, pageSize = 25, sortCol = 'date', sortDir = -1, timelineGran = 'D';
|
|
|
|
// === Formatters ===
|
|
function fmtUSD(v) { return '$' + Number(v).toLocaleString('en-US', {minimumFractionDigits:0, maximumFractionDigits:0}); }
|
|
function fmtBRL(v) { return 'R$' + Number(v).toLocaleString('pt-BR', {minimumFractionDigits:2, maximumFractionDigits:2}); }
|
|
function fmtPct(v) { return Number(v).toFixed(2) + '%'; }
|
|
function fmtDate(d) { if (!d) return '--'; var p = d.slice(0,10).split('-'); return p[2]+'/'+p[1]+'/'+p[0]; }
|
|
function fmtDateShort(d) { var p = d.split('-'); return p[2]+'/'+p[1]; }
|
|
function badge(cur, prev) {
|
|
if (!prev || prev === 0) return {cls:'neutral', text:'N/A'};
|
|
var pct = ((cur - prev) / Math.abs(prev) * 100).toFixed(1);
|
|
return pct > 0 ? {cls:'up', text:'+'+pct+'%'} : pct < 0 ? {cls:'down', text:pct+'%'} : {cls:'neutral', text:'0%'};
|
|
}
|
|
|
|
// === Theme ===
|
|
function getChartTheme() {
|
|
var dk = document.documentElement.getAttribute('data-theme') === 'dark';
|
|
return dk ? {
|
|
text:'#94A3B8', grid:'rgba(0,255,136,0.06)', tooltipBg:'#1A2332', tooltipTitle:'#E2E8F0', tooltipBody:'#94A3B8', tooltipBorder:'rgba(0,255,136,0.15)',
|
|
donutColors:['#58A6FF','#00FF88'], volumeBar:'rgba(88,166,255,0.15)', volumeBorder:'rgba(88,166,255,0.4)', lineQtd:'#F9A825',
|
|
spreadBrl:'#58A6FF', spreadUsd:'#00FF88', revBar:'rgba(0,255,136,0.2)', revBorder:'rgba(0,255,136,0.5)', revLine:'#58A6FF',
|
|
momUp:'rgba(0,255,136,0.4)', momDown:'rgba(255,68,68,0.4)', momBorderUp:'#00FF88', momBorderDown:'#FF4444',
|
|
flowColors:['#58A6FF','#00FF88','#BC8CFF'], providerColors:['#58A6FF','#00FF88','#BC8CFF','#F9A825','#FF7043','#78909C','#FF6B9D','#7C8CFF'],
|
|
dowBar:'rgba(0,255,136,0.25)', dowBorder:'rgba(0,255,136,0.6)', avgLine:'#F9A825',
|
|
healthGreen:'#00FF88', healthBlue:'#58A6FF', healthOrange:'#F0883E', healthRed:'#FF4444'
|
|
} : {
|
|
text:'#5F6368', grid:'rgba(0,0,0,0.06)', tooltipBg:'#FFFFFF', tooltipTitle:'#1A1D23', tooltipBody:'#5F6368', tooltipBorder:'rgba(0,0,0,0.1)',
|
|
donutColors:['#1A73E8','#1E8E3E'], volumeBar:'rgba(26,115,232,0.12)', volumeBorder:'rgba(26,115,232,0.4)', lineQtd:'#F57C00',
|
|
spreadBrl:'#1A73E8', spreadUsd:'#1E8E3E', revBar:'rgba(30,142,62,0.15)', revBorder:'rgba(30,142,62,0.5)', revLine:'#1A73E8',
|
|
momUp:'rgba(30,142,62,0.3)', momDown:'rgba(217,48,37,0.3)', momBorderUp:'#1E8E3E', momBorderDown:'#D93025',
|
|
flowColors:['#1A73E8','#1E8E3E','#7B1FA2'], providerColors:['#1A73E8','#1E8E3E','#7B1FA2','#F57C00','#D84315','#546E7A','#D81B60','#3F51B5'],
|
|
dowBar:'rgba(30,142,62,0.2)', dowBorder:'rgba(30,142,62,0.6)', avgLine:'#F57C00',
|
|
healthGreen:'#1E8E3E', healthBlue:'#1A73E8', healthOrange:'#E8710A', healthRed:'#D93025'
|
|
};
|
|
}
|
|
function applyChartDefaults(t) {
|
|
if (typeof Chart === 'undefined') return;
|
|
Chart.defaults.color = t.text; Chart.defaults.borderColor = t.grid;
|
|
Chart.defaults.plugins.legend.labels.color = t.text;
|
|
Chart.defaults.plugins.tooltip.backgroundColor = t.tooltipBg;
|
|
Chart.defaults.plugins.tooltip.titleColor = t.tooltipTitle;
|
|
Chart.defaults.plugins.tooltip.bodyColor = t.tooltipBody;
|
|
Chart.defaults.plugins.tooltip.borderColor = t.tooltipBorder;
|
|
Chart.defaults.plugins.tooltip.borderWidth = 1;
|
|
}
|
|
|
|
// === Skeleton helpers ===
|
|
function showChart(skelId) {
|
|
var s = document.getElementById(skelId);
|
|
if (s) s.remove();
|
|
}
|
|
|
|
// === Charts ===
|
|
var chartTimeline, chartFlowDonut, chartSpreadTrend, chartDow, chartAvgSize, chartProvider, chartMonthlyRev, chartMoM, chartCheckoutMonthly;
|
|
function destroyAllCharts() {
|
|
[chartTimeline, chartFlowDonut, chartSpreadTrend, chartDow, chartAvgSize, chartProvider, chartMonthlyRev, chartMoM, chartCheckoutMonthly].forEach(function(c){if(c)c.destroy();});
|
|
chartTimeline = chartFlowDonut = chartSpreadTrend = chartDow = chartAvgSize = chartProvider = chartMonthlyRev = chartMoM = chartCheckoutMonthly = null;
|
|
}
|
|
|
|
// === Health Score ===
|
|
function computeHealthScore(profile, data) {
|
|
var monthsActive = profile.months_active || 1;
|
|
var lifetimeMonthlyAvg = profile.total_vol_usd / monthsActive;
|
|
var periodMonths = Math.max(1, (data.monthly || []).length);
|
|
var periodMonthlyAvg = data.kpis.total.vol_usd / periodMonths;
|
|
|
|
// Volume (0-25): current vs lifetime
|
|
var volRatio = lifetimeMonthlyAvg > 0 ? Math.min(2, periodMonthlyAvg / lifetimeMonthlyAvg) : 0;
|
|
var volScore = Math.min(25, Math.round(volRatio * 12.5));
|
|
|
|
// Frequency (0-25): ops per month
|
|
var freqPerMonth = data.kpis.total.qtd / periodMonths;
|
|
var freqScore = Math.min(25, Math.round(Math.min(freqPerMonth / 4, 1) * 25));
|
|
|
|
// Recency (0-25): days inactive
|
|
var di = profile.days_inactive || 0;
|
|
var recScore = di <= 7 ? 25 : di <= 14 ? 22 : di <= 30 ? 18 : di <= 60 ? 12 : di <= 90 ? 6 : 0;
|
|
|
|
// Growth (0-25): MoM trend
|
|
var growScore = 12;
|
|
var monthly = data.monthly || [];
|
|
if (monthly.length >= 2) {
|
|
var recent = monthly[monthly.length - 1].vol_usd;
|
|
var prev = monthly[monthly.length - 2].vol_usd;
|
|
var g = prev > 0 ? (recent - prev) / prev : 0;
|
|
growScore = g >= 0.2 ? 25 : g >= 0.05 ? 20 : g >= 0 ? 15 : g >= -0.1 ? 10 : g >= -0.3 ? 5 : 0;
|
|
}
|
|
|
|
var total = volScore + freqScore + recScore + growScore;
|
|
var level, color;
|
|
if (total >= 75) { level = 'Excelente'; color = 'green'; }
|
|
else if (total >= 55) { level = 'Bom'; color = 'blue'; }
|
|
else if (total >= 35) { level = 'Atencao'; color = 'orange'; }
|
|
else { level = 'Em Risco'; color = 'red'; }
|
|
|
|
return { total: total, level: level, color: color, volume: volScore, frequency: freqScore, recency: recScore, growth: growScore };
|
|
}
|
|
|
|
function renderHealthScore(hs, t) {
|
|
// Profile badge
|
|
var box = document.getElementById('healthScoreBox');
|
|
box.className = 'health-score-box score-' + hs.color;
|
|
document.getElementById('healthScoreNum').className = 'health-score-number ' + hs.color;
|
|
document.getElementById('healthScoreNum').textContent = hs.total;
|
|
document.getElementById('healthScoreLabel').textContent = hs.level;
|
|
|
|
// Gauge
|
|
var circumference = 2 * Math.PI * 60; // r=60
|
|
var offset = circumference - (hs.total / 100) * circumference;
|
|
var fill = document.getElementById('healthGaugeFill');
|
|
fill.style.strokeDashoffset = offset;
|
|
var colorMap = {green: t.healthGreen, blue: t.healthBlue, orange: t.healthOrange, red: t.healthRed};
|
|
fill.style.stroke = colorMap[hs.color] || t.healthGreen;
|
|
var gs = document.getElementById('healthGaugeScore');
|
|
gs.textContent = hs.total;
|
|
gs.style.color = colorMap[hs.color];
|
|
document.getElementById('healthGaugeLabel').textContent = hs.level;
|
|
|
|
// Breakdown bars
|
|
var items = [{id:'Vol', val:hs.volume}, {id:'Freq', val:hs.frequency}, {id:'Rec', val:hs.recency}, {id:'Grow', val:hs.growth}];
|
|
items.forEach(function(it) {
|
|
document.getElementById('hb'+it.id).style.width = (it.val / 25 * 100) + '%';
|
|
document.getElementById('hb'+it.id+'Val').textContent = it.val + '/25';
|
|
});
|
|
}
|
|
|
|
// === Churn Risk ===
|
|
function computeAndRenderRisk(profile, data) {
|
|
var c = data.comparison;
|
|
var volChange = c.prev_vol_usd > 0 ? ((data.kpis.total.vol_usd - c.prev_vol_usd) / c.prev_vol_usd * 100) : null;
|
|
var txChange = c.prev_qtd > 0 ? ((data.kpis.total.qtd - c.prev_qtd) / c.prev_qtd * 100) : null;
|
|
var di = profile.days_inactive || 0;
|
|
var avgInterval = profile.total_ops > 1 && profile.months_active > 0 ? Math.round(profile.months_active * 30.44 / profile.total_ops) : null;
|
|
|
|
// Risk scoring
|
|
var pts = 0;
|
|
if (volChange !== null && volChange < -30) pts += 3; else if (volChange !== null && volChange < -10) pts += 1;
|
|
if (txChange !== null && txChange < -30) pts += 3; else if (txChange !== null && txChange < -10) pts += 1;
|
|
if (di > 90) pts += 3; else if (di > 30) pts += 2; else if (di > 14) pts += 1;
|
|
|
|
var level, cls;
|
|
if (pts >= 7) { level = 'CRITICO'; cls = 'critico'; }
|
|
else if (pts >= 4) { level = 'ALTO'; cls = 'alto'; }
|
|
else if (pts >= 2) { level = 'MEDIO'; cls = 'medio'; }
|
|
else { level = 'BAIXO'; cls = 'baixo'; }
|
|
|
|
document.getElementById('riskBadge').className = 'risk-level-badge ' + cls;
|
|
document.getElementById('riskBadge').textContent = level;
|
|
|
|
function fmtChange(v) {
|
|
if (v === null) return {text: 'N/A', cls: 'neutral'};
|
|
var txt = (v >= 0 ? '+' : '') + v.toFixed(1) + '%';
|
|
return {text: txt, cls: v >= 0 ? 'positive' : 'negative'};
|
|
}
|
|
var vc = fmtChange(volChange); var tc = fmtChange(txChange);
|
|
document.getElementById('riskVol').textContent = vc.text; document.getElementById('riskVol').className = 'risk-row-value ' + vc.cls;
|
|
document.getElementById('riskTx').textContent = tc.text; document.getElementById('riskTx').className = 'risk-row-value ' + tc.cls;
|
|
document.getElementById('riskDays').textContent = di + 'd';
|
|
document.getElementById('riskDays').className = 'risk-row-value ' + (di > 30 ? 'negative' : di > 14 ? 'neutral' : 'positive');
|
|
document.getElementById('riskInterval').textContent = avgInterval ? avgInterval + 'd' : 'N/A';
|
|
document.getElementById('riskInterval').className = 'risk-row-value neutral';
|
|
}
|
|
|
|
// === Netting ===
|
|
function renderNetting(data) {
|
|
var out = data.kpis.brlUsd.vol_usd;
|
|
var inp = data.kpis.usdBrl.vol_usd;
|
|
var net = inp - out;
|
|
var eff = Math.max(out, inp) > 0 ? Math.round(Math.min(out, inp) / Math.max(out, inp) * 100) : 0;
|
|
document.getElementById('netOut').textContent = fmtUSD(out);
|
|
document.getElementById('netIn').textContent = fmtUSD(inp);
|
|
var posEl = document.getElementById('netPos');
|
|
posEl.textContent = (net >= 0 ? '+' : '') + fmtUSD(net);
|
|
posEl.className = 'netting-value ' + (net >= 0 ? 'green' : 'red');
|
|
document.getElementById('netEff').textContent = eff + '%';
|
|
document.getElementById('netEffBar').style.width = eff + '%';
|
|
}
|
|
|
|
// === Client Search (server-side) ===
|
|
var _searchTimer = null;
|
|
function fmtVolShort(v) {
|
|
if (v >= 1e6) return '$' + (v/1e6).toFixed(1) + 'M';
|
|
if (v >= 1e3) return '$' + (v/1e3).toFixed(0) + 'K';
|
|
return '$' + v;
|
|
}
|
|
function esc(s) { return s.replace(/&/g,'&').replace(/"/g,'"').replace(/</g,'<'); }
|
|
function loadClients() {
|
|
fetch('/admin/api/clientes/top').then(function(r){return r.json();}).then(function(data) {
|
|
renderTopClients(data);
|
|
var params = new URLSearchParams(window.location.search);
|
|
var deepId = params.get('id');
|
|
if (deepId) {
|
|
var m = data.find(function(c){return String(c.id)===String(deepId);});
|
|
if (m) { selectClient(m.id, m.nome); }
|
|
else { fetch('/admin/api/cliente/' + deepId + '/profile').then(function(r){return r.json();}).then(function(p){ if(p&&p.nome) selectClient(deepId, p.nome); }).catch(function(){}); }
|
|
}
|
|
}).catch(function(e){ console.error('loadClients:', e); });
|
|
}
|
|
function renderTopClients(top) {
|
|
var el = document.getElementById('topClientsSection');
|
|
if (!el || !top.length) return;
|
|
var high = [], mid = [], low = [];
|
|
top.forEach(function(c, i) { c._rank = i + 1; });
|
|
var maxVol = top[0] ? top[0].vol : 1;
|
|
top.forEach(function(c) {
|
|
var ratio = c.vol / maxVol;
|
|
if (ratio >= 0.3) high.push(c);
|
|
else if (ratio >= 0.05) mid.push(c);
|
|
else low.push(c);
|
|
});
|
|
function buildCards(list) {
|
|
return '<div class="top-clients-grid">' + list.map(function(c) {
|
|
var avgMonth = c.months > 0 ? c.vol / c.months : c.vol;
|
|
return '<div class="top-client-card" data-id="'+c.id+'" data-nome="'+esc(c.nome)+'"><span class="tc-rank">#'+c._rank+'</span><div class="tc-name" title="'+esc(c.nome)+'">'+esc(c.nome)+'</div><div class="tc-stats"><span class="tc-vol">'+fmtVolShort(c.vol)+'</span><span>'+c.ops+' ops</span><span>~'+fmtVolShort(Math.round(avgMonth))+'/m</span></div></div>';
|
|
}).join('') + '</div>';
|
|
}
|
|
var html = '';
|
|
if (high.length) html += '<div class="top-clients-tier"><div class="tier-header"><span class="tier-dot tier-high"></span><span class="tier-label">Alto Volume</span><span class="tier-count">'+high.length+'</span></div>'+buildCards(high)+'</div>';
|
|
if (mid.length) html += '<div class="top-clients-tier"><div class="tier-header"><span class="tier-dot tier-mid"></span><span class="tier-label">Medio Volume</span><span class="tier-count">'+mid.length+'</span></div>'+buildCards(mid)+'</div>';
|
|
if (low.length) html += '<div class="top-clients-tier"><div class="tier-header"><span class="tier-dot tier-low"></span><span class="tier-label">Menor Volume</span><span class="tier-count">'+low.length+'</span></div>'+buildCards(low)+'</div>';
|
|
el.innerHTML = html;
|
|
el.addEventListener('click', function(e) {
|
|
var card = e.target.closest('.top-client-card');
|
|
if (card) selectClient(card.dataset.id, card.dataset.nome);
|
|
});
|
|
}
|
|
// Server-side search
|
|
document.getElementById('searchInput').addEventListener('input', function(e) {
|
|
clearTimeout(_searchTimer);
|
|
var val = e.target.value.trim();
|
|
_searchTimer = setTimeout(function() {
|
|
var dd = document.getElementById('searchDropdown');
|
|
if (val.length < 2) { dd.classList.remove('open'); return; }
|
|
fetch('/admin/api/clientes/search?q=' + encodeURIComponent(val)).then(function(r){return r.json();}).then(function(matches) {
|
|
if (!matches.length) { dd.innerHTML = '<div class="client-dropdown-item" style="color:var(--text-muted)">Nenhum resultado</div>'; dd.classList.add('open'); return; }
|
|
dd.innerHTML = matches.map(function(c){return '<div class="client-dropdown-item" data-id="'+c.id+'" data-nome="'+esc(c.nome)+'">'+esc(c.nome)+'<span class="item-id">#'+c.id+'</span></div>';}).join('');
|
|
dd.classList.add('open');
|
|
}).catch(function(){ dd.classList.remove('open'); });
|
|
}, 300);
|
|
});
|
|
document.getElementById('searchDropdown').addEventListener('click', function(e) {
|
|
var item = e.target.closest('.client-dropdown-item'); if (!item || !item.dataset.id) return;
|
|
selectClient(item.dataset.id, item.dataset.nome);
|
|
});
|
|
document.addEventListener('click', function(e) { if (!e.target.closest('.client-search-wrap')) document.getElementById('searchDropdown').classList.remove('open'); });
|
|
|
|
function selectClient(id, nome) {
|
|
selectedClientId = id;
|
|
document.getElementById('searchWrap').style.display = 'none';
|
|
document.getElementById('selectedBadge').classList.add('visible');
|
|
document.getElementById('badgeName').textContent = nome + ' (#' + id + ')';
|
|
document.getElementById('emptyState').style.display = 'none';
|
|
document.getElementById('contentArea').classList.add('visible');
|
|
document.getElementById('consoleNav').style.display = '';
|
|
var url = new URL(window.location); url.searchParams.set('id', id); history.replaceState(null, '', url);
|
|
loadProfile(); loadData();
|
|
}
|
|
function clearClient() {
|
|
selectedClientId = null; profileData = null; clientData = null;
|
|
document.getElementById('searchWrap').style.display = '';
|
|
document.getElementById('searchInput').value = '';
|
|
document.getElementById('selectedBadge').classList.remove('visible');
|
|
document.getElementById('emptyState').style.display = '';
|
|
document.getElementById('contentArea').classList.remove('visible');
|
|
document.getElementById('consoleNav').style.display = 'none';
|
|
document.getElementById('merchantBadge').classList.remove('visible');
|
|
document.querySelectorAll('.checkout-section').forEach(function(el){ el.classList.remove('visible'); });
|
|
destroyAllCharts();
|
|
var url = new URL(window.location); url.searchParams.delete('id'); history.replaceState(null, '', url);
|
|
}
|
|
|
|
// === Profile ===
|
|
function loadProfile() {
|
|
fetch('/admin/api/cliente/' + selectedClientId + '/profile').then(function(r){return r.json();}).then(function(data) {
|
|
profileData = data; renderProfile(data);
|
|
// Load churn risk
|
|
fetch('/admin/api/cliente/' + selectedClientId + '/churn').then(function(r){return r.json();}).then(function(churn) {
|
|
renderChurnRisk(churn);
|
|
}).catch(function(){});
|
|
});
|
|
}
|
|
function renderProfile(p) {
|
|
var ini = p.nome.split(' ').map(function(w){return w[0];}).slice(0,2).join('').toUpperCase();
|
|
document.getElementById('profileAvatar').textContent = ini;
|
|
document.getElementById('profileName').textContent = p.nome;
|
|
document.getElementById('profileId').textContent = 'ID: ' + p.id;
|
|
document.getElementById('profileFirstOp').textContent = p.first_op ? fmtDate(p.first_op) : '--';
|
|
document.getElementById('profileLastOp').textContent = p.last_op ? fmtDate(p.last_op) : '--';
|
|
document.getElementById('profileMonths').textContent = p.months_active || '--';
|
|
document.getElementById('profileLTV').textContent = fmtUSD(p.ltv || p.total_spread_revenue);
|
|
document.getElementById('profileVolume').textContent = fmtUSD(p.total_vol_usd);
|
|
document.getElementById('profileOps').textContent = p.total_ops;
|
|
// Merchant badge
|
|
var isMerchant = !!(p.merchant && p.merchant.nome_empresa);
|
|
var badge = document.getElementById('merchantBadge');
|
|
if (isMerchant) {
|
|
badge.textContent = 'MERCHANT: ' + p.merchant.nome_empresa;
|
|
badge.classList.add('visible');
|
|
} else {
|
|
badge.classList.remove('visible');
|
|
}
|
|
// Show/hide checkout sections
|
|
document.querySelectorAll('.checkout-section').forEach(function(el) {
|
|
el.classList.toggle('visible', isMerchant);
|
|
});
|
|
// Relabel hero cards for merchants to clarify CambioPay-only
|
|
var heroLabels = document.querySelectorAll('#heroGrid .hero-label');
|
|
heroLabels.forEach(function(lbl) {
|
|
if (isMerchant) {
|
|
if (lbl.textContent === 'Volume USD') lbl.textContent = 'CambioPay Volume';
|
|
else if (lbl.textContent === 'Transacoes') lbl.textContent = 'CambioPay Ops';
|
|
else if (lbl.textContent === 'Receita USD') lbl.textContent = 'Receita CambioPay';
|
|
} else {
|
|
if (lbl.textContent === 'CambioPay Volume') lbl.textContent = 'Volume USD';
|
|
else if (lbl.textContent === 'CambioPay Ops') lbl.textContent = 'Transacoes';
|
|
else if (lbl.textContent === 'Receita CambioPay') lbl.textContent = 'Receita USD';
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderChurnRisk(churn) {
|
|
var el = document.getElementById('churnRisk');
|
|
if (!el) return;
|
|
var colors = { low: 'var(--green)', medium: 'var(--orange)', high: 'var(--red)', critical: 'var(--red)' };
|
|
var labels = { low: 'Low Risk', medium: 'Medium Risk', high: 'High Risk', critical: 'Critical' };
|
|
el.innerHTML = '<div style="display:flex;align-items:center;gap:8px;margin-top:8px;">' +
|
|
'<div style="width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;' +
|
|
'background:' + colors[churn.risk] + '20;color:' + colors[churn.risk] + ';font-weight:700;font-size:14px;">' + churn.score + '</div>' +
|
|
'<div><div style="font-size:12px;font-weight:600;color:' + colors[churn.risk] + '">' + labels[churn.risk] + '</div>' +
|
|
'<div style="font-size:10px;color:var(--text-muted)">Health: ' + churn.health_score + '/100</div></div></div>' +
|
|
'<div style="margin-top:6px;font-size:10px;color:var(--text-muted)">' +
|
|
(churn.factors || []).slice(0,3).map(function(f){
|
|
var ic = f.status === 'good' ? '✅' : f.status === 'warning' ? '⚠' : '❌';
|
|
return ic + ' ' + f.name + ': ' + f.score + '/100';
|
|
}).join(' ') + '</div>';
|
|
}
|
|
|
|
// === Data Loading ===
|
|
function loadData() {
|
|
if (!selectedClientId) return;
|
|
document.getElementById('periodInfo').textContent = 'Carregando...';
|
|
fetch('/admin/api/cliente/' + selectedClientId + '/data?start=' + currentStart + '&end=' + currentEnd)
|
|
.then(function(r){return r.json();}).then(function(data) { clientData = data; renderAll(data); })
|
|
.catch(function(e){ document.getElementById('periodInfo').textContent = 'Erro'; });
|
|
}
|
|
function renderAll(d) {
|
|
var t = getChartTheme(); applyChartDefaults(t);
|
|
renderKPIs(d); renderIntelligence(d, t); renderCharts(d, t); renderTable(d); updatePeriodInfo();
|
|
if (profileData && profileData.merchant) {
|
|
renderCheckoutKPIs(d, t);
|
|
renderCheckoutMonthly(d, t);
|
|
renderTopPayers(d);
|
|
}
|
|
}
|
|
function updatePeriodInfo() {
|
|
var s = new Date(currentStart), e = new Date(currentEnd);
|
|
var days = Math.round((e - s) / 86400000) + 1;
|
|
document.getElementById('periodInfo').textContent = fmtDate(currentStart) + ' - ' + fmtDate(currentEnd) + ' (' + days + 'd)';
|
|
}
|
|
|
|
// === KPIs ===
|
|
function renderKPIs(d) {
|
|
var k = d.kpis.total, c = d.comparison;
|
|
document.getElementById('kpiVolume').textContent = fmtUSD(k.vol_usd);
|
|
document.getElementById('kpiTx').textContent = k.qtd;
|
|
document.getElementById('kpiSpread').textContent = fmtUSD(k.spread_revenue);
|
|
document.getElementById('kpiTicket').textContent = fmtUSD(k.ticket_medio);
|
|
document.getElementById('kpiAvgSpread').textContent = fmtPct(k.avg_spread_pct);
|
|
// ARPA: receita por mes no periodo
|
|
var periodMonths = Math.max(1, (d.monthly || []).length);
|
|
document.getElementById('kpiARPA').textContent = fmtUSD(k.spread_revenue / periodMonths);
|
|
|
|
var bv = badge(k.vol_usd, c.prev_vol_usd);
|
|
document.getElementById('kpiVolBadge').className = 'hero-badge ' + bv.cls; document.getElementById('kpiVolBadge').textContent = bv.text;
|
|
var bt = badge(k.qtd, c.prev_qtd);
|
|
document.getElementById('kpiTxBadge').className = 'hero-badge ' + bt.cls; document.getElementById('kpiTxBadge').textContent = bt.text;
|
|
var bs = badge(k.spread_revenue, c.prev_spread);
|
|
document.getElementById('kpiSpreadBadge').className = 'hero-badge ' + bs.cls; document.getElementById('kpiSpreadBadge').textContent = bs.text;
|
|
}
|
|
|
|
// === Intelligence (Health + Risk + Netting) ===
|
|
function renderIntelligence(d, t) {
|
|
if (profileData) {
|
|
var hs = computeHealthScore(profileData, d);
|
|
renderHealthScore(hs, t);
|
|
computeAndRenderRisk(profileData, d);
|
|
}
|
|
renderNetting(d);
|
|
}
|
|
|
|
// === Charts ===
|
|
function renderCharts(d, t) {
|
|
if (typeof Chart === 'undefined') return;
|
|
destroyAllCharts();
|
|
showChart('skelMonthlyRev'); showChart('skelMoM');
|
|
showChart('skelTimeline'); showChart('skelFlowDonut');
|
|
showChart('skelSpreadTrend'); showChart('skelDow');
|
|
showChart('skelAvgSize'); showChart('skelProvider');
|
|
renderMonthlyRevenue(d, t);
|
|
renderMoMChart(d, t);
|
|
renderTimeline(d, t);
|
|
renderFlowDonut(d, t);
|
|
renderSpreadTrend(d, t);
|
|
renderDow(d, t);
|
|
renderAvgSize(d, t);
|
|
renderProviderChart(d, t);
|
|
}
|
|
|
|
// Revenue Monthly
|
|
function renderMonthlyRevenue(d, t) {
|
|
var m = d.monthly || []; if (!m.length) return;
|
|
try {
|
|
chartMonthlyRev = new Chart(document.getElementById('chartMonthlyRev'), {
|
|
type: 'bar', data: {
|
|
labels: m.map(function(x){return x.mes;}),
|
|
datasets: [
|
|
{ label: 'Receita USD', data: m.map(function(x){return x.spread_revenue;}), backgroundColor: t.revBar, borderColor: t.revBorder, borderWidth: 1, borderRadius: 4, yAxisID: 'y', order: 2 },
|
|
{ label: 'Volume USD', data: m.map(function(x){return x.vol_usd;}), type: 'line', borderColor: t.revLine, backgroundColor: 'transparent', borderWidth: 2, pointRadius: 3, tension: 0.3, yAxisID: 'y1', order: 1 }
|
|
]
|
|
}, options: {
|
|
responsive: true, maintainAspectRatio: false, interaction: {mode:'index', intersect:false},
|
|
plugins: { legend: {position:'top', labels:{font:{size:11,weight:600},padding:12}},
|
|
tooltip: { callbacks: { label: function(ctx) { return ctx.dataset.label === 'Receita USD' ? 'Receita: ' + fmtUSD(ctx.raw) : 'Volume: ' + fmtUSD(ctx.raw); }}}},
|
|
scales: {
|
|
y: { position:'left', grid:{color:t.grid}, ticks:{callback:function(v){return fmtUSD(v);}, font:{size:10}} },
|
|
y1: { position:'right', grid:{display:false}, ticks:{callback:function(v){return fmtUSD(v);}, font:{size:10}} },
|
|
x: { grid:{display:false}, ticks:{font:{size:10}} }
|
|
}
|
|
}
|
|
}); } catch(e) { console.warn('chartMonthlyRev:', e.message); }
|
|
}
|
|
|
|
// MoM Growth
|
|
function renderMoMChart(d, t) {
|
|
var m = d.monthly || []; if (m.length < 2) return;
|
|
var labels = [], values = [], colors = [], borders = [];
|
|
for (var i = 1; i < m.length; i++) {
|
|
var prev = m[i-1].vol_usd; var cur = m[i].vol_usd;
|
|
var pct = prev > 0 ? ((cur - prev) / prev * 100) : 0;
|
|
labels.push(m[i].mes);
|
|
values.push(Math.round(pct * 10) / 10);
|
|
colors.push(pct >= 0 ? t.momUp : t.momDown);
|
|
borders.push(pct >= 0 ? t.momBorderUp : t.momBorderDown);
|
|
}
|
|
try {
|
|
chartMoM = new Chart(document.getElementById('chartMoM'), {
|
|
type: 'bar', data: {
|
|
labels: labels, datasets: [{ label: 'MoM %', data: values, backgroundColor: colors, borderColor: borders, borderWidth: 1, borderRadius: 4 }]
|
|
}, options: {
|
|
responsive: true, maintainAspectRatio: false,
|
|
plugins: { legend:{display:false}, tooltip:{callbacks:{label:function(ctx){return 'MoM: '+(ctx.raw>=0?'+':'')+ctx.raw+'%';}}} },
|
|
scales: {
|
|
y: { grid:{color:t.grid}, ticks:{callback:function(v){return v+'%';}, font:{size:10}} },
|
|
x: { grid:{display:false}, ticks:{font:{size:10}} }
|
|
}
|
|
}
|
|
}); } catch(e) { console.warn('chartMoM:', e.message); }
|
|
}
|
|
|
|
// Timeline
|
|
function renderTimeline(d, t) {
|
|
var dayMap = {};
|
|
d.trend.brlUsd.forEach(function(r){ if (!dayMap[r.dia]) dayMap[r.dia]={vol:0,qtd:0}; dayMap[r.dia].vol+=r.vol_usd; dayMap[r.dia].qtd+=r.qtd; });
|
|
d.trend.usdBrl.forEach(function(r){ if (!dayMap[r.dia]) dayMap[r.dia]={vol:0,qtd:0}; dayMap[r.dia].vol+=r.vol_usd; dayMap[r.dia].qtd+=r.qtd; });
|
|
var days = Object.keys(dayMap).sort(); if (!days.length) return;
|
|
var buckets = aggregateBuckets(days, dayMap, timelineGran);
|
|
try {
|
|
chartTimeline = new Chart(document.getElementById('chartTimeline'), {
|
|
type: 'bar', data: {
|
|
labels: buckets.labels,
|
|
datasets: [
|
|
{ label: 'Volume USD', data: buckets.vols, type: 'bar', backgroundColor: t.volumeBar, borderColor: t.volumeBorder, borderWidth: 1, borderRadius: 4, yAxisID: 'y', order: 2 },
|
|
{ label: 'Qtd Ops', data: buckets.qtds, type: 'line', borderColor: t.lineQtd, backgroundColor: 'transparent', borderWidth: 2, pointRadius: 3, tension: 0.3, yAxisID: 'y1', order: 1 }
|
|
]
|
|
}, options: {
|
|
responsive: true, maintainAspectRatio: false, interaction: {mode:'index', intersect:false},
|
|
plugins: { legend:{position:'top', labels:{font:{size:11,weight:600},padding:12}}, tooltip:{callbacks:{label:function(ctx){return ctx.dataset.label==='Volume USD'?'Volume: '+fmtUSD(ctx.raw):'Qtd: '+ctx.raw;}}} },
|
|
scales: {
|
|
y: { position:'left', grid:{color:t.grid}, ticks:{callback:function(v){return fmtUSD(v);}, font:{size:10}} },
|
|
y1: { position:'right', grid:{display:false}, ticks:{font:{size:10}, stepSize:1}, min:0 },
|
|
x: { grid:{display:false}, ticks:{font:{size:10}, maxRotation:45} }
|
|
}
|
|
}
|
|
}); } catch(e) { console.warn('chartTimeline:', e.message); }
|
|
}
|
|
function aggregateBuckets(days, dayMap, gran) {
|
|
if (gran === 'D') return { labels: days.map(fmtDateShort), vols: days.map(function(d){return dayMap[d].vol;}), qtds: days.map(function(d){return dayMap[d].qtd;}) };
|
|
var bm = {};
|
|
days.forEach(function(day) {
|
|
var key;
|
|
if (gran === 'W') { var dt = new Date(day); var wd = dt.getDay(); var diff = dt.getDate() - wd + (wd === 0 ? -6 : 1); key = new Date(dt.setDate(diff)).toISOString().slice(0,10); }
|
|
else { key = day.slice(0,7); }
|
|
if (!bm[key]) bm[key] = {vol:0,qtd:0}; bm[key].vol += dayMap[day].vol; bm[key].qtd += dayMap[day].qtd;
|
|
});
|
|
var keys = Object.keys(bm).sort();
|
|
return { labels: keys.map(function(k){return gran==='W'?'S/'+fmtDateShort(k):k;}), vols: keys.map(function(k){return bm[k].vol;}), qtds: keys.map(function(k){return bm[k].qtd;}) };
|
|
}
|
|
|
|
// Flow Donut
|
|
function renderFlowDonut(d, t) {
|
|
var bv = d.kpis.brlUsd.vol_usd, uv = d.kpis.usdBrl.vol_usd; if (!bv && !uv) return;
|
|
try {
|
|
chartFlowDonut = new Chart(document.getElementById('chartFlowDonut'), {
|
|
type: 'doughnut', data: { labels: ['BRL \\u2192 USD','USD \\u2192 BRL'], datasets: [{data:[bv,uv], backgroundColor:t.donutColors, borderWidth:0, hoverOffset:8}] },
|
|
options: { responsive:true, maintainAspectRatio:false, cutout:'65%', plugins:{legend:{position:'bottom', labels:{padding:16, font:{size:12,weight:600}}}, tooltip:{callbacks:{label:function(ctx){return ctx.label+': '+fmtUSD(ctx.raw);}}}}}
|
|
}); } catch(e) {}
|
|
}
|
|
|
|
// Spread Trend
|
|
function renderSpreadTrend(d, t) {
|
|
var allDays = new Set();
|
|
d.trend.brlUsd.forEach(function(r){allDays.add(r.dia);}); d.trend.usdBrl.forEach(function(r){allDays.add(r.dia);});
|
|
var days = Array.from(allDays).sort(); if (!days.length) return;
|
|
var bm = {}, um = {}; d.trend.brlUsd.forEach(function(r){bm[r.dia]=r.avg_spread;}); d.trend.usdBrl.forEach(function(r){um[r.dia]=r.avg_spread;});
|
|
try {
|
|
chartSpreadTrend = new Chart(document.getElementById('chartSpreadTrend'), {
|
|
type: 'line', data: {
|
|
labels: days.map(fmtDateShort),
|
|
datasets: [
|
|
{ label: 'BRL\\u2192USD', data: days.map(function(d){return bm[d]!=null?bm[d]:null;}), borderColor: t.spreadBrl, backgroundColor:'transparent', borderWidth:2, pointRadius:2, tension:0.3, spanGaps:true },
|
|
{ label: 'USD\\u2192BRL', data: days.map(function(d){return um[d]!=null?um[d]:null;}), borderColor: t.spreadUsd, backgroundColor:'transparent', borderWidth:2, pointRadius:2, tension:0.3, spanGaps:true }
|
|
]
|
|
}, options: {
|
|
responsive:true, maintainAspectRatio:false, interaction:{mode:'index', intersect:false},
|
|
plugins: { legend:{position:'top', labels:{font:{size:11,weight:600},padding:12}}, tooltip:{callbacks:{label:function(ctx){return ctx.dataset.label+': '+(ctx.raw!==null?ctx.raw.toFixed(2)+'%':'N/A');}}} },
|
|
scales: { y:{grid:{color:t.grid}, ticks:{callback:function(v){return v.toFixed(1)+'%';}, font:{size:10}}, min:0}, x:{grid:{display:false}, ticks:{font:{size:10}, maxRotation:45}} }
|
|
}
|
|
}); } catch(e) {}
|
|
}
|
|
|
|
// Day of Week
|
|
function renderDow(d, t) {
|
|
var names = ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'];
|
|
var qtds = []; for (var i=1;i<=7;i++) qtds.push(d.dayOfWeek[i]?d.dayOfWeek[i].qtd:0);
|
|
try {
|
|
chartDow = new Chart(document.getElementById('chartDow'), {
|
|
type:'bar', data:{ labels:names, datasets:[{label:'Ops', data:qtds, backgroundColor:t.dowBar, borderColor:t.dowBorder, borderWidth:1, borderRadius:4}] },
|
|
options:{ responsive:true, maintainAspectRatio:false, indexAxis:'y', plugins:{legend:{display:false}}, scales:{x:{grid:{color:t.grid}, ticks:{font:{size:10}, stepSize:1}}, y:{grid:{display:false}, ticks:{font:{size:11,weight:600}}}} }
|
|
}); } catch(e) {}
|
|
}
|
|
|
|
// Monthly Avg Ticket
|
|
function renderAvgSize(d, t) {
|
|
var m = d.monthly || []; if (!m.length) return;
|
|
try {
|
|
chartAvgSize = new Chart(document.getElementById('chartAvgSize'), {
|
|
type:'line', data:{ labels:m.map(function(x){return x.mes;}), datasets:[{label:'Ticket USD', data:m.map(function(x){return x.avg_usd;}), borderColor:t.avgLine, backgroundColor:'transparent', borderWidth:2, pointRadius:4, tension:0.3}] },
|
|
options:{ responsive:true, maintainAspectRatio:false, plugins:{legend:{display:false}, tooltip:{callbacks:{label:function(ctx){return 'Ticket: '+fmtUSD(ctx.raw);}}}}, scales:{y:{grid:{color:t.grid}, ticks:{callback:function(v){return fmtUSD(v);}, font:{size:10}}}, x:{grid:{display:false}, ticks:{font:{size:10}}}} }
|
|
}); } catch(e) {}
|
|
}
|
|
|
|
// Provider Donut
|
|
function renderProviderChart(d, t) {
|
|
if (!d.providers || !d.providers.length) return;
|
|
try {
|
|
chartProvider = new Chart(document.getElementById('chartProvider'), {
|
|
type:'doughnut', data:{ labels:d.providers.map(function(p){return p.name;}), datasets:[{data:d.providers.map(function(p){return p.vol_usd;}), backgroundColor:t.providerColors.slice(0,d.providers.length), borderWidth:0, hoverOffset:8}] },
|
|
options:{ responsive:true, maintainAspectRatio:false, cutout:'55%', plugins:{legend:{position:'bottom', labels:{padding:12, font:{size:11,weight:600}}}, tooltip:{callbacks:{label:function(ctx){var total=ctx.dataset.data.reduce(function(a,b){return a+b;},0); return ctx.label+': '+fmtUSD(ctx.raw)+' ('+(total>0?(ctx.raw/total*100).toFixed(1)+'%':'0%')+')';}}}}}
|
|
}); } catch(e) {}
|
|
}
|
|
|
|
// === Checkout Renders (Merchant) ===
|
|
function renderCheckoutKPIs(d) {
|
|
var ck = d.kpis.checkout; if (!ck) return;
|
|
var cmp = (d.merchant && d.merchant.comparison) || {};
|
|
document.getElementById('ckVolume').textContent = fmtUSD(ck.vol_usd);
|
|
document.getElementById('ckPayers').textContent = ck.unique_payers;
|
|
document.getElementById('ckRevenue').textContent = fmtUSD(ck.revenue);
|
|
document.getElementById('ckOps').textContent = ck.qtd;
|
|
document.getElementById('ckTicket').textContent = fmtUSD(ck.ticket_medio);
|
|
document.getElementById('ckSpread').textContent = fmtPct(ck.avg_spread_pct);
|
|
var bv = badge(ck.vol_usd, cmp.prev_vol_usd);
|
|
document.getElementById('ckVolBadge').className = 'hero-badge ' + bv.cls; document.getElementById('ckVolBadge').textContent = bv.text;
|
|
var br = badge(ck.revenue, cmp.prev_revenue);
|
|
document.getElementById('ckRevBadge').className = 'hero-badge ' + br.cls; document.getElementById('ckRevBadge').textContent = br.text;
|
|
var bo = badge(ck.qtd, cmp.prev_qtd);
|
|
document.getElementById('ckOpsBadge').className = 'hero-badge ' + bo.cls; document.getElementById('ckOpsBadge').textContent = bo.text;
|
|
}
|
|
function renderCheckoutMonthly(d, t) {
|
|
showChart('skelCheckoutMonthly');
|
|
if (!d.merchant || !d.merchant.monthly || !d.merchant.monthly.length) return;
|
|
var m = d.merchant.monthly;
|
|
if (chartCheckoutMonthly) chartCheckoutMonthly.destroy();
|
|
try {
|
|
chartCheckoutMonthly = new Chart(document.getElementById('chartCheckoutMonthly'), {
|
|
type: 'bar', data: {
|
|
labels: m.map(function(x){return x.mes;}),
|
|
datasets: [
|
|
{ label: 'Volume USD', data: m.map(function(x){return x.vol_usd;}), backgroundColor: 'rgba(188,140,255,0.2)', borderColor: 'rgba(188,140,255,0.6)', borderWidth: 1, borderRadius: 4, yAxisID: 'y', order: 2 },
|
|
{ label: 'Payers', data: m.map(function(x){return x.unique_payers;}), type: 'line', borderColor: t.lineQtd, backgroundColor: 'transparent', borderWidth: 2, pointRadius: 3, tension: 0.3, yAxisID: 'y1', order: 1 }
|
|
]
|
|
}, options: {
|
|
responsive: true, maintainAspectRatio: false, interaction: {mode:'index', intersect:false},
|
|
plugins: { legend: {position:'top', labels:{font:{size:11,weight:600},padding:12}},
|
|
tooltip: { callbacks: { label: function(ctx) { return ctx.dataset.label === 'Volume USD' ? 'Volume: ' + fmtUSD(ctx.raw) : 'Payers: ' + ctx.raw; }}}},
|
|
scales: {
|
|
y: { position:'left', grid:{color:t.grid}, ticks:{callback:function(v){return fmtUSD(v);}, font:{size:10}} },
|
|
y1: { position:'right', grid:{display:false}, ticks:{font:{size:10}, stepSize:1}, min:0 },
|
|
x: { grid:{display:false}, ticks:{font:{size:10}} }
|
|
}
|
|
}
|
|
}); } catch(e) { console.warn('chartCheckoutMonthly:', e.message); }
|
|
}
|
|
function renderTopPayers(d) {
|
|
var el = document.getElementById('topPayersList');
|
|
if (!d.merchant || !d.merchant.topPayers || !d.merchant.topPayers.length) { el.innerHTML = '<div style="text-align:center;color:var(--text-muted);padding:20px;">Sem dados</div>'; return; }
|
|
el.innerHTML = d.merchant.topPayers.map(function(p, i) {
|
|
return '<div class="top-payer-row" onclick="selectClient('+p.id_conta+',\\''+esc(p.nome).replace(/'/g,"\\\\'")+'\\')"><span class="top-payer-rank">#'+(i+1)+'</span><div class="top-payer-info"><div class="top-payer-name" title="'+esc(p.nome)+'">'+esc(p.nome)+'</div><div class="top-payer-stats">'+p.tx_count+' ops</div></div><span class="top-payer-vol">'+fmtUSD(p.vol_usd)+'</span></div>';
|
|
}).join('');
|
|
}
|
|
|
|
// === Transaction Table ===
|
|
function renderTable(d) { if (!d.transactions) return; currentPage = 1; _renderTablePage(); }
|
|
function _getSortedTx() {
|
|
if (!clientData || !clientData.transactions) return [];
|
|
var tx = clientData.transactions.slice();
|
|
tx.sort(function(a, b) { var va=a[sortCol], vb=b[sortCol]; if(typeof va==='string') return va.localeCompare(vb)*sortDir; return ((va||0)-(vb||0))*sortDir; });
|
|
return tx;
|
|
}
|
|
function _renderTablePage() {
|
|
var tx = _getSortedTx();
|
|
var totalPages = Math.max(1, Math.ceil(tx.length / pageSize));
|
|
if (currentPage > totalPages) currentPage = totalPages;
|
|
var start = (currentPage - 1) * pageSize;
|
|
var page = tx.slice(start, start + pageSize);
|
|
var tbody = document.getElementById('txTableBody');
|
|
if (!page.length) { tbody.innerHTML = '<tr><td colspan="10" style="text-align:center;color:var(--text-muted)">Nenhuma transacao</td></tr>'; }
|
|
else {
|
|
tbody.innerHTML = page.map(function(r) {
|
|
var fc = r.flow === 'Checkout' ? 'checkout' : (r.flow === 'BRL\\u2192USD' ? 'brl-usd' : 'usd-brl');
|
|
var provCol = r.flow === 'Checkout' && r.payer_name ? esc(r.payer_name) : (r.provider||'--');
|
|
return '<tr><td>'+r.date.slice(0,16)+'</td><td><span class="flow-tag '+fc+'">'+r.flow+'</span></td><td>'+fmtUSD(r.usd)+'</td><td>'+fmtBRL(r.brl)+'</td><td>'+Number(r.rate).toFixed(4)+'</td><td>'+Number(r.ptax).toFixed(4)+'</td><td>'+fmtPct(r.spread_pct)+'</td><td>'+(r.iof?fmtPct(r.iof):'--')+'</td><td>'+(r.status||'--')+'</td><td>'+provCol+'</td></tr>';
|
|
}).join('');
|
|
}
|
|
var foot = document.getElementById('txTableFoot');
|
|
if (tx.length > 0) {
|
|
var su=tx.reduce(function(s,r){return s+r.usd;},0), sb=tx.reduce(function(s,r){return s+r.brl;},0), as=tx.reduce(function(s,r){return s+r.spread_pct;},0)/tx.length;
|
|
foot.innerHTML = '<tr><td colspan="2" style="font-weight:700">TOTAL ('+tx.length+')</td><td>'+fmtUSD(su)+'</td><td>'+fmtBRL(sb)+'</td><td colspan="2"></td><td>'+fmtPct(as)+'</td><td colspan="3"></td></tr>';
|
|
} else foot.innerHTML = '';
|
|
document.getElementById('tableInfo').textContent = tx.length + ' tx | Pag ' + currentPage + '/' + totalPages;
|
|
var pagDiv = document.getElementById('pagination');
|
|
var h = '<button class="page-btn" onclick="goPage(1)" '+(currentPage===1?'disabled':'')+'>«</button>';
|
|
h += '<button class="page-btn" onclick="goPage('+(currentPage-1)+')" '+(currentPage===1?'disabled':'')+'>‹</button>';
|
|
var sp = Math.max(1, currentPage-2), ep = Math.min(totalPages, sp+4);
|
|
for (var i=sp;i<=ep;i++) h += '<button class="page-btn'+(i===currentPage?' active':'')+'" onclick="goPage('+i+')">'+i+'</button>';
|
|
h += '<button class="page-btn" onclick="goPage('+(currentPage+1)+')" '+(currentPage===totalPages?'disabled':'')+'>›</button>';
|
|
h += '<button class="page-btn" onclick="goPage('+totalPages+')" '+(currentPage===totalPages?'disabled':'')+'>»</button>';
|
|
pagDiv.innerHTML = h;
|
|
document.querySelectorAll('#txTable thead th').forEach(function(th) {
|
|
th.classList.toggle('sorted', th.dataset.col === sortCol);
|
|
var a = th.querySelector('.sort-arrow'); if (a) a.innerHTML = th.dataset.col===sortCol?(sortDir===1?'▲':'▼'):'▲';
|
|
});
|
|
}
|
|
function goPage(p) { currentPage = p; _renderTablePage(); }
|
|
document.querySelectorAll('#txTable thead th').forEach(function(th) {
|
|
th.addEventListener('click', function() { var col=this.dataset.col; if(!col)return; if(sortCol===col){sortDir*=-1;}else{sortCol=col;sortDir=-1;} currentPage=1; _renderTablePage(); });
|
|
});
|
|
document.getElementById('pageSizeSelect').addEventListener('change', function() { pageSize=parseInt(this.value); currentPage=1; _renderTablePage(); });
|
|
|
|
// CSV Export
|
|
function exportCSV() {
|
|
if (!clientData || !clientData.transactions || !clientData.transactions.length) return;
|
|
var hdr = ['Data','Fluxo','USD','BRL','Taxa','PTAX','Spread%','IOF','Status','Provider'];
|
|
var rows = clientData.transactions.map(function(r){return [r.date,r.flow,r.usd,r.brl,r.rate,r.ptax,r.spread_pct,r.iof,r.status,r.provider].join(',');});
|
|
var csv = hdr.join(',')+'\\n'+rows.join('\\n');
|
|
var a = document.createElement('a'); a.href = URL.createObjectURL(new Blob([csv],{type:'text/csv'}));
|
|
a.download = 'cliente_'+selectedClientId+'_'+currentStart+'_'+currentEnd+'.csv'; a.click();
|
|
}
|
|
|
|
// === Filters ===
|
|
document.querySelectorAll('.preset-btn').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
document.querySelectorAll('.preset-btn').forEach(function(b){b.classList.remove('active');}); this.classList.add('active');
|
|
var now = new Date(), td = now.toISOString().slice(0,10), p = this.dataset.preset;
|
|
if (p==='7d') currentStart = new Date(now.getTime()-7*86400000).toISOString().slice(0,10);
|
|
else if (p==='30d') currentStart = new Date(now.getTime()-30*86400000).toISOString().slice(0,10);
|
|
else if (p==='90d') currentStart = new Date(now.getTime()-90*86400000).toISOString().slice(0,10);
|
|
else if (p==='ytd') currentStart = now.getFullYear()+'-01-01';
|
|
else if (p==='all' && profileData && profileData.first_op) currentStart = profileData.first_op;
|
|
else if (p==='all') currentStart = '2020-01-01';
|
|
currentEnd = td;
|
|
document.getElementById('dateStart').value = currentStart; document.getElementById('dateEnd').value = currentEnd;
|
|
loadData();
|
|
});
|
|
});
|
|
document.getElementById('dateStart').addEventListener('change', function(){currentStart=this.value; document.querySelectorAll('.preset-btn').forEach(function(b){b.classList.remove('active');}); loadData();});
|
|
document.getElementById('dateEnd').addEventListener('change', function(){currentEnd=this.value; document.querySelectorAll('.preset-btn').forEach(function(b){b.classList.remove('active');}); loadData();});
|
|
|
|
// Timeline granularity
|
|
document.querySelectorAll('[data-tl-gran]').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
document.querySelectorAll('[data-tl-gran]').forEach(function(b){b.classList.remove('active');}); this.classList.add('active');
|
|
timelineGran = this.dataset.tlGran;
|
|
if (clientData) { if (chartTimeline) chartTimeline.destroy(); renderTimeline(clientData, getChartTheme()); }
|
|
});
|
|
});
|
|
|
|
// Console Nav
|
|
var _navSections = ['searchWrap','heroGrid','sectionCheckout','sectionHealth','sectionRevenue','sectionTimeline','sectionFlows','sectionTable','sectionInsights'];
|
|
function updateConsoleNav() {
|
|
var sy = window.scrollY + 120, active = _navSections[0];
|
|
_navSections.forEach(function(id){var el=document.getElementById(id); if(el&&el.offsetTop<=sy) active=id;});
|
|
document.querySelectorAll('.console-nav-btn').forEach(function(btn){btn.classList.toggle('active', btn.dataset.section===active);});
|
|
}
|
|
window.addEventListener('scroll', updateConsoleNav);
|
|
|
|
// Theme change
|
|
window.addEventListener('themechange', function() { if (clientData) renderAll(clientData); });
|
|
|
|
// Init
|
|
document.addEventListener('DOMContentLoaded', function() { applyChartDefaults(getChartTheme()); loadClients(); });
|
|
<\/script>
|
|
</body>
|
|
</html>`;
|
|
}
|
|
|
|
module.exports = { buildAdminClienteHTML };
|