191 lines
7.5 KiB
HTML
191 lines
7.5 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}SLA Compliance{% endblock %}
|
|
{% block extra_css %}
|
|
<style>
|
|
.compliance-ring { position:relative; display:inline-flex; align-items:center; justify-content:center; width:120px; height:120px; }
|
|
</style>
|
|
{% endblock %}
|
|
{% block content %}
|
|
|
|
{# ── Sub-nav ── #}
|
|
{% include 'reports/_subnav.html' %}
|
|
|
|
<div class="d-flex justify-content-between align-items-start mb-4">
|
|
<div>
|
|
<h2><i class="bi bi-shield-check text-success me-2"></i>SLA Compliance</h2>
|
|
<p class="text-muted mb-0">{{ start.strftime('%b %d, %Y') }} — {{ end.strftime('%b %d, %Y') }}</p>
|
|
</div>
|
|
<a href="{{ url_for('reports.export_sla_compliance', start=start.strftime('%Y-%m-%d'), end=end.strftime('%Y-%m-%d'), facility_id=facility_id_filter or '') }}"
|
|
class="btn btn-sm btn-outline-success">
|
|
<i class="bi bi-file-earmark-excel me-1"></i>Export Excel
|
|
</a>
|
|
</div>
|
|
|
|
{# ── Filters ── #}
|
|
<div class="card shadow-sm mb-4">
|
|
<div class="card-body py-2">
|
|
<form method="get" class="row g-2 align-items-end">
|
|
<div class="col-md-2">
|
|
<label class="form-label small mb-1">From</label>
|
|
<input type="date" name="start" class="form-control form-control-sm" value="{{ start.strftime('%Y-%m-%d') }}">
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label class="form-label small mb-1">To</label>
|
|
<input type="date" name="end" class="form-control form-control-sm" value="{{ end.strftime('%Y-%m-%d') }}">
|
|
</div>
|
|
{% if projects %}
|
|
<div class="col-md-2">
|
|
<label class="form-label small mb-1">Contract</label>
|
|
<select id="sla_contract_sel" class="form-select form-select-sm">
|
|
<option value="">All Contracts</option>
|
|
{% for p in projects %}
|
|
<option value="{{ p.id }}">{{ p.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
{% endif %}
|
|
<div class="col-md-3">
|
|
<label class="form-label small mb-1">Facility</label>
|
|
<select id="sla_facility_sel" name="facility_id" class="form-select form-select-sm">
|
|
<option value="">All Facilities</option>
|
|
{% for f in facilities %}
|
|
<option value="{{ f.id }}" {{ 'selected' if facility_id_filter == f.id }}>{{ f.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-auto">
|
|
<button class="btn btn-sm btn-primary">Apply</button>
|
|
<a href="{{ url_for('reports.sla_compliance') }}" class="btn btn-sm btn-outline-secondary">Reset</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{% if projects %}
|
|
<script>
|
|
(function () {
|
|
var contractSel = document.getElementById('sla_contract_sel');
|
|
var facSel = document.getElementById('sla_facility_sel');
|
|
if (!contractSel || !facSel) return;
|
|
var allOpts = Array.from(facSel.options).map(function (o) { return {v: o.value, t: o.text}; });
|
|
contractSel.addEventListener('change', function () {
|
|
var pid = this.value;
|
|
facSel.innerHTML = '<option value="">All Facilities</option>';
|
|
if (!pid) {
|
|
allOpts.slice(1).forEach(function (o) {
|
|
var opt = document.createElement('option'); opt.value = o.v; opt.text = o.t;
|
|
facSel.appendChild(opt);
|
|
});
|
|
return;
|
|
}
|
|
fetch('/inspections/facilities_for_project/' + pid)
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (data) {
|
|
data.forEach(function (f) {
|
|
var opt = document.createElement('option'); opt.value = f.id; opt.text = f.name;
|
|
facSel.appendChild(opt);
|
|
});
|
|
});
|
|
});
|
|
}());
|
|
</script>
|
|
{% endif %}
|
|
|
|
{% if total == 0 %}
|
|
<div class="alert alert-info">
|
|
<i class="bi bi-info-circle me-2"></i>No resolved issues found for this period and filter.
|
|
</div>
|
|
{% else %}
|
|
|
|
{# ── Overall KPI ── #}
|
|
<div class="row g-3 mb-4 align-items-stretch">
|
|
<div class="col-md-3">
|
|
<div class="card shadow-sm h-100 text-center"
|
|
style="border-left:6px solid {{ '#16a34a' if overall_pct and overall_pct >= 90 else '#d97706' if overall_pct and overall_pct >= 70 else '#dc2626' }};">
|
|
<div class="card-body d-flex flex-column align-items-center justify-content-center py-4">
|
|
<div class="text-muted small fw-semibold mb-1">Overall Compliance</div>
|
|
<div class="display-4 fw-bold
|
|
{{ 'text-success' if overall_pct and overall_pct >= 90 else 'text-warning' if overall_pct and overall_pct >= 70 else 'text-danger' }}">
|
|
{{ overall_pct|round(1) if overall_pct is not none else '—' }}{% if overall_pct is not none %}%{% endif %}
|
|
</div>
|
|
<div class="text-muted small mt-1">{{ met }}/{{ total }} resolved on time</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# ── Per-severity compliance cards ── #}
|
|
{% for sev, color_cls in [('critical','danger'),('high','danger'),('medium','warning'),('low','secondary')] %}
|
|
{% set d = by_severity[sev] %}
|
|
<div class="col-6 col-md">
|
|
<div class="card shadow-sm h-100">
|
|
<div class="card-body text-center">
|
|
<div class="mb-1"><span class="badge bg-{{ color_cls }} {{ 'text-dark' if color_cls == 'warning' else '' }} px-2">
|
|
{{ sev|title }}
|
|
</span></div>
|
|
<div class="small text-muted mb-1">SLA: {{ d.sla_hours }}h window</div>
|
|
<div class="fs-3 fw-bold
|
|
{{ 'text-success' if d.pct and d.pct >= 90 else 'text-warning' if d.pct and d.pct >= 70 else 'text-danger' if d.pct is not none else 'text-muted' }}">
|
|
{{ d.pct|round(1) if d.pct is not none else '—' }}{% if d.pct is not none %}%{% endif %}
|
|
</div>
|
|
<div class="small text-muted">{{ d.met }}/{{ d.total }}</div>
|
|
{% if d.total > 0 %}
|
|
<div class="progress mt-2" style="height:4px;">
|
|
<div class="progress-bar bg-{{ 'success' if d.pct and d.pct >= 90 else 'warning' if d.pct and d.pct >= 70 else 'danger' }}"
|
|
style="width:{{ d.pct or 0 }}%;"></div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{# ── Facility breakdown ── #}
|
|
{% if by_facility %}
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-light fw-semibold">
|
|
<i class="bi bi-building me-1"></i>Compliance by Facility
|
|
<span class="badge bg-secondary ms-1">{{ by_facility|length }}</span>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Facility</th>
|
|
<th class="text-center">Resolved Issues</th>
|
|
<th class="text-center">Met SLA</th>
|
|
<th class="text-center">Compliance %</th>
|
|
<th>Progress</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in by_facility %}
|
|
{% set pct_val = row.pct or 0 %}
|
|
{% set bar_class = 'bg-success' if pct_val >= 90 else 'bg-warning' if pct_val >= 70 else 'bg-danger' %}
|
|
<tr>
|
|
<td class="fw-semibold">{{ row.name }}</td>
|
|
<td class="text-center">{{ row.total }}</td>
|
|
<td class="text-center">{{ row.met }}</td>
|
|
<td class="text-center">
|
|
{% if row.pct is not none %}
|
|
<span class="badge bg-{{ 'success' if row.pct >= 90 else 'warning text-dark' if row.pct >= 70 else 'danger' }} px-3">
|
|
{{ row.pct }}%
|
|
</span>
|
|
{% else %}—{% endif %}
|
|
</td>
|
|
<td style="min-width:120px;">
|
|
<div class="progress" style="height:8px;">
|
|
<div class="progress-bar {{ bar_class }}" style="width:{{ row.pct or 0 }}%;"></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% endif %}{# end total == 0 #}
|
|
{% endblock %}
|