04/30 Web Checker web app ver. 1.0

templates/admin/dashboard.html

@@ -0,0 +1,68 @@
+{% 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>
+
+<!-- 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 %}