diff --git a/resources/assets/js/components/AdminProgressTrack.vue b/resources/assets/js/components/AdminProgressTrack.vue
index c7836d93..499f307b 100644
--- a/resources/assets/js/components/AdminProgressTrack.vue
+++ b/resources/assets/js/components/AdminProgressTrack.vue
@@ -6,7 +6,7 @@
       <el-step title="Supplier Booking"/>
       <el-step title="Supplier Report"/>
       <el-step title="Upload China Bankslip To Booking"/>
-      <el-step v-if="(value.term == 'x1_cash' || value.term == 'x1_cheque' || value.term == 'x1_ba')" title="Purchase Order/Invoice"/>
+      <el-step title="Purchase Order/Invoice"/>
       <el-step title="Completed"/>
     </el-steps>
   </el-row>
diff --git a/resources/assets/js/components/ProgressTrack.vue b/resources/assets/js/components/ProgressTrack.vue
index f7238a85..170a26ea 100644
--- a/resources/assets/js/components/ProgressTrack.vue
+++ b/resources/assets/js/components/ProgressTrack.vue
@@ -4,9 +4,9 @@
       <el-step title="Booking"/>
       <el-step title="Payment"/>
       <el-step title="Order Confirmation"/>
-      <el-step v-if="(value.term == 'x1_cash' || value.term == 'x1_cheque' || value.term == 'x1_ba')" title="Processing Transfer"/>
-      <el-step v-if="(value.term == 'x1_cash' || value.term == 'x1_cheque' || value.term == 'x1_ba')" title="Transfer Complete"/>
-      <el-step v-if="(value.term == 'x1_cash' || value.term == 'x1_cheque' || value.term == 'x1_ba')" title="Processing Invoice"/>
+      <el-step title="Processing Transfer"/>
+      <el-step title="Transfer Complete"/>
+      <el-step title="Processing Invoice"/>
       <el-step title="Order Complete"/>
     </el-steps>
   </el-row>
diff --git a/resources/assets/js/pages/admin/booking/bookingDetail.vue b/resources/assets/js/pages/admin/booking/bookingDetail.vue
index 197f77c9..8bbf33aa 100644
--- a/resources/assets/js/pages/admin/booking/bookingDetail.vue
+++ b/resources/assets/js/pages/admin/booking/bookingDetail.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig" />
+    <x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
 
     <div align="center">
       <h4 style="margin-top:5%;"></h4>
@@ -211,11 +212,13 @@
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
+  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
   import axios from 'axios'
 
   export default {
     components: {
-      'progress-track': ProgressTrack
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
     },
     data() {
       return {
diff --git a/resources/assets/js/pages/admin/booking/completed.vue b/resources/assets/js/pages/admin/booking/completed.vue
index e3f14b71..ee794a63 100644
--- a/resources/assets/js/pages/admin/booking/completed.vue
+++ b/resources/assets/js/pages/admin/booking/completed.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig"/>
+    <x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
 
     <div align="center">
       <h4 style="margin-top:5%;">Order Completed</h4>
@@ -66,7 +67,7 @@
       </el-col>
     </el-row>
     <br>
-    <!-- bank slips END --> 
+    <!-- bank slips END -->
 
     <el-row justify="center" align="center">
       <el-card class="box-card">
@@ -91,7 +92,7 @@
         <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
           <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
             <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
-            
+
               <div class="el-table__body-wrapper is-scrolling-none">
                 <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
                   <colgroup>
@@ -219,7 +220,9 @@
                         <div class="cell"></div>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"><b>MYR {{ booking_details.bia }}</b></div>
+                        <div class="cell">
+                          <b>MYR {{ booking_details.bia }}</b>
+                        </div>
                       </td>
                     </tr>
                     <tr class="el-table__row">
@@ -284,77 +287,80 @@
   .booking-details {
     font-weight: bold;
   }
+
   .image {
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      margin-left: auto;
-      margin-right: auto;
-      width: 150px;
-      display: block;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 150px;
+    display: block;
   }
+
   .image:hover {
     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   }
 </style>
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
-import ProgressTrack from '~/components/AdminProgressTrack'
-import axios from 'axios'
+  import ProgressTrack from '~/components/AdminProgressTrack'
+  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
+  import axios from 'axios'
 
-export default {
-  components: {
-    'progress-track': ProgressTrack
-  },
-  data () {
-    return {
-      trackerConfig :{
+  export default {
+    components: {
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
+    },
+    data() {
+      return {
+        trackerConfig: {
           status: 8,
           term: null
         },
-      loading_btn: false,
-      booking_details:{
+        loading_btn: false,
+        booking_details: {
           id: null,
           amount: null,
           bia: null,
           user_bankslip_path: null,
         }
-    }
-  },
-  beforeCreate () {
-    const loading = this.$loading({
-      lock: true,
-      text: 'Please wait..',
-      spinner: 'el-icon-loading',
-      background: 'rgba(0, 0, 0, 0.7)'
-    })
-
-    axios
-      .get('/api/admin/booking/' + this.$route.params.id)
-      .then((response) => {
-        this.booking_details = response.data
-        this.trackerConfig.term = response.data.term;
-        loading.close()
-      }).catch((error) => {
-        console.log(error)
-        loading.close()
-        this.$router.push({
-          name: 'notfound'
-        })
+      }
+    },
+    beforeCreate() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Please wait..',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
       })
-  },
-  methods: {
-    getExtension(path){
-      return path.slice(-3);
+
+      axios
+        .get('/api/admin/booking/' + this.$route.params.id)
+        .then((response) => {
+          this.booking_details = response.data
+          this.trackerConfig.term = response.data.term;
+          loading.close()
+        }).catch((error) => {
+          console.log(error)
+          loading.close()
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
     },
-    isImage(path){
-      var ext = this.getExtension(path);
-      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
-    },
-    getURL(path){
-      var getUrl = window.location;
-      var baseUrl = getUrl.protocol + "//" + getUrl.host;
-      return baseUrl + path;
+    methods: {
+      getExtension(path) {
+        return path.slice(-3);
+      },
+      isImage(path) {
+        var ext = this.getExtension(path);
+        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+      },
+      getURL(path) {
+        var getUrl = window.location;
+        var baseUrl = getUrl.protocol + "//" + getUrl.host;
+        return baseUrl + path;
+      }
     }
   }
-}
-</script>
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/admin/booking/supplierBooking.vue b/resources/assets/js/pages/admin/booking/supplierBooking.vue
index c4490a78..8808f67f 100644
--- a/resources/assets/js/pages/admin/booking/supplierBooking.vue
+++ b/resources/assets/js/pages/admin/booking/supplierBooking.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig" />
+    <x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
 
     <div align="center">
       <h4 style="margin-top:5%;"></h4>
@@ -237,11 +238,13 @@
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
+  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
   import axios from 'axios'
 
   export default {
     components: {
-      'progress-track': ProgressTrack
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
     },
     data() {
       return {
diff --git a/resources/assets/js/pages/admin/booking/supplierReport.vue b/resources/assets/js/pages/admin/booking/supplierReport.vue
index 1bec13fb..af44ac0c 100644
--- a/resources/assets/js/pages/admin/booking/supplierReport.vue
+++ b/resources/assets/js/pages/admin/booking/supplierReport.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig" />
+    <x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
 
     <div align="center">
       <h4 style="margin-top:5%;"></h4>
@@ -252,11 +253,12 @@
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
   import axios from 'axios'
-  import Canvas2Image from 'canvas2image'
+  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
 
   export default {
     components: {
-      'progress-track': ProgressTrack
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
     },
     data() {
       return {
diff --git a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
index 5b66d902..789afff0 100644
--- a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
+++ b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig" />
+    <x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
 
     <div align="center">
       <h4 style="margin-top:5%;"></h4>
@@ -245,11 +246,13 @@
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
+  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
   import axios from 'axios'
 
   export default {
     components: {
-      'progress-track': ProgressTrack
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
     },
     data() {
       return {
diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index 560ed25d..49537759 100644
--- a/resources/assets/js/pages/admin/booking/uploadInvoice.vue
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig" />
+    <x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
 
     <div align="center">
       <h4 style="margin-top:5%;"></h4>
@@ -246,11 +247,13 @@
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
+  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
   import axios from 'axios'
 
   export default {
     components: {
-      'progress-track': ProgressTrack
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
     },
     data() {
       return {
diff --git a/resources/assets/js/pages/admin/booking/verification.vue b/resources/assets/js/pages/admin/booking/verification.vue
index 39b2f2b3..638ec861 100644
--- a/resources/assets/js/pages/admin/booking/verification.vue
+++ b/resources/assets/js/pages/admin/booking/verification.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig" />
+    <x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
 
     <div align="center">
       <h4 style="margin-top:5%;"></h4>
@@ -256,11 +257,13 @@
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
+  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
   import axios from 'axios'
 
   export default {
     components: {
-      'progress-track': ProgressTrack
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
     },
     data() {
       return {
diff --git a/resources/assets/js/pages/admin/booking/x2Completed.vue b/resources/assets/js/pages/admin/booking/x2Completed.vue
index 4fef5e93..7409a70a 100644
--- a/resources/assets/js/pages/admin/booking/x2Completed.vue
+++ b/resources/assets/js/pages/admin/booking/x2Completed.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig"/>
+    <x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
 
     <div align="center">
       <h4 style="margin-top:5%;">Order Completed</h4>
@@ -264,13 +265,14 @@
   }
 </style>
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
-import ProgressTrack from '~/components/AdminProgressTrack'
-import axios from 'axios'
+  import ProgressTrack from '~/components/AdminProgressTrack'
+  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
+  import axios from 'axios'
 
-export default {
-  components: {
-    'progress-track': ProgressTrack
+  export default {
+    components: {
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
   },
   data () {
     return {