feat(mobile-navigation-improvements): Complete US-201 - MobileBottomNav activ pe Dashboard

Implemented by Ralph autonomous loop.
Iteration: 1

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-01-12 12:05:02 +00:00
parent 9ea8dd22ac
commit 1084314db9
5 changed files with 941 additions and 833 deletions

View File

@@ -1,7 +1,7 @@
{
"projectName": "unified-mobile-material-design",
"projectName": "mobile-navigation-improvements",
"branchName": "ralph/unified-mobile-md",
"description": "Extinderea interfeței Material Design la toate paginile aplicației în modul mobil pentru consistență UI/UX",
"description": "Extinderea navigării mobile cu Dashboard split, Settings Hub, MobileDrawerMenu și butoane context-aware",
"cssRules": {
"documentation": [
"docs/ONBOARDING_CSS.md",
@@ -29,312 +29,225 @@
},
"userStories": [
{
"id": "US-101a",
"title": "Creare MobileTopBar.vue component",
"description": "Ca developer vreau componentă MobileTopBar.vue extrasă din ReceiptsListView pentru reutilizare",
"id": "US-201",
"title": "MobileBottomNav activ pe Dashboard",
"description": "Ca utilizator mobil vreau să văd footer navigation și pe Dashboard pentru navigare ușoară",
"priority": 1,
"acceptanceCriteria": [
"Componentă src/shared/components/mobile/MobileTopBar.vue creată",
"Props: title (string), showBack (boolean), showMenu (boolean), actions (array)",
"Emit events: menu-click, back-click, action-click",
"Stiluri CSS extrase din ReceiptsListView (.mobile-top-bar)",
"Dark mode support cu [data-theme='dark']",
"DashboardView.vue include MobileBottomNav component",
"Link-ul 'Rapoarte' din nav este activ/highlighted pe Dashboard",
"MobileTopBar adăugat cu title 'Dashboard'",
"Verify in browser: navigarea funcționează din Dashboard",
"npm run build passes"
],
"passes": true,
"notes": "Completed in iteration 1"
},
{
"id": "US-101b",
"title": "Creare MobileBottomNav.vue component",
"description": "Ca developer vreau componentă MobileBottomNav.vue pentru navigarea de jos pe mobil",
"id": "US-202",
"title": "MobileDrawerMenu Material Design cu Profil",
"description": "Ca utilizator mobil vreau meniul hamburger să aibă design Material cu secțiune profil",
"priority": 2,
"acceptanceCriteria": [
"Componentă src/shared/components/mobile/MobileBottomNav.vue creată",
"Props: items (array of {to, icon, label, active})",
"4 linkuri: Bonuri, Upload, Rapoarte, Setări",
"Stiluri CSS extrase din ReceiptsListView (.mobile-bottom-nav)",
"router-link pentru navigare",
"Componentă src/shared/components/mobile/MobileDrawerMenu.vue creată",
"Secțiuni: Header cu logo, Navigare principală, Profil utilizator (nume + logout)",
"Link-uri navigare: Dashboard, Bonuri, Facturi, Balanță, Trezorerie, Setări",
"Active state pe link-ul curent (bazat pe route)",
"Animație slide-in de la stânga",
"Close pe tap outside sau pe link click",
"Dark mode support",
"npm run build passes"
],
"passes": true,
"notes": "Completed in iteration 2"
"passes": false,
"notes": ""
},
{
"id": "US-101c",
"title": "Creare MobileSelectionFooter.vue component",
"description": "Ca developer vreau componentă pentru acțiuni batch când sunt selectate elemente",
"id": "US-208",
"title": "Actualizare Router cu noile rute",
"description": "Ca developer vreau router-ul configurat pentru noile pagini",
"priority": 3,
"acceptanceCriteria": [
"Componentă src/shared/components/mobile/MobileSelectionFooter.vue creată",
"Props: visible (boolean), actions (array of {label, icon, severity, handler})",
"Animație slide-up cu Transition",
"Stiluri din .mobile-selection-bottom-bar",
"Rută /reports/maturity-analysis → MaturityAnalysisView (lazy loaded)",
"Rută /reports/detailed-invoices → DetailedInvoicesView (lazy loaded)",
"Rută /settings → SettingsHubView (lazy loaded)",
"Redirect /data-entry/ocr-metrics accesibil din Settings Hub",
"npm run build passes"
],
"passes": true,
"notes": "Completed in iteration 3"
"passes": false,
"notes": ""
},
{
"id": "US-102",
"title": "Definire MD3 color tokens în CSS",
"description": "Ca developer vreau variabile CSS pentru Material Design 3 color system",
"id": "US-206",
"title": "Creare Pagină Hub Setări",
"description": "Ca utilizator vreau o pagină centrală cu toate opțiunile de setări",
"priority": 4,
"acceptanceCriteria": [
"Fișier src/assets/css/core/md3-tokens.css creat",
"Tokens: --md-sys-color-primary, --md-sys-color-on-primary, --md-sys-color-surface, --md-sys-color-on-surface, --md-sys-color-outline",
"Dark mode variants cu [data-theme='dark']",
"Auto dark mode cu @media (prefers-color-scheme: dark)",
"Import adăugat în main.css",
"View nou: src/modules/reports/views/SettingsHubView.vue",
"Route: /settings",
"Carduri pentru: OCR Setări, Cache Stats, Loguri Server, Telegram (dacă admin)",
"MobileTopBar cu title 'Setări'",
"MobileBottomNav cu Setări activ",
"Click pe card navighează la pagina respectivă",
"Design responsive (grid 2x2 pe mobil, 4 columns pe desktop)",
"npm run build passes"
],
"passes": true,
"notes": "Completed in iteration 4"
"passes": false,
"notes": ""
},
{
"id": "US-103",
"title": "Refactor ReceiptsListView să folosească componente comune",
"description": "Ca developer vreau ReceiptsListView să folosească noile componente pentru validare API",
"id": "US-204",
"title": "Creare Pagină Analiză Scadențe",
"description": "Ca utilizator vreau o pagină dedicată pentru analiza scadențelor clienți/furnizori",
"priority": 5,
"acceptanceCriteria": [
"Import MobileTopBar, MobileBottomNav, MobileSelectionFooter în ReceiptsListView",
"Înlocuire template HTML cu componente",
"Ștergere CSS duplicat din ReceiptsListView (>200 linii)",
"Funcționalitate identică cu implementarea actuală",
"Verify in browser că lista bonuri funcționează identic pe mobil",
"View nou: src/modules/reports/views/MaturityAnalysisView.vue",
"Route: /reports/maturity-analysis",
"Conține componenta MaturityAndDetailsCard (partea de analiză scadențe)",
"MobileTopBar cu title 'Analiză Scadențe' și buton ← Înapoi la Dashboard",
"MobileBottomNav activ",
"npm run build passes"
],
"passes": true,
"notes": "Completed in iteration 5"
"passes": false,
"notes": ""
},
{
"id": "US-104",
"title": "Eliminare buton delete duplicat din header tabel",
"description": "Ca utilizator vreau butonul delete doar în footer, nu și în header când e selecție activă",
"id": "US-205",
"title": "Creare Pagină Facturi Detaliate",
"description": "Ca utilizator vreau o pagină dedicată pentru tabelul facturilor detaliate",
"priority": 6,
"acceptanceCriteria": [
"În ReceiptsListView, bulk-actions-bar afișat DOAR când !isMobile",
"Pe mobil, delete apare DOAR în mobile-selection-bottom-bar (footer)",
"Pe desktop, delete rămâne în bulk-actions-bar (header tabel)",
"Verify in browser: pe mobil delete e doar în footer",
"Verify in browser: pe desktop delete e în header",
"npm run build passes"
],
"passes": true,
"notes": "Completed in iteration 7"
},
{
"id": "US-105",
"title": "Adăugare buton Înapoi în editare bon",
"description": "Ca utilizator vreau să pot reveni la lista de bonuri din pagina de editare cu buton ←",
"priority": 7,
"acceptanceCriteria": [
"MobileTopBar adăugat în ReceiptCreateUnifiedView.vue",
"showBack=true pentru a afișa săgeata ←",
"Click pe ← navighează la /data-entry",
"Title dinamic: 'Bon nou' pentru create, 'Editare Bon' pentru edit",
"Verify in browser că butonul funcționează",
"npm run build passes"
],
"passes": true,
"notes": "Completed in iteration 8"
},
{
"id": "US-112",
"title": "Creare BottomSheet.vue component pentru filtre",
"description": "Ca utilizator vreau să pot accesa filtrele într-un bottom sheet pe mobil",
"priority": 8,
"acceptanceCriteria": [
"Componentă src/shared/components/mobile/BottomSheet.vue creată",
"v-model:visible pentru control",
"Animație slide-up smooth",
"Drag handle în partea de sus",
"Close pe tap outside overlay",
"Slot default pentru conținut",
"npm run build passes"
],
"passes": true,
"notes": "Completed in iteration 9"
},
{
"id": "US-106",
"title": "Dashboard Mobile cu Swipeable KPI Cards",
"description": "Ca utilizator vreau KPI-uri ca carousel swipeable pe mobil cu dots indicator",
"priority": 9,
"acceptanceCriteria": [
"Componentă src/shared/components/mobile/SwipeableCards.vue creată",
"Touch swipe left/right funcțional (touchstart, touchmove, touchend)",
"Dots indicator pentru poziție curentă",
"DashboardView.vue folosește componenta când isMobile",
"Fallback la layout grid normal pe desktop",
"npm run build passes"
],
"passes": true,
"notes": "Completed in iteration 10"
},
{
"id": "US-107",
"title": "InvoicesView Mobile Material Design",
"description": "Ca utilizator vreau pagina de facturi să aibă același header Material ca lista bonuri",
"priority": 10,
"acceptanceCriteria": [
"MobileTopBar adăugat cu title 'Facturi'",
"Actions în header: refresh (pi-refresh), export (pi-download)",
"MobileBottomNav adăugat",
"Filtre existente mutate în BottomSheet pe mobil",
"Verify in browser că arată consistent cu bonuri",
"npm run build passes"
],
"passes": true,
"notes": "Completed in iteration 11"
},
{
"id": "US-108",
"title": "TrialBalanceView Mobile Material Design",
"description": "Ca utilizator vreau pagina de balanță să aibă același header Material",
"priority": 11,
"acceptanceCriteria": [
"MobileTopBar adăugat cu title 'Balanță de Verificare'",
"Actions în header: export (pi-download)",
"MobileBottomNav adăugat",
"Filtre existente mutate în BottomSheet pe mobil",
"npm run build passes"
],
"passes": true,
"notes": "Completed in iteration 12"
},
{
"id": "US-109",
"title": "BankCashRegisterView Mobile Material Design",
"description": "Ca utilizator vreau pagina de trezorerie să aibă același header Material",
"priority": 12,
"acceptanceCriteria": [
"MobileTopBar adăugat cu title 'Trezorerie'",
"Actions în header: refresh, export",
"MobileBottomNav adăugat",
"View nou: src/modules/reports/views/DetailedInvoicesView.vue",
"Route: /reports/detailed-invoices",
"Conține componenta/partea de tabel detaliat din MaturityAndDetailsCard",
"MobileTopBar cu title 'Facturi Detaliate' și buton ← Înapoi",
"MobileBottomNav activ",
"Filtre în BottomSheet pe mobil",
"npm run build passes"
],
"passes": true,
"notes": "Completed in iteration 13"
"passes": false,
"notes": ""
},
{
"id": "US-110",
"title": "ServerLogsView Mobile Material Design",
"description": "Ca admin vreau pagina de loguri să aibă interfață Material",
"id": "US-203",
"title": "Dashboard KPIs Only View",
"description": "Ca utilizator mobil vreau Dashboard-ul principal să arate doar KPI cards pentru acces rapid",
"priority": 7,
"acceptanceCriteria": [
"DashboardView.vue pe mobil afișează DOAR: SwipeableCards cu KPIs",
"Adăugare 2 carduri quick-link: 'Analiză Scadențe →' și 'Facturi Detaliate →'",
"Click pe quick-link navighează la pagina dedicată",
"Desktop rămâne neschimbat (toate secțiunile)",
"npm run build passes"
],
"passes": false,
"notes": ""
},
{
"id": "US-212",
"title": "Quick Links în Dashboard Mobile",
"description": "Ca utilizator vreau carduri clickabile în Dashboard pentru a ajunge la Scadențe și Facturi",
"priority": 8,
"acceptanceCriteria": [
"După SwipeableCards, 2 carduri: 'Analiză Scadențe' și 'Facturi Detaliate'",
"Design: icon + titlu + săgeată dreaptă (→)",
"Click navighează la pagina respectivă",
"Doar pe mobil (desktop are totul în aceeași pagină)",
"npm run build passes"
],
"passes": false,
"notes": ""
},
{
"id": "US-207",
"title": "Actualizare MobileBottomNav cu link Setări",
"description": "Ca utilizator vreau butonul Setări din footer să ducă la Hub Setări",
"priority": 9,
"acceptanceCriteria": [
"MobileBottomNav: link Setări → /settings (nu /data-entry/ocr-metrics)",
"Icon: pi-cog",
"Active state când pe /settings sau /settings/* sau pagini admin",
"Actualizare în toate paginile care folosesc MobileBottomNav",
"npm run build passes"
],
"passes": false,
"notes": ""
},
{
"id": "US-213",
"title": "Actualizare Hamburger Menu în toate paginile",
"description": "Ca utilizator vreau hamburger menu-ul să funcționeze uniform în toată aplicația",
"priority": 10,
"acceptanceCriteria": [
"Toate paginile cu MobileTopBar: click pe ☰ deschide MobileDrawerMenu",
"MobileDrawerMenu înlocuiește vechiul Sidebar pe mobil",
"Desktop păstrează navigarea existentă",
"npm run build passes"
],
"passes": false,
"notes": ""
},
{
"id": "US-210",
"title": "Creare MobileActionBar Component",
"description": "Ca developer vreau componentă reutilizabilă pentru butoane de acțiune pe mobil",
"priority": 11,
"acceptanceCriteria": [
"Componentă src/shared/components/mobile/MobileActionBar.vue creată",
"Props: actions (array of {label, icon, severity, handler, disabled})",
"Layout: butoane full-width sau side-by-side (2 butoane)",
"Position: fixed bottom, above MobileBottomNav",
"Animație: slide-up la mount",
"npm run build passes"
],
"passes": false,
"notes": ""
},
{
"id": "US-209",
"title": "Butoane Context-Aware în Editare Bon",
"description": "Ca utilizator vreau butoanele din editare bon să se schimbe în funcție de starea bonului",
"priority": 12,
"acceptanceCriteria": [
"ReceiptCreateUnifiedView detectează starea bonului (draft/pending/approved/rejected)",
"Draft: Salvează | Submit pentru Aprobare | Șterge",
"Pending: Salvează | Aprobă | Respinge (dacă are permisiuni)",
"Approved: doar vizualizare (butoane disabled sau ascunse)",
"Rejected: Salvează (re-edit) | Re-submit",
"Butoane în MobileActionBar fix jos pe mobil",
"npm run build passes"
],
"passes": false,
"notes": ""
},
{
"id": "US-211",
"title": "Integrare MobileActionBar în ReceiptCreateUnifiedView",
"description": "Ca utilizator vreau butoanele de acțiune pentru bon să fie în action bar pe mobil",
"priority": 13,
"acceptanceCriteria": [
"MobileTopBar adăugat cu title 'Loguri Server'",
"Actions în header: refresh, export",
"MobileBottomNav adăugat",
"ReceiptCreateUnifiedView folosește MobileActionBar pe mobil",
"Desktop păstrează butoanele în form",
"Buton Înapoi în MobileTopBar (deja există din US-105)",
"Action bar dispare când se deschide BottomSheet sau alte overlay-uri",
"npm run build passes"
],
"passes": true,
"notes": "Completed in iteration 14"
"passes": false,
"notes": ""
},
{
"id": "US-111",
"title": "CacheStatsView Mobile Material Design",
"description": "Ca admin vreau pagina de statistici cache să aibă interfață Material",
"id": "US-214",
"title": "Actualizare Documentație MOBILE_PATTERNS.md",
"description": "Ca developer viitor vreau documentația actualizată cu noile componente și pattern-uri",
"priority": 14,
"acceptanceCriteria": [
"MobileTopBar adăugat cu title 'Statistici Cache'",
"Actions în header: refresh",
"MobileBottomNav adăugat",
"npm run build passes"
"Secțiune nouă: MobileDrawerMenu (usage, props)",
"Secțiune nouă: MobileActionBar (usage, props)",
"Secțiune actualizată: Navigation patterns (footer → settings hub)",
"Diagrame ASCII actualizate cu noile rute",
"npm run build passes (doar pentru validare că nu s-a stricat nimic)"
],
"passes": true,
"notes": "Completed in iteration 1"
},
{
"id": "US-113",
"title": "Batch Actions per Module contextuale",
"description": "Ca utilizator vreau acțiuni batch diferite în funcție de modulul curent",
"priority": 15,
"acceptanceCriteria": [
"MobileSelectionFooter acceptă prop actions ca array",
"Bonuri: Delete + Export",
"Facturi (dacă se adaugă selecție): Export + Print",
"Fiecare acțiune are icon, label, severity, handler",
"npm run build passes"
],
"passes": true,
"notes": "Completed in iteration 2"
},
{
"id": "US-118",
"title": "Creare MOBILE_PATTERNS.md documentație",
"description": "Ca developer vreau documentație dedicată pentru pattern-urile mobile",
"priority": 16,
"acceptanceCriteria": [
"Fișier docs/MOBILE_PATTERNS.md creat",
"Table of Contents cu linkuri rapide",
"Secțiuni: MobileTopBar, MobileBottomNav, MobileSelectionFooter, BottomSheet, SwipeableCards",
"Exemple de cod copy-paste pentru fiecare componentă",
"Secțiune Quick Start pentru devs noi",
"Diagrame ASCII pentru layout mobile"
],
"passes": true,
"notes": "Completed in iteration 3"
},
{
"id": "US-115",
"title": "Actualizare CSS_PATTERNS.md cu Mobile Material Design",
"description": "Ca developer viitor vreau referință la MOBILE_PATTERNS.md în CSS_PATTERNS.md",
"priority": 17,
"acceptanceCriteria": [
"Secțiune nouă 'Mobile Material Design' în CSS_PATTERNS.md",
"Link către docs/MOBILE_PATTERNS.md pentru detalii",
"Rezumat scurt al componentelor disponibile",
"Breakpoint-uri mobile documentate"
],
"passes": true,
"notes": "Completed in iteration 4"
},
{
"id": "US-116",
"title": "Actualizare DESIGN_TOKENS.md cu MD3 Tokens",
"description": "Ca developer vreau documentație pentru noile MD3 color tokens",
"priority": 18,
"acceptanceCriteria": [
"Secțiune nouă 'Material Design 3 Tokens' în DESIGN_TOKENS.md",
"Tabel cu toate variabilele --md-sys-color-*",
"Mapping la tokens existenți",
"Exemple pentru dark mode"
],
"passes": true,
"notes": "Completed in iteration 5"
},
{
"id": "US-117",
"title": "Actualizare CLAUDE.md cu reguli Mobile Development",
"description": "Ca Claude Code vreau reguli clare pentru dezvoltare mobilă",
"priority": 19,
"acceptanceCriteria": [
"Secțiune nouă '### Mobile Development Rules' în CLAUDE.md",
"Regulă: Toate paginile mobile folosesc MobileTopBar",
"Regulă: Filtrele pe mobil în BottomSheet",
"Regulă: Selecția afișează acțiuni în footer",
"Regulă: Touch targets minim 44x44px",
"Checklist rapid pentru code review mobile"
],
"passes": true,
"notes": "Completed in iteration 6"
},
{
"id": "US-119",
"title": "Actualizare claude-learn-frontend.md cu pattern-uri noi",
"description": "Ca Claude Code vreau pattern-urile salvate în memoria pentru sesiuni viitoare",
"priority": 20,
"acceptanceCriteria": [
"Pattern: Mobile Material Design Component Architecture",
"Pattern: Bottom Sheet Filter Pattern",
"Pattern: Mobile Selection Mode Flow",
"Gotcha: Nu duplica delete button în header și footer",
"Format corect cu @date și tags #mobile #material-design"
],
"passes": true,
"notes": "Completed in iteration 7"
"passes": false,
"notes": ""
}
]
}