marwan/kaauh_ats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui changes

Browse Source
This commit is contained in:
Faheed 2025-10-13 22:58:05 +03:00
commit 6521cdf2be
14 changed files with 785 additions and 633 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
db.sqlite3
View File

Binary file not shown.

BIN
recruitment/__pycache__/urls.cpython-312.pyc
View File

Binary file not shown.

BIN
recruitment/__pycache__/urls.cpython-313.pyc
View File

Binary file not shown.

BIN
recruitment/__pycache__/views.cpython-312.pyc
View File

Binary file not shown.

BIN
recruitment/__pycache__/views.cpython-313.pyc
View File

Binary file not shown.

14
recruitment/migrations/0010_merge_20251013_1819.py Normal file
View 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 = [
]

5
recruitment/urls.py
View File

@ -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/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>/', views.form_wizard_view, name='form_wizard'),
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/<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/<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/<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('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'),
]

22
recruitment/views.py
View File

@ -320,20 +320,27 @@ def job_detail(request, slug):
"""View details of a specific job"""
job = get_object_or_404(JobPosting, slug=slug)
print(job)
# Get all candidates for this job, ordered by most recent
applicants = job.candidates.all().order_by("-created_at")
print(applicants)
# Count candidates by stage for summary statistics
total_applicant = applicants.count()
applied_count = applicants.filter(stage="Applied").count()
exam_count=applicants.filter(stage="Exam").count
interview_count = applicants.filter(stage="Interview").count()
offer_count = applicants.filter(stage="Offer").count()
status_form = JobPostingStatusForm(instance=job)
image_upload_form=JobPostingImageForm(instance=job)
# 2. Check for POST request (Status Update Submission)
if request.method == 'POST':
@ -359,6 +366,7 @@ def job_detail(request, slug):
"applicants": applicants,
"total_applicants": total_applicant,
"applied_count": applied_count,
'exam_count':exam_count,
"interview_count": interview_count,
"offer_count": offer_count,
'status_form':status_form,
@ -387,13 +395,13 @@ def job_image_upload(request, slug):
def kaauh_career(request):
active_jobs = JobPosting.objects.select_related(
'form_template'
active_jobs = JobPosting.objects.select_related(
'form_template'
).filter(
status='ACTIVE',
form_template__is_active=True
)
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):
"""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
return render(
request,
@ -1011,7 +1019,7 @@ def submit_form(request, template_id):
job=submission.template.job,
)
return redirect('application_success')
except Exception as e:
logger.error(f"Candidate creation failed,{e}")
pass

14
templates/base.html
View File

@ -307,7 +307,7 @@
</span>
</a>
</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' %}">
<span class="d-flex align-items-center gap-2">
{% include "icons/jobs.html" %}
@ -316,7 +316,7 @@
</a>
</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' %}">
<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">
@ -327,18 +327,18 @@
</span>
</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' %}">
<span class="d-flex align-items-center gap-2">
{% include "icons/users.html" %}
{% trans "Candidates" %}
{% trans "Applicants" %}
</span>
</a>
</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' %}">
<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">
@ -351,7 +351,7 @@
</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' %}">
<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">

192
templates/jobs/job_detail.html
View File

@ -160,126 +160,6 @@
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>
{% endblock %}
@ -487,68 +367,12 @@
{# RIGHT COLUMN: TABBED CARDS #}
<div class="col-lg-4 ">
<div class="card shadow-sm no-hover mb-4">
<div class="card-body p-4">
<h6 class="text-muted mb-4">{% trans "Applicant Tracking" %}</h6>
<div class="progress-stages">
<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 class="card shadow-sm no-hover mb-4">
<div class="card-body p-4">
<h6 class="text-muted mb-4">{% trans "Applicant Tracking" %}</h6>
{% include 'jobs/partials/applicant_tracking.html' %}
</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 class="card shadow-sm no-hover" style="height:400px;">
{# RIGHT TABS NAVIGATION #}
@ -575,7 +399,7 @@
{# TAB 1: APPLICANTS CONTENT #}
<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>
{% if total_applicants > 0 %}
{% comment %} {% if total_applicants > 0 %}
<div class="row mb-4 applicant-stats">
<div class="col-4">
<div class="stat-item">
@ -602,7 +426,7 @@
</a>
</div>
{% endif %}
{% endif %} {% endcomment %}
<div class="d-grid gap-2">
<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" %}
</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" %}
</a>
<a href="{% url 'candidate_screening_view' job.slug %}" class="btn btn-main-action">
<i class="fas fa-layer-group"></i> {% trans "Manage Tiers" %}
</a>
</a> {% endcomment %}
</div>
</div>

54
templates/jobs/job_list.html
View File

@ -89,10 +89,10 @@
.table-hover tbody tr:hover {
background-color: #f3f7f9;
}
/* Optimized Main Table Column Widths (Total must be 100%) */
.table th:nth-child(1) { width: 22%; } /* Job ID (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(4) { width: 8%; } /* Form (Tight, icon buttons) */
@ -114,17 +114,17 @@
text-align: center;
color: #6c757d;
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 */
.nested-header-table thead th:nth-child(1),
.nested-header-table thead th:nth-child(2),
.nested-header-table thead th:nth-child(5) {
width: calc(100% / 7);
.nested-header-table thead th:nth-child(5) {
width: calc(100% / 7);
}
.nested-header-table thead th:nth-child(3),
.nested-header-table thead th:nth-child(4) {
width: calc(100% / 7 * 2);
.nested-header-table thead th:nth-child(4) {
width: calc(100% / 7 * 2);
}
/* Inner Nested Table (P/F) */
@ -157,9 +157,9 @@
font-size: 0.9rem; /* Keep data readable */
border-left: 1px solid var(--kaauh-border);
}
.candidate-data-cell a {
display: block;
text-decoration: none;
.candidate-data-cell a {
display: block;
text-decoration: none;
padding: 0.4rem 0; /* Minimized vertical padding */
}
</style>
@ -232,7 +232,7 @@
<th scope="col">{% trans "Source" %}</th>
<th scope="col">{% trans "Actions" %}</th>
<th scop="col" class="text-center">{% trans "Manage Forms" %}</th>
<th scope="col" colspan="7" class="candidate-management-header">
{% trans "Applicants Metrics" %}
<table class="nested-header-table">
@ -240,7 +240,7 @@
<tr>
<th style="width: 14.28%;">{% trans "Applied" %}</th>
<th style="width: 14.28%;">{% trans "Screened" %}</th>
<th colspan="2">{% trans "Exam" %}
<table class="nested-stage-metrics">
<thead>
@ -249,7 +249,7 @@
</thead>
</table>
</th>
<th colspan="2">{% trans "Interview" %}
<table class="nested-stage-metrics">
<thead>
@ -285,21 +285,23 @@
</td>
<td class="text-end">
<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' %}">
<i class="fas fa-eye"></i>
</a>
<a href="{% url 'form_builder' job.form_template.id %}" class="btn btn-outline-secondary" title="{% trans 'Edit' %}">
<i class="fas fa-edit"></i>
</a>
<a href="{% url 'form_template_submissions_list' job.form_template.slug %}" class="btn btn-outline-secondary" title="{% trans 'Submissions' %}">
<i class="fas fa-file-alt"></i>
</a>
{% if job.form_template %}
<a href="{% url 'form_wizard' job.form_template.pk %}" class="btn btn-outline-primary" title="{% trans 'Preview' %}">
<i class="fas fa-eye"></i>
</a>
<a href="{% url 'form_builder' job.form_template.id %}" class="btn btn-outline-secondary" title="{% trans 'Edit' %}">
<i class="fas fa-edit"></i>
</a>
<a href="{% url 'form_template_submissions_list' job.form_template.slug %}" class="btn btn-outline-secondary" title="{% trans 'Submissions' %}">
<i class="fas fa-file-alt"></i>
</a>
{% endif %}
</div>
</td>
{# 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-info"><a href="#" class="text-info">{% if job.metrics.screening %}{{ job.metrics.screening }}{% 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-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-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>
{% comment %} Fallback/Empty State {% endcomment %}
{% if not jobs and not job_list_data and not page_obj %}
<div class="text-center py-5 card shadow-sm">

183
templates/jobs/partials/applicant_tracking.html Normal file
View 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>

535
templates/recruitment/candidate_exam_view.html
View File

@ -5,143 +5,143 @@
{% block customCSS %}
<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 {
background-color: #f8f9fa;
padding: 1rem;
border-radius: 0.375rem;
margin-bottom: 1.5rem;
background-color: var(--kaauh-border); /* Light background for control sections */
border-radius: 0.75rem;
padding: 1.25rem;
margin-bottom: 2rem;
border: 1px solid var(--kaauh-border);
}
.tier-controls .form-row {
display: flex;
align-items: end;
gap: 0.75rem;
gap: 1rem;
}
.tier-controls .form-group {
flex: 1;
margin-bottom: 0;
}
.bulk-update-controls {
background-color: #f8f9fa;
padding: 1rem;
border-radius: 0.375rem;
margin-bottom: 1.5rem;
/* 2. Button Styling (Themed for Main Actions) */
.btn-main-action {
background-color: var(--kaauh-teal);
border-color: var(--kaauh-teal);
color: white;
font-weight: 600;
transition: all 0.2s ease;
}
.stage-groups {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
.btn-main-action:hover {
background-color: var(--kaauh-teal-dark);
border-color: var(--kaauh-teal-dark);
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;
}
.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 */
.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 */
/* 4. Candidate Table Styling (KAAT-S Look) */
.candidate-table {
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 0;
background-color: white;
border-radius: 0.375rem;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.candidate-table thead {
background-color: #f8f9fa;
background-color: var(--kaauh-border);
}
.candidate-table th {
padding: 0.75rem;
text-align: left;
font-weight: 600;
font-size: 0.875rem;
color: #495057;
border-bottom: 1px solid #dee2e6;
color: var(--kaauh-teal-dark);
border-bottom: 2px solid var(--kaauh-teal);
font-size: 0.9rem;
vertical-align: middle;
}
.candidate-table td {
padding: 0.75rem;
border-bottom: 1px solid #f1f3f4;
border-bottom: 1px solid var(--kaauh-border);
vertical-align: middle;
font-size: 0.9rem;
}
.candidate-table tbody tr:hover {
background-color: #f8f9fa;
}
.candidate-table tbody tr:last-child td {
border-bottom: none;
background-color: #f1f3f4;
}
.candidate-name {
font-weight: 600;
font-size: 0.95rem;
color: var(--kaauh-primary-text);
}
.candidate-details {
font-size: 0.8rem;
@ -151,211 +151,262 @@
overflow-x: auto;
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;
border-radius: 0.5rem;
font-size: 0.7rem;
font-weight: 600;
margin-left: 0.375rem;
margin-left: 0.5rem;
display: inline-block;
}
.stage-Applied {
background-color: #e9ecef;
color: #495057;
}
.stage-Exam {
background-color: #cce5ff;
color: #004085;
}
.stage-Interview {
background-color: #d1ecf1;
color: #0c5460;
}
.stage-Offer {
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;
.tier-1-badge { background-color: var(--kaauh-success); color: white; }
.tier-2-badge { background-color: var(--kaauh-warning); color: #856404; }
.tier-3-badge { background-color: #d1ecf1; color: #0c5460; }
/* Fix table column widths for better layout */
.candidate-table th:nth-child(1) { width: 40px; } /* Checkbox */
.candidate-table th:nth-child(4) { width: 10%; } /* AI Score */
.candidate-table th:nth-child(5) { width: 12%; } /* Exam Status */
.candidate-table th:nth-child(6) { width: 15%; } /* Exam Date */
.candidate-table th:nth-child(7) { width: 220px; } /* Actions */
.cd_exam{
color: #00636e;
}
</style>
{% endblock %}
{% 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>
<h1 class="h3 mb-1">
<i class="fas fa-layer-group me-2"></i>
{% trans "Exam" %} - {{ job.title }}
<h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
<i class="fas fa-edit me-2"></i>
{% trans "Exam Management" %} - {{ job.title }}
</h1>
<p class="text-muted mb-0">
Total Candidates: {{ total_candidates }}
</p>
<h2 class="h5 text-muted mb-0">
{% trans "Candidates in Exam Stage:" %} <span class="fw-bold">{{ total_candidates }}</span>
</h2>
</div>
<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" %}
</a>
</div>
<!-- Tier Controls -->
<div class="tier-controls">
{# APPLICANT TRACKING TIMELINE INCLUSION #}
<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">
{% csrf_token %}
<div class="form-row">
<div class="form-group">
<label for="tier1_count">{% trans "Number of candidates in Tier 1 (Top N)" %}</label>
<input type="number" name="tier1_count" id="tier1_count" class="form-control"
value="{{ tier1_count }}" min="1" max="{{ total_candidates }}">
<div class="row g-3 align-items-end">
<div class="col-md-3 col-sm-6">
<label for="tier1_count" class="form-label small text-muted mb-1">
{% trans "Number of Tier 1 Candidates (Top N)" %}
</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 class="form-group">
<button type="submit" name="update_tiers" class="btn btn-primary">
<div class="col-md-3 col-sm-6">
<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" %}
</button>
</div>
<div class="col-md-6 d-none d-md-block"></div>
</div>
</form>
</form> {% endcomment %}
</div>
<!-- Tier Display -->
<h2 class="h4 mb-3 mt-5">{% trans "Candidate Tiers" %}</h2>
<h2 class="h4 mb-3" style="color: var(--kaauh-primary-text);">
{% 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)}">
{% url "bulk_update_candidate_exam_status" job.slug as bulk_update_candidate_exam_status_url %}
{% if candidates %}
<button class="btn btn-primary"
data-attr="{disabled: !$selections.filter(Boolean).length}"
data-on-click="@post('{{bulk_update_candidate_exam_status_url}}',{
contentType: 'form',
selector: '#myform',
headers: {'X-CSRFToken': '{{ csrf_token }}','status': 'pass'}
})"
>Mark as Pass and move to Interview</button>
<button class="btn btn-danger"
data-attr="{disabled: !$selections.filter(Boolean).length}"
data-on-click="@post('{{bulk_update_candidate_exam_status_url}}',{
contentType: 'form',
selector: '#myform',
headers: {'X-CSRFToken': '{{ csrf_token }}','status': 'fail'}
})"
>Mark as Failed</button>
{% endif %}
<form id="myform" action="{{move_to_exam_url}}" method="post">
<table class="candidate-table">
<thead>
<tr>
<th>
{% if candidates %}
<div class="form-check">
<input
data-bind-_all
data-on-change="$selections = Array({{ candidates|length }}).fill($_all)"
data-effect="$selections; $_all = $selections.every(Boolean)"
data-attr-disabled="$_fetching"
type="checkbox" class="form-check-input" id="candidate-{{ candidate.id }}">
</div>
{% endif %}
</th>
<th>{% trans "Name" %}</th>
<th>{% trans "Contact" %}</th>
<th>{% trans "AI Score" %}</th>
<th>{% trans "Exam Status" %}</th>
<th>{% trans "Exam Date" %}</th>
<th>{% trans "Actions" %}</th>
</tr>
</thead>
<tbody>
{% for candidate in candidates %}
<div class="mb-3 d-flex gap-2">
{% if candidates %}
<button class="btn btn-bulk-pass btn-sm"
data-attr="{disabled: !$selections.filter(Boolean).length}"
data-on-click="@post('{{bulk_update_candidate_exam_status_url}}',{
contentType: 'form',
selector: '#candidate-form',
headers: {'X-CSRFToken': '{{ csrf_token }}','status': 'Passed'}
})"
>
<i class="fas fa-check-circle me-1"></i>
{% trans "Bulk Mark Passed (-> Interview)" %}
</button>
<button class="btn btn-bulk-fail btn-sm"
data-attr="{disabled: !$selections.filter(Boolean).length}"
data-on-click="@post('{{bulk_update_candidate_exam_status_url}}',{
contentType: 'form',
selector: '#candidate-form',
headers: {'X-CSRFToken': '{{ csrf_token }}','status': 'Failed'}
})"
>
<i class="fas fa-times-circle me-1"></i>
{% trans "Bulk Mark Failed" %}
</button>
{% endif %}
</div>
<form id="candidate-form" method="post">
{% csrf_token %}
<table class="table candidate-table align-middle">
<thead>
<tr>
<th>
{% if candidates %}
<div class="form-check">
<input
data-bind-_all
data-on-change="$selections = Array({{ candidates|length }}).fill($_all)"
data-effect="$selections; $_all = $selections.every(Boolean)"
data-attr-disabled="$_fetching"
type="checkbox" class="form-check-input" id="checkAll">
</div>
{% 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>
<td>
<div class="form-check">
<input
data-bind-selections
data-attr-disabled="$_fetching"
name="{{ candidate.id }}"
name="candidate_ids"
value="{{ candidate.id }}"
type="checkbox" class="form-check-input" id="candidate-{{ candidate.id }}">
</div>
</td>
<td>
<div class="candidate-name">{{ candidate.name }}</div>
</td>
<td>
<div class="candidate-details">
Email: {{ candidate.email }}<br>
Phone: {{ candidate.phone }}<br>
<div class="candidate-name">
{{ candidate.name }}
{# Tier logic updated to be cleaner #}
{% if forloop.counter <= tier1_count %}
<span class="stage-badge tier-1-badge">Tier 1</span>
{% 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>
</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 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" %}
<span class="badge bg-success">{{ candidate.exam_status }}</span>
<span class="status-badge bg-success">{{ candidate.exam_status }}</span>
{% 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 %}
</td>
<td>{{candidate.exam_date|date:"M d, Y h:i A"}}</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-target="#candidateviewModal"
hx-get="{% url 'candidate_criteria_view_htmx' candidate.pk %}"
hx-target="#candidateviewModalBody"
>
{% include "icons/view.html" %}
{% trans "View" %}</button>
<button class="btn btn-primary"
title="View Profile">
<i class="fas fa-eye"></i> View
</button>
<button type="button" class="btn btn-main-action btn-sm"
data-bs-toggle="modal"
data-bs-target="#candidateviewModal"
hx-get="{% url 'update_candidate_exam_status' candidate.slug %}"
hx-target="#candidateviewModalBody"
>
{% include "icons/view.html" %}
{% trans "Set Exam Date" %}</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 %}
title="Set Exam Status/Date">
<i class="fas fa-calendar-alt"></i> Set Exam
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
</div>
<!-- Tab Content -->
{% 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 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-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="candidateviewModalLabel">Form Settings</h5>
<div class="modal-content kaauh-card">
<div class="modal-header" style="border-bottom: 1px solid var(--kaauh-border);">
<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>
</div>
<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 class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<div class="modal-footer" style="border-top: 1px solid var(--kaauh-border);">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
{% trans "Close" %}
</button>
</div>
</div>
</div>

399
templates/recruitment/candidate_screening_view.html
View File

@ -11,10 +11,16 @@
--kaauh-teal-dark: #004a53;
--kaauh-border: #eaeff3;
--kaauh-primary-text: #343a40;
--kaauh-success: #28a745; /* Standard success for positive actions */
--kaauh-info: #17a2b8; /* Standard info/exam badge */
--kaauh-success: #28a745;
--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 */
.kaauh-card {
border: 1px solid var(--kaauh-border);
@ -22,14 +28,17 @@
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
background-color: white;
}
.tier-controls {
background-color: var(--kaauh-border); /* Light background for control sections */
border-radius: 0.5rem;
padding: 1.25rem;
margin-bottom: 1.5rem;
/* Dedicated style for the filter block */
.filter-controls {
background-color: #f8f9fa;
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 {
background-color: var(--kaauh-teal);
border-color: var(--kaauh-teal);
@ -51,22 +60,22 @@
color: white;
border-color: var(--kaauh-teal-dark);
}
/* 3. Tab Styles (View Switcher) */
.nav-pills .nav-link {
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);
/* Style for the Bulk Move button */
.btn-bulk-action {
background-color: var(--kaauh-teal-dark);
border-color: var(--kaauh-teal-dark);
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 {
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 0;
background-color: white;
@ -77,19 +86,26 @@
background-color: var(--kaauh-border);
}
.candidate-table th {
padding: 0.75rem;
padding: 0.75rem 1rem;
font-weight: 600;
color: var(--kaauh-teal-dark);
border-bottom: 2px solid var(--kaauh-teal);
font-size: 0.9rem;
vertical-align: middle;
}
.candidate-table td {
padding: 0.75rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--kaauh-border);
vertical-align: middle;
font-size: 0.9rem;
}
.candidate-table tbody tr:hover {
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 {
font-weight: 600;
color: var(--kaauh-primary-text);
@ -98,206 +114,259 @@
font-size: 0.8rem;
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 {
font-size: 0.8rem;
font-size: 0.75rem;
padding: 0.3em 0.7em;
border-radius: 0.35rem;
font-weight: 700;
text-transform: uppercase;
}
.bg-applicant { background-color: #6c757d; color: white; } /* Secondary */
.bg-candidate { background-color: var(--kaauh-success); color: white; } /* Success */
.bg-score { background-color: var(--kaauh-teal-dark); color: white; }
.bg-exam-status { background-color: var(--kaauh-info); color: white; }
.bg-applicant { background-color: #6c757d !important; color: white; }
.bg-candidate { background-color: var(--kaauh-success) !important; color: white; }
/* 6. Stage Badges (More distinct from KAAT-S reference) */
/* Stage Badges */
.stage-badge {
font-size: 0.75rem;
padding: 0.25rem 0.6rem;
border-radius: 0.3rem;
font-weight: 600;
display: inline-block;
margin-bottom: 0.2rem;
}
.stage-Applied { background-color: #e9ecef; color: #495057; }
.stage-Exam { background-color: #d1ecf1; color: #0c5460; } /* Light cyan/info */
.stage-Interview { background-color: #ffc107; color: #856404; } /* Yellow/warning */
.stage-Offer { background-color: #d4edda; color: #155724; } /* Light green/success */
/* Candidate Indicator (used for the single Potential Candidates list) */
.candidate-indicator-badge {
font-size: 0.7rem;
padding: 0.15rem 0.4rem;
border-radius: 0.25rem;
font-weight: 700;
margin-left: 0.5rem;
background-color: var(--kaauh-teal);
color: white;
.stage-Screening { background-color: var(--kaauh-info); color: white; }
.stage-Exam { background-color: var(--kaauh-warning); color: #856404; }
.stage-Interview { background-color: #17a2b8; color: white; }
.stage-Offer { background-color: var(--kaauh-success); color: white; }
/* Timeline specific container */
.applicant-tracking-timeline {
margin-bottom: 2rem;
}
/* --- 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>
{% endblock %}
{% 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>
<h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
<i class="fas fa-layer-group me-2"></i>
{% trans "Applicant Screening for Job:" %} - {{ job.title }}&nbsp;&nbsp;<small class="text-muted fs-6">{{job.internal_job_id}}<small>
{% trans "Applicant Screening" %}
</h1>
<p class="text-muted mb-0">
Total Applicants: <span class="fw-bold">{{ total_candidates }}</span>
</p>
<h2 class="h5 text-muted mb-0">
{% trans "Job:" %} {{ job.title }}
<span class="badge bg-secondary ms-2 fw-normal">{{ job.internal_job_id }}</span>
</h2>
</div>
<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" %}
</a>
</div>
<div class="tier-controls kaauh-card shadow-sm">
<h4 class="h5 mb-3" style="color: var(--kaauh-teal-dark);">{% trans "Filter Potential Candidates" %}</h4>
<div class="applicant-tracking-timeline">
{% 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">
{% csrf_token %}
<div class="row g-3 align-items-end">
<div class="col-md-3 col-sm-6">
<label for="min_ai_score" class="form-label small text-muted">
{% trans "Minimum AI Score" %}
<div class="col-md-2 col-sm-6">
<label for="min_ai_score" class="form-label small text-muted mb-1">
{% trans "Min AI Score" %}
</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"
placeholder="e.g., 75">
</div>
<div class="col-md-3 col-sm-6">
<label for="tier1_count" class="form-label small text-muted">
{% trans "Number of Potential Candidates (Top N)" %}
<div class="col-md-2 col-sm-6">
<label for="tier1_count" class="form-label small text-muted mb-1">
{% trans "Top N" %}
</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 }}">
</div>
<div class="form-group">
<button type="submit" name="update_tiers" class="btn btn-primary">
<i class="fas fa-sync-alt me-1"></i> {% trans "Update Tiers" %}
<div class="col-md-3 col-sm-6">
<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>
</div>
{% comment %} Empty col for spacing (2 + 2 + 3 + 5 = 12) {% endcomment %}
<div class="col-md-5 d-none d-md-block"></div>
</div>
</form>
</div>
<!-- Tier Display -->
<h2 class="h4 mb-3 mt-5">{% trans "Candidate Tiers" %}</h2>
<div class="candidate-table-responsive" data-signals__ifmissing="{_fetching: false, selections: Array({{ candidates|length }}).fill(false)}">
{% url "bulk_candidate_move_to_exam" as move_to_exam_url %}
{% if candidates %}
<button class="btn btn-primary"
data-attr="{disabled: !$selections.filter(Boolean).length}"
data-on-click="@post('{{move_to_exam_url}}',{
contentType: 'form',
selector: '#myform',
headers: {'X-CSRFToken': '{{ csrf_token }}'}})"
>Bulk Move To Exam</button>
{% endif %}
<form id="myform" action="{{move_to_exam_url}}" method="post">
<table class="candidate-table">
<thead>
<tr>
<th>
{% if candidates %}
<div class="form-check">
<input
data-bind-_all
data-on-change="$selections = Array({{ candidates|length }}).fill($_all)"
data-effect="$selections; $_all = $selections.every(Boolean)"
data-attr-disabled="$_fetching"
type="checkbox" class="form-check-input" id="candidate-{{ candidate.id }}">
</div>
{% endif %}
</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>
<h2 class="h4 mb-3" style="color: var(--kaauh-primary-text);">
<i class="fas fa-users me-1"></i> {% trans "Candidate List" %}
<span class="badge bg-primary-theme ms-2">{{ candidates|length }} / {{ total_candidates }} Total</span>
</h2>
<div class="kaauh-card shadow-sm p-3">
{% url "bulk_candidate_move_to_exam" as move_to_exam_url %}
{% if candidates %}
<button class="btn btn-bulk-action btn-sm mb-3"
data-attr="{disabled: !$selections.filter(Boolean).length}"
data-on-click="@post('{{move_to_exam_url}}',{
contentType: 'form',
selector: '#candidate-form',
headers: {'X-CSRFToken': '{{ csrf_token }}'}})"
>
<i class="fas fa-arrow-right me-1"></i> {% trans "Bulk Move to Exam" %}
</button>
{% endif %}
<div class="table-responsive">
<form id="candidate-form" action="{{move_to_exam_url}}" method="post">
{% csrf_token %}
<table class="table candidate-table align-middle">
<thead>
<tr>
<th>
{% if candidates %}
<div class="form-check">
<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"
name="{{ candidate.id }}"
type="checkbox" class="form-check-input" id="candidate-{{ candidate.id }}">
type="checkbox" class="form-check-input" id="checkAll">
</div>
</td>
<td>
<div class="candidate-name">{{ candidate.name }}</div>
</td>
<td>
<div class="candidate-details">
Email: {{ candidate.email }}<br>
Phone: {{ candidate.phone }}<br>
</div>
</td>
<td>
<span class="badge bg-success">{{ candidate.match_score|default:"0" }}</span>
</td>
<td>
<span class="badge {% if candidate.applicant_status == 'Candidate' %}bg-success{% else %}bg-secondary{% endif %}">
{{ candidate.get_applicant_status_display }}
</span>
</td>
<td>
<span class="stage-badge stage-{{ candidate.stage }}">
{{ candidate.get_stage_display }}
</span>
{% if candidate.stage == "Exam" and candidate.exam_status %}
<br>
<span class="badge bg-info">{{ candidate.get_exam_status_display }}</span>
{% endif %}
</td>
<td>
<button class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#candidateviewModal"
hx-get="{% url 'candidate_criteria_view_htmx' candidate.pk %}"
hx-target="#candidateviewModalBody"
>
{% include "icons/view.html" %}
{% trans "View" %}</button>
{% if candidate.stage != "Exam" %}
<button hx-post="{% url 'candidate_move_to_exam' candidate.pk %}"
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>
</tr>
{% endfor %}
</tbody>
</table>
</form>
</div>
<!-- Tab Content -->
{% endif %}
</th>
<th>{% trans "Candidate Name" %}</th>
<th>{% trans "Contact Info" %}</th>
<th class="text-center">{% trans "AI Score" %}</th>
<th>{% trans "Application Status" %}</th>
<th>{% trans "Current Stage" %}</th>
<th class="text-center">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody>
{% for candidate in candidates %}
<tr>
<td>
<div class="form-check">
<input
data-bind-selections
data-attr-disabled="$_fetching"
name="candidate_ids"
value="{{ candidate.id }}"
type="checkbox" class="form-check-input" id="candidate-{{ candidate.id }}">
</div>
</td>
<td>
<a href="#" class="candidate-name text-primary-theme text-decoration-none">
{{ candidate.name }}
</a>
</td>
<td>
<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 class="text-center">
<span class="badge ai-score-badge">
{{ candidate.match_score|default:"0" }}%
</span>
</td>
<td>
<span class="badge status-badge {% if candidate.applicant_status == 'Candidate' %}bg-candidate{% else %}bg-applicant{% endif %}">
{{ candidate.get_applicant_status_display }}
</span>
</td>
<td>
<span class="stage-badge stage-{{ candidate.stage }}">
{{ candidate.get_stage_display }}
</span>
{% if candidate.stage == "Exam" and candidate.exam_status %}
<br>
<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-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="candidateviewModalLabel">Form Settings</h5>
<div class="modal-content kaauh-card">
<div class="modal-header" style="border-bottom: 1px solid var(--kaauh-border);">
<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>
</div>
<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 class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<div class="modal-footer" style="border-top: 1px solid var(--kaauh-border);">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
{% trans "Close" %}
</button>
</div>
</div>
</div>