From 395eb2bc9c79803d89e695a98229dfa9d6871976 Mon Sep 17 00:00:00 2001 From: Claude Agent Date: Tue, 13 Jan 2026 16:02:32 +0000 Subject: [PATCH] =?UTF-8?q?feat(ui-fixes-phase6):=20Complete=20US-601=20-?= =?UTF-8?q?=20Ad=C4=83ugare=20Sec=C8=9Biune=20Analize=20=C3=AEn=20Sidebar?= =?UTF-8?q?=20Desktop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implemented by Ralph autonomous loop. Iteration: 1 Co-Authored-By: Claude --- scripts/ralph/prd.json | 430 +++++++++-------------------------- scripts/ralph/progress.txt | 47 ++++ src/config/menu.js | 7 + src/router/index.js | 5 + tasks/prd-ui-fixes-phase6.md | 252 ++++++++++++++++++++ 5 files changed, 422 insertions(+), 319 deletions(-) create mode 100644 tasks/prd-ui-fixes-phase6.md diff --git a/scripts/ralph/prd.json b/scripts/ralph/prd.json index e00ec03..271fac1 100644 --- a/scripts/ralph/prd.json +++ b/scripts/ralph/prd.json @@ -1,7 +1,7 @@ { - "projectName": "unified-mobile-desktop-ui", - "branchName": "ralph/unified-mobile-md", - "description": "Unificare UI/UX mobil-desktop: header actions bar (filter/reset/export), BottomSheet filtre, meniu hamburger unificat, fix bugs (grupuri expandabile, overlay butoane), MD3 styling pentru meniuri și dialoguri", + "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.", "cssRules": { "documentation": [ "docs/ONBOARDING_CSS.md", @@ -39,372 +39,164 @@ }, "userStories": [ { - "id": "US-501", - "title": "Header Actions Bar Unificat - Rapoarte", - "description": "Ca utilizator vreau butoane de Filtre, Reset Filtre și Export (PDF/XLSX dropdown) în header-ul din dreapta pe toate rapoartele", + "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", "priority": 1, - "scope": "LARGE - Multiple pages", - "pages": [ - "/reports/trial-balance", - "/reports/cash-bank", - "/reports/detailed-invoices/clients", - "/reports/detailed-invoices/suppliers", - "/reports/maturity" - ], "acceptanceCriteria": [ - "Fiecare pagină are în header dreapta: [Filter icon] [Reset icon] [Export dropdown]", - "Export dropdown conține: 'Export PDF' și 'Export XLSX'", - "Butonul Filter are indicator vizual (active state) când filtrele sunt aplicate", - "Butonul Reset resetează toate filtrele la valori implicite", - "Pe mobil, acțiunile sunt în MobileTopBar actions array", - "Pe desktop, acțiunile sunt într-un grup în header dreapta", - "Pattern identic cu InvoicesView.vue (referință)", - "npm run build passes", - "Verify in browser: butoanele funcționează pe desktop și mobil" + "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" ], "passes": true, "notes": "Completed in iteration 1" }, { - "id": "US-502", - "title": "Header Actions Bar Unificat - Lista Bonuri", - "description": "Ca utilizator vreau butoane de Filtre, Reset Filtre și Export în header-ul listei de bonuri, consistent cu rapoartele", + "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, - "pages": [ - "/data-entry" - ], "acceptanceCriteria": [ - "Lista bonuri are în header: [Filter] [Reset] [Export dropdown]", - "Stilul butoanelor este identic cu cel din /reports/invoices", - "Export dropdown: 'Export PDF' și 'Export XLSX'", - "Butoanele vechi 'Filtrează' și 'Resetează' sunt înlocuite cu noul pattern (icons)", - "npm run build passes", - "Verify in browser: butoanele au același aspect ca pe pagina Facturi" + "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" ], - "passes": true, - "notes": "Completed in iteration 2" + "passes": false, + "notes": "Folosește PrimeVue TabView, modifică src/modules/reports/views/MaturityAnalysisView.vue" }, { - "id": "US-503", - "title": "BottomSheet Filtre pentru Lista Bonuri (Mobil)", - "description": "Ca utilizator pe mobil vreau ca filtrele din lista de bonuri să se deschidă într-un BottomSheet, nu inline", + "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, - "pages": [ - "/data-entry" - ], "acceptanceCriteria": [ - "Click pe butonul Filter deschide BottomSheet component (nu inline filters)", - "BottomSheet conține toate filtrele existente (status, dată, search, etc.)", - "BottomSheet are butoane 'Resetează' și 'Aplică' în footer", - "Swipe-down sau tap outside închide BottomSheet", - "Pattern identic cu InvoicesView.vue BottomSheet", - "npm run build passes", - "Verify in browser mobil (375x667): filtrele apar în BottomSheet" + "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" ], - "passes": true, - "notes": "Completed in iteration 3" + "passes": false, + "notes": "Creează fișier nou, adaugă rută în src/modules/reports/router/reports.routes.js" }, { - "id": "US-504", - "title": "Fix Export Endpoints Backend", - "description": "Ca utilizator vreau ca exportul PDF/XLSX să funcționeze fără erori pe toate paginile", + "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, "acceptanceCriteria": [ - "Identificate și fixate erorile din endpoint-urile de export existente", - "Export PDF funcțional pentru: Facturi, Balanță, Casă și Bancă, Facturi Detaliate, Scadențe, Bonuri", - "Export XLSX funcțional pentru aceleași pagini", - "Exportul include DOAR datele filtrate (nu toate datele)", - "Folosește formatarea PDF existentă de la Facturi/Balanță/Casă și Bancă", - "npm run build passes", - "Verify in browser: descărcare PDF și XLSX reușită" + "Î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" ], - "passes": true, - "notes": "Completed in iteration 4" + "passes": false, + "notes": "Modifică componenta din src/shared/components/mobile/MobileDrawerMenu.vue" }, { - "id": "US-505", - "title": "Meniu Hamburger Desktop = Mobil", - "description": "Ca utilizator pe desktop vreau ca meniul hamburger să aibă aceeași structură ca pe mobil", + "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, "acceptanceCriteria": [ - "Meniul desktop are secțiunile: PRINCIPALE, RAPOARTE, ANALIZE, ADMINISTRARE", - "Ordinea și itemii sunt identici cu MobileDrawerMenu", - "Stilul vizual este consistent (poate fi adaptat pentru desktop dar structura identică)", - "npm run build passes", - "Verify in browser desktop: meniul arată la fel ca pe mobil ca structură" + "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" ], - "passes": true, - "notes": "Completed in iteration 5" + "passes": false, + "notes": "Modifică MobileDrawerMenu.vue, adaugă state pentru collapsed și persistență localStorage" }, { - "id": "US-506", - "title": "Fix MobileDrawerMenu - Deconectare Vizibil", - "description": "Ca utilizator pe mobil vreau să văd și să pot accesa butonul de Deconectare care este ascuns sub bara de navigare", + "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": [ - "Butonul 'Deconectare' este complet vizibil în drawer menu", - "Adăugat padding-bottom suficient pentru a nu fi acoperit de MobileBottomNav (min 72px)", - "Scroll funcționează corect dacă meniul este mai lung decât ecranul", - "npm run build passes", - "Verify in browser mobil (375x667): butonul Deconectare este vizibil și clickabil" + "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 6" + "passes": false, + "notes": "Restructurează CSS-ul MobileDrawerMenu.vue, elimină position: fixed de pe header/footer" }, { - "id": "US-507", - "title": "Selecție Companie/Perioadă în MobileDrawerMenu", - "description": "Ca utilizator pe mobil vreau să pot selecta compania și perioada contabilă din drawer menu", + "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": [ - "MobileDrawerMenu include selector companie sub secțiunea profil", - "Selector perioadă contabilă disponibil lângă selector companie", - "Selectarea companiei/perioadei actualizează datele pe toate paginile (folosește store-urile existente)", - "Valorile selectate persistă între sesiuni (localStorage)", - "UI similar cu selectoarele din desktop header", - "npm run build passes", - "Verify in browser mobil: pot schimba compania și perioada din drawer" + "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 7" + "passes": false, + "notes": "Depinde de US-604 pentru toggle-ul de temă, modifică layout-ul în MobileDrawerMenu.vue" }, { - "id": "US-508", - "title": "Selector Temă în MobileDrawerMenu (Dark/Light/Auto)", - "description": "Ca utilizator pe mobil vreau să pot schimba tema din drawer menu", + "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": [ - "Opțiune de schimbare temă în MobileDrawerMenu (lângă alte setări/footer)", - "Trei opțiuni: Light, Dark, Auto (system)", - "Schimbarea temei se aplică imediat", - "Preferința persistă în localStorage", - "Folosește themeStore existent", - "npm run build passes", - "Verify in browser mobil: tema se schimbă corect din drawer" + "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 8" + "passes": false, + "notes": "Bug în ReceiptsListView.vue - SpeedDial probabil are probleme CSS sau z-index" }, { - "id": "US-509", - "title": "Fix Detailed Invoices - Grupuri Expandabile Desktop", - "description": "Ca utilizator pe desktop vreau ca grupurile de facturi per client/furnizor să se expandeze la click (acum funcționează doar pe mobil)", + "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, - "pages": [ - "/reports/detailed-invoices/clients", - "/reports/detailed-invoices/suppliers" - ], "acceptanceCriteria": [ - "Click pe un grup (client/furnizor) expandează/colapsează facturile individuale", - "Indicator vizual pentru expand/collapse (chevron icon care rotește)", - "Animație smooth la expand/collapse", - "Comportament identic cu versiunea mobilă", - "npm run build passes", - "Verify in browser desktop: grupurile se extind la click" + "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 9" + "passes": false, + "notes": "Modifică InvoicesView.vue, CashView.vue, BankView.vue, ReceiptsListView.vue" }, { - "id": "US-510", - "title": "Detailed Invoices - Eliminare Filtru Clienți/Furnizori", - "description": "Ca utilizator vreau ca filtrele din Facturi Detaliate să NU aibă selecția Clienți/Furnizori pentru că sunt pagini separate", + "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, - "pages": [ - "/reports/detailed-invoices/clients", - "/reports/detailed-invoices/suppliers" - ], "acceptanceCriteria": [ - "Pagina /reports/detailed-invoices/clients NU are dropdown Clienți/Furnizori în filtre", - "Pagina /reports/detailed-invoices/suppliers NU are dropdown Clienți/Furnizori în filtre", - "Tipul (clienți/furnizori) este determinat automat din URL/route params", - "npm run build passes", - "Verify in browser: filtrul Clienți/Furnizori nu mai apare" + "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 10" - }, - { - "id": "US-511", - "title": "Detailed Invoices - Eliminare Buton Filtru Duplicat", - "description": "Ca utilizator vreau un singur buton de filtre în header, nu și deasupra tabelului", - "priority": 11, - "pages": [ - "/reports/detailed-invoices/clients", - "/reports/detailed-invoices/suppliers" - ], - "acceptanceCriteria": [ - "Butonul de filtre apare DOAR în header (dreapta)", - "Eliminat butonul duplicat de deasupra tabelului", - "Funcționalitatea rămâne identică (deschide BottomSheet pe mobil, filtre pe desktop)", - "npm run build passes", - "Verify in browser: un singur buton de filtre" - ], - "passes": true, - "notes": "Completed in iteration 11" - }, - { - "id": "US-512", - "title": "Detailed Invoices - Fix Overlay Butoane Ascunse", - "description": "Ca utilizator vreau ca în overlay-ul cu selecții să văd toate butoanele (Reset Filtre și Export sunt ascunse sub footer)", - "priority": 12, - "pages": [ - "/reports/detailed-invoices/clients", - "/reports/detailed-invoices/suppliers" - ], - "acceptanceCriteria": [ - "Toate butoanele din overlay sunt vizibile", - "Butoanele nu sunt acoperite de footer", - "Scroll funcționează dacă conținutul e mare", - "Z-index corect pentru overlay vs footer", - "npm run build passes", - "Verify in browser: toate butoanele sunt vizibile în overlay" - ], - "passes": true, - "notes": "Completed in iteration 12" - }, - { - "id": "US-513", - "title": "Analize Scadențe - Eliminare Secțiune Facturi Detaliate", - "description": "Ca utilizator vreau ca pagina Analize Scadențe să NU conțină secțiunea Facturi Detaliate pentru că sunt pagini separate", - "priority": 13, - "pages": [ - "/reports/maturity" - ], - "acceptanceCriteria": [ - "Pagina /reports/maturity afișează DOAR analiza scadențelor", - "Secțiunea 'Facturi Detaliate' este eliminată complet din această pagină", - "Link-urile către Facturi Detaliate rămân în meniu (separate)", - "npm run build passes", - "Verify in browser: pagina conține doar scadențe" - ], - "passes": true, - "notes": "Completed in iteration 14" - }, - { - "id": "US-514", - "title": "Fix Spațiu Blank Excesiv Top (Toate Paginile)", - "description": "Ca utilizator vreau ca paginile să nu aibă spațiu gol mare în partea de sus", - "priority": 14, - "acceptanceCriteria": [ - "Identificat cauza spațiului blank (margin/padding excesiv)", - "Redus spațiul la maximum 16px între header și conținut", - "Verificate și corectate: Facturi, Balanță, Casă și Bancă, Facturi Detaliate, Scadențe, Bonuri", - "Layout-ul rămâne corect pe toate device-urile (mobil și desktop)", - "npm run build passes", - "Verify in browser: spațiul blank este eliminat pe toate paginile" - ], - "passes": true, - "notes": "Completed in iteration 15" - }, - { - "id": "US-515", - "title": "Lista Bonuri - Meniu 'Bon Nou/Bulk Upload' Material Design", - "description": "Ca utilizator vreau ca meniul pentru Bon Nou și Bulk Upload să arate modern, Material Design (acum arată înghesuit)", - "priority": 15, - "pages": [ - "/data-entry" - ], - "acceptanceCriteria": [ - "Meniul redesenat în stil Material Design 3", - "Spacing adecvat între opțiuni (min 44px touch targets)", - "Iconițe clare pentru fiecare opțiune (pi-plus pentru Bon Nou, pi-upload pentru Bulk)", - "Hover/active states vizibile cu feedback vizual", - "Animații smooth la deschidere/închidere", - "Folosește design tokens pentru spacing și culori", - "npm run build passes", - "Verify in browser: meniul arată modern și consistent" - ], - "passes": true, - "notes": "Completed in iteration 17" - }, - { - "id": "US-516", - "title": "Lista Bonuri - Meniu Acțiuni Per Bon Material Design", - "description": "Ca utilizator vreau ca meniul de acțiuni pentru fiecare bon (⋮) să arate modern și consistent", - "priority": 16, - "pages": [ - "/data-entry" - ], - "acceptanceCriteria": [ - "Meniul acțiuni (Vizualizare, Editare, Ștergere) redesenat MD3", - "Opțiuni cu iconițe și text clar", - "Touch targets min 44px", - "Divider între acțiuni normale și destructive (Ștergere)", - "Folosește design tokens", - "npm run build passes", - "Verify in browser: meniul arată modern" - ], - "passes": true, - "notes": "Completed in iteration 18" - }, - { - "id": "US-517", - "title": "Lista Bonuri Desktop - Dialog Ștergere Material Design", - "description": "Ca utilizator pe desktop vreau ca dialogul de confirmare ștergere să arate modern (acum arată înghesuit)", - "priority": 17, - "pages": [ - "/data-entry" - ], - "acceptanceCriteria": [ - "Dialog redesenat în stil Material Design 3", - "Titlu clar: 'Șterge bonul?'", - "Mesaj descriptiv cu detalii bon (magazin, sumă)", - "Butoane: 'Anulează' (secondary) și 'Șterge' (danger/severity)", - "Spacing și padding corespunzătoare (folosește design tokens)", - "npm run build passes", - "Verify in browser: dialogul arată modern" - ], - "passes": true, - "notes": "Completed in iteration 19" - }, - { - "id": "US-518", - "title": "Creare/Vizualizare/Editare Bon - Butoane Doar Sus", - "description": "Ca utilizator vreau ca în paginile de creare, vizualizare și editare bon, butoanele să fie DOAR în partea de sus", - "priority": 18, - "pages": [ - "/data-entry/receipts/new", - "/data-entry/receipts/:id", - "/data-entry/receipts/:id/edit" - ], - "acceptanceCriteria": [ - "Pagina creare bon: butoane (Salvează, Anulează) doar în header/top", - "Pagina vizualizare bon: butoane (Editează, Șterge, Înapoi) doar în header/top", - "Pagina editare bon: butoane (Salvează, Anulează) doar în header/top", - "Eliminate butoanele din footer/body dacă există", - "Pe mobil: butoanele sunt în MobileTopBar actions", - "Pe desktop: butoanele sunt în header dreapta", - "npm run build passes", - "Verify in browser: butoane doar în header pe toate cele 3 pagini" - ], - "passes": true, - "notes": "Completed in iteration 20" - }, - { - "id": "US-519", - "title": "Separare Casă și Bancă în Pagini Distincte", - "description": "Ca utilizator vreau ca Casă și Bancă să fie pagini separate (nu combinate) pentru navigare mai clară", - "priority": 19, - "pages": [ - "/reports/cash", - "/reports/bank" - ], - "acceptanceCriteria": [ - "Pagină separată pentru Casă: /reports/cash", - "Pagină separată pentru Bancă: /reports/bank", - "Fiecare pagină are propriul titlu (Casă / Bancă)", - "Meniul hamburger (desktop și mobil) are intrări separate pentru Casă și Bancă", - "MobileDrawerMenu actualizat cu linkuri separate în secțiunea RAPOARTE", - "Rutele vechi /reports/cash-bank redirect către /reports/cash sau sunt eliminate", - "Filtrele și exportul funcționează independent pe fiecare pagină", - "Backend: endpoint-uri separate sau parametru pentru a filtra cash vs bank", - "npm run build passes", - "Verify in browser desktop: Casă și Bancă sunt pagini separate accesibile din meniu", - "Verify in browser mobil: Casă și Bancă sunt pagini separate în MobileDrawerMenu" - ], - "passes": true, - "notes": "Completed in iteration 21" + "passes": false, + "notes": "Task de investigare - verifică toate paginile menționate" } ] } diff --git a/scripts/ralph/progress.txt b/scripts/ralph/progress.txt index eed7da1..31d2ad5 100644 --- a/scripts/ralph/progress.txt +++ b/scripts/ralph/progress.txt @@ -202,3 +202,50 @@ Design Reference: src/modules/reports/views/InvoicesView.vue [2026-01-12 23:46:13] Final progress: 19/19 stories completed [2026-01-12 23:46:13] Branch: ralph/unified-mobile-md [2026-01-12 23:46:13] Logs: /workspace/roa2web/scripts/ralph/logs + +## ══════════════════════════════════════════════════════════════ +## Phase 5 COMPLETED ✓ +## ══════════════════════════════════════════════════════════════ + +--- + +## ══════════════════════════════════════════════════════════════ +## Phase 6: UI/UX Fixes - Menu Consistency & Mobile Improvements +## ══════════════════════════════════════════════════════════════ +Started: Mon Jan 13 15:45:00 UTC 2026 +Project: ui-fixes-phase6 +Branch: ralph/ui-fixes-phase6 +Stories: 10 total (US-601 to US-610) + +PRD: tasks/prd-ui-fixes-phase6.md + +### Stories Overview: + +**Desktop Menu Consistency (1):** +- [ ] US-601: Adăugare Secțiune Analize în Sidebar Desktop + +**Analize Pages Fixes (2-3):** +- [ ] US-602: Tab-uri Clienți/Furnizori în Pagina Scadențe +- [ ] US-603: Implementare Pagină Facturi Detaliate (NEW) + +**Mobile Menu Improvements (4-7):** +- [ ] US-604: Toggle Temă cu 3 Stări în Meniul Mobil +- [ ] US-605: Companie/Perioadă Colapsabile în Meniul Mobil +- [ ] US-606: Layout Scrollabil Unificat în Meniul Mobil +- [ ] US-607: Secțiune Utilizator Compactă în Meniul Mobil + +**Bug Fixes (8-10):** +- [ ] US-608: Fix Buton FAB SpeedDial în Lista Bonuri +- [ ] US-609: Buton Resetează pe Toate Paginile cu Filtre Mobil +- [ ] US-610: Eliminare Spațiu Gol Deasupra Tabelelor + +--- + +### Iteration Log: +[2026-01-13 16:00:01] Starting Ralph for project: ui-fixes-phase6 +[2026-01-13 16:00:01] Max iterations: 30 +[2026-01-13 16:00:01] Creating new branch: ralph/ui-fixes-phase6 +[2026-01-13 16:00:01] === Iteration 1/30 === +[2026-01-13 16:00:01] Working on story: US-601 +[2026-01-13 16:00:01] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_1_US-601.log) +[2026-01-13 16:02:32] SUCCESS: Story US-601 passed! diff --git a/src/config/menu.js b/src/config/menu.js index 304977f..7223517 100644 --- a/src/config/menu.js +++ b/src/config/menu.js @@ -9,6 +9,13 @@ export const menuSections = [ { to: '/reports/trial-balance', icon: 'pi pi-calculator', label: 'Balanță de Verificare' } ] }, + { + title: 'Analize', + items: [ + { to: '/reports/maturity-analysis', icon: 'pi pi-clock', label: 'Scadențe' }, + { to: '/reports/detailed-invoices', icon: 'pi pi-list', label: 'Facturi Detaliate' } + ] + }, { title: 'Introduceri Date', items: [ diff --git a/src/router/index.js b/src/router/index.js index 583a192..0c1226c 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -73,6 +73,11 @@ const routes = [ component: () => import('@reports/views/MaturityAnalysisView.vue'), meta: { requiresAuth: true, title: 'Analiză Scadențe - ROA2WEB' } }, + { + // US-601: Redirect base detailed-invoices path to clients (default) + path: 'detailed-invoices', + redirect: '/reports/detailed-invoices/clients' + }, { path: 'detailed-invoices/clients', name: 'DetailedInvoicesClients', diff --git a/tasks/prd-ui-fixes-phase6.md b/tasks/prd-ui-fixes-phase6.md new file mode 100644 index 0000000..ffaddac --- /dev/null +++ b/tasks/prd-ui-fixes-phase6.md @@ -0,0 +1,252 @@ +# PRD: UI/UX Fixes Phase 6 - Menu Consistency & Mobile Improvements + +## 1. Introducere + +Acest PRD adresează o serie de inconsistențe UI/UX între versiunile desktop și mobile ale aplicației ROA2WEB, probleme cu meniul hamburger pe mobil, și bug-uri funcționale identificate în paginile Analize. + +**Context**: După implementarea fazei anterioare (Unified Mobile Desktop UI), au rămas câteva probleme de consistență și funcționalitate care trebuie rezolvate pentru o experiență utilizator coerentă. + +## 2. Obiective + +### Obiectiv Principal +- Asigurarea consistenței între desktop și mobile pentru structura meniului și funcționalitățile disponibile + +### Obiective Secundare +- Îmbunătățirea UX pe mobil pentru meniul hamburger (mai compact, mai ușor de navigat) +- Corectarea bug-urilor funcționale în paginile Analize +- Uniformizarea butoanelor de acțiune (Filtrează/Resetează) pe toate paginile + +### Metrici de Succes +- Toate secțiunile de meniu sunt identice pe desktop și mobile +- Meniul hamburger mobil permite vizualizarea completă a opțiunilor fără scroll excesiv +- Butonul FAB (+) pe lista bonuri funcționează corect și afișează SpeedDial + +## 3. User Stories + +### US-601: Adăugare Secțiune "Analize" în Sidebar Desktop +**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 + +**Acceptance Criteria:** +- [ ] 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 între "Rapoarte" și "Introduceri Date" (sau după Rapoarte) +- [ ] npm run typecheck passes +- [ ] Verify in browser: Desktop sidebar shows "Analize" section with working links + +--- + +### US-602: Implementare Tab-uri Clienți/Furnizori în Pagina Scadențe +**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 + +**Acceptance Criteria:** +- [ ] 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 + +--- + +### US-603: Implementare Pagină Facturi Detaliate (Înlocuiește Redirect la Dashboard) +**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 + +**Acceptance Criteria:** +- [ ] 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 + +--- + +### US-604: Meniu Hamburger Mobil - Toggle Temă cu 3 Stări +**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 + +**Acceptance Criteria:** +- [ ] Î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 + +--- + +### US-605: Meniu Hamburger Mobil - Companie/Perioadă Colapsabile +**Ca** utilizator mobil +**Vreau** secțiunile Companie și Perioadă din meniu să fie colapsabile +**Pentru că** ocupă mult spațiu și rareori trebuie schimbate + +**Acceptance Criteria:** +- [ ] 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 +- [ ] Starea colapsată este persistată în localStorage +- [ ] npm run typecheck passes +- [ ] Verify in browser: Tap on Firma/Perioada toggles expansion + +--- + +### US-606: Meniu Hamburger Mobil - Layout Scrollabil Unificat +**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 + +**Acceptance Criteria:** +- [ ] Meniul hamburger mobil (`MobileDrawer.vue` sau echivalent) 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 +- [ ] npm run typecheck passes +- [ ] Verify in browser: Entire mobile menu scrolls as one unit + +--- + +### US-607: Meniu Hamburger Mobil - Secțiune Utilizator Mai Compactă +**Ca** utilizator mobil +**Vreau** secțiunea de utilizator (nume, temă, deconectare) să fie mai compactă +**Pentru că** ocupă prea mult spațiu vertical + +**Acceptance Criteria:** +- [ ] 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 redus cu cel puțin 50% +- [ ] npm run typecheck passes +- [ ] Verify in browser: User section is visually compact + +--- + +### US-608: Buton FAB (+) în Lista Bonuri - Afișare SpeedDial +**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 + +**Acceptance Criteria:** +- [ ] 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 + +--- + +### US-609: Buton "Resetează" pe Toate Paginile cu Filtre (Mobil) +**Ca** utilizator mobil +**Vreau** butonul "Resetează" să apară pe toate paginile care au "Filtrează" +**Pentru că** în prezent doar Balanța are acest buton, celelalte pagini nu + +**Acceptance Criteria:** +- [ ] 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 + +--- + +### US-610: Investigare și Eliminare Spațiu Gol Deasupra Tabelelor +**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 + +**Acceptance Criteria:** +- [ ] 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 + +## 4. Cerințe Funcționale + +1. [REQ-001] Sidebar-ul desktop trebuie să conțină aceleași secțiuni ca meniul mobil +2. [REQ-002] Paginile din Analize trebuie să aibă tab-uri pentru separarea Clienți/Furnizori +3. [REQ-003] Meniul hamburger mobil trebuie să permită vizualizarea tuturor opțiunilor fără scroll excesiv +4. [REQ-004] Toate elementele interactive mobil trebuie să respecte touch target minim 44x44px +5. [REQ-005] Toggle-ul de temă trebuie să cicleze între cele 3 stări la un singur tap + +## 5. Non-Goals (Ce NU facem) + +- NU schimbăm structura generală a aplicației sau arhitectura +- NU adăugăm funcționalități noi în paginile Analize (doar corectăm cele existente) +- NU refactorizăm alte componente care nu sunt menționate +- NU modificăm API-ul backend (doar frontend UI) +- NU adăugăm noi pagini în afară de Facturi Detaliate + +## 6. Considerații Tehnice + +### Stack/Tehnologii +- Vue.js 3 Composition API +- PrimeVue components (SpeedDial, TabView, etc.) +- CSS cu design tokens din `docs/DESIGN_TOKENS.md` + +### Patterns de Urmat +- Componente mobile din `src/shared/components/mobile/` +- Mobile detection via `useBreakpoints()` composable +- CSS patterns din `docs/CSS_PATTERNS.md` + +### Fișiere Cheie de Modificat +- `src/shared/components/AppSidebar.vue` - US-601 +- `src/modules/reports/views/MaturityAnalysisView.vue` - US-602 +- `src/modules/reports/views/DetailedInvoicesView.vue` (NOU) - US-603 +- `src/shared/components/mobile/MobileDrawer.vue` - US-604, US-605, US-606, US-607 +- `src/modules/data-entry/views/ReceiptsListView.vue` - US-608 +- Multiple view files - US-609, US-610 + +### Dependențe +- PrimeVue SpeedDial pentru US-608 +- PrimeVue TabView pentru US-602, US-603 + +### Riscuri Tehnice +- Meniul hamburger mobil poate avea layout complex - testare atentă pe multiple dispozitive +- SpeedDial PrimeVue poate necesita customizare pentru dark mode + +## 7. Considerații UI/UX + +### Mobile Menu Layout +- Tot conținutul într-un singur scroll +- Firma/Perioada colapsate by default pentru a economisi spațiu +- Secțiune utilizator compactă în partea de jos + +### Tab-uri Analize +- Tab-uri clare cu indicatori vizuali pentru starea activă +- Counter cu numărul de elemente în fiecare tab +- Swipe support pentru navigare între tab-uri (nice-to-have) + +### SpeedDial FAB +- Animație smooth la deschidere +- Opțiuni cu iconițe și text descriptiv +- Overlay semi-transparent pentru focus + +## 8. Success Metrics + +- **Consistență meniu**: 100% același conținut pe desktop și mobil +- **Spațiu meniu mobil**: Cel puțin 60% din înălțimea ecranului pentru link-uri +- **Funcționalitate FAB**: 100% rate de succes la afișarea SpeedDial +- **Timp task**: Utilizatorul poate accesa orice pagină în max 2 tap-uri din meniu + +## 9. Open Questions + +- [ ] Trebuie păstrat și summary-ul cu ambele (Clienți + Furnizori) pe pagina Scadențe, în plus față de tab-uri? +- [ ] Facturi Detaliate trebuie să aibă aceleași filtre ca pagina Facturi principală? +- [ ] Spațiul gol raportat - este pe toate paginile sau doar pe anumite rezoluții? + +--- + +**Autor**: Claude Code (auto-generated) +**Data**: 2026-01-13 +**Versiune**: 1.0