feat: restyle Admin UI with the technical-light design system
Adopt the technical-light design system across the Admin web UI: - Vendor theme.css + IBM Plex woff2 fonts into wwwroot; include theme.css globally after Bootstrap. - Rebuild MainLayout: top app-bar (brand mark, breadcrumb, connection pill) + hairline-ruled side rail with accent-bordered active link. - Convert all 33 pages to the component catalog — tables to panel + data-table (num/mono columns), KPI cards to agg-grid, detail blocks to metric-card/kv rows, badges to chips, alerts to panel notice, headings to page-title/panel-head, .rise reveals. - Buttons/forms stay on Bootstrap; theme.css restyles them via --bs-* overrides. View-specific layout lives in app.css; all colour/type comes from theme.css tokens. Also fix a pre-existing /fleet 500: the node-state query ordered on a property of a constructed FleetNodeRow record, which EF Core cannot translate. Order the join's columns before projecting. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -5,52 +5,60 @@
|
||||
@attribute [Authorize(Policy = "CanPublish")]
|
||||
@inject ReservationService ReservationSvc
|
||||
|
||||
<h1 class="mb-4">External-ID reservations</h1>
|
||||
<h1 class="page-title">External-ID reservations</h1>
|
||||
<p class="text-muted">
|
||||
Fleet-wide ZTag + SAPID reservation state (decision #124). Releasing a reservation is a
|
||||
FleetAdmin-only audit-logged action — only release when the physical asset is permanently
|
||||
retired and its ID needs to be reused by a different equipment.
|
||||
</p>
|
||||
|
||||
<h4 class="mt-4">Active</h4>
|
||||
@if (_active is null) { <p>Loading…</p> }
|
||||
else if (_active.Count == 0) { <p class="text-muted">No active reservations.</p> }
|
||||
else
|
||||
{
|
||||
<table class="table table-sm">
|
||||
<thead><tr><th>Kind</th><th>Value</th><th>EquipmentUuid</th><th>Cluster</th><th>First published</th><th>Last published</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
@foreach (var r in _active)
|
||||
{
|
||||
<tr>
|
||||
<td><code>@r.Kind</code></td>
|
||||
<td><code>@r.Value</code></td>
|
||||
<td><code>@r.EquipmentUuid</code></td>
|
||||
<td>@r.ClusterId</td>
|
||||
<td><small>@r.FirstPublishedAt.ToString("u") by @r.FirstPublishedBy</small></td>
|
||||
<td><small>@r.LastPublishedAt.ToString("u")</small></td>
|
||||
<td><button class="btn btn-sm btn-outline-danger" @onclick='() => OpenReleaseDialog(r)'>Release…</button></td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
<section class="panel rise" style="animation-delay:.02s">
|
||||
<div class="panel-head">Active</div>
|
||||
@if (_active is null) { <p class="px-3 py-2">Loading…</p> }
|
||||
else if (_active.Count == 0) { <p class="px-3 py-2 text-muted">No active reservations.</p> }
|
||||
else
|
||||
{
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead><tr><th>Kind</th><th>Value</th><th>EquipmentUuid</th><th>Cluster</th><th>First published</th><th>Last published</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
@foreach (var r in _active)
|
||||
{
|
||||
<tr>
|
||||
<td><span class="mono">@r.Kind</span></td>
|
||||
<td><span class="mono">@r.Value</span></td>
|
||||
<td><span class="mono">@r.EquipmentUuid</span></td>
|
||||
<td>@r.ClusterId</td>
|
||||
<td><small>@r.FirstPublishedAt.ToString("u") by @r.FirstPublishedBy</small></td>
|
||||
<td><small>@r.LastPublishedAt.ToString("u")</small></td>
|
||||
<td><button class="btn btn-sm btn-outline-danger" @onclick='() => OpenReleaseDialog(r)'>Release…</button></td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
|
||||
<h4 class="mt-4">Released (most recent 100)</h4>
|
||||
@if (_released is null) { <p>Loading…</p> }
|
||||
else if (_released.Count == 0) { <p class="text-muted">No released reservations yet.</p> }
|
||||
else
|
||||
{
|
||||
<table class="table table-sm">
|
||||
<thead><tr><th>Kind</th><th>Value</th><th>Released at</th><th>By</th><th>Reason</th></tr></thead>
|
||||
<tbody>
|
||||
@foreach (var r in _released)
|
||||
{
|
||||
<tr><td><code>@r.Kind</code></td><td><code>@r.Value</code></td><td>@r.ReleasedAt?.ToString("u")</td><td>@r.ReleasedBy</td><td>@r.ReleaseReason</td></tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
<section class="panel rise" style="animation-delay:.08s">
|
||||
<div class="panel-head">Released (most recent 100)</div>
|
||||
@if (_released is null) { <p class="px-3 py-2">Loading…</p> }
|
||||
else if (_released.Count == 0) { <p class="px-3 py-2 text-muted">No released reservations yet.</p> }
|
||||
else
|
||||
{
|
||||
<div class="table-wrap">
|
||||
<table class="data-table">
|
||||
<thead><tr><th>Kind</th><th>Value</th><th>Released at</th><th>By</th><th>Reason</th></tr></thead>
|
||||
<tbody>
|
||||
@foreach (var r in _released)
|
||||
{
|
||||
<tr><td><span class="mono">@r.Kind</span></td><td><span class="mono">@r.Value</span></td><td>@r.ReleasedAt?.ToString("u")</td><td>@r.ReleasedBy</td><td>@r.ReleaseReason</td></tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
|
||||
@if (_releasing is not null)
|
||||
{
|
||||
@@ -58,13 +66,13 @@ else
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Release reservation <code>@_releasing.Kind</code> = <code>@_releasing.Value</code></h5>
|
||||
<h5 class="modal-title">Release reservation <span class="mono">@_releasing.Kind</span> = <span class="mono">@_releasing.Value</span></h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>This makes the (Kind, Value) pair available for a different EquipmentUuid in a future publish. Audit-logged.</p>
|
||||
<label class="form-label">Reason (required)</label>
|
||||
<textarea class="form-control" rows="3" @bind="_reason"></textarea>
|
||||
@if (_error is not null) { <div class="alert alert-danger mt-2">@_error</div> }
|
||||
<textarea class="form-control form-control-sm" rows="3" @bind="_reason"></textarea>
|
||||
@if (_error is not null) { <section class="panel notice mt-2">@_error</section> }
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" @onclick='() => _releasing = null'>Cancel</button>
|
||||
|
||||
Reference in New Issue
Block a user