From f66164f763499c48b68659a49331a8ed9ef4da4d Mon Sep 17 00:00:00 2001
From: Claude Agent <claude-agent@romfast.ro>
Date: Mon, 12 Jan 2026 19:36:45 +0000
Subject: [PATCH] =?UTF-8?q?feat(mobile-fixes-phase4):=20Complete=20US-406?=
 =?UTF-8?q?=20-=20Fix=20UI=20Bonuri=20cu=20Eroare=20-=20Afi=C8=99are=20Cor?=
 =?UTF-8?q?ect=C4=83=20pe=20Mobil?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented by Ralph autonomous loop.
Iteration: 5

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

diff --git a/scripts/ralph/prd.json b/scripts/ralph/prd.json
index 7650388..b422e9f 100644
--- a/scripts/ralph/prd.json
+++ b/scripts/ralph/prd.json
@@ -120,8 +120,8 @@
         "npm run build passes",
         "Verify in browser (375x667): Bon cu eroare arată 'Eroare' nu 'În procesare'"
       ],
-      "passes": false,
-      "notes": "Depinde de US-405 - bonurile failed trebuie să fie în listă mai întâi"
+      "passes": true,
+      "notes": "Completed in iteration 5"
     },
     {
       "id": "US-407",
diff --git a/scripts/ralph/progress.txt b/scripts/ralph/progress.txt
index 18ad321..0694b05 100644
--- a/scripts/ralph/progress.txt
+++ b/scripts/ralph/progress.txt
@@ -27,3 +27,9 @@ Stories: 8 (US-401 to US-408)
 [2026-01-12 19:27:07] Working on story: US-405
 [2026-01-12 19:27:07] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_4_US-405.log)
 [2026-01-12 19:31:08] SUCCESS: Story US-405 passed!
+[2026-01-12 19:31:09] Changes committed
+[2026-01-12 19:31:09] Progress: 5/8 stories completed
+[2026-01-12 19:31:11] === Iteration 5/50 ===
+[2026-01-12 19:31:11] Working on story: US-406
+[2026-01-12 19:31:11] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_5_US-406.log)
+[2026-01-12 19:36:45] SUCCESS: Story US-406 passed!
diff --git a/src/modules/data-entry/views/receipts/ReceiptsListView.vue b/src/modules/data-entry/views/receipts/ReceiptsListView.vue
index be56b58..92b913c 100644
--- a/src/modules/data-entry/views/receipts/ReceiptsListView.vue
+++ b/src/modules/data-entry/views/receipts/ReceiptsListView.vue
@@ -387,29 +387,57 @@
         >
           <!-- US-017: Job card layout -->
           <template v-if="isJobItem(item)">
-            <!-- Row 1: Filename + Processing indicator -->
+            <!-- Row 1: Filename + Status indicator -->
             <div class="card-row-1">
               <div class="partner-info">
                 <span class="partner job-filename-mobile">
                   <i class="pi pi-file"></i>
                   {{ item.filename }}
                 </span>
-                <span class="cui text-muted">Se procesează...</span>
+                <!-- US-406: Different subtitle for failed vs processing jobs -->
+                <span v-if="item.processing_status === 'failed'" class="cui text-error">
+                  Eroare OCR
+                </span>
+                <span v-else class="cui text-muted">Se procesează...</span>
               </div>
               <div class="amount-block">
                 <span class="amount text-muted">-</span>
               </div>
-              <span class="job-processing-indicator-mobile">
+              <!-- US-406: Show error icon for failed, spinner for processing -->
+              <span v-if="item.processing_status === 'failed'" class="job-failed-indicator-mobile">
+                <i class="pi pi-exclamation-triangle"></i>
+              </span>
+              <span v-else class="job-processing-indicator-mobile">
                 <i class="pi pi-spin pi-spinner"></i>
               </span>
             </div>
             <!-- Row 2: Job info -->
             <div class="card-row-2">
-              <span class="text-muted">În procesare</span>
+              <!-- US-406: Show truncated error message for failed jobs -->
+              <span
+                v-if="item.processing_status === 'failed' && item.processing_error"
+                class="text-error job-error-message"
+                v-tooltip.top="item.processing_error"
+              >
+                {{ truncateErrorMessage(item.processing_error) }}
+              </span>
+              <span v-else-if="item.processing_status === 'failed'" class="text-error">
+                Procesare eșuată
+              </span>
+              <span v-else class="text-muted">În procesare</span>
             </div>
             <!-- Row 3: Processing status -->
             <div class="card-row-3">
-              <span class="processing-badge processing-active">
+              <!-- US-406: Show error badge for failed, processing badge for others -->
+              <span
+                v-if="item.processing_status === 'failed'"
+                class="processing-badge processing-failed"
+                v-tooltip.top="item.processing_error || 'Eroare la procesare'"
+              >
+                <i class="pi pi-exclamation-triangle"></i>
+                Eroare
+              </span>
+              <span v-else class="processing-badge processing-active">
                 <i class="pi pi-spin pi-spinner"></i>
                 {{ item.processing_status === 'pending' ? 'În așteptare' : 'Procesare' }}
               </span>
@@ -1880,6 +1908,21 @@ const truncateFilename = (filename) => {
   return filename.substring(0, maxLength) + '...'
 }
 
+/**
+ * US-406: Truncate error message for display on mobile card row 2.
+ * Shows first 40 characters with ellipsis if longer.
+ * Full error available via tooltip on hover/click.
+ *
+ * @param {string} error - Error message from OCR processing
+ * @returns {string} Truncated error message
+ */
+const truncateErrorMessage = (error) => {
+  if (!error) return 'Eroare necunoscută'
+  const maxLength = 40
+  if (error.length <= maxLength) return error
+  return error.substring(0, maxLength) + '...'
+}
+
 /**
  * US-036: Get original filename from a receipt's attachments.
  * For receipts, the original_filename is stored in attachments[0].filename.
@@ -4078,6 +4121,56 @@ const cleanupCompletedBatches = (storedBatchIds) => {
   color: var(--blue-400);
 }
 
+/* ============ US-406: Mobile Failed Job Styles ============ */
+
+/* Failed job indicator icon in mobile cards (replaces spinner) */
+.job-failed-indicator-mobile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  color: var(--red-500);
+}
+
+.job-failed-indicator-mobile .pi-exclamation-triangle {
+  font-size: var(--text-lg);
+}
+
+/* Error text color utility class */
+.text-error {
+  color: var(--red-600);
+}
+
+/* Truncated error message in job card row 2 */
+.job-error-message {
+  font-size: var(--text-xs);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: help;
+}
+
+/* Dark mode adjustments for mobile failed jobs */
+[data-theme="dark"] .job-failed-indicator-mobile {
+  color: var(--red-400);
+}
+
+[data-theme="dark"] .text-error {
+  color: var(--red-400);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .job-failed-indicator-mobile {
+    color: var(--red-400);
+  }
+
+  :root:not([data-theme]) .text-error {
+    color: var(--red-400);
+  }
+}
+
 /* ============ US-018: Failed Job Row Styles ============ */
 
 /* Failed job indicator in Actions column */