`.
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** |