256 lines
13 KiB
HTML
256 lines
13 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{{ template.name }} - PX360{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Page Header -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-navy flex items-center gap-2">
|
|
<i data-lucide="file-text" class="w-7 h-7 text-blue"></i>
|
|
{{ template.name }}
|
|
</h1>
|
|
<p class="text-slate mt-1">{{ template.name_ar }}</p>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<a href="{% url 'surveys:template_list' %}" class="px-4 py-2 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-light transition flex items-center gap-2">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back" %}
|
|
</a>
|
|
<a href="{% url 'surveys:template_edit' template.pk %}" class="px-4 py-2 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition flex items-center gap-2">
|
|
<i data-lucide="pencil" class="w-4 h-4"></i> {% trans "Edit" %}
|
|
</a>
|
|
<button @click="$dispatch('open-delete-modal')" class="px-4 py-2 bg-red-600 text-white rounded-xl font-semibold hover:bg-red-700 transition flex items-center gap-2">
|
|
<i data-lucide="trash-2" class="w-4 h-4"></i> {% trans "Delete" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Cards -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
|
|
<div class="bg-navy text-white rounded-2xl p-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="layers" class="w-6 h-6"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-white/70">{% trans "Total Instances" %}</p>
|
|
<p class="text-2xl font-bold">{{ stats.total_instances }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-green-600 text-white rounded-2xl p-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="check-circle" class="w-6 h-6"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-white/70">{% trans "Completed" %}</p>
|
|
<p class="text-2xl font-bold">{{ stats.completed_instances }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-amber-500 text-white rounded-2xl p-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="thumbs-down" class="w-6 h-6"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-white/70">{% trans "Negative" %}</p>
|
|
<p class="text-2xl font-bold">{{ stats.negative_instances }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-blue text-white rounded-2xl p-6">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center">
|
|
<i data-lucide="trending-up" class="w-6 h-6"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-white/70">{% trans "Avg Score" %}</p>
|
|
<p class="text-2xl font-bold">{{ stats.avg_score }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Template Details -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
<!-- Details Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-slate-100">
|
|
<h3 class="text-lg font-bold text-navy">{% trans "Template Details" %}</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between py-2 border-b border-slate-50">
|
|
<span class="text-slate font-medium">{% trans "Hospital" %}</span>
|
|
<span class="text-navy">{{ template.hospital.name_en }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-2 border-b border-slate-50">
|
|
<span class="text-slate font-medium">{% trans "Survey Type" %}</span>
|
|
<span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-blue-100 text-blue-700">{{ template.get_survey_type_display }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-2 border-b border-slate-50">
|
|
<span class="text-slate font-medium">{% trans "Scoring Method" %}</span>
|
|
<span class="text-navy">{{ template.get_scoring_method_display }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-2 border-b border-slate-50">
|
|
<span class="text-slate font-medium">{% trans "Negative Threshold" %}</span>
|
|
<span class="text-navy">{{ template.negative_threshold }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-2 border-b border-slate-50">
|
|
<span class="text-slate font-medium">{% trans "Status" %}</span>
|
|
{% if template.is_active %}
|
|
<span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-green-100 text-green-700">{% trans "Active" %}</span>
|
|
{% else %}
|
|
<span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-slate-100 text-slate-600">{% trans "Inactive" %}</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex justify-between py-2 border-b border-slate-50">
|
|
<span class="text-slate font-medium">{% trans "Created By" %}</span>
|
|
<span class="text-navy">{{ template.created_by.get_full_name|default:"System" }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-slate font-medium">{% trans "Created At" %}</span>
|
|
<span class="text-navy">{{ template.created_at|date:"Y-m-d H:i" }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-slate-100">
|
|
<h3 class="text-lg font-bold text-navy">{% trans "Statistics" %}</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between py-2 border-b border-slate-50">
|
|
<span class="text-slate font-medium">{% trans "Total Instances" %}</span>
|
|
<span class="text-navy font-semibold">{{ stats.total_instances }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-2 border-b border-slate-50">
|
|
<span class="text-slate font-medium">{% trans "Completed" %}</span>
|
|
<span class="text-navy font-semibold">{{ stats.completed_instances }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-2 border-b border-slate-50">
|
|
<span class="text-slate font-medium">{% trans "Completion Rate" %}</span>
|
|
<span class="text-navy font-semibold">{{ stats.completion_rate }}%</span>
|
|
</div>
|
|
<div class="flex justify-between py-2 border-b border-slate-50">
|
|
<span class="text-slate font-medium">{% trans "Negative Responses" %}</span>
|
|
<span class="text-amber-600 font-semibold">{{ stats.negative_instances }}</span>
|
|
</div>
|
|
<div class="flex justify-between py-2">
|
|
<span class="text-slate font-medium">{% trans "Average Score" %}</span>
|
|
<span class="text-green-600 font-semibold">{{ stats.avg_score }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Questions Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-slate-100">
|
|
<h3 class="text-lg font-bold text-navy">{% trans "Questions" %} ({{ questions.count }})</h3>
|
|
</div>
|
|
<div class="p-6">
|
|
{% if questions %}
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead class="bg-slate-50 border-b border-slate-100">
|
|
<tr class="text-xs font-bold text-slate uppercase tracking-wider">
|
|
<th class="px-4 py-3 text-left">{% trans "Order" %}</th>
|
|
<th class="px-4 py-3 text-left">{% trans "Question (EN)" %}</th>
|
|
<th class="px-4 py-3 text-left">{% trans "Question (AR)" %}</th>
|
|
<th class="px-4 py-3 text-left">{% trans "Type" %}</th>
|
|
<th class="px-4 py-3 text-left">{% trans "Required" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
{% for question in questions %}
|
|
<tr class="hover:bg-light/30 transition">
|
|
<td class="px-4 py-3">
|
|
<span class="w-8 h-8 bg-slate-100 rounded-lg flex items-center justify-center text-slate font-semibold">
|
|
{{ question.order }}
|
|
</span>
|
|
</td>
|
|
<td class="px-4 py-3 text-navy">{{ question.text }}</td>
|
|
<td class="px-4 py-3 text-slate">{{ question.text_ar|default:"-" }}</td>
|
|
<td class="px-4 py-3">
|
|
<span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-cyan-100 text-cyan-700">{{ question.get_question_type_display }}</span>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
{% if question.is_required %}
|
|
<span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-green-100 text-green-700">{% trans "Yes" %}</span>
|
|
{% else %}
|
|
<span class="px-2.5 py-1 rounded-lg text-xs font-bold bg-slate-100 text-slate-600">{% trans "No" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-12">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 bg-slate-100 rounded-full mb-4">
|
|
<i data-lucide="inbox" class="w-8 h-8 text-slate-400"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-navy mb-2">{% trans "No Questions" %}</h3>
|
|
<p class="text-slate">{% trans "No questions have been added to this template yet." %}</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
<div x-data="{ show: false }"
|
|
x-init="$listen('open-delete-modal', () => show = true)"
|
|
x-show="show"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="fixed inset-0 z-50 overflow-y-auto"
|
|
style="display: none;">
|
|
<div class="flex items-center justify-center min-h-screen px-4">
|
|
<div class="fixed inset-0 bg-black/50" @click="show = false"></div>
|
|
<div class="relative bg-white rounded-2xl max-w-md w-full p-6 shadow-xl">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
|
|
<i data-lucide="alert-triangle" class="w-6 h-6 text-red-600"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold text-navy">{% trans "Confirm Delete" %}</h3>
|
|
<p class="text-sm text-slate">{% trans "This action cannot be undone" %}</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-slate mb-4">
|
|
{% trans "Are you sure you want to delete the survey template" %} "<strong class="text-navy">{{ template.name }}</strong>"?
|
|
</p>
|
|
<div class="flex justify-end gap-3">
|
|
<button @click="show = false" class="px-4 py-2 border border-slate-200 text-slate rounded-xl font-semibold hover:bg-light transition">
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
<form method="post" action="{% url 'surveys:template_delete' template.pk %}" class="inline">
|
|
{% csrf_token %}
|
|
<button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-xl font-semibold hover:bg-red-700 transition">
|
|
{% trans "Delete Template" %}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
{% endblock %} |