730 lines
35 KiB
HTML
730 lines
35 KiB
HTML
{% extends "base.html" %}
|
|
{% load static i18n humanize%}
|
|
|
|
{% block title %}{{ application.name }} - {{ block.super }}{% endblock %}
|
|
|
|
{% block customCSS %}
|
|
<style>
|
|
/* ... (Your existing CSS code is here) ... */
|
|
/* ================================================= */
|
|
/* THEME VARIABLES AND GLOBAL STYLES */
|
|
/* ================================================= */
|
|
:root {
|
|
--kaauh-teal: #00636e;
|
|
--kaauh-teal-light: #007a88;
|
|
--kaauh-teal-dark: #004a53;
|
|
--kaauh-border: #eaeff3;
|
|
--kaauh-primary-text: #343a40;
|
|
--kaauh-accent: #ffcc00;
|
|
}
|
|
|
|
/* Primary Color Overrides */
|
|
.text-primary { color: var(--kaauh-teal) !important; }
|
|
.text-info { color: #17a2b8 !important; }
|
|
.text-success { color: #28a745 !important; }
|
|
.text-secondary { color: #6c757d !important; }
|
|
|
|
/* Main Action Button Style (Used for Download Resume) */
|
|
.btn-main-action {
|
|
background-color: var(--kaauh-teal);
|
|
border-color: var(--kaauh-teal);
|
|
color: white;
|
|
font-weight: 600;
|
|
padding: 0.6rem 1.2rem;
|
|
transition: all 0.2s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
.btn-main-action:hover {
|
|
background-color: var(--kaauh-teal-dark);
|
|
border-color: var(--kaauh-teal-dark);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
/* Outlined Button Styles (Only used variants kept) */
|
|
.btn-outline-primary {
|
|
color: var(--kaauh-teal);
|
|
border-color: var(--kaauh-teal);
|
|
}
|
|
.btn-outline-primary:hover {
|
|
background-color: var(--kaauh-teal);
|
|
color: white;
|
|
}
|
|
.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);
|
|
}
|
|
|
|
/* Card enhancements */
|
|
.card {
|
|
border: 1px solid var(--kaauh-border);
|
|
border-radius: 0.75rem;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
|
background-color: white;
|
|
}
|
|
|
|
/* Candidate Header Card (The teal header) */
|
|
.candidate-header-card {
|
|
background: linear-gradient(135deg, var(--kaauh-teal), #004d57);
|
|
color: white;
|
|
border-radius: 0.75rem 0.75rem 0 0;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
|
|
}
|
|
.candidate-header-card h1 {
|
|
font-weight: 700;
|
|
margin: 0;
|
|
font-size: 1.8rem;
|
|
}
|
|
.candidate-header-card .badge {
|
|
font-size: 0.9rem;
|
|
padding: 0.4em 0.8em;
|
|
border-radius: 0.4rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Left Column Tabs (Main Content Tabs) */
|
|
.main-tabs {
|
|
border-bottom: 1px solid var(--kaauh-border);
|
|
background-color: #f8f9fa;
|
|
padding: 0 1.25rem;
|
|
}
|
|
.main-tabs .nav-link {
|
|
border: none;
|
|
border-bottom: 3px solid transparent;
|
|
color: var(--kaauh-primary-text);
|
|
font-weight: 500;
|
|
padding: 0.75rem 1rem;
|
|
margin-right: 0.5rem;
|
|
transition: all 0.2s;
|
|
}
|
|
.main-tabs .nav-link:hover {
|
|
color: var(--kaauh-teal);
|
|
}
|
|
.main-tabs .nav-link.active {
|
|
color: var(--kaauh-teal-dark) !important;
|
|
background-color: white !important;
|
|
border-bottom: 3px solid var(--kaauh-teal);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Right Column Card (General styling) */
|
|
.right-column-card .tab-content {
|
|
padding: 1.5rem 1.25rem;
|
|
background-color: white;
|
|
}
|
|
|
|
/* ==================================== */
|
|
/* NEW: Vertical Timeline Styling */
|
|
/* ==================================== */
|
|
|
|
/* Highlight box for the current stage */
|
|
.current-stage {
|
|
border: 1px solid var(--kaauh-border);
|
|
background-color: #f0f8ff; /* Light, subtle blue background */
|
|
}
|
|
.current-stage .text-primary {
|
|
color: var(--kaauh-teal) !important;
|
|
}
|
|
|
|
.timeline {
|
|
position: relative;
|
|
padding-left: 2rem;
|
|
}
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 1.25rem;
|
|
width: 2px;
|
|
background-color: var(--kaauh-border);
|
|
}
|
|
.timeline-item {
|
|
position: relative;
|
|
margin-bottom: 2rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
.timeline-icon {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 0.8rem;
|
|
z-index: 10;
|
|
border: 4px solid white;
|
|
}
|
|
.timeline-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Custom Timeline Background Classes for Stages (Using Bootstrap color palette) */
|
|
.timeline-bg-applied { background-color: var(--kaauh-teal) !important; }
|
|
.timeline-bg-exam { background-color: #17a2b8 !important; }
|
|
.timeline-bg-interview { background-color: #ffc107 !important; }
|
|
.timeline-bg-offer { background-color: #28a745 !important; }
|
|
.timeline-bg-rejected { background-color: #dc3545 !important; }
|
|
|
|
|
|
|
|
/* ------------------------------------------- */
|
|
/* 1. Base Spinner Styling */
|
|
/* ------------------------------------------- */
|
|
.ai-loading-container {
|
|
/* Flex container to center content and align icon/spinner */
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px; /* Space between robot icon and spinner */
|
|
font-size: 14px; /* Default text size */
|
|
color: var(--kaauh-teal-light); /* Loading text color */
|
|
}
|
|
|
|
.kaats-spinner {
|
|
animation: kaats-spinner-rotate 2s linear infinite; /* Slower, more deliberate rotation */
|
|
width: 100px; /* Smaller size to be subtle */
|
|
height: 100px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.kaats-spinner .path {
|
|
stroke: var(--kaauh-teal-light, #007a88); /* Lighter Teal for the active path */
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
/* Optional: Background circle for better contrast (similar to Bootstrap) */
|
|
.kaats-spinner circle {
|
|
stroke: var(--kaauh-border, #e9ecef); /* Light gray background */
|
|
fill: none;
|
|
stroke-width: 4; /* Slightly smaller stroke-width */
|
|
}
|
|
|
|
/* New: Robot Icon Style and Animation */
|
|
.ai-robot-icon {
|
|
font-size: 2rem; /* Slightly larger than text */
|
|
color: var(--kaauh-teal);
|
|
animation: ai-pulse 2s infinite ease-in-out; /* Pulsing effect for 'intelligence' */
|
|
transform-origin: center;
|
|
}
|
|
|
|
/* ------------------------------------------- */
|
|
/* 2. Keyframe Animations */
|
|
/* ------------------------------------------- */
|
|
@keyframes kaats-spinner-rotate {
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes kaats-spinner-dash {
|
|
0% {
|
|
stroke-dasharray: 1, 150;
|
|
stroke-dashoffset: 0;
|
|
}
|
|
50% {
|
|
stroke-dasharray: 90, 150;
|
|
stroke-dashoffset: -35;
|
|
}
|
|
100% {
|
|
stroke-dasharray: 90, 150;
|
|
stroke-dashoffset: -124;
|
|
}
|
|
}
|
|
|
|
/* New Keyframe: AI Pulse effect */
|
|
@keyframes ai-pulse {
|
|
0% {
|
|
color: var(--kaauh-teal);
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
color: var(--kaauh-accent); /* Accent color pulse */
|
|
transform: scale(1.05);
|
|
}
|
|
100% {
|
|
color: var(--kaauh-teal);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid py-4">
|
|
<div class="row g-4">
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item"><a href="{% url 'dashboard' %}" class="text-secondary text-decoration-none">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="{% url 'job_detail' application.job.slug %}" class="text-secondary text-decoration-none">Job:({{application.job.title}})</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page" class="text-secondary" style="
|
|
color: #F43B5E; /* Rosy Accent Color */
|
|
font-weight: 600;
|
|
">{% trans "Applicant Detail" %}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
{# LEFT COLUMN: MAIN application DETAILS AND TABS #}
|
|
<div class="col-lg-8">
|
|
<div class="card shadow-sm no-hover">
|
|
|
|
{# HEADER SECTION #}
|
|
<div class="candidate-header-card">
|
|
<div class="d-flex justify-content-between align-items-start flex-wrap">
|
|
<div>
|
|
<h1 class="h3 mb-2">{{ application.name }}</h1>
|
|
<div class="d-flex align-items-center gap-2 mb-2">
|
|
|
|
<span id="stageDisplay" class="badge">
|
|
{% trans "Stage:" %}
|
|
<span>{{ application.stage }}</span>
|
|
</span>
|
|
</div>
|
|
<small class="text-white opacity-75">
|
|
{% trans "Applied for:" %} <strong>{{ application.job.title }}</strong>
|
|
</small>
|
|
</div>
|
|
{# Change Stage button #}
|
|
{% if user.is_staff %}
|
|
<button type="button" class="btn btn-outline-light btn-sm mt-1" data-bs-toggle="modal" data-bs-target="#stageUpdateModal">
|
|
<i class="fas fa-exchange-alt"></i> {% trans "Change Stage" %}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{# LEFT TABS NAVIGATION #}
|
|
<ul class="nav nav-tabs main-tabs" id="candidateTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-pane" type="button" role="tab" aria-controls="contact-pane" aria-selected="true">
|
|
<i class="fas fa-id-card me-1"></i> {% trans "Contact & Job" %}
|
|
</button>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
{# NEW TAB ADDED HERE #}
|
|
<button class="nav-link" id="timeline-tab" data-bs-toggle="tab" data-bs-target="#timeline-pane" type="button" role="tab" aria-controls="timeline-pane" aria-selected="false">
|
|
<i class="fas fa-route me-1"></i> {% trans "Journey Timeline" %}
|
|
</button>
|
|
</li>
|
|
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="documents-tab" data-bs-toggle="tab" data-bs-target="#documents-pane" type="button" role="tab" aria-controls="documents-pane" aria-selected="false">
|
|
<i class="fas fa-file-alt me-1"></i> {% trans "Documents" %}
|
|
</button>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<div class="card-body">
|
|
<div class="tab-content" id="candidateTabsContent">
|
|
|
|
{# TAB 1 CONTENT: CONTACT & DATES #}
|
|
<div class="tab-pane fade show active" id="contact-pane" role="tabpanel" aria-labelledby="contact-tab">
|
|
<h5 class="text-primary mb-4">{% trans "Core Details" %}</h5>
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-envelope fa-2x text-muted me-3"></i>
|
|
<div>
|
|
<small class="text-muted d-block">{% trans "Email" %}</small>
|
|
<strong>{{ application.email }}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-briefcase fa-2x text-muted me-3"></i>
|
|
<div>
|
|
<small class="text-muted d-block">{% trans "Position Applied" %}</small>
|
|
<strong>{{ application.job.title }}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="d-flex align-items-center">
|
|
<i class="fas fa-calendar-check fa-2x text-muted me-3"></i>
|
|
<div>
|
|
<small class="text-muted d-block">{% trans "Applied Date" %}</small>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<strong>{{ application.created_at|date:"M d, Y H:i" }}</strong>
|
|
<span class="badge bg-light text-dark">
|
|
<i class="far fa-clock me-1"></i>
|
|
{{ application.created_at|naturaltime }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# TAB 2 CONTENT: RESUME #}
|
|
|
|
|
|
{# NEW TAB 3 CONTENT: CANDIDATE JOURNEY TIMELINE #}
|
|
<div class="tab-pane fade" id="timeline-pane" role="tabpanel" aria-labelledby="timeline-tab">
|
|
{# ENHANCED: CANDIDATE JOURNEY TIMELINE CARD #}
|
|
<div class="card shadow-sm timeline-card">
|
|
<div class="card-header bg-white border-bottom py-3">
|
|
<h5 class="mb-0 text-muted"><i class="fas fa-route me-2"></i>{% trans "Application Journey" %}</h5>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
|
|
<h6 class="text-uppercase text-secondary mb-3">{% trans "Current Stage" %}</h6>
|
|
<div class="p-3 mb-4 rounded current-stage">
|
|
<p class="mb-0 fw-bold fs-5 text-primary">{{ application.stage }}</p>
|
|
<small class="text-muted d-block mt-1">
|
|
{% trans "Latest status update:" %} {{ application.updated_at|date:"M d, Y" }}
|
|
</small>
|
|
</div>
|
|
|
|
<h6 class="text-uppercase text-secondary mb-3 pt-2 border-top">{% trans "Historical Timeline" %}</h6>
|
|
<div class="timeline">
|
|
|
|
|
|
{# Base Status: Application Submitted (Always required) #}
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon timeline-bg-applied"><i class="fas fa-file-signature"></i></div>
|
|
<div class="timeline-content">
|
|
<p class="timeline-stage fw-bold mb-0 ms-2">{% trans "Application Submitted" %}</p>
|
|
<small class="text-muted">
|
|
<i class="far fa-calendar-alt me-1"></i> {{ application.created_at|date:"M d, Y" }}
|
|
<span class="ms-2">|</span>
|
|
<i class="far fa-clock ms-2 me-1"></i> {{ application.created_at|date:"h:i A" }}
|
|
</small>
|
|
</div>
|
|
|
|
</div>
|
|
{% if application.exam_date %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon timeline-bg-applied"><i class="fas fa-clipboard-check"></i></div>
|
|
<div class="timeline-content">
|
|
<p class="timeline-stage fw-bold mb-0 ms-2">{% trans "Exam" %}</p>
|
|
<small class="text-muted">
|
|
<i class="far fa-calendar-alt me-1"></i> {{ application.exam_date|date:"M d, Y" }}
|
|
<span class="ms-2">|</span>
|
|
<i class="far fa-clock ms-2 me-1"></i> {{ application.exam_date|date:"h:i A" }}
|
|
</small>
|
|
</div>
|
|
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if application.get_interview_date %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon timeline-bg-applied"><i class="fas fas fa-comments"></i></div>
|
|
<div class="timeline-content">
|
|
<p class="timeline-stage fw-bold mb-0 ms-2">{% trans "Interview" %}</p>
|
|
<small class="text-muted">
|
|
<i class="far fa-calendar-alt me-1"></i> {{ application.get_interview_date}}
|
|
<span class="ms-2">|</span>
|
|
<i class="far fa-clock ms-2 me-1"></i> {{ application.get_interview_time}}
|
|
</small>
|
|
</div>
|
|
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if application.offer_date %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon timeline-bg-applied"><i class="fas fas fa-handshake"></i></div>
|
|
<div class="timeline-content">
|
|
<p class="timeline-stage fw-bold mb-0 ms-2">{% trans "Offer" %}</p>
|
|
<small class="text-muted">
|
|
<i class="far fa-calendar-alt me-1"></i> {{ application.offer_date|date:"M d, Y" }}
|
|
|
|
</small>
|
|
</div>
|
|
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if application.hired_date %}
|
|
<div class="timeline-item">
|
|
<div class="timeline-icon timeline-bg-applied"><i class="fas fas fa-handshake"></i></div>
|
|
<div class="timeline-content">
|
|
<p class="timeline-stage fw-bold mb-0 ms-2">{% trans "Offer" %}</p>
|
|
<small class="text-muted">
|
|
<i class="far fa-calendar-alt me-1"></i> {{ application.hired_date|date:"M d, Y" }}
|
|
|
|
</small>
|
|
</div>
|
|
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# TAB 4 CONTENT: DOCUMENTS #}
|
|
<div class="tab-pane fade" id="documents-pane" role="tabpanel" aria-labelledby="documents-tab">
|
|
{% with documents=application.documents %}
|
|
{% include 'includes/document_list.html' %}
|
|
{% endwith %}
|
|
</div>
|
|
|
|
{# TAB 5 CONTENT: PARSED SUMMARY #}
|
|
{% if application.parsed_summary %}
|
|
|
|
<div class="tab-pane fade" id="summary-pane" role="tabpanel" aria-labelledby="summary-tab">
|
|
<h5 class="text-primary mb-4">{% trans "AI Generated Summary" %}</h5>
|
|
<div class="border-start border-primary ps-3 pt-1 pb-1">
|
|
{% include 'includes/application_modal_body.html' %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# TAB 5 CONTENT: AI ANALYSIS #}
|
|
{% if application.is_resume_parsed %}
|
|
<div class="tab-pane fade" id="analysis-pane" role="tabpanel" aria-labelledby="analysis-tab">
|
|
<h5 class="text-primary mb-4">{% trans "AI Analysis Report" %}</h5>
|
|
<div class="border-start border-primary ps-3 pt-1 pb-1">
|
|
{% with analysis=application.ai_analysis_data %}
|
|
{# Match Score Card #}
|
|
<div class="mb-4 p-3 rounded" style="background-color: {% if analysis.match_score >= 70 %}rgba(40, 167, 69, 0.1){% elif analysis.match_score >= 40 %}rgba(255, 193, 7, 0.1){% else %}rgba(220, 53, 69, 0.1){% endif %}">
|
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
<h6 class="mb-0 fw-bold">{% trans "Match Score" %}</h6>
|
|
<span class="badge {% if analysis.match_score >= 70 %}bg-success{% elif analysis.match_score >= 40 %}bg-warning{% else %}bg-danger{% endif %}">
|
|
{{ analysis.match_score }}%
|
|
</span>
|
|
</div>
|
|
<div class="progress" style="height: 10px;">
|
|
<div class="progress-bar {% if analysis.match_score >= 70 %}bg-success{% elif analysis.match_score >= 40 %}bg-warning{% else %}bg-danger{% endif %}"
|
|
role="progressbar" style="width: {{ analysis.match_score }}%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Category & Job Fit #}
|
|
<div class="mb-4">
|
|
<h6 class="text-primary fw-bold mb-2">{% trans "Category" %}</h6>
|
|
<p class="mb-2">{{ analysis.category }}</p>
|
|
|
|
<h6 class="text-primary fw-bold mb-2 mt-3">{% trans "Job Fit Narrative" %}</h6>
|
|
<p class="mb-0">{{ analysis.job_fit_narrative }}</p>
|
|
</div>
|
|
|
|
{# Strengths and Weaknesses #}
|
|
<div class="mb-4">
|
|
<h6 class="text-primary fw-bold mb-2">{% trans "Strengths" %}</h6>
|
|
<p class="text-success mb-3">{{ analysis.strengths }}</p>
|
|
|
|
<h6 class="text-primary fw-bold mb-2">{% trans "Weaknesses" %}</h6>
|
|
<p class="text-danger mb-0">{{ analysis.weaknesses }}</p>
|
|
</div>
|
|
|
|
{# Recommendation #}
|
|
<div class="mb-4 p-3 rounded bg-light">
|
|
<h6 class="text-primary fw-bold mb-2">{% trans "Recommendation" %}</h6>
|
|
<p class="mb-0">{{ analysis.recommendation }}</p>
|
|
</div>
|
|
|
|
{# Top Keywords #}
|
|
<div class="mb-4">
|
|
<h6 class="text-primary fw-bold mb-2">{% trans "Top Keywords" %}</h6>
|
|
<div class="d-flex flex-wrap gap-2">
|
|
{% for keyword in analysis.top_3_keywords %}
|
|
<span class="badge bg-info text-dark">{{ keyword }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
{# Professional Details #}
|
|
<div class="mb-4">
|
|
<h6 class="text-primary fw-bold mb-2">{% trans "Professional Details" %}</h6>
|
|
<p class="mb-1"><strong>{% trans "Years of Experience:" %}</strong> {{ analysis.years_of_experience }}</p>
|
|
<p class="mb-1"><strong>{% trans "Most Recent Job Title:" %}</strong> {{ analysis.most_recent_job_title }}</p>
|
|
<p class="mb-1"><strong>{% trans "Experience Industry Match:" %}</strong>
|
|
<span class="badge {% if analysis.experience_industry_match >= 70 %}bg-success{% elif analysis.experience_industry_match >= 40 %}bg-warning{% else %}bg-danger{% endif %}">
|
|
{{ analysis.experience_industry_match }}%
|
|
</span>
|
|
</p>
|
|
<p class="mb-1"><strong>{% trans "Soft Skills Score:" %}</strong> {{ analysis.soft_skills_score }}%</p>
|
|
</div>
|
|
|
|
{# Screening Status #}
|
|
<div class="mb-4">
|
|
<h6 class="text-primary fw-bold mb-2">{% trans "Screening Status" %}</h6>
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<span>{% trans "Minimum Requirements Met:" %}</span>
|
|
{% if analysis.min_req_met_bool %}
|
|
<span class="badge bg-success">{% trans "Yes" %}</span>
|
|
{% else %}
|
|
<span class="badge bg-danger">{% trans "No" %}</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center mt-2">
|
|
<span>{% trans "Screening Stage Rating:" %}</span>
|
|
<span class="badge bg-secondary">{{ analysis.screening_stage_rating }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{# Criteria Checklist #}
|
|
<div class="mb-4">
|
|
<h6 class="text-primary fw-bold mb-2">{% trans "Criteria Assessment" %}</h6>
|
|
<div class="table-responsive">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "Criteria" %}</th>
|
|
<th>{% trans "Status" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for criterion, status in analysis.criteria_checklist.items %}
|
|
<tr>
|
|
<td>{{ criterion }}</td>
|
|
<td>
|
|
{% if status == "Met" %}
|
|
<span class="badge bg-success">{% trans "Met" %}</span>
|
|
{% elif status == "Not Met" %}
|
|
<span class="badge bg-danger">{% trans "Not Met" %}</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">{{ status }}</span>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{# Language Fluency #}
|
|
{% if analysis.language_fluency %}
|
|
<div class="mb-4">
|
|
<h6 class="text-primary fw-bold mb-2">{% trans "Language Fluency" %}</h6>
|
|
<div class="d-flex flex-wrap gap-2">
|
|
{% for language in analysis.language_fluency %}
|
|
<span class="badge bg-light text-dark">{{ language }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% endwith %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="tab-pane fade" id="analysis-pane" role="tabpanel" aria-labelledby="analysis-tab">
|
|
<div class="text-center py-5">
|
|
<div class="spinner-border text-primary mb-3" role="status">
|
|
<span class="visually-hidden">{% trans "Loading..." %}</span>
|
|
</div>
|
|
<h5 class="text-primary">{% trans "Resume is being parsed" %}</h5>
|
|
<p class="text-muted">{% trans "Our AI is analyzing the application's resume to generate insights. This may take a few moments." %}</p>
|
|
<div class="progress mt-3" style="height: 6px;">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated"
|
|
role="progressbar" style="width: 75%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# RIGHT COLUMN: ACTIONS AND CANDIDATE TIMELINE #}
|
|
<div class="col-lg-4">
|
|
|
|
{# ACTIONS CARD #}
|
|
|
|
<div class="card shadow-sm mb-2 p-2">
|
|
<h5 class="text-muted mb-3"><i class="fas fa-cog me-2"></i>{% trans "Management Actions" %}</h5>
|
|
<div class="d-grid gap-2">
|
|
{% comment %} <a href="{% url 'application_update' application.slug %}" class="btn btn-outline-primary">
|
|
<i class="fas fa-edit"></i> {% trans "Edit Details" %}
|
|
</a> {% endcomment %}
|
|
{% comment %} <a href="{% url 'application_delete' application.slug %}" class="btn btn-outline-danger" onclick="return confirm('{% trans "Are you sure you want to delete this candidate?" %}')">
|
|
<i class="fas fa-trash-alt"></i> {% trans "Delete Candidate" %}
|
|
</a> {% endcomment %}
|
|
<a href="{% url 'application_list' %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-arrow-left"></i> {% trans "Back to List" %}
|
|
</a>
|
|
{% if application.resume %}
|
|
|
|
{% comment %} <a href="{{ application.resume.url }}" target="_blank" class="btn btn-outline-primary">
|
|
<i class="fas fa-eye me-1"></i>
|
|
{% trans "View Actual Resume" %}
|
|
</a> {% endcomment %}
|
|
|
|
<a href="{{ application.resume.url }}" download class="btn btn-outline-primary">
|
|
<i class="fas fa-download me-1"></i>
|
|
{% trans "Download Resume" %}
|
|
</a>
|
|
|
|
{% comment %} <a href="{% url 'application_resume_template' application.slug %}" class="btn btn-outline-info">
|
|
<i class="fas fa-file-alt me-1"></i>
|
|
{% trans "View Resume AI Overview" %}
|
|
</a> {% endcomment %}
|
|
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card shadow-sm mb-4 p-2">
|
|
<h5 class="text-muted mb-3"><i class="fas fa-clock me-2"></i>{% trans "Time to Hire:" %}
|
|
|
|
{% with days=application.time_to_hire_days %}
|
|
{% if days > 0 %}
|
|
{{ days }} day{{ days|pluralize }}
|
|
{% else %}
|
|
0
|
|
{% endif %}
|
|
{% endwith %}
|
|
</h5>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="resume-parsed-section">
|
|
{% if application.is_resume_parsed %}
|
|
{% include 'recruitment/application_resume_template.html' %}
|
|
{% else %}
|
|
{% if application.scoring_timeout %}
|
|
<div style="display: flex; justify-content: center; align-items: center; height: 100%;" class="mb-2">
|
|
<div class="ai-loading-container">
|
|
<i class="fas fa-robot ai-robot-icon"></i>
|
|
<span>{% trans "Resume is been Scoring..." %}</span>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
|
|
<button type="submit" class="btn btn-sm btn-main-action" hx-get="{% url 'application_retry_scoring' application.slug %}" hx-select=".resume-parsed-section" hx-target=".resume-parsed-section" hx-swap="outerHTML" hx-on:click="this.disabled=true;this.innerHTML=`Scoring Resume , Please Wait.. <i class='fa-solid fa-spinner fa-spin'></i>`">
|
|
<i class="fas fa-redo-alt me-1"></i>
|
|
{% trans "Unable to Parse Resume , click to retry" %}
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# STAGE UPDATE MODAL INCLUDED FOR STAFF USERS #}
|
|
|
|
|
|
{% if user.is_staff %}
|
|
{% include "recruitment/partials/stage_update_modal.html" with application=application form=stage_form %}
|
|
{% endif %}
|
|
{% endblock %}
|