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

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