From 817e2c7529335a94777ba5ffc00828234752e80e Mon Sep 17 00:00:00 2001 From: Claude Agent Date: Mon, 12 Jan 2026 23:35:59 +0000 Subject: [PATCH] =?UTF-8?q?feat(unified-mobile-desktop-ui):=20Complete=20U?= =?UTF-8?q?S-517=20-=20Lista=20Bonuri=20Desktop=20-=20Dialog=20=C8=98terge?= =?UTF-8?q?re=20Material=20Design?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implemented by Ralph autonomous loop. Iteration: 19 Co-Authored-By: Claude --- scripts/ralph/prd.json | 4 +- scripts/ralph/progress.txt | 6 + src/assets/css/vendor/primevue-overrides.css | 159 ++++++++++++++++++ .../views/receipts/ReceiptsListView.vue | 15 +- 4 files changed, 179 insertions(+), 5 deletions(-) diff --git a/scripts/ralph/prd.json b/scripts/ralph/prd.json index db004a9..6c3c1dc 100644 --- a/scripts/ralph/prd.json +++ b/scripts/ralph/prd.json @@ -355,8 +355,8 @@ "npm run build passes", "Verify in browser: dialogul arată modern" ], - "passes": false, - "notes": "" + "passes": true, + "notes": "Completed in iteration 19" }, { "id": "US-518", diff --git a/scripts/ralph/progress.txt b/scripts/ralph/progress.txt index 578845b..d37f1e8 100644 --- a/scripts/ralph/progress.txt +++ b/scripts/ralph/progress.txt @@ -176,3 +176,9 @@ Design Reference: src/modules/reports/views/InvoicesView.vue [2026-01-12 23:28:27] Working on story: US-516 [2026-01-12 23:28:27] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_18_US-516.log) [2026-01-12 23:33:04] SUCCESS: Story US-516 passed! +[2026-01-12 23:33:04] Changes committed +[2026-01-12 23:33:04] Progress: 16/19 stories completed +[2026-01-12 23:33:06] === Iteration 19/100 === +[2026-01-12 23:33:06] Working on story: US-517 +[2026-01-12 23:33:06] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_19_US-517.log) +[2026-01-12 23:35:59] SUCCESS: Story US-517 passed! diff --git a/src/assets/css/vendor/primevue-overrides.css b/src/assets/css/vendor/primevue-overrides.css index 202109b..585bc46 100644 --- a/src/assets/css/vendor/primevue-overrides.css +++ b/src/assets/css/vendor/primevue-overrides.css @@ -433,3 +433,162 @@ 100% { opacity: 0; } } } + +/* ============ US-517: Material Design 3 ConfirmDialog ============ */ + +/** + * MD3-styled ConfirmDialog for delete confirmations and other modals. + * Features: elevated surface, proper spacing, clear button hierarchy. + */ + +/* Dialog container - MD3 elevated surface */ +.p-confirm-dialog { + border-radius: var(--radius-lg) !important; + box-shadow: var(--shadow-xl) !important; + background: var(--surface-card) !important; + border: none !important; + min-width: 320px !important; + max-width: 400px !important; +} + +/* Dialog header - MD3 style with proper spacing */ +.p-confirm-dialog .p-dialog-header { + padding: var(--space-lg) var(--space-lg) var(--space-sm) var(--space-lg) !important; + background: var(--surface-card) !important; + border-bottom: none !important; + border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; +} + +/* Dialog title - MD3 headline style */ +.p-confirm-dialog .p-dialog-title { + font-size: var(--text-xl) !important; + font-weight: var(--font-semibold) !important; + color: var(--text-color) !important; + line-height: var(--leading-tight) !important; +} + +/* Hide default icon in header (we'll use it in content) */ +.p-confirm-dialog .p-dialog-header-icons { + display: flex; +} + +/* Dialog content - MD3 body text */ +.p-confirm-dialog .p-dialog-content { + padding: var(--space-sm) var(--space-lg) var(--space-lg) var(--space-lg) !important; + background: var(--surface-card) !important; + color: var(--text-color-secondary) !important; + font-size: var(--text-base) !important; + line-height: var(--leading-normal) !important; +} + +/* Icon in content area */ +.p-confirm-dialog .p-confirm-dialog-icon { + font-size: 1.5rem !important; + margin-right: var(--space-md) !important; + color: var(--color-error) !important; +} + +/* Message text */ +.p-confirm-dialog .p-confirm-dialog-message { + margin-left: 0 !important; + color: var(--text-color-secondary) !important; +} + +/* Dialog footer - MD3 actions area */ +.p-confirm-dialog .p-dialog-footer { + padding: var(--space-sm) var(--space-lg) var(--space-lg) var(--space-lg) !important; + background: var(--surface-card) !important; + border-top: none !important; + border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important; + display: flex !important; + justify-content: flex-end !important; + gap: var(--space-sm) !important; +} + +/* Footer buttons - MD3 text button style */ +.p-confirm-dialog .p-dialog-footer .p-button { + min-width: 80px !important; + padding: var(--space-sm) var(--space-md) !important; + font-weight: var(--font-medium) !important; + border-radius: var(--radius-md) !important; +} + +/* Secondary/Cancel button - MD3 text button */ +.p-confirm-dialog .p-dialog-footer .p-button.p-button-text, +.p-confirm-dialog .p-dialog-footer .p-button:not(.p-button-danger):not(.p-button-success) { + background: transparent !important; + color: var(--color-primary) !important; + border: none !important; +} + +.p-confirm-dialog .p-dialog-footer .p-button.p-button-text:hover, +.p-confirm-dialog .p-dialog-footer .p-button:not(.p-button-danger):not(.p-button-success):hover { + background: var(--primary-50, rgba(37, 99, 235, 0.08)) !important; +} + +/* Danger button - MD3 filled tonal */ +.p-confirm-dialog .p-dialog-footer .p-button.p-button-danger { + background: var(--color-error) !important; + color: var(--color-text-inverse) !important; + border: none !important; +} + +.p-confirm-dialog .p-dialog-footer .p-button.p-button-danger:hover { + background: var(--red-700, #b91c1c) !important; + box-shadow: var(--shadow-md) !important; +} + +/* Dark mode support */ +[data-theme="dark"] .p-confirm-dialog { + background: var(--surface-card) !important; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; +} + +[data-theme="dark"] .p-confirm-dialog .p-dialog-header, +[data-theme="dark"] .p-confirm-dialog .p-dialog-content, +[data-theme="dark"] .p-confirm-dialog .p-dialog-footer { + background: var(--surface-card) !important; +} + +[data-theme="dark"] .p-confirm-dialog .p-dialog-footer .p-button.p-button-text:hover, +[data-theme="dark"] .p-confirm-dialog .p-dialog-footer .p-button:not(.p-button-danger):not(.p-button-success):hover { + background: rgba(96, 165, 250, 0.15) !important; +} + +/* System preference dark mode */ +@media (prefers-color-scheme: dark) { + :root:not([data-theme]) .p-confirm-dialog { + background: var(--surface-card) !important; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; + } + + :root:not([data-theme]) .p-confirm-dialog .p-dialog-header, + :root:not([data-theme]) .p-confirm-dialog .p-dialog-content, + :root:not([data-theme]) .p-confirm-dialog .p-dialog-footer { + background: var(--surface-card) !important; + } + + :root:not([data-theme]) .p-confirm-dialog .p-dialog-footer .p-button.p-button-text:hover, + :root:not([data-theme]) .p-confirm-dialog .p-dialog-footer .p-button:not(.p-button-danger):not(.p-button-success):hover { + background: rgba(96, 165, 250, 0.15) !important; + } +} + +/* Mobile responsive adjustments */ +@media (max-width: 768px) { + .p-confirm-dialog { + min-width: unset !important; + max-width: 90vw !important; + width: 90vw !important; + margin: var(--space-md) !important; + } + + .p-confirm-dialog .p-dialog-footer { + flex-direction: row !important; + gap: var(--space-sm) !important; + } + + .p-confirm-dialog .p-dialog-footer .p-button { + flex: 1 !important; + } +} diff --git a/src/modules/data-entry/views/receipts/ReceiptsListView.vue b/src/modules/data-entry/views/receipts/ReceiptsListView.vue index 113c2fa..14395df 100644 --- a/src/modules/data-entry/views/receipts/ReceiptsListView.vue +++ b/src/modules/data-entry/views/receipts/ReceiptsListView.vue @@ -2297,11 +2297,20 @@ const editReceipt = (id) => { } const confirmDelete = (receipt) => { + // US-517: MD3 styled delete dialog with receipt details + const storeName = receipt.store_name || 'Magazin necunoscut' + const amount = receipt.total + ? new Intl.NumberFormat('ro-RO', { style: 'currency', currency: 'RON' }).format(receipt.total) + : 'sumă necunoscută' + confirm.require({ - message: `Sigur doriți să ștergeți acest bon?`, - header: 'Confirmare ștergere', - icon: 'pi pi-exclamation-triangle', + message: `Ești sigur că vrei să ștergi bonul de la "${storeName}" în valoare de ${amount}?`, + header: 'Șterge bonul?', + icon: 'pi pi-trash', acceptClass: 'p-button-danger', + rejectClass: 'p-button-text', + acceptLabel: 'Șterge', + rejectLabel: 'Anulează', accept: async () => { try { await store.deleteReceipt(receipt.id)