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>
This commit is contained in:
Claude Agent
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"projectName": "ui-fixes-phase6",
|
||||
"branchName": "ralph/ui-fixes-phase6",
|
||||
"description": "UI/UX Fixes Phase 6 - Menu Consistency & Mobile Improvements + Phase 5 Regressions Fix",
|
||||
"projectName": "dashboard-solduri-v2",
|
||||
"branchName": "ralph/dashboard-solduri",
|
||||
"description": "Adăugare secțiune Solduri în Dashboard: mobil = prima pagină swipe (grid 2x2), grafice = paginile 2-5 (păstrate ca în main). Desktop = Secțiune Solduri + Secțiune Grafice, fără titluri.",
|
||||
"cssRules": {
|
||||
"documentation": [
|
||||
"docs/ONBOARDING_CSS.md",
|
||||
@@ -11,213 +11,147 @@
|
||||
],
|
||||
"goldenRules": [
|
||||
"Folosește DOAR design tokens - NICIODATĂ valori hardcodate",
|
||||
"Verifică CSS_PATTERNS.md înainte de a scrie CSS nou",
|
||||
"NU modifica cardurile grafice originale (TreasuryDualCard, etc.) - rămân IDENTICE",
|
||||
"Testează în AMBELE teme (light + dark mode)",
|
||||
"NICIODATĂ :deep() în componente (PrimeVue → vendor/)",
|
||||
"Mobile: toate paginile folosesc MobileTopBar + MobileBottomNav",
|
||||
"Mobile: filtrele se pun în BottomSheet, NU inline",
|
||||
"Mobile: v-if='isMobile' pentru componente mobile-only",
|
||||
"Desktop: v-if='!isMobile' pentru componente desktop-only"
|
||||
],
|
||||
"mobileLayoutTokens": {
|
||||
"topBarHeight": "56px",
|
||||
"bottomNavHeight": "56px",
|
||||
"fabSize": "56px",
|
||||
"fabBottomOffset": "72px",
|
||||
"touchTargetMin": "48px"
|
||||
}
|
||||
"Mobile: touch targets minim 44x44px",
|
||||
"Mobile: prima pagină swipe = grid 2x2 solduri",
|
||||
"Mobile: paginile 2-5 swipe = cardurile grafice ORIGINALE din main"
|
||||
]
|
||||
},
|
||||
"referenceFiles": {
|
||||
"designReference": "src/modules/reports/views/InvoicesView.vue",
|
||||
"mobileComponents": [
|
||||
"src/shared/components/mobile/MobileTopBar.vue",
|
||||
"src/shared/components/mobile/MobileDrawerMenu.vue",
|
||||
"src/shared/components/mobile/MobileBottomNav.vue",
|
||||
"src/shared/components/mobile/BottomSheet.vue",
|
||||
"src/shared/components/mobile/MobileSelectionFooter.vue"
|
||||
]
|
||||
"dashboardView": "src/modules/reports/views/DashboardView.vue",
|
||||
"swipeableCards": "src/shared/components/mobile/SwipeableCards.vue",
|
||||
"graficcards": [
|
||||
"src/modules/reports/components/dashboard/cards/TreasuryDualCard.vue",
|
||||
"src/modules/reports/components/dashboard/cards/CashFlowMetricCard.vue",
|
||||
"src/modules/reports/components/dashboard/cards/ClientiBalanceCard.vue",
|
||||
"src/modules/reports/components/dashboard/cards/FurnizoriBalanceCard.vue"
|
||||
],
|
||||
"backupComponents": "/tmp/dashboard-backup/"
|
||||
},
|
||||
"userStories": [
|
||||
{
|
||||
"id": "US-601",
|
||||
"title": "Adăugare Secțiune Analize în Sidebar Desktop",
|
||||
"description": "Ca utilizator desktop, vreau să văd secțiunea Analize în sidebar-ul din stânga",
|
||||
"id": "US-2001",
|
||||
"title": "Creare componentă SolduriCompactCard reutilizabilă",
|
||||
"description": "Ca dezvoltator, vreau o componentă card compactă pentru solduri pentru că o voi folosi în grid 2x2 pe mobil și desktop",
|
||||
"priority": 1,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6"
|
||||
},
|
||||
{
|
||||
"id": "US-602",
|
||||
"title": "Tab-uri Clienți/Furnizori în Pagina Scadențe",
|
||||
"description": "Ca utilizator, vreau să pot comuta între Clienți și Furnizori folosind tab-uri",
|
||||
"priority": 2,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6"
|
||||
},
|
||||
{
|
||||
"id": "US-603",
|
||||
"title": "Implementare Pagină Facturi Detaliate",
|
||||
"description": "Ca utilizator, vreau să văd facturi detaliate când accesez Analize > Facturi Detaliate",
|
||||
"priority": 3,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6"
|
||||
},
|
||||
{
|
||||
"id": "US-604",
|
||||
"title": "Toggle Temă cu 3 Stări în Meniul Mobil",
|
||||
"description": "Ca utilizator mobil, vreau selectorul de temă să fie un singur buton toggle cu 3 stări",
|
||||
"priority": 4,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6"
|
||||
},
|
||||
{
|
||||
"id": "US-605",
|
||||
"title": "Companie/Perioadă Colapsabile în Meniul Mobil",
|
||||
"description": "Ca utilizator mobil, vreau secțiunile Companie și Perioadă din meniu să fie colapsabile",
|
||||
"priority": 5,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6 - NOTE: Reverted in US-703"
|
||||
},
|
||||
{
|
||||
"id": "US-606",
|
||||
"title": "Layout Scrollabil Unificat în Meniul Mobil",
|
||||
"description": "Ca utilizator mobil, vreau întregul meniu hamburger să fie într-o singură zonă scrollabilă",
|
||||
"priority": 6,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6"
|
||||
},
|
||||
{
|
||||
"id": "US-607",
|
||||
"title": "Secțiune Utilizator Compactă în Meniul Mobil",
|
||||
"description": "Ca utilizator mobil, vreau secțiunea de utilizator să fie mai compactă",
|
||||
"priority": 7,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6"
|
||||
},
|
||||
{
|
||||
"id": "US-608",
|
||||
"title": "Fix Buton FAB SpeedDial în Lista Bonuri",
|
||||
"description": "Ca utilizator mobil, vreau butonul + din lista bonuri să afișeze un meniu SpeedDial",
|
||||
"priority": 8,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6 - BUT REGRESSION: SpeedDial not imported!"
|
||||
},
|
||||
{
|
||||
"id": "US-609",
|
||||
"title": "Buton Resetează pe Toate Paginile cu Filtre Mobil",
|
||||
"description": "Ca utilizator mobil, vreau butonul Resetează să apară pe toate paginile care au Filtrează",
|
||||
"priority": 9,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6"
|
||||
},
|
||||
{
|
||||
"id": "US-610",
|
||||
"title": "Eliminare Spațiu Gol Deasupra Tabelelor",
|
||||
"description": "Ca utilizator, vreau să nu existe spațiu gol excesiv între filtre și tabele",
|
||||
"priority": 10,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6"
|
||||
},
|
||||
{
|
||||
"id": "US-701",
|
||||
"title": "Reparare SpeedDial FAB pe Lista Bonuri",
|
||||
"description": "Ca utilizator pe mobil, vreau să văd butonul + în dreapta jos și să pot crea bonuri noi, pentru că este metoda principală de adăugare bonuri pe mobil",
|
||||
"priority": 11,
|
||||
"acceptanceCriteria": [
|
||||
"SpeedDial este importat corect din 'primevue/speeddial' în ReceiptsListView.vue",
|
||||
"Butonul + apare în dreapta jos pe mobil (când nu este în selection mode)",
|
||||
"Click pe + deschide opțiunile: Bon Nou Manual, Scanare OCR, Upload în Masă",
|
||||
"npm run build passes fără warnings legate de SpeedDial",
|
||||
"Verify in browser mobile viewport: FAB vizibil în dreapta jos, click deschide 3 opțiuni"
|
||||
"Creează SolduriCompactCard.vue în src/modules/reports/components/solduri/",
|
||||
"Props: type (trezorerie|clienti|furnizori|tva), total, breakdown (object), casaTotal, bancaTotal (pentru trezorerie)",
|
||||
"Afișează: icon + label (uppercase) + valoare principală formatată românesc",
|
||||
"Click pe card expandează/colapsează breakdown-ul (conturi pentru trezorerie, buckets pentru clienți/furnizori)",
|
||||
"Folosește design tokens: var(--space-md), var(--text-lg), var(--surface-card)",
|
||||
"npm run typecheck passes"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 1"
|
||||
},
|
||||
{
|
||||
"id": "US-702",
|
||||
"title": "Verificare Meniu Acțiuni Per Bon",
|
||||
"description": "Ca utilizator, vreau să pot accesa meniul de acțiuni (...) pentru fiecare bon, pentru că trebuie să pot edita, șterge, valida bonurile individual",
|
||||
"priority": 12,
|
||||
"id": "US-2002",
|
||||
"title": "Grid 2x2 Solduri pentru prima pagină swipe pe mobil",
|
||||
"description": "Ca utilizator pe mobil, vreau prima pagină din swipe să fie un grid 2x2 cu 4 carduri solduri",
|
||||
"priority": 2,
|
||||
"acceptanceCriteria": [
|
||||
"Butonul ... pe fiecare bon deschide meniul popup cu opțiuni",
|
||||
"Meniul conține opțiunile corecte în funcție de status (Edit, View, Delete, Approve)",
|
||||
"Meniul se poziționează corect pe mobil și desktop (nu iese din viewport)",
|
||||
"npm run build passes"
|
||||
"Modifică SwipeableCards în DashboardView să aibă 5 pagini (sau folosește totalCards=5)",
|
||||
"Prima pagină (card-0 sau echivalent) conține un div cu grid 2x2",
|
||||
"Grid-ul conține 4 SolduriCompactCard: Trezorerie | Clienți / Furnizori | TVA",
|
||||
"Fiecare card primește date din dashboardStore",
|
||||
"Touch target minim 44x44px pentru fiecare card",
|
||||
"npm run typecheck passes",
|
||||
"Verify in browser mobil că prima pagină e grid-ul cu 4 solduri compacte"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Verified in browser - Grid 2x2 shows correctly with 4 SolduriCompactCard on first swipe page"
|
||||
},
|
||||
{
|
||||
"id": "US-2003",
|
||||
"title": "Păstrare carduri grafice originale pe paginile 2-5 mobil",
|
||||
"description": "Ca utilizator pe mobil, vreau paginile 2-5 din swipe să fie cardurile cu grafice originale, exact ca în main",
|
||||
"priority": 3,
|
||||
"acceptanceCriteria": [
|
||||
"Pagina 2 (card-1): TreasuryDualCard cu EXACT aceleași props ca în main",
|
||||
"Pagina 3 (card-2): CashFlowMetricCard cu EXACT aceleași props ca în main",
|
||||
"Pagina 4 (card-3): ClientiBalanceCard cu EXACT aceleași props ca în main",
|
||||
"Pagina 5 (card-4): FurnizoriBalanceCard cu EXACT aceleași props ca în main",
|
||||
"NU modifica componentele grafice - doar le folosești în SwipeableCards",
|
||||
"npm run typecheck passes",
|
||||
"Verify în browser că swipe funcționează fluid între toate 5 paginile"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Verified - Pages 2-5 show original graph cards (TreasuryDualCard, CashFlowMetricCard, etc.). Swipe works fluid."
|
||||
},
|
||||
{
|
||||
"id": "US-2004",
|
||||
"title": "Secțiune Solduri pe Desktop (sus, fără titlu)",
|
||||
"description": "Ca utilizator pe desktop, vreau să văd soldurile într-o secțiune separată sus, fără titlu vizibil",
|
||||
"priority": 4,
|
||||
"acceptanceCriteria": [
|
||||
"Pe desktop (v-if !isMobile), adaugă o secțiune nouă cu clasa desktop-solduri-section",
|
||||
"Secțiunea conține 4 SolduriCompactCard în grid responsive (grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))",
|
||||
"Fără titlu sau header de secțiune - doar cardurile direct",
|
||||
"Sub această secțiune rămân cardurile grafice originale (metrics-row existent)",
|
||||
"npm run typecheck passes",
|
||||
"Verify în browser desktop că soldurile sunt sus, graficele jos"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 1"
|
||||
},
|
||||
{
|
||||
"id": "US-2005",
|
||||
"title": "Eliminare MaturityAndDetailsCard de pe Dashboard",
|
||||
"description": "Ca utilizator, vreau Dashboard-ul să nu mai aibă tabelul detaliat de scadențe (există pagina Maturity Analysis)",
|
||||
"priority": 5,
|
||||
"acceptanceCriteria": [
|
||||
"Șterge MaturityAndDetailsCard din template-ul DashboardView.vue",
|
||||
"Șterge div-ul .comparison-row care conținea cardul",
|
||||
"Șterge importul MaturityAndDetailsCard din script setup",
|
||||
"npm run typecheck passes",
|
||||
"Verify: Dashboard nu mai are tabel de analiză scadențe"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 2"
|
||||
},
|
||||
{
|
||||
"id": "US-703",
|
||||
"title": "Navigare Hamburger pe Paginile Analize",
|
||||
"description": "Ca utilizator pe mobil, vreau să văd meniul hamburger pe paginile Analize (nu săgeata înapoi), pentru că trebuie să pot accesa firma, perioada și navigarea din orice pagină",
|
||||
"priority": 13,
|
||||
"id": "US-2006",
|
||||
"title": "Integrare date Solduri din dashboardStore",
|
||||
"description": "Ca dezvoltator, vreau cardurile solduri să folosească datele existente din dashboardStore fără API calls noi",
|
||||
"priority": 6,
|
||||
"acceptanceCriteria": [
|
||||
"MaturityAnalysisView.vue: MobileTopBar folosește :show-menu='true' și @menu-click='showDrawer = true'",
|
||||
"DetailedInvoicesView.vue: MobileTopBar folosește :show-menu='true' și @menu-click='showDrawer = true'",
|
||||
"Ambele view-uri au MobileDrawerMenu component importat și configurat corect",
|
||||
"Click pe hamburger deschide MobileDrawerMenu cu firma, perioada, tema",
|
||||
"Pattern identic cu InvoicesView.vue (liniile 4-11, 33-42)",
|
||||
"npm run build passes"
|
||||
"SolduriCompactCard pentru Trezorerie: treasuryData.breakdown.casa.total + banca.total, breakdown items",
|
||||
"SolduriCompactCard pentru Clienți: netBalanceData.clienti_total, breakdown.clienti",
|
||||
"SolduriCompactCard pentru Furnizori: netBalanceData.furnizori_total, breakdown.furnizori",
|
||||
"SolduriCompactCard pentru TVA: calculat sau din dashboardStore.summary",
|
||||
"npm run typecheck passes"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 3"
|
||||
},
|
||||
{
|
||||
"id": "US-704",
|
||||
"title": "Mărire Spațiu Tabel Scadențe",
|
||||
"description": "Ca utilizator, vreau să văd mai multe rânduri în tabelul de scadențe fără să scrollez, pentru că acum încap doar 3-4 rânduri",
|
||||
"priority": 14,
|
||||
"id": "US-2007",
|
||||
"title": "Indicatori vizuali pentru starea financiară",
|
||||
"description": "Ca utilizator, vreau să văd indicatori de avertizare pe cardurile solduri pentru probleme financiare",
|
||||
"priority": 7,
|
||||
"acceptanceCriteria": [
|
||||
"În MaturityAnalysisCard.vue: .maturity-list max-height crescut de la 250px la 400px",
|
||||
"În MaturityAnalysisCard.vue: @media 768px .maturity-list max-height crescut de la 200px la 350px",
|
||||
"min-height pe .tab-content redus pentru a nu forța scroll inutil",
|
||||
"Verify in browser desktop: cel puțin 8-10 rânduri vizibile fără scroll intern"
|
||||
"Indicator dot roșu pe card Clienți dacă restanță > 20% din total",
|
||||
"Indicator dot roșu pe card Furnizori dacă restanță > 20% din total",
|
||||
"TVA: text roșu var(--red-600) dacă negativ (de plată), verde var(--green-600) dacă pozitiv (de recuperat)",
|
||||
"npm run typecheck passes",
|
||||
"Verify în browser că indicatorii sunt vizibili în ambele teme"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 4"
|
||||
},
|
||||
{
|
||||
"id": "US-705",
|
||||
"title": "Reducere Padding și Margin Top Excesiv",
|
||||
"description": "Ca utilizator, vreau să văd conținutul imediat fără spațiu gol excesiv în partea de sus, pentru că acum partea de sus are prea mult spațiu nefolosit",
|
||||
"priority": 15,
|
||||
"id": "US-2008",
|
||||
"title": "Buton Refresh în header Dashboard",
|
||||
"description": "Ca utilizator, vreau un buton de refresh în header pentru actualizare manuală a datelor",
|
||||
"priority": 8,
|
||||
"acceptanceCriteria": [
|
||||
"Reducere margin-bottom pe .page-header în paginile afectate",
|
||||
"Verificare și ajustare padding pe .app-container dacă e redundant",
|
||||
"Modificările nu afectează negativ layoutul altor pagini",
|
||||
"Verificare vizuală în mod desktop și mobil",
|
||||
"npm run build passes"
|
||||
"Pe mobil: adaugă action cu icon pi-refresh în MobileTopBar actions",
|
||||
"Pe desktop: adaugă Button cu icon refresh lângă titlul Dashboard",
|
||||
"Click declanșează reload date din dashboardStore",
|
||||
"Icon se rotește (animație CSS) în timpul încărcării",
|
||||
"npm run typecheck passes"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 5"
|
||||
|
||||
Reference in New Issue
Block a user