diff --git a/api/app/static/css/style.css b/api/app/static/css/style.css index 405a271..ef3e79d 100644 --- a/api/app/static/css/style.css +++ b/api/app/static/css/style.css @@ -1033,3 +1033,29 @@ tr.mapping-deleted td { background: var(--warning-light); color: var(--warning-text); } + +/* ── Period preset buttons ─────────────────────────────────────────── */ +.period-presets { + display: flex; + gap: 2px; + align-items: center; +} +.preset-btn { + background: var(--surface); + border: 1px solid var(--border); + color: var(--text-secondary); + padding: 3px 10px; + font-size: 0.78rem; + cursor: pointer; + transition: all 0.15s; + border-radius: 4px; +} +.preset-btn:hover { + background: var(--surface-raised); +} +.preset-btn.active { + background: var(--accent-light); + color: var(--accent-text); + border-color: var(--accent); + font-weight: 500; +} diff --git a/api/app/static/js/dashboard.js b/api/app/static/js/dashboard.js index 950ea46..658d126 100644 --- a/api/app/static/js/dashboard.js +++ b/api/app/static/js/dashboard.js @@ -203,6 +203,9 @@ async function loadSchedulerStatus() { function wireFilterBar() { // Period dropdown document.getElementById('periodSelect')?.addEventListener('change', function () { + document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active')); + const matchBtn = document.querySelector(`.preset-btn[data-days="${this.value}"]`); + if (matchBtn) matchBtn.classList.add('active'); const cr = document.getElementById('customRangeInputs'); if (this.value === 'custom') { cr?.classList.add('visible'); @@ -240,6 +243,20 @@ function wireFilterBar() { loadDashOrders(); }, 300); }); + + // Period preset buttons + document.querySelectorAll('.preset-btn[data-days]').forEach(btn => { + btn.addEventListener('click', function() { + document.querySelectorAll('.preset-btn').forEach(b => b.classList.remove('active')); + this.classList.add('active'); + const days = this.dataset.days; + const sel = document.getElementById('periodSelect'); + if (sel) { sel.value = days; } + document.getElementById('customRangeInputs')?.classList.remove('visible'); + dashPage = 1; + loadDashOrders(); + }); + }); } // ── Dashboard Orders Table ──────────────────────── diff --git a/api/app/templates/dashboard.html b/api/app/templates/dashboard.html index b95c200..26753a8 100644 --- a/api/app/templates/dashboard.html +++ b/api/app/templates/dashboard.html @@ -51,12 +51,18 @@
+ +
+ + + +