From 5156d0d03393cb427829c069f0037c77dff92876 Mon Sep 17 00:00:00 2001
From: omair saleh <uldvstar@gmail.com>
Date: Fri, 18 Feb 2022 10:19:28 +0800
Subject: [PATCH] fix bill seeder

---
 app/Http/Resources/TransactionResource.php    |   3 +-
 .../elements/PaymentHistoryComponent.vue      |  56 ++--
 .../CustomerDashboardSectionComponent.vue     | 248 ++++++++++++++++++
 3 files changed, 278 insertions(+), 29 deletions(-)

diff --git a/app/Http/Resources/TransactionResource.php b/app/Http/Resources/TransactionResource.php
index 3ce9f6c7..091b9ae1 100644
--- a/app/Http/Resources/TransactionResource.php
+++ b/app/Http/Resources/TransactionResource.php
@@ -35,7 +35,8 @@ class TransactionResource extends JsonResource
             'status' => (int) $this->status,
             'details' => TransactionDetailResource::collection($this->transactionDetails),
             'documents' => new DocumentResource($this->documents()->first()),
-            'customer_booking' => new TransactionResource($this->when((int) $this->type === TransactionType::BILL,  $this->owner)),
+            'transaction_payment' => new TransactionResource($this->when((int) $this->type === TransactionType::BILL,  $this->owner)),
+            'transaction_bill' => new TransactionResource($this->when((int) $this->type === TransactionType::PAYMENT,  $this->transactions()->first())),
             'expires_on' => Carbon::parse($this->expires_on)->format('d-m-Y h:i:s A'),
             'updated_at' => Carbon::parse($this->updated_at)->format('d-m-Y h:i:s A'),
             'interval' => [
diff --git a/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue b/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
index 36cdac82..776f72b5 100644
--- a/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
+++ b/resources/assets/vue/components/bookings/elements/PaymentHistoryComponent.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="row m-l-0 m-b-10 m-r-0 parentContainer" :class="[{'b-a': item.status === 4}, {'b-danger': item.status === 4}]" >
         <div class="col">
-            <div class="row" v-if="item.type === 1">
+            <div class="row" v-if="!item.transaction_bill">
                 <div class="col">
                     <div class="row">
                         <div class="col p-t-10 p-b-10 p-r-0 pointer" @click="clickExpand()" :class="[{'bg-master-lighter': item.status === 1}, {'bg-white': item.status !== 1 && item.status !== 4}]">
@@ -40,45 +40,45 @@
                     </div>
                 </div>
             </div>
-            <div class="row" v-if="item.type === 3">
+            <div class="row" v-if="item.transaction_bill">
                 <div class="col">
                     <div class="row">
-                        <div class="col p-t-10 p-b-10 p-r-0 pointer" @click="clickExpand()" :class="[{'bg-master-lighter': item.status === 1}, {'bg-white': item.status !== 1 && item.status !== 4}]">
+                        <div class="col p-t-10 p-b-10 p-r-0 pointer" @click="clickExpand()" :class="[{'bg-master-lighter': item.transaction_bill.status === 1}, {'bg-white': item.transaction_bill.status !== 1 && item.transaction_bill.status !== 4}]">
                             <div class="row m-b-5">
                                 <div class="col-auto">
                                     <div class="font-heading fs-8 muted all-caps">Status</div>
-                                    <div class="font-heading fs-10 bold" :class="[{'text-danger': item.status === 1 || item.status === 4}, {'text-success': item.status !== 1 && item.status !== 4}]">
-                                        {{ item.status === 1 ? 'Processing Payment' : 'Transferred'}}
+                                    <div class="font-heading fs-10 bold" :class="[{'text-danger': item.transaction_bill.status === 1 || item.transaction_bill.status === 4}, {'text-success': item.transaction_bill.status !== 1 && item.transaction_bill.status !== 4}]">
+                                        {{ item.transaction_bill.status === 1 ? 'Processing Payment' : 'Transferred'}}
                                     </div>
                                 </div>
                                 <div class="col-auto p-l-0">
                                     <div class="font-heading fs-8 muted all-caps">Payment Amount</div>
                                     <div class="font-heading fs-10 bold">
-                                        {{item.original_currency.short_code}} {{(Math.round((item.original_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
+                                        {{item.transaction_bill.original_currency.short_code}} {{(Math.round((item.transaction_bill.original_amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}
                                     </div>
                                 </div>
                                 <div class="col-auto" v-if="$store.getters.isAdmin">
                                     <div class="font-heading fs-8 muted all-caps">Supplier</div>
                                     <div class="font-heading fs-10 bold">
-                                        {{item.issuer_name}}
+                                        {{item.transaction_bill.issuer_name}}
                                     </div>
                                 </div>
                             </div>
                             <div class="row">
                                 <div class="col">
-                                    <div class="font-heading fs-8 all-caps" >{{ item.status === 1 ? 'Paid On: ' + customerBooking.updated_at : 'Transferred On:' + item.updated_at }}</div>
+                                    <div class="font-heading fs-8 all-caps" >{{ item.transaction_bill.status === 1 ? 'Paid On: ' + item.updated_at : 'Transferred On:' + item.transaction_bill.updated_at }}</div>
                                 </div>
                             </div>
                         </div>
-                        <div class="col-auto" v-if="item.status !== 3 && item.status !== 2" :class="[{'bg-master-light': item.status === 1}, {'bg-master-lighter': item.status === 2}]">
+                        <div class="col-auto" v-if="item.transaction_bill.status !== 3 && item.transaction_bill.status !== 2" :class="[{'bg-master-light': item.transaction_bill.status === 1}, {'bg-master-lighter': item.transaction_bill.status === 2}]">
                             <div class="row align-items-center h-100">
                                 <div class="col">
-                                    <i class="fa" :class="[{'fa-cloud-download': item.status === 1 || item.status === 2}, {'fa-ban': item.status === 4}, {'muted': item.status === 1 || item.status === 2}, {'text-danger':  item.status === 4}]"></i>
+                                    <i class="fa" :class="[{'fa-cloud-download': item.transaction_bill.status === 1 || item.transaction_bill.status === 2}, {'fa-ban': item.transaction_bill.status === 4}, {'muted': item.transaction_bill.status === 1 || item.transaction_bill.status === 2}, {'text-danger':  item.transaction_bill.status === 4}]"></i>
                                 </div>
                             </div>
                         </div>
-                        <div class="col-auto bg-success" v-if="item.status === 2 || item.status === 3">
-                            <document-file-viewer-component class="h-100" :file="item.documents.files[0]">
+                        <div class="col-auto bg-success" v-if="item.transaction_bill.status === 2 || item.transaction_bill.status === 3">
+                            <document-file-viewer-component class="h-100" :file="item.transaction_bill.documents.files[0]">
                                 <template slot="button">
                                     <div class="row align-items-center h-100">
                                         <div class="col">
@@ -98,7 +98,7 @@
                             <div class="font-heading all-caps fs-10">Recipient Gets</div>
                         </div>
                         <div class="col-auto text-right">
-                            <div class="font-heading fs-10">{{this.customerBooking.original_currency.short_code}} {{(item.original_amount).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
+                            <div class="font-heading fs-10">{{item.original_currency.short_code}} {{(item.original_amount).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                         </div>
                     </div>
                     <div class="row align-items-end bold m-b-10 text-primary">
@@ -106,7 +106,7 @@
                             <div class="font-heading all-caps fs-10">Rate</div>
                         </div>
                         <div class="col-auto text-right">
-                            <div class="font-heading fs-10 ">{{(Math.round((this.customerBooking.currency_rate + Number.EPSILON) * 100000) / 100000).toFixed(5) }}</div>
+                            <div class="font-heading fs-10 ">{{(Math.round((item.currency_rate + Number.EPSILON) * 100000) / 100000).toFixed(5) }}</div>
                         </div>
                     </div>
                     <div class="row align-items-end m-b-10 hint-text">
@@ -114,7 +114,7 @@
                             <div class="font-heading all-caps fs-10">Transfer Charges</div>
                         </div>
                         <div class="col-auto text-right">
-                            <div class="font-heading fs-10">MYR {{(Math.round((this.customerBooking.service_charge + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
+                            <div class="font-heading fs-10">MYR {{(Math.round((item.service_charge + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
                         </div>
                     </div>
                     <div class="row align-items-end m-b-5 hint-text">
@@ -122,7 +122,7 @@
                             <div class="font-heading all-caps fs-10">Tax</div>
                         </div>
                         <div class="col-auto text-right">
-                            <div class="font-heading fs-10">MYR {{(Math.round((this.customerBooking.tax  + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
+                            <div class="font-heading fs-10">MYR {{(Math.round((item.tax  + Number.EPSILON) * 100) / 100).toFixed(2)}}</div>
                         </div>
                     </div>
                     <div class="row align-items-end m-b-10 bold text-success">
@@ -130,15 +130,15 @@
                             <div class="font-heading all-caps fs-10">Your Payment</div>
                         </div>
                         <div class="col-auto text-right">
-                            <div class="font-heading fs-12">MYR {{(Math.round((this.customerBooking.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
+                            <div class="font-heading fs-12">MYR {{(Math.round((item.amount + Number.EPSILON) * 100) / 100).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}}</div>
                         </div>
                     </div>
                     <div class="row">
                         <div class="col">
                             <div class="font-heading all-caps fs-10 m-b-5">Your Payment Proof</div>
-                            <div class="row no-margin" v-if="customerBooking.payment_method !== 5">
-                                <div v-if="customerBooking.documents != null">
-                                    <div v-for="file in customerBooking.documents.files" v-bind:key="file.id"  class="col-auto no-padding m-r-5">
+                            <div class="row no-margin" v-if="item.payment_method !== 5">
+                                <div v-if="item.documents != null">
+                                    <div v-for="file in item.documents.files" v-bind:key="file.id"  class="col-auto no-padding m-r-5">
                                         <document-file-viewer-component :file="file">
                                             <template slot="button">
                                                 <div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
@@ -149,8 +149,8 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="row no-margin" v-if="customerBooking.payment_method === 5 && (customerBooking.status === 2 || customerBooking.status === 3)">
-                                <a :href="route('billplz.bill', customerBooking.payment_reference)" target="_blank">
+                            <div class="row no-margin" v-if="item.payment_method === 5 && (item.status === 2 || item.status === 3)">
+                                <a :href="route('billplz.bill', item.payment_reference)" target="_blank">
                                     <div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-5">
                                         <i class="fa fa-file-image-o fs-10"></i>
                                     </div>
@@ -159,8 +159,8 @@
                         </div>
                         <div class="col text-right">
                             <div class="font-heading all-caps fs-10 m-b-5">Our Payment Proof</div>
-                            <div class="row no-margin justify-content-end" v-if="item.type === 3 && (item.status === 2 || item.status === 3)">
-                                <div v-for="file in item.documents.files" v-bind:key="file.id"  class="col-auto no-padding m-l-5">
+                            <div class="row no-margin justify-content-end" v-if="(item.transaction_payment.status === 2 || item.transaction_payment.status === 3)">
+                                <div v-for="file in item.transaction_payment.documents.files" v-bind:key="file.id"  class="col-auto no-padding m-l-5">
                                     <document-file-viewer-component :file="file">
                                         <template slot="button">
                                             <div class="icon-thumbnail fs-11 text-white icon-25 bg-primary btn-rounded float-left m-r-0">
@@ -230,9 +230,9 @@
                             </div>
                         </div>
                     </div>
-                    <div class="row m-r-0 m-b-10" v-if="refundMethod.name == 'Fully Refund'">
+                    <div class="row m-r-0 m-b-10" v-if="refundMethod.name === 'Fully Refund'">
                         <div class="col p-r-0">
-                            <validation-wrapper-component :validator="parameters.amount" v-if="refundMethod.name == 'Fully Refund'">
+                            <validation-wrapper-component :validator="parameters.amount" v-if="refundMethod.name === 'Fully Refund'">
                                 <label>Amount</label>
                                 <input class="form-control disabled" name="amount" v-model.lazy="amount" disabled>
                             </validation-wrapper-component>
@@ -245,7 +245,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="row m-r-0 m-b-10" v-if="refundMethod.name == 'Partially Refund'">
+                    <div class="row m-r-0 m-b-10" v-if="refundMethod.name === 'Partially Refund'">
                         <div class="col p-r-0">
                             <validation-wrapper-component :validator="parameters.amount">
                                 <label>Amount</label>
@@ -316,7 +316,7 @@
                 this.expandPaymentDetails = !this.expandPaymentDetails;
             },
             clickExpand(){
-                if (this.expandPaymentDetails == false && this.expandRefund == false) {
+                if (this.expandPaymentDetails === false && this.expandRefund === false) {
                     this.expandPaymentDetails = !this.expandPaymentDetails;
                 } else {
                     this.expandRefund = false;
diff --git a/resources/assets/vue/components/companies/sections/CustomerDashboardSectionComponent.vue b/resources/assets/vue/components/companies/sections/CustomerDashboardSectionComponent.vue
index e69de29b..b8e92fc1 100644
--- a/resources/assets/vue/components/companies/sections/CustomerDashboardSectionComponent.vue
+++ b/resources/assets/vue/components/companies/sections/CustomerDashboardSectionComponent.vue
@@ -0,0 +1,248 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row">
+                <div class="col">
+                    <div class="row">
+                        <div class="col-12">
+                            <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>