Make Low Stock stat card clickable to filter inventory by low stock items

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-08 16:48:04 -04:00
parent 94e536178c
commit 9f1460c9c0
@@ -44,19 +44,30 @@
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
<div class="card border-0 shadow-sm"> <a asp-action="Index" asp-route-lowStockOnly="true" class="text-decoration-none"
<div class="card-body"> title="Click to filter list to low stock items">
<div class="d-flex justify-content-between align-items-center"> @{ var _lowStockActive = (bool)(ViewBag.LowStockOnly ?? false); }
<div> <div class="card border-0 shadow-sm @(_lowStockActive ? "border-danger border" : "")"
<p class="text-muted mb-1" style="font-size: 0.875rem;">Low Stock Items</p> style="cursor:pointer;transition:box-shadow .15s;">
<h3 class="mb-0 fw-bold @(lowStockCount > 0 ? "text-danger" : "")">@lowStockCount</h3> <div class="card-body">
</div> <div class="d-flex justify-content-between align-items-center">
<div class="rounded-circle p-3" style="background: #fee2e2;"> <div>
<i class="bi bi-exclamation-triangle text-danger" style="font-size: 1.5rem;"></i> <p class="text-muted mb-1" style="font-size: 0.875rem;">
Low Stock Items
@if (lowStockCount > 0)
{
<i class="bi bi-funnel-fill ms-1 text-danger" style="font-size:.7rem;" title="Click to filter"></i>
}
</p>
<h3 class="mb-0 fw-bold @(lowStockCount > 0 ? "text-danger" : "")">@lowStockCount</h3>
</div>
<div class="rounded-circle p-3" style="background: #fee2e2;">
<i class="bi bi-exclamation-triangle text-danger" style="font-size: 1.5rem;"></i>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </a>
</div> </div>
<div class="col-md-3"> <div class="col-md-3">
@@ -102,11 +113,13 @@
<div class="stat-value">@Model.TotalCount</div> <div class="stat-value">@Model.TotalCount</div>
<div class="stat-label">Total</div> <div class="stat-label">Total</div>
</div> </div>
<div class="stat-item"> <a asp-action="Index" asp-route-lowStockOnly="true" class="text-decoration-none">
<div class="stat-item" style="cursor:pointer;">
<div class="stat-icon"><i class="bi bi-exclamation-triangle text-danger"></i></div> <div class="stat-icon"><i class="bi bi-exclamation-triangle text-danger"></i></div>
<div class="stat-value @(lowStockCount > 0 ? "text-danger" : "")">@lowStockCount</div> <div class="stat-value @(lowStockCount > 0 ? "text-danger" : "")">@lowStockCount</div>
<div class="stat-label">Low Stock</div> <div class="stat-label">Low Stock</div>
</div> </div>
</a>
<div class="stat-item"> <div class="stat-item">
<div class="stat-icon"><i class="bi bi-check-circle text-success"></i></div> <div class="stat-icon"><i class="bi bi-check-circle text-success"></i></div>
<div class="stat-value">@activeCount</div> <div class="stat-value">@activeCount</div>