rar-autopass/app/web/templates/dashboard.html

{% extends "base.html" %}
{% block content %}

{# US-007 (5.5): nav-ul ad-hoc (Panou admin + logout) a fost mutat in meniul de cont (☰)
   din header (base.html). Aici raman doar bara de status + tab-bar-ul de lucru zilnic. #}

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

<!-- Tab-bar: navigare intre sectiuni -->
<div role="tablist" class="tab-bar" aria-label="Sectiuni dashboard">
  {# US-007 (5.5): tab-bar redus la suprafetele de LUCRU ZILNIC (Acasa·Mapari).
     Cont/Integrare/Nomenclator s-au mutat in meniul de cont (☰) din header — rutele
     `/_fragments/{cont,integrare,nomenclator}` + deep-link `?tab=` raman valide. #}
  {% set tabs = [
    ("acasa",       "Acasa",       "tab-acasa"),
    ("mapari",      "Mapari",      "tab-mapari")
  ] %}
  {% for tab_id, tab_label, tab_elem_id in tabs %}
  {% set badge = (badges.get(tab_id, 0) if badges else 0) %}
  <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"
     {% if badge %}aria-label="{{ tab_label }}, {{ badge }} necesita atentie"{% endif %}
     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 }}{% if badge %}<span class="tab-badge" aria-hidden="true" style="display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; margin-left:6px; padding:0 5px; border-radius:99px; background:var(--err); color:#fff; font-size:11px; font-weight:700;">{{ badge }}</span>{% endif %}</a>
  {% endfor %}
</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>

<script>
(function() {
  /* Navigare cu sageti intre tab-uri (ARIA pattern) — scoped pe fiecare tablist.
     Folosim querySelectorAll pentru a suporta multiple tablist-uri pe pagina
     (tab-bar principal + tab-urile interne din panoul Integrare). */
  document.querySelectorAll('[role="tablist"]').forEach(function(tablist) {
    var tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
    if (!tabs.length) return;

    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();
      }
    });

    /* La click pe tab: actualizeaza aria-selected + tabindex (scoped pe tablist-ul curent) */
    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 %}