feat: adds Sync statistics.

templates/sync_stats.html

@@ -0,0 +1,110 @@
+{% extends 'base.html' %}
+{% block content %}
+<div class="p-6">
+  <div class="mb-6">
+    <h1 class="text-2xl font-semibold text-slate-800">Sync Statistics</h1>
+    <p class="text-sm text-slate-500 mt-1">Last 14 days of sync activity</p>
+  </div>
+
+  <div class="bg-white rounded-lg shadow p-6">
+    <div class="h-80">
+      <canvas id="syncChart"></canvas>
+    </div>
+    <div class="flex justify-center gap-6 mt-4">
+      <div class="flex items-center gap-2">
+        <span class="w-4 h-4 rounded bg-emerald-500"></span>
+        <span class="text-sm text-slate-600">Recent Updates</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="w-4 h-4 rounded bg-sky-500"></span>
+        <span class="text-sm text-slate-600">Oldest Updates</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="w-4 h-4 rounded bg-rose-500"></span>
+        <span class="text-sm text-slate-600">Failures</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="mt-6 bg-white rounded-lg shadow overflow-hidden">
+    <table class="w-full text-sm">
+      <thead class="bg-slate-50 text-slate-600">
+        <tr>
+          <th class="px-4 py-3 text-left font-medium">Date</th>
+          <th class="px-4 py-3 text-right font-medium">Recent Updates</th>
+          <th class="px-4 py-3 text-right font-medium">Oldest Updates</th>
+          <th class="px-4 py-3 text-right font-medium">Failures</th>
+          <th class="px-4 py-3 text-right font-medium">Total</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-slate-100">
+        {% for stat in stats %}
+        <tr class="hover:bg-slate-50">
+          <td class="px-4 py-3 text-slate-800">{{ stat.date }}</td>
+          <td class="px-4 py-3 text-right text-emerald-600">{{ stat.recent_successes }}</td>
+          <td class="px-4 py-3 text-right text-sky-600">{{ stat.oldest_successes }}</td>
+          <td class="px-4 py-3 text-right text-rose-600">{{ stat.failures }}</td>
+          <td class="px-4 py-3 text-right font-medium text-slate-800">
+            {{ stat.recent_successes + stat.oldest_successes + stat.failures }}
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script>
+  const ctx = document.getElementById('syncChart').getContext('2d');
+  const labels = {{ stats | map(attribute='date') | list | tojson }};
+  const recentSuccesses = {{ stats | map(attribute='recent_successes') | list | tojson }};
+  const oldestSuccesses = {{ stats | map(attribute='oldest_successes') | list | tojson }};
+  const failures = {{ stats | map(attribute='failures') | list | tojson }};
+
+  new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: labels,
+      datasets: [
+        {
+          label: 'Recent Updates',
+          data: recentSuccesses,
+          backgroundColor: '#10b981',
+          stack: 'stack0'
+        },
+        {
+          label: 'Oldest Updates',
+          data: oldestSuccesses,
+          backgroundColor: '#0ea5e9',
+          stack: 'stack0'
+        },
+        {
+          label: 'Failures',
+          data: failures,
+          backgroundColor: '#f43f5e',
+          stack: 'stack0'
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: { display: false }
+      },
+      scales: {
+        x: {
+          stacked: true,
+          grid: { display: false }
+        },
+        y: {
+          stacked: true,
+          beginAtZero: true,
+          ticks: { stepSize: 1 }
+        }
+      }
+    }
+  });
+</script>
+{% endblock %}