feat(mobile-navigation-improvements): Complete US-201 - MobileBottomNav activ pe Dashboard

Implemented by Ralph autonomous loop. Iteration: 1 Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-12 12:05:02 +00:00
parent 9ea8dd22ac
commit 1084314db9
5 changed files with 941 additions and 833 deletions
--- a/tasks/prd-mobile-navigation-improvements.md
+++ b/tasks/prd-mobile-navigation-improvements.md
@@ -0,0 +1,380 @@
+# PRD: Mobile Navigation & Dashboard Split Improvements
+
+## 1. Introducere
+
+Acest PRD extinde implementarea Material Design mobilă anterioară (`ralph/unified-mobile-md`) cu îmbunătățiri ale navigării și restructurarea Dashboard-ului. Scopul este o experiență de navigare mai intuitivă pe mobil, cu pagini dedicate pentru secțiunile complexe ale Dashboard-ului și un sistem de meniuri consistent.
+
+**Branch de lucru:** `ralph/unified-mobile-md` (continuare)
+
+## 2. Obiective
+
+### Obiectiv Principal
+- **Navigare intuitivă**: Footer nav activ pe toate paginile, hamburger menu Material Design, acces facil la setări
+
+### Obiective Secundare
+- Dashboard split în 3 pagini pentru performanță și claritate
+- Butoane context-aware pentru editare/vizualizare bonuri
+- Pagină hub pentru setări
+- Profil utilizator în hamburger menu
+
+### Metrici de Succes
+- 100% pagini cu MobileBottomNav activ
+- Navigare către orice pagină în max 2 tap-uri
+- Dashboard load time redus cu 30% (doar KPIs pe pagina principală)
+
+## 3. User Stories
+
+---
+
+### US-201: MobileBottomNav activ pe Dashboard
+**Ca** utilizator mobil
+**Vreau** să văd footer navigation și pe Dashboard
+**Pentru că** acum Dashboard-ul nu are MobileBottomNav și nu pot naviga ușor
+
+**Acceptance Criteria:**
+- [ ] DashboardView.vue include MobileBottomNav component
+- [ ] Link-ul "Rapoarte" din nav este activ/highlighted pe Dashboard
+- [ ] MobileTopBar adăugat cu title "Dashboard"
+- [ ] Verify in browser: navigarea funcționează din Dashboard
+- [ ] npm run build passes
+
+---
+
+### US-202: Hamburger Menu Material Design cu Profil
+**Ca** utilizator mobil
+**Vreau** meniul hamburger să aibă design Material cu secțiune profil
+**Pentru că** actualul meniu (Sidebar) nu se integrează vizual cu restul interfeței
+
+**Acceptance Criteria:**
+- [ ] Componentă `MobileDrawerMenu.vue` creată în src/shared/components/mobile/
+- [ ] Secțiuni: Header cu logo, Navigare principală, Profil utilizator (nume + logout)
+- [ ] Link-uri navigare: Dashboard, Bonuri, Facturi, Balanță, Trezorerie, Setări
+- [ ] Active state pe link-ul curent (bazat pe route)
+- [ ] Animație slide-in de la stânga
+- [ ] Close pe tap outside sau pe link click
+- [ ] Dark mode support
+- [ ] npm run build passes
+
+---
+
+### US-203: Dashboard KPIs Only View
+**Ca** utilizator mobil
+**Vreau** Dashboard-ul principal să arate doar KPI cards
+**Pentru că** încărcarea completă e lentă și vreau acces rapid la overview
+
+**Acceptance Criteria:**
+- [ ] DashboardView.vue pe mobil afișează DOAR: SwipeableCards cu KPIs
+- [ ] Adăugare 2 carduri quick-link: "Analiză Scadențe →" și "Facturi Detaliate →"
+- [ ] Click pe quick-link navighează la pagina dedicată
+- [ ] Desktop rămâne neschimbat (toate secțiunile)
+- [ ] npm run build passes
+
+---
+
+### US-204: Creare Pagină Analiză Scadențe
+**Ca** utilizator
+**Vreau** o pagină dedicată pentru analiza scadențelor clienți/furnizori
+**Pentru că** e o secțiune complexă care merită pagină separată
+
+**Acceptance Criteria:**
+- [ ] View nou: `src/modules/reports/views/MaturityAnalysisView.vue`
+- [ ] Route: `/reports/maturity-analysis`
+- [ ] Conține componenta MaturityAndDetailsCard (partea de analiză)
+- [ ] MobileTopBar cu title "Analiză Scadențe" și buton ← Înapoi la Dashboard
+- [ ] MobileBottomNav activ
+- [ ] npm run build passes
+
+---
+
+### US-205: Creare Pagină Facturi Detaliate
+**Ca** utilizator
+**Vreau** o pagină dedicată pentru tabelul facturilor detaliate
+**Pentru că** tabelul detaliat e complex și merită pagină separată
+
+**Acceptance Criteria:**
+- [ ] View nou: `src/modules/reports/views/DetailedInvoicesView.vue`
+- [ ] Route: `/reports/detailed-invoices`
+- [ ] Conține componenta/partea de tabel detaliat din MaturityAndDetailsCard
+- [ ] MobileTopBar cu title "Facturi Detaliate" și buton ← Înapoi
+- [ ] MobileBottomNav activ
+- [ ] Filtre în BottomSheet pe mobil
+- [ ] npm run build passes
+
+---
+
+### US-206: Creare Pagină Hub Setări
+**Ca** utilizator
+**Vreau** o pagină centrală cu toate opțiunile de setări
+**Pentru că** butonul Setări din footer trebuie să ducă undeva util
+
+**Acceptance Criteria:**
+- [ ] View nou: `src/modules/reports/views/SettingsHubView.vue`
+- [ ] Route: `/settings`
+- [ ] Carduri pentru: OCR Setări, Cache Stats, Loguri Server, Telegram (dacă admin)
+- [ ] MobileTopBar cu title "Setări"
+- [ ] MobileBottomNav cu Setări activ
+- [ ] Click pe card navighează la pagina respectivă
+- [ ] Design responsive (grid 2x2 pe mobil, 4 columns pe desktop)
+- [ ] npm run build passes
+
+---
+
+### US-207: Actualizare MobileBottomNav cu link Setări
+**Ca** utilizator
+**Vreau** butonul Setări din footer să ducă la Hub Setări
+**Pentru că** acum duce direct la OCR Metrics
+
+**Acceptance Criteria:**
+- [ ] MobileBottomNav: link Setări → `/settings` (nu `/data-entry/ocr-metrics`)
+- [ ] Icon: pi-cog
+- [ ] Active state când pe `/settings` sau `/settings/*` sau pagini admin
+- [ ] Actualizare în toate paginile care folosesc MobileBottomNav
+- [ ] npm run build passes
+
+---
+
+### US-208: Actualizare Router cu noile rute
+**Ca** developer
+**Vreau** router-ul configurat pentru noile pagini
+**Pentru că** navigarea trebuie să funcționeze
+
+**Acceptance Criteria:**
+- [ ] Rută `/reports/maturity-analysis` → MaturityAnalysisView
+- [ ] Rută `/reports/detailed-invoices` → DetailedInvoicesView
+- [ ] Rută `/settings` → SettingsHubView
+- [ ] Lazy loading pentru toate view-urile noi
+- [ ] Redirect `/data-entry/ocr-metrics` accesibil din Settings Hub
+- [ ] npm run build passes
+
+---
+
+### US-209: Butoane Context-Aware în Editare Bon
+**Ca** utilizator
+**Vreau** butoanele din editare bon să se schimbe în funcție de starea bonului
+**Pentru că** acțiunile disponibile diferă pentru draft/pending/approved
+
+**Acceptance Criteria:**
+- [ ] ReceiptCreateUnifiedView detectează starea bonului (draft/pending/approved/rejected)
+- [ ] **Draft**: Salvează | Submit pentru Aprobare | Șterge
+- [ ] **Pending**: Salvează | Aprobă | Respinge (dacă are permisiuni)
+- [ ] **Approved**: doar vizualizare (butoane disabled sau ascunse)
+- [ ] **Rejected**: Salvează (re-edit) | Re-submit
+- [ ] Butoane în MobileActionBar fix jos pe mobil
+- [ ] npm run build passes
+
+---
+
+### US-210: Creare MobileActionBar Component
+**Ca** developer
+**Vreau** componentă reutilizabilă pentru butoane de acțiune pe mobil
+**Pentru că** avem nevoie de bar fix jos cu butoane în mai multe pagini
+
+**Acceptance Criteria:**
+- [ ] Componentă `MobileActionBar.vue` în src/shared/components/mobile/
+- [ ] Props: actions (array of {label, icon, severity, handler, disabled})
+- [ ] Layout: butoane full-width sau side-by-side (2 butoane)
+- [ ] Position: fixed bottom, above MobileBottomNav
+- [ ] Animație: slide-up la mount
+- [ ] npm run build passes
+
+---
+
+### US-211: Integrare MobileActionBar în ReceiptCreateUnifiedView
+**Ca** utilizator
+**Vreau** butoanele de acțiune pentru bon să fie în action bar pe mobil
+**Pentru că** butoanele actuale sunt în form și nu sunt ușor accesibile
+
+**Acceptance Criteria:**
+- [ ] ReceiptCreateUnifiedView folosește MobileActionBar pe mobil
+- [ ] Desktop păstrează butoanele în form
+- [ ] Buton Înapoi în MobileTopBar (deja există din US-105)
+- [ ] Action bar dispare când se deschide BottomSheet sau alte overlay-uri
+- [ ] npm run build passes
+
+---
+
+### US-212: Quick Links în Dashboard Mobile
+**Ca** utilizator
+**Vreau** carduri clickabile în Dashboard pentru a ajunge la Scadențe și Facturi
+**Pentru că** trebuie să știu unde găsesc datele detaliate
+
+**Acceptance Criteria:**
+- [ ] După SwipeableCards, 2 carduri: "Analiză Scadențe" și "Facturi Detaliate"
+- [ ] Design: icon + titlu + săgeată dreaptă (→)
+- [ ] Click navighează la pagina respectivă
+- [ ] Doar pe mobil (desktop are totul în aceeași pagină)
+- [ ] npm run build passes
+
+---
+
+### US-213: Actualizare Hamburger Menu în toate paginile
+**Ca** utilizator
+**Vreau** hamburger menu-ul să funcționeze uniform în toată aplicația
+**Pentru că** acum unele pagini au Sidebar, altele nu au
+
+**Acceptance Criteria:**
+- [ ] Toate paginile cu MobileTopBar: click pe ☰ deschide MobileDrawerMenu
+- [ ] MobileDrawerMenu înlocuiește vechiul Sidebar pe mobil
+- [ ] Desktop păstrează navigarea existentă
+- [ ] npm run build passes
+
+---
+
+### US-214: Actualizare Documentație MOBILE_PATTERNS.md
+**Ca** developer viitor
+**Vreau** documentația actualizată cu noile componente și pattern-uri
+**Pentru că** altfel nu voi ști cum să le folosesc
+
+**Acceptance Criteria:**
+- [ ] Secțiune nouă: MobileDrawerMenu (usage, props)
+- [ ] Secțiune nouă: MobileActionBar (usage, props)
+- [ ] Secțiune actualizată: Navigation patterns (footer → settings hub)
+- [ ] Diagrame ASCII actualizate cu noile rute
+- [ ] npm run build passes (doar pentru validare că nu s-a stricat nimic)
+
+---
+
+## 4. Cerințe Funcționale
+
+1. [REQ-001] Toate paginile mobile TREBUIE să aibă MobileBottomNav vizibil
+2. [REQ-002] Hamburger menu TREBUIE să fie MobileDrawerMenu pe mobil
+3. [REQ-003] Dashboard mobil afișează DOAR KPIs + quick links
+4. [REQ-004] Setări din footer navighează la Settings Hub
+5. [REQ-005] Editare bon are butoane context-aware bazate pe status
+6. [REQ-006] Noile pagini (Scadențe, Facturi, Settings) au MobileTopBar + MobileBottomNav
+7. [REQ-007] Navigare către orice pagină în max 2 tap-uri
+
+## 5. Non-Goals (Ce NU facem)
+
+- ❌ Nu schimbăm layout-ul desktop (doar mobile)
+- ❌ Nu adăugăm funcționalități noi în backend
+- ❌ Nu modificăm logica de business pentru bonuri
+- ❌ Nu schimbăm stilul cardurilor KPI (sunt deja bune)
+- ❌ Nu implementăm gesture navigation (swipe back)
+- ❌ Nu adăugăm notificări push
+
+## 6. Considerații Tehnice
+
+### Stack/Tehnologii
+- Vue 3 Composition API
+- Vue Router pentru navigare
+- Componente existente: MobileTopBar, MobileBottomNav, BottomSheet
+- PrimeVue pentru UI elements
+
+### Patterns de Urmat
+- Pattern din ReceiptsListView pentru MobileTopBar + MobileBottomNav
+- BottomSheet pentru filtre pe mobil
+- isMobile composable pentru condiționare
+
+### Dependențe
+- US-201, US-202 trebuie făcute înaintea celorlalte (componente de bază)
+- US-208 (router) trebuie făcut înainte de US-204, US-205, US-206
+- US-210 trebuie făcut înainte de US-211
+
+### Riscuri Tehnice
+- **Risc mediu**: MaturityAndDetailsCard e complex, split-ul poate fi dificil
+  - Mitigare: Extrage logica în composable reutilizabil
+- **Risc scăzut**: Schimbarea navigării poate afecta deep links
+  - Mitigare: Păstrăm rutele vechi funcționale (redirect)
+
+## 7. Considerații UI/UX
+
+### Structură Navigare Nouă
+```
+┌─────────────────────────────────────────────┐
+│ HAMBURGER MENU (MobileDrawerMenu)           │
+├─────────────────────────────────────────────┤
+│ [Logo ROA2WEB]                              │
+│─────────────────────────────────────────────│
+│ 📊 Dashboard                                │
+│ 🧾 Bonuri                                   │
+│ 📄 Facturi                                  │
+│ 📈 Balanță                                  │
+│ 💰 Trezorerie                               │
+│ ⚙️ Setări                                   │
+│─────────────────────────────────────────────│
+│ 👤 Marius M.                                │
+│ [Logout]                                    │
+└─────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────┐
+│ SETTINGS HUB                                │
+├─────────────────────────────────────────────┤
+│ ┌──────────┐ ┌──────────┐                   │
+│ │ 🔍 OCR   │ │ 📊 Cache │                   │
+│ │ Setări   │ │ Stats    │                   │
+│ └──────────┘ └──────────┘                   │
+│ ┌──────────┐ ┌──────────┐                   │
+│ │ 📋 Loguri│ │ 📱Telegram│                  │
+│ │ Server   │ │ Bot      │                   │
+│ └──────────┘ └──────────┘                   │
+└─────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────┐
+│ MOBILE ACTION BAR (Editare Bon)             │
+├─────────────────────────────────────────────┤
+│ Status: DRAFT                               │
+│ ┌─────────────────────────────────────────┐ │
+│ │     [Salvează]     [Submit Aprobare]    │ │
+│ └─────────────────────────────────────────┘ │
+│                                             │
+│ Status: PENDING                             │
+│ ┌─────────────────────────────────────────┐ │
+│ │     [Aprobă]        [Respinge]          │ │
+│ └─────────────────────────────────────────┘ │
+└─────────────────────────────────────────────┘
+```
+
+### Flow Navigare Dashboard
+```
+Dashboard (KPIs)
+    │
+    ├── Tap "Analiză Scadențe →"
+    │       └── /reports/maturity-analysis
+    │
+    └── Tap "Facturi Detaliate →"
+            └── /reports/detailed-invoices
+```
+
+## 8. Success Metrics
+
+- **Navigare**: 100% pagini cu footer nav activ
+- **Performance**: Dashboard load time < 1.5s pe 3G
+- **UX**: Max 2 tap-uri pentru orice destinație
+- **Consistency**: 0 pagini fără MobileTopBar pe mobil
+
+## 9. Open Questions
+
+- [ ] Settings Hub ar trebui să arate și versiunea aplicației?
+- [ ] Quick links în Dashboard să aibă și preview cu numere (ex: "5 scadențe azi")?
+- [ ] MobileDrawerMenu să aibă și opțiune de schimbare temă?
+
+---
+
+## Implementare Sugerată (Ordinea User Stories)
+
+### Faza 1: Componente de Bază
+1. US-202: MobileDrawerMenu
+2. US-210: MobileActionBar
+
+### Faza 2: Router & Pagini Noi
+3. US-208: Router updates
+4. US-206: Settings Hub
+5. US-204: Maturity Analysis View
+6. US-205: Detailed Invoices View
+
+### Faza 3: Dashboard & Navigare
+7. US-201: Dashboard cu MobileBottomNav
+8. US-203: Dashboard KPIs Only
+9. US-212: Quick Links
+10. US-207: Update MobileBottomNav link Setări
+
+### Faza 4: Hamburger Menu Integration
+11. US-213: Hamburger menu în toate paginile
+
+### Faza 5: Editare Bon
+12. US-209: Butoane context-aware
+13. US-211: MobileActionBar în ReceiptCreateUnifiedView
+
+### Faza 6: Documentație
+14. US-214: Update MOBILE_PATTERNS.md