feat(flow): smart default view (3 days + preset buttons)

Change default period from 7 to 3 days. Add quick-select preset
buttons (3 zile / 7 zile / 30 zile) that sync with the dropdown.
Reduces noise for daily operators who only need recent orders.

Cache-bust: style.css?v=22, dashboard.js?v=30

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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;
+}

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 ────────────────────────

api/app/templates/dashboard.html

@@ -51,12 +51,18 @@
     <div class="card-body py-2 px-3">
         <div id="attentionCard"></div>
         <div class="filter-bar" id="ordersFilterBar">
+          <!-- Period preset buttons -->
+          <div class="period-presets d-none d-md-flex">
+              <button class="preset-btn active" data-days="3">3 zile</button>
+              <button class="preset-btn" data-days="7">7 zile</button>
+              <button class="preset-btn" data-days="30">30 zile</button>
+          </div>
           <!-- Period dropdown -->
           <select id="periodSelect" class="select-compact">
             <option value="1">1 zi</option>
             <option value="2">2 zile</option>
-            <option value="3">3 zile</option>
+            <option value="3" selected>3 zile</option>
-            <option value="7" selected>7 zile</option>
+            <option value="7">7 zile</option>
             <option value="30">30 zile</option>
             <option value="90">3 luni</option>
             <option value="0">Toate</option>
@@ -115,5 +121,5 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="{{ request.scope.get('root_path', '') }}/static/js/dashboard.js?v=29"></script>
+<script src="{{ request.scope.get('root_path', '') }}/static/js/dashboard.js?v=30"></script>
 {% endblock %}