romfast/rar-autopass
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4caf055c53afb825f9c06a09fe0f265c90fef25c
rar-autopass/DESIGN.md
Claude Agent 5a964a1a8d 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>
2026-06-25 20:20:58 +00:00

7.0 KiB
Raw Blame History

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.