ui changes
This commit is contained in:
commit
6521cdf2be
BIN
db.sqlite3
BIN
db.sqlite3
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
14
recruitment/migrations/0010_merge_20251013_1819.py
Normal file
14
recruitment/migrations/0010_merge_20251013_1819.py
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
# Generated by Django 5.2.7 on 2025-10-13 15:19
|
||||||
|
|
||||||
|
from django.db import migrations
|
||||||
|
|
||||||
|
|
||||||
|
class Migration(migrations.Migration):
|
||||||
|
|
||||||
|
dependencies = [
|
||||||
|
('recruitment', '0009_merge_20251013_1714'),
|
||||||
|
('recruitment', '0009_merge_20251013_1718'),
|
||||||
|
]
|
||||||
|
|
||||||
|
operations = [
|
||||||
|
]
|
||||||
@ -77,8 +77,8 @@ urlpatterns = [
|
|||||||
path('htmx/<slug:slug>/candidate_set_exam_date/', views.candidate_set_exam_date, name='candidate_set_exam_date'),
|
path('htmx/<slug:slug>/candidate_set_exam_date/', views.candidate_set_exam_date, name='candidate_set_exam_date'),
|
||||||
path('htmx/bulk_candidate_move_to_exam/', views.bulk_candidate_move_to_exam, name='bulk_candidate_move_to_exam'),
|
path('htmx/bulk_candidate_move_to_exam/', views.bulk_candidate_move_to_exam, name='bulk_candidate_move_to_exam'),
|
||||||
|
|
||||||
# path('forms/form/<int:template_id>/submit/', views.submit_form, name='submit_form'),
|
path('forms/form/<int:template_id>/submit/', views.submit_form, name='submit_form'),
|
||||||
# path('forms/form/<int:template_id>/', views.form_wizard_view, name='form_wizard'),
|
path('forms/form/<int:template_id>/', views.form_wizard_view, name='form_wizard'),
|
||||||
path('forms/<int:template_id>/submissions/<slug:slug>/', views.form_submission_details, name='form_submission_details'),
|
path('forms/<int:template_id>/submissions/<slug:slug>/', views.form_submission_details, name='form_submission_details'),
|
||||||
path('forms/template/<slug:slug>/submissions/', views.form_template_submissions_list, name='form_template_submissions_list'),
|
path('forms/template/<slug:slug>/submissions/', views.form_template_submissions_list, name='form_template_submissions_list'),
|
||||||
path('forms/template/<int:template_id>/all-submissions/', views.form_template_all_submissions, name='form_template_all_submissions'),
|
path('forms/template/<int:template_id>/all-submissions/', views.form_template_all_submissions, name='form_template_all_submissions'),
|
||||||
@ -91,6 +91,7 @@ urlpatterns = [
|
|||||||
# path('api/forms/save/', views.save_form_builder, name='save_form_builder'),
|
# path('api/forms/save/', views.save_form_builder, name='save_form_builder'),
|
||||||
# path('api/forms/<int:form_id>/load/', views.load_form, name='load_form'),
|
# path('api/forms/<int:form_id>/load/', views.load_form, name='load_form'),
|
||||||
# path('api/forms/<int:form_id>/update/', views.update_form_builder, name='update_form_builder'),
|
# path('api/forms/<int:form_id>/update/', views.update_form_builder, name='update_form_builder'),
|
||||||
|
|
||||||
path('jobs/<slug:slug>/calendar/', views.interview_calendar_view, name='interview_calendar'),
|
path('jobs/<slug:slug>/calendar/', views.interview_calendar_view, name='interview_calendar'),
|
||||||
path('jobs/<slug:slug>/calendar/interview/<int:interview_id>/', views.interview_detail_view, name='interview_detail'),
|
path('jobs/<slug:slug>/calendar/interview/<int:interview_id>/', views.interview_detail_view, name='interview_detail'),
|
||||||
]
|
]
|
||||||
|
|||||||
@ -320,20 +320,27 @@ def job_detail(request, slug):
|
|||||||
"""View details of a specific job"""
|
"""View details of a specific job"""
|
||||||
job = get_object_or_404(JobPosting, slug=slug)
|
job = get_object_or_404(JobPosting, slug=slug)
|
||||||
|
|
||||||
|
print(job)
|
||||||
# Get all candidates for this job, ordered by most recent
|
# Get all candidates for this job, ordered by most recent
|
||||||
applicants = job.candidates.all().order_by("-created_at")
|
applicants = job.candidates.all().order_by("-created_at")
|
||||||
|
print(applicants)
|
||||||
|
|
||||||
# Count candidates by stage for summary statistics
|
# Count candidates by stage for summary statistics
|
||||||
total_applicant = applicants.count()
|
total_applicant = applicants.count()
|
||||||
|
|
||||||
applied_count = applicants.filter(stage="Applied").count()
|
applied_count = applicants.filter(stage="Applied").count()
|
||||||
|
|
||||||
|
exam_count=applicants.filter(stage="Exam").count
|
||||||
|
|
||||||
interview_count = applicants.filter(stage="Interview").count()
|
interview_count = applicants.filter(stage="Interview").count()
|
||||||
|
|
||||||
offer_count = applicants.filter(stage="Offer").count()
|
offer_count = applicants.filter(stage="Offer").count()
|
||||||
|
|
||||||
|
|
||||||
status_form = JobPostingStatusForm(instance=job)
|
status_form = JobPostingStatusForm(instance=job)
|
||||||
image_upload_form=JobPostingImageForm(instance=job)
|
image_upload_form=JobPostingImageForm(instance=job)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# 2. Check for POST request (Status Update Submission)
|
# 2. Check for POST request (Status Update Submission)
|
||||||
if request.method == 'POST':
|
if request.method == 'POST':
|
||||||
@ -359,6 +366,7 @@ def job_detail(request, slug):
|
|||||||
"applicants": applicants,
|
"applicants": applicants,
|
||||||
"total_applicants": total_applicant,
|
"total_applicants": total_applicant,
|
||||||
"applied_count": applied_count,
|
"applied_count": applied_count,
|
||||||
|
'exam_count':exam_count,
|
||||||
"interview_count": interview_count,
|
"interview_count": interview_count,
|
||||||
"offer_count": offer_count,
|
"offer_count": offer_count,
|
||||||
'status_form':status_form,
|
'status_form':status_form,
|
||||||
@ -387,13 +395,13 @@ def job_image_upload(request, slug):
|
|||||||
|
|
||||||
|
|
||||||
def kaauh_career(request):
|
def kaauh_career(request):
|
||||||
active_jobs = JobPosting.objects.select_related(
|
active_jobs = JobPosting.objects.select_related(
|
||||||
'form_template'
|
'form_template'
|
||||||
).filter(
|
).filter(
|
||||||
status='ACTIVE',
|
status='ACTIVE',
|
||||||
form_template__is_active=True
|
form_template__is_active=True
|
||||||
)
|
)
|
||||||
|
|
||||||
return render(request,'jobs/career.html',{'active_jobs':active_jobs})
|
return render(request,'jobs/career.html',{'active_jobs':active_jobs})
|
||||||
|
|
||||||
|
|
||||||
@ -924,7 +932,7 @@ def delete_form_template(request, template_id):
|
|||||||
|
|
||||||
def form_wizard_view(request, template_id):
|
def form_wizard_view(request, template_id):
|
||||||
"""Display the form as a step-by-step wizard"""
|
"""Display the form as a step-by-step wizard"""
|
||||||
template = get_object_or_404(FormTemplate, id=template_id, is_active=True)
|
template = get_object_or_404(FormTemplate, pk=template_id, is_active=True)
|
||||||
job_id = template.job.internal_job_id
|
job_id = template.job.internal_job_id
|
||||||
return render(
|
return render(
|
||||||
request,
|
request,
|
||||||
@ -1011,7 +1019,7 @@ def submit_form(request, template_id):
|
|||||||
job=submission.template.job,
|
job=submission.template.job,
|
||||||
)
|
)
|
||||||
return redirect('application_success')
|
return redirect('application_success')
|
||||||
|
|
||||||
except Exception as e:
|
except Exception as e:
|
||||||
logger.error(f"Candidate creation failed,{e}")
|
logger.error(f"Candidate creation failed,{e}")
|
||||||
pass
|
pass
|
||||||
|
|||||||
@ -307,7 +307,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</li> {% endcomment %}
|
</li> {% endcomment %}
|
||||||
<li class="nav-item me-2">
|
<li class="nav-item me-4">
|
||||||
<a class="nav-link {% if request.resolver_match.url_name == 'job_list' %}active{% endif %}" href="{% url 'job_list' %}">
|
<a class="nav-link {% if request.resolver_match.url_name == 'job_list' %}active{% endif %}" href="{% url 'job_list' %}">
|
||||||
<span class="d-flex align-items-center gap-2">
|
<span class="d-flex align-items-center gap-2">
|
||||||
{% include "icons/jobs.html" %}
|
{% include "icons/jobs.html" %}
|
||||||
@ -316,7 +316,7 @@
|
|||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="nav-item me-2">
|
{% comment %} <li class="nav-item me-2">
|
||||||
<a class="nav-link {% if request.resolver_match.url_name == 'form_templates_list' %}active{% endif %}" href="{% url 'form_templates_list' %}">
|
<a class="nav-link {% if request.resolver_match.url_name == 'form_templates_list' %}active{% endif %}" href="{% url 'form_templates_list' %}">
|
||||||
<span class="d-flex align-items-center gap-2">
|
<span class="d-flex align-items-center gap-2">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||||
@ -327,18 +327,18 @@
|
|||||||
</span>
|
</span>
|
||||||
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li> {% endcomment %}
|
||||||
|
|
||||||
<li class="nav-item me-2">
|
<li class="nav-item me-4">
|
||||||
<a class="nav-link {% if request.resolver_match.url_name == 'candidate_list' %}active{% endif %}" href="{% url 'candidate_list' %}">
|
<a class="nav-link {% if request.resolver_match.url_name == 'candidate_list' %}active{% endif %}" href="{% url 'candidate_list' %}">
|
||||||
<span class="d-flex align-items-center gap-2">
|
<span class="d-flex align-items-center gap-2">
|
||||||
{% include "icons/users.html" %}
|
{% include "icons/users.html" %}
|
||||||
{% trans "Candidates" %}
|
{% trans "Applicants" %}
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="nav-item me-2">
|
<li class="nav-item me-4">
|
||||||
<a class="nav-link {% if request.resolver_match.url_name == 'list_meetings' %}active{% endif %}" href="{% url 'list_meetings' %}">
|
<a class="nav-link {% if request.resolver_match.url_name == 'list_meetings' %}active{% endif %}" href="{% url 'list_meetings' %}">
|
||||||
<span class="d-flex align-items-center gap-2">
|
<span class="d-flex align-items-center gap-2">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||||
@ -351,7 +351,7 @@
|
|||||||
</li>
|
</li>
|
||||||
|
|
||||||
|
|
||||||
<li class="nav-item me-2">
|
<li class="nav-item me-4">
|
||||||
<a class="nav-link {% if request.resolver_match.url_name == 'training_list' %}active{% endif %}" href="{% url 'training_list' %}">
|
<a class="nav-link {% if request.resolver_match.url_name == 'training_list' %}active{% endif %}" href="{% url 'training_list' %}">
|
||||||
<span class="d-flex align-items-center gap-2">
|
<span class="d-flex align-items-center gap-2">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||||
|
|||||||
@ -160,126 +160,6 @@
|
|||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ==================================== */
|
|
||||||
/* MULTI-COLORED CANDIDATE STAGE TRACKER */
|
|
||||||
/* ==================================== */
|
|
||||||
|
|
||||||
.progress-stages {
|
|
||||||
position: relative;
|
|
||||||
padding: 1.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-stages a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
min-width: 60px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
color: var(--stage-inactive);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage-icon {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: #e9ecef;
|
|
||||||
color: var(--stage-inactive);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
z-index: 10;
|
|
||||||
border: 2px solid white;
|
|
||||||
box-shadow: 0 0 0 2px #e9ecef;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------------- STAGE SPECIFIC COLORS ---------------- */
|
|
||||||
|
|
||||||
/* APPLIED STAGE (Teal) */
|
|
||||||
.stage-item[data-stage="Applied"].completed .stage-icon,
|
|
||||||
.stage-item[data-stage="Applied"].active .stage-icon {
|
|
||||||
background-color: var(--stage-applied);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.stage-item[data-stage="Applied"].active { color: var(--stage-applied); }
|
|
||||||
|
|
||||||
/* EXAM STAGE (Cyan/Info) */
|
|
||||||
.stage-item[data-stage="Exam"].completed .stage-icon,
|
|
||||||
.stage-item[data-stage="Exam"].active .stage-icon {
|
|
||||||
background-color: var(--stage-exam);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.stage-item[data-stage="Exam"].active { color: var(--stage-exam); }
|
|
||||||
|
|
||||||
/* INTERVIEW STAGE (Yellow/Warning) */
|
|
||||||
.stage-item[data-stage="Interview"].completed .stage-icon,
|
|
||||||
.stage-item[data-stage="Interview"].active .stage-icon {
|
|
||||||
background-color: var(--stage-interview);
|
|
||||||
color: var(--kaauh-primary-text); /* Dark text for light background */
|
|
||||||
}
|
|
||||||
.stage-item[data-stage="Interview"].active { color: var(--stage-interview); }
|
|
||||||
|
|
||||||
/* OFFER STAGE (Green/Success) */
|
|
||||||
.stage-item[data-stage="Offer"].completed .stage-icon,
|
|
||||||
.stage-item[data-stage="Offer"].active .stage-icon {
|
|
||||||
background-color: var(--stage-offer);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
.stage-item[data-stage="Offer"].active { color: var(--stage-offer); }
|
|
||||||
|
|
||||||
/* ---------------- GENERIC ACTIVE/COMPLETED STYLING ---------------- */
|
|
||||||
|
|
||||||
/* Active State (Applies glow/scale to current stage) */
|
|
||||||
.stage-item.active .stage-icon {
|
|
||||||
box-shadow: 0 0 0 4px rgba(0, 99, 110, 0.4);
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
.stage-item.active .stage-count {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Completed State (Applies dark text color to completed stages) */
|
|
||||||
.stage-item.completed {
|
|
||||||
color: var(--kaauh-primary-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Connector Line */
|
|
||||||
.stage-connector {
|
|
||||||
flex-grow: 1;
|
|
||||||
height: 3px;
|
|
||||||
background-color: #e9ecef;
|
|
||||||
margin: 0 0.5rem;
|
|
||||||
position: relative;
|
|
||||||
top: -18px;
|
|
||||||
z-index: 1;
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Line in completed state (Kept the line teal/primary for consistency) */
|
|
||||||
.stage-connector.completed {
|
|
||||||
background-color: var(--kaauh-teal);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Labels and counts */
|
|
||||||
.stage-label {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
margin-top: 0.4rem;
|
|
||||||
font-weight: 500;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.stage-count {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-top: 0.1rem;
|
|
||||||
color: #6c757d;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
@ -487,68 +367,12 @@
|
|||||||
|
|
||||||
{# RIGHT COLUMN: TABBED CARDS #}
|
{# RIGHT COLUMN: TABBED CARDS #}
|
||||||
<div class="col-lg-4 ">
|
<div class="col-lg-4 ">
|
||||||
<div class="card shadow-sm no-hover mb-4">
|
<div class="card shadow-sm no-hover mb-4">
|
||||||
<div class="card-body p-4">
|
<div class="card-body p-4">
|
||||||
<h6 class="text-muted mb-4">{% trans "Applicant Tracking" %}</h6>
|
<h6 class="text-muted mb-4">{% trans "Applicant Tracking" %}</h6>
|
||||||
<div class="progress-stages">
|
{% include 'jobs/partials/applicant_tracking.html' %}
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
|
||||||
|
|
||||||
{% comment %} STAGE 1: Applied {% endcomment %}
|
|
||||||
<a href="{% url 'job_candidates_list' job.slug %}?stage=Applied"
|
|
||||||
class="stage-item {% if current_stage == 'Applied' %}active{% endif %} {% if current_stage != 'Applied' and candidate.stage_history_has.Applied %}completed{% endif %}"
|
|
||||||
data-stage="Applied">
|
|
||||||
<div class="stage-icon">
|
|
||||||
<i class="fas fa-file-signature"></i>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="stage-label">{% trans "Applied" %}</div>
|
|
||||||
<div class="stage-count">{{ applied_count|default:"0" }}</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
{% comment %} CONNECTOR 1 -> 2 {% endcomment %}
|
|
||||||
<div class="stage-connector {% if current_stage != 'Applied' and candidate.stage_history_has.Exam %}completed{% endif %}"></div>
|
|
||||||
|
|
||||||
{% comment %} STAGE 2: Exam {% endcomment %}
|
|
||||||
<a href="{% url 'job_candidates_list' job.slug %}?stage=Exam"
|
|
||||||
class="stage-item {% if current_stage == 'Exam' %}active{% endif %} {% if current_stage != 'Exam' and candidate.stage_history_has.Exam %}completed{% endif %}"
|
|
||||||
data-stage="Exam">
|
|
||||||
<div class="stage-icon">
|
|
||||||
<i class="fas fa-clipboard-check"></i>
|
|
||||||
</div>
|
|
||||||
<div class="stage-label">{% trans "Exam" %}</div>
|
|
||||||
<div class="stage-count">{{ exam_count|default:"0" }}</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
{% comment %} CONNECTOR 2 -> 3 {% endcomment %}
|
|
||||||
<div class="stage-connector {% if current_stage != 'Exam' and candidate.stage_history_has.Interview %}completed{% endif %}"></div>
|
|
||||||
|
|
||||||
{% comment %} STAGE 3: Interview {% endcomment %}
|
|
||||||
<a href="{% url 'job_candidates_list' job.slug %}?stage=Interview"
|
|
||||||
class="stage-item {% if current_stage == 'Interview' %}active{% endif %} {% if current_stage != 'Interview' and candidate.stage_history_has.Interview %}completed{% endif %}"
|
|
||||||
data-stage="Interview">
|
|
||||||
<div class="stage-icon">
|
|
||||||
<i class="fas fa-comments"></i>
|
|
||||||
</div>
|
|
||||||
<div class="stage-label">{% trans "Interview" %}</div>
|
|
||||||
<div class="stage-count">{{ interview_count|default:"0" }}</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
{% comment %} CONNECTOR 3 -> 4 {% endcomment %}
|
|
||||||
<div class="stage-connector {% if current_stage != 'Interview' and candidate.stage_history_has.Offer %}completed{% endif %}"></div>
|
|
||||||
|
|
||||||
{% comment %} STAGE 4: Offer {% endcomment %}
|
|
||||||
<a href="{% url 'job_candidates_list' job.slug %}?stage=Offer"
|
|
||||||
class="stage-item {% if current_stage == 'Offer' %}active{% endif %} {% if current_stage != 'Offer' and candidate.stage_history_has.Offer %}completed{% endif %}"
|
|
||||||
data-stage="Offer">
|
|
||||||
<div class="stage-icon">
|
|
||||||
<i class="fas fa-handshake"></i>
|
|
||||||
</div>
|
|
||||||
<div class="stage-label">{% trans "Offer" %}</div>
|
|
||||||
<div class="stage-count">{{ offer_count|default:"0" }}</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card shadow-sm no-hover" style="height:400px;">
|
<div class="card shadow-sm no-hover" style="height:400px;">
|
||||||
|
|
||||||
{# RIGHT TABS NAVIGATION #}
|
{# RIGHT TABS NAVIGATION #}
|
||||||
@ -575,7 +399,7 @@
|
|||||||
{# TAB 1: APPLICANTS CONTENT #}
|
{# TAB 1: APPLICANTS CONTENT #}
|
||||||
<div class="tab-pane fade show active" id="applicants-pane" role="tabpanel" aria-labelledby="applicants-tab">
|
<div class="tab-pane fade show active" id="applicants-pane" role="tabpanel" aria-labelledby="applicants-tab">
|
||||||
<h5 class="mb-3">{% trans "Total Applicants" %} (<span id="total_candidates">{{ total_applicants }}</span>)</h5>
|
<h5 class="mb-3">{% trans "Total Applicants" %} (<span id="total_candidates">{{ total_applicants }}</span>)</h5>
|
||||||
{% if total_applicants > 0 %}
|
{% comment %} {% if total_applicants > 0 %}
|
||||||
<div class="row mb-4 applicant-stats">
|
<div class="row mb-4 applicant-stats">
|
||||||
<div class="col-4">
|
<div class="col-4">
|
||||||
<div class="stat-item">
|
<div class="stat-item">
|
||||||
@ -602,7 +426,7 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% endif %}
|
{% endif %} {% endcomment %}
|
||||||
|
|
||||||
<div class="d-grid gap-2">
|
<div class="d-grid gap-2">
|
||||||
<a href="{% url 'candidate_create_for_job' job.slug %}" class="btn btn-main-action">
|
<a href="{% url 'candidate_create_for_job' job.slug %}" class="btn btn-main-action">
|
||||||
@ -699,12 +523,12 @@
|
|||||||
<i class="fas fa-list-alt me-1"></i> {% trans "View All Existing Forms" %}
|
<i class="fas fa-list-alt me-1"></i> {% trans "View All Existing Forms" %}
|
||||||
</a> {% endcomment %}
|
</a> {% endcomment %}
|
||||||
|
|
||||||
<a href="{% url 'candidate_create_for_job' job.slug %}" class="btn btn-main-action">
|
{% comment %} <a href="{% url 'candidate_create_for_job' job.slug %}" class="btn btn-main-action">
|
||||||
<i class="fas fa-user-plus"></i> {% trans "Create Candidate" %}
|
<i class="fas fa-user-plus"></i> {% trans "Create Candidate" %}
|
||||||
</a>
|
</a>
|
||||||
<a href="{% url 'candidate_screening_view' job.slug %}" class="btn btn-main-action">
|
<a href="{% url 'candidate_screening_view' job.slug %}" class="btn btn-main-action">
|
||||||
<i class="fas fa-layer-group"></i> {% trans "Manage Tiers" %}
|
<i class="fas fa-layer-group"></i> {% trans "Manage Tiers" %}
|
||||||
</a>
|
</a> {% endcomment %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -89,10 +89,10 @@
|
|||||||
.table-hover tbody tr:hover {
|
.table-hover tbody tr:hover {
|
||||||
background-color: #f3f7f9;
|
background-color: #f3f7f9;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Optimized Main Table Column Widths (Total must be 100%) */
|
/* Optimized Main Table Column Widths (Total must be 100%) */
|
||||||
.table th:nth-child(1) { width: 22%; } /* Job ID (Tight) */
|
.table th:nth-child(1) { width: 22%; } /* Job ID (Tight) */
|
||||||
|
|
||||||
.table th:nth-child(2) { width: 12%; } /* Source (Tight) */
|
.table th:nth-child(2) { width: 12%; } /* Source (Tight) */
|
||||||
.table th:nth-child(3) { width: 8%; } /* Actions (Tight, icon buttons) */
|
.table th:nth-child(3) { width: 8%; } /* Actions (Tight, icon buttons) */
|
||||||
.table th:nth-child(4) { width: 8%; } /* Form (Tight, icon buttons) */
|
.table th:nth-child(4) { width: 8%; } /* Form (Tight, icon buttons) */
|
||||||
@ -114,17 +114,17 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
color: #6c757d;
|
color: #6c757d;
|
||||||
font-size: 0.75rem; /* Even smaller font for nested headers */
|
font-size: 0.75rem; /* Even smaller font for nested headers */
|
||||||
width: calc(100% / 7);
|
width: calc(100% / 7);
|
||||||
}
|
}
|
||||||
/* Explicit widths are technically defined by the 1/7 rule, but keeping them for clarity/safety */
|
/* Explicit widths are technically defined by the 1/7 rule, but keeping them for clarity/safety */
|
||||||
.nested-header-table thead th:nth-child(1),
|
.nested-header-table thead th:nth-child(1),
|
||||||
.nested-header-table thead th:nth-child(2),
|
.nested-header-table thead th:nth-child(2),
|
||||||
.nested-header-table thead th:nth-child(5) {
|
.nested-header-table thead th:nth-child(5) {
|
||||||
width: calc(100% / 7);
|
width: calc(100% / 7);
|
||||||
}
|
}
|
||||||
.nested-header-table thead th:nth-child(3),
|
.nested-header-table thead th:nth-child(3),
|
||||||
.nested-header-table thead th:nth-child(4) {
|
.nested-header-table thead th:nth-child(4) {
|
||||||
width: calc(100% / 7 * 2);
|
width: calc(100% / 7 * 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Inner Nested Table (P/F) */
|
/* Inner Nested Table (P/F) */
|
||||||
@ -157,9 +157,9 @@
|
|||||||
font-size: 0.9rem; /* Keep data readable */
|
font-size: 0.9rem; /* Keep data readable */
|
||||||
border-left: 1px solid var(--kaauh-border);
|
border-left: 1px solid var(--kaauh-border);
|
||||||
}
|
}
|
||||||
.candidate-data-cell a {
|
.candidate-data-cell a {
|
||||||
display: block;
|
display: block;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding: 0.4rem 0; /* Minimized vertical padding */
|
padding: 0.4rem 0; /* Minimized vertical padding */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -232,7 +232,7 @@
|
|||||||
<th scope="col">{% trans "Source" %}</th>
|
<th scope="col">{% trans "Source" %}</th>
|
||||||
<th scope="col">{% trans "Actions" %}</th>
|
<th scope="col">{% trans "Actions" %}</th>
|
||||||
<th scop="col" class="text-center">{% trans "Manage Forms" %}</th>
|
<th scop="col" class="text-center">{% trans "Manage Forms" %}</th>
|
||||||
|
|
||||||
<th scope="col" colspan="7" class="candidate-management-header">
|
<th scope="col" colspan="7" class="candidate-management-header">
|
||||||
{% trans "Applicants Metrics" %}
|
{% trans "Applicants Metrics" %}
|
||||||
<table class="nested-header-table">
|
<table class="nested-header-table">
|
||||||
@ -240,7 +240,7 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<th style="width: 14.28%;">{% trans "Applied" %}</th>
|
<th style="width: 14.28%;">{% trans "Applied" %}</th>
|
||||||
<th style="width: 14.28%;">{% trans "Screened" %}</th>
|
<th style="width: 14.28%;">{% trans "Screened" %}</th>
|
||||||
|
|
||||||
<th colspan="2">{% trans "Exam" %}
|
<th colspan="2">{% trans "Exam" %}
|
||||||
<table class="nested-stage-metrics">
|
<table class="nested-stage-metrics">
|
||||||
<thead>
|
<thead>
|
||||||
@ -249,7 +249,7 @@
|
|||||||
</thead>
|
</thead>
|
||||||
</table>
|
</table>
|
||||||
</th>
|
</th>
|
||||||
|
|
||||||
<th colspan="2">{% trans "Interview" %}
|
<th colspan="2">{% trans "Interview" %}
|
||||||
<table class="nested-stage-metrics">
|
<table class="nested-stage-metrics">
|
||||||
<thead>
|
<thead>
|
||||||
@ -285,21 +285,23 @@
|
|||||||
</td>
|
</td>
|
||||||
<td class="text-end">
|
<td class="text-end">
|
||||||
<div class="btn-group btn-group-sm" role="group">
|
<div class="btn-group btn-group-sm" role="group">
|
||||||
<a href="{% url 'form_wizard' job.form_template.id %}" class="btn btn-outline-primary" title="{% trans 'Preview' %}">
|
{% if job.form_template %}
|
||||||
<i class="fas fa-eye"></i>
|
<a href="{% url 'form_wizard' job.form_template.pk %}" class="btn btn-outline-primary" title="{% trans 'Preview' %}">
|
||||||
</a>
|
<i class="fas fa-eye"></i>
|
||||||
<a href="{% url 'form_builder' job.form_template.id %}" class="btn btn-outline-secondary" title="{% trans 'Edit' %}">
|
</a>
|
||||||
<i class="fas fa-edit"></i>
|
<a href="{% url 'form_builder' job.form_template.id %}" class="btn btn-outline-secondary" title="{% trans 'Edit' %}">
|
||||||
</a>
|
<i class="fas fa-edit"></i>
|
||||||
<a href="{% url 'form_template_submissions_list' job.form_template.slug %}" class="btn btn-outline-secondary" title="{% trans 'Submissions' %}">
|
</a>
|
||||||
<i class="fas fa-file-alt"></i>
|
<a href="{% url 'form_template_submissions_list' job.form_template.slug %}" class="btn btn-outline-secondary" title="{% trans 'Submissions' %}">
|
||||||
</a>
|
<i class="fas fa-file-alt"></i>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
{# CANDIDATE MANAGEMENT DATA - 7 SEPARATE COLUMNS CORRESPONDING TO THE HEADER #}
|
{# CANDIDATE MANAGEMENT DATA - 7 SEPARATE COLUMNS CORRESPONDING TO THE HEADER #}
|
||||||
<td class="candidate-data-cell text-primary-theme"><a href="#" class="text-primary-theme">{% if job.metrics.applied %}{{ job.metrics.applied }}{% else %}-{% endif %}</a></td>
|
<td class="candidate-data-cell text-primary-theme"><a href="#" class="text-primary-theme">{% if job.metrics.applied %}{{ job.metrics.applied }}{% else %}-{% endif %}</a></td>
|
||||||
<td class="candidate-data-cell text-info"><a href="#" class="text-info">{% if job.metrics.screening %}{{ job.metrics.screening }}{% else %}-{% endif %}</a></td>
|
<td class="candidate-data-cell text-info"><a href="#" class="text-info">{% if job.metrics.screening %}{{ job.metrics.screening }}{% else %}-{% endif %}</a></td>
|
||||||
<td class="candidate-data-cell text-success"><a href="#" class="text-success">{% if job.metrics.exam_p %}{{ job.metrics.exam_p }}{% else %}-{% endif %}</a></td>
|
<td class="candidate-data-cell text-success"><a href="#" class="text-success">{% if job.metrics.exam_p %}{{ job.metrics.exam_p }}{% else %}-{% endif %}</a></td>
|
||||||
<td class="candidate-data-cell text-danger"><a href="#" class="text-danger">{% if job.metrics.exam_f %}{{ job.metrics.exam_f }}{% else %}-{% endif %}</a></td>
|
<td class="candidate-data-cell text-danger"><a href="#" class="text-danger">{% if job.metrics.exam_f %}{{ job.metrics.exam_f }}{% else %}-{% endif %}</a></td>
|
||||||
<td class="candidate-data-cell text-success"><a href="#" class="text-success">{% if job.metrics.interview_p %}{{ job.metrics.interview_p }}{% else %}-{% endif %}</a></td>
|
<td class="candidate-data-cell text-success"><a href="#" class="text-success">{% if job.metrics.interview_p %}{{ job.metrics.interview_p }}{% else %}-{% endif %}</a></td>
|
||||||
@ -313,7 +315,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% comment %} Fallback/Empty State {% endcomment %}
|
{% comment %} Fallback/Empty State {% endcomment %}
|
||||||
{% if not jobs and not job_list_data and not page_obj %}
|
{% if not jobs and not job_list_data and not page_obj %}
|
||||||
<div class="text-center py-5 card shadow-sm">
|
<div class="text-center py-5 card shadow-sm">
|
||||||
|
|||||||
183
templates/jobs/partials/applicant_tracking.html
Normal file
183
templates/jobs/partials/applicant_tracking.html
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
{% load static i18n %}
|
||||||
|
<style>
|
||||||
|
|
||||||
|
/* ==================================== */
|
||||||
|
/* MULTI-COLORED CANDIDATE STAGE TRACKER */
|
||||||
|
/* ==================================== */
|
||||||
|
|
||||||
|
.progress-stages {
|
||||||
|
position: relative;
|
||||||
|
padding: 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-stages a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
min-width: 60px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
color: var(--stage-inactive);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-icon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #e9ecef;
|
||||||
|
color: var(--stage-inactive);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
z-index: 10;
|
||||||
|
border: 2px solid white;
|
||||||
|
box-shadow: 0 0 0 2px #e9ecef;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------- STAGE SPECIFIC COLORS ---------------- */
|
||||||
|
|
||||||
|
/* APPLIED STAGE (Teal) */
|
||||||
|
.stage-item[data-stage="Applied"].completed .stage-icon,
|
||||||
|
.stage-item[data-stage="Applied"].active .stage-icon {
|
||||||
|
background-color: var(--stage-applied);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.stage-item[data-stage="Applied"].active { color: var(--stage-applied); }
|
||||||
|
|
||||||
|
/* EXAM STAGE (Cyan/Info) */
|
||||||
|
.stage-item[data-stage="Exam"].completed .stage-icon,
|
||||||
|
.stage-item[data-stage="Exam"].active .stage-icon {
|
||||||
|
background-color: var(--stage-exam);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.stage-item[data-stage="Exam"].active { color: var(--stage-exam); }
|
||||||
|
|
||||||
|
/* INTERVIEW STAGE (Yellow/Warning) */
|
||||||
|
.stage-item[data-stage="Interview"].completed .stage-icon,
|
||||||
|
.stage-item[data-stage="Interview"].active .stage-icon {
|
||||||
|
background-color: var(--stage-interview);
|
||||||
|
color: var(--kaauh-primary-text); /* Dark text for light background */
|
||||||
|
}
|
||||||
|
.stage-item[data-stage="Interview"].active { color: var(--stage-interview); }
|
||||||
|
|
||||||
|
/* OFFER STAGE (Green/Success) */
|
||||||
|
.stage-item[data-stage="Offer"].completed .stage-icon,
|
||||||
|
.stage-item[data-stage="Offer"].active .stage-icon {
|
||||||
|
background-color: var(--stage-offer);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.stage-item[data-stage="Offer"].active { color: var(--stage-offer); }
|
||||||
|
|
||||||
|
/* ---------------- GENERIC ACTIVE/COMPLETED STYLING ---------------- */
|
||||||
|
|
||||||
|
/* Active State (Applies glow/scale to current stage) */
|
||||||
|
.stage-item.active .stage-icon {
|
||||||
|
box-shadow: 0 0 0 4px rgba(0, 99, 110, 0.4);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
.stage-item.active .stage-count {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Completed State (Applies dark text color to completed stages) */
|
||||||
|
.stage-item.completed {
|
||||||
|
color: var(--kaauh-primary-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Connector Line */
|
||||||
|
.stage-connector {
|
||||||
|
flex-grow: 1;
|
||||||
|
height: 3px;
|
||||||
|
background-color: #e9ecef;
|
||||||
|
margin: 0 0.5rem;
|
||||||
|
position: relative;
|
||||||
|
top: -18px;
|
||||||
|
z-index: 1;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Line in completed state (Kept the line teal/primary for consistency) */
|
||||||
|
.stage-connector.completed {
|
||||||
|
background-color: var(--kaauh-teal);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Labels and counts */
|
||||||
|
.stage-label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
margin-top: 0.4rem;
|
||||||
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.stage-count {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
color: #6c757d;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="progress-stages">
|
||||||
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
|
|
||||||
|
{% comment %} STAGE 1: Applied {% endcomment %}
|
||||||
|
<a href="{% url 'candidate_screening_view' job.slug %}"
|
||||||
|
class="stage-item {% if current_stage == 'Applied' %}active{% endif %} {% if current_stage != 'Applied' and candidate.stage_history_has.Applied %}completed{% endif %}"
|
||||||
|
data-stage="Applied">
|
||||||
|
<div class="stage-icon ">
|
||||||
|
<i class="fas fa-file-signature cd_screening"></i>
|
||||||
|
</div>
|
||||||
|
<div class="stage-label cd_screening">{% trans "Screened" %}</div>
|
||||||
|
<div class="stage-count">{{ applied_count|default:"0" }}</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{% comment %} CONNECTOR 1 -> 2 {% endcomment %}
|
||||||
|
<div class="stage-connector {% if current_stage != 'Applied' and candidate.stage_history_has.Exam %}completed{% endif %}"></div>
|
||||||
|
|
||||||
|
{% comment %} STAGE 2: Exam {% endcomment %}
|
||||||
|
<a href="{% url 'candidate_exam_view' job.slug %}"
|
||||||
|
class="stage-item {% if current_stage == 'Exam' %}active{% endif %} {% if current_stage != 'Exam' and candidate.stage_history_has.Exam %}completed{% endif %}"
|
||||||
|
data-stage="Exam">
|
||||||
|
<div class="stage-icon">
|
||||||
|
<i class="fas fa-clipboard-check cd_exam"></i>
|
||||||
|
</div>
|
||||||
|
<div class="stage-label cd_exam">{% trans "Exam" %}</div>
|
||||||
|
<div class="stage-count ">{{ exam_count|default:"0" }}</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{% comment %} CONNECTOR 2 -> 3 {% endcomment %}
|
||||||
|
<div class="stage-connector {% if current_stage != 'Exam' and candidate.stage_history_has.Interview %}completed{% endif %}"></div>
|
||||||
|
|
||||||
|
{% comment %} STAGE 3: Interview {% endcomment %}
|
||||||
|
<a href="{% url 'candidate_interview_view' job.slug %}"
|
||||||
|
class="stage-item {% if current_stage == 'Interview' %}active{% endif %} {% if current_stage != 'Interview' and candidate.stage_history_has.Interview %}completed{% endif %}"
|
||||||
|
data-stage="Interview">
|
||||||
|
<div class="stage-icon">
|
||||||
|
<i class="fas fa-comments cd_interview"></i>
|
||||||
|
</div>
|
||||||
|
<div class="stage-label cd_interview">{% trans "Interview" %}</div>
|
||||||
|
<div class="stage-count">{{ interview_count|default:"0" }}</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{% comment %} CONNECTOR 3 -> 4 {% endcomment %}
|
||||||
|
<div class="stage-connector {% if current_stage != 'Interview' and candidate.stage_history_has.Offer %}completed{% endif %}"></div>
|
||||||
|
|
||||||
|
{% comment %} STAGE 4: Offer {% endcomment %}
|
||||||
|
<a href="{% url 'job_candidates_list' job.slug %}?stage=Offer"
|
||||||
|
class="stage-item {% if current_stage == 'Offer' %}active{% endif %} {% if current_stage != 'Offer' and candidate.stage_history_has.Offer %}completed{% endif %}"
|
||||||
|
data-stage="Offer">
|
||||||
|
<div class="stage-icon">
|
||||||
|
<i class="fas fa-handshake"></i>
|
||||||
|
</div>
|
||||||
|
<div class="stage-label">{% trans "Offer" %}</div>
|
||||||
|
<div class="stage-count">{{ offer_count|default:"0" }}</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -5,143 +5,143 @@
|
|||||||
|
|
||||||
{% block customCSS %}
|
{% block customCSS %}
|
||||||
<style>
|
<style>
|
||||||
/* Minimal Tier Management Styles */
|
/* KAAT-S UI Variables */
|
||||||
|
:root {
|
||||||
|
--kaauh-teal: #00636e;
|
||||||
|
--kaauh-teal-dark: #004a53;
|
||||||
|
--kaauh-border: #eaeff3;
|
||||||
|
--kaauh-primary-text: #343a40;
|
||||||
|
--kaauh-success: #28a745;
|
||||||
|
--kaauh-info: #17a2b8; /* Used for Exam stages (Pending status) */
|
||||||
|
--kaauh-danger: #dc3545;
|
||||||
|
--kaauh-warning: #ffc107;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Primary Color Overrides */
|
||||||
|
.text-primary-theme { color: var(--kaauh-teal) !important; }
|
||||||
|
.bg-primary-theme { background-color: var(--kaauh-teal) !important; }
|
||||||
|
|
||||||
|
/* 1. Main Container & Card Styling */
|
||||||
|
.kaauh-card {
|
||||||
|
border: 1px solid var(--kaauh-border);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dedicated style for the tier control block (consistent with .filter-controls) */
|
||||||
.tier-controls {
|
.tier-controls {
|
||||||
background-color: #f8f9fa;
|
background-color: var(--kaauh-border); /* Light background for control sections */
|
||||||
padding: 1rem;
|
border-radius: 0.75rem;
|
||||||
border-radius: 0.375rem;
|
padding: 1.25rem;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 2rem;
|
||||||
|
border: 1px solid var(--kaauh-border);
|
||||||
}
|
}
|
||||||
.tier-controls .form-row {
|
.tier-controls .form-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: end;
|
align-items: end;
|
||||||
gap: 0.75rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
.tier-controls .form-group {
|
.tier-controls .form-group {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
.bulk-update-controls {
|
|
||||||
background-color: #f8f9fa;
|
/* 2. Button Styling (Themed for Main Actions) */
|
||||||
padding: 1rem;
|
.btn-main-action {
|
||||||
border-radius: 0.375rem;
|
background-color: var(--kaauh-teal);
|
||||||
margin-bottom: 1.5rem;
|
border-color: var(--kaauh-teal);
|
||||||
|
color: white;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
.stage-groups {
|
.btn-main-action:hover {
|
||||||
display: grid;
|
background-color: var(--kaauh-teal-dark);
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
border-color: var(--kaauh-teal-dark);
|
||||||
gap: 1rem;
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
.btn-outline-secondary {
|
||||||
|
color: var(--kaauh-teal-dark);
|
||||||
|
border-color: var(--kaauh-teal);
|
||||||
|
}
|
||||||
|
.btn-outline-secondary:hover {
|
||||||
|
background-color: var(--kaauh-teal-dark);
|
||||||
|
color: white;
|
||||||
|
border-color: var(--kaauh-teal-dark);
|
||||||
|
}
|
||||||
|
/* Style for Bulk Pass button */
|
||||||
|
.btn-bulk-pass {
|
||||||
|
background-color: var(--kaauh-success);
|
||||||
|
border-color: var(--kaauh-success);
|
||||||
|
color: white;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.btn-bulk-pass:hover {
|
||||||
|
background-color: #1e7e34;
|
||||||
|
border-color: #1e7e34;
|
||||||
|
}
|
||||||
|
/* Style for Bulk Fail button */
|
||||||
|
.btn-bulk-fail {
|
||||||
|
background-color: var(--kaauh-danger);
|
||||||
|
border-color: var(--kaauh-danger);
|
||||||
|
color: white;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.btn-bulk-fail:hover {
|
||||||
|
background-color: #bd2130;
|
||||||
|
border-color: #bd2130;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 3. Input and Button Height Optimization (Thin look) */
|
||||||
|
.form-control-sm,
|
||||||
|
.btn-sm {
|
||||||
|
/* Reduce vertical padding even more than default Bootstrap 'sm' */
|
||||||
|
padding-top: 0.2rem !important;
|
||||||
|
padding-bottom: 0.2rem !important;
|
||||||
|
/* Ensure a consistent, small height for inputs and buttons */
|
||||||
|
height: 28px !important;
|
||||||
|
font-size: 0.8rem !important;
|
||||||
|
}
|
||||||
|
.btn-main-action.btn-sm { font-weight: 600 !important; }
|
||||||
|
|
||||||
|
/* Container for the timeline include */
|
||||||
|
.applicant-tracking-timeline {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
.stage-group {
|
|
||||||
border: 1px solid #dee2e6;
|
|
||||||
border-radius: 0.375rem;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.stage-group .stage-header {
|
|
||||||
background-color: #495057;
|
|
||||||
color: white;
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
.stage-group .stage-body {
|
|
||||||
padding: 0.75rem;
|
|
||||||
min-height: 80px;
|
|
||||||
}
|
|
||||||
.stage-candidate {
|
|
||||||
padding: 0.375rem;
|
|
||||||
border-bottom: 1px solid #f1f3f4;
|
|
||||||
}
|
|
||||||
.stage-candidate:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
.match-score {
|
|
||||||
font-weight: 600;
|
|
||||||
color: #0056b3;
|
|
||||||
}
|
|
||||||
.btn-sm {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
padding: 0.2rem 0.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tab Styles for Tiers */
|
/* 4. Candidate Table Styling (KAAT-S Look) */
|
||||||
.nav-tabs {
|
|
||||||
border-bottom: 1px solid #dee2e6;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
.nav-tabs .nav-link {
|
|
||||||
border: none;
|
|
||||||
color: #495057;
|
|
||||||
font-weight: 500;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
.nav-tabs .nav-link:hover {
|
|
||||||
border: none;
|
|
||||||
background-color: #f8f9fa;
|
|
||||||
}
|
|
||||||
.nav-tabs .nav-link.active {
|
|
||||||
color: #495057;
|
|
||||||
background-color: #fff;
|
|
||||||
border: none;
|
|
||||||
border-bottom: 2px solid #007bff;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.tier-1 .nav-link {
|
|
||||||
color: #155724;
|
|
||||||
}
|
|
||||||
.tier-1 .nav-link.active {
|
|
||||||
border-bottom-color: #28a745;
|
|
||||||
}
|
|
||||||
.tier-2 .nav-link {
|
|
||||||
color: #856404;
|
|
||||||
}
|
|
||||||
.tier-2 .nav-link.active {
|
|
||||||
border-bottom-color: #ffc107;
|
|
||||||
}
|
|
||||||
.tier-3 .nav-link {
|
|
||||||
color: #721c24;
|
|
||||||
}
|
|
||||||
.tier-3 .nav-link.active {
|
|
||||||
border-bottom-color: #dc3545;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Candidate Table Styles */
|
|
||||||
.candidate-table {
|
.candidate-table {
|
||||||
|
table-layout: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: separate;
|
border-collapse: separate;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-radius: 0.375rem;
|
border-radius: 0.5rem;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
||||||
}
|
}
|
||||||
.candidate-table thead {
|
.candidate-table thead {
|
||||||
background-color: #f8f9fa;
|
background-color: var(--kaauh-border);
|
||||||
}
|
}
|
||||||
.candidate-table th {
|
.candidate-table th {
|
||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
text-align: left;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 0.875rem;
|
color: var(--kaauh-teal-dark);
|
||||||
color: #495057;
|
border-bottom: 2px solid var(--kaauh-teal);
|
||||||
border-bottom: 1px solid #dee2e6;
|
font-size: 0.9rem;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
.candidate-table td {
|
.candidate-table td {
|
||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
border-bottom: 1px solid #f1f3f4;
|
border-bottom: 1px solid var(--kaauh-border);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
.candidate-table tbody tr:hover {
|
.candidate-table tbody tr:hover {
|
||||||
background-color: #f8f9fa;
|
background-color: #f1f3f4;
|
||||||
}
|
|
||||||
.candidate-table tbody tr:last-child td {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
}
|
||||||
.candidate-name {
|
.candidate-name {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 0.95rem;
|
color: var(--kaauh-primary-text);
|
||||||
}
|
}
|
||||||
.candidate-details {
|
.candidate-details {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
@ -151,211 +151,262 @@
|
|||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
.stage-badge {
|
|
||||||
|
/* 5. Badges */
|
||||||
|
.ai-score-badge {
|
||||||
|
background-color: var(--kaauh-teal-dark) !important;
|
||||||
|
color: white;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 0.4em 0.8em;
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
.status-badge { /* Used for Exam Status (Passed/Failed/Pending) */
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: 0.3em 0.7em;
|
||||||
|
border-radius: 0.35rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.bg-success { background-color: var(--kaauh-success) !important; color: white; }
|
||||||
|
.bg-danger { background-color: var(--kaauh-danger) !important; color: white; }
|
||||||
|
.bg-info-pending { background-color: var(--kaauh-info) !important; color: white; }
|
||||||
|
|
||||||
|
.tier-badge { /* Used for Tier labels */
|
||||||
|
font-size: 0.75rem;
|
||||||
padding: 0.125rem 0.5rem;
|
padding: 0.125rem 0.5rem;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
font-size: 0.7rem;
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-left: 0.375rem;
|
margin-left: 0.5rem;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.stage-Applied {
|
.tier-1-badge { background-color: var(--kaauh-success); color: white; }
|
||||||
background-color: #e9ecef;
|
.tier-2-badge { background-color: var(--kaauh-warning); color: #856404; }
|
||||||
color: #495057;
|
.tier-3-badge { background-color: #d1ecf1; color: #0c5460; }
|
||||||
}
|
|
||||||
.stage-Exam {
|
/* Fix table column widths for better layout */
|
||||||
background-color: #cce5ff;
|
.candidate-table th:nth-child(1) { width: 40px; } /* Checkbox */
|
||||||
color: #004085;
|
.candidate-table th:nth-child(4) { width: 10%; } /* AI Score */
|
||||||
}
|
.candidate-table th:nth-child(5) { width: 12%; } /* Exam Status */
|
||||||
.stage-Interview {
|
.candidate-table th:nth-child(6) { width: 15%; } /* Exam Date */
|
||||||
background-color: #d1ecf1;
|
.candidate-table th:nth-child(7) { width: 220px; } /* Actions */
|
||||||
color: #0c5460;
|
|
||||||
}
|
.cd_exam{
|
||||||
.stage-Offer {
|
color: #00636e;
|
||||||
background-color: #d4edda;
|
|
||||||
color: #155724;
|
|
||||||
}
|
|
||||||
.exam-controls {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.375rem;
|
|
||||||
margin-top: 0.375rem;
|
|
||||||
}
|
|
||||||
.exam-controls select,
|
|
||||||
.exam-controls input {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
padding: 0.125rem 0.25rem;
|
|
||||||
}
|
|
||||||
.tier-badge {
|
|
||||||
font-size: 0.7rem;
|
|
||||||
padding: 0.125rem 0.375rem;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
background-color: rgba(0,0,0,0.1);
|
|
||||||
color: #495057;
|
|
||||||
margin-left: 0.375rem;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="container py-4">
|
<div class="container-fluid py-4">
|
||||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||||
<div>
|
<div>
|
||||||
<h1 class="h3 mb-1">
|
<h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
|
||||||
<i class="fas fa-layer-group me-2"></i>
|
<i class="fas fa-edit me-2"></i>
|
||||||
{% trans "Exam" %} - {{ job.title }}
|
{% trans "Exam Management" %} - {{ job.title }}
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-muted mb-0">
|
<h2 class="h5 text-muted mb-0">
|
||||||
Total Candidates: {{ total_candidates }}
|
{% trans "Candidates in Exam Stage:" %} <span class="fw-bold">{{ total_candidates }}</span>
|
||||||
</p>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<a href="{% url 'job_detail' job.slug %}" class="btn btn-outline-secondary">
|
<a href="{% url 'job_detail' job.slug %}" class="btn btn-outline-secondary">
|
||||||
<i class="fas fa-arrow-left me-1"></i> {% trans "Back to Job" %}
|
<i class="fas fa-arrow-left me-1"></i> {% trans "Back to Job" %}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tier Controls -->
|
{# APPLICANT TRACKING TIMELINE INCLUSION #}
|
||||||
<div class="tier-controls">
|
<div class="applicant-tracking-timeline">
|
||||||
|
{% include 'jobs/partials/applicant_tracking.html' %}
|
||||||
|
</div>
|
||||||
|
{# END APPLICANT TRACKING TIMELINE INCLUSION #}
|
||||||
|
|
||||||
|
{% comment %} <div class="tier-controls kaauh-card shadow-sm">
|
||||||
|
<h4 class="h6 mb-3 fw-bold" style="color: var(--kaauh-teal-dark);">
|
||||||
|
<i class="fas fa-sort-amount-up me-1"></i> {% trans "Define Top Candidates (Tiers)" %}
|
||||||
|
</h4>
|
||||||
<form method="post" class="mb-0">
|
<form method="post" class="mb-0">
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
<div class="form-row">
|
<div class="row g-3 align-items-end">
|
||||||
<div class="form-group">
|
<div class="col-md-3 col-sm-6">
|
||||||
<label for="tier1_count">{% trans "Number of candidates in Tier 1 (Top N)" %}</label>
|
<label for="tier1_count" class="form-label small text-muted mb-1">
|
||||||
<input type="number" name="tier1_count" id="tier1_count" class="form-control"
|
{% trans "Number of Tier 1 Candidates (Top N)" %}
|
||||||
value="{{ tier1_count }}" min="1" max="{{ total_candidates }}">
|
</label>
|
||||||
|
<input type="number" name="tier1_count" id="tier1_count" class="form-control form-control-sm"
|
||||||
|
value="{{ tier1_count }}" min="1" max="{{ total_candidates }}" placeholder="e.g., 50">
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="col-md-3 col-sm-6">
|
||||||
<button type="submit" name="update_tiers" class="btn btn-primary">
|
<button type="submit" name="update_tiers" class="btn btn-main-action btn-sm w-100">
|
||||||
<i class="fas fa-sync-alt me-1"></i> {% trans "Update Tiers" %}
|
<i class="fas fa-sync-alt me-1"></i> {% trans "Update Tiers" %}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-md-6 d-none d-md-block"></div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form> {% endcomment %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tier Display -->
|
<h2 class="h4 mb-3" style="color: var(--kaauh-primary-text);">
|
||||||
<h2 class="h4 mb-3 mt-5">{% trans "Candidate Tiers" %}</h2>
|
{% trans "Candidate List" %}
|
||||||
|
<span class="badge bg-primary-theme ms-2">{{ candidates|length }} / {{ total_candidates }} Total</span>
|
||||||
|
<small class="text-muted fw-normal ms-2">(Sorted by AI Score)</small>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="kaauh-card shadow-sm p-3">
|
||||||
<div class="candidate-table-responsive" data-signals__ifmissing="{_fetching: false, selections: Array({{ candidates|length }}).fill(false)}">
|
<div class="candidate-table-responsive" data-signals__ifmissing="{_fetching: false, selections: Array({{ candidates|length }}).fill(false)}">
|
||||||
{% url "bulk_update_candidate_exam_status" job.slug as bulk_update_candidate_exam_status_url %}
|
{% url "bulk_update_candidate_exam_status" job.slug as bulk_update_candidate_exam_status_url %}
|
||||||
{% if candidates %}
|
|
||||||
<button class="btn btn-primary"
|
<div class="mb-3 d-flex gap-2">
|
||||||
data-attr="{disabled: !$selections.filter(Boolean).length}"
|
{% if candidates %}
|
||||||
data-on-click="@post('{{bulk_update_candidate_exam_status_url}}',{
|
<button class="btn btn-bulk-pass btn-sm"
|
||||||
contentType: 'form',
|
data-attr="{disabled: !$selections.filter(Boolean).length}"
|
||||||
selector: '#myform',
|
data-on-click="@post('{{bulk_update_candidate_exam_status_url}}',{
|
||||||
headers: {'X-CSRFToken': '{{ csrf_token }}','status': 'pass'}
|
contentType: 'form',
|
||||||
})"
|
selector: '#candidate-form',
|
||||||
>Mark as Pass and move to Interview</button>
|
headers: {'X-CSRFToken': '{{ csrf_token }}','status': 'Passed'}
|
||||||
<button class="btn btn-danger"
|
})"
|
||||||
data-attr="{disabled: !$selections.filter(Boolean).length}"
|
>
|
||||||
data-on-click="@post('{{bulk_update_candidate_exam_status_url}}',{
|
<i class="fas fa-check-circle me-1"></i>
|
||||||
contentType: 'form',
|
{% trans "Bulk Mark Passed (-> Interview)" %}
|
||||||
selector: '#myform',
|
</button>
|
||||||
headers: {'X-CSRFToken': '{{ csrf_token }}','status': 'fail'}
|
<button class="btn btn-bulk-fail btn-sm"
|
||||||
})"
|
data-attr="{disabled: !$selections.filter(Boolean).length}"
|
||||||
>Mark as Failed</button>
|
data-on-click="@post('{{bulk_update_candidate_exam_status_url}}',{
|
||||||
{% endif %}
|
contentType: 'form',
|
||||||
<form id="myform" action="{{move_to_exam_url}}" method="post">
|
selector: '#candidate-form',
|
||||||
<table class="candidate-table">
|
headers: {'X-CSRFToken': '{{ csrf_token }}','status': 'Failed'}
|
||||||
<thead>
|
})"
|
||||||
<tr>
|
>
|
||||||
<th>
|
<i class="fas fa-times-circle me-1"></i>
|
||||||
{% if candidates %}
|
{% trans "Bulk Mark Failed" %}
|
||||||
<div class="form-check">
|
</button>
|
||||||
<input
|
{% endif %}
|
||||||
data-bind-_all
|
</div>
|
||||||
data-on-change="$selections = Array({{ candidates|length }}).fill($_all)"
|
|
||||||
data-effect="$selections; $_all = $selections.every(Boolean)"
|
<form id="candidate-form" method="post">
|
||||||
data-attr-disabled="$_fetching"
|
{% csrf_token %}
|
||||||
type="checkbox" class="form-check-input" id="candidate-{{ candidate.id }}">
|
<table class="table candidate-table align-middle">
|
||||||
</div>
|
<thead>
|
||||||
{% endif %}
|
<tr>
|
||||||
</th>
|
<th>
|
||||||
<th>{% trans "Name" %}</th>
|
{% if candidates %}
|
||||||
<th>{% trans "Contact" %}</th>
|
<div class="form-check">
|
||||||
<th>{% trans "AI Score" %}</th>
|
<input
|
||||||
<th>{% trans "Exam Status" %}</th>
|
data-bind-_all
|
||||||
<th>{% trans "Exam Date" %}</th>
|
data-on-change="$selections = Array({{ candidates|length }}).fill($_all)"
|
||||||
<th>{% trans "Actions" %}</th>
|
data-effect="$selections; $_all = $selections.every(Boolean)"
|
||||||
</tr>
|
data-attr-disabled="$_fetching"
|
||||||
</thead>
|
type="checkbox" class="form-check-input" id="checkAll">
|
||||||
<tbody>
|
</div>
|
||||||
{% for candidate in candidates %}
|
{% endif %}
|
||||||
|
</th>
|
||||||
|
<th>{% trans "Name" %}</th>
|
||||||
|
<th>{% trans "Contact" %}</th>
|
||||||
|
<th class="text-center">{% trans "AI Score" %}</th>
|
||||||
|
<th class="text-center">{% trans "Exam Status" %}</th>
|
||||||
|
<th>{% trans "Exam Date" %}</th>
|
||||||
|
<th>{% trans "Actions" %}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for candidate in candidates %}
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<div class="form-check">
|
<div class="form-check">
|
||||||
<input
|
<input
|
||||||
data-bind-selections
|
data-bind-selections
|
||||||
data-attr-disabled="$_fetching"
|
data-attr-disabled="$_fetching"
|
||||||
name="{{ candidate.id }}"
|
name="candidate_ids"
|
||||||
|
value="{{ candidate.id }}"
|
||||||
type="checkbox" class="form-check-input" id="candidate-{{ candidate.id }}">
|
type="checkbox" class="form-check-input" id="candidate-{{ candidate.id }}">
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div class="candidate-name">{{ candidate.name }}</div>
|
<div class="candidate-name">
|
||||||
</td>
|
{{ candidate.name }}
|
||||||
<td>
|
{# Tier logic updated to be cleaner #}
|
||||||
<div class="candidate-details">
|
{% if forloop.counter <= tier1_count %}
|
||||||
Email: {{ candidate.email }}<br>
|
<span class="stage-badge tier-1-badge">Tier 1</span>
|
||||||
Phone: {{ candidate.phone }}<br>
|
{% elif forloop.counter <= tier1_count|default:0|add:tier1_count %}
|
||||||
|
<span class="stage-badge tier-2-badge">Tier 2</span>
|
||||||
|
{% else %}
|
||||||
|
<span class="stage-badge tier-3-badge">Tier 3+</span>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge bg-success">{{ candidate.match_score|default:"0" }}</span>
|
<div class="candidate-details">
|
||||||
|
<i class="fas fa-envelope me-1"></i> {{ candidate.email }}<br>
|
||||||
|
<i class="fas fa-phone me-1"></i> {{ candidate.phone }}
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td class="text-center">
|
||||||
|
<span class="badge ai-score-badge">{{ candidate.match_score|default:"0" }}%</span>
|
||||||
|
</td>
|
||||||
|
<td class="text-center">
|
||||||
{% if candidate.exam_status == "Passed" %}
|
{% if candidate.exam_status == "Passed" %}
|
||||||
<span class="badge bg-success">{{ candidate.exam_status }}</span>
|
<span class="status-badge bg-success">{{ candidate.exam_status }}</span>
|
||||||
{% elif candidate.exam_status == "Failed" %}
|
{% elif candidate.exam_status == "Failed" %}
|
||||||
<span class="badge bg-danger">{{ candidate.exam_status }}</span>
|
<span class="status-badge bg-danger">{{ candidate.exam_status }}</span>
|
||||||
|
{% else %}
|
||||||
|
<span class="status-badge bg-info-pending">Pending</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</td>
|
</td>
|
||||||
<td>{{candidate.exam_date|date:"M d, Y h:i A"}}</td>
|
|
||||||
<td>
|
<td>
|
||||||
<button class="btn btn-primary"
|
{{candidate.exam_date|date:"M d, Y h:i A"|default:"N/A"}}
|
||||||
|
</td>
|
||||||
|
<td class="d-flex flex-wrap gap-1">
|
||||||
|
<button type="button" class="btn btn-outline-secondary btn-sm"
|
||||||
data-bs-toggle="modal"
|
data-bs-toggle="modal"
|
||||||
data-bs-target="#candidateviewModal"
|
data-bs-target="#candidateviewModal"
|
||||||
hx-get="{% url 'candidate_criteria_view_htmx' candidate.pk %}"
|
hx-get="{% url 'candidate_criteria_view_htmx' candidate.pk %}"
|
||||||
hx-target="#candidateviewModalBody"
|
hx-target="#candidateviewModalBody"
|
||||||
>
|
title="View Profile">
|
||||||
{% include "icons/view.html" %}
|
<i class="fas fa-eye"></i> View
|
||||||
{% trans "View" %}</button>
|
</button>
|
||||||
<button class="btn btn-primary"
|
<button type="button" class="btn btn-main-action btn-sm"
|
||||||
data-bs-toggle="modal"
|
data-bs-toggle="modal"
|
||||||
data-bs-target="#candidateviewModal"
|
data-bs-target="#candidateviewModal"
|
||||||
hx-get="{% url 'update_candidate_exam_status' candidate.slug %}"
|
hx-get="{% url 'update_candidate_exam_status' candidate.slug %}"
|
||||||
hx-target="#candidateviewModalBody"
|
hx-target="#candidateviewModalBody"
|
||||||
>
|
title="Set Exam Status/Date">
|
||||||
{% include "icons/view.html" %}
|
<i class="fas fa-calendar-alt"></i> Set Exam
|
||||||
{% trans "Set Exam Date" %}</button>
|
</button>
|
||||||
{% if candidate.stage != "Exam" %}
|
|
||||||
<button hx-post="{% url 'candidate_set_exam_date' candidate.slug %}"
|
|
||||||
hx-target=".candidate-table"
|
|
||||||
hx-select=".candidate-table"
|
|
||||||
hx-swap="outerHTML"
|
|
||||||
class="btn btn-primary"> {% trans "Move to Exam" %} {% include "icons/right.html" %}</button>
|
|
||||||
{% endif %}
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</form>
|
{% if not candidates %}
|
||||||
</div>
|
<div class="alert alert-info text-center mt-3 mb-0" role="alert">
|
||||||
<!-- Tab Content -->
|
<i class="fas fa-info-circle me-1"></i>
|
||||||
|
{% trans "No candidates are currently in the Exam stage for this job." %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="modal fade modal-lg" id="candidateviewModal" tabindex="-1" aria-labelledby="candidateviewModalLabel" aria-hidden="true">
|
<div class="modal fade modal-lg" id="candidateviewModal" tabindex="-1" aria-labelledby="candidateviewModalLabel" aria-hidden="true">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content kaauh-card">
|
||||||
<div class="modal-header">
|
<div class="modal-header" style="border-bottom: 1px solid var(--kaauh-border);">
|
||||||
<h5 class="modal-title" id="candidateviewModalLabel">Form Settings</h5>
|
<h5 class="modal-title" id="candidateviewModalLabel" style="color: var(--kaauh-teal-dark);">
|
||||||
|
{% trans "Candidate Details & Exam Update" %}
|
||||||
|
</h5>
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
<div id="candidateviewModalBody" class="modal-body">
|
<div id="candidateviewModalBody" class="modal-body">
|
||||||
|
<div class="text-center py-5 text-muted">
|
||||||
|
<i class="fas fa-spinner fa-spin fa-2x"></i><br>
|
||||||
|
{% trans "Loading candidate data..." %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer" style="border-top: 1px solid var(--kaauh-border);">
|
||||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
|
||||||
|
{% trans "Close" %}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -11,10 +11,16 @@
|
|||||||
--kaauh-teal-dark: #004a53;
|
--kaauh-teal-dark: #004a53;
|
||||||
--kaauh-border: #eaeff3;
|
--kaauh-border: #eaeff3;
|
||||||
--kaauh-primary-text: #343a40;
|
--kaauh-primary-text: #343a40;
|
||||||
--kaauh-success: #28a745; /* Standard success for positive actions */
|
--kaauh-success: #28a745;
|
||||||
--kaauh-info: #17a2b8; /* Standard info/exam badge */
|
--kaauh-info: #17a2b8;
|
||||||
|
--kaauh-danger: #dc3545;
|
||||||
|
--kaauh-warning: #ffc107;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Primary Color Overrides */
|
||||||
|
.text-primary-theme { color: var(--kaauh-teal) !important; }
|
||||||
|
.bg-primary-theme { background-color: var(--kaauh-teal) !important; }
|
||||||
|
|
||||||
/* 1. Main Container & Card Styling */
|
/* 1. Main Container & Card Styling */
|
||||||
.kaauh-card {
|
.kaauh-card {
|
||||||
border: 1px solid var(--kaauh-border);
|
border: 1px solid var(--kaauh-border);
|
||||||
@ -22,14 +28,17 @@
|
|||||||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
.tier-controls {
|
|
||||||
background-color: var(--kaauh-border); /* Light background for control sections */
|
/* Dedicated style for the filter block */
|
||||||
border-radius: 0.5rem;
|
.filter-controls {
|
||||||
padding: 1.25rem;
|
background-color: #f8f9fa;
|
||||||
margin-bottom: 1.5rem;
|
border-radius: 0.75rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
border: 1px solid var(--kaauh-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 2. Button Styling (from reference) */
|
/* 2. Button Styling (Themed for Main Actions) */
|
||||||
.btn-main-action {
|
.btn-main-action {
|
||||||
background-color: var(--kaauh-teal);
|
background-color: var(--kaauh-teal);
|
||||||
border-color: var(--kaauh-teal);
|
border-color: var(--kaauh-teal);
|
||||||
@ -51,22 +60,22 @@
|
|||||||
color: white;
|
color: white;
|
||||||
border-color: var(--kaauh-teal-dark);
|
border-color: var(--kaauh-teal-dark);
|
||||||
}
|
}
|
||||||
|
/* Style for the Bulk Move button */
|
||||||
/* 3. Tab Styles (View Switcher) */
|
.btn-bulk-action {
|
||||||
.nav-pills .nav-link {
|
background-color: var(--kaauh-teal-dark);
|
||||||
color: var(--kaauh-teal-dark);
|
border-color: var(--kaauh-teal-dark);
|
||||||
font-weight: 500;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
transition: background-color 0.2s;
|
|
||||||
}
|
|
||||||
.nav-pills .nav-link.active {
|
|
||||||
background-color: var(--kaauh-teal);
|
|
||||||
color: white;
|
color: white;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.btn-bulk-action:hover {
|
||||||
|
background-color: #00363e;
|
||||||
|
border-color: #00363e;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 4. Candidate Table Styling (Aligned with KAAT-S) */
|
/* 3. Candidate Table Styling (Aligned with KAAT-S) */
|
||||||
.candidate-table {
|
.candidate-table {
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
border-collapse: separate;
|
border-collapse: separate;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
@ -77,19 +86,26 @@
|
|||||||
background-color: var(--kaauh-border);
|
background-color: var(--kaauh-border);
|
||||||
}
|
}
|
||||||
.candidate-table th {
|
.candidate-table th {
|
||||||
padding: 0.75rem;
|
padding: 0.75rem 1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--kaauh-teal-dark);
|
color: var(--kaauh-teal-dark);
|
||||||
border-bottom: 2px solid var(--kaauh-teal);
|
border-bottom: 2px solid var(--kaauh-teal);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
.candidate-table td {
|
.candidate-table td {
|
||||||
padding: 0.75rem;
|
padding: 0.75rem 1rem;
|
||||||
border-bottom: 1px solid var(--kaauh-border);
|
border-bottom: 1px solid var(--kaauh-border);
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
.candidate-table tbody tr:hover {
|
.candidate-table tbody tr:hover {
|
||||||
background-color: #f1f3f4;
|
background-color: #f1f3f4;
|
||||||
}
|
}
|
||||||
|
.candidate-table thead th:nth-child(1) { width: 40px; }
|
||||||
|
.candidate-table thead th:nth-child(4) { width: 10%; }
|
||||||
|
.candidate-table thead th:nth-child(7) { width: 100px; }
|
||||||
|
|
||||||
.candidate-name {
|
.candidate-name {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--kaauh-primary-text);
|
color: var(--kaauh-primary-text);
|
||||||
@ -98,206 +114,259 @@
|
|||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: #6c757d;
|
color: #6c757d;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 5. Badges (Status/Score) */
|
/* 4. Badges and Statuses */
|
||||||
|
.ai-score-badge {
|
||||||
|
background-color: var(--kaauh-teal-dark) !important;
|
||||||
|
color: white;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 0.4em 0.8em;
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
}
|
||||||
.status-badge {
|
.status-badge {
|
||||||
font-size: 0.8rem;
|
font-size: 0.75rem;
|
||||||
padding: 0.3em 0.7em;
|
padding: 0.3em 0.7em;
|
||||||
border-radius: 0.35rem;
|
border-radius: 0.35rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
}
|
||||||
.bg-applicant { background-color: #6c757d; color: white; } /* Secondary */
|
.bg-applicant { background-color: #6c757d !important; color: white; }
|
||||||
.bg-candidate { background-color: var(--kaauh-success); color: white; } /* Success */
|
.bg-candidate { background-color: var(--kaauh-success) !important; color: white; }
|
||||||
.bg-score { background-color: var(--kaauh-teal-dark); color: white; }
|
|
||||||
.bg-exam-status { background-color: var(--kaauh-info); color: white; }
|
|
||||||
|
|
||||||
/* 6. Stage Badges (More distinct from KAAT-S reference) */
|
/* Stage Badges */
|
||||||
.stage-badge {
|
.stage-badge {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
padding: 0.25rem 0.6rem;
|
padding: 0.25rem 0.6rem;
|
||||||
border-radius: 0.3rem;
|
border-radius: 0.3rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
}
|
}
|
||||||
.stage-Applied { background-color: #e9ecef; color: #495057; }
|
.stage-Applied { background-color: #e9ecef; color: #495057; }
|
||||||
.stage-Exam { background-color: #d1ecf1; color: #0c5460; } /* Light cyan/info */
|
.stage-Screening { background-color: var(--kaauh-info); color: white; }
|
||||||
.stage-Interview { background-color: #ffc107; color: #856404; } /* Yellow/warning */
|
.stage-Exam { background-color: var(--kaauh-warning); color: #856404; }
|
||||||
.stage-Offer { background-color: #d4edda; color: #155724; } /* Light green/success */
|
.stage-Interview { background-color: #17a2b8; color: white; }
|
||||||
|
.stage-Offer { background-color: var(--kaauh-success); color: white; }
|
||||||
/* Candidate Indicator (used for the single Potential Candidates list) */
|
|
||||||
.candidate-indicator-badge {
|
/* Timeline specific container */
|
||||||
font-size: 0.7rem;
|
.applicant-tracking-timeline {
|
||||||
padding: 0.15rem 0.4rem;
|
margin-bottom: 2rem;
|
||||||
border-radius: 0.25rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-left: 0.5rem;
|
|
||||||
background-color: var(--kaauh-teal);
|
|
||||||
color: white;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- CUSTOM HEIGHT OPTIMIZATION (MAKING INPUTS/BUTTONS SMALLER) --- */
|
||||||
|
.form-control-sm,
|
||||||
|
.btn-sm {
|
||||||
|
/* Reduce vertical padding even more than default Bootstrap 'sm' */
|
||||||
|
padding-top: 0.2rem !important;
|
||||||
|
padding-bottom: 0.2rem !important;
|
||||||
|
/* Ensure a consistent, small height for both */
|
||||||
|
height: 28px !important;
|
||||||
|
font-size: 0.8rem !important; /* Slightly smaller font */
|
||||||
|
}
|
||||||
|
|
||||||
|
.cd_screening{
|
||||||
|
color: #00636e;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="container py-4">
|
<div class="container-fluid py-4">
|
||||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||||
<div>
|
<div>
|
||||||
<h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
|
<h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
|
||||||
<i class="fas fa-layer-group me-2"></i>
|
<i class="fas fa-layer-group me-2"></i>
|
||||||
{% trans "Applicant Screening for Job:" %} - {{ job.title }} <small class="text-muted fs-6">{{job.internal_job_id}}<small>
|
{% trans "Applicant Screening" %}
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-muted mb-0">
|
<h2 class="h5 text-muted mb-0">
|
||||||
Total Applicants: <span class="fw-bold">{{ total_candidates }}</span>
|
{% trans "Job:" %} {{ job.title }}
|
||||||
</p>
|
<span class="badge bg-secondary ms-2 fw-normal">{{ job.internal_job_id }}</span>
|
||||||
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<a href="{% url 'job_detail' job.slug %}" class="btn btn-outline-secondary">
|
<a href="{% url 'job_detail' job.slug %}" class="btn btn-outline-secondary">
|
||||||
<i class="fas fa-arrow-left me-1"></i> {% trans "Back to Job" %}
|
<i class="fas fa-arrow-left me-1"></i> {% trans "Back to Job" %}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tier-controls kaauh-card shadow-sm">
|
<div class="applicant-tracking-timeline">
|
||||||
<h4 class="h5 mb-3" style="color: var(--kaauh-teal-dark);">{% trans "Filter Potential Candidates" %}</h4>
|
{% include 'jobs/partials/applicant_tracking.html' %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-controls shadow-sm">
|
||||||
|
<h4 class="h6 mb-3 fw-bold" style="color: var(--kaauh-primary-text);">
|
||||||
|
<i class="fas fa-sort-numeric-up me-1"></i> {% trans "AI Scoring & Top Candidate Filter" %}
|
||||||
|
</h4>
|
||||||
|
|
||||||
<form method="post" class="mb-0">
|
<form method="post" class="mb-0">
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
<div class="row g-3 align-items-end">
|
<div class="row g-3 align-items-end">
|
||||||
|
|
||||||
<div class="col-md-3 col-sm-6">
|
<div class="col-md-2 col-sm-6">
|
||||||
<label for="min_ai_score" class="form-label small text-muted">
|
<label for="min_ai_score" class="form-label small text-muted mb-1">
|
||||||
{% trans "Minimum AI Score" %}
|
{% trans "Min AI Score" %}
|
||||||
</label>
|
</label>
|
||||||
<input type="number" name="min_ai_score" id="min_ai_score" class="form-control"
|
<input type="number" name="min_ai_score" id="min_ai_score" class="form-control form-control-sm"
|
||||||
value="{{ min_ai_score|default:'0' }}" min="0" max="100" step="1"
|
value="{{ min_ai_score|default:'0' }}" min="0" max="100" step="1"
|
||||||
placeholder="e.g., 75">
|
placeholder="e.g., 75">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-3 col-sm-6">
|
<div class="col-md-2 col-sm-6">
|
||||||
<label for="tier1_count" class="form-label small text-muted">
|
<label for="tier1_count" class="form-label small text-muted mb-1">
|
||||||
{% trans "Number of Potential Candidates (Top N)" %}
|
{% trans "Top N" %}
|
||||||
</label>
|
</label>
|
||||||
<input type="number" name="tier1_count" id="tier1_count" class="form-control"
|
<input type="number" name="tier1_count" id="tier1_count" class="form-control form-control-sm"
|
||||||
value="{{ tier1_count }}" min="1" max="{{ total_candidates }}">
|
value="{{ tier1_count }}" min="1" max="{{ total_candidates }}">
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<button type="submit" name="update_tiers" class="btn btn-primary">
|
<div class="col-md-3 col-sm-6">
|
||||||
<i class="fas fa-sync-alt me-1"></i> {% trans "Update Tiers" %}
|
<button type="submit" name="update_tiers" class="btn btn-main-action btn-sm w-100">
|
||||||
|
<i class="fas fa-sync-alt me-1"></i> {% trans "Update Filters" %}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{% comment %} Empty col for spacing (2 + 2 + 3 + 5 = 12) {% endcomment %}
|
||||||
|
<div class="col-md-5 d-none d-md-block"></div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Tier Display -->
|
<h2 class="h4 mb-3" style="color: var(--kaauh-primary-text);">
|
||||||
<h2 class="h4 mb-3 mt-5">{% trans "Candidate Tiers" %}</h2>
|
<i class="fas fa-users me-1"></i> {% trans "Candidate List" %}
|
||||||
<div class="candidate-table-responsive" data-signals__ifmissing="{_fetching: false, selections: Array({{ candidates|length }}).fill(false)}">
|
<span class="badge bg-primary-theme ms-2">{{ candidates|length }} / {{ total_candidates }} Total</span>
|
||||||
{% url "bulk_candidate_move_to_exam" as move_to_exam_url %}
|
</h2>
|
||||||
{% if candidates %}
|
|
||||||
<button class="btn btn-primary"
|
<div class="kaauh-card shadow-sm p-3">
|
||||||
data-attr="{disabled: !$selections.filter(Boolean).length}"
|
{% url "bulk_candidate_move_to_exam" as move_to_exam_url %}
|
||||||
data-on-click="@post('{{move_to_exam_url}}',{
|
|
||||||
contentType: 'form',
|
{% if candidates %}
|
||||||
selector: '#myform',
|
<button class="btn btn-bulk-action btn-sm mb-3"
|
||||||
headers: {'X-CSRFToken': '{{ csrf_token }}'}})"
|
data-attr="{disabled: !$selections.filter(Boolean).length}"
|
||||||
>Bulk Move To Exam</button>
|
data-on-click="@post('{{move_to_exam_url}}',{
|
||||||
{% endif %}
|
contentType: 'form',
|
||||||
<form id="myform" action="{{move_to_exam_url}}" method="post">
|
selector: '#candidate-form',
|
||||||
<table class="candidate-table">
|
headers: {'X-CSRFToken': '{{ csrf_token }}'}})"
|
||||||
<thead>
|
>
|
||||||
<tr>
|
<i class="fas fa-arrow-right me-1"></i> {% trans "Bulk Move to Exam" %}
|
||||||
<th>
|
</button>
|
||||||
{% if candidates %}
|
{% endif %}
|
||||||
<div class="form-check">
|
|
||||||
<input
|
<div class="table-responsive">
|
||||||
data-bind-_all
|
<form id="candidate-form" action="{{move_to_exam_url}}" method="post">
|
||||||
data-on-change="$selections = Array({{ candidates|length }}).fill($_all)"
|
{% csrf_token %}
|
||||||
data-effect="$selections; $_all = $selections.every(Boolean)"
|
<table class="table candidate-table align-middle">
|
||||||
data-attr-disabled="$_fetching"
|
<thead>
|
||||||
type="checkbox" class="form-check-input" id="candidate-{{ candidate.id }}">
|
<tr>
|
||||||
</div>
|
<th>
|
||||||
{% endif %}
|
{% if candidates %}
|
||||||
</th>
|
|
||||||
<th>{% trans "Name" %}</th>
|
|
||||||
<th>{% trans "Contact" %}</th>
|
|
||||||
<th>{% trans "AI Score" %}</th>
|
|
||||||
<th>{% trans "Status" %}</th>
|
|
||||||
<th>{% trans "Stage" %}</th>
|
|
||||||
<th>{% trans "Actions" %}</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{% for candidate in candidates %}
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<div class="form-check">
|
<div class="form-check">
|
||||||
<input
|
<input
|
||||||
data-bind-selections
|
data-bind-_all
|
||||||
|
data-on-change="$selections = Array({{ candidates|length }}).fill($_all)"
|
||||||
|
data-effect="$selections; $_all = $selections.every(Boolean)"
|
||||||
data-attr-disabled="$_fetching"
|
data-attr-disabled="$_fetching"
|
||||||
name="{{ candidate.id }}"
|
type="checkbox" class="form-check-input" id="checkAll">
|
||||||
|
|
||||||
type="checkbox" class="form-check-input" id="candidate-{{ candidate.id }}">
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
{% endif %}
|
||||||
<td>
|
</th>
|
||||||
<div class="candidate-name">{{ candidate.name }}</div>
|
<th>{% trans "Candidate Name" %}</th>
|
||||||
</td>
|
<th>{% trans "Contact Info" %}</th>
|
||||||
<td>
|
<th class="text-center">{% trans "AI Score" %}</th>
|
||||||
<div class="candidate-details">
|
<th>{% trans "Application Status" %}</th>
|
||||||
Email: {{ candidate.email }}<br>
|
<th>{% trans "Current Stage" %}</th>
|
||||||
Phone: {{ candidate.phone }}<br>
|
<th class="text-center">{% trans "Actions" %}</th>
|
||||||
</div>
|
</tr>
|
||||||
</td>
|
</thead>
|
||||||
<td>
|
<tbody>
|
||||||
<span class="badge bg-success">{{ candidate.match_score|default:"0" }}</span>
|
{% for candidate in candidates %}
|
||||||
</td>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="badge {% if candidate.applicant_status == 'Candidate' %}bg-success{% else %}bg-secondary{% endif %}">
|
<div class="form-check">
|
||||||
{{ candidate.get_applicant_status_display }}
|
<input
|
||||||
</span>
|
data-bind-selections
|
||||||
</td>
|
data-attr-disabled="$_fetching"
|
||||||
<td>
|
name="candidate_ids"
|
||||||
<span class="stage-badge stage-{{ candidate.stage }}">
|
value="{{ candidate.id }}"
|
||||||
{{ candidate.get_stage_display }}
|
type="checkbox" class="form-check-input" id="candidate-{{ candidate.id }}">
|
||||||
</span>
|
</div>
|
||||||
{% if candidate.stage == "Exam" and candidate.exam_status %}
|
</td>
|
||||||
<br>
|
<td>
|
||||||
<span class="badge bg-info">{{ candidate.get_exam_status_display }}</span>
|
<a href="#" class="candidate-name text-primary-theme text-decoration-none">
|
||||||
{% endif %}
|
{{ candidate.name }}
|
||||||
</td>
|
</a>
|
||||||
<td>
|
</td>
|
||||||
<button class="btn btn-primary"
|
<td>
|
||||||
data-bs-toggle="modal"
|
<div class="candidate-details">
|
||||||
data-bs-target="#candidateviewModal"
|
<i class="fas fa-envelope me-1"></i> {{ candidate.email }}<br>
|
||||||
hx-get="{% url 'candidate_criteria_view_htmx' candidate.pk %}"
|
<i class="fas fa-phone me-1"></i> {{ candidate.phone }}
|
||||||
hx-target="#candidateviewModalBody"
|
</div>
|
||||||
>
|
</td>
|
||||||
{% include "icons/view.html" %}
|
<td class="text-center">
|
||||||
{% trans "View" %}</button>
|
<span class="badge ai-score-badge">
|
||||||
{% if candidate.stage != "Exam" %}
|
{{ candidate.match_score|default:"0" }}%
|
||||||
<button hx-post="{% url 'candidate_move_to_exam' candidate.pk %}"
|
</span>
|
||||||
hx-target=".candidate-table"
|
</td>
|
||||||
hx-select=".candidate-table"
|
<td>
|
||||||
hx-swap="outerHTML"
|
<span class="badge status-badge {% if candidate.applicant_status == 'Candidate' %}bg-candidate{% else %}bg-applicant{% endif %}">
|
||||||
class="btn btn-primary"> {% trans "Move to Exam" %} {% include "icons/right.html" %}</button>
|
{{ candidate.get_applicant_status_display }}
|
||||||
{% endif %}
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
<td>
|
||||||
{% endfor %}
|
<span class="stage-badge stage-{{ candidate.stage }}">
|
||||||
</tbody>
|
{{ candidate.get_stage_display }}
|
||||||
</table>
|
</span>
|
||||||
</form>
|
{% if candidate.stage == "Exam" and candidate.exam_status %}
|
||||||
</div>
|
<br>
|
||||||
<!-- Tab Content -->
|
<span class="stage-badge bg-info text-white">
|
||||||
|
{{ candidate.get_exam_status_display }}
|
||||||
|
</span>
|
||||||
|
{% endif %}
|
||||||
|
</td>
|
||||||
|
<td class="text-center">
|
||||||
|
<button type="button" class="btn btn-outline-secondary btn-sm"
|
||||||
|
data-bs-toggle="modal"
|
||||||
|
data-bs-target="#candidateviewModal"
|
||||||
|
hx-get="{% url 'candidate_criteria_view_htmx' candidate.pk %}"
|
||||||
|
hx-target="#candidateviewModalBody"
|
||||||
|
title="View Candidate Profile and Criteria">
|
||||||
|
<i class="fas fa-eye"></i>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
{% if not candidates %}
|
||||||
|
<div class="alert alert-info text-center mt-3 mb-0" role="alert">
|
||||||
|
<i class="fas fa-info-circle me-1"></i>
|
||||||
|
{% trans "No candidates match the current stage and filter criteria." %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="modal fade modal-lg" id="candidateviewModal" tabindex="-1" aria-labelledby="candidateviewModalLabel" aria-hidden="true">
|
<div class="modal fade modal-lg" id="candidateviewModal" tabindex="-1" aria-labelledby="candidateviewModalLabel" aria-hidden="true">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
<div class="modal-content">
|
<div class="modal-content kaauh-card">
|
||||||
<div class="modal-header">
|
<div class="modal-header" style="border-bottom: 1px solid var(--kaauh-border);">
|
||||||
<h5 class="modal-title" id="candidateviewModalLabel">Form Settings</h5>
|
<h5 class="modal-title" id="candidateviewModalLabel" style="color: var(--kaauh-teal-dark);">
|
||||||
|
{% trans "Candidate Criteria Review" %}
|
||||||
|
</h5>
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
<div id="candidateviewModalBody" class="modal-body">
|
<div id="candidateviewModalBody" class="modal-body">
|
||||||
|
<div class="text-center py-5 text-muted">
|
||||||
|
<i class="fas fa-spinner fa-spin fa-2x"></i><br>
|
||||||
|
{% trans "Loading candidate data..." %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer" style="border-top: 1px solid var(--kaauh-border);">
|
||||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
|
||||||
|
{% trans "Close" %}
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user