513 lines
22 KiB
HTML
513 lines
22 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{{ assignment.agency.name }} - {{ assignment.job.title }} - ATS{% endblock %}
|
|
|
|
{% block customCSS %}
|
|
<style>
|
|
/* KAAT-S UI Variables */
|
|
:root {
|
|
--kaauh-teal: #00636e;
|
|
--kaauh-teal-dark: #004a53;
|
|
--kaauh-border: #e9ecef;
|
|
--kaauh-primary-text: #212529;
|
|
--kaauh-success: #198754;
|
|
--kaauh-info: #0dcaf0;
|
|
--kaauh-danger: #dc3545;
|
|
--kaauh-warning: #ffc107;
|
|
--kaauh-bg-light: #f8f9fa;
|
|
}
|
|
|
|
.text-primary-teal {
|
|
color: var(--kaauh-teal) !important;
|
|
}
|
|
|
|
.kaauh-card {
|
|
border: none;
|
|
border-radius: 0.75rem;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
background-color: white;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.kaauh-card:hover {
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.btn-main-action {
|
|
background-color: var(--kaauh-teal);
|
|
border-color: var(--kaauh-teal);
|
|
color: white;
|
|
font-weight: 500;
|
|
padding: 0.5rem 1.2rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.btn-main-action:hover {
|
|
background-color: var(--kaauh-teal-dark);
|
|
border-color: var(--kaauh-teal-dark);
|
|
color: white;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-white {
|
|
background-color: white;
|
|
border-color: var(--kaauh-border);
|
|
color: var(--kaauh-primary-text);
|
|
}
|
|
|
|
.btn-white:hover {
|
|
background-color: var(--kaauh-bg-light);
|
|
border-color: #dee2e6;
|
|
}
|
|
|
|
.status-badge {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.status-ACTIVE {
|
|
background-color: #d1e7dd;
|
|
color: #0f5132;
|
|
}
|
|
|
|
.status-EXPIRED {
|
|
background-color: #f8d7da;
|
|
color: #842029;
|
|
}
|
|
|
|
.status-COMPLETED {
|
|
background-color: #cff4fc;
|
|
color: #055160;
|
|
}
|
|
|
|
.status-CANCELLED {
|
|
background-color: #fff3cd;
|
|
color: #664d03;
|
|
}
|
|
|
|
.bg-soft-primary {
|
|
background-color: rgba(13, 110, 253, 0.1);
|
|
}
|
|
|
|
.bg-soft-info {
|
|
background-color: rgba(13, 202, 240, 0.1);
|
|
}
|
|
|
|
.bg-soft-success {
|
|
background-color: rgba(25, 135, 84, 0.1);
|
|
}
|
|
|
|
.avatar-circle {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.w-20 {
|
|
width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.progress-ring {
|
|
transform: rotate(-90deg);
|
|
transform-origin: 50% 50%;
|
|
}
|
|
|
|
.progress-ring-circle {
|
|
transition: stroke-dashoffset 0.5s ease-in-out;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-5 bg-light">
|
|
<!-- Header -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div>
|
|
<nav aria-label="breadcrumb" class="mb-2">
|
|
<ol class="breadcrumb mb-0 small">
|
|
<li class="breadcrumb-item"><a href="{% url 'agency_assignment_list' %}"
|
|
class="text-decoration-none text-muted">{% trans "Assignments" %}</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">{{ assignment.job.title }}</li>
|
|
</ol>
|
|
</nav>
|
|
<h1 class="h2 fw-bold text-dark mb-2">
|
|
{{ assignment.job.title }}
|
|
</h1>
|
|
<div class="d-flex align-items-center text-muted">
|
|
<span class="me-3"><i class="fas fa-building me-1"></i> {{ assignment.agency.name }}</span>
|
|
<span class="badge status-{{ assignment.status }} rounded-pill px-3">{{
|
|
assignment.get_status_display }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<a href="{% url 'agency_assignment_list' %}" class="btn btn-white border shadow-sm">
|
|
<i class="fas fa-arrow-left me-1"></i> {% trans "Back" %}
|
|
</a>
|
|
<a href="{% url 'agency_assignment_update' assignment.slug %}"
|
|
class="btn btn-main-action shadow-sm">
|
|
<i class="fas fa-edit me-1"></i> {% trans "Edit" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4">
|
|
<!-- Left Column: Details & Candidates -->
|
|
<div class="col-lg-8 col-md-12">
|
|
<!-- Assignment Details Card -->
|
|
<div class="kaauh-card mb-4">
|
|
<div class="card-header bg-transparent border-bottom py-3 px-4">
|
|
<h5 class="mb-0 fw-bold text-dark">
|
|
<i class="fas fa-info-circle me-2 text-primary-teal"></i>
|
|
{% trans "Assignment Details" %}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="detail-group">
|
|
<label class="text-uppercase text-muted small fw-bold mb-1">{% trans "Agency" %}</label>
|
|
<div class="fs-6 fw-medium text-dark">{{ assignment.agency.name }}</div>
|
|
<div class="text-muted small">{{ assignment.agency.contact_person }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="detail-group">
|
|
<label class="text-uppercase text-muted small fw-bold mb-1">{% trans "Department"
|
|
%}</label>
|
|
<div class="fs-6 fw-medium text-dark">{{ assignment.job.department }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="detail-group">
|
|
<label class="text-uppercase text-muted small fw-bold mb-1">{% trans "Deadline"
|
|
%}</label>
|
|
<div
|
|
class="fs-6 fw-medium {% if assignment.is_expired %}text-danger{% else %}text-dark{% endif %}">
|
|
{{ assignment.deadline_date|date:"M d, Y - H:i" }}
|
|
</div>
|
|
{% if assignment.is_expired %}
|
|
<small class="text-danger fw-bold">
|
|
<i class="fas fa-exclamation-triangle me-1"></i>{% trans "Expired" %}
|
|
</small>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="detail-group">
|
|
<label class="text-uppercase text-muted small fw-bold mb-1">{% trans "Created At"
|
|
%}</label>
|
|
<div class="fs-6 fw-medium text-dark">{{ assignment.created_at|date:"M d, Y" }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if assignment.admin_notes %}
|
|
<div class="mt-4 pt-4 border-top">
|
|
<label class="text-uppercase text-muted small fw-bold mb-2">{% trans "Admin Notes" %}</label>
|
|
<div class="p-3 bg-light rounded border-start border-4 border-info text-muted">
|
|
{{ assignment.admin_notes }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Candidates Card -->
|
|
<div class="kaauh-card">
|
|
<div
|
|
class="card-header bg-transparent border-bottom py-3 px-4 d-flex justify-content-between align-items-center">
|
|
<h5 class="mb-0 fw-bold text-dark">
|
|
<i class="fas fa-users me-2 text-primary-teal"></i>
|
|
{% trans "Submitted Candidates" %}
|
|
<span class="badge bg-light text-dark border ms-2">{{ total_candidates }}</span>
|
|
</h5>
|
|
{% if access_link %}
|
|
<a href="{% url 'agency_portal_login' %}" target="_blank" class="btn btn-sm btn-outline-info">
|
|
<i class="fas fa-external-link-alt me-1"></i> {% trans "Portal Preview" %}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
<div class="card-body p-0">
|
|
{% if candidates %}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead class="bg-light">
|
|
<tr>
|
|
<th class="px-4 py-3 text-uppercase small fw-bold text-muted">{% trans "Candidate"
|
|
%}</th>
|
|
<th class="px-4 py-3 text-uppercase small fw-bold text-muted">{% trans "Contact" %}
|
|
</th>
|
|
<th class="px-4 py-3 text-uppercase small fw-bold text-muted">{% trans "Stage" %}
|
|
</th>
|
|
<th class="px-4 py-3 text-uppercase small fw-bold text-muted">{% trans "Submitted"
|
|
%}</th>
|
|
<th class="px-4 py-3 text-uppercase small fw-bold text-muted text-end">{% trans
|
|
"Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for candidate in candidates %}
|
|
<tr>
|
|
<td class="px-4">
|
|
<div class="d-flex align-items-center">
|
|
<div class="avatar-circle me-3 bg-soft-primary text-primary fw-bold">
|
|
{{ candidate.name|slice:":2"|upper }}
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold text-dark">{{ candidate.name }}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4">
|
|
<div class="small text-muted">
|
|
<div class="mb-1"><i class="fas fa-envelope me-2 w-20"></i>{{
|
|
candidate.email }}</div>
|
|
<div><i class="fas fa-phone me-2 w-20"></i>{{ candidate.phone }}</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4">
|
|
<span class="badge bg-soft-info text-info rounded-pill px-3">{{
|
|
candidate.get_stage_display }}</span>
|
|
</td>
|
|
<td class="px-4">
|
|
<span class="small text-muted">{{ candidate.created_at|date:"M d, Y" }}</span>
|
|
</td>
|
|
<td class="px-4 text-end">
|
|
<a href="{% url 'candidate_detail' candidate.slug %}"
|
|
class="btn btn-sm btn-white border shadow-sm text-primary"
|
|
title="{% trans 'View Details' %}">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-5">
|
|
<div class="mb-3">
|
|
<div class="avatar-circle bg-light text-muted mx-auto"
|
|
style="width: 64px; height: 64px; font-size: 24px;">
|
|
<i class="fas fa-user-plus"></i>
|
|
</div>
|
|
</div>
|
|
<h6 class="fw-bold text-dark">{% trans "No candidates yet" %}</h6>
|
|
<p class="text-muted small mb-0">
|
|
{% trans "Candidates submitted by the agency will appear here." %}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Sidebar -->
|
|
<div class="col-lg-4 col-md-12">
|
|
<!-- Progress Card -->
|
|
<div class="kaauh-card mb-4">
|
|
<div class="card-body p-4 text-center">
|
|
<h6 class="text-uppercase text-muted small fw-bold mb-4">{% trans "Submission Goal" %}</h6>
|
|
|
|
<div class="position-relative d-inline-block mb-3">
|
|
<svg class="progress-ring" width="140" height="140">
|
|
<circle class="progress-ring-bg" stroke="#f1f3f5" stroke-width="10" fill="transparent"
|
|
r="60" cx="70" cy="70" />
|
|
<circle class="progress-ring-circle" stroke="var(--kaauh-teal)" stroke-width="10"
|
|
fill="transparent" r="60" cx="70" cy="70"
|
|
style="stroke-dasharray: 376.99; stroke-dashoffset: {{ stroke_dashoffset }};" />
|
|
</svg>
|
|
<div class="position-absolute top-50 start-50 translate-middle text-center">
|
|
<div class="h3 fw-bold mb-0 text-dark">{{ total_candidates }}</div>
|
|
<div class="small text-muted text-uppercase">{% trans "of" %} {{ assignment.max_candidates
|
|
}}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-muted small mb-0">
|
|
{% trans "Candidates submitted" %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions Card -->
|
|
<div class="kaauh-card mb-4">
|
|
<div class="card-header bg-transparent border-bottom py-3 px-4">
|
|
<h6 class="mb-0 fw-bold text-dark">{% trans "Quick Actions" %}</h6>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<div class="d-grid gap-3">
|
|
<a href="" class="btn btn-outline-primary">
|
|
<i class="fas fa-envelope me-2"></i> {% trans "Send Message" %}
|
|
</a>
|
|
|
|
{% if assignment.is_active and not assignment.is_expired %}
|
|
<button type="button" class="btn btn-outline-warning" data-bs-toggle="modal"
|
|
data-bs-target="#extendDeadlineModal">
|
|
<i class="fas fa-clock me-2"></i> {% trans "Extend Deadline" %}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Messages -->
|
|
{% if messages_ %}
|
|
<div class="kaauh-card">
|
|
<div
|
|
class="card-header bg-transparent border-bottom py-3 px-4 d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-0 fw-bold text-dark">{% trans "Recent Messages" %}</h6>
|
|
{% if messages_.count > 3 %}
|
|
<a href="#" class="small text-decoration-none">{% trans "View All" %}</a>
|
|
{% endif %}
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="list-group list-group-flush">
|
|
{% for message in messages_|slice:":3" %}
|
|
<div
|
|
class="list-group-item p-3 border-bottom-0 {% if not message.is_read %}bg-soft-info{% endif %}">
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<span class="fw-bold text-dark small">{{ message.sender.get_full_name }}</span>
|
|
<small class="text-muted" style="font-size: 0.7rem;">{{ message.created_at|date:"M d"
|
|
}}</small>
|
|
</div>
|
|
<div class="fw-medium small text-dark mb-1">{{ message.subject }}</div>
|
|
<div class="text-muted small text-truncate">{{ message.message }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Extend Deadline Modal -->
|
|
<div class="modal fade" id="extendDeadlineModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
<i class="fas fa-clock me-2"></i>
|
|
{% trans "Extend Assignment Deadline" %}
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<form method="post" action="{% url 'agency_assignment_extend_deadline' assignment.slug %}">
|
|
{% csrf_token %}
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label for="new_deadline" class="form-label">
|
|
{% trans "New Deadline" %} <span class="text-danger">*</span>
|
|
</label>
|
|
<input type="datetime-local" class="form-control" id="new_deadline" name="new_deadline"
|
|
required>
|
|
<small class="form-text text-muted">
|
|
{% trans "Current deadline:" %} {{ assignment.deadline_date|date:"Y-m-d H:i" }}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
<button type="submit" class="btn btn-main-action">
|
|
<i class="fas fa-clock me-1"></i> {% trans "Extend Deadline" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block customJS %}
|
|
<script>
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard.writeText(text).then(function () {
|
|
// Show success message
|
|
const toast = document.createElement('div');
|
|
toast.className = 'position-fixed top-0 end-0 p-3';
|
|
toast.style.zIndex = '1050';
|
|
toast.innerHTML = `
|
|
<div class="toast show" role="alert">
|
|
<div class="toast-header">
|
|
<strong class="me-auto">{% trans "Success" %}</strong>
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
|
|
</div>
|
|
<div class="toast-body">
|
|
{% trans "Token copied to clipboard!" %}
|
|
</div>
|
|
</div>
|
|
`;
|
|
document.body.appendChild(toast);
|
|
|
|
setTimeout(() => {
|
|
toast.remove();
|
|
}, 3000);
|
|
});
|
|
}
|
|
|
|
function copyToClipboard(elementId) {
|
|
const element = document.getElementById(elementId);
|
|
element.select();
|
|
document.execCommand('copy');
|
|
|
|
// Show feedback
|
|
const button = element.nextElementSibling;
|
|
const originalHTML = button.innerHTML;
|
|
button.innerHTML = '<i class="fas fa-check"></i>';
|
|
button.classList.add('btn-success');
|
|
button.classList.remove('btn-outline-secondary');
|
|
|
|
setTimeout(() => {
|
|
button.innerHTML = originalHTML;
|
|
button.classList.remove('btn-success');
|
|
button.classList.add('btn-outline-secondary');
|
|
}, 2000);
|
|
}
|
|
|
|
function confirmDeactivate() {
|
|
if (confirm('{% trans "Are you sure you want to deactivate this access link? Agencies will no longer be able to use it." %}')) {
|
|
// Submit form to deactivate
|
|
window.location.href = '';
|
|
}
|
|
}
|
|
|
|
function confirmReactivate() {
|
|
if (confirm('{% trans "Are you sure you want to reactivate this access link?" %}')) {
|
|
// Submit form to reactivate
|
|
window.location.href = '';
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Set minimum datetime for new deadline
|
|
const deadlineInput = document.getElementById('new_deadline');
|
|
if (deadlineInput) {
|
|
const currentDeadline = new Date('{{ assignment.deadline_date|date:"Y-m-d\\TH:i" }}');
|
|
const now = new Date();
|
|
const minDateTime = new Date(Math.max(currentDeadline, now));
|
|
|
|
const localDateTime = new Date(minDateTime.getTime() - minDateTime.getTimezoneOffset() * 60000)
|
|
.toISOString()
|
|
.slice(0, 16);
|
|
deadlineInput.min = localDateTime;
|
|
deadlineInput.value = localDateTime;
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |