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