Phase 3: initiatal code
This commit is contained in:
@@ -35,6 +35,9 @@
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('reports.index') }}">Reports</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('issues.index') }}">Issues</a>
|
||||
</li>
|
||||
{% if current_user.role == 'admin' %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('auth.list_users') }}">Users</a>
|
||||
|
||||
@@ -0,0 +1,162 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Execute Inspection{% endblock %}
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.item-card { border-left: 4px solid #dee2e6; transition: border-color .2s; }
|
||||
.item-card.answered { border-left-color: #198754; }
|
||||
.item-card.flagged { border-left-color: #dc3545; }
|
||||
.pass-fail-group .btn-check:checked + .btn-outline-success { background:#198754; color:#fff; }
|
||||
.pass-fail-group .btn-check:checked + .btn-outline-danger { background:#dc3545; color:#fff; }
|
||||
.progress-bar-label { font-size:.75rem; font-weight:600; }
|
||||
.sticky-toolbar { position:sticky; top:56px; z-index:20; background:#fff; border-bottom:1px solid #dee2e6; padding:.6rem 1rem; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<form method="post" enctype="multipart/form-data" id="inspectionForm">
|
||||
{{ csrf_token() | safe }}
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
|
||||
{# Sticky toolbar #}
|
||||
<div class="sticky-toolbar d-flex align-items-center gap-3 mb-4">
|
||||
<div class="flex-grow-1">
|
||||
<h5 class="mb-0">{{ inspection.template.name }}</h5>
|
||||
<small class="text-muted">{{ inspection.facility.name }}{% if inspection.area %} · {{ inspection.area.name }}{% endif %}</small>
|
||||
</div>
|
||||
<div class="text-center" style="min-width:120px;">
|
||||
<div class="progress" style="height:8px;">
|
||||
<div class="progress-bar bg-success" style="width:{{ (answered / results|length * 100)|int if results else 0 }}%"></div>
|
||||
</div>
|
||||
<span class="progress-bar-label text-muted">{{ answered }}/{{ results|length }} answered</span>
|
||||
</div>
|
||||
<a href="{{ url_for('inspections.flag_issue', inspection_id=inspection.id) }}"
|
||||
class="btn btn-sm btn-outline-danger">
|
||||
<i class="bi bi-exclamation-triangle"></i> Flag Issue
|
||||
</a>
|
||||
<button type="submit" name="action" value="save" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-floppy"></i> Save
|
||||
</button>
|
||||
<button type="submit" name="action" value="complete" class="btn btn-success"
|
||||
onclick="return confirm('Mark this inspection as complete?')">
|
||||
<i class="bi bi-check-circle"></i> Complete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% if inspection.notes %}
|
||||
<div class="alert alert-info py-2"><i class="bi bi-sticky"></i> <strong>Notes:</strong> {{ inspection.notes }}</div>
|
||||
{% endif %}
|
||||
|
||||
{% set ns = namespace(current_cat='') %}
|
||||
{% for result in results %}
|
||||
{% set item = result.checklist_item %}
|
||||
{% if item.category != ns.current_cat %}
|
||||
{% set ns.current_cat = item.category %}
|
||||
<h5 class="text-primary border-bottom pb-1 mt-4 mb-3">
|
||||
<i class="bi bi-folder2"></i> {{ item.category or 'General' }}
|
||||
</h5>
|
||||
{% endif %}
|
||||
|
||||
{% set is_answered = result.passed is not none or result.score is not none %}
|
||||
<div class="card shadow-sm mb-3 item-card {{ 'answered' if is_answered }}">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<span class="fw-semibold">{{ item.item_description }}</span>
|
||||
{% if item.requires_photo %}
|
||||
<span class="badge bg-warning text-dark ms-1"><i class="bi bi-camera"></i> Photo required</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<span class="badge bg-secondary text-uppercase" style="font-size:.65rem;">{{ item.scoring_type|replace('_',' ') }}</span>
|
||||
</div>
|
||||
|
||||
{# ── Pass/Fail ── #}
|
||||
{% if item.scoring_type == 'pass_fail' %}
|
||||
<div class="pass-fail-group d-flex gap-2 mb-2">
|
||||
<input class="btn-check" type="radio" name="item_{{ result.id }}_passed"
|
||||
id="pass_{{ result.id }}" value="pass" {{ 'checked' if result.passed == true }}>
|
||||
<label class="btn btn-outline-success btn-sm" for="pass_{{ result.id }}">
|
||||
<i class="bi bi-check-lg"></i> Pass
|
||||
</label>
|
||||
<input class="btn-check" type="radio" name="item_{{ result.id }}_passed"
|
||||
id="fail_{{ result.id }}" value="fail" {{ 'checked' if result.passed == false }}>
|
||||
<label class="btn btn-outline-danger btn-sm" for="fail_{{ result.id }}">
|
||||
<i class="bi bi-x-lg"></i> Fail
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{# ── Rating 5 ── #}
|
||||
{% elif item.scoring_type == 'rating_5' %}
|
||||
<div class="mb-2">
|
||||
<label class="form-label small">Rating (1–5)</label>
|
||||
<div class="d-flex gap-2">
|
||||
{% for v in [1,2,3,4,5] %}
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="item_{{ result.id }}_score"
|
||||
id="r5_{{ result.id }}_{{ v }}" value="{{ v }}"
|
||||
{{ 'checked' if result.score == v }}>
|
||||
<label class="form-check-label" for="r5_{{ result.id }}_{{ v }}">{{ v }}</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Rating 10 ── #}
|
||||
{% elif item.scoring_type == 'rating_10' %}
|
||||
<div class="mb-2">
|
||||
<label class="form-label small">Rating (1–10)</label>
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
{% for v in range(1,11) %}
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="radio" name="item_{{ result.id }}_score"
|
||||
id="r10_{{ result.id }}_{{ v }}" value="{{ v }}"
|
||||
{{ 'checked' if result.score == v }}>
|
||||
<label class="form-check-label" for="r10_{{ result.id }}_{{ v }}">{{ v }}</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row g-2">
|
||||
<div class="col-md-6">
|
||||
<textarea class="form-control form-control-sm" name="item_{{ result.id }}_comments"
|
||||
rows="2" placeholder="Comments (optional)">{{ result.comments or '' }}</textarea>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
{% if result.photo_path %}
|
||||
<div class="mb-1">
|
||||
<img src="{{ url_for('static', filename=result.photo_path) }}"
|
||||
class="img-thumbnail" style="max-height:80px;" alt="Photo">
|
||||
</div>
|
||||
{% endif %}
|
||||
<input type="file" class="form-control form-control-sm"
|
||||
name="item_{{ result.id }}_photo" accept="image/*">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{# Bottom submit bar #}
|
||||
<div class="d-flex justify-content-end gap-2 mt-4 pb-4">
|
||||
<button type="submit" name="action" value="save" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-floppy"></i> Save Progress
|
||||
</button>
|
||||
<button type="submit" name="action" value="complete" class="btn btn-success btn-lg"
|
||||
onclick="return confirm('Mark this inspection as complete? This cannot be undone.')">
|
||||
<i class="bi bi-check-circle-fill"></i> Complete Inspection
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
// Auto-mark item cards as answered on interaction
|
||||
document.querySelectorAll('input[type=radio]').forEach(r => {
|
||||
r.addEventListener('change', () => {
|
||||
const card = r.closest('.item-card');
|
||||
if (card) card.classList.add('answered');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,48 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Flag Issue{% endblock %}
|
||||
{% block content %}
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow-sm border-danger">
|
||||
<div class="card-header bg-danger text-white">
|
||||
<h5 class="mb-0"><i class="bi bi-exclamation-triangle"></i> Flag Issue During Inspection</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="alert alert-light border mb-3">
|
||||
<strong>Inspection:</strong> {{ inspection.template.name }}<br>
|
||||
<strong>Facility:</strong> {{ inspection.facility.name }}
|
||||
</div>
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.area_id.label(class="form-label fw-semibold") }}
|
||||
{{ form.area_id(class="form-select") }}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{{ form.severity.label(class="form-label fw-semibold") }}
|
||||
{{ form.severity(class="form-select") }}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{{ form.description.label(class="form-label fw-semibold") }}
|
||||
{{ form.description(class="form-control", rows=4, placeholder="Describe the issue in detail…") }}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{{ form.photo.label(class="form-label fw-semibold") }}
|
||||
{{ form.photo(class="form-control") }}
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
{{ form.assigned_to.label(class="form-label fw-semibold") }}
|
||||
{{ form.assigned_to(class="form-select") }}
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="submit" class="btn btn-danger"><i class="bi bi-flag"></i> Log Issue</button>
|
||||
<a href="{{ url_for('inspections.execute', inspection_id=inspection.id) }}"
|
||||
class="btn btn-outline-secondary">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,106 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Inspections{% endblock %}
|
||||
{% block content %}
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2><i class="bi bi-clipboard-data"></i> Inspections</h2>
|
||||
<a href="{{ url_for('inspections.start') }}" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle"></i> Start Inspection
|
||||
</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">Status</label>
|
||||
<select name="status" class="form-select form-select-sm">
|
||||
<option value="">All Statuses</option>
|
||||
{% for s in ['in_progress','completed','flagged'] %}
|
||||
<option value="{{ s }}" {% if status_filter == s %}selected{% endif %}>{{ s|replace('_',' ')|title }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<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 }}" {% if facility_filter == f.id|string %}selected{% endif %}>{{ f.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button type="submit" class="btn btn-sm btn-outline-primary">Filter</button>
|
||||
<a href="{{ url_for('inspections.index') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body p-0">
|
||||
{% if inspections.items %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Date</th><th>Facility</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.items %}
|
||||
<tr>
|
||||
<td>{{ ins.inspection_date.strftime('%Y-%m-%d %H:%M') }}</td>
|
||||
<td>{{ ins.facility.name }}</td>
|
||||
<td>{% if ins.area %}{{ ins.area.name }}{% else %}<span class="text-muted">—</span>{% endif %}</td>
|
||||
<td>{{ ins.template.name }}</td>
|
||||
<td>{{ ins.inspector.username }}</td>
|
||||
<td>
|
||||
{% if ins.overall_score %}
|
||||
<span class="badge bg-{{ 'success' if ins.overall_score >= 90 else 'warning' if ins.overall_score >= 70 else 'danger' }}">
|
||||
{{ ins.overall_score }}%
|
||||
</span>
|
||||
{% else %}<span class="text-muted">—</span>{% 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>
|
||||
{% if ins.status == 'in_progress' or ins.status == 'flagged' %}
|
||||
<a href="{{ url_for('inspections.execute', inspection_id=ins.id) }}" class="btn btn-sm btn-outline-primary">Continue</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('inspections.view', inspection_id=ins.id) }}" class="btn btn-sm btn-outline-secondary">View</a>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{# Pagination #}
|
||||
{% if inspections.pages > 1 %}
|
||||
<div class="d-flex justify-content-center py-3">
|
||||
<nav><ul class="pagination pagination-sm mb-0">
|
||||
{% for p in inspections.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
|
||||
{% if p %}
|
||||
<li class="page-item {{ 'active' if p == inspections.page }}">
|
||||
<a class="page-link" href="{{ url_for('inspections.index', page=p, status=status_filter, facility_id=facility_filter) }}">{{ p }}</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="page-item disabled"><span class="page-link">…</span></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul></nav>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="alert alert-info m-3"><i class="bi bi-info-circle"></i> No inspections found.</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,71 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Start Inspection{% endblock %}
|
||||
{% block content %}
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h5 class="mb-0"><i class="bi bi-play-circle"></i> Start New Inspection</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="post">
|
||||
{{ form.hidden_tag() }}
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.template_id.label(class="form-label fw-semibold") }}
|
||||
{{ form.template_id(class="form-select" + (" is-invalid" if form.template_id.errors else "")) }}
|
||||
{% for e in form.template_id.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.facility_id.label(class="form-label fw-semibold") }}
|
||||
{{ form.facility_id(class="form-select", id="facilitySelect") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.area_id.label(class="form-label fw-semibold") }}
|
||||
<select name="area_id" id="areaSelect" class="form-select">
|
||||
<option value="0">— No specific area —</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.notes.label(class="form-label fw-semibold") }}
|
||||
{{ form.notes(class="form-control", rows=3, placeholder="Optional notes for this inspection…") }}
|
||||
</div>
|
||||
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-primary btn-lg">
|
||||
<i class="bi bi-play-fill"></i> Begin Inspection
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
const AREAS_URL = "{{ url_for('inspections.areas_for_facility', facility_id=0) }}".replace('/0', '/');
|
||||
const facilitySelect = document.getElementById('facilitySelect');
|
||||
const areaSelect = document.getElementById('areaSelect');
|
||||
|
||||
function loadAreas(facilityId) {
|
||||
fetch(AREAS_URL + facilityId)
|
||||
.then(r => r.json())
|
||||
.then(areas => {
|
||||
areaSelect.innerHTML = '<option value="0">— No specific area —</option>';
|
||||
areas.forEach(a => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = a.id; opt.textContent = a.name;
|
||||
areaSelect.appendChild(opt);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
facilitySelect.addEventListener('change', () => loadAreas(facilitySelect.value));
|
||||
if (facilitySelect.value) loadAreas(facilitySelect.value);
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,141 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Inspection #{{ inspection.id }}{% endblock %}
|
||||
{% block content %}
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h2>Inspection Report</h2>
|
||||
<p class="text-muted mb-0">{{ inspection.template.name }} · {{ inspection.inspection_date.strftime('%B %d, %Y %H:%M') }}</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
{% if current_user.role in ['admin','supervisor'] %}
|
||||
<form method="post" action="{{ url_for('inspections.delete', inspection_id=inspection.id) }}"
|
||||
onsubmit="return confirm('Delete this inspection?')">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash3"></i> Delete</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
<a href="{{ url_for('inspections.index') }}" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left"></i> Back
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Summary cards #}
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-3">
|
||||
<div class="card text-center shadow-sm h-100">
|
||||
<div class="card-body">
|
||||
<p class="text-muted small mb-1">Overall Score</p>
|
||||
{% if inspection.overall_score %}
|
||||
<h2 class="fw-bold text-{{ 'success' if inspection.overall_score >= 90 else 'warning' if inspection.overall_score >= 70 else 'danger' }}">
|
||||
{{ inspection.overall_score }}%
|
||||
</h2>
|
||||
{% else %}<h2 class="text-muted">—</h2>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card text-center shadow-sm h-100">
|
||||
<div class="card-body">
|
||||
<p class="text-muted small mb-1">Status</p>
|
||||
<span class="badge fs-6 bg-{{ 'success' if inspection.status == 'completed' else 'danger' if inspection.status == 'flagged' else 'secondary' }}">
|
||||
{{ inspection.status|replace('_',' ')|title }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card text-center shadow-sm h-100">
|
||||
<div class="card-body">
|
||||
<p class="text-muted small mb-1">Facility / Area</p>
|
||||
<p class="fw-semibold mb-0">{{ inspection.facility.name }}</p>
|
||||
<small class="text-muted">{{ inspection.area.name if inspection.area else '—' }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card text-center shadow-sm h-100">
|
||||
<div class="card-body">
|
||||
<p class="text-muted small mb-1">Inspector</p>
|
||||
<p class="fw-semibold mb-0">{{ inspection.inspector.username }}</p>
|
||||
{% if inspection.completed_at %}
|
||||
<small class="text-muted">Completed {{ inspection.completed_at.strftime('%Y-%m-%d %H:%M') }}</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if inspection.notes %}
|
||||
<div class="alert alert-light border mb-4"><strong>Notes:</strong> {{ inspection.notes }}</div>
|
||||
{% endif %}
|
||||
|
||||
{# Checklist results by category #}
|
||||
{% for category, results in categories.items() %}
|
||||
<div class="card shadow-sm mb-3">
|
||||
<div class="card-header bg-light">
|
||||
<h6 class="mb-0"><i class="bi bi-folder2"></i> {{ category }}</h6>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr><th>Item</th><th>Type</th><th>Result</th><th>Comments</th><th>Photo</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for r in results %}
|
||||
<tr>
|
||||
<td>{{ r.checklist_item.item_description }}</td>
|
||||
<td><span class="badge bg-secondary" style="font-size:.65rem;">{{ r.checklist_item.scoring_type|replace('_',' ') }}</span></td>
|
||||
<td>
|
||||
{% if r.checklist_item.scoring_type == 'pass_fail' %}
|
||||
{% if r.passed is none %}<span class="text-muted">—</span>
|
||||
{% elif r.passed %}<span class="badge bg-success">Pass</span>
|
||||
{% else %}<span class="badge bg-danger">Fail</span>{% endif %}
|
||||
{% else %}
|
||||
{% if r.score is not none %}<strong>{{ r.score }}</strong>
|
||||
{% else %}<span class="text-muted">—</span>{% endif %}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td><small class="text-muted">{{ r.comments or '—' }}</small></td>
|
||||
<td>
|
||||
{% if r.photo_path %}
|
||||
<a href="{{ url_for('static', filename=r.photo_path) }}" target="_blank">
|
||||
<img src="{{ url_for('static', filename=r.photo_path) }}" style="max-height:40px;" class="img-thumbnail">
|
||||
</a>
|
||||
{% else %}—{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{# Issues #}
|
||||
{% if issues %}
|
||||
<div class="card shadow-sm mt-4">
|
||||
<div class="card-header bg-danger text-white">
|
||||
<h6 class="mb-0"><i class="bi bi-exclamation-triangle"></i> Issues Logged ({{ issues|length }})</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>Status</th><th></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for issue in 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[:80] }}{% if issue.description|length > 80 %}…{% endif %}</td>
|
||||
<td><span class="badge bg-{{ 'success' if issue.status == 'resolved' else 'warning text-dark' if issue.status == 'in_progress' else 'secondary' }}">{{ issue.status|replace('_',' ')|title }}</span></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 %}
|
||||
@@ -0,0 +1,29 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
{% block content %}
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-danger text-white">
|
||||
<h5 class="mb-0"><i class="bi bi-exclamation-triangle"></i> {{ title }}</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
{% for field in [form.area_id, form.severity, form.description, form.photo, form.assigned_to] %}
|
||||
<div class="mb-3">
|
||||
{{ field.label(class="form-label fw-semibold") }}
|
||||
{{ field(class="form-select" if field.type == 'SelectField' else "form-control", rows=4 if field.type == 'TextAreaField' else none) }}
|
||||
{% for e in field.errors %}<div class="text-danger small">{{ e }}</div>{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="d-flex gap-2">
|
||||
<button type="submit" class="btn btn-danger">Log Issue</button>
|
||||
<a href="{{ url_for('issues.index') }}" class="btn btn-outline-secondary">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,98 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Issues{% endblock %}
|
||||
{% block content %}
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2><i class="bi bi-exclamation-triangle"></i> Issues</h2>
|
||||
{% if current_user.role in ['admin','supervisor'] %}
|
||||
<a href="{{ url_for('issues.create') }}" class="btn btn-danger">
|
||||
<i class="bi bi-plus-circle"></i> Log Issue
|
||||
</a>
|
||||
{% endif %}
|
||||
</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">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-3">
|
||||
<label class="form-label small mb-1">Status</label>
|
||||
<select name="status" class="form-select form-select-sm">
|
||||
<option value="">All</option>
|
||||
{% for s in ['open','in_progress','resolved'] %}
|
||||
<option value="{{ s }}" {{ 'selected' if status_filter == s }}>{{ s|replace('_',' ')|title }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button type="submit" class="btn btn-sm btn-outline-primary">Filter</button>
|
||||
<a href="{{ url_for('issues.index') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-body p-0">
|
||||
{% if issues.items %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr><th>Reported</th><th>Severity</th><th>Facility / Area</th>
|
||||
<th>Description</th><th>Status</th><th>Assigned</th><th></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for issue in issues.items %}
|
||||
<tr>
|
||||
<td><small>{{ issue.reported_at.strftime('%Y-%m-%d %H:%M') }}</small></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>
|
||||
{{ issue.area.facility.name }}<br>
|
||||
<small class="text-muted">{{ issue.area.name }}</small>
|
||||
</td>
|
||||
<td>{{ issue.description[:60] }}{% if issue.description|length > 60 %}…{% endif %}</td>
|
||||
<td>
|
||||
<span class="badge bg-{{ 'success' if issue.status == 'resolved' else 'warning text-dark' if issue.status == 'in_progress' else 'danger' }}">
|
||||
{{ issue.status|replace('_',' ')|title }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{% if issue.assigned_user %}{{ issue.assigned_user.username }}
|
||||
{% else %}<span class="text-muted">—</span>{% 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>
|
||||
{% if issues.pages > 1 %}
|
||||
<div class="d-flex justify-content-center py-3">
|
||||
<nav><ul class="pagination pagination-sm mb-0">
|
||||
{% for p in issues.iter_pages(left_edge=1,right_edge=1,left_current=2,right_current=2) %}
|
||||
{% if p %}
|
||||
<li class="page-item {{ 'active' if p == issues.page }}">
|
||||
<a class="page-link" href="{{ url_for('issues.index', page=p, severity=severity_filter, status=status_filter) }}">{{ p }}</a>
|
||||
</li>
|
||||
{% else %}<li class="page-item disabled"><span class="page-link">…</span></li>{% endif %}
|
||||
{% endfor %}
|
||||
</ul></nav>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="alert alert-info m-3"><i class="bi bi-info-circle"></i> No issues found.</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,85 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Issue #{{ issue.id }}{% endblock %}
|
||||
{% block content %}
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header d-flex justify-content-between align-items-center
|
||||
bg-{{ 'danger' if issue.severity in ['critical','high'] else 'warning' if issue.severity == 'medium' else 'secondary' }}
|
||||
text-{{ 'white' if issue.severity in ['critical','high','low'] else 'dark' }}">
|
||||
<h5 class="mb-0"><i class="bi bi-exclamation-triangle"></i> Issue #{{ issue.id }} — {{ issue.severity|title }} Severity</h5>
|
||||
<span class="badge bg-light text-dark">{{ issue.status|replace('_',' ')|title }}</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<dl class="row mb-0">
|
||||
<dt class="col-sm-3">Reported</dt>
|
||||
<dd class="col-sm-9">{{ issue.reported_at.strftime('%Y-%m-%d %H:%M') }}</dd>
|
||||
|
||||
<dt class="col-sm-3">Facility</dt>
|
||||
<dd class="col-sm-9">{{ issue.area.facility.name }}</dd>
|
||||
|
||||
<dt class="col-sm-3">Area</dt>
|
||||
<dd class="col-sm-9">{{ issue.area.name }}</dd>
|
||||
|
||||
{% if issue.inspection %}
|
||||
<dt class="col-sm-3">Inspection</dt>
|
||||
<dd class="col-sm-9">
|
||||
<a href="{{ url_for('inspections.view', inspection_id=issue.inspection_id) }}">#{{ issue.inspection_id }}</a>
|
||||
</dd>
|
||||
{% endif %}
|
||||
|
||||
<dt class="col-sm-3">Assigned To</dt>
|
||||
<dd class="col-sm-9">{{ issue.assigned_user.username if issue.assigned_user else '— Unassigned —' }}</dd>
|
||||
|
||||
{% if issue.resolved_at %}
|
||||
<dt class="col-sm-3">Resolved</dt>
|
||||
<dd class="col-sm-9">{{ issue.resolved_at.strftime('%Y-%m-%d %H:%M') }}</dd>
|
||||
{% endif %}
|
||||
</dl>
|
||||
|
||||
<hr>
|
||||
<h6>Description</h6>
|
||||
<p class="mb-0" style="white-space:pre-wrap;">{{ issue.description }}</p>
|
||||
|
||||
{% if issue.photo_path %}
|
||||
<hr>
|
||||
<h6>Photo Evidence</h6>
|
||||
<a href="{{ url_for('static', filename=issue.photo_path) }}" target="_blank">
|
||||
<img src="{{ url_for('static', filename=issue.photo_path) }}" class="img-fluid rounded" style="max-height:300px;">
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
{% if current_user.role in ['admin','supervisor'] %}
|
||||
<div class="card shadow-sm">
|
||||
<div class="card-header bg-light"><h6 class="mb-0">Update Issue</h6></div>
|
||||
<div class="card-body">
|
||||
<form method="post">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<div class="mb-3">
|
||||
{{ form.status.label(class="form-label fw-semibold") }}
|
||||
{{ form.status(class="form-select") }}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{{ form.assigned_to.label(class="form-label fw-semibold") }}
|
||||
{{ form.assigned_to(class="form-select") }}
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
{{ form.comments.label(class="form-label fw-semibold") }}
|
||||
{{ form.comments(class="form-control", rows=3, placeholder="Optional update notes…") }}
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100">Save Update</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="{{ url_for('issues.index') }}" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="bi bi-arrow-left"></i> Back to Issues
|
||||
</a>
|
||||
{% endblock %}
|
||||
@@ -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.username }}</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,242 @@
|
||||
{% 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 %}
|
||||
|
||||
{# ── 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>
|
||||
<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'),
|
||||
('Flagged', 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>
|
||||
|
||||
{# ── 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.username }}</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 ──────────────────────────────────────────────────────────────
|
||||
const trendData = {{ daily_scores | map(attribute=0) | list | tojson }}; {# dates #}
|
||||
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 %}
|
||||
Reference in New Issue
Block a user