feat(ui-fixes-phase6): Complete US-701 - Reparare SpeedDial FAB pe Lista Bonuri
Implemented by Ralph autonomous loop. Iteration: 1 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
133
tasks/prd-mobile-ui-fixes-phase5.md
Normal file
133
tasks/prd-mobile-ui-fixes-phase5.md
Normal file
@@ -0,0 +1,133 @@
|
||||
# PRD: Mobile UI Fixes Phase 5
|
||||
|
||||
## 1. Introducere
|
||||
|
||||
Corecții pentru regresii și probleme de UX identificate după implementările din faza anterioară. Include repararea componentelor care nu mai funcționează (FAB, meniu acțiuni), corectarea navigării pe paginile Analize, și optimizarea spațiului vizual.
|
||||
|
||||
## 2. Obiective
|
||||
|
||||
### Obiectiv Principal
|
||||
- Restabilirea funcționalității complete pe Lista Bonuri (FAB + meniu acțiuni per bon)
|
||||
- Corectarea pattern-ului de navigare pe paginile Analize
|
||||
|
||||
### Obiective Secundare
|
||||
- Mărirea spațiului de afișare pentru tabelul de scadențe
|
||||
- Reducerea spațiului gol excesiv din partea de sus a paginilor
|
||||
|
||||
### Metrici de Succes
|
||||
- Toate funcționalitățile interactive funcționează pe mobil și desktop
|
||||
- Build-ul trece fără erori sau warnings relevante
|
||||
- Verificare vizuală cu Playwright confirmă corecturile
|
||||
|
||||
## 3. User Stories
|
||||
|
||||
### US-701: Reparare SpeedDial FAB pe Lista Bonuri
|
||||
**Ca** utilizator pe mobil
|
||||
**Vreau** să văd butonul + în dreapta jos și să pot crea bonuri noi
|
||||
**Pentru că** este metoda principală de adăugare bonuri pe mobil
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] SpeedDial este importat corect din 'primevue/speeddial'
|
||||
- [ ] Butonul + apare în dreapta jos pe mobil (când nu este în selection mode)
|
||||
- [ ] Click pe + deschide opțiunile: Bon Nou Manual, Scanare OCR, Upload în Masă
|
||||
- [ ] npm run build passes fără warnings legate de SpeedDial
|
||||
- [ ] Verify in browser: FAB vizibil și funcțional pe mobil
|
||||
|
||||
### US-702: Verificare Meniu Acțiuni (...) Per Bon
|
||||
**Ca** utilizator
|
||||
**Vreau** să pot accesa meniul de acțiuni pentru fiecare bon
|
||||
**Pentru că** trebuie să pot edita, șterge, valida bonurile individual
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Butonul ... pe fiecare bon deschide meniul cu opțiuni
|
||||
- [ ] Meniul conține opțiunile corecte în funcție de status (Edit, View, Delete, Approve, etc.)
|
||||
- [ ] Meniul se poziționează corect pe mobil și desktop
|
||||
- [ ] npm run typecheck passes
|
||||
|
||||
### US-703: Navigare Hamburger pe Paginile Analize
|
||||
**Ca** utilizator pe mobil
|
||||
**Vreau** să văd meniul hamburger pe paginile Analize (nu săgeata înapoi)
|
||||
**Pentru că** trebuie să pot accesa firma, perioada și navigarea din orice pagină
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] MaturityAnalysisView (Analize Scadențe) folosește `:show-menu="true"` nu `:show-back="true"`
|
||||
- [ ] DetailedInvoicesView (Facturi Detaliate) folosește `:show-menu="true"` nu `:show-back="true"`
|
||||
- [ ] Click pe hamburger deschide MobileDrawerMenu
|
||||
- [ ] Pattern-ul este consistent cu InvoicesView și CashView/BankView
|
||||
- [ ] Verify in browser: hamburger icon vizibil, drawer se deschide
|
||||
|
||||
### US-704: Mărire Spațiu Tabel Scadențe
|
||||
**Ca** utilizator
|
||||
**Vreau** să văd mai multe rânduri în tabelul de scadențe fără să scrollez
|
||||
**Pentru că** acum încap doar 3-4 rânduri și trebuie să scrollez constant
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] max-height pentru .maturity-list crescut de la 250px la 400px pe desktop
|
||||
- [ ] max-height pentru .maturity-list crescut de la 200px la 350px pe mobil
|
||||
- [ ] min-height pentru .tab-content redus sau eliminat pentru a nu forța scroll
|
||||
- [ ] Verify in browser: cel puțin 8-10 rânduri vizibile fără scroll pe desktop
|
||||
|
||||
### US-705: Reducere Padding/Margin Top Excesiv
|
||||
**Ca** utilizator
|
||||
**Vreau** să văd conținutul imediat fără spațiu gol excesiv în partea de sus
|
||||
**Pentru că** acum partea de sus a paginilor are prea mult spațiu nefolosit
|
||||
|
||||
**Acceptance Criteria:**
|
||||
- [ ] Reducere margin-bottom pe .page-header de la var(--space-md) la var(--space-sm)
|
||||
- [ ] Verificare padding-top pe .app-container - eliminare dacă e redundant
|
||||
- [ ] Verificare că modificările nu afectează negativ alte pagini
|
||||
- [ ] Verificare în mod desktop și mobil
|
||||
- [ ] npm run typecheck passes
|
||||
|
||||
## 4. Cerințe Funcționale
|
||||
|
||||
1. [REQ-001] SpeedDial trebuie importat și funcțional pe ReceiptsListView
|
||||
2. [REQ-002] Meniul de acțiuni per bon trebuie să se deschidă la click pe ...
|
||||
3. [REQ-003] Paginile Analize trebuie să aibă hamburger menu, nu back button
|
||||
4. [REQ-004] Tabelul de scadențe trebuie să afișeze minimum 8 rânduri fără scroll
|
||||
5. [REQ-005] Spațiul gol din partea de sus a paginilor trebuie redus
|
||||
|
||||
## 5. Non-Goals (Ce NU facem)
|
||||
|
||||
- Nu modificăm logica de business a bonurilor sau scadențelor
|
||||
- Nu schimbăm stilul general Material Design
|
||||
- Nu adăugăm funcționalități noi, doar corectăm cele existente
|
||||
- Nu modificăm paginile admin (CacheStats, ServerLogs) - acele back buttons sunt corecte
|
||||
|
||||
## 6. Considerații Tehnice
|
||||
|
||||
### Stack/Tehnologii
|
||||
- Vue.js 3 cu Composition API
|
||||
- PrimeVue (SpeedDial, Menu components)
|
||||
- CSS Design Tokens
|
||||
|
||||
### Patterns de Urmat
|
||||
- InvoicesView.vue pentru pattern-ul hamburger menu
|
||||
- CSS_PATTERNS.md pentru spacing tokens
|
||||
|
||||
### Fișiere de Modificat
|
||||
| Fișier | Modificări |
|
||||
|--------|------------|
|
||||
| `src/modules/data-entry/views/receipts/ReceiptsListView.vue` | Import SpeedDial, verificare menuItems |
|
||||
| `src/modules/reports/views/MaturityAnalysisView.vue` | show-menu în loc de show-back, reducere padding |
|
||||
| `src/modules/reports/views/DetailedInvoicesView.vue` | show-menu în loc de show-back |
|
||||
| `src/modules/reports/components/dashboard/cards/MaturityAnalysisCard.vue` | Mărire max-height maturity-list |
|
||||
|
||||
### Riscuri Tehnice
|
||||
- SpeedDial mask-ul CSS poate necesita ajustări pentru dark mode
|
||||
- Verificare că nu există conflicte cu MobileBottomNav pe z-index
|
||||
|
||||
## 7. Considerații UI/UX
|
||||
|
||||
- FAB button trebuie să fie vizibil deasupra MobileBottomNav
|
||||
- Meniul de acțiuni trebuie să aibă touch targets de min 44px
|
||||
- Hamburger menu trebuie să fie consistent pe toate paginile de rapoarte
|
||||
|
||||
## 8. Success Metrics
|
||||
- 0 erori de build
|
||||
- Toate cele 5 user stories verificate vizual cu Playwright
|
||||
- Consistență navigare pe toate paginile de rapoarte
|
||||
|
||||
## 9. Open Questions
|
||||
- [x] Cauză FAB nefuncțional: SpeedDial nu este importat (CONFIRMAT)
|
||||
- [ ] Cauză meniu acțiuni nefuncțional: De verificat dacă menuItems e populat corect
|
||||
Reference in New Issue
Block a user