romfast/roa2web-service-auto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fcf272297414cdf7649cddab4b2b3b86a4193497
roa2web-service-auto/tasks/prd-mobile-navigation-improvements.md
Claude Agent 1084314db9 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

15 KiB
Raw Blame History

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

  1. US-208: Router updates
  2. US-206: Settings Hub
  3. US-204: Maturity Analysis View
  4. US-205: Detailed Invoices View

Faza 3: Dashboard & Navigare

  1. US-201: Dashboard cu MobileBottomNav
  2. US-203: Dashboard KPIs Only
  3. US-212: Quick Links
  4. US-207: Update MobileBottomNav link Setări

Faza 4: Hamburger Menu Integration

  1. US-213: Hamburger menu în toate paginile

Faza 5: Editare Bon

  1. US-209: Butoane context-aware
  2. US-211: MobileActionBar în ReceiptCreateUnifiedView

Faza 6: Documentație

  1. US-214: Update MOBILE_PATTERNS.md