{ "projectName": "ui-fixes-phase6", "branchName": "ralph/ui-fixes-phase6", "description": "UI/UX Fixes Phase 6 - Menu Consistency & Mobile Improvements: Adaugă secțiunea Analize pe desktop, implementează tab-uri Clienți/Furnizori în Scadențe, creează pagina Facturi Detaliate, îmbunătățește meniul hamburger mobil, fix FAB SpeedDial, adaugă buton Resetează pe toate paginile cu filtre.", "cssRules": { "documentation": [ "docs/ONBOARDING_CSS.md", "docs/DESIGN_TOKENS.md", "docs/CSS_PATTERNS.md", "docs/MOBILE_PATTERNS.md" ], "goldenRules": [ "Folosește DOAR design tokens - NICIODATĂ valori hardcodate", "Verifică CSS_PATTERNS.md înainte de a scrie CSS nou", "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" } }, "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" ] }, "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 pentru că în prezent aceasta există doar pe mobil și vreau acces la Scadențe și Facturi Detaliate", "priority": 1, "acceptanceCriteria": [ "Sidebar-ul desktop (AppSidebar.vue) include secțiunea Analize cu aceleași link-uri ca pe mobil", "Link-uri: Scadențe (/reports/maturity-analysis) și Facturi Detaliate (/reports/detailed-invoices)", "Secțiunea apare după Rapoarte sau între Rapoarte și Introduceri Date", "npm run typecheck passes", "Verify in browser: Desktop sidebar shows Analize section with working links" ], "passes": true, "notes": "Completed in iteration 1" }, { "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 pentru că în prezent ambele sunt afișate într-o singură listă lungă care este greu de navigat", "priority": 2, "acceptanceCriteria": [ "Pagina Analiză Scadențe (MaturityAnalysisView.vue) are 2 tab-uri: Clienți și Furnizori", "Tab-ul Clienți afișează lista De încasat cu totalul", "Tab-ul Furnizori afișează lista De plătit cu totalul", "Tab-urile funcționează pe desktop și mobil", "Starea tab-ului selectat este păstrată la navigare back", "npm run typecheck passes", "Verify in browser: Tabs switch between Clienți and Furnizori correctly" ], "passes": true, "notes": "Completed in iteration 2" }, { "id": "US-603", "title": "Implementare Pagină Facturi Detaliate", "description": "Ca utilizator, vreau să văd facturi detaliate când accesez Analize > Facturi Detaliate pentru că în prezent pagina redirecționează la Dashboard și nu afișează nimic util", "priority": 3, "acceptanceCriteria": [ "Creează DetailedInvoicesView.vue în src/modules/reports/views/", "Pagina are 2 tab-uri: Clienți și Furnizori", "Fiecare tab afișează un tabel cu facturile detaliate (similar cu pagina Facturi dar filtrate)", "Ruta /reports/detailed-invoices funcționează și nu mai redirecționează", "Adaugă ruta în router (reports.routes.js)", "npm run typecheck passes", "Verify in browser: Page shows detailed invoices table with Clienți/Furnizori tabs" ], "passes": true, "notes": "Completed in iteration 3" }, { "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 pentru că cele 3 butoane separate ocupă prea mult spațiu în meniu", "priority": 4, "acceptanceCriteria": [ "Înlocuiește cele 3 butoane de temă (Auto/Light/Dark) cu un singur toggle cyclic", "La click togglează între Auto → Light → Dark → Auto", "Afișează iconița și textul stării curente (ex: Auto sistem)", "Stilul este compact similar cu toggle-ul din header desktop", "npm run typecheck passes", "Verify in browser: Mobile menu theme selector cycles through 3 states on tap" ], "passes": false, "notes": "Modifică componenta din src/shared/components/mobile/MobileDrawerMenu.vue" }, { "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 pentru că ocupă mult spațiu și rareori trebuie schimbate", "priority": 5, "acceptanceCriteria": [ "Secțiunile Firma și Perioada sunt colapsate by default", "Click pe header-ul secțiunii o expandează/colapsează", "Când sunt colapsate afișează doar numele firmei/perioadei curente într-o singură linie", "Starea colapsată este persistată în localStorage", "npm run typecheck passes", "Verify in browser: Tap on Firma/Perioada toggles expansion" ], "passes": false, "notes": "Modifică MobileDrawerMenu.vue, adaugă state pentru collapsed și persistență localStorage" }, { "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ă pentru că acum secțiunea cu link-uri este foarte mică între header și footer fix", "priority": 6, "acceptanceCriteria": [ "Meniul hamburger mobil nu mai are header/footer fixe", "Tot conținutul (logo firma perioada meniuri utilizator temă deconectare) scrollează împreună", "Înălțimea vizibilă pentru meniuri crește semnificativ (min 60% din ecran)", "npm run typecheck passes", "Verify in browser: Entire mobile menu scrolls as one unit" ], "passes": false, "notes": "Restructurează CSS-ul MobileDrawerMenu.vue, elimină position: fixed de pe header/footer" }, { "id": "US-607", "title": "Secțiune Utilizator Compactă în Meniul Mobil", "description": "Ca utilizator mobil, vreau secțiunea de utilizator (nume temă deconectare) să fie mai compactă pentru că ocupă prea mult spațiu vertical", "priority": 7, "acceptanceCriteria": [ "Numele utilizatorului și butonul Deconectare sunt pe aceeași linie", "Toggle-ul de temă este pe o linie separată dar compact (vezi US-604)", "Spațiul total ocupat de secțiunea utilizator redus cu cel puțin 50%", "npm run typecheck passes", "Verify in browser: User section is visually compact" ], "passes": false, "notes": "Depinde de US-604 pentru toggle-ul de temă, modifică layout-ul în MobileDrawerMenu.vue" }, { "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 pentru că în prezent se schimbă în X dar nu apare niciun meniu", "priority": 8, "acceptanceCriteria": [ "Click pe FAB (+) afișează opțiuni SpeedDial animate", "Opțiuni: Bon Nou Manual, Scanare Bon OCR, Upload în Masă", "Click pe opțiune navighează la pagina corespunzătoare", "Click în afara meniului sau pe X îl închide", "npm run typecheck passes", "Verify in browser: FAB shows SpeedDial menu with 3 options on tap" ], "passes": false, "notes": "Bug în ReceiptsListView.vue - SpeedDial probabil are probleme CSS sau z-index" }, { "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ă pentru că în prezent doar Balanța are acest buton", "priority": 9, "acceptanceCriteria": [ "Pagina Facturi mobil: header include buton Resetează lângă Filtrează", "Pagina Casă mobil: header include buton Resetează lângă Filtrează", "Pagina Bancă mobil: header include buton Resetează lângă Filtrează", "Pagina Lista Bonuri mobil: header include buton Resetează lângă Filtrează", "Butonul resetează toate filtrele la valorile default", "npm run typecheck passes", "Verify in browser: All filter pages show Reset button in mobile header" ], "passes": false, "notes": "Modifică InvoicesView.vue, CashView.vue, BankView.vue, ReceiptsListView.vue" }, { "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 pentru că este raportat că există spațiu gol mare pe mai multe pagini", "priority": 10, "acceptanceCriteria": [ "Investighează CSS-ul paginilor: Facturi Balanță Casă Bancă Lista Bonuri", "Identifică sursa spațiului gol (margin/padding excesiv container gol etc)", "Elimină spațiul gol păstrând designul consistent", "Verifică pe desktop ȘI pe mobil", "npm run typecheck passes", "Verify in browser: No excessive gap between filters and table on all pages" ], "passes": false, "notes": "Task de investigare - verifică toate paginile menționate" } ] }