1016 lines
40 KiB
HTML
Executable File
1016 lines
40 KiB
HTML
Executable File
{% load static %} {% load basefilters %} {% load recruitmentfilters %} {% load employee_filter %} {% load i18n %} {% load tz %} {% now "Y-m-d" as current_date %}
|
|
<div id="mainNav"></div>
|
|
<!-- End of Navigation -->
|
|
<style>
|
|
.oh-card-dashboard--moveable {
|
|
padding: 0 10px 20px 10px;
|
|
}
|
|
.oh-card-dashboard:not(.tile) {
|
|
cursor: default;
|
|
min-height: 425px;
|
|
}
|
|
.oh-dashboard__movable-cards {
|
|
padding-right: 0;
|
|
}
|
|
.oh-card-dashboard--moveable {
|
|
padding-right: 0;
|
|
padding-bottom: 10px;
|
|
}
|
|
.progress {
|
|
height: 20px;
|
|
width: 110px;
|
|
background-color: lightgrey;
|
|
border:2px solid #27C20C;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
}
|
|
.progress-bar {
|
|
height: 100%;
|
|
background-color: #27C20C; /* Set your desired progress bar color */
|
|
}
|
|
.progress-text {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
.oh-modal_close--custom {
|
|
border: none;
|
|
background: none;
|
|
font-size: 1.5rem;
|
|
opacity: 0.7;
|
|
position: absolute;
|
|
top: 25px;
|
|
right: 15px;
|
|
}
|
|
|
|
.container-heading {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
padding:10px;
|
|
}
|
|
|
|
.oh-kanban-card__title {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
padding: 10px;
|
|
border:1px solid hsl(8deg 77% 56% / 40%);
|
|
border-radius: 18px;
|
|
margin-right:10px;
|
|
background-color:hsl(24.23deg 100% 58.24% / 52.94%);
|
|
}
|
|
|
|
.announcement_title{
|
|
margin-bottom: 10px;
|
|
padding: 8px;
|
|
margin-right:10px;
|
|
text-decoration:none;
|
|
}
|
|
</style>
|
|
<main>
|
|
<div class="oh-wrapper">
|
|
<!-- back button -->
|
|
<div class="d-none mt-5" id="back_button" style="width: 10%">
|
|
<a
|
|
href="{% url 'home-page' %}"
|
|
class="oh-btn oh-btn--secondary oh-btn--shadow ms-3"
|
|
>
|
|
<ion-icon
|
|
class="me-2 md hydrated"
|
|
name="arrow-back-outline"
|
|
role="img"
|
|
aria-label="arrow-back-outline"
|
|
></ion-icon
|
|
>{% trans "Back" %}</a
|
|
>
|
|
</div>
|
|
<!-- end of back button -->
|
|
<div class="oh-dashboard row" id="dashboard" style="padding-bottom: 3.5rem;">
|
|
<div class="oh-dashboard__left col-12 col-sm-12 col-md-12 col-lg-9">
|
|
<div class="oh-dashboard__cards row">
|
|
{% if perms.employee.view_employee %}
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
|
|
<div class="oh-card-dashboard oh-card-dashboard--success tile">
|
|
<a
|
|
href="{% url 'candidate-view' %}?joining_date={{current_date}}"
|
|
style="text-decoration: none"
|
|
>
|
|
<div class="oh-card-dashboard__header">
|
|
<span class="oh-card-dashboard__title"
|
|
>{% trans "New Joining Today" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-card-dashboard__counts">
|
|
<span
|
|
class="oh-card-dashboard__count"
|
|
id="newbieToday"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
|
|
<div
|
|
class="oh-card-dashboard oh-card-dashboard oh-card-dashboard--warning tile"
|
|
>
|
|
<a
|
|
href="{% url 'candidates-view' %}?scheduled_from={{first_day_of_week}}&scheduled_till={{last_day_of_week}}"
|
|
style="text-decoration: none"
|
|
>
|
|
<div class="oh-card-dashboard__header">
|
|
<span class="oh-card-dashboard__title"
|
|
>{% trans "New Joining This Week" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-card-dashboard__counts">
|
|
<span class="oh-card-dashboard__count" id="newbie"></span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-12 col-md-6 col-lg-4">
|
|
<a href="{% url 'employee-view' %}" style="text-decoration: none">
|
|
<div class="oh-card-dashboard oh-card-dashboard--neutral tile">
|
|
<div class="oh-card-dashboard__header">
|
|
<span class="oh-card-dashboard__title"
|
|
>{% trans "Total Strength" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-card-dashboard__counts">
|
|
<span
|
|
class="oh-card-dashboard__count"
|
|
id="totalEmployeesCount"
|
|
></span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
<div class="oh-dashboard__movable-cards row mt-4" id="tileContainer">
|
|
{% if perms.candidate.view_employee or request.user|is_reportingmanager %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable"
|
|
id="notInYetId"
|
|
hx-get="{% url "not-in-yet" %}"
|
|
hx-trigger="load"
|
|
>
|
|
{% include "dashboard/not_in_yet.html" %}
|
|
</div>
|
|
|
|
{% endif %}
|
|
{% if perms.candidate.view_employee or request.user|is_reportingmanager %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable"
|
|
id="notoutYetdd"
|
|
hx-get="{% url "not-out-yet" %}"
|
|
hx-trigger="load"
|
|
>
|
|
{% include "dashboard/not_out_yet.html" %}
|
|
</div>
|
|
|
|
{% endif %}
|
|
{% if perms.leave.veiw_leaverequest %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable"
|
|
id="movable1"
|
|
>
|
|
<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 "Overall Leave" %}</span
|
|
>
|
|
<select
|
|
class="oh-select oh-select--sm float-end"
|
|
name=""
|
|
id="overAllLeaveSelect"
|
|
>
|
|
<option value="today" selected>{% trans "Today" %}</option>
|
|
<option value="week">{% trans "This Week" %}</option>
|
|
<option value="month">{% trans "This Month" %}</option>
|
|
<option value="year">{% trans "This Year" %}</option>
|
|
</select>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<canvas id="overAllLeave" style="cursor: pointer"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %} {% if perms.candidate.view_candidate or request.user|is_stagemanager %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable"
|
|
id="movable2"
|
|
>
|
|
<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 "Hired Candidates" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<canvas id="hiredCandidate" style="cursor: pointer"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable"
|
|
id="movable3"
|
|
>
|
|
<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 Started Onboarding" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<canvas
|
|
id="onboardCandidate"
|
|
style="cursor: pointer"
|
|
></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %} {% if request.user|is_stagemanager or perms.recruitment.view_recruitment %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable"
|
|
id="movable8"
|
|
>
|
|
<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 "Recruitment Analytics" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<canvas
|
|
id="recruitmentChart1"
|
|
style="cursor: pointer"
|
|
></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %} {% if request.user|is_reportingmanager or perms.attendance.view_attendance %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable"
|
|
id="movable4"
|
|
>
|
|
<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"
|
|
id="attendance_header"
|
|
>
|
|
<div class="oh-card-dashboard__title mb-2">
|
|
{% trans "Attendance Analytics" %}
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<select
|
|
id="type"
|
|
class="oh-select"
|
|
name="type"
|
|
onchange="changeView(this)"
|
|
style="width: 150px; padding: 3px; color: #5e5c5c"
|
|
>
|
|
<option value="day">{% trans "Day" %}</option>
|
|
<option value="weekly">{% trans "Weekly" %}</option>
|
|
<option value="monthly">{% trans "Monthly" %}</option>
|
|
<option value="date_range">{% trans "Date range" %}</option>
|
|
</select>
|
|
<span id="day_input">
|
|
<input
|
|
type="date"
|
|
class="mb-2 float-end pointer oh-select"
|
|
id="attendance_month"
|
|
onchange="changeMonth()"
|
|
style="width: 100px; color: #5e5c5c"
|
|
/>
|
|
</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<canvas id="dailyAnalytic" style="cursor: pointer"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %} {% if request.user|is_reportingmanager or perms.attendance.view_attendance %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable"
|
|
id="pendingHours"
|
|
>
|
|
<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"
|
|
id="pendingHoursHeader"
|
|
>
|
|
<div class="oh-card-dashboard__title mb-2">
|
|
{% trans "Hours Chart" %}
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<input
|
|
type="month"
|
|
class="mb-2 float-end pointer oh-select"
|
|
id="hourAccountMonth"
|
|
onchange="dynamicMonth($(this))"
|
|
style="width: 100px; color: #5e5c5c"
|
|
/>
|
|
</div>
|
|
<div class="oh-card-dashboard__body" style="height:300px">
|
|
<canvas
|
|
id="pendingHoursCanvas"
|
|
style="cursor: pointer"
|
|
></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable"
|
|
id="movable5"
|
|
>
|
|
<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 "Employees Chart" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<canvas id="totalEmployees" style="cursor: pointer"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable"
|
|
id="movable6"
|
|
>
|
|
<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 "Department Chart" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<canvas id="departmentChart" style="cursor: pointer"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable"
|
|
id="movable7"
|
|
>
|
|
<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 "Gender Chart" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<canvas id="genderChart" style="cursor: pointer"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if perms.pms.view_employeeobjective or request.user|is_reportingmanager %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable"
|
|
id="movable9"
|
|
>
|
|
<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 "Objective Status" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<canvas id="objectiveChart" style="cursor: pointer"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %} {% if perms.pms.view_employeekeyresult or request.user|is_reportingmanager %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable"
|
|
id="movable10"
|
|
>
|
|
<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 "Key Result Status" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<canvas id="keyResultChart" style="cursor: pointer"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %} {% if perms.pms.view_feedback or request.user|is_reportingmanager %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable"
|
|
id="movable11"
|
|
>
|
|
<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 "Feedback Status" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-card-dashboard__body">
|
|
<canvas id="feedbackChart" style="cursor: pointer"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if perms.base.change_shiftrequest or request.user|is_reportingmanager %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" id="shiftRequestApprove"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="height:425px"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard__header oh-card-dashboard__header--divider"
|
|
>
|
|
<span class="oh-card-dashboard__title"
|
|
>{% trans "Shift Requests To Approve" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body"
|
|
id="shiftRequestApproveBody"
|
|
hx-get="{% url "dashboard-shift-request" %}"
|
|
hx-trigger="load"
|
|
style="height:80%"
|
|
>
|
|
{% include "request_and_approve/shift_request.html" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if perms.base.change_worktyperequest or request.user|is_reportingmanager %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" id="WorkTypeRequestApprove"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="height:425px"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard__header oh-card-dashboard__header--divider"
|
|
>
|
|
<span class="oh-card-dashboard__title"
|
|
>{% trans "Work Type Requests To Approve" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body"
|
|
id="WorkTypeRequestApproveBody"
|
|
hx-get="{% url "dashboard-work-type-request" %}"
|
|
hx-trigger="load"
|
|
style="height:80%"
|
|
>
|
|
{% include "request_and_approve/work_type_request.html" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if perms.attendance.change_attendance or request.user|is_reportingmanager %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" id="OTApprove"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent"
|
|
hx-get="{% url "dashboard-overtime-approve" %}"
|
|
hx-trigger="load"
|
|
style="height:425px"
|
|
id="OTApproveTarget"
|
|
>
|
|
{% include "request_and_approve/overtime_approve.html" %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if perms.attendance.change_attendance or request.user|is_reportingmanager %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" id="AttendanceValidate"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="height:425px"
|
|
hx-get="{% url "dashboard-attendance-validate" %}"
|
|
hx-trigger="load"
|
|
id="AttendanceValidateTarget"
|
|
>
|
|
{% include "request_and_approve/attendance_validate.html" %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if perms.leave.change_leaverequest or request.user|is_reportingmanager %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" id="LeaveApprove"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="height:425px"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard__header oh-card-dashboard__header--divider"
|
|
>
|
|
<span class="oh-card-dashboard__title"
|
|
>{% trans "Leave Requests To Approve" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body"
|
|
id="LeaveApproveBody"
|
|
hx-get='{% url "leave-request-and-approve" %}'
|
|
hx-trigger="load"
|
|
style="height:80%"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if perms.leave.change_leaveallocationrequest or request.user|is_reportingmanager %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" id="LeaveAllocationApprove"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="height:425px"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard__header oh-card-dashboard__header--divider"
|
|
>
|
|
<span class="oh-card-dashboard__title"
|
|
>{% trans "Leave Allocation Request To Approve" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body"
|
|
id="LeaveAllocationApproveBody"
|
|
hx-get='{% url "leave-allocation-approve" %}'
|
|
hx-trigger="load"
|
|
style="height:80%"
|
|
>
|
|
{% include "request_and_approve/leave_request_approve.html" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" id="feedbackAnswer"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="height:425px"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard__header oh-card-dashboard__header--divider"
|
|
>
|
|
<span class="oh-card-dashboard__title"
|
|
>{% trans "Feedback To Answers" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body"
|
|
id="feedbackAnswerBody"
|
|
hx-get="{% url 'dashboard-feedback-answer' %}"
|
|
hx-trigger="load"
|
|
style="height:80%"
|
|
>
|
|
{% include "request_and_approve/feedback_answer.html" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if perms.asset.change_assetrequest or request.user|is_reportingmanager %}
|
|
<div
|
|
class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable" id="assetRequestApprove"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent" style="height:425px"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard__header oh-card-dashboard__header--divider"
|
|
>
|
|
<span class="oh-card-dashboard__title"
|
|
>{% trans "Asset Requests To Approve" %}</span
|
|
>
|
|
</div>
|
|
<div class="oh-card-dashboard__body"
|
|
id="assetRequestApproveBody"
|
|
hx-get='{% url "dashboard-asset-request-approve" %}'
|
|
hx-trigger="load"
|
|
style="height:80%"
|
|
>
|
|
{% include "request_and_approve/asset_requests_approve.html" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="oh-dashboard__right col-12 col-sm-12 col-md-12 col-lg-3">
|
|
<div class="oh-dashboard__events">
|
|
<div
|
|
class="oh-dashbaord__events-reel w-100"
|
|
id="birthdayContainer"
|
|
></div>
|
|
<ul class="oh-dashboard__events-nav" id="birthdayDots">
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3">
|
|
<div style="display: flex;align-items:center;justify-content:space-between;margin-right:20px">
|
|
<span class="oh-card-dashboard__title">{% trans "Announcements" %}</span>
|
|
{% if perms.base.add_announcement %}
|
|
<span>
|
|
<button
|
|
id="addAnnouncement"
|
|
style="display: inline-block;padding: 0px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 50px;
|
|
height: 28px;"
|
|
class="oh-btn oh-btn--secondary-outline float-end ms-3" hx-get='{% url "create-announcement" %}'
|
|
hx-target="#createannouncementForm" hx-swap="innerHTML" data-toggle="oh-modal-toggle" data-target="#anouncementModal" title='{% trans "Create Announcement." %}'>
|
|
<ion-icon name="add-outline" class="m-0"></ion-icon>
|
|
</button>
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="oh-card-dashboard__body">
|
|
<div class="oh-sticky-table d-flex justify-content-center align-items-center" style="height:400px; border:none;">
|
|
<div class="oh-sticky-table__table oh-table--sortable">
|
|
<div class="oh-sticky-table__tbody">
|
|
|
|
{% if not announcement %}
|
|
<div class="">
|
|
<div class="oh-404" style="position:revert; transform:none">
|
|
<img style="width: 80px;height: 80px; margin-bottom:20px" src="{% static 'images/ui/no-announcement.svg' %}" class="oh-404__image" alt="Page not found. 404."/>
|
|
<h5 class="oh-404__subtitle">{% trans "No Announcements to show." %}</h5>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
{% for i in announcement %}
|
|
<div class="oh-sticky-table__tr" draggable="true">
|
|
{% if i.expire_date|date:"Y-m-d" >= current_date or i.expire_date == None %}
|
|
<div class="announcement_title">
|
|
<a class="oh-profile oh-profile--md" data-toggle="oh-modal-toggle" style="text-decoration:none;"
|
|
data-target="#announcement"
|
|
hx-get="{% url 'announcement-single-view' i.id %}"
|
|
hx-target="#announcementModalBody"
|
|
onclick="closeNew(this)">
|
|
<div class="oh-profile__avatar mr-1">
|
|
<img src="https://ui-avatars.com/api/?name={{i.title}}&background=random" class="oh-profile__image" />
|
|
</div>
|
|
<span class="oh-profile__name oh-text--dark fw-bold">
|
|
{{i.title}}
|
|
</span>
|
|
{% if i.created_on|date:"Y-m-d" == current_date and not i.has_viewed %}
|
|
<span class="oh-profile__info-value ms-2" id="newTab" style="background-color: hsl(8,77%,56%); color:white;
|
|
font-size: 0.7rem; padding: 3px 8px; border-radius: 15px; font-weight: 800; width:auto;"
|
|
>NEW</span>
|
|
{% endif %}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3"
|
|
>
|
|
<div
|
|
class="oh-card-dashboard__header oh-card-dashboard__header--divider"
|
|
>
|
|
<span class="oh-card-dashboard__title">{% trans "On Leave" %}</span>
|
|
</div>
|
|
<div class="oh-card-dashboard__body"
|
|
hx-get="{% url 'employee-leave' %}"
|
|
hx-trigger="load">
|
|
</div>
|
|
</div>
|
|
|
|
{% if perms.leave.view_leaverequest or request.user|is_reportingmanager%}
|
|
<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 "Employee Work Information" %}</span>
|
|
</div>
|
|
|
|
<!-- Search bar -->
|
|
<div class="oh-search-bar mb-3">
|
|
<input type="text" id="employeeSearch" placeholder="Search Employee">
|
|
</div>
|
|
|
|
<div class="oh-table" style="max-height: 425px; overflow-y: auto;">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style="font-weight:bold; font-size:15px; color:black;">{% trans "Employee" %}</th>
|
|
<!-- Add more table headers as needed -->
|
|
<th style="font-weight:bold; font-size:15px; color:black;">{% trans "Progress" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for employee_info in employees_with_pending %}
|
|
<tr>
|
|
<td>
|
|
<a href="{% url 'employee-view-update' employee_info.employee.employee_id.id %}">
|
|
{{ employee_info.employee.employee_id }}</a>
|
|
</td>
|
|
<td style="position: relative;">
|
|
<a href="{% url 'employee-view-update' employee_info.employee.employee_id.id %}">
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: {{ employee_info.completed_field_count }}%;"></div>
|
|
</div>
|
|
<div class="progress-text">{{ employee_info.completed_field_count }}% {% trans "Completed" %}</div>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="oh-modal" id="sendMailModal" role="dialog" aria-labelledby="sendMailModal" aria-hidden="true">
|
|
<div class="oh-modal__dialog">
|
|
<div class="oh-modal__dialog-header">
|
|
<span class="oh-modal__dialog-title" id="sendMailModalLabel"><h5>{% trans 'Send Mail' %}</h5></span>
|
|
<button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
|
|
</div>
|
|
<div class="oh-modal__dialog-body" id="mail-content"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="oh-modal"
|
|
id="smallModal"
|
|
role="dialog"
|
|
aria-labelledby="smallModal"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="oh-modal__dialog oh-modal__dialog--timeoff oh-timeoff-modal">
|
|
<div class="oh-modal__dialog-header">
|
|
<h2
|
|
class="oh-modal__dialog-title"
|
|
id=""
|
|
>
|
|
{% trans "Details" %}
|
|
</h2>
|
|
<button class="oh-modal__close" aria-label="Close">
|
|
<ion-icon name="close-outline"></ion-icon>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="oh-modal__dialog-body oh-modal__dialog-relative oh-timeoff-modal__body"
|
|
id="smallModalTarget"
|
|
></div>
|
|
{% comment %} <div id="smallModalBody">
|
|
|
|
</div> {% endcomment %}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="oh-modal"
|
|
id="bigModal"
|
|
role="dialog"
|
|
aria-labelledby="bigModal"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="oh-modal__dialog">
|
|
<div class="oh-modal__dialog-header">
|
|
<h2
|
|
class="oh-modal__dialog-title"
|
|
id=""
|
|
>
|
|
{% trans "Details" %}
|
|
</h2>
|
|
<button class="oh-modal__close" aria-label="Close">
|
|
<ion-icon name="close-outline"></ion-icon>
|
|
</button>
|
|
</div>
|
|
<div
|
|
class="oh-modal__dialog-body oh-modal__dialog-relative"
|
|
id="bigModalTarget"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div
|
|
class="oh-modal"
|
|
id="editModal"
|
|
role="dialog"
|
|
aria-labelledby="editModal"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="oh-modal__dialog">
|
|
<div class="oh-modal__dialog-header">
|
|
<h2 class="oh-modal__dialog-title" id="editModalLabel">
|
|
{% trans "Add Asset Report" %}
|
|
</h2>
|
|
<button
|
|
type="button"
|
|
class="oh-modal_close--custom"
|
|
onclick="$('#editModal').removeClass('oh-modal--show');"
|
|
>
|
|
<ion-icon
|
|
name="close-outline"
|
|
role="img"
|
|
aria-label="close outline"
|
|
></ion-icon>
|
|
</button>
|
|
</div>
|
|
<div class="oh-modal__dialog-body" id="editModalForm"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include "quick_access.html" %}
|
|
{% include "announcement_single_view.html" %}
|
|
|
|
|
|
</main>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script src="{% static 'dashboard/getBirthday.js' %}"></script>
|
|
<script src="{% static 'dashboard/onLeave.js' %}"></script>
|
|
<script src="{% static 'dashboard/employeeChart.js' %}"></script>
|
|
{% if perms.recruitment.view_recruitment or request.user|is_stagemanager %}
|
|
<script src="{% static 'dashboard/leaveChart.js' %}"></script>
|
|
<script src="{% static 'dashboard/recruitmentChart.js' %}"></script>
|
|
{% endif %} {% if perms.employee.view_employee or request.user|is_reportingmanager %}
|
|
{% endif %} {% if perms.employee.view_attendance or request.user|is_reportingmanager %}
|
|
<script src="{% static 'dashboard/attendanceChart.js' %}"></script>
|
|
<!-- onbaording dashboard -->
|
|
<script src="{% static 'dashboard/onboardChart.js' %}"></script>
|
|
|
|
<!-- PMS chart -->
|
|
<script src="{% static 'src/dashboard/pmsChart.js' %}"></script>
|
|
{% endif %}
|
|
|
|
<!-- leave dashboard -->
|
|
<script>
|
|
function setDifference(setA, setB) {
|
|
if (setB.length > setA.length) {
|
|
temp = setA
|
|
setA = setB
|
|
setB = temp
|
|
}
|
|
return [...setA.filter(element => !setB.includes(element))];
|
|
}
|
|
$(document).ready(function () {
|
|
if (localStorage.getItem("tileOrder")) {
|
|
var tileOrder = []
|
|
$.each(
|
|
$(".oh-card-dashboard--moveable"),
|
|
function (indexInArray, valueOfElement) {
|
|
tileOrder.push($(valueOfElement).attr("id"));
|
|
}
|
|
);
|
|
var storedIds = JSON.parse(localStorage.getItem("tileOrder"))
|
|
var existingElements = $(".oh-card-dashboard--moveable[id]")
|
|
var existingElementsIds = [];
|
|
$.each(existingElements, function (indexInArray, valueOfElement) {
|
|
existingElementsIds.push($(this).attr("id"))
|
|
});
|
|
var newOrderIds = [...storedIds ,...setDifference(storedIds,existingElementsIds)]
|
|
if (storedIds.length != existingElementsIds.length) {
|
|
localStorage.setItem("tileOrder",JSON.stringify(newOrderIds))
|
|
}
|
|
|
|
}else{
|
|
localStorage.setItem("tileOrder",JSON.stringify(
|
|
[
|
|
"notInYetId","LeaveApprove","shiftRequestApprove","WorkTypeRequestApprove","AttendanceValidate","OTApprove",
|
|
"LeaveAllocationApprove","feedbackAnswer","assetRequestApprove","movable8","pendingHours","notoutYetdd",
|
|
"movable2","movable3","movable4","movable1","movable5","movable6","movable7","movable9","movable10","movable11"
|
|
]
|
|
))
|
|
}
|
|
// localStorage.setItem("tileOrder", JSON.stringify(tileOrder));
|
|
|
|
function orderDashboardTile() {
|
|
var orderIds = JSON.parse(localStorage.getItem("tileOrder"));
|
|
const parentContainer = $("#tileContainer");
|
|
if (orderIds != null) {
|
|
const sortedElements = [];
|
|
|
|
// Loop through the desired order of IDs
|
|
for (const id of orderIds) {
|
|
const element = $("#" + id);
|
|
if (element.length) {
|
|
sortedElements.push(element);
|
|
}
|
|
}
|
|
|
|
// Clear the parent container
|
|
parentContainer.empty();
|
|
|
|
// Append the sorted elements to the parent container
|
|
for (const element of sortedElements) {
|
|
parentContainer.append(element);
|
|
}
|
|
}
|
|
}
|
|
orderDashboardTile();
|
|
$(".oh-card-dashboard--moveable").mouseup(function () {
|
|
var tileOrder = [];
|
|
setTimeout((e) => {
|
|
$.each(
|
|
$(".oh-card-dashboard--moveable"),
|
|
function (indexInArray, valueOfElement) {
|
|
tileOrder.push($(valueOfElement).attr("id"));
|
|
}
|
|
);
|
|
localStorage.setItem("tileOrder", JSON.stringify(tileOrder));
|
|
}, 10);
|
|
});
|
|
});
|
|
|
|
function closeNew(anchorElement){
|
|
$(anchorElement).parent().find('#newTab').hide();
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
// Add an input event listener to the search bar
|
|
$("#employeeSearch").on("input", function() {
|
|
// Get the value entered in the search bar
|
|
var searchValue = $(this).val().toLowerCase();
|
|
|
|
// Iterate through each table row and hide/show based on the search value
|
|
$("table tbody tr").each(function() {
|
|
var employeeId = $(this).find("td:first-child").text().toLowerCase();
|
|
|
|
// Toggle the visibility of the row based on whether it contains the search value
|
|
$(this).toggle(employeeId.includes(searchValue));
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<script src="{% static 'build/js/dashboardDriver.js' %}"></script>
|
|
|
|
{% if not request.user.driverviewed_set.first or "dashboard" not in request.user.driverviewed_set.first.user_viewed %}
|
|
<script>
|
|
runDriver()
|
|
</script>
|
|
{% endif %} |