From bc96dad3220eee59219679e829142147cf563e85 Mon Sep 17 00:00:00 2001
From: Haziq Danial <haziqdanial031@gmail.com>
Date: Wed, 26 May 2021 16:22:30 +0800
Subject: [PATCH] Added responsiveness to customer dashboard

---
 .../customerDashboardSectionComponent.vue     | 449 +++++++++++++++---
 1 file changed, 393 insertions(+), 56 deletions(-)

diff --git a/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue b/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue
index 27cc564f..df33cc3a 100644
--- a/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue
+++ b/resources/assets/vue/components/companies/sections/customerDashboardSectionComponent.vue
@@ -1,37 +1,45 @@
 <template>
+
     <div class="row">
-        <div class="col-3">
+        <div class="order-last col-md-12 order-md-last col-lg-3 order-lg-first col-xl-3 order-xl-first">
             <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="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>
+                            <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">
-            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
+        <div class="order-first col-md-12 order-md-first col-lg order-lg-last col-xl order-xl-last">
+            <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>
+                            <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="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 d-none d-md-flex">
                                 <div class="col">
                                     <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="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"
@@ -69,13 +77,170 @@
                                         </div>
                                         <div class="col">
                                             <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="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"><path d="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><path d="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>
+                                                                 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">
+                                                                        <path
+                                                                            d="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>
+                                                                        <path
+                                                                            d="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">
@@ -92,13 +257,170 @@
                                     <div class="row justify-content-end">
                                         <div class="col-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="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"><path d="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><path d="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>
+                                                                 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">
+                                                                        <path
+                                                                            d="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>
+                                                                        <path
+                                                                            d="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">
@@ -120,9 +442,12 @@
                                                 <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}">
+                                                            <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>
+                                                                    <booking-component
+                                                                        :data="data"></booking-component>
                                                                 </template>
                                                             </list-component>
                                                         </div>
@@ -137,9 +462,12 @@
                                                 <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}">
+                                                            <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>
+                                                                    <booking-component
+                                                                        :data="data"></booking-component>
                                                                 </template>
                                                             </list-component>
                                                         </div>
@@ -154,9 +482,13 @@
                                                 <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}">
+                                                            <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>
+                                                                    <booking-component
+                                                                        :data="data"></booking-component>
                                                                 </template>
                                                             </list-component>
                                                         </div>
@@ -171,9 +503,13 @@
                                                 <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}">
+                                                            <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>
+                                                                    <booking-component
+                                                                        :data="data"></booking-component>
                                                                 </template>
                                                             </list-component>
                                                         </div>
@@ -189,46 +525,47 @@
                 </div>
             </div>
         </div>
-        <div class="col-2 p-l-0 p-r-0">
-            <verification-warning-component v-if="!isLoading && company.bookings.length"  :data="company"></verification-warning-component>
+        <div class="col-2 p-l-0 p-r-0 order-last">
+            <verification-warning-component v-if="!isLoading && company.bookings.length"
+                                            :data="company"></verification-warning-component>
         </div>
     </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;
+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>
\ No newline at end of file
+}
+</script>