romfast/roa2web-service-auto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fcf272297414cdf7649cddab4b2b3b86a4193497
roa2web-service-auto/tasks/prd-unified-mobile-desktop-ui.md
Claude Agent 94d215d6ae 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>
2026-01-12 22:16:53 +00:00

18 KiB
Raw Blame History

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

  1. US-501: Header Actions Bar - Rapoarte
  2. US-502: Header Actions Bar - Lista Bonuri
  3. US-503: BottomSheet Filtre pentru Lista Bonuri

Faza 3: Cleanup & Eliminări

  1. US-510: Eliminare filtru Clienți/Furnizori
  2. US-511: Eliminare buton filtru duplicat
  3. US-513: Eliminare secțiune Facturi Detaliate din Scadențe
  4. US-514: Fix spațiu blank top

Faza 4: Meniu & Navigare

  1. US-505: Meniu hamburger desktop = mobil
  2. US-507: Selecție companie/perioadă mobil
  3. US-508: Selector temă mobil

Faza 5: Material Design Styling

  1. US-515: Meniu Bon Nou/Bulk Upload MD3
  2. US-516: Meniu acțiuni per bon MD3
  3. US-517: Dialog ștergere MD3
  4. 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)