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

<div id="status-bar" class="status-bar card"
     hx-get="/_fragments/status?tab={{ tab_activ | default('acasa') }}"
     hx-trigger="every 15s, trimiteriChanged from:body"
     hx-swap="outerHTML"
     {% if oob %}hx-swap-oob="outerHTML"{% endif %}>

  {# Banner cont in asteptare de activare (mereu vizibil cand contul e inactiv) #}
  {% if not account_active %}
  <div style="margin-bottom:12px; padding:8px 10px; border-left:3px solid var(--warn);
              background:color-mix(in srgb, var(--warn) 12%, var(--card)); border-radius:6px; font-size:13px;">
    <strong>Cont in asteptare de activare.</strong>
    Configureaza credentialele RAR si pregateste importul acum; trimiterea catre RAR
    porneste automat dupa activare de catre administrator.
  </div>
  {% endif %}

  {# === D6: Strip sanatate mereu-vizibil DEASUPRA contoarelor ===
     Verde: worker viu + RAR ok → "Declaratiile curg normal"
     Rosu:  worker oprit SAU RAR inaccesibil → "Blocat: ... — declaratiile NU pleaca"
     Glife accesibile ✓/✗ (nu doar culoare). Layout: glifa+text stanga, ultima auth dreapta.
  #}
  <div id="strip-sanatate"
       role="status"
       aria-live="polite"
       style="display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
              padding:10px 14px; border-radius:8px; margin-bottom:14px;
              {% if sanatate_ok %}background:color-mix(in srgb, var(--ok) 13%, transparent); border:1px solid color-mix(in srgb, var(--ok) 30%, transparent);
              {% else %}background:color-mix(in srgb, var(--err) 16%, var(--card)); border:1px solid color-mix(in srgb, var(--err) 40%, transparent);
              {% endif %}">
    <div style="display:flex; align-items:center; gap:9px;">
      {% if sanatate_ok %}
      <span aria-hidden="true" style="font-weight:700; font-size:15px; color:var(--ok);">&#10003;</span>
      {% else %}
      <span aria-hidden="true" style="font-weight:700; font-size:15px; color:var(--err);">&#10007;</span>
      {% endif %}
      <span style="font-weight:700; font-size:13px;">{{ sanatate_text }}</span>
    </div>
    <span style="font:400 11px/1.4 'IBM Plex Mono',ui-monospace,monospace; color:var(--muted); white-space:nowrap;">
      {{ eticheta_ultima_auth }}: {{ last_login }}
    </span>
  </div>

  {# === D4: 3 carduri-contor (mockup exact: Trimise / In coada / De corectat) ===
     Responsive: flex-wrap => 3 pe rand desktop, 2/stivuite pe mobil (min-width:120px).
     Trimise: all-time (cifra mare) + sub-linie "luna N · azi N" (D4 + E7).
     De corectat: rosu cand >0 (s-error), muted cand 0.
  #}
  <div style="display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px;">

    {# Trimise (all-time principal, luna/azi secundar) #}
    <div class="contor-card" style="flex:1; min-width:120px;">
      <div class="contor-cifra">{{ counts_sent }}</div>
      <div class="contor-label">Trimise (total)</div>
      <div class="contor-sub">luna {{ sent_month }} &middot; azi {{ sent_today }}</div>
    </div>

    {# In coada (accent/albastru) #}
    <div class="contor-card" style="flex:1; min-width:120px;">
      <div class="contor-cifra s-queued">{{ counts_queued }}</div>
      <div class="contor-label">In coada</div>
    </div>

    {# De corectat (rosu daca >0, muted la 0; link catre lista) #}
    <a href="/" class="contor-card"
       style="flex:1; min-width:120px; text-decoration:none; display:block; cursor:pointer;"
       aria-label="De corectat: {{ blocate_total }} — click pentru lista de trimiteri">
      <div class="contor-cifra {{ 's-error' if blocate_total else 'muted' }}">{{ blocate_total }}</div>
      <div class="contor-label">De corectat</div>
    </a>

  </div>

  {# === Navigatie rapida: Trimiteri + Mapari cu badge needs_mapping ===
     Pastrata exact ca inainte (US-005): tab_activ determina marcajul activ.
  #}
  {% set _tab = tab_activ | default('acasa') %}
  <nav class="status-nav" aria-label="Navigatie rapida"
       style="display:flex; gap:8px 16px; flex-wrap:wrap; font-size:13px; border-top:1px solid var(--line); padding-top:8px;">
    <a href="/"
       {% if _tab == 'acasa' or _tab == '' %}aria-current="page"{% endif %}
       class="status-nav-link{% if _tab == 'acasa' or _tab == '' %} status-nav-activ{% endif %}">Trimiteri</a>
    <a href="/?tab=mapari"
       {% if _tab == 'mapari' %}aria-current="page"{% endif %}
       class="status-nav-link{% if _tab == 'mapari' %} status-nav-activ{% endif %}">Mapari{% if mapari_badge %}<span class="tab-badge" aria-hidden="true" style="display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; margin-left:4px; padding:0 4px; border-radius:99px; background:var(--err); color:#fff; font-size:11px; font-weight:700;">{{ mapari_badge }}</span>{% endif %}</a>
  </nav>

</div>