diff --git a/assets/js/user-history.js b/assets/js/user-history.js
new file mode 100644
index 0000000..26985f7
--- /dev/null
+++ b/assets/js/user-history.js
@@ -0,0 +1,177 @@
+async function postProductRating(product_id, formData,endpointData,sessionToken) {
+    const endpoint = `https://${endpointData}/api/v1/products/${product_id}/ratings`;
+    // const sessionToken = 'your-session-token-here'; // Replace with your actual session token logic
+
+    try {
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers: {
+                'Authorization': 'Bearer ' + sessionToken,
+            },
+            body: formData
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        return await response.json();
+    } catch (error) {
+        console.error('Error:', error);
+        throw error;
+    }
+}
+async function updateOrderRating(product_id,endpointData,sessionToken) {
+    const endpoint = `https://${endpointData}/api/v1/orders/${product_id}`;
+    // const sessionToken = 'your-session-token-here'; // Replace with your actual session token logic
+
+    try {
+        const response = await fetch(endpoint, {
+            method: 'PATCH',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': 'Bearer ' + sessionToken,
+            },
+            body: JSON.stringify({
+                                "isRate": true
+                            })
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        return await response.json();
+    } catch (error) {
+        console.error('Error:', error);
+        throw error;
+    }
+}
+async function uploadImageRating(formData,endpointData,sessionToken) {
+    const endpoint = `https://${endpointData}/api/v1/upload_image`;
+    // const sessionToken = 'your-session-token-here'; // Replace with your actual session token logic
+
+    try {
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers: {
+                'Authorization': 'Bearer ' + sessionToken,
+            },
+            body: formData
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        return await response.json();
+    } catch (error) {
+        console.error('Error:', error);
+        throw error;
+    }
+}  
+async function sendFeedback(variation, rating,
+    comments, images, videos, customer_id,
+    order_id,
+    vendor_id, files, productId,
+    endpoint, sessionToken
+) {
+
+    const formData = new FormData();
+    const currentDate = new Date();
+    const formattedDate = currentDate
+        .toISOString().replace(/[-T:]/g, "")
+        .slice(0, -5);
+
+
+    formData.append('variation', variation);
+    formData.append('rating', rating);
+    formData.append('comments', comments);
+
+    formData.append('customer_id',
+        customer_id);
+    formData.append('order_id', order_id);
+    formData.append('vendor_id', vendor_id);
+    images?.forEach((image, index) => {
+        formData.append(
+            `images`,
+            image);
+    });
+
+    // Append videos to FormData
+    videos?.forEach((video, index) => {
+        formData.append(
+            `videos`,
+            video);
+    });
+
+
+    postProductRating(
+            productId,
+            formData,
+            endpoint, sessionToken
+        )
+        .then(response => {
+            console.log('Success:',
+                response);
+            if (!response) {
+                throw new Error(
+                    'Failed to send text message'
+                );
+            } else {
+
+
+                updateOrderRating(
+                        order_id,
+                        endpoint,
+                        sessionToken
+                    )
+                    .then(
+                        response1 => {
+                            console.log(
+                                'Success:',
+                                response1
+                            );
+                            if (
+                                !
+                                response1
+                            ) {
+
+                                throw new Error(
+                                    `
+                update order failed `
+                                );
+                            } else {
+                                sendButton1
+                                    [
+                                        order_id
+                                    ]
+                                    .textContent =
+                                    "Submitted";
+                                sendButton1
+                                    [
+                                        order_id
+                                    ]
+                                    .disabled =
+                                    true
+                            }
+                        })
+                    .catch(error => {
+                        console
+                            .error(
+                                'Error:',
+                                error
+                            );
+                    });
+
+
+
+
+            }
+        })
+        .catch(error => {
+            console.error('Error:',
+                error);
+        });
+
+}
\ No newline at end of file
diff --git a/product-left-sidebar.php b/product-left-sidebar.php
index ebb40a8..24400ff 100644
--- a/product-left-sidebar.php
+++ b/product-left-sidebar.php
@@ -92,24 +92,34 @@ if (isset($_GET['id'])) {
     <link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
     <script>
     function updateCartItemCount() {
-        $.get("cartitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data, status) {
-            if (data != "") {
-                console.log("Data: " + data + "\nStatus: " + status);
-                document.getElementById("cartItemCount").innerHTML = data;
-                document.getElementById("cartNewItemCount").innerHTML = data;
-
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", "cartitems.php?id=<?php echo $_SESSION['customerId']; ?>", true);
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4 && xhr.status == 200) {
+                var data = xhr.responseText;
+                if (data !== "") {
+                    console.log("Data: " + data);
+                    document.getElementById("cartItemCount").innerHTML = data;
+                    document.getElementById("cartNewItemCount").innerHTML = data;
+                }
             }
-        });
+        };
+        xhr.send();
     }
 
     function updateWishItemCount() {
-        $.get("wishlistitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data) {
-            if (data != "") {
-                document.getElementById("wishItemCount").innerHTML = data;
-                document.getElementById("wishNewItemCount").innerHTML = data;
-
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", "wishlistitems.php?id=<?php echo $_SESSION['customerId']; ?>", true);
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4 && xhr.status == 200) {
+                var data = xhr.responseText;
+                if (data !== "") {
+                    document.getElementById("wishItemCount").innerHTML = data;
+                    document.getElementById("wishNewItemCount").innerHTML = data;
+                }
             }
-        });
+        };
+        xhr.send();
     }
     </script>
 
@@ -1628,7 +1638,7 @@ if (isset($_GET['id'])) {
                                 alt="" /> -->
                             <div id="ec-spt-nav-review" class="tab-pane fade">
 
-                             </div>
+                            </div>
 
                             <style>
                             .rating_con {
diff --git a/shop-list-left-sidebar.php b/shop-list-left-sidebar.php
index 8b83edb..85f2134 100644
--- a/shop-list-left-sidebar.php
+++ b/shop-list-left-sidebar.php
@@ -483,9 +483,9 @@ $filteredProducts = [];
                                             });
                                         } else {
                                             document.querySelector(".vendor-list").innerHTML = `
-                <h6>No vendors available</h6>
-                
-                `;
+                                            <h6>No vendors available</h6>
+                                            
+                                            `;
 
                                         }
                                     }
diff --git a/user-history.php b/user-history.php
index d204e41..a8131da 100644
--- a/user-history.php
+++ b/user-history.php
@@ -1030,7 +1030,7 @@ if ($_SESSION["isVendor"] == true) {
                                                                     if ($order['return_order']['status'] === 'To Approve') {
                                                                         echo '<a class="btn btn-lg btn-primary" style="margin:10px; white-space:nowrap" disabled>Refund Requested</a>';
                                                                     } elseif ($order['return_order']['status'] === 'To Ship') {
-                                                                        echo '<a class="btn btn-lg btn-primary" style="margin:10px;" disabled>For Refund</a>';
+                                                                        echo '<a class="btn btn-lg btn-primary" style="margin:10px; white-space:nowrap" disabled>For Refund</a>';
                                                                     } else {
                                                                         $orderDate = strtotime($order['updatedAt']);
                                                                         $sevenDaysAfterOrder = strtotime('+7 days', $orderDate); // Seven days after the order date
@@ -1038,7 +1038,7 @@ if ($_SESSION["isVendor"] == true) {
                                                                         if ($currentDate >= $sevenDaysAfterOrder ||  $order['isRate']=== true ) {
                                                                             echo '<span class="tbl-btn" disabled></span>';
                                                     } else {
-                                                    echo '<a class="btn btn-lg btn-primary" style="margin:10px;"
+                                                    echo '<a class="btn btn-lg btn-primary" style="margin:10px; white-space:nowrap"
                                                         data-bs-toggle="modal"
                                                         data-bs-target="#modal-refund-' . $order['_id'] . '">Return/Refund</a>';
                                                     }
@@ -1206,192 +1206,70 @@ if ($_SESSION["isVendor"] == true) {
                                                                     .addEventListener('click', () => {
                                                                         sendReview();
                                                                     });
-                                                                async function sendFeedback(variation, rating,
-                                                                    comments, images, videos, customer_id,
-                                                                    order_id,
-                                                                    vendor_id, files
-                                                                ) {
-                                                                    var sessionToken =
-                                                                        `<?php echo isset($_SESSION["token"]) ? $_SESSION["token"] : ""; ?>`;
-                                                                    const formData = new FormData();
-                                                                    const currentDate = new Date();
-                                                                    const formattedDate = currentDate
-                                                                        .toISOString().replace(/[-T:]/g, "")
-                                                                        .slice(0, -5);
+
+                                                             
+                                                                // async function uploadMediaFeed(file,
+                                                                //     mediaType) {
+                                                                //     const formData = new FormData();
+                                                                //     console.log(file)
+                                                                //     const currentDate = new Date();
+                                                                //     const formattedDate =
+                                                                //         currentDate
+                                                                //         .toISOString().replace(
+                                                                //             /[-T:]/g, "")
+                                                                //         .slice(0, -5);
+                                                                //     const fileName =
+                                                                //         `
+                                                                //                 $ {
+                                                                //                     formattedDate
+                                                                //                 } - $ {
+                                                                //                     file.name
+                                                                //                 }
+                                                                //                 `;
+                                                                //     formData.append('image_id',
+                                                                //         '<?php echo $order['items'][0]['product']['product_id'] ?>'
+                                                                //     );
+                                                                //     formData.append('category',
+                                                                //         'product');
+                                                                //     formData.append('image', file);
+                                                                //     uploadImageRating(formData,
+                                                                //             '<?php echo $_SESSION["data_endpoint"]; ?>',
+                                                                //             sessionToken)
+                                                                //         .then(response => {
+                                                                //             console.log('Success:',
+                                                                //                 response);
+                                                                //             if (!response.ok) {
+                                                                //                 throw new Error(
+                                                                //                     `
+                                                                //                 Failed to upload $ {
+                                                                //                     mediaType
+                                                                //                 }
+                                                                //                 `
+                                                                //                 );
+                                                                //             } else {
+                                                                //                 const responseData =
+                                                                //                     await response
+                                                                //                     .json();
 
 
-                                                                    formData.append('variation', variation);
-                                                                    formData.append('rating', rating);
-                                                                    formData.append('comments', comments);
-
-                                                                    formData.append('customer_id',
-                                                                        customer_id);
-                                                                    formData.append('order_id', order_id);
-                                                                    formData.append('vendor_id', vendor_id);
-                                                                    images?.forEach((image, index) => {
-                                                                        formData.append(
-                                                                            `images`,
-                                                                            image);
-                                                                    });
-
-                                                                    // Append videos to FormData
-                                                                    videos?.forEach((video, index) => {
-                                                                        formData.append(
-                                                                            `videos`,
-                                                                            video);
-                                                                    });
-                                                                    // console.log("file")
-                                                                    // const formData = new FormData();
-                                                                    // formData.append('data', JSON.stringify({
-                                                                    //     variation: variation,
-                                                                    //     rating: String(rating),
-                                                                    //     comments: comments,
-                                                                    //     customer_id: customer_id,
-                                                                    //     order_id: order_id,
-                                                                    //     vendor_id: vendor_id,
-                                                                    // }));
-
-                                                                    // // Assuming images and videos are arrays of File objects
-                                                                    // images?.forEach((image, index) => {
-                                                                    //     formData.append(
-                                                                    //         `images[${index}]`,
-                                                                    //         image);
-                                                                    // });
-                                                                    // videos?.forEach((video, index) => {
-                                                                    //     formData.append(
-                                                                    //         `videos[${index}]`,
-                                                                    //         video);
-                                                                    // });
-                                                                    console.log(files)
-                                                                    const response = await fetch(
-                                                                        `https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/products/<?php echo $order['items'][0]['product']['product_id'];?>/ratings`, {
-                                                                            method: 'POST',
-                                                                            headers: {
-                                                                                'Authorization': 'Bearer ' +
-                                                                                    sessionToken,
-                                                                            },
-                                                                            body: formData
-
-                                                                        });
-                                                                    // JSON.stringify({
-
-                                                                    //     variation: variation,
-                                                                    //     rating: String(
-                                                                    //         rating
-                                                                    //     ),
-                                                                    //     comments: comments,
-                                                                    //     images: images,
-                                                                    //     videos: videos,
-                                                                    //     customer_id: customer_id,
-                                                                    //     order_id: order_id,
-                                                                    //     vendor_id: vendor_id,
-
-                                                                    // })
-                                                                    if (!response.ok) {
-                                                                        throw new Error(
-                                                                            'Failed to send text message'
-                                                                        );
-                                                                    } else {
-                                                                        // fileInput.value = '';
-                                                                        // messageInput.value = '';
-                                                                        // send_btn.textContent = "Send";
-                                                                        // send_btn.disabled = false
-                                                                        // JSON.stringify({
-                                                                        //     ratings: [{
-                                                                        //         variation: variation,
-                                                                        //         rating: String(
-                                                                        //             rating
-                                                                        //         ),
-                                                                        //         comments: comments,
-                                                                        //         images: images,
-                                                                        //         videos: videos,
-                                                                        //         customer_id: customer_id,
-                                                                        //         order_id: order_id,
-                                                                        //         vendor_id: vendor_id,
-
-                                                                        //     }]
-                                                                        // })
-                                                                        const response1 = await fetch(
-                                                                            `https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/<?php echo $order['_id'];?>`, {
-                                                                                method: 'PATCH',
-                                                                                headers: {
-                                                                                    'Content-Type': 'application/json',
-                                                                                    'Authorization': 'Bearer ' +
-                                                                                        sessionToken,
-                                                                                },
-                                                                                body: JSON.stringify({
-                                                                                    "isRate": true
-                                                                                })
-                                                                            });
-                                                                        if (!response1.ok) {
-                                                                            throw new Error(
-                                                                                `
-                                                                                update order failed `
-                                                                            );
-                                                                        } else {
-                                                                            sendButton1[
-                                                                                    '<?php echo $order['_id']; ?>'
-                                                                                ].textContent =
-                                                                                "Submitted";
-                                                                            sendButton1[
-                                                                                '<?php echo $order['_id']; ?>'
-                                                                            ].disabled = true
-                                                                        }
-
-                                                                    }
-                                                                    const messageData = await response
-                                                                        .json();
-                                                                }
-                                                                async function uploadMediaFeed(file,
-                                                                    mediaType, ) {
-                                                                    const formData = new FormData();
-                                                                    console.log(file)
-                                                                    const currentDate = new Date();
-                                                                    const formattedDate =
-                                                                        currentDate
-                                                                        .toISOString().replace(
-                                                                            /[-T:]/g, "")
-                                                                        .slice(0, -5);
-                                                                    const fileName =
-                                                                        `
-                                                                                $ {
-                                                                                    formattedDate
-                                                                                } - $ {
-                                                                                    file.name
-                                                                                }
-                                                                                `;
-                                                                    formData.append('image_id',
-                                                                        '<?php echo $order['items'][0]['product']['product_id'] ?>'
-                                                                    );
-                                                                    formData.append('category',
-                                                                        'product');
-                                                                    formData.append('image', file);
+                                                                //                 return responseData
+                                                                //                     .filename;
+                                                                //             }
+                                                                //         })
+                                                                //         .catch(error => {
+                                                                //             console.error('Error:',
+                                                                //                 error);
+                                                                //         });
 
 
-                                                                    const response = await fetch(
-                                                                        '<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/upload_image', {
-                                                                            method: 'POST',
-                                                                            body: formData
-                                                                        });
-                                                                    if (!response.ok) {
-                                                                        throw new Error(
-                                                                            `
-                                                                                Failed to upload $ {
-                                                                                    mediaType
-                                                                                }
-                                                                                `
-                                                                        );
-                                                                    } else {
-                                                                        const responseData =
-                                                                            await response
-                                                                            .json();
+                                                                //     // const response = await fetch(
+                                                                //     //     '<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/upload_image', {
+                                                                //     //         method: 'POST',
+                                                                //     //         body: formData
+                                                                //     //     });
 
-
-                                                                        return responseData
-                                                                            .filename;
-                                                                    }
-                                                                    // const responseData = await response.json();
-                                                                }
+                                                                //     // const responseData = await response.json();
+                                                                // }
                                                                 async function sendReview() {
 
 
@@ -1427,6 +1305,7 @@ if ($_SESSION["isVendor"] == true) {
                                                                         sendButton1[
                                                                             '<?php echo $order['_id']; ?>'
                                                                         ].disabled = true
+                                                                        let files = []
                                                                         try {
                                                                             // Send text message
                                                                             await sendFeedback(
@@ -1437,7 +1316,11 @@ if ($_SESSION["isVendor"] == true) {
                                                                                 videos,
                                                                                 customer_id,
                                                                                 order_id,
-                                                                                vendor_id
+                                                                                vendor_id,
+                                                                                files,
+                                                                                '<?php echo $order['items'][0]['product']['product_id'];?>',
+                                                                                '<?php echo $_SESSION["data_endpoint"]; ?>',
+                                                                                '<?php echo $_SESSION["token"]; ?>'
                                                                             );
                                                                         } catch (error) {
                                                                             console.error(
@@ -1541,7 +1424,10 @@ if ($_SESSION["isVendor"] == true) {
                                                                                     videos,
                                                                                     customer_id,
                                                                                     order_id,
-                                                                                    vendor_id, files
+                                                                                    vendor_id, files,
+                                                                                    '<?php echo $order['items'][0]['product']['product_id'];?>',
+                                                                                    '<?php echo $_SESSION["data_endpoint"]; ?>',
+                                                                                    '<?php echo $_SESSION["token"]; ?>'
                                                                                 )
 
                                                                         } catch (error) {
@@ -2675,6 +2561,8 @@ if ($_SESSION["isVendor"] == true) {
     <!-- Main Js -->
     <script src="assets/js/vendor/index.js"></script>
     <script src="assets/js/main.js"></script>
+    <script src="assets/js/user-history.js"></script>
+
 
 </body>
 
diff --git a/user-profile.php b/user-profile.php
index 5cc5880..102a161 100644
--- a/user-profile.php
+++ b/user-profile.php
@@ -219,7 +219,7 @@ if ($_SESSION["isVendor"] == true) {
                                                     class="ec-vendor-detail-block ec-vendor-block-contact space-bottom-30">
                                                     <h6>Contact number</h6>
                                                     <ul>
-                                                        <li><strong><?php echo $customer_data['phone_number'] ?></li>
+                                                        <li><strong><?php echo $customer_data[0]['phone_number'] ?></li>
                                                     </ul>
                                                 </div>
                                             </div>
@@ -544,8 +544,11 @@ if ($_SESSION["isVendor"] == true) {
                             </div>
                             <div class="form-group">
 
-                                <label for="addressBuilding" class="text-dark font-weight-medium pt-3 mb-2">House/Unit/Flr #, Bldg Name, Blk or Lot #</label>
-                                <input type="text" class="form-control" id="addressBuilding2" value="<?php echo $address['address_1']; ?>">
+                                <label for="addressBuilding"
+                                    class="text-dark font-weight-medium pt-3 mb-2">House/Unit/Flr #, Bldg Name, Blk or
+                                    Lot #</label>
+                                <input type="text" class="form-control" id="addressBuilding2"
+                                    value="<?php echo $address['address_1']; ?>">
 
                                 <!-- <label for="addressBuilding" class="text-dark font-weight-medium pt-3 mb-2"> Building,Number </label>
                                 <input type="text" class="form-control" id="addressBuilding"> -->
@@ -875,7 +878,7 @@ if ($_SESSION["isVendor"] == true) {
                 if (selectedCityCode) {
                     fetch(
                             `https://psgc.gitlab.io/api/cities-municipalities/${selectedCityCode}/barangays/`
-                            )
+                        )
                         .then(response => {
                             if (response.ok) {
                                 return response.json();
@@ -1009,7 +1012,7 @@ if ($_SESSION["isVendor"] == true) {
                 if (selectedCityCode) {
                     fetch(
                             `https://psgc.gitlab.io/api/cities-municipalities/${selectedCityCode}/barangays/`
-                            )
+                        )
                         .then(response => {
                             if (response.ok) {
                                 return response.json();
diff --git a/user-refund-history.php b/user-refund-history.php
index aed8a92..0bc4b82 100644
--- a/user-refund-history.php
+++ b/user-refund-history.php
@@ -27,7 +27,8 @@ if ($_SESSION["isVendor"] == true) {
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
 
     <title>oBanana B2B - Elevate Your Business</title>
-    <meta name="keywords" content="apparel, catalog, clean, ecommerce, ecommerce HTML, electronics, fashion, html eCommerce, html store, minimal, multipurpose, multipurpose ecommerce, online store, responsive ecommerce template, shops" />
+    <meta name="keywords"
+        content="apparel, catalog, clean, ecommerce, ecommerce HTML, electronics, fashion, html eCommerce, html store, minimal, multipurpose, multipurpose ecommerce, online store, responsive ecommerce template, shops" />
     <meta name="description" content="Best ecommerce html template for single and multi vendor store.">
     <meta name="author" content="ashishmaraviya">
 
@@ -37,7 +38,7 @@ if ($_SESSION["isVendor"] == true) {
     <meta name="msapplication-TileImage" content="assets/images/favicon/favicon.png" />
 
     <!-- css Icon Font -->
-     <link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
+    <link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
         integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -61,132 +62,150 @@ if ($_SESSION["isVendor"] == true) {
 
     <!-- Background css -->
     <link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@latest/dist/css/select2.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@latest/dist/css/select2.min.css"
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/select2@latest/dist/js/select2.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdn.jsdelivr.net/npm/select2@latest/dist/js/select2.min.js" crossorigin="anonymous"
+        referrerpolicy="no-referrer"></script>
 
     <style>
-        .tab.active {
-            background-color: #ffffff;
-            /* Set your desired background color for the active tab */
-            color: #3474d4;
-            /* Set your desired text color for the active tab */
-            border: 1px solid #3474d4
+    .tab.active {
+        background-color: #ffffff;
+        /* Set your desired background color for the active tab */
+        color: #3474d4;
+        /* Set your desired text color for the active tab */
+        border: 1px solid #3474d4
             /* Set your desired border color for the active tab */
-        }
-        .tab {
-            background-color: #3474d4;
-            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;
-        }
+    }
 
-        .tableView {
-            td:nth-child(2) {
+    .tab {
+        background-color: #3474d4;
+        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;
+    }
+
+    .tableView {
+        td:nth-child(2) {
             max-width: 250px;
-            }
-            td:nth-child(6) {
-                white-space: nowrap;
-            }
-            td:nth-child(7) {
-                white-space: nowrap;
-            }
-        } 
-
-        .Title {
-            th:nth-child(4) {
-                white-space: nowrap;
-            }
-            th:nth-child(6) {
-                white-space: nowrap;
-            }
         }
 
-        @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;
-            }
+        td:nth-child(6) {
+            white-space: nowrap;
         }
 
-        /* for status buttons */
-        @media only screen and (max-width: 10000px) {
-            .tab {
-                font-size: 13px;
-                width: 9rem;
-            }
+        td:nth-child(7) {
+            white-space: nowrap;
         }
-        @media only screen and (max-width: 1200px) {
-            .tab {
-                font-size: 10px;
-                width: 7rem;
-            }
-            .tab i {
-                font-size: 9px;
-            }
+    }
+
+    .Title {
+        th:nth-child(4) {
+            white-space: nowrap;
         }
-        @media only screen and (max-width: 700px) {
-            .tab {
-                font-size: 9px;
-                width: 6rem;
-            }
-            .tab i {
-                font-size: 9px;
-            }
+
+        th:nth-child(6) {
+            white-space: nowrap;
         }
-        @media only screen and (max-width: 620px) {
-            .tab {
-                font-size: 0px;
-                width:5rem;
-            }
-            .tab i {
-                font-size: 13px;
-            }
+    }
+
+    @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) {
-                if (data != "") {
-                    console.log("Data: " + data + "\nStatus: " + status);
-                    document.getElementById("cartItemCount").innerHTML = data;
-                }
-            });
-        }
+    function updateCartItemCount() {
+        $.get("cartitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data, status) {
+            if (data != "") {
+                console.log("Data: " + data + "\nStatus: " + status);
+                document.getElementById("cartItemCount").innerHTML = data;
+            }
+        });
+    }
 
-        function updateWishItemCount() {
-            $.get("wishlistitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data) {
-                if (data != "") {
-                    document.getElementById("wishItemCount").innerHTML = data;
-                }
-            });
-        }
+    function updateWishItemCount() {
+        $.get("wishlistitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data) {
+            if (data != "") {
+                document.getElementById("wishItemCount").innerHTML = data;
+            }
+        });
+    }
     </script>
 </head>
 
@@ -252,13 +271,15 @@ if ($_SESSION["isVendor"] == true) {
                                 </div> -->
 
                                 <!-- 03-142024 Stacy added customer image -->
-                                <div class="ec-vendor-block-bg" style="background-color: orange; background-image: url(<?php echo $customer_data['customer_banner'] ?>) !important;">
+                                <div class="ec-vendor-block-bg"
+                                    style="background-color: orange; background-image: url(<?php echo $customer_data['customer_banner'] ?>) !important;">
                                 </div>
                                 <div class="ec-vendor-block-detail">
                                     <?php
                                     $customer_image = isset($customer_data[0]['customer_image']) ? $customer_data[0]['customer_image'] : 'https://yourteachingmentor.com/wp-content/uploads/2020/12/istockphoto-1223671392-612x612-1.jpg';
                                     ?>
-                                    <img loading="lazy" class="v-img" src=<?php echo $customer_image ?> alt="vendor image">
+                                    <img loading="lazy" class="v-img" src=<?php echo $customer_image ?>
+                                        alt="vendor image">
                                 </div>
                                 <?php include 'user-profile-tabs.php' ?>
                             </div>
@@ -300,13 +321,14 @@ if ($_SESSION["isVendor"] == true) {
                             </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>
+                                <a class="btn btn-lg btn-primary" id="shopNow" style="background:none; color:#3474d4;"
+                                    href="index.php">Shop Now</a>
                             </div>
                         </div>
 
@@ -314,18 +336,36 @@ if ($_SESSION["isVendor"] == true) {
                             <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 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>
@@ -335,7 +375,7 @@ if ($_SESSION["isVendor"] == true) {
 
                                 <!-- <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
+                                <!-- <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>
@@ -369,7 +409,7 @@ if ($_SESSION["isVendor"] == true) {
                                             </tr>
                                         </thead>
                                         <tbody>
-                                        <?php
+                                            <?php
                                             if ($_SESSION["isLoggedIn"] && $customer_data) {
                                                 $customer = $customer_data[0];
                                                 $orders = getOrderbyCustomerId($customer['_id']);
@@ -386,23 +426,36 @@ if ($_SESSION["isVendor"] == true) {
                                                             $orderExist = true;
                                                             $totalAmount += $order['total_amount'];
                                             ?>
-                                                            <?php
+                                            <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
-                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
-                                                                <td><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
-                                                                <td><span><?php echo $order['return_order']['status']; ?></span></td>
-                                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                            <tr class="tableView" style="cursor:pointer;"
+                                                onmouseover="this.style.backgroundColor='#e5e5e5'"
+                                                onmouseout="this.style.backgroundColor='#ffffff'"
+                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
+                                                data-bs-target="#productDetails">
+                                                <td><img loading="lazy" class="prod-img"
+                                                        src="<?php echo $order['items'][0]['product']['product_image']; ?>"
+                                                        alt="product"></td>
+                                                <td><span class="text-truncate"
+                                                        style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:4em;"><?php echo $order['items'][0]['price']; ?></span>
+                                                </td>
+                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span>
+                                                </td>
+                                                <td><span><?php echo $order['return_order']['status']; ?></span></td>
+                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                                 <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
-                                                                <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></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>
+                                                <!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
+                                            </tr>
                                             <?php
                                                         }
                                                     }
@@ -414,10 +467,10 @@ if ($_SESSION["isVendor"] == true) {
                                         <?php
                                             if (!$orderExist) {
                                                 echo '<p style="padding-top:30px; padding-left:20px;">No Refund/s Yet.</p>';
-                                        ?>    
-                                            <script>
-                                                allRefundsTHead.style.display = 'none';
-                                            </script>  
+                                        ?>
+                                        <script>
+                                        allRefundsTHead.style.display = 'none';
+                                        </script>
                                         <?php
                                             }
                                         ?>
@@ -460,23 +513,36 @@ if ($_SESSION["isVendor"] == true) {
                                                             $orderExist = true;
                                                             $totalAmount += $order['total_amount'];
                                             ?>
-                                                            <?php
+                                            <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
-                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
-                                                                <td><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
-                                                                <td><span><?php echo $order['return_order']['status']; ?></span></td>
-                                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                            <tr class="tableView" style="cursor:pointer;"
+                                                onmouseover="this.style.backgroundColor='#e5e5e5'"
+                                                onmouseout="this.style.backgroundColor='#ffffff'"
+                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
+                                                data-bs-target="#productDetails">
+                                                <td><img loading="lazy" class="prod-img"
+                                                        src="<?php echo $order['items'][0]['product']['product_image']; ?>"
+                                                        alt="product"></td>
+                                                <td><span class="text-truncate"
+                                                        style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:4em;"><?php echo $order['items'][0]['price']; ?></span>
+                                                </td>
+                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span>
+                                                </td>
+                                                <td><span><?php echo $order['return_order']['status']; ?></span></td>
+                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                                 <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
-                                                                <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></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>
+                                                <!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
+                                            </tr>
                                             <?php
                                                         }
                                                     }
@@ -488,10 +554,10 @@ if ($_SESSION["isVendor"] == true) {
                                         <?php
                                             if (!$orderExist) {
                                                 echo '<p style="padding-top:30px; padding-left:20px;">No To Approve Refund/s Yet.</p>';
-                                        ?>    
-                                            <script>
-                                                toApproveTHead.style.display = 'none';
-                                            </script>  
+                                        ?>
+                                        <script>
+                                        toApproveTHead.style.display = 'none';
+                                        </script>
                                         <?php
                                             }
                                         ?>
@@ -499,7 +565,7 @@ if ($_SESSION["isVendor"] == true) {
                                     </table>
                                 </div>
 
-                                
+
                                 <div id="toShip" class="tab-content mt-1">
                                     <!-- Content for "To Ship" tab -->
                                     <table id="toShipTbl" class="table ec-table">
@@ -534,23 +600,36 @@ if ($_SESSION["isVendor"] == true) {
                                                             $orderExist = true;
                                                             $totalAmount += $order['total_amount'];
                                             ?>
-                                                            <?php
+                                            <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
-                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
-                                                                <td><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
-                                                                <td><span><?php echo $order['return_order']['status']; ?></span></td>
-                                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                            <tr class="tableView" style="cursor:pointer;"
+                                                onmouseover="this.style.backgroundColor='#e5e5e5'"
+                                                onmouseout="this.style.backgroundColor='#ffffff'"
+                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
+                                                data-bs-target="#productDetails">
+                                                <td><img loading="lazy" class="prod-img"
+                                                        src="<?php echo $order['items'][0]['product']['product_image']; ?>"
+                                                        alt="product"></td>
+                                                <td><span class="text-truncate"
+                                                        style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:4em;"><?php echo $order['items'][0]['price']; ?></span>
+                                                </td>
+                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span>
+                                                </td>
+                                                <td><span><?php echo $order['return_order']['status']; ?></span></td>
+                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                                 <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
-                                                                <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></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>
+                                                <!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
+                                            </tr>
                                             <?php
                                                         }
                                                     }
@@ -562,10 +641,10 @@ if ($_SESSION["isVendor"] == true) {
                                         <?php
                                             if (!$orderExist) {
                                                 echo '<p style="padding-top:30px; padding-left:20px;">No To Ship Refund/s Yet.</p>';
-                                        ?>    
-                                            <script>
-                                                toShipTHead.style.display = 'none';
-                                            </script>  
+                                        ?>
+                                        <script>
+                                        toShipTHead.style.display = 'none';
+                                        </script>
                                         <?php
                                             }
                                         ?>
@@ -573,7 +652,7 @@ if ($_SESSION["isVendor"] == true) {
                                     </table>
                                 </div>
 
-                                
+
                                 <div id="toReceive" class="tab-content mt-1">
                                     <!-- Content for "To Receive" tab -->
                                     <table id="toReceiveTbl" class="table ec-table">
@@ -608,26 +687,39 @@ if ($_SESSION["isVendor"] == true) {
                                                             $orderExist = true;
                                                             $totalAmount += $order['total_amount'];
                                             ?>
-                                                            <?php
+                                            <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
-                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
-                                                                <td><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
-                                                                <td><span><?php echo $order['return_order']['status']; ?></span></td>
-                                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                            <tr class="tableView" style="cursor:pointer;"
+                                                onmouseover="this.style.backgroundColor='#e5e5e5'"
+                                                onmouseout="this.style.backgroundColor='#ffffff'"
+                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
+                                                data-bs-target="#productDetails">
+                                                <td><img loading="lazy" class="prod-img"
+                                                        src="<?php echo $order['items'][0]['product']['product_image']; ?>"
+                                                        alt="product"></td>
+                                                <td><span class="text-truncate"
+                                                        style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:4em;"><?php echo $order['items'][0]['price']; ?></span>
+                                                </td>
+                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span>
+                                                </td>
+                                                <td><span><?php echo $order['return_order']['status']; ?></span></td>
+                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                                 <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
-                                                                <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
-                                                                <!-- <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>
                                                                     </span>
                                                                 </td> -->
-                                                            </tr>
+                                            </tr>
                                             <?php
                                                         }
                                                     }
@@ -639,10 +731,10 @@ if ($_SESSION["isVendor"] == true) {
                                         <?php
                                             if (!$orderExist) {
                                                 echo '<p style="padding-top:30px; padding-left:20px;">No To Receive Refund/s Yet.</p>';
-                                        ?>    
-                                            <script>
-                                                toReceiveTHead.style.display = 'none';
-                                            </script>  
+                                        ?>
+                                        <script>
+                                        toReceiveTHead.style.display = 'none';
+                                        </script>
                                         <?php
                                             }
                                         ?>
@@ -685,26 +777,39 @@ if ($_SESSION["isVendor"] == true) {
                                                             $orderExist = true;
                                                             $totalAmount += $order['total_amount'];
                                             ?>
-                                                            <?php
+                                            <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
-                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
-                                                                <td><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
-                                                                <td><span><?php echo $order['return_order']['status']; ?></span></td>
-                                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                            <tr class="tableView" style="cursor:pointer;"
+                                                onmouseover="this.style.backgroundColor='#e5e5e5'"
+                                                onmouseout="this.style.backgroundColor='#ffffff'"
+                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
+                                                data-bs-target="#productDetails">
+                                                <td><img loading="lazy" class="prod-img"
+                                                        src="<?php echo $order['items'][0]['product']['product_image']; ?>"
+                                                        alt="product"></td>
+                                                <td><span class="text-truncate"
+                                                        style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:4em;"><?php echo $order['items'][0]['price']; ?></span>
+                                                </td>
+                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span>
+                                                </td>
+                                                <td><span><?php echo $order['return_order']['status']; ?></span></td>
+                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                                 <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
-                                                                <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
-                                                                <!-- <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>
                                                                     </span>
                                                                 </td> -->
-                                                            </tr>
+                                            </tr>
                                             <?php
                                                         }
                                                     }
@@ -716,10 +821,10 @@ if ($_SESSION["isVendor"] == true) {
                                         <?php
                                             if (!$orderExist) {
                                                 echo '<p style="padding-top:30px; padding-left:20px;">No To Refund/s Yet.</p>';
-                                        ?>    
-                                            <script>
-                                                toRefundTHead.style.display = 'none';
-                                            </script>  
+                                        ?>
+                                        <script>
+                                        toRefundTHead.style.display = 'none';
+                                        </script>
                                         <?php
                                             }
                                         ?>
@@ -761,28 +866,41 @@ if ($_SESSION["isVendor"] == true) {
                                                             $orderExist = true;
                                                             $totalAmount += $order['total_amount'];
                                             ?>
-                                                            <?php
+                                            <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
-                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
-                                                                <td><img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
-                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
-                                                                <td><span><?php echo $order['return_order']['status']; ?></span></td>
-                                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
+                                            <tr class="tableView" style="cursor:pointer;"
+                                                onmouseover="this.style.backgroundColor='#e5e5e5'"
+                                                onmouseout="this.style.backgroundColor='#ffffff'"
+                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
+                                                data-bs-target="#productDetails">
+                                                <td><img loading="lazy" class="prod-img"
+                                                        src="<?php echo $order['items'][0]['product']['product_image']; ?>"
+                                                        alt="product"></td>
+                                                <td><span class="text-truncate"
+                                                        style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:4em;"><?php echo $order['items'][0]['price']; ?></span>
+                                                </td>
+                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span>
+                                                </td>
+                                                <td><span><?php echo $order['return_order']['status']; ?></span></td>
+                                                <!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
                                                                 <td><img loading="lazy" class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
-                                                                <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
-                                                                <!-- <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" data-bs-toggle="modal" data-bs-target="#modal-refund-<?php echo $order['_id']; ?>">Return/Refund</a>
                                                                     </span>
                                                                 </td> -->
-                                                                <!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
-                                                            </tr>
-                                                            <!-- <div class="modal fade" id="modal-refund-<?php echo $order['_id']; ?>" tabindex="-1" role="dialog" aria-hidden="true">
+                                                <!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
+                                            </tr>
+                                            <!-- <div class="modal fade" id="modal-refund-<?php echo $order['_id']; ?>" tabindex="-1" role="dialog" aria-hidden="true">
                                                                 <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                                                     <div class="modal-content">
                                                                         <div class="modal-header justify-content-end border-bottom-0">
@@ -928,10 +1046,10 @@ if ($_SESSION["isVendor"] == true) {
                                         <?php
                                             if (!$orderExist) {
                                                 echo '<p style="padding-top:30px; padding-left:20px;">No Completed Refund/s Yet.</p>';
-                                        ?>    
-                                            <script>
-                                                returnCompleteTHead.style.display = 'none';
-                                            </script>  
+                                        ?>
+                                        <script>
+                                        returnCompleteTHead.style.display = 'none';
+                                        </script>
                                         <?php
                                             }
                                         ?>
@@ -941,75 +1059,75 @@ if ($_SESSION["isVendor"] == true) {
 
 
                                 <script>
-                                    // function showTab(tabName) {
-                                    //     // Hide all tab contents
-                                    //     var tabContents = document.getElementsByClassName('tab-content');
-                                    //     for (var i = 0; i < tabContents.length; i++) {
-                                    //         tabContents[i].classList.remove('active');
-                                    //     }
+                                // function showTab(tabName) {
+                                //     // Hide all tab contents
+                                //     var tabContents = document.getElementsByClassName('tab-content');
+                                //     for (var i = 0; i < tabContents.length; i++) {
+                                //         tabContents[i].classList.remove('active');
+                                //     }
 
-                                    //     // Show the selected tab content
-                                    //     document.getElementById(tabName).classList.add('active');
-                                    // }
-                                    document.addEventListener("DOMContentLoaded", function() {
-                                        // Check if there's an activeTab in local storage
-                                        var activeTab = localStorage.getItem('activeTab');
-                                        if (activeTab) {
-                                            showTab(activeTab);
-                                        }
-                                    });
+                                //     // Show the selected tab content
+                                //     document.getElementById(tabName).classList.add('active');
+                                // }
+                                document.addEventListener("DOMContentLoaded", function() {
+                                    // Check if there's an activeTab in local storage
+                                    var activeTab = localStorage.getItem('activeTab');
+                                    if (activeTab) {
+                                        showTab(activeTab);
+                                    }
+                                });
 
-                                    function showTab(tabName) {
-                                        // Hide all tab contents
-                                        var tabContents = document.getElementsByClassName('tab-content');
-                                        for (var i = 0; i < tabContents.length; i++) {
-                                            tabContents[i].classList.remove('active');
-                                        }
-
-                                        // Remove the 'active' class from all tabs
-                                        var tabs = document.getElementsByClassName('tab');
-                                        for (var i = 0; i < tabs.length; i++) {
-                                            tabs[i].classList.remove('active');
-                                        }
-
-                                        // Show the selected tab content
-                                        document.getElementById(tabName).classList.add('active');
-
-                                        // Add the 'active' class to the clicked tab
-                                        document.querySelector(`.tab[data-tab-name="${tabName}"]`).classList.add('active');
-
-                                        // Save the active tab to local storage
-                                        localStorage.setItem('activeTab', tabName);
+                                function showTab(tabName) {
+                                    // Hide all tab contents
+                                    var tabContents = document.getElementsByClassName('tab-content');
+                                    for (var i = 0; i < tabContents.length; i++) {
+                                        tabContents[i].classList.remove('active');
                                     }
 
-                                    // function updateCompletedStatus(orderId) {
+                                    // Remove the 'active' class from all tabs
+                                    var tabs = document.getElementsByClassName('tab');
+                                    for (var i = 0; i < tabs.length; i++) {
+                                        tabs[i].classList.remove('active');
+                                    }
 
-                                    //     fetch(`https://api.obanana.shop/api/v1/orders/${orderId}`, {
-                                    //             method: 'PATCH',
-                                    //             headers: {
-                                    //                 'Content-Type': 'application/json',
-                                    //             },
-                                    //             body: JSON.stringify({
-                                    //                 status: 'COMPLETED',
-                                    //             }),
-                                    //         })
-                                    //         .then(response => response.json())
-                                    //         .then(data => {
-                                    //             // Assuming the server responds with a JSON object indicating success or failure
-                                    //             if (data && data !== "") {
-                                    //                 // Update the status in the table without reloading the page
-                                    //                 // document.querySelector(`[data-order-id="${orderId}"] .order-status`).innerText = 'COMPLETED';
-                                    //                 location.reload();
+                                    // Show the selected tab content
+                                    document.getElementById(tabName).classList.add('active');
 
-                                    //             } else {
-                                    //                 alert('Failed to update order status');
-                                    //             }
-                                    //         })
-                                    //         .catch(error => {
-                                    //             console.error('Error:', error);
-                                    //             alert('An error occurred while updating order status');
-                                    //         });
-                                    // }
+                                    // Add the 'active' class to the clicked tab
+                                    document.querySelector(`.tab[data-tab-name="${tabName}"]`).classList.add('active');
+
+                                    // Save the active tab to local storage
+                                    localStorage.setItem('activeTab', tabName);
+                                }
+
+                                // function updateCompletedStatus(orderId) {
+
+                                //     fetch(`https://api.obanana.shop/api/v1/orders/${orderId}`, {
+                                //             method: 'PATCH',
+                                //             headers: {
+                                //                 'Content-Type': 'application/json',
+                                //             },
+                                //             body: JSON.stringify({
+                                //                 status: 'COMPLETED',
+                                //             }),
+                                //         })
+                                //         .then(response => response.json())
+                                //         .then(data => {
+                                //             // Assuming the server responds with a JSON object indicating success or failure
+                                //             if (data && data !== "") {
+                                //                 // Update the status in the table without reloading the page
+                                //                 // document.querySelector(`[data-order-id="${orderId}"] .order-status`).innerText = 'COMPLETED';
+                                //                 location.reload();
+
+                                //             } else {
+                                //                 alert('Failed to update order status');
+                                //             }
+                                //         })
+                                //         .catch(error => {
+                                //             console.error('Error:', error);
+                                //             alert('An error occurred while updating order status');
+                                //         });
+                                // }
                                 </script>
                             </div>
                         </div>
@@ -1024,14 +1142,14 @@ if ($_SESSION["isVendor"] == true) {
     <?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 -->
+                    <!-- modal header placed under script -->
                     <div class="row" id="modalContent" style="display:flex; justify-content:center;">
                         <!-- modal body placed under script -->
                     </div>
@@ -1042,20 +1160,25 @@ if ($_SESSION["isVendor"] == true) {
     <!-- Modal End -->
 
     <script>
-        // 03-21-2024 Stacy added script for showing productDetails modal
-        document.getElementById('productDetails').addEventListener('shown.bs.modal', function (event) {
+    // 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);
+        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">
@@ -1066,18 +1189,22 @@ if ($_SESSION["isVendor"] == true) {
                     </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" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Name:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.items[0].product.name}</p></li>
+
+                            <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Quantity:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.items[0].quantity}</p></li>
+                            <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Unit Price:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.items[0].price}</p></li>
+                            <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Price:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.total_amount}</p></li>
+                            <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap; margin-right:10px;">Refund Status: </p></b><p style="width:70%; text-align:left;"> ${jsonObject.return_order.status}</p></li>
+                            <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;margin-right:10px;">Refund Reason: </p></b><p style="width:70%; text-align:left;"> ${jsonObject.return_order.reason}</p></li>
+                            <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;margin-right:10px;">Refund Proof: </p></b></li>
                             <li class="fs-6 pl-3">
                                 <a href="${jsonObject.return_order.image}" target="_blank">
                                     <img loading="lazy" class="prod-img" style="width:50%; height:auto;" src="${jsonObject.return_order.image}" alt="product">
                                 </a>
                             </li>
-                            <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                            <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Date:</p></b><p style="width:70%; text-align:left;"> ${formattedDate}</p></li>
+                            
+                           
                         </ul>
                     </div>
                 </div>`;
@@ -1086,7 +1213,6 @@ if ($_SESSION["isVendor"] == true) {
         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">
@@ -1097,18 +1223,21 @@ if ($_SESSION["isVendor"] == true) {
                 </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">
-                            <a href="${jsonObject.return_order.image}" target="_blank">
-                                <img loading="lazy" class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product">
-                            </a>
-                        </li>
-                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                    <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Name:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.items[0].product.name}</p></li>
+
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Quantity:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.items[0].quantity}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Unit Price:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.items[0].price}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Price:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.total_amount}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap; margin-right:10px;">Refund Status: </p></b><p style="width:70%; text-align:left;"> ${jsonObject.return_order.status}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;margin-right:10px;">Refund Reason: </p></b><p style="width:70%; text-align:left;"> ${jsonObject.return_order.reason}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;margin-right:10px;">Refund Proof: </p></b></li>
+<li class="fs-6 pl-3">
+    <a href="${jsonObject.return_order.image}" target="_blank">
+        <img loading="lazy" class="prod-img" style="width:50%; height:auto;" src="${jsonObject.return_order.image}" alt="product">
+    </a>
+</li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Date:</p></b><p style="width:70%; text-align:left;"> ${formattedDate}</p></li>
+
                     </ul>
                 </div>
             </div>`;
@@ -1117,7 +1246,6 @@ if ($_SESSION["isVendor"] == true) {
         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">
@@ -1128,18 +1256,21 @@ if ($_SESSION["isVendor"] == true) {
                 </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">
-                            <a href="${jsonObject.return_order.image}" target="_blank">
-                                <img loading="lazy" class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product">
-                            </a>
-                        </li>
-                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                    <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Name:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.items[0].product.name}</p></li>
+
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Quantity:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.items[0].quantity}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Unit Price:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.items[0].price}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Price:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.total_amount}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap; margin-right:10px;">Refund Status: </p></b><p style="width:70%; text-align:left;"> ${jsonObject.return_order.status}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;margin-right:10px;">Refund Reason: </p></b><p style="width:70%; text-align:left;"> ${jsonObject.return_order.reason}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;margin-right:10px;">Refund Proof: </p></b></li>
+<li class="fs-6 pl-3">
+    <a href="${jsonObject.return_order.image}" target="_blank">
+        <img loading="lazy" class="prod-img" style="width:50%; height:auto;" src="${jsonObject.return_order.image}" alt="product">
+    </a>
+</li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Date:</p></b><p style="width:70%; text-align:left;"> ${formattedDate}</p></li>
+
                     </ul>
                 </div>
             </div>`;
@@ -1148,7 +1279,6 @@ if ($_SESSION["isVendor"] == true) {
         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">
@@ -1159,18 +1289,21 @@ if ($_SESSION["isVendor"] == true) {
                 </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">
-                            <a href="${jsonObject.return_order.image}" target="_blank">
-                                <img loading="lazy" class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product">
-                            </a>
-                        </li>
-                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                    <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Name:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.items[0].product.name}</p></li>
+
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Quantity:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.items[0].quantity}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Unit Price:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.items[0].price}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Price:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.total_amount}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap; margin-right:10px;">Refund Status: </p></b><p style="width:70%; text-align:left;"> ${jsonObject.return_order.status}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;margin-right:10px;">Refund Reason: </p></b><p style="width:70%; text-align:left;"> ${jsonObject.return_order.reason}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;margin-right:10px;">Refund Proof: </p></b></li>
+<li class="fs-6 pl-3">
+    <a href="${jsonObject.return_order.image}" target="_blank">
+        <img loading="lazy" class="prod-img" style="width:50%; height:auto;" src="${jsonObject.return_order.image}" alt="product">
+    </a>
+</li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Date:</p></b><p style="width:70%; text-align:left;"> ${formattedDate}</p></li>
+
                     </ul>
                 </div>
             </div>`;
@@ -1179,7 +1312,6 @@ if ($_SESSION["isVendor"] == true) {
         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">
@@ -1190,18 +1322,21 @@ if ($_SESSION["isVendor"] == true) {
                 </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">
-                            <a href="${jsonObject.return_order.image}" target="_blank">
-                                <img loading="lazy" class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product">
-                            </a>
-                        </li>
-                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                    <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Name:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.items[0].product.name}</p></li>
+
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Quantity:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.items[0].quantity}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Unit Price:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.items[0].price}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Price:</p></b><p style="width:70%; text-align:left;"> ${jsonObject.total_amount}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap; margin-right:10px;">Refund Status: </p></b><p style="width:70%; text-align:left;"> ${jsonObject.return_order.status}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;margin-right:10px;">Refund Reason: </p></b><p style="width:70%; text-align:left;"> ${jsonObject.return_order.reason}</p></li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;margin-right:10px;">Refund Proof: </p></b></li>
+<li class="fs-6 pl-3">
+    <a href="${jsonObject.return_order.image}" target="_blank">
+        <img loading="lazy" class="prod-img" style="width:50%; height:auto;" src="${jsonObject.return_order.image}" alt="product">
+    </a>
+</li>
+<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Date:</p></b><p style="width:70%; text-align:left;"> ${formattedDate}</p></li>
+
                     </ul>
                 </div>
             </div>`;
@@ -1209,10 +1344,10 @@ if ($_SESSION["isVendor"] == true) {
 
 
         console.log(jsonObject);
-        });
+    });
 
-        const modal = document.getElementById('productDetails');
-        console.log(modal);
+    const modal = document.getElementById('productDetails');
+    console.log(modal);
     </script>
 
 
@@ -1264,7 +1399,7 @@ if ($_SESSION["isVendor"] == true) {
     </div>
     <!-- Cart Floating Button end -->
 
-    
+
 
     <!-- Feature tools -->
     <div class="ec-tools-sidebar-overlay"></div>
@@ -1335,29 +1470,29 @@ if ($_SESSION["isVendor"] == true) {
 
     <!-- DataTables -->
     <script>
-        $(document).ready( function () {
+    $(document).ready(function() {
         $('#allRefundsTbl').DataTable();
-        } );
+    });
 
-        $(document).ready( function () {
+    $(document).ready(function() {
         $('#toApproveTbl').DataTable();
-        } );
+    });
 
-        $(document).ready( function () {
+    $(document).ready(function() {
         $('#toShipTbl').DataTable();
-        } );
+    });
 
-        $(document).ready( function () {
+    $(document).ready(function() {
         $('#toReceiveTbl').DataTable();
-        } );
+    });
 
-        $(document).ready( function () {
+    $(document).ready(function() {
         $('#toRefundTbl').DataTable();
-        } );
+    });
 
-        $(document).ready( function () {
+    $(document).ready(function() {
         $('#returnCompleteTbl').DataTable();
-        } );
+    });
     </script>
 
     <!-- Vendor JS -->
diff --git a/vendor-dashboard.php b/vendor-dashboard.php
index 87db16c..48de342 100644
--- a/vendor-dashboard.php
+++ b/vendor-dashboard.php
@@ -64,7 +64,7 @@ if ($_SESSION["isCustomer"] == true) {
     <meta name="msapplication-TileImage" content="assets/images/favicon/favicon.png" />
 
     <!-- css Icon Font -->
-     <link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
+    <link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
         integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
diff --git a/vendor-payments.php b/vendor-payments.php
index 78b562e..0bdbf2a 100644
--- a/vendor-payments.php
+++ b/vendor-payments.php
@@ -56,7 +56,7 @@ if ($_SESSION["isCustomer"] == true) {
     <meta name="msapplication-TileImage" content="assets/images/favicon/favicon.png" />
 
     <!-- css Icon Font -->
-     <link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
+    <link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
         integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -103,6 +103,22 @@ if ($_SESSION["isCustomer"] == true) {
         border: 1px solid #ccc;
         border-radius: 4px;
     }
+
+    .roww {
+        width: 100%;
+        display: flex;
+        /* justify-content: center;
+        align-items: center; */
+        flex-wrap: nowrap !important;
+        flex-direction: row !important;
+    }
+
+    @media(max-width:992px) {
+        .roww {
+            flex-wrap: wrap !important;
+
+        }
+    }
     </style>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script>
@@ -144,7 +160,7 @@ if ($_SESSION["isCustomer"] == true) {
         <div class="container">
             <div class="row">
                 <div class="col-12">
-                    <div class="row ec_breadcrumb_inner">
+                    <div class="row ec_breadcrumb_inner roww">
                         <div class="col-md-6 col-sm-12">
                             <h2 class="ec-breadcrumb-title">User History</h2>
                         </div>
@@ -164,9 +180,9 @@ if ($_SESSION["isCustomer"] == true) {
     <!-- Ec breadcrumb end -->
     <section class="ec-page-content ec-vendor-uploads ec-user-account section-space-p">
         <div class="container">
-            <div class="row">
+            <div class="row roww">
                 <!-- Sidebar Area Start -->
-                <div class="ec-shop-leftside ec-vendor-sidebar col-lg-3 col-md-12">
+                <div class="ec-shop-leftside ec-vendor-sidebar col-lg-3 col-md-12 ">
                     <div class="ec-sidebar-wrap ec-border-box">
                         <!-- Sidebar Category Block -->
                         <div class="ec-sidebar-block">
diff --git a/vendor-payouts.php b/vendor-payouts.php
index e078b15..484a0c1 100644
--- a/vendor-payouts.php
+++ b/vendor-payouts.php
@@ -51,7 +51,8 @@ $vendorPayoutData = json_decode($response, true);
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
 
     <title>oBanana B2B - Elevate Your Business</title>
-    <meta name="keywords" content="apparel, catalog, clean, ecommerce, ecommerce HTML, electronics, fashion, html eCommerce, html store, minimal, multipurpose, multipurpose ecommerce, online store, responsive ecommerce template, shops" />
+    <meta name="keywords"
+        content="apparel, catalog, clean, ecommerce, ecommerce HTML, electronics, fashion, html eCommerce, html store, minimal, multipurpose, multipurpose ecommerce, online store, responsive ecommerce template, shops" />
     <meta name="description" content="Best ecommerce html template for single and multi vendor store.">
     <meta name="author" content="ashishmaraviya">
 
@@ -61,7 +62,7 @@ $vendorPayoutData = json_decode($response, true);
     <meta name="msapplication-TileImage" content="assets/images/favicon/favicon.png" />
 
     <!-- css Icon Font -->
-     <link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
+    <link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
         integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -87,27 +88,46 @@ $vendorPayoutData = json_decode($response, true);
 
     <!-- Background css -->
     <link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@latest/dist/css/select2.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@latest/dist/css/select2.min.css"
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/select2@latest/dist/js/select2.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdn.jsdelivr.net/npm/select2@latest/dist/js/select2.min.js" crossorigin="anonymous"
+        referrerpolicy="no-referrer"></script>
     <script>
-        function renewToken() {
-                var xhr = new XMLHttpRequest();
-                xhr.open("GET", "vendor-payoutsTokenRN.php", true);
-                xhr.send();
-            }
+    function renewToken() {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", "vendor-payoutsTokenRN.php", true);
+        xhr.send();
+    }
 
-            setInterval(function() {
-                var currentTime = <?php echo time(); ?>;
-                var renewalTime = <?php echo $renewal_time; ?>;
-                var expirationTime = <?php echo $expiration_time; ?>;
+    setInterval(function() {
+        var currentTime = <?php echo time(); ?>;
+        var renewalTime = <?php echo $renewal_time; ?>;
+        var expirationTime = <?php echo $expiration_time; ?>;
 
-                if (currentTime >= renewalTime || currentTime >= expirationTime) {
-                    renewToken();
-                }
-            }, 60000);
+        if (currentTime >= renewalTime || currentTime >= expirationTime) {
+            renewToken();
+        }
+    }, 60000);
     </script>
 </head>
+<style>
+.roww {
+    width: 100%;
+    display: flex;
+    /* justify-content: center;
+        align-items: center; */
+    flex-wrap: nowrap !important;
+    flex-direction: row !important;
+}
+
+@media(max-width:992px) {
+    .roww {
+        flex-wrap: wrap !important;
+
+    }
+}
+</style>
 
 <body class="shop_page">
     <div id="ec-overlay">
@@ -135,7 +155,7 @@ $vendorPayoutData = json_decode($response, true);
         <div class="container">
             <div class="row">
                 <div class="col-12">
-                    <div class="row ec_breadcrumb_inner">
+                    <div class="row ec_breadcrumb_inner roww">
                         <div class="col-md-6 col-sm-12">
                             <h2 class="ec-breadcrumb-title">Vendor Payouts</h2>
                         </div>
@@ -157,7 +177,7 @@ $vendorPayoutData = json_decode($response, true);
     <!-- Vendor setting section -->
     <section class="ec-page-content ec-vendor-uploads section-space-p">
         <div class="container">
-            <div class="row">
+            <div class="row roww">
                 <!-- Sidebar Area Start -->
                 <div class="ec-shop-leftside ec-vendor-sidebar col-lg-3 col-md-12">
                     <div class="ec-sidebar-wrap ec-border-box">
@@ -167,9 +187,13 @@ $vendorPayoutData = json_decode($response, true);
                                 <!-- 03-12-2024 Stacy added placeholder for vendor banner -->
                                 <?php
                                     if (!empty($vendorData['vendor_banner'])) { ?>
-                                        <div class="ec-vendor-block-bg" style="background-image: url(<?php echo $vendorData['vendor_banner'] ?>) !important;"></div>
-                                    <?php } else { ?>
-                                        <div class="ec-vendor-block-bg" style="background-color: orange; background-image: url(<?php echo $vendorData['vendor_banner'] ?>) !important;"></div>
+                                <div class="ec-vendor-block-bg"
+                                    style="background-image: url(<?php echo $vendorData['vendor_banner'] ?>) !important;">
+                                </div>
+                                <?php } else { ?>
+                                <div class="ec-vendor-block-bg"
+                                    style="background-color: orange; background-image: url(<?php echo $vendorData['vendor_banner'] ?>) !important;">
+                                </div>
                                 <?php } ?>
                                 <!-- <div class="ec-vendor-block-bg" style="background-image: url(<?php #echo $vendorData['vendor_banner'] ?>) !important;"></div> -->
                                 <div class="ec-vendor-block-detail">
@@ -177,9 +201,12 @@ $vendorPayoutData = json_decode($response, true);
                                     <!-- 03-12-2024 Stacy added placeholder for vendor profile -->
                                     <?php
                                     if (!empty($vendorData['vendor_image'])) { ?>
-                                        <img loading="lazy" class="v-img" src=<?php echo $vendorData['vendor_image'] ?> alt="vendor image">
+                                    <img loading="lazy" class="v-img" src=<?php echo $vendorData['vendor_image'] ?>
+                                        alt="vendor image">
                                     <?php } else { ?>
-                                        <img loading="lazy" class="v-img" src="https://yourteachingmentor.com/wp-content/uploads/2020/12/istockphoto-1223671392-612x612-1.jpg" alt="vendor image">
+                                    <img loading="lazy" class="v-img"
+                                        src="https://yourteachingmentor.com/wp-content/uploads/2020/12/istockphoto-1223671392-612x612-1.jpg"
+                                        alt="vendor image">
                                     <?php } ?>
                                     <h5 class="name"><?php echo $vendorData['user_login'] ?></h5>
                                 </div>
@@ -249,7 +276,8 @@ $vendorPayoutData = json_decode($response, true);
                                             }
                                             $bankNumEnding = substr($bankAccountNumber, -3);
                                             ?>
-                                            Receipient: <?php echo $bankName; ?> Account ending in <?php echo $bankNumEnding?>
+                                            Receipient: <?php echo $bankName; ?> Account ending in
+                                            <?php echo $bankNumEnding?>
                                         </div>
                                     </div>
                                 </div>
@@ -317,18 +345,10 @@ $vendorPayoutData = json_decode($response, true);
                         </div>
                         <div class="ec-vendor-card-body">
                             <div class="ec-vendor-card-table">
-                                <table  class="table ec-table"
-                                id="payout-table"  style="overflow-x: auto;"
-                                    data-role="table"
-                                    data-pagination="true" 
-                                    data-searching="true" 
-                                    data-filtering="true" 
-                                    data-sorting="true" 
-                                    data-show-rows-steps="5,10,20,-1" 
-                                    data-horizontal-scroll="true"
-                                    data-rownum="true"
-                                    data-table-info-title="Display from $1 to $2 of $3 payment(s)"
-                                >
+                                <table class="table ec-table" id="payout-table" style="overflow-x: auto;"
+                                    data-role="table" data-pagination="true" data-searching="true" data-filtering="true"
+                                    data-sorting="true" data-show-rows-steps="5,10,20,-1" data-horizontal-scroll="true"
+                                    data-rownum="true" data-table-info-title="Display from $1 to $2 of $3 payment(s)">
                                     <thead>
                                         <tr>
                                             <th data-sortable="true" scope="col">Amount</th>
@@ -348,35 +368,37 @@ $vendorPayoutData = json_decode($response, true);
                                             $payoutDate = date("F d, Y", strtotime($val['createdAt']));
                                             $payoutId = $val['_id'];
                                             if ((empty($vendorIdCheck) == false) && ($vendorIdCheck == $vendorId) && ($status == "Deposited")) { ?>
-                                                <tr>
-                                                    <td> <?php echo "₱ " . $val['net_amount'] ?> </td>
-                                                    <?php if (empty($val['bank_information'][0]['bank_name']) == false) {
+                                        <tr>
+                                            <td> <?php echo "₱ " . $val['net_amount'] ?> </td>
+                                            <?php if (empty($val['bank_information'][0]['bank_name']) == false) {
                                                     ?>
-                                                        <td> <?php echo $val['bank_information'][0]['bank_name'] ?> </td>
-                                                    <?php } else { ?>
-                                                        <td> N/A </td>
-                                                    <?php }
+                                            <td> <?php echo $val['bank_information'][0]['bank_name'] ?> </td>
+                                            <?php } else { ?>
+                                            <td> N/A </td>
+                                            <?php }
                                                     if (empty($val['bank_information'][0]['bank_account_number']) == false) {
                                                         $accNum = $val['bank_information'][0]['bank_account_number'];
                                                         // Replace characters with asterisks for all characters except the last three segments
                                                         $maskedAccNum = substr_replace($accNum, str_repeat('*', strlen($accNum) - 3), 0, -3); ?>
-                                                        <td> <?php echo $maskedAccNum ?> </td>
-                                                    <?php } else { ?>
-                                                        <td> N/A </td>
-                                                    <?php } ?>
-                                                    <td> <?php echo $payoutDate ?> </td>
-                                                    <td> <?php echo $status ?> </td>
-                                                    <td>
-                                                        <button type="button" class="btn btn-primary btn-sm showSinglePayoutBtn" data-order-id="<?php echo $payoutId; ?>" data-bs-toggle="modal" data-bs-target="#payoutsModal">View</button>
-                                                    </td>
-                                                </tr>
+                                            <td> <?php echo $maskedAccNum ?> </td>
+                                            <?php } else { ?>
+                                            <td> N/A </td>
+                                            <?php } ?>
+                                            <td> <?php echo $payoutDate ?> </td>
+                                            <td> <?php echo $status ?> </td>
+                                            <td>
+                                                <button type="button" class="btn btn-primary btn-sm showSinglePayoutBtn"
+                                                    data-order-id="<?php echo $payoutId; ?>" data-bs-toggle="modal"
+                                                    data-bs-target="#payoutsModal">View</button>
+                                            </td>
+                                        </tr>
                                         <?php
                                             }
                                         } ?>
                                     </tbody>
                                 </table>
                             </div>
-                        </div>                
+                        </div>
                     </div>
 
                 </div>
@@ -437,7 +459,7 @@ $vendorPayoutData = json_decode($response, true);
     </div>
     <!-- Cart Floating Button end -->
 
-    
+
 
     <!-- Feature tools -->
     <div class="ec-tools-sidebar-overlay"></div>
@@ -525,7 +547,7 @@ $vendorPayoutData = json_decode($response, true);
     <script src="assets/js/plugins/nouislider.js"></script>
     <script src="https://cdn.datatables.net/v/bs5/dt-2.0.3/r-3.0.0/sp-2.3.0/datatables.min.js"></script>
     <!-- <script src="https://cdn.metroui.org.ua/current/metro.js"></script> -->
-	
+
     <!-- <script>
         const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
         const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
@@ -537,52 +559,56 @@ $vendorPayoutData = json_decode($response, true);
 
     <!-- JS CRIPT FOR DYNAMIC MODAL BOX USING AJAX - JOHN LOUIE C. SUPERALIS MARCH 22, 2024 -->
     <script>
-        $(document).ready(function() {
-            $('.showSinglePayoutBtn').click(function() {
-                var payoutId = $(this).data('order-id');
-                var token = "<?php echo $authToken; ?>";
-                $('#payoutIdSpan').text(payoutId);
-                $.ajax({
-                    // url: 'https://api.obanana.shop/api/v1/payouts/' + payoutId,
-                    url: 'https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/payouts/' + payoutId,
-                    type: 'GET',
-                    headers: {
-                        'Authorization': 'Bearer ' + token
-                    },
-                    success: function(response) {
-                        // Handle successful response
-                        console.log(response);
-                        var grossAmount = response.gross_amount;
-                        var totalFees = response.fees_deduction_adjustment;
-                        var feeBreakdown = response.breakdown[0].transfer_fee;
-                        var netAmount = response.net_amount;
-                        var payoutStatus = response.status;
-                        payoutStatus = payoutStatus.charAt(0).toUpperCase() + payoutStatus.slice(1).toLowerCase();
-                        var bankName = response.bank_information[0].bank_name;
-                        var bankNum = response.bank_information[0].bank_account_number;
-                        var bankNumEnding = bankNum.slice(-3); // Extract last three characters of bankNum
-                        var maskedBankNum = "Ending in " + bankNumEnding; // Create message
-                        var bankAccName = response.bank_information[0].bank_account_name;
-                        var transactionLogsHtml = ''; // Initialize empty string to store HTML for transaction logs
-                        response.transaction_logs.forEach(function(log) 
-                        {
-                            
-                            var paymentType = log.Type;
-                            var transDate = new Date(log?.Transaction_date).toLocaleString('en-US', { 
-                                year: 'numeric', 
-                                month: '2-digit', 
+    $(document).ready(function() {
+        $('.showSinglePayoutBtn').click(function() {
+            var payoutId = $(this).data('order-id');
+            var token = "<?php echo $authToken; ?>";
+            $('#payoutIdSpan').text(payoutId);
+            $.ajax({
+                // url: 'https://api.obanana.shop/api/v1/payouts/' + payoutId,
+                url: 'https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/payouts/' +
+                    payoutId,
+                type: 'GET',
+                headers: {
+                    'Authorization': 'Bearer ' + token
+                },
+                success: function(response) {
+                    // Handle successful response
+                    console.log(response);
+                    var grossAmount = response.gross_amount;
+                    var totalFees = response.fees_deduction_adjustment;
+                    var feeBreakdown = response.breakdown[0].transfer_fee;
+                    var netAmount = response.net_amount;
+                    var payoutStatus = response.status;
+                    payoutStatus = payoutStatus.charAt(0).toUpperCase() + payoutStatus
+                        .slice(1).toLowerCase();
+                    var bankName = response.bank_information[0].bank_name;
+                    var bankNum = response.bank_information[0].bank_account_number;
+                    var bankNumEnding = bankNum.slice(-
+                        3); // Extract last three characters of bankNum
+                    var maskedBankNum = "Ending in " + bankNumEnding; // Create message
+                    var bankAccName = response.bank_information[0].bank_account_name;
+                    var transactionLogsHtml =
+                        ''; // Initialize empty string to store HTML for transaction logs
+                    response.transaction_logs.forEach(function(log) {
+
+                        var paymentType = log.Type;
+                        var transDate = new Date(log?.Transaction_date)
+                            .toLocaleString('en-US', {
+                                year: 'numeric',
+                                month: '2-digit',
                                 day: '2-digit',
                                 hour: 'numeric',
                                 minute: '2-digit',
                                 hour12: true
                             });
-                            var transGrossAmount = log?.Gross_Amount; 
-                            var transFee = log.Fee;
-                            var transNetAmount = log?.Net_Amount;
-                            var transDesc = log.Description;
-                            
-                            // Append HTML for current transaction log to the transactionLogsHtml string
-                            transactionLogsHtml += `
+                        var transGrossAmount = log?.Gross_Amount;
+                        var transFee = log.Fee;
+                        var transNetAmount = log?.Net_Amount;
+                        var transDesc = log.Description;
+
+                        // Append HTML for current transaction log to the transactionLogsHtml string
+                        transactionLogsHtml += `
                                 <tr>
                                     <td>${paymentType}</td>
                                     <td>${transDate}</td>
@@ -591,11 +617,11 @@ $vendorPayoutData = json_decode($response, true);
                                     <td>₱ ${transNetAmount}</td>
                                     <td>${transDesc}</td>
                                 </tr>`;
-                        });
+                    });
 
 
-                        // Populate data dynamically using the response
-                        var payoutDetailsHtml = `                    
+                    // Populate data dynamically using the response
+                    var payoutDetailsHtml = `                    
                         <div class="row">
                             <div class="col-md-7 mb-4">
                                 <div class="d-flex flex-column">
@@ -667,13 +693,13 @@ $vendorPayoutData = json_decode($response, true);
                                 </div>
                             </div>
                         </div>`;
-                        $('#payoutDetailsContainer').html(payoutDetailsHtml);
+                    $('#payoutDetailsContainer').html(payoutDetailsHtml);
 
-                    },
-                })
+                },
+            })
 
-            });
         });
+    });
     </script>
 
 </body>