fix(web): tema partajata landing<->aplicatie (cheie theme + 8 teme + icon unic)

- Landing foloseste aceeasi cheie localStorage 'theme' ca aplicatia (era 'lp-theme'), deci preferinta de tema se pastreaza intre landing si aplicatie. - Landing capata cele 8 teme din aplicatie (adaugate light/dark/petrol; auto se rezolva la light/dark), aceeasi ordine de ciclare. - Selector tema: acelasi icon FIX (SVG semicerc din landing) in ambele locuri; aplicatia nu mai schimba glifa per tema. Eticheta temei curente ramane. - Init-ul selectorului din landing nu mai scrie in localStorage (nu mai suprascrie alegerea facuta in aplicatie la simpla vizitare). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
docs: ghid utilizator (medii test/prod, termeni simpli) + README pe per-env
2026-07-03 12:39:42 +00:00 · 2026-07-03 12:33:33 +00:00
4 changed files with 178 additions and 27 deletions
--- a/README.md
+++ b/README.md
@@ -12,6 +12,7 @@ Trimiterea catre RAR e **dezactivata implicit** (`AUTOPASS_WORKER_SEND_ENABLED=f

 Sursa de adevar pentru contractul RAR: [`docs/api-rar-contract.md`](docs/api-rar-contract.md).
 Progres + proces: [`docs/ROADMAP.md`](docs/ROADMAP.md).
+**Ghid pentru utilizatori (service-uri), in termeni simpli:** [`docs/ghid-utilizator.md`](docs/ghid-utilizator.md).

 ## Pornire rapida

@@ -105,16 +106,25 @@ python3 -m tools.account list [--pending] | activate --account N | set-admin --a
 python3 -m tools.apikey create|list|rotate|revoke --account N   # cheie afisata O SINGURA DATA
 ```

-**Creds RAR per cont** (ca worker-ul sa trimita fara parola in fiecare cerere) — criptate Fernet at-rest:
+**Creds RAR per cont, pe medii** — fiecare cont are doua sloturi separate de credentiale RAR,
+**Testare** si **Productie** (sisteme RAR distincte; un set de creds merge pe exact unul). Criptate
+Fernet at-rest. Din web se seteaza in **Cont → Credentiale RAR** (doua sectiuni, cu validare prin login
+si confirmare unica la activarea Productie). Din API, campul `rar_target` alege slotul:

 ```bash
+# Seteaza creds pe mediul Testare (lipsa rar_target -> mediul implicit / ancora globala)
 curl -s -X POST http://localhost:8010/v1/conturi/rar-creds \
  -H 'X-API-Key: rfak_...' -H 'Content-Type: application/json' \
-  -d '{"email": "service@exemplu.ro", "password": "parola-rar"}'
+  -d '{"email": "service@exemplu.ro", "password": "parola-rar", "rar_target": "test"}'
 ```

-> GET-urile de listare (`/v1/prezentari`, `/v1/nomenclator`, `/v1/audit/export`) sunt momentan
-> **globale si neprotejate** — filtrarea pe cont ramane de adaugat.
+La trimitere, `POST /v1/prezentari` accepta `rar_env` (`test`/`prod`); lipsa lui -> mediul implicit al
+contului. Pe ce mediu a mers fiecare rand vezi in `GET /v1/prezentari` (camp `rar_env`) si in badge-ul din
+dashboard. Explicatie pentru operatori: [`docs/ghid-utilizator.md`](docs/ghid-utilizator.md).
+
+> POST-urile si listarile per-cont (`/v1/prezentari`, `/v1/audit/export`, fragmentele web) sunt
+> **filtrate pe contul cheii API**. `GET /v1/nomenclator` ramane public intentionat (coduri RAR publice,
+> fara date personale).

 ## Proba reala la RAR (mediu test)

@@ -133,7 +143,7 @@ curl -s -X POST http://localhost:8010/v1/conturi/rar-creds \
 | Variabila | Implicit | Rol |
 |-----------|----------|-----|
 | `DB_PATH` | `./data/autopass.db` | calea SQLite |
-| `RAR_ENV` | `test` | `test` / `prod` |
+| `RAR_ENV` | `test` | ancora globala `test` / `prod`; mediile per-cont (Testare/Productie) au prioritate cand contul le are configurate |
 | `REQUIRE_API_KEY` | `false` | `true` = cere cheie pe `/v1/*` (prod) |
 | `WEB_AUTH_REQUIRED` | `true` | `false` = dashboard fara login, cont id=1 (dev) |
 | `CREDS_KEY` | (efemera) | **cheie Fernet creds RAR — trebuie PARTAJATA intre API si worker** |
--- a/app/web/templates/base.html
+++ b/app/web/templates/base.html
@@ -869,12 +869,14 @@
      </div>
      {% endif %}
      {% endif %}
-      {# US-011 (PRD 5.16): selector tema = pill cu icon + eticheta temei curente.
-         Eticheta ascunsa pe <=560px via CSS. JS actualizeaza .tema-icon si #tema-label. #}
+      {# US-011 (PRD 5.16): selector tema = pill cu icon FIX (acelasi SVG ca landing) +
+         eticheta temei curente. Eticheta ascunsa pe <=560px via CSS. JS actualizeaza
+         doar #tema-label (iconita nu se mai schimba per tema — consecventa cu landing). #}
      <button id="tema-toggle" class="tema-btn"
              aria-label="Comuta tema"
              title="Comuta tema">
-        <span class="tema-icon" aria-hidden="true">&#9728;</span>
+        <svg class="tema-icon" width="17" height="17" viewBox="0 0 24 24" fill="none"
+             stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18z" fill="currentColor" stroke="none"/></svg>
        <span id="tema-label">Light</span>
      </button>
      <span class="muted" style="font-size:var(--fs-xs);">v{{ version }}</span>
@@ -951,7 +953,7 @@
  </div>
  <script>
    // Comutator tema ciclic (DRY E2 — PRD 5.15): config traieste intr-o singura structura
-    // sursa-de-adevar THEMES din care se DERIVA CYCLE/VALID/ICONS/LABELS/NEXT.
+    // sursa-de-adevar THEMES din care se DERIVA CYCLE/VALID/LABELS/NEXT.
    // Adaugarea unei teme noi = O singura intrare in THEMES.
    // Ciclu: Light->Dark->Petrol->Grafit->Cobalt->Cupru->Hartie->Auto->(inapoi la Light).
    // 'auto' se rezolva la paint prin anti-FOUC (dark OS -> 'dark', light OS -> 'light').
@@ -959,21 +961,20 @@
      var btn = document.getElementById('tema-toggle');
      if (!btn) return;
      // SURSA DE ADEVAR UNICA: adaugarea unei teme = o singura intrare aici.
-      // Iconite: ☀ Light | ☾ Dark | ◐ Petrol | ◑ Grafit | ◆ Cobalt | ◇ Cupru | ○ Hartie | ◉ Auto
+      // Iconita e FIXA (acelasi SVG ca landing) — nu se mai deriva din tema.
      var THEMES = [
-        {id:'light',  label:'Light',  icon:'&#9728;'},
-        {id:'dark',   label:'Dark',   icon:'&#9790;'},
-        {id:'petrol', label:'Petrol', icon:'&#9680;'},
-        {id:'grafit', label:'Grafit', icon:'&#9681;'},
-        {id:'cobalt', label:'Cobalt', icon:'&#9670;'},
-        {id:'cupru',  label:'Cupru',  icon:'&#9671;'},
-        {id:'hartie', label:'Hartie', icon:'&#9675;'},
-        {id:'auto',   label:'Auto',   icon:'&#9689;'},
+        {id:'light',  label:'Light'},
+        {id:'dark',   label:'Dark'},
+        {id:'petrol', label:'Petrol'},
+        {id:'grafit', label:'Grafit'},
+        {id:'cobalt', label:'Cobalt'},
+        {id:'cupru',  label:'Cupru'},
+        {id:'hartie', label:'Hartie'},
+        {id:'auto',   label:'Auto'},
      ];
      // Derivate din THEMES (nu literali separati — DRY E2):
      var CYCLE  = THEMES.map(function(t) { return t.id; });
      var VALID  = THEMES.reduce(function(a, t) { a[t.id] = 1; return a; }, {});
-      var ICONS  = THEMES.reduce(function(a, t) { a[t.id] = t.icon; return a; }, {});
      var LABELS = THEMES.reduce(function(a, t) { a[t.id] = t.label; return a; }, {});
      var NEXT   = (function() {
        var n = {};
@@ -989,9 +990,7 @@
      }
      function _syncButton(stored) {
        var s = VALID[stored] ? stored : 'auto';
-        // US-011: actualizeaza iconita si eticheta separat (btn e pill, nu se inlocuieste innerHTML intreg)
-        var icon = btn.querySelector('.tema-icon');
-        if (icon) icon.innerHTML = ICONS[s];
+        // US-011: iconita e fixa (nu se schimba per tema); actualizam doar eticheta.
        var label = document.getElementById('tema-label');
        if (label) label.textContent = LABELS[s];
        btn.setAttribute('aria-label', 'Tema: ' + LABELS[s] + ', apasa pentru ' + NEXT[s]);
--- a/app/web/templates/landing.html
+++ b/app/web/templates/landing.html
@@ -17,6 +17,10 @@
    body[data-theme="cobalt"]{--bg:#080d1c;--card:#111a33;--card2:#0b1226;--text:#e9ecfb;--sub:#8a93b8;--line:#1d2747;--line2:#161f3a;--accent:#4068FF;--hbg:rgba(8,13,28,.9);--okt:#2fd0a6;--infot:#8aa0ff;--errt:#f06a7a;--mut:#5a6390}
    body[data-theme="cupru"]{--bg:#15110b;--card:#211a12;--card2:#15110b;--text:#efe6d6;--sub:#a89a85;--line:#36291c;--line2:#281e14;--accent:#D98A3D;--hbg:rgba(21,17,11,.9);--okt:#67b98c;--infot:#dfa45c;--errt:#e2685a;--mut:#6d5f4c}
    body[data-theme="hartie"]{--bg:#f3efe6;--card:#fffdf7;--card2:#f3efe6;--text:#1e1a13;--sub:#6a6052;--line:#e2dccc;--line2:#ece6d9;--accent:#1F5FBF;--hbg:rgba(255,253,247,.92);--okt:#1c7d5d;--infot:#1F5FBF;--errt:#bd463c;--mut:#9a8f7d}
+    /* Teme aliniate cu aplicatia (base.html) — acelasi set de 8; 'auto' se rezolva la light/dark. */
+    body[data-theme="light"]{--bg:#f5f7fa;--card:#ffffff;--card2:#f5f7fa;--text:#1a1d24;--sub:#5c6473;--line:#e2e5ea;--line2:#eaedf2;--accent:#1F66C9;--hbg:rgba(245,247,250,.9);--okt:#15803d;--infot:#1F66C9;--errt:#dc2626;--mut:#8a92a0}
+    body[data-theme="dark"]{--bg:#0f1218;--card:#181c24;--card2:#0f1218;--text:#e6e9ef;--sub:#8b93a7;--line:#262b36;--line2:#1f2530;--accent:#2E74D6;--hbg:rgba(15,18,24,.88);--okt:#2FBF8F;--infot:#6ea2ec;--errt:#E05D5D;--mut:#5c6473}
+    body[data-theme="petrol"]{--bg:#0e1416;--card:#161e20;--card2:#0e1416;--text:#e6e9ef;--sub:#8b93a7;--line:#232c2e;--line2:#1c2426;--accent:#0E7C7B;--hbg:rgba(14,20,22,.9);--okt:#2FBF8F;--infot:#3fb9b6;--errt:#E05D5D;--mut:#5c6473}
    .page{width:100%;max-width:1280px;margin:0 auto;background:var(--bg,#0f1218);color:var(--text,#e6e9ef);overflow:hidden;}
    a{text-decoration:none;}
    input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;}
@@ -53,7 +57,7 @@
  </style>
 </head>
 <body data-theme="grafit">
-  <script>try{var _t=localStorage.getItem('lp-theme');if(_t&&['grafit','cobalt','cupru','hartie'].indexOf(_t)>=0)document.body.setAttribute('data-theme',_t);}catch(e){}</script>
+  <script>try{var _t=localStorage.getItem('theme');var _V={light:1,dark:1,petrol:1,grafit:1,cobalt:1,cupru:1,hartie:1,auto:1};if(_t&&_V[_t]){var _r=_t==='auto'?(window.matchMedia('(prefers-color-scheme: light)').matches?'light':'dark'):_t;document.body.setAttribute('data-theme',_r);}}catch(e){}</script>
  <main class="page">
 <!-- HEADER -->
    <div class="lp-header" style="position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:68px;background:var(--hbg,rgba(15,18,24,.88));backdrop-filter:blur(8px);border-bottom:1px solid var(--line,#262b36);z-index:5;">
@@ -406,11 +410,21 @@
  </main>
  <script>
    (function(){
-      var THEMES=[['grafit','Grafit'],['cobalt','Cobalt'],['cupru','Cupru'],['hartie','Hârtie']];
+      // Acelasi set de 8 teme, aceeasi ordine si aceeasi cheie 'theme' ca aplicatia
+      // (base.html), ca preferinta sa se pastreze intre landing si aplicatie.
+      // 'auto' urmeaza sistemul (prefers-color-scheme).
+      var THEMES=[['light','Light'],['dark','Dark'],['petrol','Petrol'],['grafit','Grafit'],['cobalt','Cobalt'],['cupru','Cupru'],['hartie','Hârtie'],['auto','Auto']];
+      var VALID=THEMES.reduce(function(a,t){a[t[0]]=1;return a;},{});
      var body=document.body;
-      function curIndex(){var t=body.getAttribute('data-theme');for(var i=0;i<THEMES.length;i++){if(THEMES[i][0]===t)return i;}return 0;}
-      function applyTheme(i){i=((i%THEMES.length)+THEMES.length)%THEMES.length;body.setAttribute('data-theme',THEMES[i][0]);var l=document.getElementById('theme-label');if(l)l.textContent=THEMES[i][1];try{localStorage.setItem('lp-theme',THEMES[i][0]);}catch(e){}}
-      applyTheme(curIndex());
+      function resolve(id){return id==='auto'?(window.matchMedia('(prefers-color-scheme: light)').matches?'light':'dark'):id;}
+      function storedId(){try{var v=localStorage.getItem('theme');return (v&&VALID[v])?v:null;}catch(e){return null;}}
+      function curId(){return storedId()||body.getAttribute('data-theme')||'grafit';}
+      function curIndex(){var t=curId();for(var i=0;i<THEMES.length;i++){if(THEMES[i][0]===t)return i;}return 3;}
+      function label(i){var l=document.getElementById('theme-label');if(l)l.textContent=THEMES[i][1];}
+      function applyTheme(i){i=((i%THEMES.length)+THEMES.length)%THEMES.length;var id=THEMES[i][0];body.setAttribute('data-theme',resolve(id));label(i);try{localStorage.setItem('theme',id);}catch(e){}}
+      // Init: sincronizeaza eticheta + data-theme din starea stocata, FARA a scrie in localStorage
+      // (altfel simpla vizitare a landing-ului ar suprascrie alegerea facuta in aplicatie).
+      (function(){var i=curIndex();body.setAttribute('data-theme',resolve(THEMES[i][0]));label(i);})();

      // style-hover: framework-ul de design folosea atributul style-hover; il aplicam la hover.
      function parseStyle(str){var o={};str.split(';').forEach(function(p){var idx=p.indexOf(':');if(idx>0)o[p.slice(0,idx).trim()]=p.slice(idx+1).trim();});return o;}
--- a/docs/ghid-utilizator.md
+++ b/docs/ghid-utilizator.md
@@ -0,0 +1,128 @@
+# Ghid de utilizator — RAR AUTOPASS
+
+Ghid simplu pentru service-uri auto. Explica cum trimiti prezentarile catre RAR AUTOPASS
+prin aplicatie, cu accent pe cele doua medii: **Testare** si **Productie**.
+
+Fara termeni tehnici. Daca esti dezvoltator si cauti API/instalare, vezi [README.md](../README.md).
+
+---
+
+## Ce face aplicatia
+
+Legea 142/2023 obliga service-urile auto autorizate sa transmita la RAR, la finalul fiecarei
+lucrari, datele obligatorii (VIN, kilometraj etc.). Aplicatia asta face transmiterea in locul tau:
+tu incarci lucrarile (dintr-un fisier sau din softul tau), iar aplicatia le declara la RAR si iti
+arata ce a mers si ce nu.
+
+---
+
+## Cele doua medii: Testare si Productie
+
+La RAR exista **doua sisteme separate**:
+
+- **Testare** — pentru probe. Ce trimiti aici NU e o declaratie oficiala. Bun ca sa te obisnuiesti,
+  fara riscuri.
+- **Productie** — **real**. Ce trimiti aici e o declaratie oficiala catre RAR, conform legii.
+  **Nu se poate anula sau corecta** dupa ce a fost acceptata.
+
+Fiecare mediu are **propriul lui email si parola** de la RAR. Un set de credentiale merge pe exact
+un mediu — cele de test nu functioneaza pe productie si invers.
+
+Un mediu e **disponibil** doar cand e activat SI are credentiale valide. Din asta decurge tot ce
+poti face: unde trimiti, daca poti alege, ce vezi pe ecran.
+
+---
+
+## Pasul 1 — Configureaza credentialele RAR
+
+Intra in **Cont → Credentiale RAR**. Vezi doua sectiuni: **Testare** si **Productie**. Pentru
+fiecare mediu pe care vrei sa-l folosesti:
+
+1. Bifeaza **Activare**.
+2. Scrie **emailul si parola** de la RAR pentru acel mediu.
+3. Apasa **Salveaza**. Aplicatia incearca un **login de proba** pe RAR:
+   - login reusit → credentialele se salveaza (criptat) si mediul devine disponibil;
+   - login esuat → primesti eroare pe acel mediu, iar credentialele NU se salveaza.
+4. La **prima activare a mediului Productie** trebuie sa bifezi confirmarea: intelegi ca trimiterile
+   pe Productie sunt reale, finale si fara anulare (Legea 142).
+5. Jos poti alege **Mediul implicit** — cel pe care se trimite automat. Poti alege doar dintre
+   mediile disponibile.
+
+Parola nu se afiseaza niciodata inapoi pe ecran; e stocata criptat.
+
+> Un cont nou vine implicit cu **Productie pornit** si **Testare oprit**. Daca vrei sa exersezi
+> intai, activeaza Testare si pune-l ca mediu implicit.
+
+---
+
+## Pasul 2 — Cum stii unde trimiti (ca sa nu confunzi testul cu realul)
+
+Doua indicii sunt mereu la vedere:
+
+- **Bara de sus (statusbar)** arata mediul implicit al contului. Daca ai **ambele** medii
+  disponibile, apare si un buton **Comuta** ca sa schimbi rapid unde se trimite.
+- **Fiecare trimitere are un badge**: `PRODUCȚIE` (rosu, proeminent = real) sau `Testare` (gri,
+  discret). Il vezi in liste, in coada, in detaliul trimiterii si in jurnal.
+
+Regula simpla: **rosu = real**. Daca vezi rosu, mergi cu grija.
+
+---
+
+## Pasul 3 — Trimite prezentarile
+
+### Din fisier (Excel / CSV)
+
+Pe dashboard: **incarca** fisierul → **potriveste coloanele** (aplicatia sugereaza singura si tine
+minte formatul pentru data viitoare) → **verifica** randurile → **confirma**. Randurile intra in
+coada si se trimit.
+
+- Daca ai **un singur mediu** disponibil, totul merge automat acolo.
+- Daca ai **doua**, la incarcare apare un **selector de mediu** — alegi unde vrei sa trimiti fisierul
+  respectiv.
+
+### Din softul tau (ROAAUTO / soft propriu)
+
+Softul trimite prin cheia API a contului. Poate preciza mediul (`test`/`prod`); daca nu-l precizeaza,
+merge pe mediul implicit al contului. Detalii tehnice in [README.md](../README.md).
+
+---
+
+## Ce inseamna starea unei trimiteri
+
+| Stare | Ce inseamna, pe scurt |
+|-------|-----------------------|
+| **In asteptare** | E in coada, urmeaza sa fie trimisa. |
+| **Se trimite** | Se trimite chiar acum. |
+| **Declarata la RAR** | Gata, acceptata (are numar de prezentare). Nu se mai poate modifica. |
+| **Lipseste codul** | Operatia nu are cod RAR — alege-l in tab-ul **Mapari** si se deblocheaza singura. |
+| **Date incomplete** | RAR a respins randul (lipseste ceva) — corecteaza si reincarca. |
+| **Eroare** | Trimiterea a esuat si nu se mai reincearca. Vezi detaliul; daca tine de credentiale, corecteaza-le in Cont. |
+
+---
+
+## Jurnal — ce s-a intamplat
+
+Tab-ul **Jurnal** noteaza actiunile importante, cu ora si cont: activarea/dezactivarea unui mediu,
+schimbarea mediului implicit, o trimitere blocata pentru ca mediul cerut nu era disponibil. Util cand
+vrei sa intelegi „cine, ce, cand".
+
+---
+
+## Intrebari frecvente
+
+**Am pus credentiale si dau eroare la salvare.** Credentialele sunt pentru mediul gresit (test pe
+productie sau invers), sau emailul/parola nu sunt corecte. Un set merge pe exact un mediu.
+
+**Sunt client doar cu productie, nu am cont de test.** Normal. Lasa Testare dezactivat si lucreaza pe
+Productie. Nu poti activa Testare fara credentiale de test — nu e o eroare, asa e proiectat.
+
+**Am trimis din greseala pe Productie.** La RAR o prezentare acceptata (`FINALIZATA`) e finala si nu
+se poate anula prin aplicatie. De aceea Productie e marcat cu rosu peste tot si cere confirmare la
+activare. Foloseste Testare cand exersezi.
+
+**Nu vad butonul de comutare a mediului.** Apare doar cand ai **doua** medii disponibile. Cu unul
+singur, se trimite automat acolo si nu ai ce comuta.
+
+**Unde vad ce s-a trimis si unde?** In lista de trimiteri de pe dashboard — fiecare rand are badge-ul
+de mediu si starea. Pentru verificare independenta direct la RAR, cere-i administratorului lista de
+finalizate.