395eb2bc9c
Implemented by Ralph autonomous loop. Iteration: 1 Co-Authored-By: Claude <noreply@anthropic.com>
11 KiB
PRD: UI/UX Fixes Phase 6 - Menu Consistency & Mobile Improvements
1. Introducere
Acest PRD adresează o serie de inconsistențe UI/UX între versiunile desktop și mobile ale aplicației ROA2WEB, probleme cu meniul hamburger pe mobil, și bug-uri funcționale identificate în paginile Analize.
Context: După implementarea fazei anterioare (Unified Mobile Desktop UI), au rămas câteva probleme de consistență și funcționalitate care trebuie rezolvate pentru o experiență utilizator coerentă.
2. Obiective
Obiectiv Principal
- Asigurarea consistenței între desktop și mobile pentru structura meniului și funcționalitățile disponibile
Obiective Secundare
- Îmbunătățirea UX pe mobil pentru meniul hamburger (mai compact, mai ușor de navigat)
- Corectarea bug-urilor funcționale în paginile Analize
- Uniformizarea butoanelor de acțiune (Filtrează/Resetează) pe toate paginile
Metrici de Succes
- Toate secțiunile de meniu sunt identice pe desktop și mobile
- Meniul hamburger mobil permite vizualizarea completă a opțiunilor fără scroll excesiv
- Butonul FAB (+) pe lista bonuri funcționează corect și afișează SpeedDial
3. User Stories
US-601: Adăugare Secțiune "Analize" în Sidebar Desktop
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
Acceptance Criteria:
- 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 între "Rapoarte" și "Introduceri Date" (sau după Rapoarte)
- npm run typecheck passes
- Verify in browser: Desktop sidebar shows "Analize" section with working links
US-602: Implementare Tab-uri Clienți/Furnizori în Pagina Scadențe
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
Acceptance Criteria:
- 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
US-603: Implementare Pagină Facturi Detaliate (Înlocuiește Redirect la Dashboard)
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
Acceptance Criteria:
- Creează
DetailedInvoicesView.vueînsrc/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-invoicesfuncț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
US-604: Meniu Hamburger Mobil - Toggle Temă cu 3 Stări
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
Acceptance Criteria:
- Î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
US-605: Meniu Hamburger Mobil - Companie/Perioadă Colapsabile
Ca utilizator mobil Vreau secțiunile Companie și Perioadă din meniu să fie colapsabile Pentru că ocupă mult spațiu și rareori trebuie schimbate
Acceptance Criteria:
- 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
- Starea colapsată este persistată în localStorage
- npm run typecheck passes
- Verify in browser: Tap on Firma/Perioada toggles expansion
US-606: Meniu Hamburger Mobil - Layout Scrollabil Unificat
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
Acceptance Criteria:
- Meniul hamburger mobil (
MobileDrawer.vuesau echivalent) 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
- npm run typecheck passes
- Verify in browser: Entire mobile menu scrolls as one unit
US-607: Meniu Hamburger Mobil - Secțiune Utilizator Mai Compactă
Ca utilizator mobil Vreau secțiunea de utilizator (nume, temă, deconectare) să fie mai compactă Pentru că ocupă prea mult spațiu vertical
Acceptance Criteria:
- 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 redus cu cel puțin 50%
- npm run typecheck passes
- Verify in browser: User section is visually compact
US-608: Buton FAB (+) în Lista Bonuri - Afișare SpeedDial
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
Acceptance Criteria:
- 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
US-609: Buton "Resetează" pe Toate Paginile cu Filtre (Mobil)
Ca utilizator mobil Vreau butonul "Resetează" să apară pe toate paginile care au "Filtrează" Pentru că în prezent doar Balanța are acest buton, celelalte pagini nu
Acceptance Criteria:
- 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
US-610: Investigare și Eliminare Spațiu Gol Deasupra Tabelelor
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
Acceptance Criteria:
- 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
4. Cerințe Funcționale
- [REQ-001] Sidebar-ul desktop trebuie să conțină aceleași secțiuni ca meniul mobil
- [REQ-002] Paginile din Analize trebuie să aibă tab-uri pentru separarea Clienți/Furnizori
- [REQ-003] Meniul hamburger mobil trebuie să permită vizualizarea tuturor opțiunilor fără scroll excesiv
- [REQ-004] Toate elementele interactive mobil trebuie să respecte touch target minim 44x44px
- [REQ-005] Toggle-ul de temă trebuie să cicleze între cele 3 stări la un singur tap
5. Non-Goals (Ce NU facem)
- NU schimbăm structura generală a aplicației sau arhitectura
- NU adăugăm funcționalități noi în paginile Analize (doar corectăm cele existente)
- NU refactorizăm alte componente care nu sunt menționate
- NU modificăm API-ul backend (doar frontend UI)
- NU adăugăm noi pagini în afară de Facturi Detaliate
6. Considerații Tehnice
Stack/Tehnologii
- Vue.js 3 Composition API
- PrimeVue components (SpeedDial, TabView, etc.)
- CSS cu design tokens din
docs/DESIGN_TOKENS.md
Patterns de Urmat
- Componente mobile din
src/shared/components/mobile/ - Mobile detection via
useBreakpoints()composable - CSS patterns din
docs/CSS_PATTERNS.md
Fișiere Cheie de Modificat
src/shared/components/AppSidebar.vue- US-601src/modules/reports/views/MaturityAnalysisView.vue- US-602src/modules/reports/views/DetailedInvoicesView.vue(NOU) - US-603src/shared/components/mobile/MobileDrawer.vue- US-604, US-605, US-606, US-607src/modules/data-entry/views/ReceiptsListView.vue- US-608- Multiple view files - US-609, US-610
Dependențe
- PrimeVue SpeedDial pentru US-608
- PrimeVue TabView pentru US-602, US-603
Riscuri Tehnice
- Meniul hamburger mobil poate avea layout complex - testare atentă pe multiple dispozitive
- SpeedDial PrimeVue poate necesita customizare pentru dark mode
7. Considerații UI/UX
Mobile Menu Layout
- Tot conținutul într-un singur scroll
- Firma/Perioada colapsate by default pentru a economisi spațiu
- Secțiune utilizator compactă în partea de jos
Tab-uri Analize
- Tab-uri clare cu indicatori vizuali pentru starea activă
- Counter cu numărul de elemente în fiecare tab
- Swipe support pentru navigare între tab-uri (nice-to-have)
SpeedDial FAB
- Animație smooth la deschidere
- Opțiuni cu iconițe și text descriptiv
- Overlay semi-transparent pentru focus
8. Success Metrics
- Consistență meniu: 100% același conținut pe desktop și mobil
- Spațiu meniu mobil: Cel puțin 60% din înălțimea ecranului pentru link-uri
- Funcționalitate FAB: 100% rate de succes la afișarea SpeedDial
- Timp task: Utilizatorul poate accesa orice pagină în max 2 tap-uri din meniu
9. Open Questions
- Trebuie păstrat și summary-ul cu ambele (Clienți + Furnizori) pe pagina Scadențe, în plus față de tab-uri?
- Facturi Detaliate trebuie să aibă aceleași filtre ca pagina Facturi principală?
- Spațiul gol raportat - este pe toate paginile sau doar pe anumite rezoluții?
Autor: Claude Code (auto-generated) Data: 2026-01-13 Versiune: 1.0