This commit is contained in:
ismail 2025-11-02 19:21:33 +03:00
parent 7bbca7d746
commit c369b8bedc
8 changed files with 222 additions and 86 deletions

View File

@ -15,6 +15,7 @@
--kaauh-info: #17a2b8; --kaauh-info: #17a2b8;
--kaauh-danger: #dc3545; --kaauh-danger: #dc3545;
--kaauh-warning: #ffc107; --kaauh-warning: #ffc107;
--kaauh-gray-light: #f8f9fa;
} }
/* Primary Color Overrides */ /* Primary Color Overrides */
@ -53,6 +54,17 @@
box-shadow: 0 4px 8px rgba(0,0,0,0.15); box-shadow: 0 4px 8px rgba(0,0,0,0.15);
} }
/* Secondary Button Style */
.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);
}
/* Search Form Styling */ /* Search Form Styling */
.search-form { .search-form {
background-color: #f8f9fa; background-color: #f8f9fa;
@ -71,6 +83,41 @@
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
} }
/* Table View Styling */
.table-view .table thead th {
background-color: var(--kaauh-teal-dark);
color: white;
font-weight: 600;
border-color: var(--kaauh-border);
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.5px;
padding: 1rem;
}
.table-view .table tbody td {
vertical-align: middle;
padding: 1rem;
border-color: var(--kaauh-border);
}
.table-view .table tbody tr:hover {
background-color: var(--kaauh-gray-light);
}
/* Card View Specific Styles */
.card-view .card {
height: 100%;
}
.card-view .card-title {
color: var(--kaauh-teal-dark);
font-weight: 700;
}
.card-view .card-body {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
}
</style> </style>
{% endblock %} {% endblock %}
@ -115,7 +162,7 @@
value="{{ search_query }}"> value="{{ search_query }}">
</div> </div>
</div> </div>
<div class="col-md-2"> <div class="col-md-1">
<button type="submit" class="btn btn-main-action w-100"> <button type="submit" class="btn btn-main-action w-100">
<i class="fas fa-search me-1"></i> {% trans "Search" %} <i class="fas fa-search me-1"></i> {% trans "Search" %}
</button> </button>
@ -125,78 +172,168 @@
<!-- Agencies List --> <!-- Agencies List -->
{% if page_obj %} {% if page_obj %}
<div class="row"> <div id="agency-list">
{% for agency in page_obj %} {% include "includes/_list_view_switcher.html" with list_id="agency-list" %}
<div class="col-lg-4 col-md-6 mb-4">
<div class="card kaauh-card agency-card h-100">
<div class="card-body">
<!-- Agency Header -->
<div class="d-flex justify-content-between align-items-start mb-3">
<h5 class="card-title mb-0" style="color: var(--kaauh-teal-dark);">
{{ agency.name }}
</h5>
{% if agency.email %}
<a href="mailto:{{ agency.email }}" class="text-muted" title="{{ agency.email }}">
<i class="fas fa-envelope"></i>
</a>
{% endif %}
</div>
<!-- Contact Information --> <!-- Table View -->
{% if agency.contact_person %} <div class="table-view">
<p class="card-text mb-2"> <div class="table-responsive">
<i class="fas fa-user text-muted me-2"></i> <table class="table table-hover align-middle mb-0">
<strong>{% trans "Contact:" %}</strong> {{ agency.contact_person }} <thead>
</p> <tr>
{% endif %} <th scope="col">{% trans "Agency Name" %}</th>
<th scope="col">{% trans "Contact Person" %}</th>
<th scope="col">{% trans "Email" %}</th>
<th scope="col">{% trans "Phone" %}</th>
<th scope="col">{% trans "Country" %}</th>
<th scope="col">{% trans "Website" %}</th>
<th scope="col">{% trans "Created" %}</th>
<th scope="col" class="text-end">{% trans "Actions" %}</th>
</tr>
</thead>
<tbody>
{% for agency in page_obj %}
<tr>
<td class="fw-medium">
<a href="{% url 'agency_detail' agency.slug %}"
class="text-decoration-none text-primary-theme">
{{ agency.name }}
</a>
</td>
<td>{{ agency.contact_person|default:"-" }}</td>
<td>
{% if agency.email %}
<a href="mailto:{{ agency.email }}"
class="text-decoration-none"
title="{{ agency.email }}">
<i class="fas fa-envelope me-1"></i>
{{ agency.email|truncatechars:20 }}
</a>
{% else %}
-
{% endif %}
</td>
<td>{{ agency.phone|default:"-" }}</td>
<td>
{% if agency.country %}
<i class="fas fa-globe text-muted me-1"></i>
{{ agency.get_country_display }}
{% else %}
-
{% endif %}
</td>
<td>
{% if agency.website %}
<a href="{{ agency.website }}"
target="_blank"
class="text-decoration-none text-secondary">
{{ agency.website|truncatechars:25 }}
<i class="fas fa-external-link-alt ms-1 small"></i>
</a>
{% else %}
-
{% endif %}
</td>
<td>
<span class="stats-badge">
{{ agency.created_at|date:"M d, Y" }}
</span>
</td>
<td class="text-end">
<div class="btn-group btn-group-sm" role="group">
<a href="{% url 'agency_detail' agency.slug %}"
class="btn btn-outline-secondary"
title="{% trans 'View' %}">
<i class="fas fa-eye"></i>
</a>
<a href="{% url 'agency_update' agency.slug %}"
class="btn btn-outline-secondary"
title="{% trans 'Edit' %}">
<i class="fas fa-edit"></i>
</a>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% if agency.phone %} <!-- Card View -->
<p class="card-text mb-2"> <div class="card-view row g-4">
<i class="fas fa-phone text-muted me-2"></i> {% for agency in page_obj %}
{{ agency.phone }} <div class="col-lg-4 col-md-6 mb-4">
</p> <div class="card kaauh-card agency-card h-100">
{% endif %} <div class="card-body">
<!-- Agency Header -->
{% if agency.country %} <div class="d-flex justify-content-between align-items-start mb-3">
<p class="card-text mb-2"> <h5 class="card-title mb-0" style="color: var(--kaauh-teal-dark);">
<i class="fas fa-globe text-muted me-2"></i> {{ agency.name }}
{{ agency.get_country_display }} </h5>
</p> {% if agency.email %}
{% endif %} <a href="mailto:{{ agency.email }}" class="text-muted" title="{{ agency.email }}">
<i class="fas fa-envelope"></i>
<!-- Website Link -->
{% if agency.website %}
<p class="card-text mb-3">
<i class="fas fa-link text-muted me-2"></i>
<a href="{{ agency.website }}" target="_blank" class="text-decoration-none text-secondary">
{{ agency.website|truncatechars:30 }}
<i class="fas fa-external-link-alt ms-1 small"></i>
</a>
</p>
{% endif %}
<!-- Action Buttons -->
<div class="d-flex justify-content-between align-items-center mt-auto">
<div>
<a href="{% url 'agency_detail' agency.slug %}"
class="btn btn-main-action btn-sm me-2">
<i class="fas fa-eye me-1"></i> {% trans "View" %}
</a>
<a href="{% url 'agency_update' agency.slug %}"
class="btn btn-outline-secondary btn-sm">
<i class="fas fa-edit me-1"></i> {% trans "Edit" %}
</a> </a>
{% endif %}
</div> </div>
<div>
<span class="stats-badge"> <!-- Contact Information -->
{% trans "Created" %} {{ agency.created_at|date:"M d, Y" }} {% if agency.contact_person %}
</span> <p class="card-text mb-2">
<i class="fas fa-user text-muted me-2"></i>
<strong>{% trans "Contact:" %}</strong> {{ agency.contact_person }}
</p>
{% endif %}
{% if agency.phone %}
<p class="card-text mb-2">
<i class="fas fa-phone text-muted me-2"></i>
{{ agency.phone }}
</p>
{% endif %}
{% if agency.country %}
<p class="card-text mb-2">
<i class="fas fa-globe text-muted me-2"></i>
{{ agency.get_country_display }}
</p>
{% endif %}
<!-- Website Link -->
{% if agency.website %}
<p class="card-text mb-3">
<i class="fas fa-link text-muted me-2"></i>
<a href="{{ agency.website }}" target="_blank" class="text-decoration-none text-secondary">
{{ agency.website|truncatechars:30 }}
<i class="fas fa-external-link-alt ms-1 small"></i>
</a>
</p>
{% endif %}
<!-- Action Buttons -->
<div class="d-flex justify-content-between align-items-center mt-auto">
<div>
<a href="{% url 'agency_detail' agency.slug %}"
class="btn btn-main-action btn-sm me-2">
<i class="fas fa-eye me-1"></i> {% trans "View" %}
</a>
<a href="{% url 'agency_update' agency.slug %}"
class="btn btn-outline-secondary btn-sm">
<i class="fas fa-edit me-1"></i> {% trans "Edit" %}
</a>
</div>
<div>
<span class="stats-badge">
{% trans "Created" %} {{ agency.created_at|date:"M d, Y" }}
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> {% endfor %}
{% endfor %} </div>
</div> </div>
<!-- Pagination --> <!-- Pagination -->

View File

@ -179,7 +179,7 @@
.timeline-bg-offer { background-color: #28a745 !important; } .timeline-bg-offer { background-color: #28a745 !important; }
.timeline-bg-rejected { background-color: #dc3545 !important; } .timeline-bg-rejected { background-color: #dc3545 !important; }
/* ------------------------------------------- */ /* ------------------------------------------- */
/* 1. Base Spinner Styling */ /* 1. Base Spinner Styling */
@ -272,7 +272,7 @@
<li class="breadcrumb-item"><a href="{% url 'job_detail' candidate.job.slug %}" class="text-secondary">Job:({{candidate.job.title}})</a></li> <li class="breadcrumb-item"><a href="{% url 'job_detail' candidate.job.slug %}" class="text-secondary">Job:({{candidate.job.title}})</a></li>
<li class="breadcrumb-item active" aria-current="page" class="text-secondary" style=" <li class="breadcrumb-item active" aria-current="page" class="text-secondary" style="
color: #F43B5E; /* Rosy Accent Color */ color: #F43B5E; /* Rosy Accent Color */
font-weight: 600; font-weight: 600;
">Applicant Detail</li> ">Applicant Detail</li>
</ol> </ol>
</nav> </nav>
@ -313,14 +313,14 @@
<i class="fas fa-id-card me-1"></i> {% trans "Contact & Job" %} <i class="fas fa-id-card me-1"></i> {% trans "Contact & Job" %}
</button> </button>
</li> </li>
<li class="nav-item" role="presentation"> <li class="nav-item" role="presentation">
{# NEW TAB ADDED HERE #} {# 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"> <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" %} <i class="fas fa-route me-1"></i> {% trans "Journey Timeline" %}
</button> </button>
</li> </li>
</ul> </ul>
<div class="card-body"> <div class="card-body">
@ -367,7 +367,7 @@
</div> </div>
{# TAB 2 CONTENT: RESUME #} {# TAB 2 CONTENT: RESUME #}
{# NEW TAB 3 CONTENT: CANDIDATE JOURNEY TIMELINE #} {# NEW TAB 3 CONTENT: CANDIDATE JOURNEY TIMELINE #}
<div class="tab-pane fade" id="timeline-pane" role="tabpanel" aria-labelledby="timeline-tab"> <div class="tab-pane fade" id="timeline-pane" role="tabpanel" aria-labelledby="timeline-tab">
@ -615,9 +615,9 @@
{# RIGHT COLUMN: ACTIONS AND CANDIDATE TIMELINE #} {# RIGHT COLUMN: ACTIONS AND CANDIDATE TIMELINE #}
<div class="col-lg-4"> <div class="col-lg-4">
{# ACTIONS CARD #} {# ACTIONS CARD #}
<div class="card shadow-sm mb-2 p-2"> <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> <h5 class="text-muted mb-3"><i class="fas fa-cog me-2"></i>{% trans "Management Actions" %}</h5>
<div class="d-grid gap-2"> <div class="d-grid gap-2">
@ -631,7 +631,7 @@
<i class="fas fa-arrow-left"></i> {% trans "Back to List" %} <i class="fas fa-arrow-left"></i> {% trans "Back to List" %}
</a> </a>
{% if candidate.resume %} {% if candidate.resume %}
<a href="{{ candidate.resume.url }}" target="_blank" class="btn btn-outline-primary"> <a href="{{ candidate.resume.url }}" target="_blank" class="btn btn-outline-primary">
<i class="fas fa-eye me-1"></i> <i class="fas fa-eye me-1"></i>
{% trans "View Actual Resume" %} {% trans "View Actual Resume" %}
@ -640,22 +640,22 @@
<i class="fas fa-download me-1"></i> <i class="fas fa-download me-1"></i>
{% trans "Download Resume" %} {% trans "Download Resume" %}
</a> </a>
<a href="{% url 'candidate_resume_template' candidate.slug %}" class="btn btn-outline-info"> <a href="{% url 'candidate_resume_template' candidate.slug %}" class="btn btn-outline-info">
<i class="fas fa-file-alt me-1"></i> <i class="fas fa-file-alt me-1"></i>
{% trans "View Resume AI Overview" %} {% trans "View Resume AI Overview" %}
</a> </a>
{% endif %} {% endif %}
</div> </div>
</div> </div>
<div class="card shadow-sm mb-4 p-2"> <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: " %}{{candidate.time_to_hire|default:100}}&nbsp;days</h5> <h5 class="text-muted mb-3"><i class="fas fa-clock me-2"></i>{% trans "Time to Hire: " %}{{candidate.time_to_hire|default:100}}&nbsp;days</h5>
</div> </div>
</div> </div>
</div> </div>
@ -668,17 +668,18 @@
{% if candidate.scoring_timeout %} {% if candidate.scoring_timeout %}
<div style="display: flex; justify-content: center; align-items: center; height: 100%;" class="mb-2"> <div style="display: flex; justify-content: center; align-items: center; height: 100%;" class="mb-2">
<div class="ai-loading-container"> <div class="ai-loading-container">
<i class="fas fa-robot ai-robot-icon"></i> <i class="fas fa-robot ai-robot-icon"></i>
<span>Resume is been Scoring...</span> <span>Resume is been Scoring...</span>
</div> </div>
</div> </div>
{% else %} {% else %}
<div style="display: flex; justify-content: center; align-items: center; height: 100%;"> <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 'candidate_retry_scoring' candidate.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>`"> <button type="submit" class="btn btn-sm btn-main-action" hx-get="{% url 'candidate_retry_scoring' candidate.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>`">
{% trans "Retry AI Scoring" %} <i class="fas fa-redo-alt me-1"></i>
</button> {% trans "Unable to Parse Resume , click to retry" %}
</button>
</div> </div>
{% endif %} {% endif %}
{% endif %} {% endif %}
</div> </div>

View File

@ -295,11 +295,9 @@
<a href="{% url 'candidate_list' %}" class="text-decoration-none d-flex align-items-center gap-2"> <a href="{% url 'candidate_list' %}" class="text-decoration-none d-flex align-items-center gap-2">
<svg class="kaats-spinner" viewBox="0 0 50 50" style="width: 25px; height: 25px;"> <svg class="kaats-spinner" viewBox="0 0 50 50" style="width: 25px; height: 25px;">
<circle cx="25" cy="25" r="20"></circle> <circle cx="25" cy="25" r="20"></circle>
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5" <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> style="animation: kaats-spinner-dash 1.5s ease-in-out infinite;"></circle>
</svg> </svg>
{# CRITICAL: Remove the DIV and the text-nowrap class #}
<span class="text-teal-primary">{% trans "AI Scoring..." %}</span>
</a> </a>
{% endif %} {% endif %}
</td> </td>