agency application form

recruitment/forms.py

@@ -302,13 +302,25 @@ class ApplicationForm(forms.ModelForm):
             "hiring_agency": forms.Select(attrs={"class": "form-select"}),
         }
 
-    def __init__(self, *args, **kwargs):
+    def __init__(self, *args,current_agency=None,current_job=None,**kwargs):
         super().__init__(*args, **kwargs)
         self.helper = FormHelper()
         self.helper.form_method = "post"
         self.helper.form_class = "form-horizontal"
         self.helper.label_class = "col-md-3"
         self.helper.field_class = "col-md-9"
+        if current_agency:
+            # IMPORTANT: Replace 'agency' below with the actual field name 
+            # on your Person model that links it back to the Agency model.
+            self.fields['person'].queryset = self.fields['person'].queryset.filter(
+                agency=current_agency
+            )
+            self.fields['job'].queryset = self.fields['job'].queryset.filter(
+                pk=current_job.id
+            )
+            self.fields['job'].initial = current_job 
+
+            self.fields['job'].widget.attrs['readonly'] = True
 
         # Make job field read-only if it's being pre-populated
         job_value = self.initial.get("job")
@@ -1990,7 +2002,7 @@ class OnsiteLocationForm(forms.ModelForm):
 class InterviewEmailForm(forms.Form):
     subject = forms.CharField(max_length=255, widget=forms.TextInput(attrs={'class': 'form-control'}))
     message_for_candidate = forms.CharField(widget=forms.Textarea(attrs={'class': 'form-control', 'rows': 6}))
-    message_for_agency = forms.CharField(widget=forms.Textarea(attrs={'class': 'form-control', 'rows': 6}))
+    message_for_agency = forms.CharField(widget=forms.Textarea(attrs={'class': 'form-control', 'rows': 6}),required=False)
     message_for_participants = forms.CharField(widget=forms.Textarea(attrs={'class': 'form-control', 'rows': 6}))
 
     def __init__(self, *args, candidate, external_participants, system_participants, meeting, job, **kwargs):
@@ -2025,7 +2037,7 @@ class InterviewEmailForm(forms.Form):
         job_title = job.title
         agency_name = (
             candidate.hiring_agency.name
-            if candidate.belong_to_agency and candidate.hiring_agency
+            if candidate.belong_to_an_agency and candidate.hiring_agency
             else "Hiring Agency"
         )
 

recruitment/migrations/0003_jobposting_cv_zip_file_jobposting_zip_created.py

@@ -0,0 +1,23 @@
+# Generated by Django 5.2.7 on 2025-11-19 14:43
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('recruitment', '0002_alter_jobposting_job_type_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='jobposting',
+            name='cv_zip_file',
+            field=models.FileField(blank=True, null=True, upload_to='job_zips/'),
+        ),
+        migrations.AddField(
+            model_name='jobposting',
+            name='zip_created',
+            field=models.BooleanField(default=False),
+        ),
+    ]

recruitment/models.py

@@ -243,6 +243,11 @@ class JobPosting(Base):
         help_text=_("Whether the job posting has been parsed by AI"),
         verbose_name=_("AI Parsed"),
     )
+    # Field to store the generated zip file
+    cv_zip_file = models.FileField(upload_to='job_zips/', null=True, blank=True)
+    
+    # Field to track if the background task has completed
+    zip_created = models.BooleanField(default=False)
 
     class Meta:
         ordering = ["-created_at"]
@@ -985,8 +990,12 @@ class Application(Base):
         content_type = ContentType.objects.get_for_model(self.__class__)
         return Document.objects.filter(content_type=content_type, object_id=self.id)
     
-    # @property
-    # def belong_to_agency(self):
+    @property
+    def belong_to_an_agency(self):
+        if self.hiring_agency:
+            return True
+        else:
+            return False
 
 
 

recruitment/tasks.py

@@ -847,3 +847,52 @@ def email_success_hook(task):
         logger.error(f"Task ID {task.id} failed. Error: {task.result}")
 
 
+
+
+import io
+import zipfile
+import os
+from django.core.files.base import ContentFile
+from django.conf import settings
+from .models import Application, JobPosting # Import your models
+
+ALLOWED_EXTENSIONS = (".pdf", ".docx")
+
+def generate_and_save_cv_zip(job_posting_id):
+    """
+    Generates a zip file of all CVs for a job posting and saves it to the job model.
+    """
+    job = JobPosting.objects.get(id=job_posting_id)
+    entries = Application.objects.filter(job=job)
+    
+    zip_buffer = io.BytesIO()
+
+    with zipfile.ZipFile(zip_buffer, "w", zipfile.ZIP_DEFLATED) as zf:
+        for entry in entries:
+            if not entry.resume:
+                continue
+
+            file_name = entry.resume.name.split("/")[-1]
+            file_name_lower = file_name.lower()
+
+            if file_name_lower.endswith(ALLOWED_EXTENSIONS):
+                try:
+                    with entry.resume.open("rb") as file_obj:
+                        file_content = file_obj.read()
+                        zf.writestr(file_name, file_content)
+
+                except Exception as e:
+                    # Log the error using Django's logging system if set up
+                    print(f"Error processing file {file_name}: {e}")
+                    continue
+
+    # 4. Save the generated zip buffer to the JobPosting model
+    zip_buffer.seek(0)
+    zip_filename = f"all_cvs_for_{job.title}.zip"
+    
+    # Use ContentFile to save the bytes stream into the FileField
+    job.cv_zip_file.save(zip_filename, ContentFile(zip_buffer.read()))
+    job.zip_created = True # Assuming you added a BooleanField for tracking completion
+    job.save()
+
+    return f"Successfully created zip for Job ID {job_posting_id}"

recruitment/urls.py

@@ -23,7 +23,9 @@ urlpatterns = [
     path("jobs/<slug:slug>/update/", views.edit_job, name="job_update"),
     # path('jobs/<slug:slug>/delete/', views., name='job_delete'),
     path('jobs/<slug:slug>/', views.job_detail, name='job_detail'),
-    path('jobs/<slug:slug>/download/cvs/', views.job_cvs_download, name='job_cvs_download'),
+    # path('jobs/<slug:slug>/download/cvs/', views.job_cvs_download, name='job_cvs_download'),
+    path('job/<slug:slug>/request-download/', views.request_cvs_download, name='request_cvs_download'),
+    path('job/<slug:slug>/download-ready/', views.download_ready_cvs, name='download_ready_cvs'),
 
     path('careers/',views.kaauh_career,name='kaauh_career'),
 

recruitment/views.py

@@ -163,8 +163,8 @@ class PersonCreateView(CreateView):
     model = Person
     template_name = "people/create_person.html"
     form_class = PersonForm
-    # success_url = reverse_lazy("person_list")
-
+    success_url = reverse_lazy("person_list")
+    print("from agency")
     def form_valid(self, form):
         if "HX-Request" in self.request.headers:
             instance = form.save()
@@ -596,59 +596,88 @@ def job_detail(request, slug):
     return render(request, "jobs/job_detail.html", context)
 
 
-ALLOWED_EXTENSIONS = (".pdf", ".docx")
+# ALLOWED_EXTENSIONS = (".pdf", ".docx")
 
 
-def job_cvs_download(request, slug):
+# def job_cvs_download(request, slug):
+#     job = get_object_or_404(JobPosting, slug=slug)
+#     entries = Application.objects.filter(job=job)
+    
+#     # 2. Create an in-memory byte stream (BytesIO)
+#     zip_buffer = io.BytesIO()
+
+#     # 3. Create the ZIP archive
+#     with zipfile.ZipFile(zip_buffer, "w", zipfile.ZIP_DEFLATED) as zf:
+#         for entry in entries:
+#             # Check if the file field has a file
+#             if not entry.resume:
+#                 continue
+
+#             # Get the file name and check extension (case-insensitive)
+#             file_name = entry.resume.name.split("/")[-1]
+#             file_name_lower = file_name.lower()
+
+#             if file_name_lower.endswith(ALLOWED_EXTENSIONS):
+#                 try:
+#                     # Open the file object (rb is read binary)
+#                     file_obj = entry.resume.open("rb")
+
+#                     # *** ROBUST METHOD: Read the content and write it to the ZIP ***
+#                     file_content = file_obj.read()
+
+#                     # Write the file content directly to the ZIP archive
+#                     zf.writestr(file_name, file_content)
+
+#                     file_obj.close()
+
+#                 except Exception as e:
+#                     # Log the error but continue with the rest of the files
+#                     print(f"Error processing file {file_name}: {e}")
+#                     continue
+
+#     # 4. Prepare the response
+#     zip_buffer.seek(0)
+
+#     # 5. Create the HTTP response
+#     response = HttpResponse(zip_buffer.read(), content_type="application/zip")
+
+#     # Set the header for the browser to download the file
+#     response["Content-Disposition"] = (
+#         f'attachment; filename="all_cvs_for_{job.title}.zip"'
+#     )
+
+#     return response
+
+def request_cvs_download(request, slug):
+    """
+    View to initiate the background task.
+    """
     job = get_object_or_404(JobPosting, slug=slug)
-    entries = Application.objects.filter(job=job)
 
-    # 2. Create an in-memory byte stream (BytesIO)
-    zip_buffer = io.BytesIO()
-
-    # 3. Create the ZIP archive
-    with zipfile.ZipFile(zip_buffer, "w", zipfile.ZIP_DEFLATED) as zf:
-        for entry in entries:
-            # Check if the file field has a file
-            if not entry.resume:
-                continue
-
-            # Get the file name and check extension (case-insensitive)
-            file_name = entry.resume.name.split("/")[-1]
-            file_name_lower = file_name.lower()
-
-            if file_name_lower.endswith(ALLOWED_EXTENSIONS):
-                try:
-                    # Open the file object (rb is read binary)
-                    file_obj = entry.resume.open("rb")
-
-                    # *** ROBUST METHOD: Read the content and write it to the ZIP ***
-                    file_content = file_obj.read()
-
-                    # Write the file content directly to the ZIP archive
-                    zf.writestr(file_name, file_content)
-
-                    file_obj.close()
-
-                except Exception as e:
-                    # Log the error but continue with the rest of the files
-                    print(f"Error processing file {file_name}: {e}")
-                    continue
-
-    # 4. Prepare the response
-    zip_buffer.seek(0)
-
-    # 5. Create the HTTP response
-    response = HttpResponse(zip_buffer.read(), content_type="application/zip")
-
-    # Set the header for the browser to download the file
-    response["Content-Disposition"] = (
-        f'attachment; filename="all_cvs_for_{job.title}.zip"'
-    )
-
-    return response
+    # Use async_task to run the function in the background
+    # Pass only simple arguments (like the job ID)
+    async_task('recruitment.tasks.generate_and_save_cv_zip', job.id)
+    
+    # Provide user feedback and redirect
+    messages.info(request, "The CV compilation has started in the background. It may take a few moments. Refresh this page to check status.")
+    return redirect('job_detail', slug=slug) # Redirect back to the job detail page
 
+def download_ready_cvs(request, slug):
+    """
+    View to serve the file once it is ready.
+    """
+    job = get_object_or_404(JobPosting, slug=slug)
 
+    if job.cv_zip_file and job.zip_created:
+        # Django FileField handles the HttpResponse and file serving easily
+        response = HttpResponse(job.cv_zip_file.read(), content_type="application/zip")
+        response["Content-Disposition"] = f'attachment; filename="{job.cv_zip_file.name.split("/")[-1]}"'
+        return response
+    else:
+        # File is not ready or doesn't exist
+        messages.warning(request, "The ZIP file is still being generated or an error occurred.")
+        return redirect('job_detail', slug=slug)
+    
 @login_required
 @staff_user_required
 def job_image_upload(request, slug):
@@ -2938,16 +2967,17 @@ def staff_assignment_view(request, slug):
     applications = job.applications.all()
 
     if request.method == "POST":
-        form = StaffAssignmentForm(request.POST)
+        form = StaffAssignmentForm(request.POST, instance=job) 
+       
         if form.is_valid():
-            assignment = form.save(commit=False)
+            assignment = form.save()
             messages.success(request, f"Staff assigned to job '{job.title}' successfully!")
             return redirect("job_detail", slug=job.slug)
         else:
             messages.error(request, "Please correct the errors below.")
     else:
-        form = StaffAssignmentForm()
-
+        form = StaffAssignmentForm(instance=job)
+    print(staff_users)
     context = {
         "job": job,
         "applications": applications,
@@ -4206,6 +4236,8 @@ def agency_portal_submit_candidate_page(request, slug):
     assignment = get_object_or_404(
         AgencyJobAssignment.objects.select_related("agency", "job"), slug=slug
     )
+    current_agency=assignment.agency
+    current_job=assignment.job
 
     if assignment.is_full:
         messages.error(request, "Maximum candidate limit reached for this assignment.")
@@ -4230,9 +4262,9 @@ def agency_portal_submit_candidate_page(request, slug):
         hiring_agency=assignment.agency, job=assignment.job
     ).count()
 
-    form = ApplicationForm()
+    form = ApplicationForm(current_agency=current_agency,current_job=current_job)
     if request.method == "POST":
-        form = ApplicationForm(request.POST, request.FILES)
+        form = ApplicationForm(request.POST, request.FILES,current_agency=current_agency,current_job=current_job)
         if form.is_valid():
             candidate = form.save(commit=False)
 
@@ -5602,9 +5634,9 @@ def send_interview_email(request, slug):
     interview = get_object_or_404(ScheduledInterview, slug=slug)
 
     # 2. Retrieve the required data for the form's constructor
-    candidate = interview.candidate
+    candidate = interview.application
     job = interview.job
-    meeting = interview.zoom_meeting
+    meeting = interview.interview_location
     participants = list(interview.participants.all()) + list(
         interview.system_users.all()
     )
@@ -5625,7 +5657,7 @@ def send_interview_email(request, slug):
             meeting=meeting,
             job=job,
         )
-
+      
         if form.is_valid():
             # 4. Extract cleaned data
             subject = form.cleaned_data["subject"]
@@ -5635,6 +5667,8 @@ def send_interview_email(request, slug):
 
             # --- SEND EMAILS Candidate or agency---
             if candidate.belong_to_an_agency:
+                email=candidate.hiring_agency.email
+                print(email)
                 send_mail(
                     subject,
                     msg_agency,
@@ -5647,7 +5681,7 @@ def send_interview_email(request, slug):
                     subject,
                     msg_candidate,
                     settings.DEFAULT_FROM_EMAIL,
-                    [candidate.email],
+                    [candidate.person.email],
                     fail_silently=False,
                 )
 
@@ -5659,6 +5693,8 @@ def send_interview_email(request, slug):
                 attachments=None,
                 async_task_=True,  # Changed to False to avoid pickle issues,
                 from_interview=True,
+                job=job
+
             )
 
             if email_result["success"]:
@@ -5694,6 +5730,13 @@ def send_interview_email(request, slug):
                     f"Failed to send email: {email_result.get('message', 'Unknown error')}",
                 )
                 return redirect("list_meetings")
+        else:
+          
+            error_msg = "Failed to send email. Please check the form for errors."
+            print(form.errors)
+            messages.error(request, error_msg)
+            return redirect("meeting_details", slug=meeting.slug) 
+    return redirect("meeting_details", slug=meeting.slug)
 
 
 # def schedule_interview_location_form(request,slug):
@@ -6015,13 +6058,13 @@ def meeting_details(request, slug):
     participant_form = InterviewParticpantsForm(instance=interview)
 
 
-    # email_form = InterviewEmailForm(
-    # candidate=candidate,
-    # external_participants=external_participants,  # QuerySet of Participants
-    # system_participants=system_participants,      # QuerySet of Users
-    # meeting=meeting,  # ← This is InterviewLocation (e.g., ZoomMeetingDetails)
-    # job=job,
-    #  )
+    email_form = InterviewEmailForm(
+    candidate=candidate,
+    external_participants=external_participants,  # QuerySet of Participants
+    system_participants=system_participants,      # QuerySet of Users
+    meeting=meeting,  # ← This is InterviewLocation (e.g., ZoomMeetingDetails)
+    job=job,
+     )
 
     context = {
         'meeting': meeting,
@@ -6032,7 +6075,7 @@ def meeting_details(request, slug):
         'system_participants': system_participants,
         'total_participants': total_participants,
         'form': participant_form,
-        # 'email_form': email_form,
+        'email_form': email_form,
     }
 
     return render(request, 'interviews/detail_interview.html', context)

templates/account/email_confirm.html

@@ -1,23 +1,174 @@
-{% extends "base.html" %}
-{% load i18n %}
+{% load static i18n %}
 {% load account %}
-
-{% block title %}{% trans "Confirm Email Address" %}{% endblock %}
-
-{% block content %}
-<div class="container my-5">
+{% get_current_language_bidi as LANGUAGE_BIDI %}
+{% get_current_language as LANGUAGE_CODE %}
+<!DOCTYPE html>
+<html lang="{{LANGUAGE_CODE}}" dir="{% if LANGUAGE_BIDI %}rtl{% else %}ltr{% endif %}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}{% trans "Confirm Email Address" %}{% endblock %}</title>
     
-    {# Centering the main header content #}
-    <div class="row mb-5 justify-content-center text-center">
-        <div class="col-md-8 col-lg-6">
-            <h3 class="fw-bolder" style="color: #00636e;">{% trans "Account Verification" %}</h3>
-            <p class="lead text-muted">{% trans "Verify your email to secure your account and unlock full features." %}</p>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLMDJzL2sKMOz36tM+B7f3/17W6j45+V+qJ9vG9eW0p/L5UqG+J0S3Fv52g+JzI/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    
+    <style>
+        /* -------------------------------------------------------------------------- */
+        /* CUSTOM TEAL THEME OVERRIDES (Matching the Sign-In Reference) */
+        /* -------------------------------------------------------------------------- */
+        :root {
+            /* Define TEAL as the primary color for Bootstrap overrides */
+            --bs-primary: #00636e; /* Dark Teal */
+            --bs-primary-rgb: 0, 99, 110;
+            --bs-primary-light: #007a88; /* Lighter Teal for hover */
+            
+            /* Background and Text Colors */
+            --bs-body-bg: #f8f9fa; /* Light gray background */
+            --kaauh-primary-text: #212529; /* Dark text */
+            
+            /* Custom Theme Variables */
+            --kaauh-success-icon: #008080; /* Slightly softer teal for success icon */
+        }
+        
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bs-body-bg);
+        }
+
+        /* Custom Left Panel (Replicating the original look) */
+        .left-panel {
+            flex: 1;
+            /* Placeholder for image path. Assuming 'image/kaauh_banner.png' is correct based on reference */
+            background: url("{% static 'image/kaauh_banner.png' %}") no-repeat center center;
+            background-size: cover;
+            position: relative;
+            display: flex;
+            align-items: flex-end;
+            padding: 3rem;
+            color: white;
+            z-index: 1;
+        }
+        .left-panel::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
+            z-index: 0;
+        }
+        .left-panel-content {
+            position: relative;
+            z-index: 2;
+        }
+
+        /* Right Panel Styling - Used for the confirmation form */
+        .right-panel {
+            background-color: white;
+            padding: 3rem;
+        }
+        
+        /* Component Overrides */
+        .btn-main-action {
+            background-color: var(--bs-primary) !important;
+            border-color: var(--bs-primary) !important;
+            color: white !important;
+            font-weight: 600;
+            border-radius: 0.5rem; 
+            box-shadow: 0 4px 8px rgba(0, 99, 110, 0.2); 
+            transition: all 0.2s ease;
+            padding: 0.75rem 2.5rem; /* Large padding for primary action */
+            width: 100%; /* Make the button full width on smaller screens */
+        }
+        .btn-main-action:hover {
+            background-color: var(--bs-primary-light) !important;
+            border-color: var(--bs-primary-light) !important;
+            box-shadow: 0 6px 10px rgba(0, 99, 110, 0.3);
+            transform: translateY(-1px);
+        }
+        
+        /* Secondary Outline Button */
+        .btn-outline-secondary {
+            color: var(--bs-primary) !important;
+            border-color: var(--bs-primary) !important;
+            font-weight: 600;
+            border-radius: 0.5rem;
+            padding: 0.75rem 2.5rem; 
+            width: 100%;
+        }
+        .btn-outline-secondary:hover {
+            background-color: var(--bs-primary) !important;
+            color: white !important;
+            border-color: var(--bs-primary) !important;
+        }
+
+        /* Text Accent Color */
+        .text-primary-teal {
+            color: var(--bs-primary) !important;
+        }
+        
+        /* Confirmation Icon Color */
+        .icon-success-teal {
+            color: var(--kaauh-success-icon);
+        }
+        
+        /* Card Styling - Matching the 'right-panel' white look */
+        .kaauh-card {
+            border: none;
+            border-radius: 1rem; /* Rounded corners */
+            box-shadow: 0 10px 25px rgba(0,0,0,0.08); /* Strong shadow */
+            background-color: white;
+            overflow: hidden;
+        }
+        
+        /* Layout Adjustments to match reference */
+        @media (min-width: 992px) {
+            /* 1. Set a NARROWER fixed width for the right panel container */
+            .right-panel-col {
+                flex: 0 0 450px; 
+            }
+            /* 2. Ensure the form container doesn't exceed a smaller size and is centered */
+            .right-panel-content-wrapper {
+                 max-width: 560px;
+                 width: 100%;
+            }
+            /* 3. Button width adjusted for desktop view */
+            .btn-main-action, .btn-outline-secondary {
+                width: auto;
+            }
+        }
+    </style>
+</head>
+<body class="d-flex vh-100 w-100">
+
+    <div class="left-panel d-none d-lg-flex flex-grow-1">
+        <div class="left-panel-content">
+            <h1 class="text-4xl font-weight-bold mb-4" style="font-size: 1.5rem;">
+                <span class="text-white">
+                    <div class="hospital-text text-center text-md-start me-3">
+                        <div class="ar small">جامعة الأميرة نورة بنت عبدالرحمن الأكاديمية</div>
+                        <div class="ar small">ومستشفى الملك عبدالله بن عبدالعزيز التخصصي</div>
+                        <div class="en small">Princess Nourah bint Abdulrahman University</div>
+                        <div class="en small">King Abdullah bin Abdulaziz University Hospital</div>
+                    </div>
+                </span>
+            </h1>
+            <small>Powered By TENHAL | تنحل</small>
         </div>
     </div>
-    
-    <div class="row justify-content-center">
-        <div class="col-md-8 col-lg-6">
-            <div class="card shadow-lg border-0 rounded-4"> 
+
+    <div class="d-flex flex-column right-panel right-panel-col flex-grow-1 align-items-center justify-content-center">
+        
+        <div class="right-panel-content-wrapper p-4 p-md-0">
+            
+            {# Global Header #}
+            <div class="text-center mb-4">
+                <h3 class="fw-bolder text-primary-teal">{% trans "Account Verification" %}</h3>
+                <p class="lead text-muted">{% trans "Verify your email to secure your account and unlock full features." %}</p>
+            </div>
+            
+            <div class="kaauh-card"> 
                 <div class="card-body p-5 text-center">
 
                     {% with email as email %}
@@ -27,11 +178,11 @@
                             {# ------------------- CONFIRMATION REQUEST (GET) - Success Theme ------------------- #}
                             {% user_display confirmation.email_address.user as user_display %}
                             
-                            <i class="fas fa-check-circle mb-4" style="font-size: 4rem; color: #008080;"></i> {# Changed icon to a checkmark for clarity #}
+                            <i class="fas fa-check-circle mb-4 icon-success-teal" style="font-size: 4rem;"></i>
                             
-                            <h4 class="fw-bold mb-3">{% translate "Confirm Your Email Address" %}</h4>
+                            <h4 class="fw-bold mb-3 text-primary-teal">{% trans "Confirm Your Email Address" %}</h4>
 
-                            <p class="lead" style="color: #343a40;">
+                            <p class="lead" style="color: var(--kaauh-primary-text);">
                                 {% blocktrans with email as email %}Please confirm that **{{ email }}** is the correct email address for your account.{% endblocktrans %}
                             </p>
 
@@ -39,28 +190,27 @@
                             <form method="post" action="{% url 'account_confirm_email' confirmation.key %}">
                                 {% csrf_token %}
                                 
-                                <button class="btn btn-lg mt-4 px-5 fw-semibold text-white" type="submit" 
-                                        style="background-color: #008080; border-color: #008080; box-shadow: 0 4px 8px rgba(0, 128, 128, 0.3);">
-                                    {% translate "Confirm & Activate" %}
+                                <button class="btn btn-main-action mt-4" type="submit">
+                                    {% trans "Confirm & Activate" %}
                                 </button>
                             </form>
                             
                         {% else %}
                             
                             {# ------------------- CONFIRMATION FAILED (Error) - Danger Theme ------------------- #}
-                            <i class="fas fa-unlink text-danger mb-4" style="font-size: 4rem;"></i> {# Changed icon to be more specific #}
+                            <i class="fas fa-unlink text-danger mb-4" style="font-size: 4rem;"></i>
                             
-                            <h4 class="fw-bold mb-3 text-danger">{% translate "Verification Failed" %}</h4>
+                            <h4 class="fw-bold mb-3 text-danger">{% trans "Verification Failed" %}</h4>
                             
                             <p class="lead text-danger">
-                                {% translate "The email confirmation link is expired or invalid." %}
+                                {% trans "The email confirmation link is expired or invalid." %}
                             </p>
-                            <p class="text-muted small">
-                                {% translate "If you recently requested a link, please ensure you use the newest one. You can request a new verification email from your account settings." %}
+                            <p class="text-muted small mb-0">
+                                {% trans "If you recently requested a link, please ensure you use the newest one. You can request a new verification email from your account settings." %}
                             </p>
                             
-                            <a href="{% url 'account_email' %}" class="btn btn-outline-secondary mt-4 px-5 fw-semibold">
-                                <i class="fas fa-cog me-2"></i> {% translate "Go to Settings" %}
+                            <a href="{% url 'account_email' %}" class="btn btn-outline-secondary mt-4">
+                                <i class="fas fa-cog me-2"></i> {% trans "Go to Settings" %}
                             </a>
 
                         {% endif %}
@@ -68,7 +218,10 @@
                     {% endwith %}
                 </div>
             </div>
+            
         </div>
     </div>
-</div>
-{% endblock content %}
+    
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+</body>
+</html>

templates/forms/form_submission_details.html

@@ -146,7 +146,7 @@
 <div class="container-fluid py-4">
     <nav aria-label="breadcrumb">
   <ol class="breadcrumb">
-    <li class="breadcrumb-item text-decorat"><a href="{% url 'job_detail' submission.template.job.slug %}" class="text-secondary">Job Detail</a></li>
+    <li class="breadcrumb-item "><a href="{% url 'job_detail' submission.template.job.slug %}" class="text-secondary text-decoration-none">Job Detail</a></li>
     <li class="breadcrumb-item"><a href="{% url 'form_builder' submission.template.pk%}" class="text-secondary">Form Template</a></li>
     <li class="breadcrumb-item active" aria-current="page"  style="
                             color: #F43B5E; /* Rosy Accent Color */

templates/forms/form_template_all_submissions.html

@@ -229,10 +229,13 @@
 <div class="container py-4">
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
-            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}">{% trans "Dashboard" %}</a></li>
-            <li class="breadcrumb-item"><a href="{% url 'form_templates_list' %}">{% trans "Form Templates" %}</a></li>
-            <li class="breadcrumb-item"><a href="{% url 'form_template_submissions_list' template.slug %}">{% trans "Submissions" %}</a></li>
-            <li class="breadcrumb-item active">{% trans "All Submissions Table" %}</li>
+            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}" class="text-secondary text-decoration-none">{% trans "Dashboard" %}</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'form_templates_list' %}" class="text-secondary text-decoration-none">{% trans "Form Templates" %}</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'form_template_submissions_list' template.slug %}" class="text-secondary text-decoration-none">{% trans "Submissions" %}</a></li>
+            <li class="breadcrumb-item active" style="
+                            color: #F43B5E; 
+                            font-weight: 600;
+                        ">{% trans "All Submissions Table" %}</li>
         </ol>
     </nav>
 

templates/jobs/job_detail.html

@@ -150,8 +150,8 @@
 
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
-            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}" class="text-secondary">Home</a></li>
-            <li class="breadcrumb-item"><a href="{% url 'job_list' %}" class="text-secondary">Jobs</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}" class="text-decoration-none text-secondary">Home</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'job_list' %}" class="text-decoration-none text-secondary">Jobs</a></li>
             <li class="breadcrumb-item active" aria-current="page"  style="
                             color: #F43B5E; /* Rosy Accent Color */
                             font-weight: 600;
@@ -326,9 +326,15 @@
                                  <a href="{% url 'candidate_screening_view' job.slug %}" class="btn btn-main-action">
                                     <i class="fas fa-layer-group me-1"></i> {% trans "Manage Applicants" %}
                                </a>
-                                <a href="{% url 'job_cvs_download' job.slug %}" class="btn btn-main-action">
+                               {% if not job.zip_created%}
+                                <a href="{% url 'request_cvs_download' job.slug %}" class="btn btn-main-action">
                                     <i class="fa-solid fa-download me-1"></i> {% trans "Download All CVs" %}
                                </a>
+                               {% else %}
+                               <a href="{% url 'download_ready_cvs' job.slug %}" class="btn btn-main-action">
+                                    <i class="fa-solid fa-eye me-1"></i> {% trans "View All CVs" %}
+                               </a>
+                               {% endif %}
                         </div>
                     </div>
 
@@ -385,8 +391,8 @@
                             <a href="{% url 'staff_assignment_view' job.slug %}" class="btn btn-main-action">
                                 <i class="fas fa-user-plus me-1"></i> {% trans "Assign Staff Member" %}
                             </a>
-
-                            {% if job.staff_assignments.exists %}
+                            
+                            {% if job.assigned_to %}
                                 <div class="mt-3">
                                     <h6 class="text-muted">{% trans "Current Assignments" %}</h6>
                                     {% for assignment in job.staff_assignments.all %}

templates/people/create_person.html

@@ -146,18 +146,22 @@
         <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
                 <li class="breadcrumb-item">
-                    <a href="{% url 'person_list' %}" class="text-decoration-none">
-                        <i class="fas fa-user-friends me-1"></i> {% trans "People" %}
+                    <a href="{% url 'person_list' %}" class="text-secondary text-decoration-none">
+                        <i class="fas fa-user-friends me-1"></i> {% trans "Applicants" %}
                     </a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">{% trans "Create Person" %}</li>
+                <li class="breadcrumb-item active" aria-current="page"
+                style="
+                            color: #F43B5E; /* Rosy Accent Color */
+                            font-weight: 600;
+                        ">{% trans "Create Applicant" %}</li>
             </ol>
         </nav>
 
         <!-- Header -->
         <div class="d-flex justify-content-between align-items-center mb-4">
             <h1 style="color: var(--kaauh-teal-dark); font-weight: 700;">
-                <i class="fas fa-user-plus me-2"></i> {% trans "Create New Person" %}
+                <i class="fas fa-user-plus me-2"></i> {% trans "Create New Applicant" %}
             </h1>
             <a href="{% url 'person_list' %}" class="btn btn-outline-secondary">
                 <i class="fas fa-arrow-left me-1"></i> {% trans "Back to List" %}

templates/people/person_detail.html

@@ -215,11 +215,14 @@
     <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
             <li class="breadcrumb-item">
-                <a href="{% url 'person_list' %}" class="text-decoration-none">
-                    <i class="fas fa-user-friends me-1"></i> {% trans "People" %}
+                <a href="{% url 'person_list' %}" class="text-secondary">
+                    <i class="fas fa-user-friends me-1"></i> {% trans "Applicants" %}
                 </a>
             </li>
-            <li class="breadcrumb-item active" aria-current="page">{{ person.get_full_name }}</li>
+            <li class="breadcrumb-item active" aria-current="page"
+             style=" color: #F43B5E; /* Rosy Accent Color */
+                            font-weight: 600;
+                        ">{{ person.full_name|title }}</li>
         </ol>
     </nav>
 
@@ -288,7 +291,7 @@
                         <div class="info-item">
                             <i class="fas fa-signature"></i>
                             <span class="info-label">{% trans "Full Name" %}:</span>
-                            <span class="info-value">{{ person.get_full_name }}</span>
+                            <span class="info-value">{{ person.full_name|title }}</span>
                         </div>
 
                         {% if person.first_name %}
@@ -411,7 +414,7 @@
                 <div class="card-body">
                     <h5 class="card-title">
                         <i class="fas fa-briefcase me-2"></i>{% trans "Applications" %}
-                        <span class="badge bg-primary ms-2">{{ person.applications.count }}</span>
+                        <span class="badge bg-primary-theme ms-2">{{ person.applications.count }}</span>
                     </h5>
 
                     {% if person.applications %}
@@ -429,7 +432,7 @@
                                             {% trans "Applied" %}: {{ application.created_at|date:"d M Y" }}
                                         </small>
                                     </div>
-                                    <span class="badge bg-primary">{{ application.stage }}</span>
+                                    <span class="badge bg-primary-theme">{{ application.stage }}</span>
                                 </div>
                             </div>
                         {% endfor %}
@@ -449,7 +452,7 @@
                 <div class="card-body">
                     <h5 class="card-title">
                         <i class="fas fa-file-alt me-2"></i>{% trans "Documents" %}
-                        <span class="badge bg-primary ms-2">{{ person.documents.count }}</span>
+                        <span class="badge bg-primary-theme ms-2">{{ person.documents.count }}</span>
                     </h5>
 
                     {% if person.documents %}

templates/people/update_person.html

@@ -169,23 +169,26 @@
         <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
                 <li class="breadcrumb-item">
-                    <a href="{% url 'person_list' %}" class="text-decoration-none">
+                    <a href="{% url 'person_list' %}" class="text-decoration-none text-secondary">
                         <i class="fas fa-user-friends me-1"></i> {% trans "People" %}
                     </a>
                 </li>
                 <li class="breadcrumb-item">
-                    <a href="{% url 'person_detail' person.slug %}" class="text-decoration-none">
-                        {{ person.get_full_name }}
+                    <a href="{% url 'person_detail' person.slug %}" class="text-decoration-none text-secondary">
+                        {{ person.full_name }}
                     </a>
                 </li>
-                <li class="breadcrumb-item active" aria-current="page">{% trans "Update" %}</li>
+                <li class="breadcrumb-item active" aria-current="page"
+                 style="
+                            color: #F43B5E; /* Rosy Accent Color */
+                            font-weight: 600;">{% trans "Update" %}</li>
             </ol>
         </nav>
 
         <!-- Header -->
         <div class="d-flex justify-content-between align-items-center mb-4">
             <h1 style="color: var(--kaauh-teal-dark); font-weight: 700;">
-                <i class="fas fa-user-edit me-2"></i> {% trans "Update Person" %}
+                <i class="fas fa-user-edit me-2"></i> {% trans "Update Applicant" %}
             </h1>
             <div class="d-flex gap-2">
                 <a href="{% url 'person_detail' person.slug %}" class="btn btn-outline-secondary">
@@ -383,7 +386,7 @@
                                         <i class="fas fa-undo me-1"></i> {% trans "Reset Changes" %}
                                     </button>
                                     <button type="submit" class="btn btn-main-action">
-                                        <i class="fas fa-save me-1"></i> {% trans "Update Person" %}
+                                        <i class="fas fa-save me-1"></i> {% trans "Update Applicant" %}
                                     </button>
                                 </div>
                             </div>

templates/portal_base.html

@@ -84,7 +84,7 @@
                             </li>
                             <li class="nav-item">
                                 <a class="nav-link text-white" href="{% url 'agency_portal_persons_list' %}">
-                                    <i class="fas fa-users me-1"></i> {% trans "Persons" %}
+                                    <i class="fas fa-users me-1"></i> {% trans "Applicants" %}
                                 </a>
                             </li>
                         {% elif request.user.user_type == 'candidate' %}

templates/recruitment/agency_assignment_detail.html

@@ -9,265 +9,285 @@
     :root {
         --kaauh-teal: #00636e;
         --kaauh-teal-dark: #004a53;
-        --kaauh-border: #eaeff3;
-        --kaauh-primary-text: #343a40;
-        --kaauh-success: #28a745;
-        --kaauh-info: #17a2b8;
+        --kaauh-border: #e9ecef;
+        --kaauh-primary-text: #212529;
+        --kaauh-success: #198754;
+        --kaauh-info: #0dcaf0;
         --kaauh-danger: #dc3545;
         --kaauh-warning: #ffc107;
+        --kaauh-bg-light: #f8f9fa;
+    }
+
+    .text-primary-teal {
+        color: var(--kaauh-teal) !important;
     }
 
     .kaauh-card {
-        border: 1px solid var(--kaauh-border);
+        border: none;
         border-radius: 0.75rem;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
         background-color: white;
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .kaauh-card:hover {
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     }
 
     .btn-main-action {
         background-color: var(--kaauh-teal);
         border-color: var(--kaauh-teal);
         color: white;
-        font-weight: 600;
+        font-weight: 500;
+        padding: 0.5rem 1.2rem;
         transition: all 0.2s ease;
     }
+
     .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);
+        color: white;
+        transform: translateY(-1px);
+    }
+
+    .btn-white {
+        background-color: white;
+        border-color: var(--kaauh-border);
+        color: var(--kaauh-primary-text);
+    }
+
+    .btn-white:hover {
+        background-color: var(--kaauh-bg-light);
+        border-color: #dee2e6;
     }
 
     .status-badge {
         font-size: 0.75rem;
-        padding: 0.3em 0.7em;
-        border-radius: 0.35rem;
-        font-weight: 700;
+        font-weight: 600;
+        letter-spacing: 0.5px;
+        text-transform: uppercase;
+    }
+
+    .status-ACTIVE {
+        background-color: #d1e7dd;
+        color: #0f5132;
+    }
+
+    .status-EXPIRED {
+        background-color: #f8d7da;
+        color: #842029;
+    }
+
+    .status-COMPLETED {
+        background-color: #cff4fc;
+        color: #055160;
+    }
+
+    .status-CANCELLED {
+        background-color: #fff3cd;
+        color: #664d03;
+    }
+
+    .bg-soft-primary {
+        background-color: rgba(13, 110, 253, 0.1);
+    }
+
+    .bg-soft-info {
+        background-color: rgba(13, 202, 240, 0.1);
+    }
+
+    .bg-soft-success {
+        background-color: rgba(25, 135, 84, 0.1);
+    }
+
+    .avatar-circle {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+    }
+
+    .w-20 {
+        width: 20px;
+        text-align: center;
     }
-    .status-ACTIVE { background-color: var(--kaauh-success); color: white; }
-    .status-EXPIRED { background-color: var(--kaauh-danger); color: white; }
-    .status-COMPLETED { background-color: var(--kaauh-info); color: white; }
-    .status-CANCELLED { background-color: var(--kaauh-warning); color: #856404; }
 
     .progress-ring {
-        width: 120px;
-        height: 120px;
-        position: relative;
-    }
-
-    .progress-ring-circle {
-        transition: stroke-dashoffset 0.35s;
         transform: rotate(-90deg);
         transform-origin: 50% 50%;
     }
 
-    .progress-ring-text {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        font-size: 1.5rem;
-        font-weight: 700;
-        color: var(--kaauh-teal-dark);
-    }
-
-    .message-item {
-        border-left: 4px solid var(--kaauh-teal);
-        background-color: #f8f9fa;
-        padding: 1rem;
-        margin-bottom: 1rem;
-        border-radius: 0 0.5rem 0.5rem 0;
-    }
-
-    .message-item.unread {
-        border-left-color: var(--kaauh-info);
-        background-color: #e7f3ff;
+    .progress-ring-circle {
+        transition: stroke-dashoffset 0.5s ease-in-out;
     }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="container-fluid py-4">
+<div class="container-fluid py-5 bg-light">
     <!-- Header -->
-    <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-tasks me-2"></i>
-                {{ assignment.agency.name }} - {{ assignment.job.title }}
-            </h1>
-            <p class="text-muted mb-0">
-                {% trans "Assignment Details and Management" %}
-            </p>
-        </div>
-        <div>
-            <a href="{% url 'agency_assignment_list' %}" class="btn btn-outline-secondary me-2">
-                <i class="fas fa-arrow-left me-1"></i> {% trans "Back to Assignments" %}
-            </a>
-            <a href="{% url 'agency_assignment_update' assignment.slug %}" class="btn btn-main-action">
-                <i class="fas fa-edit me-1"></i> {% trans "Edit Assignment" %}
-            </a>
+    <div class="row mb-4">
+        <div class="col-12">
+            <div class="d-flex justify-content-between align-items-start">
+                <div>
+                    <nav aria-label="breadcrumb" class="mb-2">
+                        <ol class="breadcrumb mb-0 small">
+                            <li class="breadcrumb-item"><a href="{% url 'agency_assignment_list' %}"
+                                    class="text-decoration-none text-muted">{% trans "Assignments" %}</a></li>
+                            <li class="breadcrumb-item active" aria-current="page">{{ assignment.job.title }}</li>
+                        </ol>
+                    </nav>
+                    <h1 class="h2 fw-bold text-dark mb-2">
+                        {{ assignment.job.title }}
+                    </h1>
+                    <div class="d-flex align-items-center text-muted">
+                        <span class="me-3"><i class="fas fa-building me-1"></i> {{ assignment.agency.name }}</span>
+                        <span class="badge status-{{ assignment.status }} rounded-pill px-3">{{
+                            assignment.get_status_display }}</span>
+                    </div>
+                </div>
+                <div class="d-flex gap-2">
+                    <a href="{% url 'agency_assignment_list' %}" class="btn btn-white border shadow-sm">
+                        <i class="fas fa-arrow-left me-1"></i> {% trans "Back" %}
+                    </a>
+                    <a href="{% url 'agency_assignment_update' assignment.slug %}"
+                        class="btn btn-main-action shadow-sm">
+                        <i class="fas fa-edit me-1"></i> {% trans "Edit" %}
+                    </a>
+                </div>
+            </div>
         </div>
     </div>
 
-    <div class="row">
-        <!-- Assignment Overview -->
-        <div class="col-lg-8">
+    <div class="row g-4">
+        <!-- Left Column: Details & Candidates -->
+        <div class="col-lg-8 col-md-12">
             <!-- Assignment Details Card -->
-            <div class="kaauh-card p-4 mb-4">
-                <h5 class="mb-4" style="color: var(--kaauh-teal-dark);">
-                    <i class="fas fa-info-circle me-2"></i>
-                    {% trans "Assignment Details" %}
-                </h5>
-
-                <div class="row">
-                    <div class="col-md-6">
-                        <div class="mb-3">
-                            <label class="text-muted small">{% trans "Agency" %}</label>
-                            <div class="fw-bold">{{ assignment.agency.name }}</div>
-                            <div class="text-muted small">{{ assignment.agency.contact_person }}</div>
-                        </div>
-                        <div class="mb-3">
-                            <label class="text-muted small">{% trans "Job" %}</label>
-                            <div class="fw-bold">{{ assignment.job.title }}</div>
-                            <div class="text-muted small">{{ assignment.job.department }}</div>
-                        </div>
-                    </div>
-                    <div class="col-md-6">
-                        <div class="mb-3">
-                            <label class="text-muted small">{% trans "Status" %}</label>
-                            <div>
-                                <span class="status-badge status-{{ assignment.status }}">
-                                    {{ assignment.get_status_display }}
-                                </span>
+            <div class="kaauh-card mb-4">
+                <div class="card-header bg-transparent border-bottom py-3 px-4">
+                    <h5 class="mb-0 fw-bold text-dark">
+                        <i class="fas fa-info-circle me-2 text-primary-teal"></i>
+                        {% trans "Assignment Details" %}
+                    </h5>
+                </div>
+                <div class="card-body p-4">
+                    <div class="row g-4">
+                        <div class="col-md-6">
+                            <div class="detail-group">
+                                <label class="text-uppercase text-muted small fw-bold mb-1">{% trans "Agency" %}</label>
+                                <div class="fs-6 fw-medium text-dark">{{ assignment.agency.name }}</div>
+                                <div class="text-muted small">{{ assignment.agency.contact_person }}</div>
                             </div>
                         </div>
-                        <div class="mb-3">
-                            <label class="text-muted small">{% trans "Deadline" %}</label>
-                            <div class="{% if assignment.is_expired %}text-danger{% else %}text-muted{% endif %}">
-                                <i class="fas fa-calendar-alt me-1"></i>
-                                {{ assignment.deadline_date|date:"Y-m-d H:i" }}
+                        <div class="col-md-6">
+                            <div class="detail-group">
+                                <label class="text-uppercase text-muted small fw-bold mb-1">{% trans "Department"
+                                    %}</label>
+                                <div class="fs-6 fw-medium text-dark">{{ assignment.job.department }}</div>
                             </div>
-                            {% if assignment.is_expired %}
-                                <small class="text-danger">
+                        </div>
+                        <div class="col-md-6">
+                            <div class="detail-group">
+                                <label class="text-uppercase text-muted small fw-bold mb-1">{% trans "Deadline"
+                                    %}</label>
+                                <div
+                                    class="fs-6 fw-medium {% if assignment.is_expired %}text-danger{% else %}text-dark{% endif %}">
+                                    {{ assignment.deadline_date|date:"M d, Y - H:i" }}
+                                </div>
+                                {% if assignment.is_expired %}
+                                <small class="text-danger fw-bold">
                                     <i class="fas fa-exclamation-triangle me-1"></i>{% trans "Expired" %}
                                 </small>
-                            {% endif %}
+                                {% endif %}
+                            </div>
                         </div>
-                    </div>
-                </div>
-
-                {% if assignment.admin_notes %}
-                    <div class="mt-3 pt-3 border-top">
-                        <label class="text-muted small">{% trans "Admin Notes" %}</label>
-                        <div class="text-muted">{{ assignment.admin_notes }}</div>
-                    </div>
-                {% endif %}
-
-
-            </div>
-
-            {% comment %} <div class="kaauh-card shadow-sm mb-4">
-                <div class="card-body my-2">
-                    <h5 class="card-title mb-3 mx-2">
-                        <i class="fas fa-key me-2 text-warning"></i>
-                        {% trans "Access Credentials" %}
-                    </h5>
-
-                    <div class="mb-3 mx-2">
-                        <label class="form-label text-muted small">{% trans "Login URL" %}</label>
-                        <div class="input-group">
-                            <input type="text" readonly value="{{ request.scheme }}://{{ request.get_host }}{% url 'agency_portal_login' %}"
-                                   class="form-control font-monospace" id="loginUrl">
-                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('loginUrl')">
-                                <i class="fas fa-copy"></i>
-                            </button>
+                        <div class="col-md-6">
+                            <div class="detail-group">
+                                <label class="text-uppercase text-muted small fw-bold mb-1">{% trans "Created At"
+                                    %}</label>
+                                <div class="fs-6 fw-medium text-dark">{{ assignment.created_at|date:"M d, Y" }}</div>
+                            </div>
                         </div>
                     </div>
 
-                    <div class="mb-3 mx-2">
-                        <label class="form-label text-muted small">{% trans "Access Token" %}</label>
-                        <div class="input-group">
-                            <input type="text" readonly value="{{ access_link.unique_token }}"
-                                   class="form-control font-monospace" id="accessToken">
-                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('accessToken')">
-                                <i class="fas fa-copy"></i>
-                            </button>
+                    {% if assignment.admin_notes %}
+                    <div class="mt-4 pt-4 border-top">
+                        <label class="text-uppercase text-muted small fw-bold mb-2">{% trans "Admin Notes" %}</label>
+                        <div class="p-3 bg-light rounded border-start border-4 border-info text-muted">
+                            {{ assignment.admin_notes }}
                         </div>
                     </div>
-
-                    <div class="mb-3 mx-2">
-                        <label class="form-label text-muted small">{% trans "Password" %}</label>
-                        <div class="input-group">
-                            <input type="text" readonly value="{{ access_link.access_password }}"
-                                   class="form-control font-monospace" id="accessPassword">
-                            <button class="btn btn-outline-secondary" type="button" onclick="copyToClipboard('accessPassword')">
-                                <i class="fas fa-copy"></i>
-                            </button>
-                        </div>
-                    </div>
-
-                    <div class="alert alert-info mx-2">
-                        <i class="fas fa-info-circle me-2"></i>
-                        {% trans "Share these credentials securely with the agency. They can use this information to log in and submit candidates." %}
-                    </div>
-
-                    {% if access_link %}
-                    <a href="{% url 'agency_access_link_detail' access_link.slug %}"
-                        class="btn btn-outline-info btn-sm mx-2">
-                        <i class="fas fa-eye me-1"></i> {% trans "View Access Links Details" %}
-                    </a>
-                {% endif %}
-                </div>
-            </div> {% endcomment %}
-
-            <!-- Candidates Card -->
-            <div class="kaauh-card p-4">
-                <div class="d-flex justify-content-between align-items-center mb-4">
-                    <h5 class="mb-0" style="color: var(--kaauh-teal-dark);">
-                        <i class="fas fa-users me-2"></i>
-                        {% trans "Submitted Candidates" %} ({{ total_candidates }})
-                    </h5>
-                    {% if access_link %}
-                        <a href="{% url 'agency_portal_login' %}" target="_blank" class="btn btn-outline-info btn-sm">
-                            <i class="fas fa-external-link-alt me-1"></i> {% trans "Preview Portal" %}
-                        </a>
                     {% endif %}
                 </div>
+            </div>
 
-                {% if candidates %}
+            <!-- Candidates Card -->
+            <div class="kaauh-card">
+                <div
+                    class="card-header bg-transparent border-bottom py-3 px-4 d-flex justify-content-between align-items-center">
+                    <h5 class="mb-0 fw-bold text-dark">
+                        <i class="fas fa-users me-2 text-primary-teal"></i>
+                        {% trans "Submitted Candidates" %}
+                        <span class="badge bg-light text-dark border ms-2">{{ total_candidates }}</span>
+                    </h5>
+                    {% if access_link %}
+                    <a href="{% url 'agency_portal_login' %}" target="_blank" class="btn btn-sm btn-outline-info">
+                        <i class="fas fa-external-link-alt me-1"></i> {% trans "Portal Preview" %}
+                    </a>
+                    {% endif %}
+                </div>
+                <div class="card-body p-0">
+                    {% if candidates %}
                     <div class="table-responsive">
-                        <table class="table table-hover">
-                            <thead>
+                        <table class="table table-hover align-middle mb-0">
+                            <thead class="bg-light">
                                 <tr>
-                                    <th>{% trans "Name" %}</th>
-                                    <th>{% trans "Contact" %}</th>
-                                    <th>{% trans "Stage" %}</th>
-                                    <th>{% trans "Submitted" %}</th>
-                                    <th>{% trans "Actions" %}</th>
+                                    <th class="px-4 py-3 text-uppercase small fw-bold text-muted">{% trans "Candidate"
+                                        %}</th>
+                                    <th class="px-4 py-3 text-uppercase small fw-bold text-muted">{% trans "Contact" %}
+                                    </th>
+                                    <th class="px-4 py-3 text-uppercase small fw-bold text-muted">{% trans "Stage" %}
+                                    </th>
+                                    <th class="px-4 py-3 text-uppercase small fw-bold text-muted">{% trans "Submitted"
+                                        %}</th>
+                                    <th class="px-4 py-3 text-uppercase small fw-bold text-muted text-end">{% trans
+                                        "Actions" %}</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 {% for candidate in candidates %}
                                 <tr>
-                                    <td>
-                                        <div class="fw-bold">{{ candidate.name }}</div>
-                                    </td>
-                                    <td>
-                                        <div class="small">
-                                            <div><i class="fas fa-envelope me-1"></i> {{ candidate.email }}</div>
-                                            <div><i class="fas fa-phone me-1"></i> {{ candidate.phone }}</div>
+                                    <td class="px-4">
+                                        <div class="d-flex align-items-center">
+                                            <div class="avatar-circle me-3 bg-soft-primary text-primary fw-bold">
+                                                {{ candidate.name|slice:":2"|upper }}
+                                            </div>
+                                            <div>
+                                                <div class="fw-bold text-dark">{{ candidate.name }}</div>
+                                            </div>
                                         </div>
                                     </td>
-                                    <td>
-                                        <span class="badge bg-info">{{ candidate.get_stage_display }}</span>
-                                    </td>
-                                    <td>
+                                    <td class="px-4">
                                         <div class="small text-muted">
-                                            {{ candidate.created_at|date:"Y-m-d H:i" }}
+                                            <div class="mb-1"><i class="fas fa-envelope me-2 w-20"></i>{{
+                                                candidate.email }}</div>
+                                            <div><i class="fas fa-phone me-2 w-20"></i>{{ candidate.phone }}</div>
                                         </div>
                                     </td>
-                                    <td>
+                                    <td class="px-4">
+                                        <span class="badge bg-soft-info text-info rounded-pill px-3">{{
+                                            candidate.get_stage_display }}</span>
+                                    </td>
+                                    <td class="px-4">
+                                        <span class="small text-muted">{{ candidate.created_at|date:"M d, Y" }}</span>
+                                    </td>
+                                    <td class="px-4 text-end">
                                         <a href="{% url 'candidate_detail' candidate.slug %}"
-                                           class="btn btn-sm btn-outline-primary" title="{% trans 'View Details' %}">
+                                            class="btn btn-sm btn-white border shadow-sm text-primary"
+                                            title="{% trans 'View Details' %}">
                                             <i class="fas fa-eye"></i>
                                         </a>
                                     </td>
@@ -276,130 +296,103 @@
                             </tbody>
                         </table>
                     </div>
-                {% else %}
-                    <div class="text-center py-4">
-                        <i class="fas fa-users fa-2x text-muted mb-3"></i>
-                        <h6 class="text-muted">{% trans "No candidates submitted yet" %}</h6>
-                        <p class="text-muted small">
-                            {% trans "Candidates will appear here once the agency submits them through their portal." %}
+                    {% else %}
+                    <div class="text-center py-5">
+                        <div class="mb-3">
+                            <div class="avatar-circle bg-light text-muted mx-auto"
+                                style="width: 64px; height: 64px; font-size: 24px;">
+                                <i class="fas fa-user-plus"></i>
+                            </div>
+                        </div>
+                        <h6 class="fw-bold text-dark">{% trans "No candidates yet" %}</h6>
+                        <p class="text-muted small mb-0">
+                            {% trans "Candidates submitted by the agency will appear here." %}
                         </p>
                     </div>
-                {% endif %}
+                    {% endif %}
+                </div>
             </div>
         </div>
 
-        <!-- Sidebar -->
-        <div class="col-lg-4">
+        <!-- Right Column: Sidebar -->
+        <div class="col-lg-4 col-md-12">
             <!-- Progress Card -->
-            <div class="kaauh-card p-4 mb-4">
-                <h5 class="mb-4 text-center" style="color: var(--kaauh-teal-dark);">
-                    {% trans "Submission Progress" %}
-                </h5>
+            <div class="kaauh-card mb-4">
+                <div class="card-body p-4 text-center">
+                    <h6 class="text-uppercase text-muted small fw-bold mb-4">{% trans "Submission Goal" %}</h6>
 
-                <div class="text-center mb-3">
-                    <div class="progress-ring">
-                        <svg width="120" height="120">
-                            <circle class="progress-ring-circle"
-                                    stroke="#e9ecef"
-                                    stroke-width="8"
-                                    fill="transparent"
-                                    r="52"
-                                    cx="60"
-                                    cy="60"/>
-                            <circle class="progress-ring-circle"
-                                    stroke="var(--kaauh-teal)"
-                                    stroke-width="8"
-                                    fill="transparent"
-                                    r="52"
-                                    cx="60"
-                                    cy="60"
-                                    style="stroke-dasharray: 326.73; stroke-dashoffset: {{ stroke_dashoffset }};"/>
+                    <div class="position-relative d-inline-block mb-3">
+                        <svg class="progress-ring" width="140" height="140">
+                            <circle class="progress-ring-bg" stroke="#f1f3f5" stroke-width="10" fill="transparent"
+                                r="60" cx="70" cy="70" />
+                            <circle class="progress-ring-circle" stroke="var(--kaauh-teal)" stroke-width="10"
+                                fill="transparent" r="60" cx="70" cy="70"
+                                style="stroke-dasharray: 376.99; stroke-dashoffset: {{ stroke_dashoffset }};" />
                         </svg>
-                        <div class="progress-ring-text">
-                            {% widthratio total_candidates assignment.max_candidates 100 as progress %}
-                            {{ progress|floatformat:0 }}%
+                        <div class="position-absolute top-50 start-50 translate-middle text-center">
+                            <div class="h3 fw-bold mb-0 text-dark">{{ total_candidates }}</div>
+                            <div class="small text-muted text-uppercase">{% trans "of" %} {{ assignment.max_candidates
+                                }}</div>
                         </div>
                     </div>
-                </div>
 
-               <div class="text-center">
-                    <div class="h4 mb-1">{{ total_candidates }}</div>
-                    <div class="text-muted">/ {{ assignment.max_candidates }} {% trans "candidates" %}</div>
-                </div>
-
-                <div class="progress mt-3" style="height: 8px;">
-                    {% widthratio total_candidates assignment.max_candidates 100 as progress %}
-                    <div class="progress-bar" style="width: {{ progress }}%"></div>
+                    <p class="text-muted small mb-0">
+                        {% trans "Candidates submitted" %}
+                    </p>
                 </div>
             </div>
 
-
             <!-- Actions Card -->
-            <div class="kaauh-card p-4">
-                <h5 class="mb-4" style="color: var(--kaauh-teal-dark);">
-                    <i class="fas fa-cog me-2"></i>
-                    {% trans "Actions" %}
-                </h5>
-
-                <div class="d-grid gap-2">
-                    <a href=""
-                       class="btn btn-outline-primary">
-                        <i class="fas fa-envelope me-1"></i> {% trans "Send Message" %}
-                    </a>
-
-                    {% if assignment.is_active and not assignment.is_expired %}
-                        <button type="button" class="btn btn-outline-warning"
-                                data-bs-toggle="modal" data-bs-target="#extendDeadlineModal">
-                            <i class="fas fa-clock me-1"></i> {% trans "Extend Deadline" %}
-                        </button>
-                    {% endif %}
-
-                    <a href="{% url 'agency_assignment_update' assignment.slug %}"
-                       class="btn btn-outline-secondary">
-                        <i class="fas fa-edit me-1"></i> {% trans "Edit Assignment" %}
-                    </a>
+            <div class="kaauh-card mb-4">
+                <div class="card-header bg-transparent border-bottom py-3 px-4">
+                    <h6 class="mb-0 fw-bold text-dark">{% trans "Quick Actions" %}</h6>
                 </div>
-            </div>
-        </div>
-    </div>
+                <div class="card-body p-4">
+                    <div class="d-grid gap-3">
+                        <a href="" class="btn btn-outline-primary">
+                            <i class="fas fa-envelope me-2"></i> {% trans "Send Message" %}
+                        </a>
 
-    <!-- Messages Section -->
-    {% if messages_ %}
-        <div class="kaauh-card p-4 mt-4">
-            <h5 class="mb-4" style="color: var(--kaauh-teal-dark);">
-                <i class="fas fa-comments me-2"></i>
-                {% trans "Recent Messages" %}
-            </h5>
-
-            <div class="row">
-                {% for message in messages_|slice:":6" %}
-                <div class="col-lg-6 mb-3">
-                    <div class="message-item {% if not message.is_read %}unread{% endif %}">
-                        <div class="d-flex justify-content-between align-items-start mb-2">
-                            <div class="fw-bold">{{ message.subject }}</div>
-                            <small class="text-muted">{{ message.created_at|date:"Y-m-d H:i" }}</small>
-                        </div>
-                        <div class="small text-muted mb-2">
-                            {% trans "From" %}: {{ message.sender.get_full_name }}
-                        </div>
-                        <div class="small">{{ message.message|truncatewords:30 }}</div>
-                        {% if not message.is_read %}
-                            <span class="badge bg-info mt-2">{% trans "New" %}</span>
+                        {% if assignment.is_active and not assignment.is_expired %}
+                        <button type="button" class="btn btn-outline-warning" data-bs-toggle="modal"
+                            data-bs-target="#extendDeadlineModal">
+                            <i class="fas fa-clock me-2"></i> {% trans "Extend Deadline" %}
+                        </button>
                         {% endif %}
                     </div>
                 </div>
-                {% endfor %}
             </div>
 
-            {% if messages_.count > 6 %}
-                <div class="text-center mt-3">
-                    <a href="#" class="btn btn-outline-primary btn-sm">
-                        {% trans "View All Messages" %}
-                    </a>
+            <!-- Recent Messages -->
+            {% if messages_ %}
+            <div class="kaauh-card">
+                <div
+                    class="card-header bg-transparent border-bottom py-3 px-4 d-flex justify-content-between align-items-center">
+                    <h6 class="mb-0 fw-bold text-dark">{% trans "Recent Messages" %}</h6>
+                    {% if messages_.count > 3 %}
+                    <a href="#" class="small text-decoration-none">{% trans "View All" %}</a>
+                    {% endif %}
                 </div>
+                <div class="card-body p-0">
+                    <div class="list-group list-group-flush">
+                        {% for message in messages_|slice:":3" %}
+                        <div
+                            class="list-group-item p-3 border-bottom-0 {% if not message.is_read %}bg-soft-info{% endif %}">
+                            <div class="d-flex justify-content-between mb-1">
+                                <span class="fw-bold text-dark small">{{ message.sender.get_full_name }}</span>
+                                <small class="text-muted" style="font-size: 0.7rem;">{{ message.created_at|date:"M d"
+                                    }}</small>
+                            </div>
+                            <div class="fw-medium small text-dark mb-1">{{ message.subject }}</div>
+                            <div class="text-muted small text-truncate">{{ message.message }}</div>
+                        </div>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
             {% endif %}
         </div>
-    {% endif %}
+    </div>
 </div>
 
 <!-- Extend Deadline Modal -->
@@ -420,8 +413,8 @@
                         <label for="new_deadline" class="form-label">
                             {% trans "New Deadline" %} <span class="text-danger">*</span>
                         </label>
-                        <input type="datetime-local" class="form-control" id="new_deadline"
-                               name="new_deadline" required>
+                        <input type="datetime-local" class="form-control" id="new_deadline" name="new_deadline"
+                            required>
                         <small class="form-text text-muted">
                             {% trans "Current deadline:" %} {{ assignment.deadline_date|date:"Y-m-d H:i" }}
                         </small>
@@ -443,13 +436,13 @@
 
 {% block customJS %}
 <script>
-function copyToClipboard(text) {
-    navigator.clipboard.writeText(text).then(function() {
-        // Show success message
-        const toast = document.createElement('div');
-        toast.className = 'position-fixed top-0 end-0 p-3';
-        toast.style.zIndex = '1050';
-        toast.innerHTML = `
+    function copyToClipboard(text) {
+        navigator.clipboard.writeText(text).then(function () {
+            // Show success message
+            const toast = document.createElement('div');
+            toast.className = 'position-fixed top-0 end-0 p-3';
+            toast.style.zIndex = '1050';
+            toast.innerHTML = `
             <div class="toast show" role="alert">
                 <div class="toast-header">
                     <strong class="me-auto">{% trans "Success" %}</strong>
@@ -460,61 +453,61 @@ function copyToClipboard(text) {
                 </div>
             </div>
         `;
-        document.body.appendChild(toast);
+            document.body.appendChild(toast);
+
+            setTimeout(() => {
+                toast.remove();
+            }, 3000);
+        });
+    }
+
+    function copyToClipboard(elementId) {
+        const element = document.getElementById(elementId);
+        element.select();
+        document.execCommand('copy');
+
+        // Show feedback
+        const button = element.nextElementSibling;
+        const originalHTML = button.innerHTML;
+        button.innerHTML = '<i class="fas fa-check"></i>';
+        button.classList.add('btn-success');
+        button.classList.remove('btn-outline-secondary');
 
         setTimeout(() => {
-            toast.remove();
-        }, 3000);
+            button.innerHTML = originalHTML;
+            button.classList.remove('btn-success');
+            button.classList.add('btn-outline-secondary');
+        }, 2000);
+    }
+
+    function confirmDeactivate() {
+        if (confirm('{% trans "Are you sure you want to deactivate this access link? Agencies will no longer be able to use it." %}')) {
+            // Submit form to deactivate
+            window.location.href = '';
+        }
+    }
+
+    function confirmReactivate() {
+        if (confirm('{% trans "Are you sure you want to reactivate this access link?" %}')) {
+            // Submit form to reactivate
+            window.location.href = '';
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        // Set minimum datetime for new deadline
+        const deadlineInput = document.getElementById('new_deadline');
+        if (deadlineInput) {
+            const currentDeadline = new Date('{{ assignment.deadline_date|date:"Y-m-d\\TH:i" }}');
+            const now = new Date();
+            const minDateTime = new Date(Math.max(currentDeadline, now));
+
+            const localDateTime = new Date(minDateTime.getTime() - minDateTime.getTimezoneOffset() * 60000)
+                .toISOString()
+                .slice(0, 16);
+            deadlineInput.min = localDateTime;
+            deadlineInput.value = localDateTime;
+        }
     });
-}
-
-function copyToClipboard(elementId) {
-    const element = document.getElementById(elementId);
-    element.select();
-    document.execCommand('copy');
-
-    // Show feedback
-    const button = element.nextElementSibling;
-    const originalHTML = button.innerHTML;
-    button.innerHTML = '<i class="fas fa-check"></i>';
-    button.classList.add('btn-success');
-    button.classList.remove('btn-outline-secondary');
-
-    setTimeout(() => {
-        button.innerHTML = originalHTML;
-        button.classList.remove('btn-success');
-        button.classList.add('btn-outline-secondary');
-    }, 2000);
-}
-
-function confirmDeactivate() {
-    if (confirm('{% trans "Are you sure you want to deactivate this access link? Agencies will no longer be able to use it." %}')) {
-        // Submit form to deactivate
-        window.location.href = '';
-    }
-}
-
-function confirmReactivate() {
-    if (confirm('{% trans "Are you sure you want to reactivate this access link?" %}')) {
-        // Submit form to reactivate
-        window.location.href = '';
-    }
-}
-
-document.addEventListener('DOMContentLoaded', function() {
-    // Set minimum datetime for new deadline
-    const deadlineInput = document.getElementById('new_deadline');
-    if (deadlineInput) {
-        const currentDeadline = new Date('{{ assignment.deadline_date|date:"Y-m-d\\TH:i" }}');
-        const now = new Date();
-        const minDateTime = new Date(Math.max(currentDeadline, now));
-
-        const localDateTime = new Date(minDateTime.getTime() - minDateTime.getTimezoneOffset() * 60000)
-            .toISOString()
-            .slice(0, 16);
-        deadlineInput.min = localDateTime;
-        deadlineInput.value = localDateTime;
-    }
-});
 </script>
-{% endblock %}
+{% endblock %}

templates/recruitment/agency_portal_persons_list.html

@@ -63,16 +63,16 @@
         <div class="px-2 py-2">
             <h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
                 <i class="fas fa-users me-2"></i>
-                {% trans "All Persons" %}
+                {% trans "All Applicants" %}
             </h1>
             <p class="text-muted mb-0">
-                {% trans "All persons who come through" %} {{ agency.name }}
+                {% trans "All applicants who come through" %} {{ agency.name }}
             </p>
         </div>
         <div>
 	            <!-- Add Person Button -->
             <button type="button" class="btn btn-main-action" data-bs-toggle="modal" data-bs-target="#personModal">
-                <i class="fas fa-plus me-1"></i> {% trans "Add New Person" %}
+                <i class="fas fa-plus me-1"></i> {% trans "Add New Applicant" %}
             </button>
 	        </div>
     </div>
@@ -120,7 +120,7 @@
     <!-- Results Summary -->
     <div class="row mb-3">
         <div class="col-md-6">
-            <div class="kaauh-card shadow-sm h-100">
+            <div class="kaauh-card shadow-sm h-100 p-3">
                 <div class="card-body text-center">
                     <div class="text-info mb-2">
                         <i class="fas fa-users fa-2x"></i>
@@ -131,7 +131,7 @@
             </div>
         </div>
         <div class="col-md-6">
-            <div class="kaauh-card shadow-sm h-100">
+            <div class="kaauh-card shadow-sm h-100 p-3">
                 <div class="card-body text-center">
                     <div class="text-success mb-2">
                         <i class="fas fa-check-circle fa-2x"></i>
@@ -297,7 +297,7 @@
             <div class="modal-header">
                 <h5 class="modal-title" id="personModalLabel">
                     <i class="fas fa-users me-2"></i>
-                    {% trans "Person Details" %}
+                    {% trans "Applicant Details" %}
                 </h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>

templates/recruitment/candidate_application_detail.html

@@ -5,31 +5,66 @@
 
 {% block customCSS %}
 <style>
-/* Application Progress Timeline - Using Kaauh Theme Colors */
+/* Kaauh Theme Variables - Assuming these are defined in portal_base */
+:root {
+    /* Assuming these are carried from your global CSS/base template */
+    --kaauh-teal: #00636e; 
+    --kaauh-teal-dark: #004a53;
+    --kaauh-border: #eaeff3;
+    --kaauh-primary-text: #343a40;
+    --kaauh-success: #28a745;
+    --kaauh-info: #17a2b8;
+    --kaauh-danger: #dc3545;
+    --kaauh-warning: #ffc107;
+    --kaauh-secondary: #6c757d; /* Added secondary color for general use */
+}
+
+/* Theme Utilities */
+.bg-primary-theme {
+    background-color: var(--kaauh-teal) !important;
+}
+.text-primary-theme {
+    color: var(--kaauh-teal) !important;
+}
+
+/* 1. Application Progress Timeline (Improved Spacing) */
 .application-progress {
     position: relative;
-    display: flex;
-    justify-content: space-between;
-    margin: 2rem 0;
+    /* Use flexbox for layout */
+    display: flex; 
+    /* Use gap for consistent space between elements */
+    gap: 1.5rem; 
+    /* Center the timeline content */
+    justify-content: center; 
+    margin: 2rem 0 3rem; /* Extra spacing below timeline */
+    padding: 0 1rem;
+    overflow-x: auto; /* Allow horizontal scroll for small screens */
 }
 
 .progress-step {
-    flex: 1;
-    text-align: center;
+    /* Use fixed width or rely on content width for cleaner flow */
     position: relative;
+    text-align: center;
+    /* Prevent shrinking */
+    flex-shrink: 0; 
+    /* Added min-width for label spacing */
+    min-width: 100px; 
 }
 
+/* Timeline Connector Line */
 .progress-step::before {
     content: '';
     position: absolute;
     top: 20px;
-    left: 50%;
-    width: 100%;
+    /* Adjust position to connect centered steps */
+    left: calc(-50% + 20px); 
+    width: calc(100% - 40px);
     height: 2px;
     background: var(--kaauh-border);
     z-index: -1;
 }
 
+/* Hide line for the first step */
 .progress-step:first-child::before {
     display: none;
 }
@@ -39,7 +74,8 @@
 }
 
 .progress-step.active::before {
-    background: var(--kaauh-teal);
+    /* Line leading up to the active step should be completed/success color */
+    background: var(--kaauh-success); 
 }
 
 .progress-icon {
@@ -54,7 +90,7 @@
     font-weight: bold;
     color: #6c757d;
     position: relative;
-    z-index: 1;
+    z-index: 2; /* Ensure icon covers the line */
 }
 
 .progress-step.completed .progress-icon {
@@ -65,12 +101,15 @@
 .progress-step.active .progress-icon {
     background: var(--kaauh-teal);
     color: white;
+    /* Add a subtle shadow for focus */
+    box-shadow: 0 0 0 4px rgba(0, 99, 110, 0.2); 
 }
 
 .progress-label {
     font-size: 0.875rem;
     color: #6c757d;
     margin-top: 0.5rem;
+    line-height: 1.2;
 }
 
 .progress-step.completed .progress-label,
@@ -87,70 +126,84 @@
     font-weight: 600;
 }
 
-.status-applied { background: #e3f2fd; color: #1976d2; }
-.status-screening { background: #fff3e0; color: #f57c00; }
-.status-document_review { background: #f3e5f5; color: #7b1fa2; }
-.status-exam { background: #f3e5f5; color: #7b1fa2; }
-.status-interview { background: #e8f5e8; color: #388e3c; }
-.status-offer { background: #fff8e1; color: #f9a825; }
-.status-hired { background: #e8f5e8; color: #2e7d32; }
-.status-rejected { background: #ffebee; color: #c62828; }
-
-/* AI Score Circle - Using Theme Colors */
-.ai-score-circle {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5rem;
-    font-weight: bold;
-    color: white;
-    margin: 0 auto 1rem;
-}
-
-.ai-score-high { background: linear-gradient(135deg, var(--kaauh-success), #20c997); }
-.ai-score-medium { background: linear-gradient(135deg, var(--kaauh-warning), #fd7e14); }
-.ai-score-low { background: linear-gradient(135deg, var(--kaauh-danger), #e83e8c); }
-
-/* Alert Purple - Using Theme Colors */
-.alert-purple {
-    color: #4a148c;
-    background-color: #f3e5f5;
-    border-color: #ce93d8;
-}
+/* Card Header Consistency */
 .card-header{
-    padding: 0.75rem 1.25rem;
+    padding: 1rem 1.5rem; /* Increased padding */
+    border-top-left-radius: 0.75rem;
+    border-top-right-radius: 0.75rem;
+    border-bottom: none;
+}
+
+/* Table Actions Theme */
+.table .btn-primary {
+    background-color: var(--kaauh-teal);
+    border-color: var(--kaauh-teal);
+}
+.table .btn-primary:hover {
+    background-color: var(--kaauh-teal-dark);
+    border-color: var(--kaauh-teal-dark);
+}
+
+.btn-main-action {
+    background-color: var(--kaauh-teal);
+    border-color: var(--kaauh-teal);
+    color: white;
+    font-weight: 600;
+    transition: all 0.2s ease;
+}
+.btn-main-action:hover {
+    background-color: var(--kaauh-teal-dark);
+    border-color: var(--kaauh-teal-dark);
+}
+
+/* Style for action cards to make text smaller */
+.action-card .card-body h6 {
+    font-size: 1rem;
+}
+.action-card .card-body p {
+    font-size: 0.75rem;
+    margin-bottom: 0.75rem;
+}
+.action-card .card-body {
+    padding: 1.5rem 1rem;
+}
+
+/* Custom Alert for Document Review */
+.alert-purple {
+    background-color: #e5e0ff;
+    border-color: #c9c0ff;
+    color: #5d49a3;
 }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="container-fluid">
-    <!-- Breadcrumb Navigation -->
+<div class="container-fluid py-4">
     <nav aria-label="breadcrumb" class="mb-4">
         <ol class="breadcrumb">
             <li class="breadcrumb-item">
-                <a href="{% url 'candidate_portal_dashboard' %}">{% trans "Dashboard" %}</a>
+                <a href="{% url 'candidate_portal_dashboard' %}" class=" text-decoration-none text-secondary">{% trans "Dashboard" %}</a>
             </li>
             <li class="breadcrumb-item">
-                <a href="{% url 'candidate_portal_dashboard' %}#applications">{% trans "My Applications" %}</a>
+                <a href="{% url 'candidate_portal_dashboard' %}#applications" class="text-secondary text-decoration">{% trans "My Applications" %}</a>
             </li>
-            <li class="breadcrumb-item active" aria-current="page">
+            <li class="breadcrumb-item active" aria-current="page"  style="
+                            color: #F43B5E; /* Rosy Accent Color */
+                            font-weight: 600;
+                        ">
                 {% trans "Application Details" %}
             </li>
         </ol>
     </nav>
 
-    <!-- Application Header with Progress -->
-    <div class="row mb-4">
+    
+    <div class="row mb-4"> 
         <div class="col-12">
             <div class="kaauh-card">
-                <div class="card-header bg-primary-theme text-white">
+                <div class="card-header bg-primary-theme text-white"> 
                     <div class="row align-items-center">
                         <div class="col-md-8">
-                            <h4 class="mb-2">
+                            <h4 class="mb-1">
                                 <i class="fas fa-briefcase me-2"></i>
                                 {{ application.job.title }}
                             </h4>
@@ -159,26 +212,25 @@
                             </p>
                         </div>
                         <div class="col-md-4 text-end">
-                            <span class="status-badge status-{{ application.stage }}">
-                                {{ application.get_stage_display }}
-                            </span>
+                            <div class="d-inline-block p-1 rounded-pill" style="background-color: rgba(255, 255, 255, 0.2);">
+                                <span class="status-badge status-{{ application.stage }}">
+                                    {{ application.get_stage_display }}
+                                </span>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="card-body">
-                    <!-- Application Progress Timeline -->
+                <div class="card-body pt-5"> 
                     <div class="application-progress">
-                        <!-- Applied Stage - Always shown -->
-                        <div class="progress-step {% if application.stage != 'Applied' %}completed{% else %}active{% endif %}">
+                        <div class="progress-step {% if application.stage != 'Applied' and application.stage != 'Rejected' %}completed{% else %}active{% endif %}" style="flex: 0 0 auto;">
                             <div class="progress-icon">
                                 <i class="fas fa-paper-plane"></i>
                             </div>
                             <div class="progress-label">{% trans "Applied" %}</div>
                         </div>
 
-                        <!-- Exam Stage - Show if current stage is Exam or beyond -->
                         {% if application.stage in 'Exam,Interview,Document Review,Offer,Hired,Rejected' %}
-                        <div class="progress-step {% if application.stage not in 'Applied,Exam' %}completed{% elif application.stage == 'Exam' %}active{% endif %}">
+                        <div class="progress-step {% if application.stage not in 'Applied,Exam' and application.stage != 'Rejected' %}completed{% elif application.stage == 'Exam' %}active{% endif %}" style="flex: 0 0 auto;">
                             <div class="progress-icon">
                                 <i class="fas fa-clipboard-check"></i>
                             </div>
@@ -186,9 +238,8 @@
                         </div>
                         {% endif %}
 
-                        <!-- Interview Stage - Show if current stage is Interview or beyond -->
                         {% if application.stage in 'Interview,Document Review,Offer,Hired,Rejected' %}
-                        <div class="progress-step {% if application.stage not in 'Applied,Exam,Interview' %}completed{% elif application.stage == 'Interview' %}active{% endif %}">
+                        <div class="progress-step {% if application.stage not in 'Applied,Exam,Interview' and application.stage != 'Rejected' %}completed{% elif application.stage == 'Interview' %}active{% endif %}" style="flex: 0 0 auto;">
                             <div class="progress-icon">
                                 <i class="fas fa-video"></i>
                             </div>
@@ -196,9 +247,8 @@
                         </div>
                         {% endif %}
 
-                        <!-- Document Review Stage - Show if current stage is Document Review or beyond -->
                         {% if application.stage in 'Document Review,Offer,Hired,Rejected' %}
-                        <div class="progress-step {% if application.stage not in 'Applied,Exam,Interview,Document Review' %}completed{% elif application.stage == 'Document Review' %}active{% endif %}">
+                        <div class="progress-step {% if application.stage not in 'Applied,Exam,Interview,Document Review' and application.stage != 'Rejected' %}completed{% elif application.stage == 'Document Review' %}active{% endif %}" style="flex: 0 0 auto;">
                             <div class="progress-icon">
                                 <i class="fas fa-file-alt"></i>
                             </div>
@@ -206,9 +256,8 @@
                         </div>
                         {% endif %}
 
-                        <!-- Offer Stage - Show if current stage is Offer or beyond -->
                         {% if application.stage in 'Offer,Hired,Rejected' %}
-                        <div class="progress-step {% if application.stage not in 'Applied,Exam,Interview,Document Review,Offer' %}completed{% elif application.stage == 'Offer' %}active{% endif %}">
+                        <div class="progress-step {% if application.stage not in 'Applied,Exam,Interview,Document Review,Offer' and application.stage != 'Rejected' %}completed{% elif application.stage == 'Offer' %}active{% endif %}" style="flex: 0 0 auto;">
                             <div class="progress-icon">
                                 <i class="fas fa-handshake"></i>
                             </div>
@@ -216,44 +265,42 @@
                         </div>
                         {% endif %}
 
-                        <!-- Hired Stage - Show only if current stage is Hired or Rejected -->
                         {% if application.stage in 'Hired,Rejected' %}
-                        <div class="progress-step {% if application.stage == 'Hired' %}completed{% elif application.stage == 'Rejected' %}active{% endif %}">
+                        <div class="progress-step {% if application.stage == 'Hired' %}completed{% elif application.stage == 'Rejected' %}active{% endif %}" style="flex: 0 0 auto;">
                             <div class="progress-icon">
-                                <i class="fas fa-trophy"></i>
+                                <i class="fas {% if application.stage == 'Hired' %}fa-trophy{% else %}fa-times-circle{% endif %}"></i>
                             </div>
-                            <div class="progress-label">{% trans "Hired" %}</div>
+                            <div class="progress-label">{% trans "Final Status" %}</div>
                         </div>
                         {% endif %}
                     </div>
 
-                    <!-- Application Details Grid -->
-                    <div class="row mt-4">
+                    <div class="row mt-4 g-4"> 
                         <div class="col-md-3">
-                            <div class="text-center p-3 bg-light rounded">
+                            <div class="text-center p-3 bg-light rounded h-100 shadow-sm"> 
                                 <i class="fas fa-calendar-alt text-primary-theme fa-2x mb-2"></i>
-                                <h6 class="text-muted">{% trans "Applied Date" %}</h6>
+                                <h6 class="text-muted small">{% trans "Applied Date" %}</h6>
                                 <p class="mb-0 fw-bold">{{ application.created_at|date:"M d, Y" }}</p>
                             </div>
                         </div>
                         <div class="col-md-3">
-                            <div class="text-center p-3 bg-light rounded">
+                            <div class="text-center p-3 bg-light rounded h-100 shadow-sm">
                                 <i class="fas fa-building text-info fa-2x mb-2"></i>
-                                <h6 class="text-muted">{% trans "Department" %}</h6>
+                                <h6 class="text-muted small">{% trans "Department" %}</h6>
                                 <p class="mb-0 fw-bold">{{ application.job.department|default:"-" }}</p>
                             </div>
                         </div>
                         <div class="col-md-3">
-                            <div class="text-center p-3 bg-light rounded">
+                            <div class="text-center p-3 bg-light rounded h-100 shadow-sm">
                                 <i class="fas fa-briefcase text-success fa-2x mb-2"></i>
-                                <h6 class="text-muted">{% trans "Job Type" %}</h6>
+                                <h6 class="text-muted small">{% trans "Job Type" %}</h6>
                                 <p class="mb-0 fw-bold">{{ application.get_job_type_display }}</p>
                             </div>
                         </div>
                         <div class="col-md-3">
-                            <div class="text-center p-3 bg-light rounded">
+                            <div class="text-center p-3 bg-light rounded h-100 shadow-sm">
                                 <i class="fas fa-map-marker-alt text-warning fa-2x mb-2"></i>
-                                <h6 class="text-muted">{% trans "Location" %}</h6>
+                                <h6 class="text-muted small">{% trans "Location" %}</h6>
                                 <p class="mb-0 fw-bold">{{ application.get_workplace_type_display }}</p>
                             </div>
                         </div>
@@ -262,11 +309,44 @@
             </div>
         </div>
     </div>
+    
+    <div class="row mb-5"> 
+        <div class="col-md-6 col-6"> 
+            <div class="kaauh-card h-50 shadow-sm action-card">
+                <div class="card-body text-center mb-4">
+                    <i class="fas fa-arrow-left fa-2x text-primary-theme mb-3"></i>
+                    <h6>{% trans "Go to Dashboard" %}</h6>
+                    <p class="text-muted small">{% trans "View all applications" %}</p>
+                    <a href="{% url 'candidate_portal_dashboard' %}" class="btn btn-main-action btn-sm w-100">
+                        {% trans "Dashboard" %}
+                    </a>
+                </div>
+            </div>
+        </div>
 
-
-    <!-- Interview Details -->
+        {% if application.resume %}
+        <div class="col-md-6 col-6"> 
+            <div class="kaauh-card h-50 shadow-sm action-card">
+                <div class="card-body text-center mb-4">
+                    <i class="fas fa-file-download fa-2x text-success mb-3"></i>
+                    <h6>{% trans "Download Resume" %}</h6>
+                    <p class="text-muted small">{% trans "Get your submitted file" %}</p>
+                    <a href="{{ application.resume.url }}"
+                       target="_blank"
+                       class="btn btn-main-action btn-sm w-100">
+                        <i class="fas fa-download me-2"></i>
+                        {% trans "Download" %}
+                    </a>
+                </div>
+            </div>
+        </div>
+        {% endif %}
+        
+       
+        
+    </div>
     {% if interviews %}
-    <div class="row mb-4">
+    <div class="row mb-5"> 
         <div class="col-12">
             <div class="kaauh-card">
                 <div class="card-header bg-success text-white">
@@ -275,11 +355,11 @@
                         {% trans "Interview Schedule" %}
                     </h5>
                 </div>
-                <div class="card-body">
+                <div class="card-body p-4"> 
                     {% if interviews %}
                         <div class="table-responsive">
-                            <table class="table table-hover">
-                                <thead>
+                            <table class="table table-hover align-middle"> 
+                                <thead class="table-light">
                                     <tr>
                                         <th>{% trans "Date" %}</th>
                                         <th>{% trans "Time" %}</th>
@@ -296,7 +376,7 @@
                                         <td>{{ interview.interview_time|time:"H:i" }}</td>
                                         <td>
                                             {% if interview.zoom_meeting %}
-                                                <span class="badge bg-primary">
+                                                <span class="badge bg-primary-theme"> 
                                                     <i class="fas fa-laptop me-1"></i>
                                                     {% trans "Remote" %}
                                                 </span>
@@ -349,9 +429,8 @@
     </div>
     {% endif %}
 
-    <!-- Documents Section -->
     {% if application.stage == "Document Review" %}
-        <div class="row mb-4">
+        <div class="row mb-5"> 
             <div class="col-12">
                 <div class="kaauh-card">
                     <div class="card-header bg-primary-theme text-white">
@@ -370,11 +449,11 @@
                             </div>
                         </div>
                     </div>
-                    <div class="card-body">
+                    <div class="card-body p-4"> 
                         {% if documents %}
                             <div class="table-responsive">
-                                <table class="table table-hover">
-                                    <thead>
+                                <table class="table table-hover align-middle">
+                                    <thead class="table-light">
                                         <tr>
                                             <th>{% trans "Document Name" %}</th>
                                             <th>{% trans "Type" %}</th>
@@ -390,7 +469,7 @@
                                                 {% if document.file %}
                                                     <a href="{{ document.file.url }}"
                                                     target="_blank"
-                                                    class="text-decoration-none">
+                                                    class="text-decoration-none text-primary-theme"> 
                                                         <i class="fas fa-file-pdf text-danger me-2"></i>
                                                         {{ document.get_document_type_display }}
                                                     </a>
@@ -446,79 +525,17 @@
             </div>
         </div>
     {% endif %}
-    <!-- Action Cards -->
+
     <div class="row mb-4">
-        <div class="col-md-3 mb-3">
-            <div class="kaauh-card h-100">
-                <div class="card-body text-center">
-                    <i class="fas fa-arrow-left fa-2x text-primary-theme mb-3"></i>
-                    <h6>{% trans "Back to Dashboard" %}</h6>
-                    <p class="text-muted small">{% trans "View all your applications" %}</p>
-                    <a href="{% url 'candidate_portal_dashboard' %}" class="btn btn-main-action w-100">
-                        {% trans "Go to Dashboard" %}
-                    </a>
-                </div>
-            </div>
-        </div>
-
-        {% if application.resume %}
-        <div class="col-md-3 mb-3">
-            <div class="kaauh-card h-100">
-                <div class="card-body text-center">
-                    <i class="fas fa-download fa-2x text-success mb-3"></i>
-                    <h6>{% trans "Download Resume" %}</h6>
-                    <p class="text-muted small">{% trans "Get your submitted resume" %}</p>
-                    <a href="{{ application.resume.url }}"
-                       target="_blank"
-                       class="btn btn-main-action w-100">
-                        <i class="fas fa-download me-2"></i>
-                        {% trans "Download" %}
-                    </a>
-                </div>
-            </div>
-        </div>
-        {% endif %}
-
-        <div class="col-md-3 mb-3">
-            <div class="kaauh-card h-100">
-                <div class="card-body text-center">
-                    <i class="fas fa-print fa-2x text-info mb-3"></i>
-                    <h6>{% trans "Print Application" %}</h6>
-                    <p class="text-muted small">{% trans "Get a printable version" %}</p>
-                    <button class="btn btn-main-action w-100" onclick="window.print()">
-                        <i class="fas fa-print me-2"></i>
-                        {% trans "Print" %}
-                    </button>
-                </div>
-            </div>
-        </div>
-
-        {% comment %} <div class="col-md-3 mb-3">
-            <div class="kaauh-card h-100">
-                <div class="card-body text-center">
-                    <i class="fas fa-edit fa-2x text-warning mb-3"></i>
-                    <h6>{% trans "Update Profile" %}</h6>
-                    <p class="text-muted small">{% trans "Edit your personal information" %}</p>
-                    <a href="" class="btn btn-main-action w-100">
-                        <i class="fas fa-edit me-2"></i>
-                        {% trans "Update" %}
-                    </a>
-                </div>
-            </div>
-        </div> {% endcomment %}
-    </div>
-
-    <!-- Next Steps Section -->
-    {% comment %} <div class="row">
         <div class="col-12">
             <div class="kaauh-card">
-                <div class="card-header bg-primary text-white">
+                <div class="card-header bg-primary-theme text-white">
                     <h5 class="mb-0">
                         <i class="fas fa-info-circle me-2"></i>
                         {% trans "Next Steps" %}
                     </h5>
                 </div>
-                <div class="card-body">
+                <div class="card-body p-4"> 
                     {% if application.stage == 'Applied' %}
                         <div class="alert alert-info">
                             <i class="fas fa-clock me-2"></i>
@@ -563,10 +580,9 @@
                 </div>
             </div>
         </div>
-    </div> {% endcomment %}
+    </div>
 </div>
 
-<!-- Upload Document Modal -->
 <div class="modal fade" id="uploadDocumentModal" tabindex="-1">
     <div class="modal-dialog">
         <div class="modal-content">
@@ -612,6 +628,7 @@
     </div>
 </div>
 
+
 <script>
 function addToCalendar(year, month, day, time, title) {
     // Create Google Calendar URL
@@ -667,4 +684,5 @@ function getCookie(name) {
     return cookieValue;
 }
 </script>
-{% endblock content %}
+
+{% endblock %}

templates/recruitment/candidate_detail.html

@@ -268,8 +268,8 @@
     <div class="row g-4">
         <nav aria-label="breadcrumb">
         <ol class="breadcrumb">
-            <li class="breadcrumb-item"><a href="{% url 'dashboard' %}" class="text-secondary">Home</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"><a href="{% url 'dashboard' %}" class="text-secondary text-decoration-none">Home</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'job_detail' candidate.job.slug  %}" class="text-secondary text-decoration-none">Job:({{candidate.job.title}})</a></li>
             <li class="breadcrumb-item active" aria-current="page" class="text-secondary"  style="
                             color: #F43B5E; /* Rosy Accent Color */
                             font-weight: 600;

templates/recruitment/candidate_profile.html

@@ -117,7 +117,7 @@
 }
 
 /* Tabs styling */
-.nav-tabs {
+{% comment %} .nav-tabs {
     border-bottom: 1px solid var(--kaauh-border);
 }
 .nav-tabs .nav-link.active {
@@ -142,7 +142,35 @@
 }
 .nav-tabs .nav-link i {
     color: var(--kaauh-teal) !important;
-}
+} {% endcomment %}
+
+ /* Tabs Theming - Applies to the right column */
+    .nav-tabs {
+        border-bottom: 1px solid var(--kaauh-border);
+        background-color: #f8f9fa;
+        padding: 0;
+    }
+
+    .nav-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;
+    }
+    /* Active Link */
+    .nav-tabs .nav-link.active {
+        color: var(--kaauh-teal-dark) !important;
+        background-color: white !important;
+        border-bottom: 3px solid var(--kaauh-teal) !important;
+        font-weight: 600;
+        z-index: 2;
+        border-right-color: transparent !important;
+        margin-bottom: -1px;
+    }
+
 .nav-scroll {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;

templates/recruitment/staff_assignment_view.html

@@ -156,7 +156,7 @@
                     <h5 class="mb-0"><i class="fas fa-briefcase me-2"></i>Job Information</h5>
                 </div>
                 <div class="card-body">
-                    <div class="row">
+                    <div class="row mx-2 my-2">
                         <div class="col-md-6">
                             <p><strong>Department:</strong> {{ job.get_department_display|default:job.department }}</p>
                             <p><strong>Job Type:</strong> {{ job.get_job_type_display }}</p>
@@ -190,10 +190,11 @@
                         {% endfor %}
                     {% endif %}
 
-                    <form method="post" id="staffAssignmentForm">
+                    <form method="post" id="staffAssignmentForm" class="mx-2 my-2" action=".">
                         {% csrf_token %}
+                        {{form.as_p}}
 
-                        <div class="row mb-3">
+                        {% comment %} <div class="row mb-3 ">
                             <div class="col-md-12">
                                 <label for="{{ form.staff.id_for_label }}" class="form-label fw-bold">
                                     {{ form.staff.label }} <span class="text-danger">*</span>
@@ -242,7 +243,7 @@
                                 {% endif %}
                                 <div class="form-text">Optional notes about this staff assignment.</div>
                             </div>
-                        </div>
+                        </div> {% endcomment %}
 
                         <div class="row">
                             <div class="col-12">