diff --git a/index.php b/index.php
index c951910..a57d7ac 100644
--- a/index.php
+++ b/index.php
@@ -224,9 +224,9 @@ if ($_SESSION["userId"] <> "") {
                                         $vendorOfProduct = getVendorbyId($forAll[$pid]['vendor_api_id']);
                                 ?>
                                         <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6  ec-product-content" data-animation="fadeIn">
-                                            <div class="ec-product-inner">
+                                            <div class="ec-product-inner" style="width: 260px;">
                                                 <!-- raymart added style feb 26 2024 -->
-                                                <div class="ec-pro-image-outer" style="width: 290; height: 350px;">
+                                                <div class="ec-pro-image-outer">
                                                 <!-- <div class="ec-pro-image-outer"> -->
                                                     <div class="ec-pro-image">
                                                     <a href="product-left-sidebar.php?id=<?php echo $forAll[$pid]["_id"]; ?>">
@@ -237,7 +237,7 @@ if ($_SESSION["userId"] <> "") {
                                                                 if (!empty($image_urls)) {
                                                                     $first_image_url = trim($image_urls[0]);
                                                             ?>
-                                                                    <img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 330px;" />
+                                                                    <img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 280px;" />
                                                                 <?php
                                                                 }
                                                             } else {
@@ -344,9 +344,9 @@ if ($_SESSION["userId"] <> "") {
                                         $vendorOfProduct = getVendorbyId($electronics[$pid]['vendor_api_id']);
                                 ?>
                                         <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6  ec-product-content" data-animation="fadeIn">
-                                            <div class="ec-product-inner">
+                                            <div class="ec-product-inner" style="width: 260px;">
                                                 <!-- raymart added style feb 26 2024 -->
-                                                <div class="ec-pro-image-outer" style="width: 290; height: 350px;">
+                                                <div class="ec-pro-image-outer">
                                                 <!-- <div class="ec-pro-image-outer"> -->
                                                     <div class="ec-pro-image">
                                                     <a href="product-left-sidebar.php?id=<?php echo $electronics[$pid]["_id"]; ?>">
@@ -357,7 +357,7 @@ if ($_SESSION["userId"] <> "") {
                                                                 if (!empty($image_urls)) {
                                                                     $first_image_url = trim($image_urls[0]);
                                                             ?>
-                                                                    <img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 330px;"/>
+                                                                    <img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 280px;" />
                                                                 <?php
                                                                 }
                                                             } else {
@@ -466,9 +466,9 @@ if ($_SESSION["userId"] <> "") {
                                         $vendorOfProduct = getVendorbyId($smartHome[$pid]['vendor_api_id']);
                                 ?>
                                         <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6  ec-product-content" data-animation="fadeIn">
-                                            <div class="ec-product-inner">
+                                            <div class="ec-product-inner" style="width: 260px;">
                                                 <!-- raymart added style feb 26 2024 -->
-                                                <div class="ec-pro-image-outer" style="width: 290; height: 350px;">
+                                                <div class="ec-pro-image-outer">
                                                 <!-- <div class="ec-pro-image-outer"> -->
                                                     <div class="ec-pro-image">
                                                     <a href="product-left-sidebar.php?id=<?php echo $smartHome[$pid]["_id"]; ?>">
@@ -479,7 +479,7 @@ if ($_SESSION["userId"] <> "") {
                                                                 if (!empty($image_urls)) {
                                                                     $first_image_url = trim($image_urls[0]);
                                                             ?>
-                                                                    <img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 330px;"/>
+                                                                    <img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 280px;" />
                                                                 <?php
                                                                 }
                                                             } else {
@@ -586,9 +586,9 @@ if ($_SESSION["userId"] <> "") {
                                         $vendorOfProduct = getVendorbyId($forVehicle[$pid]['vendor_api_id']);
                                 ?>
                                         <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6  ec-product-content" data-animation="fadeIn">
-                                            <div class="ec-product-inner">
+                                            <div class="ec-product-inner" style="width: 260px;">
                                                 <!-- raymart added style feb 26 2024-->
-                                                <div class="ec-pro-image-outer" style="width: 290; height: 350px;">
+                                                <div class="ec-pro-image-outer">
                                                 <!-- <div class="ec-pro-image-outer"> -->
                                                     <div class="ec-pro-image">
                                                     <a href="product-left-sidebar.php?id=<?php echo $forVehicle[$pid]["_id"]; ?>">
@@ -599,7 +599,7 @@ if ($_SESSION["userId"] <> "") {
                                                                 if (!empty($image_urls)) {
                                                                     $first_image_url = trim($image_urls[0]);
                                                             ?>
-                                                                    <img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 330px;"/>
+                                                                    <img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 280px;" />
                                                                 <?php
                                                                 }
                                                             } else {
@@ -1211,9 +1211,9 @@ if ($_SESSION["userId"] <> "") {
                         $vendorOfProduct = getVendorbyId($newArrival[$pid]['vendor_api_id']);
                 ?>
                         <div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6  ec-product-content" data-animation="flipInY">
-                            <div class="ec-product-inner">
+                            <div class="ec-product-inner" style="width: 260px;">
                                 <!-- raymart added style feb 26 2024 -->
-                                <div class="ec-pro-image-outer" style="width: 290; height: 350px;">
+                                <div class="ec-pro-image-outer">
                                 <!-- <div class="ec-pro-image-outer"> -->
                                     <div class="ec-pro-image">
                                     <a href="product-left-sidebar.php?id=<?php echo $newArrival[$pid]["_id"]; ?>">
@@ -1224,7 +1224,7 @@ if ($_SESSION["userId"] <> "") {
                                                 if (!empty($image_urls)) {
                                                     $first_image_url = trim($image_urls[0]);
                                             ?>
-                                                    <img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 330px;" />
+                                                    <img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 280px;" />
                                                 <?php
                                                 }
                                             } else {
diff --git a/register_customer.php b/register_customer.php
index 186462c..e518d27 100644
--- a/register_customer.php
+++ b/register_customer.php
@@ -1,5 +1,9 @@
 <?php
-    
+include "functions.php";
+
+$customers = getVendorbyId($_SESSION["customerId"]);
+$customerData = json_decode($customers, true);
+
 ?>
 <!DOCTYPE html>
  <html lang="en">
diff --git a/shop-list-left-sidebar.php b/shop-list-left-sidebar.php
index b8db52d..cf42a52 100644
--- a/shop-list-left-sidebar.php
+++ b/shop-list-left-sidebar.php
@@ -335,7 +335,7 @@ if (!empty($_GET['minPrice']) || !empty($_GET['maxPrice']) || !empty($_GET['cate
                                                                 }
                                                             } else {
                                                                 ?>
-                                                                <img class="hover-image" src="https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png" alt="edit" />
+                                                                <img style="width: 290px; height: 200px; object-fit: cover;" class="hover-image" src="https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png" alt="edit" />
                                                             <?php
                                                             }
                                                             ?>
diff --git a/user-history.php b/user-history.php
index 7f6f97f..48f3692 100644
--- a/user-history.php
+++ b/user-history.php
@@ -65,22 +65,24 @@ if ($_SESSION["userId"] <> "") {
             font-weight: 400;
             /* margin: 2px; */
             text-align: center;
-            margin-right: -25px;
+            /* margin-right: -25px; */
         }
         .tab i {
             font-size: 15px;
             /* padding-left: 3px; */
         }
         .tableView:hover {
-            background-color: #f5f5f5;
+            /* background-color: #f5f5f5; */
+            background-color: #e5e5e5;
         }
         .tab-content {
             border: none;
+            margin-top: -30px;
         }
-        .theadTitle {
+        /* .theadTitle {
             background-color: #dddddd;
-            padding-top: -50px;
-        }
+            padding-top: -90px;
+        } */
 
         @media only screen and (max-width: 640px) {
             #tableTitle {
@@ -98,6 +100,32 @@ if ($_SESSION["userId"] <> "") {
                 font-size: 10px;
             }
         }
+
+        /* for status buttons */
+        @media only screen and (max-width: 10000px) {
+            .tab {
+                font-size: 15px;
+                width: 11rem;
+            }
+        }
+        @media only screen and (max-width: 685px) {
+            .tab {
+                font-size: 11px;
+                width: 7rem;
+            }
+            .tab i {
+                font-size: 10px;
+            }
+        }
+        @media only screen and (max-width: 566px) {
+            .tab {
+                font-size: 0px;
+                width: 5rem;
+            }
+            .tab i {
+                font-size: 14px;
+            }
+        }
     </style>
 
     <script>
@@ -196,9 +224,8 @@ if ($_SESSION["userId"] <> "") {
                     </div>
                 </div>
                 <div class="ec-shop-rightside col-lg-9 col-md-12">
-
                     <!-- 03-14-2024 Stacy added cards -->
-                    <div class="row" id="rowTabs" style="justify-content:center; padding-bottom:20px; padding-right:20px; display:flex; align-items:center; text-align:center;">
+                    <!-- <div class="row d-flex justify-content-around" id="rowTabs" >
                         <div id="tableTabs" class="col-lg-3 col-md-6" style="width:8rem;">
                             <div class="tab h-40"  data-tab-name="allOrders" onclick="showTab('allOrders'), document.getElementById('tableTitle').innerHTML = 'All Order History'">All Orders
                                 <i class="fa-solid fa-cubes"></i>
@@ -224,7 +251,8 @@ if ($_SESSION["userId"] <> "") {
                                 <i class="fa-solid fa-square-check"></i>
                             </div>
                         </div>
-                    </div>
+                    </div> -->
+
                     <div class="ec-vendor-dashboard-card">
                         <div class="ec-vendor-card-header">
                             <h5 id="tableTitle">All Order History</h5>
@@ -236,20 +264,49 @@ if ($_SESSION["userId"] <> "") {
                                 <a class="btn btn-lg btn-primary" id="shopNow" style="background:none; color:#3474d4;" href="index.php">Shop Now</a>
                             </div>
                         </div>
+
+                        <div class="card" style="border: none;">
+                            <div class="card-body" style="margin-bottom:-20px;">
+                                <div class="tab-container d-flex justify-content-around">
+                                    <!-- 03-25-2024 Stacy modified cards -->
+                                    <div class="tab active" data-tab-name="allOrders" onclick="showTab('allOrders'), document.getElementById('tableTitle').innerHTML = 'All Order History'">All Orders
+                                        <i class="fa-solid fa-cubes"></i></div>
+                                    <div class="tab" data-tab-name="toPay" onclick="showTab('toPay'), document.getElementById('tableTitle').innerHTML = 'All To Pay Products'">To Pay
+                                        <i class="fa-solid fa-money-bill-1-wave"></i></div>
+                                    <div class="tab" data-tab-name="toShip" onclick="showTab('toShip'), document.getElementById('tableTitle').innerHTML = 'All To Ship Products'">To Ship
+                                        <i class="fa-solid fa-truck"></i></div>
+                                    <div class="tab" data-tab-name="toReceive" onclick="showTab('toReceive'), document.getElementById('tableTitle').innerHTML = 'All To Receive Products'">To Receive
+                                        <i class="fa-solid fa-box-archive"></i></div>
+                                    <div class="tab" data-tab-name="completed" onclick="showTab('completed'), document.getElementById('tableTitle').innerHTML = 'All Completed Purchase'">Complete
+                                        <i class="fa-solid fa-square-check"></i></div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- <div class="ec-vendor-card-header" style="border: none;">
+                            <div class="tab-container d-flex justify-content-around">
+                                <!-- 03-25-2024 Stacy modified cards -->
+                                <!-- <div class="tab" data-tab-name="allOrders" onclick="showTab('allOrders'), document.getElementById('tableTitle').innerHTML = 'All Order History'">All orders
+                                    <i class="fa-solid fa-cubes"></i></div>
+                                <div class="tab" data-tab-name="toPay" onclick="showTab('toPay'), document.getElementById('tableTitle').innerHTML = 'All To Pay Products'">To Pay
+                                    <i class="fa-solid fa-money-bill-1-wave"></i></div>
+                                <div class="tab" data-tab-name="toShip" onclick="showTab('toShip'), document.getElementById('tableTitle').innerHTML = 'All To Ship Products'">To Ship
+                                    <i class="fa-solid fa-truck"></i></div>
+                                <div class="tab" data-tab-name="toReceive" onclick="showTab('toReceive'), document.getElementById('tableTitle').innerHTML = 'All To Receive Products'">To Receive
+                                    <i class="fa-solid fa-box-archive"></i></div>
+                                <div class="tab" data-tab-name="completed" onclick="showTab('completed'), document.getElementById('tableTitle').innerHTML = 'All Completed Purchase'">Completed
+                                    <i class="fa-solid fa-square-check"></i></div>
+                            </div>
+                        </div> -->
+
                         <div class="ec-vendor-card-body">
                             <div class="ec-vendor-card-table">
-                                <!-- <div class="tab-container">
-                                    <div class="tab" data-tab-name="toPay" onclick="showTab('toPay')">To Pay</div>
-                                    <div class="tab" data-tab-name="toShip" onclick="showTab('toShip')">To Ship</div>
-                                    <div class="tab" data-tab-name="toReceive" onclick="showTab('toReceive')">To Receive</div>
-                                    <div class="tab" data-tab-name="completed" onclick="showTab('completed')">Completed</div>
-                                </div> -->
 
                                 <!-- 03-15-2024 Stacy added tab for all orders -->
-                                <div id="allOrders" class="tab-content active">
+                                <div id="allOrders" class=" tab-content active">
                                     <!-- Content for "all Orders" tab -->
                                     <table class="table ec-table">
-                                        <thead class="theadTitle">
+                                        <thead>
                                             <tr>
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
@@ -288,6 +345,7 @@ if ($_SESSION["userId"] <> "") {
                                                                     //     echo '<img class="prod-img" src="https://api.obanana.com/images/storage/web_images/1710214273217-no_image.png" alt="product">';
                                                                     // }
                                                                 ?>
+                                                                <img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product">
                                                                 </td>
                                                                     <!-- <img class="prod-img" src="<?php # echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td> -->
                                                                 <td><span><?php echo $order['items'][0]['product']['name']; ?></span></td>
@@ -525,6 +583,9 @@ if ($_SESSION["userId"] <> "") {
                                                             $totalAmount += $order['total_amount'];
                                                             
                                             ?>
+                                                            <?php
+                                                            $jsonorder = json_encode($order);
+                                                            ?>
                                                             <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                                 <td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
                                                                 <td><span><?php echo $order['items'][0]['product']['name']; ?></span></td>
@@ -751,7 +812,6 @@ if ($_SESSION["userId"] <> "") {
                                     </table>
                                 </div>
 
-
                                 <script>
                                     var sessionToken = '<?php echo isset($_SESSION["token"]) ? $_SESSION["token"] : ""; ?>';
                                     var email = '<?php echo isset($_SESSION["email"]) ? $_SESSION["email"] : ""; ?>';
@@ -883,25 +943,21 @@ if ($_SESSION["userId"] <> "") {
     <?php include "footer.php" ?>
     <!-- Footer Area End -->
 
-    <!-- Modal -->
+    <!-- Modal Start -->
     <!-- 03-15-2024 Stacy added modal -->
     <div class="modal fade" id="productDetails" tabindex="-1" role="dialog">
         <div class="modal-dialog modal-dialog-centered" role="document">
             <div class="modal-content">
                 <div class="modal-body">
-                    <div class="modal-header" style="height:5px;">
-                        <button type="button" class="btn-close-icon" style="align-items: end;" data-bs-dismiss="modal" aria-label="Close">
-                        <i class="mdi mdi-close"></i>
-                        </button>
-                    </div>
-                    <div class="row" id="modalContent" style="justify-content:center; align-items:center;">
-                        <!-- modal content placed under script -->
+                        <!-- modal header placed under script -->
+                    <div class="row" id="modalContent" style="display:flex; justify-content:center;">
+                        <!-- modal body placed under script -->
                     </div>
                 </div>
             </div>
         </div>
     </div>
-    <!-- Modal end -->
+    <!-- Modal End -->
 
     <script>
         // 03-18-2024 Stacy added script for showing productDetails modal
@@ -910,24 +966,27 @@ if ($_SESSION["userId"] <> "") {
         var jsonString = $(event.relatedTarget).data('value');
 
         var jsonObject = JSON.parse(jsonString);
-        const modal = document.getElementById('modalContent'); // No changes here
+        const modal = document.getElementById('modalContent');
 
-        const date = new Date(jsonObject.updatedAt); const formatter = new Intl. DateTimeFormat('en-US', { day: '2-digit', month: '2-digit', year: 'numeric' }); const formattedDate = formatter. format(date);
+        const date = new Date(jsonObject.updatedAt); const formatter = new Intl. DateTimeFormat('en-US', { day: '2-digit', month: 'long', year: 'numeric' }); const formattedDate = formatter. format(date);
 
         if (jsonObject.status === 'TO PAY') { // Changed $order['status'] to jsonObject.status
             modal.innerHTML = `
-            <div class="row" style="margin-left:20px;">
+            <div class="modal-header" style="height:5px;">
+                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="row" style="display:flex; justify-content:center; margin-left:20px;">
                 <div class="col-md-6">
-                    <img class="image-thumb-preview" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
+                    <img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
                 </div>
                 <div class="col-md-6" style="margin:auto;">
-                    <ul style="font-size:14px;">
-                        <li><b>Product Name:</b> ${jsonObject.items[0].product.name}</li>
-                        <li><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
-                        <li><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
-                        <li><b>Price:</b> ${jsonObject.total_amount}</li>
-                        <li><b>Status:</b> ${jsonObject.status}</li>
-                        <li><b>Date:</b> ${formattedDate}</li>
+                    <ul>
+                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
+                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
+                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
+                        <li class="fs-6"><b>Status:</b> ${jsonObject.status}</li>
+                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
                     </ul>
                 </div>
             </div>`;
@@ -935,20 +994,23 @@ if ($_SESSION["userId"] <> "") {
 
         if (jsonObject.status === 'TO SHIP') { 
             modal.innerHTML = `
-            <div class="row" style="margin-left:20px;">
+            <div class="modal-header" style="height:5px;">
+                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="row" style="display:flex; justify-content:center; margin-left:20px;">
                 <div class="col-md-6">
-                    <img class="image-thumb-preview" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
+                    <img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
                 </div>
                 <div class="col-md-6" style="margin:auto;">
-                    <ul style="font-size:14px;">
-                        <li><b>Product Name:</b> ${jsonObject.items[0].product.name}</li>
-                        <li><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
-                        <li><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
-                        <li><b>Price:</b> ${jsonObject.total_amount}</li>
-                        <li><b>Status:</b> ${jsonObject.status}</li>
-                        <li><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
-                        <li><b>Courier Name:</b> ${jsonObject.courier_name}</li>
-                        <li><b>Date:</b> ${formattedDate}</li>
+                    <ul>
+                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
+                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
+                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
+                        <li class="fs-6"><b>Status:</b> ${jsonObject.status}</li>
+                        <li class="fs-6"><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
+                        <li class="fs-6"><b>Courier Name:</b> ${jsonObject.courier_name}</li>
+                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
                     </ul>
                 </div>
             </div>`;
@@ -956,20 +1018,23 @@ if ($_SESSION["userId"] <> "") {
 
         if (jsonObject.status === 'TO RECEIVE') { 
             modal.innerHTML = `
-            <div class="row" style="margin-left:20px;">
+            <div class="modal-header" style="height:5px;">
+                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="row" style="display:flex; justify-content:center; margin-left:20px;">
                 <div class="col-md-6">
-                    <img class="image-thumb-preview" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
+                    <img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
                 </div>
                 <div class="col-md-6" style="margin:auto;">
-                    <ul style="font-size:14px;">
-                        <li><b>Product Name:</b> ${jsonObject.items[0].product.name}</li>
-                        <li><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
-                        <li><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
-                        <li><b>Price:</b> ${jsonObject.total_amount}</li>
-                        <li><b>Status:</b> ${jsonObject.status}</li>
-                        <li><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
-                        <li><b>Courier Name:</b> ${jsonObject.courier_name}</li>
-                        <li><b>Date:</b> ${formattedDate}</li>
+                    <ul>
+                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
+                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
+                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
+                        <li class="fs-6"><b>Status:</b> ${jsonObject.status}</li>
+                        <li class="fs-6"><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
+                        <li class="fs-6"><b>Courier Name:</b> ${jsonObject.courier_name}</li>
+                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
                     </ul>
                 </div>
             </div>`;
@@ -977,20 +1042,23 @@ if ($_SESSION["userId"] <> "") {
 
         if (jsonObject.status === 'COMPLETED') { 
             modal.innerHTML = `
-            <div class="row" style="margin-left:20px;">
+            <div class="modal-header" style="height:5px;">
+                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="row" style="display:flex; justify-content:center; margin-left:20px;">
                 <div class="col-md-6">
-                    <img class="image-thumb-preview" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
+                    <img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
                 </div>
                 <div class="col-md-6" style="margin:auto;">
-                    <ul style="font-size:14px;">
-                        <li><b>Product Name:</b> ${jsonObject.items[0].product.name}</li>
-                        <li><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
-                        <li><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
-                        <li><b>Price:</b> ${jsonObject.total_amount}</li>
-                        <li><b>Status:</b> ${jsonObject.status}</li>
-                        <li><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
-                        <li><b>Courier Name:</b> ${jsonObject.courier_name}</li>
-                        <li><b>Date:</b> ${formattedDate}</li>
+                    <ul>
+                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
+                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
+                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
+                        <li class="fs-6"><b>Status:</b> ${jsonObject.status}</li>
+                        <li class="fs-6"><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
+                        <li class="fs-6"><b>Courier Name:</b> ${jsonObject.courier_name}</li>
+                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
                     </ul>
                 </div>
             </div>`;
@@ -998,20 +1066,24 @@ if ($_SESSION["userId"] <> "") {
 
         if (jsonObject.status === 'RETURNED') { 
             modal.innerHTML = `
-            <div class="row" style="margin-left:20px;">
+            <div class="modal-header" style="height:5px;">
+                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="row" style="display:flex; justify-content:center; margin-left:20px;">
                 <div class="col-md-6">
-                    <img class="image-thumb-preview" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
+                    <img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
                 </div>
                 <div class="col-md-6" style="margin:auto;">
-                    <ul style="font-size:14px;">
-                        <li><b>Product Name:</b> ${jsonObject.items[0].product.name}</li>
-                        <li><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
-                        <li><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
-                        <li><b>Price:</b> ${jsonObject.total_amount}</li>
-                        <li><b>Status:</b> ${jsonObject.status}</li>
-                        <li><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
-                        <li><b>Courier Name:</b> ${jsonObject.courier_name}</li>
-                        <li><b>Date:</b> ${formattedDate}</li>
+                    <ul>
+                        <li class="fs-6"><b>Product Name:</b> ${jsonObject.items[0].product.name}</li>
+                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
+                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
+                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
+                        <li class="fs-6"><b>Status:</b> ${jsonObject.status}</li>
+                        <li class="fs-6"><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
+                        <li class="fs-6"><b>Courier Name:</b> ${jsonObject.courier_name}</li>
+                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
                     </ul>
                 </div>
             </div>`;
diff --git a/user-refund-history.php b/user-refund-history.php
index 8bfcbcc..34b6abe 100644
--- a/user-refund-history.php
+++ b/user-refund-history.php
@@ -40,6 +40,9 @@ if ($_SESSION["userId"] <> "") {
     <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">
+
     <!-- Main Style -->
     <link rel="stylesheet" href="assets/css/style.css" />
     <link rel="stylesheet" href="assets/css/style2.css" />
@@ -49,13 +52,92 @@ if ($_SESSION["userId"] <> "") {
     <link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
     <style>
         .tab.active {
-            background-color: #ffaa00;
+            background-color: #ffffff;
             /* Set your desired background color for the active tab */
-            color: #ffffff;
+            color: #ffaa00;
             /* Set your desired text color for the active tab */
+            border: 1px solid #ffaa00
+            /* Set your desired border color for the active tab */
+        }
+        .tab {
+            background-color: #ffaa00;
+            color: #ffffff;
+            font-family: "Poppins, sans-serif";
+            font-weight: 400;
+            /* margin: 2px; */
+            text-align: center;
+            /* margin-right: -25px; */
+        }
+        .tab i {
+            font-size: 15px;
+            /* padding-left: 3px; */
+        }
+        .tableView:hover {
+            /* background-color: #f5f5f5; */
+            background-color: #e5e5e5;
+        }
+        .tab-content {
+            border: none;
+            margin-top: -30px;
+        }
+        /* .theadTitle {
+            background-color: #dddddd;
+            padding-top: -90px;
+        } */
 
+        @media only screen and (max-width: 640px) {
+            #tableTitle {
+                font-size: 14px;
+            }
+            #shopNow {
+                font-size: 12px;
+            }
+        }
+        @media only screen and (max-width: 460px) {
+            #tableTitle {
+                font-size: 12px;
+            }
+            #shopNow {
+                font-size: 10px;
+            }
+        }
+
+        /* for status buttons */
+        @media only screen and (max-width: 10000px) {
+            .tab {
+                font-size: 13px;
+                width: 9rem;
+            }
+        }
+        @media only screen and (max-width: 1200px) {
+            .tab {
+                font-size: 10px;
+                width: 7rem;
+            }
+            .tab i {
+                font-size: 9px;
+            }
+        }
+        @media only screen and (max-width: 700px) {
+            .tab {
+                font-size: 9px;
+                width: 6rem;
+            }
+            .tab i {
+                font-size: 9px;
+            }
+        }
+        @media only screen and (max-width: 620px) {
+            .tab {
+                font-size: 0px;
+                width:5rem;
+            }
+            .tab i {
+                font-size: 13px;
+            }
         }
     </style>
+
     <script>
         function updateCartItemCount() {
             $.get("cartitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data, status) {
@@ -152,28 +234,94 @@ if ($_SESSION["userId"] <> "") {
                     </div>
                 </div>
                 <div class="ec-shop-rightside col-lg-9 col-md-12">
-                    <div class="ec-vendor-dashboard-card">
-                        <div class="ec-vendor-card-header">
-                            <h5>Refund History</h5>
-                            <div class="ec-header-btn">
-                                <a class="btn btn-lg btn-primary" href="#">Shop Now</a>
+
+                    <!-- 03-14-2024 Stacy added cards -->
+                    <!-- <div class="row" id="rowTabs" style="justify-content:center; padding-bottom:20px; padding-right:20px; display:flex; align-items:center; text-align:center;">
+                        <div id="tableTabs" class="col-lg-3 col-md-6" style="width:8rem;">
+                            <div class="tab h-40"  data-tab-name="allRefunds" onclick="showTab('allRefunds'), document.getElementById('tableTitle').innerHTML = 'All Refund History'">All Refunds
+                                <i class="fa-solid fa-money-bills"></i>
                             </div>
                         </div>
+                        <div id="tableTabs" class="col-lg-3 col-md-6" style="width:8rem;">
+                            <div class="tab h-40"  data-tab-name="toApprove" onclick="showTab('toApprove'), document.getElementById('tableTitle').innerHTML = 'All To Approve Refunds'">To Approve
+                                <i class="fa-solid fa-rectangle-list"></i>
+                            </div>
+                        </div>
+                        <div id="tableTabs" class="col-lg-3 col-md-6" style="width:8rem;">
+                            <div class="tab h-40" data-tab-name="toShip" onclick="showTab('toShip'), document.getElementById('tableTitle').innerHTML = 'All To Ship Refunds'">To Ship
+                                <i class="fa-solid fa-truck"></i>
+                            </div>
+                        </div>
+                        <div id="tableTabs" class="col-lg-3 col-md-6" style="width:8rem;">
+                            <div class="tab h-40" data-tab-name="toReceive" onclick="showTab('toReceive'), document.getElementById('tableTitle').innerHTML = 'All To Receive Refunds'">To Receive
+                                <i class="fa-solid fa-box-archive"></i>
+                            </div>
+                        </div>
+                        <div id="tableTabs" class="col-lg-3 col-md-6" style="width:8rem;">
+                            <div class="tab h-40" data-tab-name="completed" onclick="showTab('completed'), document.getElementById('tableTitle').innerHTML = 'All To Refund Products'">To Refund
+                                <i class="fa-solid fa-square-check"></i>
+                            </div>
+                        </div>
+                        <div id="tableTabs" class="col-lg-3 col-md-6" style="width:8rem;">
+                            <div class="tab h-40" data-tab-name="completed" onclick="showTab('completed'), document.getElementById('tableTitle').innerHTML = 'All Completed Refund'">Complete
+                                <i class="fa-solid fa-square-check"></i>
+                            </div>
+                        </div>
+                    </div> -->
+                    
+                    <div class="ec-vendor-dashboard-card">
+                        <div class="ec-vendor-card-header">
+                            <h5 id="tableTitle">All Refund History</h5>
+                            <div class="ec-header-btn">
+                                <!-- <a class="btn btn-lg btn-primary" href="#">Shop Now</a> -->
+                                <a class="btn btn-lg btn-primary" id="shopNow" style="background:none; color:#3474d4;" href="index.php">Shop Now</a>
+                            </div>
+                        </div>
+
+                        <div class="card" style="border: none;">
+                            <div class="card-body" style="margin-bottom:-20px;">
+                                <div class="tab-container d-flex justify-content-around">
+                                    <!-- 03-25-2024 Stacy modified cards -->
+                                    <div class="tab active" data-tab-name="allRefunds" onclick="showTab('allRefunds'), document.getElementById('tableTitle').innerHTML = 'All Refund History'">All Refunds
+                                        <i class="fa-solid fa-money-bills"></i></div>
+                                    <div class="tab" data-tab-name="toApprove" onclick="showTab('toApprove'), document.getElementById('tableTitle').innerHTML = 'All To Approve Refunds'">To Approve
+                                        <i class="fa-solid fa-rectangle-list"></i></div>
+                                    <div class="tab" data-tab-name="toShip" onclick="showTab('toShip'), document.getElementById('tableTitle').innerHTML = 'All To Ship Refunds'">To Ship
+                                        <i class="fa-solid fa-truck"></i></div>
+                                    <div class="tab" data-tab-name="toReceive" onclick="showTab('toReceive'), document.getElementById('tableTitle').innerHTML = 'All To Receive Refunds'">To Receive
+                                        <i class="fa-solid fa-box-archive"></i></div>
+                                    <div class="tab" data-tab-name="toRefund" onclick="showTab('toRefund'), document.getElementById('tableTitle').innerHTML = 'All To Refund Products'">To Refund
+                                        <i class="fa-solid fa-money-bill-1-wave"></i></div>
+                                    <div class="tab" data-tab-name="returnComplete" onclick="showTab('returnComplete'), document.getElementById('tableTitle').innerHTML = 'All Completed Refund'">Complete
+                                        <i class="fa-solid fa-square-check"></i></div>
+                                </div>
+                            </div>
+                        </div>
+
                         <div class="ec-vendor-card-body">
                             <div class="ec-vendor-card-table">
-                                <div class="tab-container">
-                                    <div class="tab" data-tab-name="toApprove" onclick="showTab('toApprove')">To Approve</div>
-                                    <div class="tab" data-tab-name="toShip" onclick="showTab('toShip')">To Ship</div>
-                                    <div class="tab" data-tab-name="toReceive" onclick="showTab('toReceive')">To Receive</div>
-                                    <div class="tab" data-tab-name="toRefund" onclick="showTab('toRefund')">To Refund</div>
-                                    <div class="tab" data-tab-name="returnComplete" onclick="showTab('returnComplete')">Return Complete</div>
 
-                                </div>
-                                <div id="toApprove" class="tab-content active">
+                                <!-- <div class="tab-container">
+                                    <!-- 03-25-2024 Stacy modified cards -->
+                                    <!-- <div class="tab" data-tab-name="allRefunds" onclick="showTab('allRefunds'), document.getElementById('tableTitle').innerHTML = 'All Refund History'">All Refunds
+                                        <i class="fa-solid fa-money-bills"></i></div>
+                                    <div class="tab" data-tab-name="toApprove" onclick="showTab('toApprove'), document.getElementById('tableTitle').innerHTML = 'All To Approve Refunds'">To Approve
+                                        <i class="fa-solid fa-rectangle-list"></i></div>
+                                    <div class="tab" data-tab-name="toShip" onclick="showTab('toShip'), document.getElementById('tableTitle').innerHTML = 'All To Ship Refunds'">To Ship
+                                        <i class="fa-solid fa-truck"></i></div>
+                                    <div class="tab" data-tab-name="toReceive" onclick="showTab('toReceive'), document.getElementById('tableTitle').innerHTML = 'All To Receive Refunds'">To Receive
+                                        <i class="fa-solid fa-box-archive"></i></div>
+                                    <div class="tab" data-tab-name="toRefund" onclick="showTab('toRefund'), document.getElementById('tableTitle').innerHTML = 'All To Refund Products'">To Refund
+                                        <i class="fa-solid fa-square-check"></i></div>
+                                    <div class="tab" data-tab-name="returnComplete" onclick="showTab('returnComplete'), document.getElementById('tableTitle').innerHTML = 'All Completed Refund'">Return Complete
+                                        <i class="fa-solid fa-square-check"></i></div>
+                                </div> -->
 
-                                    <!-- Content for "To Pay" tab -->
+                                <!-- 03-15-2024 Stacy added tab for all orders -->
+                                <div id="allRefunds" class="tab-content active">
+                                    <!-- Content for "all Orders" tab -->
                                     <table class="table ec-table">
-                                        <thead>
+                                        <thead class="theadTitle">
                                             <tr>
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
@@ -181,8 +329,69 @@ if ($_SESSION["userId"] <> "") {
                                                 <th scope="col">Unit Price</th>
                                                 <th scope="col">Price</th>
                                                 <th scope="col">Refund Status</th>
-                                                <th scope="col">Refund Reason</th>
-                                                <th scope="col">Refund Proof</th>
+                                                <!-- <th scope="col">Refund Reason</th>
+                                                <th scope="col">Refund Proof</th> -->
+                                                <th scope="col">Date</th>
+
+                                                <!-- <th scope="col">Actions</th> -->
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                        <?php
+                                            if ($_SESSION["isLoggedIn"] && $customer_data) {
+                                                $customer = $customer_data[0];
+                                                $orders = getOrderbyCustomerId($customer['_id']);
+                                                $totalAmount = 0;
+                                                if ($orders) {
+                                                    $order_data = json_decode($orders, true);
+                                                    $_SESSION['cart_items'] = $order_data;
+                                                    foreach ($order_data as $order) {
+                                                        // Ensure that the required data is available before accessing it
+                                                        if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO APPROVE') || (strtoupper($order['return_order']['status']) === 'TO SHIP') 
+                                                                || (strtoupper($order['return_order']['status']) === 'TO RECEIVE') || (strtoupper($order['return_order']['status']) === 'TO REFUND') 
+                                                                || (strtoupper($order['return_order']['status']) === 'RETURN COMPLETE') && isset($order['items'][0]['product'])) {
+                                                            $totalAmount += $order['total_amount'];
+                                            ?>
+                                                            <?php
+                                                            $jsonorder = json_encode($order);
+                                                            ?>
+                                                            <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                                <td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
+                                                                <td><span><?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><?php echo $order['return_order']['status']; ?></span></td>
+                                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                                                <td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
+                                                                <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
+
+                                                                <!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
+                                                            </tr>
+                                            <?php
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                            ?>
+                                        </tbody>
+                                    </table>
+                                </div>
+
+
+                                <div id="toApprove" class="tab-content">
+                                    <!-- Content for "To Approve" tab -->
+                                    <table class="table ec-table">
+                                        <thead class="theadTitle">
+                                            <tr>
+                                                <th scope="col">Image</th>
+                                                <th scope="col">Name</th>
+                                                <th scope="col">Quantity</th>
+                                                <th scope="col">Unit Price</th>
+                                                <th scope="col">Price</th>
+                                                <th scope="col">Refund Status</th>
+                                                <!-- <th scope="col">Refund Reason</th>
+                                                <th scope="col">Refund Proof</th> -->
                                                 <th scope="col">Date</th>
 
                                                 <!-- <th scope="col">Actions</th> -->
@@ -202,15 +411,18 @@ if ($_SESSION["userId"] <> "") {
                                                         if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO APPROVE') && isset($order['items'][0]['product'])) {
                                                             $totalAmount += $order['total_amount'];
                                             ?>
-                                                            <tr>
+                                                            <?php
+                                                            $jsonorder = json_encode($order);
+                                                            ?>
+                                                            <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                                 <td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
                                                                 <td><span><?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><?php echo $order['return_order']['status']; ?></span></td>
-                                                                <td><span><?php echo $order['return_order']['reason']; ?></span></td>
-                                                                <td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
+                                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                                                <td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
                                                                 <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
 
                                                                 <!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
@@ -224,11 +436,12 @@ if ($_SESSION["userId"] <> "") {
                                         </tbody>
                                     </table>
                                 </div>
-                                <div id="toShip" class="tab-content">
 
+                                
+                                <div id="toShip" class="tab-content">
                                     <!-- Content for "To Ship" tab -->
                                     <table class="table ec-table">
-                                        <thead>
+                                        <thead class="theadTitle">
                                             <tr>
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
@@ -236,8 +449,8 @@ if ($_SESSION["userId"] <> "") {
                                                 <th scope="col">Unit Price</th>
                                                 <th scope="col">Price</th>
                                                 <th scope="col">Refund Status</th>
-                                                <th scope="col">Refund Reason</th>
-                                                <th scope="col">Refund Proof</th>
+                                                <!-- <th scope="col">Refund Reason</th>
+                                                <th scope="col">Refund Proof</th> -->
                                                 <th scope="col">Date</th>
 
                                                 <!-- <th scope="col">Actions</th> -->
@@ -257,15 +470,18 @@ if ($_SESSION["userId"] <> "") {
                                                         if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO SHIP') && isset($order['items'][0]['product'])) {
                                                             $totalAmount += $order['total_amount'];
                                             ?>
-                                                            <tr>
+                                                            <?php
+                                                            $jsonorder = json_encode($order);
+                                                            ?>
+                                                            <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                                 <td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
                                                                 <td><span><?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><?php echo $order['return_order']['status']; ?></span></td>
-                                                                <td><span><?php echo $order['return_order']['reason']; ?></span></td>
-                                                                <td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
+                                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                                                <td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
                                                                 <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
 
                                                                 <!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
@@ -280,9 +496,11 @@ if ($_SESSION["userId"] <> "") {
                                     </table>
                                 </div>
 
+                                
                                 <div id="toReceive" class="tab-content">
+                                    <!-- Content for "To Receive" tab -->
                                     <table class="table ec-table">
-                                        <thead>
+                                        <thead class="theadTitle">
                                             <tr>
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
@@ -290,9 +508,10 @@ if ($_SESSION["userId"] <> "") {
                                                 <th scope="col">Unit Price</th>
                                                 <th scope="col">Price</th>
                                                 <th scope="col">Refund Status</th>
-                                                <th scope="col">Refund Reason</th>
-                                                <th scope="col">Refund Proof</th>
+                                                <!-- <th scope="col">Refund Reason</th>
+                                                <th scope="col">Refund Proof</th> -->
                                                 <th scope="col">Date</th>
+
                                                 <!-- <th scope="col">Actions</th> -->
                                             </tr>
                                         </thead>
@@ -310,15 +529,18 @@ if ($_SESSION["userId"] <> "") {
                                                         if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO RECEIVE') && isset($order['items'][0]['product'])) {
                                                             $totalAmount += $order['total_amount'];
                                             ?>
-                                                            <tr>
+                                                            <?php
+                                                            $jsonorder = json_encode($order);
+                                                            ?>
+                                                            <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                                 <td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
                                                                 <td><span><?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><?php echo $order['return_order']['status']; ?></span></td>
-                                                                <td><span><?php echo $order['return_order']['reason']; ?></span></td>
-                                                                <td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
+                                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                                                <td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
                                                                 <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
                                                                 <!-- <td>
                                                                     <span class="tbl-btn">
@@ -336,9 +558,11 @@ if ($_SESSION["userId"] <> "") {
                                     </table>
                                 </div>
 
+
                                 <div id="toRefund" class="tab-content">
+                                    <!-- Content for "To Refund" tab -->
                                     <table class="table ec-table">
-                                        <thead>
+                                        <thead class="theadTitle">
                                             <tr>
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
@@ -346,9 +570,10 @@ if ($_SESSION["userId"] <> "") {
                                                 <th scope="col">Unit Price</th>
                                                 <th scope="col">Price</th>
                                                 <th scope="col">Refund Status</th>
-                                                <th scope="col">Refund Reason</th>
-                                                <th scope="col">Refund Proof</th>
+                                                <!-- <th scope="col">Refund Reason</th>
+                                                <th scope="col">Refund Proof</th> -->
                                                 <th scope="col">Date</th>
+
                                                 <!-- <th scope="col">Actions</th> -->
                                             </tr>
                                         </thead>
@@ -366,15 +591,18 @@ if ($_SESSION["userId"] <> "") {
                                                         if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO REFUND') && isset($order['items'][0]['product'])) {
                                                             $totalAmount += $order['total_amount'];
                                             ?>
-                                                            <tr>
+                                                            <?php
+                                                            $jsonorder = json_encode($order);
+                                                            ?>
+                                                            <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                                 <td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
                                                                 <td><span><?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><?php echo $order['return_order']['status']; ?></span></td>
-                                                                <td><span><?php echo $order['return_order']['reason']; ?></span></td>
-                                                                <td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
+                                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                                                <td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
                                                                 <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
                                                                 <!-- <td>
                                                                     <span class="tbl-btn">
@@ -392,9 +620,11 @@ if ($_SESSION["userId"] <> "") {
                                     </table>
                                 </div>
 
+
                                 <div id="returnComplete" class="tab-content">
+                                    <!-- Content for "Return Complete" tab -->
                                     <table class="table ec-table">
-                                        <thead>
+                                        <thead class="theadTitle">
                                             <tr>
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
@@ -402,8 +632,8 @@ if ($_SESSION["userId"] <> "") {
                                                 <th scope="col">Unit Price</th>
                                                 <th scope="col">Price</th>
                                                 <th scope="col">Refund Status</th>
-                                                <th scope="col">Refund Reason</th>
-                                                <th scope="col">Refund Proof</th>
+                                                <!-- <th scope="col">Refund Reason</th>
+                                                <th scope="col">Refund Proof</th> -->
                                                 <th scope="col">Date</th>
                                                 <!-- <th scope="col">Actions</th> -->
                                             </tr>
@@ -422,15 +652,18 @@ if ($_SESSION["userId"] <> "") {
                                                         if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'RETURN COMPLETE') && isset($order['items'][0]['product'])) {
                                                             $totalAmount += $order['total_amount'];
                                             ?>
-                                                            <tr>
+                                                            <?php
+                                                            $jsonorder = json_encode($order);
+                                                            ?>
+                                                            <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                                 <td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
                                                                 <td><span><?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><?php echo $order['return_order']['status']; ?></span></td>
-                                                                <td><span><?php echo $order['return_order']['reason']; ?></span></td>
-                                                                <td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
+                                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                                                <td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
                                                                 <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
                                                                 <!-- <td>
                                                                     <span class="tbl-btn">
@@ -667,9 +900,170 @@ if ($_SESSION["userId"] <> "") {
 
     <!-- Footer Start -->
     <?php include "footer.php" ?>
-
     <!-- Footer Area End -->
 
+    
+    <!-- Modal Start -->
+    <!-- 03-15-2024 Stacy added modal -->
+    <div class="modal fade" id="productDetails" tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-body">
+                        <!-- modal header placed under script -->
+                    <div class="row" id="modalContent" style="display:flex; justify-content:center;">
+                        <!-- modal body placed under script -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Modal End -->
+
+    <script>
+        // 03-21-2024 Stacy added script for showing productDetails modal
+        document.getElementById('productDetails').addEventListener('shown.bs.modal', function (event) {
+
+        var jsonString = $(event.relatedTarget).data('value');
+
+        var jsonObject = JSON.parse(jsonString);
+        const modal = document.getElementById('modalContent');
+
+        const date = new Date(jsonObject.updatedAt); const formatter = new Intl. DateTimeFormat('en-US', { day: '2-digit', month: 'long', year: 'numeric' }); const formattedDate = formatter. format(date);
+
+        if (jsonObject.return_order.status === 'To Approve') {
+            modal.innerHTML = `
+            <div class="modal-header" style="height:5px;">
+                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="row pt-3" style="display:flex; justify-content:center; margin-left:20px;">
+                <div class="col-md-6">
+                    <img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
+                </div>
+                <div class="col-md-6" style="margin:auto;">
+                    <ul>
+                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
+                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
+                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
+                        <li class="fs-6"><b>Refund Status:</b> ${jsonObject.return_order.status}</li>
+                        <li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
+                        <li class="fs-6"><b>Refund Proof:</b></li>
+                        <li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
+                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                    </ul>
+                </div>
+            </div>`;
+        }
+
+        if (jsonObject.return_order.status === 'To Ship') {
+            modal.innerHTML = `
+            <div class="modal-header" style="height:5px;">
+                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="row pt-3" style="display:flex; justify-content:center; margin-left:20px;">
+                <div class="col-md-6">
+                    <img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
+                </div>
+                <div class="col-md-6" style="margin:auto;">
+                    <ul>
+                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
+                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
+                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
+                        <li class="fs-6"><b>Refund Status:</b> ${jsonObject.return_order.status}</li>
+                        <li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
+                        <li class="fs-6"><b>Refund Proof:</b></li>
+                        <li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
+                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                    </ul>
+                </div>
+            </div>`;
+        }
+
+        if (jsonObject.return_order.status === 'To Receive') {
+            modal.innerHTML = `
+            <div class="modal-header" style="height:5px;">
+                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="row pt-3" style="display:flex; justify-content:center; margin-left:20px;">
+                <div class="col-md-6">
+                    <img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
+                </div>
+                <div class="col-md-6" style="margin:auto;">
+                    <ul>
+                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
+                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
+                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
+                        <li class="fs-6"><b>Refund Status:</b> ${jsonObject.return_order.status}</li>
+                        <li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
+                        <li class="fs-6"><b>Refund Proof:</b></li>
+                        <li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
+                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                    </ul>
+                </div>
+            </div>`;
+        }
+
+        if (jsonObject.return_order.status === 'To Refund') {
+            modal.innerHTML = `
+            <div class="modal-header" style="height:5px;">
+                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="row pt-3" style="display:flex; justify-content:center; margin-left:20px;">
+                <div class="col-md-6">
+                    <img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
+                </div>
+                <div class="col-md-6" style="margin:auto;">
+                    <ul>
+                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
+                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
+                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
+                        <li class="fs-6"><b>Refund Status:</b> ${jsonObject.return_order.status}</li>
+                        <li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
+                        <li class="fs-6"><b>Refund Proof:</b></li>
+                        <li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
+                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                    </ul>
+                </div>
+            </div>`;
+        }
+
+        if (jsonObject.return_order.status === 'Return Complete') {
+            modal.innerHTML = `
+            <div class="modal-header" style="height:5px;">
+                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="row pt-3" style="display:flex; justify-content:center; margin-left:20px;">
+                <div class="col-md-6">
+                    <img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
+                </div>
+                <div class="col-md-6" style="margin:auto;">
+                    <ul>
+                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
+                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
+                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
+                        <li class="fs-6"><b>Refund Status:</b> ${jsonObject.return_order.status}</li>
+                        <li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
+                        <li class="fs-6"><b>Refund Proof:</b></li>
+                        <li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
+                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                    </ul>
+                </div>
+            </div>`;
+        }
+
+
+        console.log(jsonObject);
+        });
+
+        const modal = document.getElementById('productDetails');
+        console.log(modal);
+    </script>
+
+
     <!-- Footer navigation panel for responsive display -->
     <div class="ec-nav-toolbar">
         <div class="container">
diff --git a/vendor-refund-history.php b/vendor-refund-history.php
index ac67554..a8fd9bb 100644
--- a/vendor-refund-history.php
+++ b/vendor-refund-history.php
@@ -57,6 +57,9 @@ if (is_array($vendorOrderss)) {
     <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">
+
     <!-- Main Style -->
     <link rel="stylesheet" href="assets/css/style.css" />
     <link rel="stylesheet" href="assets/css/style2.css" />
@@ -66,13 +69,92 @@ if (is_array($vendorOrderss)) {
     <link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
     <style>
         .tab.active {
-            background-color: #ffaa00;
+            background-color: #ffffff;
             /* Set your desired background color for the active tab */
-            color: #ffffff;
+            color: #ffaa00;
             /* Set your desired text color for the active tab */
+            border: 1px solid #ffaa00
+            /* Set your desired border color for the active tab */
+        }
+        .tab {
+            background-color: #ffaa00;
+            color: #ffffff;
+            font-family: "Poppins, sans-serif";
+            font-weight: 400;
+            /* margin: 2px; */
+            text-align: center;
+            /* margin-right: -25px; */
+        }
+        .tab i {
+            font-size: 15px;
+            /* padding-left: 3px; */
+        }
+        .tableView:hover {
+            /* background-color: #f5f5f5; */
+            background-color: #e5e5e5;
+        }
+        .tab-content {
+            border: none;
+            margin-top: -30px;
+        }
+        /* .theadTitle {
+            background-color: #dddddd;
+            padding-top: -90px;
+        } */
 
+        @media only screen and (max-width: 640px) {
+            #tableTitle {
+                font-size: 14px;
+            }
+            #shopNow {
+                font-size: 12px;
+            }
+        }
+        @media only screen and (max-width: 460px) {
+            #tableTitle {
+                font-size: 12px;
+            }
+            #shopNow {
+                font-size: 10px;
+            }
+        }
+
+        /* for status buttons */
+        @media only screen and (max-width: 10000px) {
+            .tab {
+                font-size: 13px;
+                width: 9rem;
+            }
+        }
+        @media only screen and (max-width: 1200px) {
+            .tab {
+                font-size: 10px;
+                width: 7rem;
+            }
+            .tab i {
+                font-size: 9px;
+            }
+        }
+        @media only screen and (max-width: 700px) {
+            .tab {
+                font-size: 9px;
+                width: 6rem;
+            }
+            .tab i {
+                font-size: 9px;
+            }
+        }
+        @media only screen and (max-width: 620px) {
+            .tab {
+                font-size: 0px;
+                width:5rem;
+            }
+            .tab i {
+                font-size: 13px;
+            }
         }
     </style>
+
     <script>
         function updateCartItemCount() {
             $.get("cartitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data, status) {
@@ -175,24 +257,46 @@ if (is_array($vendorOrderss)) {
                 <div class="ec-shop-rightside col-lg-9 col-md-12">
                     <div class="ec-vendor-dashboard-card">
                         <div class="ec-vendor-card-header">
-                            <h5>Refund History</h5>
+                            <h5 id="tableTitle">All Refund History</h5>
                             <div class="ec-header-btn">
-                                <a class="btn btn-lg btn-primary" href="shop-list-left-sidebar2.php">Shop Now</a>
+                                <a class="btn btn-lg btn-primary" id="shopNow" style="background:none; color:#3474d4;" href="index.php">Shop Now</a>
                             </div>
                         </div>
+
+                        <div class="card" style="border: none;">
+                            <div class="card-body" style="margin-bottom:-20px;">
+                                <div class="tab-container d-flex justify-content-around">
+                                    <!-- 03-25-2024 Stacy modified cards -->
+                                    <div class="tab" data-tab-name="allRefunds" onclick="showTab('allRefunds'), document.getElementById('tableTitle').innerHTML = 'All Refund History'">All Refunds
+                                        <i class="fa-solid fa-money-bills"></i></div>
+                                    <div class="tab" data-tab-name="toApprove" onclick="showTab('toApprove'), document.getElementById('tableTitle').innerHTML = 'All To Approve Refunds'">To Approve
+                                        <i class="fa-solid fa-rectangle-list"></i></div>
+                                    <div class="tab" data-tab-name="toShip" onclick="showTab('toShip'), document.getElementById('tableTitle').innerHTML = 'All To Ship Refunds'">To Ship
+                                        <i class="fa-solid fa-truck"></i></div>
+                                    <div class="tab" data-tab-name="toReceive" onclick="showTab('toReceive'), document.getElementById('tableTitle').innerHTML = 'All To Receive Refunds'">To Receive
+                                        <i class="fa-solid fa-box-archive"></i></div>
+                                    <div class="tab" data-tab-name="toRefund" onclick="showTab('toRefund'), document.getElementById('tableTitle').innerHTML = 'All To Refund Products'">To Refund
+                                        <i class="fa-solid fa-money-bill-1-wave"></i></div>
+                                    <div class="tab" data-tab-name="returnComplete" onclick="showTab('returnComplete'), document.getElementById('tableTitle').innerHTML = 'All Completed Refund'">Complete
+                                        <i class="fa-solid fa-square-check"></i></div>
+                                </div>
+                            </div>
+                        </div>
+
                         <div class="ec-vendor-card-body">
                             <div class="ec-vendor-card-table">
-                                <div class="tab-container">
+
+                                <!-- <div class="tab-container">
                                     <div class="tab" data-tab-name="toApprove" onclick="showTab('toApprove')">To Approve</div>
                                     <div class="tab" data-tab-name="toShip" onclick="showTab('toShip')">To Ship</div>
                                     <div class="tab" data-tab-name="toReceive" onclick="showTab('toReceive')">To Receive</div>
                                     <div class="tab" data-tab-name="toRefund" onclick="showTab('toRefund')">To Refund</div>
                                     <div class="tab" data-tab-name="returnComplete" onclick="showTab('returnComplete')">Return Complete</div>
+                                </div> -->
 
-                                </div>
-                                <div id="toApprove" class="tab-content active">
-
-                                    <!-- Content for "To Pay" tab -->
+                                <!-- 03-26-2024 Stacy added tab for all orders -->
+                                <div id="allRefunds" class="tab-content">
+                                    <!-- Content for "All Refunds" tab -->
                                     <table class="table ec-table">
                                         <thead>
                                             <tr>
@@ -202,8 +306,63 @@ if (is_array($vendorOrderss)) {
                                                 <th scope="col">Unit Price</th>
                                                 <th scope="col">Price</th>
                                                 <th scope="col">Refund Status</th>
-                                                <th scope="col">Refund Reason</th>
-                                                <th scope="col">Refund Proof</th>
+                                                <!-- <th scope="col">Refund Reason</th>
+                                                <th scope="col">Refund Proof</th> -->
+                                                <th scope="col">Date</th>
+
+                                                <!-- <th scope="col">Actions</th> -->
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <?php
+                                            $order = $vendorOrders;
+                                            $orderArray = json_encode($order, true);
+                                            $orderItems = json_decode($orderArray, true);
+                                            foreach ($orderItems as $order) {
+                                                // Ensure that the required data is available before accessing it
+                                                if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO APPROVE') || (strtoupper($order['return_order']['status']) === 'TO SHIP') 
+                                                        || (strtoupper($order['return_order']['status']) === 'TO RECEIVE') || (strtoupper($order['return_order']['status']) === 'TO REFUND') 
+                                                        || (strtoupper($order['return_order']['status']) === 'RETURN COMPLETE') && isset($order['items'][0]['product'])) {
+                                                    $totalAmount += $order['total_amount'];
+                                            ?>
+                                                    <?php
+                                                    $jsonorder = json_encode($order);
+                                                    ?>
+                                                    <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                        <td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
+                                                        <td><span><?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><?php echo $order['return_order']['status']; ?></span></td>
+                                                        <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                                        <td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
+                                                        <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
+
+                                                        <!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
+                                                    </tr>
+                                            <?php
+                                                }
+                                            }
+
+                                            ?>
+                                        </tbody>
+                                    </table>
+                                </div>
+
+                                <div id="toApprove" class="tab-content active">
+                                    <!-- Content for "To Approve" tab -->
+                                    <table class="table ec-table">
+                                        <thead>
+                                            <tr>
+                                                <th scope="col">Image</th>
+                                                <th scope="col">Name</th>
+                                                <th scope="col">Quantity</th>
+                                                <th scope="col">Unit Price</th>
+                                                <th scope="col">Price</th>
+                                                <th scope="col">Refund Status</th>
+                                                <!-- <th scope="col">Refund Reason</th>
+                                                <th scope="col">Refund Proof</th> -->
                                                 <th scope="col">Date</th>
                                                 <th scope="col">Action</th>
                                                 <!-- <th scope="col">Actions</th> -->
@@ -219,15 +378,18 @@ if (is_array($vendorOrderss)) {
                                                 if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO APPROVE') && isset($order['items'][0]['product'])) {
                                                     $totalAmount += $order['total_amount'];
                                             ?>
-                                                    <tr>
+                                                    <?php
+                                                    $jsonorder = json_encode($order);
+                                                    ?>
+                                                    <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                         <td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
                                                         <td><span><?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><?php echo $order['return_order']['status']; ?></span></td>
-                                                        <td><span><?php echo $order['return_order']['reason']; ?></span></td>
-                                                        <td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
+                                                        <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                                        <td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
                                                         <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
                                                         <td>
                                                             <span class="tbl-btn">
@@ -244,8 +406,8 @@ if (is_array($vendorOrderss)) {
                                         </tbody>
                                     </table>
                                 </div>
-                                <div id="toShip" class="tab-content">
 
+                                <div id="toShip" class="tab-content">
                                     <!-- Content for "To Ship" tab -->
                                     <table class="table ec-table">
                                         <thead>
@@ -256,8 +418,8 @@ if (is_array($vendorOrderss)) {
                                                 <th scope="col">Unit Price</th>
                                                 <th scope="col">Price</th>
                                                 <th scope="col">Refund Status</th>
-                                                <th scope="col">Refund Reason</th>
-                                                <th scope="col">Refund Proof</th>
+                                                <!-- <th scope="col">Refund Reason</th>
+                                                <th scope="col">Refund Proof</th> -->
                                                 <th scope="col">Date</th>
 
                                                 <!-- <th scope="col">Actions</th> -->
@@ -273,15 +435,18 @@ if (is_array($vendorOrderss)) {
                                                 if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO SHIP') && isset($order['items'][0]['product'])) {
                                                     $totalAmount += $order['total_amount'];
                                             ?>
-                                                    <tr>
+                                                    <?php
+                                                    $jsonorder = json_encode($order);
+                                                    ?>
+                                                    <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                         <td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
                                                         <td><span><?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><?php echo $order['return_order']['status']; ?></span></td>
-                                                        <td><span><?php echo $order['return_order']['reason']; ?></span></td>
-                                                        <td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
+                                                        <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                                        <td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
                                                         <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
 
                                                         <!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
@@ -296,6 +461,7 @@ if (is_array($vendorOrderss)) {
                                 </div>
 
                                 <div id="toReceive" class="tab-content">
+                                    <!-- Content for "To Receive" tab -->
                                     <table class="table ec-table">
                                         <thead>
                                             <tr>
@@ -305,8 +471,8 @@ if (is_array($vendorOrderss)) {
                                                 <th scope="col">Unit Price</th>
                                                 <th scope="col">Price</th>
                                                 <th scope="col">Refund Status</th>
-                                                <th scope="col">Refund Reason</th>
-                                                <th scope="col">Refund Proof</th>
+                                                <!-- <th scope="col">Refund Reason</th>
+                                                <th scope="col">Refund Proof</th> -->
                                                 <th scope="col">Date</th>
                                                 <th scope="col">Actions</th>
                                             </tr>
@@ -321,15 +487,18 @@ if (is_array($vendorOrderss)) {
                                                 if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO RECEIVE') && isset($order['items'][0]['product'])) {
                                                     $totalAmount += $order['total_amount'];
                                             ?>
-                                                    <tr>
+                                                    <?php
+                                                    $jsonorder = json_encode($order);
+                                                    ?>
+                                                    <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                         <td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
                                                         <td><span><?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><?php echo $order['return_order']['status']; ?></span></td>
-                                                        <td><span><?php echo $order['return_order']['reason']; ?></span></td>
-                                                        <td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
+                                                        <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                                        <td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
                                                         <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
                                                         <td>
                                                             <span class="tbl-btn">
@@ -346,6 +515,7 @@ if (is_array($vendorOrderss)) {
                                 </div>
 
                                 <div id="toRefund" class="tab-content">
+                                    <!-- Content for "To Refund" tab -->
                                     <table class="table ec-table">
                                         <thead>
                                             <tr>
@@ -355,8 +525,8 @@ if (is_array($vendorOrderss)) {
                                                 <th scope="col">Unit Price</th>
                                                 <th scope="col">Price</th>
                                                 <th scope="col">Refund Status</th>
-                                                <th scope="col">Refund Reason</th>
-                                                <th scope="col">Refund Proof</th>
+                                                <!-- <th scope="col">Refund Reason</th>
+                                                <th scope="col">Refund Proof</th> -->
                                                 <th scope="col">Date</th>
                                                 <!-- <th scope="col">Actions</th> -->
                                             </tr>
@@ -371,19 +541,22 @@ if (is_array($vendorOrderss)) {
                                                 if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO REFUND') && isset($order['items'][0]['product'])) {
                                                     $totalAmount += $order['total_amount'];
                                             ?>
-                                                    <tr>
+                                                    <?php
+                                                    $jsonorder = json_encode($order);
+                                                    ?>
+                                                    <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                         <td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
                                                         <td><span><?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><?php echo $order['return_order']['status']; ?></span></td>
-                                                        <td><span><?php echo $order['return_order']['reason']; ?></span></td>
-                                                        <td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
+                                                        <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                                        <td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
                                                         <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
                                                         <!-- <td>
                                                                     <span class="tbl-btn">
-                                                                        <a class="btn btn-lg btn-primary" onclick="updateCompletedStatus('<?php echo $order['_id']; ?>')">Received</a>
+                                                                        <a class="btn btn-lg btn-primary" onclick="updateCompletedStatus('<?php # echo $order['_id']; ?>')">Received</a>
                                                                     </span>
                                                                 </td> -->
                                                     </tr>
@@ -397,6 +570,7 @@ if (is_array($vendorOrderss)) {
                                 </div>
 
                                 <div id="returnComplete" class="tab-content">
+                                    <!-- Content for "Return Complete" tab -->
                                     <table class="table ec-table">
                                         <thead>
                                             <tr>
@@ -406,8 +580,8 @@ if (is_array($vendorOrderss)) {
                                                 <th scope="col">Unit Price</th>
                                                 <th scope="col">Price</th>
                                                 <th scope="col">Refund Status</th>
-                                                <th scope="col">Refund Reason</th>
-                                                <th scope="col">Refund Proof</th>
+                                                <!-- <th scope="col">Refund Reason</th>
+                                                <th scope="col">Refund Proof</th> -->
                                                 <th scope="col">Date</th>
                                                 <!-- <th scope="col">Actions</th> -->
                                             </tr>
@@ -422,15 +596,18 @@ if (is_array($vendorOrderss)) {
                                                 if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'RETURN COMPLETE') && isset($order['items'][0]['product'])) {
                                                     $totalAmount += $order['total_amount'];
                                             ?>
-                                                    <tr>
+                                                    <?php
+                                                    $jsonorder = json_encode($order);
+                                                    ?>
+                                                    <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
                                                         <td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
                                                         <td><span><?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><?php echo $order['return_order']['status']; ?></span></td>
-                                                        <td><span><?php echo $order['return_order']['reason']; ?></span></td>
-                                                        <td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
+                                                        <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                                        <td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
                                                         <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
                                                         <!-- <td>
                                                                     <span class="tbl-btn">
@@ -760,9 +937,172 @@ if (is_array($vendorOrderss)) {
 
     <!-- Footer Start -->
     <?php include "footer.php" ?>
-
     <!-- Footer Area End -->
 
+
+    <!-- Modal Start -->
+    <!-- 03-26-2024 Stacy added modal -->
+    <div class="modal fade" id="productDetails" tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-body">
+                        <!-- modal header placed under script -->
+                    <div class="row" id="modalContent" style="display:flex; justify-content:center;">
+                        <!-- modal body placed under script -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Modal End -->
+
+    <script>
+        // 03-26-2024 Stacy added script for showing productDetails modal
+        document.getElementById('productDetails').addEventListener('shown.bs.modal', function (event) {
+
+        var jsonString = $(event.relatedTarget).data('value');
+
+        var jsonObject = JSON.parse(jsonString);
+        const modal = document.getElementById('modalContent');
+
+        const date = new Date(jsonObject.updatedAt); const formatter = new Intl. DateTimeFormat('en-US', { day: '2-digit', month: 'long', year: 'numeric' }); const formattedDate = formatter. format(date);
+
+        if (jsonObject.return_order.status === 'To Approve') {
+            modal.innerHTML = `
+            <div class="modal-header" style="height:5px;">
+                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="row pt-3" style="display:flex; justify-content:center; margin-left:20px;">
+                <div class="col-md-6">
+                    <img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
+                </div>
+                <div class="col-md-6" style="margin:auto;">
+                    <ul>
+                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
+                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
+                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
+                        <li class="fs-6"><b>Refund Status:</b> ${jsonObject.return_order.status}</li>
+                        <li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
+                        <li class="fs-6"><b>Refund Proof:</b></li>
+                        <li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
+                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                    </ul>
+                </div>
+            </div>`;
+        }
+
+        if (jsonObject.return_order.status === 'To Ship') {
+            modal.innerHTML = `
+            <div class="modal-header" style="height:5px;">
+                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="row pt-3" style="display:flex; justify-content:center; margin-left:20px;">
+                <div class="col-md-6">
+                    <img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
+                </div>
+                <div class="col-md-6" style="margin:auto;">
+                    <ul>
+                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
+                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
+                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
+                        <li class="fs-6"><b>Refund Status:</b> ${jsonObject.return_order.status}</li>
+                        <li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
+                        <li class="fs-6"><b>Refund Proof:</b></li>
+                        <li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
+                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                    </ul>
+                </div>
+            </div>`;
+        }
+
+        if (jsonObject.return_order.status === 'To Receive') {
+            modal.innerHTML = `
+            <div class="modal-header" style="height:5px;">
+                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="row pt-3" style="display:flex; justify-content:center; margin-left:20px;">
+                <div class="col-md-6">
+                    <img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
+                </div>
+                <div class="col-md-6" style="margin:auto;">
+                    <ul>
+                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
+                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
+                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
+                        <li class="fs-6"><b>Refund Status:</b> ${jsonObject.return_order.status}</li>
+                        <li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
+                        <li class="fs-6"><b>Refund Proof:</b></li>
+                        <li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
+                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                    </ul>
+                </div>
+            </div>`;
+        }
+
+        if (jsonObject.return_order.status === 'To Refund') {
+            modal.innerHTML = `
+            <div class="modal-header" style="height:5px;">
+                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="row pt-3" style="display:flex; justify-content:center; margin-left:20px;">
+                <div class="col-md-6">
+                    <img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
+                </div>
+                <div class="col-md-6" style="margin:auto;">
+                    <ul>
+                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
+                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
+                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
+                        <li class="fs-6"><b>Refund Status:</b> ${jsonObject.return_order.status}</li>
+                        <li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
+                        <li class="fs-6"><b>Refund Proof:</b></li>
+                        <li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
+                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                    </ul>
+                </div>
+            </div>`;
+        }
+
+        if (jsonObject.return_order.status === 'Return Complete') {
+            modal.innerHTML = `
+            <div class="modal-header" style="height:5px;">
+                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="row pt-3" style="display:flex; justify-content:center; margin-left:20px;">
+                <div class="col-md-6">
+                    <img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
+                </div>
+                <div class="col-md-6" style="margin:auto;">
+                    <ul>
+                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
+                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
+                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
+                        <li class="fs-6"><b>Refund Status:</b> ${jsonObject.return_order.status}</li>
+                        <li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
+                        <li class="fs-6"><b>Refund Proof:</b></li>
+                        <li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
+                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                    </ul>
+                </div>
+            </div>`;
+        }
+
+        
+        
+
+        console.log(jsonObject);
+        });
+
+        const modal = document.getElementById('productDetails');
+        console.log(modal);
+    </script>
+
+
     <!-- Footer navigation panel for responsive display -->
     <div class="ec-nav-toolbar">
         <div class="container">