Jul 10 - Update QR public page
This commit is contained in:
@@ -8,11 +8,18 @@
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
|
||||
<style>
|
||||
body { background:#f6f8fa; }
|
||||
body { background:#eef1f5; }
|
||||
.wrap { max-width: 640px; margin: 0 auto; padding: 16px; }
|
||||
.hpot { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
|
||||
.rating-num { font-size: 2.4rem; font-weight: 700; line-height: 1; }
|
||||
.stat { background:#fff; border-radius:.75rem; }
|
||||
.card-soft { background:#fff; border:1px solid #e6e9ef; border-radius:.85rem; }
|
||||
.kpi-num { font-size: 1.9rem; font-weight: 700; line-height: 1; }
|
||||
.kpi-label { font-size: .68rem; letter-spacing:.05em; color:#8a93a2; text-transform:uppercase; }
|
||||
.kpi-sub { font-size: .62rem; letter-spacing:.05em; color:#aab1bd; text-transform:uppercase; }
|
||||
.fac-icon { width:40px; height:40px; border-radius:.6rem; background:#e7efff; color:#2563eb;
|
||||
display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex:none; }
|
||||
.sec-title { font-weight:700; font-size:1.02rem; }
|
||||
.list-line { border-top:1px solid #eef0f4; }
|
||||
.list-line:first-child { border-top:0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -27,49 +34,91 @@
|
||||
{% endwith %}
|
||||
|
||||
{# ── Header ── #}
|
||||
<div class="text-center mt-2 mb-3">
|
||||
<div class="text-muted small text-uppercase" style="letter-spacing:.08em;">Facility Status</div>
|
||||
<h1 class="h3 fw-bold mb-0">{{ facility.name }}</h1>
|
||||
{% if facility.address %}
|
||||
<div class="text-muted small mt-1"><i class="bi bi-geo-alt"></i> {{ facility.address }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# ── Quality rating ── #}
|
||||
<div class="stat shadow-sm p-4 mb-3 text-center">
|
||||
<div class="text-muted small text-uppercase mb-2">Cleaning Quality</div>
|
||||
<span class="badge bg-{{ rating_colour }} fs-6 mb-2">{{ rating_label }}</span>
|
||||
<div class="rating-num text-{{ rating_colour }}">
|
||||
{{ ('%.0f' % avg_score) ~ '%' if avg_score is not none else '—' }}
|
||||
<div class="d-flex align-items-start gap-3 mb-3 mt-1">
|
||||
<div class="fac-icon"><i class="bi bi-building"></i></div>
|
||||
<div>
|
||||
<h1 class="h4 fw-bold mb-1">{{ facility.name }}</h1>
|
||||
<div class="text-muted small">
|
||||
{% if facility.project %}{{ facility.project.name }}{% endif %}
|
||||
{% if facility.project and facility.address %} · {% endif %}
|
||||
{% if facility.address %}{{ facility.address }}{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-muted small mt-1">Average score, last 90 days</div>
|
||||
</div>
|
||||
|
||||
{# ── Facts ── #}
|
||||
{# ── KPI row ── #}
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-6">
|
||||
<div class="stat shadow-sm p-3 h-100">
|
||||
<div class="text-muted small"><i class="bi bi-calendar-check"></i> Last Inspected</div>
|
||||
<div class="fw-semibold">
|
||||
{{ last_inspected.strftime('%b %d, %Y') if last_inspected else 'Not yet' }}
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card-soft p-3 text-center h-100">
|
||||
<div class="kpi-num text-{{ rating_colour }}">
|
||||
{{ ('%.1f' % avg_score) ~ '%' if avg_score is not none else '—' }}
|
||||
</div>
|
||||
{% if last_score is not none %}
|
||||
<div class="text-muted small">Scored {{ '%.0f' % last_score }}%</div>
|
||||
{% endif %}
|
||||
<div class="kpi-label mt-2">Avg Score</div>
|
||||
<div class="kpi-sub">90 Days</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="stat shadow-sm p-3 h-100">
|
||||
<div class="text-muted small"><i class="bi bi-exclamation-triangle"></i> Open Issues</div>
|
||||
<div class="fw-semibold fs-4">{{ open_issue_count }}</div>
|
||||
<div class="text-muted small">Currently being tracked</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card-soft p-3 text-center h-100">
|
||||
<div class="kpi-num">{{ inspections_90 }}</div>
|
||||
<div class="kpi-label mt-2">Inspections</div>
|
||||
<div class="kpi-sub">90 Days</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card-soft p-3 text-center h-100">
|
||||
<div class="kpi-num">{{ open_issue_count }}</div>
|
||||
<div class="kpi-label mt-2">Open</div>
|
||||
<div class="kpi-sub">Issues</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card-soft p-3 text-center h-100">
|
||||
<div class="kpi-num">{{ resolved_90 }}</div>
|
||||
<div class="kpi-label mt-2">Resolved</div>
|
||||
<div class="kpi-sub">90 Days</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Score trend (aggregate only) ── #}
|
||||
<div class="card-soft p-3 mb-3 d-flex align-items-center justify-content-between">
|
||||
<div class="kpi-label">Score Trend — 30 Days vs Prior 30</div>
|
||||
<div>
|
||||
{% if trend_delta is none %}
|
||||
<span class="text-muted small">Not enough data yet</span>
|
||||
{% elif trend_delta > 0 %}
|
||||
<span class="text-success fw-semibold"><i class="bi bi-arrow-up-right"></i> +{{ '%.1f' % trend_delta }} pts</span>
|
||||
{% elif trend_delta < 0 %}
|
||||
<span class="text-danger fw-semibold"><i class="bi bi-arrow-down-right"></i> {{ '%.1f' % trend_delta }} pts</span>
|
||||
{% else %}
|
||||
<span class="text-muted fw-semibold"><i class="bi bi-dash"></i> No change</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# ── Cleaning quality rating ── #}
|
||||
<div class="card-soft p-3 mb-3 d-flex align-items-center justify-content-between">
|
||||
<div class="sec-title"><i class="bi bi-stars me-1 text-{{ rating_colour }}"></i> Cleaning Quality</div>
|
||||
<span class="badge bg-{{ rating_colour }} fs-6">{{ rating_label }}</span>
|
||||
</div>
|
||||
|
||||
{# ── Recent inspections (DATES ONLY — occupant-safe) ── #}
|
||||
{% if recent_dates %}
|
||||
<div class="card-soft p-3 mb-3">
|
||||
<div class="sec-title mb-2"><i class="bi bi-clipboard-check me-1"></i> Recent Inspections</div>
|
||||
{% for d in recent_dates %}
|
||||
<div class="list-line py-2 d-flex align-items-center justify-content-between">
|
||||
<span>{{ d.strftime('%b %d, %Y') }}</span>
|
||||
<span class="text-success small"><i class="bi bi-check-circle-fill"></i> Completed</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="text-muted small mt-2">This facility is inspected regularly by our quality team.</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# ── Report a problem ── #}
|
||||
<div class="stat shadow-sm p-4 mb-4">
|
||||
<h2 class="h5 fw-bold"><i class="bi bi-megaphone"></i> Report a Problem</h2>
|
||||
<div class="card-soft p-4 mb-4">
|
||||
<h2 class="sec-title"><i class="bi bi-megaphone me-1"></i> Report a Problem</h2>
|
||||
<p class="text-muted small">
|
||||
Notice something that needs attention? Let the cleaning team know.
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user