nestict/ihrm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[UPDT] ATTENDANCE: Add next and previous data-action in individual view

Browse Source
This commit is contained in:
Horilla
2024-09-12 14:10:53 +05:30
parent 8a1a80843e
commit da250673d7
4 changed files with 398 additions and 581 deletions
Download Patch File Download Diff File Expand all files Collapse all files

255
attendance/templates/attendance/attendance/attendance_request_one.html
View File

@@ -1,54 +1,52 @@
{% load i18n %} {% load basefilters %}
<div class="oh-modal__dialog-header">
<h2
class="oh-modal__dialog-title m-0"
id="objectDetailsModalLabel"
>
{% trans "Details" %}
<h2 class="oh-modal__dialog-title m-0" id="objectDetailsModalLabel">
{% 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" >
<div class="oh-modal__dialog-body oh-modal__dialog-relative">
<div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
<button hx-get="{% url "user-request-one-view" previous_instance %}?instances_ids={{instance_ids_json}}&validate={{request.GET.validate}}&ot={{request.GET.ot}}&all_attendance={{request.GET.all_attendance}}&my_attendance={{request.GET.my_attendance}}&dashboard={{dashboard}}" hx-target="#objectDetailsModalW25Target" class="oh-modal__diaglog-nav oh-modal__nav-prev">
<button hx-get="{% url 'user-request-one-view' previous_instance %}?instances_ids={{instance_ids_json}}&validate={{request.GET.validate}}&ot={{request.GET.ot}}&all_attendance={{request.GET.all_attendance}}&my_attendance={{request.GET.my_attendance}}&dashboard={{dashboard}}"
hx-target="#objectDetailsModalW25Target" class="oh-modal__diaglog-nav oh-modal__nav-prev"
data-action="previous">
<ion-icon name="chevron-back-outline" class="md hydrated" role="img"
aria-label="chevron back outline"></ion-icon>
aria-label="chevron back outline"></ion-icon>
</button>
<button hx-get="{% url "user-request-one-view" next_instance %}?instances_ids={{instance_ids_json}}&validate={{request.GET.validate}}&ot={{request.GET.ot}}&all_attendance={{request.GET.all_attendance}}&my_attendance={{request.GET.my_attendance}}&dashboard={{dashboard}}" hx-target="#objectDetailsModalW25Target" class="oh-modal__diaglog-nav oh-modal__nav-next">
<button hx-get="{% url 'user-request-one-view' next_instance %}?instances_ids={{instance_ids_json}}&validate={{request.GET.validate}}&ot={{request.GET.ot}}&all_attendance={{request.GET.all_attendance}}&my_attendance={{request.GET.my_attendance}}&dashboard={{dashboard}}"
hx-target="#objectDetailsModalW25Target" class="oh-modal__diaglog-nav oh-modal__nav-next" data-action="next">
<ion-icon name="chevron-forward-outline" class="md hydrated" role="img"
aria-label="chevron forward outline"></ion-icon>
aria-label="chevron forward outline"></ion-icon>
</button>
</div>
<a class="oh-timeoff-modal__profile-content" style="text-decoration:none;"
href ="{% url 'employee-view-individual' attendance_request.employee_id.id %}">
<div class="oh-profile mb-2">
<div class="oh-profile__avatar">
<img src="{{attendance_request.employee_id.get_avatar}}"
class="oh-profile__image me-2" alt="Mary Magdalene" />
</div>
<div class="oh-timeoff-modal__profile-info">
<span class="oh-timeoff-modal__user fw-bold">{{attendance_request.employee_id}}</span>
<span
class="oh-timeoff-modal__user m-0"
style="font-size: 18px; color: #4d4a4a"
>
{{attendance_request.employee_id.employee_work_info.department_id}} /
{{attendance_request.employee_id.employee_work_info.job_position_id}}</span
>
<a class="oh-timeoff-modal__profile-content" style="text-decoration:none;"
href="{% url 'employee-view-individual' attendance_request.employee_id.id %}">
<div class="oh-profile mb-2">
<div class="oh-profile__avatar">
<img src="{{attendance_request.employee_id.get_avatar}}" class="oh-profile__image me-2"
alt="Mary Magdalene" />
</div>
<div class="oh-timeoff-modal__profile-info">
<span class="oh-timeoff-modal__user fw-bold">{{attendance_request.employee_id}}</span>
<span class="oh-timeoff-modal__user m-0" style="font-size: 18px; color: #4d4a4a">
{{attendance_request.employee_id.employee_work_info.department_id}} / {{attendance_request.employee_id.employee_work_info.job_position_id}}
</span>
</div>
</div>
</div>
</a>
<div class="oh-modal__dialog-header pt-0">
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Date" %}</span>
<span class="oh-timeoff-modal__stat-count dateformat_changer">{{attendance_request.attendance_date}}</span>
<span
class="oh-timeoff-modal__stat-count dateformat_changer">{{attendance_request.attendance_date}}</span>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
<span class="oh-timeoff-modal__stat-title">{% trans "Day" %}</span>
@@ -59,22 +57,26 @@
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Check In" %}</span>
<span class="oh-timeoff-modal__stat-count timeformat_changer">{{attendance_request.attendance_clock_in}}</span>
<span
class="oh-timeoff-modal__stat-count timeformat_changer">{{attendance_request.attendance_clock_in}}</span>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
<span class="oh-timeoff-modal__stat-title">{% trans "Check In Date" %}</span>
<span class="oh-timeoff-modal__stat-count dateformat_changer">{{attendance_request.attendance_clock_in_date}}</span>
<span
class="oh-timeoff-modal__stat-count dateformat_changer">{{attendance_request.attendance_clock_in_date}}</span>
</div>
</div>
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Check Out" %}</span>
<span class="oh-timeoff-modal__stat-count timeformat_changer">{{attendance_request.attendance_clock_out}}</span>
<span
class="oh-timeoff-modal__stat-count timeformat_changer">{{attendance_request.attendance_clock_out}}</span>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px;">
<span class="oh-timeoff-modal__stat-title">{% trans "Check Out Date" %}</span>
<span class="oh-timeoff-modal__stat-count dateformat_changer">{{attendance_request.attendance_clock_out_date}}</span>
<span
class="oh-timeoff-modal__stat-count dateformat_changer">{{attendance_request.attendance_clock_out_date}}</span>
</div>
</div>
@@ -113,129 +115,94 @@
{% if request.GET.my_attendance %}
{% elif request.GET.all_attendance %}
<a
data-toggle="oh-modal-toggle"
data-target="#updateAttendanceRequest"
<a data-toggle="oh-modal-toggle" data-target="#updateAttendanceRequest"
hx-get="{% url 'attendance-change' attendance_request.id %}?all_attendance=true"
hx-target="#updateAttendanceRequestModalBody"
class="oh-btn oh-btn--info w-100"
>
<ion-icon name="lock-open-outline" role="img"
class="md hydrated" aria-label="create outline">
hx-target="#updateAttendanceRequestModalBody" class="oh-btn oh-btn--info w-100">
<ion-icon name="lock-open-outline" role="img" class="md hydrated" aria-label="create outline">
</ion-icon>{% trans "Edit" %}
</a>
{% elif request.GET.ot %}
<div class="oh-modal__button-container text-center">
{% if perms.attendance.change_attendance and perms.attendance.delete_attendance or request.user|is_reportingmanager%}
<div class="oh-btn-group">
<a
class="oh-btn oh-btn--info"
hx-get="{% url 'attendance-update' attendance_request.id %}?dashboard={{dashboard}}"
hx-target="{% if dashboard == 'true' %}#editModalForm {% else %}#updateAttendanceModalBody{% endif %}" hx-swap='innerHTML'
data-toggle='oh-modal-toggle'
data-target="{% if dashboard == 'true' %}#editModal {% else %}#updateAttendanceModal {% endif %}"
style="width: 50%;"
>
<ion-icon name="create-outline" role="img"
class="md hydrated" aria-label="create outline">
</ion-icon>{% trans "Edit" %}
</a>
{% if attendance_request.attendance_overtime_approve %}
<a href="#" class="oh-btn oh-btn--success disabled w-50">
<ion-icon name="ban-outline"></ion-icon>{% trans "Approve" %}
<div class="oh-modal__button-container text-center">
{% if perms.attendance.change_attendance and perms.attendance.delete_attendance or request.user|is_reportingmanager%}
<div class="oh-btn-group">
<a class="oh-btn oh-btn--info"
hx-get="{% url 'attendance-update' attendance_request.id %}?dashboard={{dashboard}}"
hx-target="{% if dashboard == 'true' %}#editModalForm {% else %}#updateAttendanceModalBody{% endif %}"
hx-swap='innerHTML' data-toggle='oh-modal-toggle'
data-target="{% if dashboard == 'true' %}#editModal {% else %}#updateAttendanceModal {% endif %}"
style="width: 50%;">
<ion-icon name="create-outline" role="img" class="md hydrated" aria-label="create outline">
</ion-icon>{% trans "Edit" %}
</a>
{% if attendance_request.attendance_overtime_approve %}
<a href="#" class="oh-btn oh-btn--success disabled w-50">
<ion-icon name="ban-outline"></ion-icon>{% trans "Approve" %}
</a>
{% else %}
<a href="{% url 'approve-overtime' attendance_request.id %}" class="oh-btn oh-btn--success w-50">
<ion-icon name="checkmark-done-outline"></ion-icon>{% trans "Approve" %}
</a>
{% endif %}
<form action="{% url 'attendance-delete' attendance_request.id %}"
onsubmit="return confirm('{% trans "Are you sure want to delete this attendance?" %}')"
hx-target="#tab_contents" method='post'
style="width: 50%;">
{% csrf_token %}
<button type='submit' class="oh-btn oh-btn--danger w-100"><ion-icon
name="trash-outline"
role="img"
class="md hydrated"
aria-label="create outline"
></ion-icon>{% trans "Delete" %}</button>
</form>
</div>
{% endif %}
</div>
{% elif request.GET.validate %}
<div class="oh-modal__button-container text-center">
{% if perms.attendance.change_attendance and perms.attendance.delete_attendance or request.user|is_reportingmanager %}
<div class="oh-btn-group">
<a
class="oh-btn oh-btn--info"
hx-get="{% url 'attendance-update' attendance_request.id %}"
hx-target="{% if dashboard == 'true' %}#editModalForm {% else %}#updateAttendanceModalBody{% endif %}" hx-swap='innerHTML'
data-toggle='oh-modal-toggle'
data-target="{% if dashboard == 'true' %}#editModal {% else %}#updateAttendanceModal {% endif %}"
style="width: 50%;"
>
<ion-icon name="create-outline" role="img"
class="md hydrated" aria-label="create outline">
</ion-icon>{% trans "Edit" %}
</a>
<a
href = '{% url "validate-this-attendance" attendance_request.id %}'
hx-target='#updateAttendanceBody'
class="oh-btn oh-btn--success w-50"
data-req="/attendance/request-attendance-view/?id={{attendance_request.id}}"
onclick="{% if attendance_request.is_validate_request %} event.preventDefault(); showSweetAlert($(this).data('req')); {% endif %}"
>
<ion-icon name="checkmark-done-outline"></ion-icon>{% trans "Validate" %}
</a>
<form action="{% url 'attendance-delete' attendance_request.id %}"
onsubmit="return confirm('{% trans "Are you sure want to delete this attendance?" %}')"
hx-target="#tab_contents" method='post'
style="width: 50%;">
{% csrf_token %}
<button type='submit' class="oh-btn oh-btn--danger w-100"><ion-icon
name="trash-outline"
role="img"
class="md hydrated"
aria-label="create outline"
></ion-icon>{% trans "Delete" %}</button>
</form>
<a href="{% url 'approve-overtime' attendance_request.id %}" class="oh-btn oh-btn--success w-50">
<ion-icon name="checkmark-done-outline"></ion-icon>{% trans "Approve" %}
</a>
{% endif %}
<form action="{% url 'attendance-delete' attendance_request.id %}"
onsubmit="return confirm('{% trans "Are you sure want to delete this attendance?" %}')"
hx-target="#tab_contents" method='post'
style="width: 50%;">
{% csrf_token %}
<button type='submit' class="oh-btn oh-btn--danger w-100" data-action="delete"><ion-icon name="trash-outline" role="img"
class="md hydrated" aria-label="create outline"></ion-icon>{% trans "Delete" %}</button>
</form>
</div>
{% endif %}
</div>
{% elif request.GET.validate %}
<div class="oh-modal__button-container text-center">
{% if perms.attendance.change_attendance and perms.attendance.delete_attendance or request.user|is_reportingmanager %}
<div class="oh-btn-group">
<a class="oh-btn oh-btn--info" hx-get="{% url 'attendance-update' attendance_request.id %}"
hx-target="{% if dashboard == 'true' %}#editModalForm {% else %}#updateAttendanceModalBody{% endif %}"
hx-swap='innerHTML' data-toggle='oh-modal-toggle'
data-target="{% if dashboard == 'true' %}#editModal {% else %}#updateAttendanceModal {% endif %}"
style="width: 50%;">
<ion-icon name="create-outline" role="img" class="md hydrated" aria-label="create outline">
</ion-icon>{% trans "Edit" %}
</a>
<a href='{% url "validate-this-attendance" attendance_request.id %}' hx-target='#updateAttendanceBody'
class="oh-btn oh-btn--success w-50"
data-req="/attendance/request-attendance-view/?id={{attendance_request.id}}"
onclick="{% if attendance_request.is_validate_request %} event.preventDefault(); showSweetAlert($(this).data('req')); {% endif %}">
<ion-icon name="checkmark-done-outline"></ion-icon>{% trans "Validate" %}
</a>
<form action="{% url 'attendance-delete' attendance_request.id %}"
onsubmit="return confirm('{% trans "Are you sure want to delete this attendance?" %}')"
hx-target="#tab_contents" method='post'
style="width: 50%;">
{% csrf_token %}
<button type='submit' class="oh-btn oh-btn--danger w-100" data-action="delete"><ion-icon name="trash-outline" role="img"
class="md hydrated" aria-label="create outline"></ion-icon>{% trans "Delete" %}</button>
</form>
</div>
{% endif %}
</div>
{% endif %}
</div>
{% else %}
<div class="oh-modal__button-container text-center">
{% if perms.attendance.change_attendance and perms.attendance.delete_attendance or request.user|is_reportingmanager%}
<div class="oh-btn-group">
<a
class="oh-btn oh-btn--info"
hx-get="{% url 'attendance-update' attendance_request.id %}"
hx-target='#updateAttendanceModalBody' hx-swap='innerHTML'
data-toggle='oh-modal-toggle'
data-target='#updateAttendanceModal'
style="width: 50%;"
>
<ion-icon name="create-outline" role="img"
class="md hydrated" aria-label="create outline">
</ion-icon>{% trans "Edit" %}
</a>
<form action="{% url 'attendance-delete' attendance_request.id %}"
onsubmit="return confirm('{% trans "Are you sure want to delete this attendance?" %}')"
hx-target="#tab_contents" method='post'
style="width: 50%;">
{% csrf_token %}
<button type='submit' class="oh-btn oh-btn--danger w-100"><ion-icon
name="trash-outline"
role="img"
class="md hydrated"
aria-label="create outline"
></ion-icon>{% trans "Delete" %}</button>
</form>
</div>
<div class="oh-btn-group">
<a class="oh-btn oh-btn--info" hx-get="{% url 'attendance-update' attendance_request.id %}"
hx-target='#updateAttendanceModalBody' hx-swap='innerHTML' data-toggle='oh-modal-toggle'
data-target='#updateAttendanceModal' style="width: 50%;">
<ion-icon name="create-outline" role="img" class="md hydrated" aria-label="create outline">
</ion-icon>{% trans "Edit" %}
</a>
<form action="{% url 'attendance-delete' attendance_request.id %}"
onsubmit="return confirm('{% trans " Are you sure want to delete this attendance?" %}')"
hx-target="#tab_contents" method='post'
style="width: 50%;">
{% csrf_token %}
<button type='submit' class="oh-btn oh-btn--danger w-100" data-action="delete"><ion-icon name="trash-outline" role="img"
class="md hydrated" aria-label="create outline"></ion-icon>{% trans "Delete" %}</button>
</form>
</div>
{% endif %}
</div>
{% endif %}

333
attendance/templates/attendance/attendance_activity/single_attendance_activity.html
View File

@@ -1,205 +1,132 @@
{% load static %} {% load i18n %} {% load basefilters %} {% if messages %}
<div class="oh-wrapper">
{% for message in messages %}
<div class="oh-alert-container">
<div class="oh-alert oh-alert--animated {{message.tags}}">
{{ message }}
{% load static %} {% load i18n %} {% load basefilters %}
{% if messages %}
<div class="oh-wrapper">
{% for message in messages %}
<div class="oh-alert-container">
<div class="oh-alert oh-alert--animated {{message.tags}}">
{{ message }}
</div>
</div>
{% endfor %}
</div>
<span class="oh-span__class" hx-trigger="load" hx-get="{% url 'attendance-activity-search' %}?{{pd}}"
hx-target="#activity-table"></span>
{% endif %}
{% if activity %}
<div class="oh-modal__dialog-header">
<h2 class="oh-modal__dialog-title m-0" id="addEmployeeModalLabel">
{% 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">
<div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
<button
hx-get="{% url 'attendance-activity-single-view' previous_instance %}?{{pd}}&instances_ids={{instance_ids_json}}"
hx-target="#objectDetailsModalW25Target" class="oh-modal__diaglog-nav oh-modal__nav-prev" data-action="previous">
<ion-icon name="chevron-back-outline" class="md hydrated" role="img"
aria-label="chevron back outline"></ion-icon>
</button>
<button
hx-get="{% url 'attendance-activity-single-view' next_instance %}?{{pd}}&instances_ids={{instance_ids_json}}"
hx-target="#objectDetailsModalW25Target" class="oh-modal__diaglog-nav oh-modal__nav-next" data-action="next">
<ion-icon name="chevron-forward-outline" class="md hydrated" role="img"
aria-label="chevron forward outline"></ion-icon>
</button>
</div>
<a class="oh-timeoff-modal__profile-content" style="text-decoration: none"
href="{% url 'employee-view-individual' activity.employee_id.id %}">
<div class="oh-profile mb-2">
<div class="oh-profile__avatar">
<img src="{{activity.employee_id.get_avatar}}" class="oh-profile__image me-2" alt="Mary Magdalene" />
</div>
<div class="oh-timeoff-modal__profile-info">
<span class="oh-timeoff-modal__user fw-bold">{{activity.employee_id}}</span>
<span class="oh-timeoff-modal__user m-0" style="font-size: 18px; color: #4d4a4a">
{{activity.employee_id.employee_work_info.department_id}} /
{{activity.employee_id.employee_work_info.job_position_id}}</span>
</div>
</div>
</a>
<div class="oh-modal__dialog-header pt-0">
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Attendance Date" %}</span>
<span class="oh-timeoff-modal__stat-count dateformat_changer">{{activity.attendance_date}}</span>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title">{% trans "Day" %}</span>
<span class="oh-timeoff-modal__stat-count">{{activity.shift_day}}</span>
</div>
</div>
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Check In" %}</span>
<span class="oh-timeoff-modal__stat-count timeformat_changer">{{activity.clock_in}}</span>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title">{% trans "Check In Date" %}</span>
<span class="oh-timeoff-modal__stat-count dateformat_changer">{{activity.clock_in_date}}</span>
</div>
</div>
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Check Out" %}</span>
<span class="oh-timeoff-modal__stat-count timeformat_changer">{{activity.clock_out}}</span>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title">{% trans "Check Out Date" %}</span>
<span class="oh-timeoff-modal__stat-count dateformat_changer">{{activity.clock_out_date}}</span>
</div>
</div>
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Shift" %}</span>
<span class="oh-timeoff-modal__stat-count">{{attendance.shift_id}}</span>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title">{% trans "Work Type" %}</span>
<span class="oh-timeoff-modal__stat-count">{{attendance.work_type_id}}</span>
</div>
</div>
{% if perms.attendance.delete_attendanceactivity %}
<div class="oh-modal__button-container text-center w-100">
<div class="oh-btn-group">
{% if perms.attendance.delete_attendancelatecomeearlyout %}
<form hx-confirm="{% trans 'Are you sure want to delete this attendance?' %}"
hx-post="{% url 'attendance-activity-delete' activity.id %}?{{pd}}&instances_ids={{instance_ids_json}}"
hx-target="#objectDetailsModalW25Target" onclick="event.stopPropagation()" class="w-100">
{% csrf_token %}
<button type="submit" class="oh-btn oh-btn--danger w-100" data-action="delete">
<ion-icon name="trash-outline" role="img" class="md hydrated"
aria-label="create outline"></ion-icon>{% trans "Delete" %}
</button>
</form>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
{% else %}
<div class="oh-modal__dialog-header">
<span class="oh-modal__dialog-title" style="margin-left: 30px"></span>
<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">
<img style="margin-left: 33%; width: 150px; height: 150px" src="{% static 'images/ui/present.png' %}"
class="oh-404__image mb-2" alt="Page not found. 404." />
<h5 class="oh-404__subtitle">
{% trans "There are no attendance records to display." %}
</h5>
</div>
</div>
{% endfor %}
</div>
<script>
setTimeout(function () {
$(".oh-span__class").click();
}, 1000);
</script>
<span
class="oh-span__class"
hx-get="{% url 'attendance-activity-search' %}?{{pd}}"
hx-target="#activity-table"
></span>
{% endif %} {% if activity %}
<div class="oh-modal__dialog-header">
<h2 class="oh-modal__dialog-title m-0" id="addEmployeeModalLabel">
{% 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">
<div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
<button
hx-get="{% url 'attendance-activity-single-view' previous_instance %}?{{pd}}&instances_ids={{instance_ids_json}}"
hx-target="#objectDetailsModalW25Target"
class="oh-modal__diaglog-nav oh-modal__nav-prev"
>
<ion-icon
name="chevron-back-outline"
class="md hydrated"
role="img"
aria-label="chevron back outline"
></ion-icon>
</button>
<button
hx-get="{% url 'attendance-activity-single-view' next_instance %}?{{pd}}&instances_ids={{instance_ids_json}}"
hx-target="#objectDetailsModalW25Target"
class="oh-modal__diaglog-nav oh-modal__nav-next"
>
<ion-icon
name="chevron-forward-outline"
class="md hydrated"
role="img"
aria-label="chevron forward outline"
></ion-icon>
</button>
</div>
<a
class="oh-timeoff-modal__profile-content"
style="text-decoration: none"
href="{% url 'employee-view-individual' activity.employee_id.id %}"
>
<div class="oh-profile mb-2">
<div class="oh-profile__avatar">
<img
src="{{activity.employee_id.get_avatar}}"
class="oh-profile__image me-2"
alt="Mary Magdalene"
/>
</div>
<div class="oh-timeoff-modal__profile-info">
<span class="oh-timeoff-modal__user fw-bold"
>{{activity.employee_id}}</span
>
<span
class="oh-timeoff-modal__user m-0"
style="font-size: 18px; color: #4d4a4a"
>
{{activity.employee_id.employee_work_info.department_id}} /
{{activity.employee_id.employee_work_info.job_position_id}}</span
>
</div>
</div>
</a>
<div class="oh-modal__dialog-header pt-0">
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title"
>{% trans "Attendance Date" %}</span
>
<span class="oh-timeoff-modal__stat-count dateformat_changer"
>{{activity.attendance_date}}</span
>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title">{% trans "Day" %}</span>
<span class="oh-timeoff-modal__stat-count">{{activity.shift_day}}</span>
</div>
</div>
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Check In" %}</span>
<span class="oh-timeoff-modal__stat-count timeformat_changer"
>{{activity.clock_in}}</span
>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title"
>{% trans "Check In Date" %}</span
>
<span class="oh-timeoff-modal__stat-count dateformat_changer"
>{{activity.clock_in_date}}</span
>
</div>
</div>
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title"
>{% trans "Check Out" %}</span
>
<span class="oh-timeoff-modal__stat-count timeformat_changer"
>{{activity.clock_out}}</span
>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title"
>{% trans "Check Out Date" %}</span
>
<span class="oh-timeoff-modal__stat-count dateformat_changer"
>{{activity.clock_out_date}}</span
>
</div>
</div>
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Shift" %}</span>
<span class="oh-timeoff-modal__stat-count"
>{{attendance.shift_id}}</span
>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title"
>{% trans "Work Type" %}</span
>
<span class="oh-timeoff-modal__stat-count"
>{{attendance.work_type_id}}</span
>
</div>
</div>
{% if perms.attendance.delete_attendanceactivity %}
<div class="oh-modal__button-container text-center w-100">
<div class="oh-btn-group">
{% if perms.attendance.delete_attendancelatecomeearlyout %}
<form
hx-confirm="{% trans 'Are you sure want to delete this attendance?' %}"
hx-post="{% url 'attendance-activity-delete' activity.id %}?{{pd}}&instances_ids={{instance_ids_json}}"
hx-target="#objectDetailsModalW25Target"
onclick="event.stopPropagation()"
class="w-100"
>
{% csrf_token %}
<button type="submit" class="oh-btn oh-btn--danger w-100">
<ion-icon
name="trash-outline"
role="img"
class="md hydrated"
aria-label="create outline"
></ion-icon
>{% trans "Delete" %}
</button>
</form>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
{% else %}
<div class="oh-modal__dialog-header">
<span class="oh-modal__dialog-title" style="margin-left: 30px"></span>
<button
class="oh-modal__close"
aria-label="Close"
hx-get="{% url 'attendance-activity-search' %}?{{pd}}"
hx-target="#activity-table"
>
<ion-icon name="close-outline"></ion-icon>
</button>
</div>
<div class="oh-modal__dialog-body oh-modal__dialog-relative">
<img
style="margin-left: 33%; width: 150px; height: 150px"
src="{% static 'images/ui/present.png' %}"
class="oh-404__image mb-2"
alt="Page not found. 404."
/>
<h5 class="oh-404__subtitle">
{% trans "There are no attendance records to display." %}
</h5>
</div>
{% endif %}

389
attendance/templates/attendance/late_come_early_out/single_report.html
View File

@@ -1,247 +1,168 @@
{% load static %} {% load i18n %} {% load basefilters %} {% load yes_no %}
{% if messages %}
<div class="oh-wrapper">
{% for message in messages %}
<div class="oh-alert-container">
<div class="oh-alert oh-alert--animated {{message.tags}}">
{{ message }}
<div class="oh-wrapper">
{% for message in messages %}
<div class="oh-alert-container">
<div class="oh-alert oh-alert--animated {{message.tags}}">
{{ message }}
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
<script>
setTimeout(function () {
$(".oh-span__class").click();
}, 1000);
</script>
<span
class="oh-span__class"
hx-get="{% url 'late-come-early-out-search' %}?{{pd}}"
hx-target="#report-container"
></span>
<span class="oh-span__class" hx-trigger="load" hx-get="{% url 'late-come-early-out-search' %}?{{pd}}" hx-target="#report-container"></span>
{% endif %}
{% if late_in_early_out %}
<div class="oh-modal__dialog-header">
<h2
class="oh-modal__dialog-title m-0"
id="objectDetailsModalLabel"
>
{% 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-header">
<h2 class="oh-modal__dialog-title m-0" id="objectDetailsModalLabel">
{% 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">
<div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
<button
hx-get="{% url 'late-in-early-out-single-view' previous_instance %}?{{pd}}&instances_ids={{instance_ids_json}}"
hx-target="#objectDetailsModalTarget"
class="oh-modal__diaglog-nav oh-modal__nav-prev"
>
<ion-icon
name="chevron-back-outline"
class="md hydrated"
role="img"
aria-label="chevron back outline"
></ion-icon>
</button>
<div class="oh-modal__dialog-body oh-modal__dialog-relative">
<div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
<button hx-get="{% url 'late-in-early-out-single-view' previous_instance %}?{{pd}}&instances_ids={{instance_ids_json}}"
hx-target="#objectDetailsModalTarget" class="oh-modal__diaglog-nav oh-modal__nav-prev" data-action="previous">
<ion-icon name="chevron-back-outline" class="md hydrated" role="img"
aria-label="chevron back outline"></ion-icon>
</button>
<button
hx-get="{% url 'late-in-early-out-single-view' next_instance %}?{{pd}}&instances_ids={{instance_ids_json}}"
hx-target="#objectDetailsModalTarget"
class="oh-modal__diaglog-nav oh-modal__nav-next"
>
<ion-icon
name="chevron-forward-outline"
class="md hydrated"
role="img"
aria-label="chevron forward outline"
></ion-icon>
</button>
</div>
<a class="oh-timeoff-modal__profile-content"
style="text-decoration: none"
href="{% url 'employee-view-individual' late_in_early_out.employee_id.id %}"
>
<div class="oh-profile mb-2">
<div class="oh-profile__avatar">
<img
src="{{late_in_early_out.employee_id.get_avatar}}"
class="oh-profile__image me-2"
alt="Mary Magdalene"
/>
</div>
<div class="oh-timeoff-modal__profile-info">
<span class="oh-timeoff-modal__user fw-bold"
>{{late_in_early_out.employee_id}}</span
>
<span
class="oh-timeoff-modal__user m-0"
style="font-size: 18px; color: #4d4a4a"
>
{{late_in_early_out.employee_id.employee_work_info.department_id}} /
{{late_in_early_out.employee_id.employee_work_info.job_position_id}}</span
>
</div>
</div>
</a>
<div class="oh-modal__dialog-header pt-0">
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title"
>{% trans "Type" %}</span
>
<span class="oh-timeoff-modal__stat-count"
>{{late_in_early_out.get_type_display}}</span
>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title">{% trans "Attendance Date" %}</span>
<span class="oh-timeoff-modal__stat-count dateformat_changer">{{late_in_early_out.attendance_id.attendance_date}}</span>
</div>
</div>
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Check In" %}</span>
<span class="oh-timeoff-modal__stat-count timeformat_changer"
>{{late_in_early_out.attendance_id.attendance_clock_in}}</span
>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title"
>{% trans "Check In Date" %}</span
>
<span class="oh-timeoff-modal__stat-count dateformat_changer"
>{{late_in_early_out.attendance_id.attendance_clock_in_date}}</span
>
</div>
</div>
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title"
>{% trans "Check Out" %}</span
>
<span class="oh-timeoff-modal__stat-count timeformat_changer"
>{{late_in_early_out.attendance_id.attendance_clock_out}}</span
>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title"
>{% trans "Check Out Date" %}</span
>
<span class="oh-timeoff-modal__stat-count dateformat_changer"
>{{late_in_early_out.attendance_id.attendance_clock_out_date}}</span
>
</div>
</div>
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Min Hour" %}</span>
<span class="oh-timeoff-modal__stat-count"
>{{late_in_early_out.attendance_id.minimum_hour}}</span
>
<button hx-get="{% url 'late-in-early-out-single-view' next_instance %}?{{pd}}&instances_ids={{instance_ids_json}}"
hx-target="#objectDetailsModalTarget" class="oh-modal__diaglog-nav oh-modal__nav-next" data-action="next">
<ion-icon name="chevron-forward-outline" class="md hydrated" role="img"
aria-label="chevron forward outline"></ion-icon>
</button>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title"
>{% trans "At Work" %}</span
>
<span class="oh-timeoff-modal__stat-count"
>{{late_in_early_out.attendance_id.attendance_worked_hour}}</span
>
</div>
</div>
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Shift" %}</span>
<span class="oh-timeoff-modal__stat-count"
>{{late_in_early_out.attendance_id.shift_id}}</span
>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title"
>{% trans "Work Type" %}</span
>
<span class="oh-timeoff-modal__stat-count"
>{{late_in_early_out.attendance_id.work_type_id}}</span
>
</div>
</div>
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Attendance validated" %}</span>
<span class="oh-timeoff-modal__stat-count"
>{{late_in_early_out.attendance_id.attendance_validated|yes_no}}</span
>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title"
>{% trans "Penalties" %}</span
>
{% if late_in_early_out.get_penalties_count %}
<div class="" data-target="#penaltyViewModal" data-toggle="oh-modal-toggle" hx-get="{% url "view-penalties" %}?late_early_id={{late_in_early_out.id}}" hx-target="#penaltyViewModalBody" align="center" style="background-color: rgba(229, 79, 56, 0.036); border: 2px solid rgb(229, 79, 56); border-radius: 18px; padding: 10px; font-weight: bold; width: 85%;cursor:pointer;">{% trans "Penalties " %} : {{late_in_early_out.get_penalties_count}}</div>
{% else %}
<span class="oh-timeoff-modal__stat-count"
>{% trans "No penalties found." %}</span
>
<a class="oh-timeoff-modal__profile-content" style="text-decoration: none"
href="{% url 'employee-view-individual' late_in_early_out.employee_id.id %}">
<div class="oh-profile mb-2">
<div class="oh-profile__avatar">
<img src="{{late_in_early_out.employee_id.get_avatar}}" class="oh-profile__image me-2"
alt="Mary Magdalene" />
</div>
<div class="oh-timeoff-modal__profile-info">
<span class="oh-timeoff-modal__user fw-bold">{{late_in_early_out.employee_id}}</span>
<span class="oh-timeoff-modal__user m-0" style="font-size: 18px; color: #4d4a4a">
{{late_in_early_out.employee_id.employee_work_info.department_id}} /
{{late_in_early_out.employee_id.employee_work_info.job_position_id}}</span>
</div>
</div>
</a>
<div class="oh-modal__dialog-header pt-0">
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Type" %}</span>
<span class="oh-timeoff-modal__stat-count">{{late_in_early_out.get_type_display}}</span>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title">{% trans "Attendance Date" %}</span>
<span
class="oh-timeoff-modal__stat-count dateformat_changer">{{late_in_early_out.attendance_id.attendance_date}}</span>
</div>
</div>
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Check In" %}</span>
<span
class="oh-timeoff-modal__stat-count timeformat_changer">{{late_in_early_out.attendance_id.attendance_clock_in}}</span>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title">{% trans "Check In Date" %}</span>
<span
class="oh-timeoff-modal__stat-count dateformat_changer">{{late_in_early_out.attendance_id.attendance_clock_in_date}}</span>
</div>
</div>
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Check Out" %}</span>
<span
class="oh-timeoff-modal__stat-count timeformat_changer">{{late_in_early_out.attendance_id.attendance_clock_out}}</span>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title">{% trans "Check Out Date" %}</span>
<span
class="oh-timeoff-modal__stat-count dateformat_changer">{{late_in_early_out.attendance_id.attendance_clock_out_date}}</span>
</div>
</div>
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Min Hour" %}</span>
<span class="oh-timeoff-modal__stat-count">{{late_in_early_out.attendance_id.minimum_hour}}</span>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title">{% trans "At Work" %}</span>
<span
class="oh-timeoff-modal__stat-count">{{late_in_early_out.attendance_id.attendance_worked_hour}}</span>
</div>
</div>
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Shift" %}</span>
<span class="oh-timeoff-modal__stat-count">{{late_in_early_out.attendance_id.shift_id}}</span>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title">{% trans "Work Type" %}</span>
<span class="oh-timeoff-modal__stat-count">{{late_in_early_out.attendance_id.work_type_id}}</span>
</div>
</div>
<div class="oh-timeoff-modal__stats-container mt-3 mb-3">
<div class="oh-timeoff-modal__stat">
<span class="oh-timeoff-modal__stat-title">{% trans "Attendance validated" %}</span>
<span
class="oh-timeoff-modal__stat-count">{{late_in_early_out.attendance_id.attendance_validated|yes_no}}</span>
</div>
<div class="oh-timeoff-modal__stat" style="margin-left: 20px">
<span class="oh-timeoff-modal__stat-title">{% trans "Penalties" %}</span>
{% if late_in_early_out.get_penalties_count %}
<div class="" data-target="#penaltyViewModal" data-toggle="oh-modal-toggle" hx-get="{% url "
view-penalties" %}?late_early_id={{late_in_early_out.id}}" hx-target="#penaltyViewModalBody"
align="center"
style="background-color: rgba(229, 79, 56, 0.036); border: 2px solid rgb(229, 79, 56); border-radius: 18px; padding: 10px; font-weight: bold; width: 85%;cursor:pointer;">
{% trans "Penalties " %} : {{late_in_early_out.get_penalties_count}}</div>
{% else %}
<span class="oh-timeoff-modal__stat-count">{% trans "No penalties found." %}</span>
{% endif %}
</div>
</div>
{% if request.user|is_reportingmanager or perms.attendance.change_penaltyaccounts or perms.attendance.delete_attendancelatecomeearlyout %}
<div class="oh-modal__button-container text-center">
<div class="oh-btn-group">
{% if request.user|is_reportingmanager or perms.attendance.change_penaltyaccounts %}
<a class="oh-btn oh-btn--warning" data-toggle="oh-modal-toggle" data-target="#penaltyModal"
hx-target="#penaltyModalBody" hx-get="{% url "cut-penalty" late_in_early_out.id %}?{{pd}}&instances_ids={{instance_ids_json}}" style="width: 50%;">
<ion-icon name="information-circle-outline" role="img" class="md hydrated"
aria-label="information circle outline">
</ion-icon>{% trans "Penalty" %}
</a>
{% endif %}
{% if perms.attendance.delete_attendancelatecomeearlyout %}
<form hx-confirm="{% trans 'Are you sure want to delete this attendance?' %}"
hx-post="{% url 'late-come-early-out-delete' late_in_early_out.id %}?{{pd}}&instances_ids={{instance_ids_json}}"
hx-target="#objectDetailsModalTarget" onclick="event.stopPropagation()" class="w-50">
{% csrf_token %}
<button type='submit' class="oh-btn oh-btn--danger w-100" data-action="delete"><ion-icon name="trash-outline" role="img"
class="md hydrated" aria-label="create outline"></ion-icon>{% trans "Delete" %}</button>
</form>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
{% if request.user|is_reportingmanager or perms.attendance.change_penaltyaccounts or perms.attendance.delete_attendancelatecomeearlyout %}
<div class="oh-modal__button-container text-center">
<div class="oh-btn-group">
{% if request.user|is_reportingmanager or perms.attendance.change_penaltyaccounts %}
<a
class="oh-btn oh-btn--warning"
data-toggle="oh-modal-toggle"
data-target="#penaltyModal"
hx-target="#penaltyModalBody"
hx-get="{% url "cut-penalty" late_in_early_out.id %}?{{pd}}&instances_ids={{instance_ids_json}}"
style="width: 50%;"
>
<ion-icon name="information-circle-outline" role="img"
class="md hydrated" aria-label="information circle outline">
</ion-icon>{% trans "Penalty" %}
</a>
{% endif %}
{% if perms.attendance.delete_attendancelatecomeearlyout %}
<form hx-confirm="{% trans 'Are you sure want to delete this attendance?' %}"
hx-post="{% url 'late-come-early-out-delete' late_in_early_out.id %}?{{pd}}&instances_ids={{instance_ids_json}}"
hx-target="#objectDetailsModalTarget"
onclick="event.stopPropagation()"
class="w-50"
>
{% csrf_token %}
<button type='submit' class="oh-btn oh-btn--danger w-100"><ion-icon
name="trash-outline"
role="img"
class="md hydrated"
aria-label="create outline"
></ion-icon>{% trans "Delete" %}</button>
</form>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
{% else %}
<div class="oh-modal__dialog-header">
<span class="oh-modal__dialog-title" style="margin-left: 30px"></span>
<button class="oh-modal__close" aria-label="Close" hx-get="{% url 'late-come-early-out-search' %}?{{pd}}" hx-swap="innerHTML" hx-target="#report-container">
<ion-icon name="close-outline"></ion-icon>
</button>
</div>
<div class="oh-modal__dialog-body oh-modal__dialog-relative">
<img
style="margin-left: 33%; width: 150px; height: 150px"
src="{% static 'images/ui/employee_shift.png' %}"
class="oh-404__image mb-2"
alt="Page not found. 404."
/>
<h5 class="oh-404__subtitle">
{% trans "There are no attendance records to display." %}
</h5>
</div>
<div class="oh-modal__dialog-header">
<span class="oh-modal__dialog-title" style="margin-left: 30px"></span>
<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">
<img style="margin-left: 33%; width: 150px; height: 150px" src="{% static 'images/ui/employee_shift.png' %}"
class="oh-404__image mb-2" alt="Page not found. 404." />
<h5 class="oh-404__subtitle">
{% trans "There are no attendance records to display." %}
</h5>
</div>
{% endif %}

2
attendance/templates/requests/attendance/individual_view.html
View File

@@ -4,6 +4,7 @@
hx-get="{% url 'validate-attendance-request' previous %}?requests_ids={{requests_ids}}"
hx-target="#validateAttendanceRequestModalBody"
class="oh-modal__diaglog-nav oh-modal__nav-prev"
data-action="previous"
>
<ion-icon
name="chevron-back-outline"
@@ -17,6 +18,7 @@
hx-get="{% url 'validate-attendance-request' next %}?requests_ids={{requests_ids}}"
hx-target="#validateAttendanceRequestModalBody"
class="oh-modal__diaglog-nav oh-modal__nav-next"
data-action="next"
>
<ion-icon
name="chevron-forward-outline"