{ "projectName": "unified-mobile-material-design", "branchName": "ralph/unified-mobile-md", "description": "Extinderea interfeței Material Design la toate paginile aplicației în modul mobil pentru consistență UI/UX", "cssRules": { "documentation": [ "docs/ONBOARDING_CSS.md", "docs/DESIGN_TOKENS.md", "docs/CSS_PATTERNS.md", "docs/MOBILE_PATTERNS.md" ], "goldenRules": [ "Folosește DOAR design tokens - NICIODATĂ valori hardcodate", "Verifică CSS_PATTERNS.md înainte de a scrie CSS nou", "Testează în AMBELE teme (light + dark mode)", "NICIODATĂ :deep() în componente (PrimeVue → vendor/)", "NICIODATĂ duplicate CSS (write once, use everywhere)", "Mobile: toate paginile folosesc MobileTopBar + MobileBottomNav", "Mobile: filtrele se pun în BottomSheet, NU inline", "Mobile: selecția afișează acțiuni în footer, NU în header" ], "mobileLayoutTokens": { "topBarHeight": "56px", "bottomNavHeight": "56px", "fabSize": "56px", "fabBottomOffset": "72px", "touchTargetMin": "48px" } }, "userStories": [ { "id": "US-101a", "title": "Creare MobileTopBar.vue component", "description": "Ca developer vreau componentă MobileTopBar.vue extrasă din ReceiptsListView pentru reutilizare", "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']", "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", "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", "npm run build passes" ], "passes": true, "notes": "Completed in iteration 2" }, { "id": "US-101c", "title": "Creare MobileSelectionFooter.vue component", "description": "Ca developer vreau componentă pentru acțiuni batch când sunt selectate elemente", "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", "npm run build passes" ], "passes": true, "notes": "Completed in iteration 3" }, { "id": "US-102", "title": "Definire MD3 color tokens în CSS", "description": "Ca developer vreau variabile CSS pentru Material Design 3 color system", "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", "npm run build passes" ], "passes": true, "notes": "Completed in iteration 4" }, { "id": "US-103", "title": "Refactor ReceiptsListView să folosească componente comune", "description": "Ca developer vreau ReceiptsListView să folosească noile componente pentru validare API", "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", "npm run build passes" ], "passes": true, "notes": "Completed in iteration 5" }, { "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ă", "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", "Filtre în BottomSheet pe mobil", "npm run build passes" ], "passes": true, "notes": "Completed in iteration 13" }, { "id": "US-110", "title": "ServerLogsView Mobile Material Design", "description": "Ca admin vreau pagina de loguri să aibă interfață Material", "priority": 13, "acceptanceCriteria": [ "MobileTopBar adăugat cu title 'Loguri Server'", "Actions în header: refresh, export", "MobileBottomNav adăugat", "npm run build passes" ], "passes": false, "notes": "" }, { "id": "US-111", "title": "CacheStatsView Mobile Material Design", "description": "Ca admin vreau pagina de statistici cache să aibă interfață Material", "priority": 14, "acceptanceCriteria": [ "MobileTopBar adăugat cu title 'Statistici Cache'", "Actions în header: refresh", "MobileBottomNav adăugat", "npm run build passes" ], "passes": false, "notes": "" }, { "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": false, "notes": "" }, { "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": false, "notes": "" }, { "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": false, "notes": "" }, { "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": false, "notes": "" }, { "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": false, "notes": "" }, { "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": false, "notes": "" } ] }