From a40fae1fee211e4ceedcfe62d43361f0c483e575 Mon Sep 17 00:00:00 2001
From: Horilla <teamhorilla@gmail.com>
Date: Wed, 6 Mar 2024 20:50:03 +0530
Subject: [PATCH] [UPDT] OFFBOARDING: Changed modals to objectDetailsModal

---
 .../templates/offboarding/employee/form.html  |  14 +-
 .../templates/offboarding/pipeline/form.html  |  14 +-
 .../offboarding/pipeline/individual_view.html | 178 ++++++++++--------
 .../templates/offboarding/pipeline/nav.html   |   2 +-
 .../offboarding/pipeline/offboardings.html    |  23 +--
 .../templates/offboarding/stage/form.html     |  14 +-
 .../offboarding/stage/offboarding_body.html   |  17 +-
 .../templates/offboarding/task/form.html      |  14 +-
 .../offboarding/task/table_body.html          |  16 +-
 9 files changed, 164 insertions(+), 128 deletions(-)

diff --git a/offboarding/templates/offboarding/employee/form.html b/offboarding/templates/offboarding/employee/form.html
index 7ebfe3f45..2dbf0660c 100644
--- a/offboarding/templates/offboarding/employee/form.html
+++ b/offboarding/templates/offboarding/employee/form.html
@@ -1,3 +1,11 @@
-<form id="offboardingEmployeeForm" hx-post="{% url 'add-employee' %}?stage_id={{ form.instance.stage_id.id }}&instance_id={{ form.instance.pk }}">
-    {{ form.as_p }}
-</form>
\ No newline at end of file
+<div class="oh-modal__dialog" style="max-width: 550px">
+    <div class="oh-modal__dialog-header">
+      <button type="button" class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+    </div>
+
+    <div class="oh-modal__dialog-body">
+        <form id="offboardingEmployeeForm" hx-post="{% url 'add-employee' %}?stage_id={{ form.instance.stage_id.id }}&instance_id={{ form.instance.pk }}">
+            {{ form.as_p }}
+        </form>
+    </div>
+</div>
\ No newline at end of file
diff --git a/offboarding/templates/offboarding/pipeline/form.html b/offboarding/templates/offboarding/pipeline/form.html
index af6ac492d..e624a38c5 100644
--- a/offboarding/templates/offboarding/pipeline/form.html
+++ b/offboarding/templates/offboarding/pipeline/form.html
@@ -1,3 +1,11 @@
-<form hx-post="{% url "create-offboarding" %}?instance_id={{form.instance.id}}">
-    {{form.as_p}}
-</form>
\ No newline at end of file
+<div class="oh-modal__dialog" style="max-width: 550px">
+    <div class="oh-modal__dialog-header">
+      <button type="button" class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+    </div>
+
+    <div class="oh-modal__dialog-body">
+        <form hx-post="{% url "create-offboarding" %}?instance_id={{form.instance.id}}">
+            {{form.as_p}}
+        </form>
+    </div>
+</div>
\ No newline at end of file
diff --git a/offboarding/templates/offboarding/pipeline/individual_view.html b/offboarding/templates/offboarding/pipeline/individual_view.html
index 7486b5440..784f5d849 100644
--- a/offboarding/templates/offboarding/pipeline/individual_view.html
+++ b/offboarding/templates/offboarding/pipeline/individual_view.html
@@ -1,93 +1,107 @@
 {% load i18n %} {% load offboarding_filter %}
-{% if request.GET.requests_ids %}
-<div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
-    <button hx-get="{% url "offboarding-individual-view" previous %}?requests_ids={{requests_ids}}" hx-target = "#singleView" 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 "offboarding-individual-view" next %}?requests_ids={{requests_ids}}" hx-target = "#singleView" 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>
-{% endif %}
-<div class="oh-modal__dialog-body oh-timeoff-modal__body">
-    <div class="oh-timeoff-modal__profile-content">
-        <div class="oh-profile">
-            <div class="oh-profile-section__edit-photo me-3" style="width: 80px; height: 80px;" >
-                <img src="{{employee.employee_id.get_avatar}}"
-                    class="oh-profile-section__modal-image" alt="" />
+<div class="oh-modal__dialog ">
+    <div class="oh-modal__dialog-header">
+        <h2 class="oh-modal__dialog-title" id="">
+          {% trans "Details" %}
+        </h2>
+        <button class="oh-modal__close" aria-label="Close">
+            <ion-icon name="close-outline"></ion-icon>
+        </button>
+    </div>
+
+    <div class="oh-modal__dialog-relative">
+        {% if request.GET.requests_ids %}
+            <div class="oh-modal__dialog oh-modal__dialog--navigation m-0 p-0">
+                <button hx-get="{% url "offboarding-individual-view" previous %}?requests_ids={{requests_ids}}" 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>
+
+                <button hx-get="{% url "offboarding-individual-view" next %}?requests_ids={{requests_ids}}" 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>
-            <div  >
-                <a class="oh-timeoff-modal__profile-content" style="text-decoration:none;" 
-                    href ="{% url 'employee-view-individual' employee.employee_id.id %}">
-                    <div class="oh-timeoff-modal__profile-info mb-2">
-                        <span class="oh-timeoff-modal__user fw-bold">{{employee.employee_id}}</span>
-                        <span class="oh-timeoff-modal__position">{{employee.employee_id.employee_work_info.department_id}} / {{employee.employee_id.employee_work_info.job_position_id}}</span>
+        {% endif %}
+        <div class="oh-modal__dialog-body oh-timeoff-modal__body">
+            <div class="oh-timeoff-modal__profile-content">
+                <div class="oh-profile">
+                    <div class="oh-profile-section__edit-photo me-3" style="width: 80px; height: 80px;" >
+                        <img src="{{employee.employee_id.get_avatar}}"
+                            class="oh-profile-section__modal-image" alt="" />
                     </div>
-                </a>
-            </div>
-        </div>
-    </div>
-
-    <div class="oh-timeoff-modal__stats-container">
-        <div class="oh-timeoff-modal__stat">
-            <span class="oh-timeoff-modal__stat-title">{% trans "Email" %}</span>
-            <span class="oh-timeoff-modal__stat-count">{{employee.employee_id.email}}</span>
-        </div>
-        <div class="oh-timeoff-modal__stat">
-            <span class="oh-timeoff-modal__stat-title">{% trans "Job Position" %}</span>
-            <span class="oh-timeoff-modal__stat-count">{{employee.employee_id.get_job_position}}</span>
-        </div>
-    </div>
-
-    <div class="oh-timeoff-modal__stats-container mt-3">
-        <div class="oh-timeoff-modal__stat">
-            <span class="oh-timeoff-modal__stat-title">{% trans "Contact" %}</span>
-            <span class="oh-timeoff-modal__stat-count">{{employee.employee_id.employee_work_info.mobile}}</span>
-        </div>
-        <div class="oh-timeoff-modal__stat">
-            <span class="oh-timeoff-modal__stat-title">{% trans "Notice Period start Date" %}</span>
-            <span class="oh-timeoff-modal__stat-count dateformat_changer">{{employee.notice_period_starts}}</span>
-        </div>
-    </div>
-    <div class="oh-timeoff-modal__stats-container mt-3">
-        <div class="oh-timeoff-modal__stat">
-            <span class="oh-timeoff-modal__stat-title">{% trans "Notice Period end Date" %}</span>
-            <span class="oh-timeoff-modal__stat-count dateformat_changer">
-                {{employee.notice_period_ends}}
-            </span>
-        </div>
-        <div class="oh-timeoff-modal__stat">
-            <span class="oh-timeoff-modal__stat-title">{% trans "Stage" %}</span>
-            <span class="oh-timeoff-modal__stat-count">
-                <form id="vla" hx-get="{% url "offboarding-change-stage" %}?employee_ids={{employee.id}}"
-                hx-target="#offboardingBody{{employee.stage_id.offboarding_id.id}}">
-                    {{ stage_forms|individual_view_stages:employee.stage_id }}
-                    <input type="submit" hidden />
-                </form>
-            </span>
-        </div>
-    </div>
-    {% if employee.employeetask_set.all %}
-    <div class="oh-timeoff-modal__stats w-100 mt-3">
-        <div class="oh-timeoff-modal__stat">
-            <span class="oh-timeoff-modal__stat-count">{% trans "Tasks" %}</span>
-            <div class="row ms-2">
-                {% for task in employee.employeetask_set.all %}
-                    <div class="col-6 ps-0 pb-1">
-                        <div class="oh-timeoff-modal__stat-title mb-1 "><span class="oh-dot oh-dot--small me-1 oh-dot--color-{{task.status}}"></span>{{task.task_id.title}} </div>
-                        <div class="" id="task{{task.id}}{{employee.id}}">
-                            {% include 'offboarding/pipeline/employee_task.html' %}
-                        </div>
+                    <div  >
+                        <a class="oh-timeoff-modal__profile-content" style="text-decoration:none;" 
+                            href ="{% url 'employee-view-individual' employee.employee_id.id %}">
+                            <div class="oh-timeoff-modal__profile-info mb-2">
+                                <span class="oh-timeoff-modal__user fw-bold">{{employee.employee_id}}</span>
+                                <span class="oh-timeoff-modal__position">{{employee.employee_id.employee_work_info.department_id}} / {{employee.employee_id.employee_work_info.job_position_id}}</span>
+                            </div>
+                        </a>
                     </div>
-                {% endfor %}
+                </div>
             </div>
+
+            <div class="oh-timeoff-modal__stats-container">
+                <div class="oh-timeoff-modal__stat">
+                    <span class="oh-timeoff-modal__stat-title">{% trans "Email" %}</span>
+                    <span class="oh-timeoff-modal__stat-count">{{employee.employee_id.email}}</span>
+                </div>
+                <div class="oh-timeoff-modal__stat">
+                    <span class="oh-timeoff-modal__stat-title">{% trans "Job Position" %}</span>
+                    <span class="oh-timeoff-modal__stat-count">{{employee.employee_id.get_job_position}}</span>
+                </div>
+            </div>
+
+            <div class="oh-timeoff-modal__stats-container mt-3">
+                <div class="oh-timeoff-modal__stat">
+                    <span class="oh-timeoff-modal__stat-title">{% trans "Contact" %}</span>
+                    <span class="oh-timeoff-modal__stat-count">{{employee.employee_id.employee_work_info.mobile}}</span>
+                </div>
+                <div class="oh-timeoff-modal__stat">
+                    <span class="oh-timeoff-modal__stat-title">{% trans "Notice Period start Date" %}</span>
+                    <span class="oh-timeoff-modal__stat-count dateformat_changer">{{employee.notice_period_starts}}</span>
+                </div>
+            </div>
+            <div class="oh-timeoff-modal__stats-container mt-3">
+                <div class="oh-timeoff-modal__stat">
+                    <span class="oh-timeoff-modal__stat-title">{% trans "Notice Period end Date" %}</span>
+                    <span class="oh-timeoff-modal__stat-count dateformat_changer">
+                        {{employee.notice_period_ends}}
+                    </span>
+                </div>
+                <div class="oh-timeoff-modal__stat">
+                    <span class="oh-timeoff-modal__stat-title">{% trans "Stage" %}</span>
+                    <span class="oh-timeoff-modal__stat-count">
+                        <form id="vla" hx-get="{% url "offboarding-change-stage" %}?employee_ids={{employee.id}}"
+                        hx-target="#offboardingBody{{employee.stage_id.offboarding_id.id}}">
+                            {{ stage_forms|individual_view_stages:employee.stage_id }}
+                            <input type="submit" hidden />
+                        </form>
+                    </span>
+                </div>
+            </div>
+            {% if employee.employeetask_set.all %}
+            <div class="oh-timeoff-modal__stats w-100 mt-3">
+                <div class="oh-timeoff-modal__stat">
+                    <span class="oh-timeoff-modal__stat-count">{% trans "Tasks" %}</span>
+                    <div class="row ms-2">
+                        {% for task in employee.employeetask_set.all %}
+                            <div class="col-6 ps-0 pb-1">
+                                <div class="oh-timeoff-modal__stat-title mb-1 "><span class="oh-dot oh-dot--small me-1 oh-dot--color-{{task.status}}"></span>{{task.task_id.title}} </div>
+                                <div class="" id="task{{task.id}}{{employee.id}}">
+                                    {% include 'offboarding/pipeline/employee_task.html' %}
+                                </div>
+                            </div>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+            {% endif %}
+            
         </div>
     </div>
-    {% endif %}
-    
 </div>
 
 <script>
diff --git a/offboarding/templates/offboarding/pipeline/nav.html b/offboarding/templates/offboarding/pipeline/nav.html
index 7c9e677ee..ffeaa1e44 100644
--- a/offboarding/templates/offboarding/pipeline/nav.html
+++ b/offboarding/templates/offboarding/pipeline/nav.html
@@ -14,7 +14,7 @@
     {% if perms.offboarding.add_offboarding %}
       <div class="oh-main__titlebar-button-container">
         <div class="oh-main__titlebar-button-container">
-          <a hx-get="{% url 'create-offboarding' %}" hx-target="#offboardingModalBody" data-toggle="oh-modal-toggle" data-target="#offboardingModal" class="oh-btn oh-btn--secondary">
+          <a hx-get="{% url 'create-offboarding' %}" hx-target="#objectDetailsModalTarget" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" class="oh-btn oh-btn--secondary">
             <ion-icon name="add-outline"></ion-icon>
             {% trans 'Create' %}
           </a>
diff --git a/offboarding/templates/offboarding/pipeline/offboardings.html b/offboarding/templates/offboarding/pipeline/offboardings.html
index f2d91c2e7..81b0f0fe0 100644
--- a/offboarding/templates/offboarding/pipeline/offboardings.html
+++ b/offboarding/templates/offboarding/pipeline/offboardings.html
@@ -56,7 +56,6 @@
 }
 
 </script>
-<div id="managerIn"></div>
 <div id="messages" class="oh-alert-container"></div>
 <div class="oh-wrapper">
   <div class="oh-tabs" onclick="switchTab(event)">
@@ -79,7 +78,7 @@
                   <ul class="oh-dropdown__items">
                     {% if perms.offboarding.change_offboarding or request.user.employee_get|is_offboarding_manager %}
                     <li class="oh-dropdown__item">
-                      <a hx-get="{% url "create-offboarding" %}?instance_id={{offboarding.offboarding.id}}" hx-target="#offboardingModalBody" data-toggle="oh-modal-toggle" data-target="#offboardingModal" class="oh-dropdown__link">{% trans "Edit" %}</a>
+                      <a hx-get="{% url "create-offboarding" %}?instance_id={{offboarding.offboarding.id}}" hx-target="#objectDetailsModalTarget" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" class="oh-dropdown__link">{% trans "Edit" %}</a>
                     </li>
                     {% endif %}
                     {% if perms.offboarding.delete_offboarding %}
@@ -105,7 +104,7 @@
         {% if perms.offboarding.view_offboarding or request.user.employee_get|is_in_offboarding:offboarding %}
           <div class="oh-tabs__content" id="Offboarding{{ offboarding.offboarding.id }}">
               {% if perms.offboarding.add_offboardingstage or request.user.employee_get|any_manager %}
-                <a hx-get="{% url 'create-offboarding-stage' %}?offboarding_id={{offboarding.offboarding.id}}" style="width: 100px;" hx-target="#offboardingModalBody" data-toggle="oh-modal-toggle" data-target="#offboardingModal" class="mb-3 oh-btn oh-btn--secondary">
+                <a hx-get="{% url 'create-offboarding-stage' %}?offboarding_id={{offboarding.offboarding.id}}" style="width: 100px;" hx-target="#objectDetailsModalTarget" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" class="mb-3 oh-btn oh-btn--secondary">
                   <ion-icon name="add-outline"></ion-icon>
                   {% trans 'Stage' %}
                 </a>
@@ -118,24 +117,6 @@
   </div>
 </div>
 
-<div class="oh-modal" id="singleModal" role="dialog" aria-labelledby="singleModalModal" aria-hidden="true">
-    <div class="oh-modal__dialog ">
-        <div class="oh-modal__dialog-header">
-            <h2 class="oh-modal__dialog-title" id="">
-              {% trans "Details" %}
-            </h2>
-            <button class="oh-modal__close" aria-label="Close">
-                <ion-icon name="close-outline"></ion-icon>
-            </button>
-        </div>
-
-        <div class="oh-modal__dialog-relative" id="singleView">
-
-        </div>
-        
-    </div>
-</div>
-
 <script>
   let activeTab = localStorage.getItem("activeTabOffboarding")
   if (activeTab) {
diff --git a/offboarding/templates/offboarding/stage/form.html b/offboarding/templates/offboarding/stage/form.html
index a2a855f6d..e3a556222 100644
--- a/offboarding/templates/offboarding/stage/form.html
+++ b/offboarding/templates/offboarding/stage/form.html
@@ -1,3 +1,11 @@
-<form hx-post="{% url 'create-offboarding-stage' %}?offboarding_id={{ form.instance.offboarding_id.id }}&instance_id={{ form.instance.pk }}">
-    {{ form.as_p }}
-</form>
+<div class="oh-modal__dialog" style="max-width: 550px">
+    <div class="oh-modal__dialog-header">
+      <button type="button" class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+    </div>
+
+    <div class="oh-modal__dialog-body">
+        <form hx-post="{% url 'create-offboarding-stage' %}?offboarding_id={{ form.instance.offboarding_id.id }}&instance_id={{ form.instance.pk }}">
+            {{ form.as_p }}
+        </form>
+    </div>
+</div>
diff --git a/offboarding/templates/offboarding/stage/offboarding_body.html b/offboarding/templates/offboarding/stage/offboarding_body.html
index 80d7eb889..1ff7ef44a 100644
--- a/offboarding/templates/offboarding/stage/offboarding_body.html
+++ b/offboarding/templates/offboarding/stage/offboarding_body.html
@@ -1,4 +1,9 @@
 {% load i18n offboarding_filter %}
+<style>
+  .oh-dropdown__menu {
+    z-index:20
+  }
+</style>
 {% for stage in offboarding.offboarding.stages %}
 <div class="oh-accordion-meta" id="accordion{{stage.id}}">
     <div class="oh-accordion-meta__item">
@@ -23,8 +28,8 @@
               <ul class="oh-dropdown__items">
                 {% if perms.offboarding.add_offboardingemployee or request.user.employee_get|any_manager %}
                 <li class="oh-dropdown__item">
-                  <a hx-get="{% url "add-employee" %}?stage_id={{stage.grouper.id}}" data-target="#offboardingModal"
-                  data-toggle="oh-modal-toggle" hx-target="#offboardingModalBody" class="oh-dropdown__link">
+                  <a hx-get="{% url "add-employee" %}?stage_id={{stage.grouper.id}}" data-target="#objectDetailsModal"
+                  data-toggle="oh-modal-toggle" hx-target="#objectDetailsModalTarget" class="oh-dropdown__link">
                   {% trans "Add Employee" %}</a>
                 </li>
                 {% endif %}
@@ -32,8 +37,8 @@
                   <li class="oh-dropdown__item">
                     <a 
                       hx-get="{% url "create-offboarding-stage" %}?offboarding_id={{offboarding.offboarding.id}}&instance_id={{stage.grouper.id}}"
-                      data-target="#offboardingModal"
-                      data-toggle="oh-modal-toggle" hx-target="#offboardingModalBody" class="oh-dropdown__link">{% trans "Edit" %}</a>
+                      data-target="#objectDetailsModal"
+                      data-toggle="oh-modal-toggle" hx-target="#objectDetailsModalTarget" class="oh-dropdown__link">{% trans "Edit" %}</a>
                   </li>
                 {% endif %}
                 {% if perms.offboarding.delete_offboarding %}
@@ -76,7 +81,7 @@
                       <div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open" style="text-align: left !important; display: none;">
                          <ul class="oh-dropdown__items">
                             <li class="oh-dropdown__item">
-                               <a class="oh-dropdown__link" hx-get="{% url "offboarding-add-task" %}?stage_id={{stage.grouper.id}}&instance_id={{task.id}}" hx-target="#offboardingModalBody" data-toggle="oh-modal-toggle" data-target="#offboardingModal">{% trans "Edit" %}
+                               <a class="oh-dropdown__link" hx-get="{% url "offboarding-add-task" %}?stage_id={{stage.grouper.id}}&instance_id={{task.id}}" hx-target="#objectDetailsModalTarget" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal">{% trans "Edit" %}
                                </a>
                             </li> <li class="oh-dropdown__item">
                                <a class="oh-dropdown__link oh-dropdown__link--danger" href="{% url 'delete-offboarding-task' %}?task_ids={{task.id}}" title="{% trans "Delete" %}" onclick="event.stopPropagation();return confirm('Do you want to delete task?')">Delete</a>
@@ -90,7 +95,7 @@
                 {% endfor %}
                 <div class="oh-sticky-table__th" style="width: 120px;">
                   {% if perms.offboarding.add_offboardingtask or request.user.employee_get|any_manager %}
-                    <button class="oh-checkpoint-badge text-success" data-toggle="oh-modal-toggle" data-target="#offboardingModal" hx-get="{% url "offboarding-add-task" %}?stage_id={{stage.grouper.id}}" hx-target="#offboardingModalBody">
+                    <button class="oh-checkpoint-badge text-success" data-toggle="oh-modal-toggle" data-target="#objectDetailsModal" hx-get="{% url "offboarding-add-task" %}?stage_id={{stage.grouper.id}}" hx-target="#objectDetailsModalTarget">
                       {% trans "Add Task" %}
                     </button>
                   {% endif %}
diff --git a/offboarding/templates/offboarding/task/form.html b/offboarding/templates/offboarding/task/form.html
index 4200955b7..4f585125c 100644
--- a/offboarding/templates/offboarding/task/form.html
+++ b/offboarding/templates/offboarding/task/form.html
@@ -1,6 +1,14 @@
-<form hx-post="{% url "offboarding-add-task" %}?instance_id={{form.instance.pk}}&stage_id={{form.initial.stage_id}}" hx-target="#offboardingModalBody">
-{{form.as_p}}
-</form>
+<div class="oh-modal__dialog" style="max-width: 550px">
+    <div class="oh-modal__dialog-header">
+      <button type="button" class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
+    </div>
+
+    <div class="oh-modal__dialog-body">
+        <form hx-post="{% url "offboarding-add-task" %}?instance_id={{form.instance.pk}}&stage_id={{form.initial.stage_id}}" hx-target="#objectDetailsModalTarget">
+            {{form.as_p}}
+        </form>
+    </div>
+</div>
 
 <script>
     $(".col-md-6").removeClass("col-md-6");
diff --git a/offboarding/templates/offboarding/task/table_body.html b/offboarding/templates/offboarding/task/table_body.html
index 0e18332b3..1fa6e291e 100644
--- a/offboarding/templates/offboarding/task/table_body.html
+++ b/offboarding/templates/offboarding/task/table_body.html
@@ -11,9 +11,9 @@
     data-employee="{{employee.employee_id.get_full_name}}"
     data-employee-id="{{ employee.id }}"
     hx-get='{% url "offboarding-individual-view" employee.id %}?requests_ids={{offboarding.employee_ids}}'
-	hx-target='#singleView'
+	hx-target='#objectDetailsModalTarget'
 	data-toggle = 'oh-modal-toggle'
-	data-target="#singleModal"
+	data-target="#objectDetailsModal"
 >
     <div class="oh-sticky-table__sd">
         <div class="oh-profile oh-profile--md">
@@ -78,7 +78,9 @@
             <a
                 type="button"
                 hx-get="{% url 'employee-archive' employee.employee_id.id %}"
-                hx-target="#managerIn"
+                hx-target="#objectDetailsModalTarget"
+                data-toggle="oh-modal-toggle"
+                data-target="#objectDetailsModal"
                 title="{% if not employee.employee_id.is_active %}{% trans 'Un Archive' %} {% else %} {% trans 'Archive' %}{% endif %}"
                 class="oh-btn oh-btn--light tex-primary"
                 style="flex: 1 0 auto; width: 20px; height: 40.68px; padding: 0"
@@ -89,9 +91,9 @@
             <a
                 type="button"
 				hx-get="{% url "add-employee" %}?instance_id={{employee.id}}&stage_id={{stage.grouper.id}}"
-                hx-target="#offboardingModalBody"
+                hx-target="#objectDetailsModalTarget"
                 data-toggle="oh-modal-toggle"
-                data-target="#offboardingModal"
+                data-target="#objectDetailsModal"
                 title="{% trans 'Edit' %}"
                 class="oh-btn oh-btn--light tex-primary"
                 style="flex: 1 0 auto; width: 20px; height: 40.68px; padding: 0"
@@ -104,7 +106,9 @@
                 type="button"
                 title="{% trans 'Show managing records' %}"
                 hx-get="{% url 'get-manager-in' %}?employee_id={{employee.employee_id.id}}"
-                hx-target="#managerIn"
+                hx-target="#objectDetailsModalTarget"
+                data-toggle="oh-modal-toggle"
+                data-target="#objectDetailsModal"
                 class="oh-btn oh-btn--light tex-primary"
                 style="flex: 1 0 auto; width: 20px; height: 40.68px; padding: 0"
 				onclick="event.stopPropagation()"