First commit
This commit is contained in:
@@ -0,0 +1,44 @@
|
||||
<ul class="nav nav-pills mb-4 flex-wrap gap-1">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {{ 'active' if request.endpoint == 'reports.index' else '' }}"
|
||||
href="{{ url_for('reports.index') }}">
|
||||
<i class="bi bi-bar-chart me-1"></i>Overview & Trends
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {{ 'active' if request.endpoint == 'reports.issues_aging' else '' }}"
|
||||
href="{{ url_for('reports.issues_aging') }}">
|
||||
<i class="bi bi-clock-history me-1"></i>Issues Aging
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {{ 'active' if request.endpoint == 'reports.sla_compliance' else '' }}"
|
||||
href="{{ url_for('reports.sla_compliance') }}">
|
||||
<i class="bi bi-shield-check me-1"></i>SLA Compliance
|
||||
</a>
|
||||
</li>
|
||||
{% if current_user.role in ['admin', 'director', 'project_manager'] %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {{ 'active' if request.endpoint == 'reports.followup_closure' else '' }}"
|
||||
href="{{ url_for('reports.followup_closure') }}">
|
||||
<i class="bi bi-arrow-repeat me-1"></i>Follow-up Closure
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if current_user.role in ['admin', 'director'] %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {{ 'active' if request.endpoint == 'reports.inspector_performance' else '' }}"
|
||||
href="{{ url_for('reports.inspector_performance') }}">
|
||||
<i class="bi bi-person-lines-fill me-1"></i>Inspector Performance
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if current_user.role in ['admin', 'director', 'project_manager'] %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {{ 'active' if request.endpoint and request.endpoint.startswith('scheduled_reports.') else '' }}"
|
||||
href="{{ url_for('scheduled_reports.index') }}">
|
||||
<i class="bi bi-calendar-check me-1"></i>Scheduled Reports
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
@@ -0,0 +1,156 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ facility.name }} — Facility Report{% endblock %}
|
||||
{% block extra_css %}
|
||||
<style>.chart-container { position:relative; height:240px; }</style>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div class="d-flex justify-content-between align-items-start mb-4">
|
||||
<div>
|
||||
<h2><i class="bi bi-building"></i> {{ facility.name }}</h2>
|
||||
<p class="text-muted mb-0">{{ start.strftime('%b %d, %Y') }} — {{ end.strftime('%b %d, %Y') }}</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="{{ url_for('reports.export_inspections', start=start.strftime('%Y-%m-%d'), end=end.strftime('%Y-%m-%d')) }}"
|
||||
class="btn btn-sm btn-outline-success"><i class="bi bi-download"></i> Export CSV</a>
|
||||
<a href="{{ url_for('reports.index') }}" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left"></i> Back to Reports
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# KPI row #}
|
||||
{% set completed = inspections | selectattr('status','eq','completed') | list %}
|
||||
{% set avg = (completed | map(attribute='overall_score') | select | list) %}
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card shadow-sm text-center h-100">
|
||||
<div class="card-body">
|
||||
<p class="text-muted small mb-1">Total Inspections</p>
|
||||
<h3 class="fw-bold">{{ inspections|length }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card shadow-sm text-center h-100">
|
||||
<div class="card-body">
|
||||
<p class="text-muted small mb-1">Completed</p>
|
||||
<h3 class="fw-bold text-success">{{ completed|length }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card shadow-sm text-center h-100">
|
||||
<div class="card-body">
|
||||
<p class="text-muted small mb-1">Open Issues</p>
|
||||
<h3 class="fw-bold text-danger">{{ open_issues|length }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card shadow-sm text-center h-100">
|
||||
<div class="card-body">
|
||||
<p class="text-muted small mb-1">Avg Score</p>
|
||||
{% if avg %}
|
||||
{% set avg_val = (avg | map('float') | sum) / avg|length %}
|
||||
<h3 class="fw-bold text-{{ 'success' if avg_val >= 90 else 'warning' if avg_val >= 70 else 'danger' }}">
|
||||
{{ '%.1f'|format(avg_val) }}%
|
||||
</h3>
|
||||
{% else %}<h3 class="text-muted">—</h3>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Area scores chart #}
|
||||
{% if area_scores %}
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header bg-light"><h6 class="mb-0">Avg Score by Area</h6></div>
|
||||
<div class="card-body"><div class="chart-container"><canvas id="areaChart"></canvas></div></div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Inspection history #}
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header bg-light"><h6 class="mb-0">Inspection History</h6></div>
|
||||
<div class="table-responsive">
|
||||
{% if inspections %}
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr><th>Date</th><th>Area</th><th>Template</th><th>Inspector</th><th>Score</th><th>Status</th><th></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for ins in inspections %}
|
||||
<tr>
|
||||
<td><small>{{ ins.inspection_date.strftime('%Y-%m-%d %H:%M') }}</small></td>
|
||||
<td>{{ ins.area.name if ins.area else '—' }}</td>
|
||||
<td>{{ ins.template.name }}</td>
|
||||
<td>{{ ins.inspector.display_name }}</td>
|
||||
<td>
|
||||
{% if ins.overall_score %}
|
||||
<span class="badge bg-{{ 'success' if ins.overall_score >= 90 else 'warning text-dark' if ins.overall_score >= 70 else 'danger' }}">
|
||||
{{ ins.overall_score }}%
|
||||
</span>
|
||||
{% else %}—{% endif %}
|
||||
</td>
|
||||
<td><span class="badge bg-{{ 'success' if ins.status == 'completed' else 'danger' if ins.status == 'flagged' else 'secondary' }}">
|
||||
{{ ins.status|replace('_',' ')|title }}</span></td>
|
||||
<td><a href="{{ url_for('inspections.view', inspection_id=ins.id) }}" class="btn btn-sm btn-outline-secondary">View</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<div class="card-body"><p class="text-muted mb-0">No inspections in this date range.</p></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Open issues #}
|
||||
{% if open_issues %}
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-danger text-white"><h6 class="mb-0">Open Issues</h6></div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light"><tr><th>Severity</th><th>Area</th><th>Description</th><th>Reported</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
{% for issue in open_issues %}
|
||||
<tr>
|
||||
<td><span class="badge bg-{{ 'danger' if issue.severity in ['critical','high'] else 'warning text-dark' if issue.severity == 'medium' else 'secondary' }}">{{ issue.severity|title }}</span></td>
|
||||
<td>{{ issue.area.name }}</td>
|
||||
<td>{{ issue.description[:60] }}{% if issue.description|length > 60 %}…{% endif %}</td>
|
||||
<td><small>{{ issue.reported_at.strftime('%Y-%m-%d') }}</small></td>
|
||||
<td><a href="{{ url_for('issues.view', issue_id=issue.id) }}" class="btn btn-sm btn-outline-secondary">View</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
{% if area_scores %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||||
<script>
|
||||
new Chart(document.getElementById('areaChart'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: {{ area_scores | map(attribute='name') | list | tojson }},
|
||||
datasets: [{
|
||||
label: 'Avg Score (%)',
|
||||
data: {{ area_scores | map(attribute='avg_score') | list | tojson }},
|
||||
backgroundColor: {{ area_scores | map(attribute='avg_score') | list | tojson }}
|
||||
.map(s => s >= 90 ? '#198754' : s >= 70 ? '#ffc107' : '#dc3545'),
|
||||
borderRadius: 4,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true, maintainAspectRatio: false,
|
||||
scales: { y: { min: 0, max: 100, ticks: { callback: v => v + '%' } } },
|
||||
plugins: { legend: { display: false } }
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,186 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Follow-up Closure Rate{% 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-arrow-repeat text-purple me-2" style="color:#7c3aed;"></i>Follow-up Closure Rate</h2>
|
||||
<p class="text-muted mb-0">
|
||||
{{ start.strftime('%b %d, %Y') }} — {{ end.strftime('%b %d, %Y') }}
|
||||
· Inspections flagged for follow-up and whether a re-inspection was completed.
|
||||
</p>
|
||||
</div>
|
||||
<a href="{{ url_for('reports.export_followup_closure', start=start.strftime('%Y-%m-%d'), end=end.strftime('%Y-%m-%d')) }}"
|
||||
class="btn btn-sm btn-outline-success">
|
||||
<i class="bi bi-file-earmark-excel me-1"></i>Export Excel
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{# ── Date filter ── #}
|
||||
<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-3">
|
||||
<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-3">
|
||||
<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>
|
||||
<div class="col-auto">
|
||||
<button class="btn btn-sm btn-primary">Apply</button>
|
||||
<a href="{{ url_for('reports.followup_closure') }}" class="btn btn-sm btn-outline-secondary">Reset</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── KPI row ── #}
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="card shadow-sm h-100" style="border-left:5px solid #7c3aed;">
|
||||
<div class="card-body">
|
||||
<div class="text-muted small fw-semibold mb-1">Flagged for Follow-up</div>
|
||||
<div class="fs-1 fw-bold" style="color:#7c3aed;">{{ total }}</div>
|
||||
<div class="text-muted small">inspections in period</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="card shadow-sm h-100" style="border-left:5px solid #16a34a;">
|
||||
<div class="card-body">
|
||||
<div class="text-muted small fw-semibold mb-1">Re-inspected</div>
|
||||
<div class="fs-1 fw-bold text-success">{{ closed }}</div>
|
||||
<div class="text-muted small">follow-up completed</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="card shadow-sm h-100"
|
||||
style="border-left:5px solid {{ '#16a34a' if rate and rate >= 80 else '#d97706' if rate and rate >= 50 else '#dc2626' }};">
|
||||
<div class="card-body">
|
||||
<div class="text-muted small fw-semibold mb-1">Closure Rate</div>
|
||||
<div class="fs-1 fw-bold
|
||||
{{ 'text-success' if rate and rate >= 80 else 'text-warning' if rate and rate >= 50 else 'text-danger' if rate is not none else 'text-muted' }}">
|
||||
{{ rate|round(1) if rate is not none else '—' }}{% if rate is not none %}%{% endif %}
|
||||
</div>
|
||||
<div class="text-muted small">of flagged inspections re-done</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if total == 0 %}
|
||||
<div class="alert alert-info">
|
||||
<i class="bi bi-info-circle me-2"></i>No inspections were flagged for follow-up in this period.
|
||||
</div>
|
||||
{% else %}
|
||||
|
||||
{# ── By facility ── #}
|
||||
{% if by_facility %}
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header bg-light fw-semibold">
|
||||
<i class="bi bi-building me-1"></i>Closure Rate by Facility
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Facility</th>
|
||||
<th class="text-center">Flagged</th>
|
||||
<th class="text-center">Re-inspected</th>
|
||||
<th class="text-center">Closure Rate</th>
|
||||
<th>Progress</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in by_facility %}
|
||||
<tr>
|
||||
<td class="fw-semibold">{{ row.name }}</td>
|
||||
<td class="text-center">{{ row.total }}</td>
|
||||
<td class="text-center">{{ row.closed }}</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-{{ 'success' if row.rate >= 80 else 'warning text-dark' if row.rate >= 50 else 'danger' }} px-3">
|
||||
{{ row.rate }}%
|
||||
</span>
|
||||
</td>
|
||||
<td style="min-width:120px;">
|
||||
<div class="progress" style="height:8px;">
|
||||
<div class="progress-bar bg-{{ 'success' if row.rate >= 80 else 'warning' if row.rate >= 50 else 'danger' }}"
|
||||
style="width:{{ row.rate }}%;"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ── Detail table ── #}
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-light d-flex justify-content-between">
|
||||
<span class="fw-semibold"><i class="bi bi-list-ul me-1"></i>Inspection Detail</span>
|
||||
<span class="text-muted small">{{ total }} flagged</span>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover table-sm mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Date</th>
|
||||
<th>Facility</th>
|
||||
<th>Template</th>
|
||||
<th>Inspector</th>
|
||||
<th class="text-center">Score</th>
|
||||
<th>Note</th>
|
||||
<th class="text-center">Re-inspected?</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for insp in flagged %}
|
||||
<tr class="{{ '' if insp._has_followup else 'table-warning' }}">
|
||||
<td class="text-muted small">#{{ insp.id }}</td>
|
||||
<td class="small">{{ insp.inspection_date.strftime('%Y-%m-%d') if insp.inspection_date else '—' }}</td>
|
||||
<td class="small">{{ insp.facility.name if insp.facility else '—' }}</td>
|
||||
<td class="small">{{ insp.template.name if insp.template else '—' }}</td>
|
||||
<td class="small">{{ insp.inspector.display_name if insp.inspector else '—' }}</td>
|
||||
<td class="text-center">
|
||||
{% if insp.overall_score %}
|
||||
<span class="badge bg-{{ 'success' if insp.overall_score >= 80 else 'warning text-dark' if insp.overall_score >= 60 else 'danger' }}">
|
||||
{{ insp.overall_score|round(1) }}%
|
||||
</span>
|
||||
{% else %}—{% endif %}
|
||||
</td>
|
||||
<td class="small text-muted">
|
||||
{{ insp.follow_up_note[:60] if insp.follow_up_note else '—' }}
|
||||
{% if insp.follow_up_note and insp.follow_up_note|length > 60 %}…{% endif %}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% if insp._has_followup %}
|
||||
<span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>Yes</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger"><i class="bi bi-x-circle me-1"></i>No</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<a href="{{ url_for('inspections.view', inspection_id=insp.id) }}"
|
||||
class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endif %}{# end total == 0 #}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,319 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Reports & Analytics{% endblock %}
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.stat-card { border-left: 4px solid; }
|
||||
.stat-card.primary { border-color: #0d6efd; }
|
||||
.stat-card.success { border-color: #198754; }
|
||||
.stat-card.danger { border-color: #dc3545; }
|
||||
.stat-card.info { border-color: #0dcaf0; }
|
||||
.chart-container { position:relative; height:280px; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
{# ── Sub-nav ── #}
|
||||
{% include 'reports/_subnav.html' %}
|
||||
|
||||
{# ── Header + date filter ── #}
|
||||
<div class="d-flex justify-content-between align-items-start mb-4">
|
||||
<div>
|
||||
<h2><i class="bi bi-graph-up"></i> Reports & Analytics</h2>
|
||||
<p class="text-muted mb-0">{{ start.strftime('%b %d, %Y') }} — {{ end.strftime('%b %d, %Y') }}</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="{{ url_for('reports.export_inspections', start=start.strftime('%Y-%m-%d'), end=end.strftime('%Y-%m-%d')) }}"
|
||||
class="btn btn-sm btn-outline-success"><i class="bi bi-download"></i> Export Inspections CSV</a>
|
||||
<a href="{{ url_for('reports.export_issues', start=start.strftime('%Y-%m-%d'), end=end.strftime('%Y-%m-%d')) }}"
|
||||
class="btn btn-sm btn-outline-danger"><i class="bi bi-download"></i> Export Issues CSV</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-3">
|
||||
<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-3">
|
||||
<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 inspectors %}
|
||||
<div class="col-md-3">
|
||||
<label class="form-label small mb-1">Inspector</label>
|
||||
<select name="inspector_id" class="form-select form-select-sm">
|
||||
<option value="">All Inspectors</option>
|
||||
{% for u in inspectors %}
|
||||
<option value="{{ u.id }}" {% if inspector_filter == u.id %}selected{% endif %}>
|
||||
{{ u.display_name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="col-auto">
|
||||
<button class="btn btn-sm btn-primary">Apply</button>
|
||||
<a href="{{ url_for('reports.index') }}" class="btn btn-sm btn-outline-secondary">Reset</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── KPI cards ── #}
|
||||
<div class="row mb-4">
|
||||
{% for label, value, color, icon in [
|
||||
('Total Inspections', total_inspections, 'primary', 'bi-clipboard-data'),
|
||||
('Completed', completed, 'success', 'bi-check-circle'),
|
||||
('Open Issues', flagged, 'danger', 'bi-flag'),
|
||||
('Avg Score', (avg_score|string + '%') if avg_score else '—', 'info', 'bi-graph-up'),
|
||||
] %}
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card shadow-sm stat-card {{ color }} h-100">
|
||||
<div class="card-body d-flex align-items-center gap-3">
|
||||
<i class="bi {{ icon }} text-{{ color }}" style="font-size:2rem;"></i>
|
||||
<div>
|
||||
<p class="text-muted small mb-0">{{ label }}</p>
|
||||
<h3 class="mb-0 fw-bold">{{ value }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{# ── Charts row 1 ── #}
|
||||
<div class="row mb-4">
|
||||
<div class="col-lg-8 mb-3">
|
||||
<div class="card shadow-sm h-100">
|
||||
<div class="card-header bg-light"><h6 class="mb-0"><i class="bi bi-graph-up-arrow"></i> Score Trend</h6></div>
|
||||
<div class="card-body"><div class="chart-container"><canvas id="trendChart"></canvas></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 mb-3">
|
||||
<div class="card shadow-sm h-100">
|
||||
<div class="card-header bg-light"><h6 class="mb-0"><i class="bi bi-exclamation-triangle"></i> Issues by Severity</h6></div>
|
||||
<div class="card-body"><div class="chart-container"><canvas id="severityChart"></canvas></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Charts row 2 ── #}
|
||||
<div class="row mb-4">
|
||||
<div class="col-lg-8 mb-3">
|
||||
<div class="card shadow-sm h-100">
|
||||
<div class="card-header bg-light"><h6 class="mb-0"><i class="bi bi-building"></i> Avg Score by Facility</h6></div>
|
||||
<div class="card-body"><div class="chart-container"><canvas id="facilityChart"></canvas></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 mb-3">
|
||||
<div class="card shadow-sm h-100">
|
||||
<div class="card-header bg-light"><h6 class="mb-0"><i class="bi bi-pie-chart"></i> Issue Status</h6></div>
|
||||
<div class="card-body"><div class="chart-container"><canvas id="statusChart"></canvas></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Facility period-over-period comparison table ── #}
|
||||
{% if facility_scores %}
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header bg-light d-flex align-items-center gap-2">
|
||||
<h6 class="mb-0"><i class="bi bi-building"></i> Facility Score Comparison</h6>
|
||||
<span class="text-muted small">vs. prior equal-length period</span>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0 align-middle">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Facility</th>
|
||||
<th class="text-end">Current Period</th>
|
||||
<th class="text-end">Prior Period</th>
|
||||
<th class="text-end">Change</th>
|
||||
<th class="text-end">Inspections</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for row in facility_scores %}
|
||||
<tr>
|
||||
<td class="fw-semibold">{{ row.name }}</td>
|
||||
<td class="text-end">
|
||||
<span class="badge bg-{{ 'success' if row.avg_score >= 90 else 'warning text-dark' if row.avg_score >= 70 else 'danger' }}">
|
||||
{{ '%.1f'|format(row.avg_score|float) }}%
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-end text-muted">
|
||||
{% if row.prior_avg is not none %}
|
||||
{{ '%.1f'|format(row.prior_avg|float) }}%
|
||||
{% else %}
|
||||
<span class="text-muted">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-end">
|
||||
{% if row.delta is not none %}
|
||||
{% if row.delta > 0 %}
|
||||
<span class="badge bg-success-subtle text-success border border-success fw-semibold">
|
||||
<i class="bi bi-arrow-up-short"></i>+{{ '%.1f'|format(row.delta|float) }}
|
||||
</span>
|
||||
{% elif row.delta < 0 %}
|
||||
<span class="badge bg-danger-subtle text-danger border border-danger fw-semibold">
|
||||
<i class="bi bi-arrow-down-short"></i>{{ '%.1f'|format(row.delta|float) }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary-subtle text-secondary border fw-semibold">
|
||||
<i class="bi bi-dash"></i> 0.0
|
||||
</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span class="text-muted small">No prior data</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-end text-muted small">{{ row.count }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ── Top inspectors table ── #}
|
||||
{% if top_inspectors %}
|
||||
<div class="row mb-4">
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-light"><h6 class="mb-0"><i class="bi bi-person-check"></i> Top Inspectors</h6></div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light"><tr><th>Inspector</th><th>Inspections</th><th>Avg Score</th></tr></thead>
|
||||
<tbody>
|
||||
{% for row in top_inspectors %}
|
||||
<tr>
|
||||
<td>{{ row.display_name }}</td>
|
||||
<td>{{ row.count }}</td>
|
||||
<td>
|
||||
{% if row.avg_score %}
|
||||
<span class="badge bg-{{ 'success' if row.avg_score >= 90 else 'warning text-dark' if row.avg_score >= 70 else 'danger' }}">
|
||||
{{ '%.1f'|format(row.avg_score|float) }}%
|
||||
</span>
|
||||
{% else %}—{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Critical / High open issues ── #}
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-danger text-white"><h6 class="mb-0"><i class="bi bi-fire"></i> Open Critical / High Issues</h6></div>
|
||||
{% if critical_issues %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light"><tr><th>Severity</th><th>Area</th><th>Description</th><th></th></tr></thead>
|
||||
<tbody>
|
||||
{% for issue in critical_issues %}
|
||||
<tr>
|
||||
<td><span class="badge bg-danger">{{ issue.severity|title }}</span></td>
|
||||
<td>{{ issue.area.name }}</td>
|
||||
<td>{{ issue.description[:50] }}{% if issue.description|length > 50 %}…{% endif %}</td>
|
||||
<td><a href="{{ url_for('issues.view', issue_id=issue.id) }}" class="btn btn-sm btn-outline-secondary">View</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="card-body"><p class="text-muted mb-0">No open critical or high issues. 🎉</p></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||||
<script>
|
||||
Chart.defaults.font.family = "'Segoe UI', system-ui, sans-serif";
|
||||
Chart.defaults.color = '#6c757d';
|
||||
|
||||
const BLUE = '#0d6efd', GREEN = '#198754', RED = '#dc3545',
|
||||
AMBER = '#ffc107', TEAL = '#0dcaf0', GRAY = '#adb5bd';
|
||||
|
||||
// ── Trend chart ──────────────────────────────────────────────────────────────
|
||||
new Chart(document.getElementById('trendChart'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: {{ daily_scores | map(attribute='day') | map('string') | list | tojson }},
|
||||
datasets: [{
|
||||
label: 'Avg Score (%)',
|
||||
data: {{ daily_scores | map(attribute='avg') | list | tojson }},
|
||||
borderColor: BLUE, backgroundColor: 'rgba(13,110,253,.1)',
|
||||
tension: .3, fill: true, pointRadius: 4,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true, maintainAspectRatio: false,
|
||||
scales: { y: { min: 0, max: 100, ticks: { callback: v => v + '%' } } },
|
||||
plugins: { legend: { display: false } }
|
||||
}
|
||||
});
|
||||
|
||||
// ── Facility bar chart ────────────────────────────────────────────────────────
|
||||
new Chart(document.getElementById('facilityChart'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: {{ facility_scores | map(attribute='name') | list | tojson }},
|
||||
datasets: [{
|
||||
label: 'Avg Score (%)',
|
||||
data: {{ facility_scores | map(attribute='avg_score') | list | tojson }},
|
||||
backgroundColor: {{ facility_scores | map(attribute='avg_score') | list | tojson }}
|
||||
.map(s => s >= 90 ? GREEN : s >= 70 ? AMBER : RED),
|
||||
borderRadius: 4,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true, maintainAspectRatio: false,
|
||||
scales: { y: { min: 0, max: 100, ticks: { callback: v => v + '%' } } },
|
||||
plugins: { legend: { display: false } }
|
||||
}
|
||||
});
|
||||
|
||||
// ── Severity doughnut ─────────────────────────────────────────────────────────
|
||||
const sevData = {{ issue_severity | tojson }};
|
||||
new Chart(document.getElementById('severityChart'), {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: sevData.map(r => r.severity ? r.severity.charAt(0).toUpperCase() + r.severity.slice(1) : 'Unknown'),
|
||||
datasets: [{
|
||||
data: sevData.map(r => r.count),
|
||||
backgroundColor: sevData.map(r => ({critical:RED,high:'#fd7e14',medium:AMBER,low:GRAY}[r.severity] || GRAY)),
|
||||
}]
|
||||
},
|
||||
options: { responsive: true, maintainAspectRatio: false,
|
||||
plugins: { legend: { position: 'bottom' } } }
|
||||
});
|
||||
|
||||
// ── Status pie ────────────────────────────────────────────────────────────────
|
||||
const stData = {{ issue_status | tojson }};
|
||||
new Chart(document.getElementById('statusChart'), {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: stData.map(r => r.status ? r.status.replace('_',' ').replace(/\b\w/g,c=>c.toUpperCase()) : 'Unknown'),
|
||||
datasets: [{
|
||||
data: stData.map(r => r.count),
|
||||
backgroundColor: stData.map(r => ({open:RED, in_progress:AMBER, resolved:GREEN}[r.status] || GRAY)),
|
||||
}]
|
||||
},
|
||||
options: { responsive: true, maintainAspectRatio: false,
|
||||
plugins: { legend: { position: 'bottom' } } }
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,395 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Inspector Performance{% endblock %}
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.stat-card { border-left: 4px solid; }
|
||||
.stat-card.primary { border-color: #0d6efd; }
|
||||
.stat-card.success { border-color: #198754; }
|
||||
.stat-card.danger { border-color: #dc3545; }
|
||||
.stat-card.info { border-color: #0dcaf0; }
|
||||
.stat-card.warning { border-color: #ffc107; }
|
||||
.chart-container { position:relative; height:280px; }
|
||||
.inspector-row { cursor:pointer; }
|
||||
.inspector-row.table-active td { background-color: #e8f0fe !important; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
{# ── Sub-nav ── #}
|
||||
{% include 'reports/_subnav.html' %}
|
||||
|
||||
{# ── Header ── #}
|
||||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||
<div>
|
||||
<h2><i class="bi bi-person-lines-fill"></i> Inspector Performance</h2>
|
||||
<p class="text-muted mb-0">{{ start.strftime('%b %d, %Y') }} — {{ end.strftime('%b %d, %Y') }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="{{ url_for('reports.export_inspector_performance',
|
||||
start=start.strftime('%Y-%m-%d'),
|
||||
end=end.strftime('%Y-%m-%d'),
|
||||
**({'inspector_id': selected_id} if selected_id else {})) }}"
|
||||
class="btn btn-sm btn-success">
|
||||
<i class="bi bi-file-earmark-spreadsheet me-1"></i>Export Excel
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Date filter ── #}
|
||||
<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-3">
|
||||
<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-3">
|
||||
<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 selected_id %}
|
||||
<input type="hidden" name="inspector_id" value="{{ selected_id }}">
|
||||
{% endif %}
|
||||
<div class="col-auto">
|
||||
<button class="btn btn-sm btn-primary">Apply</button>
|
||||
<a href="{{ url_for('reports.inspector_performance') }}" class="btn btn-sm btn-outline-secondary">Reset</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if not inspector_stats %}
|
||||
<div class="alert alert-info">
|
||||
<i class="bi bi-info-circle me-1"></i>
|
||||
No inspections found for the selected date range.
|
||||
</div>
|
||||
{% else %}
|
||||
|
||||
{# ── Comparison charts ── #}
|
||||
<div class="row mb-4">
|
||||
<div class="col-lg-7 mb-3">
|
||||
<div class="card shadow-sm h-100">
|
||||
<div class="card-header bg-light"><h6 class="mb-0"><i class="bi bi-bar-chart"></i> Avg Score by Inspector</h6></div>
|
||||
<div class="card-body"><div class="chart-container"><canvas id="scoreChart"></canvas></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5 mb-3">
|
||||
<div class="card shadow-sm h-100">
|
||||
<div class="card-header bg-light"><h6 class="mb-0"><i class="bi bi-clipboard-data"></i> Inspections Completed</h6></div>
|
||||
<div class="card-body"><div class="chart-container"><canvas id="countChart"></canvas></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Summary table ── #}
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header bg-light d-flex justify-content-between align-items-center">
|
||||
<h6 class="mb-0"><i class="bi bi-table me-1"></i>All Inspectors — Summary</h6>
|
||||
<span class="badge bg-secondary">{{ inspector_stats|length }} inspector{{ 's' if inspector_stats|length != 1 }}</span>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Inspector</th>
|
||||
<th class="text-center">Total</th>
|
||||
<th class="text-center">Completed</th>
|
||||
<th class="text-center">Completion Rate</th>
|
||||
<th class="text-center">Avg Score</th>
|
||||
<th class="text-center">
|
||||
vs. Avg
|
||||
{% if team_avg_score %}<span class="text-muted fw-normal small">({{ '%.1f'|format(team_avg_score) }}%)</span>{% endif %}
|
||||
</th>
|
||||
<th class="text-center">Avg Time</th>
|
||||
<th class="text-center">Issues Flagged</th>
|
||||
<th class="text-center">Follow-ups</th>
|
||||
<th class="text-center">Facilities</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for s in inspector_stats %}
|
||||
<tr class="inspector-row {% if selected_id == s.id %}table-active{% endif %}"
|
||||
data-inspector-id="{{ s.id }}">
|
||||
<td class="fw-semibold">
|
||||
{{ s.display_name }}
|
||||
</td>
|
||||
<td class="text-center">{{ s.total }}</td>
|
||||
<td class="text-center">{{ s.completed }}</td>
|
||||
<td class="text-center">
|
||||
<div class="d-flex align-items-center justify-content-center gap-2">
|
||||
<div class="progress flex-grow-1" style="height:6px;max-width:60px;">
|
||||
<div class="progress-bar bg-{{ 'success' if s.completion_rate >= 90 else 'warning' if s.completion_rate >= 70 else 'danger' }}"
|
||||
style="width:{{ s.completion_rate }}%;"></div>
|
||||
</div>
|
||||
<span class="small">{{ s.completion_rate }}%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% if s.avg_score %}
|
||||
<span class="badge bg-{{ 'success' if s.avg_score >= 90 else 'warning text-dark' if s.avg_score >= 70 else 'danger' }}">
|
||||
{{ '%.1f'|format(s.avg_score) }}%
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="text-muted">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% if s.vs_avg is not none %}
|
||||
{% if s.vs_avg > 0 %}
|
||||
<span class="badge bg-success">+{{ '%.1f'|format(s.vs_avg) }}%</span>
|
||||
{% elif s.vs_avg < 0 %}
|
||||
<span class="badge bg-danger">{{ '%.1f'|format(s.vs_avg) }}%</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">0.0%</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span class="text-muted">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="small text-muted">{{ s.avg_time or '—' }}</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% if s.issues_flagged > 0 %}
|
||||
<span class="badge bg-danger">{{ s.issues_flagged }}</span>
|
||||
{% else %}
|
||||
<span class="text-muted">0</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% if s.follow_ups > 0 %}
|
||||
<span class="badge bg-warning text-dark">{{ s.follow_ups }}</span>
|
||||
{% else %}
|
||||
<span class="text-muted">0</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-center">{{ s.facilities }}</td>
|
||||
<td>
|
||||
{% if selected_id == s.id %}
|
||||
<a href="{{ url_for('reports.inspector_performance', start=start.strftime('%Y-%m-%d'), end=end.strftime('%Y-%m-%d')) }}"
|
||||
class="btn btn-sm btn-outline-secondary">Close</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('reports.inspector_performance', inspector_id=s.id, start=start.strftime('%Y-%m-%d'), end=end.strftime('%Y-%m-%d')) }}"
|
||||
class="btn btn-sm btn-outline-primary">Details</a>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Individual inspector drill-down ── #}
|
||||
{% if selected_inspector and selected_kpis %}
|
||||
<div class="card shadow-sm border-primary mb-4" id="inspectorDetail">
|
||||
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
|
||||
<h6 class="mb-0">
|
||||
<i class="bi bi-person-circle me-2"></i>{{ selected_inspector.display_name }}
|
||||
</h6>
|
||||
<a href="{{ url_for('reports.inspector_performance', start=start.strftime('%Y-%m-%d'), end=end.strftime('%Y-%m-%d')) }}"
|
||||
class="btn btn-sm btn-light text-primary">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
{# KPI stat row #}
|
||||
<div class="row g-3 mb-4">
|
||||
{% for label, value, color, icon in [
|
||||
('Total Inspections', selected_kpis.total, 'primary', 'bi-clipboard-data'),
|
||||
('Completed', selected_kpis.completed, 'success', 'bi-check-circle'),
|
||||
('Avg Score', (('%.1f'|format(selected_kpis.avg_score)) + '%') if selected_kpis.avg_score else '—', 'info', 'bi-graph-up'),
|
||||
('Avg Completion Time',selected_kpis.avg_time or '—', 'info', 'bi-stopwatch'),
|
||||
('Issues Flagged', selected_kpis.issues_flagged, 'danger', 'bi-flag'),
|
||||
('Follow-ups Req.', selected_kpis.follow_ups, 'warning', 'bi-arrow-repeat'),
|
||||
('Facilities Covered', selected_kpis.facilities, 'primary', 'bi-building'),
|
||||
] %}
|
||||
<div class="col-6 col-md-4 col-lg-3 col-xl-auto" style="min-width:130px;">
|
||||
<div class="card shadow-sm stat-card {{ color }} h-100">
|
||||
<div class="card-body py-2 px-3">
|
||||
<p class="text-muted small mb-1">{{ label }}</p>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="bi {{ icon }} text-{{ color }}"></i>
|
||||
<span class="fw-bold">{{ value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{# Score trend chart #}
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-light">
|
||||
<h6 class="mb-0"><i class="bi bi-graph-up-arrow me-1"></i>Score Trend — {{ selected_inspector.display_name }}</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if trend_data %}
|
||||
<div class="chart-container"><canvas id="trendChart"></canvas></div>
|
||||
{% else %}
|
||||
<p class="text-muted text-center py-3 mb-0">No completed inspections with scores in this period.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Recent inspections #}
|
||||
{% if recent_inspections %}
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-light d-flex justify-content-between align-items-center">
|
||||
<h6 class="mb-0"><i class="bi bi-list-ul me-1"></i>Recent Inspections</h6>
|
||||
<span class="badge bg-secondary">{{ recent_inspections|length }}</span>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover table-sm align-middle mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Facility</th>
|
||||
<th>Area</th>
|
||||
<th>Template</th>
|
||||
<th class="text-center">Score</th>
|
||||
<th class="text-center">Status</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for ins in recent_inspections %}
|
||||
<tr>
|
||||
<td class="small">{{ ins.inspection_date.strftime('%b %d, %Y') }}</td>
|
||||
<td class="small">{{ ins.facility.name if ins.facility else '—' }}</td>
|
||||
<td class="small">{{ ins.area.name if ins.area else '—' }}</td>
|
||||
<td class="small">{{ ins.template.name if ins.template else '—' }}</td>
|
||||
<td class="text-center">
|
||||
{% if ins.overall_score %}
|
||||
<span class="badge bg-{{ 'success' if ins.overall_score >= 90 else 'warning text-dark' if ins.overall_score >= 70 else 'danger' }}">
|
||||
{{ '%.1f'|format(ins.overall_score|float) }}%
|
||||
</span>
|
||||
{% else %}—{% endif %}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% set sc = ins.status %}
|
||||
<span class="badge bg-{{ 'success' if sc == 'completed' else 'warning text-dark' if sc == 'flagged' else 'secondary' }}">
|
||||
{{ 'Submitted' if sc == 'completed' else sc.replace('_',' ')|title }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<a href="{{ url_for('inspections.view', inspection_id=ins.id) }}"
|
||||
class="btn btn-xs btn-outline-secondary" style="font-size:.75rem;padding:2px 8px;">View</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}{# end if inspector_stats #}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||||
<script>
|
||||
Chart.defaults.font.family = "'Segoe UI', system-ui, sans-serif";
|
||||
Chart.defaults.color = '#6c757d';
|
||||
|
||||
const BLUE = '#0d6efd', GREEN = '#198754', RED = '#dc3545',
|
||||
AMBER = '#ffc107', GRAY = '#adb5bd';
|
||||
|
||||
function scoreColor(s) { return s >= 90 ? GREEN : s >= 70 ? AMBER : RED; }
|
||||
|
||||
{% if inspector_stats %}
|
||||
const stats = {{ inspector_stats | tojson }};
|
||||
|
||||
// ── Avg score bar chart ───────────────────────────────────────────────────────
|
||||
new Chart(document.getElementById('scoreChart'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: stats.map(s => s.display_name),
|
||||
datasets: [{
|
||||
label: 'Avg Score (%)',
|
||||
data: stats.map(s => s.avg_score),
|
||||
backgroundColor: stats.map(s => s.avg_score ? scoreColor(s.avg_score) : GRAY),
|
||||
borderRadius: 4,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true, maintainAspectRatio: false,
|
||||
scales: { y: { min: 0, max: 100, ticks: { callback: v => v + '%' } } },
|
||||
plugins: { legend: { display: false } }
|
||||
}
|
||||
});
|
||||
|
||||
// ── Inspection count chart ────────────────────────────────────────────────────
|
||||
new Chart(document.getElementById('countChart'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: stats.map(s => s.display_name),
|
||||
datasets: [
|
||||
{
|
||||
label: 'Completed',
|
||||
data: stats.map(s => s.completed),
|
||||
backgroundColor: GREEN,
|
||||
borderRadius: 4,
|
||||
stack: 'a',
|
||||
},
|
||||
{
|
||||
label: 'Other',
|
||||
data: stats.map(s => s.total - s.completed),
|
||||
backgroundColor: GRAY,
|
||||
borderRadius: 4,
|
||||
stack: 'a',
|
||||
},
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true, maintainAspectRatio: false,
|
||||
scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } },
|
||||
plugins: { legend: { position: 'bottom' } }
|
||||
}
|
||||
});
|
||||
{% endif %}
|
||||
|
||||
{% if trend_data %}
|
||||
// ── Individual inspector score trend ─────────────────────────────────────────
|
||||
new Chart(document.getElementById('trendChart'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: {{ trend_data | map(attribute='day') | list | tojson }},
|
||||
datasets: [{
|
||||
label: 'Avg Score (%)',
|
||||
data: {{ trend_data | map(attribute='avg') | list | tojson }},
|
||||
borderColor: BLUE, backgroundColor: 'rgba(13,110,253,.1)',
|
||||
tension: .3, fill: true, pointRadius: 4,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true, maintainAspectRatio: false,
|
||||
scales: { y: { min: 0, max: 100, ticks: { callback: v => v + '%' } } },
|
||||
plugins: { legend: { display: false } }
|
||||
}
|
||||
});
|
||||
{% endif %}
|
||||
|
||||
{% if selected_id %}
|
||||
// Scroll to detail panel on load
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var el = document.getElementById('inspectorDetail');
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
});
|
||||
{% endif %}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,175 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Issues Aging{% 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-clock-history text-danger me-2"></i>Issues Aging</h2>
|
||||
<p class="text-muted mb-0">All currently open issues grouped by how long they have been waiting.</p>
|
||||
</div>
|
||||
<a href="{{ url_for('reports.export_issues_aging', severity=severity_filter, 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">Severity</label>
|
||||
<select name="severity" class="form-select form-select-sm">
|
||||
<option value="">All</option>
|
||||
{% for s in ['critical','high','medium','low'] %}
|
||||
<option value="{{ s }}" {{ 'selected' if severity_filter == s }}>{{ s|title }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label small mb-1">Facility</label>
|
||||
<select 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.issues_aging') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── KPI row ── #}
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="card shadow-sm border-0 h-100" style="background:#fff7ed;">
|
||||
<div class="card-body">
|
||||
<div class="small fw-semibold text-muted mb-1">Total Open</div>
|
||||
<div class="fs-1 fw-bold" style="color:#ea580c;">{{ total }}</div>
|
||||
<div class="small text-muted">unresolved issues</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="card shadow-sm border-0 h-100" style="background:#fef2f2;">
|
||||
<div class="card-body">
|
||||
<div class="small fw-semibold text-muted mb-1">SLA Breached</div>
|
||||
<div class="fs-1 fw-bold text-danger">{{ sla_breached }}</div>
|
||||
<div class="small text-muted">past resolution deadline</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
<div class="card shadow-sm border-0 h-100" style="background:#fefce8;">
|
||||
<div class="card-body">
|
||||
<div class="small fw-semibold text-muted mb-1">SLA At Risk</div>
|
||||
<div class="fs-1 fw-bold text-warning">{{ sla_at_risk }}</div>
|
||||
<div class="small text-muted">approaching deadline</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Bucket accordions ── #}
|
||||
<div class="accordion" id="agingAccordion">
|
||||
{% for label in bucket_labels %}
|
||||
{% set bucket = buckets[label] %}
|
||||
{% set bucket_id = 'bucket-' ~ loop.index %}
|
||||
{% set is_danger = label in ['>4 weeks', '1–4 weeks'] %}
|
||||
{% set is_warning = label == '3–7 days' %}
|
||||
<div class="accordion-item mb-2 shadow-sm border-0">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button {{ 'collapsed' if loop.index > 1 else '' }} fw-semibold"
|
||||
type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#{{ bucket_id }}">
|
||||
<span class="badge rounded-pill me-2
|
||||
{{ 'bg-danger' if is_danger else 'bg-warning text-dark' if is_warning else 'bg-secondary' }}">
|
||||
{{ bucket|length }}
|
||||
</span>
|
||||
{{ label }}
|
||||
{% if is_danger and bucket|length > 0 %}
|
||||
<span class="ms-2 badge bg-danger bg-opacity-25 text-danger" style="font-size:.7rem;">Needs attention</span>
|
||||
{% endif %}
|
||||
</button>
|
||||
</h2>
|
||||
<div id="{{ bucket_id }}" class="accordion-collapse collapse {{ 'show' if loop.index == 1 else '' }}"
|
||||
data-bs-parent="#agingAccordion">
|
||||
<div class="accordion-body p-0">
|
||||
{% if bucket %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover table-sm mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Age</th>
|
||||
<th>Severity</th>
|
||||
<th>Facility / Area</th>
|
||||
<th>Description</th>
|
||||
<th>Status</th>
|
||||
<th>SLA</th>
|
||||
<th>Assigned</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in bucket %}
|
||||
{% set issue = item.issue %}
|
||||
{% set sla = item.sla %}
|
||||
<tr class="{{ 'table-danger' if sla == 'breached' else 'table-warning' if sla == 'at_risk' else '' }}">
|
||||
<td class="text-muted small">#{{ issue.id }}</td>
|
||||
<td class="text-nowrap small">{{ item.age_h }}h</td>
|
||||
<td>
|
||||
<span class="badge bg-{{ 'danger' if issue.severity in ['critical','high'] else 'warning text-dark' if issue.severity == 'medium' else 'secondary' }}">
|
||||
{{ issue.severity|title }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="small">
|
||||
{{ issue.resolved_facility.name if issue.resolved_facility else '—' }}<br>
|
||||
<span class="text-muted">{{ issue.area.name if issue.area else '—' }}</span>
|
||||
</td>
|
||||
<td class="small">{{ issue.description[:70] }}{% if issue.description|length > 70 %}…{% endif %}</td>
|
||||
<td>
|
||||
<span class="badge bg-{{ 'info text-dark' if issue.status == 'pending_verification' else 'warning text-dark' if issue.status == 'in_progress' else 'secondary' }}">
|
||||
{{ issue.status|replace('_',' ')|title }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{% if sla == 'breached' %}<span class="badge bg-danger"><i class="bi bi-alarm me-1"></i>Breached</span>
|
||||
{% elif sla == 'at_risk' %}<span class="badge bg-warning text-dark">At Risk</span>
|
||||
{% elif sla == 'ok' %}<span class="badge bg-secondary">OK</span>
|
||||
{% else %}<span class="text-muted small">—</span>{% endif %}
|
||||
</td>
|
||||
<td class="small">{{ issue.assigned_user.display_name if issue.assigned_user else '—' }}</td>
|
||||
<td>
|
||||
<a href="{{ url_for('issues.view', issue_id=issue.id) }}" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="p-3 text-muted small">No issues in this age range.</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if total == 0 %}
|
||||
<div class="alert alert-success mt-3">
|
||||
<i class="bi bi-check-circle me-2"></i>No open issues match the selected filters.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,279 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ facility.name }} — Scorecard{% endblock %}
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.kpi-card { border-left: 4px solid; }
|
||||
.kpi-blue { border-color: #2563eb; }
|
||||
.kpi-green { border-color: #16a34a; }
|
||||
.kpi-yellow { border-color: #d97706; }
|
||||
.kpi-red { border-color: #dc2626; }
|
||||
.chart-container { position: relative; height: 260px; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="d-flex justify-content-between align-items-start mb-4">
|
||||
<div>
|
||||
<h2><i class="bi bi-speedometer2 text-primary me-2"></i>{{ facility.name }}</h2>
|
||||
<p class="text-muted mb-0">Facility Scorecard — last {{ days }} days</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2 align-items-center">
|
||||
{# Period selector #}
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
{% for d, label in [(30,'30d'),(60,'60d'),(90,'90d'),(180,'180d'),(365,'1yr')] %}
|
||||
<a href="{{ url_for('reports.facility_scorecard', facility_id=facility.id, days=d) }}"
|
||||
class="btn btn-outline-secondary {{ 'active' if days == d else '' }}">{{ label }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<a href="{{ url_for('reports.facility_report', facility_id=facility.id) }}"
|
||||
class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-file-text"></i> Full Report
|
||||
</a>
|
||||
<a href="{{ url_for('reports.facility_summary_pdf', facility_id=facility.id, days=days) }}"
|
||||
class="btn btn-sm btn-outline-danger" title="Download customer-facing PDF summary">
|
||||
<i class="bi bi-file-earmark-pdf"></i> PDF Summary
|
||||
</a>
|
||||
<a href="{{ url_for('reports.index') }}" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left"></i> Reports
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── KPI row ── #}
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card shadow-sm kpi-card kpi-blue h-100">
|
||||
<div class="card-body">
|
||||
<div class="text-muted small fw-semibold mb-1">Total Inspections</div>
|
||||
<div class="fs-2 fw-bold">{{ total_inspections }}</div>
|
||||
<div class="text-muted small">{{ completed_insp }} completed</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card shadow-sm kpi-card {{ 'kpi-green' if avg_score and avg_score >= 80 else 'kpi-yellow' if avg_score and avg_score >= 60 else 'kpi-red' }} h-100">
|
||||
<div class="card-body">
|
||||
<div class="text-muted small fw-semibold mb-1">Avg Score</div>
|
||||
<div class="fs-2 fw-bold">{{ avg_score|round(1) if avg_score else '—' }}{% if avg_score %}%{% endif %}</div>
|
||||
<div class="text-muted small">{{ days }}-day average</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card shadow-sm kpi-card {{ 'kpi-green' if sla_pct and sla_pct >= 90 else 'kpi-yellow' if sla_pct else 'kpi-red' }} h-100">
|
||||
<div class="card-body">
|
||||
<div class="text-muted small fw-semibold mb-1">SLA Compliance</div>
|
||||
<div class="fs-2 fw-bold">{{ sla_pct|round(1) if sla_pct is not none else '—' }}{% if sla_pct is not none %}%{% endif %}</div>
|
||||
<div class="text-muted small">{{ sla_met }}/{{ sla_total }} closed on time</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card shadow-sm kpi-card {{ 'kpi-red' if open_issues|length > 0 else 'kpi-green' }} h-100">
|
||||
<div class="card-body">
|
||||
<div class="text-muted small fw-semibold mb-1">Open Issues</div>
|
||||
<div class="fs-2 fw-bold">{{ open_issues|length }}</div>
|
||||
<div class="text-muted small">
|
||||
{% if pending_verification > 0 %}
|
||||
<span class="text-warning">{{ pending_verification }} pending verification</span>
|
||||
{% else %}
|
||||
across all severities
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
|
||||
{# ── Score trend chart ── #}
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-light fw-semibold">
|
||||
<i class="bi bi-graph-up me-1"></i> Score Trend
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if trend_labels %}
|
||||
<div class="chart-container">
|
||||
<canvas id="trendChart"></canvas>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-muted text-center py-4 mb-0">No completed inspections in this period.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Issue severity breakdown ── #}
|
||||
<div class="col-md-4">
|
||||
<div class="card shadow-sm h-100">
|
||||
<div class="card-header bg-light fw-semibold">
|
||||
<i class="bi bi-exclamation-triangle me-1"></i> Open Issues by Severity
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% for sev, color in [('critical','danger'),('high','danger'),('medium','warning'),('low','secondary')] %}
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<span class="badge bg-{{ color }} {{ 'text-dark' if color == 'warning' else '' }}">
|
||||
{{ sev|title }}
|
||||
</span>
|
||||
<span class="fw-bold fs-5">{{ sev_counts.get(sev, 0) }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if pending_verification > 0 %}
|
||||
<hr class="my-2">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="badge bg-info text-dark">Pending Verification</span>
|
||||
<span class="fw-bold fs-5">{{ pending_verification }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Area scores ── #}
|
||||
{% if area_scores %}
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-light fw-semibold">
|
||||
<i class="bi bi-building me-1"></i> Score by Area
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<table class="table table-sm mb-0">
|
||||
<thead class="table-light">
|
||||
<tr><th>Area</th><th class="text-center">Avg Score</th><th class="text-center">Inspections</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for a in area_scores %}
|
||||
<tr>
|
||||
<td>{{ a.name }}</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-{{ 'success' if a.avg >= 80 else 'warning text-dark' if a.avg >= 60 else 'danger' }}">
|
||||
{{ a.avg|round(1) }}%
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-center text-muted small">{{ a.count }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ── Follow-up required ── #}
|
||||
{% if followup_required %}
|
||||
<div class="col-md-6">
|
||||
<div class="card shadow-sm border-warning">
|
||||
<div class="card-header bg-warning text-dark fw-semibold">
|
||||
<i class="bi bi-arrow-repeat me-1"></i> Follow-up Required
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<table class="table table-sm mb-0">
|
||||
<thead class="table-light">
|
||||
<tr><th>Inspection</th><th>Date</th><th>Score</th><th></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for insp in followup_required %}
|
||||
<tr>
|
||||
<td>#{{ insp.id }} — {{ insp.template.name }}</td>
|
||||
<td class="text-muted small">{{ insp.inspection_date.strftime('%Y-%m-%d') }}</td>
|
||||
<td>
|
||||
{% if insp.overall_score %}
|
||||
<span class="badge bg-{{ 'success' if insp.overall_score >= 80 else 'warning text-dark' if insp.overall_score >= 60 else 'danger' }}">
|
||||
{{ insp.overall_score|round(1) }}%
|
||||
</span>
|
||||
{% else %}—{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<a href="{{ url_for('inspections.view', inspection_id=insp.id) }}"
|
||||
class="btn btn-xs btn-outline-secondary btn-sm">View</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ── Open issues list ── #}
|
||||
{% if open_issues %}
|
||||
<div class="col-12">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-light fw-semibold">
|
||||
<i class="bi bi-bug me-1"></i> Open Issues
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<table class="table table-sm table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr><th>ID</th><th>Severity</th><th>Area</th><th>Description</th><th>Status</th><th>Reported</th><th></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for issue in open_issues %}
|
||||
<tr>
|
||||
<td class="text-muted small">#{{ issue.id }}</td>
|
||||
<td>
|
||||
<span class="badge bg-{{ 'danger' if issue.severity in ['critical','high'] else 'warning text-dark' if issue.severity == 'medium' else 'secondary' }}">
|
||||
{{ issue.severity|title }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="small">{{ issue.area.name }}</td>
|
||||
<td class="small">{{ issue.description[:80] }}{% if issue.description|length > 80 %}…{% endif %}</td>
|
||||
<td>
|
||||
<span class="badge bg-{{ 'info text-dark' if issue.status == 'pending_verification' else 'warning text-dark' if issue.status == 'in_progress' else 'secondary' }}">
|
||||
{{ issue.status|replace('_',' ')|title }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-muted small">{{ issue.reported_at.strftime('%Y-%m-%d') }}</td>
|
||||
<td>
|
||||
<a href="{{ url_for('issues.view', issue_id=issue.id) }}"
|
||||
class="btn btn-sm btn-outline-secondary">View</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||||
<script>
|
||||
{% if trend_labels %}
|
||||
(function () {
|
||||
const ctx = document.getElementById('trendChart').getContext('2d');
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: {{ trend_labels | tojson }},
|
||||
datasets: [{
|
||||
label: 'Avg Score (%)',
|
||||
data: {{ trend_data | tojson }},
|
||||
borderColor: '#2563eb',
|
||||
backgroundColor: 'rgba(37,99,235,.1)',
|
||||
fill: true,
|
||||
tension: 0.3,
|
||||
pointRadius: 3,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { legend: { display: false } },
|
||||
scales: {
|
||||
y: { min: 0, max: 100, ticks: { callback: v => v + '%' } }
|
||||
}
|
||||
}
|
||||
});
|
||||
}());
|
||||
{% endif %}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,149 @@
|
||||
{% 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-3">
|
||||
<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-3">
|
||||
<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>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label small mb-1">Facility</label>
|
||||
<select 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 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 %}
|
||||
Reference in New Issue
Block a user