kaauh_ats/templates/recruitment/dashboard.html

{% extends "base.html" %}
{% load static i18n %}

{% block title %}{% trans "Recruitment Dashboard" %} - {{ block.super }}{% endblock %}

{% block customCSS %}
<style>
    /* UI Variables for the KAAT-S Theme (Teal/Consistent Look) */
    :root {
        --kaauh-teal: #00636e;
        --kaauh-teal-light: #0093a3;
        --kaauh-teal-dark: #004a53;
        --kaauh-border: #eaeff3;
        --kaauh-primary-text: #343a40;
        --color-success: #28a745;
        --color-info: #17a2b8;
    }

    /* General Card Styling */
    .card {
        border: 1px solid var(--kaauh-border);
        border-radius: 0.75rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        transition: transform 0.2s, box-shadow 0.2s;
        background-color: white;
    }
    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    }

    .card-header {
        font-weight: 600;
        padding: 1.25rem;
        border-bottom: 1px solid var(--kaauh-border);
        background-color: #f8f9fa;
    }

    /* Stats Grid Layout - Six columns for better detail display */
    .stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1.5rem;
        margin-bottom: 3rem;
    }

    /* Stat Card Specific Styling */
    .stat-value {
        font-size: 2.8rem;
        text-align: center;
        color: var(--kaauh-teal-dark);
        font-weight: 700;
        padding: 1rem 1rem 0.5rem;
    }

    .stat-caption {
        font-size: 0.9rem;
        text-align: center;
        color: #6c757d;
        padding-bottom: 1rem;
    }

    /* Header Styling */
    .card-header h3, .card-header h2 {
        display: flex;
        align-items: center;
        color: var(--kaauh-primary-text);
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
    }

    .stat-icon {
        color: var(--kaauh-teal);
        font-size: 1.75rem;
        margin-right: 0.75rem;
    }

    /* Chart Container */
    .chart-container {
        padding: 2rem;
    }

</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">

    <h1 class="mb-4" style="color: var(--kaauh-teal-dark); font-weight: 700;">{% trans "Recruitment Intelligence" %} 🧠</h1>

    <div class="stats">

        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-briefcase stat-icon"></i> {% trans "Total Jobs" %}</h3>
            </div>
            <div class="stat-value">{{ total_jobs }}</div>
            <div class="stat-caption">{% trans "Active & Drafted Positions" %}</div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-users stat-icon"></i> {% trans "Total Candidates" %}</h3>
            </div>
            <div class="stat-value">{{ total_candidates }}</div>
            <div class="stat-caption">{% trans "All Profiles in ATS" %}</div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-chart-line stat-icon"></i> {% trans "Avg. Apps per Job" %}</h3>
            </div>
            <div class="stat-value">{{ average_applications|floatformat:1 }}</div>
            <div class="stat-caption">{% trans "Efficiency Metric" %}</div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-star stat-icon" style="color: var(--color-warning);"></i> {% trans "Avg. Match Score" %}</h3>
            </div>
            <div class="stat-value">{{ avg_match_score|floatformat:1 }}</div>
            <div class="stat-caption">{% trans "Average AI Score (0-100)" %}</div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-trophy stat-icon" style="color: var(--color-success);"></i> {% trans "High Potential" %}</h3>
            </div>
            <div class="stat-value">{{ high_potential_count }}</div>
            <div class="stat-caption">{% trans "Candidates with Score ≥ 75 ({{ high_potential_ratio }}%)" %}</div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3><i class="fas fa-cogs stat-icon" style="color: var(--color-info);"></i> {% trans "Scored Profiles" %}</h3>
            </div>
            <div class="stat-value">{{ scored_ratio|floatformat:1 }}%</div>
            <div class="stat-caption">{% trans "Percent of profiles processed by AI" %}</div>
        </div>
    </div>

    <div class="card shadow-lg">
        <div class="card-header">
            <h2 class="d-flex align-items-center mb-0">
                <i class="fas fa-chart-bar stat-icon"></i>
                {% trans "Top 5 Application Volume" %}
            </h2>
        </div>
        <div class="chart-container">
            <canvas id="applicationsChart"></canvas>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>

    // Pass context data safely to JavaScript
    const jobTitles = JSON.parse('{{ job_titles|escapejs }}').slice(0, 5); // Take top 5
    const jobAppCounts = JSON.parse('{{ job_app_counts|escapejs }}').slice(0, 5); // Take top 5

    const ctx = document.getElementById('applicationsChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'bar',
        data: {
            // Use the parsed and sliced data
            labels: jobTitles,
            datasets: [{
                label: '{% trans "Applications" %}',
                data: jobAppCounts,
                // Use the defined CSS variable for consistency
                backgroundColor: ' #00636e', // Green theme
                borderColor: ' #004a53',
                borderWidth: 1,
                barThickness: 50
            }]
        },
        options: {
            responsive: true,
            aspectRatio: 2.5, // Make the chart wider
            plugins: {
                legend: {
                    display: false // Hide legend since there's only one dataset
                },
                title: {
                    display: true,
                    text: 'Top 5 Most Applied Jobs',
                    font: {
                        size: 16
                    },
                    color: 'var(--kaauh-primary-text)'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Total Applications'
                    },
                    ticks: {
                        color: '#333333',
                        precision: 0 // Ensure y-axis labels are integers
                    },
                    grid: {
                        color: '#e0e0e0'
                    }
                },
                x: {
                    ticks: {
                        color: '#333333'
                    },
                    grid: {
                        display: false
                    }
                }
            }
        }
    });
</script>

{% endblock %}