From ac198ffe6e7497408a0079f0e275a1b9a4822036 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christopher=20M=C3=BChl?= <toki@toph.so>
Date: Wed, 8 Apr 2026 13:28:11 +0200
Subject: [PATCH] feat: wire heatmap JS/CSS into dashboard widget template

---
 Resources/views/widget/heatmap.html.twig | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/Resources/views/widget/heatmap.html.twig b/Resources/views/widget/heatmap.html.twig
index af546a5..65c11a9 100644
--- a/Resources/views/widget/heatmap.html.twig
+++ b/Resources/views/widget/heatmap.html.twig
@@ -3,8 +3,21 @@
         {{ title }}
     {% endblock %}
     {% block box_body %}
-        <div id="heatmap-container" data-url="{{ path('heatmap_data') }}" style="min-height: 150px; padding: 1rem;">
-            <p style="color: var(--bs-secondary);">Heatmap visualization coming in Phase 3</p>
+        <link rel="stylesheet" href="{{ asset('bundles/kimaiheatmap/heatmap.css') }}">
+        <div id="heatmap-container"
+             data-url="{{ path('heatmap_data') }}"
+             style="min-height: 150px; overflow-x: auto;">
         </div>
+        <script src="{{ asset('bundles/kimaiheatmap/heatmap.js') }}"></script>
+        <script type="text/javascript">
+            var initHeatmap = function() {
+                KimaiHeatmap.init(document.getElementById('heatmap-container'));
+            };
+            {% if kimai_context is defined and kimai_context.javascriptRequest %}
+                initHeatmap();
+            {% else %}
+                document.addEventListener('kimai.initialized', initHeatmap);
+            {% endif %}
+        </script>
     {% endblock %}
 {% endembed %}