feat: add the booking board with floor plan and calendar

templates/dashboard/_calendar.html.twig

@@ -0,0 +1,71 @@
+{# Server-rendered month grid. No calendar library: prev/next and day selection are plain hx-get
+   requests whose response carries nothing but out-of-band blocks, hence hx-swap="none". #}
+{% set weekdays = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'] %}
+
+<div class="rounded-md border border-gray-200 p-4">
+    <div class="flex items-center justify-between pb-4">
+        <button type="button"
+                class="p-1 rounded-md hover:bg-gray-100"
+                aria-label="Voriger Monat"
+                hx-get="{{ path('app_dashboard_day', { date: month_start|date_modify('-1 month')|date('Y-m-d') }) }}"
+                hx-swap="none">
+            {{ ux_icon('lucide:chevron-left', { class: 'w-5 h-5' }) }}
+        </button>
+        <div class="font-bold">
+            {{ month_start|format_datetime(pattern: 'LLLL y') }}
+        </div>
+        <button type="button"
+                class="p-1 rounded-md hover:bg-gray-100"
+                aria-label="Nächster Monat"
+                hx-get="{{ path('app_dashboard_day', { date: month_start|date_modify('+1 month')|date('Y-m-d') }) }}"
+                hx-swap="none">
+            {{ ux_icon('lucide:chevron-right', { class: 'w-5 h-5' }) }}
+        </button>
+    </div>
+
+    <div class="grid grid-cols-7 gap-1 text-center text-xs text-gray-500 pb-1">
+        {% for weekday in weekdays %}<div>{{ weekday }}</div>{% endfor %}
+    </div>
+
+    <div class="grid grid-cols-7 gap-1">
+        {% for week in weeks %}
+            {% for day in week %}
+                {% set classes = 'relative h-12 rounded-md border text-sm flex flex-col items-center justify-center' %}
+                {% if day.is_selected %}
+                    {% set classes = classes ~ ' border-primary bg-primary text-white font-bold' %}
+                {% elseif not day.in_month %}
+                    {% set classes = classes ~ ' border-transparent text-gray-300' %}
+                {% elseif day.is_weekend %}
+                    {% set classes = classes ~ ' border-transparent bg-gray-50 text-gray-400' %}
+                {% else %}
+                    {% set classes = classes ~ ' border-gray-200 hover:bg-gray-50' %}
+                {% endif %}
+                {% if day.is_today and not day.is_selected %}
+                    {% set classes = classes ~ ' ring-1 ring-primary' %}
+                {% endif %}
+
+                <button type="button"
+                        class="{{ classes }}"
+                        aria-pressed="{{ day.is_selected ? 'true' : 'false' }}"
+                        hx-get="{{ path('app_dashboard_day', { date: day.date|date('Y-m-d') }) }}"
+                        hx-swap="none">
+                    <span>{{ day.date|date('j') }}</span>
+                    {# Team view: the occupancy count is the whole point of showing the month. #}
+                    <span class="text-[10px] {{ day.is_selected ? 'text-white/80' : 'text-gray-400' }}">
+                        {{ day.count > 0 ? day.count : '' }}
+                    </span>
+                    {% if day.mine is not empty %}
+                        <span class="absolute top-1 right-1 w-1.5 h-1.5 rounded-full {{ day.is_selected ? 'bg-white' : 'bg-primary' }}"></span>
+                    {% endif %}
+                </button>
+            {% endfor %}
+        {% endfor %}
+    </div>
+
+    <div class="pt-4 text-xs text-gray-500 space-y-1">
+        <div class="flex items-center gap-2">
+            <span class="w-1.5 h-1.5 rounded-full bg-primary"></span> eigene Buchung
+        </div>
+        <div>Zahl = belegte Plätze an dem Tag</div>
+    </div>
+</div>