213 lines
8.5 KiB
HTML
213 lines
8.5 KiB
HTML
<!-- Quality Metrics Overview Cards -->
|
|
<div class="row mb-4">
|
|
<!-- Quality Indicators -->
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card h-100" style="background: linear-gradient(135deg, #0d6efd 0%, #6f42c1 100%);">
|
|
<div class="card-body text-white">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h2 class="mb-1">{{ indicators_count|default:0 }}</h2>
|
|
<p class="mb-0 opacity-75">Active Indicators</p>
|
|
</div>
|
|
<div class="fs-1 opacity-50">
|
|
<i class="fas fa-chart-line"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Critical Measurements -->
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card h-100" style="background: linear-gradient(135deg, #dc3545 0%, #e83e8c 100%);">
|
|
<div class="card-body text-white">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h2 class="mb-1">{{ critical_count|default:0 }}</h2>
|
|
<p class="mb-0 opacity-75">Critical Alerts</p>
|
|
</div>
|
|
<div class="fs-1 opacity-50">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Warning Measurements -->
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card h-100" style="background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);">
|
|
<div class="card-body text-white">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h2 class="mb-1">{{ warning_count|default:0 }}</h2>
|
|
<p class="mb-0 opacity-75">Warning Alerts</p>
|
|
</div>
|
|
<div class="fs-1 opacity-50">
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Open Incidents -->
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card h-100" style="background: linear-gradient(135deg, #dc3545 0%, #6f42c1 100%);">
|
|
<div class="card-body text-white">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h2 class="mb-1">{{ open_incidents_count|default:0 }}</h2>
|
|
<p class="mb-0 opacity-75">Open Incidents</p>
|
|
</div>
|
|
<div class="fs-1 opacity-50">
|
|
<i class="fas fa-shield-alt"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Secondary Metrics -->
|
|
<div class="row mb-4">
|
|
<!-- Recent Incidents -->
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card h-100" style="background: linear-gradient(135deg, #0dcaf0 0%, #20c997 100%);">
|
|
<div class="card-body text-white">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h2 class="mb-1">{{ recent_incidents_count|default:0 }}</h2>
|
|
<p class="mb-0 opacity-75">Recent Incidents (30d)</p>
|
|
</div>
|
|
<div class="fs-1 opacity-50">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- High Risks -->
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card h-100" style="background: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%);">
|
|
<div class="card-body text-white">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h2 class="mb-1">{{ high_risks_count|default:0 }}</h2>
|
|
<p class="mb-0 opacity-75">High Risks</p>
|
|
</div>
|
|
<div class="fs-1 opacity-50">
|
|
<i class="fas fa-fire"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active Audits -->
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card h-100" style="background: linear-gradient(135deg, #6f42c1 0%, #0d6efd 100%);">
|
|
<div class="card-body text-white">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h2 class="mb-1">{{ active_audits_count|default:0 }}</h2>
|
|
<p class="mb-0 opacity-75">Active Audits</p>
|
|
</div>
|
|
<div class="fs-1 opacity-50">
|
|
<i class="fas fa-clipboard-check"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upcoming Audits -->
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card h-100" style="background: linear-gradient(135deg, #20c997 0%, #0dcaf0 100%);">
|
|
<div class="card-body text-white">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h2 class="mb-1">{{ upcoming_audits_count|default:0 }}</h2>
|
|
<p class="mb-0 opacity-75">Upcoming Audits</p>
|
|
</div>
|
|
<div class="fs-1 opacity-50">
|
|
<i class="fas fa-calendar-plus"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Improvement Projects and Quality Metrics -->
|
|
<div class="row mb-4">
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card h-100" style="background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">
|
|
<div class="card-body text-white">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h2 class="mb-1">{{ active_projects_count|default:0 }}</h2>
|
|
<p class="mb-0 opacity-75">Active Projects</p>
|
|
</div>
|
|
<div class="fs-1 opacity-50">
|
|
<i class="fas fa-lightbulb"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quality Score -->
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card h-100" style="background: linear-gradient(135deg, #28a745 0%, #198754 100%);">
|
|
<div class="card-body text-white">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h2 class="mb-1">{{ quality_score|default:"85" }}%</h2>
|
|
<p class="mb-0 opacity-75">Quality Score</p>
|
|
</div>
|
|
<div class="fs-1 opacity-50">
|
|
<i class="fas fa-star"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Compliance Rate -->
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card h-100" style="background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%);">
|
|
<div class="card-body text-white">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h2 class="mb-1">{{ compliance_rate|default:"92" }}%</h2>
|
|
<p class="mb-0 opacity-75">Compliance Rate</p>
|
|
</div>
|
|
<div class="fs-1 opacity-50">
|
|
<i class="fas fa-check-circle"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Improvement Rate -->
|
|
<div class="col-lg-3 col-md-6 mb-3">
|
|
<div class="card h-100" style="background: linear-gradient(135deg, #0dcaf0 0%, #0aa2c0 100%);">
|
|
<div class="card-body text-white">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<h2 class="mb-1">{{ improvement_rate|default:"78" }}%</h2>
|
|
<p class="mb-0 opacity-75">Improvement Rate</p>
|
|
</div>
|
|
<div class="fs-1 opacity-50">
|
|
<i class="fas fa-trending-up"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|