From 62c2d9ae1b5cf49cb3557a097d08b3288f725fab Mon Sep 17 00:00:00 2001
From: Stacy <stacyjoycemapano@gmail.com>
Date: Fri, 3 May 2024 18:13:39 +0800
Subject: [PATCH] pagination & search filter

---
 user-history.php          | 112 +++++++++++++++++++++------------
 user-refund-history.php   | 127 +++++++++++++++++++++++++-------------
 vendor-refund-history.php | 125 ++++++++++++++++++++++++-------------
 3 files changed, 236 insertions(+), 128 deletions(-)

diff --git a/user-history.php b/user-history.php
index 28f793f..b4de884 100644
--- a/user-history.php
+++ b/user-history.php
@@ -42,7 +42,7 @@ if ($_SESSION["isVendor"] == true) {
     <link rel="stylesheet" href="assets/css/plugins/countdownTimer.css" />
     <link rel="stylesheet" href="assets/css/plugins/slick.min.css" />
     <link rel="stylesheet" href="assets/css/plugins/bootstrap.css" />
-
+    
     <!-- FLATICON -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
 
@@ -50,9 +50,13 @@ if ($_SESSION["isVendor"] == true) {
     <link rel="stylesheet" href="assets/css/style.css" />
     <link rel="stylesheet" href="assets/css/style2.css" />
     <link rel="stylesheet" href="assets/css/responsive.css" />
+    <link href="https://cdn.datatables.net/v/bs5/dt-2.0.3/r-3.0.0/sp-2.3.0/datatables.min.css" rel="stylesheet">
 
     <!-- Background css -->
     <link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@latest/dist/css/select2.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/select2@latest/dist/js/select2.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
     <style>
         .tab.active {
@@ -149,7 +153,7 @@ if ($_SESSION["isVendor"] == true) {
             }
         }
     </style>
-
+        
     <script>
         function updateCartItemCount() {
             $.get("cartitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data, status) {
@@ -325,9 +329,9 @@ if ($_SESSION["isVendor"] == true) {
                             <div class="ec-vendor-card-table">
 
                                 <!-- 03-15-2024 Stacy added tab for all orders -->
-                                <div id="allOrders" class=" tab-content active">
+                                <div id="allOrders" class=" tab-content mt-1 active">
                                     <!-- Content for "all Orders" tab -->
-                                    <table class="table ec-table">
+                                    <table id="allOrdersTbl" class="table ec-table">
                                         <thead id="allOrdersTHead">
                                             <tr class="Title">
                                                 <th scope="col">Image</th>
@@ -360,7 +364,8 @@ if ($_SESSION["isVendor"] == true) {
                                                             <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'" 
+                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                                 <td>
                                                                 <?php 
                                                                 if(!empty($order['items'][0]['product']['product_image']))
@@ -377,10 +382,10 @@ if ($_SESSION["isVendor"] == true) {
                                                             }
                                                                 ?> 
                                                             </td>
-                                                                <td><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                                <td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span><?php echo $order['total_amount'] ?></span></td>
+                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
                                                                 <td><span><?php echo $order['status']; ?></span></td>
                                                                 <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
 
@@ -415,9 +420,9 @@ if ($_SESSION["isVendor"] == true) {
                                 </div>
 
                                 
-                                <div id="toPay" class="tab-content">
+                                <div id="toPay" class="tab-content mt-1">
                                     <!-- Content for "To Pay" tab -->
-                                    <table class="table ec-table">
+                                    <table id="toPayTbl" class="table ec-table">
                                         <thead id="toPayTHead">
                                             <tr class="Title">
                                                 <th scope="col">Image</th>
@@ -450,7 +455,8 @@ if ($_SESSION["isVendor"] == true) {
                                                             <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
+                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                                 <td>
                                                                 <?php 
                                                                 if(!empty($order['items'][0]['product']['product_image']))
@@ -467,10 +473,10 @@ if ($_SESSION["isVendor"] == true) {
                                                             }
                                                                 ?> 
                                                                 </td>
-                                                                <td><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                                <td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span><?php echo $order['total_amount'] ?></span></td>
+                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
                                                                 <td><span><?php echo $order['status']; ?></span></td>
                                                                 <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
 
@@ -499,9 +505,9 @@ if ($_SESSION["isVendor"] == true) {
                                 </div>
 
                                 
-                                <div id="toShip" class="tab-content">
+                                <div id="toShip" class="tab-content mt-1">
                                     <!-- Content for "To Ship" tab -->
-                                    <table class="table ec-table">
+                                    <table id="toShipTbl" class="table ec-table">
                                         <thead id="toShipTHead">
                                             <tr class="Title">
                                                 <th scope="col">Image</th>
@@ -536,7 +542,8 @@ if ($_SESSION["isVendor"] == true) {
                                                         <?php
                                                         $jsonorder = json_encode($order);
                                                         ?>
-                                                        <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                        <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
+                                                            data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                             <td>
                                                             <?php 
                                                                 if(!empty($order['items'][0]['product']['product_image']))
@@ -553,10 +560,10 @@ if ($_SESSION["isVendor"] == true) {
                                                             }
                                                                 ?> 
                                                         </td>
-                                                            <td><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                            <td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                            <td><span><?php echo $order['items'][0]['price']; ?></span></td>
-                                                            <td><span><?php echo $order['total_amount'] ?></span></td>
+                                                            <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                            <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                            <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
+                                                            <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
                                                             <td><span><?php echo $order['status']; ?></span></td>
                                                             <!-- <td><span><?php echo $order['tracking_number']; ?></span></td>
                                                             <td><span><?php echo $order['courier_name']; ?></span></td> -->
@@ -585,9 +592,9 @@ if ($_SESSION["isVendor"] == true) {
                                 </div>
 
                                 
-                                <div id="toReceive" class="tab-content">
+                                <div id="toReceive" class="tab-content mt-1">
                                     <!-- Content for "To Receive" tab -->
-                                    <table class="table ec-table">
+                                    <table id="toReceiveTbl" class="table ec-table">
                                         <thead id="toReceiveTHead">
                                             <tr class="Title">
                                                 <th scope="col">Image</th>
@@ -621,7 +628,7 @@ if ($_SESSION["isVendor"] == true) {
                                                         <?php
                                                         $jsonorder = json_encode($order);
                                                         ?>
-                                                        <tr class="tableView">
+                                                        <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'">
                                                             <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                             <?php 
                                                                 if(!empty($order['items'][0]['product']['product_image']))
@@ -638,10 +645,10 @@ if ($_SESSION["isVendor"] == true) {
                                                             }
                                                                 ?> 
                                                             </td>
-                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['items'][0]['price']; ?></span></td>
-                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['total_amount'] ?></span></td>
+                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
+                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
                                                             <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['status']; ?></span></td>
                                                             <!-- <td><span><?php # echo $order['tracking_number']; ?></span></td>
                                                             <td><span><?php # echo $order['courier_name']; ?></span></td> -->
@@ -676,9 +683,9 @@ if ($_SESSION["isVendor"] == true) {
                                 </div>
 
 
-                                <div id="completed" class="tab-content">
+                                <div id="completed" class="tab-content mt-1">
                                     <!-- Content for "Completed" tab -->
-                                    <table class="table ec-table">
+                                    <table id="completedTbl" class="table ec-table">
                                         <thead id="completedTHead">
                                             <tr class="Title">
                                                 <th scope="col">Image</th>
@@ -713,7 +720,8 @@ if ($_SESSION["isVendor"] == true) {
                                                             <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
+                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                                 <td>
                                                                 <?php 
                                                                 if(!empty($order['items'][0]['product']['product_image']))
@@ -731,10 +739,10 @@ if ($_SESSION["isVendor"] == true) {
                                                                 ?>    
 
                                                             </td>
-                                                                <td><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?>    </span></td>
-                                                                <td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span><?php echo $order['total_amount'] ?></span></td>
+                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?>    </span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
                                                                 <td><span><?php echo $order['status']; ?></span></td>
                                                                 <!-- <td><span><?php echo $order['tracking_number']; ?></span></td>
                                                                 <td><span><?php echo $order['courier_name']; ?></span></td> -->
@@ -1290,7 +1298,7 @@ if ($_SESSION["isVendor"] == true) {
 
 
     <!-- Footer navigation panel for responsive display -->
-    <div class="ec-nav-toolbar">
+    <!-- <div class="ec-nav-toolbar">
         <div class="container">
             <div class="ec-nav-panel">
                 <div class="ec-nav-panel-icons">
@@ -1311,7 +1319,7 @@ if ($_SESSION["isVendor"] == true) {
 
             </div>
         </div>
-    </div>
+    </div> -->
     <!-- Footer navigation panel for responsive display end -->
 
     <!-- raymart remove popup feb 20 2024 -->
@@ -1520,6 +1528,29 @@ if ($_SESSION["isVendor"] == true) {
     </div>
     <!-- Feature tools end -->
 
+    <!-- DataTables -->
+    <script>
+        $(document).ready( function () {
+        $('#allOrdersTbl').DataTable();
+        } );
+
+        $(document).ready( function () {
+        $('#toPayTbl').DataTable();
+        } );
+
+        $(document).ready( function () {
+        $('#toShipTbl').DataTable();
+        } );
+
+        $(document).ready( function () {
+        $('#toReceiveTbl').DataTable();
+        } );
+
+        $(document).ready( function () {
+        $('#completedTbl').DataTable();
+        } );
+    </script>
+
     <!-- Vendor JS -->
     <script src="assets/js/vendor/jquery-3.5.1.min.js"></script>
     <script src="assets/js/vendor/popper.min.js"></script>
@@ -1537,7 +1568,8 @@ if ($_SESSION["isVendor"] == true) {
     <script src="assets/js/vendor/jquery.magnific-popup.min.js"></script>
     <script src="assets/js/plugins/jquery.sticky-sidebar.js"></script>
     <script src="assets/js/plugins/nouislider.js"></script>
-
+    <script src="https://cdn.datatables.net/v/bs5/dt-2.0.3/r-3.0.0/sp-2.3.0/datatables.min.js"></script>
+    
     <!-- Main Js -->
     <script src="assets/js/vendor/index.js"></script>
     <script src="assets/js/main.js"></script>
diff --git a/user-refund-history.php b/user-refund-history.php
index cea1c0c..2fffbd7 100644
--- a/user-refund-history.php
+++ b/user-refund-history.php
@@ -54,9 +54,14 @@ if ($_SESSION["isVendor"] == true) {
     <link rel="stylesheet" href="assets/css/style.css" />
     <link rel="stylesheet" href="assets/css/style2.css" />
     <link rel="stylesheet" href="assets/css/responsive.css" />
+    <link href="https://cdn.datatables.net/v/bs5/dt-2.0.3/r-3.0.0/sp-2.3.0/datatables.min.css" rel="stylesheet">
 
     <!-- Background css -->
     <link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@latest/dist/css/select2.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/select2@latest/dist/js/select2.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
     <style>
         .tab.active {
             background-color: #ffffff;
@@ -342,9 +347,9 @@ if ($_SESSION["isVendor"] == true) {
                                 </div> -->
 
                                 <!-- 03-15-2024 Stacy added tab for all orders -->
-                                <div id="allRefunds" class="tab-content active">
+                                <div id="allRefunds" class="tab-content mt-1 active">
                                     <!-- Content for "all Orders" tab -->
-                                    <table class="table ec-table">
+                                    <table id="allRefundsTbl" class="table ec-table">
                                         <thead id="allRefundsTHead">
                                             <tr class="Title">
                                                 <th scope="col">Image</th>
@@ -381,12 +386,13 @@ if ($_SESSION["isVendor"] == true) {
                                                             <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
+                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                                 <td><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                                <td><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                                <td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span><?php echo $order['total_amount'] ?></span></td>
+                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
                                                                 <td><span><?php echo $order['return_order']['status']; ?></span></td>
                                                                 <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                                 <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
@@ -417,9 +423,9 @@ if ($_SESSION["isVendor"] == true) {
                                 </div>
 
 
-                                <div id="toApprove" class="tab-content">
+                                <div id="toApprove" class="tab-content mt-1">
                                     <!-- Content for "To Approve" tab -->
-                                    <table class="table ec-table">
+                                    <table id="toApproveTbl" class="table ec-table">
                                         <thead id="toApproveTHead">
                                             <tr class="Title">
                                                 <th scope="col">Image</th>
@@ -454,12 +460,13 @@ if ($_SESSION["isVendor"] == true) {
                                                             <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
+                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                                 <td><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                                <td><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                                <td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span><?php echo $order['total_amount'] ?></span></td>
+                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
                                                                 <td><span><?php echo $order['return_order']['status']; ?></span></td>
                                                                 <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                                 <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
@@ -490,9 +497,9 @@ if ($_SESSION["isVendor"] == true) {
                                 </div>
 
                                 
-                                <div id="toShip" class="tab-content">
+                                <div id="toShip" class="tab-content mt-1">
                                     <!-- Content for "To Ship" tab -->
-                                    <table class="table ec-table">
+                                    <table id="toShipTbl" class="table ec-table">
                                         <thead id="toShipTHead">
                                             <tr class="Title">
                                                 <th scope="col">Image</th>
@@ -527,12 +534,13 @@ if ($_SESSION["isVendor"] == true) {
                                                             <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
+                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                                 <td><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                                <td><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                                <td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span><?php echo $order['total_amount'] ?></span></td>
+                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
                                                                 <td><span><?php echo $order['return_order']['status']; ?></span></td>
                                                                 <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                                 <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
@@ -563,9 +571,9 @@ if ($_SESSION["isVendor"] == true) {
                                 </div>
 
                                 
-                                <div id="toReceive" class="tab-content">
+                                <div id="toReceive" class="tab-content mt-1">
                                     <!-- Content for "To Receive" tab -->
-                                    <table class="table ec-table">
+                                    <table id="toReceiveTbl" class="table ec-table">
                                         <thead id="toReceiveTHead">
                                             <tr class="Title">
                                                 <th scope="col">Image</th>
@@ -600,12 +608,13 @@ if ($_SESSION["isVendor"] == true) {
                                                             <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
+                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                                 <td><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                                <td><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                                <td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span><?php echo $order['total_amount'] ?></span></td>
+                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
                                                                 <td><span><?php echo $order['return_order']['status']; ?></span></td>
                                                                 <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                                 <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
@@ -639,9 +648,9 @@ if ($_SESSION["isVendor"] == true) {
                                 </div>
 
 
-                                <div id="toRefund" class="tab-content">
+                                <div id="toRefund" class="tab-content mt-1">
                                     <!-- Content for "To Refund" tab -->
-                                    <table class="table ec-table">
+                                    <table id="toRefundTbl" class="table ec-table">
                                         <thead id="toRefundTHead">
                                             <tr class="Title">
                                                 <th scope="col">Image</th>
@@ -676,12 +685,13 @@ if ($_SESSION["isVendor"] == true) {
                                                             <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
+                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                                 <td><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                                <td><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                                <td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span><?php echo $order['total_amount'] ?></span></td>
+                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
                                                                 <td><span><?php echo $order['return_order']['status']; ?></span></td>
                                                                 <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                                 <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
@@ -715,9 +725,9 @@ if ($_SESSION["isVendor"] == true) {
                                 </div>
 
 
-                                <div id="returnComplete" class="tab-content">
+                                <div id="returnComplete" class="tab-content mt-1">
                                     <!-- Content for "Return Complete" tab -->
-                                    <table class="table ec-table">
+                                    <table id="returnCompleteTbl" class="table ec-table">
                                         <thead id="returnCompleteTHead">
                                             <tr class="Title">
                                                 <th scope="col">Image</th>
@@ -751,12 +761,13 @@ if ($_SESSION["isVendor"] == true) {
                                                             <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
+                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                                 <td><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                                <td><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                                <td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span><?php echo $order['total_amount'] ?></span></td>
+                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
+                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
                                                                 <td><span><?php echo $order['return_order']['status']; ?></span></td>
                                                                 <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                                 <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
@@ -1203,7 +1214,7 @@ if ($_SESSION["isVendor"] == true) {
 
 
     <!-- Footer navigation panel for responsive display -->
-    <div class="ec-nav-toolbar">
+    <!-- <div class="ec-nav-toolbar">
         <div class="container">
             <div class="ec-nav-panel">
                 <div class="ec-nav-panel-icons">
@@ -1224,7 +1235,7 @@ if ($_SESSION["isVendor"] == true) {
 
             </div>
         </div>
-    </div>
+    </div> -->
     <!-- Footer navigation panel for responsive display end -->
 
     <!-- raymart remove popup feb 20 2024 -->
@@ -1433,6 +1444,33 @@ if ($_SESSION["isVendor"] == true) {
     </div>
     <!-- Feature tools end -->
 
+    <!-- DataTables -->
+    <script>
+        $(document).ready( function () {
+        $('#allRefundsTbl').DataTable();
+        } );
+
+        $(document).ready( function () {
+        $('#toApproveTbl').DataTable();
+        } );
+
+        $(document).ready( function () {
+        $('#toShipTbl').DataTable();
+        } );
+
+        $(document).ready( function () {
+        $('#toReceiveTbl').DataTable();
+        } );
+
+        $(document).ready( function () {
+        $('#toRefundTbl').DataTable();
+        } );
+
+        $(document).ready( function () {
+        $('#returnCompleteTbl').DataTable();
+        } );
+    </script>
+
     <!-- Vendor JS -->
     <script src="assets/js/vendor/jquery-3.5.1.min.js"></script>
     <script src="assets/js/vendor/popper.min.js"></script>
@@ -1450,6 +1488,7 @@ if ($_SESSION["isVendor"] == true) {
     <script src="assets/js/vendor/jquery.magnific-popup.min.js"></script>
     <script src="assets/js/plugins/jquery.sticky-sidebar.js"></script>
     <script src="assets/js/plugins/nouislider.js"></script>
+    <script src="https://cdn.datatables.net/v/bs5/dt-2.0.3/r-3.0.0/sp-2.3.0/datatables.min.js"></script>
 
     <!-- Main Js -->
     <script src="assets/js/vendor/index.js"></script>
diff --git a/vendor-refund-history.php b/vendor-refund-history.php
index 6c3acbf..22df05f 100644
--- a/vendor-refund-history.php
+++ b/vendor-refund-history.php
@@ -69,9 +69,14 @@ if ($_SESSION["isCustomer"] == true) {
     <link rel="stylesheet" href="assets/css/style.css" />
     <link rel="stylesheet" href="assets/css/style2.css" />
     <link rel="stylesheet" href="assets/css/responsive.css" />
+    <link href="https://cdn.datatables.net/v/bs5/dt-2.0.3/r-3.0.0/sp-2.3.0/datatables.min.css" rel="stylesheet">
 
     <!-- Background css -->
     <link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@latest/dist/css/select2.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/select2@latest/dist/js/select2.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
     <style>
         .tab.active {
             background-color: #ffffff;
@@ -319,8 +324,8 @@ if ($_SESSION["isCustomer"] == true) {
 
                                 <!-- 03-26-2024 Stacy added tab for all orders -->
                                 <!-- Content for "All Refunds" tab -->
-                                <div id="allRefunds" class="tab-content active">
-                                    <table class="table ec-table">
+                                <div id="allRefunds" class="tab-content mt-1 active">
+                                    <table id="allRefundsTbl" class="table ec-table">
                                         <thead id="allRefundTHead">
                                             <tr class="Title">
                                                 <th scope="col">Image</th>
@@ -353,12 +358,13 @@ if ($_SESSION["isCustomer"] == true) {
                                                     <?php
                                                     $jsonorder = json_encode($order);
                                                     ?>
-                                                    <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                    <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
+                                                        data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                         <td><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                        <td><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                        <td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                        <td><span><?php echo $order['items'][0]['price']; ?></span></td>
-                                                        <td><span><?php echo $order['total_amount'] ?></span></td>
+                                                        <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                        <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                        <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
+                                                        <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
                                                         <td><span><?php echo $order['return_order']['status']; ?></span></td>
                                                         <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                         <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
@@ -388,8 +394,8 @@ if ($_SESSION["isCustomer"] == true) {
 
 
                                 <!-- Content for "To Approve" tab -->
-                                <div id="toApprove" class="tab-content">
-                                    <table class="table ec-table">
+                                <div id="toApprove" class="tab-content mt-1">
+                                    <table id="toApproveTbl" class="table ec-table">
                                         <thead id="toApproveTHead">
                                             <tr class="Title">
                                                 <th scope="col">Image</th>
@@ -420,12 +426,12 @@ if ($_SESSION["isCustomer"] == true) {
                                                     <?php
                                                     $jsonorder = json_encode($order);
                                                     ?>
-                                                    <tr class="tableView">
+                                                    <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'">
                                                         <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['items'][0]['price']; ?></span></td>
-                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['total_amount'] ?></span></td>
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
                                                         <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['return_order']['status']; ?></span></td>
                                                         <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                         <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
@@ -459,8 +465,8 @@ if ($_SESSION["isCustomer"] == true) {
 
 
                                 <!-- Content for "To Ship" tab -->
-                                <div id="toShip" class="tab-content">
-                                    <table class="table ec-table">
+                                <div id="toShip" class="tab-content mt-1">
+                                    <table id="toShipTbl" class="table ec-table">
                                         <thead id="toShipTHead">
                                             <tr class="Title">
                                                 <th scope="col">Image</th>
@@ -491,12 +497,13 @@ if ($_SESSION["isCustomer"] == true) {
                                                     <?php
                                                     $jsonorder = json_encode($order);
                                                     ?>
-                                                    <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                    <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
+                                                        data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                         <td><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                        <td><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                        <td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                        <td><span><?php echo $order['items'][0]['price']; ?></span></td>
-                                                        <td><span><?php echo $order['total_amount'] ?></span></td>
+                                                        <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                        <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                        <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
+                                                        <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
                                                         <td><span><?php echo $order['return_order']['status']; ?></span></td>
                                                         <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                         <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
@@ -526,8 +533,8 @@ if ($_SESSION["isCustomer"] == true) {
 
 
                                 <!-- Content for "To Receive" tab -->
-                                <div id="toReceive" class="tab-content">
-                                    <table class="table ec-table">
+                                <div id="toReceive" class="tab-content mt-1">
+                                    <table id="toReceiveTbl" class="table ec-table">
                                         <thead id="toReceiveTHead">
                                             <tr class="Title">
                                                 <th scope="col">Image</th>
@@ -557,12 +564,12 @@ if ($_SESSION["isCustomer"] == true) {
                                                     <?php
                                                     $jsonorder = json_encode($order);
                                                     ?>
-                                                    <tr class="tableView">
+                                                    <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'">
                                                         <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['items'][0]['price']; ?></span></td>
-                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['total_amount'] ?></span></td>
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
                                                         <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['return_order']['status']; ?></span></td>
                                                         <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                         <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
@@ -595,8 +602,8 @@ if ($_SESSION["isCustomer"] == true) {
 
 
                                 <!-- Content for "To Refund" tab -->
-                                <div id="toRefund" class="tab-content">
-                                    <table class="table ec-table">
+                                <div id="toRefund" class="tab-content mt-1">
+                                    <table id="toRefundTbl" class="table ec-table">
                                         <thead id="toRefundTHead">
                                             <tr class="Title">
                                                 <th scope="col">Image</th>
@@ -626,12 +633,13 @@ if ($_SESSION["isCustomer"] == true) {
                                                     <?php
                                                     $jsonorder = json_encode($order);
                                                     ?>
-                                                    <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                    <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
+                                                        data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                         <td><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                        <td><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                        <td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                        <td><span><?php echo $order['items'][0]['price']; ?></span></td>
-                                                        <td><span><?php echo $order['total_amount'] ?></span></td>
+                                                        <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                        <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                        <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
+                                                        <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
                                                         <td><span><?php echo $order['return_order']['status']; ?></span></td>
                                                         <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                         <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
@@ -664,8 +672,8 @@ if ($_SESSION["isCustomer"] == true) {
 
 
                                 <!-- Content for "Return Complete" tab -->
-                                <div id="returnComplete" class="tab-content">
-                                    <table class="table ec-table">
+                                <div id="returnComplete" class="tab-content mt-1">
+                                    <table id="returnCompleteTbl" class="table ec-table">
                                         <thead id="returnCompleteTHead">
                                             <tr class="Title">
                                                 <th scope="col">Image</th>
@@ -695,12 +703,13 @@ if ($_SESSION["isCustomer"] == true) {
                                                     <?php
                                                     $jsonorder = json_encode($order);
                                                     ?>
-                                                    <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                    <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
+                                                        data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                         <td><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                        <td><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                        <td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                        <td><span><?php echo $order['items'][0]['price']; ?></span></td>
-                                                        <td><span><?php echo $order['total_amount'] ?></span></td>
+                                                        <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                        <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                        <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
+                                                        <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
                                                         <td><span><?php echo $order['return_order']['status']; ?></span></td>
                                                         <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                         <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
@@ -1246,7 +1255,7 @@ if ($_SESSION["isCustomer"] == true) {
 
 
     <!-- Footer navigation panel for responsive display -->
-    <div class="ec-nav-toolbar">
+    <!-- <div class="ec-nav-toolbar">
         <div class="container">
             <div class="ec-nav-panel">
                 <div class="ec-nav-panel-icons">
@@ -1267,7 +1276,7 @@ if ($_SESSION["isCustomer"] == true) {
 
             </div>
         </div>
-    </div>
+    </div> -->
     <!-- Footer navigation panel for responsive display end -->
 
     <!-- raymart remove popup feb 20 2024 -->
@@ -1476,6 +1485,33 @@ if ($_SESSION["isCustomer"] == true) {
     </div>
     <!-- Feature tools end -->
 
+     <!-- DataTables -->
+     <script>
+        $(document).ready( function () {
+        $('#allRefundsTbl').DataTable();
+        } );
+
+        $(document).ready( function () {
+        $('#toApproveTbl').DataTable();
+        } );
+
+        $(document).ready( function () {
+        $('#toShipTbl').DataTable();
+        } );
+
+        $(document).ready( function () {
+        $('#toReceiveTbl').DataTable();
+        } );
+
+        $(document).ready( function () {
+        $('#toRefundTbl').DataTable();
+        } );
+
+        $(document).ready( function () {
+        $('#returnCompleteTbl').DataTable();
+        } );
+    </script>
+
     <!-- Vendor JS -->
     <script src="assets/js/vendor/jquery-3.5.1.min.js"></script>
     <script src="assets/js/vendor/popper.min.js"></script>
@@ -1493,6 +1529,7 @@ if ($_SESSION["isCustomer"] == true) {
     <script src="assets/js/vendor/jquery.magnific-popup.min.js"></script>
     <script src="assets/js/plugins/jquery.sticky-sidebar.js"></script>
     <script src="assets/js/plugins/nouislider.js"></script>
+    <script src="https://cdn.datatables.net/v/bs5/dt-2.0.3/r-3.0.0/sp-2.3.0/datatables.min.js"></script>
 
     <!-- Main Js -->
     <script src="assets/js/vendor/index.js"></script>