job detail ui update

recruitment/forms.py

@@ -480,6 +480,9 @@ class JobPostingStatusForm(forms.ModelForm):
     class Meta:
         model = JobPosting
         fields = ['status']
+        widgets = {
+            'status': forms.Select(attrs={'class': 'form-select'}),
+        }
 class FormTemplateIsActiveForm(forms.ModelForm):
     class Meta:
         model = FormTemplate

recruitment/views.py

@@ -15,7 +15,7 @@ from .forms import (
     ZoomMeetingForm,
     JobPostingForm,
     FormTemplateForm,
-    InterviewScheduleForm,JobStatusUpdateForm,
+    InterviewScheduleForm,JobPostingStatusForm,
     BreakTimeFormSet,
 )
 from rest_framework import viewsets
@@ -277,12 +277,12 @@ def job_detail(request, slug):
     interview_count = candidates.filter(stage="Interview").count()
     offer_count = candidates.filter(stage="Offer").count()
 
-    status_form = JobStatusUpdateForm(instance=job)
+    status_form = JobPostingStatusForm(instance=job)
 
     # 2. Check for POST request (Status Update Submission)
     if request.method == 'POST':
         
-        status_form = JobStatusUpdateForm(request.POST, instance=job)
+        status_form = JobPostingStatusForm(request.POST, instance=job)
         
         if status_form.is_valid():
             status_form.save()

templates/jobs/job_detail.html

@@ -46,7 +46,15 @@
     .bg-secondary { background-color: #6c757d !important; }
     .bg-danger { background-color: #dc3545 !important; }
 
-
+    /* Fix for active tab text visibility */
+    .nav-tabs .nav-link.active,
+    .right-column-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;
+    }
     /* Card enhancements */
     .card {
         border: 1px solid var(--kaauh-border);
@@ -198,6 +206,8 @@
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
+        justify-content: center;
+        text-align: center;
     }
 
     .btn-main-action:hover {
@@ -247,7 +257,7 @@
                 <div class="job-header-card d-flex justify-content-between align-items-center flex-wrap">
                     <div>
                         <h2 class="mb-1">{{ job.title }}</h2>
-                        <small class="text-light">{{ job.internal_job_id }}</small>
+                        <small class="text-light">{% trans "JOB ID: "%}{{ job.internal_job_id }}</small>
                     </div>
 
                     <div class="d-flex align-items-center gap-2">
@@ -306,6 +316,12 @@
                                 <div class="col-md-6">
                                     <i class="fas fa-user-tie me-2 text-primary"></i> <strong>{% trans "Created By:" %}</strong> {{ job.created_by|default:"N/A" }}
                                 </div>
+                                 <div class="col-md-6">
+                                    <i class="fas fa-plus me-2 text-primary"></i> <strong>{% trans "Created At:" %}</strong> {{ job.created_at|default:"N/A" }}
+                                </div>
+                                 <div class="col-md-6">
+                                    <i class="fas fa-edit me-2 text-primary"></i> <strong>{% trans "Updated At:" %}</strong> {{ job.updated_at|default:"N/A" }}
+                                </div>
                             </div>
                             <h5 class="text-muted mb-3">{% trans "Financial & Timeline" %}</h5>
                             <div class="row g-3">
@@ -407,7 +423,7 @@
                     </li>
                     <li class="nav-item flex-fill" role="presentation">
                         <button class="nav-link" id="internal-tab" data-bs-toggle="tab" data-bs-target="#internal-pane" type="button" role="tab" aria-controls="internal-pane" aria-selected="false">
-                            <i class="fas fa-info me-1 text-muted"></i> {% trans "Info" %}
+                            <i class="fas fa-info me-1 text-muted"></i> {% trans "Linkedin" %}
                         </button>
                     </li>
                 </ul>
@@ -438,51 +454,50 @@
                                     </div>
                                 </div>
                             </div>
-
+                                <div class="col-12 mb-2">
-                            <div class="table-responsive small">
+                                    <a href="{% url 'job_candidates_list' job.slug %}" class="btn  btn-outline-secondary w-100">
-                                <table class="table table-sm table-hover mb-0 table-applicants">
-                                    <tbody>
-                                        {% for candidate in candidates|slice:":5" %}
-                                            <tr>
-                                                <td>
-                                                    <strong>{{ candidate.first_name }} {{ candidate.last_name }}</strong>
-                                                </td>
-                                                <td>
-                                                    <span class="badge bg-{% if candidate.stage == 'Applied' %}success{% elif candidate.stage == 'Interview' %}info{% elif candidate.stage == 'Offer' %}success{% else %}secondary{% endif %}">
-                                                        {{ candidate.stage }}
-                                                    </span>
-                                                </td>
-                                                <td class="text-end">
-                                                    <a href="{% url 'candidate_detail' candidate.slug %}" class="btn btn-sm btn-outline-secondary py-0 px-2">
-                                                        <i class="fas fa-eye"></i>
-                                                    </a>
-                                                </td>
-                                            </tr>
-                                        {% endfor %}
-                                    </tbody>
-                                </table>
-                            </div>
-
-                            {% if candidates|length > 5 %}
-                                <div class="text-center mt-3">
-                                    <a href="{% url 'job_candidates_list' job.slug %}" class="btn btn-sm btn-outline-secondary">
                                         {% trans "View All Applicants" %} ({{ total_candidates }})
                                     </a>
                                 </div>
-                            {% endif %}
+        
-                        {% else %}
-                            <div class="text-center py-4">
-                                <i class="fas fa-user-slash fa-3x text-muted mb-3"></i>
-                                <h6 class="text-muted">{% trans "No applicants yet" %}</h6>
-                                <p class="text-muted small">{% trans "Candidates will appear here once they apply for this position." %}</p>
-                            </div>
                         {% endif %}
+                        
+                         <div class="d-grid gap-2">
+                                <a href="{% url 'candidate_create_for_job' job.slug %}" class="btn btn-main-action">
+                                    <i class="fas fa-user-plus"></i> {% trans "Create Candidate" %}
+                            </a>
+                        </div>
                     </div>
 
                     {# TAB 2: MANAGEMENT (LinkedIn & Forms) CONTENT #}
                     <div class="tab-pane fade" id="manage-pane" role="tabpanel" aria-labelledby="manage-tab">
 
                         {# LinkedIn Integration (Content from old card) #}
+                        
+
+                        {# Applicant Form Management (Content from old card) #}
+                        <h5 class="mb-3"><i class="fas fa-clipboard-list me-2 text-primary"></i>{% trans "Form Management" %}</h5>
+                        <div class="d-grid gap-2">
+                            <p class="text-muted small mb-3">
+                                {% trans "Manage the custom application forms associated with this job posting." %}
+                            </p>
+                            
+                            {% if not job.form_template %}
+                            <a href="{% url 'create_form_template' %}" class="btn btn-main-action">
+                                <i class="fas fa-plus-circle me-2"></i> {% trans "Create New Form Template" %}
+                            </a>
+                            {% else %}
+                            <a href="{% url 'form_wizard' job.form_template.pk %}" class="btn btn-outline-secondary">
+                                <i class="fas fa-list-alt me-1"></i> {% trans "View Form Template" %}
+                            </a>
+                            {% endif %}
+
+                           
+                        </div>
+                    </div>
+
+                    {# TAB 3: INTERNAL INFO CONTENT #}
+                    <div class="tab-pane fade" id="internal-pane" role="tabpanel" aria-labelledby="internal-tab">
                         <h5 class="mb-3"><i class="fab fa-linkedin me-2 text-info"></i>{% trans "LinkedIn Integration" %}</h5>
                         <div class="mb-4">
                             {% if job.posted_to_linkedin %}
@@ -523,40 +538,6 @@
                                 </div>
                             {% endif %}
                         </div>
-
-                        {# Applicant Form Management (Content from old card) #}
-                        <h5 class="mb-3"><i class="fas fa-clipboard-list me-2 text-primary"></i>{% trans "Form Management" %}</h5>
-                        <div class="d-grid gap-2">
-                            <p class="text-muted small mb-3">
-                                {% trans "Manage the custom application forms associated with this job posting." %}
-                            </p>
-
-                            <a href="{% url 'create_form_template' %}" class="btn btn-main-action">
-                                <i class="fas fa-plus-circle me-2"></i> {% trans "Create New Form" %}
-                            </a>
-
-                            <a href="" class="btn btn-outline-secondary">
-                                <i class="fas fa-list-alt me-1"></i> {% trans "View All Existing Forms" %}
-                            </a>
-
-                            <a href="{% url 'candidate_create_for_job' job.slug %}" class="btn btn-main-action">
-                                    <i class="fas fa-user-plus"></i> {% trans "Create Candidate" %}
-                            </a>
-                        </div>
-                    </div>
-
-                    {# TAB 3: INTERNAL INFO CONTENT #}
-                    <div class="tab-pane fade" id="internal-pane" role="tabpanel" aria-labelledby="internal-tab">
-                        <h5 class="mb-3"><i class="fas fa-info-circle me-2 text-secondary"></i>{% trans "Internal Information" %}</h5>
-                        <div class="small">
-                            <p class="mb-1"><strong>{% trans "Internal Job ID:" %}</strong> {{ job.internal_job_id }}</p>
-                            <p class="mb-1"><strong>{% trans "Created:" %}</strong> {{ job.created_at|date:"M d, Y" }}</p>
-                            <p class="mb-1"><strong>{% trans "Last Updated:" %}</strong> {{ job.updated_at|date:"M d, Y" }}</p>
-                            {% if job.reporting_to %}
-                                <p class="mb-0"><strong>{% trans "Reports To:" %}</strong> {{ job.reporting_to }}</p>
-                            {% endif %}
-                        </div>
-
                         <div class="mt-4">
                             <a href="{% url 'job_list' %}" class="btn btn-outline-secondary w-100">
                                 <i class="fas fa-arrow-left"></i> {% trans "Back to Jobs" %}