From e1243f603e15eb58f6df44431ae8a88c405ee36b Mon Sep 17 00:00:00 2001 From: Claude Agent Date: Mon, 29 Jun 2026 08:18:27 +0000 Subject: [PATCH] fix(mapari-mobil): butoane Salveaza/Sterge vizibile + carduri compacte la 390px MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Doua probleme raportate de user pe pagina Mapari pe mobil (screenshot 390px): 1. Butoanele Salveaza/Sterge taiate: regula `.tabel-card td button {width:100%}` (specificitate 0,1,2) batea `.act {width:44px}` (0,1,0), deci cele doua butoane .act deveneau full-width si al doilea (Sterge) iesea din card (celula are nowrap). Fix: bloc @media (max-width:767px) nou, ultimul in diff --git a/docs/raport-comparatie-mockup-5.16.md b/docs/raport-comparatie-mockup-5.16.md new file mode 100644 index 0000000..edfbe6c --- /dev/null +++ b/docs/raport-comparatie-mockup-5.16.md @@ -0,0 +1,533 @@ + +# Raport comparatie UI real vs. mockup-uri (PRD 5.16 + 5.17) + +**Data**: 2026-06-29 +**Metoda**: comparatie in browser (Playwright, 1280px + 390px) intre aplicatia live +(`http://localhost:8010`, cont 2 "Romfast SRL", 34 trimiteri) si mockup-urile de +referinta din `docs/mockups/`. Pentru fiecare pagina/formular am pus fata in fata +implementarea reala si intentia de design, apoi am evaluat in spiritul PRD-urilor. + +> Concluzie pe scurt: **antetul, /login, selectorul de tema, contoarele si modalele +> sunt conforme**. Abaterea dominanta este **densitatea informationala**: lista de +> trimiteri si tabelul de preview din import afiseaza mult mai multa informatie pe rand +> decat mockup-ul minimalist — exact observatia userului ("randurile foarte late"). +> Plus un **bug de layout** (coliziune coloane in preview-ul de import) si cateva +> abateri minore de copy/stil. + +--- + +## 1. Lista de trimiteri — rand cu 4 linii in loc de 2 (PRIORITATE INALTA) + +**Aceasta e problema semnalata de user.** + +| | Mockup (`prd-5.16-dashboard.html`) | Real (`_submissions.html:100-139`) | +|---|---|---| +| Linii / rand | **2**: VIN + `operatie · ora` | **4**: VIN; `operatie · data+ora+secunde`; cod RAR; `nr · data · #id` | +| Pastila de stare | DOAR pe exceptii (In coada / De corectat / Trimis); finalizatele **nu au pastila** | **pe fiecare rand**, inclusiv "Finalizat" | +| Marca de timp | ora scurta (`09:42`) | datetime complet cu secunde (`27.06.2026 22:25:52`) | +| Inaltime efectiva | ~2 randuri text | ~2x mai mare; pe mobil un rand se desfasoara pe 5-6 linii | + +Cauza in cod (`app/web/templates/_submissions.html`): +- **Linia 3** — codul RAR (`OE-8`) / "nemapat": liniile 113-119. +- **Linia 4** — `vehicul_nr · data_prestatie · #id_prezentare`: liniile 121-127. +- **Marca de timp** foloseste `r.updated_at` complet (data+ora+secunde): linia 111 + (mockup-ul foloseste ora scurta). +- **Pastila mereu randata** cu `r.stare_scurt`: liniile 137-139 (mockup-ul ascunde + pastila pe starea implicita/finalizata — minimalism "linistit cand e ok, zgomotos + cand e exceptie", in spiritul D6/zero-silent-failures). + +**Recomandari** (in ordinea impactului): +1. **Comprima la 2 linii pe starea normala**: pastreaza linia 1 (VIN) + linia 2 + (`operatie · data`). Muta cod RAR, nr. inmatriculare si `#id_prezentare` in modalul + de detaliu (care le are deja — vezi sectiunea 5) sau intr-un al doilea rand afisat + doar la hover/expand. Informatia completa nu trebuie sa coabiteze pe rand cu lista. +2. **Ascunde pastila pe starea finalizata** (afiseaz-o doar pe `queued/sending/ + needs_*/error`), exact ca mockup-ul. Finalizat = implicit linistit. +3. **Scurteaza marca de timp**: data fara secunde (`27.06.2026`) sau `data · ora` + fara secunde. Secundele sunt zgomot. +4. Daca cod RAR / nr. inmatriculare sunt considerate esentiale in lista, fa-le optional + (toggle "afiseaza detalii") in loc sa fie mereu prezente — implicit colapsat. +5. Minor: `eticheta-problema` are `font-size:10px` (`_submissions.html:133`) — sub + pragul de 12px din scala 5.16/US-002; recableaza pe `--fs-xs`. + +--- + +## 2. Acasa — titlu de sectiune + toolbar mult mai greu decat mockup-ul (PRIORITATE MEDIE) + +PRD 5.16/US-002 cere explicit: *"Se ELIMINA titlul de sectiune ... lista incepe direct +sub tab-uri/filtre"* si *"fara subtitlu de sectiune"*. In real: + +- **Titlul "Trimiterile tale" (h2) + link-urile "export CSV: trimise | toate"** sunt inca + prezente ca antet de sectiune deasupra listei. Mockup-ul nu are titlu de sectiune — + lista porneste direct sub tab-uri. +- **Toolbar-ul de filtre e mult mai dens** decat mockup-ul. Mockup: 4 pastile simple de + stare (`Toate / In coada / Trimise / De corectat`). Real: pastile de timp + (`Azi / 7 zile / 30 zile / Custom`) + camp cautare `Vehicul (nr/VIN)` + butoane + `Filtreaza` + `Toate` + un AL DOILEA rand de actiuni bulk (`Cod RAR ... / Aplica cod + / Sterge selectate`). Sunt functii reale, dar contrazic intentia minimalista. + +**Recomandari**: +1. Elimina antetul "Trimiterile tale" (sau redu-l la un label discret); muta link-urile + de export CSV langa tab-uri sau in meniul de cont. +2. Pastreaza filtrele de timp + cautarea (sunt utile), dar **colapseaza randul de actiuni + bulk** (Cod RAR / Aplica cod / Sterge selectate) intr-un buton "Actiuni" care se + deschide doar cand exista selectie — azi ocupa un rand permanent. +3. Aliniaza pastilele de stare cu mockup-ul (stari, nu doar timp), eventual ambele + grupuri pe acelasi rand. + +--- + +## 3. Linia "Plan: Gratuit · 34/60 luna asta" reintroduce un meta-rand sub tab-uri (PRIORITATE MEDIE) + +PRD 5.17/US-006 + 5.16 cer planul ca **badge in antet** (exista — "GRATUIT") si **linie +in meniul burger**, NU ca rand in corpul paginii. Real afiseaza consumul si ca **rand +standalone sub tab-uri**, pe FIECARE tab (Acasa, Mapari, Integrare). Asta: +- duplica informatia din antet, si +- recreeaza exact "meta-randul de sectiune" pe care 5.16/US-002 voia sa-l elimine. + +**Recomandare**: muta `N/60 luna asta` in meniul burger / pagina Cont (cum cere PRD-ul); +pastreaza in antet doar badge-ul de plan. Daca avertizarea de consum (>=80%) trebuie sa +fie vizibila in corp, afiseaz-o **doar** in starea de avertizare, nu permanent. + +--- + +## 4. Import — preview pas 3: coliziune de coloane + tabel mai greu decat mockup-ul + +### 4a. BUG layout — pastila STARE se suprapune peste coloana VEHICUL (PRIORITATE INALTA) +In tabelul de preview (pas Verifica), pastila de stare ("Date incomplete" / "Cod RAR +lipsa") se **suprapune vizual** peste textul din coloana VEHICUL (`CT88NOE` / `B123ABC` +apar lipite/sub pastila). Vizibil clar la 1280px. E un bug de latime de coloana / pastila +fara `white-space:nowrap` sau coloana STARE prea ingusta. +**Recomandare**: largeste coloana STARE / pune pastila pe `nowrap` cu min-width, sau +muta stare si vehicul pe coloane clar separate; testeaza la 1280 si 390. + +### 4b. Densitate — tabel cu 8 coloane vs. 4 in mockup (PRIORITATE MEDIE) +Mockup pas 3 = 4 coloane (`VIN / OPERATIE / DATA / STARE` + link editeaza). Real = 8 +coloane (`# / STARE / VEHICUL / OPERATIE / DATA / KM FINAL / NOTE / ACTIUNI`), cu coloana +NOTE care afiseaza inline mesaje de validare lungi ("VIN trebuie sa aiba exact 17 +caractere..."). Aceeasi tendinta ca lista de trimiteri: prea multa informatie pe rand. +**Recomandare**: redu la coloanele esentiale (Stare / Vehicul / Operatie / Data + +Editeaza); muta KM si mesajul de validare in randul de editare (care le are deja) sau +intr-un tooltip pe pastila de stare. + +### 4c. Pastilele de filtru sunt toate albastru-plin (par toate active) (PRIORITATE MICA) +`Toate (2) / Cod RAR lipsa (1) / Date incomplete (1)` sunt randate ca butoane albastru +plin — toate par selectate simultan. Mockup-ul foloseste pastile subtiri cu dot colorat, +doar cea activa accentuata. +**Recomandare**: stil outline + dot pentru filtrele inactive; plin doar pentru cel activ. + +--- + +## 5. Import — pas 1: dropzone compact vs. zona mare din mockup (PRIORITATE MICA) + +Mockup pas 1 = zona mare cu chenar punctat, iconita upload centrata, "Trage fisierul +aici", buton "Alege fisier" + chips de format (`.xlsx .csv .xls`). Real = o bara +orizontala slim ("Importa: [Alege fisier] sau trage aici"). Bara compacta se potriveste +cu "import colapsat", deci e o abatere **acceptabila**; daca se doreste fidelitate cu +mockup-ul, zona se poate inalta cand `
` e deschis (chenar punctat + iconita). +Pozitiv: stepper-ul (4 pasi, cifre in cerc, pas finalizat = bifa verde) si saltul automat +peste pas 2 la format recunoscut sunt conforme si bune. + +--- + +## 6. Formularul de editare (modal corectie / editare rand) + +Comparatie cu modalul din mockup ("Corecteaza trimiterea / randul"): + +- **Conform**: structura (VIN; Data + Nr. inmatriculare pe 2 coloane; Observatii; + "Prestatii — cod RAR pe fiecare operatie"; picker cu denumiri; "+ Adauga alta + operatie / cod RAR"). Bug-urile US-004..007 sunt rezolvate functional. +- **Anomalie (PRIORITATE MEDIE)**: intre randul de operatie si controlul "+ Adauga alta + operatie" apare un **chenar gol** (container de chips fara continut) — pare nefinisat / + neintentionat. De ascuns cand nu are chips. +- **Stil nume operatie (PRIORITATE MICA)**: mockup-ul afiseaza numele operatiei + **bold/uppercase, proeminent** ("SCHIMB PLACUTE FRANA — lipsa cod"); real il arata + in greutate normala, mic ("Schimb placute frana · lipsa cod"). Mai putin emfatic. +- **Copy butoane (PRIORITATE MICA)**: real "Salveaza / Anuleaza"; mockup + PRD/US-007 + spun "Renunta" (si "Salveaza si retrimite" in modalul de detaliu). Aliniaza eticheta + "Anuleaza" -> "Renunta". + +--- + +## 7. Tema transversala — diacritice in textul vizibil (PRIORITATE MICA) + +Mockup-urile (intentia de design) folosesc diacritice romanesti complete in textul catre +user ("Observatii" -> "Observații", "Salveaza" -> "Salvează", "Numar inmatriculare" -> +"Număr înmatriculare", "Adauga" -> "Adaugă", "In coada" -> "În coadă"). Aplicatia reala +omite diacriticele in majoritatea label-urilor. US-001 a confirmat ca fontul de sistem +randeaza corect diacriticele, iar landing-ul le foloseste deja — deci e o diferenta de +finisaj fata de mockup, nu o limitare tehnica. +**Recomandare**: aplica diacritice la **textul vizibil pentru user** (label-uri, butoane, +titluri), pastrand codul/comentariile fara diacritice ca azi. Optional (non-blocant); +de decis daca se urmareste fidelitate completa cu mockup-urile. + +--- + +## 8. Pagini fara mockup dedicat (judecate dupa design system) — CONFORME + +- **Mapari** (`?tab=mapari`): carduri, tabele, fonturi uniforme — coerent cu sistemul. + Singura observatie: cardul gol "De rezolvat" cand nu exista needs_mapping (se poate + ascunde cand e gol). +- **Integrare** (`?tab=integrare`): tab-uri de limbaj (curl/Python/PHP/C#/Node/VFP), + blocuri de cod, carduri export + test cheie — curat si profesional. + +--- + +## 9. Ce este DEJA conform mockup-urilor (pentru context — fara actiune) + +- **/login**: layout brandeit pe 2 coloane (panou ROMFAST + formular), badge mediu, + link signup — conform `prd-5.16-header-login-tema.html`. +- **Antet**: titlu "ROMFAST AUTOPASS" + badge mediu (TEST) + badge plan (GRATUIT) + + "Service auto: Romfast SRL" + pastila "RAR online" (dot verde) + meniu burger. + Conform US-010/003. +- **Selector tema**: pill cu iconita + eticheta ("Auto"), iconita-only pe mobil. + Conform US-011. +- **Contoare**: 5 carduri separate desktop (Total / Luna asta / Azi / In coada / + De corectat); bara compacta de cifre pe mobil. Conform US-002. (Minor: eticheta + "Total" vs mockup "Total trimise"; pe mobil "Erori" vs mockup "Corectat".) +- **Import colapsat pe Acasa** (`
` slim "+ Importa fisier"). Conform US-013. +- **Modal detaliu trimitere finalizata**: read-only, label-uri clare, "Detalii tehnice" + colapsabil — curat si conform. + +--- + +## Rezumat prioritati + +| # | Constatare | Prioritate | Fisier principal | +|---|---|---|---| +| 1 | Rand lista cu 4 linii + pastila mereu (rânduri late) | **INALTA** | `_submissions.html:110-139` | +| 4a | Coliziune pastila STARE / coloana VEHICUL in preview import | **INALTA** | `_preview_import.html` | +| 2 | Titlu sectiune "Trimiterile tale" + toolbar bulk permanent | MEDIE | `_acasa.html` / `_submissions.html` | +| 3 | "Plan: N/60" ca rand in corp (duplica antetul) | MEDIE | `_acasa.html` / context layout | +| 4b | Tabel preview cu 8 coloane vs 4 | MEDIE | `_preview_import.html` | +| 6 | Chenar gol de chips in formularul de editare | MEDIE | `_chips_prestatii.html` | +| 4c | Pastile de filtru toate albastru-plin | MICA | `_preview_import.html` | +| 5 | Dropzone import compact vs zona mare | MICA | `_upload.html` | +| 6 | Nume operatie ne-emfatic + copy "Anuleaza" vs "Renunta" | MICA | `_form_editare.html` / `_chips_prestatii.html` | +| 7 | Diacritice lipsa in textul vizibil | MICA | transversal | + +**Cele doua corectii cu impact maxim**: (1) comprimarea randului de lista la 2 linii + +ascunderea pastilei pe finalizat, si (4a) bug-ul de coliziune din preview-ul de import. +Restul sunt finisaje de aliniere la spiritul minimalist al mockup-urilor. + +--- +--- + + +# /autoplan — Revizuire automata (CEO → Design → Eng) + +> Tratam acest raport ca **plan**: cele 10 recomandari (sectiunile 1-7) sunt +> elementele de implementat. Scope UI: DA (Design conduce). Scope DX: NU +> (sectiunea 8 "Integrare" e marcata CONFORM, fara actiune pe suprafata API/CLI). +> Voci duale: Claude subagent + Codex per faza. Decizii intermediare auto-decise +> pe cele 6 principii; deciziile de gust merg la poarta finala. + +## Faza 1 — CEO (Strategie & Scope) + +### 0A. Provocarea premiselor + +Planul (raportul) se sprijina pe 4 premise implicite: + +- **P1 — Fidelitatea fata de mockup este tinta.** Mockup-urile reprezinta intentia + corecta de design; orice abatere a UI-ului real e un defect. *Status: in mare + valida, dar nu absoluta* — raportul insusi recunoaste ca UI-ul real a adaugat + FUNCTII pe care mockup-ul minimalist nu le are (cautare, filtre de timp, bulk-fix + cod RAR, cod RAR + #id_prezentare pe rand). Acele functii pot sa-si merite densitatea. +- **P2 — "Densitatea informationala" e problema centrala**, iar minimalismul ("linistit + cand e ok, zgomotos pe exceptie", D6/zero-silent-failures) e principiul corect. + *Status: validata de durere reala* — userul s-a plans explicit de "randurile foarte + late". Aici premisa e bine sustinuta. +- **P3 — Criteriile de acceptare PRD 5.16/5.17 sunt obligatorii** si UI-ul real a + derivat de la ele (titlu sectiune de eliminat `_coada.html:10`; plan ca badge nu rand + in corp `_status.html:140`; prag tipografic 12px incalcat de `font-size:10px` + `_submissions.html:133`). *Status: validata — sunt AC contractuale, nu preferinte.* + Acestea NU sunt decizii de gust; sunt conformare la PRD. +- **P4 — Mutarea informatiei de pe rand nu pierde nimic** fiindca e deja in modalul + de detaliu / randul de editare. *Status: tehnic adevarata* (verificat: modalul are + cod RAR/nr/#id; randul de editare are KM + mesaj validare), dar muta un cost de la + "vizibil la scanare" la "vizibil dupa click" — un compromis de UX, nu zero-cost. + +**Premisa care merita judecata umana** (poarta de mai jos): pentru informatia scoasa +de pe rand (cod RAR, #id_prezentare, marca de timp completa) — o **ascundem in modal** +(minimalism strict, fidel mockup-ului) sau o **pastram in spatele unui toggle +compact/detaliat** (operatorul de service poate vrea sa scaneze cod RAR/#id fara click)? +Userul s-a plans de latime, NU neaparat ca informatia in sine e inutila. + +### 0B. Harta de leverage (ce exista deja) + +| Sub-problema | Cod existent reutilizat | Tip schimbare | +|---|---|---| +| Compresie rand lista | modal detaliu (`_fragments/trimitere/{id}`) are deja cod RAR/nr/#id | SCADERE (sterge L3/L4 din `_submissions.html`) | +| Pastila pe finalizat | `r.stare_css/stare_scurt` exista; conditie lipsa | conditie `{% if %}` in jurul liniei 138 | +| Prag tipografic 12px | sistemul de token-uri `--fs-xs:12px` exista deja in mockup/base | re-cablare literal `10px` → `--fs-xs` | +| KM + validare in preview | randul de editare le are deja | SCADERE coloane din `_preview_import.html` | +| Chenar gol chips | `_has_ops`/`_chips` deja calculate | conditie `{% if _chips %}` pe container | + +Concluzie: planul e **dominant SCADERE + re-tokenizare**, putin cod nou, leverage mare. + +### 0B-bis. Pattern de fond depistat (in afara raportului, in blast radius) + +`_submissions.html` foloseste **literali px inline** peste tot (`font-size:13px`, +`12px`, `11px`, `10px` — liniile 18, 45, 54, 63, 133, 153, 182...) in loc de token-uri +`--fs-*`. Raportul a prins DOAR instanta de 10px (US-002). Cauza-radacina e ca scala +tipografica 5.16 nu e aplicata sistematic in template-urile de lista/preview. *Flag +pentru poarta finala: extindem fix-ul la re-tokenizarea template-urilor atinse, sau +doar instanta 10px?* (In blast radius, < 1 zi CC — candidat de auto-aprobat pe P2.) + +### 0C. Dream-state delta + +``` +CURENT → ACEST PLAN → IDEAL 12 LUNI +UI real, dens, derivat de Aliniat la minimalismul Sistem de token-uri aplicat +la AC-urile PRD 5.16/5.17; mockup-ului; bug 4a rezolvat; uniform (zero literali px); +bug coliziune coloane; randuri 2 linii; tipo 12px+ teste de regresie design vs +literali px imprastiati. pe instantele semnalate. mockup (Playwright snapshot). +``` +Delta ramasa dupa plan: re-tokenizarea completa + testele de regresie vizuala (defer). + +### 0C-bis. Alternative de implementare + +| # | Abordare | Efort (CC) | Risc | Pro / Contra | +|---|---|---|---|---| +| A | Fix exact ca raportul (scade L3/L4 in modal, ascunde pastila, fix bug, polish) | ~30 min | mic | + fidel mockup, simplu / − operatorul pierde cod RAR/#id la scanare | +| B | Ca A, dar info de rand in spatele unui toggle compact/detaliat | ~60 min | mediu | + nu pierde info / − complexitate noua, contrazice "explicit over clever" (P5) | +| C | Ca A + re-tokenizare px→token in template-urile atinse | ~50 min | mic | + rezolva cauza-radacina P2 / − atinge mai multe linii | + +Recomandare CEO: **A pentru structura** (P5 explicit, P1 completeness fata de mockup), +cu **C ca extindere in blast radius** (P2 boil-the-lake pe tipografie). B intra la poarta +finala ca decizie de gust (toggle vs. mutare-in-modal). + +### 0D. Mod: **SELECTIVE EXPANSION** +Nucleu = sectiunile 1 + 4a (impact maxim, una e bug). Extindere selectiva in blast +radius = re-tokenizarea (0B-bis) + AC-urile PRD (2, 3). Restul (polish MICA) = inclus, +cost trivial. + +### 0E. Interogare temporala +- **Ora 1**: bug 4a (coliziune `_preview_import.html`) + compresie rand `_submissions.html` + + ascundere pastila finalizat. Astea ating durerea userului + singurul bug real. +- **Ora 6+**: sectiunile 2, 3 (conformare AC), chenarul gol chips (6), polish copy/stil, + diacritice (decizie separata). + +### 0F. Confirmare mod +SELECTIVE EXPANSION confirmat: planul livreaza nucleul de impact + extinderile in blast +radius care isi platesc costul, defera testele de regresie vizuala. + +### POARTA DE PREMISE — REZOLVATA (directiva user, 2026-06-29) + +Userul a dat o directiva mai precisa decat oricare optiune A/B/C. **Spec guvernanta +pentru randul de lista:** + +> **2 linii MAXIM** (inaltime minimalista, ca in mockup), dar randul CONTINE: +> **nr. inmatriculare · operatia RAR (cod) · operatia din service (denumire) · data**, +> plus **pill de stare (inclusiv "Finalizat")**. + +Consecinte (override-uri fata de recomandarile raportului): +- **OVERRIDE rec. 1.1** (partial): cod RAR si operatia din service RAMAN pe rand, NU se + muta in modal. Doar VIN (ca identificator primar), #id_prezentare si secundele din + timestamp se scot. Identificatorul primar devine **nr. inmatriculare**, nu VIN. +- **OVERRIDE rec. 1.2**: pastila RAMANE pe finalizat (userul cere explicit "+ pill + finalizat"). NU se ascunde pe starea normala. (Raportul recomanda ascunderea — anulat.) +- **CONFIRMA rec. 1.3**: marca de timp scurta (data, fara secunde). +- **CONFIRMA rec. 1.4**: implicit 2 linii (fara toggle detaliat — userul nu vrea toggle). + +Aceasta devine cerinta de design pentru Faza 2 (aranjarea celor 5 campuri in 2 linii). +Campuri necesare pe rand: `vehicul_nr`, `cod_rar`, `operatie` (denumire service), `data`, +`pill`. Campuri eliminate: `vin_scurt` (sau retrogradat), `#id_prezentare`, secunde. + +> Nota proces: aceasta a fost singura poarta de judecata umana din Faza 1. Suprafata +> strategica (minimalism vs. densitate) a fost decisa de user; nu mai exista premisa +> deschisa de provocat. Vocile duale CEO sunt redundante pe aceasta suprafata si se +> consolideaza in Faza 3 (vezi nota de proportionalitate). + +### Voci (proportionalitate) +- Codex: **INDISPONIBIL** (limita de utilizare atinsa, reset 18 iul) → tag `[subagent-only]`. +- Claude subagent Design + Claude subagent Eng: rulate la adancime completa, pe cod real + (template-uri + rute + teste), nu pe proza. Acestea sunt vocile substantiale. + +## Faza 2 — Design (UI/UX) + +### Aranjarea randului de 2 linii (livrabilul central) + +Placuta-primul e corect: un operator identifica masina dupa nr. inmatriculare de pe +comanda, nu dupa VIN de 17 caractere. Layout propus (peste `.trimitere-slim` existent): + +``` +L1: B-123-ABC (placuta, --fs-md, weight 600, ink) ............ [ PILL dreapta ] +L2: OE-8 (cod RAR, mono/accent) · Schimb placute frana (operatie, ink, ellipsis) · 27.06.2026 (muted) +``` + +- L1 = `vehicul_nr` (stanga, `flex:1 1 auto; min-width:0`) + pill (dreapta, `flex:0 0 auto`). +- L2 = flex 3 celule: cod RAR (auto, primul — e identificatorul scanabil) · operatie + (`flex:1 1 auto; min-width:0; white-space:nowrap; text-overflow:ellipsis` — ellipsis-ul + pe operatie garanteaza ca randul NU trece pe a 3-a linie nici la 390px) · data (muted, ultima). +- Operatia ramane **ink, nu muted** (e al doilea cel mai citit camp dupa placuta). +- Ierarhie vizuala: placuta → pill → cod+operatie → data. + +### CONSTATARI DESIGN dincolo de raport (corectii) + +| # | Constatare | Sev | Fix | +|---|---|---|---| +| D-1 | Linia `eticheta_problema` (L:129-134) e a **5-a linie** → strica "2 linii MAX" pe randurile de eroare | inalta | DECIZIE DE GUST (vezi poarta) — drop vs micro-linie doar pe eroare | +| D-2 | Pastilele **NU sunt conforme** (raportul sec.9 gresit): chip outline gri, fara dot/fill, doar culoare text. Cu pill permanent pe orice rand → zgomot gri permanent | medie-inalta | restileaza pill ca mockup: fill tint + dot 7px + text colorat (DECIZIE DE GUST) | +| D-3 | Bug 4a cauza-radacina: `table-layout:fixed` + `.col-stare width:104px` (base.html:401) + pill `nowrap` → overflow peste col-vehicul | inalta | widen `.col-stare`→~140px; reducerea 8→4 col NU rezolva bug-ul (curge in coloanele fluide, nu in col-stare fixa) | +| D-4 | Lipsa stare de eroare la incarcarea listei (HTMX `/_fragments/submissions` 500 → spinner blocat) | medie | adauga partial de eroare / `hx-on::response-error` (DEFER TODOS — pre-existent) | +| D-5 | Filtre 4c "toate albastru": raportul e **STALE** — codul are deja `background:transparent` + doar activ plin (`_preview_import.html:56-58,277`). Ramane doar diferenta stilistica (fara dot) | mica | NO-ACTION pe bug; eventual dot pe mockup (gust, optional) | + +### Litmus design (consens) +``` +DESIGN — voci: Claude-sub Codex Consens +1. Layout 2 linii fezabil/curat? DA N/A Confirmat (single voice) +2. Placuta-primul corect? DA N/A Confirmat +3. Bug 4a cauza reala identificata? DA N/A Confirmat +4. Pill conform mockup? NU N/A Flag (D-2) +5. Stari complete (loading/error/mobil)? partial N/A Gap (D-4 error state) +6. Polish: defect vs gust separat? DA N/A Confirmat (4c stale, 6 real) +``` + +## Faza 3 — Eng (arhitectura, regresie) + +### Arhitectura (grafic dependente) +``` +_acasa.html ─include─ _coada.html ─include─ _submissions.html (LISTA: .lista-trimiteri-slim) + └─ titlu "Trimiterile tale" (h2, L:10) + export CSV ← scoate (PRD) +_preview_import.html (.tabel-trimiteri) ─include─ _preview_rand.html (pill inline-flex) ← bug 4a +_chips_prestatii.html (.chips operatii-mode, L:122) ← chenar gol +_status.html:140 rand plan N/60 in corp ← muta in burger/cont (PRD) + +DATE: r.prez = prezentare_din_payload (payload_view.py:86) → vehicul_nr, cod_rar, + operatie, data_prestatie TOATE prezente. Schimbare = TEMPLATE-ONLY (fara rute). +``` + +### Decizie semantica: marca de timp +`r.updated_at` (L:111) = `format_data_rar` care adauga MEREU `%H:%M:%S` (labels.py:158) → +sursa secundelor zgomotoase. **Auto-decis: foloseste `r.prez.data_prestatie`** (data +prestatiei declarate, deja date-only `2026-06-18`) — semantic e "data" pe care o cere +userul, langa celelalte campuri de prezentare. (Alternativa: helper `format_data_scurta` +%d.%m.%Y daca trebuie pastrat updated_at — respins ca redundant.) + +### Eng consensus table +``` +ENG — voci: Claude-sub Codex Consens +1. Arhitectura sunet (template-only)? DA N/A Confirmat +2. Acoperire teste suficienta? NU (3 rup) N/A Gap mapat (vezi test plan) +3. Riscuri performanta? nule N/A Confirmat (subtractiv) +4. Securitate? N/A N/A Fara suprafata noua +5. Cai de eroare tratate? partial N/A Gap: vehicul_nr=='—' + D-4 +6. Risc deploy gestionabil? DA N/A Confirmat (4 teste de update) +``` + +### Regresie (artefact pe disc) +Test plan scris: `~/.gstack/projects/romfast-rar-autopass/feat-5.18-corpus-knn-test-plan-20260629-071500.md` +- **3 teste se strica HARD**: `test_vin_pe_rand_separat_sub_nr`, `test_rand_slim_vin_operatie_pill`, + `test_submissions_coloane_umane` (toate hard-codeaza VIN-primar / #id-pe-rand). +- **2 la risc**: depind de numele claselor → **pastreaza `slim-vin`/`slim-meta`** (reumple, nu redenumi). +- Invariant cod_rar ("OE-2 vizibil, fara prefix, nemapat") **pastrat** de spec. + +### Registru moduri de esec +| Mod | Trigger | Tratare in plan | Gap? | +|---|---|---|---| +| Placuta lipsa | payload fara `vehicul_nr` → `'—'` | azi mascat de VIN-primar | **GAP — auto-include fallback** (nu randa em-dash singur) | +| cod_rar lipsa | nemapat | guard `!= '—'` → "nemapat" | OK (pastrat) | +| operatie lunga la 390px | denumire lunga | ellipsis + min-width:0 (vezi L2) | OK daca se aplica layout-ul | +| Lista 500 / network drop | HTMX swap esueaza | — | GAP D-4 (defer TODOS) | +| Pill finalizat a11y | text-in-pill | stare prin TEXT + title | OK (invariant respectat) | + +### Retokenizare px (auto-decis: BOUNDED) +Eng: retokenizarea completa px→token e scope creep (`13px→--fs-sm`=13.5px schimba layout, +risc regresie vizuala fara baza AC). **Auto-decis: doar instanta sub-12px** (`eticheta-problema` +10px→`--fs-xs`) — singura cu acoperire AC. (Suprascrie sugestia CEO 0B-bis de auto-aprobare larga.) + +## Decision Audit Trail + +| # | Faza | Decizie | Clasificare | Principiu | Rationament | Respins | +|---|---|---|---|---|---|---| +| 1 | CEO | Rand=2 linii cu placuta+codRAR+op+data+pill | Premisa (user) | — | directiva user la poarta | mutare cod RAR in modal | +| 2 | CEO | Identificator primar=placuta, nu VIN | Mechanical | P1 | operator scaneaza placuta | VIN primar | +| 3 | Eng | "data" = `data_prestatie`, nu `updated_at` | Mechanical | P5 | semantic corect, fara secunde, fara helper nou | slice updated_at | +| 4 | Eng | Pastreaza clase `slim-vin`/`slim-meta` | Mechanical | P3 | minimizeaza churn de teste | redenumire clase | +| 5 | Eng | Fallback `vehicul_nr=='—'` | Mechanical | P1 | evita em-dash singur ca id primar | lasa em-dash | +| 6 | Design | Bug 4a: widen `.col-stare`~140px | Mechanical | P5 | cauza reala (fixed 104px+nowrap) | doar nowrap/min-width | +| 7 | Design | 8→4 coloane preview (densitate) | Mechanical | P1 | match mockup; NU rezolva 4a singur | pastreaza 8 col | +| 8 | Eng | Guard `{% if _extra %}` pe `.chips` | Mechanical | P5 | elimina chenar gol | container mereu | +| 9 | Eng | Retokenizare px BOUNDED (doar 10px) | Taste→auto | P5 | evita shift vizual nebazat AC | retokenizare larga | +| 10 | Design | Filtre 4c: NO-ACTION (raport stale) | Mechanical | P4 | codul deja corect | re-implementare | +| 11 | CEO | Sec.2 titlu + sec.3 plan N/60: scoate | Mechanical | P1 | AC PRD 5.16/5.17 obligatorii | pastreaza | +| 12 | Design | Stare eroare lista (D-4): DEFER TODOS | Mechanical | P3 | pre-existent, in afara cererii | include acum | +| T1 | Design/Eng | eticheta_problema: **PASTREAZA micro-linie doar pe rand de eroare** (user) | Gust→rezolvat | — | normal/finalizat=2 linii strict; eroare=2+motiv (D6 loud-on-exception) | drop complet | +| T2 | Design | **DA — restileaza pill fill+dot ca mockup** (user) | Gust→rezolvat | — | pill permanent isi merita greutatea vizuala | lasa contur gri | +| T3 | trans | **NU aplica diacritice** (user) | Gust→rezolvat | — | non-blocant; ramane divergenta de finisaj acceptata | include/pas separat | + +## PLAN APROBAT (user, 2026-06-29) — implementarea NU se executa in aceasta sesiune + +> Status: **APROBAT ca plan**. User a ales "doar planul, nu implementa inca". Task-urile +> de mai jos sunt gata de executat intr-o sesiune viitoare (sau /ship cand exista cod). + +### Spec final randul de lista (de implementat in `_submissions.html`) +- **L1**: `vehicul_nr` (placuta, primar, `--fs-md`/weight 600, `.slim-vin` reumplut) + **pill** dreapta. +- **L2** (`.slim-meta`): `cod_rar` (sau "nemapat", mono/accent, prima) · `operatie` (ink, ellipsis, + `min-width:0`) · `data_prestatie` (muted). Scoate: VIN primar, `#id_prezentare`, secundele. +- **Pill**: ramane pe FIECARE rand inclusiv Finalizat; restilat fill-tint + dot 7px + text colorat per stare. +- **eticheta_problema**: ramane micro-linie conditionala DOAR pe stari de problema; `10px`→`--fs-xs`. +- **Fallback**: `vehicul_nr == '—'` → nu randa em-dash singur (mesaj fallback). +- Pastreaza numele claselor `slim-vin`/`slim-meta` (reumple, nu redenumi) — minimizeaza churn teste. + +### Implementation Tasks (agregat) +- [ ] **T-1 (INALTA) — `_submissions.html`** — refactor rand 4→2 linii cu placuta+codRAR+operatie+data_prestatie+pill; fallback placuta; pastreaza clase. Update teste: rescrie test_vin_pe_rand_separat_sub_nr, test_rand_slim_vin_operatie_pill, test_submissions_coloane_umane; adauga test 2-linii + test fallback placuta. +- [ ] **T-2 (INALTA) — `base.html` (CSS pill) + `_submissions.html`** — restilare pill slim ca mockup (fill tint + dot + text colorat per `stare_css`); pill ramane pe finalizat. +- [ ] **T-3 (INALTA) — `_preview_import.html` / `base.html:401`** — bug 4a: `.col-stare` width 104px→~140px (+ `overflow:hidden` sau pill wrap). NU atinge nowrap pe col-vehicul (test_web_preview_compact). Reducere 8→4 coloane (densitate) ca task separat. +- [ ] **T-4 (MEDIE) — `_preview_import.html`** — reducere la 4 coloane esentiale (Stare/Vehicul/Operatie/Data + Editeaza); muta KM + mesaj validare in randul de editare/tooltip. +- [ ] **T-5 (MEDIE) — `_coada.html:10-19`** — scoate titlul "Trimiterile tale" (h2); relocare export CSV langa tab-uri / meniu cont (PRD 5.16/US-002). +- [ ] **T-6 (MEDIE) — `_status.html:140`** — scoate randul plan "N/60 luna asta" din corp; pastreaza badge antet + linie burger (PRD 5.17/US-006). Daca >=80% consum, afiseaza doar in starea de avertizare. +- [ ] **T-7 (MEDIE) — `_chips_prestatii.html:122`** — guard `{% if _extra %}` pe containerul `.chips` (operatii-mode), elimina chenarul gol. +- [ ] **T-8 (MICA) — `_submissions.html:133`** — `font-size:10px`→`var(--fs-xs)` (doar instanta sub-12px). +- [ ] **T-9 (MICA) — copy/stil** — "Anuleaza"→"Renunta" (form editare); nume operatie emfatic (bold) in editorul de chips per mockup. +- [ ] **Defer TODOS** — stare eroare HTMX lista (D-4); teste regresie vizuala; dropzone zona-mare (sec.5); retokenizare px completa; diacritice (decis: nu). + +### Verificare la implementare +`python3 -m pytest tests/test_web_submissions.py tests/test_web_submissions_layout.py tests/test_web_responsive.py tests/test_web_preview_compact.py -q` +Test plan complet: `~/.gstack/projects/romfast-rar-autopass/feat-5.18-corpus-knn-test-plan-20260629-071500.md` + +## ADDENDUM 2026-06-29 — bug live mobil Mapari (CORECTIE la sectiunea 8) + +Sectiunea 8 a raportului a marcat **Mapari ca "CONFORME"**, dar nu a testat corect +randarea mobila. User a raportat (cu screenshot, 390px) doua probleme reale, **REZOLVATE**: + +1. **Butoanele Salveaza/Sterge taiate pe mobil.** Cauza: `.tabel-card td button {width:100%}` + (base.html, specificitate 0,1,2) batea `.act {width:44px}` (0,1,0) → cele doua butoane + `.act` deveneau full-width, iar al doilea (Sterge) iesea din card (celula are `nowrap`). + Fix: bloc `@media (max-width:767px)` nou (ultimul in `