From 2da9f773494534bc70c15ded21ca0eb9c83a728b Mon Sep 17 00:00:00 2001
From: jouls <jl.superalis@gmail.com>
Date: Thu, 2 May 2024 15:59:16 +0800
Subject: [PATCH 1/2] Improved data table and layout of vendouy payouts page

---
 vendor-payouts.php | 376 +++++++++++++++++++++++++--------------------
 1 file changed, 206 insertions(+), 170 deletions(-)

diff --git a/vendor-payouts.php b/vendor-payouts.php
index 6cf41e5..5fb5685 100644
--- a/vendor-payouts.php
+++ b/vendor-payouts.php
@@ -75,8 +75,11 @@ $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">
- 
+
+    <link rel="stylesheet" href="https://cdn.metroui.org.ua/current/metro.css">
+    <script src="https://cdn.metroui.org.ua/current/metro.js"></script>
 
 
     <!-- Background css -->
@@ -84,7 +87,6 @@ $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>
-
     <script>
         function renewToken() {
                 var xhr = new XMLHttpRequest();
@@ -159,183 +161,221 @@ $vendorPayoutData = json_decode($response, true);
                         <!-- Sidebar Category Block -->
                         <div class="ec-sidebar-block">
                             <div class="ec-vendor-block">
+                                <!-- 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>
+                                <?php } ?>
+                                <!-- <div class="ec-vendor-block-bg" style="background-image: url(<?php #echo $vendorData['vendor_banner'] ?>) !important;"></div> -->
+                                <div class="ec-vendor-block-detail">
+                                    <!-- <img loading="lazy" class="v-img" src=<?php #echo $vendorData['vendor_image'] ?> alt="vendor image"> -->
+                                    <!-- 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">
+                                    <?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">
+                                    <?php } ?>
+                                    <h5 class="name"><?php echo $vendorData['user_login'] ?></h5>
+                                </div>
+                                <!-- <div class="ec-vendor-block-items">
+                                    
+                                    <ul>
+                                        <li><a href="vendor-dashboard.php">Dashboard</a></li>
+                                        <li><a onclick="addProduct();" href="">Upload Product</a></li>
+                                        <li><a href="vendor-settings.php">Settings (Edit)</a></li>
+                                    </ul>
+                                </div> -->
                                 <?php include "vendor-user-tabs.php" ?>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="ec-shop-rightside col-lg-9 col-md-12">
-                    <div class="ec-vendor-dashboard-card ec-vendor-setting-card">
-                        <div class="ec-vendor-card-body">
-                            <div class="row">
-
-                                <div class="col-md-12 mb-5">
-                                    <div class="panel panel-primary">
-                                        <div class="panel-heading">
-                                            <h5 class="panel-title"><strong>Upcoming Payout</strong></h5>
-                                        </div>
-                                        <div class="panel-body ">
-                                            <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 = strtolower($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>
-                                                            ₱ <?php echo $finalPayoutSum ?>
-                                                        </strong>
-                                                    </div>
-                                                </h4>
-                                                <!-- <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 class="text-sm">
-                                                    <?php 
-                                                    $vendorResponse = getVendorbyId($vendorId);
-                                                    $vendorInformation = json_decode($vendorResponse, true);
-                                                    $bankAccountNumber = $vendorInformation['bank_acount_details'][0]['bank_account_number'];
-                                                    $bankDetails = $vendorInformation['bank_acount_details'];
-                                                    foreach ($bankDetails as $details) {
-                                                        if ($details['bank_payout'] === true) {
-                                                            $bankName = $details['bank_name'];
-                                                            $bankAccountNumber = $details['bank_account_number'];
-                                                        }
-                                                    }
-                                                    $bankNumEnding = substr($bankAccountNumber, -3);
-                                                    ?>
-                                                    Receipient: <?php echo $bankName; ?> Account ending in <?php echo $bankNumEnding?>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
+                    <div class="row">
+                        <div class="col-md-12">
+                            <div class="ec-vendor-dashboard-card">
+                                <div class="ec-vendor-card-header">
+                                    <h5><strong>Upcoming Payout</strong></h5>
                                 </div>
-                                <!-- ADDITIONAL PANELS FOR PAYOUTS FOR FUTURE USE, DO NOT REMOVE  -->
-                                <!-- <div class="col-md-4 mb-5">
-                                    <div class="panel panel-primary">
-                                        <div class="panel-heading">
-                                            <h5 class="panel-title"><strong>Payout Generation Schedule</strong></h5>
-                                        </div>
-                                        <div class="panel-body ">
-                                            <div class="row">
-                                                <h4 style="color: #444;">
-                                                    <div class="d-flex align-items-center">
-                                                        <i class="fi-rs-calendar mt-1 mr-3 "></i>
-                                                        <strong>
-                                                            Weekly
-                                                        </strong>
-                                                    </div>
-                                                </h4>
-                                                <div class="mt-3">
-                                                    <h6>
-                                                        <strong class="text-primary ">Every Tuesday</strong>
-                                                    </h6>
-                                                </div>
-                                                <div class="text-sm">
-                                                    Payouts that will fall on holiday will be processed the next banking day
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="col-md-4 mb-5">
-                                    <div class="panel panel-primary">
-                                        <div class="panel-heading">
-                                            <h5 class="panel-title"><strong>Next Payout</strong></h5>
-                                        </div>
-                                        <div class="panel-body ">
-                                            <div class="row">
-                                                <h4 style="color: #444;">
-                                                    <div class="d-flex align-items-center">
-                                                        <strong>
-                                                            ₱ 0.00
-                                                        </strong>
-                                                    </div>
-                                                </h4>
-                                                <- <div class="text-sm mt-3">
-                                                    Payout Generation: Tue, Mar 25, 2024
-                                                </div>
-                                                <div class="text-sm">
-                                                    Receive Payout on or before: Wed, Mar 26, 2024
-                                                </div> -
-                                                <div class="text-sm">
-                                                    Receipient: Philippine National Bank (PNB) Account ending in <php echo $bankNumEnding?>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div> -->
-                                <div class="col-md-12 mt-3">
-                                    <h5 class='m-0'><strong>Payout History</strong></h5>
-                                    <div class="table-responsive px-4">
-                                        <table id='payoutsTableContent' class="table ec-table">
-                                            <thead>
-                                                <tr>
-                                                    <th scope="col">Amount</th>
-                                                    <th scope="col">Bank</th>
-                                                    <th scope="col">Account Number</th>
-                                                    <th scope="col">Payout Generation</th>
-                                                    <th scope="col">Status</th>
-                                                    <th scope="col">Action</th>
+                                <div class="ec-vendor-card-body">
+                                    <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;
 
-                                                </tr>
-                                            </thead>
-                                            <tbody class='table-group-divider'>
-                                                <?php
-                                                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")) { ?>
-                                                        <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> <?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
+                                                foreach ($upcomingPayout as $x => $val) {    
+                                                    $paymentStatus = strtolower($val['payment']['status']);
+                                                    $orderStatus = strtolower($val['status']);
+                                                    $payoutStatus = empty($val['payout_status']);
+                                                    if(( $paymentStatus == "paid") && ( $orderStatus == "completed") && ($payoutStatus == true)){
+                                                        $orderAmount = $val['total_amount'];
+                                                        $payoutSum += $orderAmount;
                                                     }
-                                                } ?>
-                                            </tbody>
-                                        </table>
+                                                }
+
+                                                $finalPayoutSum = number_format($payoutSum, 2, '.', ',');
+                                                ?>
+                                                <strong>
+                                                    ₱ <?php echo $finalPayoutSum ?>
+                                                </strong>
+                                            </div>
+                                        </h4>
+                                        <!-- <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 class="text-sm">
+                                            <?php 
+                                            $vendorResponse = getVendorbyId($vendorId);
+                                            $vendorInformation = json_decode($vendorResponse, true);
+                                            $bankAccountNumber = $vendorInformation['bank_acount_details'][0]['bank_account_number'];
+                                            $bankDetails = $vendorInformation['bank_acount_details'];
+                                            foreach ($bankDetails as $details) {
+                                                if ($details['bank_payout'] === true) {
+                                                    $bankName = $details['bank_name'];
+                                                    $bankAccountNumber = $details['bank_account_number'];
+                                                }
+                                            }
+                                            $bankNumEnding = substr($bankAccountNumber, -3);
+                                            ?>
+                                            Receipient: <?php echo $bankName; ?> Account ending in <?php echo $bankNumEnding?>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
+                        <!-- ADDITIONAL PANELS FOR PAYOUTS FOR FUTURE USE, DO NOT REMOVE  -->
+                        <!-- <div class="col-md-12">
+                            <div class="ec-vendor-dashboard-card">
+                                <div class="ec-vendor-card-header">
+                                    <h5><strong>Payout Generation Schedule</strong></h5>
+                                </div>
+                                <div class="ec-vendor-card-body">
+                                    <div class="row">
+                                        <h4 style="color: #444;">
+                                            <div class="d-flex align-items-center">
+                                                <i class="fi-rs-calendar mt-1 mr-3 "></i>
+                                                <strong>
+                                                    Weekly
+                                                </strong>
+                                            </div>
+                                        </h4>
+                                        <div class="mt-3">
+                                            <h6>
+                                                <strong class="text-primary ">Every Tuesday</strong>
+                                            </h6>
+                                        </div>
+                                        <div class="text-sm">
+                                            Payouts that will fall on holiday will be processed the next banking day
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-12">
+                            <div class="ec-vendor-dashboard-card">
+                                <div class="ec-vendor-card-header">
+                                    <h5><strong>Next Payout</strong></h5>
+                                </div>
+                                <div class="ec-vendor-card-body">
+                                    <div class="row">
+                                        <h4 style="color: #444;">
+                                            <div class="d-flex align-items-center">
+                                                <strong>
+                                                    ₱ 0.00
+                                                </strong>
+                                            </div>
+                                        </h4>
+                                        <div class="text-sm mt-3">
+                                            Payout Generation: Tue, Mar 25, 2024
+                                        </div>
+                                        <div class="text-sm">
+                                            Receive Payout on or before: Wed, Mar 26, 2024
+                                        </div> 
+                                        <div class="text-sm">
+                                            Receipient: Philippine National Bank (PNB) Account ending in 123
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div> -->
                     </div>
+                    <div class="ec-vendor-dashboard-card space-bottom-30">
+                        <div class="ec-vendor-card-header">
+                            <h5>Payout History</h5>
+                        </div>
+                        <div class="ec-vendor-card-body">
+                            <div class="ec-vendor-card-table">
+                                <table  class="table ec-table"
+                                id="order-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>
+                                            <th data-sortable="true" scope="col">Bank</th>
+                                            <th data-sortable="true" scope="col">Account Number</th>
+                                            <th data-sortable="true" scope="col">Payout Generation</th>
+                                            <th data-sortable="true" scope="col">Status</th>
+                                            <th data-sortable="true" scope="col">Action</th>
+
+                                        </tr>
+                                    </thead>
+                                    <tbody class='table-group-divider'>
+                                        <?php
+                                        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")) { ?>
+                                                <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> <?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>
         </div>
@@ -595,6 +635,7 @@ $vendorPayoutData = json_decode($response, true);
     <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 src="https://cdn.metroui.org.ua/current/metro.js"></script> -->
 	
     <!-- <script>
         const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
@@ -744,11 +785,6 @@ $vendorPayoutData = json_decode($response, true);
             });
         });
     </script>
-    <script>
-   $(document).ready( function () {
-    $('#payoutsTableContent').DataTable();
-    } );
-    </script>
 
 </body>
 

From 4200c4e1559cd921830d999390e921ebf3340529 Mon Sep 17 00:00:00 2001
From: jouls <jl.superalis@gmail.com>
Date: Thu, 2 May 2024 17:22:39 +0800
Subject: [PATCH 2/2] minor fixes on stylings inside modal box

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

diff --git a/vendor-payouts.php b/vendor-payouts.php
index 5fb5685..3d21ab0 100644
--- a/vendor-payouts.php
+++ b/vendor-payouts.php
@@ -714,8 +714,9 @@ $vendorPayoutData = json_decode($response, true);
                                         <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>
+                                            <button disabled style="border: 2px solid #198754; color: #198754 !important; border-radius: 5px;">${payoutStatus}</button>
+                                        </div>
                                     </div>
                                     <div class="d-flex justify-content-between p-2">
                                         <div class="fw-bold">Gross Amount</div>
@@ -734,7 +735,7 @@ $vendorPayoutData = json_decode($response, true);
                                 </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 flex-column" >
                                     <div class="d-flex justify-content-between p-2">
                                         <h6><strong>Bank Information</strong></h6>
                                     </div>