92 lines
4.3 KiB
Twig
92 lines
4.3 KiB
Twig
{% extends 'administrative/layout.html.twig' %}
|
|
|
|
{% block title %}Feedback-Statistik{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="flex items-start justify-between pb-4">
|
|
<h1 class="text-2xl font-bold">
|
|
Feedback-Statistik
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow p-4 mb-8">
|
|
{{ form_start(form, { attr: { class: 'flex flex-wrap items-end gap-4' } }) }}
|
|
<div class="flex-1 min-w-[150px]">
|
|
{{ form_row(form.dateFrom) }}
|
|
</div>
|
|
<div class="flex-1 min-w-[150px]">
|
|
{{ form_row(form.dateTo) }}
|
|
</div>
|
|
<div class="flex gap-2">
|
|
{{ form_widget(form.apply, { attr: { class: 'btn btn--small' } }) }}
|
|
{{ form_widget(form.reset, { attr: { class: 'btn btn--small btn--secondary' } }) }}
|
|
</div>
|
|
{{ form_end(form) }}
|
|
</div>
|
|
|
|
{% if filterDto.active %}
|
|
<p class="text-sm text-gray-600 mb-4">
|
|
Filter aktiv:
|
|
{% if filterDto.dateFrom %}von {{ filterDto.dateFrom|date('d.m.Y') }}{% endif %}
|
|
{% if filterDto.dateTo %}bis {{ filterDto.dateTo|date('d.m.Y') }}{% endif %}
|
|
</p>
|
|
{% endif %}
|
|
|
|
{% if chartsData is empty %}
|
|
<div class="bg-white rounded-lg shadow p-8 text-center text-gray-500">
|
|
Keine Feedback-Daten im ausgewählten Zeitraum vorhanden.
|
|
</div>
|
|
{% else %}
|
|
<div class="grid gap-8">
|
|
{% for chartData in chartsData %}
|
|
<div class="bg-white rounded-lg shadow overflow-hidden">
|
|
<div class="p-4 border-b bg-gray-50">
|
|
<h2 class="text-lg font-semibold">{{ chartData.feedbackSet.name }}</h2>
|
|
<p class="text-sm text-gray-600">{{ chartData.count }} Feedbacks</p>
|
|
</div>
|
|
<div class="flex flex-col lg:flex-row">
|
|
<div class="lg:w-1/3 p-4 border-r">
|
|
<h3 class="text-sm font-semibold text-gray-500 mb-3">Fragen</h3>
|
|
<ol class="text-sm space-y-2">
|
|
{% for question in chartData.questions %}
|
|
<li class="flex">
|
|
<span class="font-medium text-gray-400 w-6">{{ loop.index }}.</span>
|
|
<span>{{ question }}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ol>
|
|
</div>
|
|
<div class="lg:w-2/3 p-4">
|
|
<div class="h-64"
|
|
data-controller="chart"
|
|
data-chart-labels-value="{{ chartData.labels|json_encode }}"
|
|
data-chart-data-value="{{ chartData.data|json_encode }}"
|
|
data-chart-max-y-value="5">
|
|
<canvas data-chart-target="canvas"></canvas>
|
|
</div>
|
|
<div class="mt-4">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="border-b">
|
|
{% for label in chartData.labels %}
|
|
<th class="py-1 text-center font-normal text-gray-500">{{ label }}</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
{% for value in chartData.data %}
|
|
<td class="py-1 text-center font-semibold">{{ value|number_format(2, ',', '.') }}</td>
|
|
{% endfor %}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|