feat(dashboard-solduri): Complete dashboard solduri v2 implementation

## Features - US-2001: Create reusable SolduriCompactCard component - US-2004: Solduri section on Desktop (top, without title) - US-2005: Remove MaturityAndDetailsCard from Dashboard - US-2006: Integrate Solduri data from dashboardStore - US-2007: Visual indicators for financial status - US-2008: Refresh button in Dashboard header ## UI Improvements - Desktop: 2x2 grid for solduri cards with larger breakdown fonts - Mobile: Single column layout with auto height - Theme persistence: synchronous initialization to prevent flash - Unified "Bonuri" icon (pi-shopping-bag) across all navigation ## Files Changed - New: SolduriCompactCard.vue - expandable cards for Trezorerie/Clienți/Furnizori/TVA - Modified: DashboardView.vue - integrated solduri section - Modified: index.html - theme init script - Modified: Mobile navigation components - icon consistency Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-19 08:37:10 +00:00
parent eedc2bca67
commit 15327687f4
9 changed files with 909 additions and 631 deletions
--- a/tasks/prd-dashboard-solduri-v2.md
+++ b/tasks/prd-dashboard-solduri-v2.md
@@ -0,0 +1,176 @@
+# 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]       │                 │
+│ └───────────────────┘ └───────────────────┘                 │
+└─────────────────────────────────────────────────────────────┘
+```