From b2b6d740e317fc68a2aff9075e79274918768356 Mon Sep 17 00:00:00 2001 From: Syed Mustafa Ahmed Naqvi Date: Fri, 15 May 2026 11:46:35 +0500 Subject: [PATCH] Refresh dashboard UI for scan results and history Updates the Razor dashboard layout, scan/result panels, rejected/successful history display, modal history view, and related styling. --- Views/Home/Index.cshtml | 149 ++++++++++++++++++++++++++------------ wwwroot/css/site.css | 155 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 260 insertions(+), 44 deletions(-) diff --git a/Views/Home/Index.cshtml b/Views/Home/Index.cshtml index 417e097..c5cb581 100644 --- a/Views/Home/Index.cshtml +++ b/Views/Home/Index.cshtml @@ -19,7 +19,7 @@

🖶 SCAN QR CODE

-
+ @Html.AntiForgeryToken()
⚙ @@ -27,11 +27,11 @@ name="qrValue" class="scan-input" type="text" - placeholder="Scan QR code or enter manually..." + placeholder="Use scanner or paste (typing is not allowed)…" autofocus - required /> + spellcheck="false" />
-
Format: modelnumber;uniquenumber
+
Format: modelnumber;uniquenumber — scans submit automatically.
@@ -69,52 +69,113 @@
-

🗎 LAST 5 SCANNED RECORDS

-
- - - - - - - - - - - - - @{ - var rowNumber = 1; - } - @foreach (var item in Model.RecentScans) - { - - - - - - - - - rowNumber++; - } - -
#MODEL NUMBERUNIQUE NUMBERSTATUSMARKED ATMARKED BY
@rowNumber@item.ModelNumber@item.UniqueNumber - - @(item.ShipmentMarked ? "TRUE" : "FALSE") - - @DateTime.SpecifyKind(item.ProcessedAtUtc, DateTimeKind.Utc).ToLocalTime().ToString("dd MMM yyyy h:mm tt")System
-
-
📦
-
No records found
-
Scan a QR code to see history here.
+
+

🗎 RECENT SCANS

+ +
+
+
+

Successful Scans

+
+ + + + + + + + + + + + + @{ + var rowNumber = 1; + } + @foreach (var item in Model.RecentSuccessfulScans) + { + + + + + + + + + rowNumber++; + } + +
#MODEL NUMBERUNIQUE NUMBERSTATUSMARKED ATMARKED BY
@rowNumber@item.ModelNumber@item.UniqueNumber + TRUE + @DateTime.SpecifyKind(item.ProcessedAtUtc, DateTimeKind.Utc).ToLocalTime().ToString("dd MMM yyyy h:mm tt")System
+
+
📦
+
No successful scans yet
+
Verified cartons will appear here.
+
+
+
+
+

Rejected Scans

+
+ + + + + + + + + + + + @foreach (var item in Model.RecentRejectedScans) + { + + + + + + + + } + +
TIMESCANNED / INPUTMODELUNIQUEREASON
@DateTime.SpecifyKind(item.ProcessedAtUtc, DateTimeKind.Utc).ToLocalTime().ToString("dd MMM yyyy h:mm tt")@item.RawInputValue@(string.IsNullOrEmpty(item.ModelNumber) ? "—" : item.ModelNumber)@(string.IsNullOrEmpty(item.UniqueNumber) ? "—" : item.UniqueNumber)@item.RejectionReason
+
+
⚠
+
No rejected scans
+
Rejections will appear here with a reason.
+
+
+ + +
+
+

Scan history

+ +
+
+ + +
+
+ + + +
+
+
+ diff --git a/wwwroot/css/site.css b/wwwroot/css/site.css index 95320f3..04c87fe 100644 --- a/wwwroot/css/site.css +++ b/wwwroot/css/site.css @@ -213,6 +213,157 @@ body { padding-bottom: 0; } +.panel-history-head { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 10px; + margin-bottom: 10px; +} + +.section-title-tight { + margin-bottom: 0; +} + +.btn-scan-history { + appearance: none; + border: 1px solid #1b5caa; + background: #0d4a9c; + color: #fff; + font-weight: 700; + font-size: 0.85rem; + padding: 8px 16px; + border-radius: 6px; + cursor: pointer; + letter-spacing: 0.2px; +} + +.btn-scan-history:hover { + background: #0a3d82; +} + +.btn-scan-history:focus-visible { + outline: 2px solid #5a9fd4; + outline-offset: 2px; +} + +.scan-history-dialog { + border: none; + border-radius: 10px; + padding: 0; + max-width: min(980px, 96vw); + width: 100%; + max-height: 88vh; + box-shadow: 0 16px 48px rgba(11, 36, 79, 0.35); + color: #223a5f; +} + +.scan-history-dialog::backdrop { + background: rgba(11, 47, 107, 0.5); +} + +.scan-history-dialog-content { + display: flex; + flex-direction: column; + max-height: 88vh; +} + +.scan-history-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 12px 14px; + border-bottom: 1px solid #e2e8f2; + background: #f6f9fd; +} + +.scan-history-dialog-title { + margin: 0; + font-size: 1.05rem; + font-weight: 800; + color: #0d3b7a; +} + +.scan-history-dialog-close { + appearance: none; + border: 0; + background: transparent; + color: #4f6687; + font-size: 1.75rem; + line-height: 1; + cursor: pointer; + padding: 4px 8px; + border-radius: 6px; +} + +.scan-history-dialog-close:hover { + background: #e8eef8; + color: #223a5f; +} + +.scan-history-dialog-toolbar { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 14px; + border-bottom: 1px solid #e2e8f2; + flex-wrap: wrap; +} + +.scan-history-filter-label { + font-weight: 700; + font-size: 0.88rem; + color: #2b456f; +} + +.scan-history-filter { + min-width: 200px; + padding: 6px 10px; + border-radius: 6px; + border: 1px solid #c5d4e8; + background: #fff; + color: #223a5f; + font-size: 0.88rem; +} + +.scan-history-dialog-body { + flex: 1; + overflow: auto; + padding: 0 14px 14px; + min-height: 120px; +} + +.scan-history-dialog-body .table { + margin-top: 10px; +} + +.scan-history-modal-empty { + text-align: center; + padding: 24px 12px; + color: #657a98; + font-size: 0.95rem; +} + +.history-split { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; +} + +.history-column { + min-width: 0; +} + +.history-subtitle { + margin: 0 0 8px; + font-size: 0.82rem; + font-weight: 800; + color: #1a4a8c; + letter-spacing: 0.15px; +} + .history-wrap { border: 1px solid #d7e1f0; border-radius: 6px; @@ -312,4 +463,8 @@ body { .info-grid { grid-template-columns: 1fr; } + + .history-split { + grid-template-columns: 1fr; + } }