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:
Claude Agent
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"projectName": "ui-fixes-phase6",
|
||||
"branchName": "ralph/ui-fixes-phase6",
|
||||
"description": "UI/UX Fixes Phase 6 - Menu Consistency & Mobile Improvements: Adaugă secțiunea Analize pe desktop, implementează tab-uri Clienți/Furnizori în Scadențe, creează pagina Facturi Detaliate, îmbunătățește meniul hamburger mobil, fix FAB SpeedDial, adaugă buton Resetează pe toate paginile cu filtre.",
|
||||
"description": "UI/UX Fixes Phase 6 - Menu Consistency & Mobile Improvements + Phase 5 Regressions Fix",
|
||||
"cssRules": {
|
||||
"documentation": [
|
||||
"docs/ONBOARDING_CSS.md",
|
||||
@@ -41,162 +41,186 @@
|
||||
{
|
||||
"id": "US-601",
|
||||
"title": "Adăugare Secțiune Analize în Sidebar Desktop",
|
||||
"description": "Ca utilizator desktop, vreau să văd secțiunea Analize în sidebar-ul din stânga pentru că în prezent aceasta există doar pe mobil și vreau acces la Scadențe și Facturi Detaliate",
|
||||
"description": "Ca utilizator desktop, vreau să văd secțiunea Analize în sidebar-ul din stânga",
|
||||
"priority": 1,
|
||||
"acceptanceCriteria": [
|
||||
"Sidebar-ul desktop (AppSidebar.vue) include secțiunea Analize cu aceleași link-uri ca pe mobil",
|
||||
"Link-uri: Scadențe (/reports/maturity-analysis) și Facturi Detaliate (/reports/detailed-invoices)",
|
||||
"Secțiunea apare după Rapoarte sau între Rapoarte și Introduceri Date",
|
||||
"npm run typecheck passes",
|
||||
"Verify in browser: Desktop sidebar shows Analize section with working links"
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6"
|
||||
},
|
||||
{
|
||||
"id": "US-602",
|
||||
"title": "Tab-uri Clienți/Furnizori în Pagina Scadențe",
|
||||
"description": "Ca utilizator, vreau să pot comuta între Clienți și Furnizori folosind tab-uri",
|
||||
"priority": 2,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6"
|
||||
},
|
||||
{
|
||||
"id": "US-603",
|
||||
"title": "Implementare Pagină Facturi Detaliate",
|
||||
"description": "Ca utilizator, vreau să văd facturi detaliate când accesez Analize > Facturi Detaliate",
|
||||
"priority": 3,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6"
|
||||
},
|
||||
{
|
||||
"id": "US-604",
|
||||
"title": "Toggle Temă cu 3 Stări în Meniul Mobil",
|
||||
"description": "Ca utilizator mobil, vreau selectorul de temă să fie un singur buton toggle cu 3 stări",
|
||||
"priority": 4,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6"
|
||||
},
|
||||
{
|
||||
"id": "US-605",
|
||||
"title": "Companie/Perioadă Colapsabile în Meniul Mobil",
|
||||
"description": "Ca utilizator mobil, vreau secțiunile Companie și Perioadă din meniu să fie colapsabile",
|
||||
"priority": 5,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6 - NOTE: Reverted in US-703"
|
||||
},
|
||||
{
|
||||
"id": "US-606",
|
||||
"title": "Layout Scrollabil Unificat în Meniul Mobil",
|
||||
"description": "Ca utilizator mobil, vreau întregul meniu hamburger să fie într-o singură zonă scrollabilă",
|
||||
"priority": 6,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6"
|
||||
},
|
||||
{
|
||||
"id": "US-607",
|
||||
"title": "Secțiune Utilizator Compactă în Meniul Mobil",
|
||||
"description": "Ca utilizator mobil, vreau secțiunea de utilizator să fie mai compactă",
|
||||
"priority": 7,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6"
|
||||
},
|
||||
{
|
||||
"id": "US-608",
|
||||
"title": "Fix Buton FAB SpeedDial în Lista Bonuri",
|
||||
"description": "Ca utilizator mobil, vreau butonul + din lista bonuri să afișeze un meniu SpeedDial",
|
||||
"priority": 8,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6 - BUT REGRESSION: SpeedDial not imported!"
|
||||
},
|
||||
{
|
||||
"id": "US-609",
|
||||
"title": "Buton Resetează pe Toate Paginile cu Filtre Mobil",
|
||||
"description": "Ca utilizator mobil, vreau butonul Resetează să apară pe toate paginile care au Filtrează",
|
||||
"priority": 9,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6"
|
||||
},
|
||||
{
|
||||
"id": "US-610",
|
||||
"title": "Eliminare Spațiu Gol Deasupra Tabelelor",
|
||||
"description": "Ca utilizator, vreau să nu existe spațiu gol excesiv între filtre și tabele",
|
||||
"priority": 10,
|
||||
"acceptanceCriteria": [
|
||||
"Completed"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in Phase 6"
|
||||
},
|
||||
{
|
||||
"id": "US-701",
|
||||
"title": "Reparare SpeedDial FAB pe Lista Bonuri",
|
||||
"description": "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",
|
||||
"priority": 11,
|
||||
"acceptanceCriteria": [
|
||||
"SpeedDial este importat corect din 'primevue/speeddial' în ReceiptsListView.vue",
|
||||
"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 mobile viewport: FAB vizibil în dreapta jos, click deschide 3 opțiuni"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 1"
|
||||
},
|
||||
{
|
||||
"id": "US-602",
|
||||
"title": "Tab-uri Clienți/Furnizori în Pagina Scadențe",
|
||||
"description": "Ca utilizator, vreau să pot comuta între Clienți și Furnizori folosind tab-uri pentru că în prezent ambele sunt afișate într-o singură listă lungă care este greu de navigat",
|
||||
"priority": 2,
|
||||
"id": "US-702",
|
||||
"title": "Verificare Meniu Acțiuni Per Bon",
|
||||
"description": "Ca utilizator, vreau să pot accesa meniul de acțiuni (...) pentru fiecare bon, pentru că trebuie să pot edita, șterge, valida bonurile individual",
|
||||
"priority": 12,
|
||||
"acceptanceCriteria": [
|
||||
"Pagina Analiză Scadențe (MaturityAnalysisView.vue) are 2 tab-uri: Clienți și Furnizori",
|
||||
"Tab-ul Clienți afișează lista De încasat cu totalul",
|
||||
"Tab-ul Furnizori afișează lista De plătit cu totalul",
|
||||
"Tab-urile funcționează pe desktop și mobil",
|
||||
"Starea tab-ului selectat este păstrată la navigare back",
|
||||
"npm run typecheck passes",
|
||||
"Verify in browser: Tabs switch between Clienți and Furnizori correctly"
|
||||
"Butonul ... pe fiecare bon deschide meniul popup cu opțiuni",
|
||||
"Meniul conține opțiunile corecte în funcție de status (Edit, View, Delete, Approve)",
|
||||
"Meniul se poziționează corect pe mobil și desktop (nu iese din viewport)",
|
||||
"npm run build passes"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 2"
|
||||
"passes": false,
|
||||
"notes": "Verifică menuItems computed property și toggleMenu funcția (linia 1453)"
|
||||
},
|
||||
{
|
||||
"id": "US-603",
|
||||
"title": "Implementare Pagină Facturi Detaliate",
|
||||
"description": "Ca utilizator, vreau să văd facturi detaliate când accesez Analize > Facturi Detaliate pentru că în prezent pagina redirecționează la Dashboard și nu afișează nimic util",
|
||||
"priority": 3,
|
||||
"id": "US-703",
|
||||
"title": "Navigare Hamburger pe Paginile Analize",
|
||||
"description": "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ă",
|
||||
"priority": 13,
|
||||
"acceptanceCriteria": [
|
||||
"Creează DetailedInvoicesView.vue în src/modules/reports/views/",
|
||||
"Pagina are 2 tab-uri: Clienți și Furnizori",
|
||||
"Fiecare tab afișează un tabel cu facturile detaliate (similar cu pagina Facturi dar filtrate)",
|
||||
"Ruta /reports/detailed-invoices funcționează și nu mai redirecționează",
|
||||
"Adaugă ruta în router (reports.routes.js)",
|
||||
"npm run typecheck passes",
|
||||
"Verify in browser: Page shows detailed invoices table with Clienți/Furnizori tabs"
|
||||
"MaturityAnalysisView.vue: MobileTopBar folosește :show-menu='true' și @menu-click='showDrawer = true'",
|
||||
"DetailedInvoicesView.vue: MobileTopBar folosește :show-menu='true' și @menu-click='showDrawer = true'",
|
||||
"Ambele view-uri au MobileDrawerMenu component importat și configurat corect",
|
||||
"Click pe hamburger deschide MobileDrawerMenu cu firma, perioada, tema",
|
||||
"Pattern identic cu InvoicesView.vue (liniile 4-11, 33-42)",
|
||||
"npm run build passes"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 3"
|
||||
"passes": false,
|
||||
"notes": "REVERT NECESAR: S-a schimbat greșit de la show-menu la show-back. Revino la pattern InvoicesView."
|
||||
},
|
||||
{
|
||||
"id": "US-604",
|
||||
"title": "Toggle Temă cu 3 Stări în Meniul Mobil",
|
||||
"description": "Ca utilizator mobil, vreau selectorul de temă să fie un singur buton toggle cu 3 stări pentru că cele 3 butoane separate ocupă prea mult spațiu în meniu",
|
||||
"priority": 4,
|
||||
"id": "US-704",
|
||||
"title": "Mărire Spațiu Tabel Scadențe",
|
||||
"description": "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",
|
||||
"priority": 14,
|
||||
"acceptanceCriteria": [
|
||||
"Înlocuiește cele 3 butoane de temă (Auto/Light/Dark) cu un singur toggle cyclic",
|
||||
"La click togglează între Auto → Light → Dark → Auto",
|
||||
"Afișează iconița și textul stării curente (ex: Auto sistem)",
|
||||
"Stilul este compact similar cu toggle-ul din header desktop",
|
||||
"npm run typecheck passes",
|
||||
"Verify in browser: Mobile menu theme selector cycles through 3 states on tap"
|
||||
"În MaturityAnalysisCard.vue: .maturity-list max-height crescut de la 250px la 400px",
|
||||
"În MaturityAnalysisCard.vue: @media 768px .maturity-list max-height crescut de la 200px la 350px",
|
||||
"min-height pe .tab-content redus pentru a nu forța scroll inutil",
|
||||
"Verify in browser desktop: cel puțin 8-10 rânduri vizibile fără scroll intern"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 5"
|
||||
"passes": false,
|
||||
"notes": "CSS current: linia 491 (max-height: 250px), linia 784 (max-height: 200px mobile)"
|
||||
},
|
||||
{
|
||||
"id": "US-605",
|
||||
"title": "Companie/Perioadă Colapsabile în Meniul Mobil",
|
||||
"description": "Ca utilizator mobil, vreau secțiunile Companie și Perioadă din meniu să fie colapsabile pentru că ocupă mult spațiu și rareori trebuie schimbate",
|
||||
"priority": 5,
|
||||
"id": "US-705",
|
||||
"title": "Reducere Padding și Margin Top Excesiv",
|
||||
"description": "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 are prea mult spațiu nefolosit",
|
||||
"priority": 15,
|
||||
"acceptanceCriteria": [
|
||||
"Secțiunile Firma și Perioada sunt colapsate by default",
|
||||
"Click pe header-ul secțiunii o expandează/colapsează",
|
||||
"Când sunt colapsate afișează doar numele firmei/perioadei curente într-o singură linie",
|
||||
"Starea colapsată este persistată în localStorage",
|
||||
"npm run typecheck passes",
|
||||
"Verify in browser: Tap on Firma/Perioada toggles expansion"
|
||||
"Reducere margin-bottom pe .page-header în paginile afectate",
|
||||
"Verificare și ajustare padding pe .app-container dacă e redundant",
|
||||
"Modificările nu afectează negativ layoutul altor pagini",
|
||||
"Verificare vizuală în mod desktop și mobil",
|
||||
"npm run build passes"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 6"
|
||||
},
|
||||
{
|
||||
"id": "US-606",
|
||||
"title": "Layout Scrollabil Unificat în Meniul Mobil",
|
||||
"description": "Ca utilizator mobil, vreau întregul meniu hamburger să fie într-o singură zonă scrollabilă pentru că acum secțiunea cu link-uri este foarte mică între header și footer fix",
|
||||
"priority": 6,
|
||||
"acceptanceCriteria": [
|
||||
"Meniul hamburger mobil nu mai are header/footer fixe",
|
||||
"Tot conținutul (logo firma perioada meniuri utilizator temă deconectare) scrollează împreună",
|
||||
"Înălțimea vizibilă pentru meniuri crește semnificativ (min 60% din ecran)",
|
||||
"npm run typecheck passes",
|
||||
"Verify in browser: Entire mobile menu scrolls as one unit"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 7"
|
||||
},
|
||||
{
|
||||
"id": "US-607",
|
||||
"title": "Secțiune Utilizator Compactă în Meniul Mobil",
|
||||
"description": "Ca utilizator mobil, vreau secțiunea de utilizator (nume temă deconectare) să fie mai compactă pentru că ocupă prea mult spațiu vertical",
|
||||
"priority": 7,
|
||||
"acceptanceCriteria": [
|
||||
"Numele utilizatorului și butonul Deconectare sunt pe aceeași linie",
|
||||
"Toggle-ul de temă este pe o linie separată dar compact (vezi US-604)",
|
||||
"Spațiul total ocupat de secțiunea utilizator redus cu cel puțin 50%",
|
||||
"npm run typecheck passes",
|
||||
"Verify in browser: User section is visually compact"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 8"
|
||||
},
|
||||
{
|
||||
"id": "US-608",
|
||||
"title": "Fix Buton FAB SpeedDial în Lista Bonuri",
|
||||
"description": "Ca utilizator mobil, vreau butonul + din lista bonuri să afișeze un meniu SpeedDial pentru că în prezent se schimbă în X dar nu apare niciun meniu",
|
||||
"priority": 8,
|
||||
"acceptanceCriteria": [
|
||||
"Click pe FAB (+) afișează opțiuni SpeedDial animate",
|
||||
"Opțiuni: Bon Nou Manual, Scanare Bon OCR, Upload în Masă",
|
||||
"Click pe opțiune navighează la pagina corespunzătoare",
|
||||
"Click în afara meniului sau pe X îl închide",
|
||||
"npm run typecheck passes",
|
||||
"Verify in browser: FAB shows SpeedDial menu with 3 options on tap"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 9"
|
||||
},
|
||||
{
|
||||
"id": "US-609",
|
||||
"title": "Buton Resetează pe Toate Paginile cu Filtre Mobil",
|
||||
"description": "Ca utilizator mobil, vreau butonul Resetează să apară pe toate paginile care au Filtrează pentru că în prezent doar Balanța are acest buton",
|
||||
"priority": 9,
|
||||
"acceptanceCriteria": [
|
||||
"Pagina Facturi mobil: header include buton Resetează lângă Filtrează",
|
||||
"Pagina Casă mobil: header include buton Resetează lângă Filtrează",
|
||||
"Pagina Bancă mobil: header include buton Resetează lângă Filtrează",
|
||||
"Pagina Lista Bonuri mobil: header include buton Resetează lângă Filtrează",
|
||||
"Butonul resetează toate filtrele la valorile default",
|
||||
"npm run typecheck passes",
|
||||
"Verify in browser: All filter pages show Reset button in mobile header"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 10"
|
||||
},
|
||||
{
|
||||
"id": "US-610",
|
||||
"title": "Eliminare Spațiu Gol Deasupra Tabelelor",
|
||||
"description": "Ca utilizator, vreau să nu existe spațiu gol excesiv între filtre și tabele pentru că este raportat că există spațiu gol mare pe mai multe pagini",
|
||||
"priority": 10,
|
||||
"acceptanceCriteria": [
|
||||
"Investighează CSS-ul paginilor: Facturi Balanță Casă Bancă Lista Bonuri",
|
||||
"Identifică sursa spațiului gol (margin/padding excesiv container gol etc)",
|
||||
"Elimină spațiul gol păstrând designul consistent",
|
||||
"Verifică pe desktop ȘI pe mobil",
|
||||
"npm run typecheck passes",
|
||||
"Verify in browser: No excessive gap between filters and table on all pages"
|
||||
],
|
||||
"passes": true,
|
||||
"notes": "Completed in iteration 11"
|
||||
"passes": false,
|
||||
"notes": "Afectează MaturityAnalysisView, DetailedInvoicesView. Folosește design tokens din CSS_PATTERNS.md"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -308,3 +308,76 @@ PRD: tasks/prd-ui-fixes-phase6.md
|
||||
[2026-01-13 16:42:29] Working on story: US-610
|
||||
[2026-01-13 16:42:29] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_11_US-610.log)
|
||||
[2026-01-13 16:48:47] SUCCESS: Story US-610 passed!
|
||||
[2026-01-13 16:48:47] Changes committed
|
||||
[2026-01-13 16:48:47] Progress: 10/10 stories completed
|
||||
[2026-01-13 16:48:49] === Iteration 12/30 ===
|
||||
[2026-01-13 16:48:49] SUCCESS: All stories completed! 🎉
|
||||
[2026-01-13 16:48:49] === Ralph Session Complete ===
|
||||
[2026-01-13 16:48:49] Final progress: 10/10 stories completed
|
||||
[2026-01-13 16:48:49] Branch: ralph/ui-fixes-phase6
|
||||
[2026-01-13 16:48:49] Logs: /workspace/roa2web/scripts/ralph/logs
|
||||
|
||||
---
|
||||
|
||||
## ══════════════════════════════════════════════════════════════
|
||||
## Phase 6: UI/UX Fixes - Menu Consistency & Mobile (COMPLETED ✓)
|
||||
## ══════════════════════════════════════════════════════════════
|
||||
Started: Mon Jan 13 16:00:00 UTC 2026
|
||||
Completed: Mon Jan 13 16:49:33 UTC 2026
|
||||
Project: ui-fixes-phase6
|
||||
Branch: ralph/ui-fixes-phase6
|
||||
Stories: 10/10 completed (US-601 to US-610)
|
||||
|
||||
Summary:
|
||||
- US-601: Added Analize section to Desktop Sidebar ✓
|
||||
- US-602: TabView Clienți/Furnizori in Scadențe page ✓
|
||||
- US-603: Created DetailedInvoicesView.vue with tabs ✓
|
||||
- US-604: Cyclic theme toggle (3-state) in mobile menu ✓
|
||||
- US-605: Collapsible Firma/Perioada with localStorage ✓
|
||||
- US-606: Unified scrollable mobile menu layout ✓
|
||||
- US-607: Compact user section (name + logout inline) ✓
|
||||
- US-608: Fixed FAB SpeedDial bug in Lista Bonuri ✓
|
||||
- US-609: Added Reset button to all filter pages ✓
|
||||
- US-610: Removed excessive empty space above tables ✓
|
||||
|
||||
Stats:
|
||||
- Iterations used: 11 (1 retry for US-604)
|
||||
- Execution time: ~50 minutes
|
||||
- Files changed: 40+ files across iterations
|
||||
- Net code change: +796/-724 lines
|
||||
|
||||
---
|
||||
|
||||
## ══════════════════════════════════════════════════════════════
|
||||
## Phase 6 Continuation: Regression Fixes (US-701 to US-705)
|
||||
## ══════════════════════════════════════════════════════════════
|
||||
Started: Mon Jan 13 20:50:00 UTC 2026
|
||||
Project: mobile-ui-fixes-phase5 (regression fixes)
|
||||
Branch: ralph/ui-fixes-phase6 (continuing)
|
||||
Stories: 5 new (US-701 to US-705)
|
||||
|
||||
PRD: tasks/prd-mobile-ui-fixes-phase5.md
|
||||
|
||||
### Stories Overview:
|
||||
|
||||
**Critical Regressions (1-2):**
|
||||
- [ ] US-701: Reparare SpeedDial FAB pe Lista Bonuri (import lipsă!)
|
||||
- [ ] US-702: Verificare Meniu Acțiuni (...) Per Bon
|
||||
|
||||
**Navigation Fix (3):**
|
||||
- [ ] US-703: Navigare Hamburger pe Paginile Analize (revert show-back → show-menu)
|
||||
|
||||
**UI Improvements (4-5):**
|
||||
- [ ] US-704: Mărire Spațiu Tabel Scadențe (max-height 250→400px)
|
||||
- [ ] US-705: Reducere Padding/Margin Top Excesiv
|
||||
|
||||
---
|
||||
|
||||
### Iteration Log:
|
||||
|
||||
[2026-01-13 22:26:47] Starting Ralph for project: ui-fixes-phase6
|
||||
[2026-01-13 22:26:47] Max iterations: 15
|
||||
[2026-01-13 22:26:47] === Iteration 1/15 ===
|
||||
[2026-01-13 22:26:47] Working on story: US-701
|
||||
[2026-01-13 22:26:47] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_1_US-701.log)
|
||||
[2026-01-13 22:29:57] SUCCESS: Story US-701 passed!
|
||||
|
||||
@@ -133,6 +133,7 @@
|
||||
v-model="showDrawer"
|
||||
:user="authStore.user"
|
||||
:companies-store="companyStore"
|
||||
:period-store="periodStore"
|
||||
@logout="handleLogout"
|
||||
/>
|
||||
|
||||
@@ -1078,7 +1079,7 @@ import { useRouter } from 'vue-router'
|
||||
import { useToast } from 'primevue/usetoast'
|
||||
import { useConfirm } from 'primevue/useconfirm'
|
||||
import { useReceiptsStore } from '@data-entry/stores/receiptsStore'
|
||||
import { useCompanyStore, useAuthStore } from '@data-entry/stores/sharedStores'
|
||||
import { useCompanyStore, useAuthStore, useAccountingPeriodStore } from '@data-entry/stores/sharedStores'
|
||||
import { useBatchProgressStore } from '@data-entry/stores/batchProgressStore'
|
||||
import Menu from 'primevue/menu'
|
||||
import Dialog from 'primevue/dialog'
|
||||
@@ -1096,6 +1097,7 @@ import { exportToExcel, exportToPDF } from '@reports/utils/exportUtils'
|
||||
import BatchGroupHeader from '@data-entry/components/bulk/BatchGroupHeader.vue'
|
||||
import ProcessingStatusCell from '@data-entry/components/bulk/ProcessingStatusCell.vue'
|
||||
import Paginator from 'primevue/paginator'
|
||||
import SpeedDial from 'primevue/speeddial'
|
||||
import { sseService } from '@data-entry/services/sseService'
|
||||
|
||||
const router = useRouter()
|
||||
@@ -1103,6 +1105,7 @@ const toast = useToast()
|
||||
const confirm = useConfirm()
|
||||
const store = useReceiptsStore()
|
||||
const companyStore = useCompanyStore()
|
||||
const periodStore = useAccountingPeriodStore()
|
||||
const batchProgressStore = useBatchProgressStore()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<!-- US-602: TabView for Clienți/Furnizori -->
|
||||
<!-- US-608: Flat content structure (tabs controlled by parent view) -->
|
||||
<div class="maturity-card">
|
||||
<div class="card-header">
|
||||
<h3>Analiză Scadențe</h3>
|
||||
<!-- Period selector (only shown on desktop, mobile uses view header) -->
|
||||
<div class="card-controls">
|
||||
<select
|
||||
v-model="selectedPeriod"
|
||||
@change="handlePeriodChange"
|
||||
@@ -29,18 +29,10 @@
|
||||
<button @click="loadData" class="retry-btn">Încearcă din nou</button>
|
||||
</div>
|
||||
|
||||
<!-- US-602: TabView for Clienți/Furnizori -->
|
||||
<TabView v-else v-model:activeIndex="activeTabIndex" class="maturity-tabs">
|
||||
<!-- Tab Clienți -->
|
||||
<TabPanel>
|
||||
<template #header>
|
||||
<span class="tab-header">
|
||||
<i class="pi pi-users"></i>
|
||||
<span class="tab-title">Clienți</span>
|
||||
<span class="tab-total">{{ formatCurrency(clientsTotal) }}</span>
|
||||
</span>
|
||||
</template>
|
||||
<div class="tab-content">
|
||||
<!-- US-608: Content based on activeTab prop (no TabView) -->
|
||||
<div v-else class="maturity-content">
|
||||
<!-- Clienți Content -->
|
||||
<div v-if="activeTab === 'clients'" class="tab-content">
|
||||
<div class="maturity-list">
|
||||
<div
|
||||
v-for="(client, index) in clientsData"
|
||||
@@ -86,18 +78,9 @@
|
||||
<span class="summary-value clients-value">{{ formatCurrency(clientsTotal) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
<!-- Tab Furnizori -->
|
||||
<TabPanel>
|
||||
<template #header>
|
||||
<span class="tab-header">
|
||||
<i class="pi pi-building"></i>
|
||||
<span class="tab-title">Furnizori</span>
|
||||
<span class="tab-total">{{ formatCurrency(suppliersTotal) }}</span>
|
||||
</span>
|
||||
</template>
|
||||
<div class="tab-content">
|
||||
<!-- Furnizori Content -->
|
||||
<div v-else-if="activeTab === 'suppliers'" class="tab-content">
|
||||
<div class="maturity-list">
|
||||
<div
|
||||
v-for="(supplier, index) in suppliersData"
|
||||
@@ -144,8 +127,7 @@
|
||||
<span class="summary-value suppliers-value">{{ formatCurrency(suppliersTotal) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
|
||||
<!-- Balance Indicator -->
|
||||
<div v-if="!isLoading && !error" class="balance-indicator">
|
||||
@@ -196,54 +178,34 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from "vue";
|
||||
import TabView from "primevue/tabview";
|
||||
import TabPanel from "primevue/tabpanel";
|
||||
import { useDashboardStore } from "@reports/stores/dashboard";
|
||||
|
||||
// US-602: Tab state storage key
|
||||
const TAB_STORAGE_KEY = "maturity_analysis_active_tab";
|
||||
|
||||
// Props
|
||||
const props = defineProps({
|
||||
companyId: {
|
||||
type: [Number, String],
|
||||
required: true,
|
||||
},
|
||||
// US-602: Allow external tab control (e.g., from route query)
|
||||
initialTab: {
|
||||
type: Number,
|
||||
default: null,
|
||||
// US-608: Tab is now controlled by parent view
|
||||
activeTab: {
|
||||
type: String,
|
||||
default: 'clients',
|
||||
validator: (value) => ['clients', 'suppliers'].includes(value)
|
||||
},
|
||||
});
|
||||
|
||||
// Emits
|
||||
const emit = defineEmits(["periodChanged", "tabChanged"]);
|
||||
const emit = defineEmits(["periodChanged"]);
|
||||
|
||||
// Store
|
||||
const dashboardStore = useDashboardStore();
|
||||
|
||||
// US-602: Initialize tab from prop, localStorage, or default to 0 (Clienți)
|
||||
const getInitialTabIndex = () => {
|
||||
if (props.initialTab !== null) {
|
||||
return props.initialTab;
|
||||
}
|
||||
const stored = localStorage.getItem(TAB_STORAGE_KEY);
|
||||
return stored !== null ? parseInt(stored, 10) : 0;
|
||||
};
|
||||
|
||||
// Reactive state
|
||||
const activeTabIndex = ref(getInitialTabIndex());
|
||||
const selectedPeriod = ref("1m");
|
||||
const isLoading = ref(false);
|
||||
const error = ref(null);
|
||||
const lastUpdated = ref(null);
|
||||
|
||||
// US-602: Watch tab changes and persist to localStorage
|
||||
watch(activeTabIndex, (newIndex) => {
|
||||
localStorage.setItem(TAB_STORAGE_KEY, newIndex.toString());
|
||||
emit("tabChanged", newIndex);
|
||||
});
|
||||
|
||||
// Mock data structure - in production this would come from API
|
||||
const maturityData = ref({
|
||||
clients: [],
|
||||
@@ -384,48 +346,31 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Base Card Styles */
|
||||
/* US-608: Flat content structure (no card wrapper) */
|
||||
.maturity-card {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--card-radius, 8px);
|
||||
padding: 0;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all var(--transition-fast, 0.3s ease);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.maturity-card:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* Card Header */
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-lg, 1rem);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
font-size: var(--text-lg, 1.125rem);
|
||||
font-weight: var(--font-semibold, 600);
|
||||
color: var(--color-text);
|
||||
/* Card Controls (period selector) */
|
||||
.card-controls {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: var(--space-md);
|
||||
background: var(--surface-card);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.period-selector {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm, 4px);
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-size: var(--text-sm, 0.875rem);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface-card);
|
||||
color: var(--text-color);
|
||||
font-size: var(--text-sm);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease;
|
||||
transition: border-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.period-selector:hover {
|
||||
@@ -437,6 +382,13 @@ onMounted(() => {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Maturity Content Container */
|
||||
.maturity-content {
|
||||
background: var(--surface-card);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Loading and Error States */
|
||||
.loading-state,
|
||||
.error-state {
|
||||
@@ -478,38 +430,6 @@ onMounted(() => {
|
||||
background: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
/* US-602: TabView Styles */
|
||||
.maturity-tabs {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Tab header styles */
|
||||
.tab-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-xs) 0;
|
||||
}
|
||||
|
||||
.tab-header i {
|
||||
font-size: var(--text-base);
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
.tab-title {
|
||||
font-weight: var(--font-medium);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.tab-total {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-bold);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
background: var(--surface-hover);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* Tab content */
|
||||
.tab-content {
|
||||
padding: var(--space-md);
|
||||
@@ -820,37 +740,21 @@ onMounted(() => {
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
text-align: center;
|
||||
font-size: var(--text-base);
|
||||
.card-controls {
|
||||
justify-content: center;
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
|
||||
.period-selector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* US-602: Mobile tab adjustments */
|
||||
/* US-608: Mobile tab adjustments */
|
||||
.tab-content {
|
||||
padding: var(--space-sm);
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.tab-header {
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.tab-total {
|
||||
font-size: var(--text-xs);
|
||||
padding: 2px var(--space-xs);
|
||||
}
|
||||
|
||||
.tab-summary {
|
||||
padding: var(--space-sm);
|
||||
flex-direction: column;
|
||||
@@ -876,22 +780,13 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.maturity-card {
|
||||
margin: 0 calc(-1 * var(--space-sm));
|
||||
}
|
||||
|
||||
.card-header,
|
||||
.balance-indicator,
|
||||
.card-footer {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.maturity-list {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.tab-title {
|
||||
font-size: var(--text-sm);
|
||||
.balance-indicator,
|
||||
.card-footer {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,23 +1,15 @@
|
||||
<template>
|
||||
<div class="cache-stats-view" :class="{ 'mobile-layout': isMobile }">
|
||||
<!-- US-111: Mobile Material Design Top Bar -->
|
||||
<!-- US-608: Mobile Material Design Top Bar with Back Button -->
|
||||
<MobileTopBar
|
||||
v-if="isMobile"
|
||||
title="Statistici Cache"
|
||||
:show-menu="true"
|
||||
:show-back="true"
|
||||
:actions="mobileTopBarActions"
|
||||
@menu-click="showDrawer = true"
|
||||
@back-click="router.push('/settings')"
|
||||
@action-click="handleTopBarAction"
|
||||
/>
|
||||
|
||||
<!-- Mobile Drawer Menu (replaces old Sidebar) -->
|
||||
<MobileDrawerMenu
|
||||
v-model="showDrawer"
|
||||
:user="authStore.user"
|
||||
:companies-store="companyStore"
|
||||
@logout="handleLogout"
|
||||
/>
|
||||
|
||||
<!-- Desktop Header -->
|
||||
<div class="stats-header" v-if="!isMobile">
|
||||
<h1>Cache Statistics</h1>
|
||||
@@ -206,7 +198,7 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from "vue";
|
||||
import { useCacheStore } from "@reports/stores/cacheStore";
|
||||
import { useCompanyStore, useAuthStore } from "@reports/stores/sharedStores";
|
||||
import { useCompanyStore, useAuthStore, useAccountingPeriodStore } from "@reports/stores/sharedStores";
|
||||
import { useToast } from "primevue/usetoast";
|
||||
import Button from "primevue/button";
|
||||
import Card from "primevue/card";
|
||||
@@ -218,15 +210,15 @@ import InputSwitch from "primevue/inputswitch";
|
||||
import Dialog from "primevue/dialog";
|
||||
import RadioButton from "primevue/radiobutton";
|
||||
import Message from "primevue/message";
|
||||
// US-111: Mobile Material Design components
|
||||
// US-111/US-608: Mobile Material Design components
|
||||
import MobileTopBar from "@shared/components/mobile/MobileTopBar.vue";
|
||||
import MobileBottomNav from "@shared/components/mobile/MobileBottomNav.vue";
|
||||
import MobileDrawerMenu from "@shared/components/mobile/MobileDrawerMenu.vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
const router = useRouter();
|
||||
const cacheStore = useCacheStore();
|
||||
const companyStore = useCompanyStore();
|
||||
const periodStore = useAccountingPeriodStore();
|
||||
const toast = useToast();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
@@ -238,15 +230,8 @@ const userCacheEnabled = ref(true);
|
||||
const showClearDialog = ref(false);
|
||||
const clearScope = ref("current");
|
||||
|
||||
// US-111: Mobile state
|
||||
// US-111/US-608: Mobile state
|
||||
const isMobile = ref(window.innerWidth < 768);
|
||||
const showDrawer = ref(false);
|
||||
|
||||
// Handle logout from drawer menu
|
||||
const handleLogout = async () => {
|
||||
await authStore.logout();
|
||||
router.push('/login');
|
||||
};
|
||||
|
||||
// US-111: Mobile TopBar actions (refresh only for cache stats)
|
||||
const mobileTopBarActions = computed(() => [
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<!-- US-513: Simplified Mobile Top Bar - no filters/export since no detailed data -->
|
||||
<!-- US-608: Mobile Top Bar with Back Button -->
|
||||
<MobileTopBar
|
||||
v-if="isMobile"
|
||||
title="Scadențe"
|
||||
@@ -7,13 +7,56 @@
|
||||
@back-click="goBack"
|
||||
/>
|
||||
|
||||
<main class="main-content" :class="{ 'mobile-layout': isMobile }">
|
||||
<!-- US-608: Mobile Tabs (sticky below MobileTopBar) - like DetailedInvoicesView -->
|
||||
<div v-if="isMobile && companyStore.selectedCompany" class="mobile-tabs-container">
|
||||
<div class="mobile-tabs">
|
||||
<button
|
||||
class="mobile-tab"
|
||||
:class="{ active: activeTab === 'clients' }"
|
||||
@click="switchTab('clients')"
|
||||
>
|
||||
<span class="tab-label">Clienți</span>
|
||||
</button>
|
||||
<button
|
||||
class="mobile-tab"
|
||||
:class="{ active: activeTab === 'suppliers' }"
|
||||
@click="switchTab('suppliers')"
|
||||
>
|
||||
<span class="tab-label">Furnizori</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="main-content" :class="{ 'mobile-layout': isMobile, 'has-tabs': isMobile && companyStore.selectedCompany }">
|
||||
<div class="app-container">
|
||||
<!-- Page Header - only on desktop -->
|
||||
<div v-if="!isMobile" class="page-header">
|
||||
<div class="header-top">
|
||||
<div>
|
||||
<h1 class="page-title">Analiză Scadențe</h1>
|
||||
<p class="page-subtitle">Analiza scadențelor clienți și furnizori</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- US-608: Desktop Tabs (in header) -->
|
||||
<div v-if="companyStore.selectedCompany" class="desktop-tabs">
|
||||
<button
|
||||
class="desktop-tab"
|
||||
:class="{ active: activeTab === 'clients' }"
|
||||
@click="switchTab('clients')"
|
||||
>
|
||||
<i class="pi pi-users"></i>
|
||||
<span>Clienți</span>
|
||||
</button>
|
||||
<button
|
||||
class="desktop-tab"
|
||||
:class="{ active: activeTab === 'suppliers' }"
|
||||
@click="switchTab('suppliers')"
|
||||
>
|
||||
<i class="pi pi-building"></i>
|
||||
<span>Furnizori</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading state when no company selected -->
|
||||
<div v-if="!companyStore.selectedCompany" class="empty-state">
|
||||
@@ -30,14 +73,13 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Main content - MaturityAnalysisCard (US-513: doar analiza scadențelor, fără facturi detaliate) -->
|
||||
<!-- US-602: Now with TabView for Clienți/Furnizori -->
|
||||
<div v-else class="maturity-container">
|
||||
<!-- US-608: Flat content structure - no card wrapper -->
|
||||
<div v-else class="maturity-content">
|
||||
<MaturityAnalysisCard
|
||||
ref="maturityCardRef"
|
||||
:companyId="companyStore.selectedCompany?.id_firma"
|
||||
:activeTab="activeTab"
|
||||
@periodChanged="handlePeriodChange"
|
||||
@tabChanged="handleTabChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -49,7 +91,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import Button from 'primevue/button'
|
||||
import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
|
||||
import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue'
|
||||
@@ -57,6 +99,7 @@ import MaturityAnalysisCard from '@reports/components/dashboard/cards/MaturityAn
|
||||
import { useCompanyStore } from '@reports/stores/sharedStores'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const companyStore = useCompanyStore()
|
||||
|
||||
// Detectare mobile - reactive with resize listener
|
||||
@@ -66,6 +109,30 @@ const isMobile = computed(() => windowWidth.value < 768)
|
||||
// Ref to MaturityAnalysisCard
|
||||
const maturityCardRef = ref(null)
|
||||
|
||||
// US-608: Tab state (persisted via URL query)
|
||||
const TAB_STORAGE_KEY = 'maturity_analysis_active_tab'
|
||||
|
||||
const getInitialTab = () => {
|
||||
// Check URL query first
|
||||
if (route.query.tab === 'suppliers') return 'suppliers'
|
||||
// Then localStorage
|
||||
const stored = localStorage.getItem(TAB_STORAGE_KEY)
|
||||
if (stored === 'suppliers') return 'suppliers'
|
||||
return 'clients'
|
||||
}
|
||||
|
||||
const activeTab = ref(getInitialTab())
|
||||
|
||||
// US-608: Switch tab and update URL
|
||||
const switchTab = (tab) => {
|
||||
activeTab.value = tab
|
||||
localStorage.setItem(TAB_STORAGE_KEY, tab)
|
||||
// Update URL without full navigation
|
||||
router.replace({
|
||||
query: tab === 'suppliers' ? { tab: 'suppliers' } : {}
|
||||
})
|
||||
}
|
||||
|
||||
// Handle window resize for mobile detection
|
||||
const handleResize = () => {
|
||||
windowWidth.value = window.innerWidth
|
||||
@@ -81,11 +148,6 @@ const handlePeriodChange = (period) => {
|
||||
console.log('Maturity period changed:', period)
|
||||
}
|
||||
|
||||
// US-602: Handle tab change
|
||||
const handleTabChange = (tabIndex) => {
|
||||
console.log('Tab changed:', tabIndex === 0 ? 'Clienți' : 'Furnizori')
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', handleResize)
|
||||
@@ -103,6 +165,11 @@ onUnmounted(() => {
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
|
||||
/* US-608: Extra padding when tabs are visible on mobile */
|
||||
.main-content.mobile-layout.has-tabs {
|
||||
padding-top: calc(56px + 48px);
|
||||
}
|
||||
|
||||
/* App container */
|
||||
.app-container {
|
||||
max-width: 1400px;
|
||||
@@ -117,11 +184,17 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
/* Page Header - Desktop only */
|
||||
/* US-514: Reduced from var(--space-xl) to var(--space-md) for less excessive top spacing */
|
||||
.page-header {
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.header-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: var(--font-bold);
|
||||
@@ -135,8 +208,102 @@ onUnmounted(() => {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Maturity container */
|
||||
.maturity-container {
|
||||
/* ================================================
|
||||
US-608: Mobile Tabs (sticky below MobileTopBar)
|
||||
Copied from DetailedInvoicesView for consistency
|
||||
================================================ */
|
||||
|
||||
.mobile-tabs-container {
|
||||
position: fixed;
|
||||
top: 56px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: var(--z-sticky, 100);
|
||||
background: var(--surface-card);
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
}
|
||||
|
||||
.mobile-tabs {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mobile-tab {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-md);
|
||||
min-height: 48px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
color: var(--text-color-secondary);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
|
||||
.mobile-tab.active {
|
||||
color: var(--color-primary);
|
||||
border-bottom-color: var(--color-primary);
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
.mobile-tab:hover:not(.active) {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* ================================================
|
||||
US-608: Desktop Tabs (in page-header)
|
||||
================================================ */
|
||||
|
||||
.desktop-tabs {
|
||||
display: flex;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.desktop-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
background: var(--surface-hover);
|
||||
border: 1px solid var(--surface-border);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
color: var(--text-color-secondary);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
|
||||
.desktop-tab:hover:not(.active) {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.desktop-tab.active {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-text-inverse, white);
|
||||
}
|
||||
|
||||
.desktop-tab i {
|
||||
font-size: var(--text-base);
|
||||
}
|
||||
|
||||
/* ================================================
|
||||
US-608: Flat content (no card wrapper)
|
||||
================================================ */
|
||||
|
||||
.maturity-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-lg);
|
||||
@@ -180,4 +347,40 @@ onUnmounted(() => {
|
||||
.empty-action {
|
||||
margin-top: var(--space-md);
|
||||
}
|
||||
|
||||
/* ================================================
|
||||
Dark Mode Support
|
||||
================================================ */
|
||||
|
||||
[data-theme="dark"] .mobile-tabs-container {
|
||||
background: var(--surface-card);
|
||||
border-bottom-color: var(--surface-border);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .mobile-tab.active {
|
||||
color: var(--blue-400);
|
||||
border-bottom-color: var(--blue-400);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .desktop-tab.active {
|
||||
background: var(--blue-600);
|
||||
border-color: var(--blue-600);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme]) .mobile-tabs-container {
|
||||
background: var(--surface-card);
|
||||
border-bottom-color: var(--surface-border);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .mobile-tab.active {
|
||||
color: var(--blue-400);
|
||||
border-bottom-color: var(--blue-400);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .desktop-tab.active {
|
||||
background: var(--blue-600);
|
||||
border-color: var(--blue-600);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,22 +1,15 @@
|
||||
<template>
|
||||
<div class="server-logs-view" :class="{ 'mobile-layout': isMobile }">
|
||||
<!-- US-110: Mobile Material Design Top Bar -->
|
||||
<!-- US-608: Mobile Material Design Top Bar with Back Button -->
|
||||
<MobileTopBar
|
||||
v-if="isMobile"
|
||||
title="Loguri Server"
|
||||
:show-menu="true"
|
||||
:show-back="true"
|
||||
:actions="mobileTopBarActions"
|
||||
@menu-click="showDrawer = true"
|
||||
@back-click="router.push('/settings')"
|
||||
@action-click="handleTopBarAction"
|
||||
/>
|
||||
|
||||
<!-- Mobile Drawer Menu (replaces old Sidebar) -->
|
||||
<MobileDrawerMenu
|
||||
v-model="showDrawer"
|
||||
:user="authStore.user"
|
||||
@logout="handleLogout"
|
||||
/>
|
||||
|
||||
<!-- Desktop Header -->
|
||||
<div class="stats-header" v-if="!isMobile">
|
||||
<h1>
|
||||
@@ -140,11 +133,9 @@ import Tag from 'primevue/tag'
|
||||
import axios from 'axios'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
// US-110: Mobile Material Design components
|
||||
// US-110/US-608: Mobile Material Design components
|
||||
import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
|
||||
import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue'
|
||||
import MobileDrawerMenu from '@shared/components/mobile/MobileDrawerMenu.vue'
|
||||
import { useAuthStore } from '@reports/stores/sharedStores'
|
||||
|
||||
// System API - endpoint separat de reports
|
||||
const systemApi = axios.create({
|
||||
@@ -162,7 +153,6 @@ systemApi.interceptors.request.use((config) => {
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
// State
|
||||
const logs = ref([])
|
||||
@@ -182,15 +172,8 @@ const debugInfo = ref({
|
||||
|
||||
let refreshTimer = null
|
||||
|
||||
// US-110: Mobile state
|
||||
// US-110/US-608: Mobile state
|
||||
const isMobile = ref(window.innerWidth < 768)
|
||||
const showDrawer = ref(false)
|
||||
|
||||
// Handle logout from drawer menu
|
||||
const handleLogout = async () => {
|
||||
await authStore.logout()
|
||||
router.push('/login')
|
||||
}
|
||||
|
||||
// US-110: Mobile TopBar actions (refresh, export)
|
||||
const mobileTopBarActions = computed(() => [
|
||||
|
||||
@@ -12,23 +12,11 @@
|
||||
</div>
|
||||
|
||||
<!-- Company & Period Selection (below header, above navigation) -->
|
||||
<!-- US-605: Collapsible sections with localStorage persistence -->
|
||||
<!-- US-608: Direct dropdowns (no collapsible sections) -->
|
||||
<div v-if="companiesStore" class="drawer-selectors">
|
||||
<!-- Company Selector (Collapsible) -->
|
||||
<div class="selector-group" :class="{ 'is-collapsed': companyCollapsed }">
|
||||
<!-- Collapsible Header -->
|
||||
<button
|
||||
class="collapsible-header"
|
||||
@click="toggleCompanyCollapsed"
|
||||
:aria-expanded="!companyCollapsed"
|
||||
>
|
||||
<span class="collapsible-label">Firma</span>
|
||||
<span v-if="companyCollapsed" class="collapsible-value">{{ selectedCompanyName }}</span>
|
||||
<i class="pi" :class="companyCollapsed ? 'pi-chevron-down' : 'pi-chevron-up'"></i>
|
||||
</button>
|
||||
|
||||
<!-- Expanded Content -->
|
||||
<div v-if="!companyCollapsed" class="collapsible-content">
|
||||
<!-- Company Selector (Direct Dropdown) -->
|
||||
<div class="selector-group">
|
||||
<label class="selector-label">Firma</label>
|
||||
<button
|
||||
class="selector-trigger"
|
||||
@click="toggleCompanyDropdown"
|
||||
@@ -73,23 +61,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Period Selector (Collapsible) -->
|
||||
<div v-if="periodStore && companiesStore.selectedCompany" class="selector-group" :class="{ 'is-collapsed': periodCollapsed }">
|
||||
<!-- Collapsible Header -->
|
||||
<button
|
||||
class="collapsible-header"
|
||||
@click="togglePeriodCollapsed"
|
||||
:aria-expanded="!periodCollapsed"
|
||||
>
|
||||
<span class="collapsible-label">Perioada</span>
|
||||
<span v-if="periodCollapsed" class="collapsible-value">{{ selectedPeriodDisplay }}</span>
|
||||
<i class="pi" :class="periodCollapsed ? 'pi-chevron-down' : 'pi-chevron-up'"></i>
|
||||
</button>
|
||||
|
||||
<!-- Expanded Content -->
|
||||
<div v-if="!periodCollapsed" class="collapsible-content">
|
||||
<!-- Period Selector (Direct Dropdown) -->
|
||||
<div v-if="periodStore && companiesStore.selectedCompany" class="selector-group">
|
||||
<label class="selector-label">Perioada</label>
|
||||
<button
|
||||
class="selector-trigger"
|
||||
@click="togglePeriodDropdown"
|
||||
@@ -121,7 +96,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section Divider after selectors -->
|
||||
<div v-if="companiesStore" class="drawer-divider"></div>
|
||||
@@ -252,8 +226,8 @@ import { computed, ref, watch, nextTick, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
/**
|
||||
* MobileDrawerMenu - Material Design 3 inspired navigation drawer for mobile (v3)
|
||||
* US-605: Added collapsible Firma/Perioada sections
|
||||
* MobileDrawerMenu - Material Design 3 inspired navigation drawer for mobile (v4)
|
||||
* US-608: Direct dropdown selectors (removed collapsible sections)
|
||||
*
|
||||
* Props:
|
||||
* - modelValue (v-model): Controls visibility of the drawer
|
||||
@@ -271,15 +245,16 @@ import { useRoute, useRouter } from 'vue-router'
|
||||
* Features:
|
||||
* - Slide-in animation from left
|
||||
* - Header with ROA2WEB logo
|
||||
* - Company & Period selectors (below header, like desktop)
|
||||
* - Company & Period selectors as direct dropdowns (1-tap interaction)
|
||||
* - Navigation organized into 4 category sections:
|
||||
* - PRINCIPALE: Dashboard, Bonuri
|
||||
* - RAPOARTE: Facturi, Balanță, Casă, Bancă (US-519: separate pages)
|
||||
* - RAPOARTE: Facturi, Balanță, Casă, Bancă
|
||||
* - ANALIZE: Scadențe, Facturi Detaliate
|
||||
* - ADMINISTRARE: Setări
|
||||
* - Visual separators between sections
|
||||
* - Active state highlighting based on current route
|
||||
* - Profile section with user name and logout button (footer)
|
||||
* - Profile section with user name, logout button, and theme toggle
|
||||
* - Theme toggle cycles through: Auto → Light → Dark
|
||||
* - Close on tap outside or on link click
|
||||
* - Full dark mode support
|
||||
* - Teleported to body to avoid z-index issues
|
||||
@@ -341,55 +316,7 @@ const companySearchInput = ref(null)
|
||||
// Period selector state
|
||||
const periodDropdownOpen = ref(false)
|
||||
|
||||
// Collapsible section state (US-605)
|
||||
// Default to collapsed, persisted in localStorage
|
||||
const COLLAPSED_STORAGE_KEY = 'mobile-drawer-sections-collapsed'
|
||||
|
||||
const loadCollapsedState = () => {
|
||||
try {
|
||||
const saved = localStorage.getItem(COLLAPSED_STORAGE_KEY)
|
||||
if (saved) {
|
||||
return JSON.parse(saved)
|
||||
}
|
||||
} catch (e) {
|
||||
// Ignore parse errors
|
||||
}
|
||||
// Default: both sections collapsed
|
||||
return { company: true, period: true }
|
||||
}
|
||||
|
||||
const savedCollapsedState = loadCollapsedState()
|
||||
const companyCollapsed = ref(savedCollapsedState.company)
|
||||
const periodCollapsed = ref(savedCollapsedState.period)
|
||||
|
||||
const saveCollapsedState = () => {
|
||||
try {
|
||||
localStorage.setItem(COLLAPSED_STORAGE_KEY, JSON.stringify({
|
||||
company: companyCollapsed.value,
|
||||
period: periodCollapsed.value
|
||||
}))
|
||||
} catch (e) {
|
||||
// Ignore storage errors
|
||||
}
|
||||
}
|
||||
|
||||
const toggleCompanyCollapsed = () => {
|
||||
companyCollapsed.value = !companyCollapsed.value
|
||||
// Close dropdown if collapsing
|
||||
if (companyCollapsed.value) {
|
||||
companyDropdownOpen.value = false
|
||||
}
|
||||
saveCollapsedState()
|
||||
}
|
||||
|
||||
const togglePeriodCollapsed = () => {
|
||||
periodCollapsed.value = !periodCollapsed.value
|
||||
// Close dropdown if collapsing
|
||||
if (periodCollapsed.value) {
|
||||
periodDropdownOpen.value = false
|
||||
}
|
||||
saveCollapsedState()
|
||||
}
|
||||
// US-608: Removed collapsible state management - using direct dropdowns now
|
||||
|
||||
// Computed properties for company selector
|
||||
const selectedCompanyName = computed(() => {
|
||||
@@ -855,67 +782,9 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
/* ================================================
|
||||
Collapsible Sections (US-605)
|
||||
US-608: Collapsible styles removed - using direct dropdowns
|
||||
================================================ */
|
||||
|
||||
.collapsible-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
min-height: 44px;
|
||||
gap: var(--space-sm);
|
||||
transition: background var(--transition-fast);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.collapsible-header:hover {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.collapsible-header:active {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.collapsible-label {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--font-medium);
|
||||
color: var(--text-color-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.collapsible-value {
|
||||
flex: 1;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
color: var(--text-color);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.collapsible-header .pi {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-color-secondary);
|
||||
flex-shrink: 0;
|
||||
transition: transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.collapsible-content {
|
||||
padding-top: var(--space-xs);
|
||||
}
|
||||
|
||||
/* When collapsed, the selector-group has minimal padding */
|
||||
.selector-group.is-collapsed {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* ================================================
|
||||
Navigation Sections Container
|
||||
US-606: No longer independently scrollable, part of unified scroll
|
||||
@@ -1022,9 +891,11 @@ onMounted(() => {
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
/* US-607: Compact variant - reduced spacing */
|
||||
/* US-607/US-608: Compact variant - reduced spacing but with MobileBottomNav clearance */
|
||||
.drawer-profile--compact {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
/* US-608: Ensure theme toggle is visible above MobileBottomNav (56px) */
|
||||
padding-bottom: calc(56px + var(--space-md));
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
@@ -1279,23 +1150,6 @@ onMounted(() => {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
/* Dark mode: Collapsible Sections (US-605) */
|
||||
[data-theme="dark"] .collapsible-header:hover {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .collapsible-label {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .collapsible-value {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .collapsible-header .pi {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .drawer-link {
|
||||
color: var(--text-color);
|
||||
}
|
||||
@@ -1479,23 +1333,6 @@ onMounted(() => {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
/* Auto dark mode: Collapsible Sections (US-605) */
|
||||
:root:not([data-theme]) .collapsible-header:hover {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .collapsible-label {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .collapsible-value {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .collapsible-header .pi {
|
||||
color: var(--text-color-secondary);
|
||||
}
|
||||
|
||||
:root:not([data-theme]) .drawer-link {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
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