romfast/roa2web-service-auto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
dd4b90f922e35cbd9557d78b731d9f2f833d9af9
roa2web-service-auto/tasks/prd-mobile-fixes-phase3.md
Claude Agent a5740eaf78 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

18 KiB
Raw Blame History

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

  • Footer: Dashboard, Bonuri, Facturi, Setări - DA
  • Hamburger: Grupat pe categorii - DA
  • 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

  1. US-304: Tab-uri în Facturi
  2. US-305: Tab-uri în Scadențe

Faza 3: Corectări Navigare

  1. US-301: Buton Înapoi în editare bon
  2. US-302: Footer Nav pe paginile de setări
  3. US-303: FAB pe pagina Bonuri (mutare Upload)

Faza 4: Restaurare Funcționalități

  1. US-306: Restaurare Export și Filtrare pe rapoarte

Faza 5: Cleanup

  1. US-309: Cleanup Dashboard Mobile
  2. US-310: Actualizare Router

Faza 6: Documentație

  1. US-311: Update MOBILE_PATTERNS.md