486 lines
19 KiB
HTML
486 lines
19 KiB
HTML
{% extends 'index.html' %} {% block content %} {% load static i18n horillafilters mathfilters recruitmentfilters %}
|
|
<style>
|
|
.oh-card-dashboard{
|
|
height: 100;
|
|
}
|
|
.done-task{
|
|
background-color: #9acd322e !important;
|
|
}
|
|
.scheduled-task{
|
|
background-color: #00afff2e !important;
|
|
}
|
|
.ongoing-task{
|
|
background-color: #e6ff002e !important;
|
|
}
|
|
.stuck-task{
|
|
background-color: #ff45003b !important;
|
|
}
|
|
.todo-task{
|
|
background-color: #8d8d8d2e !important;
|
|
}
|
|
.tooltip {
|
|
position: absolute;
|
|
background-color: #000;
|
|
color: #fff;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
display: block;
|
|
margin-top:80px;
|
|
}
|
|
|
|
</style>
|
|
<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-2" style="cursor:default;">
|
|
<a href="#" class="text-decoration-none">
|
|
<div class="oh-card-dashboard oh-card-dashboard--warning">
|
|
<div class="oh-card-dashboard__header">
|
|
<span class="oh-card-dashboard__title">{% trans "Total Vacancies" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-card-dashboard__counts">
|
|
<span class="oh-card-dashboard__count"
|
|
>{{total_vacancy}}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-2 ">
|
|
<a href="/recruitment/recruitment-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 "Ongoing Recruitments" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-card-dashboard__counts">
|
|
<span class="oh-card-dashboard__count"
|
|
>{{ongoing_recruitments}}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-2 ">
|
|
<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__count"
|
|
>{{total_hired_candidates}}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-3">
|
|
<div class="oh-card-dashboard oh-card-dashboard--neutral">
|
|
<div class="oh-card-dashboard__header" onmouseover="conversion_helptext()">
|
|
<span class="oh-card-dashboard__title">{% trans "Conversion Rate" %}</span>
|
|
<ion-icon name="help-circle-outline" id="offerhelptext"></ion-icon>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-card-dashboard__counts">
|
|
<span class="oh-card-dashboard__count">{{conversion_ratio}}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if "onboarding"|app_installed %}
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-3">
|
|
<div class="oh-card-dashboard oh-card-dashboard--success">
|
|
<div class="oh-card-dashboard__header" onmouseover="acceptance_helptext()">
|
|
<span class="oh-card-dashboard__title">{% trans "Offer Acceptance Rate (OAR)" %}</span>
|
|
<ion-icon name="help-circle-outline" id="offerhelptext"></ion-icon>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-card-dashboard__counts">
|
|
<span class="oh-card-dashboard__count">{{acceptance_ratio}}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="oh-dashboard__movable-cards row mt-4">
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4 oh-card me-4" style="border:0px solid white" >
|
|
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
|
|
<span class="oh-card-dashboard__title">{% trans "Skill Zone Status" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body" style="height:325px; overflow-y:auto;">
|
|
{% if skill_zone %}
|
|
<ul class="oh-card-dashboard__user-list">
|
|
{% for skill in skill_zone %}
|
|
<li class="oh-card-dashboard__user-item">
|
|
<div class="oh-profile oh-profile--md">
|
|
<a href="/recruitment/skill-zone-view?title={{skill}}"><div class="oh-profile__avatar mr-1">
|
|
<img
|
|
src="https://ui-avatars.com/api/?name={{skill}}&background=random"
|
|
class="oh-profile__image"
|
|
alt="{{cand}}"
|
|
/>
|
|
</div></a>
|
|
<a href="/recruitment/skill-zone-view?search={{skill}}"><span class="oh-profile__name oh-text--dark">{{skill}}</span></a>
|
|
</div>
|
|
<p class="oh-profile__name float-end mt-1 me-3">
|
|
  {{skill.skillzonecandidate_set.all|length}}   {% if skill.skillzonecandidate_set.all|length != 1 %} {% trans "Candidates" %} {% else %} {% trans "Candidate" %} {% endif %}</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 skill zone available." %}</h3>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% comment %} <div class="col-12 col-sm-12 col-md-6 col-lg-3 oh-card-dashboard--moveable me-4" style="background-color: white;">
|
|
<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> {% endcomment %}
|
|
|
|
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-3 me-4" style="background-color: white;">
|
|
<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 "Candidate Offer Letter Status" %}</span>
|
|
|
|
</div>
|
|
<div class="oh-card-dashboard__body" >
|
|
{% if total_candidates %}
|
|
<div >
|
|
|
|
<canvas id="candidateChart"></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 Candidates available." %}</h3>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if "onboarding"|app_installed %}
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4 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" %}</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|truncatechars:15}}</span>
|
|
</div>
|
|
<p class="oh-profile__name float-end mt-1 me-3">
|
|
{{cand.job_position_id|truncatechars:15}}</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>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="oh-dashboard__movable-cards row mt-4">
|
|
<div
|
|
class="col-12 col-sm-12 col-md-6 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/no_records.svg' %}" class=""/>
|
|
<h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No records were available." %}</h3>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if ongoing_recruitments %}
|
|
<div class="col-12 col-sm-12 col-md-12 col-lg-5 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 class="oh-sticky-table__th">{% trans "Cancelled" %}</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 class="oh-sticky-table__td">{{ job_item.5 }}</div>
|
|
</div>
|
|
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="oh-dashboard__movable-cards row">
|
|
{% if "onboarding"|app_installed %}
|
|
{% if request.user|is_in_task_managers %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-6 col-lg-7 oh-card-dashboard--moveable mt-4"
|
|
style="height: 455px;
|
|
background-color: white;"
|
|
id="taskStatus"
|
|
hx-get="{% url "task-report-onboarding" %}"
|
|
hx-trigger="load"
|
|
>
|
|
</div>
|
|
{% else %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-6 col-lg-7 mt-4 oh-card-dashboard--moveable"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" >
|
|
<span class="oh-card-dashboard__title">{% trans "My Onboarding Tasks" %}</span>
|
|
<div style="height: 403px; display:grid;align-items: center;justify-content: center;" class="">
|
|
<img style="display: block;width: 120px;margin: 20px auto ;" src="{% static 'images/ui/time-management.png' %}" class="mb-0"/>
|
|
<h3 style="font-size:16px" class="oh-404__subtitle">{% trans "No onboarding tasks are currently available." %}</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
<div
|
|
class="col-12 col-sm-12 col-md-6 col-lg-5 mt-4 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="385" height="228"></canvas>
|
|
{% else %}
|
|
<div style="height: 362px; 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>
|
|
{% if ongoing_recruitments %}
|
|
<div class="col-12 col-sm-12 col-md-12 col-lg-6 mt-4 ">
|
|
<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>
|
|
{% endif %}
|
|
</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 src="{% static 'dashboard/candidateChart.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);
|
|
}
|
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const icon = document.getElementById('offerhelptext');
|
|
icon.addEventListener('click', function(event) {
|
|
acceptance_helptext(event); // Pass the event object to the acceptance_helptext function
|
|
});
|
|
});
|
|
|
|
function acceptance_helptext(event) {
|
|
event = event || window.event;
|
|
const icon = event.target || event.srcElement;
|
|
const tooltip = document.createElement('div');
|
|
tooltip.className = 'tooltip';
|
|
tooltip.textContent = 'Offer Acceptance Rate = ( Onboarding candidates / Total Hired Candidates ) * 100'; // Help text
|
|
|
|
// Position the tooltip relative to the icon
|
|
const rect = icon.getBoundingClientRect();
|
|
tooltip.style.top = rect.top + icon.offsetHeight + 'px';
|
|
tooltip.style.left = rect.left + 'px';
|
|
|
|
// Append tooltip to the body
|
|
document.body.appendChild(tooltip);
|
|
|
|
// Remove tooltip when mouse is moved away from the icon
|
|
icon.addEventListener('mouseout', function () {
|
|
document.body.removeChild(tooltip);
|
|
});
|
|
}
|
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const icon = document.getElementById('conversionhelptext');
|
|
icon.addEventListener('click', function(event) {
|
|
conversion_helptext(event); // Pass the event object to the conversion_helptext function
|
|
});
|
|
});
|
|
|
|
function conversion_helptext(event) {
|
|
event = event || window.event;
|
|
const icon = event.target || event.srcElement;
|
|
const tooltip = document.createElement('div');
|
|
tooltip.className = 'tooltip';
|
|
tooltip.textContent = 'Conversion Rate = ( Total Hired Candidates / Total Candidates ) * 100'; // Help text
|
|
|
|
// Position the tooltip relative to the icon
|
|
const rect = icon.getBoundingClientRect();
|
|
tooltip.style.top = rect.top + icon.offsetHeight + 'px';
|
|
tooltip.style.left = rect.left + 'px';
|
|
|
|
// Append tooltip to the body
|
|
document.body.appendChild(tooltip);
|
|
|
|
// Remove tooltip when mouse is moved away from the icon
|
|
icon.addEventListener('mouseout', function () {
|
|
document.body.removeChild(tooltip);
|
|
});
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
{% endblock content %}
|