From 4cbd03bd21eeb0e9e67b870afc11bfe627dbbe5a Mon Sep 17 00:00:00 2001
From: Joseph Doherty <dohejw01@gmail.com>
Date: Mon, 10 Aug 2026 18:00:20 -0400
Subject: [PATCH] =?UTF-8?q?ui(equipment):=20adopt=20panel=20idiom=20on=20t?=
 =?UTF-8?q?ab=20bodies=20+=20bound=20RawPath=20column=20(=C2=A71d=20Task?=
 =?UTF-8?q?=203)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Pages/Uns/EquipmentPage.razor  | 56 ++++++++++++++-----
 1 file changed, 43 insertions(+), 13 deletions(-)

diff --git a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Pages/Uns/EquipmentPage.razor b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Pages/Uns/EquipmentPage.razor
index 75c8d610..5bb9f138 100644
--- a/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Pages/Uns/EquipmentPage.razor
+++ b/src/Server/ZB.MOM.WW.OtOpcUa.AdminUI/Components/Pages/Uns/EquipmentPage.razor
@@ -43,7 +43,9 @@ else
         <EditForm Model="_form" OnValidSubmit="SaveAsync" FormName="equipmentDetails">
             <DataAnnotationsValidator />
 
-            <h6 class="text-muted">Identity</h6>
+            <section class="panel rise" style="animation-delay:.02s">
+            <div class="panel-head">Identity</div>
+            <div style="padding:1rem">
             @if (!IsNew)
             {
                 <div class="mb-3">
@@ -100,9 +102,12 @@ else
                     <label class="form-check-label">Surface in deployments</label>
                 </div>
             </div>
+            </div>
+            </section>
 
-            <hr />
-            <h6 class="text-muted">OPC 40010 identification (optional)</h6>
+            <section class="panel rise mt-3" style="animation-delay:.08s">
+            <div class="panel-head">OPC 40010 identification (optional)</div>
+            <div style="padding:1rem">
             <div class="row">
                 <div class="col-md-4 mb-3"><label class="form-label">Manufacturer</label><InputText @bind-Value="_form.Manufacturer" class="form-control form-control-sm" /></div>
                 <div class="col-md-4 mb-3"><label class="form-label">Model</label><InputText @bind-Value="_form.Model" class="form-control form-control-sm" /></div>
@@ -118,6 +123,8 @@ else
                 <div class="col-md-6 mb-3"><label class="form-label">ManufacturerUri</label><InputText @bind-Value="_form.ManufacturerUri" class="form-control form-control-sm mono" /></div>
                 <div class="col-md-6 mb-3"><label class="form-label">DeviceManualUri</label><InputText @bind-Value="_form.DeviceManualUri" class="form-control form-control-sm mono" /></div>
             </div>
+            </div>
+            </section>
 
             @if (!string.IsNullOrWhiteSpace(_error)) { <div class="text-danger small mt-2">@_error</div> }
 
@@ -134,6 +141,9 @@ else
         @* v3 Batch 3: equipment is reference-only — the Tags tab lists UnsTagReference rows pointing at
            raw tags. Datatype/access are inherited (read-only) from the backing raw tag; the display-name
            override is the only per-reference editable field. *@
+        <section class="panel rise" style="animation-delay:.02s">
+        <div class="panel-head">Tag references</div>
+        <div style="padding:1rem">
         <div class="d-flex justify-content-end align-items-center gap-2 mb-2">
             <button type="button" class="btn btn-outline-primary btn-sm" @onclick="OpenAddReference">+ Add reference</button>
         </div>
@@ -143,15 +153,16 @@ else
         }
         @if (_refs is null)
         {
-            <p class="text-muted"><span class="spinner-border spinner-border-sm me-1"></span>Loading…</p>
+            <p class="text-muted mb-0"><span class="spinner-border spinner-border-sm me-1"></span>Loading…</p>
         }
         else if (_refs.Count == 0)
         {
-            <p class="text-muted">No tag references yet.</p>
+            <p class="text-muted mb-0">No tag references yet.</p>
         }
         else
         {
-            <table class="table table-sm align-middle">
+            <div class="table-wrap">
+            <table class="table table-sm align-middle mb-0">
                 <thead>
                     <tr>
                         <th>Effective name</th><th>Raw path</th><th>Data type</th><th>Access</th>
@@ -163,7 +174,9 @@ else
                     {
                         <tr @key="r.UnsTagReferenceId">
                             <td>@r.EffectiveName</td>
-                            <td class="mono small">@r.RawPath</td>
+                            @* Bound so a long RawPath cannot squeeze the editable override input and the
+                               row's action buttons off the panel; the full value stays on the tooltip. *@
+                            <td class="mono small" title="@r.RawPath">@DisplayText.Abbreviate(r.RawPath, 48)</td>
                             <td>@r.DataType</td>
                             <td>@r.AccessLevel</td>
                             <td>
@@ -180,13 +193,19 @@ else
                     }
                 </tbody>
             </table>
+            </div>
         }
+        </div>
+        </section>
 
         <AddReferenceModal Visible="_refModalVisible" EquipmentId="@EquipmentId"
                            OnCommitted="OnReferencesCommittedAsync" OnCancel="@(() => { _refModalVisible = false; })" />
     }
     else if (_activeTab == "vtags")
     {
+        <section class="panel rise" style="animation-delay:.02s">
+        <div class="panel-head">Virtual tags</div>
+        <div style="padding:1rem">
         <div class="d-flex justify-content-end mb-2">
             <button type="button" class="btn btn-outline-primary btn-sm" @onclick="OpenAddVirtualTag">Add virtual tag</button>
         </div>
@@ -196,15 +215,16 @@ else
         }
         @if (_vtags is null)
         {
-            <p class="text-muted"><span class="spinner-border spinner-border-sm me-1"></span>Loading…</p>
+            <p class="text-muted mb-0"><span class="spinner-border spinner-border-sm me-1"></span>Loading…</p>
         }
         else if (_vtags.Count == 0)
         {
-            <p class="text-muted">No virtual tags yet.</p>
+            <p class="text-muted mb-0">No virtual tags yet.</p>
         }
         else
         {
-            <table class="table table-sm">
+            <div class="table-wrap">
+            <table class="table table-sm mb-0">
                 <thead>
                     <tr><th>Name</th><th>Data type</th><th>Script</th><th>Enabled</th><th class="text-end">Actions</th></tr>
                 </thead>
@@ -226,7 +246,10 @@ else
                     }
                 </tbody>
             </table>
+            </div>
         }
+        </div>
+        </section>
 
         <VirtualTagModal Visible="_vtagModalVisible" IsNew="_vtagModalIsNew" EquipmentId="@EquipmentId"
                          Existing="_vtagModalExisting" Scripts="_vtagScriptOptions"
@@ -234,6 +257,9 @@ else
     }
     else if (_activeTab == "alarms")
     {
+        <section class="panel rise" style="animation-delay:.02s">
+        <div class="panel-head">Scripted alarms</div>
+        <div style="padding:1rem">
         <div class="d-flex justify-content-end mb-2">
             <button type="button" class="btn btn-outline-primary btn-sm" @onclick="OpenAddAlarm">Add alarm</button>
         </div>
@@ -243,15 +269,16 @@ else
         }
         @if (_alarms is null)
         {
-            <p class="text-muted"><span class="spinner-border spinner-border-sm me-1"></span>Loading…</p>
+            <p class="text-muted mb-0"><span class="spinner-border spinner-border-sm me-1"></span>Loading…</p>
         }
         else if (_alarms.Count == 0)
         {
-            <p class="text-muted">No alarms yet.</p>
+            <p class="text-muted mb-0">No alarms yet.</p>
         }
         else
         {
-            <table class="table table-sm">
+            <div class="table-wrap">
+            <table class="table table-sm mb-0">
                 <thead>
                     <tr><th>Name</th><th>Type</th><th>Severity</th><th>Predicate</th><th>Enabled</th><th class="text-end">Actions</th></tr>
                 </thead>
@@ -274,7 +301,10 @@ else
                     }
                 </tbody>
             </table>
+            </div>
         }
+        </div>
+        </section>
 
         <ScriptedAlarmModal Visible="_alarmModalVisible" IsNew="_alarmModalIsNew" EquipmentId="@EquipmentId"
                             Existing="_alarmModalExisting" Scripts="_alarmScriptOptions"