# 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