395eb2bc9c
Implemented by Ralph autonomous loop. Iteration: 1 Co-Authored-By: Claude <noreply@anthropic.com>
253 lines
11 KiB
Markdown
253 lines
11 KiB
Markdown
# 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` î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
|
|
|
|
---
|
|
|
|
### 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.vue` sau 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
|
|
|
|
1. [REQ-001] Sidebar-ul desktop trebuie să conțină aceleași secțiuni ca meniul mobil
|
|
2. [REQ-002] Paginile din Analize trebuie să aibă tab-uri pentru separarea Clienți/Furnizori
|
|
3. [REQ-003] Meniul hamburger mobil trebuie să permită vizualizarea tuturor opțiunilor fără scroll excesiv
|
|
4. [REQ-004] Toate elementele interactive mobil trebuie să respecte touch target minim 44x44px
|
|
5. [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-601
|
|
- `src/modules/reports/views/MaturityAnalysisView.vue` - US-602
|
|
- `src/modules/reports/views/DetailedInvoicesView.vue` (NOU) - US-603
|
|
- `src/shared/components/mobile/MobileDrawer.vue` - US-604, US-605, US-606, US-607
|
|
- `src/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
|