178 lines
10 KiB
HTML
178 lines
10 KiB
HTML
{% extends 'portal_base.html' %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{% trans "Access Link Details" %} - ATS{% 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 px-3 py-3">
|
|
<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="link" class="w-8 h-8 text-temple-red"></i>
|
|
</div>
|
|
{% trans "Access Link Details" %}
|
|
</h1>
|
|
<p class="text-gray-600">{% trans "Secure access link for agency candidate submissions" %}</p>
|
|
</div>
|
|
<a href="{% url 'agency_assignment_detail' access_link.assignment.slug %}" class="inline-flex items-center gap-2 bg-gray-600 hover:bg-gray-700 text-white font-semibold px-6 py-2.5 rounded-xl transition">
|
|
<i data-lucide="arrow-left" class="w-5 h-5"></i> {% trans "Back to Assignment" %}
|
|
</a>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Main Content -->
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden mb-6">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<h5 class="text-xl font-bold text-gray-900 flex items-center gap-2">
|
|
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
|
<i data-lucide="shield" class="w-5 h-5 text-blue-600"></i>
|
|
</div>
|
|
{% trans "Access Information" %}
|
|
</h5>
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {% if access_link.is_active %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
|
|
{% if access_link.is_active %}{% trans "Active" %}{% else %}{% trans "Inactive" %}{% endif %}
|
|
</span>
|
|
</div>
|
|
|
|
<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 "Assignment" %}</label>
|
|
<div class="font-semibold text-gray-900">
|
|
<a href="{% url 'agency_assignment_detail' access_link.assignment.slug %}" class="hover:text-temple-red transition">
|
|
{{ access_link.assignment.agency.name }} - {{ access_link.assignment.job.title }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-500 mb-1">{% trans "Agency" %}</label>
|
|
<div class="font-semibold text-gray-900">{{ access_link.assignment.agency.name }}</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-500 mb-1">{% trans "Created At" %}</label>
|
|
<div class="font-semibold text-gray-900">{{ access_link.created_at|date:"Y-m-d H:i" }}</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-500 mb-1">{% trans "Expires At" %}</label>
|
|
<div class="font-semibold {% if access_link.is_expired %}text-red-600{% endif %} text-gray-900">
|
|
{{ access_link.expires_at|date:"Y-m-d H:i" }}
|
|
{% if access_link.is_expired %}
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 ml-2">{% trans "Expired" %}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-500 mb-1">{% trans "Max Candidates" %}</label>
|
|
<div class="font-semibold text-gray-900">{{ access_link.assignment.max_candidates }}</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-500 mb-1">{% trans "Candidates Submitted" %}</label>
|
|
<div class="font-semibold text-gray-900">{{ access_link.assignment.candidates_submitted }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="lg:col-span-1 space-y-6">
|
|
<!-- Usage Statistics -->
|
|
<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-blue-100 rounded-lg flex items-center justify-center">
|
|
<i data-lucide="trending-up" class="w-5 h-5 text-blue-600"></i>
|
|
</div>
|
|
{% trans "Usage Statistics" %}
|
|
</h5>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600">{% trans "Total Accesses" %}</span>
|
|
<span class="font-bold text-gray-900">{{ access_link.access_count }}</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600">{% trans "Last Accessed" %}</span>
|
|
<span class="font-semibold text-gray-900">
|
|
{% if access_link.last_accessed %}
|
|
{{ access_link.last_accessed|date:"Y-m-d H:i" }}
|
|
{% else %}
|
|
<span class="text-gray-500">{% trans "Never" %}</span>
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-gray-600">{% trans "Submissions" %}</span>
|
|
<span class="font-bold text-gray-900">{{ access_link.assignment.candidates_submitted }}/{{ access_link.assignment.max_candidates }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{% widthratio access_link.assignment.candidates_submitted access_link.assignment.max_candidates 100 as progress_percent %}
|
|
<div class="mt-4">
|
|
<div class="w-full bg-gray-200 rounded-full h-2">
|
|
<div class="h-2 rounded-full {% if progress_percent >= 80 %}bg-red-500{% elif progress_percent >= 60 %}bg-yellow-500{% else %}bg-green-500{% endif %}" style="width: {{ progress_percent }}%"></div>
|
|
</div>
|
|
<div class="text-right text-sm text-gray-600 mt-1">{{ progress_percent }}%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<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-gray-100 rounded-lg flex items-center justify-center">
|
|
<i data-lucide="settings" class="w-5 h-5 text-gray-600"></i>
|
|
</div>
|
|
{% trans "Actions" %}
|
|
</h5>
|
|
|
|
<div class="space-y-3">
|
|
<a href="{% url 'agency_assignment_detail' access_link.assignment.slug %}" class="inline-flex items-center justify-center w-full gap-2 border border-gray-300 text-gray-700 hover:bg-gray-50 font-medium px-4 py-2.5 rounded-xl transition">
|
|
<i data-lucide="eye" class="w-4 h-4"></i> {% trans "View Assignment" %}
|
|
</a>
|
|
|
|
{% if access_link.is_active and not access_link.is_expired %}
|
|
<button onclick="confirmDeactivate()" class="inline-flex items-center justify-center w-full gap-2 bg-yellow-500 hover:bg-yellow-600 text-white font-semibold px-4 py-2.5 rounded-xl transition shadow-sm hover:shadow-md">
|
|
<i data-lucide="pause" class="w-4 h-4"></i> {% trans "Deactivate" %}
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if access_link.is_expired or not access_link.is_active %}
|
|
<button onclick="confirmReactivate()" class="inline-flex items-center justify-center w-full gap-2 bg-green-500 hover:bg-green-600 text-white font-semibold px-4 py-2.5 rounded-xl transition shadow-sm hover:shadow-md">
|
|
<i data-lucide="play" class="w-4 h-4"></i> {% trans "Reactivate" %}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function confirmDeactivate() {
|
|
if (confirm('{% trans "Are you sure you want to deactivate this access link? Agencies will no longer be able to use it." %}')) {
|
|
window.location.href = '{% url "agency_access_link_deactivate" access_link.slug %}';
|
|
}
|
|
}
|
|
|
|
function confirmReactivate() {
|
|
if (confirm('{% trans "Are you sure you want to reactivate this access link?" %}')) {
|
|
window.location.href = '{% url "agency_access_link_reactivate" access_link.slug %}';
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
</script>
|
|
{% endblock %} |