romfast/roa2web-service-auto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fcf272297414cdf7649cddab4b2b3b86a4193497
roa2web-service-auto/tasks/prd-dashboard-desktop-cleanup.md
Claude Agent 1b9ebf1d8f 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

11 KiB
Raw Blame History

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

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