127 lines
6.3 KiB
HTML
127 lines
6.3 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% trans "Survey Analytics Dashboard" %} - PX360{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="mb-8">
|
|
<h1 class="text-3xl font-bold text-navy mb-2">{% trans "Survey Analytics Dashboard" %}</h1>
|
|
<p class="text-slate">{% trans "Real-time insights and metrics for your surveys" %}</p>
|
|
</div>
|
|
|
|
<!-- Template Selector -->
|
|
<div class="bg-white rounded-2xl shadow-lg p-6 mb-8">
|
|
<form method="get" class="flex items-end gap-4">
|
|
<div class="flex-1">
|
|
<label class="block text-sm font-semibold text-navy mb-2">{% trans "Select Survey Template" %}</label>
|
|
<select name="template" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-blue focus:outline-none">
|
|
<option value="">{% trans "-- Choose a template --" %}</option>
|
|
{% for template in templates %}
|
|
<option value="{{ template.id }}" {% if selected_template.id == template.id %}selected{% endif %}>
|
|
{{ template.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="bg-blue-600 text-white px-6 py-3 rounded-xl font-semibold hover:bg-blue-700 transition">
|
|
{% trans "View Analytics" %}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{% if analytics_data %}
|
|
<!-- Key Metrics -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
|
<div class="bg-white rounded-2xl shadow-lg p-6">
|
|
<div class="text-sm text-slate mb-1">{% trans "Total Sent" %}</div>
|
|
<div class="text-3xl font-bold text-navy">{{ analytics_data.total_sent }}</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl shadow-lg p-6">
|
|
<div class="text-sm text-slate mb-1">{% trans "Completion Rate" %}</div>
|
|
<div class="text-3xl font-bold text-green-600">{{ analytics_data.completion_rate|floatformat:1 }}%</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl shadow-lg p-6">
|
|
<div class="text-sm text-slate mb-1">{% trans "Avg. Score" %}</div>
|
|
<div class="text-3xl font-bold text-blue-600">{{ analytics_data.avg_score|floatformat:1 }}</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl shadow-lg p-6">
|
|
<div class="text-sm text-slate mb-1">{% trans "Response Time" %}</div>
|
|
<div class="text-3xl font-bold text-purple-600">{{ analytics_data.avg_completion_time|floatformat:0 }}s</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Section -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div class="bg-white rounded-2xl shadow-lg p-6">
|
|
<h3 class="text-lg font-bold text-navy mb-4">{% trans "Status Distribution" %}</h3>
|
|
<div id="statusChart" class="h-64">
|
|
<div class="flex items-center justify-center h-full text-slate">
|
|
{% trans "Chart visualization would render here" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl shadow-lg p-6">
|
|
<h3 class="text-lg font-bold text-navy mb-4">{% trans "Daily Activity (Last 30 Days)" %}</h3>
|
|
<div id="activityChart" class="h-64">
|
|
<div class="flex items-center justify-center h-full text-slate">
|
|
{% trans "Chart visualization would render here" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Detailed Stats -->
|
|
<div class="bg-white rounded-2xl shadow-lg p-6 mt-8">
|
|
<h3 class="text-lg font-bold text-navy mb-4">{% trans "Detailed Statistics" %}</h3>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="border-b border-slate-200">
|
|
<th class="text-left py-3 px-4 font-semibold text-navy">{% trans "Metric" %}</th>
|
|
<th class="text-right py-3 px-4 font-semibold text-navy">{% trans "Value" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="border-b border-slate-100">
|
|
<td class="py-3 px-4">{% trans "Total Surveys Sent" %}</td>
|
|
<td class="py-3 px-4 text-right font-semibold">{{ analytics_data.total_sent }}</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-100">
|
|
<td class="py-3 px-4">{% trans "Surveys Opened" %}</td>
|
|
<td class="py-3 px-4 text-right font-semibold">{{ analytics_data.total_opened }}</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-100">
|
|
<td class="py-3 px-4">{% trans "Surveys Completed" %}</td>
|
|
<td class="py-3 px-4 text-right font-semibold text-green-600">{{ analytics_data.total_completed }}</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-100">
|
|
<td class="py-3 px-4">{% trans "Surveys Abandoned" %}</td>
|
|
<td class="py-3 px-4 text-right font-semibold text-red-600">{{ analytics_data.total_abandoned }}</td>
|
|
</tr>
|
|
<tr class="border-b border-slate-100">
|
|
<td class="py-3 px-4">{% trans "Average Time to Complete" %}</td>
|
|
<td class="py-3 px-4 text-right font-semibold">{{ analytics_data.avg_completion_time|floatformat:1 }}s</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 px-4">{% trans "Negative Survey Rate" %}</td>
|
|
<td class="py-3 px-4 text-right font-semibold">{{ analytics_data.negative_rate|floatformat:1 }}%</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="bg-white rounded-2xl shadow-lg p-12 text-center">
|
|
<div class="text-6xl mb-4">📊</div>
|
|
<h3 class="text-xl font-bold text-navy mb-2">{% trans "Select a Survey Template" %}</h3>
|
|
<p class="text-slate">{% trans "Choose a survey template above to view detailed analytics and metrics." %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|