125 lines
5.2 KiB
Plaintext
125 lines
5.2 KiB
Plaintext
@model VerificationDashboardViewModel
|
|
@{
|
|
ViewData["Title"] = "Carton Shipment Verification";
|
|
}
|
|
|
|
<header class="topbar">
|
|
<div class="topbar-brand">
|
|
<span class="brand-icon">◈</span>
|
|
<span>SHIPPING MARK</span>
|
|
</div>
|
|
<div class="topbar-siren" id="siren-indicator">
|
|
<span>🔊</span>
|
|
<span>SIREN: ON</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="dashboard-main">
|
|
<section class="top-grid">
|
|
<section class="left-column">
|
|
<section class="panel panel-scan">
|
|
<h2 class="section-title"><span class="section-icon">🖶</span> SCAN QR CODE</h2>
|
|
<form id="scan-form" autocomplete="off" novalidate>
|
|
@Html.AntiForgeryToken()
|
|
<div class="scan-input-wrap">
|
|
<span class="scan-icon">⚙</span>
|
|
<input id="qr-input"
|
|
name="qrValue"
|
|
class="scan-input"
|
|
type="text"
|
|
placeholder="Scan QR code or enter manually..."
|
|
autofocus
|
|
required />
|
|
</div>
|
|
<div class="form-hint">Format: modelnumber;uniquenumber</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section id="status-card" class="panel panel-status status-neutral" aria-live="polite">
|
|
<h2 class="section-title"><span class="section-icon">∿</span> VERIFICATION STATUS</h2>
|
|
<div class="status-mini-icon" id="status-mini-icon">-</div>
|
|
<div class="status-mini-headline" id="status-mini-headline">AWAITING SCAN</div>
|
|
<div id="status-mini-message" class="status-mini-message">Waiting for QR input.</div>
|
|
<div class="last-updated">
|
|
<span>◴ Last Updated:</span>
|
|
<strong id="last-updated-time">-</strong>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
|
|
<section class="right-column">
|
|
<section class="panel">
|
|
<h2 class="section-title"><span class="section-icon">ⓘ</span> SCANNED DETAILS</h2>
|
|
<div class="info-grid">
|
|
<span>Model Number</span><strong id="detail-model">-</strong>
|
|
<span>Unique Number</span><strong id="detail-unique">-</strong>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<h2 class="section-title"><span class="section-icon">🛡</span> VERIFICATION RESULT</h2>
|
|
<div class="info-grid">
|
|
<span>Exists in Carton Logs</span><strong id="detail-exists">-</strong>
|
|
<span>Shipment Marked</span><strong id="detail-marked">-</strong>
|
|
<span>Marked At</span><strong id="detail-time">-</strong>
|
|
<span>Marked By</span><strong id="detail-marked-by">System</strong>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</section>
|
|
|
|
<section class="panel panel-history">
|
|
<h2 class="section-title"><span class="section-icon">🗎</span> LAST 5 SCANNED RECORDS</h2>
|
|
<div class="table-responsive history-wrap">
|
|
<table class="table table-sm align-middle" id="history-table">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>MODEL NUMBER</th>
|
|
<th>UNIQUE NUMBER</th>
|
|
<th>STATUS</th>
|
|
<th>MARKED AT</th>
|
|
<th>MARKED BY</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@{
|
|
var rowNumber = 1;
|
|
}
|
|
@foreach (var item in Model.RecentScans)
|
|
{
|
|
<tr>
|
|
<td>@rowNumber</td>
|
|
<td>@item.ModelNumber</td>
|
|
<td>@item.UniqueNumber</td>
|
|
<td>
|
|
<span class="status-pill @(item.ShipmentMarked ? "status-true" : "status-false")">
|
|
@(item.ShipmentMarked ? "TRUE" : "FALSE")
|
|
</span>
|
|
</td>
|
|
<td>@DateTime.SpecifyKind(item.ProcessedAtUtc, DateTimeKind.Utc).ToLocalTime().ToString("dd MMM yyyy h:mm tt")</td>
|
|
<td>System</td>
|
|
</tr>
|
|
rowNumber++;
|
|
}
|
|
</tbody>
|
|
</table>
|
|
<div class="history-empty @(Model.RecentScans.Count > 0 ? "is-hidden" : string.Empty)" id="history-empty">
|
|
<div class="empty-icon">📦</div>
|
|
<div class="empty-title">No records found</div>
|
|
<div class="empty-text">Scan a QR code to see history here.</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="page-footer">
|
|
<span>AVS C# .NET Application</span>
|
|
<span>|</span>
|
|
<span>SHIPPING MARK</span>
|
|
</footer>
|
|
|
|
@section Scripts {
|
|
<script src="~/js/verification-dashboard.js" asp-append-version="true"></script>
|
|
}
|