diff --git a/resources/assets/vue/components/companies/sections/CustomerDashboardSectionComponent.vue b/resources/assets/vue/components/companies/sections/CustomerDashboardSectionComponent.vue
new file mode 100644
index 00000000..d676e525
--- /dev/null
+++ b/resources/assets/vue/components/companies/sections/CustomerDashboardSectionComponent.vue
@@ -0,0 +1,282 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row">
+                <div class="col">
+                    <div class="row">
+                        <div class="col-12">
+                            <div class="row m-b-20 m-r-0">
+                                <div class="col">
+                                    <div class="row">
+                                        <div class="col">
+                                            <div class="row" style="background-image: url('/images/—Pngtree—2019 chinese new year lantern_951828.jpg'); background-size: cover;">
+                                                <div class="col no-padding">
+                                                    <div class="text-white text-center p-t-25 p-l-25 p-r-25" style="background-color: rgba(0,0,0,0.4);">
+                                                        <div class="row">
+                                                            <div class="col">
+                                                                <div class="row m-b-20">
+                                                                    <div class="col">
+                                                                        <p class="m-b-0">新年快乐！</p>
+                                                                        <p class="m-b-15">CIEF祝您春节快乐，万事如意，财运亨通，虎虎生威！<br>在此想通知您公司复工日期如下 :-</p>
+                                                                        <p class="m-b-15 bold">客服团队 ： 2022年2月7日</p>
+                                                                        <p class="bold">* 假期期间 Exchange 照常可以下单，人民币复工之后就可以安排汇款</p>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="row m-b-20">
+                                                                    <div class="col">
+                                                                        <p class="m-b-0">Happy Chinese New Year!</p>
+                                                                        <p class="m-b-15">CIEF wishes you a successful & prosperous Chinese New Year.. may your business prosper with every opportunity that comes your way. <br>We would like to also update you about our company's operation resume dates as below :-</p>
+                                                                        <p class="m-b-15 bold">Customer Service : 07 February 2022</p>
+                                                                        <p class="bold">* EXCHANGE bookings can be placed as usual during the holidays , RMB transfers will be arranged after operation resume.</p>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <list-component style="min-height: auto;" section="customerAnnouncements" :emptyListSection=false :endpoint="route('api.announcement.list')" :options="{has_segments:true,is_published:true}">
+                                <template slot="list" slot-scope="{data}">
+                                    <view-announcement-form-component :data="data" section="customerAnnouncements"></view-announcement-form-component>
+                                </template>
+                            </list-component>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-12 col-lg-4 col-xl-4 mb-3 mb-md-0">
+                            <div class="row">
+                                <div class="col no-padding">
+                                    <div class="absolute b-a b-success b-thick padding-5 animate__animated animate__infinite animate__pulse w-100 h-100" v-if="attention" style="top:0; left:0; z-index: -1;">
+                                        <div class="b-a b-thick b-success h-100"></div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <booking-form-component :data="company" section="customerProfileSection" v-if="company" v-on:click.native="attention = false"></booking-form-component>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-12 col-lg col-xl">
+                            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
+                            <div class="row" v-if="!isLoading">
+                                <div class="col">
+                                    <div class="row m-l-0 m-r-0" v-show="!company.status || !company.bookings.length">
+                                        <div class="col">
+                                            <onboarding-section-component :data="company" v-on:attention="attention = true"></onboarding-section-component>
+                                        </div>
+                                    </div>
+                                    <div class="row tabsContainer"
+                                         v-show="(company.status === 2 || company.status === 1) && company.bookings.length">
+                                        <div class="col">
+                                            <div class="row m-l-0 m-r-0">
+                                                <div class="col-6 col-md-8">
+                                                    <div class="row">
+                                                        <div class="col m-r-5">
+                                                            <div class="row fs-12 text-center">
+                                                                <div class="col p-t-20 p-b-20 bg-master-lighter active tabButton" tab-name="transfers">
+                                                                    <div class="row justify-content-center m-b-5">
+                                                                        <div class="col-auto">
+                                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                                                 width="35" height="35"
+                                                                                 viewBox="0 0 172 172"
+                                                                                 style=" fill:#000000;"><defs><linearGradient x1="86" y1="104.14063" x2="86" y2="140.57775" gradientUnits="userSpaceOnUse" id="color-1_44825_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="86" y1="16.125" x2="86" y2="159.93044" gradientUnits="userSpaceOnUse" id="color-2_44825_gr2"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M121.41588,139.75h-70.83175c-2.53431,0 -3.66575,-3.18469 -1.6985,-4.78106l33.72544,-27.40175c1.97531,-1.60444 4.80256,-1.60444 6.77787,0l33.72544,27.40175c1.96725,1.59638 0.83581,4.78106 -1.6985,4.78106z" fill="url(#color-1_44825_gr1)"></path><path d="M148.135,71.77238l-8.385,-8.385v-28.42031c0,-4.46125 -3.63081,-8.09206 -8.09206,-8.09206h-2.65794v-2.65794c0,-4.46125 -3.63081,-8.09206 -8.09206,-8.09206h-69.81587c-4.46125,0 -8.09206,3.63081 -8.09206,8.09206v2.65794h-2.65794c-4.46125,0 -8.09206,3.63081 -8.09206,8.09206v28.42031l-8.385,8.385c-1.5265,1.52381 -2.365,3.55019 -2.365,5.70825v64.95688c0,7.40944 6.02806,13.4375 13.4375,13.4375h102.125c7.40944,0 13.4375,-6.02806 13.4375,-13.4375v-64.95688c0,-2.15806 -0.84119,-4.18444 -2.365,-5.70825zM77.60156,91.96356l-0.30906,0.24725c-1.28731,-1.79525 -2.0425,-3.92375 -2.0425,-6.21081c0,-5.92862 4.82138,-10.75 10.75,-10.75c5.92863,0 10.75,4.82138 10.75,10.75c0,2.26287 -0.70413,4.41019 -2.01294,6.235l-0.34131,-0.27412c-4.93962,-3.95063 -11.84919,-3.95063 -16.79419,0.00269zM86,69.875c-8.89294,0 -16.125,7.23206 -16.125,16.125c0,3.53406 1.14487,6.85581 3.18738,9.59438l-10.578,8.46025l-3.35937,-2.6875v-55.88388c6.95256,-1.06963 12.16094,-6.28069 13.23325,-13.23325h27.2835c1.06963,6.95256 6.28069,12.16094 13.23325,13.23325v55.88656l-3.35937,2.6875l-10.56994,-8.45488c2.07744,-2.79231 3.17931,-6.10869 3.17931,-9.60244c0,-8.89294 -7.23206,-16.125 -16.125,-16.125zM58.179,107.5l-31.304,25.04481v-50.08694zM145.125,82.45519v50.08963l-31.30669,-25.04481zM144.33488,75.5725c0.11825,0.11825 0.18006,0.27412 0.27412,0.4085l-4.859,3.88612v-8.8795zM131.65794,32.25c1.49962,0 2.71706,1.21744 2.71706,2.71706v49.20275l-5.375,4.3v-56.21981zM51.09206,21.5h69.81856c1.49694,0 2.71438,1.21744 2.71438,2.71706v68.55275l-5.375,4.3v-56.75731h-2.6875c-6.22694,0 -10.75,-4.52306 -10.75,-10.75v-2.6875h-37.625v2.6875c0,6.22694 -4.52306,10.75 -10.75,10.75h-2.6875v56.75731l-5.375,-4.3v-68.55275c0,-1.49962 1.21744,-2.71706 2.71706,-2.71706zM40.34206,32.25h2.65794v56.21981l-5.375,-4.3v-49.20275c0,-1.49963 1.21744,-2.71706 2.71706,-2.71706zM32.25,70.98763v8.88219l-4.859,-3.88881c0.09406,-0.13438 0.15587,-0.29025 0.27412,-0.4085zM137.0625,150.5h-102.125c-4.44513,0 -8.0625,-3.61738 -8.0625,-8.0625v-3.00463l54.08325,-43.27144c2.96969,-2.37306 7.11381,-2.37306 10.08081,0l54.08594,43.26875v3.00731c0,4.44513 -3.61737,8.0625 -8.0625,8.0625z" fill="url(#color-2_44825_gr2)"></path></g></g></svg>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="row">
+                                                                        <div class="col">
+                                                                            <div class="fs-12 m-t-5">My Transfers</div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col m-r-5 d-none d-md-inline">
+                                                            <div class="row fs-12 text-center">
+                                                                <div class="col p-t-20 p-b-20 bg-master-lighter tabButton" tab-name="payments">
+                                                                    <div class="row justify-content-center m-b-5">
+                                                                        <div class="col-auto">
+                                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+                                                                                 width="35" height="35"
+                                                                                 viewBox="0 0 172 172"
+                                                                                 style=" fill:#000000;"><defs><linearGradient x1="96.75" y1="71.30475" x2="96.75" y2="95.57556" gradientUnits="userSpaceOnUse" id="color-1_6AytYvfD4mxm_gr1"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="68.53125" y1="69.47456" x2="68.53125" y2="93.72119" gradientUnits="userSpaceOnUse" id="color-2_6AytYvfD4mxm_gr2"><stop offset="0" stop-color="#4ec9ff"></stop><stop offset="1" stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="32.25" y1="16.06856" x2="32.25" y2="137.557" gradientUnits="userSpaceOnUse" id="color-3_6AytYvfD4mxm_gr3"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="32.25" y1="16.06856" x2="32.25" y2="137.557" gradientUnits="userSpaceOnUse" id="color-4_6AytYvfD4mxm_gr4"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="16.06856" x2="45.6875" y2="137.557" gradientUnits="userSpaceOnUse" id="color-5_6AytYvfD4mxm_gr5"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="16.06856" x2="45.6875" y2="137.557" gradientUnits="userSpaceOnUse" id="color-6_6AytYvfD4mxm_gr6"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="16.06856" x2="45.6875" y2="137.557" gradientUnits="userSpaceOnUse" id="color-7_6AytYvfD4mxm_gr7"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="45.6875" y1="16.06856" x2="45.6875" y2="137.557" gradientUnits="userSpaceOnUse" id="color-8_6AytYvfD4mxm_gr8"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="72.5625" y1="16.06856" x2="72.5625" y2="137.557" gradientUnits="userSpaceOnUse" id="color-9_6AytYvfD4mxm_gr9"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="61.8125" y1="16.06856" x2="61.8125" y2="137.557" gradientUnits="userSpaceOnUse" id="color-10_6AytYvfD4mxm_gr10"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="153.1875" y1="16.06856" x2="153.1875" y2="137.557" gradientUnits="userSpaceOnUse" id="color-11_6AytYvfD4mxm_gr11"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient><linearGradient x1="79.28125" y1="16.06856" x2="79.28125" y2="137.557" gradientUnits="userSpaceOnUse" id="color-12_6AytYvfD4mxm_gr12"><stop offset="0" stop-color="#009add"></stop><stop offset="1" stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g><path d="M86,86c0,5.93669 4.81331,10.75 10.75,10.75c5.93669,0 10.75,-4.81331 10.75,-10.75c0,-5.93669 -4.81331,-10.75 -10.75,-10.75c-5.93669,0 -10.75,4.81331 -10.75,10.75z" fill="url(#color-1_6AytYvfD4mxm_gr1)"></path><path d="M61.8125,94.67794v-17.35587c0,-1.14487 0.92719,-2.07206 2.07206,-2.07206h9.29337c1.14487,0 2.07206,0.92719 2.07206,2.07206v17.35587c0,1.14487 -0.92719,2.07206 -2.07206,2.07206h-9.29337c-1.14488,0 -2.07206,-0.92719 -2.07206,-2.07206z" fill="url(#color-2_6AytYvfD4mxm_gr2)"></path><rect x="11" y="28" transform="scale(2.6875,2.6875)" width="2" height="11" fill="url(#color-3_6AytYvfD4mxm_gr3)"></rect><rect x="11" y="42" transform="scale(2.6875,2.6875)" width="2" height="12" fill="url(#color-4_6AytYvfD4mxm_gr4)"></rect><rect x="16" y="28" transform="scale(2.6875,2.6875)" width="2" height="5" fill="url(#color-5_6AytYvfD4mxm_gr5)"></rect><rect x="16" y="35" transform="scale(2.6875,2.6875)" width="2" height="5" fill="url(#color-6_6AytYvfD4mxm_gr6)"></rect><rect x="16" y="42" transform="scale(2.6875,2.6875)" width="2" height="5" fill="url(#color-7_6AytYvfD4mxm_gr7)"></rect><rect x="16" y="49" transform="scale(2.6875,2.6875)" width="2" height="5" fill="url(#color-8_6AytYvfD4mxm_gr8)"></rect><rect x="26" y="46" transform="scale(2.6875,2.6875)" width="2" height="8" fill="url(#color-9_6AytYvfD4mxm_gr9)"></rect><rect x="22" y="46" transform="scale(2.6875,2.6875)" width="2" height="8" fill="url(#color-10_6AytYvfD4mxm_gr10)"></rect><rect x="56" y="8" transform="scale(2.6875,2.6875)" width="2" height="48" fill="url(#color-11_6AytYvfD4mxm_gr11)"></rect><path d="M134.375,13.4375h-75.25c-4.44512,0 -8.0625,3.61737 -8.0625,8.0625v40.3125h-26.95294c-4.40212,0 -7.98456,3.58244 -7.98456,7.98456v80.78087c0,4.40213 3.58244,7.98456 7.98456,7.98456h110.26544c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-129c0,-4.44513 -3.61737,-8.0625 -8.0625,-8.0625zM80.70294,153.1875h-56.59338c-1.43781,0 -2.60956,-1.17175 -2.60956,-2.60956v-80.78088c0,-1.43781 1.17175,-2.60956 2.60956,-2.60956h56.59338c1.43781,0 2.60956,1.17175 2.60956,2.60956v80.78087c0,1.43781 -1.17175,2.60956 -2.60956,2.60956zM88.6875,72.09219c2.37575,-1.38944 5.117,-2.21719 8.0625,-2.21719c8.89294,0 16.125,7.23206 16.125,16.125c0,8.89294 -7.23206,16.125 -16.125,16.125c-2.9455,0 -5.68675,-0.82775 -8.0625,-2.21719zM88.6875,105.89825c2.49131,1.02125 5.20569,1.60175 8.0625,1.60175c11.85456,0 21.5,-9.64544 21.5,-21.5c0,-11.85456 -9.64544,-21.5 -21.5,-21.5c-3.15244,0 -6.1275,0.72025 -8.82306,1.94844c-1.27119,-2.72781 -4.0205,-4.63594 -7.224,-4.63594h-13.51544v-19.03825c6.74294,-1.13681 12.07762,-6.4715 13.21444,-13.21444h32.69612c1.13681,6.74294 6.4715,12.08031 13.21444,13.21444v86.44881c-6.74294,1.13681 -12.07762,6.4715 -13.21444,13.21444h-24.41056zM137.0625,150.5c0,1.48081 -1.204,2.6875 -2.6875,2.6875h-46.16319c0.28756,-0.82237 0.47569,-1.69044 0.47569,-2.60956v-2.76544h29.5625v-2.6875c0,-5.92863 4.82137,-10.75 10.75,-10.75h2.6875v-96.75h-2.6875c-5.92863,0 -10.75,-4.82138 -10.75,-10.75v-2.6875h-43v2.6875c0,5.92862 -4.82138,10.75 -10.75,10.75h-2.6875v24.1875h-5.375v-40.3125c0,-1.48081 1.204,-2.6875 2.6875,-2.6875h75.25c1.4835,0 2.6875,1.20669 2.6875,2.6875z" fill="url(#color-12_6AytYvfD4mxm_gr12)"></path></g></g></svg>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="row">
+                                                                        <div class="col">
+                                                                            <div class="fs-12 m-t-5">Pending Payments</div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col d-none d-md-inline">
+                                                            <div class="row fs-12 text-center">
+                                                                <div class="col p-t-20 p-b-20 bg-master-lighter tabButton"
+                                                                     tab-name="PO">
+                                                                    <div class="row justify-content-center m-b-5">
+                                                                        <div class="col-auto">
+                                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"width="35" height="35"viewBox="0 0 172 172"style=" fill:#000000;"><defs><linearGradient x1="86" y1="15.84013" x2="86"y2="42.59956"gradientUnits="userSpaceOnUse"id="color-1_1GEnKV6fhh62_gr1"><stop offset="0"stop-color="#4ec9ff"></stop><stop offset="1"stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="75.30644" y1="14.46681"x2="75.30644" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-2_1GEnKV6fhh62_gr2"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="65.84106" y1="14.46681"x2="65.84106" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-3_1GEnKV6fhh62_gr3"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="75.30644" y1="14.46681"x2="75.30644" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-4_1GEnKV6fhh62_gr4"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="65.84106" y1="14.46681"x2="65.84106" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-5_1GEnKV6fhh62_gr5"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="75.30644" y1="14.46681"x2="75.30644" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-6_1GEnKV6fhh62_gr6"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="116.90625" y1="14.46681"x2="116.90625" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-7_1GEnKV6fhh62_gr7"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="116.90625" y1="14.46681"x2="116.90625" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-8_1GEnKV6fhh62_gr8"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="116.90625" y1="14.46681"x2="116.90625" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-9_1GEnKV6fhh62_gr9"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="65.84106" y1="14.46681"x2="65.84106" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-10_1GEnKV6fhh62_gr10"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="14.46681" x2="86"y2="157.82344"gradientUnits="userSpaceOnUse"id="color-11_1GEnKV6fhh62_gr11"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none"stroke-width="1" stroke-linecap="butt"stroke-linejoin="miter" stroke-miterlimit="10"stroke-dasharray="" stroke-dashoffset="0"font-family="none" font-weight="none"font-size="none" text-anchor="none"style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z"fill="none"></path><g id="original-icon"><pathd="M95.40625,45.6875h-18.8125v-17.46875c0,-5.19494 4.21131,-9.40625 9.40625,-9.40625v0c5.19494,0 9.40625,4.21131 9.40625,9.40625z"fill="url(#color-1_1GEnKV6fhh62_gr1)"></path><rect x="19.043" y="33"transform="scale(2.6875,2.6875)"width="17.957" height="2"fill="url(#color-2_1GEnKV6fhh62_gr2)"></rect><rect x="19.043" y="37"transform="scale(2.6875,2.6875)"width="10.912" height="2"fill="url(#color-3_1GEnKV6fhh62_gr3)"></rect><rect x="19.043" y="42"transform="scale(2.6875,2.6875)"width="17.957" height="2"fill="url(#color-4_1GEnKV6fhh62_gr4)"></rect><rect x="19.043" y="46"transform="scale(2.6875,2.6875)"width="10.912" height="2"fill="url(#color-5_1GEnKV6fhh62_gr5)"></rect><rect x="19.043" y="24"transform="scale(2.6875,2.6875)"width="17.957" height="2"fill="url(#color-6_1GEnKV6fhh62_gr6)"></rect><rect x="42" y="33"transform="scale(2.6875,2.6875)"width="3" height="2"fill="url(#color-7_1GEnKV6fhh62_gr7)"></rect><rect x="42" y="42"transform="scale(2.6875,2.6875)"width="3" height="2"fill="url(#color-8_1GEnKV6fhh62_gr8)"></rect><rect x="42" y="24"transform="scale(2.6875,2.6875)"width="3" height="2"fill="url(#color-9_1GEnKV6fhh62_gr9)"></rect><rect x="19.043" y="28"transform="scale(2.6875,2.6875)"width="10.912" height="2"fill="url(#color-10_1GEnKV6fhh62_gr10)"></rect><pathd="M131.6875,32.7445v-0.4945c0,-4.44513 -3.61738,-8.0625 -8.0625,-8.0625h-18.8125h-7.4605c-1.67163,-4.68163 -6.10331,-8.0625 -11.352,-8.0625c-5.24869,0 -9.68037,3.38087 -11.352,8.0625h-26.273c-4.44512,0 -8.0625,3.61737 -8.0625,8.0625v0.4945c-3.12288,1.11531 -5.375,4.06887 -5.375,7.568v107.5c0,4.44512 3.61738,8.0625 8.0625,8.0625h86c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-107.5c0,-3.49912 -2.25213,-6.45269 -5.375,-7.568zM123.625,29.5625c1.4835,0 2.6875,1.204 2.6875,2.6875h-21.5h-6.71875v-2.6875h6.71875zM79.28125,28.21875c0,-3.70606 3.01269,-6.71875 6.71875,-6.71875c3.70606,0 6.71875,3.01269 6.71875,6.71875v14.78125h-13.4375zM48.375,29.5625h25.53125v2.6875h-28.21875c0,-1.4835 1.204,-2.6875 2.6875,-2.6875zM131.6875,147.8125c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-10.75v-10.75c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h10.75zM131.6875,131.6875h-10.75c-4.44512,0 -8.0625,3.61738 -8.0625,8.0625v10.75h-69.875c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-107.5c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h30.90625v10.75h24.1875v-10.75h6.71875h24.1875c1.4835,0 2.6875,1.204 2.6875,2.6875z"fill="url(#color-11_1GEnKV6fhh62_gr11)"></path></g></g></svg>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="row">
+                                                                        <div class="col">
+                                                                            <div class="fs-12 m-t-5">Purchase Orders</div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="col-6 col-md-4">
+                                                    <div class="row justify-content-end">
+                                                        <div class="col-12 col-md-8">
+                                                            <div class="row fs-12 text-center">
+                                                                <div class="col p-t-20 p-b-20 bg-master-lighter tabButton"
+                                                                     tab-name="complete">
+                                                                    <div class="row justify-content-center m-b-5">
+                                                                        <div class="col-auto">
+                                                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"width="35" height="35"viewBox="0 0 172 172"style=" fill:#000000;"><defs><linearGradient x1="86" y1="15.84013" x2="86"y2="42.59956"gradientUnits="userSpaceOnUse"id="color-1_1GEnKV6fhh62_gr1"><stop offset="0"stop-color="#4ec9ff"></stop><stop offset="1"stop-color="#2bffe6"></stop></linearGradient><linearGradient x1="75.30644" y1="14.46681"x2="75.30644" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-2_1GEnKV6fhh62_gr2"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="65.84106" y1="14.46681"x2="65.84106" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-3_1GEnKV6fhh62_gr3"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="75.30644" y1="14.46681"x2="75.30644" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-4_1GEnKV6fhh62_gr4"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="65.84106" y1="14.46681"x2="65.84106" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-5_1GEnKV6fhh62_gr5"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="75.30644" y1="14.46681"x2="75.30644" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-6_1GEnKV6fhh62_gr6"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="116.90625" y1="14.46681"x2="116.90625" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-7_1GEnKV6fhh62_gr7"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="116.90625" y1="14.46681"x2="116.90625" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-8_1GEnKV6fhh62_gr8"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="116.90625" y1="14.46681"x2="116.90625" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-9_1GEnKV6fhh62_gr9"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="65.84106" y1="14.46681"x2="65.84106" y2="157.82344"gradientUnits="userSpaceOnUse"id="color-10_1GEnKV6fhh62_gr10"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient><linearGradient x1="86" y1="14.46681" x2="86"y2="157.82344"gradientUnits="userSpaceOnUse"id="color-11_1GEnKV6fhh62_gr11"><stop offset="0"stop-color="#009add"></stop><stop offset="1"stop-color="#00baa4"></stop></linearGradient></defs><g fill="none" fill-rule="nonzero" stroke="none"stroke-width="1" stroke-linecap="butt"stroke-linejoin="miter" stroke-miterlimit="10"stroke-dasharray="" stroke-dashoffset="0"font-family="none" font-weight="none"font-size="none" text-anchor="none"style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z"fill="none"></path><g id="original-icon"><pathd="M95.40625,45.6875h-18.8125v-17.46875c0,-5.19494 4.21131,-9.40625 9.40625,-9.40625v0c5.19494,0 9.40625,4.21131 9.40625,9.40625z"fill="url(#color-1_1GEnKV6fhh62_gr1)"></path><rect x="19.043" y="33"transform="scale(2.6875,2.6875)"width="17.957" height="2"fill="url(#color-2_1GEnKV6fhh62_gr2)"></rect><rect x="19.043" y="37"transform="scale(2.6875,2.6875)"width="10.912" height="2"fill="url(#color-3_1GEnKV6fhh62_gr3)"></rect><rect x="19.043" y="42"transform="scale(2.6875,2.6875)"width="17.957" height="2"fill="url(#color-4_1GEnKV6fhh62_gr4)"></rect><rect x="19.043" y="46"transform="scale(2.6875,2.6875)"width="10.912" height="2"fill="url(#color-5_1GEnKV6fhh62_gr5)"></rect><rect x="19.043" y="24"transform="scale(2.6875,2.6875)"width="17.957" height="2"fill="url(#color-6_1GEnKV6fhh62_gr6)"></rect><rect x="42" y="33"transform="scale(2.6875,2.6875)"width="3" height="2"fill="url(#color-7_1GEnKV6fhh62_gr7)"></rect><rect x="42" y="42"transform="scale(2.6875,2.6875)"width="3" height="2"fill="url(#color-8_1GEnKV6fhh62_gr8)"></rect><rect x="42" y="24"transform="scale(2.6875,2.6875)"width="3" height="2"fill="url(#color-9_1GEnKV6fhh62_gr9)"></rect><rect x="19.043" y="28"transform="scale(2.6875,2.6875)"width="10.912" height="2"fill="url(#color-10_1GEnKV6fhh62_gr10)"></rect><pathd="M131.6875,32.7445v-0.4945c0,-4.44513 -3.61738,-8.0625 -8.0625,-8.0625h-18.8125h-7.4605c-1.67163,-4.68163 -6.10331,-8.0625 -11.352,-8.0625c-5.24869,0 -9.68037,3.38087 -11.352,8.0625h-26.273c-4.44512,0 -8.0625,3.61737 -8.0625,8.0625v0.4945c-3.12288,1.11531 -5.375,4.06887 -5.375,7.568v107.5c0,4.44512 3.61738,8.0625 8.0625,8.0625h86c4.44512,0 8.0625,-3.61738 8.0625,-8.0625v-107.5c0,-3.49912 -2.25213,-6.45269 -5.375,-7.568zM123.625,29.5625c1.4835,0 2.6875,1.204 2.6875,2.6875h-21.5h-6.71875v-2.6875h6.71875zM79.28125,28.21875c0,-3.70606 3.01269,-6.71875 6.71875,-6.71875c3.70606,0 6.71875,3.01269 6.71875,6.71875v14.78125h-13.4375zM48.375,29.5625h25.53125v2.6875h-28.21875c0,-1.4835 1.204,-2.6875 2.6875,-2.6875zM131.6875,147.8125c0,1.4835 -1.204,2.6875 -2.6875,2.6875h-10.75v-10.75c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h10.75zM131.6875,131.6875h-10.75c-4.44512,0 -8.0625,3.61738 -8.0625,8.0625v10.75h-69.875c-1.4835,0 -2.6875,-1.204 -2.6875,-2.6875v-107.5c0,-1.4835 1.204,-2.6875 2.6875,-2.6875h30.90625v10.75h24.1875v-10.75h6.71875h24.1875c1.4835,0 2.6875,1.204 2.6875,2.6875z"fill="url(#color-11_1GEnKV6fhh62_gr11)"></path></g></g></svg>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="row">
+                                                                        <div class="col">
+                                                                            <div class="fs-12 m-t-5">Complete Orders</div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="row no-margin">
+                                                <div class="col bg-white padding-25">
+                                                    <div class="row tabsContainer tabContent active" tab-name="transfers">
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <div class="row">
+                                                                        <div class="col">
+                                                                            <list-component key="2" section="transferSection" :endpoint="route('api.booking.list')" :options="{per_page: 10, status: 2}">
+                                                                                <template slot="list" slot-scope="{data}">
+                                                                                    <booking-component :data="data"></booking-component>
+                                                                                </template>
+                                                                            </list-component>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row tabsContainer tabContent hide" tab-name="payments">
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <div class="row">
+                                                                        <div class="col">
+                                                                            <list-component key="2" section="pendingPaymentsSection" :endpoint="route('api.booking.list')" :options="{per_page: 10, status: 2, pending_payment: true}">
+                                                                                <template slot="list" slot-scope="{data}">
+                                                                                    <booking-component :data="data"></booking-component>
+                                                                                </template>
+                                                                            </list-component>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row tabsContainer hide tabContent" tab-name="PO">
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <div class="row">
+                                                                        <div class="col">
+                                                                            <list-component key="2" section="PendingPurchaseOrdersSection" :endpoint="route('api.booking.list')" :options="{per_page: 10, status: 2, pending_purchase_order: true}">
+                                                                                <template slot="list" slot-scope="{data}">
+                                                                                    <booking-component :data="data"></booking-component>
+                                                                                </template>
+                                                                            </list-component>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row tabsContainer tabContent hide" tab-name="complete">
+                                                        <div class="col">
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <div class="row">
+                                                                        <div class="col">
+                                                                            <list-component key="2" section="completeTransferSection" :endpoint="route('api.booking.list')" :options="{per_page: 10, status: 3}">
+                                                                                <template slot="list" slot-scope="{data}">
+                                                                                    <booking-component :data="data"></booking-component>
+                                                                                </template>
+                                                                            </list-component>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-3">
+                    <wallet-component :data="company"></wallet-component>
+                    <verification-warning-component v-if="!isLoading" :data="company"></verification-warning-component>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return {
+            section: 'customerProfileSection',
+            isLoading: true,
+            company: null,
+            attention: false
+        }
+    },
+    computed: {
+        pendingQueue () {
+            return this.$store.getters.isInCompleteQueue(this.section);
+        }
+    },
+    watch: {
+        pendingQueue(inComplete){
+            if(inComplete){
+                this.fetchCompany();
+            }
+        }
+    },
+    created(){
+        this.$store.dispatch('updateListQueue', {'name': this.section});
+    },
+    methods: {
+        fetchCompany(){
+            this.isLoading = true;
+            this.submit(route('api.company.show', this.$store.getters.getCompanyId), 'get', this.section, false, false)
+        },
+        successHandler(response){
+            this.$store.dispatch('completeList', {'name': this.section, 'data': []});
+            this.isLoading = false;
+            this.company = response.payload.data;
+        }
+    }
+}
+</script>