app/templates/reports.html

@@ -78,4 +78,72 @@
   {% endif %}
 </div>
 
+<!-- Détail mensuel -->
+<p class="font-display text-lg font-semibold mt-8 mb-3" style="color:var(--ink);">Détail mensuel</p>
+
+{% for month_num in range(1, 13) %}
+{% set m = monthly_data[month_num] %}
+<div class="card card-ink mb-4">
+  <div class="flex items-baseline justify-between mb-2">
+    <p class="card-label">{{ m.month_name }}</p>
+    <span class="text-xs" style="color:#9A9288;">{{ m.entry_count }} j</span>
+  </div>
+
+  {% if m.entry_count == 0 %}
+    <p class="text-sm" style="color:#9A9288;">Aucune entrée</p>
+  {% else %}
+    {# --- Barre transport --- #}
+    {% if m.km_total > 0 %}
+      <p class="font-data font-semibold mb-1" style="font-size:1.2rem; color:var(--ink);">
+        {{ m.km_total }}<span class="font-normal text-xs ml-1" style="color:#9A9288;">km</span>
+      </p>
+      <div class="flex rounded overflow-hidden mb-1" style="height:10px; background:#e5e2dc;">
+        {% for vehicle_id, km in m.km_by_vehicle.items() %}
+          {% set v_info = vehicles.get(vehicle_id, {}) %}
+          {% if v_info.get('type') == 'velo' %}
+            {% set color = '#4ade80' %}
+          {% elif v_info.get('fuel') == 'electric' %}
+            {% set color = '#818cf8' %}
+          {% else %}
+            {% set color = '#d4a574' %}
+          {% endif %}
+          {% set pct = (km / m.km_total * 100) | round(1) %}
+          <div style="width:{{ pct }}%; background-color:{{ color }};"></div>
+        {% endfor %}
+      </div>
+      <div class="flex flex-wrap gap-x-3 mb-3">
+        {% for vehicle_id, km in m.km_by_vehicle.items() %}
+          {% set v_info = vehicles.get(vehicle_id, {}) %}
+          {% if v_info.get('type') == 'velo' %}
+            {% set color = '#4ade80' %}
+          {% elif v_info.get('fuel') == 'electric' %}
+            {% set color = '#818cf8' %}
+          {% else %}
+            {% set color = '#d4a574' %}
+          {% endif %}
+          <span class="text-xs" style="color:#8A8278;">
+            <span style="display:inline-block; width:8px; height:8px; border-radius:2px; background:{{ color }}; margin-right:3px;"></span>
+            {{ vehicles.get(vehicle_id, {}).get('name', vehicle_id) }} ({{ km }} km)
+          </span>
+        {% endfor %}
+      </div>
+    {% else %}
+      <p class="text-xs mb-3" style="color:#9A9288;">Aucun déplacement</p>
+    {% endif %}
+
+    {# --- Stats temporelles --- #}
+    <div class="flex gap-6">
+      <div>
+        <p class="text-xs mb-0.5" style="color:#9A9288;">Médiane / jour</p>
+        <p class="font-data font-semibold" style="color:var(--ink);">{{ m.median_daily_str }}</p>
+      </div>
+      <div>
+        <p class="text-xs mb-0.5" style="color:#9A9288;">Médiane / semaine</p>
+        <p class="font-data font-semibold" style="color:var(--ink);">{{ m.median_weekly_str }}</p>
+      </div>
+    </div>
+  {% endif %}
+</div>
+{% endfor %}
+
 {% endblock %}

tests/test_routes.py

@@ -91,3 +91,11 @@ def test_create_entry_velo_no_motor_vehicle(client, app):
         )
         assert entry is not None
         assert entry.motor_vehicle_id is None
+
+
+def test_reports_monthly_section(client):
+    response = client.get("/reports/")
+    assert response.status_code == 200
+    assert "Détail mensuel" in response.text
+    assert "Janvier" in response.text
+    assert "Décembre" in response.text