From b9b30a1555fff35a9eaf8e126c6920750c3ca029 Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Thu, 16 Dec 2021 20:24:10 +0800
Subject: [PATCH 1/2] update wallet ui at dashboard

---
 .../customerDashboardSectionComponent.vue     | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue b/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue
index 8d48fc7e..2fc0ba02 100644
--- a/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue
+++ b/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue
@@ -536,8 +536,35 @@
                     </div>
                 </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>
+                    <verification-warning-component v-if="!isLoading && company.bookings.length" :data="company"></verification-warning-component>
+                    <div class="row">
+                        <div class="col bg-primary-complete-gradient p-t-15 p-b-10 m-l-15 m-r-15 m-t-15">
+                            <div class="row">
+                                <div class="col">
+                                    <label class="fs-10 text-white m-b-0 text-uppercase">Wallet Balance</label>
+                                    <div class="fs-12 text-primary-lighter">MYR 0.00</div>
+                                </div>
+                            </div>
+                            <div class="row m-t-10 d-flex align-items-center">
+                                <div class="col-auto">
+                                    <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">Reload <i class="fa fa-plus m-l-5"></i></span>
+                                </div>
+                                <div class="col-auto text-underline">
+                                    <span class="fs-8 d-flex justify-content-center align-items-center lh-15 text-white">Transaction History<i class="fa fa-angle-right p-l-5"></i></span>
+                                </div>
+                            </div>
+                            <div class="row m-t-10 padding-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">
+                                    <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>Transfer</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>
+                                    <span>Cash Out</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

From 0579be05d8be6af0f5d83b1b09e4012953b73fb1 Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Mon, 10 Jan 2022 00:33:35 +0800
Subject: [PATCH 2/2] wallet updates

---
 .../CustomerProfileSectionComponent.vue       |   5 +
 .../sections/WalletBalanceComponent.vue       | 104 +++++++++++++++
 .../customerDashboardSectionComponent.vue     |  29 +----
 resources/views/pages/wallet/index.blade.php  |   4 +
 .../views/pages/wallet/transactions.blade.php | 121 ++++++++++++++++++
 routes/web.php                                |   4 +
 6 files changed, 239 insertions(+), 28 deletions(-)
 create mode 100644 resources/assets/vue/components/companies/sections/WalletBalanceComponent.vue
 create mode 100644 resources/views/pages/wallet/index.blade.php
 create mode 100644 resources/views/pages/wallet/transactions.blade.php

diff --git a/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue b/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue
index 09876b9b..85502c97 100644
--- a/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue
+++ b/resources/assets/vue/components/companies/sections/CustomerProfileSectionComponent.vue
@@ -139,6 +139,11 @@
             </div>
         </div>
         <div class="col-3">
+            <div class="row">
+                <div class="col-10 m-b-15">
+                    <wallet-balance-component></wallet-balance-component>
+                </div>
+            </div>
             <booking-form-component :data="company" section="customerProfileSection"></booking-form-component>
         </div>
     </div>
diff --git a/resources/assets/vue/components/companies/sections/WalletBalanceComponent.vue b/resources/assets/vue/components/companies/sections/WalletBalanceComponent.vue
new file mode 100644
index 00000000..dd100288
--- /dev/null
+++ b/resources/assets/vue/components/companies/sections/WalletBalanceComponent.vue
@@ -0,0 +1,104 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row" v-if="step === 1">
+                <div class="col rounded bg-primary-complete-gradient p-t-15 p-b-15 m-l-15 m-r-15 m-t-15">
+                    <div class="row">
+                        <div class="col">
+                            <label class="fs-10 text-white m-b-0 text-uppercase">Wallet Balance</label>
+                            <div class="fs-12 text-primary-lighter">MYR 0.00</div>
+                        </div>
+                    </div>
+                    <div class="row m-t-10 d-flex align-items-center" v-if="!$store.getters.isAdmin">
+                        <div class="col-auto">
+                            <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>
+                        </div>
+                    </div>
+                    <div class="row p-l-15 p-t-10 p-r-15 m-b-10" 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>
+                                </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">
+                                    <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>
+                                </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>
+                                    <span>Redraw</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row" v-if="step === 2">
+                <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>
+                        </div>
+                    </div>
+                    <div class="row m-t-15">
+                        <div class="col">
+                            <validation-wrapper-component :validator="$v.amount">
+                                <label>Top Up Amount (MYR)</label>
+                                <input class="form-control" name="amount" v-model.lazy="amount" v-money="{decimal: '.',thousands: ',', precision: 2}">
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                    <div class="row m-t-15 p-l-15 p-r-15">
+                        <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(amount.replace(/\,/g,'')) == 500}]" @click="updateTopUpAmount(500)">MYR<br>500</div>
+                        <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(amount.replace(/\,/g,'')) == 1000}]" @click="updateTopUpAmount(1000)">MYR<br>1000</div>
+                        <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(amount.replace(/\,/g,'')) == 3000}]" @click="updateTopUpAmount(3000)">MYR<br>3000</div>
+                    </div>
+                    <div class="row m-t-10 p-l-15 p-r-15">
+                        <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(amount.replace(/\,/g,'')) == 5000}]" @click="updateTopUpAmount(5000)">MYR<br>5000</div>
+                        <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(amount.replace(/\,/g,'')) == 10000}]" @click="updateTopUpAmount(10000)">MYR<br>10000</div>
+                        <div class="col bg-master-lightest b-grey b-a m-l-5 m-r-5 p-t-5 p-b-5 btn-rounded text-center font-heading fs-10 all-caps text-master cursor" :class="[{'bg-info-lighter': parseInt(amount.replace(/\,/g,'')) == 50000}]" @click="updateTopUpAmount(50000)">MYR<br>50000</div>
+                    </div>
+                    <div class="row m-t-15">
+                        <div class="col">
+                            <div class="btn btn-xs btn-success btn-block b-rad-none rounded">Confirm</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import componentHandler from '../../../general/mixins/componentHandler';
+    import { required } from "vuelidate/lib/validators";
+    import { VMoney } from 'v-money';
+
+    export default {
+        data() {
+            return {
+                step: 1,
+                amount: '',
+            }
+        },
+        validations () {
+            return {
+                amount: {
+                    required,
+                }
+            }
+        },
+        methods: {
+            updateTopUpAmount(amount){
+                this.amount = (Math.round((amount + Number.EPSILON) * 100) / 100).toFixed(2);
+            }
+        },
+        mixins: [componentHandler],
+        directives: {money: VMoney}
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue b/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue
index 2fc0ba02..f399c533 100644
--- a/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue
+++ b/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue
@@ -537,34 +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>
-                    <div class="row">
-                        <div class="col bg-primary-complete-gradient p-t-15 p-b-10 m-l-15 m-r-15 m-t-15">
-                            <div class="row">
-                                <div class="col">
-                                    <label class="fs-10 text-white m-b-0 text-uppercase">Wallet Balance</label>
-                                    <div class="fs-12 text-primary-lighter">MYR 0.00</div>
-                                </div>
-                            </div>
-                            <div class="row m-t-10 d-flex align-items-center">
-                                <div class="col-auto">
-                                    <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">Reload <i class="fa fa-plus m-l-5"></i></span>
-                                </div>
-                                <div class="col-auto text-underline">
-                                    <span class="fs-8 d-flex justify-content-center align-items-center lh-15 text-white">Transaction History<i class="fa fa-angle-right p-l-5"></i></span>
-                                </div>
-                            </div>
-                            <div class="row m-t-10 padding-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">
-                                    <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>Transfer</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>
-                                    <span>Cash Out</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                    <wallet-balance-component></wallet-balance-component>
                 </div>
             </div>
         </div>
diff --git a/resources/views/pages/wallet/index.blade.php b/resources/views/pages/wallet/index.blade.php
new file mode 100644
index 00000000..7a9b49ef
--- /dev/null
+++ b/resources/views/pages/wallet/index.blade.php
@@ -0,0 +1,4 @@
+@extends('layouts.base_portal')
+@section('inner_content')
+    @include('pages.wallet.transactions')
+@endsection
diff --git a/resources/views/pages/wallet/transactions.blade.php b/resources/views/pages/wallet/transactions.blade.php
new file mode 100644
index 00000000..8fcb3a8a
--- /dev/null
+++ b/resources/views/pages/wallet/transactions.blade.php
@@ -0,0 +1,121 @@
+<div class="row">
+    <div class="col-8">
+        <div class="row p-b-5 b-b b-grey m-b-10 m-l-0 m-r-0">
+            <div class="col no-padding">
+                <h6>Transaction History</h6>
+            </div>
+        </div>
+
+        <div class="row padding-10">
+            <div class="col-2 fs-10">Date</div>
+            <div class="col fs-10">Description</div>
+            <div class="col-2 fs-10">Incoming</div>
+            <div class="col-2 fs-10">Outgoing</div>
+            <div class="col-2 fs-10">Balance</div>
+        </div>
+
+        <div class="row bg-white padding-10 m-b-10 rounded">
+            <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">12,123</div>
+        </div>
+
+        <div class="row bg-white padding-10 m-b-10 rounded">
+            <div class="col-2">115/11/2015</div>
+            <div class="col">Top Up</div>
+            <div class="col-2 text-success">1,234</div>
+            <div class="col-2"></div>
+            <div class="col-2">14,246</div>
+        </div>
+    </div>
+    <div class="col-3 m-l-15">
+        <wallet-balance-component></wallet-balance-component>
+        <div class="row m-t-20">
+            <div class="col">
+                <div class="row m-b-10">
+                    <div class="col">
+                        <div class="font-head fs-10 all-caps">Top Up Records</div>
+                    </div>
+                </div>
+
+                <!-- start top up records  -->
+                <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">
+                                        <div class="text-master fs-11">Payment Method <span class="b-success b-a text-success fs-10 rounded p-l-5 p-r-5 m-l-5 bg-white">Success</span></div>
+                                    </div>
+                                    <div class="col-auto">
+                                        <p>$123,123</p>
+                                    </div>
+                                </div>
+                                <div class="row">
+                                    <div class="col">
+                                        <span class="fs-10">12-03-2021</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <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">
+                                        <div class="text-master fs-11">Payment Method <span class="b-danger b-a text-danger fs-10 rounded p-l-5 p-r-5 m-l-5 bg-white">Failed</span></div>
+                                    </div>
+                                    <div class="col-auto">
+                                        <p>$123,123</p>
+                                    </div>
+                                </div>
+                                <div class="row">
+                                    <div class="col">
+                                        <span class="fs-10">12-03-2021</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <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">
+                                        <div class="text-master fs-11">Payment Method <span class="b-info b-a text-info fs-10 rounded p-l-5 p-r-5 m-l-5 bg-white">Processing</span></div>
+                                    </div>
+                                    <div class="col-auto">
+                                        <p>$123,123</p>
+                                    </div>
+                                </div>
+                                <div class="row">
+                                    <div class="col">
+                                        <span class="fs-10">12-03-2021</span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index 84e1f2c1..23b4499c 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -75,6 +75,10 @@ Route::get('/transfer/merge/{marking}', function ($marking) {
     return view('pages.bookings.merge', ['marking' => $marking]);
 })->name('booking.merge');
 
+Route::get('/wallet-transactions', function () {
+    return view('pages.wallet.index');
+})->name('wallet.transactions');
+
 Route::get('/test', function(){
 
 //    Auth::login(User::findOrFail(1));