# PRD: Dashboard cu Solduri - Versiunea 2 (Corectă)

## 1. Introducere
Adăugare secțiune Solduri în Dashboard păstrând paginile originale cu grafice. Pe mobil, soldurile sunt prima pagină din swipe (grid 2x2), iar graficele sunt paginile 2-5 (ca în main). Pe desktop, două secțiuni separate: Solduri sus, Grafice jos.

## 2. Obiective

### Obiectiv Principal
- Prima pagină din swipe pe mobil = 4 carduri compacte cu solduri
- Paginile 2-5 din swipe = cardurile originale cu grafice (păstrate exact ca în main)

### Obiective Secundare
- Desktop: Secțiune Solduri + Secțiune Grafice (fără titluri vizibile)
- Eliminare MaturityAndDetailsCard de pe Dashboard
- Carduri solduri compacte cu expand pentru detalii

### Metrici de Succes
- Mobil: 5 pagini de swipe (Solduri + 4 grafice)
- Desktop: 2 secțiuni vizual separate
- Cardurile grafice rămân IDENTICE cu cele din main

## 3. User Stories

### US-2001: Creare componentă SolduriCompactCard (reutilizabilă)
**Ca** dezvoltator
**Vreau** o componentă card compactă pentru solduri
**Pentru că** o voi folosi în grid 2x2 pe mobil și desktop

**Acceptance Criteria:**
- [ ] Creează SolduriCompactCard.vue în src/modules/reports/components/solduri/
- [ ] Props: type (trezorerie|clienti|furnizori|tva), total, breakdown (object)
- [ ] Afișează: icon + label + valoare principală
- [ ] Click expandează/colapsează breakdown-ul (conturi, buckets)
- [ ] Folosește design tokens pentru culori și spațiere
- [ ] npm run typecheck passes

### US-2002: Grid 2x2 Solduri pentru prima pagină swipe pe mobil
**Ca** utilizator pe mobil
**Vreau** prima pagină din swipe să fie un grid 2x2 cu 4 carduri solduri
**Pentru că** văd toate soldurile dintr-o privire

**Acceptance Criteria:**
- [ ] Prima pagină din SwipeableCards conține un grid 2x2
- [ ] Ordinea: Trezorerie | Clienți / Furnizori | TVA
- [ ] Fiecare card e SolduriCompactCard cu props corecte
- [ ] Touch target minim 44x44px
- [ ] npm run typecheck passes
- [ ] Verify in browser mobil că prima pagină e grid-ul cu solduri

### US-2003: Păstrare carduri grafice originale pe paginile 2-5 mobil
**Ca** utilizator pe mobil
**Vreau** paginile 2-5 din swipe să fie cardurile cu grafice originale
**Pentru că** vreau să le văd individual cu toate detaliile

**Acceptance Criteria:**
- [ ] Pagina 2: TreasuryDualCard (exact ca în main)
- [ ] Pagina 3: CashFlowMetricCard (exact ca în main)
- [ ] Pagina 4: ClientiBalanceCard (exact ca în main)
- [ ] Pagina 5: FurnizoriBalanceCard (exact ca în main)
- [ ] SwipeableCards folosește totalCards=5 sau similar
- [ ] npm run typecheck passes
- [ ] Verify în browser că swipe funcționează între toate 5 paginile

### US-2004: Secțiune Solduri pe Desktop (grid 2x2 sau 4 în linie)
**Ca** utilizator pe desktop
**Vreau** să văd soldurile într-o secțiune separată sus
**Pentru că** sunt cele mai importante informații

**Acceptance Criteria:**
- [ ] Secțiune Solduri în partea de sus a Dashboard-ului
- [ ] Fără titlu vizibil (doar layout)
- [ ] 4 SolduriCompactCard în grid responsive (2x2 sau 4 în linie pe ecran lat)
- [ ] Sub solduri: cardurile originale cu grafice
- [ ] npm run typecheck passes
- [ ] Verify în browser desktop că ambele secțiuni sunt vizibile

### US-2005: Eliminare MaturityAndDetailsCard de pe Dashboard
**Ca** utilizator
**Vreau** Dashboard-ul să nu mai aibă tabelul detaliat de scadențe
**Pentru că** există deja pagina Maturity Analysis separată

**Acceptance Criteria:**
- [ ] Șterge MaturityAndDetailsCard din DashboardView.vue
- [ ] Șterge div-ul .comparison-row
- [ ] Șterge importul componentei
- [ ] npm run typecheck passes
- [ ] Verify: Dashboard nu mai are tabel

### US-2006: Integrare date Solduri din dashboardStore
**Ca** dezvoltator
**Vreau** cardurile solduri să folosească datele existente din store
**Pentru că** nu vreau request-uri API duplicate

**Acceptance Criteria:**
- [ ] Trezorerie: dashboardStore.treasuryData (casa.total, banca.total, items)
- [ ] Clienți: dashboardStore.netBalanceData.clienti_total + breakdown
- [ ] Furnizori: dashboardStore.netBalanceData.furnizori_total + breakdown
- [ ] TVA: dashboardStore (calculat din summary sau endpoint)
- [ ] npm run typecheck passes

### US-2007: Indicatori vizuali pentru starea financiară
**Ca** utilizator
**Vreau** să văd indicatori de avertizare pe carduri
**Pentru că** identific rapid problemele

**Acceptance Criteria:**
- [ ] Indicator roșu pe Clienți/Furnizori dacă restanță > 20%
- [ ] TVA roșu dacă e de plată, verde dacă e de recuperat
- [ ] Folosește var(--red-500), var(--green-500)
- [ ] npm run typecheck passes

### US-2008: Buton Refresh în header Dashboard
**Ca** utilizator
**Vreau** un buton de refresh în header
**Pentru că** vreau să actualizez manual datele

**Acceptance Criteria:**
- [ ] Pe mobil: icon refresh în MobileTopBar actions
- [ ] Pe desktop: buton lângă titlu Dashboard
- [ ] Animație spinner în timpul încărcării
- [ ] npm run typecheck passes

## 4. Cerințe Funcționale
1. [REQ-001] Cardurile grafice rămân IDENTICE cu cele din main
2. [REQ-002] Swipe pe mobil funcționează fluid între toate 5 paginile
3. [REQ-003] Desktop layout responsive (secțiunile se adaptează la lățime)
4. [REQ-004] Funcționează în dark mode

## 5. Non-Goals (Ce NU facem)
- NU modificăm cardurile cu grafice (TreasuryDualCard, etc.)
- NU adăugăm funcționalități noi de analiză
- NU schimbăm API-ul backend
- NU facem KPIStrip (bandă compactă) - facem carduri individuale

## 6. Layout Vizual

### MOBIL (5 pagini swipe):
```
[Pagina 1 - Solduri Grid 2x2]
┌──────────┬──────────┐
│TREZORERIE│ CLIENȚI  │
│ 150.000  │  89.000  │
│[expand]  │[expand]  │
├──────────┼──────────┤
│FURNIZORI │   TVA    │
│  45.000  │ +15.000  │
│[expand]  │[expand]  │
└──────────┴──────────┘
    • ○ ○ ○ ○  (dot indicator)

[Pagina 2] TreasuryDualCard (grafice)
[Pagina 3] CashFlowMetricCard (grafice)
[Pagina 4] ClientiBalanceCard (grafice)
[Pagina 5] FurnizoriBalanceCard (grafice)
```

### DESKTOP:
```
┌─────────────────────────────────────────────────────────────┐
│ Dashboard                                    [↻ Refresh]    │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐             │
│ │TREZORERIE│ │ CLIENȚI │ │FURNIZORI│ │   TVA   │  ← Solduri │
│ │ 150.000 │ │ 89.000 ●│ │ 45.000  │ │+15.000  │             │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘             │
├─────────────────────────────────────────────────────────────┤
│ ┌───────────────────┐ ┌───────────────────┐                 │
│ │ Treasury Trend    │ │ Cash Flow         │  ← Grafice     │
│ │ [sparkline]       │ │ [sparkline]       │                 │
│ └───────────────────┘ └───────────────────┘                 │
│ ┌───────────────────┐ ┌───────────────────┐                 │
│ │ Clienți Balance   │ │ Furnizori Balance │                 │
│ │ [sparkline]       │ │ [sparkline]       │                 │
│ └───────────────────┘ └───────────────────┘                 │
└─────────────────────────────────────────────────────────────┘
```