From a800dd157744199780960496288e787e8753a5f4 Mon Sep 17 00:00:00 2001
From: Srinivas-Saravanan <srinivas.saravanan@venbainfotech.com>
Date: Mon, 6 Jan 2025 12:41:30 +0530
Subject: [PATCH] FEAT_ROW_CLICK_ACTION_EVENT_TRIGGER_SRINIVAS

---
 app/Controllers/LeadsController.php           |   4 +-
 app/Views/business_team_list.php              | 121 +++++++++++--
 app/Views/cd_master_list.php                  | 123 +++++++++++---
 app/Views/client_list.php                     | 144 ++++++++++++++++
 app/Views/employee_list.php                   | 114 +++++++++++++
 app/Views/file_list.php                       | 117 +++++++++++++
 app/Views/finance_team_list.php               | 121 +++++++++++--
 app/Views/insurer_list.php                    | 159 +++++++++++++++++
 app/Views/insurer_statement_list.php          | 160 +++++++++++++++---
 app/Views/kyc_list.php                        | 155 +++++++++++++++++
 app/Views/leads_list.php                      | 158 +++++++++++++++++
 .../policy_transaction_endorsement_list.php   | 155 +++++++++++++++--
 .../policy_transaction_inception_list.php     | 158 ++++++++++++++---
 app/Views/policy_type_list.php                | 152 +++++++++++++++++
 app/Views/test_members_list.php               | 115 +++++++++++++
 app/Views/tpa_list.php                        | 156 +++++++++++++++++
 app/Views/vehicle_master_list.php             | 123 +++++++++++---
 17 files changed, 2107 insertions(+), 128 deletions(-)

diff --git a/app/Controllers/LeadsController.php b/app/Controllers/LeadsController.php
index edf882ba..6140f45e 100644
--- a/app/Controllers/LeadsController.php
+++ b/app/Controllers/LeadsController.php
@@ -135,8 +135,8 @@ class LeadsController extends BaseController
         // dd($data);
 
         // Fetch leads data
-        $data['lead_data_list'] = $this->leadsModel->getLeadDataForLising();
-
+        $data   ['lead_data_list'] = $this->leadsModel->getLeadDataForLising();
+        
         // Load layout and pass data
         $this->loadLayout('leads_list', $data);
     }
diff --git a/app/Views/business_team_list.php b/app/Views/business_team_list.php
index 57a1db4a..81977a54 100644
--- a/app/Views/business_team_list.php
+++ b/app/Views/business_team_list.php
@@ -16,6 +16,32 @@ table.dataTable tbody td {
 .dataTables_filter {
     position: absolute;
 }
+.custom-dropdown-menu {
+    display: none;
+    position: absolute;
+    background-color: #ffffff !important;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    min-width: 10rem;
+    z-index: 9999;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.custom-dropdown-menu .dropdown-item {
+    display: block !important;
+    width: 100% !important;
+    padding: 0.5rem 1rem !important;
+    color: #212529 !important;
+    text-decoration: none !important;
+    background-color: transparent !important;
+}
+
+.custom-dropdown-menu .dropdown-item:hover {
+    background-color: #f8f9fa !important;
+    color: #16181b !important;
+    cursor: pointer !important;
+}   
 </style>
 
 <div class="row">
@@ -210,27 +236,96 @@ table.dataTable tbody td {
 </div>
 
 <script>
-document.addEventListener("DOMContentLoaded", function() {
-    // Get all rows of the table
-    const rows = document.querySelectorAll('#scroll-horizontal-datatable tbody tr');
+document.addEventListener("DOMContentLoaded", function () {
+    const table = document.getElementById("scroll-horizontal-datatable");
 
-    rows.forEach(row => {
-        // Add a click event listener to each row
-        row.addEventListener('click', function(event) {
-            // Find the dropdown toggle button inside the clicked row
-            const dropdownToggle = row.querySelector('.dropdown-toggle');
+    // Create custom dropdown
+    function createCustomDropdown(row) {
+        // Get the original dropdown items
+        const originalDropdown = row.querySelector('.dropdown-menu');
+        if (!originalDropdown) return null;
+        
+        // Create new dropdown with proper background and spacing
+        const customDropdown = document.createElement('div');
+        customDropdown.className = 'custom-dropdown-menu';
+        
+        // Copy inner content while maintaining icon alignment
+        customDropdown.innerHTML = originalDropdown.innerHTML;
+        
+        return customDropdown;
+    }
 
-            // Check if the clicked element is not the dropdown button itself to avoid unnecessary clicks
-            if (dropdownToggle && !event.target.closest('.dropdown-menu')) {
-                // Manually trigger Bootstrap's dropdown toggle using Bootstrap's Dropdown class
-                const dropdown = new bootstrap.Dropdown(dropdownToggle);
-                dropdown.toggle(); // Toggle the dropdown visibility
+    let activeDropdown = null;
+
+    // Add click event listener to rows
+    table.querySelectorAll("tbody tr").forEach(row => {
+        const customDropdown = createCustomDropdown(row);
+        if (!customDropdown) return;
+        
+        // Append the custom dropdown to the body
+        document.body.appendChild(customDropdown);
+
+        row.addEventListener("click", function(event) {
+            // Ignore clicks on the action column
+            if (event.target.closest('td:last-child')) {
+                return;
             }
+
+            // Hide any active dropdown
+            if (activeDropdown) {
+                activeDropdown.style.display = 'none';
+            }
+
+            // Get click position
+            const rect = event.target.getBoundingClientRect();
+            
+            // Position the dropdown with some offset
+            customDropdown.style.display = 'block';
+            customDropdown.style.position = 'fixed';
+            customDropdown.style.left = `${rect.left}px`;
+            customDropdown.style.top = `${rect.bottom + 5}px`; // Add 5px gap
+            
+            // Set as active dropdown
+            activeDropdown = customDropdown;
+            
+            event.stopPropagation();
         });
+
+        // Preserve click handlers and add auto-close
+        customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
+            item.addEventListener('click', function(e) {
+                const onclickAttr = this.getAttribute('onclick');
+                if (onclickAttr) {
+                    eval(onclickAttr);
+                }
+                
+                const href = this.getAttribute('href');
+                if (href && href !== '#') {
+                    window.location.href = href;
+                }
+
+                // Close the dropdown after handling the click
+                if (activeDropdown) {
+                    activeDropdown.style.display = 'none';
+                    activeDropdown = null;
+                }
+                
+                e.stopPropagation();
+            });
+        });
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function() {
+        if (activeDropdown) {
+            activeDropdown.style.display = 'none';
+            activeDropdown = null;
+        }
     });
 });
 </script>
 
+
 <script>
 // Datatable document ready
 $(document).ready(function() {
diff --git a/app/Views/cd_master_list.php b/app/Views/cd_master_list.php
index b9e13a41..92bde594 100755
--- a/app/Views/cd_master_list.php
+++ b/app/Views/cd_master_list.php
@@ -16,11 +16,32 @@ table.dataTable thead th {
 
     max-width: 98% !important;
 }
-.dropdown-menu {
-    position: absolute !important;
-    z-index: 1050 !important; /* Ensures dropdown appears above other elements */
-    transform: none !important; /* Prevents Bootstrap's default offset positioning */
+.custom-dropdown-menu {
+    display: none;
+    position: absolute;
+    background-color: #ffffff !important;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    min-width: 10rem;
+    z-index: 9999;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
+
+.custom-dropdown-menu .dropdown-item {
+    display: block !important;
+    width: 100% !important;
+    padding: 0.5rem 1rem !important;
+    color: #212529 !important;
+    text-decoration: none !important;
+    background-color: transparent !important;
+}
+
+.custom-dropdown-menu .dropdown-item:hover {
+    background-color: #f8f9fa !important;
+    color: #16181b !important;
+    cursor: pointer !important;
+}   
 </style>
 
 <div class="row" id="client_list">
@@ -164,40 +185,100 @@ table.dataTable thead th {
     </div>
 </div><!-- /.modal -->
 <script>
-
 document.addEventListener("DOMContentLoaded", function () {
     const table = document.getElementById("tickets-table");
 
+    // Create custom dropdown
+    function createCustomDropdown(row) {
+        const originalDropdown = row.querySelector('.dropdown-menu');
+        if (!originalDropdown) return null;
+
+        const customDropdown = document.createElement('div');
+        customDropdown.className = 'custom-dropdown-menu';
+        customDropdown.innerHTML = originalDropdown.innerHTML;
+
+        return customDropdown;
+    }
+
+    let activeDropdown = null;
+
     // Add click event listener to rows
     table.querySelectorAll("tbody tr").forEach(row => {
-        row.addEventListener("click", function (event) {
-            // Check if the clicked element is inside the dropdown
-            if (event.target.closest(".dropdown-toggle") || event.target.closest(".dropdown-menu")) {
-                return; // Do nothing if the dropdown or its menu is clicked
+        const customDropdown = createCustomDropdown(row);
+        if (!customDropdown) return;
+
+        row.customDropdown = customDropdown;
+        document.body.appendChild(customDropdown);
+
+        row.addEventListener("click", function(event) {
+            // Ignore clicks on the last column (action column)
+            if (event.target.closest('td') === row.lastElementChild) {
+                return;
             }
 
-            // Trigger dropdown menu programmatically
-            const dropdownToggle = this.querySelector(".dropdown-toggle");
-            if (dropdownToggle) {
-                const dropdown = new bootstrap.Dropdown(dropdownToggle); // Bootstrap instance
-                dropdown.toggle(); // Toggle dropdown visibility
+            // Hide any active dropdown
+            if (activeDropdown && activeDropdown !== customDropdown) {
+                activeDropdown.style.display = 'none';
             }
+
+            // Toggle the dropdown display
+            const isActive = customDropdown.style.display === 'block';
+            customDropdown.style.display = isActive ? 'none' : 'block';
+
+            // Set the position of the dropdown
+            const rect = event.target.closest('td').getBoundingClientRect();
+            customDropdown.style.position = 'absolute';
+            customDropdown.style.left = `${rect.left}px`;
+            customDropdown.style.top = `${rect.bottom + 5}px`;
+
+            // Set as active dropdown
+            activeDropdown = isActive ? null : customDropdown;
+
+            event.stopPropagation();
+        });
+
+        // Preserve click handlers for modal actions
+        customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
+            item.addEventListener('click', function(e) {
+                const isModalAction = this.hasAttribute('data-toggle') && this.getAttribute('data-toggle') === 'modal';
+                if (isModalAction) {
+                    return;  // Allow modal to function normally
+                }
+
+                // Close the dropdown if it's not related to modal
+                if (activeDropdown) {
+                    activeDropdown.style.display = 'none';
+                    activeDropdown = null;
+                }
+
+                const onclickAttr = this.getAttribute('onclick');
+                if (onclickAttr) {
+                    eval(onclickAttr);
+                }
+
+                const href = this.getAttribute('href');
+                if (href && href !== '#') {
+                    window.location.href = href;
+                }
+
+                e.stopPropagation();
+            });
         });
     });
 
-    // Close dropdowns when clicking outside the table
-    document.addEventListener("click", function (event) {
-        if (!event.target.closest("#tickets-table")) {
-            const openDropdowns = document.querySelectorAll(".dropdown-menu.show");
-            openDropdowns.forEach(menu => {
-                menu.classList.remove("show");
-            });
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function() {
+        if (activeDropdown) {
+            activeDropdown.style.display = 'none';
+            activeDropdown = null;
         }
     });
 });
 
+
 </script>
 
+
 <script>
 
     $(document).ready(function() {
diff --git a/app/Views/client_list.php b/app/Views/client_list.php
index 3cfcdece..ce079c60 100755
--- a/app/Views/client_list.php
+++ b/app/Views/client_list.php
@@ -16,6 +16,33 @@ table.dataTable thead th {
 
     max-width: 98% !important;
 }
+
+.custom-dropdown-menu {
+    display: none;
+    position: absolute;
+    background-color: #ffffff !important;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    min-width: 10rem;
+    z-index: 9999;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.custom-dropdown-menu .dropdown-item {
+    display: block !important;
+    width: 100% !important;
+    padding: 0.5rem 1rem !important;
+    color: #212529 !important;
+    text-decoration: none !important;
+    background-color: transparent !important;
+}
+
+.custom-dropdown-menu .dropdown-item:hover {
+    background-color: #f8f9fa !important;
+    color: #16181b !important;
+    cursor: pointer !important;
+}   
 </style>
 
 <div class="row" id="client_list">
@@ -114,6 +141,123 @@ table.dataTable thead th {
     </div>
 </div><!-- /.modal -->
 
+<script>
+   document.addEventListener("DOMContentLoaded", function () {
+    const table = document.getElementById("tickets-table");
+    
+    // Create custom dropdown
+    function createCustomDropdown(row) {
+        const originalDropdown = row.querySelector('.dropdown-menu');
+        if (!originalDropdown) return null;
+        
+        const customDropdown = document.createElement('div');
+        customDropdown.className = 'custom-dropdown-menu';
+        customDropdown.innerHTML = originalDropdown.innerHTML;
+        
+        // Add 'Open Client Details' option in the dropdown
+        const clientId = row.querySelector('.client_info').dataset.id;
+        const openDetailsOption = document.createElement('a');
+        openDetailsOption.href = "javascript:void(0);";
+        openDetailsOption.className = 'dropdown-item';
+        openDetailsOption.innerHTML = `<i class="mdi mdi-eye mr-2 text-muted font-18 vertical-middle"></i>Open Client Details`;
+        
+        openDetailsOption.addEventListener('click', function() {
+            openClientDetailsPage(clientId); // Open the client details page when clicked
+        });
+        
+        customDropdown.appendChild(openDetailsOption);
+
+        return customDropdown;
+    }
+
+    let activeDropdown = null;
+
+    // Add click event listener to rows
+    table.querySelectorAll("tbody tr").forEach(row => {
+        const customDropdown = createCustomDropdown(row);
+        if (!customDropdown) return;
+
+        document.body.appendChild(customDropdown);
+
+        row.addEventListener("click", function(event) {
+            // Ignore clicks on the action column
+            if (event.target.closest('td:last-child')) {
+                return;
+            }
+
+            // Show the action dropdown
+            if (activeDropdown) {
+                activeDropdown.style.display = 'none';
+            }
+
+            const rect = event.target.getBoundingClientRect();
+            customDropdown.style.display = 'block';
+            customDropdown.style.position = 'fixed';
+            customDropdown.style.left = `${rect.left}px`;
+            customDropdown.style.top = `${rect.bottom + 5}px`; // 5px gap
+
+            activeDropdown = customDropdown;
+            event.stopPropagation();
+        });
+
+        customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
+            item.addEventListener('click', function(e) {
+                const onclickAttr = this.getAttribute('onclick');
+                if (onclickAttr) {
+                    eval(onclickAttr);
+                }
+                
+                const href = this.getAttribute('href');
+                if (href && href !== '#') {
+                    window.location.href = href;
+                }
+
+                if (activeDropdown) {
+                    activeDropdown.style.display = 'none';
+                    activeDropdown = null;
+                }
+                
+                e.stopPropagation();
+            });
+        });
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function() {
+        if (activeDropdown) {
+            activeDropdown.style.display = 'none';
+            activeDropdown = null;
+        }
+    });
+
+    // Open client details page
+    function openClientDetailsPage(clientId) {
+        $('.loader').fadeIn();
+        $('.loader-mask').fadeIn();
+
+        $.ajax({
+            url: "<?= base_url('util/get-client-details/') ?>" + clientId,
+            type: "GET",
+            dataType: 'json',
+            success: function(res) {
+                $('.loader').fadeOut();
+                $('.loader-mask').delay(350).fadeOut('slow');
+
+                $('#append_client_info').empty().append(res.data);
+                $('#client_info').show();
+                $('#client_list').hide();
+            },
+            error: function(xhr, status, error) {
+                console.error(xhr.responseText);
+                console.error(status, error);
+                $('.loader').fadeOut();
+                $('.loader-mask').delay(350).fadeOut('slow');
+            }
+        });
+    }
+});
+
+</script>
 
 <script>
 
diff --git a/app/Views/employee_list.php b/app/Views/employee_list.php
index ebcc64e0..255d8278 100755
--- a/app/Views/employee_list.php
+++ b/app/Views/employee_list.php
@@ -18,6 +18,33 @@ table.dataTable tbody td {
     color: white !important;        
     margin-right: 5px;
 }
+
+.custom-dropdown-menu {
+    display: none;
+    position: absolute;
+    background-color: #ffffff !important;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    min-width: 10rem;
+    z-index: 9999;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.custom-dropdown-menu .dropdown-item {
+    display: block !important;
+    width: 100% !important;
+    padding: 0.5rem 1rem !important;
+    color: #212529 !important;
+    text-decoration: none !important;
+    background-color: transparent !important;
+}
+
+.custom-dropdown-menu .dropdown-item:hover {
+    background-color: #f8f9fa !important;
+    color: #16181b !important;
+    cursor: pointer !important;
+}   
 </style>
 
 <div class="row">
@@ -113,7 +140,94 @@ table.dataTable tbody td {
 
 <!-- end row -->
 <div id="loader" class="loader" style="display:none;">SPINNER</div>
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+    const table = document.getElementById("tickets-table");
+    
+    // Create custom dropdown
+    function createCustomDropdown(row) {
+        // Get the original dropdown items
+        const originalDropdown = row.querySelector('.dropdown-menu');
+        if (!originalDropdown) return null;
+        
+        // Create new dropdown with proper background and spacing
+        const customDropdown = document.createElement('div');
+        customDropdown.className = 'custom-dropdown-menu';
+        
+        // Copy inner content while maintaining icon alignment
+        customDropdown.innerHTML = originalDropdown.innerHTML;
+        
+        return customDropdown;
+    }
 
+    let activeDropdown = null;
+
+    // Add click event listener to rows
+    table.querySelectorAll("tbody tr").forEach(row => {
+        const customDropdown = createCustomDropdown(row);
+        if (!customDropdown) return;
+        
+        document.body.appendChild(customDropdown);
+
+        row.addEventListener("click", function(event) {
+            // Ignore clicks on the action column
+            if (event.target.closest('td:last-child')) {
+                return;
+            }
+
+            // Hide any active dropdown
+            if (activeDropdown) {
+                activeDropdown.style.display = 'none';
+            }
+
+            // Get click position
+            const rect = event.target.getBoundingClientRect();
+            
+            // Position the dropdown with some offset
+            customDropdown.style.display = 'block';
+            customDropdown.style.position = 'fixed';
+            customDropdown.style.left = `${rect.left}px`;
+            customDropdown.style.top = `${rect.bottom + 5}px`; // Add 5px gap
+            
+            // Set as active dropdown
+            activeDropdown = customDropdown;
+            
+            event.stopPropagation();
+        });
+
+        // Preserve click handlers and add auto-close
+        customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
+            item.addEventListener('click', function(e) {
+                const onclickAttr = this.getAttribute('onclick');
+                if (onclickAttr) {
+                    eval(onclickAttr);
+                }
+                
+                const href = this.getAttribute('href');
+                if (href && href !== '#') {
+                    window.location.href = href;
+                }
+
+                // Close the dropdown after handling the click
+                if (activeDropdown) {
+                    activeDropdown.style.display = 'none';
+                    activeDropdown = null;
+                }
+                
+                e.stopPropagation();
+            });
+        });
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function() {
+        if (activeDropdown) {
+            activeDropdown.style.display = 'none';
+            activeDropdown = null;
+        }
+    });
+});
+</script>
 <script>
 
 $(document).ready(function() {
diff --git a/app/Views/file_list.php b/app/Views/file_list.php
index a504ad5f..6c6c36d8 100755
--- a/app/Views/file_list.php
+++ b/app/Views/file_list.php
@@ -7,6 +7,32 @@
 .reload:hover {
     cursor: pointer;
 }
+.custom-dropdown-menu {
+    display: none;
+    position: absolute;
+    background-color: #ffffff !important;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    min-width: 10rem;
+    z-index: 9999;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.custom-dropdown-menu .dropdown-item {
+    display: block !important;
+    width: 100% !important;
+    padding: 0.5rem 1rem !important;
+    color: #212529 !important;
+    text-decoration: none !important;
+    background-color: transparent !important;
+}
+
+.custom-dropdown-menu .dropdown-item:hover {
+    background-color: #f8f9fa !important;
+    color: #16181b !important;
+    cursor: pointer !important;
+}   
 </style>
 
 <div class="col-12">
@@ -160,7 +186,98 @@
         </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+    const table = document.getElementById("tickets-table");
 
+    // Create custom dropdown
+    function createCustomDropdown(row) {
+        const originalDropdown = row.querySelector('.dropdown-menu');
+        if (!originalDropdown) return null;
+
+        const customDropdown = document.createElement('div');
+        customDropdown.className = 'custom-dropdown-menu';
+        customDropdown.innerHTML = originalDropdown.innerHTML;
+
+        return customDropdown;
+    }
+
+    let activeDropdown = null;
+
+    // Add click event listener to rows
+    table.querySelectorAll("tbody tr").forEach(row => {
+        const customDropdown = createCustomDropdown(row);
+        if (!customDropdown) return;
+
+        document.body.appendChild(customDropdown);
+
+        row.addEventListener("click", function(event) {
+            // Ignore clicks on the action column (like the dropdown itself)
+            if (event.target.closest('td:last-child')) {
+                return;
+            }
+
+            // Hide any active dropdown
+            if (activeDropdown) {
+                activeDropdown.style.display = 'none';
+            }
+
+            // Get click position
+            const rect = event.target.getBoundingClientRect();
+
+            // Position the dropdown with some offset
+            customDropdown.style.display = 'block';
+            customDropdown.style.position = 'fixed';
+            customDropdown.style.left = `${rect.left}px`;
+            customDropdown.style.top = `${rect.bottom + 5}px`; // Add 5px gap
+
+            // Set as active dropdown
+            activeDropdown = customDropdown;
+
+            event.stopPropagation();
+        });
+
+        // Preserve click handlers for modal actions
+        customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
+            item.addEventListener('click', function(e) {
+                // Check if the clicked item is a modal trigger (view/reupload)
+                const isModalAction = this.hasAttribute('data-toggle') && this.getAttribute('data-toggle') === 'modal';
+
+                if (isModalAction) {
+                    // Let the modal action proceed normally (no stopPropagation for modal triggers)
+                    return;  // No need to stop propagation for modal actions
+                }
+
+                // Close the dropdown if it's not related to modal
+                if (activeDropdown) {
+                    activeDropdown.style.display = 'none';
+                    activeDropdown = null;
+                }
+
+                const onclickAttr = this.getAttribute('onclick');
+                if (onclickAttr) {
+                    eval(onclickAttr);
+                }
+
+                const href = this.getAttribute('href');
+                if (href && href !== '#') {
+                    window.location.href = href;
+                }
+
+                e.stopPropagation(); // Prevent event from bubbling up for non-modal actions
+            });
+        });
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function() {
+        if (activeDropdown) {
+            activeDropdown.style.display = 'none';
+            activeDropdown = null;
+        }
+    });
+});
+</script>
 
 <script>
 $('body').on('click', '.view_emp_list', function() {
diff --git a/app/Views/finance_team_list.php b/app/Views/finance_team_list.php
index 901c4d2a..b9d3f0b6 100644
--- a/app/Views/finance_team_list.php
+++ b/app/Views/finance_team_list.php
@@ -16,6 +16,32 @@ table.dataTable tbody td {
 .dataTables_filter {
     position: absolute;
 }
+.custom-dropdown-menu {
+    display: none;
+    position: absolute;
+    background-color: #ffffff !important;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    min-width: 10rem;
+    z-index: 9999;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.custom-dropdown-menu .dropdown-item {
+    display: block !important;
+    width: 100% !important;
+    padding: 0.5rem 1rem !important;
+    color: #212529 !important;
+    text-decoration: none !important;
+    background-color: transparent !important;
+}
+
+.custom-dropdown-menu .dropdown-item:hover {
+    background-color: #f8f9fa !important;
+    color: #16181b !important;
+    cursor: pointer !important;
+}   
 </style>
 
 <div class="row" id="finance_filter">
@@ -210,28 +236,97 @@ table.dataTable tbody td {
 </div>
 
 <script>
-document.addEventListener("DOMContentLoaded", function() {
-    // Get all rows of the table
-    const rows = document.querySelectorAll('#scroll-horizontal-datatable tbody tr');
+document.addEventListener("DOMContentLoaded", function () {
+    const table = document.getElementById("scroll-horizontal-datatable");
 
-    rows.forEach(row => {
-        // Add a click event listener to each row
-        row.addEventListener('click', function(event) {
-            // Find the dropdown toggle button inside the clicked row
-            const dropdownToggle = row.querySelector('.dropdown-toggle');
+    // Create custom dropdown
+    function createCustomDropdown(row) {
+        // Get the original dropdown items
+        const originalDropdown = row.querySelector('.dropdown-menu');
+        if (!originalDropdown) return null;
+        
+        // Create new dropdown with proper background and spacing
+        const customDropdown = document.createElement('div');
+        customDropdown.className = 'custom-dropdown-menu';
+        
+        // Copy inner content while maintaining icon alignment
+        customDropdown.innerHTML = originalDropdown.innerHTML;
+        
+        return customDropdown;
+    }
 
-            // Check if the clicked element is not the dropdown button itself to avoid unnecessary clicks
-            if (dropdownToggle && !event.target.closest('.dropdown-menu')) {
-                // Manually trigger Bootstrap's dropdown toggle using Bootstrap's Dropdown class
-                const dropdown = new bootstrap.Dropdown(dropdownToggle);
-                dropdown.toggle(); // Toggle the dropdown visibility
+    let activeDropdown = null;
+
+    // Add click event listener to rows
+    table.querySelectorAll("tbody tr").forEach(row => {
+        const customDropdown = createCustomDropdown(row);
+        if (!customDropdown) return;
+        
+        // Append the custom dropdown to the body
+        document.body.appendChild(customDropdown);
+
+        row.addEventListener("click", function(event) {
+            // Ignore clicks on the action column
+            if (event.target.closest('td:last-child')) {
+                return;
             }
+
+            // Hide any active dropdown
+            if (activeDropdown) {
+                activeDropdown.style.display = 'none';
+            }
+
+            // Get click position
+            const rect = event.target.getBoundingClientRect();
+            
+            // Position the dropdown with some offset
+            customDropdown.style.display = 'block';
+            customDropdown.style.position = 'fixed';
+            customDropdown.style.left = `${rect.left}px`;
+            customDropdown.style.top = `${rect.bottom + 5}px`; // Add 5px gap
+            
+            // Set as active dropdown
+            activeDropdown = customDropdown;
+            
+            event.stopPropagation();
         });
+
+        // Preserve click handlers and add auto-close
+        customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
+            item.addEventListener('click', function(e) {
+                const onclickAttr = this.getAttribute('onclick');
+                if (onclickAttr) {
+                    eval(onclickAttr);
+                }
+                
+                const href = this.getAttribute('href');
+                if (href && href !== '#') {
+                    window.location.href = href;
+                }
+
+                // Close the dropdown after handling the click
+                if (activeDropdown) {
+                    activeDropdown.style.display = 'none';
+                    activeDropdown = null;
+                }
+                
+                e.stopPropagation();
+            });
+        });
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function() {
+        if (activeDropdown) {
+            activeDropdown.style.display = 'none';
+            activeDropdown = null;
+        }
     });
 });
 </script>
 
 
+
 <script>
 // Datatable document ready
 $(document).ready(function() {
diff --git a/app/Views/insurer_list.php b/app/Views/insurer_list.php
index 4d048546..933ed3b4 100755
--- a/app/Views/insurer_list.php
+++ b/app/Views/insurer_list.php
@@ -1,3 +1,71 @@
+<style>
+custom-dropdown-menu {
+    display: none;
+    position: fixed;
+    background-color: #ffffff !important;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    min-width: 10rem;
+    z-index: 9999;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+.custom-dropdown-menu .dropdown-item {
+    display: block !important;
+    width: 100% !important;
+    padding: 0.5rem 1rem !important;
+    clear: both !important;
+    font-weight: 400 !important;
+    color: #212529 !important;
+    text-align: inherit !important;
+    white-space: nowrap !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    text-decoration: none !important;
+    position: relative !important;
+}
+
+.custom-dropdown-menu .dropdown-item:hover {
+    background-color: #f8f9fa !important;
+    color: #16181b !important;
+    cursor: pointer !important;
+}
+
+.custom-dropdown-menu .dropdown-item i {
+    margin-right: 8px !important;
+    vertical-align: middle !important;
+}
+
+.table tbody tr {
+    cursor: pointer;
+}
+
+/* Ensure the dropdown menu has a solid background */
+.custom-dropdown-menu::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #ffffff;
+    z-index: -1;
+}
+
+/* Add a subtle backdrop effect */
+.custom-dropdown-menu::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.05);
+    z-index: -2;
+    pointer-events: none;
+}
+</style>
 <div class="row" id="insurer_list">
     <div class="col-12">
         <div class="card">
@@ -45,6 +113,97 @@
 </div>
 <!-- end row -->
 
+<script>
+
+document.addEventListener("DOMContentLoaded", function () {
+    const table = document.getElementById("tickets-table");
+    
+    // Create custom dropdown
+    function createCustomDropdown(row) {
+        // Get the original dropdown items
+        const originalDropdown = row.querySelector('.dropdown-menu');
+        if (!originalDropdown) return null;
+        
+        // Create new dropdown with proper background and spacing
+        const customDropdown = document.createElement('div');
+        customDropdown.className = 'custom-dropdown-menu';
+        
+        // Copy inner content while maintaining icon alignment
+        customDropdown.innerHTML = originalDropdown.innerHTML;
+        
+        return customDropdown;
+    }
+
+    let activeDropdown = null;
+
+    // Add click event listener to rows
+    table.querySelectorAll("tbody tr").forEach(row => {
+        const customDropdown = createCustomDropdown(row);
+        if (!customDropdown) return;
+        
+        document.body.appendChild(customDropdown);
+
+        row.addEventListener("click", function(event) {
+            // Ignore clicks on the action column
+            if (event.target.closest('td:last-child')) {
+                return;
+            }
+
+            // Hide any active dropdown
+            if (activeDropdown) {
+                activeDropdown.style.display = 'none';
+            }
+
+            // Get click position
+            const rect = event.target.getBoundingClientRect();
+            
+            // Position the dropdown with some offset
+            customDropdown.style.display = 'block';
+            customDropdown.style.position = 'fixed';
+            customDropdown.style.left = `${rect.left}px`;
+            customDropdown.style.top = `${rect.bottom + 5}px`; // Add 5px gap
+            
+            // Set as active dropdown
+            activeDropdown = customDropdown;
+            
+            event.stopPropagation();
+        });
+
+        // Preserve click handlers and add auto-close
+        customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
+            item.addEventListener('click', function(e) {
+                const onclickAttr = this.getAttribute('onclick');
+                if (onclickAttr) {
+                    eval(onclickAttr);
+                }
+                
+                const href = this.getAttribute('href');
+                if (href && href !== '#') {
+                    window.location.href = href;
+                }
+
+                // Close the dropdown after handling the click
+                if (activeDropdown) {
+                    activeDropdown.style.display = 'none';
+                    activeDropdown = null;
+                }
+                
+                e.stopPropagation();
+            });
+        });
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function() {
+        if (activeDropdown) {
+            activeDropdown.style.display = 'none';
+            activeDropdown = null;
+        }
+    });
+});
+
+</script>
+
 <script>
 
  $(document).ready(function(){
diff --git a/app/Views/insurer_statement_list.php b/app/Views/insurer_statement_list.php
index 9c168b33..2772907a 100644
--- a/app/Views/insurer_statement_list.php
+++ b/app/Views/insurer_statement_list.php
@@ -107,12 +107,76 @@ table.dataTable tbody td {
     .disabled-option {
         color: gray;
     }
-    .dropdown-menu {
-    position: absolute !important;
-    z-index: 1050 !important; /* Ensures dropdown appears above other elements */
-    transform: none !important; /* Prevents Bootstrap's default offset positioning */
+
+custom-dropdown-menu {
+    display: none;
+    position: fixed;
+    background-color: #ffffff !important;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    min-width: 10rem;
+    z-index: 9999;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
 }
 
+.custom-dropdown-menu .dropdown-item {
+    display: block !important;
+    width: 100% !important;
+    padding: 0.5rem 1rem !important;
+    clear: both !important;
+    font-weight: 400 !important;
+    color: #212529 !important;
+    text-align: inherit !important;
+    white-space: nowrap !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    text-decoration: none !important;
+    position: relative !important;
+}
+
+.custom-dropdown-menu .dropdown-item:hover {
+    background-color: #f8f9fa !important;
+    color: #16181b !important;
+    cursor: pointer !important;
+}
+
+.custom-dropdown-menu .dropdown-item i {
+    margin-right: 8px !important;
+    vertical-align: middle !important;
+}
+
+.table tbody tr {
+    cursor: pointer;
+}
+
+/* Ensure the dropdown menu has a solid background */
+.custom-dropdown-menu::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #ffffff;
+    z-index: -1;
+}
+
+/* Add a subtle backdrop effect */
+.custom-dropdown-menu::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.05);
+    z-index: -2;
+    pointer-events: none;
+}
+
+
+
 </style>
 
 <div class="row" id="inception_list">
@@ -421,31 +485,87 @@ table.dataTable tbody td {
 
 document.addEventListener("DOMContentLoaded", function () {
     const table = document.getElementById("tickets-table");
+    
+    // Create custom dropdown
+    function createCustomDropdown(row) {
+        // Get the original dropdown items
+        const originalDropdown = row.querySelector('.dropdown-menu');
+        if (!originalDropdown) return null;
+        
+        // Create new dropdown with proper background and spacing
+        const customDropdown = document.createElement('div');
+        customDropdown.className = 'custom-dropdown-menu';
+        
+        // Copy inner content while maintaining icon alignment
+        customDropdown.innerHTML = originalDropdown.innerHTML;
+        
+        return customDropdown;
+    }
+
+    let activeDropdown = null;
 
     // Add click event listener to rows
     table.querySelectorAll("tbody tr").forEach(row => {
-        row.addEventListener("click", function (event) {
-            // Check if the clicked element is inside the dropdown
-            if (event.target.closest(".dropdown-toggle") || event.target.closest(".dropdown-menu")) {
-                return; // Do nothing if the dropdown or its menu is clicked
+        const customDropdown = createCustomDropdown(row);
+        if (!customDropdown) return;
+        
+        document.body.appendChild(customDropdown);
+
+        row.addEventListener("click", function(event) {
+            // Ignore clicks on the action column
+            if (event.target.closest('td:last-child')) {
+                return;
             }
 
-            // Trigger dropdown menu programmatically
-            const dropdownToggle = this.querySelector(".dropdown-toggle");
-            if (dropdownToggle) {
-                const dropdown = new bootstrap.Dropdown(dropdownToggle); // Bootstrap instance
-                dropdown.toggle(); // Toggle dropdown visibility
+            // Hide any active dropdown
+            if (activeDropdown) {
+                activeDropdown.style.display = 'none';
             }
+
+            // Get click position
+            const rect = event.target.getBoundingClientRect();
+            
+            // Position the dropdown with some offset
+            customDropdown.style.display = 'block';
+            customDropdown.style.position = 'fixed';
+            customDropdown.style.left = `${rect.left}px`;
+            customDropdown.style.top = `${rect.bottom + 5}px`; // Add 5px gap
+            
+            // Set as active dropdown
+            activeDropdown = customDropdown;
+            
+            event.stopPropagation();
+        });
+
+        // Preserve click handlers and add auto-close
+        customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
+            item.addEventListener('click', function(e) {
+                const onclickAttr = this.getAttribute('onclick');
+                if (onclickAttr) {
+                    eval(onclickAttr);
+                }
+                
+                const href = this.getAttribute('href');
+                if (href && href !== '#') {
+                    window.location.href = href;
+                }
+
+                // Close the dropdown after handling the click
+                if (activeDropdown) {
+                    activeDropdown.style.display = 'none';
+                    activeDropdown = null;
+                }
+                
+                e.stopPropagation();
+            });
         });
     });
 
-    // Close dropdowns when clicking outside the table
-    document.addEventListener("click", function (event) {
-        if (!event.target.closest("#tickets-table")) {
-            const openDropdowns = document.querySelectorAll(".dropdown-menu.show");
-            openDropdowns.forEach(menu => {
-                menu.classList.remove("show");
-            });
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function() {
+        if (activeDropdown) {
+            activeDropdown.style.display = 'none';
+            activeDropdown = null;
         }
     });
 });
diff --git a/app/Views/kyc_list.php b/app/Views/kyc_list.php
index 19ec6370..a28b2dfe 100755
--- a/app/Views/kyc_list.php
+++ b/app/Views/kyc_list.php
@@ -1,3 +1,71 @@
+<style>
+  custom-dropdown-menu {
+    display: none;
+    position: fixed;
+    background-color: #ffffff !important;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    min-width: 10rem;
+    z-index: 9999;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+.custom-dropdown-menu .dropdown-item {
+    display: block !important;
+    width: 100% !important;
+    padding: 0.5rem 1rem !important;
+    clear: both !important;
+    font-weight: 400 !important;
+    color: #212529 !important;
+    text-align: inherit !important;
+    white-space: nowrap !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    text-decoration: none !important;
+    position: relative !important;
+}
+
+.custom-dropdown-menu .dropdown-item:hover {
+    background-color: #f8f9fa !important;
+    color: #16181b !important;
+    cursor: pointer !important;
+}
+
+.custom-dropdown-menu .dropdown-item i {
+    margin-right: 8px !important;
+    vertical-align: middle !important;
+}
+
+.table tbody tr {
+    cursor: pointer;
+}
+
+/* Ensure the dropdown menu has a solid background */
+.custom-dropdown-menu::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #ffffff;
+    z-index: -1;
+}
+
+/* Add a subtle backdrop effect */
+.custom-dropdown-menu::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.05);
+    z-index: -2;
+    pointer-events: none;
+}
+</style>
 <div class="row" id="kyc_list">
     <div class="col-12">
         <div class="card">
@@ -42,7 +110,94 @@
     </div><!-- end col -->
 </div>
 <!-- end row -->
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const table = document.getElementById("tickets-table");
+    
+    // Create custom dropdown
+    function createCustomDropdown(row) {
+        // Get the original dropdown items
+        const originalDropdown = row.querySelector('.dropdown-menu');
+        if (!originalDropdown) return null;
+        
+        // Create new dropdown with proper background and spacing
+        const customDropdown = document.createElement('div');
+        customDropdown.className = 'custom-dropdown-menu';
+        
+        // Copy inner content while maintaining icon alignment
+        customDropdown.innerHTML = originalDropdown.innerHTML;
+        
+        return customDropdown;
+    }
 
+    let activeDropdown = null;
+
+    // Add click event listener to rows
+    table.querySelectorAll("tbody tr").forEach(row => {
+        const customDropdown = createCustomDropdown(row);
+        if (!customDropdown) return;
+        
+        document.body.appendChild(customDropdown);
+
+        row.addEventListener("click", function(event) {
+            // Ignore clicks on the action column
+            if (event.target.closest('td:last-child')) {
+                return;
+            }
+
+            // Hide any active dropdown
+            if (activeDropdown) {
+                activeDropdown.style.display = 'none';
+            }
+
+            // Get click position
+            const rect = event.target.getBoundingClientRect();
+            
+            // Position the dropdown with some offset
+            customDropdown.style.display = 'block';
+            customDropdown.style.position = 'fixed';
+            customDropdown.style.left = `${rect.left}px`;
+            customDropdown.style.top = `${rect.bottom + 5}px`; // Add 5px gap
+            
+            // Set as active dropdown
+            activeDropdown = customDropdown;
+            
+            event.stopPropagation();
+        });
+
+        // Preserve click handlers and add auto-close
+        customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
+            item.addEventListener('click', function(e) {
+                const onclickAttr = this.getAttribute('onclick');
+                if (onclickAttr) {
+                    eval(onclickAttr);
+                }
+                
+                const href = this.getAttribute('href');
+                if (href && href !== '#') {
+                    window.location.href = href;
+                }
+
+                // Close the dropdown after handling the click
+                if (activeDropdown) {
+                    activeDropdown.style.display = 'none';
+                    activeDropdown = null;
+                }
+                
+                e.stopPropagation();
+            });
+        });
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function() {
+        if (activeDropdown) {
+            activeDropdown.style.display = 'none';
+            activeDropdown = null;
+        }
+    });
+}); 
+</script>
 <script>
 
  $(document).ready(function(){
diff --git a/app/Views/leads_list.php b/app/Views/leads_list.php
index 99799e37..78665e91 100644
--- a/app/Views/leads_list.php
+++ b/app/Views/leads_list.php
@@ -36,6 +36,73 @@ table.dataTable tbody td {
     padding: 10px;
     margin-bottom: 10px;
 }
+
+custom-dropdown-menu {
+    display: none;
+    position: fixed;
+    background-color: #ffffff !important;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    min-width: 10rem;
+    z-index: 9999;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+.custom-dropdown-menu .dropdown-item {
+    display: block !important;
+    width: 100% !important;
+    padding: 0.5rem 1rem !important;
+    clear: both !important;
+    font-weight: 400 !important;
+    color: #212529 !important;
+    text-align: inherit !important;
+    white-space: nowrap !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    text-decoration: none !important;
+    position: relative !important;
+}
+
+.custom-dropdown-menu .dropdown-item:hover {
+    background-color: #f8f9fa !important;
+    color: #16181b !important;
+    cursor: pointer !important;
+}
+
+.custom-dropdown-menu .dropdown-item i {
+    margin-right: 8px !important;
+    vertical-align: middle !important;
+}
+
+.table tbody tr {
+    cursor: pointer;
+}
+
+/* Ensure the dropdown menu has a solid background */
+.custom-dropdown-menu::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #ffffff;
+    z-index: -1;
+}
+
+/* Add a subtle backdrop effect */
+.custom-dropdown-menu::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.05);
+    z-index: -2;
+    pointer-events: none;
+}
 </style>
 
 
@@ -132,6 +199,97 @@ table.dataTable tbody td {
 
 <script>
 
+document.addEventListener("DOMContentLoaded", function () {
+    const table = document.getElementById("tickets-table");
+    
+    // Create custom dropdown
+    function createCustomDropdown(row) {
+        // Get the original dropdown items
+        const originalDropdown = row.querySelector('.dropdown-menu');
+        if (!originalDropdown) return null;
+        
+        // Create new dropdown with proper background and spacing
+        const customDropdown = document.createElement('div');
+        customDropdown.className = 'custom-dropdown-menu';
+        
+        // Copy inner content while maintaining icon alignment
+        customDropdown.innerHTML = originalDropdown.innerHTML;
+        
+        return customDropdown;
+    }
+
+    let activeDropdown = null;
+
+    // Add click event listener to rows
+    table.querySelectorAll("tbody tr").forEach(row => {
+        const customDropdown = createCustomDropdown(row);
+        if (!customDropdown) return;
+        
+        document.body.appendChild(customDropdown);
+
+        row.addEventListener("click", function(event) {
+            // Ignore clicks on the action column
+            if (event.target.closest('td:last-child')) {
+                return;
+            }
+
+            // Hide any active dropdown
+            if (activeDropdown) {
+                activeDropdown.style.display = 'none';
+            }
+
+            // Get click position
+            const rect = event.target.getBoundingClientRect();
+            
+            // Position the dropdown with some offset
+            customDropdown.style.display = 'block';
+            customDropdown.style.position = 'fixed';
+            customDropdown.style.left = `${rect.left}px`;
+            customDropdown.style.top = `${rect.bottom + 5}px`; // Add 5px gap
+            
+            // Set as active dropdown
+            activeDropdown = customDropdown;
+            
+            event.stopPropagation();
+        });
+
+        // Preserve click handlers and add auto-close
+        customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
+            item.addEventListener('click', function(e) {
+                const onclickAttr = this.getAttribute('onclick');
+                if (onclickAttr) {
+                    eval(onclickAttr);
+                }
+                
+                const href = this.getAttribute('href');
+                if (href && href !== '#') {
+                    window.location.href = href;
+                }
+
+                // Close the dropdown after handling the click
+                if (activeDropdown) {
+                    activeDropdown.style.display = 'none';
+                    activeDropdown = null;
+                }
+                
+                e.stopPropagation();
+            });
+        });
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function() {
+        if (activeDropdown) {
+            activeDropdown.style.display = 'none';
+            activeDropdown = null;
+        }
+    });
+});
+
+</script>
+
+<script>
+
 var client_list = ''; // local variable for storing the client branch list
 var branch_list = ''; // local variable for storing the client branch list
 var policy_list = ''; // local variable for storing the client policy list
diff --git a/app/Views/policy_transaction_endorsement_list.php b/app/Views/policy_transaction_endorsement_list.php
index 501857df..e7906349 100644
--- a/app/Views/policy_transaction_endorsement_list.php
+++ b/app/Views/policy_transaction_endorsement_list.php
@@ -36,6 +36,73 @@ table.dataTable thead th {
     padding: 10px;
     margin-bottom: 10px;
 }
+custom-dropdown-menu {
+    display: none;
+    position: fixed;
+    background-color: #ffffff !important;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    min-width: 10rem;
+    z-index: 9999;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+.custom-dropdown-menu .dropdown-item {
+    display: block !important;
+    width: 100% !important;
+    padding: 0.5rem 1rem !important;
+    clear: both !important;
+    font-weight: 400 !important;
+    color: #212529 !important;
+    text-align: inherit !important;
+    white-space: nowrap !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    text-decoration: none !important;
+    position: relative !important;
+}
+
+.custom-dropdown-menu .dropdown-item:hover {
+    background-color: #f8f9fa !important;
+    color: #16181b !important;
+    cursor: pointer !important;
+}
+
+.custom-dropdown-menu .dropdown-item i {
+    margin-right: 8px !important;
+    vertical-align: middle !important;
+}
+
+.table tbody tr {
+    cursor: pointer;
+}
+
+/* Ensure the dropdown menu has a solid background */
+.custom-dropdown-menu::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #ffffff;
+    z-index: -1;
+}
+
+/* Add a subtle backdrop effect */
+.custom-dropdown-menu::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.05);
+    z-index: -2;
+    pointer-events: none;
+}
+
 </style>
 
 <div class="row" id="endorsement_filter">
@@ -236,31 +303,87 @@ table.dataTable thead th {
 
 document.addEventListener("DOMContentLoaded", function () {
     const table = document.getElementById("tickets-table");
+    
+    // Create custom dropdown
+    function createCustomDropdown(row) {
+        // Get the original dropdown items
+        const originalDropdown = row.querySelector('.dropdown-menu');
+        if (!originalDropdown) return null;
+        
+        // Create new dropdown with proper background and spacing
+        const customDropdown = document.createElement('div');
+        customDropdown.className = 'custom-dropdown-menu';
+        
+        // Copy inner content while maintaining icon alignment
+        customDropdown.innerHTML = originalDropdown.innerHTML;
+        
+        return customDropdown;
+    }
+
+    let activeDropdown = null;
 
     // Add click event listener to rows
     table.querySelectorAll("tbody tr").forEach(row => {
-        row.addEventListener("click", function (event) {
-            // Check if the clicked element is inside the dropdown
-            if (event.target.closest(".dropdown-toggle") || event.target.closest(".dropdown-menu")) {
-                return; // Do nothing if the dropdown or its menu is clicked
+        const customDropdown = createCustomDropdown(row);
+        if (!customDropdown) return;
+        
+        document.body.appendChild(customDropdown);
+
+        row.addEventListener("click", function(event) {
+            // Ignore clicks on the action column
+            if (event.target.closest('td:last-child')) {
+                return;
             }
 
-            // Trigger dropdown menu programmatically
-            const dropdownToggle = this.querySelector(".dropdown-toggle");
-            if (dropdownToggle) {
-                const dropdown = new bootstrap.Dropdown(dropdownToggle); // Bootstrap instance
-                dropdown.toggle(); // Toggle dropdown visibility
+            // Hide any active dropdown
+            if (activeDropdown) {
+                activeDropdown.style.display = 'none';
             }
+
+            // Get click position
+            const rect = event.target.getBoundingClientRect();
+            
+            // Position the dropdown with some offset
+            customDropdown.style.display = 'block';
+            customDropdown.style.position = 'fixed';
+            customDropdown.style.left = `${rect.left}px`;
+            customDropdown.style.top = `${rect.bottom + 5}px`; // Add 5px gap
+            
+            // Set as active dropdown
+            activeDropdown = customDropdown;
+            
+            event.stopPropagation();
+        });
+
+        // Preserve click handlers and add auto-close
+        customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
+            item.addEventListener('click', function(e) {
+                const onclickAttr = this.getAttribute('onclick');
+                if (onclickAttr) {
+                    eval(onclickAttr);
+                }
+                
+                const href = this.getAttribute('href');
+                if (href && href !== '#') {
+                    window.location.href = href;
+                }
+
+                // Close the dropdown after handling the click
+                if (activeDropdown) {
+                    activeDropdown.style.display = 'none';
+                    activeDropdown = null;
+                }
+                
+                e.stopPropagation();
+            });
         });
     });
 
-    // Close dropdowns when clicking outside the table
-    document.addEventListener("click", function (event) {
-        if (!event.target.closest("#tickets-table")) {
-            const openDropdowns = document.querySelectorAll(".dropdown-menu.show");
-            openDropdowns.forEach(menu => {
-                menu.classList.remove("show");
-            });
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function() {
+        if (activeDropdown) {
+            activeDropdown.style.display = 'none';
+            activeDropdown = null;
         }
     });
 });
diff --git a/app/Views/policy_transaction_inception_list.php b/app/Views/policy_transaction_inception_list.php
index 1d194cb6..80f9fe62 100644
--- a/app/Views/policy_transaction_inception_list.php
+++ b/app/Views/policy_transaction_inception_list.php
@@ -45,10 +45,71 @@ table.dataTable tbody td {
 .addbtnStyle{
     margin-left: 20px !important;
 }
-.dropdown-menu {
-    position: absolute !important;
-    z-index: 1050 !important; /* Ensures dropdown appears above other elements */
-    transform: none !important; /* Prevents Bootstrap's default offset positioning */
+custom-dropdown-menu {
+    display: none;
+    position: fixed;
+    background-color: #ffffff !important;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    min-width: 10rem;
+    z-index: 9999;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+.custom-dropdown-menu .dropdown-item {
+    display: block !important;
+    width: 100% !important;
+    padding: 0.5rem 1rem !important;
+    clear: both !important;
+    font-weight: 400 !important;
+    color: #212529 !important;
+    text-align: inherit !important;
+    white-space: nowrap !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    text-decoration: none !important;
+    position: relative !important;
+}
+
+.custom-dropdown-menu .dropdown-item:hover {
+    background-color: #f8f9fa !important;
+    color: #16181b !important;
+    cursor: pointer !important;
+}
+
+.custom-dropdown-menu .dropdown-item i {
+    margin-right: 8px !important;
+    vertical-align: middle !important;
+}
+
+.table tbody tr {
+    cursor: pointer;
+}
+
+/* Ensure the dropdown menu has a solid background */
+.custom-dropdown-menu::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #ffffff;
+    z-index: -1;
+}
+
+/* Add a subtle backdrop effect */
+.custom-dropdown-menu::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.05);
+    z-index: -2;
+    pointer-events: none;
 }
 
 </style>
@@ -349,35 +410,90 @@ table.dataTable tbody td {
 
 document.addEventListener("DOMContentLoaded", function () {
     const table = document.getElementById("tickets-table");
+    
+    // Create custom dropdown
+    function createCustomDropdown(row) {
+        // Get the original dropdown items
+        const originalDropdown = row.querySelector('.dropdown-menu');
+        if (!originalDropdown) return null;
+        
+        // Create new dropdown with proper background and spacing
+        const customDropdown = document.createElement('div');
+        customDropdown.className = 'custom-dropdown-menu';
+        
+        // Copy inner content while maintaining icon alignment
+        customDropdown.innerHTML = originalDropdown.innerHTML;
+        
+        return customDropdown;
+    }
+
+    let activeDropdown = null;
 
     // Add click event listener to rows
     table.querySelectorAll("tbody tr").forEach(row => {
-        row.addEventListener("click", function (event) {
-            // Check if the clicked element is inside the dropdown
-            if (event.target.closest(".dropdown-toggle") || event.target.closest(".dropdown-menu")) {
-                return; // Do nothing if the dropdown or its menu is clicked
+        const customDropdown = createCustomDropdown(row);
+        if (!customDropdown) return;
+        
+        document.body.appendChild(customDropdown);
+
+        row.addEventListener("click", function(event) {
+            // Ignore clicks on the action column
+            if (event.target.closest('td:last-child')) {
+                return;
             }
 
-            // Trigger dropdown menu programmatically
-            const dropdownToggle = this.querySelector(".dropdown-toggle");
-            if (dropdownToggle) {
-                const dropdown = new bootstrap.Dropdown(dropdownToggle); // Bootstrap instance
-                dropdown.toggle(); // Toggle dropdown visibility
+            // Hide any active dropdown
+            if (activeDropdown) {
+                activeDropdown.style.display = 'none';
             }
+
+            // Get click position
+            const rect = event.target.getBoundingClientRect();
+            
+            // Position the dropdown with some offset
+            customDropdown.style.display = 'block';
+            customDropdown.style.position = 'fixed';
+            customDropdown.style.left = `${rect.left}px`;
+            customDropdown.style.top = `${rect.bottom + 5}px`; // Add 5px gap
+            
+            // Set as active dropdown
+            activeDropdown = customDropdown;
+            
+            event.stopPropagation();
+        });
+
+        // Preserve click handlers and add auto-close
+        customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
+            item.addEventListener('click', function(e) {
+                const onclickAttr = this.getAttribute('onclick');
+                if (onclickAttr) {
+                    eval(onclickAttr);
+                }
+                
+                const href = this.getAttribute('href');
+                if (href && href !== '#') {
+                    window.location.href = href;
+                }
+
+                // Close the dropdown after handling the click
+                if (activeDropdown) {
+                    activeDropdown.style.display = 'none';
+                    activeDropdown = null;
+                }
+                
+                e.stopPropagation();
+            });
         });
     });
 
-    // Close dropdowns when clicking outside the table
-    document.addEventListener("click", function (event) {
-        if (!event.target.closest("#tickets-table")) {
-            const openDropdowns = document.querySelectorAll(".dropdown-menu.show");
-            openDropdowns.forEach(menu => {
-                menu.classList.remove("show");
-            });
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function() {
+        if (activeDropdown) {
+            activeDropdown.style.display = 'none';
+            activeDropdown = null;
         }
     });
 });
-
 </script>
 
 <script>
diff --git a/app/Views/policy_type_list.php b/app/Views/policy_type_list.php
index 3abcd036..592b234c 100755
--- a/app/Views/policy_type_list.php
+++ b/app/Views/policy_type_list.php
@@ -1,3 +1,71 @@
+<style>
+.custom-dropdown-menu {
+    display: none;
+    position: fixed;
+    background-color: #ffffff !important;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    min-width: 10rem;
+    z-index: 9999;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+.custom-dropdown-menu .dropdown-item {
+    display: block !important;
+    width: 100% !important;
+    padding: 0.5rem 1rem !important;
+    clear: both !important;
+    font-weight: 400 !important;
+    color: #212529 !important;
+    text-align: inherit !important;
+    white-space: nowrap !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    text-decoration: none !important;
+    position: relative !important;
+}
+
+.custom-dropdown-menu .dropdown-item:hover {
+    background-color: #f8f9fa !important;
+    color: #16181b !important;
+    cursor: pointer !important;
+}
+
+.custom-dropdown-menu .dropdown-item i {
+    margin-right: 8px !important;
+    vertical-align: middle !important;
+}
+
+.table tbody tr {
+    cursor: pointer;
+}
+
+/* Ensure the dropdown menu has a solid background */
+.custom-dropdown-menu::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #ffffff;
+    z-index: -1;
+}
+
+/* Add a subtle backdrop effect */
+.custom-dropdown-menu::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.05);
+    z-index: -2;
+    pointer-events: none;
+}
+</style>
 <div class="row" id="policy_list">
     <div class="col-12">
         <div class="card">
@@ -51,6 +119,90 @@
 </div>
 <!-- end row -->
 
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+    const table = document.getElementById("tickets-table");
+    
+    // Create custom dropdown
+    function createCustomDropdown(row) {
+        // Get the original dropdown items
+        const originalDropdown = row.querySelector('.dropdown-menu');
+        if (!originalDropdown) return null;
+        
+        // Create new dropdown with proper background and spacing
+        const customDropdown = document.createElement('div');
+        customDropdown.className = 'custom-dropdown-menu';
+        
+        // Copy inner content while maintaining icon alignment
+        customDropdown.innerHTML = originalDropdown.innerHTML;
+        
+        return customDropdown;
+    }
+
+    let activeDropdown = null;
+
+    // Add click event listener to rows
+    table.querySelectorAll("tbody tr").forEach(row => {
+        const customDropdown = createCustomDropdown(row);
+        if (!customDropdown) return;
+        
+        document.body.appendChild(customDropdown);
+
+        row.addEventListener("click", function(event) {
+            // Ignore clicks on the action column
+            if (event.target.closest('td:last-child')) {
+                return;
+            }
+
+            // Hide any active dropdown
+            if (activeDropdown) {
+                activeDropdown.style.display = 'none';
+            }
+
+            // Get click position
+            const rect = event.target.getBoundingClientRect();
+
+            // Position the dropdown with some offset
+            customDropdown.style.display = 'block';
+            customDropdown.style.position = 'fixed';
+            customDropdown.style.left = `${rect.left}px`;
+            customDropdown.style.top = `${rect.bottom + 5}px`; // Add 5px gap
+
+            // Set as active dropdown
+            activeDropdown = customDropdown;
+
+            event.stopPropagation();
+        });
+
+        // Preserve click handlers
+        customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
+            item.addEventListener('click', function(e) {
+                const onclickAttr = this.getAttribute('onclick');
+                if (onclickAttr) {
+                    eval(onclickAttr);
+                }
+                
+                const href = this.getAttribute('href');
+                if (href && href !== '#') {
+                    window.location.href = href;
+                }
+                
+                e.stopPropagation();
+            });
+        });
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function() {
+        if (activeDropdown) {
+            activeDropdown.style.display = 'none';
+            activeDropdown = null;
+        }
+    });
+});
+</script>
+
+
 <script>
 
  $(document).ready(function(){
diff --git a/app/Views/test_members_list.php b/app/Views/test_members_list.php
index db5ce46e..385aeb37 100644
--- a/app/Views/test_members_list.php
+++ b/app/Views/test_members_list.php
@@ -61,6 +61,32 @@
     opacity: 0.5;  /* Darken backdrop for better focus */
 }
 
+.custom-dropdown-menu {
+    display: none;
+    position: absolute;
+    background-color: #ffffff !important;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    min-width: 10rem;
+    z-index: 9999;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.custom-dropdown-menu .dropdown-item {
+    display: block !important;
+    width: 100% !important;
+    padding: 0.5rem 1rem !important;
+    color: #212529 !important;
+    text-decoration: none !important;
+    background-color: transparent !important;
+}
+
+.custom-dropdown-menu .dropdown-item:hover {
+    background-color: #f8f9fa !important;
+    color: #16181b !important;
+    cursor: pointer !important;
+}   
 
 </style>
 
@@ -365,6 +391,95 @@
     </div>
 </div><!-- /.modal -->
 
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+    const table = document.getElementById("tickets-table");
+    
+    // Create custom dropdown
+    function createCustomDropdown(row) {
+        // Get the original dropdown items
+        const originalDropdown = row.querySelector('.dropdown-menu');
+        if (!originalDropdown) return null;
+        
+        // Create new dropdown with proper background and spacing
+        const customDropdown = document.createElement('div');
+        customDropdown.className = 'custom-dropdown-menu';
+        
+        // Copy inner content while maintaining icon alignment
+        customDropdown.innerHTML = originalDropdown.innerHTML;
+        
+        return customDropdown;
+    }
+
+    let activeDropdown = null;
+
+    // Add click event listener to rows
+    table.querySelectorAll("tbody tr").forEach(row => {
+        const customDropdown = createCustomDropdown(row);
+        if (!customDropdown) return;
+        
+        document.body.appendChild(customDropdown);
+
+        row.addEventListener("click", function(event) {
+            // Ignore clicks on the action column
+            if (event.target.closest('td:last-child')) {
+                return;
+            }
+
+            // Hide any active dropdown
+            if (activeDropdown) {
+                activeDropdown.style.display = 'none';
+            }
+
+            // Get click position
+            const rect = event.target.getBoundingClientRect();
+            
+            // Position the dropdown with some offset
+            customDropdown.style.display = 'block';
+            customDropdown.style.position = 'fixed';
+            customDropdown.style.left = `${rect.left}px`;
+            customDropdown.style.top = `${rect.bottom + 5}px`; // Add 5px gap
+            
+            // Set as active dropdown
+            activeDropdown = customDropdown;
+            
+            event.stopPropagation();
+        });
+
+        // Preserve click handlers and add auto-close
+        customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
+            item.addEventListener('click', function(e) {
+                const onclickAttr = this.getAttribute('onclick');
+                if (onclickAttr) {
+                    eval(onclickAttr);
+                }
+                
+                const href = this.getAttribute('href');
+                if (href && href !== '#') {
+                    window.location.href = href;
+                }
+
+                // Close the dropdown after handling the click
+                if (activeDropdown) {
+                    activeDropdown.style.display = 'none';
+                    activeDropdown = null;
+                }
+                
+                e.stopPropagation();
+            });
+        });
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function() {
+        if (activeDropdown) {
+            activeDropdown.style.display = 'none';
+            activeDropdown = null;
+        }
+    });
+});
+</script>
+
 <script>
     function toggleAll(selectAllCheckbox) {
   const rowCheckboxes = document.querySelectorAll('.rowCheckbox');
diff --git a/app/Views/tpa_list.php b/app/Views/tpa_list.php
index 83abeb08..3e08617a 100755
--- a/app/Views/tpa_list.php
+++ b/app/Views/tpa_list.php
@@ -1,3 +1,71 @@
+<style>
+custom-dropdown-menu {
+    display: none;
+    position: fixed;
+    background-color: #ffffff !important;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    min-width: 10rem;
+    z-index: 9999;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+.custom-dropdown-menu .dropdown-item {
+    display: block !important;
+    width: 100% !important;
+    padding: 0.5rem 1rem !important;
+    clear: both !important;
+    font-weight: 400 !important;
+    color: #212529 !important;
+    text-align: inherit !important;
+    white-space: nowrap !important;
+    background-color: transparent !important;
+    border: 0 !important;
+    text-decoration: none !important;
+    position: relative !important;
+}
+
+.custom-dropdown-menu .dropdown-item:hover {
+    background-color: #f8f9fa !important;
+    color: #16181b !important;
+    cursor: pointer !important;
+}
+
+.custom-dropdown-menu .dropdown-item i {
+    margin-right: 8px !important;
+    vertical-align: middle !important;
+}
+
+.table tbody tr {
+    cursor: pointer;
+}
+
+/* Ensure the dropdown menu has a solid background */
+.custom-dropdown-menu::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #ffffff;
+    z-index: -1;
+}
+
+/* Add a subtle backdrop effect */
+.custom-dropdown-menu::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0,0,0,0.05);
+    z-index: -2;
+    pointer-events: none;
+}
+</style>
 <div class="row" id="tpa_list">
     <div class="col-12">
         <div class="card">
@@ -42,6 +110,94 @@
     </div><!-- end col -->
 </div>
 <!-- end row -->
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+    const table = document.getElementById("tickets-table");
+    
+    // Create custom dropdown
+    function createCustomDropdown(row) {
+        // Get the original dropdown items
+        const originalDropdown = row.querySelector('.dropdown-menu');
+        if (!originalDropdown) return null;
+        
+        // Create new dropdown with proper background and spacing
+        const customDropdown = document.createElement('div');
+        customDropdown.className = 'custom-dropdown-menu';
+        
+        // Copy inner content while maintaining icon alignment
+        customDropdown.innerHTML = originalDropdown.innerHTML;
+        
+        return customDropdown;
+    }
+
+    let activeDropdown = null;
+
+    // Add click event listener to rows
+    table.querySelectorAll("tbody tr").forEach(row => {
+        const customDropdown = createCustomDropdown(row);
+        if (!customDropdown) return;
+        
+        document.body.appendChild(customDropdown);
+
+        row.addEventListener("click", function(event) {
+            // Ignore clicks on the action column
+            if (event.target.closest('td:last-child')) {
+                return;
+            }
+
+            // Hide any active dropdown
+            if (activeDropdown) {
+                activeDropdown.style.display = 'none';
+            }
+
+            // Get click position
+            const rect = event.target.getBoundingClientRect();
+            
+            // Position the dropdown with some offset
+            customDropdown.style.display = 'block';
+            customDropdown.style.position = 'fixed';
+            customDropdown.style.left = `${rect.left}px`;
+            customDropdown.style.top = `${rect.bottom + 5}px`; // Add 5px gap
+            
+            // Set as active dropdown
+            activeDropdown = customDropdown;
+            
+            event.stopPropagation();
+        });
+
+        // Preserve click handlers and add auto-close
+        customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
+            item.addEventListener('click', function(e) {
+                const onclickAttr = this.getAttribute('onclick');
+                if (onclickAttr) {
+                    eval(onclickAttr);
+                }
+                
+                const href = this.getAttribute('href');
+                if (href && href !== '#') {
+                    window.location.href = href;
+                }
+
+                // Close the dropdown after handling the click
+                if (activeDropdown) {
+                    activeDropdown.style.display = 'none';
+                    activeDropdown = null;
+                }
+                
+                e.stopPropagation();
+            });
+        });
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function() {
+        if (activeDropdown) {
+            activeDropdown.style.display = 'none';
+            activeDropdown = null;
+        }
+    });
+});
+</script>
 
 <script>
 
diff --git a/app/Views/vehicle_master_list.php b/app/Views/vehicle_master_list.php
index f5a4cad2..f28ef11f 100644
--- a/app/Views/vehicle_master_list.php
+++ b/app/Views/vehicle_master_list.php
@@ -21,7 +21,32 @@ table.dataTable tbody td {
     background-color: #f0f0f0;
     color: #666;
 }
+.custom-dropdown-menu {
+    display: none;
+    position: absolute;
+    background-color: #ffffff !important;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 0.25rem;
+    padding: 0.5rem 0;
+    min-width: 10rem;
+    z-index: 9999;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
 
+.custom-dropdown-menu .dropdown-item {
+    display: block !important;
+    width: 100% !important;
+    padding: 0.5rem 1rem !important;
+    color: #212529 !important;
+    text-decoration: none !important;
+    background-color: transparent !important;
+}
+
+.custom-dropdown-menu .dropdown-item:hover {
+    background-color: #f8f9fa !important;
+    color: #16181b !important;
+    cursor: pointer !important;
+}   
 
 </style>
 
@@ -327,40 +352,94 @@ table.dataTable tbody td {
 <!-- end of Client form content modal -->
 <script>
 document.addEventListener("DOMContentLoaded", function () {
-    const table = document.getElementById("client_list");
+    const table = document.getElementById("scroll-horizontal-datatable");
+
+    // Create custom dropdown
+    function createCustomDropdown(row) {
+        // Get the original dropdown menu
+        const originalDropdown = row.querySelector('.dropdown-menu');
+        if (!originalDropdown) return null;
+
+        // Create new dropdown menu with the same content
+        const customDropdown = document.createElement('div');
+        customDropdown.className = 'custom-dropdown-menu';
+
+        // Copy content of the original dropdown
+        customDropdown.innerHTML = originalDropdown.innerHTML;
+
+        return customDropdown;
+    }
+
+    let activeDropdown = null;
 
     // Add click event listener to rows
     table.querySelectorAll("tbody tr").forEach(row => {
-        row.addEventListener("click", function (event) {
-            // Check if the clicked element is inside the dropdown or its menu
-            if (event.target.closest(".dropdown-toggle") || event.target.closest(".dropdown-menu")) {
-                return; // Do nothing if the dropdown or its menu is clicked
+        const customDropdown = createCustomDropdown(row);
+        if (!customDropdown) return;
+
+        // Append custom dropdown to the body
+        document.body.appendChild(customDropdown);
+
+        row.addEventListener("click", function(event) {
+            // Prevent opening dropdown if clicking on the action column (button)
+            if (event.target.closest('td:last-child') || event.target.closest('.dropdown-toggle')) {
+                return;
             }
 
-            // Trigger dropdown menu programmatically
-            const dropdownToggle = this.querySelector(".dropdown-toggle");
-            if (dropdownToggle) {
-                const dropdown = new bootstrap.Dropdown(dropdownToggle); // Bootstrap instance
-                dropdown.toggle(); // Toggle dropdown visibility
+            // Close any existing active dropdown
+            if (activeDropdown) {
+                activeDropdown.style.display = 'none';
             }
+
+            // Get the position of the clicked cell
+            const rect = event.target.getBoundingClientRect();
+
+            // Position the dropdown based on where you click in the row (excluding action column)
+            customDropdown.style.display = 'block';
+            customDropdown.style.position = 'absolute';
+            customDropdown.style.left = `${rect.left + window.scrollX}px`; // Align with the clicked position
+            customDropdown.style.top = `${rect.bottom + window.scrollY + 5}px`; // 5px gap below the row
+
+            // Set this dropdown as the active one
+            activeDropdown = customDropdown;
+
+            event.stopPropagation();  // Prevent event from bubbling up
+        });
+
+        // Add click event to handle dropdown item actions
+        customDropdown.querySelectorAll('.dropdown-item').forEach(item => {
+            item.addEventListener('click', function(e) {
+                const onclickAttr = this.getAttribute('onclick');
+                if (onclickAttr) {
+                    eval(onclickAttr);
+                }
+
+                const href = this.getAttribute('href');
+                if (href && href !== '#') {
+                    window.location.href = href;
+                }
+
+                // Close the dropdown after handling the click
+                if (activeDropdown) {
+                    activeDropdown.style.display = 'none';
+                    activeDropdown = null;
+                }
+
+                e.stopPropagation(); // Prevent event from bubbling up
+            });
         });
     });
 
-    // Close dropdowns when clicking outside the table or dropdown
-    document.addEventListener("click", function (event) {
-        // Check if click is outside of table and dropdown
-        const isClickInsideTable = event.target.closest("#client_list");
-        const isClickInsideDropdown = event.target.closest(".dropdown-toggle, .dropdown-menu");
-
-        if (!isClickInsideTable && !isClickInsideDropdown) {
-            // Close all dropdowns that are open
-            const openDropdowns = document.querySelectorAll(".dropdown-menu.show");
-            openDropdowns.forEach(menu => {
-                menu.classList.remove("show"); // Remove the 'show' class to hide the dropdown
-            });
+    // Close dropdown when clicking outside
+    document.addEventListener("click", function(event) {
+        if (activeDropdown && !event.target.closest('.custom-dropdown-menu')) {
+            activeDropdown.style.display = 'none';
+            activeDropdown = null;
         }
     });
 });
+
+
 </script>