Add asset lookup from canteen DB — auto-match OCR machine IDs to asset records

static/index.html

@@ -155,6 +155,23 @@
   }
   .filter-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
 
+  /* Asset match card */
+  .asset-card {
+    background: var(--card2); border-radius: var(--radius-sm);
+    padding: 12px; margin-top: 10px; border-left: 3px solid var(--green);
+  }
+  .asset-card .asset-name {
+    font-size: 15px; font-weight: 700; margin-bottom: 4px;
+  }
+  .asset-card .asset-meta {
+    font-size: 12px; color: var(--text2);
+    display: flex; flex-wrap: wrap; gap: 8px;
+  }
+  .asset-card .asset-meta span {
+    background: var(--card); padding: 2px 8px; border-radius: 10px;
+    white-space: nowrap;
+  }
+
   /* Server section */
   .section {
     background: var(--card); border-radius: var(--radius);
@@ -410,7 +427,10 @@ async function uploadSelected() {
         html += '<div class="ocr-text">' + esc(ocr.raw_text) + '</div>';
       }
       if (ocr.match_5dash6) {
-        html += '<div style="margin-top:4px;color:var(--green);">✅ Matched: <strong>' + esc(ocr.match_5dash6) + '</strong> → machine ID: ' + ocr.match_5dash6.replace(/[^0-9]/g,'').slice(-5) + '</div>';
+        const mid = ocr.match_5dash6.replace(/[^0-9]/g,'').slice(-5);
+        html += '<div style="margin-top:4px;color:var(--green);">✅ Matched: <strong>' + esc(ocr.match_5dash6) + '</strong> → machine ID: ' + mid + '</div>';
+        // Auto-lookup
+        lookupAsset(mid);
       } else if (ocr.match_5plus) {
         html += '<div style="margin-top:4px;color:var(--amber);">⚠️ Digits: <strong>' + esc(ocr.match_5plus) + '</strong> (no 5-6 pattern)</div>';
       } else {
@@ -424,6 +444,42 @@ async function uploadSelected() {
   }
 }
 
+async function lookupAsset(machineId) {
+  const div = document.getElementById('serverResults');
+  try {
+    const resp = await fetch('/api/lookup?machine_id=' + encodeURIComponent(machineId));
+    const data = await resp.json();
+    if (data.found) {
+      const a = data.asset;
+      let extra = '';
+      if (a.latitude && a.longitude) {
+        extra += '<span>📍 ' + Number(a.latitude).toFixed(5) + ', ' + Number(a.longitude).toFixed(5) + '</span>';
+      }
+      if (a.address) extra += '<span>🏠 ' + esc(a.address) + '</span>';
+      if (a.building_name) extra += '<span>🏢 ' + esc(a.building_name) + '</span>';
+      if (a.floor) extra += '<span>📶 Floor ' + esc(a.floor) + '</span>';
+      if (a.room) extra += '<span>🚪 ' + esc(a.room) + '</span>';
+
+      div.innerHTML +=
+        '<div class="asset-card">' +
+          '<div class="asset-name">' + esc(a.name) + '</div>' +
+          '<div class="asset-meta">' +
+            '<span>🆔 ' + esc(a.machine_id) + '</span>' +
+            '<span>📦 ' + esc(a.category) + '</span>' +
+            '<span>' + (a.status === 'active' ? '🟢 Active' : '⚪ ' + esc(a.status)) + '</span>' +
+            extra +
+          '</div>' +
+        '</div>';
+    } else {
+      div.innerHTML +=
+        '<div style="margin-top:6px;color:var(--amber);font-size:12px;">⚠️ No asset found for machine ID <strong>' + esc(machineId) + '</strong></div>';
+    }
+  } catch (e) {
+    div.innerHTML +=
+      '<div style="margin-top:6px;color:var(--red);font-size:12px;">❌ Lookup error: ' + esc(e.message) + '</div>';
+  }
+}
+
 function resetAll() {
   allPhotos = [];
   selectedIdx = -1;