feat(unified-mobile-desktop-ui): Complete US-516 - Lista Bonuri - Meniu Acțiuni Per Bon Material Design

Implemented by Ralph autonomous loop. Iteration: 18 Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-12 23:33:04 +00:00
parent e325663cc1
commit 97095f50ef
3 changed files with 283 additions and 9 deletions
--- a/scripts/ralph/prd.json
+++ b/scripts/ralph/prd.json
@@ -335,8 +335,8 @@
        "npm run build passes",
        "Verify in browser: meniul arată modern"
      ],
-      "passes": false,
-      "notes": ""
+      "passes": true,
+      "notes": "Completed in iteration 18"
    },
    {
      "id": "US-517",
--- a/scripts/ralph/progress.txt
+++ b/scripts/ralph/progress.txt
@@ -170,3 +170,9 @@ Design Reference: src/modules/reports/views/InvoicesView.vue
 [2026-01-12 23:24:26] Working on story: US-515
 [2026-01-12 23:24:26] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_17_US-515.log)
 [2026-01-12 23:28:25] SUCCESS: Story US-515 passed!
+[2026-01-12 23:28:25] Changes committed
+[2026-01-12 23:28:25] Progress: 15/19 stories completed
+[2026-01-12 23:28:27] === Iteration 18/100 ===
+[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!
--- a/src/modules/data-entry/views/receipts/ReceiptsListView.vue
+++ b/src/modules/data-entry/views/receipts/ReceiptsListView.vue
@@ -1068,8 +1068,8 @@
        </div>
      </div>

-      <!-- Shared Context Menu (for both mobile and desktop) -->
-      <Menu ref="menuRef" :model="menuItems" popup />
+      <!-- Shared Context Menu (for both mobile and desktop) - US-516: MD3 styled -->
+      <Menu ref="menuRef" :model="menuItems" popup class="receipt-action-menu" />
    </div>
  </div>
 </template>
@@ -1451,6 +1451,7 @@ const toggleMenu = (event, receipt) => {
  menuRef.value.toggle(event)
 }

+// US-516: Receipt action menu items with MD3 styling classes
 const menuItems = computed(() => {
  const r = selectedReceipt.value
  if (!r) return []
@@ -1463,20 +1464,20 @@ const menuItems = computed(() => {
    items.push({ label: 'Editează', icon: 'pi pi-pencil', command: () => editReceipt(r.id) })
    items.push({ label: 'Spre aprobare', icon: 'pi pi-send', command: () => confirmSubmit(r) })
    items.push({ separator: true })
-    items.push({ label: 'Șterge', icon: 'pi pi-trash', class: 'text-red-500', command: () => confirmDelete(r) })
+    items.push({ label: 'Șterge', icon: 'pi pi-trash', class: 'menu-item-danger', command: () => confirmDelete(r) })
  }

  // PENDING: Approve + Reject
  if (r.status === 'pending_review') {
    items.push({ separator: true })
-    items.push({ label: 'Validează', icon: 'pi pi-check', class: 'text-green-500', command: () => confirmApprove(r) })
-    items.push({ label: 'Respinge', icon: 'pi pi-times', class: 'text-red-500', command: () => openRejectDialog(r) })
+    items.push({ label: 'Validează', icon: 'pi pi-check', class: 'menu-item-success', command: () => confirmApprove(r) })
+    items.push({ label: 'Respinge', icon: 'pi pi-times', class: 'menu-item-danger', command: () => openRejectDialog(r) })
  }

  // APPROVED: Unapprove
  if (r.status === 'approved') {
    items.push({ separator: true })
-    items.push({ label: 'Anulare Validare', icon: 'pi pi-undo', class: 'text-orange-500', command: () => confirmUnapprove(r) })
+    items.push({ label: 'Anulare Validare', icon: 'pi pi-undo', class: 'menu-item-warning', command: () => confirmUnapprove(r) })
  }

  // REJECTED: Edit + Resubmit + Delete
@@ -1484,7 +1485,7 @@ const menuItems = computed(() => {
    items.push({ label: 'Editează', icon: 'pi pi-pencil', command: () => editReceipt(r.id) })
    items.push({ label: 'Retrimite', icon: 'pi pi-replay', command: () => confirmResubmit(r) })
    items.push({ separator: true })
-    items.push({ label: 'Șterge', icon: 'pi pi-trash', class: 'text-red-500', command: () => confirmDelete(r) })
+    items.push({ label: 'Șterge', icon: 'pi pi-trash', class: 'menu-item-danger', command: () => confirmDelete(r) })
  }

  return items
@@ -5182,3 +5183,270 @@ const cleanupCompletedBatches = (storedBatchIds) => {
  margin-top: 4px !important;
 }
 </style>
+
+<!-- US-516: Non-scoped styles for Receipt Action Menu (teleported to body) -->
+<style>
+/* ============================================================================
+ * US-516: Receipt Action Menu - Material Design 3 Styling
+ * Non-scoped because PrimeVue Menu is teleported to document body
+ * ============================================================================ */
+
+/* Base menu container styling */
+.receipt-action-menu.p-menu.p-menu-overlay {
+  /* MD3 Surface: Use tonal surface for elevation */
+  background: var(--md-sys-color-surface-container-high, var(--surface-card)) !important;
+  border: 1px solid var(--md-sys-color-outline-variant, var(--surface-border)) !important;
+  border-radius: var(--radius-lg, 12px) !important;
+  min-width: 200px !important;
+  max-width: 280px !important;
+
+  /* MD3 Elevation: Softer shadow for modern look */
+  box-shadow:
+    0 2px 4px -1px rgba(0, 0, 0, 0.1),
+    0 4px 6px -1px rgba(0, 0, 0, 0.06),
+    0 8px 16px -2px rgba(0, 0, 0, 0.1) !important;
+
+  /* Smooth entry animation */
+  transform-origin: top center !important;
+  animation: receiptMenuSlideIn 200ms ease-out !important;
+  overflow: hidden !important;
+}
+
+/* MD3 Menu Animation */
+@keyframes receiptMenuSlideIn {
+  from {
+    opacity: 0;
+    transform: scale(0.92) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* Menu container padding for visual breathing room */
+.receipt-action-menu.p-menu .p-menu-list {
+  padding: var(--space-sm, 8px) 0 !important;
+}
+
+/* Menu item container */
+.receipt-action-menu.p-menu .p-menuitem {
+  padding: 0 !important;
+  margin: 0 var(--space-xs, 4px) !important;
+}
+
+/* PrimeVue 4 uses .p-menuitem-content for the clickable area */
+.receipt-action-menu.p-menu .p-menuitem-content {
+  display: flex !important;
+  align-items: center !important;
+  gap: var(--space-md, 16px) !important;
+  padding: var(--space-sm, 8px) var(--space-md, 16px) !important;
+  min-height: 48px !important; /* MD3: 48px touch target for accessibility */
+  font-size: var(--text-base, 1rem) !important;
+  color: var(--md-sys-color-on-surface, var(--text-color)) !important;
+  background: transparent !important;
+  border-radius: var(--radius-md, 8px) !important;
+  text-decoration: none !important;
+  cursor: pointer !important;
+  transition: background-color var(--transition-fast, 150ms) ease,
+              transform var(--transition-fast, 150ms) ease !important;
+  position: relative !important;
+  overflow: hidden !important;
+}
+
+/* MD3 State Layer: Hover effect */
+.receipt-action-menu.p-menu .p-menuitem-content:hover {
+  background: var(--md-sys-color-surface-variant, var(--surface-hover)) !important;
+}
+
+/* MD3 State Layer: Active/Press effect */
+.receipt-action-menu.p-menu .p-menuitem-content:active {
+  background: var(--md-sys-color-primary-container, var(--primary-100)) !important;
+  transform: scale(0.98) !important;
+}
+
+/* MD3 Focus visible state for keyboard navigation */
+.receipt-action-menu.p-menu .p-menuitem:focus-visible .p-menuitem-content {
+  outline: 2px solid var(--md-sys-color-primary, var(--color-primary)) !important;
+  outline-offset: -2px !important;
+}
+
+/* Icon styling - MD3 leading icon */
+.receipt-action-menu.p-menu .p-menuitem-icon {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 24px !important;
+  height: 24px !important;
+  font-size: 1.25rem !important;
+  color: var(--md-sys-color-on-surface-variant, var(--color-text-secondary)) !important;
+  flex-shrink: 0 !important;
+  transition: color var(--transition-fast, 150ms) ease !important;
+}
+
+/* Icon color on hover */
+.receipt-action-menu.p-menu .p-menuitem-content:hover .p-menuitem-icon {
+  color: var(--md-sys-color-primary, var(--color-primary)) !important;
+}
+
+/* Text styling - MD3 label */
+.receipt-action-menu.p-menu .p-menuitem-text {
+  font-weight: var(--font-medium, 500) !important;
+  font-size: var(--text-base, 1rem) !important;
+  line-height: 1.5 !important;
+  color: var(--md-sys-color-on-surface, var(--text-color)) !important;
+}
+
+/* Spacing between menu items */
+.receipt-action-menu.p-menu .p-menuitem + .p-menuitem {
+  margin-top: 2px !important;
+}
+
+/* ============================================================================
+ * US-516: Menu Separator (Divider before destructive actions)
+ * ============================================================================ */
+.receipt-action-menu.p-menu .p-menu-separator {
+  margin: var(--space-sm, 8px) var(--space-md, 16px) !important;
+  border: none !important;
+  border-top: 1px solid var(--md-sys-color-outline-variant, var(--surface-border)) !important;
+  height: 0 !important;
+}
+
+/* ============================================================================
+ * US-516: Semantic Color Classes for Menu Items
+ * ============================================================================ */
+
+/* Danger/Destructive actions (Delete, Reject) */
+.receipt-action-menu.p-menu .p-menuitem.menu-item-danger .p-menuitem-content {
+  color: var(--md-sys-color-error, var(--color-error)) !important;
+}
+
+.receipt-action-menu.p-menu .p-menuitem.menu-item-danger .p-menuitem-icon {
+  color: var(--md-sys-color-error, var(--color-error)) !important;
+}
+
+.receipt-action-menu.p-menu .p-menuitem.menu-item-danger .p-menuitem-text {
+  color: var(--md-sys-color-error, var(--color-error)) !important;
+}
+
+.receipt-action-menu.p-menu .p-menuitem.menu-item-danger .p-menuitem-content:hover {
+  background: var(--md-sys-color-error-container, var(--red-100)) !important;
+}
+
+.receipt-action-menu.p-menu .p-menuitem.menu-item-danger .p-menuitem-content:active {
+  background: var(--md-sys-color-error-container, var(--red-200)) !important;
+}
+
+/* Success actions (Approve, Validate) */
+.receipt-action-menu.p-menu .p-menuitem.menu-item-success .p-menuitem-content {
+  color: var(--color-success, #059669) !important;
+}
+
+.receipt-action-menu.p-menu .p-menuitem.menu-item-success .p-menuitem-icon {
+  color: var(--color-success, #059669) !important;
+}
+
+.receipt-action-menu.p-menu .p-menuitem.menu-item-success .p-menuitem-text {
+  color: var(--color-success, #059669) !important;
+}
+
+.receipt-action-menu.p-menu .p-menuitem.menu-item-success .p-menuitem-content:hover {
+  background: var(--green-100, rgba(5, 150, 105, 0.1)) !important;
+}
+
+.receipt-action-menu.p-menu .p-menuitem.menu-item-success .p-menuitem-content:active {
+  background: var(--green-200, rgba(5, 150, 105, 0.2)) !important;
+}
+
+/* Warning actions (Unapprove) */
+.receipt-action-menu.p-menu .p-menuitem.menu-item-warning .p-menuitem-content {
+  color: var(--color-warning, #d97706) !important;
+}
+
+.receipt-action-menu.p-menu .p-menuitem.menu-item-warning .p-menuitem-icon {
+  color: var(--color-warning, #d97706) !important;
+}
+
+.receipt-action-menu.p-menu .p-menuitem.menu-item-warning .p-menuitem-text {
+  color: var(--color-warning, #d97706) !important;
+}
+
+.receipt-action-menu.p-menu .p-menuitem.menu-item-warning .p-menuitem-content:hover {
+  background: var(--yellow-100, rgba(217, 119, 6, 0.1)) !important;
+}
+
+.receipt-action-menu.p-menu .p-menuitem.menu-item-warning .p-menuitem-content:active {
+  background: var(--yellow-200, rgba(217, 119, 6, 0.2)) !important;
+}
+
+/* ============================================================================
+ * US-516: Dark Mode Support
+ * ============================================================================ */
+[data-theme="dark"] .receipt-action-menu.p-menu.p-menu-overlay {
+  background: var(--surface-800, #1e293b) !important;
+  border-color: var(--surface-600, #475569) !important;
+  box-shadow:
+    0 4px 8px -2px rgba(0, 0, 0, 0.3),
+    0 8px 16px -4px rgba(0, 0, 0, 0.25) !important;
+}
+
+[data-theme="dark"] .receipt-action-menu.p-menu .p-menuitem-content:hover {
+  background: var(--surface-700, #334155) !important;
+}
+
+[data-theme="dark"] .receipt-action-menu.p-menu .p-menuitem-content:active {
+  background: var(--surface-600, #475569) !important;
+}
+
+[data-theme="dark"] .receipt-action-menu.p-menu .p-menu-separator {
+  border-top-color: var(--surface-600, #475569) !important;
+}
+
+/* Dark mode semantic colors */
+[data-theme="dark"] .receipt-action-menu.p-menu .p-menuitem.menu-item-danger .p-menuitem-content:hover {
+  background: var(--red-900, rgba(220, 38, 38, 0.2)) !important;
+}
+
+[data-theme="dark"] .receipt-action-menu.p-menu .p-menuitem.menu-item-success .p-menuitem-content:hover {
+  background: var(--green-900, rgba(5, 150, 105, 0.2)) !important;
+}
+
+[data-theme="dark"] .receipt-action-menu.p-menu .p-menuitem.menu-item-warning .p-menuitem-content:hover {
+  background: var(--yellow-900, rgba(217, 119, 6, 0.2)) !important;
+}
+
+/* Auto dark mode (system preference) */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .receipt-action-menu.p-menu.p-menu-overlay {
+    background: var(--surface-800, #1e293b) !important;
+    border-color: var(--surface-600, #475569) !important;
+    box-shadow:
+      0 4px 8px -2px rgba(0, 0, 0, 0.3),
+      0 8px 16px -4px rgba(0, 0, 0, 0.25) !important;
+  }
+
+  :root:not([data-theme]) .receipt-action-menu.p-menu .p-menuitem-content:hover {
+    background: var(--surface-700, #334155) !important;
+  }
+
+  :root:not([data-theme]) .receipt-action-menu.p-menu .p-menuitem-content:active {
+    background: var(--surface-600, #475569) !important;
+  }
+
+  :root:not([data-theme]) .receipt-action-menu.p-menu .p-menu-separator {
+    border-top-color: var(--surface-600, #475569) !important;
+  }
+
+  :root:not([data-theme]) .receipt-action-menu.p-menu .p-menuitem.menu-item-danger .p-menuitem-content:hover {
+    background: var(--red-900, rgba(220, 38, 38, 0.2)) !important;
+  }
+
+  :root:not([data-theme]) .receipt-action-menu.p-menu .p-menuitem.menu-item-success .p-menuitem-content:hover {
+    background: var(--green-900, rgba(5, 150, 105, 0.2)) !important;
+  }
+
+  :root:not([data-theme]) .receipt-action-menu.p-menu .p-menuitem.menu-item-warning .p-menuitem-content:hover {
+    background: var(--yellow-900, rgba(217, 119, 6, 0.2)) !important;
+  }
+}
+</style>