422 lines
22 KiB
HTML
422 lines
22 KiB
HTML
{% extends 'applicant/partials/candidate_facing_base.html'%}
|
|
{% load static i18n %}
|
|
|
|
|
|
{% block title %}{% trans "My Dashboard" %} - {{ block.super }}{% endblock %}
|
|
|
|
{% block customCSS %}
|
|
<style>
|
|
/* ---------------------------------------------------------------------- */
|
|
/* THEME VARIABLES (Refined for Premium Look) */
|
|
/* ---------------------------------------------------------------------- */
|
|
:root {
|
|
--kaauh-teal: #00636e;
|
|
--kaauh-teal-dark: #004a53;
|
|
--kaauh-teal-accent: #008c9c; /* A slightly brighter, more vibrant teal for key links */
|
|
--kaauh-teal-light: #e6f7f8;
|
|
--kaauh-bg-subtle: #f9fbfb; /* Lighter, cleaner background */
|
|
--kaauh-border: #e0e5eb; /* Very subtle border color */
|
|
--kaauh-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); /* Lightest shadow */
|
|
--kaauh-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08); /* Modern, lifted shadow */
|
|
--gray-text: #5e6c84; /* Deeper, more readable gray */
|
|
--success-subtle: #d4edda;
|
|
--danger-subtle: #f8d7da;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--kaauh-bg-subtle);
|
|
}
|
|
|
|
.text-primary-theme { color: var(--kaauh-teal-accent) !important; }
|
|
.text-gray-subtle { color: var(--gray-text) !important; }
|
|
|
|
|
|
/* ---------------------------------------------------------------------- */
|
|
/* 1. PRIMARY BUTTONS & ACTIONS */
|
|
/* ---------------------------------------------------------------------- */
|
|
.btn-main-action {
|
|
background-color: var(--kaauh-teal);
|
|
color: white;
|
|
border: none;
|
|
transition: all 0.2s ease;
|
|
box-shadow: 0 4px 15px rgba(0, 99, 110, 0.4);
|
|
font-weight: 600;
|
|
}
|
|
.btn-main-action:hover {
|
|
background-color: var(--kaauh-teal-dark);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 6px 20px rgba(0, 99, 110, 0.5);
|
|
}
|
|
.btn-outline-secondary {
|
|
border-color: var(--kaauh-border);
|
|
color: var(--kaauh-teal-dark);
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.btn-outline-secondary:hover {
|
|
background-color: var(--kaauh-teal);
|
|
border-color: var(--kaauh-teal);
|
|
color: white;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------- */
|
|
/* 2. CARDS & CONTAINERS (Increased Padding & Smoother Shadow) */
|
|
/* ---------------------------------------------------------------------- */
|
|
.kaauh-card {
|
|
border: 1px solid var(--kaauh-border);
|
|
border-radius: 12px; /* Smoother corner radius */
|
|
box-shadow: var(--kaauh-shadow-sm);
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
.kaauh-card:hover {
|
|
box-shadow: var(--kaauh-shadow-lg); /* Subtle lift on hover */
|
|
}
|
|
|
|
.profile-data-list li {
|
|
padding: 1rem 0; /* More vertical space */
|
|
border-bottom: 1px dashed var(--kaauh-border);
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
}
|
|
.profile-data-list li strong {
|
|
font-weight: 700;
|
|
color: var(--kaauh-teal-dark);
|
|
min-width: 120px;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------- */
|
|
/* 3. TABS (Minimalist & Clean) */
|
|
/* ---------------------------------------------------------------------- */
|
|
.nav-tabs {
|
|
border-bottom: 1px solid var(--kaauh-border); /* Thinner border */
|
|
}
|
|
.nav-tabs .nav-link {
|
|
color: var(--gray-text); /* Use subdued text color for inactive tabs */
|
|
border: none;
|
|
border-bottom: 3px solid transparent; /* Thinner accent line */
|
|
padding: 1rem 1.75rem;
|
|
font-weight: 600;
|
|
}
|
|
.nav-tabs .nav-link:hover {
|
|
color: var(--kaauh-teal-dark);
|
|
border-color: var(--kaauh-teal-light);
|
|
}
|
|
.nav-tabs .nav-link.active {
|
|
color: var(--kaauh-teal);
|
|
border-color: var(--kaauh-teal);
|
|
background-color: transparent;
|
|
}
|
|
.nav-tabs .nav-link i {
|
|
color: var(--kaauh-teal-accent) !important;
|
|
}
|
|
.nav-scroll {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
white-space: nowrap;
|
|
}
|
|
.nav-scroll .nav-tabs { flex-wrap: nowrap; border-bottom: none; }
|
|
.nav-scroll .nav-tabs .nav-item { flex-shrink: 0; }
|
|
|
|
|
|
/* ---------------------------------------------------------------------- */
|
|
/* 4. APPLICATION TABLE (Refined Aesthetics) */
|
|
/* ---------------------------------------------------------------------- */
|
|
.application-table thead th {
|
|
background-color: var(--kaauh-teal-light); /* Light, subtle header */
|
|
color: var(--kaauh-teal-dark);
|
|
font-weight: 700;
|
|
border-bottom: 1px solid var(--kaauh-border);
|
|
padding: 1rem 1.5rem;
|
|
}
|
|
.application-table tbody tr {
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
.application-table tbody tr:hover {
|
|
background-color: var(--kaauh-teal-light);
|
|
}
|
|
.badge-stage {
|
|
font-weight: 600;
|
|
padding: 0.4em 0.8em;
|
|
border-radius: 50rem;
|
|
}
|
|
.bg-success { background-color: #38a169 !important; }
|
|
.bg-warning { background-color: #f6ad55 !important; }
|
|
|
|
/* Responsive Table for Mobile (High contrast labels) */
|
|
@media (max-width: 767.98px) {
|
|
.application-table thead { display: none; }
|
|
.application-table tr {
|
|
margin-bottom: 1rem;
|
|
border: 1px solid var(--kaauh-border);
|
|
border-radius: 8px;
|
|
box-shadow: var(--kaauh-shadow-sm);
|
|
}
|
|
.application-table td {
|
|
text-align: right !important;
|
|
padding: 0.75rem 1rem;
|
|
padding-left: 50%;
|
|
position: relative;
|
|
}
|
|
.application-table td::before {
|
|
content: attr(data-label);
|
|
position: absolute;
|
|
left: 1rem;
|
|
width: 45%;
|
|
font-weight: 700;
|
|
color: var(--gray-text); /* Use muted gray for labels */
|
|
}
|
|
}
|
|
|
|
/* Document Management List */
|
|
.list-group-item {
|
|
border-radius: 8px;
|
|
margin-bottom: 0.5rem;
|
|
border: 1px solid var(--kaauh-border);
|
|
transition: all 0.2s ease;
|
|
}
|
|
.list-group-item:hover {
|
|
background-color: var(--kaauh-teal-light);
|
|
border-color: var(--kaauh-teal-accent);
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container py-4 py-md-5">
|
|
|
|
{# Header: Larger, more dynamic on large screens. Stacks cleanly on mobile. #}
|
|
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5">
|
|
<h1 class="display-6 display-md-5 fw-extrabold mb-3 mb-md-0" style="color: var(--kaauh-teal-dark);">
|
|
{% trans "Your Candidate Dashboard" %}
|
|
</h1>
|
|
<a href="#profile-details" data-bs-toggle="tab" class="btn btn-main-action btn-sm btn-md-lg px-4 py-2 rounded-pill shadow-sm shadow-md-lg">
|
|
<i class="fas fa-edit me-2"></i> {% trans "Update Profile" %}
|
|
</a>
|
|
</div>
|
|
|
|
{# Candidate Quick Overview Card: Use a softer background color #}
|
|
<div class="card kaauh-card mb-5 p-4 bg-white">
|
|
<div class="d-flex align-items-center flex-column flex-sm-row text-center text-sm-start">
|
|
<img src="{% if candidate.profile_picture %}{{ candidate.profile_picture.url }}{% else %}{% static 'image/default_avatar.png' %}{% endif %}"
|
|
alt="{% trans 'Profile Picture' %}"
|
|
class="rounded-circle me-sm-4 mb-3 mb-sm-0 shadow-lg"
|
|
style="width: 80px; height: 80px; object-fit: cover; border: 4px solid var(--kaauh-teal-accent);">
|
|
<div>
|
|
<h3 class="card-title mb-1 fw-bold text-dark">{{ candidate.name|default:"Candidate Name" }}</h3>
|
|
<p class="text-gray-subtle mb-0">{{ candidate.email }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# ================================================= #}
|
|
{# MAIN TABBED INTERFACE #}
|
|
{# ================================================= #}
|
|
<div class="card kaauh-card p-0 bg-white">
|
|
|
|
{# Tab Navigation: Used nav-scroll for responsiveness #}
|
|
<div class="nav-scroll px-4 pt-3">
|
|
<ul class="nav nav-tabs" id="candidateTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-details" type="button" role="tab" aria-controls="profile-details" aria-selected="true">
|
|
<i class="fas fa-user-circle me-2"></i> {% trans "Profile Details" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="applications-tab" data-bs-toggle="tab" data-bs-target="#applications-history" type="button" role="tab" aria-controls="applications-history" aria-selected="false">
|
|
<i class="fas fa-list-alt me-2"></i> {% trans "My Applications" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="documents-tab" data-bs-toggle="tab" data-bs-target="#document-management" type="button" role="tab" aria-controls="document-management" aria-selected="false">
|
|
<i class="fas fa-file-upload me-2"></i> {% trans "Documents" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#account-settings" type="button" role="tab" aria-controls="account-settings" aria-selected="false">
|
|
<i class="fas fa-cogs me-2"></i> {% trans "Settings" %}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{# Tab Content #}
|
|
<div class="tab-content p-4 p-md-5" id="candidateTabsContent">
|
|
|
|
<div class="tab-pane fade show active" id="profile-details" role="tabpanel" aria-labelledby="profile-tab">
|
|
<h4 class="mb-4 fw-bold text-gray-subtle">{% trans "Personal Information" %}</h4>
|
|
<ul class="list-unstyled profile-data-list p-0">
|
|
<li class="d-flex justify-content-between align-items-center">
|
|
<div><i class="fas fa-phone-alt me-2 text-primary-theme"></i> <strong>{% trans "Phone" %}</strong></div>
|
|
<span class="text-end">{{ candidate.phone|default:"N/A" }}</span>
|
|
</li>
|
|
<li class="d-flex justify-content-between align-items-center">
|
|
<div><i class="fas fa-globe me-2 text-primary-theme"></i> <strong>{% trans "Nationality" %}</strong></div>
|
|
<span class="text-end">{{ candidate.get_nationality_display|default:"N/A" }}</span>
|
|
</li>
|
|
<li class="d-flex justify-content-between align-items-center">
|
|
<div><i class="fas fa-calendar-alt me-2 text-primary-theme"></i> <strong>{% trans "Date of Birth" %}</strong></div>
|
|
<span class="text-end">{{ candidate.date_of_birth|date:"M d, Y"|default:"N/A" }}</span>
|
|
</li>
|
|
<li class="small pt-3 text-muted border-bottom-0">{% trans "Use the 'Update Profile' button above to edit these details." %}</li>
|
|
</ul>
|
|
|
|
<hr class="my-5">
|
|
|
|
<h4 class="mb-4 fw-bold text-gray-subtle">{% trans "Quick Actions" %}</h4>
|
|
<div class="row g-3 g-md-4">
|
|
<div class="col-6 col-sm-4 col-md-4">
|
|
<a href="#applications-history" data-bs-toggle="tab" class="btn btn-action-tile w-100 d-grid text-center text-dark text-decoration-none">
|
|
<span class="action-tile-icon mb-2"><i class="fas fa-list-check"></i></span>
|
|
<span class="fw-bold">{% trans "Track Jobs" %}</span>
|
|
<span class="small text-muted d-none d-sm-block">{% trans "View stages" %}</span>
|
|
</a>
|
|
</div>
|
|
<div class="col-6 col-sm-4 col-md-4">
|
|
<a href="#document-management" data-bs-toggle="tab" class="btn btn-action-tile w-100 d-grid text-center text-dark text-decoration-none">
|
|
<span class="action-tile-icon mb-2"><i class="fas fa-cloud-upload-alt"></i></span>
|
|
<span class="fw-bold">{% trans "Manage Documents" %}</span>
|
|
<span class="small text-muted d-none d-sm-block">{% trans "Upload/View files" %}</span>
|
|
</a>
|
|
</div>
|
|
<div class="col-12 col-sm-4 col-md-4">
|
|
<a href="{% url 'kaauh_career' %}" class="btn btn-action-tile w-100 d-grid text-center text-dark text-decoration-none">
|
|
<span class="action-tile-icon mb-2"><i class="fas fa-search"></i></span>
|
|
<span class="fw-bold">{% trans "Find New Careers" %}</span>
|
|
<span class="small text-muted d-none d-sm-block">{% trans "Explore open roles" %}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="applications-history" role="tabpanel" aria-labelledby="applications-tab">
|
|
<h4 class="mb-4 fw-bold text-gray-subtle">{% trans "Application Tracking" %}</h4>
|
|
|
|
{% if applications %}
|
|
<div class="kaauh-card shadow-lg p-0">
|
|
<table class="table table-borderless align-middle mb-0 application-table">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" style="min-width: 250px;">{% trans "Job Title" %}</th>
|
|
<th scope="col">{% trans "Applied On" %}</th>
|
|
<th scope="col">{% trans "Current Stage" %}</th>
|
|
<th scope="col">{% trans "Status" %}</th>
|
|
<th scope="col" class="text-end" style="min-width: 140px;">{% trans "Action" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for application in applications %}
|
|
<tr>
|
|
<td class="fw-medium" data-label="{% trans 'Job Title' %}">
|
|
<a href="{% url 'job_detail' application.job.slug %}" class="text-decoration-none text-primary-theme">
|
|
{{ application.job.title }}
|
|
</a>
|
|
</td>
|
|
<td data-label="{% trans 'Applied On' %}" class="text-gray-subtle">{{ application.applied_date|date:"d M Y" }}</td>
|
|
<td data-label="{% trans 'Current Stage' %}">
|
|
<span class="badge badge-stage bg-info text-white">
|
|
{{ application.stage }}
|
|
</span>
|
|
</td>
|
|
<td data-label="{% trans 'Status' %}">
|
|
{% if application.is_active %}
|
|
<span class="badge badge-stage bg-success">{% trans "Active" %}</span>
|
|
{% else %}
|
|
<span class="badge badge-stage bg-warning text-dark">{% trans "Closed" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="text-end" data-label="{% trans 'Action' %}">
|
|
<a href="#" class="btn btn-outline-secondary btn-sm rounded-pill px-3">
|
|
<i class="fas fa-eye me-1"></i> {% trans "Details" %}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{% else %}
|
|
<div class="alert alert-info text-center p-5 rounded-3" style="border: 1px dashed var(--kaauh-border); background-color: var(--kaauh-teal-light);">
|
|
<i class="fas fa-info-circle fa-2x mb-3 text-primary-theme"></i>
|
|
<h5 class="mb-3 fw-bold text-primary-theme">{% trans "You haven't submitted any applications yet." %}</h5>
|
|
<a href="{% url 'kaauh_career' %}" class="ms-3 btn btn-main-action mt-2 rounded-pill px-4">
|
|
{% trans "View Available Jobs" %} <i class="fas fa-arrow-right ms-2"></i>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="document-management" role="tabpanel" aria-labelledby="documents-tab">
|
|
<h4 class="mb-4 fw-bold text-gray-subtle">{% trans "My Uploaded Documents" %}</h4>
|
|
|
|
<p class="text-gray-subtle">{% trans "You can upload and manage your resume, certificates, and professional documents here. These documents will be attached to your applications." %}</p>
|
|
|
|
<a href="#" class="btn btn-main-action rounded-pill px-4 me-3 d-block d-sm-inline-block w-100 w-sm-auto mb-4">
|
|
<i class="fas fa-cloud-upload-alt me-2"></i> {% trans "Upload New Document" %}
|
|
</a>
|
|
|
|
<hr class="my-5">
|
|
|
|
{# Example Document List (Refined structure) #}
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center bg-white p-3">
|
|
<div class="mb-2 mb-sm-0 fw-medium">
|
|
<i class="fas fa-file-pdf me-2 text-primary-theme"></i> **{% trans "Resume" %}** <span class="text-muted small">(CV\_John\_Doe\_2024.pdf)</span>
|
|
</div>
|
|
<div class="d-flex align-items-center">
|
|
<span class="text-muted small me-3">{% trans "Uploaded: 10 Jan 2024" %}</span>
|
|
<a href="#" class="btn btn-sm btn-outline-secondary me-2"><i class="fas fa-eye"></i></a>
|
|
<a href="#" class="btn btn-sm btn-outline-danger"><i class="fas fa-trash-alt"></i></a>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center bg-white p-3">
|
|
<div class="mb-2 mb-sm-0 fw-medium">
|
|
<i class="fas fa-file-alt me-2 text-primary-theme"></i> **{% trans "Medical Certificate" %}** <span class="text-muted small">(Cert\_KSA\_MED.jpg)</span>
|
|
</div>
|
|
<div class="d-flex align-items-center">
|
|
<span class="text-muted small me-3">{% trans "Uploaded: 22 Feb 2023" %}</span>
|
|
<a href="#" class="btn btn-sm btn-outline-secondary me-2"><i class="fas fa-eye"></i></a>
|
|
<a href="#" class="btn btn-sm btn-outline-danger"><i class="fas fa-trash-alt"></i></a>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="account-settings" role="tabpanel" aria-labelledby="settings-tab">
|
|
<h4 class="mb-4 fw-bold text-gray-subtle">{% trans "Security & Preferences" %}</h4>
|
|
|
|
<div class="row g-4">
|
|
<div class="col-12 col-md-6">
|
|
<div class="card kaauh-card p-4 h-100 bg-white">
|
|
<h5 class="fw-bold"><i class="fas fa-key me-2 text-primary-theme"></i> {% trans "Password Security" %}</h5>
|
|
<p class="text-muted small">{% trans "Update your password regularly to keep your account secure." %}</p>
|
|
<a href="#" class="btn btn-outline-secondary mt-auto w-100 py-2 fw-medium">
|
|
{% trans "Change Password" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<div class="card kaauh-card p-4 h-100 bg-white">
|
|
<h5 class="fw-bold"><i class="fas fa-envelope me-2 text-primary-theme"></i> {% trans "Email Preferences" %}</h5>
|
|
<p class="text-muted small">{% trans "Manage subscriptions and job alert settings." %}</p>
|
|
<a href="#" class="btn btn-outline-secondary mt-auto w-100 py-2 fw-medium">
|
|
{% trans "Manage Alerts" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert mt-5 py-3" style="background-color: var(--danger-subtle); color: #842029; border: 1px solid #f5c2c7; border-radius: 8px;">
|
|
<i class="fas fa-exclamation-triangle me-2"></i> {% trans "To delete your profile, please contact HR support." %}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
{# ================================================= #}
|
|
|
|
|
|
</div>
|
|
{% endblock %} |