Files
ihrm/templates/dashboard.html
Horilla 2fee7c18bb [IMP] Remove inter module dependency (#274)
This commit introduces significant changes to the architecture of the Horilla HRMS system by decoupling interdependent modules. The following modifications were made:

1. **Module Independence**: Each module has been refactored to eliminate reliance on other modules, promoting a more modular and maintainable codebase.
2. **Refactored Imports and Dependencies**: Adjusted import statements and dependency injections to support independent module operation.
3. **Compatibility and Functionality**: Ensured that all modules are compatible with existing systems and maintain their intended functionality both independently and when integrated with other modules.

These changes enhance the modularity, maintainability, and scalability of the Horilla HRMS, allowing developers to work on individual modules without affecting the entire system. Future development and deployment will be more efficient and less prone to issues arising from tightly coupled code.

**NOTE**
For existing Horilla users, if you face any issues during the migrations, please run the following command and try again the migrations.

- `python3 manage.py makemigrations`
- `python3 manage.py migrate base`
- `python3 manage.py migrate`





* [IMP] ASSET: Asset module dependency removal from other Horilla apps

* [IMP] ATTENDANCE: Attendance module dependency removal from other Horilla apps

* [IMP] BASE: Base module dependency removal from other Horilla apps

* [IMP] EMPLOYEE: Employee module dependency removal from other Horilla apps

* [IMP] HELPDESK: Helpdesk module dependency removal from other Horilla apps

* [IMP] HORILLA AUDIT: Horilla Audit module dependency removal from other Horilla apps

* [IMP] HORILLA CRUMBS: Horilla Crumbs module dependency removal from other Horilla apps

* [IMP] HORILLA AUTOMATIONS: Horilla Automations module dependency removal from other Horilla apps

* [IMP] HORILLA VIEWS: Horilla Views module dependency removal from other Horilla apps

* [IMP] LEAVE: Leave module dependency removal from other Horilla apps

* [IMP] OFFBOARDING: Offboarding module dependency removal from other Horilla apps

* [IMP] ONBOARDING: Onboarding module dependency removal from other Horilla apps

* [IMP] PMS: PMS module dependency removal from other Horilla apps

* [IMP] PAYROLL: Payroll module dependency removal from other Horilla apps

* [IMP] RECRUITMENT: Recruitment module dependency removal from other Horilla apps

* [IMP] HORILLA: Dependency removal updates

* [IMP] TEMPLATES: Dependency removal updates

* [IMP] STATIC: Dependency removal updates

* [IMP] HORILLA DOCUMENTS: Horilla Documents module dependency removal from other Horilla apps

* [ADD] HORILLA: methods.py

* [UPDT] HORILLA: Settings.py

* [FIX] EMPLOYEE: About tab issue

* Update horilla_settings.py

* Remove dummy db init password
2024-08-05 14:22:44 +05:30

874 lines
54 KiB
HTML
Executable File

{% load static basefilters horillafilters employee_filter 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 %}
{% if "recruitment"|app_installed %}
<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 'candidate-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>
{% endif %}
<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 "attendance"|app_installed %}
{% if not 'offline_employees' in charts %}
{% if perms.employee.view_employee or request.user|is_reportingmanager %}
<div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
id="notInYetId" hx-get="{% url 'not-in-yet' %}" hx-trigger="load">
{% include "dashboard/not_in_yet.html" %}
</div>
{% endif %}
{% endif %}
{% if not 'online_employees' in charts %}
{% if perms.employee.view_employee or request.user|is_reportingmanager %}
<div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
id="notoutYetdd" hx-get="{% url 'not-out-yet' %}" hx-trigger="load">
{% include "dashboard/not_out_yet.html" %}
</div>
{% endif %}
{% endif %}
{% endif %}
{% if "leave"|app_installed and not 'overall_leave_chart' in charts %}
{% if perms.leave.view_leaverequest %}
<div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
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>
<span class="float-end chart_close_button ms-3" role="button"
data-chart="overall_leave_chart"
hx-post="{% url 'employee-charts' %}?chart_id=overall_leave_chart"
hx-target="#movable1" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</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" height='300' width="350"></canvas>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% if "recruitment"|app_installed and perms.recruitment.view_candidate or request.user|is_stagemanager %}
{% if not 'hired_candidates' in charts %}
<div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
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>
<span class="float-end chart_close_button " role="button"
data-chart="hired_candidates"
hx-post="{% url 'employee-charts' %}?chart_id=hired_candidates"
hx-target="#movable2" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="hiredCandidate" style="cursor: pointer"></canvas>
</div>
</div>
</div>
{% endif %}
{% if "onboarding"|app_installed and not 'onboarding_candidates' in charts %}
<div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
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>
<span class="float-end chart_close_button " role="button"
data-chart="onboarding_candidates"
hx-post="{% url 'employee-charts' %}?chart_id=onboarding_candidates"
hx-target="#movable3" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="onboardCandidate" style="cursor: pointer"></canvas>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% if "recruitment"|app_installed and not 'recruitment_analytics' in charts %}
{% 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 dashboardChart"
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>
<span class="float-end chart_close_button " role="button"
data-chart="recruitment_analytics"
hx-post="{% url 'employee-charts' %}?chart_id=recruitment_analytics"
hx-target="#movable8" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="recruitmentChart1" style="cursor: pointer"></canvas>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% if "attendance"|app_installed and not 'attendance_analytic' in charts %}
{% 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 dashboardChart"
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" %}
<span class="float-end chart_close_button " role="button"
data-chart="attendance_analytic"
hx-post="{% url 'employee-charts' %}?chart_id=attendance_analytic"
hx-target="#movable4" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</span>
</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>
<div class="oh-card-dashboard__body">
<canvas id="dailyAnalytic" style="cursor: pointer"></canvas>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% if "attendance"|app_installed and not 'hours_chart' in charts %}
{% 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 dashboardChart"
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" %}
<span class="float-end chart_close_button " role="button"
data-chart="hours_chart"
hx-post="{% url 'employee-charts' %}?chart_id=hours_chart"
hx-target="#pendingHours" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</span>
</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 %}
{% endif %}
{% if not 'employees_chart' in charts %}
<div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
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>
<span class="float-end chart_close_button " role="button"
data-chart="employees_chart"
hx-post="{% url 'employee-charts' %}?chart_id=employees_chart"
hx-target="#movable5" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="totalEmployees" style="cursor: pointer"></canvas>
</div>
</div>
</div>
{% endif %}
{% if not 'department_chart' in charts %}
<div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
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>
<span class="float-end chart_close_button " role="button"
data-chart="department_chart"
hx-post="{% url 'employee-charts' %}?chart_id=department_chart"
hx-target="#movable6" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="departmentChart" style="cursor: pointer"></canvas>
</div>
</div>
</div>
{% endif %}
{% if not 'gender_chart' in charts %}
<div class="col-12 col-sm-12 col-md-12 col-lg-4 oh-card-dashboard--moveable dashboardChart"
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>
<span class="float-end chart_close_button " role="button" data-chart="gender_chart"
hx-post="{% url 'employee-charts' %}?chart_id=gender_chart"
hx-target="#movable7" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="genderChart" style="cursor: pointer"></canvas>
</div>
</div>
</div>
{% endif %}
{% if "pms"|app_installed and not 'objective_status' in charts %}
{% 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 dashboardChart"
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>
<span class="float-end chart_close_button " role="button"
data-chart="objective_status"
hx-post="{% url 'employee-charts' %}?chart_id=objective_status"
hx-target="#movable9" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="objectiveChart" style="cursor: pointer"></canvas>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% if "pms"|app_installed and not 'key_result_status' in charts %}
{% 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 dashboardChart"
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>
<span class="float-end chart_close_button " role="button"
data-chart="key_result_status"
hx-post="{% url 'employee-charts' %}?chart_id=key_result_status"
hx-target="#movable10" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</span>
</div>
<div class="oh-card-dashboard__body">
<canvas id="keyResultChart" style="cursor: pointer"></canvas>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% if "pms"|app_installed and not 'feedback_status' in charts %}
{% 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 dashboardChart"
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>
<span class="float-end chart_close_button " role="button"
data-chart="feedback_status"
hx-post="{% url 'employee-charts' %}?chart_id=feedback_status"
hx-target="#movable11" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</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 %}
{% endif %}
{% if not 'shift_request_approve' in charts %}
{% 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 dashboardChart"
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>
<span class="float-end chart_close_button " role="button"
data-chart="shift_request_approve"
hx-post="{% url 'employee-charts' %}?chart_id=shift_request_approve"
hx-target="#shiftRequestApprove" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</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 %}
{% endif %}
{% if not 'work_type_request_approve' in charts %}
{% 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 dashboardChart"
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>
<span class="float-end chart_close_button " role="button"
data-chart="work_type_request_approve"
hx-post="{% url 'employee-charts' %}?chart_id=work_type_request_approve"
hx-target="#WorkTypeRequestApprove" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</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 %}
{% endif %}
{% if "attendance"|app_installed and not 'overtime_approve' in charts %}
{% 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 dashboardChart"
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 %}
{% endif %}
{% if "attendance"|app_installed %}
{% if not 'attendance_validate' in charts %}
{% 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 dashboardChart" 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 %}
{% endif %}
{% endif %}
{% if "leave"|app_installed and not 'leave_request_approve' in charts %}
{% 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 dashboardChart"
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>
<span class="float-end chart_close_button " role="button"
data-chart="leave_request_approve"
hx-post="{% url 'employee-charts' %}?chart_id=leave_request_approve"
hx-target="#LeaveApprove" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</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 %}
{% endif %}
{% if "leave"|app_installed and not 'leave_allocation_approve' in charts %}
{% 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 dashboardChart"
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>
<span class="float-end chart_close_button " role="button"
data-chart="leave_allocation_approve"
hx-post="{% url 'employee-charts' %}?chart_id=leave_allocation_approve"
hx-target="#LeaveAllocationApprove" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</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 %}
{% endif %}
{% if "pms"|app_installed and not 'feedback_answer' in charts %}
<div class="col-12 col-sm-12 col-md-12 col-lg-6 oh-card-dashboard--moveable dashboardChart"
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>
<span class="float-end chart_close_button " role="button"
data-chart="feedback_answer"
hx-post="{% url 'employee-charts' %}?chart_id=feedback_answer"
hx-target="#feedbackAnswer" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</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>
{% endif %}
{% if "asset"|app_installed and not 'asset_request_approve' in charts %}
{% 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 dashboardChart"
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>
<span class="float-end chart_close_button " role="button"
data-chart="asset_request_approve"
hx-post="{% url 'employee-charts' %}?chart_id=asset_request_approve"
hx-target="#assetRequestApprove" hx-swap="outerHTML">
<i class="material-icons fw-lighter fs-5">close</i>
</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 %}
{% 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="#objectCreateModalTarget"
hx-swap="innerHTML" data-toggle="oh-modal-toggle" data-target="#objectCreateModal"
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" style="height:400px; border:none;">
<div class="oh-sticky-table__table oh-table--sortable">
<div class="oh-sticky-table__tbody">
{% if not announcement %}
<div style="margin-top:30%">
<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">
<div class="announcement_title">
<a class="oh-profile oh-profile--md" data-toggle="oh-modal-toggle"
style="text-decoration:none;" data-target="#objectDetailsModal"
hx-get="{% url 'announcement-single-view' i.id %}"
hx-target="#objectDetailsModalTarget" 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_at|date:"Y-m-d" == current_date and request.user not in i.viewed_by %}
<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;">{% trans "NEW" %}
</span>
{% endif %}
</a>
</div>
</div>
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% if "leave"|app_installed %}
<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>
{% endif %}
<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" hx-get="{% url 'emp-workinfo-complete' %}" hx-target="#pending"
hx-trigger="keyup changed dealy:0.3s" id="employeeSearch" name="search"
placeholder="Search Employee">
</div>
{% if request.user.employee_get.employee_user_id.is_superuser or request.user|is_reportingmanager %}
<div class="oh-card-dashboard__body" hx-get="{% url 'emp-workinfo-complete' %}" hx-trigger="load">
</div>
{% endif %}
</div>
</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="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 "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/employeeChart.js' %}"></script>
{% if "leave"|app_installed %}
<script src="{% static 'dashboard/onLeave.js' %}"></script>
{% endif %}
{% if "leave"|app_installed %}
<script src="{% static 'dashboard/leaveChart.js' %}"></script>
{% endif %}
{% if "recruitment"|app_installed %}
{% if perms.recruitment.view_recruitment or request.user|is_stagemanager %}
<script src="{% static 'dashboard/recruitmentChart.js' %}"></script>
{% endif %}
{% endif %}
{% if "attendance"|app_installed %}
{% if perms.attendance.view_attendance or request.user|is_reportingmanager %}
<script src="{% static 'dashboard/attendanceChart.js' %}"></script>
{% endif %}
{% endif %}
{% if "onboarding"|app_installed %}
<!-- onboarding dashboard -->
<script src="{% static 'dashboard/onboardChart.js' %}"></script>
{% endif %}
{% if "pms"|app_installed %}
<!-- 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
if (sortedElements.length) {
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();
}
</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 %}