271 lines
13 KiB
HTML
271 lines
13 KiB
HTML
{% extends 'portal_base.html' %}
|
|
{% load static i18n %}
|
|
|
|
{% block title %}{% trans "Agency Dashboard" %} - ATS{% endblock %}
|
|
{% block customCSS %}
|
|
<style>
|
|
:root {
|
|
--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-card {
|
|
border: 1px solid var(--kaauh-border);
|
|
border-radius: 0.75rem;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
|
background-color: white;
|
|
}
|
|
|
|
.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);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
</style>
|
|
{% endblock%}
|
|
{% block content %}
|
|
<div class="container-fluid py-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div class="px-2 py-2">
|
|
<h1 class="h3 mb-1" style="color: var(--kaauh-teal-dark); font-weight: 700;">
|
|
<i class="fas fa-tachometer-alt me-2"></i>
|
|
{% trans "Agency Dashboard" %}
|
|
</h1>
|
|
<p class="text-muted mb-0">
|
|
{% trans "Welcome back" %}, {{ agency.name }}!
|
|
</p>
|
|
</div>
|
|
<div>
|
|
{% comment %} <a href="{% url 'agency_portal_submit_application' %}" class="btn btn-main-action me-2">
|
|
<i class="fas fa-user-plus me-1"></i> {% trans "Submit Application" %}
|
|
</a>
|
|
|
|
>
|
|
{% endif %}
|
|
</a> {% endcomment %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overview Statistics -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-3 mb-2">
|
|
<div class="kaauh-card shadow-sm h-100">
|
|
<div class="card-body text-center px-2 py-2">
|
|
<div class="text-primary mb-2">
|
|
<i class="fas fa-briefcase fa-2x"></i>
|
|
</div>
|
|
<h4 class="card-title">{{ total_assignments }}</h4>
|
|
<p class="card-text text-muted">{% trans "Total Assignments" %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 mb-2">
|
|
<div class="kaauh-card shadow-sm h-100 px-2 py-2">
|
|
<div class="card-body text-center">
|
|
<div class="text-success mb-2">
|
|
<i class="fas fa-check-circle fa-2x"></i>
|
|
</div>
|
|
<h4 class="card-title">{{ active_assignments }}</h4>
|
|
<p class="card-text text-muted">{% trans "Active Assignments" %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 mb-2">
|
|
<div class="kaauh-card shadow-sm h-100 px-2 py-2">
|
|
<div class="card-body text-center">
|
|
<div class="text-info mb-2">
|
|
<i class="fas fa-users fa-2x"></i>
|
|
</div>
|
|
<h4 class="card-title">{{ total_applications }}</h4>
|
|
<p class="card-text text-muted">{% trans "Total Applications" %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3 mb-2">
|
|
<div class="kaauh-card shadow-sm h-100 px-2 py-2">
|
|
<div class="card-body text-center">
|
|
<div class="text-warning mb-2">
|
|
<i class="fas fa-envelope fa-2x"></i>
|
|
</div>
|
|
<h4 class="card-title">{{ total_unread_messages }}</h4>
|
|
<p class="card-text text-muted">{% trans "Unread Messages" %}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Job Assignments List -->
|
|
<div class="kaauh-card shadow-sm px-3 py-3">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h5 class="card-title mb-0">
|
|
<i class="fas fa-tasks me-2"></i>
|
|
{% trans "Your Job Assignments" %}
|
|
</h5>
|
|
<span class="badge bg-secondary">{{ assignment_stats|length }} {% trans "assignments" %}</span>
|
|
</div>
|
|
|
|
{% if assignment_stats %}
|
|
<div class="row">
|
|
{% for stats in assignment_stats %}
|
|
<div class="col-lg-6 col-xl-4 mb-4">
|
|
<div class="card h-100 border-0 shadow-sm assignment-card">
|
|
<div class="card-body">
|
|
<!-- Assignment Header -->
|
|
<div class="d-flex justify-content-between align-items-start mb-3">
|
|
<div class="flex-grow-1">
|
|
<h6 class="card-title mb-1">
|
|
<a href="{% url 'agency_portal_assignment_detail' stats.assignment.slug %}"
|
|
class="text-decoration-none text-dark">
|
|
{{ stats.assignment.job.title }}
|
|
</a>
|
|
</h6>
|
|
<p class="text-muted small mb-2">
|
|
<i class="fas fa-building me-1"></i>
|
|
{{ stats.assignment.job.department }}
|
|
</p>
|
|
</div>
|
|
<div class="text-end">
|
|
{% if stats.is_active %}
|
|
<span class="badge bg-success">{% trans "Active" %}</span>
|
|
{% elif stats.assignment.status == 'COMPLETED' %}
|
|
<span class="badge bg-primary">{% trans "Completed" %}</span>
|
|
{% elif stats.assignment.status == 'CANCELLED' %}
|
|
<span class="badge bg-danger">{% trans "Cancelled" %}</span>
|
|
{% else %}
|
|
<span class="badge bg-warning">{% trans "Expired" %}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Assignment Details -->
|
|
<div class="row mb-3">
|
|
<div class="col-6">
|
|
<small class="text-muted d-block">{% trans "Deadline" %}</small>
|
|
<strong class="{% if stats.days_remaining <= 3 %}text-danger{% elif stats.days_remaining <= 7 %}text-warning{% else %}text-success{% endif %}">
|
|
{{ stats.assignment.deadline|date:"Y-m-d" }}
|
|
{% if stats.days_remaining >= 0 %}
|
|
({{ stats.days_remaining }} {% trans "days left" %})
|
|
{% else %}
|
|
({{ stats.days_remaining }} {% trans "days overdue" %})
|
|
{% endif %}
|
|
</strong>
|
|
</div>
|
|
<div class="col-6">
|
|
<small class="text-muted d-block">{% trans "Applications" %}</small>
|
|
<strong>{{ stats.application_count }} / {{ stats.assignment.max_applications }}</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="mb-3">
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<small class="text-muted">{% trans "Submission Progress" %}</small>
|
|
<small class="text-muted">{{ stats.application_count }}/{{ stats.assignment.max_applications }}</small>
|
|
</div>
|
|
<div class="progress" style="height: 6px;">
|
|
{% with progress=stats.application_count %}
|
|
<div class="progress-bar {% if progress >= 90 %}bg-danger{% elif progress >= 70 %}bg-warning{% else %}bg-success{% endif %}"
|
|
style="width: {{ progress|floatformat:0 }}%"></div>
|
|
{% endwith %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
{% if stats.can_submit %}
|
|
<a href="{% url 'agency_portal_submit_application_page' stats.assignment.slug %}"
|
|
class="btn btn-sm btn-main-action">
|
|
<i class="fas fa-user-plus me-1"></i> {% trans "Submit Application" %}
|
|
</a>
|
|
{% else %}
|
|
<button class="btn btn-sm btn-secondary" disabled>
|
|
<i class="fas fa-user-plus me-1"></i> {% trans "Submissions Closed" %}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
<a href="{% url 'agency_portal_assignment_detail' stats.assignment.slug %}"
|
|
class="btn btn-sm btn-main-action">
|
|
<i class="fas fa-eye me-1"></i> {% trans "View Details" %}
|
|
</a>
|
|
{% comment %} {% if stats.unread_messages > 0 %}
|
|
<a href="{% url 'message_list' %}"
|
|
class="btn btn-sm btn-outline-warning position-relative">
|
|
<i class="fas fa-envelope me-1"></i>
|
|
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
|
|
{{ stats.unread_messages }}
|
|
</span>
|
|
</a>
|
|
{% endif %} {% endcomment %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-5">
|
|
<i class="fas fa-briefcase fa-3x text-muted mb-3"></i>
|
|
<h5 class="text-muted">{% trans "No Job Assignments Found" %}</h5>
|
|
<p class="text-muted">
|
|
{% trans "You don't have any job assignments yet. Please contact the administrator if you expect to have assignments." %}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.assignment-card {
|
|
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
|
}
|
|
|
|
.assignment-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.assignment-card .card-title a:hover {
|
|
color: var(--kaauh-teal-dark) !important;
|
|
}
|
|
|
|
.progress {
|
|
background-color: #e9ecef;
|
|
}
|
|
|
|
.progress-bar {
|
|
transition: width 0.3s ease;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block customJS %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Auto-refresh for unread messages count
|
|
setInterval(function() {
|
|
// You could implement a lightweight API call here to check for new messages
|
|
// For now, just refresh the page every 5 minutes
|
|
location.reload();
|
|
}, 300000); // 5 minutes
|
|
});
|
|
</script>
|
|
{% endblock %}
|