feat(ux): import compact + preview format Trimiteri + navigatie + scoatere auto_send (5.11)

8 stories TDD (echipa Sonnet, lead orchestreaza). US-001 scoate hold-ul auto_send din mapare
(has_no_auto_send->False, simbol pastrat; cod rezolvat->queued). US-002 scoate bifa auto_send
din UI. US-003 preview pas 3 in format .tabel-trimiteri (STARI_PREVIEW + nota_umana_preview,
fara repr Python; view-model prez). US-004 filtre layout/stil ca referinta + buton Custom.
US-005 navigatie Trimiteri/Mapari sub contoare pe toate paginile. US-006 import <details> nativ
colapsabil. US-007 post-commit reveal (OOB _coada/_status + HX-Trigger). US-008 auto-refresh
dupa actiuni (nudge eliminat).

VERIFY context curat PASS (8/8). /code-review high: 3 buguri reparate (tab nav la self-refresh,
pill Custom valori stale, nota_umana_preview precedenta needs_mapping). 934 passed, 1 skipped.
Backend trimitere + schema NEATINSE.

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

app/web/templates/_preview_rand.html

@@ -1,34 +1,41 @@
 {#
   _preview_rand.html — un singur rand de preview import.
   Doua moduri:
-    - display (editing falsy): <tr> normal + buton "Editeaza" pe coloana de actiuni.
-    - edit   (editing truthy): <tr> cu un singur <td colspan> ce contine un FORM PROPRIU
-      (NU #confirm-form) cu grila responsiva refolosita din _trimitere_detaliu.html.
+    - display (editing falsy): <tr> normal cu 9 coloane in format .tabel-trimiteri.
+    - edit   (editing truthy): <tr class="preview-edit"> (display:block) cu un singur
+      <td> ce contine un FORM PROPRIU (NU #confirm-form). Escapa grila table-layout:fixed.
   Swap pe RAND (hx-target pe #preview-row-N, outerHTML), NU pe #import-section.
   La save, optional OOB pe rezumat + contor "gata de trimis" (include_oob).
+
+  Campuri pre-computate de _web_compute_preview (NOT din template raw):
+    row.prez           — prezentare_din_payload(resolved): vehicul_nr, vin_scurt,
+                          operatie, cod_rar, data_prestatie, odometru
+    row.stare_eticheta — text uman (ex. "Gata de trimis"), din STARI_PREVIEW
+    row.stare_css      — clasa CSS (ex. "s-ok"), din STARI_PREVIEW
+    row.nota_umana     — mesaj uman formatat pentru coloana Note (fara repr Python)
 #}
 {%- set res = row.resolved -%}
 {%- set status = row.resolved_status -%}
-{%- set prestatii = res.get('prestatii') or [] -%}
-{%- set op = (prestatii[0].get('cod_prestatie') or prestatii[0].get('cod_op_service', '')) if prestatii else '' -%}
 {% if editing %}
 {%- set err_map = {} -%}
 {%- set fix_map = {} -%}
 {%- for e in row.errors -%}{%- if e is mapping and e.get('field') -%}{%- set _ = err_map.update({e.field: (e.get('message') or e.get('msg'))}) -%}{%- if e.get('fix') -%}{%- set _ = fix_map.update({e.field: e.get('fix')}) -%}{%- endif -%}{%- endif -%}{%- endfor -%}
-<tr id="preview-row-{{ row.row_index }}" data-status="{{ status }}" data-editing="1">
-  <td colspan="10" style="background:rgba(91,141,239,.06);">
+<tr id="preview-row-{{ row.row_index }}" data-status="{{ status }}" data-editing="1"
+    class="preview-edit">
+  <td data-eticheta="" style="padding:0; border:none;">
     <form class="rand-editare"
           hx-post="/_import/{{ import_id }}/rand/{{ row.row_index }}/editeaza"
           hx-target="#preview-row-{{ row.row_index }}"
           hx-swap="outerHTML"
           hx-indicator="#rand-spinner-{{ row.row_index }}"
           hx-disabled-elt="find button"
-          hx-on::response-error="this.querySelector('.rand-eroare-banner').style.display='block';">
+          hx-on::response-error="this.querySelector('.rand-eroare-banner').style.display='block';"
+          style="padding:12px; background:rgba(91,141,239,.06); border-radius:4px;">
       <input type="hidden" name="csrf_token" value="{{ csrf_token or '' }}">
 
       <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
         <strong style="font-size:13px;">Editare rand {{ row.row_index + 1 }}</strong>
-        <span class="pill s-{{ status }}" style="font-size:11px;">{{ status }}</span>
+        <span class="pill {{ row.stare_css }}" style="font-size:11px;">{{ row.stare_eticheta }}</span>
       </div>
 
       {% if message %}
@@ -91,22 +98,37 @@
 {%- for e in row.errors -%}{%- if e is mapping and e.get('field') and e.get('fix') -%}{%- set _ = disp_fix_map.update({e.field: e.get('fix')}) -%}{%- endif -%}{%- endfor -%}
 <tr id="preview-row-{{ row.row_index }}" data-status="{{ status }}"
     style="{% if status == 'needs_review' %}background:rgba(230,179,74,.04);{% elif status in ('already_sent', 'duplicate_in_file') %}opacity:.65;{% endif %}">
-  <td class="muted">{{ row.row_index + 1 }}</td>
-  <td>{{ res.get('vin') or '<span class="muted">—</span>' | safe }}
-    {% if disp_fix_map.get('vin') %}<span class="camp-fix">{{ disp_fix_map.get('vin') }}</span>{% endif %}
+  <td class="col-id muted" data-eticheta="#">{{ row.row_index + 1 }}</td>
+  <td class="col-stare" data-eticheta="Stare">
+    <span class="pill {{ row.stare_css }}">{{ row.stare_eticheta }}</span>
   </td>
-  <td>{{ res.get('nr_inmatriculare') or '' }}
+  <td class="col-vehicul" data-eticheta="Vehicul">
+    {{ row.prez.vehicul_nr }}
+    {% if row.prez.vin_scurt and row.prez.vin_scurt != '—' %}
+    <div class="muted" style="font-size:12px;">{{ row.prez.vin_scurt }}</div>
+    {% endif %}
+    {# Fix-uri de validare pe vehicul #}
+    {% if disp_fix_map.get('vin') %}<span class="camp-fix">{{ disp_fix_map.get('vin') }}</span>{% endif %}
     {% if disp_fix_map.get('nr_inmatriculare') %}<span class="camp-fix">{{ disp_fix_map.get('nr_inmatriculare') }}</span>{% endif %}
   </td>
-  <td>{{ res.get('data_prestatie') or '' }}
+  <td class="col-operatie" data-eticheta="Operatie">
+    <div>{{ row.prez.operatie }}</div>
+    {% if row.prez.cod_rar and row.prez.cod_rar != '—' %}
+    <div class="cod-rar-sub"><span class="cod-rar-cod">{{ row.prez.cod_rar }}</span></div>
+    {% else %}
+    <div class="muted cod-rar-sub">nemapat</div>
+    {% endif %}
+  </td>
+  <td class="col-data" data-eticheta="Data prestatie">
+    {{ row.prez.data_prestatie }}
     {% if disp_fix_map.get('data_prestatie') %}<span class="camp-fix">{{ disp_fix_map.get('data_prestatie') }}</span>{% endif %}
   </td>
-  <td>{{ res.get('odometru_final') or '' }}
+  <td class="col-km" data-eticheta="KM final">
+    {{ row.prez.odometru }}
     {% if disp_fix_map.get('odometru_final') %}<span class="camp-fix">{{ disp_fix_map.get('odometru_final') }}</span>{% endif %}
   </td>
-  <td>{{ op or '<span class="muted">—</span>' | safe }}</td>
-  <td><span class="pill s-{{ status }}">{{ status }}</span></td>
-  <td class="muted" style="font-size:12px; white-space:normal; max-width:220px;">
+  <td class="col-note" data-eticheta="Note"
+      style="font-size:12px; white-space:normal;">
     {% if status == 'already_sent' and row.get('already_sent_info') %}
       {% set ai = row.already_sent_info %}
       deja trimis {{ (ai.get('created_at') or '')[:10] }}
@@ -114,20 +136,11 @@
     {% elif status == 'duplicate_in_file' and row.get('duplicate_with') %}
       dubla cu randul
       {% for idx in row.duplicate_with %}{{ idx + 1 }}{% if not loop.last %}, {% endif %}{% endfor %}
-    {% elif row.flags %}
-      {{ row.flags[0] }}
-    {% elif row.errors %}
-      {%- for e in row.errors -%}
-        {%- if e is mapping -%}
-          {{ e.get('message') or e.get('msg') or (e.values() | list | first) }}
-        {%- else -%}
-          {{ e }}
-        {%- endif -%}
-        {%- if not loop.last %}; {% endif -%}
-      {%- endfor -%}
+    {% else %}
+      {{ row.nota_umana or '' }}
     {% endif %}
   </td>
-  <td style="text-align:center;">
+  <td class="col-verificat" data-eticheta="Verificat?" style="text-align:center;">
     {% if status == 'needs_review' %}
     <label class="chk" style="min-height:44px; justify-content:center; cursor:pointer;"
            title="Bifat inseamna ca ai verificat valorile si le incluzi in trimitere">
@@ -138,7 +151,7 @@
     </label>
     {% endif %}
   </td>
-  <td style="text-align:center;">
+  <td class="col-actiuni" data-eticheta="Actiuni" style="text-align:center;">
     {% if status not in ('already_sent', 'duplicate_in_file') %}
     <button type="button" class="btn-editeaza"
             style="min-height:44px; padding:6px 14px; font-size:13px;
@@ -154,13 +167,13 @@
 {% if include_oob %}
 {# OOB: actualizeaza rezumatul si contorul "gata de trimis" dupa save, fara a re-randa sectiunea. #}
 {% set status_labels = [
-  ('ok','gata de trimis'), ('needs_review','verifica valori'), ('needs_mapping','fara cod RAR'),
-  ('needs_data','date lipsa'), ('already_sent','deja trimis'), ('duplicate_in_file','dublicat in fisier')] %}
+  ('ok','Gata de trimis'), ('needs_review','Verifica valori'), ('needs_mapping','Cod RAR lipsa'),
+  ('needs_data','Date incomplete'), ('already_sent','Deja trimis'), ('duplicate_in_file','Duplicat in fisier')] %}
 <div id="preview-rezumat" hx-swap-oob="true"
      style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;">
   {% for status_key, label in status_labels %}
   {%- set cnt = summary.get(status_key, 0) -%}
-  {% if cnt > 0 %}<span class="pill s-{{ status_key }}">{{ cnt }} {{ label }}</span>{% endif %}
+  {% if cnt > 0 %}<span class="pill s-{{ status_key }}">{{ cnt }} {{ label | lower }}</span>{% endif %}
   {% endfor %}
 </div>
 <span id="preview-ok-count" hx-swap-oob="true" data-ok="{{ summary.get('ok', 0) }}" hidden></span>