af012a7a11
Implemented by Ralph autonomous loop. Iteration: 3 Co-Authored-By: Claude <noreply@anthropic.com>
411 lines
17 KiB
JSON
411 lines
17 KiB
JSON
{
|
|
"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",
|
|
"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/)",
|
|
"Mobile: toate paginile folosesc MobileTopBar + MobileBottomNav",
|
|
"Mobile: filtrele se pun în BottomSheet, NU inline",
|
|
"Mobile: v-if='isMobile' pentru componente mobile-only",
|
|
"Desktop: v-if='!isMobile' pentru componente desktop-only"
|
|
],
|
|
"mobileLayoutTokens": {
|
|
"topBarHeight": "56px",
|
|
"bottomNavHeight": "56px",
|
|
"fabSize": "56px",
|
|
"fabBottomOffset": "72px",
|
|
"touchTargetMin": "48px"
|
|
}
|
|
},
|
|
"referenceFiles": {
|
|
"designReference": "src/modules/reports/views/InvoicesView.vue",
|
|
"mobileComponents": [
|
|
"src/shared/components/mobile/MobileTopBar.vue",
|
|
"src/shared/components/mobile/MobileDrawerMenu.vue",
|
|
"src/shared/components/mobile/MobileBottomNav.vue",
|
|
"src/shared/components/mobile/BottomSheet.vue",
|
|
"src/shared/components/mobile/MobileSelectionFooter.vue"
|
|
]
|
|
},
|
|
"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",
|
|
"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"
|
|
],
|
|
"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",
|
|
"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"
|
|
],
|
|
"passes": true,
|
|
"notes": "Completed in iteration 2"
|
|
},
|
|
{
|
|
"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",
|
|
"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"
|
|
],
|
|
"passes": true,
|
|
"notes": "Completed in iteration 3"
|
|
},
|
|
{
|
|
"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",
|
|
"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ă"
|
|
],
|
|
"passes": false,
|
|
"notes": ""
|
|
},
|
|
{
|
|
"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",
|
|
"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ă"
|
|
],
|
|
"passes": false,
|
|
"notes": ""
|
|
},
|
|
{
|
|
"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",
|
|
"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"
|
|
],
|
|
"passes": false,
|
|
"notes": ""
|
|
},
|
|
{
|
|
"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",
|
|
"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"
|
|
],
|
|
"passes": false,
|
|
"notes": ""
|
|
},
|
|
{
|
|
"id": "US-508",
|
|
"title": "Selector Temă în MobileDrawerMenu (Dark/Light/Auto)",
|
|
"description": "Ca utilizator pe mobil vreau să pot schimba tema din drawer menu",
|
|
"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"
|
|
],
|
|
"passes": false,
|
|
"notes": ""
|
|
},
|
|
{
|
|
"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)",
|
|
"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"
|
|
],
|
|
"passes": false,
|
|
"notes": ""
|
|
},
|
|
{
|
|
"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",
|
|
"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"
|
|
],
|
|
"passes": false,
|
|
"notes": ""
|
|
},
|
|
{
|
|
"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": false,
|
|
"notes": ""
|
|
},
|
|
{
|
|
"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": false,
|
|
"notes": ""
|
|
},
|
|
{
|
|
"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": false,
|
|
"notes": ""
|
|
},
|
|
{
|
|
"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": false,
|
|
"notes": ""
|
|
},
|
|
{
|
|
"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": false,
|
|
"notes": ""
|
|
},
|
|
{
|
|
"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": false,
|
|
"notes": ""
|
|
},
|
|
{
|
|
"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": false,
|
|
"notes": ""
|
|
},
|
|
{
|
|
"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": false,
|
|
"notes": ""
|
|
},
|
|
{
|
|
"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": false,
|
|
"notes": ""
|
|
}
|
|
]
|
|
}
|