# 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)
