roa2web-service-auto/tasks/prd-dashboard-desktop-cleanup.md

# PRD: Dashboard Desktop Cleanup - Eliminare Duplicate și Reorganizare Layout

## 1. Introducere

Dashboard-ul desktop afișează în prezent carduri duplicate pentru Trezorerie, Clienți și Furnizori. Există `SolduriCompactCard` (în secțiunea `desktop-solduri-section`) și `CollapsibleCard` cu grafice (în secțiunea `metrics-row`). Scopul este eliminarea duplicatelor, păstrând doar `CollapsibleCard`-urile cu grafice, dar reorganizate astfel încât textul cu valorile să apară ÎNAINTE de grafice pentru vizibilitate mai bună.

## 2. Obiective

### Obiectiv Principal
- Eliminarea cardurilor duplicate de pe dashboard-ul desktop, păstrând doar `CollapsibleCard`-urile cu conținut reorganizat (text → grafice)

### Obiective Secundare
- Îmbunătățirea vizibilității valorilor principale (afișate înaintea graficelor)
- Menținerea unui layout compact și informativ
- Păstrarea funcționalității mobile neschimbată

### Metrici de Succes
- Zero carduri duplicate pe dashboard desktop
- Valorile principale vizibile fără scroll
- Același număr de informații disponibile ca înainte

## 3. User Stories

### US-001: Eliminare SolduriCompactCard de pe Desktop
**Ca** utilizator desktop
**Vreau** să văd doar un set de carduri pentru fiecare metric
**Pentru că** duplicatele creează confuzie și ocupă spațiu inutil

**Acceptance Criteria:**
- [ ] Secțiunea `desktop-solduri-section` este eliminată din `DashboardView.vue` pentru desktop
- [ ] Rămân doar cele 4 `CollapsibleCard`-uri: Trezorerie, Cash Flow, Clienți, Furnizori
- [ ] Layout-ul grid 2x2 din `metrics-row` rămâne neschimbat
- [ ] npm run typecheck passes
- [ ] Verify in browser că pe desktop nu mai există duplicate

### US-002: Eliminare Icoane din Header-ul CollapsibleCard
**Ca** utilizator
**Vreau** un header curat, fără icoane/emoji-uri
**Pentru că** vreau un design minimalist și profesional

**Acceptance Criteria:**
- [ ] Prop-ul `icon` nu mai este transmis către `CollapsibleCard` în `DashboardView.vue`
- [ ] Header-ul afișează doar: "Label     Valoare ▼" (ex: "Trezorerie     125.500 RON ▼")
- [ ] npm run typecheck passes
- [ ] Verify in browser că header-urile nu au icoane

### US-003: Reorganizare TreasuryDualCard - Text Înainte de Grafice
**Ca** utilizator
**Vreau** să văd valorile Casa/Bancă și breakdown-ul ÎNAINTE de grafice
**Pentru că** textul cu valorile este mai important decât graficele

**Acceptance Criteria:**
- [ ] În `TreasuryDualCard.vue`, secțiunea `breakdown-section` se mută ÎNAINTE de `sparkline-dual-container`
- [ ] Ordinea în body devine: values-section → breakdown-section → sparkline-dual-container
- [ ] Breakdown-ul Casa/Bancă cu sub-conturi rămâne expandabil
- [ ] Graficele apar la sfârșit
- [ ] npm run typecheck passes
- [ ] Verify in browser că textul apare înainte de grafice

### US-004: Reorganizare ClientiBalanceCard - Text Înainte de Grafice
**Ca** utilizator
**Vreau** să văd breakdown-ul (În termen/Restant) ÎNAINTE de grafic
**Pentru că** valorile text sunt prioritare față de grafic

**Acceptance Criteria:**
- [ ] În `ClientiBalanceCard.vue`, secțiunea `breakdown-section` se mută ÎNAINTE de `metric-sparkline`
- [ ] Ordinea în body devine: value-section → breakdown-section → metric-sparkline
- [ ] Breakdown-ul În termen/Restant cu perioade rămâne expandabil
- [ ] Graficul apare la sfârșit
- [ ] npm run typecheck passes
- [ ] Verify in browser că textul apare înainte de grafic

### US-005: Reorganizare FurnizoriBalanceCard - Text Înainte de Grafice
**Ca** utilizator
**Vreau** să văd breakdown-ul (În termen/Restant) ÎNAINTE de grafic
**Pentru că** consistență cu celelalte carduri

**Acceptance Criteria:**
- [ ] În `FurnizoriBalanceCard.vue`, secțiunea `breakdown-section` se mută ÎNAINTE de `metric-sparkline`
- [ ] Ordinea în body devine: value-section → breakdown-section → metric-sparkline
- [ ] Breakdown-ul În termen/Restant cu perioade rămâne expandabil
- [ ] Graficul apare la sfârșit
- [ ] npm run typecheck passes
- [ ] Verify in browser că textul apare înainte de grafic

### US-006: Păstrare Layout Mobile Neschimbat
**Ca** utilizator mobile
**Vreau** ca experiența pe mobil să rămână neschimbată
**Pentru că** layout-ul mobile este deja optimizat

**Acceptance Criteria:**
- [ ] `SwipeableCards` pe mobile rămâne identic
- [ ] Prima pagină cu `solduri-grid-2x2` (4x `SolduriCompactCard`) rămâne pe mobile
- [ ] Paginile 2-5 cu carduri grafice rămân neschimbate pe mobile
- [ ] npm run typecheck passes
- [ ] Verify in browser (mobile viewport) că experiența nu s-a schimbat

### US-007: Grafice Colapsabile și Colapsate Implicit
**Ca** utilizator desktop
**Vreau** să pot expanda/colasa graficele separat
**Pentru că** vreau să văd rapid valorile fără să scrollez peste grafice

**Acceptance Criteria:**
- [ ] Secțiunea cu grafice are un header clickabil: "Grafice evoluție ▶" (collapsed) / "▼" (expanded)
- [ ] Graficele sunt COLAPSATE implicit (`chartsExpanded = false`)
- [ ] La click pe header, graficele se expandează la dimensiunea lor completă (150px height fiecare)
- [ ] Se folosește `v-show` pentru toggle (păstrează Chart.js instances în memorie)
- [ ] Header-ul graficelor are styling consistent cu breakdown headers (font, culoare, spacing)
- [ ] Implementat în: `TreasuryDualCard.vue`, `ClientiBalanceCard.vue`, `FurnizoriBalanceCard.vue`
- [ ] `CashFlowMetricCard.vue` primește același treatment (grafic colapsabil)
- [ ] npm run typecheck passes
- [ ] Verify in browser că graficele sunt collapsed implicit și se expandează corect la click

## 4. Cerințe Funcționale

1. [REQ-001] Pe desktop (`!isMobile`), secțiunea `desktop-solduri-section` nu trebuie să se mai afișeze
2. [REQ-002] Prop-ul `icon` trebuie eliminat din toate utilizările `CollapsibleCard` în `DashboardView.vue`
3. [REQ-003] În cardurile cu grafice (Treasury, Clienti, Furnizori, CashFlow), ordinea secțiunilor trebuie să fie: Header → Text/Breakdown → Grafice (colapsabile)
4. [REQ-004] Breakdown-urile (Casa/Bancă, În termen/Restant) rămân expandabile cu click
5. [REQ-005] Pe mobile, nimic nu se schimbă - condiția `isMobile` protejează codul existent
6. [REQ-006] Graficele din toate cardurile trebuie să fie colapsabile și COLAPSATE implicit, cu header clickabil pentru expand

## 5. Non-Goals (Ce NU facem)

- NU modificăm componentele `SolduriCompactCard` - doar le ascundem pe desktop
- NU schimbăm layout-ul mobile
- NU modificăm stilul/dimensiunea graficelor - doar adăugăm collapse toggle
- NU modificăm `CollapsibleCard.vue` component-ul shared
- NU modificăm logica de date/calcul din carduri

## 6. Considerații Tehnice

### Stack/Tehnologii
- Vue 3 Composition API
- Chart.js pentru grafice
- CSS cu design tokens existente

### Patterns de Urmat
- Utilizare `v-if="!isMobile"` pentru condiții desktop
- Utilizare `v-show` pentru grafice colapsabile (păstrează Chart.js instances)
- Design tokens din `DESIGN_TOKENS.md`
- BEM naming convention pentru CSS

### Fișiere Afectate
- `src/modules/reports/views/DashboardView.vue` - eliminare secțiune și icoane
- `src/modules/reports/components/dashboard/cards/TreasuryDualCard.vue` - reordonare secțiuni + grafice colapsabile
- `src/modules/reports/components/dashboard/cards/ClientiBalanceCard.vue` - reordonare secțiuni + grafice colapsabile
- `src/modules/reports/components/dashboard/cards/FurnizoriBalanceCard.vue` - reordonare secțiuni + grafice colapsabile
- `src/modules/reports/components/dashboard/cards/CashFlowMetricCard.vue` - grafice colapsabile

### Dependențe
- Nicio dependență nouă necesară

### Riscuri Tehnice
- ~~Chart.js poate avea probleme dacă canvas-ul nu este vizibil la render~~ → Rezolvat cu `v-show` care păstrează DOM-ul
- Chart.js instances rămân în memorie când graficele sunt colapsate - acceptabil pentru 4 carduri

## 7. Considerații UI/UX

### Layout Nou (Desktop) - Stare Implicită (Collapsed)
```
┌─────────────────────────────────────────────┐
│ Trezorerie                     125.500 RON ▼│  ← Header card (fără icoane)
├─────────────────────────────────────────────┤
│ Casa                            35.500 RON  │  ← Valori principale (vizibile)
│ Bancă                           90.000 RON  │
│ ▶ Casa breakdown (click expand)             │  ← Detalii conturi (expandabile)
│ ▶ Bancă breakdown (click expand)            │
├─────────────────────────────────────────────┤
│ ▶ Grafice evoluție                          │  ← COLLAPSED IMPLICIT
└─────────────────────────────────────────────┘
```

### Layout Nou (Desktop) - Grafice Expandate
```
┌─────────────────────────────────────────────┐
│ Trezorerie                     125.500 RON ▼│
├─────────────────────────────────────────────┤
│ Casa                            35.500 RON  │
│ Bancă                           90.000 RON  │
│ ▶ Casa breakdown                            │
│ ▶ Bancă breakdown                           │
├─────────────────────────────────────────────┤
│ ▼ Grafice evoluție                          │  ← EXPANDED (click toggle)
│ ┌─────────────────────────────────────────┐ │
│ │ 📈 [Grafic Casa - 150px height]         │ │  ← Full size charts
│ │ 📈 [Grafic Bancă - 150px height]        │ │
│ └─────────────────────────────────────────┘ │
└─────────────────────────────────────────────┘
```

### Dark Mode
- Toate componentele folosesc deja design tokens compatibile dark mode
- Nu necesită modificări suplimentare

### Accesibilitate
- Header-ul CollapsibleCard are deja `role="button"` și `tabindex="0"`
- Breakdown-urile au keyboard support pentru expand/collapse

## 8. Success Metrics

- **Eliminare duplicate**: 100% (3 carduri duplicate eliminate)
- **Timp de scanare**: valorile principale vizibile în primele 2 secunde
- **Funcționalitate păstrată**: 100% (aceleași date disponibile, doar reorganizate)

## 9. Open Questions

- [x] Confirmat: Se elimină complet `desktop-solduri-section` pe desktop
- [x] Confirmat: Header fără icoane
- [x] Confirmat: Text/breakdown înainte de grafice
- [x] Confirmat: Layout grid 2x2 rămâne
- [x] Confirmat: Mobile neschimbat
- [x] Confirmat: Grafice colapsabile și colapsate implicit (cu `v-show`)