diff --git a/app/Classes/General/Eloquent/Filters/DoesNotHavePaymentStatusIn.php b/app/Classes/General/Eloquent/Filters/DoesNotHavePaymentStatusIn.php
new file mode 100644
index 00000000..f8e9f214
--- /dev/null
+++ b/app/Classes/General/Eloquent/Filters/DoesNotHavePaymentStatusIn.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Classes\General\Eloquent\Filters;
+
+use App\Classes\ValueObjects\Constants\TransactionType;
+use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Builder;
+
+class DoesNotHavePaymentStatusIn implements Filter
+{
+    /**
+     * @param Builder $builder
+     * @param $value
+     * @return mixed
+     */
+    public static function apply(Builder $builder, $value)
+    {
+        return $builder->whereDoesntHave('transactions', function (Builder $query) use($value) {
+            $query->where('type', TransactionType::PAYMENT)->whereIn('status', $value);
+        });
+    }
+}
\ No newline at end of file
diff --git a/app/Classes/General/Eloquent/Filters/HavePaymentStatusNotIn.php b/app/Classes/General/Eloquent/Filters/HavePaymentStatusNotIn.php
new file mode 100644
index 00000000..0b989f73
--- /dev/null
+++ b/app/Classes/General/Eloquent/Filters/HavePaymentStatusNotIn.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Classes\General\Eloquent\Filters;
+
+use App\Classes\ValueObjects\Constants\TransactionType;
+use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Builder;
+
+class HavePaymentStatusNotIn implements Filter
+{
+    /**
+     * @param Builder $builder
+     * @param $value
+     * @return mixed
+     */
+    public static function apply(Builder $builder, $value)
+    {
+        return $builder->whereHas('transactions', function (Builder $query) use($value) {
+            $query->where('type', TransactionType::PAYMENT)->whereNotIn('status', $value);
+        });
+    }
+}
\ No newline at end of file
diff --git a/app/Classes/Modules/Billplzs/ControllersLogic/CallbackBillplzLogic.php b/app/Classes/Modules/Billplzs/ControllersLogic/CallbackBillplzLogic.php
index 1cca14f6..f674e67f 100644
--- a/app/Classes/Modules/Billplzs/ControllersLogic/CallbackBillplzLogic.php
+++ b/app/Classes/Modules/Billplzs/ControllersLogic/CallbackBillplzLogic.php
@@ -105,9 +105,14 @@ class CallbackBillplzLogic
         $token = Auth::fromUser(User::find(1));
         $request->headers->set('Authorization', 'Bearer '.$token);
 
+        // check if is wallet top up
+        if($transaction->owner instanceof Wallet && $transaction->status !== ApprovalStatus::APPROVED) {
+            $this->updatesWalletBalance->execute($transaction->owner, $transaction->amount);
+        }
+        
         $this->updatesTransactionStatus->execute($transaction, $status);
 
-        if(($invoice->amount - $transaction->amount) < 0.01) {
+        if(($invoice->amount - $transaction->amount) < 0.01 && !$transaction->owner instanceof Wallet) {
             $this->updatesTransactionStatus->execute($invoice, ApprovalStatus::COMPLETED);
 
             $packingList->status = ApprovalStatus::APPROVED;
diff --git a/resources/assets/vue/components/companies/sections/CustomerPaymentBillingSectionComponent.vue b/resources/assets/vue/components/companies/sections/CustomerPaymentBillingSectionComponent.vue
index 4ebdffaa..b594b3a5 100644
--- a/resources/assets/vue/components/companies/sections/CustomerPaymentBillingSectionComponent.vue
+++ b/resources/assets/vue/components/companies/sections/CustomerPaymentBillingSectionComponent.vue
@@ -27,6 +27,22 @@
                                                         </div>
                                                     </div>
                                                 </div>
+                                                <div class="col p-t-20 p-b-20 bg-master-lighter tabButton" tab-name="paymentInProgress">
+                                                    <div class="row justify-content-center m-b-5">
+                                                        <div class="col-auto">
+                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                                width="35" height="35"
+                                                                viewBox="0 0 172 172"
+                                                                style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#000000"><path d="M39.81699,21.5l-18.31699,22.89414v106.10586h129v-2.15v-103.95586l-18.31699,-22.89414zM41.88301,25.8h88.23398l13.75664,17.2h-47.12363v2.15c0,5.96338 -4.78662,10.75 -10.75,10.75c-5.96338,0 -10.75,-4.78662 -10.75,-10.75v-2.15h-47.12363zM25.8,47.3h45.58672c1.08865,7.23076 7.08802,12.9 14.61328,12.9c7.52526,0 13.52463,-5.66924 14.61328,-12.9h45.58672v98.9h-120.4zM86,68.8c-15.41089,0 -27.95,12.53911 -27.95,27.95c0,15.41089 12.53911,27.95 27.95,27.95c15.41089,0 27.95,-12.53911 27.95,-27.95c0,-15.41089 -12.53911,-27.95 -27.95,-27.95zM86,73.1c13.087,0 23.65,10.563 23.65,23.65c0,13.087 -10.563,23.65 -23.65,23.65c-13.087,0 -23.65,-10.563 -23.65,-23.65c0,-13.087 10.563,-23.65 23.65,-23.65zM85.96641,77.37061c-1.18576,0.01854 -2.13264,0.9936 -2.11641,2.17939v16.125l-7.73916,5.80332c-0.95086,0.71198 -1.1445,2.05998 -0.43252,3.01084c0.71198,0.95086 2.05998,1.1445 3.01084,0.43252l9.46084,-7.09668v-18.275c0.00796,-0.58115 -0.21968,-1.14076 -0.63105,-1.55134c-0.41137,-0.41057 -0.97142,-0.63714 -1.55255,-0.62806zM38.7,135.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM47.3,135.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM55.9,135.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM64.5,135.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM73.1,135.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM81.7,135.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM90.3,135.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM98.9,135.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM107.5,135.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM116.1,135.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM124.7,135.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM133.3,135.45c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15z"></path></g></g>
+                                                            </svg>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row">
+                                                        <div class="col">
+                                                            <div class="fs-12 m-t-5 all-caps">Payment In Progress</div>
+                                                        </div>
+                                                    </div>
+                                                </div>
                                                 <div class="col p-t-20 p-b-20 bg-master-lighter tabButton" tab-name="paidInvoice">
                                                     <div class="row justify-content-center m-b-5">
                                                         <div class="col-auto">
@@ -52,12 +68,17 @@
                                 <div class="col bg-master-lightest p-1 p-sm-4">
                                     <div class="row tabsContainer tabContent" tab-name="pendingPayment">
                                         <div class="col">
-                                            <customer-payment-billing-inner-component section="customerPendingPaymentInvoiceComponent" :company_module_id="company_module_id" :options="{'per_page': 10, order_by: {column: 'id', DESC: true}, 'status_in': [2], 'receiver': company_module_id, 'type': 1}"></customer-payment-billing-inner-component>
+                                            <customer-payment-billing-inner-component section="customerPendingPaymentInvoiceComponent" :company_module_id="company_module_id" :options="{'per_page': 10, order_by: {column: 'id', DESC: true}, 'status_in': [2], 'receiver': company_module_id, 'type': 1, does_not_have_payment_status_in: [0,1]}"></customer-payment-billing-inner-component>
+                                        </div>
+                                    </div>
+                                    <div class="row tabsContainer tabContent hide" tab-name="paymentInProgress">
+                                        <div class="col">
+                                            <customer-payment-billing-inner-component section="customerPaymentInProgressInvoiceComponent" :company_module_id="company_module_id" :options="{'per_page': 10, order_by: {column: 'id', DESC: true}, 'status_in': [2], 'receiver': company_module_id, 'type': 1, have_payment_status_not_in: [2,3], order_by: {column: 'updated_at', DESC: true}}"></customer-payment-billing-inner-component>
                                         </div>
                                     </div>
                                     <div class="row tabsContainer tabContent hide" tab-name="paidInvoice">
                                         <div class="col">
-                                            <customer-payment-billing-inner-component section="customerPaidInvoiceComponent" :company_module_id="company_module_id" :options="{'per_page': 10, order_by: {column: 'id', DESC: true}, 'status_in': [3], 'receiver': company_module_id, 'type': 1}"></customer-payment-billing-inner-component>
+                                            <customer-payment-billing-inner-component section="customerPaidInvoiceComponent" :company_module_id="company_module_id" :options="{'per_page': 10, order_by: {column: 'id', DESC: true}, 'status_in': [3], 'receiver': company_module_id, 'type': 1, order_by: {column: 'updated_at', DESC: true}}"></customer-payment-billing-inner-component>
                                         </div>
                                     </div>
                                 </div>
diff --git a/resources/assets/vue/components/paymentsBilling/elements/PaymentsBillingComponents.vue b/resources/assets/vue/components/paymentsBilling/elements/PaymentsBillingComponents.vue
index b3c896b7..f00e8be4 100644
--- a/resources/assets/vue/components/paymentsBilling/elements/PaymentsBillingComponents.vue
+++ b/resources/assets/vue/components/paymentsBilling/elements/PaymentsBillingComponents.vue
@@ -23,6 +23,10 @@
                             <p class="no-margin fs-10 all-caps">Amount</p>
                             <div>MYR  {{ item.amount.toFixed(2) }}</div>
                         </div>
+                        <div class="col" v-if="section === 'customerPaidInvoiceComponent'">
+                            <p class="no-margin fs-10 all-caps">Payment Date</p>
+                            <div>{{ item.payment_history[item.payment_history.length-1].created_at }}</div>
+                        </div>
                         <div class="col-auto">
                             <div v-if="item.documents.length">
                                 <div v-for="file in item.documents[0].files" v-bind:key="file.id" class="col-auto no-padding">