From bff577b461c55c24723032c5b07240957c735029 Mon Sep 17 00:00:00 2001
From: Adriano Dal Pastro <adrianodalpastro@tielogic.com>
Date: Fri, 5 Jun 2026 08:48:54 +0000
Subject: [PATCH] fix(measure): separate traceability inputs from recipe search
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On the recipe selection page the Lotto/Seriale fields shared a single
filter bar with the "Cerca ricetta" search box, so operators read them as
search filters instead of data-entry fields and never filled them in.

Split into two cards: a search filter, and a distinct "Tracciabilità"
section with heading, helper text, accent border and monospace inputs with
amber/indigo icons matching the lot/serial badges shown downstream. Add EN
translations for the new strings.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../templates/measure/select_recipe.html      | 65 ++++++++++++-------
 .../translations/en/LC_MESSAGES/messages.po   | 12 ++++
 2 files changed, 55 insertions(+), 22 deletions(-)

diff --git a/src/frontend/flask_app/templates/measure/select_recipe.html b/src/frontend/flask_app/templates/measure/select_recipe.html
index 979c2d4..9a1b4b6 100644
--- a/src/frontend/flask_app/templates/measure/select_recipe.html
+++ b/src/frontend/flask_app/templates/measure/select_recipe.html
@@ -92,40 +92,61 @@
     </div>
   </div>
 
-  <!-- Search + Traceability Bar -->
-  <div class="tmf-card mb-6">
+  <!-- Search Bar (filter) -->
+  <div class="tmf-card mb-4">
     <div class="p-4 sm:p-5">
-      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-        <!-- Search Input -->
-        <div class="sm:col-span-2">
-          <label class="tmf-label">
-            <svg class="w-3.5 h-3.5 inline-block mr-1 -mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
-            </svg>
-            {{ _('Cerca ricetta') }}
-          </label>
-          <input type="text"
-                 x-model="search"
-                 placeholder="{{ _('Nome, codice o descrizione...') }}"
-                 class="tmf-input">
-        </div>
+      <label class="tmf-label">
+        <svg class="w-3.5 h-3.5 inline-block mr-1 -mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+        </svg>
+        {{ _('Cerca ricetta') }}
+      </label>
+      <input type="text"
+             x-model="search"
+             placeholder="{{ _('Nome, codice o descrizione...') }}"
+             class="tmf-input">
+    </div>
+  </div>
 
+  <!-- Traceability (data entry, NOT a search filter) -->
+  <div class="tmf-card mb-6 border-l-4 border-l-primary">
+    <div class="p-4 sm:p-5">
+      <div class="flex items-center gap-2 mb-3">
+        <svg class="w-5 h-5 text-primary shrink-0" fill="none" stroke="currentColor" stroke-width="1.75" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
+        </svg>
+        <div>
+          <h2 class="text-sm font-semibold text-[var(--text-primary)] leading-tight">{{ _('Tracciabilità') }}</h2>
+          <p class="text-xs text-[var(--text-muted)] leading-tight">{{ _('Dati del pezzo da misurare — compila prima di selezionare la ricetta') }}</p>
+        </div>
+      </div>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
         <!-- Lot Number -->
         <div>
-          <label class="tmf-label">{{ _('Numero Lotto') }}</label>
+          <label class="tmf-label flex items-center gap-1.5">
+            <svg class="w-3.5 h-3.5 text-amber-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
+            </svg>
+            {{ _('Numero Lotto') }}
+          </label>
           <input type="text"
                  x-model="lot_number"
-                 placeholder="{{ _('Opzionale') }}"
-                 class="tmf-input">
+                 placeholder="{{ _('Es. LOT-2026-001 (opzionale)') }}"
+                 class="tmf-input font-mono">
         </div>
 
         <!-- Serial Number -->
         <div>
-          <label class="tmf-label">{{ _('Numero Seriale') }}</label>
+          <label class="tmf-label flex items-center gap-1.5">
+            <svg class="w-3.5 h-3.5 text-indigo-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
+            </svg>
+            {{ _('Numero Seriale') }}
+          </label>
           <input type="text"
                  x-model="serial_number"
-                 placeholder="{{ _('Opzionale') }}"
-                 class="tmf-input">
+                 placeholder="{{ _('Es. SN-000123 (opzionale)') }}"
+                 class="tmf-input font-mono">
         </div>
       </div>
     </div>
diff --git a/src/frontend/flask_app/translations/en/LC_MESSAGES/messages.po b/src/frontend/flask_app/translations/en/LC_MESSAGES/messages.po
index 8a7aab9..aac256d 100644
--- a/src/frontend/flask_app/translations/en/LC_MESSAGES/messages.po
+++ b/src/frontend/flask_app/translations/en/LC_MESSAGES/messages.po
@@ -2173,3 +2173,15 @@ msgstr "Error generating report"
 #~ msgid "Segui le istruzioni nella direttiva"
 #~ msgstr "Follow the instructions in the directive"
 
+msgid "Tracciabilità"
+msgstr "Traceability"
+
+msgid "Dati del pezzo da misurare — compila prima di selezionare la ricetta"
+msgstr "Part data to be measured — fill in before selecting the recipe"
+
+msgid "Es. LOT-2026-001 (opzionale)"
+msgstr "E.g. LOT-2026-001 (optional)"
+
+msgid "Es. SN-000123 (opzionale)"
+msgstr "E.g. SN-000123 (optional)"
+