feat(ui): #15 U5 — web upload import (HTMX) drop→mapare→preview→confirma

Implementare completa U5 din plan-treapta2.md (sectiunea 13):

- _upload.html: drop zone + buton accesibil (a11y: drag nu e la tastatura),
  drag-and-drop JS, mesaj 'NU se trimite nimic pana confirmi',
  selector foi pt multi-sheet xlsx, stari eroare/mesaj
- _mapcoloane.html: formular mapare coloane cu .maprow/.mapcol.grow,
  sugestii fuzzy pre-selectate, etiichete <label> vizibile, sample values,
  format data configurabil
- _preview_import.html: tabel 6 stari, pills rezumat, filtre pe stare,
  .chk per-rand pe needs_review (D11), banner declarant .banner.warn
  direct deasupra input-ului N (D12), bara confirmare sticky,
  text 'dubla cu randul N' pe duplicate_in_file (D10 daltonism),
  link export CSV randuri esuate
- base.html: .s-needs_review (warn), .s-already_sent/.s-duplicate_in_file
  (muted), .drop-zone, .banner.warn, .sticky-bar, .htmx-indicator
- routes.py: rute /_import/upload/mapare-coloane/preview/reset/confirma;
  helper _web_compute_preview refoloseste _resolve_row_for_preview,
  _already_sent_lookup, _signature din import_router (fara a-l edita);
  commit ON CONFLICT DO NOTHING (TOCTOU); log atestare
- tests/test_import_ui.py: 15 teste (dashboard, upload, mapare, preview,
  confirmare N corect/gresit, reset, erori, multi-sheet, a11y D10/D11/D12)

279 teste total, 0 esecuri.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/web/templates/_upload.html

@@ -0,0 +1,106 @@
+<div id="import-section">
+  <div class="card">
+    <h2 style="font-size:15px; margin:0 0 12px;">Import fisier (xlsx / csv)</h2>
+
+    {% if message %}
+    <div class="flash" style="margin-bottom:12px;">{{ message }}</div>
+    {% endif %}
+
+    {% if error %}
+    <div class="flash" style="border-color:var(--err); background:#241a1a; margin-bottom:12px;"
+         role="alert">{{ error }}</div>
+    {% endif %}
+
+    {% if sheets %}
+    <div class="flash" style="border-color:var(--warn); background:#201c0f; margin-bottom:12px;">
+      Fisierul are mai multe foi de lucru. Alege foaia de mai jos si incarca din nou.
+    </div>
+    {% endif %}
+
+    <form id="upload-form"
+          hx-post="/_import/upload"
+          hx-target="#import-section"
+          hx-swap="outerHTML"
+          hx-encoding="multipart/form-data"
+          hx-indicator="#upload-spinner">
+
+      {% if sheets %}
+      <div style="margin-bottom:12px;">
+        <label for="sheet-select"
+               style="display:block; margin-bottom:4px; font-size:13px; color:var(--muted);">
+          Foaie de lucru
+        </label>
+        <select id="sheet-select" name="sheet_name" style="min-width:200px;">
+          {% for s in sheets %}
+          <option value="{{ s }}">{{ s }}</option>
+          {% endfor %}
+        </select>
+      </div>
+      {% endif %}
+
+      <div class="drop-zone" id="drop-zone"
+           role="region" aria-label="Zona de incarcare fisier">
+        {% if not sheets %}
+        <p style="font-size:17px; margin:0 0 4px; font-weight:600;">Primul fisier? Trage-l aici.</p>
+        <p class="muted" style="margin:0 0 16px; font-size:13px;">xlsx sau csv, max 5000 randuri</p>
+        {% else %}
+        <p class="muted" style="margin:0 0 16px; font-size:14px;">
+          Incarca fisierul din nou dupa ce ai ales foaia.
+        </p>
+        {% endif %}
+
+        <input id="file-input" type="file" name="file" accept=".xlsx,.xls,.csv"
+               style="display:none;" aria-label="Selecteaza fisier xlsx sau csv">
+        <button type="button" id="upload-btn"
+                style="min-height:44px; padding:10px 24px; font-size:14px;">
+          Alege fisier
+        </button>
+      </div>
+
+      <p class="muted" style="margin:8px 0 0; font-size:12px;">
+        NU se trimite nimic la RAR pana confirmi explicit.
+      </p>
+
+      <span id="upload-spinner" class="htmx-indicator muted"
+            style="font-size:13px; margin-top:6px; display:inline;">
+        se parseaza fisierul...
+      </span>
+    </form>
+  </div>
+</div>
+
+<script>
+(function() {
+  var btn = document.getElementById('upload-btn');
+  var fi  = document.getElementById('file-input');
+  var dz  = document.getElementById('drop-zone');
+  var frm = document.getElementById('upload-form');
+  if (!btn || !fi || !frm) return;
+
+  btn.addEventListener('click', function() { fi.click(); });
+
+  fi.addEventListener('change', function() {
+    if (fi.files.length > 0) frm.requestSubmit();
+  });
+
+  dz.addEventListener('dragover', function(e) {
+    e.preventDefault();
+    dz.classList.add('drag-over');
+  });
+  dz.addEventListener('dragleave', function(e) {
+    if (!dz.contains(e.relatedTarget)) dz.classList.remove('drag-over');
+  });
+  dz.addEventListener('drop', function(e) {
+    e.preventDefault();
+    dz.classList.remove('drag-over');
+    var f = (e.dataTransfer.files || [])[0];
+    if (!f) return;
+    try {
+      var dt = new DataTransfer();
+      dt.items.add(f);
+      fi.files = dt.files;
+    } catch (_) {}
+    frm.requestSubmit();
+  });
+})();
+</script>