91 lines
2.8 KiB
HTML
91 lines
2.8 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Dashboard — Website Checker{% endblock %}
|
|
{% block content %}
|
|
<div class="page-header">
|
|
<h1 class="page-title">Dashboard</h1>
|
|
<span class="text-muted" id="today-date"></span>
|
|
</div>
|
|
|
|
<!-- KPI Cards -->
|
|
<div class="kpi-grid">
|
|
<div class="kpi-card">
|
|
<div class="kpi-value">{{ stats.total_users }}</div>
|
|
<div class="kpi-label">Total Users</div>
|
|
</div>
|
|
<div class="kpi-card kpi-accent">
|
|
<div class="kpi-value">{{ stats.active_today }}</div>
|
|
<div class="kpi-label">Active Today</div>
|
|
</div>
|
|
<div class="kpi-card">
|
|
<div class="kpi-value">{{ stats.total_sites }}</div>
|
|
<div class="kpi-label">Total Sites</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Missed shifts alert -->
|
|
{% if missed %}
|
|
<div class="card mt-3" style="border-color:var(--warning-border)">
|
|
<div class="card-header" style="background:var(--warning-bg)">
|
|
<span class="card-title" style="color:var(--warning)">⚠ Missed Shifts Today</span>
|
|
<span class="text-muted text-sm">Users with 0 sites checked so far</span>
|
|
</div>
|
|
<table class="table table-sm">
|
|
<thead><tr><th>Shift</th><th>User</th><th>Sites Checked</th></tr></thead>
|
|
<tbody>
|
|
{% for m in missed %}
|
|
<tr>
|
|
<td>{{ m.shift_name }}</td>
|
|
<td>{{ m.full_name }}</td>
|
|
<td class="text-muted">{{ m.checked_sites }} / {{ m.total_sites }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Per-user completion table -->
|
|
<div class="card mt-4">
|
|
<div class="card-header">
|
|
<h2 class="card-title">Today's Completion</h2>
|
|
<button class="btn btn-ghost btn-sm" onclick="location.reload()">↻ Refresh</button>
|
|
</div>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>User</th>
|
|
<th>Checked</th>
|
|
<th>Total</th>
|
|
<th style="width:200px">Progress</th>
|
|
<th>%</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for u in stats.user_stats %}
|
|
<tr>
|
|
<td>{{ u.full_name }}</td>
|
|
<td>{{ u.checked_count }}</td>
|
|
<td>{{ u.total_sites }}</td>
|
|
<td>
|
|
<div class="progress">
|
|
<div class="progress-bar {% if (u.pct_complete or 0) == 100 %}progress-success{% elif (u.pct_complete or 0) >= 50 %}progress-warn{% else %}progress-danger{% endif %}"
|
|
style="width: {{ u.pct_complete or 0 }}%"></div>
|
|
</div>
|
|
</td>
|
|
<td><strong>{{ u.pct_complete or 0 }}%</strong></td>
|
|
</tr>
|
|
{% else %}
|
|
<tr><td colspan="5" class="text-center text-muted">No user data for today.</td></tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('today-date').textContent =
|
|
new Date().toLocaleDateString('en-US', {weekday:'long', year:'numeric', month:'long', day:'numeric'});
|
|
// Auto-refresh every 60 seconds
|
|
setTimeout(() => location.reload(), 60000);
|
|
</script>
|
|
{% endblock %}
|