322 lines
12 KiB
HTML
322 lines
12 KiB
HTML
{% extends 'index.html' %} {% block content %} {% load mathfilters %}
|
|
{% load static %} {% load i18n %}
|
|
<div class="oh-wrapper">
|
|
<div class="oh-dashboard row">
|
|
<div class="oh-dashboard__left col-12 col-sm-12 col-md-12 col-lg-12">
|
|
<div class="oh-dashboard__cards row">
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
|
|
<a href="/recruitment/recruitment-view" class="text-decoration-none">
|
|
<div class="oh-card-dashboard oh-card-dashboard--warning not_click">
|
|
<div class="oh-card-dashboard__header">
|
|
<span class="oh-card-dashboard__title">{% trans "Openings" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-card-dashboard__counts">
|
|
<span class="oh-card-dashboard__sign"
|
|
><ion-icon name="people"></ion-icon></span>
|
|
<span class="oh-card-dashboard__count"
|
|
>{{total_vacancy}}</span
|
|
>
|
|
</div>
|
|
<span class="oh-badge oh-card-dashboard__badge">100%</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4 ">
|
|
<a href="/recruitment/candidate-view" class="text-decoration-none">
|
|
<div class="oh-card-dashboard oh-card-dashboard--danger">
|
|
<div class="oh-card-dashboard__header">
|
|
<span class="oh-card-dashboard__title">{% trans "Total Applicants" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-card-dashboard__counts">
|
|
<span class="oh-card-dashboard__sign"
|
|
><ion-icon name="accessibility"></ion-icon
|
|
></span>
|
|
<span class="oh-card-dashboard__count"
|
|
>{{total_candidates}}</span
|
|
>
|
|
</div>
|
|
<span class="oh-badge oh-card-dashboard__badge">{{total_candidate_ratio}}%</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4 ">
|
|
<a href="/recruitment/candidate-view?hired=true" class="text-decoration-none">
|
|
<div
|
|
class="oh-card-dashboard oh-card-dashboard oh-card-dashboard--success filter"
|
|
>
|
|
<div class="oh-card-dashboard__header">
|
|
<span class="oh-card-dashboard__title">{% trans "Hired Candidates" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-card-dashboard__counts">
|
|
<span class="oh-card-dashboard__sign"
|
|
><ion-icon name="caret-up-outline"></ion-icon
|
|
></span>
|
|
<span class="oh-card-dashboard__count"
|
|
>{{total_hired_candidates}}</span
|
|
>
|
|
</div>
|
|
<span class="oh-badge oh-card-dashboard__badge"
|
|
>{{hired_ratio}}%</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="oh-dashboard__movable-cards row mt-4">
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
|
|
<div>
|
|
<div class="oh-card-dashboard oh-card-dashboard--neutral" style="cursor:default; height:205px;">
|
|
<div class="oh-card-dashboard__header">
|
|
<span class="oh-card-dashboard__title">{% trans "Conversion Rate" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-card-dashboard__counts mt-4">
|
|
<span class="oh-card-dashboard__count">{{conversion_ratio}}%</span>
|
|
</div>
|
|
<span class="oh-badge oh-card-dashboard__badge mt-4"
|
|
>{{100|sub:conversion_ratio|floatformat:1}}%</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="oh-card-dashboard oh-card-dashboard--success mt-4" style="cursor:default; height:205px;">
|
|
<div class="oh-card-dashboard__header">
|
|
<span class="oh-card-dashboard__title">{% trans "Offer Acceptance Rate (OAR)" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-card-dashboard__counts mt-4">
|
|
<span class="oh-card-dashboard__count">{{acceptance_ratio}}%</span>
|
|
</div>
|
|
<span class="oh-badge oh-card-dashboard__badge mt-4"
|
|
>{{100|sub:acceptance_ratio|floatformat:1}}%</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-12 col-md-12 col-lg-3 oh-card-dashboard--moveable">
|
|
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent ">
|
|
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
|
|
<span class="oh-card-dashboard__title">{% trans "Open Positions By Department" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body" >
|
|
{% if dep_vacancy %}
|
|
<div >
|
|
<canvas id="vacancy"></canvas>
|
|
</div>
|
|
{% else %}
|
|
<div style="display:flex;align-items: center;justify-content: center;">
|
|
<div style="height:282px; justify-content:center;align-items:center; margin-top: -59px;" class="d-flex">
|
|
<img style="height:125px;" src="{% static 'images/ui/no_vacancy.png' %}" class=""/>
|
|
</div>
|
|
</div>
|
|
<h3 style="font-size:16px; margin-bottom:69px;" class="oh-404__subtitle">{% trans "No department-specific vacancies currently." %}</h3>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-12 col-md-12 col-lg-5 oh-card" style="border:0px solid white" >
|
|
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
|
|
<span class="oh-card-dashboard__title">{% trans "Candidate on Onboard" %}</span>
|
|
{% if onboarding_count %}<span class="oh-card-dashboard__title float-end"><a href="{% url 'candidate-view' %}?start_onboard=true" style="text-decoration:none; color:orange;">{% trans "View all" %}</a></span>{% endif %}
|
|
</div>
|
|
<div class="oh-card-dashboard__body" style="height:325px; overflow-y:auto;">
|
|
{% if onboarding_count %}
|
|
<ul class="oh-card-dashboard__user-list">
|
|
{% for cand in onboard_candidates %}
|
|
<li class="oh-card-dashboard__user-item">
|
|
<div class="oh-profile oh-profile--md">
|
|
<div class="oh-profile__avatar mr-1">
|
|
<img
|
|
src="https://ui-avatars.com/api/?name={{cand}}&background=random"
|
|
class="oh-profile__image"
|
|
alt="{{cand}}"
|
|
/>
|
|
</div>
|
|
<span class="oh-profile__name oh-text--dark">{{cand}}</span>
|
|
</div>
|
|
<p class="oh-profile__name float-end mt-1 me-3">- {{cand.job_position_id}}</p>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% else %}
|
|
<div style="height: 240px; display:flex;align-items: center;justify-content: center;" class="">
|
|
<div style="" class="">
|
|
<img style="display: block;width: 100px;margin: 20px auto ;" src="{% static 'images/ui/no_candidate.png' %}" class=""/>
|
|
<h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No candidates started onboarding." %}</h3>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="oh-dashboard__movable-cards row mt-4">
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-5 oh-card-dashboard--moveable"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard__header oh-card-dashboard__header--divider"
|
|
>
|
|
<span class="oh-card-dashboard__title">{% trans "Candidates Per Stage" %}</span>
|
|
<span class="oh-card-dashboard__title float-end" id="chart1"><ion-icon name="caret-forward"></ion-icon></span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
{% if stage_chart_count %}
|
|
<canvas id="recruitmentChart1" width="400" height="290"></canvas>
|
|
{% else %}
|
|
<div style="height: 430px; display:flex;align-items: center;justify-content: center;" class="">
|
|
<div style="" class="">
|
|
<img style="display: block;width: 120px;margin: 20px auto ;" src="{% static 'images/ui/interview.png' %}" class=""/>
|
|
<h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No recruitment stages currently available." %}</h3>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-7 oh-card-dashboard--moveable"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
|
|
>
|
|
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
|
|
|
|
<span class="oh-card-dashboard__title">{% trans "Joinings Per Month" %}</span>
|
|
<span class="oh-card-dashboard__title float-end" id="chart2"><ion-icon name="caret-forward"></ion-icon></span>
|
|
|
|
<select class="oh-card-dashboard__body float-end me-3" id="year">
|
|
</select>
|
|
|
|
</div>
|
|
{% if joining %}
|
|
<canvas class="oh-card-dashboard__body" id="hiringChart"></div>
|
|
{% else %}
|
|
<div style="height: 430px; display:flex;align-items: center;justify-content: center;" class="">
|
|
<div style="" class="">
|
|
<img style="display: block;width: 115px;margin: 20px auto ;" src="{% static 'images/ui/joiningchart.png' %}" class=""/>
|
|
<h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No records were available." %}</h3>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="oh-dashboard__movable-cards row mt-4 mb-5">
|
|
|
|
<div class="col-12 col-sm-12 col-md-12 col-lg-7 oh-card-dashboard--moveable">
|
|
<div>
|
|
<div class="oh-card-dashboard__header">
|
|
<span class="oh-card-dashboard__title">{% trans "Current Hiring Pipeline" %}</span>
|
|
</div>
|
|
<div class="oh-sticky-table float-start" style="height:500px">
|
|
<div class="oh-sticky-table__table">
|
|
<div class="oh-sticky-table__thead">
|
|
<div class="oh-sticky-table__tr">
|
|
<div class="oh-sticky-table__th">{% trans "Job Positions" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Initial" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Test" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Interview" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Hired" %}</div>
|
|
</div>
|
|
</div>
|
|
<div class="oh-sticky-table__tbody">
|
|
|
|
{% for job_item in job_data %}
|
|
|
|
<div class="oh-sticky-table__tr">
|
|
<div class="oh-sticky-table__sd">{{ job_item.0 }}</div>
|
|
<div class="oh-sticky-table__td">{{ job_item.1 }}</div>
|
|
<div class="oh-sticky-table__td">{{ job_item.2 }}</div>
|
|
<div class="oh-sticky-table__td">{{ job_item.3 }}</div>
|
|
<div class="oh-sticky-table__td">{{ job_item.4 }}</div>
|
|
</div>
|
|
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-12 col-md-12 col-lg-5 oh-card-dashboard--moveable">
|
|
<div class="oh-card-dashboard__header">
|
|
<span class="oh-card-dashboard__title">{% trans "Ongoing Recruitments & Hiring Managers" %}</span>
|
|
</div>
|
|
<div class="oh-sticky-table float-start">
|
|
<div class="oh-sticky-table__table">
|
|
<div class="oh-sticky-table__thead">
|
|
<div class="oh-sticky-table__tr">
|
|
<div class="oh-sticky-table__th">{% trans "Recruitment" %}</div>
|
|
<div class="oh-sticky-table__th">{% trans "Manager" %}</div>
|
|
</div>
|
|
</div>
|
|
<div class="oh-sticky-table__tbody">
|
|
|
|
{% for recruitment_title, managers in recruitment_manager_mapping.items %}
|
|
|
|
<div class="oh-sticky-table__tr">
|
|
<div class="oh-sticky-table__sd">{{ recruitment_title }}</div>
|
|
<div class="oh-sticky-table__td">{{ managers|join:", " }}</div>
|
|
</div>
|
|
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script src="{% static 'dashboard/recruitmentChart.js' %}"></script>
|
|
<script src="{% static 'dashboard/joiningChart.js' %}"></script>
|
|
<script src="{% static 'dashboard/vacancyChart.js' %}"></script>
|
|
|
|
|
|
|
|
<script>
|
|
var selectyear = document.getElementById("year");
|
|
var currentYear = new Date().getFullYear();
|
|
|
|
// Populate the dropdown with years from 2000 to the current year
|
|
for (var year = 2000; year <= currentYear; year++) {
|
|
var option = document.createElement("option");
|
|
option.value = year;
|
|
option.text = year;
|
|
// Set the default value to the current year
|
|
if (year === currentYear) {
|
|
option.selected = true;
|
|
}
|
|
selectyear.appendChild(option);
|
|
}
|
|
</script>
|
|
|
|
{% endblock content %}
|