feat(5.10): UX trimiteri (pill filtre, paginare, editare) + Mapari in meniu + branding ROMFAST
14 stories TDD prin echipa de workeri (lead orchestreaza, 3 teammates pe valuri cu fisiere disjuncte; routes.py + base.html serializate ca fisiere fierbinti). - US-001 fix filtrare data (_iso_date_prefix pe garda+comparatie, prinde timestamp cu ora) - US-002/007 operatie service distincta in payload_view + afisare in detaliu - US-003 pill-uri categorii (button/aria-pressed; needs_mapping --warn, needs_data/error --err); fara lista ID-uri/dropdown - US-004 paginare numerotata 25/pag (total ramificat SQL-COUNT vs fetch-all+slice, clamp page, poll pastreaza pagina) - US-005 VIN block-level sub nr - US-006/006b editare cod RAR + validare nomenclator + recalcul idempotency (needs_data/needs_mapping via /corecteaza, error via /repune) - US-008 card eroare 3-niveluri doar pe read-only + rezumat top-of-form - US-009 Mapari in meniu hamburger; scoatere tab-bar + role=tablist orfan - US-010/011 pagina Mapari consolidata + butoane icon SVG + dirty-state (fara kebab/emoji) - US-012/012b header centrat + logo ROMFAST (/static/romfast_logo.png) in header - US-013 paleta azur ROMFAST (#2E74D6/#1F66C9) + IBM Plex Sans/Mono self-host (woff2 reale) - US-014 selector tema ciclic Light/Dark/Petrol/Auto + anti-FOUC pe 4 stari Backend trimitere (worker/masina stari/idempotenta/mapping) + schema NEATINSE (UI/UX pur + 1 fix de filtrare). VERIFY context curat PASS; /code-review high: 1 finding material reparat (US-006b). Regresie 896 passed, 1 skipped, 0 failed. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Agent
150
DESIGN.md
Normal file
150
DESIGN.md
Normal file
@@ -0,0 +1,150 @@
|
||||
# DESIGN.md — Sistem de design AutoPass (by ROMFAST)
|
||||
|
||||
> Sursa de adevar pentru identitatea vizuala a dashboard-ului. Implementarea concreta sta in
|
||||
> `app/web/templates/base.html` (variabile CSS `:root` + `[data-theme="light"]`). Acest fisier
|
||||
> spune *ce* si *de ce*; base.html spune *cum*.
|
||||
|
||||
## Lucrul de retinut
|
||||
|
||||
> „Software serios pentru o obligatie legala serioasa — dar parte din familia ROMFAST/ROA, nu un
|
||||
> tool anonim." Operatorul de service trebuie sa simta ca declara la stat printr-un instrument de
|
||||
> incredere, cu identitatea producatorului (ROMFAST) prezenta discret, nu griul generic de azi.
|
||||
|
||||
## Context produs
|
||||
|
||||
Gateway web care declara prezentari de service-auto la RAR AUTOPASS (L.142/2023). Utilizatori:
|
||||
operatori de service-auto si integratori ROAAUTO. Face parte din familia **ROA — Romfast
|
||||
Applications** (ERP romanesc, modul Service Auto). Referinta de brand: **romfast.ro** — alb curat,
|
||||
accent albastru azur, pill-uri rotunjite, comutator de tema, logo rosu+albastru.
|
||||
|
||||
## Decizie cromatica
|
||||
|
||||
Accentul functional = **albastrul ROMFAST** (acelasi cu „FAST" din logo si cu accentul de pe
|
||||
romfast.ro), nu albastrul generic SaaS de pana acum. Rosul apare DOAR in wordmark-ul „ROM" — nu ca
|
||||
accent de UI, fiindca rosul e rezervat starilor de eroare. Un singur accent, restul neutre, ca
|
||||
sistemul sa ramana discret.
|
||||
|
||||
### Paleta — Dark (default)
|
||||
|
||||
```
|
||||
--bg: #0f1218 fundal aplicatie
|
||||
--card: #181c24 suprafete (carduri, modal, inputuri pe fundal)
|
||||
--ink: #e6e9ef text principal
|
||||
--muted: #8b93a7 text secundar (label-uri, coduri, „by")
|
||||
--line: #262b36 borduri, separatoare
|
||||
--accent:#2E74D6 azur ROMFAST — butoane primare, pill activ, linkuri, focus
|
||||
--ok: #2FBF8F sent / succes
|
||||
--warn: #E0A93B sending / atentie / Lipsa cod
|
||||
--err: #E05D5D error / needs_data / Date incomplete
|
||||
```
|
||||
|
||||
### Paleta — Light (`[data-theme="light"]`)
|
||||
|
||||
```
|
||||
--bg: #f5f7fa fundal (alb-rece ca romfast.ro)
|
||||
--card: #ffffff suprafete
|
||||
--ink: #1a1d24 text principal
|
||||
--muted: #5c6473 text secundar
|
||||
--line: #e2e5ea borduri
|
||||
--accent:#1F66C9 azur, variantă mai inchisa pentru contrast AA pe alb
|
||||
--ok: #15803d verde AA pe alb
|
||||
--warn: #b45309 chihlimbar AA pe alb
|
||||
--err: #dc2626 rosu AA pe alb
|
||||
```
|
||||
|
||||
### Paleta — Petrol (`[data-theme="petrol"]`, tema selectabila)
|
||||
|
||||
Tema intunecata alternativa, cu accent petrol-teal (directia initiala aleasa, pastrata ca optiune).
|
||||
Aceleasi neutre-calde inchise; doar accentul difera de azur.
|
||||
|
||||
```
|
||||
--bg: #0e1416 fundal petrol-inchis
|
||||
--card: #161e20 suprafete
|
||||
--ink: #e6e9ef text principal
|
||||
--muted: #8b93a7 text secundar
|
||||
--line: #232c2e borduri
|
||||
--accent:#0E7C7B teal petrol — butoane, pill activ, linkuri, focus
|
||||
--ok: #2FBF8F sent
|
||||
--warn: #E0A93B atentie
|
||||
--err: #E05D5D eroare
|
||||
```
|
||||
|
||||
### Culori de brand (doar wordmark, NU variabile de UI)
|
||||
|
||||
```
|
||||
ROM: #D1342F rosu logo
|
||||
FAST: #2E74D6 albastru logo (= accentul de UI in dark)
|
||||
```
|
||||
|
||||
Contrast: textul principal pe fundal ramane AA in ambele teme; accentul pe alb foloseste varianta
|
||||
mai inchisa (`#1F66C9`) ca text/linkul sa treaca AA.
|
||||
|
||||
## Tipografie
|
||||
|
||||
- **UI / titluri**: **IBM Plex Sans** — sans-serif cu caracter ingineresc, open-source, potrivit
|
||||
pentru „software serios", parte din limbajul vizual tehnic. Fallback: `system-ui, sans-serif`.
|
||||
- **Coduri / monospace**: **IBM Plex Mono** — pentru coduri RAR (REV2), VIN, numar inmatriculare,
|
||||
detalii tehnice. Inlocuieste `ui-monospace/Menlo` actual cu o familie coerenta cu UI-ul.
|
||||
- **Incarcare**: self-host `woff2` (subset latin + latin-ext pentru diacritice romanesti) in
|
||||
`app/web/static/fonts/`, `font-display: swap`. Fara CDN extern (gateway intern, fara dependente
|
||||
de retea la runtime). Pana la self-host, fallback la stiva de sistem nu strica layout-ul.
|
||||
|
||||
## Header & branding
|
||||
|
||||
- Titlul „Gateway RAR AUTOPASS" **centrat** pe header.
|
||||
- Sub titlu, mic: **logo-ul ROMFAST** (`/static/romfast_logo.png`, ~28px inaltime). Decizie user
|
||||
(2026-06-25, US-012b): se foloseste PNG-ul real al logo-ului (ROM rosu + FAST albastru, fundal
|
||||
transparent — lizibil pe light/dark/petrol), NU wordmark-ul text. Wordmark-ul text (`by ROM FAST`
|
||||
cu `ROM #D1342F` / `FAST #2E74D6`) ramane documentat ca alternativa, dar livrabila finala
|
||||
foloseste imaginea.
|
||||
- Controalele (comutator tema, versiune, hamburger ☰) raman la **dreapta**, fara a strica
|
||||
centrarea optica a titlului (ex. grila 3 coloane: stanga goala/echilibru, centru titlu, dreapta
|
||||
controale).
|
||||
- Responsiv: pe mobil, wordmark-ul ramane sub titlu; controalele nu se suprapun (degrada elegant,
|
||||
eventual titlu mai mic).
|
||||
|
||||
## Selector de tema
|
||||
|
||||
Inlocuieste comutatorul binar soare/luna cu un **buton ciclic** (pattern ca demoanaf.ro): un
|
||||
singur buton care roteste la fiecare click prin setul de teme, cu iconita + tooltip/`aria-label`
|
||||
care arata tema curenta („Tema: Light" etc.).
|
||||
|
||||
Ordinea ciclului: **Light → Dark → Petrol → Auto → (inapoi la Light)**.
|
||||
|
||||
- `Light` → `data-theme="light"` (azur pe alb)
|
||||
- `Dark` → `data-theme="dark"` (azur pe inchis, comportamentul implicit actual)
|
||||
- `Petrol` → `data-theme="petrol"` (teal pe petrol-inchis)
|
||||
- `Auto` → urmeaza `prefers-color-scheme`; rezolva la Light azur sau Dark azur in functie de OS
|
||||
(nu seteaza `data-theme` fix, ci il deriva la paint).
|
||||
|
||||
Persistenta: preferinta explicita (inclusiv „Auto") in `localStorage`, doar la click. Scriptul
|
||||
anti-FOUC din `<head>` trebuie sa rezolve „Auto"→light/dark inainte de primul paint (fara blink).
|
||||
Iconite: ☀ Light, ☾ Dark, ◐ Petrol, ◉ Auto. Default la prima vizita = Auto (OS-aware), ca azi.
|
||||
|
||||
## Componente — note de aplicare
|
||||
|
||||
- **Pill-uri de stare/filtru**: rotunjite (`border-radius:99px`), ca badge-ul „ROA" de pe
|
||||
romfast.ro. Pill activ = fundal accent discret (`color-mix(in srgb, var(--accent) ...)`), text
|
||||
pe accent. Categoriile de problema isi pastreaza registrul: Date incomplete/Eroare = `--err`,
|
||||
Lipsa cod = `--warn`.
|
||||
- **Butoane primare**: fundal `--accent`, text alb (neschimbat ca structura, doar culoarea noua).
|
||||
- **Linkuri / sugestii**: `--accent`.
|
||||
- **Focus**: `outline:2px solid var(--accent)` (deja folosit pe randuri).
|
||||
- **Suprafete de stare** (banner, flash, eroare-3n): raman pe `color-mix` peste `--err/--warn/--ok`,
|
||||
deci se adapteaza automat la noua paleta si la light/dark.
|
||||
|
||||
## Ce NU schimbam
|
||||
|
||||
- Mecanismul light/dark existent (anti-FOUC, persistenta `localStorage`, comutator) — il pastram,
|
||||
doar reimprospatam variabilele.
|
||||
- Nu introducem rosu ca accent de UI (conflict cu eroare).
|
||||
- ~~Nu folosim PNG-ul logo cu efect 3D in interfata (wordmark redat ca text).~~ REVIZUIT
|
||||
(decizie user 2026-06-25): logo-ul PNG real e folosit in header (US-012b). Fundal transparent +
|
||||
culori proprii il fac lizibil pe toate temele; nu aplicam filtre.
|
||||
- Nu adaugam un al doilea accent — sistemul ramane monocrom-accent + neutre.
|
||||
|
||||
## Legatura cu implementarea (PRD 5.10)
|
||||
|
||||
US-012 (header „by ROMFAST" + titlu centrat) si US-013 (paleta) din
|
||||
`docs/prd/prd-5.10-ux-filtre-pill-paginare-mapari-meniu.md` implementeaza acest sistem. Valorile de
|
||||
mai sus sunt sursa pentru variabilele din `base.html`.
|
||||
Reference in New Issue
Block a user