diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 89c16037..87e6b3ea 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -27,7 +27,7 @@ staging:
     - chmod 400 ~/.ssh/id_rsa
     - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
   script:
-    - ssh izyim@40.76.84.105 "cd exchange && git add . && git commit -am "merge staging" && git pull origin master && sudo docker-compose -f docker-prod.yml build && sudo docker-compose -f docker-prod.yml up -d"
+    - ssh izyim@40.76.84.105 "cd exchange && git pull origin master && sudo docker-compose -f docker-prod.yml build && sudo docker-compose -f docker-prod.yml up -d"
   environment:
     name: staging
     url: https://exchange-staging.izyim.com/
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1c44c33..6e9b0f29 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,11 @@
 # Changelog
+## 1.0.1-alpha - 2018-08-09 
+- Fixed X2 milestone, now completed at step 5 
+- Fixed X2 no billing charge
+- Fixed forgot password bug 
+- Updated customer registration marking with auto capital feature
+- Updated admin marking setting with auto capital feature 
+- Added green report info for every page after supplier booking page 
 
 ## 1.0.0-alpha - 2018-08-02
 - Release 1.0.0
diff --git a/Dockerfile b/Dockerfile
index 6b836f64..e5570779 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -22,7 +22,6 @@ RUN php artisan clear-compiled
 
 COPY wait.sh /usr/local/bin/wait.sh
 RUN chmod +x /usr/local/bin/wait.sh
-RUN php artisan storage:link
 
 CMD /usr/local/bin/wait.sh && composer update --no-scripts && composer dumpautoload  && php artisan migrate && php artisan serve --host=0.0.0.0 --port=8000
 EXPOSE 8000
diff --git a/app/Http/Controllers/Auth/ForgotPasswordController.php b/app/Http/Controllers/Auth/ForgotPasswordController.php
index 40375d30..7cf81310 100644
--- a/app/Http/Controllers/Auth/ForgotPasswordController.php
+++ b/app/Http/Controllers/Auth/ForgotPasswordController.php
@@ -26,9 +26,16 @@ class ForgotPasswordController extends Controller
      * @param  string  $response
      * @return \Illuminate\Http\RedirectResponse
      */
-    protected function sendResetLinkEmail($response)
+    protected function sendResetLink(Request $request)
     {   
-        return ['status' => trans($response)];
+        if($request->input('email')) {
+            $this->sendResetLinkEmail($request);
+        }
+        
+        return response()->json([
+            'error' => false,
+            'status' => 'We have sent reset password link to '. $request->input('email')
+        ]);
     }
 
     /**
diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index 8f482726..efd7dc3c 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -107,6 +107,12 @@ class BookingController extends Controller
             $booking->transfer_amount = $booking->bia; 
             
             $booking->track_status = "(". $booking->status ."/7)";
+
+            // all x2 until step 5 only
+            if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba") {
+                $booking->track_status = "(". $booking->status ."/5)";
+            }
+
             switch ($booking->status) {
                 case 1:
                     $status_desc = "Order in progress"; 
@@ -122,6 +128,9 @@ class BookingController extends Controller
                     break;
                 case 5:
                     $status_desc = "Transfer Complete, please upload your PO"; 
+                    if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba"){
+                        $status_desc = "Order Completed";
+                    }
                     break;
                 case 6:
                     $status_desc = "Processing invoice"; 
@@ -163,9 +172,8 @@ class BookingController extends Controller
 				$booking->transfer_amount = $booking->bia; 
 		
                 $term = $booking->term;
-                if($term == "x1_ba" || $term == "x2_cheque"){
-                    $status = $booking->admin_status > 2 ? $booking->admin_status - 2 : $booking->admin_status;
-                    $booking->track_status = "(". $status ."/5)";
+                if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba"){
+                    $booking->track_status = "(". $booking->admin_status ."/6)";
                 }
                 else{
 				    $booking->track_status = "(". $booking->admin_status ."/7)";
@@ -179,20 +187,19 @@ class BookingController extends Controller
 						$status_desc = "Verify user bank slip";  
 						break;    
 					case 3:
-                        if($term !== "x1_ba" || $term !== "x2_cheque"){
-                            $status_desc = "Generate supplier booking report";    
-                            break;  
-                        }
+                        $status_desc = "Generate supplier booking report";    
+                        break;  
 					case 4:
-                        if($term !== "x1_ba" || $term !== "x2_cheque"){
-    						$status_desc = "Supplier booking report. Please confirm with your booking."; 
-    						break;
-                        }
+                        $status_desc = "Supplier booking report. Please confirm with your booking."; 
+                        break;
 					case 5:
 						$status_desc = "Please, upload China Bankslip"; 
 						break;
-					case 6:
-						$status_desc = "Waiting customer to upload purchase order"; 
+                    case 6:
+                        $status_desc = "Waiting customer to upload purchase order"; 
+                        if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba"){
+                            $status_desc = "Order Completed";
+                        }
                         break;
                     case 7:
 						$status_desc = "Customer has uploaded purchase order, please upload invoice"; 
diff --git a/app/Http/Controllers/ChinaBankSlipController.php b/app/Http/Controllers/ChinaBankSlipController.php
index 0ed406ed..4684fd04 100644
--- a/app/Http/Controllers/ChinaBankSlipController.php
+++ b/app/Http/Controllers/ChinaBankSlipController.php
@@ -56,6 +56,7 @@ class ChinaBankSlipController extends Controller
         }
    
         $china_bankslip = new ChinaBankSlip;
+        $china_bankslip->bank_branch = '-';
         $china_bankslip->booking_id = $booking->id;
         $china_bankslip->china_bank_slip_path = $upload_path;
         $china_bankslip->save();
diff --git a/database/migrations/2018_08_02_141753_make_nullable_in_china_bank_slips_table.php b/database/migrations/2018_08_02_141753_make_nullable_in_china_bank_slips_table.php
index ab744439..3a73ae18 100644
--- a/database/migrations/2018_08_02_141753_make_nullable_in_china_bank_slips_table.php
+++ b/database/migrations/2018_08_02_141753_make_nullable_in_china_bank_slips_table.php
@@ -20,7 +20,6 @@ class MakeNullableInChinaBankSlipsTable extends Migration
             $table->string('bank_address')->nullable()->change();
             $table->string('swift')->nullable()->change();
             $table->string('cnap')->nullable()->change();
-            $table->string('bank_branch')->nullable()->change();
             $table->string('order_id')->nullable()->change();
             $table->decimal('transfer_amount_needed')->nullable()->change();
             $table->decimal('actual_transfer_amount')->nullable()->change();
diff --git a/database/migrations/2018_08_08_103115_make_nullable_in_bookings_table.php b/database/migrations/2018_08_08_103115_make_nullable_in_bookings_table.php
new file mode 100644
index 00000000..d8524e66
--- /dev/null
+++ b/database/migrations/2018_08_08_103115_make_nullable_in_bookings_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class MakeNullableInBookingsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->string('company_name')->nullable()->change();
+            $table->string('company_address')->nullable()->change();
+            $table->string('bank_address')->nullable()->change();
+            $table->string('swift_code')->nullable()->change();
+            $table->string('cnap')->nullable()->change();
+            $table->string('term')->nullable()->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            //
+        });
+    }
+}
diff --git a/database/migrations/2018_08_08_104726_make_nullable_in_supplier_bookings_table.php b/database/migrations/2018_08_08_104726_make_nullable_in_supplier_bookings_table.php
new file mode 100644
index 00000000..6c91e5f7
--- /dev/null
+++ b/database/migrations/2018_08_08_104726_make_nullable_in_supplier_bookings_table.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class MakeNullableInSupplierBookingsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('supplier_bookings', function (Blueprint $table) {
+            $table->decimal('transfer_amount')->nullable()->change();
+            $table->decimal('rmbBankAmount')->nullable()->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('supplier_bookings', function (Blueprint $table) {
+            //
+        });
+    }
+}
diff --git a/database/seeds/BookTableSeeder.php b/database/seeds/BookTableSeeder.php
index 9bbc0d9a..e27ff224 100644
--- a/database/seeds/BookTableSeeder.php
+++ b/database/seeds/BookTableSeeder.php
@@ -35,7 +35,7 @@ class BookTableSeeder extends Seeder
             'rate_id' => $rate->id,
             'user_id' => $user->id,
             'status' => 2,
-            'admin_status' => 2,
+            'admin_status' => 1,
             'order_no' => '001',
             'payment_for' => 'FULL PAYMENT',
             'created_at' => Carbon::now()->format('Y-m-d H:i:s'),
diff --git a/database/seeds/NotificationSeeder.php b/database/seeds/NotificationSeeder.php
index ac238997..316b11ad 100644
--- a/database/seeds/NotificationSeeder.php
+++ b/database/seeds/NotificationSeeder.php
@@ -19,7 +19,7 @@ class NotificationSeeder extends Seeder
         DB::table('notifications')->insert([
             'detail' => 'This is an user seeder notification',
             'user_id' => $user->id,
-            'link' => 'http://www.google.com',
+            'link' => '/',
             'created_at' => Carbon::now()->format('Y-m-d H:i:s'),
             'updated_at' => Carbon::now()->format('Y-m-d H:i:s'),
         ]);
@@ -27,7 +27,7 @@ class NotificationSeeder extends Seeder
         DB::table('notifications')->insert([
             'detail' => 'This is an admin seeder notification',
             'user_id' => $admin->id,
-            'link' => 'http://www.google.com',
+            'link' => '/',
             'created_at' => Carbon::now()->format('Y-m-d H:i:s'),
             'updated_at' => Carbon::now()->format('Y-m-d H:i:s'),
         ]);
diff --git a/resources/assets/js/components/AdminProgressTrack.vue b/resources/assets/js/components/AdminProgressTrack.vue
index 3a0a6507..499f307b 100644
--- a/resources/assets/js/components/AdminProgressTrack.vue
+++ b/resources/assets/js/components/AdminProgressTrack.vue
@@ -1,10 +1,10 @@
 <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" v-if="!(value.term === 'x1_ba' || value.term === 'x2_cheque')"/>
-      <el-step title="Supplier Report" v-if="!(value.term === 'x1_ba' || value.term === 'x2_cheque')"/>
+      <el-step title="Supplier Booking"/>
+      <el-step title="Supplier Report"/>
       <el-step title="Upload China Bankslip To Booking"/>
       <el-step title="Purchase Order/Invoice"/>
       <el-step title="Completed"/>
diff --git a/resources/assets/js/components/Navbar.vue b/resources/assets/js/components/Navbar.vue
index 4724a60f..7f32c3c2 100644
--- a/resources/assets/js/components/Navbar.vue
+++ b/resources/assets/js/components/Navbar.vue
@@ -104,13 +104,14 @@ export default {
     unread_message_length:0,
     url: '/api/notification/user',
     pagination: [],
-
   }),
   computed: mapGetters({
     user: 'auth/user'
   }),
   mounted(){
-    this.getNotification(this.url);
+    if(this.user){
+      this.getNotification(this.url)
+    }
   },
   methods: {
     async logout(){
diff --git a/resources/assets/js/components/ProgressTrack.vue b/resources/assets/js/components/ProgressTrack.vue
index 21241dfb..170a26ea 100644
--- a/resources/assets/js/components/ProgressTrack.vue
+++ b/resources/assets/js/components/ProgressTrack.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row>
-    <el-steps class="progressBar" :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
+    <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"/>
@@ -19,32 +19,12 @@
         }
 		
 	}
-   
-    /*
-    .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: () => ({
-    status: 1
   })
 }
 </script>
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
new file mode 100644
index 00000000..556765e9
--- /dev/null
+++ b/resources/assets/js/pages/admin/booking/x2Completed.vue
@@ -0,0 +1,549 @@
+<template>
+  <el-main>
+    <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>
+      <br>
+      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+    </div>
+    <br>
+
+    <!-- bankslip  -->
+    <br>
+    <el-row justify="center" align="center">
+      <el-col>
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>China Bank Slip</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+          <el-row type="flex">
+            <el-col align="center">
+              <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>
+                  <br/>
+                </a>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <br>
+    <!-- bank slips END --> 
+
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Details</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </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> -->
+        <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>
+                    <col name="el-table_2_column_9" width="210">
+                    <col name="el-table_2_column_10" width="210">
+                  </colgroup>
+                  <tbody>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Ref No :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.id }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Date :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.created_at }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Customer Marking :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.marking }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Term :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.term }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Beneficiary Account : </div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{booking_details.account_name}}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Beneficiary Account Number : </div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{booking_details.account_num}}</div>
+                      </td>
+                    </tr>
+                    <!---->
+                  </tbody>
+                </table>
+                <!---->
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <!---->
+              <!---->
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+            </div>
+          </div>
+          <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="hidden-columns">
+                <div></div>
+                <div></div>
+              </div>
+              <!---->
+              <div class="el-table__body-wrapper is-scrolling-none">
+                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
+                  <colgroup>
+                    <col name="el-table_3_column_11" width="200">
+                    <col name="el-table_3_column_12" width="200">
+                  </colgroup>
+                  <tbody>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">CNY/RMB :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">CNY {{ booking_details.amount }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">+ Service Charge :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">CNY {{ booking_details.service_charge }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">/ RATE :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">{{ booking_details.rate }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">MYR {{ booking_details.bia }}</div>
+                      </td>
+                    </tr>
+                    <!-- <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">+ GST 6% :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">MYR 4,430.88</div>
+                      </td>
+                    </tr> -->
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell"><b>MYR {{ booking_details.bia }}</b></div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell"></div>
+                      </td>
+                    </tr>
+                    <!---->
+                  </tbody>
+                </table>
+                <!---->
+                <!---->
+              </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>
+      <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">
+          <span>Payment Bankin Slip</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>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+  .image {
+      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 ProgressTrack from '~/components/AdminProgressTrack'
+  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
+  import axios from 'axios'
+
+  export default {
+    components: {
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
+  },
+  data () {
+    return {
+      trackerConfig :{
+          status: 8,
+          term: null
+        },
+      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'
+        })
+      })
+    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){
+      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);
+
+      }
+    }
+}
+</script>
diff --git a/resources/assets/js/pages/admin/home.vue b/resources/assets/js/pages/admin/home.vue
index dfbf797e..e5aae7fe 100644
--- a/resources/assets/js/pages/admin/home.vue
+++ b/resources/assets/js/pages/admin/home.vue
@@ -9,38 +9,38 @@
 <el-tabs type="border-card" class="table-switch">
   <el-tab-pane label="Booking Table">
   <el-row :gutter="20">
-      <div>
-        <el-table :data="bookingTable">
-          <el-table-column label="Ref No." width="100">
-            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
-            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> {{ scope.row.id }}</el-button>
-          </el-table-column>
-          <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
-          <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
-          <el-table-column label="Rate" width="74" prop="rate" />
-          <el-table-column label="Amount" prop="amount" justify="center" width="110" />
-          <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount"
-                           prop="transfer_amount" width="170" />
-          <!-- <el-table-column label="ETA" sortable width="100"/> -->
-          <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
+    <div>
+      <el-table :data="bookingTable">
+        <el-table-column label="Ref No." width="100">
+          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
+          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
+        </el-table-column>
+        <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
+        <el-table-column label="Marking" width="120" prop="marking" />
+        <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandlerTerm" label="Term" prop="term" width="100"/>
+        <el-table-column label="Rate" width="74" prop="rate" />
+        <el-table-column label="Amount" prop="amount" justify="center" width="110" />
+        <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandlerTranferAmount" label="Transfer Amount"
+                         prop="transfer_amount" width="170" />
+        <!-- <el-table-column label="ETA" sortable width="100"/> -->
+        <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
         </el-table-column> -->
-          <!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
-          <el-table-column label="Status" width="106">
-            <template slot-scope="scope">
-              <el-popover trigger="click" placement="top">
-                <p>{{ scope.row.status_desc }}</p>
-                <div slot="reference" class="name-wrapper">
-                  <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
-                </div>
-              </el-popover>
-            </template>
-          </el-table-column>
-          <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
-          <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
-          <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
-                           label="" width="180" filter-placement="bottom-end">
-            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> View Status </el-button>
-            <!-- <template slot-scope="scope">
+        <!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
+        <el-table-column label="Status" width="106" :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterHandlerStatus" prop="status_desc">
+          <template slot-scope="scope">
+            <el-popover trigger="click" placement="top">
+              <p>{{ scope.row.status_desc }}</p>
+              <div slot="reference" class="name-wrapper">
+                <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
+              </div>
+            </el-popover>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
+        <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
+        <el-table-column label="" width="180">
+          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> View Status </el-button>
+          <!-- <template slot-scope="scope">
               <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
               <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
             </template> -->
@@ -218,7 +218,7 @@ export default {
       const term = row.term;
       return value.toLowerCase() === term.substring(0,2);
     },
-    BookingStatus (status, booking_id) {
+    BookingStatus (status, booking_id, term) {
       // TODO : Get booking status from server
       this.status = status
       switch (this.status) {
@@ -254,6 +254,13 @@ export default {
           break
 
         case 6:
+          if(term == 'x2_cash' || term == 'x2_cheque' || term == 'x2_ba'){
+            this.$router.push({
+              name: 'booking.admin.x2complete',
+              params: {id: booking_id }
+            })
+            break
+          }
           this.$router.push({
             name: 'booking.admin.invoice',
             params: {id: booking_id }
diff --git a/resources/assets/js/pages/auth/login.vue b/resources/assets/js/pages/auth/login.vue
index c9407a81..2d260330 100644
--- a/resources/assets/js/pages/auth/login.vue
+++ b/resources/assets/js/pages/auth/login.vue
@@ -26,9 +26,7 @@
             <div class="form-group row">
               <div class="col-md-3"/>
               <div class="col-md-7 d-flex">
-                <checkbox v-model="remember" name="remember">
-                  {{ $t('remember_me') }}
-                </checkbox>
+    
 
                 <router-link :to="{ name: 'password.request' }" class="small ml-auto my-auto">
                   {{ $t('forgot_password') }}
diff --git a/resources/assets/js/pages/auth/register.vue b/resources/assets/js/pages/auth/register.vue
index c6609c44..1b13c2c0 100644
--- a/resources/assets/js/pages/auth/register.vue
+++ b/resources/assets/js/pages/auth/register.vue
@@ -8,7 +8,7 @@
 						<div class="form-group row">
 							<label class="col-md-3 col-form-label text-md-right">{{ $t('Marking') }}</label>
 							<div class="col-md-7">
-								<input v-model="form.marking" :class="{ 'is-invalid': form.errors.has('marking') }" class="form-control" type="text" name="marking">
+								<input style="text-transform: uppercase;" v-model="form.marking" :class="{ 'is-invalid': form.errors.has('marking') }" class="form-control" @input="forceUppercase($event, form, 'marking')" type="text" name="marking">
 								<has-error :form="form" field="marking"/>
 							</div>
 						</div>
@@ -108,6 +108,12 @@ export default {
 
 
 	methods: {
+		forceUppercase(e, o, prop) {
+				const start = e.target.selectionStart;
+				e.target.value = e.target.value.toUpperCase();
+				this.$set(o, prop, e.target.value);
+				e.target.setSelectionRange(start, start);
+		},
 		async register () {
 			var token
 			var data 
diff --git a/resources/assets/js/pages/booking/completed.vue b/resources/assets/js/pages/booking/completed.vue
index 19c6c4e8..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="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>Order Completed</h1>
     <div class="goBackButton">
       <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
@@ -148,17 +149,21 @@
 	}
 </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 {
-      status: 7,
+      trackerConfig :{
+          status: 7,
+          term: null,
+      },
       loading_btn: false,
       booking_details:{
           id: null,
@@ -180,6 +185,7 @@ export default {
       .get('/api/booking/' + this.$route.params.id)
       .then((response) => {
         this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
         loading.close();
 
       }).catch((error) => {
diff --git a/resources/assets/js/pages/booking/confirmation.vue b/resources/assets/js/pages/booking/confirmation.vue
index 24dc64a5..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="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>Bankin Slip Verification in Progress</h1>
     <div class="goBackButton">
       <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
@@ -102,17 +103,21 @@
 	}
 </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 {
-      status: 3,
+        trackerConfig :{
+          status: 3,
+          term: null
+        },
       loading_btn: false,
       booking_details:{
           id: null,
@@ -134,6 +139,7 @@ export default {
       .get('/api/booking/' + this.$route.params.id)
       .then((response) => {
         this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
         loading.close()
 
       }).catch((error) => {
diff --git a/resources/assets/js/pages/booking/po.vue b/resources/assets/js/pages/booking/po.vue
index 8f248d6b..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,17 +145,21 @@
 	}
 </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 {
-      status: 6,
+      trackerConfig :{
+        status: 6,
+        term: null
+      },
       loading_btn: false,
       booking_details:{
           id: null,
@@ -176,6 +181,7 @@ export default {
       .get('/api/booking/' + this.$route.params.id)
       .then((response) => {
         this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
         loading.close()
 
       }).catch((error) => {
diff --git a/resources/assets/js/pages/booking/poComplete.vue b/resources/assets/js/pages/booking/poComplete.vue
index 78a53e43..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="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" />
     <div align="center">
       <h4 style="margin-top:5%;">Processing Invoice</h4>
       <br>
@@ -131,17 +131,21 @@
   }
 </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 {
-      status: 6,
+      trackerConfig :{
+          status: 6,
+          term: null
+      },
       loading_btn: false,
       booking_details:{
           id: null,
@@ -163,6 +167,7 @@ export default {
       .get('/api/booking/' + this.$route.params.id)
       .then((response) => {
         this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
         loading.close()
 
       }).catch((error) => {
diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index 877f757b..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="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>Bankin Slip Approved</h1>
     <h2>Transfer In Progress</h2>
     <div class="goBackButton">
@@ -123,17 +124,21 @@
 	}
 </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 {
-      status: 4,
+      trackerConfig :{
+          status: 4,
+          term: null
+      },
       loading_btn: false,
       booking_details:{
           id: null,
@@ -155,6 +160,7 @@ export default {
       .get('/api/booking/' + this.$route.params.id)
       .then((response) => {
         this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
         loading.close()
 
       }).catch((error) => {
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index 6fe76174..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="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>Transfer Completed</h1>
     <h2> Please upload your purchase order </h2>
     <!-- upload card -->
@@ -183,18 +184,22 @@
   }
 </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,
-        status: 5,
+        trackerConfig :{
+            status: 5,
+            term: null
+        },
         loading_btn: false,
         booking_details: {
           id: null,
@@ -217,6 +222,7 @@
         .get('/api/booking/' + this.$route.params.id)
         .then((response) => {
           this.booking_details = response.data
+          this.trackerConfig.term = response.data.term
           loading.close()
 
         }).catch((error) => {
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index 4f640558..319edd22 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="status" />
+		<x2-progress-track v-if="(booking.status == 'x2_cash' || booking.status == 'x2_cheque' || booking.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
@@ -56,9 +58,8 @@
 				<el-dialog :visible.sync="dialogVisible">
 					<img :src="dialogImageUrl" width="100%" alt="">
 				</el-dialog> -->
-				<el-upload class="avatar-uploader" :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :show-file-list="false" :on-success="handleUploadSuccess"
-				    :before-upload="beforeFileUpload"
-					algin="center">
+				<el-upload class="avatar-uploader" :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :show-file-list="false"
+				    :on-success="handleUploadSuccess" :before-upload="beforeFileUpload" algin="center">
 					<img v-if="imageUrl" :src="imageUrl" class="avatar">
 					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
 				</el-upload>
@@ -122,33 +123,38 @@
 			font-size: 1em;
 		}
 	}
-	  .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
-  }
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 178px;
-    height: 178px;
-    line-height: 178px;
-    text-align: center;
-  }
-  .avatar {
-    width: 178px;
-    height: 178px;
-    display: block;
-  }
+
+	.avatar-uploader .el-upload {
+		border: 1px dashed #d9d9d9;
+		border-radius: 6px;
+		cursor: pointer;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.avatar-uploader .el-upload:hover {
+		border-color: #409EFF;
+	}
+
+	.avatar-uploader-icon {
+		font-size: 28px;
+		color: #8c939d;
+		width: 178px;
+		height: 178px;
+		line-height: 178px;
+		text-align: center;
+	}
+
+	.avatar {
+		width: 178px;
+		height: 178px;
+		display: block;
+	}
 </style>
 <script>
 	import VueCountdown from '@xkeshi/vue-countdown'
 	import ProgressTrack from '~/components/ProgressTrack'
+	import X2ProgressTrack from '~/components/X2ProgressTrack'
 	import axios from 'axios'
 
 	export default {
@@ -156,15 +162,19 @@
 		name: 'MyComponent',
 		components: {
 			'vue-countdown': VueCountdown,
-			'progress-track': ProgressTrack
+			'progress-track': ProgressTrack,
+			'x2-progress-track': X2ProgressTrack
 		},
 		data() {
 			return {
-				status: 2,
+				trackerConfig: {
+					status: 2,
+					term: null
+				},
 				start: false,
 				loading: false,
 				dialogImageUrl: '',
-				imageUrl:null,
+				imageUrl: null,
 				dialogVisible: false,
 				booking_id: this.$route.params.id,
 				user_slip_form: {
@@ -207,6 +217,7 @@
 					this.booking.bankin_amount = response.data.bia;
 					this.booking.timeout = response.data.timeout * 1000;
 					this.booking.term = response.data.term;
+					this.booking.status = response.data.status;					this.trackerConfig.term = response.data.term
 
 					if (response.data.user_bankslip_path) {
 						this.booking.user_bankslip_path = response.data.user_bankslip_path
diff --git a/resources/assets/js/pages/booking/x2Completed.vue b/resources/assets/js/pages/booking/x2Completed.vue
new file mode 100644
index 00000000..6bf26565
--- /dev/null
+++ b/resources/assets/js/pages/booking/x2Completed.vue
@@ -0,0 +1,196 @@
+<template>
+  <el-main>
+    <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>
+    </div>
+    <!-- bankslip  -->
+    <div class="row">
+      <div class="col">
+        <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'>
+              <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>
+                <br/>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- order details -->
+    <div class="card">
+      <div class="card-header">Order Details</div>
+      <div class="card-body">
+        <div class="row">
+          <div class="col">
+            <table class="table table-striped">
+              <tbody>
+                <tr>
+                  <td>Ref No :</td>
+                  <td>{{ booking_details.id }}</td>
+                </tr>
+                <tr>
+                  <td>Date :</td>
+                  <td>{{ booking_details.created_at }}</td>
+                </tr>
+                <tr>
+                  <td>Customer Marking :</td>
+                  <td>{{ booking_details.marking }}</td>
+                </tr>
+                <tr>
+                  <td>Term: </td>
+                  <td>{{ booking_details.term }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="col">
+            <table class="table table-striped">
+              <tbody>
+                <tr>
+                  <td>CNY/RMB :</td>
+                  <td>CNY {{ booking_details.amount }}</td>
+                </tr>
+                <tr>
+                  <td>+ Service Charge :</td>
+                  <td>CNY {{ booking_details.service_charge }}</td>
+                </tr>
+                <tr>
+                  <td>RATE :</td>
+                  <td>{{ booking_details.rate }}</td>
+                </tr>
+                <tr>
+                  <td></td>
+                  <td>
+                    <b>MYR {{ booking_details.bia }}</b>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-header">Order Bankin Slip</div>
+      <div class="row">
+        <div class="card-body">
+          <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>
+        </div>
+      </div>
+    </div>
+  </el-main>
+</template>
+<style>
+  h1 {
+    margin-top: 5%;
+    font-size: 3vw;
+    text-align: center;
+    margin-bottom: 3%;
+  }
+
+  .goBackButton {
+    text-align: center;
+    margin-bottom: 3%;
+  }
+
+  .uploadedImage {
+    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 {
+      font-size: 1em;
+    }
+  }
+</style>
+<script>
+  import ProgressTrack from '~/components/ProgressTrack'
+  import X2ProgressTrack from '~/components/X2ProgressTrack'
+  import axios from 'axios'
+
+  export default {
+    components: {
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
+    },
+    data() {
+      return {
+        trackerConfig: {
+          status: 7,
+          term: null,
+        },
+        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'
+          })
+        })
+    },
+    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>
\ No newline at end of file
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index f57d934a..d635fd68 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -149,7 +149,7 @@
             </el-select>
           </el-form-item>
           <el-form-item prop="order_no">
-            <el-input v-model="bookingForm.order_no" placeholder="Order No." style="width: 80%" required="true" />
+            <el-input v-model="bookingForm.order_no" placeholder="Order No. (Optional)" style="width: 80%" required="true" />
           </el-form-item>
             <el-form-item prop="account_name">
               <el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Name" style="width: 80%" required="true" />
@@ -285,7 +285,7 @@
         <el-table :data="bookingTable">
           <el-table-column label="Ref No." width="100">
             <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
-            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> {{ scope.row.id }}</el-button>
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
           </el-table-column>
           <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
           <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
@@ -311,7 +311,7 @@
           <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
           <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
                            label="" width="180" filter-placement="bottom-end">
-            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> View Status </el-button>
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id, scope.row.term) }"> View Status </el-button>
             <!-- <template slot-scope="scope">
               <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
               <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
@@ -706,7 +706,7 @@ export default {
              
             })
     },
-    BookingStatus (status, booking_id) {
+    BookingStatus (status, booking_id, term) {
       console.log(status)
       // TODO : Get booking status from server
       this.status = status
@@ -738,6 +738,14 @@ export default {
           break
 
         case 5:
+          console.log(term)
+          if(term == 'x2_cash' || term == 'x2_cheque' || term == 'x2_ba'){
+              this.$router.push({
+              name: 'booking.user.x2complete',
+              params: {id: booking_id }
+            })
+            break
+          }
           this.$router.push({
             name: 'booking.user.uploadpo',
             params: {id: booking_id }
diff --git a/resources/assets/js/pages/settings/admin-marking-setting.vue b/resources/assets/js/pages/settings/admin-marking-setting.vue
index 491c9aa2..34e8924f 100644
--- a/resources/assets/js/pages/settings/admin-marking-setting.vue
+++ b/resources/assets/js/pages/settings/admin-marking-setting.vue
@@ -19,7 +19,7 @@
 				<el-form ref="markingForm" :model="markingForm" :rules="rules">
 			      <div align="right">
 			        <el-form-item label="Marking" prop="marking">
-			          <el-input v-model="markingForm.marking" type="text" style="width: 80%" />
+			          <input style="width: 80%; text-transform: uppercase;" v-model="markingForm.marking" class="form-control" @input="forceUppercase($event, markingForm, 'marking')" type="text"  />
 			        </el-form-item>
 			        <el-form-item label="Email" prop="email">
 			          <el-input v-model="markingForm.email" type="text" style="width: 80%" />
@@ -109,6 +109,12 @@
 	    	this.UpdateTableData();
 	    },
 		methods: {
+			forceUppercase(e, o, prop) {
+				const start = e.target.selectionStart;
+				e.target.value = e.target.value.toUpperCase();
+				this.$set(o, prop, e.target.value);
+				e.target.setSelectionRange(start, start);
+			},
 			CreateMarking : function(formName){	
 				this.loading_btn = true
 				this.AddDatadialogVisible = false;
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index 91506aeb..a6450404 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -24,6 +24,7 @@ const Confirmation = () => import('~/pages/booking/confirmation').then(m => m.de
 const Transfer = () => import('~/pages/booking/transfer').then(m => m.default || m)
 const UploadPo = () => import('~/pages/booking/uploadPo').then(m => m.default || m)
 const PoComplete = () => import('~/pages/booking/poComplete').then(m => m.default || m)
+const X2Completed = () => import('~/pages/booking/x2Completed').then(m => m.default || m)
 const Completed = () => import('~/pages/booking/completed').then(m => m.default || m)
 const PurchaseOrder = () => import('~/pages/booking/po').then(m => m.default || m)
 
@@ -35,7 +36,7 @@ const SupplierReport = () => import('~/pages/admin/booking/supplierReport').then
 const UploadCNSlip = () => import('~/pages/admin/booking/uploadChinaBankslip').then(m => m.default || m)
 const UploadInvoice = () => import('~/pages/admin/booking/uploadInvoice').then(m => m.default || m)
 const adminCompleted = () => import('~/pages/admin/booking/completed').then(m => m.default || m)
-// const Completed = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
+const adminX2Completed = () => import('~/pages/admin/booking/x2Completed').then(m => m.default || m)
 
 // Admin pages
 const AdminHome = () => import('~/pages/admin/home').then(m => m.default || m)
@@ -75,7 +76,8 @@ export default [
   { path: '/booking/:id/po-complete', name: 'booking.user.pocomplete', component: PoComplete },
   { path: '/booking/:id/po', name: 'booking.user.po', component: PurchaseOrder },
   { path: '/booking/:id/complete', name: 'booking.user.complete', component: Completed },
-
+  { path: '/booking/:id/x2-complete', name: 'booking.user.x2complete', component: X2Completed },
+  
   // Admin booking
   { path: '/booking/:id/booking-detail', name: 'booking.admin.booking.detail', component: BookingDetail },
   { path: '/booking/:id/verification', name: 'booking.admin.verification', component: Verification },
@@ -84,6 +86,7 @@ export default [
   { path: '/booking/:id/upload-cn-bankslip', name: 'booking.admin.cnslip', component: UploadCNSlip },
   { path: '/booking/:id/upload-invoice', name: 'booking.admin.invoice', component: UploadInvoice },
   { path: '/booking/:id/admin/complete', name: 'booking.admin.complete', component: adminCompleted },
+  { path: '/booking/:id/admin/x2-complete', name: 'booking.admin.x2complete', component: adminX2Completed },
 
   // Admin pages
   { path: '/admin', name: 'admin.home', component: AdminHome },
diff --git a/routes/api.php b/routes/api.php
index 18c5851a..2be2d238 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -62,7 +62,7 @@ Route::group(['middleware' => 'auth:api'], function () {
 Route::group(['middleware' => 'guest:api'], function () {
     Route::post('login', 'Auth\LoginController@login')->name('login');
     Route::post('register', 'Auth\RegisterController@create');
-    Route::post('password/email', 'Auth\ForgotPasswordController@sendResetLinkEmail');
+    Route::post('password/email', 'Auth\ForgotPasswordController@sendResetLink');
     Route::post('password/reset', 'Auth\ResetPasswordController@reset');
 	Route::post('oauth/{driver}', 'Auth\OAuthController@redirectToProvider');
 	Route::get('oauth/{driver}/callback', 'Auth\OAuthController@handleProviderCallback')->name('oauth.callback');
diff --git a/storage/app/.gitignore b/storage/app/.gitignore
old mode 100644
new mode 100755
diff --git a/storage/app/public/.gitignore b/storage/app/public/.gitignore
old mode 100644
new mode 100755
diff --git a/storage/framework/.gitignore b/storage/framework/.gitignore
old mode 100644
new mode 100755
diff --git a/storage/framework/cache/.gitignore b/storage/framework/cache/.gitignore
old mode 100644
new mode 100755
diff --git a/storage/framework/sessions/.gitignore b/storage/framework/sessions/.gitignore
old mode 100644
new mode 100755
diff --git a/storage/framework/testing/.gitignore b/storage/framework/testing/.gitignore
old mode 100644
new mode 100755
diff --git a/storage/framework/views/.gitignore b/storage/framework/views/.gitignore
old mode 100644
new mode 100755
diff --git a/storage/logs/.gitignore b/storage/logs/.gitignore
old mode 100644
new mode 100755
diff --git a/tests/Feature/ChinaBankSlipTest.php b/tests/Feature/ChinaBankSlipTest.php
index 3e9937a9..c720adbf 100644
--- a/tests/Feature/ChinaBankSlipTest.php
+++ b/tests/Feature/ChinaBankSlipTest.php
@@ -55,7 +55,7 @@ class ChinaBankSlipTest extends TestCase
 			'actual_transfer_amount' => '12',
 			'details' => "123123",
 			'date' => "123123"
-		]);
+        ]);
 		if(!file_exists($china_bank_slips_path) || $size_in_kb > 3072){
 		    $response->assertStatus(400);    
 		}