From ddf016a627d3ab29de3f7a198427abcaa058cf94 Mon Sep 17 00:00:00 2001 From: root Date: Sat, 14 Feb 2026 13:13:37 -0500 Subject: [PATCH] feat: otimiza admin BI executive para mobile/responsivo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adiciona 3 breakpoints progressivos (900px, 768px, 480px) com: - Touch targets min 44px em botões de filtro e granulação - Filtros empilhados verticalmente no mobile - KPIs: 5→3→2→1 colunas progressivamente - Tabelas com scroll horizontal touch-friendly - Trading terminal compacto em telas pequenas - Charts e gauges redimensionados por breakpoint Co-Authored-By: Claude Opus 4.6 --- src/admin-bi.js | 158 ++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 127 insertions(+), 31 deletions(-) diff --git a/src/admin-bi.js b/src/admin-bi.js index f5f72dd..734183c 100644 --- a/src/admin-bi.js +++ b/src/admin-bi.js @@ -274,45 +274,139 @@ function buildAdminBIHTML(user) { border-radius: 16px; z-index: 10; font-size: 13px; color: var(--text-muted); } - /* Responsive */ - @media (max-width: 768px) { + /* Responsive - Tablet */ + @media (max-width: 900px) { .trading-terminal { padding: 12px 16px; } - .live-rate-bar { flex-wrap: wrap; gap: 10px; justify-content: center; } + .live-rate-bar { flex-wrap: wrap; gap: 12px; justify-content: center; } .terminal-title { display: none; } - .rate-pair-group { padding: 8px 12px; width: 100%; justify-content: center; } - .live-rate-btn { min-width: 120px; padding: 8px 14px; flex: 1; } - .live-rate-btn .rate-value { font-size: 18px; } - .live-rate-time { width: 100%; text-align: center; } - .hero-grid { grid-template-columns: repeat(2, 1fr); } + .rate-pair-group { padding: 6px 10px; } + .live-rate-btn { min-width: 100px; padding: 6px 12px; } + .live-rate-btn .rate-value { font-size: 16px; } + .rate-separator { display: none; } + .hero-grid { grid-template-columns: repeat(3, 1fr); } .hero-grid-4 { grid-template-columns: repeat(2, 1fr); } + .charts-row { grid-template-columns: 1fr; } + .charts-row.equal { grid-template-columns: 1fr; } + .charts-row.triple { grid-template-columns: 1fr 1fr; } + .charts-row.triple > :last-child { grid-column: span 2; } + .filter-divider { display: none; } + .filter-bar { gap: 10px; } + } + + /* Responsive - Mobile */ + @media (max-width: 768px) { + /* Trading terminal */ + .trading-terminal { padding: 10px 12px; } + .live-rate-bar { gap: 8px; justify-content: center; } + .rate-pair-group { padding: 8px 10px; width: 100%; justify-content: center; } + .live-rate-btn { min-width: 0; flex: 1; padding: 8px 10px; } + .live-rate-btn .rate-value { font-size: 18px; } + .live-rate-btn .rate-type { font-size: 8px; } + .rate-flags { font-size: 8px; } + .live-rate-time { width: 100%; text-align: center; font-size: 9px; } + + /* Filter bar - stack vertically */ + .filter-bar { + padding: 14px 16px; gap: 10px; + flex-direction: column; align-items: stretch; + } + .filter-bar-label { text-align: center; } + .filter-presets { flex-wrap: wrap; justify-content: center; } + .preset-btn { padding: 10px 14px; min-height: 44px; font-size: 13px; flex: 1; min-width: 70px; text-align: center; } + .date-inputs { + flex-wrap: wrap; justify-content: center; gap: 6px; + } + .date-inputs input[type="date"] { flex: 1; min-width: 130px; min-height: 44px; } + .period-info { margin-left: 0; width: 100%; text-align: center; } + + /* Hero KPIs */ + .hero-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } + .hero-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; } + .hero-card { padding: 16px 18px; border-radius: 12px; } .hero-card:last-child { grid-column: span 2; } .hero-value { font-size: 22px; } - .gran-selector { flex-wrap: wrap; } + .hero-label { font-size: 10px; } + .hero-sub { font-size: 11px; } + + /* Charts - single column */ .charts-row, .charts-row.equal, .charts-row.triple { grid-template-columns: 1fr; } - .filter-bar { padding: 14px 16px; gap: 10px; } - .filter-presets { flex-wrap: wrap; } - .period-info { margin-left: 0; width: 100%; text-align: center; } - .filter-divider { display: none; } + .charts-row.triple > :last-child { grid-column: span 1; } + .chart-card { padding: 18px; border-radius: 12px; } + .chart-wrap { height: 250px; } + + /* Revenue controls */ + .revenue-controls { flex-direction: column; align-items: stretch; } + .gran-selector { flex-wrap: wrap; justify-content: center; } + .gran-btn { padding: 10px 16px; min-height: 44px; flex: 1; min-width: 60px; text-align: center; } + .revenue-status { text-align: center; } + + /* Tables - horizontal scroll indicator */ + .chart-card:has(.data-table) { padding: 18px 0; } + .chart-card:has(.data-table) > h3 { padding: 0 18px; } + .data-table { font-size: 12px; } + .data-table th { padding: 10px 10px; font-size: 10px; white-space: nowrap; } + .data-table td { padding: 10px 10px; white-space: nowrap; } + [style*="overflow-x:auto"], [style*="overflow:auto"] { + -webkit-overflow-scrolling: touch; + scrollbar-width: thin; + } + + /* Section titles */ + .section-title { font-size: 13px; margin-bottom: 12px; } + + /* Metric / Gauge */ + .gauge-value { font-size: 40px; } + .metric-card { padding: 16px; } + + /* Netting */ + .netting-label { font-size: 12px; } + .netting-value { font-size: 14px; } } + + /* Responsive - Small Mobile */ @media (max-width: 480px) { - .trading-terminal { padding: 10px 12px; } - .live-rate-bar { gap: 8px; flex-direction: column; align-items: center; } - .rate-pair-group { padding: 10px; gap: 6px; } + /* Trading terminal ultra-compact */ + .trading-terminal { padding: 8px 10px; } + .live-rate-bar { flex-direction: column; align-items: center; gap: 6px; } + .rate-pair-group { padding: 8px; gap: 4px; } .rate-pair-label { writing-mode: horizontal-tb; font-size: 10px; } - .live-rate-btn { min-width: 110px; padding: 8px 12px; } .live-rate-btn .rate-value { font-size: 16px; } - .live-rate-btn .rate-type { font-size: 8px; } - .rate-flags { font-size: 9px; } - .live-rate-time { font-size: 9px; } - .hero-grid, .hero-grid-4 { grid-template-columns: 1fr; } + .live-rate-btn .rate-type { font-size: 7px; } + + /* Filter compact */ + .filter-bar { padding: 12px; } + .preset-btn { padding: 8px 10px; font-size: 12px; min-height: 40px; } + .date-inputs input[type="date"] { font-size: 12px; padding: 8px 10px; min-height: 40px; } + + /* Hero - single column */ + .hero-grid, .hero-grid-4 { grid-template-columns: 1fr; gap: 10px; } + .hero-card { padding: 14px 16px; } .hero-card:last-child { grid-column: span 1; } .hero-value { font-size: 20px; } - .chart-card { padding: 16px; } - .chart-wrap { height: 220px; } - .chart-wrap.short { height: 180px; } + .hero-badge { font-size: 10px; padding: 2px 8px; } + + /* Charts compact */ + .chart-card { padding: 14px; } + .chart-wrap { height: 200px; } + .chart-wrap.short { height: 160px; } + .chart-card h3 { font-size: 13px; } + + /* Tables even more compact */ .data-table { font-size: 11px; } - .data-table th, .data-table td { padding: 8px 6px; } - .gauge-value { font-size: 36px; } + .data-table th { padding: 8px 6px; font-size: 9px; } + .data-table td { padding: 8px 6px; } + .data-table .rank { width: 26px; height: 26px; font-size: 10px; } + + /* Gauge */ + .gauge-value { font-size: 32px; } + .gauge-label { font-size: 11px; } + + /* Granularity buttons */ + .gran-btn { padding: 8px 12px; font-size: 12px; min-height: 40px; } + + /* Section titles */ + .section-title { font-size: 12px; letter-spacing: 0.5px; } + .section-title .icon { width: 24px; height: 24px; font-size: 12px; } } `; @@ -476,12 +570,14 @@ ${buildHeader({ role: role, userName: user.nome, activePage: 'bi' })} -
+

Ranking Agentes

- - - -
#AgenteVolumeOpsSpread R$Clientes
Carregando...
+
+ + + +
#AgenteVolumeOpsSpread R$Clientes
Carregando...
+