roa2web-service-auto/tasks/prd-mobile-fixes-phase4.md

PRD: Mobile Fixes Phase 4 - Layout & State Issues

1. Introducere

După completarea Phase 3 (11/11 stories), au fost identificate probleme critice în modul mobil prin testare Playwright. Cauza principală este că layout-ul desktop (AppHeader + sidebar) rămâne vizibil pe viewport mobil, acoperind componentele mobile (MobileTopBar, MobileDrawerMenu). În plus, există probleme cu persistența bonurilor cu eroare la upload.

2. Obiective

Obiectiv Principal

• Corectarea layout-ului mobil pentru a afișa DOAR componentele mobile pe viewport < 768px

Obiective Secundare

• Restaurarea corectă a bonurilor cu eroare după refresh
• Permiterea editării bonurilor cu eroare pentru corectare

Metrici de Succes

• Playwright test: Header desktop ASCUNS pe viewport 375px
• Playwright test: MobileTopBar cu butoane filter/export VIZIBILE
• Playwright test: MobileDrawerMenu afișează secțiunea ANALIZE
• Playwright test: Bonuri cu eroare rămân vizibile după refresh

3. User Stories

US-401: Fix Layout Principal - Ascundere Header Desktop pe Mobil

Ca utilizator mobil Vreau să văd doar MobileTopBar și MobileBottomNav Pentru că header-ul desktop ocupă spațiu și acoperă butoanele mobile

Acceptance Criteria:

• AppHeader.vue are v-if="!isMobile" pentru a se ascunde pe mobil
• Sidebar-ul desktop (navigation cu Rapoarte/Introduceri Date/Sistem) este ascuns pe mobil
• MobileTopBar este singurul header vizibil pe viewport < 768px
• Nu există suprapunere între header desktop și MobileTopBar
• npm run build passes
• Verify in browser (375x667): Header desktop NU este vizibil

US-402: Fix MobileTopBar - Butoane Filter/Export Vizibile

Ca utilizator mobil pe pagina Facturi/Bonuri Vreau să văd butoanele de filtrare și export în header Pentru că acum sunt ascunse/acoperite de header-ul desktop

Acceptance Criteria:

• Pe InvoicesView.vue, butoanele Filter/Refresh/Export sunt vizibile în MobileTopBar
• Pe ReceiptsListView.vue, butoanele Filter/Export/More sunt vizibile în MobileTopBar
• Click pe butonul Filter deschide BottomSheet cu filtre
• Click pe butonul Export declanșează descărcarea
• npm run build passes
• Verify in browser (375x667): Butoanele sunt vizibile și funcționale pe pagina Facturi

US-403: Fix MobileDrawerMenu - Secțiunea ANALIZE Vizibilă

Ca utilizator mobil Vreau să văd secțiunea ANALIZE în hamburger menu Pentru că acum se deschide sidebar-ul desktop în loc de MobileDrawerMenu

Acceptance Criteria:

• Click pe butonul Meniu din MobileTopBar deschide MobileDrawerMenu (nu sidebar desktop)
• MobileDrawerMenu afișează secțiunile: PRINCIPALE, RAPOARTE, ANALIZE, ADMINISTRARE
• Secțiunea ANALIZE conține: Scadențe, Facturi Detaliate
• Link-urile din ANALIZE navighează corect
• npm run build passes
• Verify in browser (375x667): Click pe Meniu → apare drawer cu secțiunea ANALIZE

US-404: Fix Spațiu Blank - Padding Corect pentru Mobile

Ca utilizator mobil Vreau ca paginile să nu aibă spațiu blank excesiv în partea de sus Pentru că acum există ~120px spațiu gol unde ar fi header-ul desktop

Acceptance Criteria:

• Paginile de rapoarte au padding-top corect pentru MobileTopBar (56px)
• Nu există spațiu blank între MobileTopBar și conținut
• Tab-urile Clienți/Furnizori sunt imediat sub MobileTopBar
• npm run build passes
• Verify in browser (375x667): Nu există spațiu blank excesiv pe pagina Facturi

US-405: Fix batchProgressStore - Restaurare Joburi Failed

Ca utilizator care a uploadat bonuri cu erori OCR Vreau ca bonurile cu eroare să rămână vizibile după refresh Pentru că acum dispar și nu pot fi editate

Acceptance Criteria:

• restoreJobsFromBatch() în batchProgressStore.js include joburi cu status 'failed'
• Batch-ul NU este șters din localStorage dacă are joburi failed
• După refresh, bonurile cu eroare sunt afișate cu status vizual "Eroare"
• unifiedItems computed include joburile failed pentru afișare
• npm run build passes
• Verify in browser: Upload bon cu eroare → Refresh → Bonul cu eroare rămâne vizibil

US-406: Fix UI Bonuri cu Eroare - Afișare Corectă pe Mobil

Ca utilizator mobil Vreau să văd clar că un bon are eroare (nu "în procesare") Pentru că acum bonurile failed arată ca și cum ar fi încă în procesare

Acceptance Criteria:

• Bonurile cu status 'failed' afișează chip/badge "Eroare" (roșu)
• NU afișează "În procesare" pentru bonuri failed
• Mesajul de eroare este vizibil (truncat dacă e prea lung)
• npm run build passes
• Verify in browser (375x667): Bon cu eroare arată "Eroare" nu "În procesare"

US-407: Fix Editare Bonuri cu Eroare

Ca utilizator care are un bon cu eroare OCR Vreau să pot edita bonul pentru a corecta erorile manual Pentru că acum nu pot salva modificările sau re-trimite pe workflow

Acceptance Criteria:

• Click pe bon cu eroare deschide formularul de editare
• La salvare, processing_status este resetat la NULL
• După salvare, bonul poate fi trimis pe workflow (Submit for Approval)
• Backend endpoint PATCH /receipts/{id} resetează processing_status
• npm run build passes
• Verify in browser: Editează bon cu eroare → Salvează → Poate fi trimis pe workflow

US-408: Verificare Finală cu Playwright

Ca developer Vreau verificare automată a tuturor fix-urilor Pentru că trebuie confirmate toate scenariile înainte de merge

Acceptance Criteria:

• Test 1: Viewport 375x667 → Header desktop ASCUNS
• Test 2: Viewport 375x667 → MobileTopBar cu butoane VIZIBILE
• Test 3: Click Meniu → MobileDrawerMenu cu ANALIZE
• Test 4: Pagina Facturi → Tab-uri + butoane imediat vizibile (fără blank)
• Test 5: Upload bon cu eroare → Arată "Eroare" nu "În procesare"
• Test 6: Refresh → Bonul cu eroare rămâne
• npm run build passes

4. Cerințe Funcționale

1. [REQ-001] Pe viewport < 768px, AppHeader și sidebar desktop trebuie ascunse complet
2. [REQ-002] MobileTopBar trebuie să fie singurul header vizibil pe mobil
3. [REQ-003] MobileDrawerMenu trebuie să se deschidă la click pe butonul Meniu din MobileTopBar
4. [REQ-004] Butoanele actions din MobileTopBar trebuie să fie vizibile și funcționale
5. [REQ-005] batchProgressStore trebuie să restaureze și să afișeze joburi cu status 'failed'
6. [REQ-006] Editarea unui bon cu eroare trebuie să reseteze processing_status pentru re-workflow

5. Non-Goals (Ce NU facem)

• NU modificăm layout-ul desktop (rămâne neschimbat)
• NU adăugăm funcționalități noi (doar fix-uri)
• NU modificăm stilurile cardurilor de bonuri
• NU schimbăm structura hamburger menu (doar ne asigurăm că se deschide corect)

6. Considerații Tehnice

Stack/Tehnologii

• Vue 3 Composition API
• PrimeVue components
• Pinia stores (batchProgressStore)
• CSS media queries / v-if cu isMobile computed

Patterns de Urmat

• isMobile computed bazat pe window.innerWidth < 768
• v-if="!isMobile" pentru componente desktop-only
• v-if="isMobile" pentru componente mobile-only

Fișiere Cheie de Modificat

Fișier	Modificare
src/App.vue sau layout component	v-if pentru AppHeader/sidebar
src/shared/components/layout/AppHeader.vue	Verificare isMobile
src/modules/reports/views/InvoicesView.vue	CSS padding-top
src/modules/data-entry/views/ReceiptsListView.vue	CSS padding-top
src/stores/batchProgressStore.js	Include 'failed' în restore
backend/modules/data_entry/routers/receipts.py	Reset processing_status

Riscuri Tehnice

• Modificarea layout-ului principal poate afecta toate paginile - testare completă necesară
• isMobile computed trebuie să fie reactiv la resize

7. Considerații UI/UX

• Mobile layout trebuie să fie curat, fără suprapuneri
• Butoanele touch target minim 48px
• Feedback vizual clar pentru starea bonurilor (Eroare vs În procesare)
• Tranziție smooth pentru MobileDrawerMenu

8. Success Metrics

• 100% teste Playwright trec
• 0 suprapuneri vizuale pe viewport mobil
• Bonuri cu eroare persistent după refresh
• Timp de încărcare pagină neschimbat

9. Open Questions

• Cauza exactă a problemei? → Header desktop nu este ascuns pe mobil (confirmat prin Playwright)
• isMobile computed există? → Trebuie verificat în layout principal
• Există alte pagini afectate de layout? → De verificat după fix