106 lines
3.8 KiB
HTML
106 lines
3.8 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}Dashboard - {{ block.super }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="stats" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 3rem;">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 style="display: flex; align-items: center; color: var(--primary-color);">
|
|
{% include "icons/jobs.html" %}
|
|
Total Jobs
|
|
</h3>
|
|
</div>
|
|
<div style="font-size: 2.5rem; text-align: center; color: var(--primary-color); font-weight: bold;">
|
|
{{ total_jobs }}
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 style="display: flex; align-items: center; color: var(--primary-color);">
|
|
{% include "icons/users.html" %}
|
|
Total Candidates
|
|
</h3>
|
|
</div>
|
|
<div style="font-size: 2.5rem; text-align: center; color: var(--primary-color); font-weight: bold;">
|
|
{{ total_candidates }}
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3 style="display: flex; align-items: center; color: var(--primary-color);">
|
|
{% include "icons/meeting.html" %}
|
|
Avg. Applications per Job
|
|
</h3>
|
|
</div>
|
|
<div style="font-size: 2.5rem; text-align: center; color: var(--primary-color); font-weight: bold;">
|
|
{{ average_applications|floatformat:1 }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 style="display: flex; align-items: center; color: var(--primary-color);">
|
|
<svg class="heroicon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 2rem; height: 2rem; margin-right: 1rem;">
|
|
<path d="M3 7v10c0 .5 .4 .9.9 .9h16.2c.4 0 .8 -.4.8 -.9V7c0 -.5 -.4 -.9 -.9 -.9H3.9c-.5 0 -.9 .4 -.9 .9z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
<path d="M3 7h16.2c.5 0 .9 .4.9 .9v8.2c0 .5 -.4 .9 -.9 .9H3.9a.9 .9 0 0 1 -.9 -.9V7.9c0 -.5 .4 -.9.9 -.9z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
</svg>
|
|
Applications per Job
|
|
</h2>
|
|
</div>
|
|
<div style="padding: 2rem;">
|
|
<canvas id="applicationsChart" style="max-height: 400px;"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
const ctx = document.getElementById('applicationsChart').getContext('2d');
|
|
const chart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: {{ job_titles|safe }},
|
|
datasets: [{
|
|
label: 'Applications',
|
|
data: {{ job_app_counts|safe }},
|
|
backgroundColor: 'rgba(27, 131, 84, 0.8)', // Green theme
|
|
borderColor: 'rgba(27, 131, 84, 1)',
|
|
borderWidth: 1,
|
|
barThickness: 50
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
color: '#333333'
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
color: '#333333'
|
|
},
|
|
grid: {
|
|
color: '#e0e0e0'
|
|
}
|
|
},
|
|
x: {
|
|
ticks: {
|
|
color: '#333333'
|
|
},
|
|
grid: {
|
|
color: '#e0e0e0'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|