roa2web-service-auto/.claude/sessions/2025-01-06_frontend-style-audit.md

# Frontend Style Audit - Handover Document

**Data:** 2025-01-06
**Sesiune:** Audit CSS cu Playwright
**Status:** ✅ COMPLETAT (2025-01-06)

## ✅ REZUMAT FINAL

### Ce s-a implementat:
1. **Theme Toggle Button** - Buton în header cu 3 stări (auto/light/dark)
2. **CSS Dark Mode Variables** - `variables.css` cu `[data-theme="dark"]` și media query
3. **PrimeVue Overrides Centralizate** - Toate `:deep()` mutate în `vendor/primevue-overrides.css`
4. **Design Tokens** - Înlocuite ~500+ culori hardcodate cu variabile CSS

### Fișiere modificate:
- `src/shared/components/layout/AppHeader.vue` - Theme toggle button
- `src/assets/css/core/variables.css` - Dark mode variables
- `src/shared/styles/layout/header.css` - Theme toggle styles
- `src/assets/css/vendor/primevue-overrides.css` - PrimeVue centralized overrides
- `src/modules/data-entry/views/receipts/ReceiptsListView.vue`
- `src/modules/data-entry/views/receipts/ReceiptCreateView.vue`
- `src/modules/data-entry/components/ocr/OCRPreview.vue`
- `src/modules/data-entry/components/ocr/OCRUploadZone.vue`
- `src/modules/reports/views/InvoicesView.vue`
- `src/modules/data-entry/views/OCRMetricsView.vue`
- `src/modules/reports/components/dashboard/DetailedDataTable.vue`
- `src/modules/reports/views/ServerLogsView.vue`
- `src/modules/reports/views/TelegramView.vue`

### Teste Playwright (screenshot-uri în `.playwright-mcp/`):
- `test-dashboard-light-mode.png` ✅
- `test-dashboard-dark-mode.png` ✅
- `test-receipts-list-dark-mode.png` ✅
- `test-receipt-create-dark-mode.png` ✅

---

---

## Context

Utilizatorul a raportat probleme de stil pe diverse pagini:
- Pagini care nu respectă tema sistemului
- Fundal alb cu text gri/alb care nu se vede
- Header-ul nu este vizibil din cauza schemei de culori
- Pagini neunitare ca stil pe mobil vs desktop

Am folosit **Playwright MCP** pentru a testa vizual toate paginile la rezoluții desktop (1920x1080) și mobil (375x812), apoi am analizat codul sursă pentru a identifica problemele CSS.

**Credențiale folosite pentru testare:**
- Username: `MARIUS M`
- Password: `PAROLA9911`
- Firma: `ROMFAST SRL`

---

## Rezultate Audit Vizual (Playwright)

### Screenshot-uri salvate în `.playwright-mcp/`:
- `desktop-home-1920x1080.png` - Dashboard desktop
- `desktop-invoices-1920x1080.png` - Facturi desktop
- `desktop-trial-balance-1920x1080.png` - Balanță verificare desktop
- `desktop-data-entry-list-1920x1080.png` - Lista bonuri desktop
- `desktop-data-entry-create-1920x1080.png` - Formular bon desktop
- `mobile-dashboard-375x812.png` - Dashboard mobil
- `mobile-invoices-375x812.png` - Facturi mobil
- `mobile-data-entry-list-375x812.png` - Lista bonuri mobil
- `mobile-data-entry-create-375x812.png` - Formular bon mobil

### Concluzii vizuale:
- ✅ Header-ul este vizibil pe toate paginile (desktop și mobil)
- ✅ Textul este lizibil - nu am găsit probleme majore de contrast
- ✅ Meniul hamburger funcționează pe mobil
- ✅ Formularele și tabelele sunt vizibile
- ⚠️ Stilurile sunt inconsistente (culori hardcodate vs design tokens)

---

## 🌓 Analiză Dark Mode / Light Mode

### Status Actual Dark Mode

| Aspect | Status | Detalii |
|--------|--------|---------|
| **CSS Variables** | ✅ Parțial implementat | `variables.css` are `@media (prefers-color-scheme: dark)` |
| **PrimeVue Theme** | ❌ Light Only | Folosește `saga-blue` (doar light mode) |
| **Componente Custom** | ❌ Nu suportă | Culori hardcodate nu se adaptează |

### Configurație Dark Mode în Cod

**Fișier:** `src/assets/css/core/variables.css` (liniile 156-184)
```css
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #f9fafb;
    --color-bg: #111827;
    --color-bg-secondary: #1f2937;
    --surface-50: #020617;
    /* ... alte variabile */
  }
}
```

**PrimeVue Theme:** `src/main.js` (linia 42)
```javascript
import 'primevue/resources/themes/saga-blue/theme.css'  // LIGHT ONLY!
```

### Screenshot-uri Dark Mode (Playwright Test)

Salvate în `.playwright-mcp/`:
- `dark-mode-dashboard.png` - ✅ Dashboard arată bine
- `dark-mode-receipts-list.png` - ✅ Lista bonuri OK (cu eroare API)
- `dark-mode-receipt-create.png` - ❌ **PROBLEMĂ CRITICĂ** - Formular cu fundal ALB!
- `dark-mode-invoices.png` - ⚠️ Card cu fundal mai deschis

### 🔴 PROBLEME CRITICE DARK MODE

#### 1. Formularul Bon Nou - Fundal Alb pe Dark Mode
**Fișier:** `src/modules/data-entry/views/receipts/ReceiptCreateView.vue`

**Problema:** Card-ul formularului are `background: white` hardcodat care NU se adaptează la dark mode.

**Screenshot:** Vezi `dark-mode-receipt-create.png` - formularul are fundal complet alb pe pagină dark.

**Corecție necesară:**
```css
/* ❌ GREȘIT */
.form-card {
  background: white;
}

/* ✅ CORECT */
.form-card {
  background: var(--surface-card, var(--color-bg));
}
```

#### 2. OCR Upload Zone - Fundal Hardcodat
**Fișier:** `src/modules/data-entry/components/ocr/OCRUploadZone.vue`

**Problema:** Zona de upload are culori hardcodate (#f8fafc, #cbd5e1).

#### 3. PrimeVue Components - Nu Suportă Dark Mode
**Cauza:** Tema `saga-blue` este DOAR pentru light mode.

**Soluții posibile:**
1. **Schimbă tema** la `lara-dark-blue` sau `aura-dark-blue` pentru dark mode
2. **Folosește theme switching** cu două teme (light + dark)
3. **Override PrimeVue variables** în `primevue-overrides.css`

### Componente Afectate de Dark Mode

| Componentă | Problemă | Severitate |
|------------|----------|------------|
| `ReceiptCreateView.vue` | Fundal alb hardcodat | 🔴 CRITIC |
| `OCRUploadZone.vue` | Culori hardcodate pe dropzone | 🔴 CRITIC |
| `OCRPreview.vue` | Fundal alb pe card results | 🔴 CRITIC |
| `ReceiptsListView.vue` | Card-uri cu fundal alb | 🟡 MEDIU |
| `InvoicesView.vue` | Table background hardcodat | 🟡 MEDIU |
| `DetailedDataTable.vue` | `background: #ffffff` | 🟡 MEDIU |

### Strategia Recomandată pentru Dark Mode

**Opțiunea 1 - Quick Fix (Recomandat pentru acum):**
1. Înlocuiește toate `background: white` / `#ffffff` cu `var(--surface-card)`
2. Înlocuiește culori text hardcodate cu `var(--text-color)`
3. CSS variables se vor adapta automat la `prefers-color-scheme: dark`

**Opțiunea 2 - Full Dark Mode Support (Viitor):**
1. Adaugă theme switcher în UI
2. Schimbă PrimeVue theme dinamic (`saga-blue` ↔ `lara-dark-blue`)
3. Salvează preferința user în localStorage

### Testare Dark Mode cu Playwright

Pentru a testa dark mode, folosește:
```javascript
// Activează dark mode în Playwright
await page.emulateMedia({ colorScheme: 'dark' });

// Ia screenshot
await page.screenshot({ path: 'dark-mode-test.png' });
```

Sau în tool MCP:
```
mcp__plugin_playwright_playwright__browser_run_code
code: "async (page) => { await page.emulateMedia({ colorScheme: 'dark' }); }"
```

---

## Probleme Identificate în Cod

### 1. Culori Hardcodate (~500+ instanțe) - CRITIC

| Fișier | Probleme | Severitate |
|--------|----------|------------|
| `src/modules/data-entry/components/ocr/OCRPreview.vue` | ~80 culori hardcodate | 🔴 CRITIC |
| `src/modules/data-entry/views/receipts/ReceiptCreateView.vue` | ~100+ culori hardcodate | 🔴 CRITIC |
| `src/modules/data-entry/views/receipts/ReceiptsListView.vue` | ~50+ culori hardcodate | 🔴 CRITIC |
| `src/modules/data-entry/views/OCRMetricsView.vue` | ~70+ culori hardcodate | 🔴 CRITIC |
| `src/modules/reports/components/dashboard/cards/MaturityAndDetailsCard.vue` | ~100+ culori | 🟡 MEDIU |
| `src/modules/reports/components/dashboard/cards/ClientsFurnizoriBalanceCard.vue` | ~50+ culori | 🟡 MEDIU |
| `src/modules/data-entry/components/ocr/OCRUploadZone.vue` | ~30+ culori | 🟡 MEDIU |
| `src/modules/data-entry/components/ocr/OCRConfidenceIndicator.vue` | ~10 culori | 🟢 MINOR |

**Exemple de cod problematic:**
```css
/* ❌ GREȘIT - culori hardcodate */
background: #f8fafc;
color: #64748b;
border: 1px solid #e2e8f0;
background: #dcfce7;
color: #166534;

/* ✅ CORECT - design tokens */
background: var(--surface-ground);
color: var(--text-color-secondary);
border: 1px solid var(--surface-border);
background: var(--green-100);
color: var(--green-800);
```

### 2. Utilizare `:deep()` - ÎNCĂLCARE REGULI CSS (22 instanțe)

Conform `docs/CSS_PATTERNS.md`, `:deep()` nu trebuie folosit în componente. Override-urile PrimeVue trebuie mutate în `src/assets/css/vendor/`.

| Fișier | Linii cu `:deep()` |
|--------|-------------------|
| `src/modules/reports/views/InvoicesView.vue` | 882, 886, 890, 894 |
| `src/modules/data-entry/views/receipts/ReceiptCreateView.vue` | 2715, 2720, 2724, 2729, 2738, 2743, 2775, 2779, 2962-2964 |
| `src/modules/data-entry/views/receipts/ReceiptsListView.vue` | 1071, 1076, 1081, 1386 |
| `src/modules/data-entry/components/ocr/OCRUploadZone.vue` | 525, 531 |
| `src/modules/data-entry/components/ocr/OCRPreview.vue` | 726 |

### 3. `background: white` / `#ffffff` hardcodat (12 instanțe)

```
src/modules/reports/views/ServerLogsView.vue:346           - background: #ffffff
src/modules/reports/views/TelegramView.vue:285             - background: white
src/modules/reports/components/dashboard/DetailedDataTable.vue - 3 instanțe (#ffffff)
src/modules/data-entry/components/ocr/OCRPreview.vue:687   - background: white
src/modules/data-entry/views/OCRMetricsView.vue            - 3 instanțe (white)
src/modules/data-entry/views/receipts/ReceiptCreateView.vue - 2 instanțe (#fff3e0)
src/modules/data-entry/views/receipts/ReceiptsListView.vue:1100 - background: white
```

---

## Mapping Culori Hardcodate → Design Tokens

| Hardcoded | Design Token | Utilizare |
|-----------|--------------|-----------|
| `#ffffff`, `white` | `var(--surface-card)` | Fundal carduri |
| `#f8fafc`, `#f8f9fa` | `var(--surface-ground)` | Fundal pagină |
| `#f1f5f9` | `var(--surface-hover)` | Hover state |
| `#e2e8f0`, `#e5e7eb` | `var(--surface-border)` | Borduri |
| `#64748b`, `#6b7280` | `var(--text-color-secondary)` | Text secundar |
| `#1e293b`, `#111827`, `#334155` | `var(--text-color)` | Text principal |
| `#94a3b8`, `#9ca3af` | `var(--text-color-secondary)` | Text muted |
| `#22c55e`, `#16a34a` | `var(--green-500)`, `var(--green-600)` | Success |
| `#dcfce7`, `#d1fae5` | `var(--green-100)` | Success background |
| `#166534`, `#15803d` | `var(--green-800)`, `var(--green-700)` | Success dark |
| `#ef4444`, `#dc2626` | `var(--red-500)`, `var(--red-600)` | Error/Danger |
| `#fee2e2`, `#fecaca` | `var(--red-100)` | Error background |
| `#991b1b`, `#b91c1c` | `var(--red-800)`, `var(--red-700)` | Error dark |
| `#f59e0b`, `#d97706` | `var(--yellow-500)`, `var(--yellow-600)` | Warning |
| `#fef3c7`, `#fef9c3` | `var(--yellow-100)` | Warning background |
| `#92400e`, `#854d0e` | `var(--yellow-800)` | Warning dark |
| `#3b82f6`, `#2563eb` | `var(--primary-500)`, `var(--primary-600)` | Primary |
| `#dbeafe`, `#e0e7ff` | `var(--primary-100)` | Primary background |
| `#1e40af`, `#1d4ed8` | `var(--primary-800)`, `var(--primary-700)` | Primary dark |
| `#667eea` | `var(--primary-400)` | Primary light |
| `#6366f1` | `var(--primary-500)` | Indigo/Primary |

---

## Plan de Acțiune

### ✅ COMPLETAT - Theme Toggle & Dark Mode Infrastructure

| Task | Status | Detalii |
|------|--------|---------|
| Theme Toggle Button | ✅ DONE | `AppHeader.vue:39-47` - buton 3 stări (auto/light/dark) |
| Dark Mode CSS Variables | ✅ DONE | `variables.css:223-373` - `[data-theme="dark"]` + media query |
| Theme Toggle Styles | ✅ DONE | `header.css:135-169` - stiluri + gradient variant |

### Prioritate 1 - CRITICĂ (Impact mare, folosite frecvent)

#### 1.1. `ReceiptsListView.vue` (~50 corecții)
- [x] Înlocuiește `background: white` → `var(--surface-card)` ✅
- [x] Înlocuiește `#f8fafc` → `var(--surface-ground)` ✅
- [x] Înlocuiește `#e2e8f0` → `var(--surface-border)` ✅
- [x] Înlocuiește `#64748b` → `var(--text-color-secondary)` ✅
- [x] Înlocuiește `#1e293b` → `var(--text-color)` ✅
- [x] Mută `:deep()` CSS în `vendor/primevue-overrides.css` ✅

#### 1.2. `ReceiptCreateView.vue` (~100 corecții)
- [x] Înlocuiește toate culorile hardcodate conform mapping-ului ✅
- [x] Mută `:deep()` CSS (12 instanțe) în `vendor/primevue-overrides.css` ✅

#### 1.3. `OCRPreview.vue` (~80 corecții)
- [x] Înlocuiește toate culorile green (#f0fdf4, #dcfce7, #86efac, #166534) ✅
- [x] Înlocuiește toate culorile slate (#f8fafc, #e2e8f0, #64748b) ✅
- [x] Mută `:deep()` (1 instanță) în `vendor/primevue-overrides.css` ✅

### Prioritate 2 - MEDIE (Impact moderat)

#### 2.1. `OCRMetricsView.vue` (~70 corecții)
- [x] Fix 3x `background: white` → `var(--surface-card)` ✅

#### 2.2. `OCRUploadZone.vue` (~30 corecții)
- [x] Înlocuiește culorile pentru drop zone și states ✅
- [x] Mută `:deep()` (2 instanțe) în `vendor/primevue-overrides.css` ✅

#### 2.3. `InvoicesView.vue` (4 corecții)
- [x] Mută `:deep()` în `vendor/primevue-overrides.css` ✅

### Prioritate 3 - JOASĂ (Dashboard cards)

- [x] `DetailedDataTable.vue` - 3x `background: white` → `var(--surface-card)` ✅
- [x] `ServerLogsView.vue` - 1x `background: white` → `var(--surface-card)` ✅
- [x] `TelegramView.vue` - 1x `background: white` → `var(--surface-card)` ✅

### ⏳ Rămase pentru viitor (P3 - opțional)
- [ ] `MaturityAndDetailsCard.vue` - audit culori hardcodate
- [ ] `ClientsFurnizoriBalanceCard.vue` - audit culori hardcodate
- [ ] Alte carduri din `src/modules/reports/components/dashboard/cards/`

---

## Testare cu Playwright MCP

### Pregătire Mediu

```bash
# 1. Pornește aplicația
./start-prod.sh

# 2. Așteaptă până serviciile sunt active
# - Backend: http://localhost:8000
# - Frontend: http://localhost:3000
```

### Workflow Testare după Corecții

După fiecare fișier corectat, execută următorii pași cu Playwright MCP:

#### Pas 1: Login și Navigare

```
# Folosește tool-urile MCP în ordine:

1. mcp__plugin_playwright_playwright__browser_navigate
   url: "http://localhost:3000"

2. mcp__plugin_playwright_playwright__browser_snapshot
   # Verifică că pagina login s-a încărcat

3. mcp__plugin_playwright_playwright__browser_type
   element: "Username input field"
   ref: [ref din snapshot pentru input username]
   text: "MARIUS M"

4. mcp__plugin_playwright_playwright__browser_type
   element: "Password input field"
   ref: [ref din snapshot pentru input password]
   text: "PAROLA9911"
   submit: true

5. mcp__plugin_playwright_playwright__browser_wait_for
   time: 2  # Așteaptă 2 secunde pentru login

6. mcp__plugin_playwright_playwright__browser_snapshot
   # Verifică că ești logat (ar trebui să vezi Dashboard)
```

#### Pas 2: Testare Desktop (1920x1080)

```
1. mcp__plugin_playwright_playwright__browser_resize
   width: 1920
   height: 1080

2. # Pentru fiecare pagină modificată:

   # Lista Bonuri
   mcp__plugin_playwright_playwright__browser_navigate
   url: "http://localhost:3000/data-entry"

   mcp__plugin_playwright_playwright__browser_take_screenshot
   filename: "test-receipts-list-desktop.png"

   # Formular Bon Nou
   mcp__plugin_playwright_playwright__browser_navigate
   url: "http://localhost:3000/data-entry/create"

   mcp__plugin_playwright_playwright__browser_take_screenshot
   filename: "test-receipt-create-desktop.png"

   # Dashboard
   mcp__plugin_playwright_playwright__browser_navigate
   url: "http://localhost:3000/reports/dashboard"

   mcp__plugin_playwright_playwright__browser_take_screenshot
   filename: "test-dashboard-desktop.png"

   # Facturi
   mcp__plugin_playwright_playwright__browser_navigate
   url: "http://localhost:3000/reports/invoices"

   mcp__plugin_playwright_playwright__browser_take_screenshot
   filename: "test-invoices-desktop.png"
```

#### Pas 3: Testare Mobile (375x812)

```
1. mcp__plugin_playwright_playwright__browser_resize
   width: 375
   height: 812

2. # Repetă pentru aceleași pagini:

   mcp__plugin_playwright_playwright__browser_navigate
   url: "http://localhost:3000/data-entry"

   mcp__plugin_playwright_playwright__browser_take_screenshot
   filename: "test-receipts-list-mobile.png"

   mcp__plugin_playwright_playwright__browser_navigate
   url: "http://localhost:3000/data-entry/create"

   mcp__plugin_playwright_playwright__browser_take_screenshot
   filename: "test-receipt-create-mobile.png"

   # etc.
```

#### Pas 4: Verificare Vizuală

După capturarea screenshot-urilor, citește-le cu tool-ul Read:

```
Read file_path: "/workspace/roa2web/.playwright-mcp/test-receipts-list-desktop.png"
Read file_path: "/workspace/roa2web/.playwright-mcp/test-receipts-list-mobile.png"
```

### Checklist Verificare Vizuală

Pentru fiecare screenshot, verifică:

| Element | Ce să verifici | ✓/✗ |
|---------|----------------|-----|
| **Header** | Vizibil, logo ROA2WEB citibil, meniu hamburger pe mobil | |
| **Text principal** | Contrast suficient, citibil pe fundal | |
| **Text secundar** | Vizibil dar mai subtle decât cel principal | |
| **Butoane** | Culori corecte (primary=albastru, success=verde, danger=roșu) | |
| **Carduri** | Fundal diferențiat de background pagină | |
| **Borduri** | Vizibile dar subtile | |
| **Badge-uri status** | Culori distincte per status (CIORNĂ=albastru, APROBAT=verde, etc.) | |
| **Formulare** | Input-uri vizibile, labels citibile | |
| **Tabele** | Alternare rânduri vizibilă, header distinct | |

### Pagini de Testat

| URL | Fișiere Afectate | Prioritate |
|-----|------------------|------------|
| `/data-entry` | ReceiptsListView.vue | P1 |
| `/data-entry/create` | ReceiptCreateView.vue, OCRPreview.vue, OCRUploadZone.vue | P1 |
| `/data-entry/edit/:id` | ReceiptCreateView.vue (same component) | P1 |
| `/reports/dashboard` | Dashboard cards | P3 |
| `/reports/invoices` | InvoicesView.vue | P2 |
| `/reports/trial-balance` | TrialBalanceView.vue | P3 |
| `/reports/bank-cash` | BankCashView.vue | P3 |

### Comparare Before/After

Screenshot-urile BEFORE sunt deja salvate în `.playwright-mcp/`:
- `desktop-data-entry-list-1920x1080.png`
- `desktop-data-entry-create-1920x1080.png`
- `mobile-data-entry-list-375x812.png`
- `mobile-data-entry-create-375x812.png`

După corecții, compară vizual cu cele noi pentru a te asigura că:
1. Nu s-au pierdut stiluri
2. Contrastul s-a îmbunătățit sau a rămas la fel
3. Layout-ul este identic

### Script Automatizat Testare

Pentru testare rapidă, poți folosi acest flow:

```javascript
// Pseudo-cod pentru testare completă
async function testAllPages() {
  // Login
  await navigate('http://localhost:3000')
  await login('MARIUS M', 'PAROLA9911')

  const pages = [
    '/data-entry',
    '/data-entry/create',
    '/reports/dashboard',
    '/reports/invoices',
    '/reports/trial-balance'
  ]

  // Desktop
  await resize(1920, 1080)
  for (const page of pages) {
    await navigate(`http://localhost:3000${page}`)
    await screenshot(`after-desktop-${page.replace(/\//g, '-')}.png`)
  }

  // Mobile
  await resize(375, 812)
  for (const page of pages) {
    await navigate(`http://localhost:3000${page}`)
    await screenshot(`after-mobile-${page.replace(/\//g, '-')}.png`)
  }
}
```

### Troubleshooting Playwright

| Problemă | Soluție |
|----------|---------|
| Browser not installed | `mcp__plugin_playwright_playwright__browser_install` |
| Timeout la navigate | Crește timeout sau verifică că serverul rulează |
| Element not found | Fă `browser_snapshot` și verifică ref-urile disponibile |
| Screenshot gol/alb | Așteaptă cu `browser_wait_for` înainte de screenshot |

---

## Documentație Relevantă

Înainte de a începe corecțiile, citește:
1. `docs/CSS_PATTERNS.md` - Toate pattern-urile CSS aprobate
2. `docs/DESIGN_TOKENS.md` - Lista completă de design tokens
3. `docs/ONBOARDING_CSS.md` - Quick start pentru CSS system

---

## Comenzi Utile

```bash
# Pornește mediul de dezvoltare
./start-prod.sh

# Verifică modificările vizual
# Navighează la http://localhost:3000

# Găsește toate culorile hardcodate într-un fișier
grep -n "#[0-9a-fA-F]\{6\}" src/modules/data-entry/views/receipts/ReceiptsListView.vue

# Găsește toate utilizările :deep()
grep -rn ":deep(" src/modules/

# Verifică că nu ai introdus noi hardcodate colors
grep -rn "#[0-9a-fA-F]\{6\}" src/modules/ --include="*.vue" | wc -l
```

---

## Note pentru Sesiunea Următoare

1. **Nu modifica logica JavaScript** - doar CSS/stiluri
2. **Testează pe mobil după fiecare fișier** - folosește Playwright sau DevTools
3. **Commitează incremental** - un fișier per commit pentru ușurință la review
4. **Verifică dark mode** dacă există - design tokens sunt compatibile

---

## Estimare Efort

| Prioritate | Fișiere | Corecții | Testare Playwright | Total |
|------------|---------|----------|-------------------|-------|
| P1 - Critică | 3 fișiere | ~2-3 ore | ~30 min | ~3 ore |
| P2 - Medie | 3 fișiere | ~1-2 ore | ~20 min | ~2 ore |
| P3 - Joasă | 5+ fișiere | ~2-3 ore | ~30 min | ~3 ore |
| **TOTAL** | ~11 fișiere | ~5-8 ore | ~1.5 ore | **~7-10 ore** |

---

## Quick Start pentru Sesiunea Următoare

```bash
# 1. Citește acest document
cat .claude/sessions/2025-01-06_frontend-style-audit.md

# 2. Pornește mediul
./start-prod.sh

# 3. Începe cu primul fișier din P1
# Fișier: src/modules/data-entry/views/receipts/ReceiptsListView.vue

# 4. După corecții, testează cu Playwright MCP
# - Navigare: http://localhost:3000/data-entry
# - Screenshot desktop (1920x1080)
# - Screenshot mobile (375x812)
# - Compară cu before screenshots din .playwright-mcp/

# 5. Commit incremental
git add src/modules/data-entry/views/receipts/ReceiptsListView.vue
git commit -m "refactor(css): Replace hardcoded colors with design tokens in ReceiptsListView"
```

---

## Fișiere Relevante

```
.claude/sessions/2025-01-06_frontend-style-audit.md  # Acest document
.playwright-mcp/                                      # Screenshot-uri BEFORE
docs/CSS_PATTERNS.md                                  # Pattern-uri CSS aprobate
docs/DESIGN_TOKENS.md                                 # Design tokens disponibile
src/assets/css/vendor/                               # Locație pentru :deep() overrides
```

---

**Creat de:** Claude Code (Opus 4.5)
**Data:** 2025-01-06
**Pentru:** Handover către sesiune nouă