From f78a3b5cbeb73b6b1f418fc2530609ac023da49c Mon Sep 17 00:00:00 2001
From: Horilla <support@horilla.com>
Date: Fri, 18 Oct 2024 10:48:11 +0530
Subject: [PATCH] [UPDT] PAYROLL: Rmove unused oh-modals and resolved payslip
 create function date period issues

---
 .../tabs/allowance_deduction-tab.html         |   9 +-
 payroll/forms/component_forms.py              |  15 +-
 payroll/forms/forms.py                        |   4 +-
 payroll/methods/methods.py                    |   1 -
 payroll/templates/payroll/bonus/form.html     |   2 +-
 .../payroll/deduction/payslip_deduct.html     |  16 +-
 payroll/templates/payroll/loan/form.html      |  11 +-
 payroll/templates/payroll/loan/nav.html       |   6 +-
 payroll/templates/payroll/loan/records.html   |   4 +-
 .../templates/payroll/loan/records_card.html  |  55 +--
 .../templates/payroll/loan/records_list.html  |  81 +---
 payroll/templates/payroll/loan/view_loan.html |  65 +--
 .../payroll/payslip/bulk_create_payslip.html  | 106 ++---
 .../payroll/payslip/create_payslip.html       | 101 ++--
 .../payroll/payslip/individual_payslip.html   |  59 ---
 .../payslip/individual_payslip_summery.html   | 439 +++++++++---------
 .../payroll/payslip/payslips_empty.html       | 165 ++-----
 .../payroll/payslip/view_payslips.html        |  51 +-
 .../reimbursement/reimbursement_comment.html  |  14 -
 .../reimbursement_request_comment_form.html   |  26 --
 .../reimbursement/view_reimbursement.html     |   2 +-
 payroll/urls/component_urls.py                |   5 +
 payroll/views/component_views.py              |  89 +++-
 payroll/views/views.py                        |   2 +-
 24 files changed, 510 insertions(+), 818 deletions(-)
 delete mode 100644 payroll/templates/payroll/reimbursement/reimbursement_request_comment_form.html

diff --git a/employee/templates/tabs/allowance_deduction-tab.html b/employee/templates/tabs/allowance_deduction-tab.html
index 80cde8536..e2a080fe4 100644
--- a/employee/templates/tabs/allowance_deduction-tab.html
+++ b/employee/templates/tabs/allowance_deduction-tab.html
@@ -27,8 +27,8 @@
                 {% if perms.payroll.add_allowance and active_contracts %}
                     <button title="Add Bonus"
                         class="oh-btn oh-btn--secondary-outline oh-stop-prop oh-accordion-meta__btn p-2" title="Add"
-                        hx-get="{% url 'add-bonus' %}?employee_id={{employee.id}}" hx-target="#addBonusModalBody"
-                        data-target="#addBonusModal" data-toggle="oh-modal-toggle">
+                        hx-get="{% url 'add-bonus' %}?employee_id={{employee.id}}" hx-target="#objectCreateModalTarget"
+                        data-target="#objectCreateModal" data-toggle="oh-modal-toggle">
                         <ion-icon class="md hydrated" name="add-outline" role="img" aria-label="add outline"></ion-icon>
                     </button>
                 {% endif %}
@@ -234,11 +234,6 @@
     </div>
 </div>
 
-
-<div class="oh-modal" id="addBonusModal" role="dialog" aria-hidden="true">
-    <div class="oh-modal__dialog" id="addBonusModalBody"> </div>
-</div>
-
 <script>
     $(document).ready(function () {
         const activeTab = localStorage.getItem('EmployeeAttendanceRequestActiveTab')
diff --git a/payroll/forms/component_forms.py b/payroll/forms/component_forms.py
index 41f072618..6330e4c7c 100644
--- a/payroll/forms/component_forms.py
+++ b/payroll/forms/component_forms.py
@@ -349,6 +349,14 @@ class PayslipForm(ModelForm):
             for contract in active_contracts
             if contract.employee_id.is_active
         ]
+        self.fields["employee_id"].widget.attrs.update(
+            {
+                "hx-get": "/payroll/check-contract-start-date",
+                "hx-target": "#contractStartDateDiv",
+                "hx-include": "#payslipCreateForm",
+                "hx-trigger": "change delay:300ms",
+            }
+        )
         if self.instance.pk is None:
             self.initial["start_date"] = datetime.date.today().replace(day=1)
             self.initial["end_date"] = datetime.date.today()
@@ -369,6 +377,10 @@ class PayslipForm(ModelForm):
             "start_date": forms.DateInput(
                 attrs={
                     "type": "date",
+                    "hx-get": "/payroll/check-contract-start-date",
+                    "hx-target": "#contractStartDateDiv",
+                    "hx-include": "#payslipCreateForm",
+                    "hx-trigger": "change delay:300ms",
                 }
             ),
             "end_date": forms.DateInput(
@@ -386,7 +398,7 @@ class GeneratePayslipForm(HorillaForm):
 
     group_name = forms.CharField(
         label="Batch name",
-        required=False,
+        required=True,
         # help_text="Enter +-something if you want to generate payslips by batches",
     )
     employee_id = HorillaMultiSelectField(
@@ -398,6 +410,7 @@ class GeneratePayslipForm(HorillaForm):
             filter_template_path="employee_filters.html",
         ),
         label="Employee",
+        required=True,
     )
     start_date = forms.DateField(widget=forms.DateInput(attrs={"type": "date"}))
     end_date = forms.DateField(widget=forms.DateInput(attrs={"type": "date"}))
diff --git a/payroll/forms/forms.py b/payroll/forms/forms.py
index 062304c3e..4618a84fb 100644
--- a/payroll/forms/forms.py
+++ b/payroll/forms/forms.py
@@ -133,9 +133,9 @@ class ContractForm(ModelForm):
             dynamic_url = self.get_dynamic_hx_post_url(self.instance)
             self.fields["contract_status"].widget.attrs.update(
                 {
-                    "hx-target": "#contractFormTarget",
+                    "hx-target": "this",
                     "hx-post": dynamic_url,
-                    "hx-swap": "outerHTML",
+                    "hx-swap": "beforebegin",
                 }
             )
         first = PayrollGeneralSetting.objects.first()
diff --git a/payroll/methods/methods.py b/payroll/methods/methods.py
index 7bd671611..9cddeeaee 100644
--- a/payroll/methods/methods.py
+++ b/payroll/methods/methods.py
@@ -40,7 +40,6 @@ def get_total_days(start_date, end_date):
         start_date = date(2023, 1, 1)
         end_date = date(2023, 1, 10)
         days_on_period = get_total_days(start_date, end_date)
-        print(days_on_period)  # Output: 10
     """
     delta = end_date - start_date
     total_days = delta.days + 1  # Add 1 to include the end date itself
diff --git a/payroll/templates/payroll/bonus/form.html b/payroll/templates/payroll/bonus/form.html
index 13cc67b29..69565981b 100644
--- a/payroll/templates/payroll/bonus/form.html
+++ b/payroll/templates/payroll/bonus/form.html
@@ -11,7 +11,7 @@
 <div class="oh-modal__dialog-body">
   <form
     hx-post="{% url 'add-bonus' %}?employee_id={{employee_id}}&payslip_id={{payslip_id}}"
-    hx-target="#addBonusModalBody"
+    hx-target="#objectCreateModalTarget"
     class="oh-profile-section"
   >
     {{ form.as_p }}
diff --git a/payroll/templates/payroll/deduction/payslip_deduct.html b/payroll/templates/payroll/deduction/payslip_deduct.html
index 42c29a099..0926265fd 100644
--- a/payroll/templates/payroll/deduction/payslip_deduct.html
+++ b/payroll/templates/payroll/deduction/payslip_deduct.html
@@ -1,7 +1,11 @@
 {% load i18n %}{% load widget_tweaks %}
-<form
-  hx-post="{% url 'add-payslip-deduction' %}?employee_id={{employee_id}}&payslip_id={{payslip_id}}"
-  hx-target="#addDeductionFormModal"
->
-  {{form.as_p}}
-</form>
+<div class="oh-modal__dialog-header">
+    <button type="button" class="oh-modal__close" aria-label="Close"
+        style="margin-top: 34px;margin-right: 34px;"><ion-icon name="close-outline"></ion-icon></button>
+</div>
+<div class="oh-modal__dialog-body" id="addDeductionFormModal">
+    <form hx-post="{% url 'add-payslip-deduction' %}?employee_id={{employee_id}}&payslip_id={{payslip_id}}"
+        hx-target="#addDeductionFormModal">
+        {{form.as_p}}
+    </form>
+</div>
diff --git a/payroll/templates/payroll/loan/form.html b/payroll/templates/payroll/loan/form.html
index 0e2379389..3b15cc974 100644
--- a/payroll/templates/payroll/loan/form.html
+++ b/payroll/templates/payroll/loan/form.html
@@ -1,3 +1,8 @@
-<form hx-post="{% url "create-loan" %}?instance_id={{instance_id}}" hx-target="#loanModalBody">
-    {{form.as_p}}
-</form>
+<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" id="loanModalBody">
+    <form hx-post="{% url 'create-loan' %}?instance_id={{instance_id}}" hx-target="#objectCreateModalTarget">
+        {{form.as_p}}
+    </form>
+</div>
diff --git a/payroll/templates/payroll/loan/nav.html b/payroll/templates/payroll/loan/nav.html
index 766c41d1e..b0301410c 100644
--- a/payroll/templates/payroll/loan/nav.html
+++ b/payroll/templates/payroll/loan/nav.html
@@ -74,9 +74,9 @@
                 <div class="oh-main__titlebar-button-container">
                     <a
                         hx-get="{% url 'create-loan' %}"
-                        hx-target="#loanModalBody"
+                        hx-target="#objectCreateModalTarget"
                         data-toggle="oh-modal-toggle"
-                        data-target="#loanModal"
+                        data-target="#objectCreateModal"
                         class="oh-btn oh-btn--secondary"
                     >
                         <ion-icon name="add-outline"></ion-icon>
@@ -91,7 +91,7 @@
 
 <script>
     $(document).ready(function () {
-        $("#loanModalBody").on("htmx:afterSwap", function () {
+        $("#objectCreateModalTarget").on("htmx:afterSwap", function () {
             $("[name='installment_amount']").on("change", function () {
                 var loanAmount = $("[name='loan_amount']").val();
                 var installmentAmount = $(this).val();
diff --git a/payroll/templates/payroll/loan/records.html b/payroll/templates/payroll/loan/records.html
index 3f9d7e63a..c3e374053 100644
--- a/payroll/templates/payroll/loan/records.html
+++ b/payroll/templates/payroll/loan/records.html
@@ -21,7 +21,7 @@
           <div class="d-flex justify-content-between">
             <div class="loan-type">{{ record.get_type_display }}</div>
             <div>
-              <a class="mr-2" hx-get="{% url 'create-loan' %}?instance_id={{ record.id }}" hx-target="#loanModalBody" data-toggle="oh-modal-toggle" data-target="#loanModal"><ion-icon class="text-dark" name="create-outline"></ion-icon></a>
+              <a class="mr-2" hx-get="{% url 'create-loan' %}?instance_id={{ record.id }}" hx-target="#objectCreateModalTarget" data-toggle="oh-modal-toggle" data-target="#objectCreateModal"><ion-icon class="text-dark" name="create-outline"></ion-icon></a>
               <a href="{% url 'delete-loan' %}?ids={{ record.id }}" onclick="return confirm('Do you want to delete this record?')"><ion-icon class="text-danger" name="trash-outline"></ion-icon></a>
             </div>
           </div>
@@ -42,7 +42,7 @@
             <div class="oh-progress-bar__state" role="progressbar" aria-valuemax="100" style="width:{{ record.installment_ratio }}%"></div>
           </div>
           <p class="oh-faq-card__desc">{{ record.description }}.</p>
-          <a hx-get="{% url 'view-installments' %}?loan_id={{ record.id }}" hx-target="#viewInstallmentModalBody" data-target="#viewInstallmentModal" data-toggle="oh-modal-toggle" class="oh-btn oh-btn--secondary oh-btn--block">{% trans 'Installments' %}</a>
+          <a hx-get="{% url 'view-installments' %}?loan_id={{ record.id }}" hx-target="#objectDetailsModalTarget" data-target="#objectDetailsModal" data-toggle="oh-modal-toggle" class="oh-btn oh-btn--secondary oh-btn--block">{% trans 'Installments' %}</a>
         </div>
       {% endfor %}
   </div>
diff --git a/payroll/templates/payroll/loan/records_card.html b/payroll/templates/payroll/loan/records_card.html
index 5e3a3874b..16b3f55ec 100644
--- a/payroll/templates/payroll/loan/records_card.html
+++ b/payroll/templates/payroll/loan/records_card.html
@@ -24,7 +24,7 @@
                                 <div class="loan-type">{{ record.get_type_display }}</div>
                                 <div>
                                     {% if perms.payroll.change_loanaccount or request.user %}
-                                        <a class="mr-2" hx-get="{% url 'create-loan' %}?instance_id={{ record.id }}" hx-target="#loanModalBody" data-toggle="oh-modal-toggle" data-target="#loanModal" title='{% trans "Edit" %}'><ion-icon class="text-dark" name="create-outline"></ion-icon></a>
+                                        <a class="mr-2" hx-get="{% url 'create-loan' %}?instance_id={{ record.id }}" hx-target="#objectCreateModalTarget" data-toggle="oh-modal-toggle" data-target="#objectCreateModal" title='{% trans "Edit" %}'><ion-icon class="text-dark" name="create-outline"></ion-icon></a>
                                     {% endif %}
                                     {% if perms.payroll.delete_loanaccount %}
                                         <a href="{% url 'delete-loan' %}?ids={{ record.id }}" onclick="return confirm('Do you want to delete this record?')" title='{% trans "Delete" %}'><ion-icon class="text-danger" name="trash-outline"></ion-icon></a>
@@ -109,7 +109,7 @@
                             <div class="d-flex justify-content-between">
                                 <div class="loan-type">{{ record.get_type_display }}</div>
                                 <div>
-                                <a class="mr-2" hx-get="{% url 'create-loan' %}?instance_id={{ record.id }}" hx-target="#loanModalBody" data-toggle="oh-modal-toggle" data-target="#loanModal" title='{% trans "Edit" %}'><ion-icon class="text-dark" name="create-outline"></ion-icon></a>
+                                <a class="mr-2" hx-get="{% url 'create-loan' %}?instance_id={{ record.id }}" hx-target="#objectCreateModalTarget" data-toggle="oh-modal-toggle" data-target="#objectCreateModal" title='{% trans "Edit" %}'><ion-icon class="text-dark" name="create-outline"></ion-icon></a>
                                 <a href="{% url 'delete-loan' %}?ids={{ record.id }}" onclick="return confirm('Do you want to delete this record?')" title='{% trans "Delete" %}'><ion-icon class="text-danger" name="trash-outline"></ion-icon></a>
                                 </div>
                             </div>
@@ -192,7 +192,7 @@
                                 <div class="loan-type">{{ record.get_type_display }}</div>
                                 <div>
                                 {% if perms.payroll.change_loanaccount or request.user %}
-                                    <a class="mr-2" hx-get="{% url 'create-loan' %}?instance_id={{ record.id }}" hx-target="#loanModalBody" data-toggle="oh-modal-toggle" data-target="#loanModal" title='{% trans "Edit" %}'><ion-icon class="text-dark" name="create-outline"></ion-icon></a>
+                                    <a class="mr-2" hx-get="{% url 'create-loan' %}?instance_id={{ record.id }}" hx-target="#objectCreateModalTarget" data-toggle="oh-modal-toggle" data-target="#objectCreateModal" title='{% trans "Edit" %}'><ion-icon class="text-dark" name="create-outline"></ion-icon></a>
                                 {% endif %}
                                 {% if perms.payroll.delete_loanaccount %}
                                     <a href="{% url 'delete-loan' %}?ids={{ record.id }}" onclick="return confirm('Do you want to delete this record?')" title='{% trans "Delete" %}'><ion-icon class="text-danger" name="trash-outline"></ion-icon></a>
@@ -271,55 +271,6 @@
         </div>
     </div>
 
-    <!-- start of comment modal -->
-    <div
-        class="oh-modal"
-        id="shiftcommentModal"
-        role="dialog"
-        aria-labelledby="emptagModal"
-        aria-hidden="true"
-    >
-        <div class="oh-modal__dialog">
-            <div class="oh-modal__dialog-header">
-                <h2 class="oh-modal__dialog-title" id="createModalTitle">
-                    {% trans "Add Comment" %}
-                </h2>
-                <button class="oh-modal__close" aria-label="Close">
-                    <ion-icon name="close-outline"></ion-icon>
-                </button>
-            </div>
-            <div
-                class="oh-modal__dialog-body"
-                id="shiftRequestCommentForm"
-            ></div>
-        </div>
-    </div>
-    <!-- end of comment modal -->
-
-    <div
-        class="oh-modal"
-        style="z-index: 60"
-        id="shiftRequestDetailModal"
-        role="dialog"
-        aria-labelledby="shiftRequestDetailModal"
-        aria-hidden="true"
-    >
-        <div class="oh-modal__dialog">
-            <div class="oh-modal__dialog-header">
-                <h2 class="oh-modal__dialog-title" id="">
-                    {% trans "Details" %}
-                </h2>
-                <button class="oh-modal__close" aria-label="Close">
-                    <ion-icon name="close-outline"></ion-icon>
-                </button>
-            </div>
-            <div
-                class="oh-modal__dialog-body oh-modal__dialog-relative"
-                id="shiftRequestDetailTarget"
-            ></div>
-        </div>
-    </div>
-
     <script>
         function reimbursementConfirm(params, target, approve = false) {
             Swal.fire({
diff --git a/payroll/templates/payroll/loan/records_list.html b/payroll/templates/payroll/loan/records_list.html
index 9281e504d..21ee35f99 100644
--- a/payroll/templates/payroll/loan/records_list.html
+++ b/payroll/templates/payroll/loan/records_list.html
@@ -138,7 +138,7 @@
                                         <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
                                             <div class="oh-btn-group">
                                                 {% if perms.payroll.change_loanaccount or request.user %}
-                                                    <a class="oh-btn oh-btn--light-bkg w-100" hx-get="{% url 'create-loan' %}?instance_id={{ req.id }}" hx-target="#loanModalBody" data-toggle="oh-modal-toggle" data-target="#loanModal" title='{% trans "Edit" %}'>
+                                                    <a class="oh-btn oh-btn--light-bkg w-100" hx-get="{% url 'create-loan' %}?instance_id={{ req.id }}" hx-target="#objectCreateModalTarget" data-toggle="oh-modal-toggle" data-target="#objectCreateModal" title="{% trans 'Edit' %}">
                                                         <ion-icon class="text-dark" name="create-outline"></ion-icon></a>
                                                 {% endif %}
                                                 {% if perms.payroll.delete_loanaccount %}
@@ -375,11 +375,11 @@
                                         <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
                                             <div class="oh-btn-group">
                                                 {% if perms.payroll.change_loanaccount or request.user %}
-                                                    <a class="oh-btn oh-btn--light-bkg w-100" hx-get="{% url 'create-loan' %}?instance_id={{ req.id }}" hx-target="#loanModalBody" data-toggle="oh-modal-toggle" data-target="#loanModal" title='{% trans "Edit" %}'>
+                                                    <a class="oh-btn oh-btn--light-bkg w-100" hx-get="{% url 'create-loan' %}?instance_id={{ req.id }}" hx-target="#objectCreateModalTarget" data-toggle="oh-modal-toggle" data-target="#objectCreateModal" title="{% trans 'Edit' %}">
                                                         <ion-icon class="text-dark" name="create-outline"></ion-icon></a>
                                                 {% endif %}
                                                 {% if perms.payroll.delete_loanaccount %}
-                                                    <a class="oh-btn oh-btn--light-bkg w-100" href="{% url 'delete-loan' %}?ids={{ req.id }}" onclick="return confirm('Do you want to delete this record?')" title='{% trans "Delete" %}'>
+                                                    <a class="oh-btn oh-btn--light-bkg w-100" href="{% url 'delete-loan' %}?ids={{ req.id }}" onclick="return confirm('Do you want to delete this record?')" title="{% trans 'Delete' %}">
                                                         <ion-icon class="text-danger" name="trash-outline"></ion-icon></a>
                                                 {% endif %}
                                             </div>
@@ -612,11 +612,11 @@
                                         <div class="oh-sticky-table__td" onclick="event.stopPropagation()">
                                             <div class="oh-btn-group">
                                                 {% if perms.payroll.change_loanaccount or request.user %}
-                                                    <a class="oh-btn oh-btn--light-bkg w-100" hx-get="{% url 'create-loan' %}?instance_id={{ req.id }}" hx-target="#loanModalBody" data-toggle="oh-modal-toggle" data-target="#loanModal" title='{% trans "Edit" %}'>
+                                                    <a class="oh-btn oh-btn--light-bkg w-100" hx-get="{% url 'create-loan' %}?instance_id={{ req.id }}" hx-target="#objectCreateModalTarget" data-toggle="oh-modal-toggle" data-target="#objectCreateModal" title="{% trans 'Edit' %}">
                                                         <ion-icon class="text-dark" name="create-outline"></ion-icon></a>
                                                 {% endif %}
                                                 {% if perms.payroll.delete_loanaccount %}
-                                                    <a class="oh-btn oh-btn--light-bkg w-100" href="{% url 'delete-loan' %}?ids={{ req.id }}" onclick="return confirm('Do you want to delete this record?')" title='{% trans "Delete" %}'>
+                                                    <a class="oh-btn oh-btn--light-bkg w-100" href="{% url 'delete-loan' %}?ids={{ req.id }}" onclick="return confirm('Do you want to delete this record?')" title="{% trans 'Delete' %}">
                                                         <ion-icon class="text-danger" name="trash-outline"></ion-icon></a>
                                                 {% endif %}
                                             </div>
@@ -728,77 +728,6 @@
     </div>
     <!-- end of tabs -->
 
-
-    <!-- start of comment modal -->
-    <div
-        class="oh-modal"
-        id="shiftcommentModal"
-        role="dialog"
-        aria-labelledby="emptagModal"
-        aria-hidden="true"
-    >
-        <div class="oh-modal__dialog">
-            <div class="oh-modal__dialog-header">
-                <h2 class="oh-modal__dialog-title" id="createModalTitle">
-                    {% trans "Add Comment" %}
-                </h2>
-                <button class="oh-modal__close" aria-label="Close">
-                    <ion-icon name="close-outline"></ion-icon>
-                </button>
-            </div>
-            <div
-                class="oh-modal__dialog-body"
-                id="shiftRequestCommentForm"
-            ></div>
-        </div>
-    </div>
-    <!-- end of comment modal -->
-
-    <div
-        class="oh-modal"
-        style="z-index: 60"
-        id="shiftRequestDetailModal"
-        role="dialog"
-        aria-labelledby="shiftRequestDetailModal"
-        aria-hidden="true"
-    >
-        <div class="oh-modal__dialog">
-            <div class="oh-modal__dialog-header">
-                <h2 class="oh-modal__dialog-title" id="">
-                    {% trans "Details" %}
-                </h2>
-                <button class="oh-modal__close" aria-label="Close">
-                    <ion-icon name="close-outline"></ion-icon>
-                </button>
-            </div>
-            <div
-                class="oh-modal__dialog-body oh-modal__dialog-relative"
-                id="shiftRequestDetailTarget"
-            ></div>
-        </div>
-    </div>
-
-
-{% comment %}
-    <div class="oh-modal" id="loanModal" role="dialog" aria-hidden="true">
-        <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" id="loanModalBody"></div>
-        </div>
-      </div>
-      <div class="oh-modal" id="viewInstallmentModal" role="dialog" aria-hidden="true">
-        <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 oh-modal__dialog-relative" id="viewInstallmentModalBody"></div>
-        </div>
-      </div> {% endcomment %}
-
     <script>
         function reimbursementConfirm(params, target, approve = false) {
             Swal.fire({
diff --git a/payroll/templates/payroll/loan/view_loan.html b/payroll/templates/payroll/loan/view_loan.html
index d47181d31..037bcb201 100644
--- a/payroll/templates/payroll/loan/view_loan.html
+++ b/payroll/templates/payroll/loan/view_loan.html
@@ -1,49 +1,32 @@
 {% extends 'index.html' %}
 {% block content %} {% load static %}
 <style>
-  .loan-type{
-    background: #73bbe12b;
-    font-size: .8rem;
-    padding: 4px 8px;
-    border-radius: 10px;
-    margin-bottom: 6px;
-    font-weight: 600;
-    color: #357579;
-  }
+    .loan-type {
+        background: #73bbe12b;
+        font-size: .8rem;
+        padding: 4px 8px;
+        border-radius: 10px;
+        margin-bottom: 6px;
+        font-weight: 600;
+        color: #357579;
+    }
 </style>
-  {% load i18n %}
-  {% include 'payroll/loan/nav.html' %}
-  <div id="loanContainer">
+{% load i18n %}
+{% include 'payroll/loan/nav.html' %}
+<div id="loanContainer">
     {% if records %}
-      {% include 'payroll/loan/records_card.html' %}
+        {% include 'payroll/loan/records_card.html' %}
     {% else %}
-      {% include 'filter_tags.html' %}
-      <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
-        <div class="oh-wrapper">
-          <div class="oh-404">
-              <img style="    width: 150px;height: 150px;" src="{% static 'images/ui/loan.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
-              <h5 class="oh-404__subtitle">{% trans "There are currently no loans to consider." %}</h5>
-          </div>
-        </div>
-      </main>
+        {% include 'filter_tags.html' %}
+        <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
+            <div class="oh-wrapper">
+                <div class="oh-404">
+                    <img style="    width: 150px;height: 150px;" src="{% static 'images/ui/loan.png' %}"
+                        class="oh-404__image mb-4" alt="Page not found. 404." />
+                    <h5 class="oh-404__subtitle">{% trans "There are currently no loans to consider." %}</h5>
+                </div>
+            </div>
+        </main>
     {% endif %}
-  </div>
-  <div class="oh-modal" id="loanModal" role="dialog" aria-hidden="true">
-    <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" id="loanModalBody"></div>
-    </div>
-  </div>
-  <div class="oh-modal" id="viewInstallmentModal" role="dialog" aria-hidden="true">
-    <div class="oh-modal__dialog" style="max-width: 550px">
-      {% comment %} <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> {% endcomment %}
-
-      <div class="oh-modal__dialog oh-modal__dialog-relative" id="viewInstallmentModalBody"></div>
-    </div>
-  </div>
+</div>
 {% endblock %}
diff --git a/payroll/templates/payroll/payslip/bulk_create_payslip.html b/payroll/templates/payroll/payslip/bulk_create_payslip.html
index e12ae7060..fe2326c84 100644
--- a/payroll/templates/payroll/payslip/bulk_create_payslip.html
+++ b/payroll/templates/payroll/payslip/bulk_create_payslip.html
@@ -1,61 +1,47 @@
 {% load i18n %}
-<form
-  action="{% url 'generate-payslip' %}"
-  class="oh-profile-section pt-2"
-  method="post"
->
-  {% csrf_token %}
-  <div class="row">
-    <div class="col-12">
-      <div class="oh-input__group">
-        <label
-          class="oh-input__label"
-          for="{{bulk_form.group_name.id_for_label}}"
-          >{% trans "Batch Name" %}</label
-        >
-        {{bulk_form.group_name}} {{bulk_form.group_name.errors}}
-      </div>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-12">
-      <div class="oh-input__group">
-        <label
-          class="oh-input__label"
-          for="{{bulk_form.employee_id.id_for_label}}"
-          >{% trans "Employee" %}</label
-        >
-        {{bulk_form.employee_id}} {{bulk_form.employee_id.errors}}
-      </div>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-      <div class="oh-input__group">
-        <label
-          class="oh-input__label"
-          for="{{bulk_form.start_date.id_for_label}}"
-          >{% trans "Start Date" %}</label
-        >
-        {{bulk_form.start_date}} {{bulk_form.start_date.errors}}
-      </div>
-    </div>
-    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-      <div class="oh-input__group">
-        <label
-          class="oh-input__label"
-          for="{{bulk_form.end_date.id_for_label}}"
-          >{% trans "End Date" %}</label
-        >
-        {{bulk_form.end_date}} {{bulk_form.end_date.errors }}
-      </div>
-    </div>
-  </div>
-  <div class="oh-modal__dialog-footer p-0 pt-4">
-    <input
-      type="submit"
-      value="Generate Payslips"
-      class="oh-btn oh-btn--secondary oh-btn--shadow"
-    />
-  </div>
-</form>
+<div class="oh-modal__dialog-header pb-0">
+    <h1 class="oh-modal__dialog-title" id="addEmployeeModalLabel">
+        {% trans "Bulk Payslip" %}
+    </h1>
+    <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+    </button>
+</div>
+<div class="oh-modal__dialog-body" id="bulkPayslipModal">
+    <form action="{% url 'generate-payslip' %}" class="oh-profile-section pt-2" method="post">
+        {% csrf_token %}
+        <div class="row">
+            <div class="col-12">
+                <div class="oh-input__group">
+                    <label class="oh-input__label" for="{{bulk_form.group_name.id_for_label}}">{% trans "Batch Name" %}</label>
+                    {{bulk_form.group_name}} {{bulk_form.group_name.errors}}
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                <div class="oh-input__group">
+                    <label class="oh-input__label" for="{{bulk_form.employee_id.id_for_label}}">{% trans "Employee" %}</label>
+                    {{bulk_form.employee_id}} {{bulk_form.employee_id.errors}}
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+                <div class="oh-input__group">
+                    <label class="oh-input__label" for="{{bulk_form.start_date.id_for_label}}">{% trans "Start Date" %}</label>
+                    {{bulk_form.start_date}} {{bulk_form.start_date.errors}}
+                </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+                <div class="oh-input__group">
+                    <label class="oh-input__label" for="{{bulk_form.end_date.id_for_label}}">{% trans "End Date" %}</label>
+                    {{bulk_form.end_date}} {{bulk_form.end_date.errors }}
+                </div>
+            </div>
+        </div>
+        <div class="oh-modal__dialog-footer p-0 pt-4">
+            <input type="submit" value="Generate Payslips" class="oh-btn oh-btn--secondary oh-btn--shadow" />
+        </div>
+    </form>
+</div>
diff --git a/payroll/templates/payroll/payslip/create_payslip.html b/payroll/templates/payroll/payslip/create_payslip.html
index 1b8a1d065..dcf45ad72 100644
--- a/payroll/templates/payroll/payslip/create_payslip.html
+++ b/payroll/templates/payroll/payslip/create_payslip.html
@@ -1,49 +1,52 @@
-{% load i18n %}
-<form
-  action="{% url 'create-payslip' %}"
-  class="oh-profile-section pt-1"
-  method="post"
->
-  {% csrf_token %}
-  <div class="row">
-    <div class="col-12">
-      <div class="oh-input__group">
-        <label
-          class="oh-input__label"
-          for="{{individual_form.employee_id.id_for_label}}"
-          >{% trans "Employee" %}</label
-        >
-        {{individual_form.employee_id}} {{individual_form.employee_id.errors}}
-      </div>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-      <div class="oh-input__group">
-        <label
-          class="oh-input__label"
-          for="{{individual_form.start_date.id_for_label}}"
-          >{% trans "Start Date" %}</label
-        >
-        {{individual_form.start_date}} {{individual_form.start_date.errors}}
-      </div>
-    </div>
-    <div class="col-12 col-sm-12 col-md-6 col-lg-6">
-      <div class="oh-input__group">
-        <label
-          class="oh-input__label"
-          for="{{individual_form.end_date.id_for_label}}"
-          >{% trans "End Date" %}</label
-        >
-        {{individual_form.end_date}} {{individual_form.end_date.errors }}
-      </div>
-    </div>
-  </div>
-  <div class="oh-modal__dialog-footer p-0 pt-4">
-    <input
-      type="submit"
-      value="Save"
-      class="oh-btn oh-btn--secondary oh-btn--shadow"
-    />
-  </div>
-</form>
+{% load i18n %} {% load static %}
+<div class="oh-modal__dialog-header pb-0">
+    <h1 class="oh-modal__dialog-title" id="addEmployeeModalLabel">
+        {% trans "Create Payslip" %}
+    </h1>
+    <button class="oh-modal__close" aria-label="Close">
+        <ion-icon name="close-outline"></ion-icon>
+    </button>
+</div>
+<div class="oh-modal__dialog-body" id="individualPayslipModal">
+    <form hx-post="{% url 'create-payslip' %}" hx-target="#objectCreateModalTarget" class="oh-profile-section pt-1"
+        id="payslipCreateForm">
+        {% csrf_token %}
+        <div class="row">
+            <div class="col-12">
+                <div class="oh-input__group">
+                    <label class="oh-input__label" for="{{individual_form.employee_id.id_for_label}}">{% trans "Employee" %}</label>
+                    {{individual_form.employee_id}} {{individual_form.employee_id.errors}}
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                <div id="contractStartDateDiv" class="mt-2"></div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+                <div class="oh-input__group">
+                    <label class="oh-input__label" for="{{individual_form.start_date.id_for_label}}">{% trans "Start Date" %}</label>
+                    {{individual_form.start_date}} {{individual_form.start_date.errors}}
+                </div>
+            </div>
+            <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+                <div class="oh-input__group">
+                    <label class="oh-input__label" for="{{individual_form.end_date.id_for_label}}">{% trans "End Date" %}</label>
+                    {{individual_form.end_date}} {{individual_form.end_date.errors }}
+                </div>
+            </div>
+        </div>
+        <div class="oh-modal__dialog-footer p-0 pt-4">
+            <input type="submit" value="Save" class="oh-btn oh-btn--secondary oh-btn--shadow" />
+        </div>
+    </form>
+</div>
+<script>
+    $(document).ready(function () {
+        $("select").on("select2:select", function (e) {
+            $(this).closest("select")[0].dispatchEvent(new Event("change"));
+        });
+    });
+</script>
diff --git a/payroll/templates/payroll/payslip/individual_payslip.html b/payroll/templates/payroll/payslip/individual_payslip.html
index b91f9945e..3c8eab402 100644
--- a/payroll/templates/payroll/payslip/individual_payslip.html
+++ b/payroll/templates/payroll/payslip/individual_payslip.html
@@ -54,63 +54,4 @@
     <!-- End of Payslip Payable -->
   </div>
 </div>
-
-<!-- Time-Off Approval -->
-<div
-  class="oh-modal"
-  id="paySlipModal"
-  role="dialog"
-  aria-labelledby="paySlipModal"
-  aria-hidden="true"
->
-  <div class="oh-modal__dialog">
-    <div class="oh-modal__dialog-header">
-      <button class="oh-modal__close" aria-label="Close">
-        <ion-icon name="close-outline"></ion-icon>
-      </button>
-    </div>
-    <div class="oh-modal__dialog-body px-4">
-      <div class="oh-input-group">
-        <input type="radio" value="0" name="type" id="type1" class="oh-input" />
-        <label class="oh-label" for="type1">{% trans "Type A" %}</label>
-        <input type="radio" value="0" name="type" id="type2" class="oh-input" />
-        <label class="oh-label" for="type2">{% trans "Type B" %}</label>
-      </div>
-      <div class="oh-input-group">
-        <label class="oh-label">{% trans "Type" %}</label>
-        <select class="oh-select oh-select--sm oh-select-no-search w-100">
-          <option selected>{% trans "Option #1" %}</option>
-          <option>{% trans "Option #2" %}</option>
-        </select>
-      </div>
-    </div>
-  </div>
-</div>
-
-<div id="messageContainer"></div>
-
-{% comment %} <script>
-  $("#id_status").change(function (e) {
-    var endDate = "{{instance.end_date|date:'Y-m-d'}}"
-    var startDate = "{{instance.start_date|date:'Y-m-d'}}"
-    var status = $(this).val();
-
-    e.preventDefault();
-    $.ajax({
-      type: "get",
-      url: "{% url 'payslip-status-update' instance.id %}",
-      data: {"status":status},
-      success: function (response) {
-        console.log(response)
-        $("#messageContainer").html($($(`
-        <div class="oh-alert-container">
-          <div class="oh-alert oh-alert--animated  oh-alert--${response.type}">
-            ${response.message}
-          </div>
-        </div>`)
-        ))
-      }
-    });
-  });
-</script> {% endcomment %}
 {% endblock content %}
diff --git a/payroll/templates/payroll/payslip/individual_payslip_summery.html b/payroll/templates/payroll/payslip/individual_payslip_summery.html
index d22d1b825..b4bb9108d 100644
--- a/payroll/templates/payroll/payslip/individual_payslip_summery.html
+++ b/payroll/templates/payroll/payslip/individual_payslip_summery.html
@@ -1,254 +1,229 @@
 {% load i18n horillafilters %}
 {% 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>
 {% endif %}
 <div class="oh-payslip__summary">
     <div class="oh-payslip__user-detail">
-      <h3 class="oh-payslip__employee-title">
-        {% trans "Employee Details" %}
-      </h3>
-      <ul class="oh-payslip__employee-details">
-        <li class="oh-payslip__employee-detail">
-          <span class="oh-payslip__employee-detail-title"
-            >{% trans "Employee ID" %}</span
-          >
-          <span class="oh-payslip__employee-detail-value"
-            >{{employee.badge_id}}</span
-          >
-        </li>
-        <li class="oh-payslip__employee-detail">
-          <span class="oh-payslip__employee-detail-title"
-            >{% trans "Employee Name" %}</span
-          >
-          <span class="oh-payslip__employee-detail-value">{{employee}}</span>
-        </li>
-        <li class="oh-payslip__employee-detail">
-          <span class="oh-payslip__employee-detail-title"
-            >{% trans "Department" %}</span
-          >
-          <span class="oh-payslip__employee-detail-value"
-            >{{employee.employee_work_info.department_id.department}}</span
-          >
-        </li>
-        <li class="oh-payslip__employee-detail">
-          <span class="oh-payslip__employee-detail-title"
-            >{% trans "Bank Acc./Cheque No." %}</span
-          >
-          <span class="oh-payslip__employee-detail-value"
-            >{{employee.employee_bank_details.account_number}}</span
-          >
-        </li>
-      </ul>
+        <h3 class="oh-payslip__employee-title">
+            {% trans "Employee Details" %}
+        </h3>
+        <ul class="oh-payslip__employee-details">
+            <li class="oh-payslip__employee-detail">
+                <span class="oh-payslip__employee-detail-title">{% trans "Employee ID" %}</span>
+                <span class="oh-payslip__employee-detail-value">{{employee.badge_id}}</span>
+            </li>
+            <li class="oh-payslip__employee-detail">
+                <span class="oh-payslip__employee-detail-title">{% trans "Employee Name" %}</span>
+                <span class="oh-payslip__employee-detail-value">{{employee}}</span>
+            </li>
+            <li class="oh-payslip__employee-detail">
+                <span class="oh-payslip__employee-detail-title">{% trans "Department" %}</span>
+                <span
+                    class="oh-payslip__employee-detail-value">{{employee.employee_work_info.department_id.department}}</span>
+            </li>
+            <li class="oh-payslip__employee-detail">
+                <span class="oh-payslip__employee-detail-title">{% trans "Bank Acc./Cheque No." %}</span>
+                <span class="oh-payslip__employee-detail-value">{{employee.employee_bank_details.account_number}}</span>
+            </li>
+        </ul>
     </div>
 
     <div class="oh-payslip__netpay" style="text-align:left; border-radius: 15px; border: 1px solid hsl(213,22%,84%);">
-      <div style="border-radius: 15px; background-color: #d2f8d7; padding: 10px; border-left: 3px solid #00cc66;">
-        <span class="oh-payslip__netpay-amount">{{ net_pay|floatformat:2|currency_symbol_position }}</span>
-
-          <span class="oh-payslip__netpay-title">{% trans "Employee Net Pay" %}</span>
-      </div>
-      <div class="payslip__netpay__summary">
-          <span class="oh-payslip__netpay-title">{% trans "Actual Basic Pay" %} <small style="margin-left:36px; font-weight:bold;">: {{instance.contract_wage|currency_symbol_position}}</small></span>
-          <span class="oh-payslip__netpay-title">{% trans "Paid Days" %} <small style="margin-left:86px;font-weight:bold;">: {{paid_days}}</small> </span>
-          <span class="oh-payslip__netpay-title">{% trans "LOP Days" %} <small style="margin-left:93px ;font-weight:bold;">: {{unpaid_days}}</small> </span>
-          <span class="oh-payslip__netpay-title">
-              {% trans "Updated Basic Pay" %}
-                <small style="margin-left:20px;font-weight:bold;">: {{basic_pay|floatformat:2|currency_symbol_position}}
-
-                <br><i style="font-style: italic; margin-left: 10px; font-weight: normal;"><ion-icon name="information-circle-outline" style="color:blue;"></ion-icon>{% trans "The payslip is calculated based on the updated basic pay" %}</i>
-
-              </small>
-          </span>
-      </div>
+        <div style="border-radius: 15px; background-color: #d2f8d7; padding: 10px; border-left: 3px solid #00cc66;">
+            <span class="oh-payslip__netpay-amount">{{ net_pay|floatformat:2|currency_symbol_position }}</span>
+            <span class="oh-payslip__netpay-title">{% trans "Employee Net Pay" %}</span>
+        </div>
+        <div class="payslip__netpay__summary">
+            <span class="oh-payslip__netpay-title">{% trans "Actual Basic Pay" %}
+                <small style="margin-left:36px; font-weight:bold;">: {{instance.contract_wage|currency_symbol_position}}</small>
+            </span>
+            <span class="oh-payslip__netpay-title">{% trans "Paid Days" %}
+                <small style="margin-left:86px;font-weight:bold;">: {{paid_days}}</small>
+            </span>
+            <span class="oh-payslip__netpay-title">{% trans "LOP Days" %}
+                <small style="margin-left:93px ;font-weight:bold;">: {{unpaid_days}}</small>
+            </span>
+            <span class="oh-payslip__netpay-title">
+                {% trans "Updated Basic Pay" %}
+                <small style="margin-left:20px;font-weight:bold;">: {{basic_pay|floatformat:2|currency_symbol_position}}<br>
+                    <i style="font-style: italic; margin-left: 10px; font-weight: normal;">
+                        <ion-icon name="information-circle-outline" style="color:blue;"></ion-icon>
+                        {% trans "The payslip is calculated based on the updated basic pay" %}
+                    </i>
+                </small>
+            </span>
+        </div>
     </div>
-  </div>
-  <!-- End of Payslip Table -->
+</div>
+<!-- End of Payslip Table -->
 
-  <!-- Payslip Table -->
-  <div class="oh-payslip__table-container" style="margin-top:0.5rem">
+<!-- Payslip Table -->
+<div class="oh-payslip__table-container" style="margin-top:0.5rem">
     <table class="oh-payslip__table">
-      <thead class="oh-payslip__table-thead">
-        <tr class="oh-payslip__table-row">
-          <th class="oh-payslip__table-th">{% trans "Allowances" %}</th>
-          <th class="oh-payslip__table-th">{% trans "Amount" %}</th>
-          <th class="oh-payslip__table-th">
-            {% if perms.payroll.add_allowance and instance.status != "paid"  %}
-                <button title="{% trans 'Add Allowance' %}" class="oh-btn oh-btn--secondary-outline oh-stop-prop oh-accordion-meta__btn p-2"
-                        hx-get="{% url "add-bonus" %}?employee_id={{employee.id}}&payslip_id={{instance.id}}" hx-target="#addBonusModalBody"
-                        data-target="#addBonusModal" data-toggle="oh-modal-toggle"
-                        >
-                    <ion-icon class="md hydrated" name="add-outline" role="img" aria-label="add outline"></ion-icon>
-                </button>
-            {% endif %}
-          </th>
-        </tr>
-      </thead>
-      <tbody class="oh-payslip__table-tbody">
-        <tr class="oh-payslip__table-tr">
-          <td
-            class="oh-payslip__table-td"
-            title="{% trans 'Some deductions will update basic pay before payslip calculation starts, eg: LOP is Deduducted from basic pay if `Deduct leave from basic pay` field is enabled on the contract, and also with the update compensation deduction through' %}"
-          >
-            {% trans "Basic Pay" %}
-          </td>
-          <td class="oh-payslip__table-td" colspan="2">
-            {{basic_pay|floatformat:2|currency_symbol_position}}
-          </td>
-        </tr>
-        {% for allowance in allowances %}
-          <tr>
-            <td class="oh-payslip__table-td">{{allowance.title}}</td>
-            <td class="oh-payslip__table-td">
-              {{allowance.amount|floatformat:2|currency_symbol_position}}
-            </td>
-          </tr>
-        {% endfor %}
-      </tbody>
-      <tfoot class="oh-payslip__table-tfoot">
-        <tr class="oh-payslip__table-tr">
-          <th
-            class="oh-payslip__table-tf oh-label__info"
-          >
-            {% trans "Total Gross Pay" %}
-            <span class="oh-info mb-1" title="{% trans 'Some Deduction will update the total gross pay using the deductions that are enabled update compensation' %}"></span>
-          </th>
-          <th class="oh-payslip__table-tf">
-            {{gross_pay|floatformat:2|currency_symbol_position}}
-          </th>
-        </tr>
-      </tfoot>
+        <thead class="oh-payslip__table-thead">
+            <tr class="oh-payslip__table-row">
+                <th class="oh-payslip__table-th">{% trans "Allowances" %}</th>
+                <th class="oh-payslip__table-th">{% trans "Amount" %}</th>
+                <th class="oh-payslip__table-th">
+                    {% if perms.payroll.add_allowance and instance.status != "paid" %}
+                        <button title="{% trans 'Add Allowance' %}"
+                            class="oh-btn oh-btn--secondary-outline oh-stop-prop oh-accordion-meta__btn p-2"
+                            hx-get="{% url 'add-bonus' %}?employee_id={{employee.id}}&payslip_id={{instance.id}}"
+                            hx-target="#objectCreateModalTarget" data-target="#objectCreateModal"
+                            data-toggle="oh-modal-toggle">
+                            <ion-icon class="md hydrated" name="add-outline" role="img" aria-label="add outline"></ion-icon>
+                        </button>
+                    {% endif %}
+                </th>
+            </tr>
+        </thead>
+        <tbody class="oh-payslip__table-tbody">
+            <tr class="oh-payslip__table-tr">
+                <td class="oh-payslip__table-td"
+                    title="{% trans 'Some deductions will update basic pay before payslip calculation starts, eg: LOP is Deduducted from basic pay if `Deduct leave from basic pay` field is enabled on the contract, and also with the update compensation deduction through' %}">
+                    {% trans "Basic Pay" %}
+                </td>
+                <td class="oh-payslip__table-td" colspan="2">
+                    {{basic_pay|floatformat:2|currency_symbol_position}}
+                </td>
+            </tr>
+            {% for allowance in allowances %}
+                <tr>
+                    <td class="oh-payslip__table-td">{{allowance.title}}</td>
+                    <td class="oh-payslip__table-td">
+                        {{allowance.amount|floatformat:2|currency_symbol_position}}
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+        <tfoot class="oh-payslip__table-tfoot">
+            <tr class="oh-payslip__table-tr">
+                <th class="oh-payslip__table-tf oh-label__info">
+                    {% trans "Total Gross Pay" %}
+                    <span class="oh-info mb-1"
+                        title="{% trans 'Some Deduction will update the total gross pay using the deductions that are enabled update compensation' %}"></span>
+                </th>
+                <th class="oh-payslip__table-tf">
+                    {{gross_pay|floatformat:2|currency_symbol_position}}
+                </th>
+            </tr>
+        </tfoot>
     </table>
 
     <table class="oh-payslip__table">
-      <thead class="oh-payslip__table-thead">
-        <tr class="oh-payslip__table-row">
-          <th class="oh-payslip__table-th">{% trans "Deductions" %}</th>
-          <th class="oh-payslip__table-th">{% trans "Amount" %}</th>
-          <th class="oh-payslip__table-th">
-            {% if perms.payroll.add_deduction and instance.status != "paid" %}
-                <button title="{% trans 'Add Deduction' %}" class="oh-btn oh-btn--secondary-outline oh-stop-prop oh-accordion-meta__btn p-2"
-                        hx-get="{% url "add-payslip-deduction" %}?employee_id={{employee.id}}&payslip_id={{instance.id}}" hx-target="#addDeductionFormModal"
-                        data-target="#addDeductionModal" data-toggle="oh-modal-toggle"
-                        >
-                    <ion-icon class="md hydrated" name="add-outline" role="img" aria-label="add outline"></ion-icon>
-                </button>
-            {% endif %}
-          </th>
-        </tr>
-      </thead>
-      <tbody class="oh-payslip__table-tbody">
-        <tr class="oh-payslip__table-tr">
-          <td class="oh-payslip__table-td">{% trans "Loss of Pay" %}</td>
-          <td class="oh-payslip__table-td">
-            {{loss_of_pay|floatformat:2|currency_symbol_position}}
-          </td>
-        </tr>
-        {% for deduction in basic_pay_deductions %}
-          <tr class="oh-payslip__table-tr">
-            <td class="oh-payslip__table-td">{{deduction.title}}</td>
-            <td class="oh-payslip__table-td">
-              {{deduction.amount|floatformat:2|currency_symbol_position}}
-            </td>
-          </tr>
-        {% endfor %}
-        {% for deduction in gross_pay_deductions %}
-          <tr class="oh-payslip__table-tr">
-            <td class="oh-payslip__table-td">{{deduction.title}}</td>
-            <td class="oh-payslip__table-td">
-              {{deduction.amount|floatformat:2|currency_symbol_position}}
-            </td>
-          </tr>
-        {% endfor %}
-        {% for deduction in pretax_deductions %}
-          <tr class="oh-payslip__table-tr">
-            <td class="oh-payslip__table-td">{{deduction.title}}</td>
-            <td class="oh-payslip__table-td">
-              {{deduction.amount|floatformat:2|currency_symbol_position}}
-            </td>
-          </tr>
-        {% endfor %}
-        {% for deduction in post_tax_deductions %}
-          <tr class="oh-payslip__table-tr">
-            <td class="oh-payslip__table-td">{{deduction.title}}</td>
-            <td class="oh-payslip__table-td">
-              {{deduction.amount|floatformat:2|currency_symbol_position}}
-            </td>
-          </tr>
-        {% endfor %}
-
-        <tr class="oh-payslip__table-tr">
-          <td class="oh-payslip__table-td">{% trans "Federal Tax" %}</td>
-          <td class="oh-payslip__table-td">
-            {{federal_tax|floatformat:2|currency_symbol_position}}
-          </td>
-        </tr>
-
-        {% for deduction in tax_deductions %}
-          <tr class="oh-payslip__table-tr">
-            <td class="oh-payslip__table-td">{{deduction.title}}</td>
-              <td class="oh-payslip__table-td">
-                {{deduction.amount|floatformat:2|currency_symbol_position}}
-              </td>
-          </tr>
-        {% endfor %}
-        {% for deduction in net_deductions %}
-          <tr class="oh-payslip__table-tr">
-            <td class="oh-payslip__table-td">{{deduction.title}}</td>
-            <td class="oh-payslip__table-td">
-              {{deduction.amount|floatformat:2|currency_symbol_position}}
-            </td>
-          </tr>
-        {% endfor %}
-      </tbody>
-      <tfoot class="oh-payslip__table-tfoot">
-        <tr class="oh-payslip__table-tr">
-          <th
-            class="oh-payslip__table-tf oh-label__info"
-          >
-            {% trans "Total Deductions" %}
-            <span class="oh-info mb-1" title="{% trans 'Some deductions are not included in the total deductions because they are given as updated compensations. These deductions may be applied before the main calculation begins, such as from the basic pay or gross pay, while others are deducted after calculating the net pay.' %}"></span>
-          </th>
-          <th class="oh-payslip__table-tf">
-            {{total_deductions|floatformat:2|currency_symbol_position}}
-          </th>
-        </tr>
-      </tfoot>
+        <thead class="oh-payslip__table-thead">
+            <tr class="oh-payslip__table-row">
+                <th class="oh-payslip__table-th">{% trans "Deductions" %}</th>
+                <th class="oh-payslip__table-th">{% trans "Amount" %}</th>
+                <th class="oh-payslip__table-th">
+                    {% if perms.payroll.add_deduction and instance.status != "paid" %}
+                        <button title="{% trans 'Add Deduction' %}"
+                            class="oh-btn oh-btn--secondary-outline oh-stop-prop oh-accordion-meta__btn p-2"
+                            hx-get="{% url 'add-payslip-deduction' %}?employee_id={{employee.id}}&payslip_id={{instance.id}}" hx-target="#objectCreateModalTarget"
+                            data-target="#objectCreateModal" data-toggle="oh-modal-toggle">
+                            <ion-icon class="md hydrated" name="add-outline" role="img" aria-label="add outline"></ion-icon>
+                        </button>
+                    {% endif %}
+                </th>
+            </tr>
+        </thead>
+        <tbody class="oh-payslip__table-tbody">
+            <tr class="oh-payslip__table-tr">
+                <td class="oh-payslip__table-td">{% trans "Loss of Pay" %}</td>
+                <td class="oh-payslip__table-td">
+                    {{loss_of_pay|floatformat:2|currency_symbol_position}}
+                </td>
+            </tr>
+            {% for deduction in basic_pay_deductions %}
+                <tr class="oh-payslip__table-tr">
+                    <td class="oh-payslip__table-td">{{deduction.title}}</td>
+                    <td class="oh-payslip__table-td">
+                        {{deduction.amount|floatformat:2|currency_symbol_position}}
+                    </td>
+                </tr>
+            {% endfor %}
+            {% for deduction in gross_pay_deductions %}
+                <tr class="oh-payslip__table-tr">
+                    <td class="oh-payslip__table-td">{{deduction.title}}</td>
+                    <td class="oh-payslip__table-td">
+                        {{deduction.amount|floatformat:2|currency_symbol_position}}
+                    </td>
+                </tr>
+            {% endfor %}
+            {% for deduction in pretax_deductions %}
+                <tr class="oh-payslip__table-tr">
+                    <td class="oh-payslip__table-td">{{deduction.title}}</td>
+                    <td class="oh-payslip__table-td">
+                        {{deduction.amount|floatformat:2|currency_symbol_position}}
+                    </td>
+                </tr>
+            {% endfor %}
+            {% for deduction in post_tax_deductions %}
+                <tr class="oh-payslip__table-tr">
+                    <td class="oh-payslip__table-td">{{deduction.title}}</td>
+                    <td class="oh-payslip__table-td">
+                        {{deduction.amount|floatformat:2|currency_symbol_position}}
+                    </td>
+                </tr>
+            {% endfor %}
+            <tr class="oh-payslip__table-tr">
+                <td class="oh-payslip__table-td">{% trans "Federal Tax" %}</td>
+                <td class="oh-payslip__table-td">
+                    {{federal_tax|floatformat:2|currency_symbol_position}}
+                </td>
+            </tr>
+            {% for deduction in tax_deductions %}
+                <tr class="oh-payslip__table-tr">
+                    <td class="oh-payslip__table-td">{{deduction.title}}</td>
+                    <td class="oh-payslip__table-td">
+                        {{deduction.amount|floatformat:2|currency_symbol_position}}
+                    </td>
+                </tr>
+            {% endfor %}
+            {% for deduction in net_deductions %}
+                <tr class="oh-payslip__table-tr">
+                    <td class="oh-payslip__table-td">{{deduction.title}}</td>
+                    <td class="oh-payslip__table-td">
+                        {{deduction.amount|floatformat:2|currency_symbol_position}}
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+        <tfoot class="oh-payslip__table-tfoot">
+            <tr class="oh-payslip__table-tr">
+                <th class="oh-payslip__table-tf oh-label__info">
+                    {% trans "Total Deductions" %}
+                    <span class="oh-info mb-1"
+                        title="{% trans 'Some deductions are not included in the total deductions because they are given as updated compensations. These deductions may be applied before the main calculation begins, such as from the basic pay or gross pay, while others are deducted after calculating the net pay.' %}"></span>
+                </th>
+                <th class="oh-payslip__table-tf">
+                    {{total_deductions|floatformat:2|currency_symbol_position}}
+                </th>
+            </tr>
+        </tfoot>
     </table>
-  </div>
-  <!-- End of Payslip Table -->
+</div>
+<!-- End of Payslip Table -->
 
-  <!-- Payslip Payable -->
-  <div class="oh-payslip__net-payable">
+<!-- Payslip Payable -->
+<div class="oh-payslip__net-payable">
     <div class="oh-payslip__net-payable-left">
-      <h2 class="oh-payslip__net-payable-title">
-        {% trans "Total Net Payable" %}
-      </h2>
-      <p class="oh-payslip__net-payable-subtext">
-        {% trans "Gross Earnings - Total Deductions" %}
-      </p>
+        <h2 class="oh-payslip__net-payable-title">
+            {% trans "Total Net Payable" %}
+        </h2>
+        <p class="oh-payslip__net-payable-subtext">
+            {% trans "Gross Earnings - Total Deductions" %}
+        </p>
     </div>
     <div class="oh-payslip__net-payable-right">
-      <span class="oh-payslip__net-payable-amount">{{net_pay|floatformat:2|currency_symbol_position}}</span>
-    </div>
-  </div>
-</div>
-<div class="oh-modal" id="addBonusModal" role="dialog" aria-labelledby="addBonusModalLabel" aria-hidden="true">
-    <div class="oh-modal__dialog" id="addBonusModalBody"> </div>
-  </div>
-
-  <div class="oh-modal" id="addDeductionModal" aria-labelledby="addDeductionModalLabel" role="dialog" aria-hidden="true">
-    <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" style="margin-top: 34px;margin-right: 34px;"><ion-icon name="close-outline"></ion-icon></button>
-      </div>
-      <div class="oh-modal__dialog-body" id="addDeductionFormModal"></div>
+        <span class="oh-payslip__net-payable-amount">{{net_pay|floatformat:2|currency_symbol_position}}</span>
     </div>
 </div>
diff --git a/payroll/templates/payroll/payslip/payslips_empty.html b/payroll/templates/payroll/payslip/payslips_empty.html
index 4efe0f580..a3ef5cddb 100644
--- a/payroll/templates/payroll/payslip/payslips_empty.html
+++ b/payroll/templates/payroll/payslip/payslips_empty.html
@@ -1,130 +1,51 @@
 {% extends 'index.html' %} {% block content %} {% load static %}{% load i18n %}
-
-<div
-  class="oh-modal"
-  id="individualPayslipModal"
-  role="dialog"
-  aria-labelledby="individualPayslipModal"
-  aria-hidden="true"
->
-  <div class="oh-modal__dialog">
-    <div class="oh-modal__dialog-header">
-      <h1 class="oh-modal__dialog-title" id="addEmployeeModalLabel">
-        {% trans "Create Payslip" %}
-        <div class="oh-payslip__header mt-3 mb-0">
-        </div>
-      </h1>
-      <button class="oh-modal__close" aria-label="Close">
-        <ion-icon name="close-outline"></ion-icon>
-      </button>
-    </div>
-    <div class="oh-modal__dialog-body" id="individualPayslipModal">
-        <form action="{% url 'create-payslip' %}" class="" method="post">
-          {% csrf_token %} {{individual_form}}
-          <div class="oh-modal__dialog-footer mt-4">
-            <input type="submit" value="Create Payslip" class="oh-btn oh-btn--secondary oh-btn--shadow">
-        </div>
-        </form>
-    </div>
-  </div>
-</div>
-
-
-<div
-  class="oh-modal"
-  id="bulkPayslipModal"
-  role="dialog"
-  aria-labelledby="bulkPayslipModal"
-  aria-hidden="true"
->
-  <div class="oh-modal__dialog">
-    <div class="oh-modal__dialog-header">
-      <h1 class="oh-modal__dialog-title" id="addEmployeeModalLabel">
-        {% trans "Bulk Payslip" %}
-        <div class="oh-payslip__header mt-3 mb-0">
-        </div>
-      </h1>
-      <button class="oh-modal__close" aria-label="Close">
-        <ion-icon name="close-outline"></ion-icon>
-      </button>
-    </div>
-    <div class="oh-modal__dialog-body" id="bulkPayslipModal">
-        <form action="{% url 'generate-payslip' %}" class="" method="post">
-          {% csrf_token %} {{bulk_form}}
-          <div class="oh-modal__dialog-footer mt-4">
-            <input type="submit" value="Generate Payslips" class="oh-btn oh-btn--secondary oh-btn--shadow">
-        </div>
-        </form>
-    </div>
-  </div>
-</div>
 <section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
-  <div class="oh-main__titlebar oh-main__titlebar--left">
-    <h1 class="oh-main__titlebar-title fw-bold">{% trans "Payslip" %}</h1>
-  </div>
-  <div class="oh-main__titlebar-button-container">
-
-    {% if perms.payroll.add_payslip %}
-    <div class="oh-btn-group ml-2">
-      <div class="oh-dropdown" x-data="{open: false}">
-        <button
-          class="oh-btn oh-btn--dropdown "
-          @click="open = !open"
-          @click.outside="open = false"
-        >
-          {% trans "Actions" %}
-        </button>
-        <div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open" style="display: none; cursor:pointer;">
-          <ul class="oh-dropdown__items">
-            {% if perms.payroll.add_payslip %}
-            <li class="oh-dropdown__item">
-              <a
-                class="oh-dropdown__link"
-                data-toggle="oh-modal-toggle"
-                data-target="#bulkPayslipModal"
-              >{% trans "Generate" %}</a>
-            </li>
-            {% endif %}
-          </ul>
-        </div>
-      </div>
+    <div class="oh-main__titlebar oh-main__titlebar--left">
+        <h1 class="oh-main__titlebar-title fw-bold">{% trans "Payslip" %}</h1>
     </div>
-    {% endif %}
-    {% if perms.payroll.add_payslip %}
-    <div class="oh-btn-group ml-2">
-      <div>
-        <a
-          class="oh-btn oh-btn--secondary oh-btn--shadow"
-          data-toggle="oh-modal-toggle"
-          data-target="#individualPayslipModal"
-        >
-          <ion-icon
-            class="me-2 md hydrated"
-            name="add-outline"
-            role="img"
-            aria-label="add outline"
-          ></ion-icon
-          >{% trans "Create" %}</a
-        >
-      </div>
+    <div class="oh-main__titlebar-button-container">
+        {% if perms.payroll.add_payslip %}
+            <div class="oh-btn-group ml-2">
+                <div class="oh-dropdown" x-data="{open: false}">
+                    <button class="oh-btn oh-btn--dropdown " @click="open = !open" @click.outside="open = false">
+                        {% trans "Actions" %}
+                    </button>
+                    <div class="oh-dropdown__menu oh-dropdown__menu--right" x-show="open" style="display: none; cursor:pointer;">
+                        <ul class="oh-dropdown__items">
+                            <li class="oh-dropdown__item">
+                                <a class="oh-dropdown__link" data-toggle="oh-modal-toggle" data-target="#objectCreateModal"
+                                    hx-get="{% url 'generate-payslip' %}" hx-target="#objectCreateModalTarget">
+                                    {% trans "Generate" %}
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+        {% if perms.payroll.add_payslip %}
+            <div class="oh-btn-group ml-2">
+                <div>
+                    <a class="oh-btn oh-btn--secondary oh-btn--shadow" data-toggle="oh-modal-toggle"
+                        data-target="#objectCreateModal" hx-get="{% url 'create-payslip' %}"
+                        hx-target="#objectCreateModalTarget">
+                        <ion-icon class="me-2 md hydrated" name="add-outline" role="img" aria-label="add outline"></ion-icon>
+                        {% trans "Create" %}
+                    </a>
+                </div>
+            </div>
+        {% endif %}
     </div>
-    {% endif %}
-  </div>
 </section>
 
-<div
-class="oh-wrapper-main"
->
-  <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
-
-    <div class="oh-wrapper">
-      <div class="oh-404">
-          <img style="    width: 190px;height: 190px;" src="{% static 'images/ui/no-money.png' %}" class="oh-404__image mb-4" alt="Page not found. 404."/>
-          <h5 class="oh-404__subtitle">{% trans "No payslips have been generated." %}</h5>
-      </div>
-    </div>
-  </main>
+<div class="oh-wrapper-main">
+    <main :class="sidebarOpen ? 'oh-main__sidebar-visible' : ''">
+        <div class="oh-wrapper">
+            <div class="oh-404">
+                <img style="width: 190px;height: 190px;" src="{% static 'images/ui/no-money.png' %}" class="oh-404__image mb-4" alt="Page not found. 404." />
+                <h5 class="oh-404__subtitle">{% trans "No payslips have been generated." %}</h5>
+            </div>
+        </div>
+    </main>
 </div>
-</div>
-
 {% endblock content %}
diff --git a/payroll/templates/payroll/payslip/view_payslips.html b/payroll/templates/payroll/payslip/view_payslips.html
index 80c992918..2081a06a0 100644
--- a/payroll/templates/payroll/payslip/view_payslips.html
+++ b/payroll/templates/payroll/payslip/view_payslips.html
@@ -9,49 +9,6 @@
   }
 </style>
 <div id="messages"></div>
-<div
-  class="oh-modal"
-  id="individualPayslipModal"
-  role="dialog"
-  aria-labelledby="individualPayslipModal"
-  aria-hidden="true"
-  >
-  <div class="oh-modal__dialog">
-    <div class="oh-modal__dialog-header pb-0">
-      <h1 class="oh-modal__dialog-title" id="addEmployeeModalLabel">
-        {% trans "Create Payslip" %}
-      </h1>
-      <button class="oh-modal__close" aria-label="Close">
-        <ion-icon name="close-outline"></ion-icon>
-      </button>
-    </div>
-    <div class="oh-modal__dialog-body" id="individualPayslipModal">
-      {% include "payroll/payslip/create_payslip.html" %}
-    </div>
-  </div>
-</div>
-
-<div
-  class="oh-modal"
-  id="bulkPayslipModal"
-  role="dialog"
-  aria-labelledby="bulkPayslipModal"
-  aria-hidden="true"
-  >
-  <div class="oh-modal__dialog">
-    <div class="oh-modal__dialog-header pb-0">
-      <h1 class="oh-modal__dialog-title" id="addEmployeeModalLabel">
-        {% trans "Bulk Payslip" %}
-      </h1>
-      <button class="oh-modal__close" aria-label="Close">
-        <ion-icon name="close-outline"></ion-icon>
-      </button>
-    </div>
-    <div class="oh-modal__dialog-body" id="bulkPayslipModal">
-      {% include "payroll/payslip/bulk_create_payslip.html" %}
-    </div>
-  </div>
-</div>
 
 <section class="oh-wrapper oh-main__topbar" x-data="{searchShow: false}">
   <div class="oh-main__titlebar oh-main__titlebar--left">
@@ -187,7 +144,9 @@
                   <a
                     class="oh-dropdown__link"
                     data-toggle="oh-modal-toggle"
-                    data-target="#bulkPayslipModal"
+                    data-target="#objectCreateModal"
+                    hx-get="{% url 'generate-payslip' %}"
+                    hx-target="#objectCreateModalTarget"
                     >{% trans "Generate" %}</a
                   >
                 </li>
@@ -264,7 +223,9 @@
           <a
             class="oh-btn oh-btn--secondary oh-btn--shadow"
             data-toggle="oh-modal-toggle"
-            data-target="#individualPayslipModal"
+            data-target="#objectCreateModal"
+            hx-get="{% url 'create-payslip' %}"
+            hx-target="#objectCreateModalTarget"
           >
             <ion-icon
               class="md hydrated"
diff --git a/payroll/templates/payroll/reimbursement/reimbursement_comment.html b/payroll/templates/payroll/reimbursement/reimbursement_comment.html
index fcead93b3..f094508fa 100644
--- a/payroll/templates/payroll/reimbursement/reimbursement_comment.html
+++ b/payroll/templates/payroll/reimbursement/reimbursement_comment.html
@@ -145,20 +145,6 @@
 	</div>
 {% endif %}
 
-<!-- start of comment modal -->
-<div
-	class="oh-modal"
-	id="shiftcommentModal"
-	role="dialog"
-	aria-labelledby="emptagModal"
-	aria-hidden="true"
- >
-	<div class="oh-modal__dialog" id="shiftRequestCommentForm">
-	</div>
-</div>
-<!-- end of comment modal -->
-
-
 <script>
     // Get references to the input field and comment button
     const commentInput = document.getElementById('commentInput');
diff --git a/payroll/templates/payroll/reimbursement/reimbursement_request_comment_form.html b/payroll/templates/payroll/reimbursement/reimbursement_request_comment_form.html
deleted file mode 100644
index 13f3a4477..000000000
--- a/payroll/templates/payroll/reimbursement/reimbursement_request_comment_form.html
+++ /dev/null
@@ -1,26 +0,0 @@
-{% load i18n %}
-{% if form.errors %}
-<!-- form errors  -->
-    <div class="oh-wrapper">
-        <div class="oh-alert-container">
-            {% for error in form.non_field_errors %}
-            <div class="oh-alert oh-alert--animated oh-alert--danger">
-                {{ error }}
-            </div>
-            {% endfor %}
-        </div>
-    </div>
-{% endif %}
-<form
-    hx-post="{% url 'payroll-request-add-comment' request_id %}"
-    hx-target="#shiftRequestCommentForm"
-    method="post"
-    hx-encoding="multipart/form-data">
-    {% csrf_token %}
-    {{form.as_p}}
-    <div class="d-flex flex-row-reverse w-100 align-items-right">
-      <button type="submit" class="oh-btn oh-btn--secondary pl-5 pr-5">
-        {% trans "Save" %}
-      </button>
-    </div>
-</form>
diff --git a/payroll/templates/payroll/reimbursement/view_reimbursement.html b/payroll/templates/payroll/reimbursement/view_reimbursement.html
index 414f18db5..7280766ba 100644
--- a/payroll/templates/payroll/reimbursement/view_reimbursement.html
+++ b/payroll/templates/payroll/reimbursement/view_reimbursement.html
@@ -42,7 +42,7 @@
         <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" id="reimbursementModalBody"></div>
+      <div class="oh-modal__dialog-body" id="organisation-chart"></div>
     </div>
   </div>
   <div class="oh-modal" id="reimbursementAttachementModal" role="dialog" aria-hidden="true">
diff --git a/payroll/urls/component_urls.py b/payroll/urls/component_urls.py
index 105c05e3b..4d2fe9958 100644
--- a/payroll/urls/component_urls.py
+++ b/payroll/urls/component_urls.py
@@ -64,6 +64,11 @@ urlpatterns = [
         name="delete-deduction",
     ),
     path("create-payslip", component_views.create_payslip, name="create-payslip"),
+    path(
+        "check-contract-start-date",
+        component_views.check_contract_start_date,
+        name="check-contract-start-date",
+    ),
     path("generate-payslip", component_views.generate_payslip, name="generate-payslip"),
     path(
         "validate-start-date",
diff --git a/payroll/views/component_views.py b/payroll/views/component_views.py
index 7e46fea3d..53cf6c320 100644
--- a/payroll/views/component_views.py
+++ b/payroll/views/component_views.py
@@ -19,6 +19,7 @@ from django.db.models import Sum
 from django.http import HttpResponse, HttpResponseRedirect, JsonResponse, QueryDict
 from django.shortcuts import redirect, render
 from django.urls import reverse
+from django.utils.html import format_html
 from django.utils.translation import gettext_lazy as _
 from openpyxl import Workbook
 from openpyxl.styles import Alignment, Border, Font, Side
@@ -706,6 +707,16 @@ def generate_payslip(request):
     Requires the user to be logged in and have the 'payroll.add_payslip' permission.
 
     """
+    if (
+        request.META.get("HTTP_HX_REQUEST")
+        and request.META.get("HTTP_HX_TARGET") == "objectCreateModalTarget"
+    ):
+        bulk_form = forms.GeneratePayslipForm()
+        return render(
+            request,
+            "payroll/payslip/bulk_create_payslip.html",
+            {"bulk_form": bulk_form},
+        )
     payslips = []
     json_data = []
     form = forms.GeneratePayslipForm()
@@ -764,6 +775,45 @@ def generate_payslip(request):
     return render(request, "payroll/common/form.html", {"form": form})
 
 
+@login_required
+@hx_request_required
+def check_contract_start_date(request):
+    """
+    Check if the employee's contract start date is after the provided payslip start date.
+    """
+    employee_id = request.GET.get("employee_id")
+    start_date = request.GET.get("start_date")
+
+    contract = payroll.models.models.Contract.objects.filter(
+        employee_id=employee_id, contract_status="active"
+    ).first()
+
+    if not contract or start_date >= str(contract.contract_start_date):
+        return HttpResponse("")
+
+    title_message = _(
+        "When this payslip is run, the payslip start date will be updated to match the employee contract start date."
+    )
+    text_content = _("Employee Contract Start Date")
+
+    return HttpResponse(
+        format_html(
+            """
+        <div id='messageDiv' style='background-color: hsl(48, 100%, 94%);
+            border: 1px solid hsl(46, 97%, 88%);
+            border-radius: 18px; padding:5px; font-weight: bold; display: flex;'>
+            {text_content}: {contract_start_date}
+            <img style='width: 20px; height: 20px; cursor: pointer;'
+                src='/static/images/ui/info.png' class='ml-2' title='{title_message}'>
+        </div>
+        """,
+            text_content=text_content,
+            contract_start_date=contract.contract_start_date,
+            title_message=title_message,
+        )
+    )
+
+
 @login_required
 @permission_required("payroll.add_payslip")
 def create_payslip(request, new_post_data=None):
@@ -780,8 +830,26 @@ def create_payslip(request, new_post_data=None):
     """
     if new_post_data:
         request.POST = new_post_data
+
     form = forms.PayslipForm()
+
     if request.method == "POST":
+        employee_id = request.POST.get("employee_id")
+        start_date = (
+            datetime.strptime(request.POST.get("start_date"), "%Y-%m-%d").date()
+            if isinstance(request.POST.get("start_date"), str)
+            else request.POST.get("start_date")
+        )
+
+        if employee_id and start_date:
+            contract = payroll.models.models.Contract.objects.filter(
+                employee_id=employee_id, contract_status="active"
+            ).first()
+
+            if contract and start_date < contract.contract_start_date:
+                new_post_data = request.POST.copy()
+                new_post_data["start_date"] = contract.contract_start_date
+                request.POST = new_post_data
         form = forms.PayslipForm(request.POST)
         if form.is_valid():
             employee = form.cleaned_data["employee_id"]
@@ -795,11 +863,6 @@ def create_payslip(request, new_post_data=None):
                 employee = form.cleaned_data["employee_id"]
                 start_date = form.cleaned_data["start_date"]
                 end_date = form.cleaned_data["end_date"]
-                contract = payroll.models.models.Contract.objects.filter(
-                    employee_id=employee, contract_status="active"
-                ).first()
-                if start_date < contract.contract_start_date:
-                    start_date = contract.contract_start_date
                 payslip_data = payroll_calculation(employee, start_date, end_date)
                 payslip_data["payslip"] = payslip
                 data = {}
@@ -836,12 +899,14 @@ def create_payslip(request, new_post_data=None):
                     ),
                     icon="close",
                 )
-                return render(
-                    request,
-                    "payroll/payslip/individual_payslip.html",
-                    payslip_data,
+                return HttpResponse(
+                    f'<script>window.location.href = "/payroll/view-payslip/{payslip_data["instance"].id}/"</script>'
                 )
-    return render(request, "payroll/common/form.html", {"form": form})
+    return render(
+        request,
+        "payroll/payslip/create_payslip.html",
+        {"individual_form": form},
+    )
 
 
 @login_required
@@ -919,7 +984,6 @@ def view_payslip(request):
     export_column = forms.PayslipExportColumnForm()
     filter_form = PayslipFilter(request.GET, payslips)
     payslips = filter_form.qs
-    individual_form = forms.PayslipForm()
     bulk_form = forms.GeneratePayslipForm()
     field = request.GET.get("group_by")
     if field in Payslip.__dict__.keys():
@@ -936,7 +1000,6 @@ def view_payslip(request):
             "f": filter_form,
             "export_column": export_column,
             "export_filter": PayslipFilter(request.GET),
-            "individual_form": individual_form,
             "bulk_form": bulk_form,
             "filter_dict": data_dict,
             "gp_fields": PayslipReGroup.fields,
@@ -1260,8 +1323,6 @@ def view_loans(request):
     loan = records.filter(type="loan")
     adv_salary = records.filter(type="advanced_salary")
     fine = records.filter(type="fine")
-    print("______________________________________________----------------------------")
-    print(records)
 
     fine_ids = json.dumps(list(fine.values_list("id", flat=True)))
     loan_ids = json.dumps(list(loan.values_list("id", flat=True)))
diff --git a/payroll/views/views.py b/payroll/views/views.py
index 73cacc98b..d8e657948 100644
--- a/payroll/views/views.py
+++ b/payroll/views/views.py
@@ -181,7 +181,7 @@ def contract_status_update(request, contract_id):
             for errors in contract_form.errors.values():
                 for error in errors:
                     messages.error(request, error)
-        return HttpResponse("<script>window.location.reload()</script>")
+        return HttpResponse("<script>$('#reloadMessagesButton').click()</script>")
 
 
 @login_required