From 0a0da91c21df708af164f9e911fc2a3171a3d058 Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Sun, 16 Jan 2022 20:33:55 +0800
Subject: [PATCH] update wallet-ui

---
 .../accounts/forms/TopUpAccountComponent.vue  | 196 ------------------
 .../CustomerProfileSectionComponent.vue       |   2 +-
 .../customerDashboardSectionComponent.vue     |   2 +-
 .../elements/WalletComponent.vue}             |  30 ++-
 .../elements/WalletTopUpHistoryComponent.vue  |  73 +++++++
 .../forms/WalletTopUpFormComponent.vue        |  41 ++++
 .../views/pages/wallet/transactions.blade.php |  15 +-
 resources/views/partials/header.blade.php     |   8 -
 routes/web.php                                |   5 +-
 9 files changed, 145 insertions(+), 227 deletions(-)
 delete mode 100644 resources/assets/vue/components/accounts/forms/TopUpAccountComponent.vue
 rename resources/assets/vue/components/{companies/sections/WalletBalanceComponent.vue => wallets/elements/WalletComponent.vue} (93%)
 create mode 100644 resources/assets/vue/components/wallets/elements/WalletTopUpHistoryComponent.vue
 create mode 100644 resources/assets/vue/components/wallets/forms/WalletTopUpFormComponent.vue

diff --git a/resources/assets/vue/components/accounts/forms/TopUpAccountComponent.vue b/resources/assets/vue/components/accounts/forms/TopUpAccountComponent.vue
deleted file mode 100644
index af8a43b7..00000000
--- a/resources/assets/vue/components/accounts/forms/TopUpAccountComponent.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<template>
-    <div class="row h-100 parentContainer">
-        <div class="col">
-            <div class="col-auto p-l-0 p-r-10">
-                <div class="btn btn-xs btn-primary p-t-0 p-b-0 text-primary-lighter requestModal" style="background-color: rgba(255, 255, 255, 0.2);" data-type="topUpModal">
-                    <i class="fa fa-plus fs-14 m-t-5"></i>
-                </div>
-            </div>
-            <modal-component styleType="fill-in" type="topUpModal">
-                <div class="row zig-zag-top">
-                    <div class="col bg-white padding-25">
-
-
-                        <div class="row m-b-20">
-                            <div class="col">
-                                <div class="row">
-                                    <div class="col-8">
-                                        <div class="btn btn-xs btn-complete no-border btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="paymentMethod.status = !paymentMethod.status">
-                                            <div class="row">
-                                                <div class="col p-t-10 p-b-10">
-                                                    {{paymentMethod.name}}
-                                                </div>
-                                                <div class="col-auto bg-complete-light">
-                                                    <div class="row h-100 align-items-center">
-                                                        <div class="col">
-                                                            <i class="fa" :class="[{'fa-angle-down': !paymentMethod.status}, {'fa-angle-up': paymentMethod.status}]"></i>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="relative w-100">
-                                            <div class="absolute w-100 b-l b-b b-r b-complete" :class="[{'hide': !paymentMethod.status}]" style="top: 100%; right: 0; z-index: 1;">
-                                                <div class="row text-left no-margin bg-white">
-                                                    <div class="col no-padding">
-                                                        <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Bank Transfer'}, {'text-white': paymentMethod.name === 'Bank Transfer'}, {'hover-complete': paymentMethod.name !== 'Bank Transfer'}]" @click="updatePaymentType({name: 'Bank Transfer', id: 'cash'})">
-                                                            <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
-                                                                <div class="row align-items-center justify-content-center">
-                                                                    <div class="col">
-                                                                        <div class="font-heading fs-10">Bank Transfer</div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                        <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Cash Deposit'}, {'text-white': paymentMethod.name === 'Cash Deposit'}, {'hover-complete': paymentMethod.name !== 'Cash Deposit'}]"  @click="updatePaymentType({name: 'Cash Deposit', id: 'cash'})">
-                                                            <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
-                                                                <div class="row align-items-center justify-content-center">
-                                                                    <div class="col">
-                                                                        <div class="font-heading fs-10">Cash Deposit</div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                        <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Cheque'}, {'text-white': paymentMethod.name === 'Cheque'}, {'hover-complete': paymentMethod.name !== 'Cheque'}]" @click="updatePaymentType({name: 'Cheque', id: 'cheque'})">
-                                                            <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
-                                                                <div class="row align-items-center justify-content-center">
-                                                                    <div class="col">
-                                                                        <div class="font-heading fs-10">Cheque</div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                        <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Banker\'s Acceptance'}, {'text-white': paymentMethod.name === 'Banker\'s Acceptance'}, {'hover-complete': paymentMethod.name !== 'Banker\'s Acceptance'}]" @click="updatePaymentType({name: 'Banker\'s Acceptance', id: 'ba'})">
-                                                            <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
-                                                                <div class="row align-items-center justify-content-center">
-                                                                    <div class="col">
-                                                                        <div class="font-heading fs-10">Banker's Acceptance</div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                        <div class="row no-margin" :class="[{'bg-complete-light': paymentMethod.name === 'Online Transfer'}, {'text-white': paymentMethod.name === 'Online Transfer'}, {'hover-complete': paymentMethod.name !== 'Online Transfer'}]" @click="updatePaymentType({name: 'Online Transfer', id: 'ot'})">
-                                                            <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10">
-                                                                <div class="row align-items-center justify-content-center">
-                                                                    <div class="col">
-                                                                        <div class="font-heading fs-10">Online Transfer</div>
-                                                                    </div>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="row m-r-0">
-                                    <div class="col p-r-0">
-                                        <validation-wrapper-component :validator="$v.amount">
-                                            <label>Amount</label>
-                                            <input class="form-control" name="amount" v-model.lazy="amount">
-                                            <!-- <input class="form-control" name="amount" v-model.lazy="amount" v-money="{decimal: '.',thousands: ',', precision: 2}"> -->
-                                        </validation-wrapper-component>
-                                    </div>
-                                    <div class="col-auto b-r b-t b-b b-grey">
-                                        <div class="row h-100 align-items-center">
-                                            <div class="col">
-                                                <!-- <div class="font-heading fs-10 muted">{{this.data.fixed_currency.short_code}}</div> -->
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div class="row" v-if="paymentMethod.name == 'Online Transfer'">
-                                    <div class="col">
-
-                                        <div class="row m-t-10">
-                                            <div class="col">
-                                                <div class="row">
-                                                    <div class="col-8">
-                                                        <div class="btn btn-xs btn-block text-left b-rad-none p-t-10 p-b-10 p-l-15 p-r-15" :class="[{'b-complete': onlinePayment.bankName === 'Maybank'}]" @click="selectOnlinePaymentBank({bankName: 'Maybank', id: 'maybank'})">
-                                                            <img src="https://shopee.com.my/static/images/bank_logo/img_bankmy_maybank.png" alt="">
-                                                            Maybank2u
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-
-                                        <div class="row m-t-10">
-                                            <div class="col">
-                                                <div class="row">
-                                                    <div class="col-8">
-                                                        <div class="btn btn-xs btn-block text-left b-rad-none p-t-10 p-b-10 p-l-15 p-r-15" :class="[{'b-complete': onlinePayment.bankName === 'Cimb'}]" @click="selectOnlinePaymentBank({bankName: 'Cimb', id: 'cimb'})">
-                                                            <img src="https://shopee.com.my/static/images/bank_logo/img_bankmy_cimb.png" alt="">
-                                                            Cimb
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="col-4 p-r-0">
-                                <button class="btn btn-xs all-caps b-rad-none btn-default bg-master-lighter btn-block" data-dismiss="modal">Cancel</button>
-                            </div>
-                            <div class="col p-l-0">
-                                <button class="btn btn-xs all-caps b-rad-none btn-success btn-block" v-if="!(paymentMethod.name === 'Online Transfer' && onlinePayment.status === false)" @click="submitForm()">Confirm</button>
-                            </div>
-                        </div>
-
-                    </div>
-                </div>
-            </modal-component>
-        </div>
-    </div>
-
-</template>
-<script>
-    import { required } from "vuelidate/lib/validators";
-    export default {
-        data(){
-            return {
-                loading: false,
-                // amount: (Math.round((this.data.outstanding_amount + Number.EPSILON) * 100) / 100).toFixed(2),
-                amount: (Math.round(1000 * 100) / 100).toFixed(2),
-                paymentMethod: {
-                    name: 'Bank Transfer',
-                    id: 'cash',
-                    status: false
-                },
-                onlinePayment: {    
-                    bankName: '',
-                    id: '',
-                    status: false
-                },
-            }
-        },
-        validations () {
-            return {
-                amount: { required }
-            }
-        },
-        methods:{
-            updatePaymentType(payment){
-                this.paymentMethod = {
-                    name: payment.name,
-                    id: payment.id,
-                    status: false,
-                }
-            },
-            selectOnlinePaymentBank(bankName){
-                this.onlinePayment = {
-                    bankName: bankName.bankName,
-                    id: bankName.id,
-                    status: true,
-                }
-            },
-        }
-    }
-
-</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue b/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue
index 85502c97..b95f385f 100644
--- a/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue
+++ b/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue
@@ -141,7 +141,7 @@
         <div class="col-3">
             <div class="row">
                 <div class="col-10 m-b-15">
-                    <wallet-balance-component></wallet-balance-component>
+                    <wallet-component></wallet-component>
                 </div>
             </div>
             <booking-form-component :data="company" section="customerProfileSection"></booking-form-component>
diff --git a/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue b/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue
index f399c533..cce6e90f 100644
--- a/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue
+++ b/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue
@@ -537,7 +537,7 @@
                 </div>
                 <div class="col-2 p-l-0 p-r-0 order-last">
                     <verification-warning-component v-if="!isLoading && company.bookings.length" :data="company"></verification-warning-component>
-                    <wallet-balance-component></wallet-balance-component>
+                    <wallet-component></wallet-component>
                 </div>
             </div>
         </div>
diff --git a/resources/assets/vue/components/companies/sections/WalletBalanceComponent.vue b/resources/assets/vue/components/wallets/elements/WalletComponent.vue
similarity index 93%
rename from resources/assets/vue/components/companies/sections/WalletBalanceComponent.vue
rename to resources/assets/vue/components/wallets/elements/WalletComponent.vue
index dd100288..af0398d5 100644
--- a/resources/assets/vue/components/companies/sections/WalletBalanceComponent.vue
+++ b/resources/assets/vue/components/wallets/elements/WalletComponent.vue
@@ -1,4 +1,4 @@
-<template>
+f<template>
     <div class="row">
         <div class="col">
             <div class="row" v-if="step === 1">
@@ -14,26 +14,29 @@
                             <span class="col-auto font-heading fs-8 all-caps text-master btn-rounded p-l-15 p-r-15 bg-white d-flex justify-content-center align-items-center cursor" @click="step++">Top Up <i class="fa fa-plus m-l-5"></i></span>
                         </div>
                         <div class="col-auto cursor">
-                            <a class="fs-8 d-flex justify-content-center align-items-center lh-15 text-white" :href="route('wallet.transactions')">Transaction History<i class="fa fa-angle-right p-l-5"></i></a>
+                            <a class="fs-8 d-flex justify-content-center align-items-center lh-15 text-white" :href="route('wallet.details', 2)">Transaction History<i class="fa fa-angle-right p-l-5"></i></a>
                         </div>
                     </div>
-                    <div class="row p-l-15 p-t-10 p-r-15 m-b-10" v-if="$store.getters.isAdmin">
+                    <div class="row p-l-15 p-t-10 p-r-15 m-b-10 parentContainer" v-if="$store.getters.isAdmin">
                         <div class="col">
                             <div class="row">
                                 <div class="col-auto cursor p-l-0">
-                                    <a class="fs-8 d-flex justify-content-center align-items-center lh-15 text-white" :href="route('wallet.transactions')">Transaction History<i class="fa fa-angle-right p-l-5"></i></a>
+                                    <a class="fs-8 d-flex justify-content-center align-items-center lh-15 text-white" :href="route('wallet.details', 1)">Transaction History<i class="fa fa-angle-right p-l-5"></i></a>
                                 </div>
                             </div>
                             <div class="row m-t-10">
-                                <div class="col margin-10 b-a b-grey bg-white padding-10 pointer b-primary text-primary fs-8 d-flex align-items-center justify-content-between flex-column">
+                                <div class="col margin-10 b-a b-grey bg-white padding-10 pointer b-primary text-primary fs-8 d-flex align-items-center justify-content-between flex-column requestModal" data-type="adminTopUpModal" @click="updateTopUpType('deposit')">
                                     <svg class="m-t-5" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 172 172" style=" fill:#000000;"><g transform="translate(4.988,4.988) scale(0.942,0.942)"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="none" stroke-linecap="butt" stroke-linejoin="none" 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"><g id="original-icon 1" fill="#000000" stroke="#cccccc" stroke-width="10" stroke-linejoin="round"><path d="M88.4725,4.4075l27.52,27.52c1.37063,1.37063 1.37063,3.57438 0,4.945c-1.37062,1.37063 -3.57437,1.37063 -4.945,0l-21.6075,-21.6075v94.815c0.01344,1.23625 -0.63156,2.39188 -1.70656,3.02344c-1.075,0.61813 -2.39187,0.61813 -3.46687,0c-1.075,-0.63156 -1.72,-1.78719 -1.70656,-3.02344v-94.815l-21.6075,21.6075c-1.37062,1.37063 -3.57437,1.37063 -4.945,0c-1.37062,-1.37062 -1.37062,-3.57437 0,-4.945l27.52,-27.52l2.4725,-2.365zM58.48,55.04c1.23625,-0.01344 2.39188,0.63156 3.02344,1.70656c0.61813,1.075 0.61813,2.39187 0,3.46687c-0.63156,1.075 -1.78719,1.72 -3.02344,1.70656h-27.52v103.2h110.08v-103.2h-27.52c-1.23625,0.01344 -2.39187,-0.63156 -3.02344,-1.70656c-0.61813,-1.075 -0.61813,-2.39187 0,-3.46687c0.63156,-1.075 1.78719,-1.72 3.02344,-1.70656h34.4v116.96h-123.84v-116.96z"></path></g><path d="M0,172v-172h172v172z" fill="none" stroke="none" stroke-width="1" stroke-linejoin="miter"></path><path d="" fill="none" stroke="none" stroke-width="1" stroke-linejoin="miter"></path><g id="original-icon" fill="#000000" stroke="none" stroke-width="1" stroke-linejoin="miter"><path d="M86,2.0425l-2.4725,2.365l-27.52,27.52c-1.37062,1.37063 -1.37062,3.57438 0,4.945c1.37063,1.37063 3.57438,1.37063 4.945,0l21.6075,-21.6075v94.815c-0.01344,1.23625 0.63156,2.39188 1.70656,3.02344c1.075,0.61813 2.39187,0.61813 3.46687,0c1.075,-0.63156 1.72,-1.78719 1.70656,-3.02344v-94.815l21.6075,21.6075c1.37063,1.37063 3.57438,1.37063 4.945,0c1.37063,-1.37062 1.37063,-3.57437 0,-4.945l-27.52,-27.52zM24.08,55.04v116.96h123.84v-116.96h-34.4c-1.23625,-0.01344 -2.39187,0.63156 -3.02344,1.70656c-0.61813,1.075 -0.61813,2.39187 0,3.46687c0.63156,1.075 1.78719,1.72 3.02344,1.70656h27.52v103.2h-110.08v-103.2h27.52c1.23625,0.01344 2.39188,-0.63156 3.02344,-1.70656c0.61813,-1.075 0.61813,-2.39187 0,-3.46687c-0.63156,-1.075 -1.78719,-1.72 -3.02344,-1.70656z"></path></g><path d="" fill="none" stroke="none" stroke-width="1" stroke-linejoin="miter"></path><path d="" fill="none" stroke="none" stroke-width="1" stroke-linejoin="miter"></path></g></g></svg>
-                                    <span>Top Up</span>
+                                    <span class="m-t-5 d-block">Top Up</span>
                                 </div>
-                                <div class="col margin-10 b-a b-grey bg-white padding-10 pointer b-primary text-primary fs-8 d-flex align-items-center justify-content-between flex-column">
-                                    <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 transform="translate(25.8,25.8) scale(0.7,0.7)"><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" stroke="none"></path><g fill="#000000" stroke="none"><path d="M86,8.6c-4.64434,0 -8.53281,3.02344 -10.01934,7.17227c-1.91484,-1.73848 -4.40078,-2.87227 -7.18066,-2.87227c-5.9125,0 -10.75,4.8375 -10.75,10.75v4.00605c-1.56211,-1.075 -3.34258,-1.85605 -5.375,-1.85605c-5.31621,0 -9.675,4.35879 -9.675,9.675v5.375h-32.25v86h32.45156l0.57109,5.74453c0.5375,5.34141 3.64492,9.70859 7.82734,12.53047v18.275h4.3v-17.2c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15c-0.44512,0 -0.87344,0.13437 -1.24297,0.39473c-3.59453,-2.05762 -6.16445,-5.73613 -6.60117,-10.13691l-0.5291,-5.30781h52.07871l18.2834,-15.91504l0.19316,-0.46191c0,0 4.55195,-11.57305 18.96367,-11.57305c5.94609,0 7.91972,2.94785 8.62519,4.22441c-1.57051,1.99043 -12.82441,16.25938 -14.13457,17.88867l-18.70332,23.34766c-0.92383,1.14219 -5.33301,5.65215 -5.33301,12.53047v6.50879h4.3v-6.50879c0,-5.12305 2.95625,-8.0709 4.37559,-9.83457h0.0084l16.19219,-20.20664h28.87383v-86h-47.3v-17.2c0,-5.9125 -4.8375,-10.75 -10.75,-10.75c-2.77988,0 -5.26582,1.13379 -7.18066,2.87227c-1.48652,-4.14883 -5.375,-7.17227 -10.01934,-7.17227zM86,12.9c3.58613,0 6.45,2.86387 6.45,6.45v4.3h4.3c0,-3.58613 2.86387,-6.45 6.45,-6.45c3.58613,0 6.45,2.86387 6.45,6.45v17.2h-12.9c0,-1.18418 -0.96582,-2.15 -2.15,-2.15c-1.18418,0 -2.15,0.96582 -2.15,2.15h-12.9c0,-1.18418 -0.96582,-2.15 -2.15,-2.15c-1.18418,0 -2.15,0.96582 -2.15,2.15h-27.95v-5.375c0,-2.98984 2.38516,-5.375 5.375,-5.375c2.98984,0 5.375,2.38516 5.375,5.375h4.3v-11.825c0,-3.58613 2.86387,-6.45 6.45,-6.45c3.58613,0 6.45,2.86387 6.45,6.45c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15v-4.3c0,-3.58613 2.86387,-6.45 6.45,-6.45zM77.4,30.1c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM94.6,30.1c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM15.05,45.15h141.9v77.4h-21.14726c2.74629,-3.45176 14.23535,-18.01465 14.23535,-18.01465l0.80625,-1.03301l-0.5375,-1.18418c0,0 -3.7625,-7.71816 -13.26113,-7.71816c-15.70508,0 -21.86953,12.06016 -22.62539,13.65586l-16.42734,14.29414h-82.94297zM34.4,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM40.85,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM47.3,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM53.75,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM66.65,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM73.1,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM79.55,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM92.45,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM98.9,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM105.35,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM111.8,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM118.25,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM124.7,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM131.15,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM137.6,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM32.25,55.9c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM139.75,55.9c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM27.95,60.2c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,60.2c-13.03437,0 -23.65,10.61563 -23.65,23.65c0,13.03437 10.61563,23.65 23.65,23.65c13.03437,0 23.65,-10.61563 23.65,-23.65c0,-13.03437 -10.61562,-23.65 -23.65,-23.65zM144.05,60.2c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM21.5,62.35c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM150.5,62.35c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,64.5c10.70801,0 19.35,8.64199 19.35,19.35c0,10.70801 -8.64199,19.35 -19.35,19.35c-10.70801,0 -19.35,-8.64199 -19.35,-19.35c0,-10.70801 8.64199,-19.35 19.35,-19.35zM21.5,68.8c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM150.5,68.8c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM21.5,75.25c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM40.85,75.25c-4.72832,0 -8.6,3.87168 -8.6,8.6c0,4.72832 3.87168,8.6 8.6,8.6c4.72832,0 8.6,-3.87168 8.6,-8.6c0,-4.72832 -3.87168,-8.6 -8.6,-8.6zM129,75.25c-4.72832,0 -8.6,3.87168 -8.6,8.6c0,4.72832 3.87168,8.6 8.6,8.6c4.72832,0 8.6,-3.87168 8.6,-8.6c0,-4.72832 -3.87168,-8.6 -8.6,-8.6zM150.5,75.25c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM40.85,79.55c2.40195,0 4.3,1.89805 4.3,4.3c0,2.40195 -1.89805,4.3 -4.3,4.3c-2.40195,0 -4.3,-1.89805 -4.3,-4.3c0,-2.40195 1.89805,-4.3 4.3,-4.3zM129,79.55c2.40195,0 4.3,1.89805 4.3,4.3c0,2.40195 -1.89805,4.3 -4.3,4.3c-2.40195,0 -4.3,-1.89805 -4.3,-4.3c0,-2.40195 1.89805,-4.3 4.3,-4.3zM21.5,81.7c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM150.5,81.7c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM21.5,88.15c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM150.5,88.15c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM21.5,94.6c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM21.5,101.05c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM27.95,103.2c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM32.25,107.5c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM34.4,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM40.85,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM47.3,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM53.75,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM66.65,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM73.1,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM79.55,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM92.45,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM98.9,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM64.5,141.9c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM73.1,141.9c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15z"></path></g><path d="" fill="none" stroke="none"></path></g></g></svg>
+                                <div class="col margin-10 b-a b-grey bg-white padding-10 pointer b-primary text-primary fs-8 d-flex align-items-center justify-content-between flex-column requestModal" data-type="adminTopUpModal" @click="updateTopUpType('withdraw')">
+                                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 172 172" style=" fill:#000000;"><g transform="translate(25.8,25.8) scale(0.7,0.7)"><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" stroke="none"></path><g fill="#000000" stroke="none"><path d="M86,8.6c-4.64434,0 -8.53281,3.02344 -10.01934,7.17227c-1.91484,-1.73848 -4.40078,-2.87227 -7.18066,-2.87227c-5.9125,0 -10.75,4.8375 -10.75,10.75v4.00605c-1.56211,-1.075 -3.34258,-1.85605 -5.375,-1.85605c-5.31621,0 -9.675,4.35879 -9.675,9.675v5.375h-32.25v86h32.45156l0.57109,5.74453c0.5375,5.34141 3.64492,9.70859 7.82734,12.53047v18.275h4.3v-17.2c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15c-0.44512,0 -0.87344,0.13437 -1.24297,0.39473c-3.59453,-2.05762 -6.16445,-5.73613 -6.60117,-10.13691l-0.5291,-5.30781h52.07871l18.2834,-15.91504l0.19316,-0.46191c0,0 4.55195,-11.57305 18.96367,-11.57305c5.94609,0 7.91972,2.94785 8.62519,4.22441c-1.57051,1.99043 -12.82441,16.25938 -14.13457,17.88867l-18.70332,23.34766c-0.92383,1.14219 -5.33301,5.65215 -5.33301,12.53047v6.50879h4.3v-6.50879c0,-5.12305 2.95625,-8.0709 4.37559,-9.83457h0.0084l16.19219,-20.20664h28.87383v-86h-47.3v-17.2c0,-5.9125 -4.8375,-10.75 -10.75,-10.75c-2.77988,0 -5.26582,1.13379 -7.18066,2.87227c-1.48652,-4.14883 -5.375,-7.17227 -10.01934,-7.17227zM86,12.9c3.58613,0 6.45,2.86387 6.45,6.45v4.3h4.3c0,-3.58613 2.86387,-6.45 6.45,-6.45c3.58613,0 6.45,2.86387 6.45,6.45v17.2h-12.9c0,-1.18418 -0.96582,-2.15 -2.15,-2.15c-1.18418,0 -2.15,0.96582 -2.15,2.15h-12.9c0,-1.18418 -0.96582,-2.15 -2.15,-2.15c-1.18418,0 -2.15,0.96582 -2.15,2.15h-27.95v-5.375c0,-2.98984 2.38516,-5.375 5.375,-5.375c2.98984,0 5.375,2.38516 5.375,5.375h4.3v-11.825c0,-3.58613 2.86387,-6.45 6.45,-6.45c3.58613,0 6.45,2.86387 6.45,6.45c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15v-4.3c0,-3.58613 2.86387,-6.45 6.45,-6.45zM77.4,30.1c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM94.6,30.1c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM15.05,45.15h141.9v77.4h-21.14726c2.74629,-3.45176 14.23535,-18.01465 14.23535,-18.01465l0.80625,-1.03301l-0.5375,-1.18418c0,0 -3.7625,-7.71816 -13.26113,-7.71816c-15.70508,0 -21.86953,12.06016 -22.62539,13.65586l-16.42734,14.29414h-82.94297zM34.4,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM40.85,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM47.3,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM53.75,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM66.65,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM73.1,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM79.55,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM92.45,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM98.9,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM105.35,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM111.8,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM118.25,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM124.7,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM131.15,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM137.6,49.45c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM32.25,55.9c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM139.75,55.9c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM27.95,60.2c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,60.2c-13.03437,0 -23.65,10.61563 -23.65,23.65c0,13.03437 10.61563,23.65 23.65,23.65c13.03437,0 23.65,-10.61563 23.65,-23.65c0,-13.03437 -10.61562,-23.65 -23.65,-23.65zM144.05,60.2c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM21.5,62.35c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM150.5,62.35c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,64.5c10.70801,0 19.35,8.64199 19.35,19.35c0,10.70801 -8.64199,19.35 -19.35,19.35c-10.70801,0 -19.35,-8.64199 -19.35,-19.35c0,-10.70801 8.64199,-19.35 19.35,-19.35zM21.5,68.8c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM150.5,68.8c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM21.5,75.25c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM40.85,75.25c-4.72832,0 -8.6,3.87168 -8.6,8.6c0,4.72832 3.87168,8.6 8.6,8.6c4.72832,0 8.6,-3.87168 8.6,-8.6c0,-4.72832 -3.87168,-8.6 -8.6,-8.6zM129,75.25c-4.72832,0 -8.6,3.87168 -8.6,8.6c0,4.72832 3.87168,8.6 8.6,8.6c4.72832,0 8.6,-3.87168 8.6,-8.6c0,-4.72832 -3.87168,-8.6 -8.6,-8.6zM150.5,75.25c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM40.85,79.55c2.40195,0 4.3,1.89805 4.3,4.3c0,2.40195 -1.89805,4.3 -4.3,4.3c-2.40195,0 -4.3,-1.89805 -4.3,-4.3c0,-2.40195 1.89805,-4.3 4.3,-4.3zM129,79.55c2.40195,0 4.3,1.89805 4.3,4.3c0,2.40195 -1.89805,4.3 -4.3,4.3c-2.40195,0 -4.3,-1.89805 -4.3,-4.3c0,-2.40195 1.89805,-4.3 4.3,-4.3zM21.5,81.7c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM150.5,81.7c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM21.5,88.15c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM150.5,88.15c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM21.5,94.6c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM21.5,101.05c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM27.95,103.2c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM32.25,107.5c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM34.4,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM40.85,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM47.3,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM53.75,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM60.2,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM66.65,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM73.1,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM79.55,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM92.45,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM98.9,113.95c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM64.5,141.9c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM73.1,141.9c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15z"></path></g><path d="" fill="none" stroke="none"></path></g></g></svg>
                                     <span>Redraw</span>
                                 </div>
                             </div>
+                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="adminTopUpModal">
+                                <wallet-top-up-form-component :section="section" :topUpType="topUpType"></wallet-top-up-form-component>
+                            </modal-component>
                         </div>
                     </div>
                 </div>
@@ -42,7 +45,7 @@
                 <div class="col rounded bg-white p-b-15 m-l-15 m-r-15 m-t-15">
                     <div class="row">
                         <div class="col p-t-15 p-b-15 bg-primary-complete-gradient">
-                            <label class="fs-10 text-white m-b-0 text-uppercase"><i class="fa fa-angle-left p-r-15 cursor" @click="step--"></i>Top Up Wallet</label>
+                            <label class="fs-10 text-white m-b-0 text-uppercase cursor" @click="step--"><i class="fa fa-angle-left p-r-15"></i>Top Up Wallet</label>
                         </div>
                     </div>
                     <div class="row m-t-15">
@@ -80,10 +83,16 @@
     import { VMoney } from 'v-money';
 
     export default {
+        props: {
+            section: {
+                default: "WalletBalanceSection",
+            },
+        },
         data() {
             return {
                 step: 1,
                 amount: '',
+                topUpType: '',
             }
         },
         validations () {
@@ -96,6 +105,9 @@
         methods: {
             updateTopUpAmount(amount){
                 this.amount = (Math.round((amount + Number.EPSILON) * 100) / 100).toFixed(2);
+            },
+            updateTopUpType(topUpType){
+                this.topUpType = topUpType;
             }
         },
         mixins: [componentHandler],
diff --git a/resources/assets/vue/components/wallets/elements/WalletTopUpHistoryComponent.vue b/resources/assets/vue/components/wallets/elements/WalletTopUpHistoryComponent.vue
new file mode 100644
index 00000000..64250573
--- /dev/null
+++ b/resources/assets/vue/components/wallets/elements/WalletTopUpHistoryComponent.vue
@@ -0,0 +1,73 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row m-l-0 m-b-10 m-r-0 parentContainer" :class="[{'b-a': item.status === 4}, {'b-danger': item.status === 4}]" >
+                <div class="col">
+                    <div class="row" v-if="item.type === 3">
+                        <div class="col">
+                            <div class="row">
+                                <div class="col p-t-10 p-b-10 p-r-0" :class="[{'bg-master-lighter': item.status === 1}, {'bg-white': item.status !== 1 && item.status !== 4}]">
+                                    <div class="row m-b-5">
+                                        <div class="col-auto">
+                                            <div class="font-heading fs-8 muted all-caps">Status</div>
+                                            <div class="font-heading fs-10 bold" :class="[{'text-danger': item.status === 1 || item.status === 4}, {'text-success': item.status !== 1 && item.status !== 4}]">
+                                                {{ item.status === 1 ? 'Processing Payment' : 'Success'}}
+                                            </div>
+                                        </div>
+                                        <div class="col-auto p-l-0">
+                                            <div class="font-heading fs-8 muted all-caps">Payment Amount</div>
+                                            <div class="font-heading fs-10 bold">
+                                                <!-- {{item.original_currency.short_code}} {{(Math.round((item.original_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}} -->
+                                                MYR 1000
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <!-- <div class="font-heading fs-8 all-caps" >{{ item.status === 1 ? 'Paid On: ' + customerBooking.updated_at : 'Transferred On:' + item.updated_at }}</div> -->
+                                            <div class="font-heading fs-8 all-caps">Paid On: 25-12-2021 11:15:45 AM </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-auto pointer    " v-if="item.status !== 3 && item.status !== 2" :class="[{'bg-master-light': item.status === 1}, {'bg-master-lighter': item.status === 2}]">
+                                    <div class="row align-items-center h-100">
+                                        <div class="col">
+                                            <i class="fa" :class="[{'fa-cloud-download': item.status === 1 || item.status === 2}, {'fa-ban': item.status === 4}, {'muted': item.status === 1 || item.status === 2}, {'text-danger':  item.status === 4}]"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col-auto bg-success" v-if="item.status === 2 || item.status === 3">
+                                    <!-- <document-file-viewer-component class="h-100" :file="item.documents.files[0]">
+                                        <template slot="button">
+                                            <div class="row align-items-center h-100">
+                                                <div class="col">
+                                                    <i class="fa fa-cloud-download text-white"></i>
+                                                </div>
+                                            </div>
+                                        </template>
+                                    </document-file-viewer-component> -->
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    export default {
+        data(){
+            return {
+                // expandPaymentDetails: false,
+                item: {
+                    status: 1,
+                    type: 3
+                },
+            }
+        },
+        mixins: [componentHandler]
+    }
+</script>
diff --git a/resources/assets/vue/components/wallets/forms/WalletTopUpFormComponent.vue b/resources/assets/vue/components/wallets/forms/WalletTopUpFormComponent.vue
new file mode 100644
index 00000000..00a6629e
--- /dev/null
+++ b/resources/assets/vue/components/wallets/forms/WalletTopUpFormComponent.vue
@@ -0,0 +1,41 @@
+<template>
+    <div class="row">
+        <div class="col bg-white padding-40 b-rad-lg">
+              <div class="row m-b-10">
+                <div class="col text-center">
+                    <div class="fs-11">Plese enter the {{topUpType}} amount.</div>
+                </div>
+            </div>
+             <div class="row m-b-20">
+                <div class="col no-padding">
+                    <div class="form-group form-group-default m-b-0">
+                        <label>Amount</label>
+                        <input type="text" placeholder="0.00" value="0" class="form-control" v-money="money">
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-4 p-l-0 p-r-0">
+                    <button class="btn btn-sm all-caps b-rad-none btn-default bg-master-lighter btn-block" data-dismiss="modal">Cancel</button>
+                </div>
+                <div class="col p-l-0 p-r-0">
+                    <button class="btn btn-sm all-caps b-rad-none btn-success btn-block">Confirm</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
+    import {VMoney} from 'v-money'
+    export default {
+        props: {
+            topUpType:{
+                type: String,
+                required: true
+            }
+        },
+        mixins: [ModalFormHandler],
+        directives: {money: VMoney}
+    }
+</script>
\ No newline at end of file
diff --git a/resources/views/pages/wallet/transactions.blade.php b/resources/views/pages/wallet/transactions.blade.php
index 8fcb3a8a..96c7ecc5 100644
--- a/resources/views/pages/wallet/transactions.blade.php
+++ b/resources/views/pages/wallet/transactions.blade.php
@@ -18,7 +18,7 @@
             <div class="col-2">25/11/2015</div>
             <div class="col">Payment to bill #121221121</div>
             <div class="col-2"></div>
-            <div class="col-2 text-danger">2,123</div>
+            <div class="col-2 text-danger">- 2,123</div>
             <div class="col-2">12,123</div>
         </div>
 
@@ -31,7 +31,7 @@
         </div>
     </div>
     <div class="col-3 m-l-15">
-        <wallet-balance-component></wallet-balance-component>
+        <wallet-component></wallet-component>
         <div class="row m-t-20">
             <div class="col">
                 <div class="row m-b-10">
@@ -44,9 +44,6 @@
                 <div class="row m-b-10">
                     <div class="col bg-white m-l-15 m-r-15 padding-15 rounded">
                         <div class="row m-l-5">
-                            <div class="col-auto btn-rounded bg-master-light d-flex justify-content-center align-content-center">
-                                <div class="padding-5 text-white"><i class="fa fa-check fs-15 lh-40"></i></div>
-                            </div>
                             <div class="col">
                                 <div class="row">
                                     <div class="col">
@@ -69,9 +66,6 @@
                 <div class="row m-b-10">
                     <div class="col bg-white m-l-15 m-r-15 padding-15 rounded">
                         <div class="row m-l-5">
-                            <div class="col-auto btn-rounded bg-master-light d-flex justify-content-center align-content-center">
-                                <div class="padding-5 text-white"><i class="fa fa-times fs-15 lh-40"></i></div>
-                            </div>
                             <div class="col">
                                 <div class="row">
                                     <div class="col">
@@ -94,9 +88,6 @@
                 <div class="row m-b-10">
                     <div class="col bg-white m-l-15 m-r-15 padding-15 rounded">
                         <div class="row m-l-5">
-                            <div class="col-auto btn-rounded bg-master-light d-flex justify-content-center align-content-center">
-                                <div class="padding-5 text-white"><i class="fa fa-exclamation fs-15 lh-40"></i></div>
-                            </div>
                             <div class="col">
                                 <div class="row">
                                     <div class="col">
@@ -115,6 +106,8 @@
                         </div>
                     </div>
                 </div>
+
+                <wallet-top-up-history-component></wallet-top-up-history-component>
             </div>
         </div>
     </div>
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index d76eff95..c20312df 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -67,14 +67,6 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="col-auto m-r-20 d-none d-md-inline">
-                                <div class="row align-items-center p-t-5 p-b-5 b-a b-thick" style="border-color: #ffffff3d">
-                                    <div class="col-auto">
-                                        <div class="fs-12 text-primary-lighter">MYR 0.00</div>
-                                    </div>
-                                    <top-up-account-component></top-up-account-component>
-                                </div>
-                            </div>
                             <div class="col-auto m-r-20 d-none d-md-inline">
                                 <div class="row align-items-center p-t-5 p-b-5 b-a b-thick d-inline-flex h-100" style="border-color: #ffffff3d">
                                     <div class="col-auto">
diff --git a/routes/web.php b/routes/web.php
index 23b4499c..a48b26d2 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -76,8 +76,11 @@ Route::get('/transfer/merge/{marking}', function ($marking) {
 })->name('booking.merge');
 
 Route::get('/wallet-transactions', function () {
+Route::get('/online_payment/redirect', 'Billplz\CallbackBillplzController@callback')->name('online_payment.redirect');
+
+Route::get('/wallet/{marking}/details', function () {
     return view('pages.wallet.index');
-})->name('wallet.transactions');
+})->name('wallet.details');
 
 Route::get('/test', function(){