romfast/roa2web-service-auto

Files

Claude Agent 15327687f4 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

8.3 KiB

Raw Blame History

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

[REQ-001] Cardurile grafice rămân IDENTICE cu cele din main
[REQ-002] Swipe pe mobil funcționează fluid între toate 5 paginile
[REQ-003] Desktop layout responsive (secțiunile se adaptează la lățime)
[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]       │                 │
│ └───────────────────┘ └───────────────────┘                 │
└─────────────────────────────────────────────────────────────┘