# 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