159 lines
7.1 KiB
HTML
159 lines
7.1 KiB
HTML
<!-- Inventory Statistics Cards -->
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-title text-muted mb-1">Total Items</h6>
|
|
<h3 class="mb-0 text-primary">{{ stats.total_items }}</h3>
|
|
<small class="text-muted">{{ stats.active_items }} active</small>
|
|
</div>
|
|
<div class="bg-primary bg-gradient rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
|
|
<i class="fas fa-boxes fa-lg text-white"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card border-0 shadow-sm h-100 {% if stats.low_stock_items > 0 %}border-warning{% endif %}">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-title text-muted mb-1">Low Stock</h6>
|
|
<h3 class="mb-0 {% if stats.low_stock_items > 0 %}text-warning{% else %}text-success{% endif %}">{{ stats.low_stock_items }}</h3>
|
|
<small class="text-muted">Items below minimum</small>
|
|
</div>
|
|
<div class="bg-{% if stats.low_stock_items > 0 %}warning{% else %}success{% endif %} bg-gradient rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
|
|
<i class="fas fa-exclamation-triangle fa-lg text-white"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card border-0 shadow-sm h-100 {% if stats.expired_items > 0 %}border-danger{% endif %}">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-title text-muted mb-1">Expired Items</h6>
|
|
<h3 class="mb-0 {% if stats.expired_items > 0 %}text-danger{% else %}text-success{% endif %}">{{ stats.expired_items }}</h3>
|
|
<small class="text-muted">{{ stats.expiring_soon }} expiring soon</small>
|
|
</div>
|
|
<div class="bg-{% if stats.expired_items > 0 %}danger{% else %}success{% endif %} bg-gradient rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
|
|
<i class="fas fa-calendar-times fa-lg text-white"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-title text-muted mb-1">Total Value</h6>
|
|
<h3 class="mb-0 text-success">${{ stats.total_value|floatformat:0 }}</h3>
|
|
<small class="text-muted">Inventory worth</small>
|
|
</div>
|
|
<div class="bg-success bg-gradient rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
|
|
<i class="fas fa-dollar-sign fa-lg text-white"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-title text-muted mb-1">Pending Orders</h6>
|
|
<h3 class="mb-0 text-info">{{ stats.pending_orders }}</h3>
|
|
<small class="text-muted">Awaiting delivery</small>
|
|
</div>
|
|
<div class="bg-info bg-gradient rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
|
|
<i class="fas fa-shopping-cart fa-lg text-white"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-title text-muted mb-1">Today's Movements</h6>
|
|
<h3 class="mb-0 text-secondary">{{ stats.movements_today }}</h3>
|
|
<small class="text-muted">Stock transactions</small>
|
|
</div>
|
|
<div class="bg-secondary bg-gradient rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
|
|
<i class="fas fa-exchange-alt fa-lg text-white"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card border-0 shadow-sm h-100 {% if stats.assets_due_maintenance > 0 %}border-warning{% endif %}">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-title text-muted mb-1">Due Maintenance</h6>
|
|
<h3 class="mb-0 {% if stats.assets_due_maintenance > 0 %}text-warning{% else %}text-success{% endif %}">{{ stats.assets_due_maintenance }}</h3>
|
|
<small class="text-muted">Equipment assets</small>
|
|
</div>
|
|
<div class="bg-{% if stats.assets_due_maintenance > 0 %}warning{% else %}success{% endif %} bg-gradient rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
|
|
<i class="fas fa-tools fa-lg text-white"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h6 class="card-title text-muted mb-1">Active Suppliers</h6>
|
|
<h3 class="mb-0 text-primary">{{ stats.active_suppliers }}</h3>
|
|
<small class="text-muted">Verified partners</small>
|
|
</div>
|
|
<div class="bg-primary bg-gradient rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
|
|
<i class="fas fa-truck fa-lg text-white"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.bg-gradient {
|
|
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
|
|
}
|
|
|
|
.card {
|
|
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.col-lg-3, .col-md-6 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
|