LaFix v5 · Style Guide

01 · Brand

Cronometrul și bifa portocalie.

Marca LaFix unește două idei: timpul controlat (cronometrul albastru) și treaba rezolvată (bifa portocalie). Wordmark-ul scoate „Fix" în portocaliu — promisiunea că se rezolvă, la fix. De la v5, același „Fix" portocaliu e și numele asistentului: scânteia din logo a devenit inteligența din aplicație.

Pe închis

Pe deschis

LaFix

Voce de brand

Hotărât — vorbim scurt, ca un meseriaș sigur pe el. „Se rezolvă."

Cald — omenește, fără corporatism. „Zi bună la treabă, șefu'."

De încredere — spunem pe ce ne bazăm. Fix arată mereu certitudinea.

Principii de design

Performant

Răspuns instant, zero scroll orizontal, dens cât trebuie pe tabletă.

Transparent

Nicio cifră magică: fiecare valoare calculată/Fix vine cu „de ce?".

Se învață

Estimările se rafinează din dovezi — prior, dovezi, rezultat.

Pe rol & fază

Fiecare vede doar ce-l privește; ecranul se mulează pe faza curentă.

02 · Arhitectură de brand

Un brand-mamă. Multe domenii.

„LaFix" e brandul-umbrelă. Fiecare verticală e o aplicație din aceeași familie, numită după tipar fix: LaFix · [Domeniu]. Logo-ul, culorile, tipografia, Fix și vocea rămân identice — se schimbă doar terminologia și iconurile specifice domeniului.

LaFix · Service AutoLive

Sistemul de operare pentru service-uri auto: recepție, constatare, ofertă, piese, atelier, livrare.

LaFix · LogisticăPlan

Gestiune depozit & curse: recepție marfă, stoc, picking, expediere — aceeași logică, alt vocabular.

LaFix · HoReCaPlan

Gestiune hotel / pensiune: rezervări, camere, check-in/out, consumuri, raportare.

Rămâne constant (ADN de brand)

Logo & cronometru · paleta albastru/portocaliu · Newsreader + Inter · setul de iconuri · Fix (asistentul) · vocea hotărât/cald/de încredere · sidebar off-black · butonul FAB · regulile de interacțiune.

Se adaptează per domeniu

Terminologia (mașină → colet → cameră) · iconurile de domeniu · fluxurile & etapele · rolurile din echipă · denumirea modulelor · exemplele din microcopy.

Un client care a folosit LaFix · Service Auto trebuie să se simtă acasă în LaFix · Logistică din prima secundă.

05 · Capitalizare

Title Case pentru controale. ALL CAPS doar pentru divizoare.

Capitalizarea e parte din voce. O folosim consecvent, ca interfața să se „citească" fără efort. Regula de bază: Title Case pe orice element pe care dai click sau care etichetează o zonă; propoziție normală pentru fraze; ALL CAPS numai pe divizoarele scurte de secțiune.

Element

Regulă

Exemplu

Buton

Title Case. Verb + obiect, scurt. Maxim 3 cuvinte.

Trimite Oferta · Confirmă & Anunță Trimite oferta acum!

Etichetă (label)

Title Case. Substantiv clar, fără două puncte decorative.

Număr Înmatriculare · Total Deviz

Titlu ecran / card

Title Case. Numele modulului sau al entității.

Flux Piese · Fișă de Service · Atelier

Tab / filă

Title Case. Un singur cuvânt când se poate. Numele fazei, exact.

Constatare · Ofertare · Aprovizionare · Execuție

Divizor secțiune

ALL CAPS + letter-spacing .12–.16em. Doar etichete scurte care împart o listă/coloană.

OPERATIV ÎN AȘTEPTARE

Chip de status

Title Case. Stare scurtă, citibilă dintr-o privire.

În Așteptare Predată

Corp / microcopy

Propoziție normală. Doar prima literă mare; punct la final de frază.

Mașina e gata. Clientul a primit mesaj pe WhatsApp.

Helper / hint

Propoziție normală, ton blând. Fără punct dacă e un singur fragment.

Scanează VIN-ul sau scrie manual

Cod / plăcuță

Exact cum e în realitate, monospace. Nu schimbăm capitalizarea datelor.

B-127-LFX · VIN · OEM

Așa da

„Aprobă Devizul" pe buton — Title Case, verb clar.

FLUX OPERATIV ca divizor de coloană — scurt, ALL CAPS.

Acronimele rămân majuscule oriunde: VIN, ITP, SPV, OEM, GDPR.

Așa nu

Fără ALL CAPS pe butoane sau label-uri lungi — devin țipătoare.

Fără lowercase la titluri („flux piese") — pierd autoritatea.

Fără „!!!" sau Title Case în propoziții întregi de corp.

07 · Spațiere & grilă

Ritm de 4px, calibrat pe 2 coloane de carduri.

Toate marginile, paddingurile și gap-urile sunt multipli de 4. Layout-ul implicit de conținut e o grilă de 2 coloane de carduri — densitatea potrivită pentru tabletă în peisaj și laptop. Pe ecrane mici cade pe 1 coloană; pe ecrane mari urcă la 3, dar cardul rămâne aceeași unitate.

Grila de carduri — 2 coloane implicit

B-127-LFXÎn Lucru

Golf 7 · Distribuție

CJ-33-CXDPredată

Octavia · Revizie

AB-23-FZYAșteaptă Piese

Passat · Frâne

TM-08-LFXPreluată

Sportage · Constatare

grid-template-columns: 1fr 1fr · gap: 12–13px — gutterul dintre carduri = padding-ul de panou, ca să respire egal pe orizontală și verticală.

Pragurile coloanelor

1 col <640px · 2 col 640–1200px (implicit) · 3 col >1200px. Card min 216–244px.

Densitate

Padding card mare 24 · card-listă 12–14 · gap grilă 12–16.

Ținte tactile

Minim 44×44px pe tabletă. Butoane înălțime 36–48.

09 · Elevație & containere

Patru niveluri de adâncime. Containere clare.

Umbra spune cât de „sus" e un element. Folosim rar nivelurile înalte — doar pentru lucruri care plutesc peste conținut (slide-over, modal, FAB, meniuri).

0 · Flush

fundal app, separatoare

1 · Card

carduri, rânduri

2 · Float

dropdown, popover, FAB

3 · Overlay

modal, slide-over

Containere de layout

Sidebar — urmează tema (crem deschis pe light, off-black pe dark). 60px restrâns / 240px extins.

Toolbar — 56px, titlu + căutare Fix + acțiuni de context. Lipit sus.

Conținut — fundal app, grilă de 2 coloane de carduri, padding 16–20.

Slide-over / Modal — plutesc la nivel 3 peste un scrim, pentru detaliu & decizie.

10 · Butoane & controale

Variante puține, stări clare.

Un singur buton principal albastru per ecran. Restul sunt secundare sau terțiare. Portocaliul-gradient e rezervat lui Fix. Fiecare buton are patru stări vizibile: normal, hover, focus, dezactivat.

Variante

Acțiune Principală Accent Întreabă Fix Confirmă Șterge Secundar Terțiar

brand acțiunea principală · ok confirmare pozitivă · danger distructiv · outline secundar · ghost terțiar · fix doar pentru asistent.

Stările fiecărei variante

Normal

Hover

Focus

Dezactivat

Principal

Salvează

Secundar

Anulează

Fix

Întreabă Fix

Hover: ușor mai închis/luminos (nu sare în sus). Focus: inel de 3px în culoarea brandului, vizibil la tastatură. Dezactivat: opacitate .42, cursor blocat, fără hover.

Dimensiuni

Small · 28px Medium · 36px Large · 44px

Small în toolbar & carduri, Medium standard, Large pentru acțiuni primare în slide-over și fluxuri pe tabletă.

Comutatoare & switch

Notificări WhatsApp · pornit

Aprobare automată sub 100 € · oprit

Fix pre-completează recepția · pornit

Sincronizare ANAF · blocat (fără rol)

Segmented control

Câmpuri de formular

Număr Înmatriculare

Scanează VIN-ul sau scrie manual

Email Client

Focus · inel albastru de 3px

Telefon

Număr incomplet — verifică cifrele.

Chips & status

Predată În Așteptare Eroare SPV În Lucru Sugestie Fix

Total Deviz (tag)

Total Deviz 380–520 € (estimat) Total Deviz 412 € (contractat)

11 · Carduri

Cardul e unitatea care se repetă peste tot.

Mașini într-o sub-fază, piese pe flux, clienți, programări — aproape orice entitate apare ca un card. De aceea anatomia lui e fixă: aceeași ordine de informație, aceeași poziție pentru status, aceleași butoane în josul cardului. Cardul intră în grila de 2 coloane și e mereu clicabil (deschide slide-over-ul de detaliu).

B-127-LFX În Lucru

VW Golf 7 · 1.6 TDI

Claudiu P. · Distribuție

Total Deviz 412 €

Menu 2h 14m

Deschide Fișa

Bordură-prioritate Status chip Buton principal + Fix

Anatomia cardului (sus → jos)

Bordură-stânga 3px — prioritate/lane (roșu = urgent, galben = mediu, gri = normal).
Identificator + status — plăcuța monospace stânga, chip de status împins la dreapta.
Primar & secundar — mașina/entitatea, apoi clientul & tipul, trunchiate la o linie.
Total Deviz — tag cost (estimat sau contractat), când există.
Meta — mecanic alocat, platformă, timp scurs (mono, dreapta).
Acțiuni — un buton principal pe lățime + pictograme secundare, separate de o linie.

Tot cardul e clicabil → slide-over. Butoanele din josul cardului opresc propagarea (stopPropagation) ca să nu deschidă și sliderul.

Card-listă

Rând orizontal: badge/icon · primar+secundar · meta · chip · valoare · săgeată. Pentru liste plate (clienți, facturi).

Card-lane (compact)

Versiunea îngustă din swim-lane: plăcuță, status mic, o linie de meta, 1 buton + 1–2 iconuri.

Card Fix

Fundal portocaliu-tint, bordură portocalie, marca Fix sus-stânga, eticheta „Fix" sus-dreapta.

12 · Swim-lane-uri

Coloane pe etape. Fără scroll orizontal în lane.

Fluxurile cu etape — pipeline-ul de service (Recepție → Constatare → Ofertare → Aprovizionare → Execuție → Finalizare → Predată) și Flux Piese — se citesc ca swim-lane-uri. Fiecare lane are un punct colorat, un titlu și un contor. Pe ecran lat, lane-urile stau una lângă alta (orizontal); pe tabletă în portret devin benzi verticale pliabile în care cardurile se rearanjează pe rânduri (wrap) — niciodată un scroll orizontal în interiorul unui lane. Aprovizionare e faza în sine (piese de comandat / comandate / recepționate); Negociere nu e fază — e o sub-stare a Ofertării (renegociere). Fiecare fază are o poartă cu cerințe configurabile în Flux Operativ (vezi §21 · GateBlockers).

Ecran lat — lane-uri orizontale

Constatare2

B-127-LFX

Golf 7 · zgomot față

TM-08-LFX

Sportage · revizie

Ofertare1

CJ-33-CXD

Octavia · deviz trimis

Aprovizionare1

DJ-77-PLM

Corsa · piese comandate

Execuție3

AB-23-FZY

Passat · frâne

IS-90-RTX

Logan · ambreiaj

Finalizare1

BV-11-AAA

Clio · gata predare

Tabletă portret — bandă verticală, carduri pe rânduri

Execuție Service3

AB-23-FZY

Passat · frâne · Menu

IS-90-RTX

Logan · ambreiaj

B-127-LFX

Golf 7 · distribuție

CT-44-GHI

Insignia · ulei

Reguli de lane

→ Punct + titlu Title Case + contor, mereu în capul lane-ului.
→ Lățime lane ~266px orizontal; vertical = bandă pe toată lățimea.
→ Cardurile se mută între lane-uri prin drag sau prin butonul principal al cardului (avans fază).
→ Lane gol arată „Gol", nu dispare.

Culorile fazelor

Recepție Constatare Ofertare Aprovizionare Execuție Service Finalizare Predată

13 · Calendare

Zi, Săptămână, Lună — și sloturile pe care le propune Fix.

Calendarul de programări are trei vederi, comutate cu un segmented control: Zi (agenda detaliată), Săptămână (grilă oră × zi, implicit), Lună (densitate, puncte pe zile). Programările confirmate sunt blocuri pline albastre. Fix desenează sloturile propuse cu contur punctat portocaliu și un motiv. Intervalele blocate (mentenanță, pauză) apar hașurate roșu.

Revizie · Golf

Fix propune

Mentenanță box

Frâne · Passat

ITP · Logan

Fix propune

Programare confirmată

Bloc plin albastru, ora & titlul scurt.

Slot propus de Fix

Contur punctat portocaliu + „de ce".

Interval blocat

Hașură roșie, fără programări.

Regula de aur: orice slot punctat are un motiv vizibil la atingere („Stația de vopsitorie e liberă și Menu e disponibil"). Fix propune; omul confirmă cu un tap. Navigarea între Zi / Săptămână / Lună e cu segmented control, niciodată cu scroll orizontal forțat.

14 · Slidere cu file

Mai mult conținut, fără scroll orizontal: file în slide-over.

Când un slide-over (de ex. Fișa de Service deschisă din Atelier) conține mai multe etape sau secțiuni, nu folosim scroll orizontal. Folosim file (taburi) navigate cu puncte numerotate sau săgeți. Fila curentă e evidențiată; cele parcurse sunt pline (albastru), cele viitoare sunt goale. Conținutul fazelor trecute e read-only; butoanele de acțiune apar doar pe fila fazei curente. Panoul de detaliu se poate afișa Suprapus (peste listă) sau Alăturat (coloană lângă listă) — aceeași preferință globală și aceeași lățime redimensionabilă, persistente, pe toate paginile.

Fișă de Service

B-127-LFX · Golf 7

1 2 3 4 faza 3/4

Execuție · În Lucru

Distribuție + pompă apă. Menu lucrează de 2h 14m. Piese OEM recepționate.

Avansează la Finalizare Pune pe Pauză

De ce file, nu scroll

Pe tabletă cu mănuși sau cu degetul, scroll-ul orizontal e imprecis și ascunde conținut. Filele dau o hartă clară: vezi câte etape sunt, unde ești și unde poți sări. Un tap = o filă.

Reguli de file

→ Punct numerotat per filă; plin = parcurs, inel = curent, gol = viitor.
→ Săgeți ‹ › pentru filă-cu-filă; punctele pentru salt direct.
→ Fazele trecute = read-only; acțiunile doar pe faza curentă.
→ Indicator „faza X/Y" mereu vizibil.

15 · Dialoguri

Un sistem de dialoguri cu chip de brand.

Deciziile importante trec printr-un dialog centrat peste un scrim (nivel 3). Trei tonuri, aceeași anatomie: pictogramă cu cerc colorat, titlu scurt (Title Case), corp în propoziție normală, butoane în dreapta — acțiunea principală ultima. Tonul dă culoarea iconului și a butonului principal.

Confirmare

Confirmi Livrarea?

Mașina B-127-LFX e gata. Factura iese fix cât devizul: 412 €. Trimitem clientul mesaj pe WhatsApp.

AnuleazăConfirmă & Anunță

Avertisment

Deviz Neaprobat

Clientul n-a aprobat încă devizul. Dacă pornești execuția, manopera nu mai e acoperită de ofertă. Continui?

ÎnapoiPornește Oricum

Eroare

N-am Putut Trimite la SPV

Conexiunea cu ANAF a picat. Factura e salvată local și o retrimitem automat în 30s — sau încearcă acum.

Mai TârziuRetrimite Acum

Anatomie & comportament

→ Lățime 380–440px, centrat, scrim întunecat în spate.
→ Titlu Title Case, scurt; corp explică consecința, nu codul tehnic.
→ Butonul principal e ultimul (dreapta); cel de anulare e ghost.
→ Esc și click pe scrim = anulează (doar pentru acțiuni ne-distructive).

Când folosim ce ton

Confirmare — acțiune normală cu efect (livrare, trimitere ofertă).
Avertisment — se poate continua, dar cu un risc explicat.
Eroare — ceva a eșuat; explicăm omenește + dăm calea de ieșire. Niciodată cod brut singur.

16 · Stări de încărcare

Așteptarea, în stilul LaFix.

Când un ecran aduce date sau o acțiune durează câteva secunde, nu lăsăm gol și nu înghețăm. Folosim trei trepte: skeleton pentru structuri care se încarcă, spinner pentru acțiuni scurte în buton, și Fix care „gândește" când asistentul lucrează la o sarcină.

Skeleton de card

Aceeași formă ca al cardului real, shimmer 1.3s. Niciodată spinner pe tot ecranul.

Spinner în buton

Se salvează…

Inel albastru, 0.8s.

Butonul rămâne pe loc, textul devine verb la prezent („Se trimite…"). Dezactivat cât durează.

Fix gândește

Fix lucrează…

Caut piese OEM pentru CJ-33-CXD

Marca Fix pulsează blând; sub ea, exact ce face acum. Transparent, nu o rotiță anonimă.

Reguli

→ Sub 300ms nu arătăm nimic (evităm pâlpâitul). → 0.3–2s: skeleton sau spinner local. → Peste ~2s sau sarcină Fix: stare explicită cu ce se întâmplă. → Niciodată un spinner care acoperă tot ecranul fără context. → La final, un mesaj scurt și cald: „Gata. 4 piese comandate."

17 · Butonul FAB

Controlul-semnătură LaFix. Același loc, același logo, peste tot.

Nu e un „+" generic. E butonul cu sigla LaFix (cronometrul-bifă) pe albastru, ancorat în capătul de jos al șinei de meniu din stânga — nu plutește peste conținut. La atingere se deschide în acțiunile de creare specifice ecranului plus scurtătura Întreabă Fix. Poziția, forma și icoana nu se schimbă niciodată — doar opțiunile din meniu se contextualizează.

Reguli FAB

→ Mereu în capătul de jos al șinei de meniu (pe șina restrânsă, centrat pe șină), 56×56px, rază 18–20px.
→ Sigla LaFix în alb pe gradient albastru; la deschis devine „×".
→ Prima opțiune e mereu Întreabă Fix (cu marca portocalie).
→ Sub ea, 1–3 acțiuni de creare ale ecranului curent, cu etichete în frază („Caută la furnizori", „Adaugă casetă") — excepția asumată de la Title Case, ca să se citească drept acțiuni vorbite.
→ Pe atingere, pastilele urcă cu o animație scurtă de fade.

Contextualizare (exemple)

Programări → Programare nouă · Blochează interval
Atelier → Vehicul nou în flux · Programează intrare
Clienți → Client nou · Mesaj WhatsApp
Flux Piese → Comandă piesă · Caută la furnizori

18 · Fix · asistentul

Portocaliul vorbește — propune; omul confirmă.

Fix e asistentul prezent în toată aplicația. Își ia culoarea din scânteia logo-ului — portocaliul cald — așa că oriunde apare gradient-portocaliu cu glifa-scânteie, utilizatorul știe că e inteligența LaFix. Fix e mereu în context: cu o anumită fază, mașină sau client. Oferă sugestii, căutare conversațională aprofundată și — regula de aur a v5 — propune, nu execută: pregătește acțiunea gata de confirmat (o reamintire ITP devine o propunere de programare neconfirmată), iar omul o aprobă sau o respinge.

Fix — numele implicit; patronul îl poate schimba

Personalitate reglabilă (prietenos / concis / expert) și avatar la alegere; numele ales persistă peste tot. Arată mereu sursa și gradul de încredere. Propune, nu execută — fiecare acțiune rămâne o propunere până o confirmă omul.

Fix pregătește — exemple reale

„Creează programare din conversația WhatsApp."

→ Fix citește firul, extrage mașina și ziua, deschide programarea pre-completată. Tu confirmi.

„Comandă toate piesele în variantă OEM pentru CJ-33-CXD."

→ Fix selectează furnizorii, pune comanda pe Flux Piese, arată totalul. 4 piese, 612 € — confirmi?

„Resetează timpul înregistrat de Menu ca pontaj pentru AB-23-FZY."

→ Fix găsește pontajul și pregătește corecția, cu urmă în istoric. Pontaj 0h — confirmi?

„Trimite 2 oferte pentru George, ambele cu piese de schimb echivalente și 10% reducere la manoperă."

→ Fix construiește două devize, aplică reducerea, pregătește mesajele. Gata de trimis — verifici?

Sugerează

Card Fix: alternativă de furnizor, slot mai bun, risc pe flux. Propune, nu impune.

Caută conversațional

Căutare aprofundată din orice bară de unelte: „mașinile lui Claudiu cu ITP expirat luna asta".

Pregătește

Pre-completează crearea, actualizarea, avansarea de faze — mereu ca propunere, cu pas de confirmare și posibilitate de anulare.

De ce portocaliu, nu mov? Movul e suprafolosit în software-ul AI — piața s-a saturat. Portocaliul e deja al nostru, din logo („Fix"), și ne diferențiază pe loc.

Fix nu înlocuiește meseriașul. Îi ia din mâini munca repetitivă — dar fiecare acțiune trece printr-un „confirmi?" și se poate anula.

19 · Responsive

De la tabletă în atelier până la TV-ul din hală.

LaFix trăiește pe mai multe ecrane: tableta mecanicului (portret), tableta de la recepție (peisaj), laptopul cu rapoarte și TV-ul cu dashboard-ul „Atelier" agățat în hală. Layout-ul se adaptează prin praguri clare — dar regula fără scroll orizontal rămâne pe orice ecran.

Tabletă · portret

1 coloană de carduri · swim-lane-uri ca benzi verticale pliabile · sidebar restrâns (60px) · FAB jos-dreapta.

Tabletă · peisaj

2 coloane de carduri (implicit) · swim-lane-uri orizontale · sidebar extins opțional · toolbar cu căutare Fix.

Laptop & TV · ecran mare

3 coloane · rapoarte pe laptop · dashboard „Atelier" pe TV: tipografie mărită, fără controale tactile, citibil de la distanță.

Praguri

< 640px — 1 coloană, benzi verticale.
640–1200px — 2 coloane, lane-uri orizontale (implicit, tabletă peisaj).
> 1200px — 3 coloane, panouri laterale extinse.
Mod TV — scală +25–40% la text, fără hover/tap, auto-refresh.

Constante pe orice ecran

→ Sidebar care urmează tema (crem / off-black).
→ FAB jos-dreapta cu sigla LaFix.
→ Cardul ca unitate de conținut.
→ Slide-over din dreapta (full-width în portret).
→ Zero scroll orizontal — file, wrap și vederi comutabile în loc.

20 · Voce & ton

Cum sună LaFix, în cuvinte.

Scriem ca un coleg priceput care îți vrea binele: scurt, direct, omenește. Verbe la persoana a II-a, fără jargon corporatist, fără ALL CAPS în propoziții, fără semne de exclamare în lanț. Tonul se ajustează după context, dar vocea rămâne aceeași.

Hotărât

O propoziție, un verb clar. „Trimite oferta." Nu „Ați dori eventual să transmiteți oferta?"

Cald

Omenește, nu robotic. „Gata, mașina poate pleca." Nu „Operațiune finalizată cu succes."

De încredere

Spui pe ce te bazezi. „Estimare bazată pe 3 oferte." Nu promisiuni goale.

Așa scriem

Verbe de acțiune, persoana a II-a. „Aprobă devizul."

Cifre concrete, surse. „Fix cât devizul: 412 €."

Fix propune și întreabă. „Schimb furnizorul?"

Termeni de atelier reali, nu corporatiști.

Așa nu scriem

Fără jargon („sinergie", „optimizăm experiența").

Fără ALL CAPS sau „!!!" pentru urgență.

Fix nu impune și nu inventează certitudini.

Fără mesaje de eroare cu coduri brute, fără context.

21 · Interacțiune & afordanță

Ce arată a buton, e buton. Ce e doar de citit, arată ca text.

Forma promite o acțiune. Dacă un element are aspect de buton sau de control, atunci el trebuie să funcționeze la atingere; dacă e doar informativ (read-only), îl randăm ca text simplu sau etichetă, niciodată stilizat ca buton. Iar orice valoare calculată, scor sau sugestie de la Fix poartă un motiv vizibil — un popover „de ce?" — ca utilizatorul să nu fie pus să creadă pe cuvânt.

Onestitate de afordanță

Editabilă → buton

Severitate · Mare se poate schimba la atingere

Read-only → etichetă

Severitate: Mare doar afișează, nu reacționează

Aceeași informație, două forme. Pastila de severitate e buton când mecanicul o poate edita și etichetă când fișa e read-only (fază trecută sau rol fără drept).

Tooltip pe valorile obscure

dovezi 3/4 la hover: „pozele necesare per constatare"

încredere 86% la hover: „de ce?" — sursa & calculul

Termenii care nu se explică singuri („dovezi" = pozele care susțin constatarea) și orice cifră de la Fix au tooltip. Pentru valorile AI/calculate, tooltipul e popoverul de proveniență „de ce?": prior + dovezi + rezultat.

Popover de proveniență — „de ce?"

Total Deviz estimat: 380–520 €. La atingerea semnului „de ce?" se deschide un popover: „Estimare pe baza a 3 oferte similare pentru distribuție Golf 7, manoperă 45 €/h × 4h, marjă piese 18%."

Regula: nicio cifră magică. Fiecare valoare scoasă de sistem (scor, estimare, încredere, slot propus) ajunge la utilizator împreună cu motivul ei — proiectat odată cu valoarea, nu adăugat ulterior. Manopera se citește mereu din politica editabilă „Tarif manoperă" din Flux Operativ (implicit 45 €/oră), niciodată codată.

Așa da

Pastila editabilă arată ca buton; cea read-only, ca etichetă.

„dovezi" N/N are tooltip — câte poze sunt necesare per constatare.

Orice valoare Fix/calculată are popover „de ce?" cu sursa.

Butonul „Avansează" e dezactivat în stările terminale (forward-only).

Așa nu

Fără text read-only stilizat ca buton — promite o acțiune inexistentă.

Fără cifre fără sursă („scor 7" din senin).

Fără termeni obscuri fără tooltip de explicație.

Fără a permite regresia ciclului de piese (recepționată → comandată).

Ciclul pieselor — forward-only, cuibărit sub operațiuni

De comandat Comandată Recepționată predată la box · retur = ramură de excepție

Cuibul: piesele stau sub operațiunea care le cere, niciodată într-o listă plată paralelă — iar căutarea de piese pornită dintr-o operațiune vine pre-filtrată pe ea. Eticheta veche „Precomandă" nu mai există: starea de start se citește ca treabă de făcut — „De comandat". „Comandă" trimite piesa la furnizor și notifică magazia; „Recepționează" o marchează sosită și scade stocul; predarea la box o face șeful. Butonul „Avansează" e dezactivat în starea terminală. Singura mișcare înapoi e „retur", marcată explicit ca excepție — restul ciclului e doar înainte.

Componente canonice v5 — una pentru fiecare treabă

KpiTile

Singura casetă de indicator: etichetă + valoare + „de ce?" (proveniența cifrei) + lista elementelor din spate. Vechea componentă „Stat" nu mai există.

AiTag

Singura insignă de atribuire AI (glifa-scânteie, 12–14px, opțional text). Orice valoare venită de la Fix o poartă — nu inventăm alte stiluri de insignă AI.

Chip

Pastila canonică de stare, în exact două mărimi (sm / md), cu ton semantic și pictogramă din setul Ic. Zero emoji în interfață.

.lf-sel

Marcajul sursei selecției: cardul din listă care a deschis detaliul rămâne evidențiat cu .lf-sel — un breadcrumb vizual, identic pe toate paginile.

GateBlockers

Porțile de fază: cerințele vin din Flux Operativ (configurabile, pe toate cele 6 faze), butonul de avans e dezactivat-cu-motiv și arată x/y. „Portiță patron": doar patronul poate forța, auditat, cu justificare.

Suprapus | Alăturat

Detaliul se deschide peste listă sau lângă ea — o singură preferință globală + o singură lățime redimensionabilă, persistentă peste tot. Modalul (LfModal) rămâne doar pentru simulările terțe: semnare, plată, scaner.

22 · Notificări & WhatsApp

Fiecare eveniment ajunge la cine trebuie — în aplicație și pe WhatsApp.

LaFix vorbește pe două canale. În aplicație, un clopoțel „Notificări" propagă fiecare eveniment pe rolurile interesate — cine ce primește se decide într-o matrice rol × categorie editabilă (Configurare → „Notificări & WhatsApp"; scurtătura din clopoțel: „Cine primește ce?"). Spre client, totul curge pe WhatsApp: recepția poate porni dintr-un mesaj, iar la fiecare pas pleacă un șablon compus din variabile ({varianta}, {pret}…) — care spune onest când conexiunea e oprită. Același eveniment, două voci: scurt și operativ pentru echipă, cald și clar pentru client.

Clopoțelul „Notificări"

Comandă piesele · CJ-33-CXD

Oferta a fost aprobată · pentru Consilier, Magazie, Șef atelier

Factură emisă · 412 €

Mașina a fost predată · pentru Contabil, Patron, Client

Punct plin = necitit. Acțiuni: Marchează citit / Toate citite. Fiecare notificare e filtrată pe rol — fiecare vede doar ce-l privește (patronul vede tot).

Evenimente → cine e anunțat

Eveniment

Roluri notificate

Ofertă aprobată

Consilier · Magazie · Șef atelier · Patron → „Comandă piesele"

Piese recepționate

Mecanic · Șef atelier → „Poți începe execuția"

Mașina predată

Contabil · Patron · Client → „Factură emisă"

Rândurile de mai sus sunt doar implicitul: matricea rol × categorie e editabilă de patron. Fluxul de notificări se poate andoca permanent („Flux în direct"), cu filele „Tot atelierul" / „Pentru mine"; fiecare intrare de jurnal poartă plăcuța mașinii.

Conversație WhatsApp (omnichannel)

Conversație WhatsApp · Claudiu P.

Bună ziua, vreau o programare pentru Golf, face un zgomot la față. Sigur. Vă propun joi la 09:00. Confirmați?

Scrie pe WhatsApp… Trimite

Recepția poate porni dintr-un mesaj WhatsApp. Firul are compozitor propriu („Scrie pe WhatsApp" → „Trimite"); Fix poate extrage mașina și ziua și pre-completa programarea.

Șabloane pe evenimente

Programare confirmată Ofertă trimisă Mașina e gata Reamintire ITP Predare & factură

În portalul clientului de pe telefon, mesajul de bază e: „Fix te anunță pe WhatsApp la fiecare pas." Clientul are și o cutie poștală în portal; când scrie de acolo, consilierul și șeful sunt notificați. Clientul iese din portal cu „Înapoi la staff" (când e cont de echipă).

23 · Reguli

Do / Don't.

Așa da

Tap → detaliu Suprapus sau Alăturat (o preferință globală, o lățime), identic pe orice ecran și domeniu.

Title Case pe controale, ALL CAPS doar pe divizoare; FAB-ul are etichete în frază.

Portocaliul pentru Fix. Albastrul pentru acțiuni.

2 coloane de carduri ca densitate implicită.

FAB cu sigla LaFix, în capătul de jos al șinei de meniu.

Meniul din stânga e singura navigare; căutarea globală stă mereu în bara de sus.

Fix propune — omul confirmă și execută.

Ce arată a buton funcționează ca buton; read-only = etichetă.

Orice cifră calculată/Fix vine cu popover „de ce?".

Piesele cuibărite sub operațiuni; ciclul doar înainte.

Acces pe rol; ecranele se adaptează fazei (patronul vede tot).

Așa nu

Fără scroll orizontal — file, wrap și vederi comutabile în loc.

Fără emoji ca iconuri de sistem.

Fără portocaliu decorativ — diluează semnătura lui Fix.

Fără un „+" generic în loc de FAB-ul cu sigla LaFix.

Fără a inventa a 3-a convenție de interacțiune „doar aici".

Fără bare de navigare paralele (lentile pe paginile de fază, taburi în Configurare) — meniul e unul singur.

Style guide-ul nu e despre frumusețe. E despre recunoaștere: un meseriaș obosit trebuie să „citească" ecranul fără să gândească — în orice domeniu LaFix.

Style Guide.
O singură limbă vizuală — de la recepție până pe ecranul din atelier.

Cronometrul și bifa portocalie.

Un brand-mamă. Multe domenii.

Albastru pentru acțiune. Portocaliu pentru Fix.

Newsreader pentru voce, Inter pentru muncă.

Title Case pentru controale. ALL CAPS doar pentru divizoare.

Așa da

Așa nu

Un singur set, desenat de mână. Fără emoji.

Ritm de 4px, calibrat pe 2 coloane de carduri.

Colțuri prietenoase, scalate cu mărimea.

Patru niveluri de adâncime. Containere clare.

Variante puține, stări clare.

Cardul e unitatea care se repetă peste tot.

Coloane pe etape. Fără scroll orizontal în lane.

Zi, Săptămână, Lună — și sloturile pe care le propune Fix.

Mai mult conținut, fără scroll orizontal: file în slide-over.

Un sistem de dialoguri cu chip de brand.

Așteptarea, în stilul LaFix.

Controlul-semnătură LaFix. Același loc, același logo, peste tot.

Portocaliul vorbește — propune; omul confirmă.

De la tabletă în atelier până la TV-ul din hală.

Cum sună LaFix, în cuvinte.

Așa scriem

Așa nu scriem

Ce arată a buton, e buton. Ce e doar de citit, arată ca text.

Așa da

Așa nu

Fiecare eveniment ajunge la cine trebuie — în aplicație și pe WhatsApp.

Do / Don't.

Așa da

Așa nu