# PRD: Mobile Navigation Fixes - Phase 3

## 1. Introducere

Acest PRD continuă îmbunătățirile mobile din fazele anterioare, adresând bugfix-uri și ajustări identificate în testare. Scopul este corectarea navigării, restaurarea funcționalităților lipsă și restructurarea meniului footer pentru o experiență consistentă.

**Branch de lucru:** `ralph/unified-mobile-md` (continuare)

## 2. Obiective

### Obiectiv Principal
- **Corectare navigare**: Buton Înapoi funcțional, footer nav consistent pe toate paginile

### Obiective Secundare
- Restaurare butoane export/filtrare pe paginile de rapoarte
- Restructurare footer: Dashboard, Bonuri, Facturi, Setări
- Tab-uri Clienți/Furnizori în Facturi și Scadențe
- Upload doar în butonul + pe pagina Bonuri

### Metrici de Succes
- 100% pagini mobile au footer nav funcțional
- Buton Înapoi pe toate paginile de editare/vizualizare
- Export/Filtrare disponibile pe toate rapoartele

## 3. User Stories

---

### US-301: Buton Înapoi în Creare/Editare/Vizualizare Bon
**Ca** utilizator mobil
**Vreau** buton ← Înapoi în MobileTopBar pe pagina de bon
**Pentru că** acum nu pot reveni la lista de bonuri fără hamburger menu

**Acceptance Criteria:**
- [ ] ReceiptCreateUnifiedView.vue are MobileTopBar cu showBack=true
- [ ] Click pe ← navighează la /data-entry (lista bonuri)
- [ ] Funcționează în toate modurile: create, edit, view
- [ ] Verify in browser: butonul apare și funcționează
- [ ] npm run build passes

---

### US-302: Footer Nav pe toate Paginile de Setări
**Ca** utilizator mobil
**Vreau** MobileBottomNav pe toate paginile din secțiunea Setări
**Pentru că** unele pagini (OCR Metrics, Cache Stats, Loguri) nu au footer

**Acceptance Criteria:**
- [ ] OCRMetricsView.vue include MobileBottomNav
- [ ] CacheStatsView.vue include MobileBottomNav
- [ ] ServerLogsView.vue include MobileBottomNav
- [ ] TelegramAdminView.vue include MobileBottomNav (dacă există)
- [ ] SettingsHubView.vue include MobileBottomNav (verificare)
- [ ] Setări activ/highlighted în footer pe aceste pagini
- [ ] npm run build passes

---

### US-303: Mutare Upload din Footer în Butonul + pe Bonuri
**Ca** utilizator mobil
**Vreau** funcția Upload să fie în butonul FAB (+) pe pagina Bonuri
**Pentru că** Upload nu are sens în footer pe alte pagini

**Acceptance Criteria:**
- [ ] MobileBottomNav NU mai are link/buton Upload
- [ ] ReceiptsListView.vue are buton FAB (+) în colțul dreapta-jos
- [ ] Click pe FAB deschide meniu: "Bon Nou" | "Upload Bulk"
- [ ] FAB poziționat deasupra MobileBottomNav (bottom: 72px)
- [ ] Verify in browser: FAB apare doar pe pagina Bonuri
- [ ] npm run build passes

---

### US-304: Tab-uri Clienți/Furnizori în Facturi
**Ca** utilizator
**Vreau** pagina Facturi să aibă tab-uri pentru Clienți și Furnizori
**Pentru că** vreau să comut rapid între cele două perspective

**Acceptance Criteria:**
- [ ] InvoicesView.vue modificat cu tab-uri: "Clienți" | "Furnizori"
- [ ] Tab-uri în MobileTopBar sau sub el (design Material)
- [ ] Switch între tab-uri păstrează filtrele active
- [ ] Default: primul tab activ (Clienți)
- [ ] URL query param pentru tab activ (?tab=suppliers)
- [ ] MobileTopBar cu title "Facturi"
- [ ] MobileBottomNav activ (Facturi highlighted)
- [ ] npm run build passes

---

### US-305: Tab-uri Clienți/Furnizori în Scadențe
**Ca** utilizator
**Vreau** pagina Scadențe să aibă tab-uri pentru Clienți și Furnizori
**Pentru că** vreau să comut rapid între cele două perspective

**Acceptance Criteria:**
- [ ] MaturityAnalysisView.vue modificat cu tab-uri: "Clienți" | "Furnizori"
- [ ] Tab-uri în MobileTopBar sau sub el (design Material)
- [ ] Switch între tab-uri păstrează filtrele active
- [ ] Default: primul tab activ (Clienți)
- [ ] URL query param pentru tab activ (?tab=suppliers)
- [ ] MobileTopBar cu title "Scadențe"
- [ ] MobileBottomNav activ (Rapoarte în hamburger menu)
- [ ] Buton ← Înapoi în MobileTopBar
- [ ] npm run build passes

---

### US-306: Restaurare Butoane Export și Filtrare pe Rapoarte (Mobil)
**Ca** utilizator mobil
**Vreau** butoane de export și filtrare pe Facturi, Balanță, Casa/Banca, Lista Bonuri
**Pentru că** aceste funcționalități au dispărut în implementarea anterioară

**Acceptance Criteria:**
- [ ] InvoicesView.vue: buton Export în MobileTopBar actions
- [ ] InvoicesView.vue: buton Filtrare care deschide BottomSheet
- [ ] TrialBalanceView.vue: buton Export în MobileTopBar actions
- [ ] TrialBalanceView.vue: buton Filtrare care deschide BottomSheet
- [ ] BankCashRegisterView.vue: buton Export în MobileTopBar actions
- [ ] BankCashRegisterView.vue: buton Filtrare care deschide BottomSheet
- [ ] ReceiptsListView.vue: buton Export în MobileTopBar actions
- [ ] ReceiptsListView.vue: buton Filtrare care deschide BottomSheet
- [ ] MaturityAnalysisView.vue: buton Export în MobileTopBar actions
- [ ] MaturityAnalysisView.vue: buton Filtrare care deschide BottomSheet
- [ ] Icons: pi-download (export), pi-filter (filtre)
- [ ] npm run build passes

---

### US-307: Restructurare Footer Nav (4 butoane noi)
**Ca** utilizator mobil
**Vreau** footer navigation cu: Dashboard | Bonuri | Facturi | Setări
**Pentru că** vreau acces rapid la cele mai folosite secțiuni

**Acceptance Criteria:**
- [ ] MobileBottomNav cu 4 butoane: Dashboard, Bonuri, Facturi, Setări
- [ ] Dashboard: icon pi-home sau pi-chart-bar, route /dashboard
- [ ] Bonuri: icon pi-receipt, route /data-entry
- [ ] Facturi: icon pi-file-edit, route /reports/invoices
- [ ] Setări: icon pi-cog, route /settings
- [ ] Active state corect pe fiecare pagină
- [ ] Ștergere link Upload din footer (mutat în FAB)
- [ ] npm run build passes

---

### US-308: Actualizare Hamburger Menu - Grupat pe Categorii
**Ca** utilizator mobil
**Vreau** meniul hamburger organizat pe categorii clare
**Pentru că** vreau să găsesc rapid paginile de care am nevoie

**Acceptance Criteria:**
- [ ] MobileDrawerMenu.vue restructurat cu secțiuni:
- [ ] Secțiune "PRINCIPALE":
  - [ ] Dashboard → /dashboard
  - [ ] Bonuri → /data-entry
- [ ] Secțiune "RAPOARTE":
  - [ ] Facturi → /reports/invoices
  - [ ] Balanță → /reports/trial-balance
  - [ ] Casa și Banca → /reports/bank-cash
- [ ] Secțiune "ANALIZE":
  - [ ] Scadențe → /reports/maturity-analysis
  - [ ] Facturi Detaliate → /reports/detailed-invoices
- [ ] Secțiune "SETĂRI":
  - [ ] Setări → /settings (hub)
- [ ] Separatori vizuali între secțiuni
- [ ] Header cu logo
- [ ] Footer cu profil utilizator și logout
- [ ] npm run build passes

---

### US-309: Cleanup Dashboard Mobile
**Ca** utilizator mobil
**Vreau** Dashboard-ul să afișeze doar KPIs fără quick-links
**Pentru că** navigarea se face din footer și hamburger menu

**Acceptance Criteria:**
- [ ] DashboardView.vue pe mobil: ștergere quick-link cards (dacă există)
- [ ] Doar SwipeableCards cu KPIs pe mobil
- [ ] Desktop rămâne neschimbat
- [ ] MobileTopBar cu title "Dashboard"
- [ ] MobileBottomNav cu Dashboard activ
- [ ] npm run build passes

---

### US-310: Actualizare Router cu Modificările
**Ca** developer
**Vreau** router-ul actualizat pentru noile pagini și modificări
**Pentru că** navigarea trebuie să funcționeze corect

**Acceptance Criteria:**
- [ ] Rută /reports/invoices → InvoicesView (cu tab-uri)
- [ ] Rută /reports/maturity-analysis → MaturityAnalysisView (cu tab-uri)
- [ ] Rutele existente păstrate: /reports/trial-balance, /reports/bank-cash
- [ ] Rutele /reports/detailed-invoices funcționale
- [ ] Cleanup rute nefolosite (dacă există)
- [ ] Toate rutele lazy loaded
- [ ] npm run build passes

---

### US-311: Actualizare Documentație MOBILE_PATTERNS.md
**Ca** developer viitor
**Vreau** documentația actualizată cu modificările din Phase 3
**Pentru că** pattern-urile s-au schimbat

**Acceptance Criteria:**
- [ ] Secțiune actualizată: Footer Navigation (Dashboard, Bonuri, Facturi, Setări)
- [ ] Secțiune nouă: FAB Pattern pentru acțiuni contextuale
- [ ] Secțiune nouă: Tab Pattern pentru switch Clienți/Furnizori
- [ ] Secțiune actualizată: Hamburger Menu grupat pe categorii
- [ ] Diagrame ASCII actualizate cu noua structură navigare
- [ ] npm run build passes

---

## 4. Cerințe Funcționale

1. [REQ-001] Toate paginile de editare/vizualizare au buton Înapoi în MobileTopBar
2. [REQ-002] Footer nav are exact 4 butoane: Dashboard, Bonuri, Facturi, Setări
3. [REQ-003] Upload accesibil DOAR din FAB pe pagina Bonuri
4. [REQ-004] Facturi cu tab-uri Clienți/Furnizori
5. [REQ-005] Scadențe cu tab-uri Clienți/Furnizori
6. [REQ-006] Toate rapoartele au butoane Export și Filtrare pe mobil
7. [REQ-007] Hamburger menu organizat pe categorii: Principale, Rapoarte, Analize, Setări
8. [REQ-008] Dashboard afișează doar KPIs pe mobil

## 5. Non-Goals (Ce NU facem)

- ❌ Nu modificăm layout-ul desktop
- ❌ Nu adăugăm funcționalități noi în backend
- ❌ Nu schimbăm logica de business
- ❌ Nu modificăm stilurile cardurilor existente
- ❌ Nu implementăm notificări sau animații complexe
- ❌ Nu creăm pagini separate pentru Clienți/Furnizori (folosim tab-uri)

## 6. Considerații Tehnice

### Stack/Tehnologii
- Vue 3 Composition API
- Vue Router pentru navigare
- Componente existente: MobileTopBar, MobileBottomNav, BottomSheet, MobileDrawerMenu
- PrimeVue TabView sau custom tabs pentru Clienți/Furnizori

### Patterns de Urmat
- Tab Pattern pentru switch între perspective
- FAB Pattern pentru acțiuni contextuale
- BottomSheet pentru filtre pe mobil

### Dependențe
- US-307 trebuie făcut primul (footer restructurare)
- US-304 și US-305 pot fi făcute în paralel (tab-uri)
- US-308 poate fi făcut independent (hamburger menu)

### Riscuri Tehnice
- **Risc scăzut**: Tab-uri în pagini existente pot necesita refactoring
  - Mitigare: Folosire PrimeVue TabView sau custom component simplu

## 7. Considerații UI/UX

### Structură Footer Navigation Nouă
```
┌─────────────────────────────────────────────┐
│         MOBILE BOTTOM NAV (4 butoane)       │
├───────────┬───────────┬───────────┬─────────┤
│ Dashboard │  Bonuri   │ Facturi   │ Setări  │
│    🏠     │    🧾     │    📄     │   ⚙️    │
│/dashboard │/data-entry│ /reports/ │/settings│
│           │           │ invoices  │         │
└───────────┴───────────┴───────────┴─────────┘
```

### FAB pe Pagina Bonuri
```
┌─────────────────────────────────────────────┐
│ Lista Bonuri                     🔍  📥  ☰  │
├─────────────────────────────────────────────┤
│                                             │
│  [Bon 1]                                    │
│  [Bon 2]                                    │
│  [Bon 3]                                    │
│                                       ┌───┐ │
│                                       │ + │ │ ← FAB
│                                       └───┘ │
├─────────────────────────────────────────────┤
│ Dashboard │  Bonuri   │ Facturi   │ Setări  │
└─────────────────────────────────────────────┘

Click pe FAB →
┌─────────────────┐
│ 📝 Bon Nou      │
│ 📤 Upload Bulk  │
└─────────────────┘
```

### Pagina Facturi cu Tab-uri
```
┌─────────────────────────────────────────────┐
│ Facturi                          🔍  📥  ☰  │
├─────────────────────────────────────────────┤
│ ┌─────────────┬─────────────┐               │
│ │  Clienți    │  Furnizori  │  ← Tab-uri    │
│ └─────────────┴─────────────┘               │
├─────────────────────────────────────────────┤
│                                             │
│  [Factură 1]                                │
│  [Factură 2]                                │
│  [Factură 3]                                │
│                                             │
├─────────────────────────────────────────────┤
│ Dashboard │  Bonuri   │ Facturi   │ Setări  │
└─────────────────────────────────────────────┘
```

### Pagina Scadențe cu Tab-uri
```
┌─────────────────────────────────────────────┐
│ ← Scadențe                       🔍  📥  ☰  │
├─────────────────────────────────────────────┤
│ ┌─────────────┬─────────────┐               │
│ │  Clienți    │  Furnizori  │  ← Tab-uri    │
│ └─────────────┴─────────────┘               │
├─────────────────────────────────────────────┤
│                                             │
│  [Scadență 1]                               │
│  [Scadență 2]                               │
│  [Scadență 3]                               │
│                                             │
├─────────────────────────────────────────────┤
│ Dashboard │  Bonuri   │ Facturi   │ Setări  │
└─────────────────────────────────────────────┘
```

### Hamburger Menu Actualizat (Grupat pe Categorii)
```
┌─────────────────────────────────────────────┐
│ [Logo ROA2WEB]                              │
│─────────────────────────────────────────────│
│ PRINCIPALE                                  │
│   🏠 Dashboard                              │
│   🧾 Bonuri                                 │
│─────────────────────────────────────────────│
│ RAPOARTE                                    │
│   📄 Facturi                                │
│   📊 Balanță                                │
│   💰 Casa și Banca                          │
│─────────────────────────────────────────────│
│ ANALIZE                                     │
│   ⏰ Scadențe                               │
│   📋 Facturi Detaliate                      │
│─────────────────────────────────────────────│
│ ADMINISTRARE                                │
│   ⚙️ Setări                                 │
│─────────────────────────────────────────────│
│ 👤 [Username]                               │
│ [Logout]                                    │
└─────────────────────────────────────────────┘
```

## 8. Success Metrics

- **Navigare**: 100% pagini cu footer nav funcțional
- **Consistență**: Tab-uri identice în Facturi și Scadențe
- **UX**: Max 2 tap-uri pentru orice destinație
- **Funcționalitate**: Export/Filtre disponibile pe toate rapoartele

## 9. Open Questions

- [x] Footer: Dashboard, Bonuri, Facturi, Setări - DA
- [x] Hamburger: Grupat pe categorii - DA
- [x] Facturi/Scadențe: Tab-uri Clienți/Furnizori - DA

---

## Implementare Sugerată (Ordinea User Stories)

### Faza 1: Infrastructură Navigare
1. US-307: Restructurare Footer Nav (4 butoane noi)
2. US-308: Actualizare Hamburger Menu - Grupat pe Categorii

### Faza 2: Tab-uri Clienți/Furnizori
3. US-304: Tab-uri în Facturi
4. US-305: Tab-uri în Scadențe

### Faza 3: Corectări Navigare
5. US-301: Buton Înapoi în editare bon
6. US-302: Footer Nav pe paginile de setări
7. US-303: FAB pe pagina Bonuri (mutare Upload)

### Faza 4: Restaurare Funcționalități
8. US-306: Restaurare Export și Filtrare pe rapoarte

### Faza 5: Cleanup
9. US-309: Cleanup Dashboard Mobile
10. US-310: Actualizare Router

### Faza 6: Documentație
11. US-311: Update MOBILE_PATTERNS.md