From a9a7478d5a157a64ce6fdbad0f4e00c595056ba2 Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Thu, 14 May 2026 20:16:34 -0400
Subject: [PATCH] imaging: organize tile metadata into deterministic rows

Previously last_updated, MAC, started, Intune device id, and the
raw current_stage string were sprinkled around the card in
hard-to-track positions. Reorganized:

Row 1 (header): serial | hostname | pctype | machine# | status badge
Row 2 (stage):  friendly label + N/M badge | pct% (right)
Row 3:          full-width progress bar
Row 4:          friendly hint (optional)
Row 5:          Intune device id + copy + set-category (optional)
Row 6:          started ... last ... MAC ... raw current_stage

Each row consistent across all cards regardless of which fields
are populated.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 webapp/templates/imaging.html | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/webapp/templates/imaging.html b/webapp/templates/imaging.html
index cbd7dbf..f27821c 100644
--- a/webapp/templates/imaging.html
+++ b/webapp/templates/imaging.html
@@ -92,7 +92,7 @@ window.addEventListener('DOMContentLoaded', scheduleImagingReload);
               <strong>{{ friendly[0] }}</strong>
               <span class="badge bg-secondary ms-1">{{ stage_idx }}/{{ stage_total or '?' }}</span>
             </div>
-            <span class="text-muted small">{{ pct }}%  &middot;  last <code>{{ s.last_updated or '-' }}</code></span>
+            <span class="text-muted small">{{ pct }}%</span>
           </div>
           <div class="progress mt-1" style="height:0.7rem;">
             <div class="progress-bar bg-{{ border }} {% if not is_done and not is_failed %}progress-bar-striped progress-bar-animated{% endif %}"
@@ -102,8 +102,8 @@ window.addEventListener('DOMContentLoaded', scheduleImagingReload);
           {% if friendly[1] %}<div class="small text-muted mt-1">{{ friendly[1] }}</div>{% endif %}
 
           {% if s.intune_device_id %}
-          <div class="small mt-1" style="font-size:0.75rem;">
-            <code>{{ s.intune_device_id }}</code>
+          <div class="small mt-2" style="font-size:0.75rem;">
+            <span class="text-muted">Intune:</span> <code>{{ s.intune_device_id }}</code>
             <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-1 copy-btn"
                     style="font-size:0.65rem; line-height:1; transition: all 0.2s;"
                     data-copy-text="{{ s.intune_device_id }}">copy</button>
@@ -111,9 +111,15 @@ window.addEventListener('DOMContentLoaded', scheduleImagingReload);
                style="font-size:0.65rem; line-height:1;"
                target="_blank" rel="noopener"
                href="https://portal.azure.us/?feature.msaljs=false#view/Microsoft_Intune_Devices/DeviceSettingsMenuBlade/~/properties/aadDeviceId/{{ s.intune_device_id }}">set category</a>
-            <span class="text-muted ms-2">MAC <code>{{ s.mac or '-' }}</code> &middot; started <code>{{ s.started_at or '-' }}</code></span>
           </div>
           {% endif %}
+
+          <div class="text-muted mt-1" style="font-size:0.7rem;">
+            <span class="me-3">started <code>{{ s.started_at or '-' }}</code></span>
+            <span class="me-3">last <code>{{ s.last_updated or '-' }}</code></span>
+            <span class="me-3">MAC <code>{{ s.mac or '-' }}</code></span>
+            {% if s.current_stage %}<span style="font-family:monospace;">{{ s.current_stage }}</span>{% endif %}
+          </div>
         </div>
       </div>