167 lines
11 KiB
HTML
167 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
{% load i18n static form_filters %}
|
|
|
|
{% block title %}{{ form.name }} - {% trans "Submission Details" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Breadcrumb -->
|
|
<nav class="mb-6" aria-label="breadcrumb">
|
|
<ol class="flex items-center gap-2 text-sm flex-wrap">
|
|
<li><a href="{% url 'job_detail' submission.template.job.slug %}" class="text-gray-500 hover:text-temple-red transition">{% trans "Job Detail" %}</a></li>
|
|
<li class="text-gray-400">/</li>
|
|
<li><a href="{% url 'form_builder' submission.template.pk%}" class="text-gray-500 hover:text-temple-red transition">{% trans "Form Template" %}</a></li>
|
|
<li class="text-temple-red font-semibold">{% trans "Submission Details" %}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
|
|
<div class="flex-1">
|
|
<h2 class="text-3xl font-bold text-gray-900 flex items-center gap-3">
|
|
<div class="bg-temple-red/10 p-3 rounded-xl">
|
|
<i data-lucide="file-check-2" class="w-8 h-8 text-temple-red"></i>
|
|
</div>
|
|
{% trans "Submission Details" %}
|
|
</h2>
|
|
</div>
|
|
<a href="{% url 'form_template_submissions_list' template.slug %}" class="inline-flex items-center gap-2 border border-gray-300 text-gray-600 hover:bg-gray-100 px-4 py-2.5 rounded-xl text-sm transition">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back to Submissions" %}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Submission Metadata -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 mb-6 overflow-hidden">
|
|
<div class="border-b border-gray-100 px-6 py-4">
|
|
<h5 class="text-lg font-bold text-gray-900">{% trans "Submission Metadata" %}</h5>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="fingerprint" class="w-5 h-5 text-temple-red"></i>
|
|
<span class="text-sm text-gray-600"><strong class="text-gray-900">{% trans "Submission ID:" %}</strong> {{ submission.id }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="calendar-check" class="w-5 h-5 text-temple-red"></i>
|
|
<span class="text-sm text-gray-600"><strong class="text-gray-900">{% trans "Submitted:" %}</strong> {{ submission.submitted_at|date:"M d, Y H:i" }}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="file-text" class="w-5 h-5 text-temple-red"></i>
|
|
<span class="text-sm text-gray-600"><strong class="text-gray-900">{% trans "Form:" %}</strong> {{ submission.template.name }}</span>
|
|
</div>
|
|
</div>
|
|
{% if submission.applicant_name or submission.applicant_email %}
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
|
{% if submission.applicant_name %}
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="user" class="w-5 h-5 text-temple-red"></i>
|
|
<span class="text-sm text-gray-600"><strong class="text-gray-900">{% trans "Applicant Name:" %}</strong> {{ submission.applicant_name }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if submission.applicant_email %}
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="mail" class="w-5 h-5 text-temple-red"></i>
|
|
<span class="text-sm text-gray-600"><strong class="text-gray-900">{% trans "Email:" %}</strong> {{ submission.applicant_email }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Responses -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
|
|
<div class="border-b border-gray-100 px-6 py-4">
|
|
<h5 class="text-lg font-bold text-gray-900">{% trans "Form Responses" %}</h5>
|
|
</div>
|
|
<div class="p-0">
|
|
{% with submission=submission %}
|
|
{% get_all_responses_flat submission as flat_responses %}
|
|
|
|
{% if flat_responses %}
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-bold text-gray-700 tracking-wider uppercase whitespace-nowrap sticky left-0 bg-gray-50 z-20 border-r border-gray-200 min-w-[150px]">{% trans "Field Property" %}</th>
|
|
{% for response in flat_responses %}
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-bold text-gray-700 tracking-wider uppercase whitespace-nowrap min-w-[200px] max-w-[300px]">{{ response.field_label }}</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<!-- Response Value Row -->
|
|
<tr>
|
|
<td class="px-6 py-4 font-semibold text-gray-900 sticky left-0 bg-white z-10 border-r border-gray-200 whitespace-nowrap">{% trans "Response Value" %}</td>
|
|
{% for response in flat_responses %}
|
|
<td class="px-6 py-4 text-sm text-gray-700 max-w-[300px]">
|
|
{% if response.uploaded_file %}
|
|
<div class="space-y-2">
|
|
<span class="block text-sm text-gray-600 truncate max-w-[180px] inline-flex items-center gap-1">
|
|
<i data-lucide="file" class="w-4 h-4"></i> {{ response.uploaded_file.name }}
|
|
</span>
|
|
<a href="{{ response.uploaded_file.url }}" class="inline-flex items-center gap-1 border border-temple-red text-temple-red hover:bg-temple-red hover:text-white px-3 py-1.5 rounded-lg text-xs font-semibold transition" target="_blank" title="{% trans 'Download File' %}">
|
|
<i data-lucide="download" class="w-3 h-3"></i> {% trans "Download" %}
|
|
</a>
|
|
</div>
|
|
{% elif response.value %}
|
|
{% if response.field_type == 'checkbox' and response.value|length > 0 %}
|
|
<div class="flex flex-wrap gap-1">
|
|
{% for val in response.value %}
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold uppercase bg-gray-200 text-gray-700">{{ val }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% elif response.field_type == 'radio' or response.field_type == 'select' %}
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-bold uppercase bg-blue-100 text-blue-800">{{ response.value }}</span>
|
|
{% else %}
|
|
<p class="text-sm text-gray-700 line-clamp-3">{{ response.value|linebreaksbr }}</p>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="text-sm text-gray-400">{% trans "Not provided" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
<!-- Associated Stage Row -->
|
|
<tr>
|
|
<td class="px-6 py-4 font-semibold text-gray-900 sticky left-0 bg-white z-10 border-r border-gray-200 whitespace-nowrap">{% trans "Associated Stage" %}</td>
|
|
{% for response in flat_responses %}
|
|
<td class="px-6 py-4 text-sm text-gray-600">
|
|
{{ response.stage_name|default:"N/A" }}
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
<!-- Field Required Row -->
|
|
<tr>
|
|
<td class="px-6 py-4 font-semibold text-gray-900 sticky left-0 bg-white z-10 border-r border-gray-200 whitespace-nowrap">{% trans "Field Required" %}</td>
|
|
{% for response in flat_responses %}
|
|
<td class="px-6 py-4">
|
|
{% if response.required %}
|
|
<span class="inline-flex items-center gap-1 text-sm text-red-600 font-semibold">
|
|
<i data-lucide="asterisk" class="w-3 h-3"></i> {% trans "Yes" %}
|
|
</span>
|
|
{% else %}
|
|
<span class="text-sm text-emerald-600 font-semibold">{% trans "No" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-12 px-6">
|
|
<i data-lucide="alert-circle" class="w-16 h-16 text-temple-red mx-auto mb-4"></i>
|
|
<p class="text-lg font-semibold text-gray-900 mb-2">{% trans "No response fields were found for this submission." %}</p>
|
|
<p class="text-sm text-gray-500">{% trans "This may occur if the form template was modified or responses were cleared." %}</p>
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
{% endblock %} |