From da250673d7cf0ac9886d3ffa8cefca84ef47e559 Mon Sep 17 00:00:00 2001
From: Horilla <teamhorilla@gmail.com>
Date: Thu, 12 Sep 2024 14:10:53 +0530
Subject: [PATCH] [UPDT] ATTENDANCE: Add next and previous data-action in
 individual view

---
 .../attendance/attendance_request_one.html    | 255 +++++-------
 .../single_attendance_activity.html           | 333 ++++++---------
 .../late_come_early_out/single_report.html    | 389 +++++++-----------
 .../requests/attendance/individual_view.html  |   2 +
 4 files changed, 398 insertions(+), 581 deletions(-)

diff --git a/attendance/templates/attendance/attendance/attendance_request_one.html b/attendance/templates/attendance/attendance/attendance_request_one.html
index fbbcea950..ba82663f7 100644
--- a/attendance/templates/attendance/attendance/attendance_request_one.html
+++ b/attendance/templates/attendance/attendance/attendance_request_one.html
@@ -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 %}
diff --git a/attendance/templates/attendance/attendance_activity/single_attendance_activity.html b/attendance/templates/attendance/attendance_activity/single_attendance_activity.html
index cc5fdc86b..33a5bc638 100644
--- a/attendance/templates/attendance/attendance_activity/single_attendance_activity.html
+++ b/attendance/templates/attendance/attendance_activity/single_attendance_activity.html
@@ -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 %}
diff --git a/attendance/templates/attendance/late_come_early_out/single_report.html b/attendance/templates/attendance/late_come_early_out/single_report.html
index 402470fd2..bdbd26c79 100644
--- a/attendance/templates/attendance/late_come_early_out/single_report.html
+++ b/attendance/templates/attendance/late_come_early_out/single_report.html
@@ -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 %}
diff --git a/attendance/templates/requests/attendance/individual_view.html b/attendance/templates/requests/attendance/individual_view.html
index 3ab23a512..9e03eb610 100644
--- a/attendance/templates/requests/attendance/individual_view.html
+++ b/attendance/templates/requests/attendance/individual_view.html
@@ -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"