feat(ui-fixes-phase6): Complete US-601 - Adăugare Secțiune Analize în Sidebar Desktop

Implemented by Ralph autonomous loop.
Iteration: 1

Co-Authored-By: Claude <noreply@anthropic.com>

tasks/prd-ui-fixes-phase6.md

@@ -0,0 +1,252 @@
+# 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