From 670019361c68831e1face226692db9347c90ec61 Mon Sep 17 00:00:00 2001 From: Claude Agent Date: Sat, 27 Jun 2026 23:39:54 +0000 Subject: [PATCH] curatare --- docs/design/5.5-uniformizare-ui.md | 277 ----------------------------- 1 file changed, 277 deletions(-) delete mode 100644 docs/design/5.5-uniformizare-ui.md diff --git a/docs/design/5.5-uniformizare-ui.md b/docs/design/5.5-uniformizare-ui.md deleted file mode 100644 index dcaf5d5..0000000 --- a/docs/design/5.5-uniformizare-ui.md +++ /dev/null @@ -1,277 +0,0 @@ -# Design 5.5 — Uniformizare & standardizare UI/UX - -**Stare**: aprobat (decizii utilizator 2026-06-23, vezi §10) -**Context**: dashboard web HTMX (`app/web/templates/`), paleta dark/light deja livrata (5.3), -erori 3-niveluri (5.4). Acest document = sursa de adevar **vizuala** pentru PRD 5.5. Unde PRD-ul -descrie *ce* livram pe stories, aici descriem *cum arata* si *de ce*. - -> Nu reinventam estetica. Paleta, tipografia si tokenii din `base.html` (5.3) raman **NESCHIMBATI -> la octet**. Standardizarea = aducem toate tabelele si paginile la acelasi vocabular de componente -> care exista deja in tabelul Trimiteri (`_submissions.html`), tabelul considerat corect de referinta. - ---- - -## 1. Problema (audit pe codul real) - -Inventar al neuniformitatii curente: - -| Suprafata | Simptom | Referinta corecta | -|-----------|---------|-------------------| -| Tabel **Mapari** (`_mapari.html`) | Labartat: coloana "Punere in coada" injecteaza prin macro `autosend_toggle` 3 randuri de text explicativ pe **fiecare** linie → randuri inalte, butoanele **Salveaza/Sterge** ies din viewport, trebuie scroll orizontal | grila Trimiteri | -| Tabel **Nomenclator** (`_nomenclator.html`) | Functional dar minim; nu imparte exact acelasi aspect/hover/aliniere cu Trimiteri | grila Trimiteri | -| **Acasa** (`_acasa.html`) | Sectiune "Ajutor: Mapari / Coduri RAR" redundanta (wayfinding repetat) | — (se elimina) | -| **Navigare** | Cont, Integrare, Nomenclator stau ca tab-uri amestecate cu lucrul zilnic; logout + link admin sunt agatate ad-hoc in coltul dreapta-sus al dashboard-ului, absente pe alte pagini | meniu de cont dedicat | -| **Panou admin** (`admin.html`) | Conturile in asteptare au doar "Activeaza" per-rand; lipsesc selectie multipla si actiunile blocare/arhivare/stergere. Nota "Cont dev implicit" e jargon intern nederivabil | tabel cu selectie + bara bulk | - -Principiu de standardizare: **un singur tabel, o singura componenta de antet de sectiune, un singur -loc pentru ajutor** (link/disclosure, nu text inline repetat pe randuri). - ---- - -## 2. Design tokens (existenti — se reutilizeaza, nu se modifica) - -Din `base.html` (`:root` dark + `[data-theme="light"]`). Citat aici doar ca referinta; **nicio -valoare noua de culoare**. Orice suprafata noua foloseste `color-mix(... var(--card))` pentru stari -(lectia 5.3: zero literali hardcodati, altfel se sparge light mode). - -``` ---bg --card --ink --muted --line ---ok (verde) --warn (chihlimbar) --err (rosu) --accent (albastru) -``` - -Spacing: cardurile 16-20px padding; celule tabel `8px 10px`; gap-uri 6/8/12/16px (scara existenta). -Radius: 6px controale, 10px carduri, 99px pill-uri. Tipografie: tabel 14px `tabular-nums`, -antet `th` 12px uppercase `--muted`. **Nu introducem fonturi sau marimi noi.** - ---- - -## 3. Componenta canonica: Tabelul standard - -Tabelul Trimiteri defineste contractul. Orice tabel din aplicatie il respecta: - -``` -.tablewrap > table - thead th -> 12px uppercase, color --muted, font-weight 500, white-space nowrap - tbody td -> 14px, padding 8px 10px, border-bottom 1px var(--line), nowrap implicit - stare -> {text uman} (glifa+text, nu doar culoare) - coloana lunga (motiv) -> white-space:normal; max-width:280px (singura exceptie de la nowrap) - empty state -> .empty (centrat, --muted, cu CTA contextual) -``` - -Reguli care fac diferenta vizibila fata de "labartat": -1. **Coloanele de control sunt inguste si nowrap.** Niciun text explicativ in celule. Explicatiile - traiesc o singura data, in antetul cardului (link "Ajutor") sau intr-un `
`. -2. **Actiunile incap fara scroll orizontal.** Coloana "Actiuni" la dreapta, `white-space:nowrap`, - butoane scurte. Pe ecrane inguste scroll-ul ramane IN card (`.tablewrap`), nu in pagina. -3. **Densitate constanta.** Inaltimea randului = o linie de text + padding. Sub-text (ex. "2 blocate", - "acum: COD") merge in `
` sub valoarea principala, nu - pe coloana separata. - -### 3.1 Antet de sectiune standard (cu Ajutor) - -``` -+--------------------------------------------------------------+ -| De rezolvat [ Ajutor ] | <- h2 15px la stanga, link la dreapta -+--------------------------------------------------------------+ -``` - -`Ajutor` = link discret `.cardlink` care comuta un `
`/panou de text (vezi §5). Mutam acolo -toata proza care azi se repeta pe randuri. Un singur loc, citit la nevoie. - ---- - -## 4. Tabelul Mapari — inainte / dupa - -### Inainte (labartat) -Fiecare rand din "De rezolvat" si "Mapari salvate" poarta `autosend_toggle`, care randeaza: -- "La fisierele viitoare cu aceasta operatie:" (12px) -- checkbox + **"Pune automat in coada"** -- "Nebifat = «Tine pentru verificare». Doar pentru aceasta operatie; nimic nu pleaca la RAR..." (11px) - -x N randuri. Coloana e mai lata decat selectul de cod; Salveaza/Sterge sunt impinse afara. - -### Dupa (compact, ca Trimiteri) - -``` -De rezolvat [ Ajutor ] ------------------------------------------------------------------ - OPERATIE SUGESTII COD RAR IN COADA ACTIUNI - RevTehBP A012 (88%) [ A012 v ] (o) Auto [Salveaza] - 2 blocate ( ) Manual ------------------------------------------------------------------ -``` - -- Coloana **IN COADA** = comutator scurt cu doua stari etichetate **Auto** / **Manual** (radio sau - switch), fara nicio propozitie. Tooltip pe control: "Auto = pune automat in coada la fisierele - viitoare cu aceasta operatie; Manual = tine pentru verificare." -- Explicatia completa (de ce exista maparile, ce inseamna Auto vs Manual, ce e blocat) → in panoul - **Ajutor** din antet, scris o singura data. -- **Invariant backend pastrat**: controlul emite tot `name="auto_send" value="true"` cu semantica de - prezenta (bifat→true, absent→false), exact ca azi. Zero atingere backend (lectia 5.3/3.6: - reskin la nivel de macro, parserele `/mapari` si `/_import/.../mapare-operatie` raman valide). -- "Mapari salvate" si "Formate de coloane" → aceeasi grila; sub-textul ("acum: COD — nume", - "N coloane", maparea coloana→camp) ramane `muted` 12px sub valoare, nu pe coloane separate verbose. - -Macro-ul `autosend_toggle` se rescrie compact (acelasi `name`/`form`/`checked`), deci se schimba -intr-un singur loc si se propaga si in fluxul de import (mapcoloane) unde e refolosit. - ---- - -## 5. Panoul Ajutor (mapari) - -Un `
` nativ in antetul cardului "De rezolvat" (sau link care expandeaza acelasi `
`), -inchis implicit, fara JS: - -``` -Ajutor (v) - Maparile leaga o operatie din softul tau (cod intern ROAAUTO) de un cod RAR oficial. - - Operatii necunoscute raman blocate in needs_mapping si NU pleaca la RAR pana le mapezi. - - Sugestiile (%) vin din potrivire fuzzy pe denumire — verifica-le inainte sa salvezi. - - In coada: Auto = la urmatoarele fisiere cu aceasta operatie, randurile intra automat in coada. - Manual = raman pentru verificare; nimic nu pleaca la RAR pana confirmi tu. - - La schimbarea unui cod, submission-urile blocate pe acea operatie se re-rezolva automat. -``` - -Avantaj: text scris o data, accesibil, fara cost de inaltime pe fiecare rand. `
` = -accesibil din tastatura nativ, fara dependente. - ---- - -## 6. Navigare: meniu hamburger (decizie: dropdown ancorat dreapta-sus) - -### 6.1 Header - -``` -[Gateway RAR AUTOPASS] [test] [☀] v1.0 [☰] - | - +------------------+ - | Cont | - | Integrare | - | Nomenclator | - | Panou admin | <- doar admin - |------------------| - | Iesi din cont | <- form POST /logout - +------------------+ -``` - -- Iconita `☰` (`min 36x36`, `aria-label="Meniu cont"`, `aria-expanded`, `aria-controls`) langa toggle-ul - de tema. Dropdown ancorat sub iconita, aliniat la dreapta. **Fara overlay** pe pagina. -- Inchidere: click in afara, `Esc`, sau selectarea unui element. Focus trap minimal: `Esc` readuce - focusul pe `☰`. Navigare cu sageti optionala (consistent cu pattern-ul tab existent), dar `Tab` - natural e suficient. -- Continut **dependent de autentificare** (vezi §6.3). - -### 6.2 Tab-bar dupa mutare (decizie: doar Acasa · Mapari) - -``` -[ Acasa ] [ Mapari ] -``` - -Cont, Integrare, Nomenclator parasesc tab-bar-ul → meniul `☰`. Raman doar cele doua suprafete de -**lucru zilnic**. Badge-urile de contoare (Mapari) raman pe tab. Deep-link `?tab=` si rutele -`/_fragments/{cont,integrare,nomenclator}` raman valide (accesate acum din meniu, nu din tab-bar) — -deci zero rute moarte, doar punctul de intrare se muta. - -### 6.3 Stare de autentificare in header - -`base.html` e partajat de `login.html`, `signup.html`, `dashboard.html`, `admin.html`. Meniul trebuie -sa stie daca esti logat: - -- **Autentificat**: arata Cont, Integrare, Nomenclator, (Panou admin daca `is_admin`), separator, - "Iesi din cont" (form `POST /logout` cu `csrf_token`). -- **Neautentificat** (login/signup): meniul arata doar "Autentificare" / "Inregistrare" (sau iconita - `☰` ascunsa pe aceste pagini — vezi PRD US). Niciun link de cont, niciun logout. - -Necesita ca `base.html` sa primeasca `is_authenticated`, `is_admin`, `csrf_token` in context. Se -adauga ca un helper de context partajat (un singur loc), nu duplicat in fiecare render. Acesta e -singurul "backend touch" din zona de navigare si trebuie sa fie aditiv si defensiv (lipsa cheilor → -meniu in stare neautentificata, nu eroare). - ---- - -## 7. Panou admin: selectie + actiuni bulk - -### 7.1 Tabel conturi in asteptare (si analog conturi active) - -``` -[v] Selecteaza tot 2 selectate: - [Activeaza] [Blocheaza] [Arhiveaza] [Sterge] <- bara bulk, apare la selectie ------------------------------------------------------------------------ -[v] ID COMPANIE CUI EMAIL INREGISTRAT ACTIUNI -[v] 7 Auto SRL RO123 a@b.ro 12.06.2026 [ ... ] -[ ] 8 Moto SA RO456 c@d.ro 13.06.2026 [ ... ] ------------------------------------------------------------------------ -``` - -- Coloana de **checkbox** la stanga + un master "selecteaza tot" in antet. -- **Bara de actiuni bulk** ascunsa pana exista o selectie; afiseaza numarul selectat si butoanele - contextuale. Actioneaza pe toate randurile bifate (POST cu lista de `account_id`). -- **Actiuni per-rand** in meniul `[ ... ]` (kebab): aceleasi verbe, pentru o singura tinta. -- Verbele, ca stari de cont distincte (vezi §7.2): **Activeaza, Blocheaza, Arhiveaza, Sterge**. - - `Sterge` = actiune distructiva → `hx-confirm` / dialog de confirmare obligatoriu. - - `Blocheaza`/`Arhiveaza` reversibile → confirmare doar pe bulk (cantitate). -- Stari vizuale ale verbelor: distructiv (`Sterge`) cu `color:var(--err)`; restul neutre `.cardlink`. - -### 7.2 Model de stare cont (impact backend — vezi PRD riscuri) - -Azi: `accounts.active` (0/1); "pending" = inregistrat dar `active=0`. Cele 4 verbe cer stari -distincte care nu incap intr-un bool. Propunere (PRD o ratifica): coloana `accounts.status` -TEXT, migrare defensiva, derivata din `active` la prima rulare: - -``` -pending -> inregistrat, neactivat inca (active=0, status nesetat istoric) -active -> operational (active=1) -blocked -> suspendat reversibil (nu logheaza, worker nu trimite) -archived -> ascuns din liste, date pastrate (read-only) -deleted -> stergere (GDPR/L.142) (hard delete SAU soft cu purge) -``` - -- Worker `claim_one` gate-uieste pe **status='active'** (azi pe `COALESCE(active,1)=1`) — schimbare - semantica de pastrat compatibila: `active=1 ⇔ status='active'`. -- **Contul dev id=1 e protejat** de Blocheaza/Arhiveaza/Sterge (cont de sistem), exact ca azi la - activate/deactivate. Daca e selectat in bulk, e sarit, nu eroare. -- Nota "Cont dev implicit (id=1)" din pagina **se elimina** (jargon intern, nederivabil de operator). - Protectia ramane in cod, nu o explicam in UI. - -> Aceasta e singura zona cu schema/backend real. Restul livrabilei e UI pur (reskin + reasezare). - ---- - -## 8. Accesibilitate & paritate tema - -- **AA pe light+dark** pentru orice text nou (lectia 5.3: verzi/rosii hardcodate cad sub AA). Stari - doar prin `color-mix(... var(--card))`, niciun literal. -- Stare = **glifa + text**, nu doar culoare (pill-urile existente respecta deja). -- Meniul `☰`: `aria-expanded`, `aria-controls`, inchidere pe `Esc`, focus readus pe trigger. -- `
` Ajutor: accesibil nativ din tastatura. -- Checkbox-uri admin: `aria-label` per rand ("Selecteaza contul {companie}"); master = "Selecteaza tot". -- Toate controalele >=36px zona de atins (consistent cu toggle tema / `.cardlink`). - -## 9. Motiune - -Minima, consistenta cu existentul: dropdown `☰` fade/translate scurt (~120ms, ca `.tab-link` -transition). `
` = comportament nativ. Fara animatii noi de amploare. Respecta -`prefers-reduced-motion` daca adaugam tranzitii (omitere la cerere). - -## 10. Decizii utilizator (2026-06-23) - -1. Meniu hamburger = **dropdown ancorat dreapta-sus** (nu drawer). -2. Tab-bar = **Acasa · Mapari**; Nomenclator + Cont + Integrare + Panou admin → meniul `☰`. -3. Mapari = **grila compacta ca Trimiteri**, toggle scurt **Auto/Manual**, link **Ajutor** in antet; - textul repetat de pe randuri se elimina. -4. Admin = **selectie cu bife + bara de actiuni bulk** (Activeaza/Blocheaza/Arhiveaza/Sterge) + - actiuni per-rand; nota "cont dev implicit" **eliminata**. -5. Sectiunea "Ajutor" de pe Acasa se **elimina**. -6. Nomenclator capata exact aspectul tabelului Trimiteri. - -## 11. Componente atinse (harta pentru PRD) - -| Componenta | Fisier | Tip schimbare | -|------------|--------|---------------| -| Header + meniu `☰` + context auth | `base.html` (+ context render rute) | reasezare + mic backend context | -| Tab-bar redus | `dashboard.html` | reasezare | -| Acasa fara Ajutor | `_acasa.html` | stergere | -| Mapari standard + toggle compact + Ajutor | `_mapari.html`, `_macros.html` | reskin UI (zero backend) | -| Nomenclator ca Trimiteri | `_nomenclator.html` | reskin UI | -| Admin selectie + bulk + verbe noi | `admin.html` + rute `/admin/*` | UI + **backend (status)** | -| Model stare cont | `schema.sql`, `users.py`, worker gate | **backend + migrare** |