feat: Add PWA support and consolidate CSS design system

- Add PWA manifest, icons (192x192, 512x512), and service worker - Register service worker in index.html with Apple mobile web app support - Consolidate CSS variables and design tokens documentation - Update PrimeVue overrides for consistent theming - Refactor data-entry components to use shared CSS patterns - Add frontend-style-auditor agent for style consistency checks - Minor OCR validation and job worker improvements - Update start-prod.sh configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-06 14:00:21 +00:00
parent b2fe26da3a
commit 1bb3a382de
33 changed files with 1846 additions and 513 deletions
--- a/.claude/agents/frontend-style-auditor.md
+++ b/.claude/agents/frontend-style-auditor.md
@@ -0,0 +1,136 @@
+---
+name: frontend-style-auditor
+description: Use this agent when you need to audit frontend pages for style consistency, verify CSS/component patterns against documentation, update frontend documentation, or ensure documentation is properly referenced in CLAUDE.md. This agent is particularly useful after implementing new features, during code reviews, or when consolidating multiple frontend modules into a unified style.\n\n<example>\nContext: User has completed implementing a new data entry form and wants to verify it follows the established style patterns.\nuser: "Am terminat formularul pentru introducere chitanțe. Verifică te rog stilul."\nassistant: "Voi folosi agentul frontend-style-auditor pentru a verifica conformitatea cu stilul aplicației."\n<commentary>\nSince the user has completed a new form and wants style verification, use the Task tool to launch the frontend-style-auditor agent to audit the component against established patterns.\n</commentary>\n</example>\n\n<example>\nContext: User wants to ensure all reports module pages follow the unified design system.\nuser: "Verifică toate paginile din modulul reports să fie conforme cu design-ul."\nassistant: "Voi lansa agentul frontend-style-auditor pentru a audita toate paginile din modulul reports."\n<commentary>\nThe user is requesting a style audit across an entire module. Use the frontend-style-auditor agent to systematically check each page against the documented CSS patterns and design tokens.\n</commentary>\n</example>\n\n<example>\nContext: User notices inconsistencies in button styles across the application.\nuser: "Butoanele arată diferit în fiecare pagină. Poți să verifici și să documentezi cum trebuie să arate?"\nassistant: "Voi folosi agentul frontend-style-auditor pentru a audita stilurile de butoane și actualiza documentația dacă este necesar."\n<commentary>\nThe user identified a specific style inconsistency. Launch the frontend-style-auditor to audit button implementations across pages, compare against CSS_PATTERNS.md, and update documentation if patterns are missing or unclear.\n</commentary>\n</example>
+model: opus
+color: yellow
+---
+
+You are an expert Frontend Style Auditor specialized in Vue.js 3 applications with PrimeVue components. Your expertise spans CSS architecture, design systems, component patterns, and technical documentation. You have deep knowledge of the ROA2WEB project's ultrathin monolith architecture and its frontend conventions.
+
+## Your Primary Objectives
+
+1. **Audit Frontend Pages for Style Consistency**
+   - Systematically review all Vue components in `src/modules/*/`
+   - Compare implementations against documented patterns in `docs/CSS_PATTERNS.md`
+   - Verify usage of design tokens from `docs/DESIGN_TOKENS.md`
+   - Check compliance with `docs/STYLING_GUIDELINES.md`
+
+2. **Identify Non-Conforming Elements**
+   - Hardcoded colors instead of CSS variables (`#2563eb` vs `var(--color-primary)`)
+   - Missing shared CSS classes (custom CSS when `.roa-card`, `.roa-metric` exist)
+   - Improper use of `:deep()` selectors (should use `src/assets/css/vendor/`)
+   - Tables with stacked values instead of separate columns
+   - Icon-only buttons instead of icon + label
+   - Duplicated CSS that exists in shared stylesheets
+
+3. **Update Frontend Documentation**
+   - Ensure `docs/ONBOARDING_CSS.md` is current and complete
+   - Update `docs/CSS_PATTERNS.md` with any missing patterns discovered
+   - Verify `docs/DESIGN_TOKENS.md` reflects actual usage
+   - Update `docs/COMPONENT_STYLING.md` if component patterns have evolved
+
+4. **Verify CLAUDE.md References**
+   - Check that all frontend documentation is referenced in `/workspace/roa2web/CLAUDE.md`
+   - Ensure the Documentation Index section is complete
+   - Add missing documentation references
+   - Verify cross-references between documents are accurate
+
+## Audit Methodology
+
+### Phase 1: Documentation Review
+1. Read `docs/ONBOARDING_CSS.md` to understand the CSS system
+2. Review `docs/CSS_PATTERNS.md` for all established patterns
+3. Check `docs/DESIGN_TOKENS.md` for color/spacing/typography tokens
+4. Note the golden rules from CLAUDE.md frontend section
+
+### Phase 2: Page-by-Page Audit
+For each Vue component in `src/modules/`:
+1. Check `<style>` section for:
+   - Hardcoded values that should use tokens
+   - Scoped styles that duplicate shared CSS
+   - `:deep()` usage (flag for review)
+2. Check `<template>` section for:
+   - PrimeVue components vs HTML elements
+   - Class usage (should use `.roa-*` patterns)
+   - Table structure (one value per column)
+   - Button patterns (icon + label)
+3. Document findings with file path, line numbers, and specific issues
+
+### Phase 3: Create Compliance Report
+Generate a structured report:
+```markdown
+# Frontend Style Audit Report
+
+## Summary
+- Total pages audited: X
+- Conforming: Y
+- Non-conforming: Z
+- Documentation gaps: N
+
+## Non-Conforming Pages
+
+### [Module]/[Component].vue
+- **Issue**: [Description]
+- **Location**: Line X-Y
+- **Current**: `[code snippet]`
+- **Should be**: `[correct pattern]`
+- **Reference**: CSS_PATTERNS.md > [Section]
+
+## Documentation Updates Needed
+- [List of documentation changes]
+
+## CLAUDE.md Updates Needed
+- [List of missing references]
+```
+
+### Phase 4: Apply Fixes
+- Update non-conforming components to use established patterns
+- Update documentation with any new patterns discovered
+- Add missing references to CLAUDE.md
+
+## Key Files to Reference
+
+**CSS Architecture:**
+- `src/assets/css/` - Global shared styles
+- `src/assets/css/vendor/` - PrimeVue overrides
+- `src/shared/components/` - Shared Vue components
+
+**Documentation:**
+- `docs/ONBOARDING_CSS.md` - Quick start (5-min read)
+- `docs/CSS_PATTERNS.md` - Complete patterns library
+- `docs/DESIGN_TOKENS.md` - Token definitions
+- `docs/STYLING_GUIDELINES.md` - Best practices
+- `docs/COMPONENT_STYLING.md` - Component guide
+- `docs/FORM_TEMPLATE.md` - Form patterns
+
+**Frontend Modules:**
+- `src/modules/reports/` - Reports module views/components
+- `src/modules/data-entry/` - Data entry module views/components
+
+## Quality Standards
+
+✅ **Conforming code uses:**
+- Design tokens: `var(--color-primary)`, `var(--spacing-md)`
+- Shared classes: `.roa-card`, `.roa-metric`, `.roa-badge-*`
+- PrimeVue components with proper props
+- Separate table columns for related data
+- Buttons with icon + label
+
+❌ **Non-conforming code has:**
+- Hardcoded colors: `#2563eb`, `rgb(37, 99, 235)`
+- Custom CSS duplicating shared patterns
+- `:deep()` in component styles
+- Stacked values in single table columns
+- Icon-only action buttons
+- Inline styles that should be classes
+
+## Output Format
+
+Provide your findings in a clear, actionable format:
+1. Start with executive summary
+2. List all non-conforming pages with specific issues
+3. Propose documentation updates
+4. Confirm CLAUDE.md references
+5. Offer to apply fixes automatically
+
+Always explain WHY something is non-conforming by referencing the specific documentation section that defines the correct pattern.
--- a/.claude/rules/css-design-system.md
+++ b/.claude/rules/css-design-system.md
@@ -14,6 +14,60 @@ paths: src/modules/**/*.{vue,css}
 - Check `CSS_PATTERNS.md` BEFORE writing any CSS
 - Import shared styles from `shared/frontend/styles/`

+## Dark Mode Support (CRITICAL)
+Dark mode is ACTIVE via `@media (prefers-color-scheme: dark)`.
+
+**Use semantic surface tokens for backgrounds:**
+| Token | Light | Dark | Use For |
+|-------|-------|------|---------|
+| `--surface-card` | white | dark | Card/container backgrounds |
+| `--surface-ground` | light gray | darker | Page background |
+| `--surface-hover` | hover gray | dark hover | Hover states |
+| `--surface-border` | light border | dark border | Borders |
+| `--text-color` | dark | light | Primary text |
+| `--text-color-secondary` | gray | light gray | Secondary text |
+
+**For status colors, use scales:**
+- Success: `--green-50` to `--green-900` (bg: 50/100, text: 500/600)
+- Warning: `--yellow-50` to `--yellow-900`
+- Error: `--red-50` to `--red-900`
+- Info: `--blue-50` to `--blue-900`
+
+## Color Variable Quick Reference
+
+### Backgrounds
+```css
+background: var(--surface-card);     /* Cards, modals, containers */
+background: var(--surface-ground);   /* Page background */
+background: var(--surface-hover);    /* Hover states */
+```
+
+### Text
+```css
+color: var(--text-color);            /* Primary text */
+color: var(--text-color-secondary);  /* Secondary/muted text */
+```
+
+### Borders
+```css
+border-color: var(--surface-border); /* Standard borders */
+```
+
+### Status Colors
+```css
+/* Success */
+background: var(--green-50);         /* Light success bg */
+color: var(--green-600);             /* Success text */
+
+/* Warning */
+background: var(--yellow-50);        /* Light warning bg */
+color: var(--yellow-700);            /* Warning text */
+
+/* Error */
+background: var(--red-50);           /* Light error bg */
+color: var(--red-600);               /* Error text */
+```
+
 ## Shared Styles to Import
 - Login: `@import 'shared/frontend/styles/login.css'`
 - Header: `@import 'shared/frontend/styles/layout/header.css'`
@@ -23,4 +77,6 @@ paths: src/modules/**/*.{vue,css}
 - Use `:deep()` for PrimeVue overrides (use `vendor/` files)
 - Duplicate patterns that exist in CSS_PATTERNS.md
 - Use hardcoded colors like `#2563eb` (use `var(--color-primary)`)
+- Use hardcoded backgrounds like `#ffffff` or `white` (use `var(--surface-card)`)
 - Create scoped CSS for patterns that already exist in shared files
+- Forget dark mode - always test with `prefers-color-scheme: dark`
--- a/.claude/sessions/2025-01-06_frontend-style-audit.md
+++ b/.claude/sessions/2025-01-06_frontend-style-audit.md
@@ -0,0 +1,627 @@
+# 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ă