From 9d3c301ab5c5f45c6e587095c1e3659306ee44dc Mon Sep 17 00:00:00 2001
From: jouls <jl.superalis@gmail.com>
Date: Fri, 22 Mar 2024 10:40:44 +0800
Subject: [PATCH 01/11] changes on the data table format

---
 vendor-payouts.php | 67 +++++++++++++++++++---------------------------
 1 file changed, 27 insertions(+), 40 deletions(-)

diff --git a/vendor-payouts.php b/vendor-payouts.php
index 970d1a4..96f269b 100644
--- a/vendor-payouts.php
+++ b/vendor-payouts.php
@@ -241,47 +241,34 @@ if ($_SESSION["userId"] <> "") {
                                                 <?php
                                                 foreach ($vendorPayoutData as $x => $val) {
                                                     $vendorIdCheck = $val['vendor_details'][0]['vendor_id'];
-                                                    if ((empty($vendorIdCheck) == false) && ($vendorIdCheck == $vendorId) && ($val['status'] == "DEPOSITED")) {
-                                                        echo "<tr>";
-                                                        echo "<td>" . "₱ " . $val['net_amount'] . "</td>";
-                                                        if (empty($val['bank_information'][0]['bank_name']) == false) {
-                                                            echo "<td>" . $val['bank_information'][0]['bank_name'] . "</td>";
-                                                            // echo "<td>" . $val['bank_information'][0]['account_number'] . "</td>";
-                                                        } else {
-                                                            echo '<td>N/A</td>';
-                                                        }
-                                                        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);
-                                                            echo "<td>" . $maskedAccNum . "</td>";
-                                                            // echo "<td>" . $val['bank_information'][0]['bank_account_number'] . "</td>";
-                                                        } else {
-                                                            echo '<td>N/A</td>';
-                                                        };
-                                                        echo "<td>December 08, 2024</td>";
-                                                        echo "<td>" . $val['status'] . "</td>";
-                                                        echo "<td>" .
-                                                            "<button type='button' class='btn btn-primary btn-sm' data-bs-toggle='modal' data-bs-target='#payoutModal'>
-                                                                Details
-                                                            </button>" .
-                                                            "</td>";
-                                                        echo "</tr>";
+                                                    if ((empty($vendorIdCheck) == false) && ($vendorIdCheck == $vendorId) && ($val['status'] == "DEPOSITED")) { ?>
+                                                        <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 }
+                                                            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> December 08, 2023 </td>
+                                                            <td> <?php echo $val['status'] ?> </td>
+                                                            <td>
+                                                                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#payoutModal">
+                                                                    Details
+                                                                </button>
+                                                            </td>
+                                                        </tr>
+                                                <?php
                                                     }
-                                                }
-                                                ?>
-                                                <!-- <tr>
-                                                    <td> ₱ 1,165.65 </td>
-                                                    <td> EastWest Bank </td>
-                                                    <td> ****6618 </td>
-                                                    <td> December 08, 2023 </td>
-                                                    <td> Deposited </td>
-                                                    <td>
-                                                        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#payoutModal">
-                                                            Details
-                                                        </button>
-                                                    </td>
-                                                </tr> -->
+                                                } ?>
                                             </tbody>
                                         </table>
                                     </div>

From ce9edf65938481c228c25f54d91f1226eede3fe4 Mon Sep 17 00:00:00 2001
From: jouls <jl.superalis@gmail.com>
Date: Fri, 22 Mar 2024 14:10:51 +0800
Subject: [PATCH 02/11] added get payout by Id function

---
 functions.php | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/functions.php b/functions.php
index ed25bb6..5748d5f 100644
--- a/functions.php
+++ b/functions.php
@@ -1858,3 +1858,27 @@ function getAllPayout($token)
 
   return $response;
 }
+
+function getPayoutById($id, $token)
+{
+  $curl = curl_init();
+  curl_setopt_array($curl, array(
+    CURLOPT_URL => "https://" . $_SESSION["data_endpoint"] . "/api/v1/payouts/$id",
+    CURLOPT_RETURNTRANSFER => true,
+    CURLOPT_ENCODING => '',
+    CURLOPT_MAXREDIRS => 10,
+    CURLOPT_TIMEOUT => 0,
+    CURLOPT_FOLLOWLOCATION => true,
+    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+    CURLOPT_CUSTOMREQUEST => 'GET',
+    CURLOPT_HTTPHEADER => array(
+      'X-Api-Key: {{apiKey}}',
+      'Content-Type: application/json',
+      'Authorization: Bearer ' . $token
+    ),
+  ));
+  $response = curl_exec($curl);
+  curl_close($curl);
+
+  return $response;
+}

From 947f491a23906a656701a7d15dc70f35e509dd89 Mon Sep 17 00:00:00 2001
From: jouls <jl.superalis@gmail.com>
Date: Fri, 22 Mar 2024 18:21:43 +0800
Subject: [PATCH 03/11] added dynamic values to modal box

---
 vendor-payouts.php | 165 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 148 insertions(+), 17 deletions(-)

diff --git a/vendor-payouts.php b/vendor-payouts.php
index 96f269b..e1780a8 100644
--- a/vendor-payouts.php
+++ b/vendor-payouts.php
@@ -15,7 +15,8 @@ if ($_SESSION["userId"] <> "") {
     // // var_dump($vendor);
     // $array = json_decode($vendor,true);
     // var_dump($array);
-    $response = getAllPayout($_SESSION['token']);
+    $authToken = $_SESSION['token'];
+    $response = getAllPayout($authToken);
     $vendorPayoutData = json_decode($response, true);
 } else {
     $_SESSION["isLoggedIn"] = false;
@@ -241,7 +242,8 @@ if ($_SESSION["userId"] <> "") {
                                                 <?php
                                                 foreach ($vendorPayoutData as $x => $val) {
                                                     $vendorIdCheck = $val['vendor_details'][0]['vendor_id'];
-                                                    if ((empty($vendorIdCheck) == false) && ($vendorIdCheck == $vendorId) && ($val['status'] == "DEPOSITED")) { ?>
+                                                    if ((empty($vendorIdCheck) == false) && ($vendorIdCheck == $vendorId) && ($val['status'] == "DEPOSITED")) {
+                                                        $payoutId = $val['_id'] ?>
                                                         <tr>
                                                             <td> <?php echo "₱ " . $val['net_amount'] ?> </td>
                                                             <?php if (empty($val['bank_information'][0]['bank_name']) == false) {
@@ -261,9 +263,10 @@ if ($_SESSION["userId"] <> "") {
                                                             <td> December 08, 2023 </td>
                                                             <td> <?php echo $val['status'] ?> </td>
                                                             <td>
-                                                                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#payoutModal">
+                                                                <button type="button" class="btn btn-primary showSinglePayoutBtn" data-order-id="<?php echo $payoutId; ?>" data-bs-toggle="modal" data-bs-target="#payoutsModal">View</button>
+                                                                <!-- <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#payoutModal">
                                                                     Details
-                                                                </button>
+                                                                </button> -->
                                                             </td>
                                                         </tr>
                                                 <?php
@@ -280,7 +283,27 @@ if ($_SESSION["userId"] <> "") {
             </div>
         </div>
     </section>
-    <div class="modal fade" id="payoutModal" tabindex="-1" aria-labelledby="payoutModalLabel" aria-hidden="true">
+
+    <div class="modal fade" id="payoutsModal" tabindex="-1" aria-labelledby="payoutsModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-xl" style="min-width: 90%;">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title fs-5" id="payoutsModalLabel">Payment ID: <span id="payoutIdSpan"></span></h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="container-fluid" id="payoutDetailsContainer">
+                        <!-- Dynamic content will be inserted here -->
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- <div class="modal fade" id="payoutModal" tabindex="-1" aria-labelledby="payoutModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-xl" style="min-width: 90%;">
             <div class="modal-content">
                 <div class="modal-header">
@@ -296,12 +319,7 @@ if ($_SESSION["userId"] <> "") {
                                         <div>
                                             <h6><strong>Payout Information</strong></h6>
                                         </div>
-                                        <!-- <php
-                                        if ($_SESSION['status'] == "DEPOSITED")
-                                            $className = "fw-bold border border-success border-2 rounded-pill btn-outline-success btn-sm";
-                                        else if ($_SESSION['statis'] == "PENDING")
-                                            $className = "fw-bold border border-warning border-2 rounded-pill btn-outline-warning btn-sm";
-                                    ?> -->
+
                                         <button class="fw-bold border border-success border-2 btn-outline-success btn-sm" disabled>DEPOSITED</button>
                                     </div>
                                     <div class="d-flex justify-content-between p-2">
@@ -310,9 +328,7 @@ if ($_SESSION["userId"] <> "") {
                                     </div>
                                     <div class="d-flex justify-content-between p-2" style="border-bottom: 1px solid #000;">
                                         <div class="fw-bold"> Fees, Deductions, Adjustments
-                                            <!-- <span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" data-bs-title="Insert fee information here">
-                                                <i class="fi fi-rr-info"></i>
-                                            </span> -->
+
                                         </div>
                                         <div>- ₱ 35.00</div>
                                     </div>
@@ -378,7 +394,7 @@ if ($_SESSION["userId"] <> "") {
                 </div>
             </div>
         </div>
-    </div>
+    </div> -->
     <!-- End Vendor setting section -->
 
     <!-- Footer Start -->
@@ -612,14 +628,129 @@ if ($_SESSION["userId"] <> "") {
     <script src="assets/js/vendor/jquery.magnific-popup.min.js"></script>
     <script src="assets/js/plugins/jquery.sticky-sidebar.js"></script>
     <script src="assets/js/plugins/nouislider.js"></script>
-    <script>
+    <!-- <script>
         const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
         const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
-    </script>
+    </script> -->
 
     <!-- Main Js -->
     <script src="assets/js/vendor/index.js"></script>
     <script src="assets/js/main.js"></script>
+    <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,
+                    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 netAmount = response.net_amount;
+                        var payoutStatus = response.status;
+                        var bankName = response.bank_information[0].bank_name;
+                        var bankNum = response.bank_information[0].bank_account_number;
+                        var bankAccName = response.bank_information[0].bank_account_name;
+                        var paymentType = response.transaction_logs[0].Type;
+                        // var transDate = response.transaction_logs[0].Transaction + " " + date;
+                        // var transGrossAmt = response.transaction_logs[0].Gross + " " + amount;
+                        var transFee = response.transaction_logs[0].Fee;
+                        // var transNetAmt = response.transaction_logs[0].Net + " " + amount;
+                        var transDesc = response.transaction_logs[0].Description;
+
+                        // Populate data dynamically using the response
+                        var payoutDetailsHtml = `                    
+                        <div class="row">
+                            <div class="col-md-7 mb-4">
+                                <div class="d-flex flex-column">
+                                    <div class="d-flex justify-content-between p-2">
+                                        <div>
+                                            <h6><strong>Payout Information</strong></h6>
+                                        </div>
+
+                                        <button class="fw-bold border border-success border-2 btn-outline-success btn-sm" disabled>${payoutStatus}</button>
+                                    </div>
+                                    <div class="d-flex justify-content-between p-2">
+                                        <div class="fw-bold">Gross Amount</div>
+                                        <div>₱ ${grossAmount}</div>
+                                    </div>
+                                    <div class="d-flex justify-content-between p-2" style="border-bottom: 1px solid #000;">
+                                        <div class="fw-bold"> Fees, Deductions, Adjustments
+
+                                        </div>
+                                        <div>- ₱ ${totalFees}</div>
+                                    </div>
+                                    <div class="d-flex justify-content-between p-2">
+                                        <div class="fw-bold"> Net Amount</div>
+                                        <div>₱ ${netAmount}</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-5 mb-4">
+                                <div class="d-flex flex-column" style="border-bottom: 1px solid #000;">
+                                    <div class="d-flex justify-content-between p-2">
+                                        <h6><strong>Bank Information</strong></h6>
+                                    </div>
+                                    <div class="d-flex justify-content-between p-2">
+                                        <div class="fw-bold">Bank</div>
+                                        <div>${bankName}</div>
+                                    </div>
+                                    <div class="d-flex justify-content-between p-2">
+                                        <div class="fw-bold">Account Name</div>
+                                        <div>${bankAccName}</div>
+                                    </div>
+                                    <div class="d-flex justify-content-between p-2">
+                                        <div class="fw-bold">Account Number</div>
+                                        <div>${bankNum}</div>
+                                    </div>
+
+                                </div>
+                            </div>
+                            <div class="col-12">
+                                <div class="mt-5">
+                                    <h6><strong>Transaction Logs</strong></h6>
+                                    <div class="table-responsive">
+                                        <table id="example" class="table ec-table">
+                                            <thead>
+                                                <tr>
+                                                    <th>Type</th>
+                                                    <th>Transaction Date</th>
+                                                    <th>Gross Amount</th>
+                                                    <th>Fee</th>
+                                                    <th>Net Amount</th>
+                                                    <th>Description</th>
+
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <td> ${paymentType} </td>
+                                                <td> December 08, 2024 </td>
+                                                <td> ₱ 350</td>
+                                                <td> - ₱ ${transFee}</td>
+                                                <td> ₱ 300</td>
+                                                <td> ${transDesc} </td>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>`;
+                        $('#payoutDetailsContainer').html(payoutDetailsHtml);
+
+                    },
+                })
+
+            });
+        });
+    </script>
+
 
 
 </body>

From 8eb07ad94f63c142fa7a718a634f61825a58624e Mon Sep 17 00:00:00 2001
From: jouls <jl.superalis@gmail.com>
Date: Sat, 23 Mar 2024 12:01:46 +0800
Subject: [PATCH 04/11] added bankNum masking in modal box

---
 vendor-payouts.php | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/vendor-payouts.php b/vendor-payouts.php
index e1780a8..b5a372e 100644
--- a/vendor-payouts.php
+++ b/vendor-payouts.php
@@ -284,6 +284,7 @@ if ($_SESSION["userId"] <> "") {
         </div>
     </section>
 
+    <!-- Modal Box for the breakdown of payouts from the payouts data table - JOHN LOUIE C. SUEPERALIS MARCH 22, 2024 -->
     <div class="modal fade" id="payoutsModal" tabindex="-1" aria-labelledby="payoutsModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-xl" style="min-width: 90%;">
             <div class="modal-content">
@@ -636,6 +637,8 @@ if ($_SESSION["userId"] <> "") {
     <!-- Main Js -->
     <script src="assets/js/vendor/index.js"></script>
     <script src="assets/js/main.js"></script>
+
+    <!-- JS CRIPT FOR DYNAMIC MODAL BOX USING AJAX - JOHN LOUIE C. SUPERALIS MARCH 22, 2024 -->
     <script>
         $(document).ready(function() {
             $('.showSinglePayoutBtn').click(function() {
@@ -657,6 +660,8 @@ if ($_SESSION["userId"] <> "") {
                         var payoutStatus = response.status;
                         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 paymentType = response.transaction_logs[0].Type;
                         // var transDate = response.transaction_logs[0].Transaction + " " + date;
@@ -708,7 +713,7 @@ if ($_SESSION["userId"] <> "") {
                                     </div>
                                     <div class="d-flex justify-content-between p-2">
                                         <div class="fw-bold">Account Number</div>
-                                        <div>${bankNum}</div>
+                                        <div>${maskedBankNum}</div>
                                     </div>
 
                                 </div>

From 1067ee2efdccceff72e501f8f6ef40b6f2b69c05 Mon Sep 17 00:00:00 2001
From: jouls <jl.superalis@gmail.com>
Date: Sat, 23 Mar 2024 12:30:23 +0800
Subject: [PATCH 05/11] added dynamic date to the payout table

---
 vendor-payouts.php | 52 ++++++++++++++++++++++++++++++++--------------
 1 file changed, 36 insertions(+), 16 deletions(-)

diff --git a/vendor-payouts.php b/vendor-payouts.php
index b5a372e..ceaf2c0 100644
--- a/vendor-payouts.php
+++ b/vendor-payouts.php
@@ -242,8 +242,10 @@ if ($_SESSION["userId"] <> "") {
                                                 <?php
                                                 foreach ($vendorPayoutData as $x => $val) {
                                                     $vendorIdCheck = $val['vendor_details'][0]['vendor_id'];
-                                                    if ((empty($vendorIdCheck) == false) && ($vendorIdCheck == $vendorId) && ($val['status'] == "DEPOSITED")) {
-                                                        $payoutId = $val['_id'] ?>
+                                                    $status = ucfirst(strtolower($val['status']));
+                                                    $payoutDate = date("F d, Y", strtotime($val['updatedAt']));
+                                                    $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) {
@@ -260,8 +262,8 @@ if ($_SESSION["userId"] <> "") {
                                                             <?php } else { ?>
                                                                 <td> N/A </td>
                                                             <?php } ?>
-                                                            <td> December 08, 2023 </td>
-                                                            <td> <?php echo $val['status'] ?> </td>
+                                                            <td> <?php echo $payoutDate ?> </td>
+                                                            <td> <?php echo $status ?> </td>
                                                             <td>
                                                                 <button type="button" class="btn btn-primary showSinglePayoutBtn" data-order-id="<?php echo $payoutId; ?>" data-bs-toggle="modal" data-bs-target="#payoutsModal">View</button>
                                                                 <!-- <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#payoutModal">
@@ -658,17 +660,40 @@ if ($_SESSION["userId"] <> "") {
                         var totalFees = response.fees_deduction_adjustment;
                         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 paymentType = response.transaction_logs[0].Type;
-                        // var transDate = response.transaction_logs[0].Transaction + " " + date;
-                        // var transGrossAmt = response.transaction_logs[0].Gross + " " + amount;
-                        var transFee = response.transaction_logs[0].Fee;
-                        // var transNetAmt = response.transaction_logs[0].Net + " " + amount;
-                        var transDesc = response.transaction_logs[0].Description;
+                        // var paymentType = response.transaction_logs[0].Type;
+                        // // var transDate = response.transaction_logs[0].Transaction + " " + date;
+                        // // var transGrossAmt = response.transaction_logs[0].Gross + " " + amount;
+                        // var transFee = response.transaction_logs[0].Fee;
+                        // // var transNetAmt = response.transaction_logs[0].Net + " " + amount;
+                        // var transDesc = response.transaction_logs[0].Description;
+                        var transactionLogsHtml = ''; // Initialize empty string to store HTML for transaction logs
+                        // Inside the success callback function
+                        var transactionLogsHtml = ''; // Initialize empty string to store HTML for transaction logs
+                        response.transaction_logs.forEach(function(log) {
+                            var paymentType = log.Type; // Assuming Transaction field holds the date
+                            var grossAmount = log.Gross; // Assuming Gross field holds the gross amount
+                            var transFee = log.Fee;
+                            var netAmount = log.Net;
+                            var transDesc = log.Description;
+
+                            // Append HTML for current transaction log to the transactionLogsHtml string
+                            transactionLogsHtml += `
+                                <tr>
+                                    <td>${paymentType}</td>
+                                    <td>December 08, 2024</td>
+                                    <td>₱ Wala muna</td>
+                                    <td>- ₱ ${transFee}</td>
+                                    <td>₱ Wala Muna</td>
+                                    <td>${transDesc}</td>
+                                </tr>`;
+                        });
+
 
                         // Populate data dynamically using the response
                         var payoutDetailsHtml = `                    
@@ -735,12 +760,7 @@ if ($_SESSION["userId"] <> "") {
                                                 </tr>
                                             </thead>
                                             <tbody>
-                                                <td> ${paymentType} </td>
-                                                <td> December 08, 2024 </td>
-                                                <td> ₱ 350</td>
-                                                <td> - ₱ ${transFee}</td>
-                                                <td> ₱ 300</td>
-                                                <td> ${transDesc} </td>
+                                            ${transactionLogsHtml} <!-- Insert transaction logs HTML here -->
                                             </tbody>
                                         </table>
                                     </div>

From ecf89b070ffe7d00740f38aea96935ac5b3b553e Mon Sep 17 00:00:00 2001
From: jouls <jl.superalis@gmail.com>
Date: Tue, 26 Mar 2024 09:22:33 +0800
Subject: [PATCH 06/11] Minor changes on payout details

---
 functions.php      |   6 ++-
 vendor-payouts.php | 111 +++++----------------------------------------
 2 files changed, 16 insertions(+), 101 deletions(-)

diff --git a/functions.php b/functions.php
index 5748d5f..19c5c5d 100644
--- a/functions.php
+++ b/functions.php
@@ -1241,7 +1241,7 @@ function simpleVendorsWithProducts()
   }
 } */
 
-function getVendorbyId($id)
+function getVendorbyId($id, $token)
 {
   $url = "https://" . $_SESSION["data_endpoint"] . "/api/v1/vendors/$id";
   $curl = curl_init();
@@ -1256,7 +1256,9 @@ function getVendorbyId($id)
     CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
     CURLOPT_CUSTOMREQUEST => 'GET',
     CURLOPT_HTTPHEADER => array(
-      'X-Api-Key: {{apiKey}}'
+      'X-Api-Key: {{apiKey}}',
+      'Content-Type: application/json',
+      'Authorization: Bearer ' . $token
     ),
   ));
   $response = curl_exec($curl);
diff --git a/vendor-payouts.php b/vendor-payouts.php
index ceaf2c0..5261c75 100644
--- a/vendor-payouts.php
+++ b/vendor-payouts.php
@@ -156,14 +156,19 @@ if ($_SESSION["userId"] <> "") {
                                                         </strong>
                                                     </div>
                                                 </h4>
-                                                <div class="text-sm mt-3">
+                                                <!-- <div class="text-sm mt-3">
                                                     Payout Generation: Tue, Mar 19, 2024
                                                 </div>
                                                 <div class="text-sm">
                                                     Receive Payout on or before: Wed, Mar 20, 2024
-                                                </div>
+                                                </div> -->
                                                 <div class="text-sm">
-                                                    Receipient: Philippine National Bank (PNB) Account ending in 6685
+                                                    <?php $vendorResponse = getVendorbyId( $vendorId, $authToken);
+                                                    $vendorInformation = json_decode($vendorResponse, true);
+                                                    $bankAccountNumber = $vendorInformation['bank_acount_details'][0]['bank_account_number'];
+                                                    $bankNumEnding = substr($bankAccountNumber, -3);
+                                                    ?>
+                                                    Receipient: Philippine National Bank (PNB) Account ending in <?php echo $bankNumEnding?>
                                                 </div>
                                             </div>
                                         </div>
@@ -217,7 +222,7 @@ if ($_SESSION["userId"] <> "") {
                                                     Receive Payout on or before: Wed, Mar 26, 2024
                                                 </div>
                                                 <div class="text-sm">
-                                                    Receipient: Philippine National Bank (PNB) Account ending in 6685
+                                                    Receipient: Philippine National Bank (PNB) Account ending in <?php echo $bankNumEnding?>
                                                 </div>
                                             </div>
                                         </div>
@@ -243,7 +248,7 @@ if ($_SESSION["userId"] <> "") {
                                                 foreach ($vendorPayoutData as $x => $val) {
                                                     $vendorIdCheck = $val['vendor_details'][0]['vendor_id'];
                                                     $status = ucfirst(strtolower($val['status']));
-                                                    $payoutDate = date("F d, Y", strtotime($val['updatedAt']));
+                                                    $payoutDate = date("F d, Y", strtotime($val['createdAt']));
                                                     $payoutId = $val['_id'];
                                                     if ((empty($vendorIdCheck) == false) && ($vendorIdCheck == $vendorId) && ($status == "Deposited")) { ?>
                                                         <tr>
@@ -306,98 +311,6 @@ if ($_SESSION["userId"] <> "") {
         </div>
     </div>
 
-    <!-- <div class="modal fade" id="payoutModal" tabindex="-1" aria-labelledby="payoutModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-xl" style="min-width: 90%;">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title fs-5" id="payoutModalLabel">Payout ID: po123034923482934</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <div class="container-fluid">
-                        <div class="row">
-                            <div class="col-md-7 mb-4">
-                                <div class="d-flex flex-column">
-                                    <div class="d-flex justify-content-between p-2">
-                                        <div>
-                                            <h6><strong>Payout Information</strong></h6>
-                                        </div>
-
-                                        <button class="fw-bold border border-success border-2 btn-outline-success btn-sm" disabled>DEPOSITED</button>
-                                    </div>
-                                    <div class="d-flex justify-content-between p-2">
-                                        <div class="fw-bold">Gross Amount</div>
-                                        <div>₱ 1,150.00</div>
-                                    </div>
-                                    <div class="d-flex justify-content-between p-2" style="border-bottom: 1px solid #000;">
-                                        <div class="fw-bold"> Fees, Deductions, Adjustments
-
-                                        </div>
-                                        <div>- ₱ 35.00</div>
-                                    </div>
-                                    <div class="d-flex justify-content-between p-2">
-                                        <div class="fw-bold"> Net Amount</div>
-                                        <div>- ₱ 1125.00</div>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="col-md-5 mb-4">
-                                <div class="d-flex flex-column" style="border-bottom: 1px solid #000;">
-                                    <div class="d-flex justify-content-between p-2">
-                                        <h6><strong>Bank Information</strong></h6>
-                                    </div>
-                                    <div class="d-flex justify-content-between p-2">
-                                        <div class="fw-bold">Bank</div>
-                                        <div>EastWest Bank</div>
-                                    </div>
-                                    <div class="d-flex justify-content-between p-2">
-                                        <div class="fw-bold">Account Name</div>
-                                        <div>Juan De La Cruz</div>
-                                    </div>
-                                    <div class="d-flex justify-content-between p-2">
-                                        <div class="fw-bold">Account Number</div>
-                                        <div>Ending in 6618</div>
-                                    </div>
-
-                                </div>
-                            </div>
-                            <div class="col-12">
-                                <div class="mt-5">
-                                    <h6><strong>Transaction Logs</strong></h6>
-                                    <div class="table-responsive">
-                                        <table id="example" class="table ec-table">
-                                            <thead>
-                                                <tr>
-                                                    <th>Type</th>
-                                                    <th>Transaction Date</th>
-                                                    <th>Gross Amount</th>
-                                                    <th>Fee</th>
-                                                    <th>Net Amount</th>
-                                                    <th>Description</th>
-
-                                                </tr>
-                                            </thead>
-                                            <tbody>
-                                                <td> Payment </td>
-                                                <td> December 1, 2020, 10:00 PM </td>
-                                                <td> ₱ 150.OO </td>
-                                                <td> - ₱ 5.00 </td>
-                                                <td> ₱ 145.00 </td>
-                                                <td> FOURFORTY - 175 </td>
-                                            </tbody>
-                                        </table>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Confirm</button>
-                </div>
-            </div>
-        </div>
-    </div> -->
     <!-- End Vendor setting section -->
 
     <!-- Footer Start -->
@@ -686,7 +599,7 @@ if ($_SESSION["userId"] <> "") {
                             transactionLogsHtml += `
                                 <tr>
                                     <td>${paymentType}</td>
-                                    <td>December 08, 2024</td>
+                                    <td>Wala Muna</td>
                                     <td>₱ Wala muna</td>
                                     <td>- ₱ ${transFee}</td>
                                     <td>₱ Wala Muna</td>
@@ -715,7 +628,7 @@ if ($_SESSION["userId"] <> "") {
                                         <div class="fw-bold"> Fees, Deductions, Adjustments
 
                                         </div>
-                                        <div>- ₱ ${totalFees}</div>
+                                        <div> - ${totalFees}</div>
                                     </div>
                                     <div class="d-flex justify-content-between p-2">
                                         <div class="fw-bold"> Net Amount</div>

From d941237b308e7995e47fc54656cecc9deb338837 Mon Sep 17 00:00:00 2001
From: jouls <jl.superalis@gmail.com>
Date: Tue, 26 Mar 2024 10:10:44 +0800
Subject: [PATCH 07/11] Changes on auth token in vendor payouts

---
 functions.php      |  6 ++----
 vendor-payouts.php | 48 ++++++++++++++++++++++++++++++----------------
 2 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/functions.php b/functions.php
index 41d67cc..dbfd39d 100644
--- a/functions.php
+++ b/functions.php
@@ -1271,7 +1271,7 @@ function simpleVendorsWithProducts()
   }
 } */
 
-function getVendorbyId($id, $token)
+function getVendorbyId($id)
 {
   $url = "https://" . $_SESSION["data_endpoint"] . "/api/v1/vendors/$id";
   $curl = curl_init();
@@ -1286,9 +1286,7 @@ function getVendorbyId($id, $token)
     CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
     CURLOPT_CUSTOMREQUEST => 'GET',
     CURLOPT_HTTPHEADER => array(
-      'X-Api-Key: {{apiKey}}',
-      'Content-Type: application/json',
-      'Authorization: Bearer ' . $token
+      'X-Api-Key: {{apiKey}}'
     ),
   ));
   $response = curl_exec($curl);
diff --git a/vendor-payouts.php b/vendor-payouts.php
index 5261c75..43b27ad 100644
--- a/vendor-payouts.php
+++ b/vendor-payouts.php
@@ -3,25 +3,41 @@ include "functions.php";
 
 if ($_SESSION["userId"] <> "") {
     $_SESSION["isLoggedIn"] = true;
-    // $customer_data = getCustomerbyLoginId($_SESSION["userId"]);
-    $vendorLoginId = searchVendorbyLoginId($_SESSION["userId"]);
-    $vendorLoginIdjson = json_decode($vendorLoginId, true);
-    if (isset($vendorLoginIdjson['results'][0])) {
-        $vendorData = $vendorLoginIdjson['results'][0];
-        $vendorId = $vendorData['_id'];
-        $_SESSION["LoggedInVendorId"] = $vendorId;
-    }
-    // $vendor= getVendorbyId($vendorLoginIdjson['results'][0]['_id']);
-    // // var_dump($vendor);
-    // $array = json_decode($vendor,true);
-    // var_dump($array);
-    $authToken = $_SESSION['token'];
-    $response = getAllPayout($authToken);
-    $vendorPayoutData = json_decode($response, true);
 } else {
     $_SESSION["isLoggedIn"] = false;
     header("location: login.php");
 }
+
+// $customer_data = getCustomerbyLoginId($_SESSION["userId"]);
+$vendorLoginId = searchVendorbyLoginId($_SESSION["userId"]);
+$vendorLoginIdjson = json_decode($vendorLoginId, true);
+if (isset($vendorLoginIdjson['results'][0])) {
+    $vendorData = $vendorLoginIdjson['results'][0];
+    $vendorId = $vendorData['_id'];
+    $_SESSION["LoggedInVendorId"] = $vendorId;
+}
+
+$token = $_SESSION["token"];
+
+$token_parts = explode(".", $token);
+$token_payload = base64_decode($token_parts[1]);
+$token_data = json_decode($token_payload);
+
+$expiration_time = $token_data->exp;
+$issued_at_time = $token_data->iat;
+
+$renewal_time = $issued_at_time + 3300; 
+
+
+if (time() >= $renewal_time) {
+    $token = loginRenew($_SESSION["email"], $_SESSION["password"], $token);
+    $_SESSION["token"] = $token;
+}
+
+$authToken = $_SESSION['token'];
+$response = getAllPayout($authToken);
+$vendorPayoutData = json_decode($response, true);
+
 ?>
 <!DOCTYPE html>
 <html lang="en">
@@ -163,7 +179,7 @@ if ($_SESSION["userId"] <> "") {
                                                     Receive Payout on or before: Wed, Mar 20, 2024
                                                 </div> -->
                                                 <div class="text-sm">
-                                                    <?php $vendorResponse = getVendorbyId( $vendorId, $authToken);
+                                                    <?php $vendorResponse = getVendorbyId($vendorId);
                                                     $vendorInformation = json_decode($vendorResponse, true);
                                                     $bankAccountNumber = $vendorInformation['bank_acount_details'][0]['bank_account_number'];
                                                     $bankNumEnding = substr($bankAccountNumber, -3);

From 957b1f224904d05fd16cbc75f9b67e4bf4f4bb2e Mon Sep 17 00:00:00 2001
From: jouls <jl.superalis@gmail.com>
Date: Tue, 26 Mar 2024 11:46:03 +0800
Subject: [PATCH 08/11] Added Pagination on payouts table

---
 vendor-payouts.php | 74 ++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 72 insertions(+), 2 deletions(-)

diff --git a/vendor-payouts.php b/vendor-payouts.php
index 43b27ad..bc8ff57 100644
--- a/vendor-payouts.php
+++ b/vendor-payouts.php
@@ -78,6 +78,23 @@ $vendorPayoutData = json_decode($response, true);
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@latest/dist/css/select2.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/select2@latest/dist/js/select2.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <style>
+        #pagination {
+            display: flex;
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            justify-content: center;
+        }
+
+        #pagination a {
+            color: #333;
+            text-decoration: none;
+            padding: 5px 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+    </style>
 </head>
 
 <body class="shop_page">
@@ -259,14 +276,16 @@ $vendorPayoutData = json_decode($response, true);
 
                                                 </tr>
                                             </thead>
-                                            <tbody>
+                                            <tbody id='payoutsTableContent'>
                                                 <?php
+                                                $payoutsCount = 0;
                                                 foreach ($vendorPayoutData as $x => $val) {
                                                     $vendorIdCheck = $val['vendor_details'][0]['vendor_id'];
                                                     $status = ucfirst(strtolower($val['status']));
                                                     $payoutDate = date("F d, Y", strtotime($val['createdAt']));
                                                     $payoutId = $val['_id'];
-                                                    if ((empty($vendorIdCheck) == false) && ($vendorIdCheck == $vendorId) && ($status == "Deposited")) { ?>
+                                                    if ((empty($vendorIdCheck) == false) && ($vendorIdCheck == $vendorId) && ($status == "Deposited")) { 
+                                                        $payoutsCount++; ?>
                                                         <tr>
                                                             <td> <?php echo "₱ " . $val['net_amount'] ?> </td>
                                                             <?php if (empty($val['bank_information'][0]['bank_name']) == false) {
@@ -298,6 +317,7 @@ $vendorPayoutData = json_decode($response, true);
                                             </tbody>
                                         </table>
                                     </div>
+                                    <div id='pagination'></div>
                                 </div>
                             </div>
                         </div>
@@ -704,6 +724,56 @@ $vendorPayoutData = json_decode($response, true);
             });
         });
     </script>
+    <script>
+        const itemsPerPage = 8;
+        const totalItems = <?php echo $payoutsCount; ?>
+        const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+        
+        function showPage(page) {
+            const startIndex = (page - 1) * itemsPerPage;
+            const endIndex = startIndex + itemsPerPage;
+            const tableRows = document.querySelectorAll('#payoutsTableContent tr');
+            
+            // for pagination button
+            const pager = document.querySelectorAll('.page-btn')
+            pager.forEach((row, index) => {
+                if (index!==page-1) {
+                    row.style.backgroundColor="white";
+                    row.style.color="black";
+                } else {
+                    row.style.backgroundColor="#007bff";
+                    row.style.color="white";
+                }
+            });
+
+            
+            tableRows.forEach((row, index) => {
+                if (index >= startIndex && index < endIndex) {
+                    row.style.display = 'table-row';
+                } else {
+                    row.style.display = 'none';
+                }
+            });
+        }
+
+        function createPagination() {
+            const paginationContainer = document.getElementById('pagination');
+
+            for (let i = 1; i <= totalPages; i++) {
+                // created a tag
+                const pageButton = document.createElement('a');
+                // created class for a tag
+                pageButton.className = "page-btn page-" + i
+                pageButton.textContent = i;
+                pageButton.addEventListener('click', () => showPage(i));
+                paginationContainer.appendChild(pageButton);
+            }
+        }
+
+        createPagination();
+        showPage(1); // Show the first page by default
+    </script>
 
 
 

From c3523bfddc86621ca2b03583189310362cdfbc39 Mon Sep 17 00:00:00 2001
From: jouls <jl.superalis@gmail.com>
Date: Tue, 26 Mar 2024 13:53:58 +0800
Subject: [PATCH 09/11] Added Data Table Responsiveness

---
 vendor-payouts.php | 68 ++++++++--------------------------------------
 1 file changed, 12 insertions(+), 56 deletions(-)

diff --git a/vendor-payouts.php b/vendor-payouts.php
index bc8ff57..2256f05 100644
--- a/vendor-payouts.php
+++ b/vendor-payouts.php
@@ -72,6 +72,9 @@ $vendorPayoutData = json_decode($response, true);
     <link rel="stylesheet" href="assets/css/style.css" />
     <link rel="stylesheet" href="assets/css/style2.css" />
     <link rel="stylesheet" href="assets/css/responsive.css" />
+    <link href="https://cdn.datatables.net/v/bs5/dt-2.0.3/r-3.0.0/sp-2.3.0/datatables.min.css" rel="stylesheet">
+ 
+
 
     <!-- Background css -->
     <link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
@@ -263,8 +266,8 @@ $vendorPayoutData = json_decode($response, true);
                                 </div>
                                 <div class="col-md-12 mt-3">
                                     <h5><strong>Payout History</strong></h5>
-                                    <div class="table-responsive">
-                                        <table id="example" class="table ec-table">
+                                    <div class="table-responsive p-4">
+                                        <table id='payoutsTableContent' class="table ec-table">
                                             <thead>
                                                 <tr>
                                                     <th scope="col">Amount</th>
@@ -276,16 +279,14 @@ $vendorPayoutData = json_decode($response, true);
 
                                                 </tr>
                                             </thead>
-                                            <tbody id='payoutsTableContent'>
+                                            <tbody >
                                                 <?php
-                                                $payoutsCount = 0;
                                                 foreach ($vendorPayoutData as $x => $val) {
                                                     $vendorIdCheck = $val['vendor_details'][0]['vendor_id'];
                                                     $status = ucfirst(strtolower($val['status']));
                                                     $payoutDate = date("F d, Y", strtotime($val['createdAt']));
                                                     $payoutId = $val['_id'];
-                                                    if ((empty($vendorIdCheck) == false) && ($vendorIdCheck == $vendorId) && ($status == "Deposited")) { 
-                                                        $payoutsCount++; ?>
+                                                    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) {
@@ -580,6 +581,8 @@ $vendorPayoutData = json_decode($response, true);
     <script src="assets/js/vendor/jquery.magnific-popup.min.js"></script>
     <script src="assets/js/plugins/jquery.sticky-sidebar.js"></script>
     <script src="assets/js/plugins/nouislider.js"></script>
+    <script src="https://cdn.datatables.net/v/bs5/dt-2.0.3/r-3.0.0/sp-2.3.0/datatables.min.js"></script>
+	
     <!-- <script>
         const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
         const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
@@ -725,58 +728,11 @@ $vendorPayoutData = json_decode($response, true);
         });
     </script>
     <script>
-        const itemsPerPage = 8;
-        const totalItems = <?php echo $payoutsCount; ?>
-        const totalPages = Math.ceil(totalItems / itemsPerPage);
-
-        
-        function showPage(page) {
-            const startIndex = (page - 1) * itemsPerPage;
-            const endIndex = startIndex + itemsPerPage;
-            const tableRows = document.querySelectorAll('#payoutsTableContent tr');
-            
-            // for pagination button
-            const pager = document.querySelectorAll('.page-btn')
-            pager.forEach((row, index) => {
-                if (index!==page-1) {
-                    row.style.backgroundColor="white";
-                    row.style.color="black";
-                } else {
-                    row.style.backgroundColor="#007bff";
-                    row.style.color="white";
-                }
-            });
-
-            
-            tableRows.forEach((row, index) => {
-                if (index >= startIndex && index < endIndex) {
-                    row.style.display = 'table-row';
-                } else {
-                    row.style.display = 'none';
-                }
-            });
-        }
-
-        function createPagination() {
-            const paginationContainer = document.getElementById('pagination');
-
-            for (let i = 1; i <= totalPages; i++) {
-                // created a tag
-                const pageButton = document.createElement('a');
-                // created class for a tag
-                pageButton.className = "page-btn page-" + i
-                pageButton.textContent = i;
-                pageButton.addEventListener('click', () => showPage(i));
-                paginationContainer.appendChild(pageButton);
-            }
-        }
-
-        createPagination();
-        showPage(1); // Show the first page by default
+   $(document).ready( function () {
+    $('#payoutsTableContent').DataTable();
+    } );
     </script>
 
-
-
 </body>
 
 </html>
\ No newline at end of file

From 41e64df6695d2261da197f60667acad91602535a Mon Sep 17 00:00:00 2001
From: jouls <jl.superalis@gmail.com>
Date: Tue, 26 Mar 2024 14:36:37 +0800
Subject: [PATCH 10/11] minor changes on payout table design

---
 vendor-payouts.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/vendor-payouts.php b/vendor-payouts.php
index 2256f05..571c307 100644
--- a/vendor-payouts.php
+++ b/vendor-payouts.php
@@ -265,8 +265,8 @@ $vendorPayoutData = json_decode($response, true);
                                     </div>
                                 </div>
                                 <div class="col-md-12 mt-3">
-                                    <h5><strong>Payout History</strong></h5>
-                                    <div class="table-responsive p-4">
+                                    <h5 class='m-0'><strong>Payout History</strong></h5>
+                                    <div class="table-responsive px-4">
                                         <table id='payoutsTableContent' class="table ec-table">
                                             <thead>
                                                 <tr>
@@ -279,7 +279,7 @@ $vendorPayoutData = json_decode($response, true);
 
                                                 </tr>
                                             </thead>
-                                            <tbody >
+                                            <tbody class='table-group-divider'>
                                                 <?php
                                                 foreach ($vendorPayoutData as $x => $val) {
                                                     $vendorIdCheck = $val['vendor_details'][0]['vendor_id'];

From 844ef1ff6f9a427173323046a48febeeb5c21a45 Mon Sep 17 00:00:00 2001
From: jouls <jl.superalis@gmail.com>
Date: Tue, 26 Mar 2024 16:21:36 +0800
Subject: [PATCH 11/11] Added Dynamic Upcoming Payout Amount

---
 vendor-payouts.php | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/vendor-payouts.php b/vendor-payouts.php
index 571c307..5b84f9c 100644
--- a/vendor-payouts.php
+++ b/vendor-payouts.php
@@ -187,8 +187,25 @@ $vendorPayoutData = json_decode($response, true);
                                             <div class="row">
                                                 <h4 style="color: #444;">
                                                     <div class="d-flex align-items-center">
+                                                        <?php 
+                                                        $response = getOrderbyVendorId($vendorId);
+                                                        $upcomingPayout = json_decode($response, true);
+                                                        $payoutSum = 0;
+
+                                                        foreach ($upcomingPayout as $x => $val) {    
+                                                            $paymentStatus = strtolower($val['payment']['status']);
+                                                            $orderStatus = $val['status'];
+                                                            $payoutStatus = empty($val['payout_status']);
+                                                            if(( $paymentStatus == "paid") && ( $orderStatus == "COMPLETED") && ($payoutStatus == true)){
+                                                                $orderAmount = $val['total_amount'];
+                                                                $payoutSum += $orderAmount;
+                                                            }
+                                                        }
+
+                                                        $finalPayoutSum = number_format($payoutSum, 2, '.', ',');
+                                                        ?>
                                                         <strong>
-                                                            ₱ 0.00
+                                                            ₱ <?php echo $finalPayoutSum ?>
                                                         </strong>
                                                     </div>
                                                 </h4>
@@ -199,7 +216,8 @@ $vendorPayoutData = json_decode($response, true);
                                                     Receive Payout on or before: Wed, Mar 20, 2024
                                                 </div> -->
                                                 <div class="text-sm">
-                                                    <?php $vendorResponse = getVendorbyId($vendorId);
+                                                    <?php 
+                                                    $vendorResponse = getVendorbyId($vendorId);
                                                     $vendorInformation = json_decode($vendorResponse, true);
                                                     $bankAccountNumber = $vendorInformation['bank_acount_details'][0]['bank_account_number'];
                                                     $bankNumEnding = substr($bankAccountNumber, -3);