feat(unified-mobile-desktop-ui): Complete US-517 - Lista Bonuri Desktop - Dialog Ștergere Material Design

Implemented by Ralph autonomous loop.
Iteration: 19

Co-Authored-By: Claude <noreply@anthropic.com>

scripts/ralph/prd.json

@@ -355,8 +355,8 @@
         "npm run build passes",
         "Verify in browser: dialogul arată modern"
       ],
-      "passes": false,
+      "passes": true,
-      "notes": ""
+      "notes": "Completed in iteration 19"
     },
     {
       "id": "US-518",

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!

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;
+  }
+}

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?`,
+    message: `Ești sigur că vrei să ștergi bonul de la "${storeName}" în valoare de ${amount}?`,
-    header: 'Confirmare ștergere',
+    header: 'Șterge bonul?',
-    icon: 'pi pi-exclamation-triangle',
+    icon: 'pi pi-trash',
     acceptClass: 'p-button-danger',
+    rejectClass: 'p-button-text',
+    acceptLabel: 'Șterge',
+    rejectLabel: 'Anulează',
     accept: async () => {
       try {
         await store.deleteReceipt(receipt.id)