From e325663cc1ceb7873d486a745a63044bac26442d Mon Sep 17 00:00:00 2001
From: Claude Agent <claude-agent@romfast.ro>
Date: Mon, 12 Jan 2026 23:28:25 +0000
Subject: [PATCH] feat(unified-mobile-desktop-ui): Complete US-515 - Lista
 Bonuri - Meniu 'Bon Nou/Bulk Upload' Material Design

Implemented by Ralph autonomous loop.
Iteration: 17

Co-Authored-By: Claude <noreply@anthropic.com>
---
 scripts/ralph/prd.json                        |   4 +-
 scripts/ralph/progress.txt                    |  11 ++
 .../views/receipts/ReceiptsListView.vue       | 158 ++++++++++++++----
 3 files changed, 135 insertions(+), 38 deletions(-)

diff --git a/scripts/ralph/prd.json b/scripts/ralph/prd.json
index 2b14de0..4b458f5 100644
--- a/scripts/ralph/prd.json
+++ b/scripts/ralph/prd.json
@@ -315,8 +315,8 @@
         "npm run build passes",
         "Verify in browser: meniul arată modern și consistent"
       ],
-      "passes": false,
-      "notes": ""
+      "passes": true,
+      "notes": "Completed in iteration 17"
     },
     {
       "id": "US-516",
diff --git a/scripts/ralph/progress.txt b/scripts/ralph/progress.txt
index 96e53e9..df730ea 100644
--- a/scripts/ralph/progress.txt
+++ b/scripts/ralph/progress.txt
@@ -159,3 +159,14 @@ Design Reference: src/modules/reports/views/InvoicesView.vue
 [2026-01-12 23:11:58] Working on story: US-514
 [2026-01-12 23:11:58] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_15_US-514.log)
 [2026-01-12 23:16:20] SUCCESS: Story US-514 passed!
+[2026-01-12 23:16:20] Changes committed
+[2026-01-12 23:16:20] Progress: 14/19 stories completed
+[2026-01-12 23:16:22] === Iteration 16/100 ===
+[2026-01-12 23:16:22] Working on story: US-515
+[2026-01-12 23:16:22] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_16_US-515.log)
+[2026-01-12 23:24:24] Story US-515 not yet complete, continuing...
+[2026-01-12 23:24:24] Progress: 14/19 stories completed
+[2026-01-12 23:24:26] === Iteration 17/100 ===
+[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!
diff --git a/src/modules/data-entry/views/receipts/ReceiptsListView.vue b/src/modules/data-entry/views/receipts/ReceiptsListView.vue
index ae4bc02..7d53561 100644
--- a/src/modules/data-entry/views/receipts/ReceiptsListView.vue
+++ b/src/modules/data-entry/views/receipts/ReceiptsListView.vue
@@ -1230,7 +1230,7 @@ const exportMenuItems = computed(() => [
   }
 ])
 
-// US-303: FAB Menu Items (Bon Nou | Upload Bulk)
+// US-303/US-515: FAB Menu Items (Bon Nou | Upload Bulk) - Material Design 3
 const fabMenuItems = [
   {
     label: 'Bon Nou',
@@ -1242,7 +1242,7 @@ const fabMenuItems = [
   },
   {
     label: 'Upload Bulk',
-    icon: 'pi pi-cloud-upload',
+    icon: 'pi pi-upload',
     command: () => {
       fabMenuOpen.value = false
       openBulkFileInput()
@@ -4829,40 +4829,6 @@ const cleanupCompletedBatches = (storedBatchIds) => {
   transform: rotate(45deg);
 }
 
-/* US-303: FAB Popup Menu positioning */
-.fab-popup-menu {
-  /* Position above FAB, aligned to right */
-  position: fixed !important;
-  bottom: 140px !important; /* 72px FAB position + 56px FAB height + 12px spacing */
-  right: var(--space-md) !important;
-  left: auto !important;
-  top: auto !important;
-  min-width: 180px;
-  z-index: 1000 !important;
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-xl);
-}
-
-.fab-popup-menu .p-menuitem {
-  padding: 0;
-}
-
-.fab-popup-menu .p-menuitem-link {
-  padding: var(--space-md) var(--space-lg);
-  gap: var(--space-sm);
-  font-size: var(--text-base);
-  min-height: 48px; /* Touch-friendly */
-}
-
-.fab-popup-menu .p-menuitem-icon {
-  font-size: var(--text-lg);
-  color: var(--color-primary);
-}
-
-.fab-popup-menu .p-menuitem-text {
-  font-weight: var(--font-medium);
-}
-
 /* FAB slide animation */
 .fab-slide-enter-active,
 .fab-slide-leave-active {
@@ -5096,3 +5062,123 @@ const cleanupCompletedBatches = (storedBatchIds) => {
   border-top: 1px solid var(--surface-border);
 }
 </style>
+
+<!-- US-515: Non-scoped styles for FAB Popup Menu (teleported to body) -->
+<style>
+/* US-515: FAB Popup Menu - Material Design 3 Styling */
+/* Non-scoped because PrimeVue Menu is teleported to document body */
+.fab-popup-menu.p-menu.p-menu-overlay {
+  /* Position above FAB - override PrimeVue inline styles */
+  position: fixed !important;
+  bottom: 140px !important;
+  right: 16px !important;
+  left: auto !important;
+  top: auto !important;
+  min-width: 200px !important;
+  z-index: 1002 !important;
+
+  /* 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: 12px !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: bottom right !important;
+  animation: fabMenuSlideIn 250ms ease-out !important;
+  overflow: hidden !important;
+}
+
+/* MD3 Menu Animation */
+@keyframes fabMenuSlideIn {
+  from {
+    opacity: 0;
+    transform: scale(0.85) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* Menu container padding for visual breathing room */
+.fab-popup-menu.p-menu .p-menu-list {
+  padding: 8px 0 !important;
+}
+
+.fab-popup-menu.p-menu .p-menuitem {
+  padding: 0 !important;
+  margin: 0 4px !important;
+}
+
+/* PrimeVue 4 uses .p-menuitem-content instead of .p-menuitem-link */
+.fab-popup-menu.p-menu .p-menuitem-content {
+  display: flex !important;
+  align-items: center !important;
+  gap: 16px !important;
+  padding: 8px 16px !important;
+  min-height: 48px !important; /* MD3: 48px touch target */
+  font-size: 1rem !important;
+  color: var(--md-sys-color-on-surface, var(--text-color)) !important;
+  background: transparent !important;
+  border-radius: 8px !important;
+  text-decoration: none !important;
+  cursor: pointer !important;
+  transition: background-color 150ms ease, transform 150ms ease !important;
+  position: relative !important;
+  overflow: hidden !important;
+}
+
+/* MD3 State Layer: Hover effect */
+.fab-popup-menu.p-menu .p-menuitem-content:hover {
+  background: var(--md-sys-color-surface-variant, var(--surface-hover)) !important;
+}
+
+/* MD3 State Layer: Active/Press effect */
+.fab-popup-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 */
+.fab-popup-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 */
+.fab-popup-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 150ms ease !important;
+}
+
+/* Icon color on hover */
+.fab-popup-menu.p-menu .p-menuitem-content:hover .p-menuitem-icon {
+  color: var(--md-sys-color-primary, var(--color-primary)) !important;
+}
+
+/* Text styling - MD3 label */
+.fab-popup-menu.p-menu .p-menuitem-text {
+  font-weight: 500 !important;
+  font-size: 1rem !important;
+  line-height: 1.5 !important;
+  color: var(--md-sys-color-on-surface, var(--text-color)) !important;
+}
+
+/* Spacing between menu items */
+.fab-popup-menu.p-menu .p-menuitem + .p-menuitem {
+  margin-top: 4px !important;
+}
+</style>