diff --git a/resources/assets/js/components/AdminProgressTrack.vue b/resources/assets/js/components/AdminProgressTrack.vue
index 4b32b289..499f307b 100644
--- a/resources/assets/js/components/AdminProgressTrack.vue
+++ b/resources/assets/js/components/AdminProgressTrack.vue
@@ -1,12 +1,12 @@
 <template>
   <el-row>
-    <el-steps :value="(value.term === 'x1_ba' || value.term === 'x2_cheque') && value.status > 2 ? value.status - 2 : value.status" :active="(value.term === 'x1_ba' || value.term === 'x2_cheque') && value.status > 2 ? value.status - 2 : value.status" :align-center="true" process-status="wait" finish-status="success">
+    <el-steps :value="value.status" :active="value.status" :align-center="true" process-status="wait" finish-status="success">
       <el-step title="Booking"/>
       <el-step title="Verification"/>
       <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/components/X2AdminProgressTrack.vue b/resources/assets/js/components/X2AdminProgressTrack.vue
new file mode 100644
index 00000000..dd83ca75
--- /dev/null
+++ b/resources/assets/js/components/X2AdminProgressTrack.vue
@@ -0,0 +1,44 @@
+<template>
+  <el-row>
+    <el-steps :value="value.status" :active="value.status" :align-center="true" process-status="wait" finish-status="success">
+      <el-step title="Booking"/>
+      <el-step title="Verification"/>
+      <el-step title="Supplier Booking"/>
+      <el-step title="Supplier Report"/>
+      <el-step title="Upload China Bankslip To Booking"/>
+      <el-step title="Completed"/>
+    </el-steps>
+  </el-row>
+</template>
+
+<style type="text/css">
+    /* .el-row {
+        margin: 20px 0;
+    }
+
+    .el-steps {
+        padding-top: 70px;
+    }
+
+    .el-step .el-step__main {
+        transform: translateY(-70px);
+    }
+    .el-step__title.is-wait {
+        font-size: 10pt;
+    }
+    .el-step__title {
+        line-height: 1.4;
+    }
+
+    .el-step .is-success .el-step__line {
+        background-color: #67c23a;
+    } */
+</style>
+
+<script>
+export default {
+  props: ['value'],
+  data: () => ({
+  })
+}
+</script>
diff --git a/resources/assets/js/components/X2ProgressTrack.vue b/resources/assets/js/components/X2ProgressTrack.vue
new file mode 100644
index 00000000..8ee73a4a
--- /dev/null
+++ b/resources/assets/js/components/X2ProgressTrack.vue
@@ -0,0 +1,27 @@
+<template>
+  <el-row>
+    <el-steps class="progressBar" :value="value.status" :active="value.status" :align-center="true" process-status="wait" finish-status="success">
+      <el-step title="Booking"/>
+      <el-step title="Payment"/>
+      <el-step title="Order Confirmation"/>
+      <el-step title="Order Complete"/>
+    </el-steps>
+  </el-row>
+</template>
+
+<style type="text/css">
+    @media screen and (max-width: 800px) {
+		 .progressBar {
+            width: 60%;
+        }
+		
+	}
+</style>
+
+<script>
+export default {
+  props: ['value'],
+  data: () => ({
+  })
+}
+</script>
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..2b2ab439 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">
@@ -261,7 +264,37 @@
       </el-card>
     </el-row>
     <br>
-
+  <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Supplier Report</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12" style="text-align:center">
+          <el-col :span="20" style="text-align:center">
+            <canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
+            <br>
+            <el-button @click="downloadReport()" type="text">Download Now</el-button>
+          </el-col>
+        </el-row>
+      </el-card>
+      <br>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>User BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
+            </a>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+    <br>
     <el-row justify="center" align="center">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
@@ -284,77 +317,269 @@
   .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:{
+        supplier_booking:{},
+        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'
+          })
+        })
+        axios.get('/api/supplier-booking/' + this.$route.params.id)
+        .then((response) => {
+          this.supplier_booking = response.data
+          loading.close()
+        }).catch((error) => {
+          console.log(error)
+          this.$router.push({
+            name: 'notfound'
+          })
+          loading.close()
+        })
     },
-    isImage(path){
-      var ext = this.getExtension(path);
-      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+    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;
+      }
     },
-    getURL(path){
-      var getUrl = window.location;
-      var baseUrl = getUrl.protocol + "//" + getUrl.host;
-      return baseUrl + path;
+    directives: {
+      insertMessage: function (canvasElement, binding) {
+        setTimeout(function (canvasElement, binding) {
+          ////////////////// variable //////////////////////////
+          var canvasWidth = 450;
+          var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390,
+            410,
+            470, 490, 510, 610, 630
+          ]
+          const canvasHeight = rowHeight[rowHeight.length - 1];
+
+          var column1X = 220;
+          var column2X = 320;
+          var column3X = 420;
+
+          ///////////////////Canvast Init////////////////////
+          var canvas = document.getElementById("myCanvas");
+          canvas.width = canvasWidth;
+          canvas.height = canvasHeight;
+          // Get canvas context
+          var ctx = canvasElement.getContext("2d");
+          // Clear the canvas
+          ctx.clearRect(0, 0, 300, 150);
+
+          ctx.fillStyle = "#FFFFFF";
+          ctx.fillRect(0, 0, canvasWidth, rowHeight[0]);
+          for (var i = 1; i < rowHeight.length; i++) {
+            if (i % 2 == 1)
+              ctx.fillStyle = "#A9D08E";
+            else
+              ctx.fillStyle = "#FFFFFF";
+            ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i]);
+          }
+          ///////////// fillup with text////////////////
+          //// config canvas
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          ctx.textAlign = "right";
+          //// Row 1
+          ctx.fillText("Ref No. :", column1X, rowHeight[1] - 5);
+          ctx.fillText(binding.value.booking_id, column3X, rowHeight[1] - 5);
+          //// Row 2
+          ctx.fillText("Date :", column1X, rowHeight[2] - 5);
+          ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5);
+          //// Row 3
+          ctx.fillText("Marking :", column1X, rowHeight[3] - 5);
+          ctx.font = "bold 14px Arial";
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText(binding.value.marking, column3X, rowHeight[3] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //// Row 4
+          ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5);
+          ctx.fillText(binding.value.order_no, column3X, rowHeight[4] - 5);
+          //// Row 4
+          ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
+          ctx.fillText(binding.value.payment_for, column3X, rowHeight[5] - 5);
+          //// Row 5
+          ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5);
+          ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5);
+          //// Row 6
+          ctx.fillText("Remark :", column1X, rowHeight[7] - 10);
+          //// Row 7
+          // Empty
+          //// Row 8
+          ctx.fillText("MYR/RM :", column1X, rowHeight[9] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[9] - 5);
+          ctx.font = "bold 14px Arial";
+          ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[9] - 5);
+          ctx.font = "13px Arial";
+          //// Row 8
+          ctx.fillText("* RATE :", column1X, rowHeight[10] - 5);
+          ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5);
+          //// Row 9
+          ctx.fillText("REBATE :", column1X, rowHeight[11] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[11] - 5);
+          ctx.font = "14px Arial";
+          ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5);
+          ctx.font = "13px Arial";
+          //// Row 10
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("CNY", column2X, rowHeight[12] - 5);
+          ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5);
+          ctx.font = "13px Arial";
+          //line
+          ctx.beginPath();
+          ctx.lineWidth = 1;
+          ctx.moveTo(column1X + 30, rowHeight[11]);
+          ctx.lineTo(column3X + 20, rowHeight[11]);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.lineWidth = 2;
+          ctx.moveTo(column1X + 30, rowHeight[12]);
+          ctx.lineTo(column3X + 20, rowHeight[12]);
+          ctx.stroke();
+          //// Row 11
+          ctx.fillText("MYR/RM :", column1X, rowHeight[14] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[14] - 5);
+          ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[14] - 5);
+          //// Row 12
+          // ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5);
+          // ctx.fillText("MYR", column2X, rowHeight[15] - 5);
+          // ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5);
+          //// Row 13
+
+          ctx.fillText("+ TAX " + (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :",
+            column1X, rowHeight[16] - 5); // TODO : Change to percentage 
+          ctx.fillText("MYR", column2X, rowHeight[16] - 5);
+          ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5);
+          // //// Row 14
+          // ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15);
+          // ctx.fillText("MYR", column2X, rowHeight[17] - 15);
+          // ctx.fillText("289.84", column3X, rowHeight[17] - 15);
+          //// Row 15
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("Bank In Amount :", column1X, rowHeight[18] - 5);
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText("MYR", column2X, rowHeight[18] - 5);
+          ctx.fillText(binding.value.amount_after_tax, column3X, rowHeight[18] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //line
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[17]);
+          ctx.lineTo(column3X + 20, rowHeight[17]);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[18] + 1);
+          ctx.lineTo(column3X + 20, rowHeight[18] + 1);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[18] - 2);
+          ctx.lineTo(column3X + 20, rowHeight[18] - 2);
+          ctx.stroke();
+          //// Row 16
+          // ctx.fillText("Rebate :", column1X, rowHeight[19] - 25);
+          // ctx.fillText("CNY", column2X, rowHeight[19] - 25);
+          // ctx.fillText("224.68", column3X, rowHeight[19] - 25);
+          //// Row 16
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("Bank In to Account Below :", column1X, rowHeight[20] - 5);
+          ctx.font = "bold italic 15px Arial";
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText("CNY", column2X, rowHeight[20] - 5);
+          ctx.fillText(binding.value.amountInRMB, column3X - 20, rowHeight[20] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //// Row 17
+          //// Row 18
+          //// Row 19
+          // var img = new Image();
+          // img.src = "/banklogo.png";
+          // img.crossOrigin = "anonymous";
+          // var maxwidth = 70;
+          // var ratio = maxwidth / img.width;
+          // var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2);
+          // var y = rowHeight[21] + offset; // to make it always center
+
+          // img.onload=function(){
+          //   ctx.drawImage(img, 50, 530, 80, 50);
+          // };
+
+          // text
+          ctx.font = "bold 14px Arial";
+          ctx.textAlign = "center";
+          ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80);
+          ctx.fillText("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60);
+          ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40);
+          ctx.fillText(binding.value.bank_name, column2X - 40, rowHeight[22] - 20);
+          ctx.fillText(binding.value.bank_branch, column2X - 40, rowHeight[22] - 2);
+
+          ctx.font = "13px Arial";
+        }, 1000, canvasElement, binding);
+
+      }
     }
   }
-}
-</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..20754df2 100644
--- a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
+++ b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
@@ -1,6 +1,8 @@
 <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>
@@ -9,6 +11,49 @@
       <br>
       <!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
     </div>
+    <br>
+      <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Upload China Bankslip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12" style="text-align:center">
+          <el-col :span="20" style="text-align:center">
+
+            <el-form ref="chinaSlipForm" :model="chinaSlipForm" :rules="rules">
+              <div align="center">
+
+                <!-- upload image -->
+                <el-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'" :on-preview="handlePreview"
+                  :on-error="uploadError" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf" :on-remove="handleRemove"
+                  :multiple="false" list-type="picture">
+                  <el-button size="small" type="primary">Click to upload</el-button>
+                  <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
+                </el-upload>
+
+                <br>
+                <!-- upload image end -->
+                <!--                 <el-form-item prop="date">
+                  <el-date-picker v-model="chinaSlipForm.date" type="date" placeholder="Pick a day" :picker-options="pickerOptions1">
+                  </el-date-picker>
+                </el-form-item> -->
+                <el-form-item prop="actual_transfer_amount">
+                  <el-input v-model.number="chinaSlipForm.actual_transfer_amount" type="text" placeholder="Amount" style="width: 80%" />
+                </el-form-item>
+
+                <el-form-item prop="details">
+                  <el-input v-model="chinaSlipForm.details" type="text" placeholder="Details" style="width: 80%" />
+                </el-form-item>
+                <el-form-item>
+                  <el-button :loading="loading_btn" type="primary" @click="submitChinaSlip('chinaSlipForm')">Submit</el-button>
+                </el-form-item>
+              </div>
+            </el-form>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
     <br>
     <el-row justify="center" align="center">
       <el-card class="box-card">
@@ -166,72 +211,40 @@
                 <!---->
                 <!---->
               </div>
-              <!---->
-              <!---->
-              <!---->
-              <!---->
               <div class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
         </div>
-        <!-- <el-row :gutter="12">
-          <el-col :span="12">
-            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
-              <el-table-column prop="data1" align="right" width="200" />
-              <el-table-column prop="data2" align="left" width="200" />
-            </el-table>
-          </el-col>
-          <el-col :span="12">
-            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
-              <el-table-column prop="data1" align="right" width="200" />
-              <el-table-column prop="data2" align="left" width="200" />
-            </el-table>
-          </el-col>
-        </el-row> -->
       </el-card>
     </el-row>
-    <br>
 
+    <br>
     <el-row justify="center" align="center">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
-          <span>Upload China Bankslip</span>
+          <span>Supplier Report</span>
           <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
         </div>
         <el-row :gutter="12" style="text-align:center">
           <el-col :span="20" style="text-align:center">
-
-            <el-form ref="chinaSlipForm" :model="chinaSlipForm" :rules="rules">
-              <div align="center">
-
-                <!-- upload image -->
-                <el-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'" 
-                :on-preview="handlePreview"
-                :on-error="uploadError"
-                  accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
-                  :on-remove="handleRemove" :multiple="false" list-type="picture">
-                  <el-button size="small" type="primary">Click to upload</el-button>
-                  <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
-                </el-upload>
-
-                <br>
-                <!-- upload image end -->
-<!--                 <el-form-item prop="date">
-                  <el-date-picker v-model="chinaSlipForm.date" type="date" placeholder="Pick a day" :picker-options="pickerOptions1">
-                  </el-date-picker>
-                </el-form-item> -->
-                <el-form-item prop="actual_transfer_amount">
-                  <el-input v-model.number="chinaSlipForm.actual_transfer_amount" type="text" placeholder="Amount" style="width: 80%" />
-                </el-form-item>
-
-                <el-form-item prop="details">
-                  <el-input v-model="chinaSlipForm.details" type="text" placeholder="Details" style="width: 80%" />
-                </el-form-item>
-                <el-form-item>
-                  <el-button :loading="loading_btn" type="primary" @click="submitChinaSlip('chinaSlipForm')">Submit</el-button>
-                </el-form-item>
-              </div>
-            </el-form>
+            <canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
+            <br>
+            <el-button @click="downloadReport()" type="text">Download Now</el-button>
+          </el-col>
+        </el-row>
+      </el-card>
+      <br>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>User BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
+            </a>
           </el-col>
         </el-row>
       </el-card>
@@ -245,15 +258,17 @@
 </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 {
-        trackerConfig :{
+        trackerConfig: {
           status: 5,
           term: null
         },
@@ -266,6 +281,7 @@
           user_bankslip_path: null,
         },
         supplier: null,
+        supplier_booking: {},
         supplier_options: null,
         chinaSlipForm: {
           actual_transfer_amount: null,
@@ -273,9 +289,17 @@
           details: null,
         },
         rules: {
-          actual_transfer_amount: [
-          { required: true, message: 'Please input amount',trigger: 'change'},
-          { type: 'number', message: 'Amount must be a number',trigger: 'change'}],
+          actual_transfer_amount: [{
+              required: true,
+              message: 'Please input amount',
+              trigger: 'change'
+            },
+            {
+              type: 'number',
+              message: 'Amount must be a number',
+              trigger: 'change'
+            }
+          ],
           // date: [{
           //   required: true,
           //   message: 'Please input date',
@@ -324,7 +348,7 @@
 
       axios
         .get('/api/admin/booking/' + this.$route.params.id)
-        .then((response) => {      
+        .then((response) => {
           this.booking_details = response.data
           this.trackerConfig.term = response.data.term;
           loading.close()
@@ -335,6 +359,18 @@
             name: 'notfound'
           })
         })
+      axios.get('/api/supplier-booking/' + this.$route.params.id)
+        .then((response) => {
+          this.supplier_booking = response.data
+          loading.close()
+        }).catch((error) => {
+          console.log(error)
+          this.$router.push({
+            name: 'notfound'
+          })
+          loading.close()
+        })
+
     },
     methods: {
       submitChinaSlip(formName) {
@@ -348,7 +384,7 @@
               details: this.chinaSlipForm.details,
             }
 
-            axios.patch('/api/booking/' + this.booking_id +'/update-china-bankslip', newChinaSlip)
+            axios.patch('/api/booking/' + this.booking_id + '/update-china-bankslip', newChinaSlip)
               .then((response) => {
                 this.$message({
                   showClose: true,
@@ -374,11 +410,11 @@
           } else {
             this.loading_btn = false
             this.$message({
-                  showClose: true,
-                  message: 'Please upload your bankin slip first.',
-                  type: 'warning',
-                  duration: 10000
-                })
+              showClose: true,
+              message: 'Please upload your bankin slip first.',
+              type: 'warning',
+              duration: 10000
+            })
           }
         })
       },
@@ -388,8 +424,197 @@
       handlePreview(file) {
         console.log(file);
       },
-      uploadError(file,fileList){
+      uploadError(file, fileList) {
         this.$message.warning(`Incorrect file format or file size too big.`)
+      },
+      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;
+      }
+    },
+    directives: {
+      insertMessage: function (canvasElement, binding) {
+        setTimeout(function (canvasElement, binding) {
+          ////////////////// variable //////////////////////////
+          var canvasWidth = 450;
+          var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390,
+            410,
+            470, 490, 510, 610, 630
+          ]
+          const canvasHeight = rowHeight[rowHeight.length - 1];
+
+          var column1X = 220;
+          var column2X = 320;
+          var column3X = 420;
+
+          ///////////////////Canvast Init////////////////////
+          var canvas = document.getElementById("myCanvas");
+          canvas.width = canvasWidth;
+          canvas.height = canvasHeight;
+          // Get canvas context
+          var ctx = canvasElement.getContext("2d");
+          // Clear the canvas
+          ctx.clearRect(0, 0, 300, 150);
+
+          ctx.fillStyle = "#FFFFFF";
+          ctx.fillRect(0, 0, canvasWidth, rowHeight[0]);
+          for (var i = 1; i < rowHeight.length; i++) {
+            if (i % 2 == 1)
+              ctx.fillStyle = "#A9D08E";
+            else
+              ctx.fillStyle = "#FFFFFF";
+            ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i]);
+          }
+          ///////////// fillup with text////////////////
+          //// config canvas
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          ctx.textAlign = "right";
+          //// Row 1
+          ctx.fillText("Ref No. :", column1X, rowHeight[1] - 5);
+          ctx.fillText(binding.value.booking_id, column3X, rowHeight[1] - 5);
+          //// Row 2
+          ctx.fillText("Date :", column1X, rowHeight[2] - 5);
+          ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5);
+          //// Row 3
+          ctx.fillText("Marking :", column1X, rowHeight[3] - 5);
+          ctx.font = "bold 14px Arial";
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText(binding.value.marking, column3X, rowHeight[3] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //// Row 4
+          ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5);
+          ctx.fillText(binding.value.order_no, column3X, rowHeight[4] - 5);
+          //// Row 4
+          ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
+          ctx.fillText(binding.value.payment_for, column3X, rowHeight[5] - 5);
+          //// Row 5
+          ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5);
+          ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5);
+          //// Row 6
+          ctx.fillText("Remark :", column1X, rowHeight[7] - 10);
+          //// Row 7
+          // Empty
+          //// Row 8
+          ctx.fillText("MYR/RM :", column1X, rowHeight[9] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[9] - 5);
+          ctx.font = "bold 14px Arial";
+          ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[9] - 5);
+          ctx.font = "13px Arial";
+          //// Row 8
+          ctx.fillText("* RATE :", column1X, rowHeight[10] - 5);
+          ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5);
+          //// Row 9
+          ctx.fillText("REBATE :", column1X, rowHeight[11] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[11] - 5);
+          ctx.font = "14px Arial";
+          ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5);
+          ctx.font = "13px Arial";
+          //// Row 10
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("CNY", column2X, rowHeight[12] - 5);
+          ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5);
+          ctx.font = "13px Arial";
+          //line
+          ctx.beginPath();
+          ctx.lineWidth = 1;
+          ctx.moveTo(column1X + 30, rowHeight[11]);
+          ctx.lineTo(column3X + 20, rowHeight[11]);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.lineWidth = 2;
+          ctx.moveTo(column1X + 30, rowHeight[12]);
+          ctx.lineTo(column3X + 20, rowHeight[12]);
+          ctx.stroke();
+          //// Row 11
+          ctx.fillText("MYR/RM :", column1X, rowHeight[14] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[14] - 5);
+          ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[14] - 5);
+          //// Row 12
+          // ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5);
+          // ctx.fillText("MYR", column2X, rowHeight[15] - 5);
+          // ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5);
+          //// Row 13
+
+          ctx.fillText("+ TAX " + (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :",
+            column1X, rowHeight[16] - 5); // TODO : Change to percentage 
+          ctx.fillText("MYR", column2X, rowHeight[16] - 5);
+          ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5);
+          // //// Row 14
+          // ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15);
+          // ctx.fillText("MYR", column2X, rowHeight[17] - 15);
+          // ctx.fillText("289.84", column3X, rowHeight[17] - 15);
+          //// Row 15
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("Bank In Amount :", column1X, rowHeight[18] - 5);
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText("MYR", column2X, rowHeight[18] - 5);
+          ctx.fillText(binding.value.amount_after_tax, column3X, rowHeight[18] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //line
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[17]);
+          ctx.lineTo(column3X + 20, rowHeight[17]);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[18] + 1);
+          ctx.lineTo(column3X + 20, rowHeight[18] + 1);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[18] - 2);
+          ctx.lineTo(column3X + 20, rowHeight[18] - 2);
+          ctx.stroke();
+          //// Row 16
+          // ctx.fillText("Rebate :", column1X, rowHeight[19] - 25);
+          // ctx.fillText("CNY", column2X, rowHeight[19] - 25);
+          // ctx.fillText("224.68", column3X, rowHeight[19] - 25);
+          //// Row 16
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("Bank In to Account Below :", column1X, rowHeight[20] - 5);
+          ctx.font = "bold italic 15px Arial";
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText("CNY", column2X, rowHeight[20] - 5);
+          ctx.fillText(binding.value.amountInRMB, column3X - 20, rowHeight[20] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //// Row 17
+          //// Row 18
+          //// Row 19
+          // var img = new Image();
+          // img.src = "/banklogo.png";
+          // img.crossOrigin = "anonymous";
+          // var maxwidth = 70;
+          // var ratio = maxwidth / img.width;
+          // var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2);
+          // var y = rowHeight[21] + offset; // to make it always center
+
+          // img.onload=function(){
+          //   ctx.drawImage(img, 50, 530, 80, 50);
+          // };
+
+          // text
+          ctx.font = "bold 14px Arial";
+          ctx.textAlign = "center";
+          ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80);
+          ctx.fillText("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60);
+          ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40);
+          ctx.fillText(binding.value.bank_name, column2X - 40, rowHeight[22] - 20);
+          ctx.fillText(binding.value.bank_branch, column2X - 40, rowHeight[22] - 2);
+
+          ctx.font = "13px Arial";
+        }, 1000, canvasElement, binding);
+
       }
     }
   }
diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index 13c9016d..6d69b7e1 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>
@@ -16,6 +17,56 @@
       <br>
       <!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
     </div>
+    <br>
+        <el-row v-if="booking_details.user_po_path" :gutter="12" justify="center" align="center">
+      <el-col :span="12">
+        <el-card  class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Upload Invoice</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+
+          <!-- upload image -->
+          <el-upload :action="'/api/booking/' + booking_id + '/upload-invoice'" :on-exceed="handleExceed" :on-preview="handlePreview"
+                     :on-remove="handleRemove"
+                     :on-error="uploadError"
+                     accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
+                     class="upload-demo"
+                     drag
+                     multiple>
+            <i class="el-icon-upload"/>
+            <div class="el-upload__text">Drop file here or
+              <em>click to upload</em>
+            </div>
+            <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3mb</div>
+          </el-upload>
+
+          <br>
+
+          <div class="bottom clearfix" style="text-align:right;">
+            <el-button :loading="loading_btn" type="primary" @click="confirmInvoice">Submit</el-button>
+          </div>
+          <!-- upload image end -->
+
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Customer Purchase Order</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+          <el-row :gutter="12" type="flex">
+            <el-col :span="12" align="center">
+              <a target="_blank" :href="getURL(booking_details.user_po_path)">
+                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
+                <p v-else>Download</p>
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
     <br>
     <el-row justify="center" align="center">
       <el-card class="box-card">
@@ -88,10 +139,6 @@
                 <!---->
                 <!---->
               </div>
-              <!---->
-              <!---->
-              <!---->
-              <!---->
               <div class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
@@ -181,55 +228,38 @@
     </el-row>
     <br>
 
-    <el-row v-if="booking_details.user_po_path" :gutter="12" justify="center" align="center">
-      <el-col :span="12">
-        <el-card  class="box-card">
-          <div slot="header" class="clearfix">
-            <span>Upload Invoice</span>
-            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-          </div>
-
-          <!-- upload image -->
-          <el-upload :action="'/api/booking/' + booking_id + '/upload-invoice'" :on-exceed="handleExceed" :on-preview="handlePreview"
-                     :on-remove="handleRemove"
-                     :on-error="uploadError"
-                     accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
-                     class="upload-demo"
-                     drag
-                     multiple>
-            <i class="el-icon-upload"/>
-            <div class="el-upload__text">Drop file here or
-              <em>click to upload</em>
-            </div>
-            <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3mb</div>
-          </el-upload>
-
-          <br>
-
-          <div class="bottom clearfix" style="text-align:right;">
-            <el-button :loading="loading_btn" type="primary" @click="confirmInvoice">Submit</el-button>
-          </div>
-          <!-- upload image end -->
-
-        </el-card>
-      </el-col>
-      <el-col :span="12">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>Customer Purchase Order</span>
-            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-          </div>
-          <el-row :gutter="12" type="flex">
-            <el-col :span="12" align="center">
-              <a target="_blank" :href="getURL(booking_details.user_po_path)">
-                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
-                <p v-else>Download</p>
-              </a>
-            </el-col>
-          </el-row>
-        </el-card>
-      </el-col>
+        <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Supplier Report</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12" style="text-align:center">
+          <el-col :span="20" style="text-align:center">
+            <canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
+            <br>
+            <el-button @click="downloadReport()" type="text">Download Now</el-button>
+          </el-col>
+        </el-row>
+      </el-card>
+      <br>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>User BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
+            </a>
+          </el-col>
+        </el-row>
+      </el-card>
+      <br>
     </el-row>
+    <br>
   </el-main>
 </template>
 <style>
@@ -250,16 +280,18 @@
 </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 {
         trackerConfig :{
-          status: 6,
+          status: null,
           term: null
         },
         loading_btn: false,
@@ -272,6 +304,7 @@
         },
         supplier: null,
         supplier_options: null,
+        supplier_booking : {},
         chinaSlipForm: {
           actual_transfer_amount: null,
           date: null,
@@ -334,7 +367,8 @@
         .then((response) => {
           loading.close()
           this.booking_details = response.data
-          this.trackerConfig.term = response.data.term;
+          this.trackerConfig.term = response.data.term
+          this.trackerConfig.status = response.data.admin_status
         }).catch((error) => {
           console.log(error)
           loading.close()
@@ -342,6 +376,18 @@
             name: 'notfound'
           })
         })
+
+      axios.get('/api/supplier-booking/' + this.$route.params.id)
+        .then((response) => {
+          this.supplier_booking = response.data
+          loading.close()
+        }).catch((error) => {
+          console.log(error)
+          this.$router.push({
+            name: 'notfound'
+          })
+          loading.close()
+        })
     },
     methods: {
       confirmInvoice () {
@@ -383,6 +429,7 @@
       uploadError(file,fileList){
         this.$message.warning(`Incorrect file format or file size too big.`)
       },
+      // TODO : refactor into library since many pages are using this 
       getExtension(path){
        return path.slice(-3);
       },
@@ -394,6 +441,182 @@
         var getUrl = window.location;
         var baseUrl = getUrl.protocol + "//" + getUrl.host;
         return baseUrl + path;
+      },
+      
+    },
+        directives: {
+      insertMessage: function (canvasElement, binding) {
+      	setTimeout(function (canvasElement, binding) {
+            ////////////////// variable //////////////////////////
+            var canvasWidth = 450;
+            var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390, 410,
+              470, 490, 510, 610, 630
+            ]
+            const canvasHeight = rowHeight[rowHeight.length - 1];
+
+            var column1X = 220;
+            var column2X = 320;
+            var column3X = 420;
+
+            ///////////////////Canvast Init////////////////////
+            var canvas = document.getElementById("myCanvas");
+            canvas.width = canvasWidth;
+            canvas.height = canvasHeight;
+            // Get canvas context
+            var ctx = canvasElement.getContext("2d");
+            // Clear the canvas
+            ctx.clearRect(0, 0, 300, 150);
+
+            ctx.fillStyle = "#FFFFFF";
+            ctx.fillRect(0, 0, canvasWidth, rowHeight[0]);
+            for (var i = 1; i < rowHeight.length; i++) {
+              if (i % 2 == 1)
+                ctx.fillStyle = "#A9D08E";
+              else
+                ctx.fillStyle = "#FFFFFF";
+              ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i]);
+            }
+            ///////////// fillup with text////////////////
+            //// config canvas
+            ctx.fillStyle = "#000000";
+            ctx.font = "13px Arial";
+            ctx.textAlign = "right";
+            //// Row 1
+            ctx.fillText("Ref No. :", column1X, rowHeight[1] - 5);
+            ctx.fillText(binding.value.booking_id, column3X, rowHeight[1] - 5);
+            //// Row 2
+            ctx.fillText("Date :", column1X, rowHeight[2] - 5);
+            ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5);
+            //// Row 3
+            ctx.fillText("Marking :", column1X, rowHeight[3] - 5);
+            ctx.font = "bold 14px Arial";
+            ctx.fillStyle = "#0070D5";
+            ctx.fillText(binding.value.marking, column3X, rowHeight[3] - 5);
+            ctx.fillStyle = "#000000";
+            ctx.font = "13px Arial";
+            //// Row 4
+            ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5);
+            ctx.fillText(binding.value.order_no, column3X, rowHeight[4] - 5);
+            //// Row 4
+            ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
+            ctx.fillText(binding.value.payment_for, column3X, rowHeight[5] - 5);
+            //// Row 5
+            ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5);
+            ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5);
+            //// Row 6
+            ctx.fillText("Remark :", column1X, rowHeight[7] - 10);
+            //// Row 7
+            // Empty
+            //// Row 8
+            ctx.fillText("MYR/RM :", column1X, rowHeight[9] - 5);
+            ctx.fillText("MYR", column2X, rowHeight[9] - 5);
+            ctx.font = "bold 14px Arial";
+            ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[9] - 5);
+            ctx.font = "13px Arial";
+            //// Row 8
+            ctx.fillText("* RATE :", column1X, rowHeight[10] - 5);
+            ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5);
+            //// Row 9
+            ctx.fillText("REBATE :", column1X, rowHeight[11] - 5);
+            ctx.fillText("MYR", column2X, rowHeight[11] - 5);
+            ctx.font = "14px Arial";
+            ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5);
+            ctx.font = "13px Arial";
+            //// Row 10
+            ctx.font = "bold 14px Arial";
+            ctx.fillText("CNY", column2X, rowHeight[12] - 5);
+            ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5);
+            ctx.font = "13px Arial";
+            //line
+            ctx.beginPath();
+            ctx.lineWidth = 1;
+            ctx.moveTo(column1X + 30, rowHeight[11]);
+            ctx.lineTo(column3X + 20, rowHeight[11]);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.lineWidth = 2;
+            ctx.moveTo(column1X + 30, rowHeight[12]);
+            ctx.lineTo(column3X + 20, rowHeight[12]);
+            ctx.stroke();
+            //// Row 11
+            ctx.fillText("MYR/RM :", column1X, rowHeight[14] - 5);
+            ctx.fillText("MYR", column2X, rowHeight[14] - 5);
+            ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[14] - 5);
+            //// Row 12
+            // ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5);
+            // ctx.fillText("MYR", column2X, rowHeight[15] - 5);
+            // ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5);
+            //// Row 13
+            
+            ctx.fillText("+ TAX "+ (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :", column1X, rowHeight[16] - 5); // TODO : Change to percentage 
+            ctx.fillText("MYR", column2X, rowHeight[16] - 5);
+            ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5);
+            // //// Row 14
+            // ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15);
+            // ctx.fillText("MYR", column2X, rowHeight[17] - 15);
+            // ctx.fillText("289.84", column3X, rowHeight[17] - 15);
+            //// Row 15
+            ctx.font = "bold 14px Arial";
+            ctx.fillText("Bank In Amount :", column1X, rowHeight[18] - 5);
+            ctx.fillStyle = "#0070D5";
+            ctx.fillText("MYR", column2X, rowHeight[18] - 5);
+            ctx.fillText(binding.value.amount_after_tax, column3X, rowHeight[18] - 5);
+            ctx.fillStyle = "#000000";
+            ctx.font = "13px Arial";
+            //line
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(column1X + 30, rowHeight[17]);
+            ctx.lineTo(column3X + 20, rowHeight[17]);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(column1X + 30, rowHeight[18] + 1);
+            ctx.lineTo(column3X + 20, rowHeight[18] + 1);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(column1X + 30, rowHeight[18] - 2);
+            ctx.lineTo(column3X + 20, rowHeight[18] - 2);
+            ctx.stroke();
+            //// Row 16
+            // ctx.fillText("Rebate :", column1X, rowHeight[19] - 25);
+            // ctx.fillText("CNY", column2X, rowHeight[19] - 25);
+            // ctx.fillText("224.68", column3X, rowHeight[19] - 25);
+            //// Row 16
+            ctx.font = "bold 14px Arial";
+            ctx.fillText("Bank In to Account Below :", column1X, rowHeight[20] - 5);
+            ctx.font = "bold italic 15px Arial";
+            ctx.fillStyle = "#0070D5";
+            ctx.fillText("CNY", column2X, rowHeight[20] - 5);
+            ctx.fillText(binding.value.amountInRMB, column3X - 20, rowHeight[20] - 5);
+            ctx.fillStyle = "#000000";
+            ctx.font = "13px Arial";
+            //// Row 17
+            //// Row 18
+            //// Row 19
+            // var img = new Image();
+            // img.src = "/banklogo.png";
+            // img.crossOrigin = "anonymous";
+            // var maxwidth = 70;
+            // var ratio = maxwidth / img.width;
+            // var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2);
+            // var y = rowHeight[21] + offset; // to make it always center
+
+            // img.onload=function(){
+    		    //   ctx.drawImage(img, 50, 530, 80, 50);
+    	      // };
+
+            // text
+            ctx.font = "bold 14px Arial";
+            ctx.textAlign = "center";
+            ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80);
+            ctx.fillText("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60);
+            ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40);
+            ctx.fillText(binding.value.bank_name , column2X - 40, rowHeight[22] - 20);
+            ctx.fillText(binding.value.bank_branch , column2X - 40, rowHeight[22] - 2);
+            
+            ctx.font = "13px Arial";
+    	}, 1000,canvasElement,binding);
+	        
       }
     }
   }
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..556765e9 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>
@@ -227,6 +228,37 @@
         </el-row> -->
       </el-card>
     </el-row>
+    <br>
+      <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Supplier Report</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12" style="text-align:center">
+          <el-col :span="20" style="text-align:center">
+            <canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
+            <br>
+            <el-button @click="downloadReport()" type="text">Download Now</el-button>
+          </el-col>
+        </el-row>
+      </el-card>
+      <br>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>User BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
+            </a>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
     <br>
 
     <el-row justify="center" align="center">
@@ -264,13 +296,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 {
@@ -278,6 +311,7 @@ export default {
           status: 8,
           term: null
         },
+      supplier_booking: {},
       loading_btn: false,
       booking_details:{
           id: null,
@@ -308,6 +342,17 @@ export default {
           name: 'notfound'
         })
       })
+    axios.get('/api/supplier-booking/' + this.$route.params.id)
+      .then((response) => {
+        this.supplier_booking = response.data
+        loading.close()
+      }).catch((error) => {
+        console.log(error)
+        this.$router.push({
+          name: 'notfound'
+        })
+        loading.close()
+      })
   },
   methods: {
     getExtension(path){
@@ -322,6 +367,183 @@ export default {
       var baseUrl = getUrl.protocol + "//" + getUrl.host;
       return baseUrl + path;
     }
-  }
+  },
+     directives: {
+      insertMessage: function (canvasElement, binding) {
+        setTimeout(function (canvasElement, binding) {
+          ////////////////// variable //////////////////////////
+          var canvasWidth = 450;
+          var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390,
+            410,
+            470, 490, 510, 610, 630
+          ]
+          const canvasHeight = rowHeight[rowHeight.length - 1];
+
+          var column1X = 220;
+          var column2X = 320;
+          var column3X = 420;
+
+          ///////////////////Canvast Init////////////////////
+          var canvas = document.getElementById("myCanvas");
+          canvas.width = canvasWidth;
+          canvas.height = canvasHeight;
+          // Get canvas context
+          var ctx = canvasElement.getContext("2d");
+          // Clear the canvas
+          ctx.clearRect(0, 0, 300, 150);
+
+          ctx.fillStyle = "#FFFFFF";
+          ctx.fillRect(0, 0, canvasWidth, rowHeight[0]);
+          for (var i = 1; i < rowHeight.length; i++) {
+            if (i % 2 == 1)
+              ctx.fillStyle = "#A9D08E";
+            else
+              ctx.fillStyle = "#FFFFFF";
+            ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i]);
+          }
+          ///////////// fillup with text////////////////
+          //// config canvas
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          ctx.textAlign = "right";
+          //// Row 1
+          ctx.fillText("Ref No. :", column1X, rowHeight[1] - 5);
+          ctx.fillText(binding.value.booking_id, column3X, rowHeight[1] - 5);
+          //// Row 2
+          ctx.fillText("Date :", column1X, rowHeight[2] - 5);
+          ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5);
+          //// Row 3
+          ctx.fillText("Marking :", column1X, rowHeight[3] - 5);
+          ctx.font = "bold 14px Arial";
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText(binding.value.marking, column3X, rowHeight[3] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //// Row 4
+          ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5);
+          ctx.fillText(binding.value.order_no, column3X, rowHeight[4] - 5);
+          //// Row 4
+          ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
+          ctx.fillText(binding.value.payment_for, column3X, rowHeight[5] - 5);
+          //// Row 5
+          ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5);
+          ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5);
+          //// Row 6
+          ctx.fillText("Remark :", column1X, rowHeight[7] - 10);
+          //// Row 7
+          // Empty
+          //// Row 8
+          ctx.fillText("MYR/RM :", column1X, rowHeight[9] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[9] - 5);
+          ctx.font = "bold 14px Arial";
+          ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[9] - 5);
+          ctx.font = "13px Arial";
+          //// Row 8
+          ctx.fillText("* RATE :", column1X, rowHeight[10] - 5);
+          ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5);
+          //// Row 9
+          ctx.fillText("REBATE :", column1X, rowHeight[11] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[11] - 5);
+          ctx.font = "14px Arial";
+          ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5);
+          ctx.font = "13px Arial";
+          //// Row 10
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("CNY", column2X, rowHeight[12] - 5);
+          ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5);
+          ctx.font = "13px Arial";
+          //line
+          ctx.beginPath();
+          ctx.lineWidth = 1;
+          ctx.moveTo(column1X + 30, rowHeight[11]);
+          ctx.lineTo(column3X + 20, rowHeight[11]);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.lineWidth = 2;
+          ctx.moveTo(column1X + 30, rowHeight[12]);
+          ctx.lineTo(column3X + 20, rowHeight[12]);
+          ctx.stroke();
+          //// Row 11
+          ctx.fillText("MYR/RM :", column1X, rowHeight[14] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[14] - 5);
+          ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[14] - 5);
+          //// Row 12
+          // ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5);
+          // ctx.fillText("MYR", column2X, rowHeight[15] - 5);
+          // ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5);
+          //// Row 13
+
+          ctx.fillText("+ TAX " + (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :",
+            column1X, rowHeight[16] - 5); // TODO : Change to percentage 
+          ctx.fillText("MYR", column2X, rowHeight[16] - 5);
+          ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5);
+          // //// Row 14
+          // ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15);
+          // ctx.fillText("MYR", column2X, rowHeight[17] - 15);
+          // ctx.fillText("289.84", column3X, rowHeight[17] - 15);
+          //// Row 15
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("Bank In Amount :", column1X, rowHeight[18] - 5);
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText("MYR", column2X, rowHeight[18] - 5);
+          ctx.fillText(binding.value.amount_after_tax, column3X, rowHeight[18] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //line
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[17]);
+          ctx.lineTo(column3X + 20, rowHeight[17]);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[18] + 1);
+          ctx.lineTo(column3X + 20, rowHeight[18] + 1);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[18] - 2);
+          ctx.lineTo(column3X + 20, rowHeight[18] - 2);
+          ctx.stroke();
+          //// Row 16
+          // ctx.fillText("Rebate :", column1X, rowHeight[19] - 25);
+          // ctx.fillText("CNY", column2X, rowHeight[19] - 25);
+          // ctx.fillText("224.68", column3X, rowHeight[19] - 25);
+          //// Row 16
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("Bank In to Account Below :", column1X, rowHeight[20] - 5);
+          ctx.font = "bold italic 15px Arial";
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText("CNY", column2X, rowHeight[20] - 5);
+          ctx.fillText(binding.value.amountInRMB, column3X - 20, rowHeight[20] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //// Row 17
+          //// Row 18
+          //// Row 19
+          // var img = new Image();
+          // img.src = "/banklogo.png";
+          // img.crossOrigin = "anonymous";
+          // var maxwidth = 70;
+          // var ratio = maxwidth / img.width;
+          // var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2);
+          // var y = rowHeight[21] + offset; // to make it always center
+
+          // img.onload=function(){
+          //   ctx.drawImage(img, 50, 530, 80, 50);
+          // };
+
+          // text
+          ctx.font = "bold 14px Arial";
+          ctx.textAlign = "center";
+          ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80);
+          ctx.fillText("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60);
+          ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40);
+          ctx.fillText(binding.value.bank_name, column2X - 40, rowHeight[22] - 20);
+          ctx.fillText(binding.value.bank_branch, column2X - 40, rowHeight[22] - 2);
+
+          ctx.font = "13px Arial";
+        }, 1000, canvasElement, binding);
+
+      }
+    }
 }
 </script>
diff --git a/resources/assets/js/pages/booking/completed.vue b/resources/assets/js/pages/booking/completed.vue
index 6d183ea7..8111b069 100644
--- a/resources/assets/js/pages/booking/completed.vue
+++ b/resources/assets/js/pages/booking/completed.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="tackerConfig"/>
+    <x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
     <h1>Order Completed</h1>
     <div class="goBackButton">
       <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
@@ -148,13 +149,14 @@
 	}
 </style>
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
 import ProgressTrack from '~/components/ProgressTrack'
+import X2ProgressTrack from '~/components/X2ProgressTrack'
 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/booking/confirmation.vue b/resources/assets/js/pages/booking/confirmation.vue
index 99ebedaf..5f304b96 100644
--- a/resources/assets/js/pages/booking/confirmation.vue
+++ b/resources/assets/js/pages/booking/confirmation.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig"/>
+    <x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
     <h1>Bankin Slip Verification in Progress</h1>
     <div class="goBackButton">
       <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
@@ -102,13 +103,14 @@
 	}
 </style>
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
 import ProgressTrack from '~/components/ProgressTrack'
+import X2ProgressTrack from '~/components/X2ProgressTrack'
 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/booking/po.vue b/resources/assets/js/pages/booking/po.vue
index 518e3fac..bc264ba5 100644
--- a/resources/assets/js/pages/booking/po.vue
+++ b/resources/assets/js/pages/booking/po.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="status"/>
+    <x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
     <h1>Processing Invoice</h1>
     <div class="goBackButton">
       <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
@@ -144,13 +145,14 @@
 	}
 </style>
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
 import ProgressTrack from '~/components/ProgressTrack'
+import X2ProgressTrack from '~/components/X2ProgressTrack'
 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/booking/poComplete.vue b/resources/assets/js/pages/booking/poComplete.vue
index 9e5fba88..230604b0 100644
--- a/resources/assets/js/pages/booking/poComplete.vue
+++ b/resources/assets/js/pages/booking/poComplete.vue
@@ -1,7 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig"/>
-
+    <x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
     <div align="center">
       <h4 style="margin-top:5%;">Processing Invoice</h4>
       <br>
@@ -131,13 +131,14 @@
   }
 </style>
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
 import ProgressTrack from '~/components/ProgressTrack'
+import X2ProgressTrack from '~/components/X2ProgressTrack'
 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/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index b009fad7..fe103a79 100644
--- a/resources/assets/js/pages/booking/transfer.vue
+++ b/resources/assets/js/pages/booking/transfer.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig"/>
+    <x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
     <h1>Bankin Slip Approved</h1>
     <h2>Transfer In Progress</h2>
     <div class="goBackButton">
@@ -123,13 +124,14 @@
 	}
 </style>
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
 import ProgressTrack from '~/components/ProgressTrack'
+import X2ProgressTrack from '~/components/X2ProgressTrack'
 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/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index 82f3a7da..6b7d00f7 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig" />
+    <x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
     <h1>Transfer Completed</h1>
     <h2> Please upload your purchase order </h2>
     <!-- upload card -->
@@ -183,14 +184,15 @@
   }
 </style>
 <script>
-  import VueCountdown from '@dmaksimovic/vue-countdown'
-  import ProgressTrack from '~/components/ProgressTrack'
-  import axios from 'axios'
+ import ProgressTrack from '~/components/ProgressTrack'
+import X2ProgressTrack from '~/components/X2ProgressTrack'
+import axios from 'axios'
 
-  export default {
-    components: {
-      'progress-track': ProgressTrack
-    },
+export default {
+  components: {
+    'progress-track': ProgressTrack,
+    'x2-progress-track': X2ProgressTrack
+  },
     data() {
       return {
         booking_id: this.$route.params.id,
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index 56a63bc3..828b5154 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -1,6 +1,8 @@
 <template>
 	<el-main>
-		<progress-track v-model="trackerConfig" />
+		<x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')"
+		    v-model="trackerConfig" />
+		<progress-track v-else v-model="trackerConfig" />
 		<div align="center" v-if="booking.user_bankslip_path">
 			<h4 style="margin-top:5%">
 				Your Bankslip Has Been Rejected, Please Reupload Your Bankslip
@@ -152,6 +154,7 @@
 <script>
 	import VueCountdown from '@xkeshi/vue-countdown'
 	import ProgressTrack from '~/components/ProgressTrack'
+	import X2ProgressTrack from '~/components/X2ProgressTrack'
 	import axios from 'axios'
 
 	export default {
@@ -159,7 +162,8 @@
 		name: 'MyComponent',
 		components: {
 			'vue-countdown': VueCountdown,
-			'progress-track': ProgressTrack
+			'progress-track': ProgressTrack,
+			'x2-progress-track': X2ProgressTrack
 		},
 		data() {
 			return {
diff --git a/resources/assets/js/pages/booking/x2Completed.vue b/resources/assets/js/pages/booking/x2Completed.vue
index f2961c26..6bf26565 100644
--- a/resources/assets/js/pages/booking/x2Completed.vue
+++ b/resources/assets/js/pages/booking/x2Completed.vue
@@ -1,6 +1,8 @@
 <template>
   <el-main>
-    <progress-track v-model="tackerConfig"/>
+    <x2-progress-track v-if="(booking_details.status == 'x2_cash' || booking_details.status == 'x2_cheque' || booking_details.status == 'x2_ba')"
+      v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
     <h1>Order Completed</h1>
     <div class="goBackButton">
       <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
@@ -11,7 +13,7 @@
         <div class="card">
           <div class="card-header">China Bank Slip</div>
           <div class="row">
-            <div  v-for="cn_bankslip in booking_details.china_bankslip_path" :key='cn_bankslip'> 
+            <div v-for="cn_bankslip in booking_details.china_bankslip_path" :key='cn_bankslip'>
               <a target="_blank" :href="getURL(cn_bankslip)">
                 <img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
                 <p v-else>Download</p>
@@ -24,8 +26,8 @@
     </div>
     <!-- order details -->
     <div class="card">
-    <div class="card-header">Order Details</div>
-    <div class="card-body">
+      <div class="card-header">Order Details</div>
+      <div class="card-body">
         <div class="row">
           <div class="col">
             <table class="table table-striped">
@@ -36,11 +38,11 @@
                 </tr>
                 <tr>
                   <td>Date :</td>
-                  <td>{{ booking_details.created_at }}</td> 
+                  <td>{{ booking_details.created_at }}</td>
                 </tr>
                 <tr>
                   <td>Customer Marking :</td>
-                  <td>{{ booking_details.marking }}</td> 
+                  <td>{{ booking_details.marking }}</td>
                 </tr>
                 <tr>
                   <td>Term: </td>
@@ -58,15 +60,17 @@
                 </tr>
                 <tr>
                   <td>+ Service Charge :</td>
-                  <td>CNY {{ booking_details.service_charge }}</td> 
+                  <td>CNY {{ booking_details.service_charge }}</td>
                 </tr>
                 <tr>
                   <td>RATE :</td>
-                  <td>{{ booking_details.rate }}</td> 
+                  <td>{{ booking_details.rate }}</td>
                 </tr>
                 <tr>
                   <td></td>
-                  <td><b>MYR {{ booking_details.bia }}</b></td>
+                  <td>
+                    <b>MYR {{ booking_details.bia }}</b>
+                  </td>
                 </tr>
               </tbody>
             </table>
@@ -81,7 +85,7 @@
           <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
             <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
             <p v-else>Download</p>
-          </a>  
+          </a>
         </div>
       </div>
     </div>
@@ -89,98 +93,104 @@
 </template>
 <style>
   h1 {
-    margin-top:5%;
-    font-size:3vw;
-    text-align:center;
-    margin-bottom:3%;
+    margin-top: 5%;
+    font-size: 3vw;
+    text-align: center;
+    margin-bottom: 3%;
   }
+
   .goBackButton {
-    text-align:center;
-    margin-bottom:3%;
+    text-align: center;
+    margin-bottom: 3%;
   }
+
   .uploadedImage {
-      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;
   }
+
   .uploadedImage:hover {
     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   }
+
   .card {
     margin-bottom: 3%;
   }
+
   @media screen and (max-width: 767px) {
-		.table {
-			font-size: 3.5vmin;
-		}
-		h1 {
+    .table {
+      font-size: 3.5vmin;
+    }
+    h1 {
       font-size: 1em;
     }
-	}
+  }
 </style>
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
-import ProgressTrack from '~/components/ProgressTrack'
-import axios from 'axios'
+  import ProgressTrack from '~/components/ProgressTrack'
+  import X2ProgressTrack from '~/components/X2ProgressTrack'
+  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: 7,
           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/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/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