feat(dashboard): Complete dashboard desktop cleanup and improvements

User Stories Completed: - US-001: Eliminare SolduriCompactCard de pe Desktop - US-002: Eliminare Icoane din Header-ul CollapsibleCard - US-003: Reorganizare TreasuryDualCard - Text Înainte de Grafice - US-004: Reorganizare ClientiBalanceCard - Text Înainte de Grafice - US-005: Reorganizare FurnizoriBalanceCard - Text Înainte de Grafice - US-006: Grafice Colapsabile în TreasuryDualCard - US-007: Grafice Colapsabile în ClientiBalanceCard - US-008: Grafice Colapsabile în FurnizoriBalanceCard - US-009: Grafice Colapsabile în CashFlowMetricCard Additional Improvements: - Add cache metadata display (CacheFooter component) for all dashboard cards - Add @cached decorators to get_monthly_flows and get_indicators_with_sparklines - Fix financial indicators calculations and sparkline sync - Add state reset on company change to prevent stale data - New shared components: CacheFooter.vue, authRedirect.js - Enhanced FinancialIndicatorsCard with sparklines and period selection Squashed from branch: ralph/dashboard-desktop-cleanup (11 commits) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-22 07:27:27 +00:00
parent 69683b2d65
commit 1b9ebf1d8f
23 changed files with 4034 additions and 1396 deletions
--- a/tasks/prd-dashboard-desktop-cleanup.md
+++ b/tasks/prd-dashboard-desktop-cleanup.md
@@ -0,0 +1,213 @@
+# 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`)