feat(mobile-fixes-phase3): Complete US-307 - Restructurare Footer Nav (4 butoane noi)

Implemented by Ralph autonomous loop. Iteration: 1 Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-12 13:38:58 +00:00
parent b7f442ed33
commit a5740eaf78
16 changed files with 832 additions and 365 deletions
--- a/tasks/prd-mobile-fixes-phase3.md
+++ b/tasks/prd-mobile-fixes-phase3.md
@@ -0,0 +1,400 @@
+# 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