feat(web): dashboard ergonomic cu tab-uri, stepper import si microcopy uman (3.4)

Reorganizeaza interfata web pe trei principii, fara a atinge backend-ul de
trimitere (worker, mapping, idempotency, masina de stari neatinse):

- US-001 app/web/labels.py: modul pur stari tehnice -> text uman + clasa CSS
- US-002 bara status /_fragments/status: microcopy uman, defalcare blocate, scoped cont
- US-003 shell 6 tab-uri (Acasa/Import/Coada/Mapari/Cont/Nomenclator): deep-link
  ?tab=, panou activ randat server-side, fragmente inactive lazy, ARIA real
- US-004 stepper import 4 pasi (pur vizual; hx-target + csrf pastrate)
- US-005 Acasa onboarding checklist auto-bifat + colaps + empty states prietenoase

Reparat in cursul VERIFY/CLOSE: izolare teste (reset ratelimit._hits in fixturi),
regresie avertisment "cont in asteptare de activare" (re-introdus in bara status),
culori hardcodate -> variabile paleta. 434 teste pass.

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

app/web/templates/dashboard.html

@@ -10,61 +10,83 @@
   </form>
 </div>
 
-<!-- Sectiunea de import fisier: stare initiala = drop zone; HTMX swapeaza in flow -->
-{% include '_upload.html' %}
-
-<div class="card banner {% if not blocked %}hidden{% endif %}"
-     hx-get="/_fragments/banner" hx-trigger="every 15s" hx-swap="outerHTML">
-  <strong>Atentie:</strong> {{ blocked }} submission-uri blocate (error / needs_data / needs_mapping).
-  Plasa de siguranta pe pene RAR &gt; 30h. Verifica coada mai jos.
+<!-- Bara de status (US-002): mereu vizibila, deasupra tab-bar-ului -->
+<div id="status-bar" class="status-bar card"
+     hx-get="/_fragments/status"
+     hx-trigger="load, every 15s"
+     hx-swap="outerHTML">
+  <div class="empty muted" style="padding:8px 0;">se incarca starea…</div>
 </div>
 
-<div class="card">
-  <div style="display:flex; gap:24px; flex-wrap:wrap;">
-    <div><div class="muted">Worker</div><div class="{{ 's-sent' if worker_alive else 's-error' }}">
-      {{ 'viu' if worker_alive else 'mort' }}</div></div>
-    <div><div class="muted">RAR</div><div class="{{ 's-sent' if rar_state == 'ok' else 's-error' if 'indisponibil' in rar_state else 'muted' }}">{{ rar_state }}</div></div>
-    <div><div class="muted">Ultimul login RAR</div><div>{{ last_login or '—' }}</div></div>
-    <div><div class="muted">In coada</div><div>{{ counts.get('queued', 0) }}</div></div>
-    <div><div class="muted">Trimise</div><div class="s-sent">{{ counts.get('sent', 0) }}</div></div>
-    <div><div class="muted">Blocate</div><div class="{{ 's-error' if blocked else '' }}">{{ blocked }}</div></div>
-  </div>
-  {% if rar_state != 'ok' %}
-  <p class="muted" style="margin:12px 0 0; font-size:12px;">
-    RAR posibil indisponibil — coada de mai jos arata ultima stare cunoscuta (local), nu live din RAR.
-  </p>
-  {% endif %}
+<!-- Tab-bar: navigare intre sectiuni -->
+<div role="tablist" class="tab-bar" aria-label="Sectiuni dashboard">
+  {% set tabs = [
+    ("acasa",       "Acasa",       "tab-acasa"),
+    ("import",      "Import",      "tab-import"),
+    ("coada",       "Coada",       "tab-coada"),
+    ("mapari",      "Mapari",      "tab-mapari"),
+    ("cont",        "Cont",        "tab-cont"),
+    ("nomenclator", "Nomenclator", "tab-nomenclator")
+  ] %}
+  {% for tab_id, tab_label, tab_elem_id in tabs %}
+  <a id="{{ tab_elem_id }}"
+     role="tab"
+     href="/?tab={{ tab_id }}"
+     aria-selected="{{ 'true' if active_tab == tab_id else 'false' }}"
+     aria-controls="tab-panel"
+     class="tab-link{% if active_tab == tab_id %} tab-activ{% endif %}"
+     tabindex="{{ '0' if active_tab == tab_id else '-1' }}"
+     hx-get="/_fragments/{{ tab_id }}"
+     hx-target="#tab-panel"
+     hx-swap="innerHTML"
+     hx-push-url="/?tab={{ tab_id }}">{{ tab_label }}</a>
+  {% endfor %}
 </div>
 
-<!-- incarcat o data; NU poll (sa nu stergem o selectie in curs). Se re-randeaza la salvare. -->
-<div hx-get="/_fragments/mapari" hx-trigger="load" hx-swap="outerHTML">
-  <div class="card"><div class="empty">se incarca mapari…</div></div>
+<!-- Panou activ: randat server-side la full load; HTMX inlocuieste continutul la click pe tab -->
+<div id="tab-panel" role="tabpanel" aria-labelledby="tab-{{ active_tab }}" class="tab-panel">
+  {{ panel_html | safe }}
 </div>
 
-<div hx-get="/_fragments/cont" hx-trigger="load" hx-swap="outerHTML">
-  <div class="card"><div class="empty">se incarca cont…</div></div>
-</div>
+<script>
+(function() {
+  /* Navigare cu sageti intre tab-uri (ARIA pattern) */
+  var tablist = document.querySelector('[role="tablist"]');
+  if (!tablist) return;
+  var tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
+  tablist.addEventListener('keydown', function(e) {
+    var idx = tabs.indexOf(document.activeElement);
+    if (idx === -1) return;
+    var next = -1;
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      next = (idx + 1) % tabs.length;
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+      next = (idx - 1 + tabs.length) % tabs.length;
+    } else if (e.key === 'Home') {
+      next = 0;
+    } else if (e.key === 'End') {
+      next = tabs.length - 1;
+    }
+    if (next !== -1) {
+      e.preventDefault();
+      tabs[next].focus();
+    }
+  });
 
-<div class="card">
-  <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px;">
-    <h2 style="font-size:15px; margin:0;">Coada submissions</h2>
-    <span style="margin-left:auto; display:flex; gap:8px; flex-wrap:wrap;">
-      <a class="cardlink" href="/v1/audit/export?status=sent" download>export CSV: trimise</a>
-      <a class="cardlink" href="/v1/audit/export?status=all" download>toate</a>
-    </span>
-  </div>
-  <div hx-get="/_fragments/submissions" hx-trigger="load, every 10s" hx-swap="innerHTML">
-    <div class="empty">se incarca…</div>
-  </div>
-</div>
-
-<div class="card">
-  <details>
-    <summary style="cursor:pointer; font-size:15px; font-weight:600;">Nomenclator RAR (coduri prestatii)</summary>
-    <div style="margin-top:12px;" hx-get="/_fragments/nomenclator" hx-trigger="load" hx-swap="innerHTML">
-      <div class="empty">se incarca…</div>
-    </div>
-  </details>
-</div>
+  /* La click pe tab: actualizeaza aria-selected + tabindex */
+  tabs.forEach(function(tab) {
+    tab.addEventListener('click', function() {
+      tabs.forEach(function(t) {
+        t.setAttribute('aria-selected', 'false');
+        t.setAttribute('tabindex', '-1');
+        t.classList.remove('tab-activ');
+      });
+      tab.setAttribute('aria-selected', 'true');
+      tab.setAttribute('tabindex', '0');
+      tab.classList.add('tab-activ');
+    });
+  });
+})();
+</script>
 
 {% endblock %}