From 38e4ce25625c7674e5f4752c18b67b1dc0675038 Mon Sep 17 00:00:00 2001
From: mrtoine <anthony.violet@outlook.be>
Date: Tue, 16 Dec 2025 15:16:18 +0100
Subject: [PATCH] Ajout des partials `_stats_head.html` et
 `_stats_toolbar.html` pour harmoniser les styles et outils des pages de
 statistiques.

---
 templates/partials/_stats_head.html    | 65 ++++++++++++++++++++++++++
 templates/partials/_stats_toolbar.html | 15 ++++++
 2 files changed, 80 insertions(+)
 create mode 100644 templates/partials/_stats_head.html
 create mode 100644 templates/partials/_stats_toolbar.html

diff --git a/templates/partials/_stats_head.html b/templates/partials/_stats_head.html
new file mode 100644
index 0000000..1eba9b1
--- /dev/null
+++ b/templates/partials/_stats_head.html
@@ -0,0 +1,65 @@
+{# Partials: Shared head for stats pages (Chart.js + unified styles) #}
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+<style>
+  /* Utilities */
+  .text-muted{color:var(--text-muted)}
+
+  /* Cards and basic blocks */
+  .card{
+    background:var(--surface);
+    border-radius:var(--r-3);
+    padding:var(--space-4);
+    border:1px solid var(--border-subtle);
+    box-shadow:var(--shadow-1);
+    transition:transform var(--transition-1), box-shadow var(--transition-1);
+  }
+  .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
+  .card h3{margin:0 0 8px 0;font-size:16px;color:var(--text-muted);letter-spacing:.2px}
+  .kpi{font-size:clamp(22px,4vw,32px);font-weight:700;line-height:1.2}
+  .toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:8px 0;padding:4px 0}
+  .toolbar label{color:var(--text-muted)}
+  .toolbar select{background:var(--surface);color:var(--text);border:1px solid var(--border-subtle);border-radius:var(--r-2);padding:6px 10px}
+
+  /* Grids used across stats pages */
+  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin:16px 0}
+  .charts{display:grid;grid-template-columns:1fr;gap:24px;margin:24px 0}
+  .tables{display:grid;grid-template-columns:1fr 1fr;gap:24px}
+  .grid{display:grid;grid-template-columns:1fr;gap:24px;margin:16px 0}
+  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
+
+  @media (max-width: 1280px){
+    .stats-grid{grid-template-columns:repeat(3,1fr)}
+  }
+  /* Responsive */
+  @media (max-width: 960px){
+    .stats-grid{grid-template-columns:repeat(2,1fr)}
+    .tables{grid-template-columns:1fr}
+    .grid-2{grid-template-columns:1fr}
+  }
+  @media (max-width: 560px){
+    .toolbar{flex-direction:column;align-items:flex-start;gap:8px}
+  }
+
+  /* Tables */
+  table{width:100%;border-collapse:collapse}
+  thead th{font-weight:600;text-align:left;border-bottom:1px solid var(--border-subtle);padding:8px 6px;color:var(--text-muted)}
+  tbody td{border-bottom:1px solid var(--border-subtle);padding:8px 6px}
+  tbody tr:nth-child(even){background:rgba(255,255,255,0.02)}
+  tbody tr:hover{background:rgba(255,255,255,0.04)}
+</style>
+
+<script>
+  // Harmonize Chart.js defaults with theme tokens
+  if (window.Chart) {
+    try {
+      const cs = getComputedStyle(document.documentElement);
+      const text = cs.getPropertyValue('--text') || '#c4d7e0';
+      const font = cs.getPropertyValue('--font-sans') || 'system-ui, sans-serif';
+      Chart.defaults.color = String(text).trim();
+      Chart.defaults.font.family = String(font).trim();
+      Chart.defaults.plugins.legend.labels.boxWidth = 12;
+    } catch (e) {
+      // no-op
+    }
+  }
+</script>
diff --git a/templates/partials/_stats_toolbar.html b/templates/partials/_stats_toolbar.html
new file mode 100644
index 0000000..6241f0a
--- /dev/null
+++ b/templates/partials/_stats_toolbar.html
@@ -0,0 +1,15 @@
+{# Partials: Shared period toolbar for stats pages #}
+<form method="get" class="toolbar">
+  <div>
+    <label for="p">Période:&nbsp;</label>
+    <select id="p" name="p" onchange="this.form.submit()">
+      {% for opt in period_options %}
+        <option value="{{ opt }}" {% if p == opt %}selected{% endif %}>{{ opt }} jours</option>
+      {% endfor %}
+    </select>
+    <span style="margin-left:8px" class="text-muted">Du {{ start_date }} au {{ end_date }}</span>
+  </div>
+  <div class="text-muted">Mise en cache 15 minutes</div>
+  {% block stats_toolbar_extra %}{% endblock %}
+  {# Keep block for optional extensions on specific pages #}
+</form>