309 lines
19 KiB
HTML
309 lines
19 KiB
HTML
{% extends 'portal_base.html' %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{{ assignment.job.title }} - {{ assignment.agency.name }} - {% trans "Agency Portal" %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4 py-8">
|
|
<!-- Header -->
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-900 mb-2 flex items-center gap-3">
|
|
<div class="bg-temple-red/10 p-3 rounded-xl">
|
|
<i data-lucide="briefcase" class="w-8 h-8 text-temple-red"></i>
|
|
</div>
|
|
{{ assignment.job.title }}
|
|
</h1>
|
|
<p class="text-gray-600">{% trans "Assignment Details" %} - {{ assignment.agency.name }}</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<a href="{% url 'agency_portal_dashboard' %}" class="inline-flex items-center gap-2 border border-gray-300 text-gray-700 hover:bg-gray-50 font-medium px-4 py-2 rounded-xl transition">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back to Dashboard" %}
|
|
</a>
|
|
<a href="{% url 'agency_portal_submit_application_page' assignment.slug %}" class="inline-flex items-center gap-2 bg-temple-red hover:bg-[#7a1a29] text-white font-semibold px-4 py-2 rounded-xl transition shadow-sm hover:shadow-md {% if assignment.is_full %}opacity-50 cursor-not-allowed{% endif %}">
|
|
<i data-lucide="user-plus" class="w-4 h-4"></i> {% trans "Submit New application" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Main Content -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<!-- Assignment Details Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="p-6">
|
|
<h5 class="text-xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
|
<div class="w-10 h-10 bg-temple-red/10 rounded-lg flex items-center justify-center">
|
|
<i data-lucide="info" class="w-5 h-5 text-temple-red"></i>
|
|
</div>
|
|
{% trans "Assignment Details" %}
|
|
</h5>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-500 mb-1">{% trans "Job Title" %}</label>
|
|
<div class="font-bold text-gray-900">{{ assignment.job.title }}</div>
|
|
<div class="text-sm text-gray-600">{{ assignment.job.department }}</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-500 mb-1">{% trans "Status" %}</label>
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
|
|
{{ assignment.get_status_display }}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-500 mb-1">{% trans "Deadline" %}</label>
|
|
<div class="{% if assignment.is_expired %}text-red-600{% else %}text-gray-700{% endif %}">
|
|
<i data-lucide="calendar" class="w-4 h-4 inline mr-1"></i>
|
|
{{ assignment.deadline_date|date:"Y-m-d H:i" }}
|
|
</div>
|
|
{% if assignment.is_expired %}
|
|
<div class="text-sm text-red-600 mt-1">
|
|
<i data-lucide="alert-triangle" class="w-3 h-3 inline mr-1"></i>{% trans "Expired" %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-sm text-blue-600 mt-1">
|
|
<i data-lucide="clock" class="w-3 h-3 inline mr-1"></i>{{ assignment.days_remaining }} {% trans "days remaining" %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-500 mb-1">{% trans "Maximum applications" %}</label>
|
|
<div class="font-bold text-gray-900">{{max_applications }} {% trans "applications" %}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if assignment.job.description %}
|
|
<div class="mt-6 pt-6 border-t border-gray-200">
|
|
<label class="block text-sm font-semibold text-gray-500 mb-2">{% trans "Job Description" %}</label>
|
|
<div class="text-gray-700">{{ assignment.job.description|safe|truncatewords:50 }}</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submitted applications -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h5 class="text-xl font-bold text-gray-900 flex items-center gap-2">
|
|
<div class="w-10 h-10 bg-temple-red/10 rounded-lg flex items-center justify-center">
|
|
<i data-lucide="users" class="w-5 h-5 text-temple-red"></i>
|
|
</div>
|
|
{% trans "Submitted applications" %} ({{ total_applications }})
|
|
</h5>
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-temple-red/10 text-temple-red">
|
|
{{ total_applications }}/{{ max_applications }}
|
|
</span>
|
|
</div>
|
|
|
|
{% if page_obj %}
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr class="border-b border-gray-200">
|
|
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">{% trans "Name" %}</th>
|
|
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">{% trans "Contact" %}</th>
|
|
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">{% trans "Stage" %}</th>
|
|
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">{% trans "Submitted" %}</th>
|
|
<th class="text-left py-3 px-4 text-sm font-semibold text-gray-700">{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for application in page_obj %}
|
|
<tr class="border-b border-gray-100 hover:bg-gray-50 transition">
|
|
<td class="py-3 px-4">
|
|
<div class="font-semibold text-gray-900">{{ application.name }}</div>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<div class="text-sm text-gray-600">
|
|
<div class="flex items-center gap-1">
|
|
<i data-lucide="mail" class="w-3 h-3"></i> {{ application.email }}
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<i data-lucide="phone" class="w-3 h-3"></i> {{ application.phone }}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-temple-red/10 text-temple-red">
|
|
{{ application.get_stage_display }}
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<div class="text-sm text-gray-500">
|
|
{{ application.created_at|date:"Y-m-d H:i" }}
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-4">
|
|
<a href="{% url 'applicant_application_detail' application.slug %}" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 hover:border-temple-red hover:text-temple-red text-gray-600 transition" title="{% trans 'View Profile' %}">
|
|
<i data-lucide="eye" class="w-4 h-4"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
{% if page_obj.has_other_pages %}
|
|
<div class="flex justify-center items-center gap-2 mt-6">
|
|
{% if page_obj.has_previous %}
|
|
<a href="?page={{ page_obj.previous_page_number }}" class="inline-flex items-center justify-center w-10 h-10 rounded-lg border border-gray-300 hover:border-temple-red hover:text-temple-red text-gray-600 transition">
|
|
<i data-lucide="chevron-left" class="w-4 h-4"></i>
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% for num in page_obj.paginator.page_range %}
|
|
{% if page_obj.number == num %}
|
|
<span class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-temple-red text-white font-semibold">{{ num }}</span>
|
|
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
|
|
<a href="?page={{ num }}" class="inline-flex items-center justify-center w-10 h-10 rounded-lg border border-gray-300 hover:border-temple-red hover:text-temple-red text-gray-600 transition">{{ num }}</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if page_obj.has_next %}
|
|
<a href="?page={{ page_obj.next_page_number }}" class="inline-flex items-center justify-center w-10 h-10 rounded-lg border border-gray-300 hover:border-temple-red hover:text-temple-red text-gray-600 transition">
|
|
<i data-lucide="chevron-right" class="w-4 h-4"></i>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<div class="text-center py-8">
|
|
<div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i data-lucide="users" class="w-8 h-8 text-gray-400"></i>
|
|
</div>
|
|
<h6 class="text-gray-600 mb-2">{% trans "No applications submitted yet" %}</h6>
|
|
<p class="text-gray-500 text-sm">
|
|
{% trans "Submit applications using form above to get started." %}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="lg:col-span-1 space-y-6">
|
|
<!-- Progress Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="p-6">
|
|
<h5 class="text-xl font-bold text-gray-900 mb-4 text-center">{% trans "Submission Progress" %}</h5>
|
|
|
|
<div class="text-center mb-4">
|
|
<div class="relative w-32 h-32 mx-auto">
|
|
<svg width="128" height="128" viewBox="0 0 128 128" class="transform -rotate-90">
|
|
<circle cx="64" cy="64" r="56" stroke="#e5e7eb" stroke-width="8" fill="none"/>
|
|
<circle cx="64" cy="64" r="56" stroke="#9d2235" stroke-width="8" fill="none"
|
|
style="stroke-dasharray: 351.86; stroke-dashoffset: {{ stroke_dashoffset }};"/>
|
|
</svg>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
{% widthratio total_applications assignment.max_candidates 100 as progress %}
|
|
<span class="text-3xl font-bold text-gray-900">{{ progress|floatformat:0 }}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mb-4">
|
|
<div class="text-4xl font-bold text-gray-900 mb-1">{{ total_applications }}</div>
|
|
<div class="text-gray-600">/ {{ assignment.max_candidates }} {% trans "applications" %}</div>
|
|
</div>
|
|
|
|
{% widthratio total_applications assignment.max_candidates 100 as progress %}
|
|
<div class="w-full bg-gray-200 rounded-full h-2 mb-4">
|
|
<div class="h-2 rounded-full bg-temple-red" style="width: {{ progress }}%"></div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
{% if assignment.can_submit %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">{% trans "Can Submit" %}</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">{% trans "Cannot Submit" %}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Assignment Info Card -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="p-6">
|
|
<h5 class="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
|
|
<div class="w-10 h-10 bg-temple-red/10 rounded-lg flex items-center justify-center">
|
|
<i data-lucide="info" class="w-5 h-5 text-temple-red"></i>
|
|
</div>
|
|
{% trans "Assignment Info" %}
|
|
</h5>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-500 mb-1">{% trans "Assigned Date" %}</label>
|
|
<div class="font-bold text-gray-900">{{ assignment.assigned_date|date:"Y-m-d" }}</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-500 mb-1">{% trans "Days Remaining" %}</label>
|
|
<div class="font-bold {% if assignment.days_remaining <= 3 %}text-red-600{% endif %} text-gray-900">
|
|
{{ assignment.days_remaining }} {% trans "days" %}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-500 mb-1">{% trans "Submission Rate" %}</label>
|
|
{% widthratio total_applications assignment.max_candidates 100 as progress %}
|
|
<div class="font-bold text-gray-900">{{ progress|floatformat:1 }}%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Messages Section -->
|
|
{% if message_page_obj %}
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="p-6">
|
|
<h5 class="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
|
|
<div class="w-10 h-10 bg-temple-red/10 rounded-lg flex items-center justify-center">
|
|
<i data-lucide="message-circle" class="w-5 h-5 text-temple-red"></i>
|
|
</div>
|
|
{% trans "Recent Messages" %}
|
|
</h5>
|
|
|
|
<div class="space-y-3">
|
|
{% for message in message_page_obj|slice:":6" %}
|
|
<div class="border-l-4 border-temple-red bg-gray-50 rounded-r-lg p-4 {% if not message.is_read %}bg-blue-50 border-blue-500{% endif %}">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<div class="font-semibold text-gray-900">{{ message.subject }}</div>
|
|
<div class="text-xs text-gray-500">{{ message.created_at|date:"Y-m-d H:i" }}</div>
|
|
</div>
|
|
<div class="text-sm text-gray-600 mb-2">
|
|
{% trans "From" %}: {{ message.sender.get_full_name }}
|
|
</div>
|
|
<div class="text-sm text-gray-700">{{ message.message|truncatewords:30 }}</div>
|
|
{% if not message.is_read %}
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 mt-2">{% trans "New" %}</span>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% if message_page_obj.count > 6 %}
|
|
<div class="text-center mt-4">
|
|
<a href="#" class="inline-flex items-center gap-2 border border-gray-300 text-gray-700 hover:bg-gray-50 font-medium px-4 py-2 rounded-xl transition">
|
|
{% trans "View All Messages" %}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %} |