feat(unified-mobile-desktop-ui): Complete US-501 - Header Actions Bar Unificat - Rapoarte

Implemented by Ralph autonomous loop.
Iteration: 1

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

tasks/prd-unified-mobile-desktop-ui.md

@@ -0,0 +1,451 @@
+# PRD: Unified Mobile & Desktop UI Improvements
+
+## 1. Introducere
+
+Acest PRD acoperă îmbunătățirile necesare pentru a unifica experiența UI între mobil și desktop, rezolvând inconsistențe de design, bugs și funcționalități lipsă. Referința de design este pagina `/reports/invoices` care implementează corect pattern-urile Material Design 3.
+
+**Branch**: `ralph/unified-mobile-md` (continuare)
+
+## 2. Obiective
+
+### Obiectiv Principal
+- Unificarea UI/UX între toate paginile (rapoarte, bonuri, analize) cu un design consistent Material Design 3
+
+### Obiective Secundare
+- Fix bugs existente (grupuri neexpandabile, butoane ascunse, export cu erori)
+- Adăugare funcționalități lipsă pe mobil (selecție companie/perioadă, temă)
+- Eliminare duplicări și inconsistențe în plasarea butoanelor
+
+### Metrici de Succes
+- Toate paginile au aceleași pattern-uri pentru header actions (filtre, reset, export)
+- Export PDF/XLSX funcțional pe toate paginile
+- Meniu hamburger identic pe desktop și mobil
+- Zero bugs vizuale (butoane ascunse, spații blank excesive)
+
+## 3. User Stories
+
+---
+
+### US-501: Header Actions Bar Unificat - Rapoarte
+**Ca** utilizator
+**Vreau** să am butoane de Filtre, Reset Filtre și Export (PDF/XLSX dropdown) în header-ul din dreapta pe toate rapoartele
+**Pentru că** să am acces rapid și consistent la aceste funcții
+
+**Pagini afectate**:
+- `/reports/invoices` (referință - deja implementat parțial)
+- `/reports/trial-balance` (Balanță)
+- `/reports/cash-bank` (Casă și Bancă)
+- `/reports/detailed-invoices/clients` (Facturi Detaliate Clienți)
+- `/reports/detailed-invoices/suppliers` (Facturi Detaliate Furnizori)
+- `/reports/maturity` (Analize Scadențe)
+
+**Acceptance Criteria:**
+- [ ] Fiecare pagină are în header dreapta: [Filter icon] [Reset icon] [Export dropdown]
+- [ ] Export dropdown conține: "Export PDF" și "Export XLSX"
+- [ ] Butonul Filter are indicator vizual (active) când filtrele sunt aplicate
+- [ ] Butonul Reset resetează toate filtrele la valori implicite
+- [ ] Pe mobil, acțiunile sunt în MobileTopBar actions
+- [ ] Pe desktop, acțiunile sunt într-un grup în header dreapta
+- [ ] npm run typecheck passes
+- [ ] Verify in browser: butoanele funcționează pe desktop și mobil
+
+---
+
+### US-502: Header Actions Bar Unificat - Lista Bonuri
+**Ca** utilizator
+**Vreau** să am butoane de Filtre, Reset Filtre și Export în header-ul listei de bonuri
+**Pentru că** să fie consistent cu celelalte pagini
+
+**Acceptance Criteria:**
+- [ ] Lista bonuri (`/data-entry`) are în header: [Filter] [Reset] [Export dropdown]
+- [ ] Stilul butoanelor este identic cu cel din `/reports/invoices`
+- [ ] Export dropdown: "Export PDF" și "Export XLSX"
+- [ ] Butoanele vechi "Filtrează" și "Resetează" sunt înlocuite cu noul pattern
+- [ ] npm run typecheck passes
+- [ ] Verify in browser: butoanele au același aspect ca pe pagina Facturi
+
+---
+
+### US-503: BottomSheet Filtre pentru Lista Bonuri (Mobil)
+**Ca** utilizator pe mobil
+**Vreau** ca filtrele din lista de bonuri să se deschidă într-un BottomSheet
+**Pentru că** să fie consistent cu Facturi, Balanță, Casă și Bancă
+
+**Acceptance Criteria:**
+- [ ] Click pe butonul Filter deschide BottomSheet (nu inline filters)
+- [ ] BottomSheet conține toate filtrele existente (status, dată, etc.)
+- [ ] BottomSheet are butoane "Resetează" și "Aplică" în footer
+- [ ] Swipe-down sau tap outside închide BottomSheet
+- [ ] npm run typecheck passes
+- [ ] Verify in browser mobil: filtrele apar în BottomSheet
+
+---
+
+### US-504: Fix Export Endpoints Backend
+**Ca** utilizator
+**Vreau** ca exportul PDF/XLSX să funcționeze fără erori
+**Pentru că** să pot descărca rapoartele
+
+**Acceptance Criteria:**
+- [ ] Identificate și fixate erorile din endpoint-urile de export existente
+- [ ] Export PDF funcțional pentru: Facturi, Balanță, Casă și Bancă, Facturi Detaliate, Scadențe, Bonuri
+- [ ] Export XLSX funcțional pentru aceleași pagini
+- [ ] Exportul include DOAR datele filtrate (nu toate)
+- [ ] npm run typecheck passes
+- [ ] Verify in browser: descărcare PDF și XLSX reușită
+
+---
+
+### US-505: Meniu Hamburger Desktop = Mobil
+**Ca** utilizator pe desktop
+**Vreau** ca meniul hamburger să aibă aceeași structură ca pe mobil
+**Pentru că** să am acces la toate opțiunile indiferent de dispozitiv
+
+**Acceptance Criteria:**
+- [ ] Meniul desktop are secțiunile: PRINCIPALE, RAPOARTE, ANALIZE, ADMINISTRARE
+- [ ] Ordinea și itemii sunt identici cu MobileDrawerMenu
+- [ ] Stilul vizual este consistent (poate fi adaptat pentru desktop dar structura identică)
+- [ ] npm run typecheck passes
+- [ ] Verify in browser desktop: meniul arată la fel ca pe mobil
+
+---
+
+### US-506: Fix MobileDrawerMenu - Deconectare Vizibil
+**Ca** utilizator pe mobil
+**Vreau** să văd și să pot accesa butonul de Deconectare
+**Pentru că** acum este ascuns sub bara de navigare din footer
+
+**Acceptance Criteria:**
+- [ ] Butonul "Deconectare" este complet vizibil în drawer menu
+- [ ] Adăugat padding-bottom suficient pentru a nu fi acoperit de MobileBottomNav
+- [ ] Scroll funcționează corect dacă meniul este mai lung decât ecranul
+- [ ] npm run typecheck passes
+- [ ] Verify in browser mobil: butonul Deconectare este vizibil și clickabil
+
+---
+
+### US-507: Selecție Companie/Perioadă pe Mobil
+**Ca** utilizator pe mobil
+**Vreau** să pot selecta compania și perioada contabilă
+**Pentru că** acum această funcționalitate lipsește complet pe mobil
+
+**Acceptance Criteria:**
+- [ ] MobileDrawerMenu sau MobileTopBar include selector companie
+- [ ] Selector perioadă contabilă disponibil
+- [ ] Selectarea companiei/perioadei actualizează datele pe toate paginile
+- [ ] Valorile selectate persistă între sesiuni
+- [ ] npm run typecheck passes
+- [ ] Verify in browser mobil: pot schimba compania și perioada
+
+---
+
+### US-508: Selector Temă pe Mobil (Dark/Light/Auto)
+**Ca** utilizator pe mobil
+**Vreau** să pot schimba tema (dark/light/auto)
+**Pentru că** acum această opțiune lipsește pe mobil
+
+**Acceptance Criteria:**
+- [ ] Opțiune de schimbare temă în MobileDrawerMenu sau Setări
+- [ ] Trei opțiuni: Light, Dark, Auto (system)
+- [ ] Schimbarea temei se aplică imediat
+- [ ] Preferința persistă în localStorage
+- [ ] npm run typecheck passes
+- [ ] Verify in browser mobil: tema se schimbă corect
+
+---
+
+### US-509: Fix Detailed Invoices - Grupuri Expandabile Desktop
+**Ca** utilizator pe desktop
+**Vreau** ca grupurile de facturi per client/furnizor să se expandeze la click
+**Pentru că** acum funcționează doar pe mobil
+
+**Acceptance Criteria:**
+- [ ] Click pe un grup (client/furnizor) expandează/colapsează facturile
+- [ ] Indicator vizual pentru expand/collapse (chevron icon)
+- [ ] Animație smooth la expand/collapse
+- [ ] Comportament identic cu versiunea mobilă
+- [ ] npm run typecheck passes
+- [ ] Verify in browser desktop: grupurile se extind la click
+
+---
+
+### US-510: Detailed Invoices - Eliminare Filtru Clienți/Furnizori
+**Ca** utilizator
+**Vreau** ca filtrele din Facturi Detaliate să NU aibă selecția Clienți/Furnizori
+**Pentru că** sunt deja pagini separate (`/clients` și `/suppliers`)
+
+**Acceptance Criteria:**
+- [ ] Pagina `/reports/detailed-invoices/clients` NU are dropdown Clienți/Furnizori în filtre
+- [ ] Pagina `/reports/detailed-invoices/suppliers` NU are dropdown Clienți/Furnizori în filtre
+- [ ] Tipul (clienți/furnizori) este determinat automat din URL
+- [ ] npm run typecheck passes
+- [ ] Verify in browser: filtrul Clienți/Furnizori nu mai apare
+
+---
+
+### US-511: Detailed Invoices - Eliminare Buton Filtru Duplicat
+**Ca** utilizator
+**Vreau** să am un singur buton de filtre (în header)
+**Pentru că** acum există și în header și deasupra tabelului
+
+**Acceptance Criteria:**
+- [ ] Butonul de filtre apare DOAR în header (dreapta)
+- [ ] Eliminat butonul duplicat de deasupra tabelului
+- [ ] Funcționalitatea rămâne identică
+- [ ] npm run typecheck passes
+- [ ] Verify in browser: un singur buton de filtre
+
+---
+
+### US-512: Detailed Invoices - Fix Overlay Butoane Ascunse
+**Ca** utilizator
+**Vreau** ca în overlay-ul cu selecții să văd toate butoanele
+**Pentru că** acum Reset Filtre și Export sunt ascunse sub footer
+
+**Acceptance Criteria:**
+- [ ] Toate butoanele din overlay sunt vizibile
+- [ ] Butoanele nu sunt acoperite de footer
+- [ ] Scroll funcționează dacă conținutul e mare
+- [ ] Z-index corect pentru overlay vs footer
+- [ ] npm run typecheck passes
+- [ ] Verify in browser: toate butoanele sunt vizibile în overlay
+
+---
+
+### US-513: Analize Scadențe - Eliminare Secțiune Facturi Detaliate
+**Ca** utilizator
+**Vreau** ca pagina Analize Scadențe să NU conțină secțiunea Facturi Detaliate
+**Pentru că** sunt pagini separate
+
+**Acceptance Criteria:**
+- [ ] Pagina `/reports/maturity` afișează DOAR analiza scadențelor
+- [ ] Secțiunea "Facturi Detaliate" este eliminată complet
+- [ ] Link-urile către Facturi Detaliate rămân în meniu
+- [ ] npm run typecheck passes
+- [ ] Verify in browser: pagina conține doar scadențe
+
+---
+
+### US-514: Fix Spațiu Blank Excesiv Top (Toate Paginile)
+**Ca** utilizator
+**Vreau** ca paginile să NU aibă spațiu gol mare în partea de sus
+**Pentru că** ocupă ecran inutil
+
+**Acceptance Criteria:**
+- [ ] Identificat cauza spațiului blank (margin/padding excesiv)
+- [ ] Redus spațiul la maximum 16px între header și conținut
+- [ ] Toate paginile verificate și corectate
+- [ ] Layout-ul rămâne corect pe toate device-urile
+- [ ] npm run typecheck passes
+- [ ] Verify in browser: spațiul blank este eliminat
+
+---
+
+### US-515: Lista Bonuri - Meniu "Bon Nou/Bulk Upload" Material Design
+**Ca** utilizator
+**Vreau** ca meniul pentru Bon Nou și Bulk Upload să arate modern, Material Design
+**Pentru că** acum arată înghesuit și nu se potrivește cu restul UI-ului
+
+**Acceptance Criteria:**
+- [ ] Meniul redesenat în stil Material Design 3
+- [ ] Spacing adecvat între opțiuni (min 44px touch targets)
+- [ ] Iconițe clare pentru fiecare opțiune
+- [ ] Hover/active states vizibile
+- [ ] Animații smooth la deschidere/închidere
+- [ ] npm run typecheck passes
+- [ ] Verify in browser: meniul arată modern și consistent
+
+---
+
+### US-516: Lista Bonuri - Meniu Acțiuni Per Bon Material Design
+**Ca** utilizator
+**Vreau** ca meniul de acțiuni pentru fiecare bon (⋮) să arate modern
+**Pentru că** acum arată înghesuit și inconsistent
+
+**Acceptance Criteria:**
+- [ ] Meniul acțiuni (Vizualizare, Editare, Ștergere) redesenat MD3
+- [ ] Opțiuni cu iconițe și text clar
+- [ ] Touch targets min 44px
+- [ ] Divider între acțiuni normale și destructive (Ștergere)
+- [ ] npm run typecheck passes
+- [ ] Verify in browser: meniul arată modern
+
+---
+
+### US-517: Lista Bonuri Desktop - Dialog Ștergere Material Design
+**Ca** utilizator pe desktop
+**Vreau** ca dialogul de confirmare ștergere să arate modern
+**Pentru că** acum arată înghesuit și vechi
+
+**Acceptance Criteria:**
+- [ ] Dialog redesenat în stil Material Design 3
+- [ ] Titlu clar: "Șterge bonul?"
+- [ ] Mesaj descriptiv cu detalii bon
+- [ ] Butoane: "Anulează" (secondary) și "Șterge" (danger)
+- [ ] Spacing și padding corespunzătoare
+- [ ] npm run typecheck passes
+- [ ] Verify in browser: dialogul arată modern
+
+---
+
+### US-518: Creare/Vizualizare/Editare Bon - Butoane Doar Sus
+**Ca** utilizator
+**Vreau** ca în paginile de creare, vizualizare și editare bon, butoanele să fie DOAR în partea de sus
+**Pentru că** să fie consistent și să nu am butoane duplicate
+
+**Acceptance Criteria:**
+- [ ] Pagina creare bon: butoane (Salvează, Anulează) doar în header
+- [ ] Pagina vizualizare bon: butoane (Editează, Șterge, Înapoi) doar în header
+- [ ] Pagina editare bon: butoane (Salvează, Anulează) doar în header
+- [ ] Eliminate butoanele din footer/body dacă există
+- [ ] Pe mobil: butoanele sunt în MobileTopBar actions
+- [ ] npm run typecheck passes
+- [ ] Verify in browser: butoane doar în header pe toate cele 3 pagini
+
+---
+
+### US-519: Separare Casă și Bancă în Pagini Distincte
+**Ca** utilizator
+**Vreau** ca Casă și Bancă să fie pagini separate (nu combinate)
+**Pentru că** să pot accesa fiecare raport independent și să am o navigare mai clară
+
+**Acceptance Criteria:**
+- [ ] Pagină separată pentru Casă: `/reports/cash`
+- [ ] Pagină separată pentru Bancă: `/reports/bank`
+- [ ] Fiecare pagină are propriul titlu (Casă / Bancă)
+- [ ] Meniul hamburger (desktop și mobil) are intrări separate pentru Casă și Bancă
+- [ ] MobileDrawerMenu actualizat cu linkuri separate
+- [ ] MobileBottomNav sau navigarea include ambele opțiuni (dacă relevant)
+- [ ] Rutele vechi `/reports/cash-bank` redirect către `/reports/cash` sau sunt eliminate
+- [ ] Filtrele și exportul funcționează independent pe fiecare pagină
+- [ ] npm run typecheck passes
+- [ ] Verify in browser desktop: Casă și Bancă sunt pagini separate accesibile din meniu
+- [ ] Verify in browser mobil: Casă și Bancă sunt pagini separate în MobileDrawerMenu
+
+---
+
+## 4. Cerințe Funcționale
+
+1. [REQ-001] Toate paginile de rapoarte TREBUIE să aibă header actions: Filter, Reset, Export (dropdown PDF/XLSX)
+2. [REQ-002] Exportul TREBUIE să exporte DOAR datele filtrate curent
+3. [REQ-003] Meniul hamburger TREBUIE să fie identic între desktop și mobil ca structură
+4. [REQ-004] Pe mobil, filtrele TREBUIE să fie în BottomSheet, nu inline
+5. [REQ-005] Touch targets TREBUIE să fie minim 44x44px pe mobil
+6. [REQ-006] Butoanele de acțiuni (salvare, ștergere, etc.) TREBUIE să fie DOAR în header/top bar
+7. [REQ-007] Toate dialogurile și meniurile TREBUIE să urmeze stilul Material Design 3
+
+## 5. Non-Goals (Ce NU facem)
+
+- ❌ Redesign complet al aplicației - doar unificare și fixes
+- ❌ Funcționalități noi de business logic - doar UI/UX
+- ❌ Modificări la structura bazei de date
+- ❌ Noi endpoint-uri API (doar fix-uri la cele existente)
+- ❌ Suport pentru alte limbi/i18n
+- ❌ Implementare PWA sau funcționalități offline
+
+## 6. Considerații Tehnice
+
+### Stack/Tehnologii
+- **Frontend**: Vue 3, PrimeVue, CSS custom cu design tokens
+- **Backend**: FastAPI (doar pentru fix export endpoints)
+- **Componente existente**: MobileTopBar, MobileBottomNav, MobileDrawerMenu, BottomSheet, MobileSelectionFooter
+
+### Patterns de Urmat
+- **Referință design**: `/reports/invoices` (InvoicesView.vue)
+- **Mobile actions**: Array în `mobileTopBarActions` computed
+- **Filtre mobil**: BottomSheet component
+- **Design tokens**: Folosește DOAR variabile CSS din `DESIGN_TOKENS.md`
+
+### Fișiere Cheie
+```
+src/shared/components/mobile/MobileTopBar.vue
+src/shared/components/mobile/MobileDrawerMenu.vue
+src/shared/components/mobile/BottomSheet.vue
+src/modules/reports/views/InvoicesView.vue (referință)
+src/modules/reports/views/DetailedInvoicesView.vue
+src/modules/reports/views/MaturityAnalysisView.vue
+src/modules/data-entry/views/receipts/ReceiptsListView.vue
+src/modules/data-entry/views/receipts/ReceiptCreateView.vue
+src/modules/data-entry/views/receipts/ReceiptEditView.vue
+src/modules/data-entry/views/receipts/ReceiptDetailView.vue
+```
+
+### Dependențe
+- PrimeVue components (Button, Menu, Dialog, Dropdown)
+- Design tokens CSS variables
+- Backend export endpoints existente
+
+### Riscuri Tehnice
+- Export endpoints pot avea erori neașteptate - necesită debugging
+- Unele pagini pot avea logică complexă de filtrare - atenție la regresii
+
+## 7. Considerații UI/UX
+
+### Layout Pattern (Header Actions)
+```
+┌─────────────────────────────────────────────────┐
+│ [☰/←]     Titlu Pagină     [🔍] [↻] [⬇️▼]     │
+│           (centrat)         Filter Reset Export │
+└─────────────────────────────────────────────────┘
+```
+
+### Export Dropdown
+```
+┌──────────────┐
+│ 📄 Export PDF │
+│ 📊 Export XLSX│
+└──────────────┘
+```
+
+### Stări UI
+- **Loading**: Skeleton sau spinner în zona de conținut
+- **Empty**: Mesaj "Nu există date" cu icon ilustrativ
+- **Error**: Toast notification + retry button
+- **Success export**: Toast "Exportul a fost descărcat"
+
+### Dark Mode
+- Toate componentele noi TREBUIE testate în dark mode
+- Folosește design tokens pentru culori (nu hardcoded)
+
+## 8. Ordine Implementare Recomandată
+
+### Faza 1: Fixes Critice (bugs)
+1. US-506: Fix MobileDrawerMenu - Deconectare vizibil
+2. US-509: Fix Detailed Invoices - Grupuri expandabile desktop
+3. US-512: Fix overlay butoane ascunse
+4. US-504: Fix Export endpoints backend
+
+### Faza 2: Unificare Header Actions
+5. US-501: Header Actions Bar - Rapoarte
+6. US-502: Header Actions Bar - Lista Bonuri
+7. US-503: BottomSheet Filtre pentru Lista Bonuri
+
+### Faza 3: Cleanup & Eliminări
+8. US-510: Eliminare filtru Clienți/Furnizori
+9. US-511: Eliminare buton filtru duplicat
+10. US-513: Eliminare secțiune Facturi Detaliate din Scadențe
+11. US-514: Fix spațiu blank top
+
+### Faza 4: Meniu & Navigare
+12. US-505: Meniu hamburger desktop = mobil
+13. US-507: Selecție companie/perioadă mobil
+14. US-508: Selector temă mobil
+
+### Faza 5: Material Design Styling
+15. US-515: Meniu Bon Nou/Bulk Upload MD3
+16. US-516: Meniu acțiuni per bon MD3
+17. US-517: Dialog ștergere MD3
+18. US-518: Butoane doar sus în creare/editare bon
+
+## 9. Success Metrics
+
+- **Consistență UI**: 100% pagini cu același pattern header actions
+- **Zero bugs vizuale**: Toate butoanele vizibile, zero overflow
+- **Export funcțional**: PDF și XLSX funcționează pe toate paginile
+- **Mobile parity**: Toate funcțiile disponibile pe mobil (companie, perioadă, temă)
+
+## 10. Decizii Clarficate
+
+- ✅ **PDF Export**: Folosește formatarea existentă de la Facturi/Balanță/Casă și Bancă - doar extinde la celelalte pagini
+- ✅ **Selecție companie/perioadă mobil**: În MobileDrawerMenu, sub secțiunea profil
+- ✅ **Tema selector mobil**: În MobileDrawerMenu (lângă alte setări)