193 lines
11 KiB
HTML
193 lines
11 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{{ filename }} - {% trans "Survey Analytics Report" %} - PX360{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Page Header -->
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
|
|
<div>
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-2 flex items-center gap-2">
|
|
<i data-lucide="file-text" class="w-8 h-8 text-navy"></i>
|
|
{{ filename }}
|
|
</h2>
|
|
<div class="flex flex-wrap gap-4 text-sm text-gray-500">
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="file-type" class="w-4 h-4"></i>
|
|
<span>{% trans "Type" %}:</span>
|
|
{% if report_type == 'json' %}
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold bg-cyan-100 text-cyan-700">JSON</span>
|
|
{% elif report_type == 'html' %}
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold bg-emerald-100 text-emerald-700">HTML</span>
|
|
{% elif report_type == 'markdown' %}
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700">Markdown</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-bold bg-gray-100 text-gray-700">{{ report_type|upper }}</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="hard-drive" class="w-4 h-4"></i>
|
|
<span>{% trans "Size" %}: {{ size_human }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="calendar" class="w-4 h-4"></i>
|
|
<span>{% trans "Created" %}: {{ created_date|date:"Y-m-d H:i:s" }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-3">
|
|
<a href="{% url 'surveys:analytics_report_view_inline' filename %}"
|
|
class="bg-emerald-500 text-white px-6 py-3 rounded-xl font-semibold hover:bg-emerald-600 transition flex items-center gap-2"
|
|
target="_blank">
|
|
<i data-lucide="eye" class="w-5 h-5"></i> {% trans "View" %}
|
|
</a>
|
|
<a href="{% url 'surveys:analytics_report_download' filename %}"
|
|
class="bg-blue-500 text-white px-6 py-3 rounded-xl font-semibold hover:bg-blue-600 transition flex items-center gap-2">
|
|
<i data-lucide="download" class="w-5 h-5"></i> {% trans "Download" %}
|
|
</a>
|
|
<a href="{% url 'surveys:analytics_reports' %}"
|
|
class="border-2 border-gray-200 text-gray-700 px-6 py-3 rounded-xl font-semibold hover:bg-gray-50 transition flex items-center gap-2">
|
|
<i data-lucide="arrow-left" class="w-5 h-5"></i> {% trans "Back to Reports" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-50">
|
|
<h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
|
|
<i data-lucide="info" class="w-5 h-5 text-navy"></i>
|
|
{% trans "Report Information" %}
|
|
</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-center py-3 border-b border-gray-100">
|
|
<span class="text-gray-500 font-medium">{% trans "Filename" %}</span>
|
|
<strong class="text-gray-800">{{ filename }}</strong>
|
|
</div>
|
|
<div class="flex justify-between items-center py-3 border-b border-gray-100">
|
|
<span class="text-gray-500 font-medium">{% trans "Format" %}</span>
|
|
{% if report_type == 'json' %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-cyan-100 text-cyan-700">JSON</span>
|
|
{% elif report_type == 'markdown' %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-amber-100 text-amber-700">Markdown</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold bg-gray-100 text-gray-700">{{ report_type|title }}</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex justify-between items-center py-3 border-b border-gray-100">
|
|
<span class="text-gray-500 font-medium">{% trans "Size" %}</span>
|
|
<span class="text-gray-800">{{ size_human }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-3 border-b border-gray-100">
|
|
<span class="text-gray-500 font-medium">{% trans "Created" %}</span>
|
|
<span class="text-gray-800">{{ created_date|date:"Y-m-d H:i:s" }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-3">
|
|
<span class="text-gray-500 font-medium">{% trans "Last Modified" %}</span>
|
|
<span class="text-gray-800">{{ modified_date|date:"Y-m-d H:i:s" }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-50">
|
|
<h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
|
|
<i data-lucide="file-code" class="w-5 h-5 text-navy"></i>
|
|
{% trans "File Format Details" %}
|
|
</h3>
|
|
{% if report_type == 'json' %}
|
|
<div class="bg-cyan-50 border border-cyan-100 p-4 rounded-xl mb-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i data-lucide="info" class="w-5 h-5 text-cyan-600"></i>
|
|
<strong class="text-cyan-700">{% trans "JSON Format" %}</strong>
|
|
</div>
|
|
<p class="text-sm text-cyan-600 leading-relaxed">
|
|
{% trans "Structured data format suitable for programmatic access and API integration. Can be imported into data analysis tools or custom applications." %}
|
|
</p>
|
|
</div>
|
|
<h4 class="font-bold text-gray-800 mb-3">{% trans "Recommended Viewers" %}:</h4>
|
|
<ul class="space-y-2">
|
|
<li class="flex items-center gap-2 text-sm text-gray-600">
|
|
<i data-lucide="check" class="w-4 h-4 text-emerald-500"></i>
|
|
{% trans "Any text editor" %}
|
|
</li>
|
|
<li class="flex items-center gap-2 text-sm text-gray-600">
|
|
<i data-lucide="check" class="w-4 h-4 text-emerald-500"></i>
|
|
{% trans "JSON formatters/validators" %}
|
|
</li>
|
|
<li class="flex items-center gap-2 text-sm text-gray-600">
|
|
<i data-lucide="check" class="w-4 h-4 text-emerald-500"></i>
|
|
{% trans "Data analysis tools" %}
|
|
</li>
|
|
</ul>
|
|
{% elif report_type == 'markdown' %}
|
|
<div class="bg-amber-50 border border-amber-100 p-4 rounded-xl mb-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i data-lucide="info" class="w-5 h-5 text-amber-600"></i>
|
|
<strong class="text-amber-700">{% trans "Markdown Format" %}</strong>
|
|
</div>
|
|
<p class="text-sm text-amber-600 leading-relaxed">
|
|
{% trans "Plain text formatting syntax. Lightweight and readable, perfect for documentation and version control systems." %}
|
|
</p>
|
|
</div>
|
|
<h4 class="font-bold text-gray-800 mb-3">{% trans "Recommended Viewers" %}:</h4>
|
|
<ul class="space-y-2">
|
|
<li class="flex items-center gap-2 text-sm text-gray-600">
|
|
<i data-lucide="check" class="w-4 h-4 text-emerald-500"></i>
|
|
{% trans "Any text editor" %}
|
|
</li>
|
|
<li class="flex items-center gap-2 text-sm text-gray-600">
|
|
<i data-lucide="check" class="w-4 h-4 text-emerald-500"></i>
|
|
{% trans "Markdown previewers" %}
|
|
</li>
|
|
<li class="flex items-center gap-2 text-sm text-gray-600">
|
|
<i data-lucide="check" class="w-4 h-4 text-emerald-500"></i>
|
|
{% trans "GitHub/GitLab renderers" %}
|
|
</li>
|
|
</ul>
|
|
{% else %}
|
|
<div class="bg-gray-50 border border-gray-100 p-4 rounded-xl mb-4">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<i data-lucide="help-circle" class="w-5 h-5 text-gray-500"></i>
|
|
<strong class="text-gray-700">{% trans "Unknown Format" %}</strong>
|
|
</div>
|
|
<p class="text-sm text-gray-600 leading-relaxed">
|
|
{% trans "This report format is not recognized. Please download the file to view its contents." %}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-50">
|
|
<h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
|
|
<i data-lucide="zap" class="w-5 h-5 text-navy"></i>
|
|
{% trans "Quick Actions" %}
|
|
</h3>
|
|
<div class="flex flex-wrap gap-3">
|
|
<a href="{% url 'surveys:analytics_report_view_inline' filename %}"
|
|
class="bg-emerald-500 text-white px-6 py-3 rounded-xl font-semibold hover:bg-emerald-600 transition flex items-center gap-2"
|
|
target="_blank">
|
|
<i data-lucide="eye" class="w-5 h-5"></i> {% trans "View Report" %}
|
|
</a>
|
|
<a href="{% url 'surveys:analytics_report_download' filename %}"
|
|
class="bg-blue-500 text-white px-6 py-3 rounded-xl font-semibold hover:bg-blue-600 transition flex items-center gap-2">
|
|
<i data-lucide="download" class="w-5 h-5"></i> {% trans "Download Report" %}
|
|
</a>
|
|
<a href="{% url 'surveys:analytics_reports' %}"
|
|
class="border-2 border-gray-200 text-gray-700 px-6 py-3 rounded-xl font-semibold hover:bg-gray-50 transition flex items-center gap-2">
|
|
<i data-lucide="list" class="w-5 h-5"></i> {% trans "View All Reports" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %} |