ai scoring spinner fix

This commit is contained in:
Faheed 2025-10-26 22:09:39 +03:00
parent 6447a895c0
commit 465936238e
7 changed files with 80 additions and 24 deletions

View File

@ -647,6 +647,11 @@ class Candidate(Base):
return future_meetings or today_future_meetings
# @property
# def time_to_hire(self):
# time_to_hire=self.hired_date-self.created_at
# return time_to_hire
class TrainingMaterial(Base):

View File

@ -6,7 +6,7 @@
</p>
<p style="font-family: Arial, sans-serif; font-size: 16px; color: #333;">
{% blocktrans %}Thank you for choosing **KAAUH ATS**. To verify the ownership of your email address, please click the confirmation link below:{% endblocktrans %}
{% blocktrans %}To verify the ownership of your email address, please click the confirmation link below:{% endblocktrans %}
</p>
<div style="text-align: center; margin: 30px 0;">

View File

@ -11,9 +11,11 @@
/* ================================================= */
: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 */
@ -179,30 +181,43 @@
/* ------------------------------------------- */
/* 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 1.5s linear infinite; /* Faster rotation */
width: 40px; /* Standard size */
height: 40px;
display: inline-block; /* Useful for table cells */
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, #00636e); /* Use Teal color, fallback to dark teal */
stroke: var(--kaauh-teal-light, #007a88); /* Lighter Teal for the active path */
stroke-linecap: round;
/* Optional: Add a lighter background circle for contrast */
/* stroke-dashoffset will be reset by the dash animation */
}
/* Optional: Background circle for better contrast (similar to Bootstrap) */
.kaats-spinner circle {
stroke: var(--kaauh-border, #e9ecef); /* Light gray background */
fill: none;
stroke-width: 5; /* Keep stroke-width on both circles */
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;
}
/* ------------------------------------------- */
@ -229,6 +244,22 @@
}
}
/* 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 %}
@ -587,7 +618,7 @@
{# ACTIONS CARD #}
<div class="card shadow-sm mb-4 p-3">
<div class="card shadow-sm mb-2 p-3">
<h5 class="text-muted mb-3"><i class="fas fa-cog me-2"></i>{% trans "Management Actions" %}</h5>
<div class="d-grid gap-2">
<a href="{% url 'candidate_update' candidate.slug %}" class="btn btn-outline-primary">
@ -618,6 +649,14 @@
{% endif %}
</div>
</div>
<div class="card shadow-sm mb-4 p-1">
<h5 class="text-muted mb-3"><i class="fas fa-clock me-2"></i>{% trans "Time to Hire" %}</h5>
<div class="d-grid gap-2 text-center">
{{candidate.time_to_hire|default:"50 days"}}
</div>
</div>
</div>
@ -629,14 +668,23 @@
{% include 'recruitment/candidate_resume_template.html' %}
{% else %}
<a href="{% url 'candidate_detail' candidate.slug %}" class="text-decoration-none">
<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
<svg class="kaats-spinner" viewBox="0 0 50 50" style="width: 100px; height: 100px;">
<circle cx="25" cy="25" r="20"></circle>
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"
style="animation: kaats-spinner-dash 1.5s ease-in-out infinite;"></circle>
</svg>
<span class="ms-2">AI Score Loading.....</span>
</div>
<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
<div class="ai-loading-container">
{# Robot Icon (Requires Font Awesome or similar library) #}
<i class="fas fa-robot ai-robot-icon"></i>
{# The Spinner #}
<svg class="kaats-spinner" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="20"></circle>
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="4"
style="animation: kaats-spinner-dash 1.5s ease-in-out infinite;"></circle>
</svg>
<span>AI Scoring...</span>
</div>
</div>
</a>
{% endif %}

View File

@ -254,6 +254,7 @@
</div>
</div>
</div>
{% if candidates %}
<div id="candidate-list">
{# View Switcher - list_id must match the container ID #}
@ -290,13 +291,14 @@
</span>
{% endif %}
{% else %}
<a href="{% url 'candidate_list' %}">
<a href="{% url 'candidate_list' %}" class="text-decoration-none">
<div>
<svg class="kaats-spinner" viewBox="0 0 50 50" style="width: 25px; height: 25px;">
<circle cx="25" cy="25" r="20"></circle>
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"
style="animation: kaats-spinner-dash 1.5s ease-in-out infinite;"></circle>
</svg>
<span class="text-teal-primary">{% trans "AI Scoring..." %}</span>
</div>
</a>
{% endif %}

View File

@ -395,19 +395,20 @@
</div>
</td>
<td class="text-center">
{% if candidate.is_resume_parsed %}
{% if candidate.is_resume_parsed %}
{% if candidate.match_score %}
<span class="badge ai-score-badge">
{{ candidate.match_score|default:"0" }}%
</span>
{% endif %}
{% else %}
<div>
{% else %}
<div class="text-nowrap">
<svg class="kaats-spinner" viewBox="0 0 50 50" style="width: 25px; height: 25px;">
<circle cx="25" cy="25" r="20"></circle>
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"
style="animation: kaats-spinner-dash 1.5s ease-in-out infinite;"></circle>
</svg>
<span class="text-teal-primary">{% trans 'AI scoring..' %}</span>
</div>
{% endif %}
</td>

View File

@ -52,7 +52,7 @@
<i class="fas fa-times me-1"></i>Cancel
</button>
<button type="submit" class="btn btn-primary" id="stageUpdateSubmit">
<button type="submit" class="btn btn-main-action" id="stageUpdateSubmit">
<i class="fas fa-save me-1"></i>
<span class="ms-2">Update</span>
</button>