a5740eaf78
Implemented by Ralph autonomous loop. Iteration: 1 Co-Authored-By: Claude <noreply@anthropic.com>
401 lines
18 KiB
Markdown
401 lines
18 KiB
Markdown
# 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
|