diff --git a/app/Http/Controllers/Wallets/WalletReportController.php b/app/Http/Controllers/Wallets/WalletReportController.php
new file mode 100644
index 00000000..998bba53
--- /dev/null
+++ b/app/Http/Controllers/Wallets/WalletReportController.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Http\Controllers\Wallets;
+
+use App\Classes\ValueObjects\Response\ApiResponseObject;
+use App\Classes\ValueObjects\Constants\HttpStatus;
+use App\Classes\ValueObjects\Constants\TransactionType;
+use App\Models\Transaction;
+use App\Models\Wallet;
+
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+
+class WalletReportController
+{
+    public function walletsReport(Request $request): JsonResponse
+    {
+        return (new ApiResponseObject(
+            'fetch service report Successful',
+            '',
+            HttpStatus::OK_WITH_MESSAGE,
+            ['data' => [
+                'walletSum' => (float) Wallet::all()->sum('amount'),
+                'outgoingSum' =>  (float) Transaction::where('type', TransactionType::PAYMENT)->where('owner_type', Wallet::class)->sum('amount'),
+                'incomingSum' =>  (float) Transaction::whereIn('type', [TransactionType::TOP_UP, TransactionType::CREDIT_NOTE])->where('owner_type', Wallet::class)->sum('amount'),
+            ]]
+        ))->handler();
+    }
+}
diff --git a/resources/assets/vue/components/wallets/elements/WalletsComponent.vue b/resources/assets/vue/components/wallets/elements/WalletsComponent.vue
index 8f0daa9c..c37f0fba 100644
--- a/resources/assets/vue/components/wallets/elements/WalletsComponent.vue
+++ b/resources/assets/vue/components/wallets/elements/WalletsComponent.vue
@@ -1,122 +1,127 @@
 <template>
     <div class="row">
         <div class="col">
-            <div class="row">
-                <div class="col-12 p-0" style="width: 500px; height:350px">
-                    <canvas id="wallets-chart"></canvas>
-                </div>
-            </div>
-            <div class="row">
+            <loading-component v-if="isLoading"></loading-component>
+            <div class="row" v-if="!isLoading">
                 <div class="col">
-                    <div class="card no-border bg-success text-white widget-loader-bar m-b-10">
-                        <div class="container-xs-height full-height">
-                            <div class="row-xs-height">
-                                <div class="col-xs-height col-top">
-                                    <div class="card-header  top-left top-right">
-                                        <div class="card-title">
-                                            <span class="font-montserrat fs-11 all-caps">Total Amount</span>
+                    <div class="row">
+                        <div class="col-12 p-0" style="width: 500px; height:350px">
+                            <canvas id="wallets-chart"></canvas>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <div class="card no-border bg-success text-white widget-loader-bar m-b-10">
+                                <div class="container-xs-height full-height">
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-top">
+                                            <div class="card-header  top-left top-right">
+                                                <div class="card-title">
+                                                    <span class="font-montserrat fs-11 all-caps">Total Amount</span>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                            </div>
-                            <div class="row-xs-height">
-                                <div class="col-xs-height col-top">
-                                    <div class="p-l-20 p-t-50 p-b-40 p-r-20">
-                                        <h3 class="no-margin p-b-5 text-white">MYR 500,123</h3>
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-top">
+                                            <div class="p-l-20 p-t-50 p-b-40 p-r-20">
+                                                <h3 class="no-margin p-b-5 text-white">MYR {{(Math.round((report.walletSum + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</h3>
+                                            </div>
+                                        </div>
                                     </div>
-                                </div>
-                            </div>
-                            <div class="row-xs-height">
-                                <div class="col-xs-height col-bottom">
-                                    <div class="progress progress-small m-b-0">
-                                        <div class="progress-bar progress-bar-success" style="width: 0"></div>
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-bottom">
+                                            <div class="progress progress-small m-b-0">
+                                                <div class="progress-bar progress-bar-success" style="width: 0"></div>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                </div>
-                <div class="col">
-                    <div class="card no-border bg-success-light text-white widget-loader-bar m-b-10">
-                        <div class="container-xs-height full-height">
-                            <div class="row-xs-height">
-                                <div class="col-xs-height col-top">
-                                    <div class="card-header  top-left top-right">
-                                        <div class="card-title">
-                                            <span class="font-montserrat fs-11 all-caps">Total Incoming Amount</span>
+                        <div class="col">
+                            <div class="card no-border bg-success-light text-white widget-loader-bar m-b-10">
+                                <div class="container-xs-height full-height">
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-top">
+                                            <div class="card-header  top-left top-right">
+                                                <div class="card-title">
+                                                    <span class="font-montserrat fs-11 all-caps">Total Incoming Amount</span>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                            </div>
-                            <div class="row-xs-height">
-                                <div class="col-xs-height col-top">
-                                    <div class="p-l-20 p-t-50 p-b-40 p-r-20">
-                                        <h3 class="no-margin p-b-5 text-white">MYR 500,123</h3>
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-top">
+                                            <div class="p-l-20 p-t-50 p-b-40 p-r-20">
+                                                <h3 class="no-margin p-b-5 text-white">MYR {{(Math.round((report.incomingSum + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</h3>
+                                            </div>
+                                        </div>
                                     </div>
-                                </div>
-                            </div>
-                            <div class="row-xs-height">
-                                <div class="col-xs-height col-bottom">
-                                    <div class="progress progress-small m-b-0">
-                                        <div class="progress-bar progress-bar-success" style="width: 0"></div>
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-bottom">
+                                            <div class="progress progress-small m-b-0">
+                                                <div class="progress-bar progress-bar-success" style="width: 0"></div>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                </div>
-                <div class="col">
-                    <div class="card no-border bg-warning widget-loader-bar m-b-10">
-                        <div class="container-xs-height full-height">
-                            <div class="row-xs-height">
-                                <div class="col-xs-height col-top">
-                                    <div class="card-header  top-left top-right">
-                                        <div class="card-title">
-                                            <span class="font-montserrat fs-11 all-caps">Total Outgoing Amount</span>
+                        <div class="col">
+                            <div class="card no-border bg-warning widget-loader-bar m-b-10">
+                                <div class="container-xs-height full-height">
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-top">
+                                            <div class="card-header  top-left top-right">
+                                                <div class="card-title">
+                                                    <span class="font-montserrat fs-11 all-caps">Total Outgoing Amount</span>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                            </div>
-                            <div class="row-xs-height">
-                                <div class="col-xs-height col-top">
-                                    <div class="p-l-20 p-t-50 p-b-40 p-r-20">
-                                        <h3 class="no-margin p-b-5">MYR 500,123</h3>
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-top">
+                                            <div class="p-l-20 p-t-50 p-b-40 p-r-20">
+                                                <h3 class="no-margin p-b-5 text-white">MYR {{(Math.round((report.outgoingSum + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</h3>
+                                            </div>
+                                        </div>
                                     </div>
-                                </div>
-                            </div>
-                            <div class="row-xs-height">
-                                <div class="col-xs-height col-bottom">
-                                    <div class="progress progress-small m-b-0">
-                                        <div class="progress-bar progress-bar-primary" style="width: 0"></div>
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-bottom">
+                                            <div class="progress progress-small m-b-0">
+                                                <div class="progress-bar progress-bar-primary" style="width: 0"></div>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                </div>
-                <div class="col">
-                    <div class="card no-border bg-danger text-white widget-loader-bar m-b-10">
-                        <div class="container-xs-height full-height">
-                            <div class="row-xs-height">
-                                <div class="col-xs-height col-top">
-                                    <div class="card-header  top-left top-right">
-                                        <div class="card-title">
-                                            <span class="font-montserrat fs-11 all-caps">Total Floating Amount</span>
+                        <div class="col d-none">
+                            <div class="card no-border bg-danger text-white widget-loader-bar m-b-10">
+                                <div class="container-xs-height full-height">
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-top">
+                                            <div class="card-header  top-left top-right">
+                                                <div class="card-title">
+                                                    <span class="font-montserrat fs-11 all-caps">Total Floating Amount</span>
+                                                </div>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                            </div>
-                            <div class="row-xs-height">
-                                <div class="col-xs-height col-top">
-                                    <div class="p-l-20 p-t-50 p-b-40 p-r-20">
-                                        <h3 class="no-margin p-b-5 text-white">MYR 500,123</h3>
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-top">
+                                            <div class="p-l-20 p-t-50 p-b-40 p-r-20">
+                                                <h3 class="no-margin p-b-5 text-white">MYR 500,123</h3>
+                                            </div>
+                                        </div>
                                     </div>
-                                </div>
-                            </div>
-                            <div class="row-xs-height">
-                                <div class="col-xs-height col-bottom">
-                                    <div class="progress progress-small m-b-0">
-                                        <div class="progress-bar progress-bar-primary" style="width: 0"></div>
+                                    <div class="row-xs-height">
+                                        <div class="col-xs-height col-bottom">
+                                            <div class="progress progress-small m-b-0">
+                                                <div class="progress-bar progress-bar-primary" style="width: 0"></div>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -133,7 +138,28 @@
     import Chart from 'chart.js';
 
     export default {
+        data(){
+            return {
+                section: 'walletStatsSection',
+                isLoading: false,
+                report: {
+                    incomingSum: 0,
+                    outgoingSum: 0,
+                    walletSum: 0
+                }
+            }
+        },
+        computed: {
+            pendingQueue () {
+                return this.$store.getters.isInCompleteQueue(this.section);
+            },
+        },
         watch: {
+            pendingQueue(inComplete){
+                if(inComplete){
+                    this.fetchReport();
+                }
+            },
             wallet_details: function() {
                 const ctx = document.getElementById('wallets-chart');
                 var xValues = [100,200,300,400,500,600,700,800,900,1000];
@@ -172,6 +198,19 @@
                 });
             }
         },
+        created(){
+            this.$store.dispatch('updateListQueue', {'name': this.section});
+        },
+        methods: {
+            fetchReport(){
+                this.isLoading = true;
+                this.submit(route('api.wallet.reports'), 'get', this.section, false, false)
+            },
+            successHandler(response){
+                this.isLoading = false;
+                this.report = response.payload.data;
+            }
+        },
         mixins: [componentHandler]
     }
 
diff --git a/routes/wallet.php b/routes/wallet.php
index 123f36d6..f79708b3 100644
--- a/routes/wallet.php
+++ b/routes/wallet.php
@@ -10,4 +10,6 @@ Route::group(['prefix' => 'wallets', 'namespace' => 'Wallets', 'as' => 'wallet.'
     Route::post('/credit', 'CreditWalletController@credit')->name('credit'); // admin +
 
     Route::put('/{transaction_id}/update-status/{status}', 'UpdateStatusWalletController@updateStatus')->where('status', 'approve|reject')->name('approval');
+
+    Route::get('/reports', 'WalletReportController@walletsReport')->name('reports');
 });