99 lines
5.8 KiB
HTML
99 lines
5.8 KiB
HTML
{% load i18n %}
|
|
{# -------------------------------------------------------------------------- #}
|
|
{# STATS CARDS SECTION (9 KPIs) #}
|
|
{# -------------------------------------------------------------------------- #}
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mb-8">
|
|
|
|
{# GLOBAL - 1. Total Jobs (System) #}
|
|
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<i data-lucide="list" class="w-5 h-5 text-temple-red"></i>
|
|
<h3 class="text-sm font-semibold text-gray-800">{% trans "Total Jobs" %}</h3>
|
|
</div>
|
|
<div class="text-3xl font-bold text-gray-900 mb-1">{{ total_jobs_global }}</div>
|
|
<div class="text-xs text-gray-500">{% trans "All Active & Drafted Positions" %}</div>
|
|
</div>
|
|
|
|
{# SCOPED - 2. Total Active Jobs #}
|
|
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<i data-lucide="briefcase" class="w-5 h-5 text-temple-red"></i>
|
|
<h3 class="text-sm font-semibold text-gray-800">{% trans "Active Jobs" %}</h3>
|
|
</div>
|
|
<div class="text-3xl font-bold text-gray-900 mb-1">{{ total_active_jobs }}</div>
|
|
<div class="text-xs text-gray-500">{% trans "Currently Open Requisitions" %}</div>
|
|
</div>
|
|
|
|
{# SCOPED - 3. Total Candidates #}
|
|
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<i data-lucide="users" class="w-5 h-5 text-temple-red"></i>
|
|
<h3 class="text-sm font-semibold text-gray-800">{% trans "Total Applications" %}</h3>
|
|
</div>
|
|
<div class="text-3xl font-bold text-gray-900 mb-1">{{ total_applications }}</div>
|
|
<div class="text-xs text-gray-500">{% trans "Total applications" %}</div>
|
|
</div>
|
|
|
|
{# SCOPED - 4. Open Positions #}
|
|
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<i data-lucide="layout-list" class="w-5 h-5 text-temple-red"></i>
|
|
<h3 class="text-sm font-semibold text-gray-800">{% trans "Open Positions" %}</h3>
|
|
</div>
|
|
<div class="text-3xl font-bold text-gray-900 mb-1">{{ total_open_positions }}</div>
|
|
<div class="text-xs text-gray-500">{% trans "Total Slots to be Filled" %}</div>
|
|
</div>
|
|
|
|
{# SCOPED - 5. Avg Apps per Job #}
|
|
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<i data-lucide="bar-chart-2" class="w-5 h-5 text-temple-red"></i>
|
|
<h3 class="text-sm font-semibold text-gray-800">{% trans "Avg. Apps per Job" %}</h3>
|
|
</div>
|
|
<div class="text-3xl font-bold text-gray-900 mb-1">{{ average_applications|floatformat:1 }}</div>
|
|
<div class="text-xs text-gray-500">{% trans "Average Applications per Job" %}</div>
|
|
</div>
|
|
|
|
{# --- Efficiency & Quality Metrics --- #}
|
|
|
|
{# 6. Time-to-Hire #}
|
|
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<i data-lucide="clock" class="w-5 h-5 text-temple-red"></i>
|
|
<h3 class="text-sm font-semibold text-gray-800">{% trans "Time-to-Hire" %}</h3>
|
|
</div>
|
|
<div class="text-3xl font-bold text-gray-900 mb-1">{{ avg_time_to_hire_days }}</div>
|
|
<div class="text-xs text-gray-500">{% trans "Average Days" %}</div>
|
|
</div>
|
|
|
|
{# 7. Avg Match Score #}
|
|
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<i data-lucide="star" class="w-5 h-5 text-temple-red"></i>
|
|
<h3 class="text-sm font-semibold text-gray-800">{% trans "Avg. Match Score" %}</h3>
|
|
</div>
|
|
<div class="text-3xl font-bold text-gray-900 mb-1">{{ avg_match_score|floatformat:1 }}</div>
|
|
<div class="text-xs text-gray-500">{% trans "Average AI Score" %}</div>
|
|
</div>
|
|
|
|
{# 8. High Potential #}
|
|
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<i data-lucide="trophy" class="w-5 h-5 text-temple-red"></i>
|
|
<h3 class="text-sm font-semibold text-gray-800">{% trans "High Potential" %}</h3>
|
|
</div>
|
|
<div class="text-3xl font-bold text-gray-900 mb-1">{{ high_potential_count }}</div>
|
|
<div class="text-xs text-gray-500">{% trans "Score ≥ 75% Profiles" %} ({{ high_potential_ratio|floatformat:1 }}%)</div>
|
|
</div>
|
|
|
|
{# 9. Pending Interviews #}
|
|
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<i data-lucide="calendar" class="w-5 h-5 text-temple-red"></i>
|
|
<h3 class="text-sm font-semibold text-gray-800">{% trans "Pending Interviews" %}</h3>
|
|
</div>
|
|
<div class="text-3xl font-bold text-gray-900 mb-1">{{ pending_interviews|default:0 }}</div>
|
|
<div class="text-xs text-gray-500">{% trans "Scheduled interviews pending" %}</div>
|
|
</div>
|
|
|
|
</div> |