diff --git a/database/migrations/2018_06_22_042127_add_adminstatus_to_booking_table.php b/database/migrations/2018_06_22_042127_add_adminstatus_to_booking_table.php
new file mode 100644
index 00000000..4e7e93a9
--- /dev/null
+++ b/database/migrations/2018_06_22_042127_add_adminstatus_to_booking_table.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddAdminstatusToBookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->integer('admin_status')->default(1);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->dropColumn('admin_status');
+        // $table->dropColumn('reject_reason');
+        });   
+    }
+}
diff --git a/database/migrations/2018_06_22_042911_change_adminstatus_default_booking_table.php b/database/migrations/2018_06_22_042911_change_adminstatus_default_booking_table.php
new file mode 100644
index 00000000..5047f990
--- /dev/null
+++ b/database/migrations/2018_06_22_042911_change_adminstatus_default_booking_table.php
@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class ChangeAdminstatusDefaultBookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->integer('admin_status')->default(0)->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+    }
+}
diff --git a/resources/assets/js/components/AdminProgressTrack.vue b/resources/assets/js/components/AdminProgressTrack.vue
index e5217e78..dfae9647 100644
--- a/resources/assets/js/components/AdminProgressTrack.vue
+++ b/resources/assets/js/components/AdminProgressTrack.vue
@@ -1,18 +1,17 @@
 <template>
-    <el-row>
-        <el-steps v-bind:value="value" :active="value" :alignCenter="true" process-status="wait" finish-status="success">
-            <el-step title="Booking"></el-step>
-            <el-step title="Verification"></el-step>
-            <el-step title="Supplier Booking"></el-step>
-            <el-step title="Supplier Report"></el-step>
-            <el-step title="Upload China Bankslip To Booking"></el-step>
-            <el-step title="Invoice"></el-step>
-            <el-step title="Completed"></el-step>
-        </el-steps>
-    </el-row>
+  <el-row>
+    <el-steps :value="value" :active="value" :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="Invoice"/>
+      <el-step title="Completed"/>
+    </el-steps>
+  </el-row>
 </template>
 
-
 <style type="text/css">
     /* .el-row {
         margin: 20px 0;
@@ -44,4 +43,4 @@ export default {
     status: 1
   })
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/assets/js/components/ProgressTrack.vue b/resources/assets/js/components/ProgressTrack.vue
index 0aa7c413..00c85c5d 100644
--- a/resources/assets/js/components/ProgressTrack.vue
+++ b/resources/assets/js/components/ProgressTrack.vue
@@ -1,17 +1,16 @@
 <template>
-    <el-row>
-        <el-steps v-bind:value="value" :active="value" :alignCenter="true" process-status="wait" finish-status="success">
-            <el-step title="Booking"></el-step>
-            <el-step title="Payment"></el-step>
-            <el-step title="Order Confirmation"></el-step>
-            <el-step title="Processing Transfer"></el-step>
-            <el-step title="Transfer Complete"></el-step>
-            <el-step title="Order Complete"></el-step>
-        </el-steps>
-    </el-row>
+  <el-row>
+    <el-steps :value="value" :active="value" :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="Processing Transfer"/>
+      <el-step title="Transfer Complete"/>
+      <el-step title="Order Complete"/>
+    </el-steps>
+  </el-row>
 </template>
 
-
 <style type="text/css">
     /* .el-row {
         margin: 20px 0;
@@ -43,4 +42,4 @@ export default {
     status: 1
   })
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/assets/js/pages/admin/booking/supplierBooking.vue b/resources/assets/js/pages/admin/booking/supplierBooking.vue
index e69de29b..37196cb3 100644
--- a/resources/assets/js/pages/admin/booking/supplierBooking.vue
+++ b/resources/assets/js/pages/admin/booking/supplierBooking.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Transfer In Progress</h4>
+      <br>
+      <h5> ETA :  3 days 14 Hours </h5>
+      <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>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>
+      </el-card>
+    </el-row>
+    <br>
+
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>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">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/AdminProgressTrack'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 4
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/supplierReport.vue b/resources/assets/js/pages/admin/booking/supplierReport.vue
index e69de29b..37196cb3 100644
--- a/resources/assets/js/pages/admin/booking/supplierReport.vue
+++ b/resources/assets/js/pages/admin/booking/supplierReport.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Transfer In Progress</h4>
+      <br>
+      <h5> ETA :  3 days 14 Hours </h5>
+      <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>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>
+      </el-card>
+    </el-row>
+    <br>
+
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>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">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/AdminProgressTrack'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 4
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
index e69de29b..37196cb3 100644
--- a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
+++ b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Transfer In Progress</h4>
+      <br>
+      <h5> ETA :  3 days 14 Hours </h5>
+      <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>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>
+      </el-card>
+    </el-row>
+    <br>
+
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>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">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/AdminProgressTrack'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 4
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index e69de29b..37196cb3 100644
--- a/resources/assets/js/pages/admin/booking/uploadInvoice.vue
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Transfer In Progress</h4>
+      <br>
+      <h5> ETA :  3 days 14 Hours </h5>
+      <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>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>
+      </el-card>
+    </el-row>
+    <br>
+
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>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">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/AdminProgressTrack'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 4
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/verification.vue b/resources/assets/js/pages/admin/booking/verification.vue
index 6134675b..e5d77ade 100644
--- a/resources/assets/js/pages/admin/booking/verification.vue
+++ b/resources/assets/js/pages/admin/booking/verification.vue
@@ -1,40 +1,34 @@
 <template>
   <el-main>
-    <progress-track v-model="status"></progress-track>
+    <progress-track v-model="status"/>
 
     <div align="center">
-      <h4 style="margin-top:5%;">Transfer In Progress</h4>
-      <br>
-      <h5> ETA :  3 days 14 Hours </h5>
-      <br>
-      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+      <h4 style="margin-top:5%;">Waiting For Payment</h4>
     </div>
-    <br>
+
     <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" align="center" :show-header="false">
-              <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" align="center" :show-header="false">
-              <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>
+      <table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;">
+        <tbody>
+          <tr>
+            <td class="el-table_2_column_9 is-right ">Amount : </td>
+            <td class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
+              <b> RMB {{ booking.amount }} </b>
+            </td>
+          </tr>
+          <tr>
+            <td width="200" class="el-table_2_column_9 is-right ">Bankin Amount : </td>
+            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
+              <b> MYR {{ booking.bankin_amount }} </b>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </el-row>
     <br>
 
-      <el-row justify="center" align="center">
+    <br>
+    <!-- user bankslip -->
+        <el-row justify="center" align="center">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
           <span>BankinSlip</span>
@@ -47,6 +41,32 @@
         </el-row>
       </el-card>
     </el-row>
+    <!-- <el-form label-width="300px">
+        <el-form-item label="Amount (RM) :"> -->
+    <div align="center">
+      Bankin Amount (RM) :
+      <el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
+        <div align="center">
+          <el-form-item prop="transfer_amount">
+            <el-input v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount" style="width: 20%"
+            />
+          </el-form-item>
+          <el-form-item>
+            <div align="center">
+              <el-button :loading="loading" type="primary" @click="submitUserSlip('user_slip_form')">Submit</el-button>
+              <router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
+                Upload Later
+              </router-link>
+            </div>
+          </el-form-item>
+        </div>
+      </el-form>
+      <br>
+      <br>
+    </div>
+    <!-- </el-form-item>
+    </el-form> -->
+
   </el-main>
 </template>
 <style>
@@ -55,21 +75,142 @@
   }
 </style>
 <script>
-  import VueCountdown from '@dmaksimovic/vue-countdown'
-  import ProgressTrack from '~/components/ProgressTrack'
-
-  export default {
-    components: {
-      'progress-track': ProgressTrack
-    },
-    data() {
-      return {
-        status: 4,
-      }
-    },
-    methods: {
-
+import ProgressTrack from '~/components/ProgressTrack'
+import axios from 'axios'
 
+export default {
+  middleware: ['auth'],
+  name: 'MyComponent',
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 2,
+      start: false,
+      loading: false,
+      dialogImageUrl: '',
+      dialogVisible: false,
+      booking_id: this.$route.params.id,
+      user_slip_form: {
+        transfer_amount: ''
+      },
+      booking: {
+        amount: '',
+        bankin_amount: '',
+        timeout: 1
+      },
+      rules: {
+        transfer_amount: [{
+          required: true,
+          message: 'Please input amount',
+          trigger: 'change'
+        } ]}
     }
+  },
+  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) => {
+        console.log(response)
+        this.booking.amount = response.data.amount
+        this.booking.bankin_amount = response.data.bia
+        this.booking.timeout = response.data.timeout * 1000
+        this.start = true
+        loading.close()
+
+        if (this.booking.timeout < 0) {
+          this.$message({
+            showClose: true,
+            message: 'Booking timeout, please make another booking.',
+            type: 'error',
+            duration: 30000
+          })
+          this.$router.push({
+            name: 'home'
+          })
+        }
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+  },
+  methods: {
+    handleCoutdownend () {
+      this.$message({
+        showClose: true,
+        message: 'Booking timeout, please make another booking.',
+        type: 'error',
+        duration: 30000
+      })
+      this.$router.push({
+        name: 'home'
+      })
+    },
+    handleRemove (file, fileList) {
+      console.log(file, fileList)
+    },
+    handlePictureCardPreview (file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    submitUserSlip (formName) {
+      this.loading = true
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          let newConfirmation = {
+            amount: this.booking.amount,
+            term: this.term
+          }
+        } else {
+          this.loading = false
+        }
+      })
+      let newUserSlip = {
+        transfer_amount: this.user_slip_form.transfer_amount
+      }
+      axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount', newUserSlip)
+        .then((response) => {
+          this.$message({
+            showClose: true,
+            message: 'Your bankinslip has been submitted, please wait admin to approve.',
+            type: 'success',
+            duration: 5000
+          })
+
+          console.log(response)
+          this.$router.push({
+            name: 'home'
+          })
+        })
+        .catch((error) => {
+          this.loading = false
+          this.$message({
+            showClose: true,
+            message: 'Please upload your bankin slip first.',
+            type: 'warning',
+            duration: 10000
+          })
+          console.log(error)
+        })
+    },
+    handleTimeExpire () {
+      alert('Booking expired')
+    },
+    startTimer () {
+      this.start = true
+    }
+
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/admin/home.vue b/resources/assets/js/pages/admin/home.vue
index 220120b8..c601ea0e 100644
--- a/resources/assets/js/pages/admin/home.vue
+++ b/resources/assets/js/pages/admin/home.vue
@@ -1,47 +1,46 @@
 <template>
- <!-- Booking Table -->
-    <el-row :gutter="20">
-      <div>
-        <el-table :data="bookingTable">
-          <el-table-column label="No." width="100">
-            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
-            <el-button type="text" slot-scope="scope" @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  label="Term" prop="term" :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" width="100" :filter-method="filterHandler">
+  <!-- Booking Table -->
+  <el-row :gutter="20">
+    <div>
+      <el-table :data="bookingTable">
+        <el-table-column label="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">
         </el-table-column> -->
-          <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">
-        </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 type="text" slot-scope="scope" @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">
+          <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-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> -->
-          </el-table-column>
-        </el-table>
-      </div>
-    </el-row>
-    <!-- Booking Table-end -->
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-row>
+  <!-- Booking Table-end -->
 </template>
 
 <script>
@@ -50,84 +49,84 @@ import axios from 'axios'
 export default {
   middleware: 'admin',
   data () {
-    return{
-    bookingTable: [
-        ]
+    return {
+      bookingTable: [
+      ]
     }
   },
-  mounted(){
-  axios
-    .get('/api/booking/')
-    .then((response) => {
-      console.log(response)
-      this.bookingTable = response.data
-          
-      //loading.close()
-    }).catch((error) => {
+  mounted () {
+    axios
+      .get('/api/booking/')
+      .then((response) => {
+        console.log(response)
+        this.bookingTable = response.data
+
+      // loading.close()
+      }).catch((error) => {
       // console.log(error)
       // loading.close()
       // this.$router.push({
       //   name: 'notfound'
       // })
-    })
-},
-  methods :{
-      filterTag(value, row) {
-        return row.tag === value
-      },
-      filterHandler(value, row, column) {
-        const property = column['property']
-        return row[property] === value
-      },
-      BookingStatus(status, booking_id) {
-        console.log(status)
-        // TODO : Get booking status from server 
-        this.status = status
+      })
+  },
+  methods: {
+    filterTag (value, row) {
+      return row.tag === value
+    },
+    filterHandler (value, row, column) {
+      const property = column['property']
+      return row[property] === value
+    },
+    BookingStatus (status, booking_id) {
+      console.log(status)
+      // TODO : Get booking status from server
+      this.status = status
 
-        switch (this.status) {
-          case 1:
-            this.$router.push({
-              name: 'booking.admin.verification',
-              params: {id: booking_id }
-            })
+      switch (this.status) {
+        case 1:
+          this.$router.push({
+            name: 'booking.admin.verification',
+            params: {id: booking_id }
+          })
 
-          case 2:
-              this.$router.push({
-              name: 'booking.admin.supplier',
-              params: {id: booking_id  }
-            })
-            break;
-          case 3:
-           this.$router.push({
-              name: 'booking.admin.supplier.report',
-              params: {id: booking_id  }
-            })
-            break;
-          case 4:
-           this.$router.push({
-              name: 'booking.admin.cnslip',
-              params: {id: booking_id  }
-            })
-            break;
+        case 2:
+          this.$router.push({
+            name: 'booking.admin.supplier',
+            params: {id: booking_id }
+          })
+          break
+        case 3:
+          this.$router.push({
+            name: 'booking.admin.supplier.report',
+            params: {id: booking_id }
+          })
+          break
+        case 4:
+          this.$router.push({
+            name: 'booking.admin.cnslip',
+            params: {id: booking_id }
+          })
+          break
 
-          case 5:
-            this.$router.push({
-              name: 'booking.admin.invoice',
-              params: {id: booking_id  }
-            })
-            break;
+        case 5:
+          this.$router.push({
+            name: 'booking.admin.invoice',
+            params: {id: booking_id }
+          })
+          break
 
-          case 6:
-            this.$router.push({
-              name: 'booking.complete',
-              params: {id: booking_id  }
-            })
-            break;
-          default:
-            break
-        }
+        case 6:
+          this.$router.push({
+            name: 'booking.complete',
+            params: {id: booking_id }
+          })
+          break
+        default:
+          break
       }
+    }
   }
-  
+
 }
 </script>
diff --git a/resources/assets/js/pages/auth/login.vue b/resources/assets/js/pages/auth/login.vue
index 054eb81f..06c5e6b4 100644
--- a/resources/assets/js/pages/auth/login.vue
+++ b/resources/assets/js/pages/auth/login.vue
@@ -80,11 +80,9 @@ export default {
 
   methods: {
     async login () {
-
       // Submit the form.
       const { data } = await this.form.post('/api/login')
 
-
       // Add loading screen
       const loading = this.$loading({
         lock: true,
@@ -96,14 +94,12 @@ export default {
       // Save the token.
       this.$store.dispatch('auth/saveToken', {
         token: data.token,
-        remember: this.remember,
+        remember: this.remember
       })
 
       // Fetch the user.
       await this.$store.dispatch('auth/fetchUser')
 
-
-
       // Redirect home.
       if (store.getters['auth/user'].role === 'admin') {
         this.$router.push({ name: 'admin.home' })
diff --git a/resources/assets/js/pages/booking/completed.vue b/resources/assets/js/pages/booking/completed.vue
index 1cb07172..42585d3c 100644
--- a/resources/assets/js/pages/booking/completed.vue
+++ b/resources/assets/js/pages/booking/completed.vue
@@ -1,103 +1,103 @@
 <template>
-    <el-main>
-        <progress-track v-model="status"></progress-track>
+  <el-main>
+    <progress-track v-model="status"/>
 
-        <div align="center">
-            <h4 style="margin-top:5%;">Order Completed</h4>
-            <br>
+    <div align="center">
+      <h4 style="margin-top:5%;">Order Completed</h4>
+      <br>
+    </div>
+
+    <!-- upload card -->
+    <br>
+    <el-row :gutter="12" justify="center" align="center">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>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">
+              <a target=" _blank" href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Invoice</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">
+              <a target=" _blank" href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <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 :gutter="12" type="flex">
+            <el-col :span="12">
+              <a target=" _blank" href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <br>
+
+    <!-- order details -->
+    <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>
-
-        <!-- upload card -->
-        <br>
-        <el-row :gutter="12" justify="center" align="center">
-            <el-col :span="8">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>Purchase Order</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-                  <el-row type="flex" :gutter="12">
-                        <el-col :span="12">
-                            <a target=" _blank" href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-
-                </el-card>
-            </el-col>
-            <el-col :span="8">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>Invoice</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-                    <el-row type="flex" :gutter="12">
-                        <el-col :span="12">
-                            <a target=" _blank" href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-                </el-card>
-            </el-col>
-            <el-col :span="8">
-                <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" :gutter="12">
-                        <el-col :span="12">
-                            <a target=" _blank" href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-                </el-card>
-            </el-col>
+        <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>
-        <br>
+      </el-card>
+    </el-row>
+    <br>
 
-        <!-- order details -->
-        <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" align="center" :show-header="false">
-                            <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" align="center" :show-header="false">
-                            <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 justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order 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">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
         </el-row>
-        <br>
-
-        <el-row justify="center" align="center">
-            <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                    <span>Order 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">
-                        <img src="http://via.placeholder.com/600x400" class="image">
-                    </el-col>
-                </el-row>
-            </el-card>
-        </el-row>
-    </el-main>
+      </el-card>
+    </el-row>
+  </el-main>
 </template>
 <style>
     .booking-details {
@@ -105,62 +105,61 @@
     }
 </style>
 <script>
-    import VueCountdown from '@dmaksimovic/vue-countdown'
-    import ProgressTrack from '~/components/ProgressTrack'
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
 
-    export default {
-        components: {
-            'progress-track': ProgressTrack
-        },
-        data() {
-            return {
-                status: 6,
-                bookingConfirmTable: [{
-                    data1: 'Order Number :',
-                    data2: '001'
-                }, {
-                    data1: 'Date :',
-                    data2: '25/5/2018'
-                }, {
-                    data1: 'Customer Marking :',
-                    data2: 'CIEF/150ECE'
-                }, {
-                    data1: '',
-                    data2: ''
-                }, {
-                    data1: 'Payment Method :',
-                    data2: 'Cash/Bank Transfer'
-                }, {
-                    data1: '',
-                    data2: ''
-                }],
-                bookingConfirmTable2: [{
-                    data1: 'CNY/RMB :',
-                    data2: 'CNY 120,500.00'
-                }, {
-                    data1: '+ Service Charge :',
-                    data2: 'CNY 20.00'
-                }, {
-                    data1: '/ RATE :',
-                    data2: '1.63'
-                }, {
-                    data1: '',
-                    data2: 'MYR 73,848.04'
-                }, {
-                    data1: '+ GST 6% :',
-                    data2: 'MYR 4,430.88'
-                }, {
-                    data1: '',
-                    data2: 'MYR 78,278.92'
-                }, {
-                    data1: '',
-                    data2: ''
-                }]
-            }
-        },
-        methods: {
-
-
-        }
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 6,
+      bookingConfirmTable: [{
+        data1: 'Order Number :',
+        data2: '001'
+      }, {
+        data1: 'Date :',
+        data2: '25/5/2018'
+      }, {
+        data1: 'Customer Marking :',
+        data2: 'CIEF/150ECE'
+      }, {
+        data1: '',
+        data2: ''
+      }, {
+        data1: 'Payment Method :',
+        data2: 'Cash/Bank Transfer'
+      }, {
+        data1: '',
+        data2: ''
+      }],
+      bookingConfirmTable2: [{
+        data1: 'CNY/RMB :',
+        data2: 'CNY 120,500.00'
+      }, {
+        data1: '+ Service Charge :',
+        data2: 'CNY 20.00'
+      }, {
+        data1: '/ RATE :',
+        data2: '1.63'
+      }, {
+        data1: '',
+        data2: 'MYR 73,848.04'
+      }, {
+        data1: '+ GST 6% :',
+        data2: 'MYR 4,430.88'
+      }, {
+        data1: '',
+        data2: 'MYR 78,278.92'
+      }, {
+        data1: '',
+        data2: ''
+      }]
     }
-</script>
\ No newline at end of file
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/booking/confirmation.vue b/resources/assets/js/pages/booking/confirmation.vue
index 58812c71..8e2ce4bf 100644
--- a/resources/assets/js/pages/booking/confirmation.vue
+++ b/resources/assets/js/pages/booking/confirmation.vue
@@ -1,6 +1,6 @@
 <template>
   <el-main>
-    <progress-track v-model="status"></progress-track>
+    <progress-track v-model="status"/>
 
     <div align="center">
       <h4 style="margin-top:5%;">Bankin Slip Verification In Progress</h4>
@@ -16,13 +16,13 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="12">
-            <el-table :data="bookingConfirmTable" align="center" :show-header="false">
+            <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" align="center" :show-header="false">
+            <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>
@@ -32,7 +32,7 @@
     </el-row>
     <br>
 
-      <el-row justify="center" align="center">
+    <el-row justify="center" align="center">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
           <span>BankinSlip</span>
@@ -53,63 +53,62 @@
   }
 </style>
 <script>
-  import VueCountdown from '@dmaksimovic/vue-countdown'
-  import ProgressTrack from '~/components/ProgressTrack'
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
 
-  export default {
-    components: {
-      'progress-track': ProgressTrack
-    },
-    data() {
-      return {
-        status: 3,
-        bookingConfirmTable: [{
-          data1: 'Order Number :',
-          data2: '001'
-        }, {
-          data1: 'Date :',
-          data2: '25/5/2018'
-        }, {
-          data1: 'Customer Marking :',
-          data2: 'CIEF/150ECE'
-        }, {
-          data1: '',
-          data2: ''
-        }, {
-          data1: 'Payment Method :',
-          data2: 'Cash/Bank Transfer'
-        }, {
-          data1: '',
-          data2: ''
-        }],
-        bookingConfirmTable2:[{
-          data1: 'CNY/RMB :',
-          data2: 'CNY 120,500.00'
-        }, {
-          data1: '+ Service Charge :',
-          data2: 'CNY 20.00'
-        }, {
-          data1: '/ RATE :',
-          data2: '1.63'
-        }, {
-          data1: '',
-          data2: 'MYR 73,848.04'
-        }, {
-          data1: '+ GST 6% :',
-          data2: 'MYR 4,430.88'
-        }, {
-          data1: '',
-          data2: 'MYR 78,278.92'
-        }, {
-          data1: '',
-          data2: ''
-        }
-        ]
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 3,
+      bookingConfirmTable: [{
+        data1: 'Order Number :',
+        data2: '001'
+      }, {
+        data1: 'Date :',
+        data2: '25/5/2018'
+      }, {
+        data1: 'Customer Marking :',
+        data2: 'CIEF/150ECE'
+      }, {
+        data1: '',
+        data2: ''
+      }, {
+        data1: 'Payment Method :',
+        data2: 'Cash/Bank Transfer'
+      }, {
+        data1: '',
+        data2: ''
+      }],
+      bookingConfirmTable2: [{
+        data1: 'CNY/RMB :',
+        data2: 'CNY 120,500.00'
+      }, {
+        data1: '+ Service Charge :',
+        data2: 'CNY 20.00'
+      }, {
+        data1: '/ RATE :',
+        data2: '1.63'
+      }, {
+        data1: '',
+        data2: 'MYR 73,848.04'
+      }, {
+        data1: '+ GST 6% :',
+        data2: 'MYR 4,430.88'
+      }, {
+        data1: '',
+        data2: 'MYR 78,278.92'
+      }, {
+        data1: '',
+        data2: ''
       }
-    },
-    methods: {
-
-
+      ]
     }
+  },
+  methods: {
+
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/booking/poComplete.vue b/resources/assets/js/pages/booking/poComplete.vue
index e70b0242..bae24ee9 100644
--- a/resources/assets/js/pages/booking/poComplete.vue
+++ b/resources/assets/js/pages/booking/poComplete.vue
@@ -1,88 +1,88 @@
 <template>
-    <el-main>
-        <progress-track v-model="status"></progress-track>
+  <el-main>
+    <progress-track v-model="status"/>
 
-        <div align="center">
-            <h4 style="margin-top:5%;">Processing Invoice</h4>
-            <br>
+    <div align="center">
+      <h4 style="margin-top:5%;">Processing Invoice</h4>
+      <br>
+    </div>
+
+    <!-- upload card -->
+    <br>
+    <el-row :gutter="12" justify="center" align="center">
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>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">
+              <a target=" _blank" href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <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 :gutter="12" type="flex">
+            <el-col :span="12">
+              <a target=" _blank" href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <br>
+
+    <!-- order details -->
+    <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>
-
-        <!-- upload card -->
-        <br>
-        <el-row :gutter="12" justify="center" align="center">
-            <el-col :span="12">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>Purchase Order</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-                  <el-row type="flex" :gutter="12">
-                        <el-col :span="12">
-                            <a target=" _blank" href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-
-                </el-card>
-            </el-col>
-            <el-col :span="12">
-                <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" :gutter="12">
-                        <el-col :span="12">
-                            <a  target=" _blank" href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-                </el-card>
-            </el-col>
+        <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>
-        <br>
+      </el-card>
+    </el-row>
+    <br>
 
-        <!-- order details -->
-        <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" align="center" :show-header="false">
-                            <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" align="center" :show-header="false">
-                            <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 justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order 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">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
         </el-row>
-        <br>
-
-        <el-row justify="center" align="center">
-            <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                    <span>Order 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">
-                        <img src="http://via.placeholder.com/600x400" class="image">
-                    </el-col>
-                </el-row>
-            </el-card>
-        </el-row>
-    </el-main>
+      </el-card>
+    </el-row>
+  </el-main>
 </template>
 <style>
     .booking-details {
@@ -90,62 +90,61 @@
     }
 </style>
 <script>
-    import VueCountdown from '@dmaksimovic/vue-countdown'
-    import ProgressTrack from '~/components/ProgressTrack'
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
 
-    export default {
-        components: {
-            'progress-track': ProgressTrack
-        },
-        data() {
-            return {
-                status: 5,
-                bookingConfirmTable: [{
-                    data1: 'Order Number :',
-                    data2: '001'
-                }, {
-                    data1: 'Date :',
-                    data2: '25/5/2018'
-                }, {
-                    data1: 'Customer Marking :',
-                    data2: 'CIEF/150ECE'
-                }, {
-                    data1: '',
-                    data2: ''
-                }, {
-                    data1: 'Payment Method :',
-                    data2: 'Cash/Bank Transfer'
-                }, {
-                    data1: '',
-                    data2: ''
-                }],
-                bookingConfirmTable2: [{
-                    data1: 'CNY/RMB :',
-                    data2: 'CNY 120,500.00'
-                }, {
-                    data1: '+ Service Charge :',
-                    data2: 'CNY 20.00'
-                }, {
-                    data1: '/ RATE :',
-                    data2: '1.63'
-                }, {
-                    data1: '',
-                    data2: 'MYR 73,848.04'
-                }, {
-                    data1: '+ GST 6% :',
-                    data2: 'MYR 4,430.88'
-                }, {
-                    data1: '',
-                    data2: 'MYR 78,278.92'
-                }, {
-                    data1: '',
-                    data2: ''
-                }]
-            }
-        },
-        methods: {
-
-
-        }
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 5,
+      bookingConfirmTable: [{
+        data1: 'Order Number :',
+        data2: '001'
+      }, {
+        data1: 'Date :',
+        data2: '25/5/2018'
+      }, {
+        data1: 'Customer Marking :',
+        data2: 'CIEF/150ECE'
+      }, {
+        data1: '',
+        data2: ''
+      }, {
+        data1: 'Payment Method :',
+        data2: 'Cash/Bank Transfer'
+      }, {
+        data1: '',
+        data2: ''
+      }],
+      bookingConfirmTable2: [{
+        data1: 'CNY/RMB :',
+        data2: 'CNY 120,500.00'
+      }, {
+        data1: '+ Service Charge :',
+        data2: 'CNY 20.00'
+      }, {
+        data1: '/ RATE :',
+        data2: '1.63'
+      }, {
+        data1: '',
+        data2: 'MYR 73,848.04'
+      }, {
+        data1: '+ GST 6% :',
+        data2: 'MYR 4,430.88'
+      }, {
+        data1: '',
+        data2: 'MYR 78,278.92'
+      }, {
+        data1: '',
+        data2: ''
+      }]
     }
-</script>
\ No newline at end of file
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index c9c7b4d9..c2e85c3f 100644
--- a/resources/assets/js/pages/booking/transfer.vue
+++ b/resources/assets/js/pages/booking/transfer.vue
@@ -1,6 +1,6 @@
 <template>
   <el-main>
-    <progress-track v-model="status"></progress-track>
+    <progress-track v-model="status"/>
 
     <div align="center">
       <h4 style="margin-top:5%;">Transfer In Progress</h4>
@@ -18,13 +18,13 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="12">
-            <el-table :data="bookingConfirmTable" align="center" :show-header="false">
+            <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" align="center" :show-header="false">
+            <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>
@@ -34,7 +34,7 @@
     </el-row>
     <br>
 
-      <el-row justify="center" align="center">
+    <el-row justify="center" align="center">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
           <span>BankinSlip</span>
@@ -55,63 +55,62 @@
   }
 </style>
 <script>
-  import VueCountdown from '@dmaksimovic/vue-countdown'
-  import ProgressTrack from '~/components/ProgressTrack'
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
 
-  export default {
-    components: {
-      'progress-track': ProgressTrack
-    },
-    data() {
-      return {
-        status: 4,
-        bookingConfirmTable: [{
-          data1: 'Order Number :',
-          data2: '001'
-        }, {
-          data1: 'Date :',
-          data2: '25/5/2018'
-        }, {
-          data1: 'Customer Marking :',
-          data2: 'CIEF/150ECE'
-        }, {
-          data1: '',
-          data2: ''
-        }, {
-          data1: 'Payment Method :',
-          data2: 'Cash/Bank Transfer'
-        }, {
-          data1: '',
-          data2: ''
-        }],
-        bookingConfirmTable2:[{
-          data1: 'CNY/RMB :',
-          data2: 'CNY 120,500.00'
-        }, {
-          data1: '+ Service Charge :',
-          data2: 'CNY 20.00'
-        }, {
-          data1: '/ RATE :',
-          data2: '1.63'
-        }, {
-          data1: '',
-          data2: 'MYR 73,848.04'
-        }, {
-          data1: '+ GST 6% :',
-          data2: 'MYR 4,430.88'
-        }, {
-          data1: '',
-          data2: 'MYR 78,278.92'
-        }, {
-          data1: '',
-          data2: ''
-        }
-        ]
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 4,
+      bookingConfirmTable: [{
+        data1: 'Order Number :',
+        data2: '001'
+      }, {
+        data1: 'Date :',
+        data2: '25/5/2018'
+      }, {
+        data1: 'Customer Marking :',
+        data2: 'CIEF/150ECE'
+      }, {
+        data1: '',
+        data2: ''
+      }, {
+        data1: 'Payment Method :',
+        data2: 'Cash/Bank Transfer'
+      }, {
+        data1: '',
+        data2: ''
+      }],
+      bookingConfirmTable2: [{
+        data1: 'CNY/RMB :',
+        data2: 'CNY 120,500.00'
+      }, {
+        data1: '+ Service Charge :',
+        data2: 'CNY 20.00'
+      }, {
+        data1: '/ RATE :',
+        data2: '1.63'
+      }, {
+        data1: '',
+        data2: 'MYR 73,848.04'
+      }, {
+        data1: '+ GST 6% :',
+        data2: 'MYR 4,430.88'
+      }, {
+        data1: '',
+        data2: 'MYR 78,278.92'
+      }, {
+        data1: '',
+        data2: ''
       }
-    },
-    methods: {
-
-
+      ]
     }
+  },
+  methods: {
+
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index 6570f5a5..226ad452 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -1,102 +1,102 @@
 <template>
-    <el-main>
-        <progress-track v-model="status"></progress-track>
+  <el-main>
+    <progress-track v-model="status"/>
 
-        <div align="center">
-            <h4 style="margin-top:5%;">Transfer Completed</h4>
-            <h5> Please upload your PO </h5>
-            <br>
+    <div align="center">
+      <h4 style="margin-top:5%;">Transfer Completed</h4>
+      <h5> Please upload your PO </h5>
+      <br>
+    </div>
+
+    <!-- upload card -->
+    <br>
+    <el-row :gutter="12" justify="center" align="center">
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Upload PO</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-po'" :on-exceed="handleExceed" :on-preview="handlePreview"
+                     :on-remove="handleRemove"
+                     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">jpg/png/pdf files with a size less than 3mb</div>
+          </el-upload>
+
+          <br>
+
+          <div class="bottom clearfix" style="text-align:right;">
+            <el-button :loading="loading" type="primary" @click="uploadPo">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>China Bank Slip</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">
+              <a href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <br>
+
+    <!-- order details -->
+    <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>
-
-        <!-- upload card -->
-        <br>
-        <el-row :gutter="12" justify="center" align="center">
-            <el-col :span="12">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>Upload PO</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-
-                    <!-- upload image -->
-                    <el-upload class="upload-demo" drag v-bind:action="'/api/booking/' + booking_id + '/upload-po'" 
-                        :on-exceed="handleExceed"
-                        :on-preview="handlePreview" 
-                        :on-remove="handleRemove"
-                        multiple>
-                        <i class="el-icon-upload"></i>
-                        <div class="el-upload__text">Drop file here or
-                            <em>click to upload</em>
-                        </div>
-                        <div class="el-upload__tip" slot="tip">jpg/png/pdf files with a size less than 3mb</div>
-                    </el-upload>
-
-                    <br>
-
-                    <div class="bottom clearfix" style="text-align:right;">
-                        <el-button @click="uploadPo" :loading="loading" type="primary">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>China Bank Slip</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-                    <el-row type="flex" :gutter="12">
-                        <el-col :span="12">
-                            <a href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-                </el-card>
-            </el-col>
+        <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>
-        <br>
+      </el-card>
+    </el-row>
+    <br>
 
-        <!-- order details -->
-        <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" align="center" :show-header="false">
-                            <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" align="center" :show-header="false">
-                            <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 justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order 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">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
         </el-row>
-        <br>
-
-        <el-row justify="center" align="center">
-            <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                    <span>Order 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">
-                        <img src="http://via.placeholder.com/600x400" class="image">
-                    </el-col>
-                </el-row>
-            </el-card>
-        </el-row>
-    </el-main>
+      </el-card>
+    </el-row>
+  </el-main>
 </template>
 <style>
     .booking-details {
@@ -104,101 +104,100 @@
     }
 </style>
 <script>
-    import VueCountdown from '@dmaksimovic/vue-countdown'
-    import ProgressTrack from '~/components/ProgressTrack'
-    import axios from 'axios'
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
+import axios from 'axios'
 
-    export default {
-        components: {
-            'progress-track': ProgressTrack
-        },
-        data() {
-            return {
-                booking_id: this.$route.params.id,
-                status: 5,
-                loading: false,
-                bookingConfirmTable: [{
-                    data1: 'Order Number :',
-                    data2: '001'
-                }, {
-                    data1: 'Date :',
-                    data2: '25/5/2018'
-                }, {
-                    data1: 'Customer Marking :',
-                    data2: 'CIEF/150ECE'
-                }, {
-                    data1: '',
-                    data2: ''
-                }, {
-                    data1: 'Payment Method :',
-                    data2: 'Cash/Bank Transfer'
-                }, {
-                    data1: '',
-                    data2: ''
-                }],
-                bookingConfirmTable2: [{
-                    data1: 'CNY/RMB :',
-                    data2: 'CNY 120,500.00'
-                }, {
-                    data1: '+ Service Charge :',
-                    data2: 'CNY 20.00'
-                }, {
-                    data1: '/ RATE :',
-                    data2: '1.63'
-                }, {
-                    data1: '',
-                    data2: 'MYR 73,848.04'
-                }, {
-                    data1: '+ GST 6% :',
-                    data2: 'MYR 4,430.88'
-                }, {
-                    data1: '',
-                    data2: 'MYR 78,278.92'
-                }, {
-                    data1: '',
-                    data2: ''
-                }]
-            }
-        },
-        methods: {
-            uploadPo(){
-                this.loading = true
-                axios
-                .post('/api/booking/' + this.$route.params.id + '/confirm-po')
-                .then((response) => {
-                    console.log(response)
-                    this.$message({
-                    showClose: true,
-                    message: 'Your PO has been uploaded. We are processing the Invoice.',
-                    type: 'success',
-                    duration: 5000,
-                    });
-                    this.$router.push({
-                    name: 'home'
-                    })
-                    this.loading = false
-
-                }).catch((error) => {
-                    console.log(error)
-                    loading.close()
-                    this.$router.push({
-                        name: 'notfound'
-                    })
-                    this.loading = false
-                })
-            },
-            handleRemove(file, fileList) {
-                console.log(file, fileList);
-            },
-            handlePreview(file) {
-                console.log(file);
-            },
-            handleExceed(files, fileList) {
-                this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);
-            },
-            beforeRemove(file, fileList) {
-                return this.$confirm(`确定移除 ${ file.name }？`);
-            }
-        }
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      booking_id: this.$route.params.id,
+      status: 5,
+      loading: false,
+      bookingConfirmTable: [{
+        data1: 'Order Number :',
+        data2: '001'
+      }, {
+        data1: 'Date :',
+        data2: '25/5/2018'
+      }, {
+        data1: 'Customer Marking :',
+        data2: 'CIEF/150ECE'
+      }, {
+        data1: '',
+        data2: ''
+      }, {
+        data1: 'Payment Method :',
+        data2: 'Cash/Bank Transfer'
+      }, {
+        data1: '',
+        data2: ''
+      }],
+      bookingConfirmTable2: [{
+        data1: 'CNY/RMB :',
+        data2: 'CNY 120,500.00'
+      }, {
+        data1: '+ Service Charge :',
+        data2: 'CNY 20.00'
+      }, {
+        data1: '/ RATE :',
+        data2: '1.63'
+      }, {
+        data1: '',
+        data2: 'MYR 73,848.04'
+      }, {
+        data1: '+ GST 6% :',
+        data2: 'MYR 4,430.88'
+      }, {
+        data1: '',
+        data2: 'MYR 78,278.92'
+      }, {
+        data1: '',
+        data2: ''
+      }]
     }
-</script>
\ No newline at end of file
+  },
+  methods: {
+    uploadPo () {
+      this.loading = true
+      axios
+        .post('/api/booking/' + this.$route.params.id + '/confirm-po')
+        .then((response) => {
+          console.log(response)
+          this.$message({
+            showClose: true,
+            message: 'Your PO has been uploaded. We are processing the Invoice.',
+            type: 'success',
+            duration: 5000
+          })
+          this.$router.push({
+            name: 'home'
+          })
+          this.loading = false
+        }).catch((error) => {
+          console.log(error)
+          loading.close()
+          this.$router.push({
+            name: 'notfound'
+          })
+          this.loading = false
+        })
+    },
+    handleRemove (file, fileList) {
+      console.log(file, fileList)
+    },
+    handlePreview (file) {
+      console.log(file)
+    },
+    handleExceed (files, fileList) {
+      this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`)
+    },
+    beforeRemove (file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`)
+    }
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index db35014e..fa1cb4df 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -1,6 +1,6 @@
 <template>
   <el-main>
-    <progress-track v-model="status"></progress-track>
+    <progress-track v-model="status"/>
 
     <div align="center">
       <h4 style="margin-top:5%;">Waiting For Payment</h4>
@@ -26,10 +26,8 @@
     </el-row>
     <br>
 
-
     <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
 
-
     <div align="center">
 
       <vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
@@ -39,11 +37,9 @@
     </div>
     <br>
 
-
-
     <!-- upload image -->
-    <el-upload v-bind:action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
-      list-type="picture-card" align="center">
+    <el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
+               list-type="picture-card" align="center">
       <i class="el-icon-plus" />
     </el-upload>
     <el-dialog :visible.sync="dialogVisible">
@@ -56,15 +52,15 @@
         <el-form-item label="Amount (RM) :"> -->
     <div align="center">
       Bankin Amount (RM) :
-      <el-form :model="user_slip_form" :rules="rules" ref="user_slip_form">
+      <el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
         <div align="center">
           <el-form-item prop="transfer_amount">
             <el-input v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount" style="width: 20%"
             />
           </el-form-item>
           <el-form-item>
-              <div align="center">
-              <el-button type="primary" :loading="loading" @click="submitUserSlip('user_slip_form')">Submit</el-button>
+            <div align="center">
+              <el-button :loading="loading" type="primary" @click="submitUserSlip('user_slip_form')">Submit</el-button>
               <router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
                 Upload Later
               </router-link>
@@ -78,8 +74,6 @@
     <!-- </el-form-item>
     </el-form> -->
 
-
-
   </el-main>
 </template>
 <style>
@@ -88,151 +82,144 @@
   }
 </style>
 <script>
-  import VueCountdown from '@xkeshi/vue-countdown'
-  import ProgressTrack from '~/components/ProgressTrack'
-  import axios from 'axios'
+import VueCountdown from '@xkeshi/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
+import axios from 'axios'
 
-  export default {
-    middleware: ['auth'],
-    name: 'MyComponent',
-    components: {
-      'vue-countdown': VueCountdown,
-      'progress-track': ProgressTrack
-    },
-    data() {
-      return {
-        status: 2,
-        start: false,
-        loading: false,
-        dialogImageUrl: '',
-        dialogVisible: false,
-        booking_id: this.$route.params.id,
-        user_slip_form:{
-          transfer_amount : ''
-        },
-        booking: {
-          amount: '',
-          bankin_amount: '',
-          timeout: 1
-        },
-        rules: {
-          transfer_amount: [{
-            required: true,
-            message: 'Please input amount',
-            trigger: 'change'
-          }, ],}
-      }
-    },
-    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) => {
-          console.log(response)
-          this.booking.amount = response.data.amount
-          this.booking.bankin_amount = response.data.bia
-          this.booking.timeout = response.data.timeout * 1000
-          this.start = true;
-          loading.close()
-
-          if(this.booking.timeout < 0 ){
-              this.$message({
-              showClose: true,
-              message: 'Booking timeout, please make another booking.',
-              type: 'error',
-              duration: 30000,
-            });
-            this.$router.push({
-              name: 'home'
-            })
-          }
-
-        }).catch((error) => {
-          console.log(error)
-          loading.close()
-          this.$router.push({
-            name: 'notfound'
-          })
-        })
-     
-    },
-    methods: {
-      handleCoutdownend(){
-        this.$message({
-          showClose: true,
-          message: 'Booking timeout, please make another booking.',
-          type: 'error',
-          duration: 30000,
-        });
-        this.$router.push({
-          name: 'home'
-        })
+export default {
+  middleware: ['auth'],
+  name: 'MyComponent',
+  components: {
+    'vue-countdown': VueCountdown,
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 2,
+      start: false,
+      loading: false,
+      dialogImageUrl: '',
+      dialogVisible: false,
+      booking_id: this.$route.params.id,
+      user_slip_form: {
+        transfer_amount: ''
       },
-      handleRemove(file, fileList) {
-        console.log(file, fileList)
+      booking: {
+        amount: '',
+        bankin_amount: '',
+        timeout: 1
       },
-      handlePictureCardPreview(file) {
-        this.dialogImageUrl = file.url
-        this.dialogVisible = true
-      },
-      submitUserSlip(formName) {
-         this.loading = true
-         this.$refs[formName].validate((valid) => {
-          if (valid) {
-            let newConfirmation = {
-              amount: this.booking.amount,
-              term: this.term
-            }
-          }
-          else{
-            this.loading = false
-            return
-          }
-          });
-         let newUserSlip = {
-          transfer_amount : this.user_slip_form.transfer_amount
-        }
-        axios.patch('/api/booking/'+ this.booking_id +'/bankslip-amount', newUserSlip)
-          .then((response) => {
-          
-            this.$message({
-              showClose: true,
-              message: 'Your bankinslip has been submitted, please wait admin to approve.',
-              type: 'success',
-              duration: 5000,
-            });
-            
-            console.log(response)
-             this.$router.push({
-              name: 'home'
-            })
-
-          })
-          .catch((error) => {
-            this.loading = false
-            this.$message({
-              showClose: true,
-              message: 'Please upload your bankin slip first.',
-              type: 'warning',
-              duration: 10000,
-            });
-            console.log(error)
-            return
-          })
-      },
-      handleTimeExpire() {
-        alert('Booking expired')
-      },
-      startTimer() {
-        this.start = true
-      },
-
+      rules: {
+        transfer_amount: [{
+          required: true,
+          message: 'Please input amount',
+          trigger: 'change'
+        } ]}
     }
+  },
+  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) => {
+        console.log(response)
+        this.booking.amount = response.data.amount
+        this.booking.bankin_amount = response.data.bia
+        this.booking.timeout = response.data.timeout * 1000
+        this.start = true
+        loading.close()
+
+        if (this.booking.timeout < 0) {
+          this.$message({
+            showClose: true,
+            message: 'Booking timeout, please make another booking.',
+            type: 'error',
+            duration: 30000
+          })
+          this.$router.push({
+            name: 'home'
+          })
+        }
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+  },
+  methods: {
+    handleCoutdownend () {
+      this.$message({
+        showClose: true,
+        message: 'Booking timeout, please make another booking.',
+        type: 'error',
+        duration: 30000
+      })
+      this.$router.push({
+        name: 'home'
+      })
+    },
+    handleRemove (file, fileList) {
+      console.log(file, fileList)
+    },
+    handlePictureCardPreview (file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    submitUserSlip (formName) {
+      this.loading = true
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          let newConfirmation = {
+            amount: this.booking.amount,
+            term: this.term
+          }
+        } else {
+          this.loading = false
+        }
+      })
+      let newUserSlip = {
+        transfer_amount: this.user_slip_form.transfer_amount
+      }
+      axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount', newUserSlip)
+        .then((response) => {
+          this.$message({
+            showClose: true,
+            message: 'Your bankinslip has been submitted, please wait admin to approve.',
+            type: 'success',
+            duration: 5000
+          })
+
+          console.log(response)
+          this.$router.push({
+            name: 'home'
+          })
+        })
+        .catch((error) => {
+          this.loading = false
+          this.$message({
+            showClose: true,
+            message: 'Please upload your bankin slip first.',
+            type: 'warning',
+            duration: 10000
+          })
+          console.log(error)
+        })
+    },
+    handleTimeExpire () {
+      alert('Booking expired')
+    },
+    startTimer () {
+      this.start = true
+    }
+
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index b53ed7d8..af0008f5 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -140,8 +140,8 @@
     <!-- Rate-Display-end -->
 
     <!-- Form_popup -->
-    <el-dialog :visible.sync="dialogFormVisible" title="Booking" :fullscreen="true" center>
-      <el-form :model="bookingForm" :rules="rules" ref="bookingForm">
+    <el-dialog :visible.sync="dialogFormVisible" :fullscreen="true" title="Booking" center>
+      <el-form ref="bookingForm" :model="bookingForm" :rules="rules">
         <div align="center">
           <el-form-item prop="account_name">
             <el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Account" style="width: 80%" required="true" />
@@ -159,7 +159,7 @@
           <el-form-item>
             <el-button @click="dialogFormVisible = false">Cancel</el-button>
 
-            <el-button type="primary" :loading="loading" @click="getCalculationValue('bookingForm')">Book Now</el-button>
+            <el-button :loading="loading" type="primary" @click="getCalculationValue('bookingForm')">Book Now</el-button>
           </el-form-item>
         </div>
       </el-form>
@@ -167,7 +167,7 @@
     <!-- Form_popup-end -->
 
     <!-- Booking_confirmation_popup -->
-    <el-dialog :visible.sync="dialogFormVisible1" title="Booking Confirmation" :fullscreen="true" center>
+    <el-dialog :visible.sync="dialogFormVisible1" :fullscreen="true" title="Booking Confirmation" center>
 
       <!-- Table_booking_confirmation -->
       <!-- <el-table :data="bookingConfirmTable" align="center">
@@ -203,12 +203,12 @@
             <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.rate }}</td>
           </tr>
           <tr>
-            <td width="200" class="el-table_2_column_9 is-right "> </td>
+            <td width="200" class="el-table_2_column_9 is-right "/>
             <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RM {{ bookingConfirmTable.bankin_amount }}</td>
           </tr>
           <tr>
-            <td width="200" class="el-table_2_column_9 is-right "> </td>
-            <td width="200" class="el-table_2_column_9 is-left "></td>
+            <td width="200" class="el-table_2_column_9 is-right "/>
+            <td width="200" class="el-table_2_column_9 is-left "/>
           </tr>
 
           <tr>
@@ -226,7 +226,7 @@
 
       <span slot="footer" class="dialog-footer">
         <!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
-        <el-button type="primary" :loading="loading" @click="createBooking">Confirm</el-button>
+        <el-button :loading="loading" type="primary" @click="createBooking">Confirm</el-button>
       </span>
     </el-dialog>
     <!-- Booking_confirmation_popup -->
@@ -241,15 +241,14 @@
         <el-table :data="bookingTable">
           <el-table-column label="No." width="100">
             <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
-            <el-button type="text" slot-scope="scope" @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.id }}</el-button>
           </el-table-column>
           <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
-         <el-table-column  label="Term" prop="term" :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" width="100" :filter-method="filterHandler">
-        </el-table-column> -->
+          <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" />
+                           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> -->
@@ -267,8 +266,8 @@
           <!-- <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 type="text" slot-scope="scope" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> View Status </el-button>
+                           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-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>
@@ -287,247 +286,244 @@
   }
 </style>
 <script>
-  import Form from 'vform'
-  import LoginWithGithub from '~/components/LoginWithGithub'
-  import store from '~/store'
-  import axios from 'axios'
+import Form from 'vform'
+import LoginWithGithub from '~/components/LoginWithGithub'
+import store from '~/store'
+import axios from 'axios'
 
-  export default {
-    middleware: ['auth'],
+export default {
+  middleware: ['auth'],
 
-    data() {
-      return {
-        confirmForm: new Form({
-          term: '',
-          amount: ''
-        }),
-        loading: false,
-        status: '',
-        booking: {
-          amount: '',
-          rate: ''
-        },
-        bookingForm: {
-          //amount: '',
-          account_name: '',
-          bank_name: '',
-          bank_branch: '',
-          account_num: ''
-        },
-        rules: {
-          amount: [{
-            required: true,
-            message: 'Please input amount',
-            trigger: 'change'
-          }, ],
-          bank_name: [{
-            required: true,
-            message: 'Please input bank name',
-            trigger: 'change'
-          }, ],
-          account_name: [{
-            required: true,
-            message: 'Please input account name',
-            trigger: 'change'
-          }],
-          bank_branch: [{
-            required: true,
-            message: 'Please input branch',
-            trigger: 'change'
-          }],
-          account_num: [{
-            required: true,
-            message: 'Please input account number',
-            trigger: 'change'
-          }]
-        },
+  data () {
+    return {
+      confirmForm: new Form({
         term: '',
-        options1: [{
-          value: 'RMB',
-          label: 'RMB'
+        amount: ''
+      }),
+      loading: false,
+      status: '',
+      booking: {
+        amount: '',
+        rate: ''
+      },
+      bookingForm: {
+        // amount: '',
+        account_name: '',
+        bank_name: '',
+        bank_branch: '',
+        account_num: ''
+      },
+      rules: {
+        amount: [{
+          required: true,
+          message: 'Please input amount',
+          trigger: 'change'
+        } ],
+        bank_name: [{
+          required: true,
+          message: 'Please input bank name',
+          trigger: 'change'
+        } ],
+        account_name: [{
+          required: true,
+          message: 'Please input account name',
+          trigger: 'change'
         }],
-        options2: [{
-          value2: 'MYR',
-          label2: 'MYR'
+        bank_branch: [{
+          required: true,
+          message: 'Please input branch',
+          trigger: 'change'
         }],
+        account_num: [{
+          required: true,
+          message: 'Please input account number',
+          trigger: 'change'
+        }]
+      },
+      term: '',
+      options1: [{
         value: 'RMB',
-        dialogFormVisible: false,
-        dialogFormVisible1: false,
-        formLabelWidth: '0px',
-        bookingTable: [
-        ],
-        bookingConfirmTable: {
-          date: 'undefined',
-          marking: 'undefined',
-          payment_method: 'undefined',
-          amount: 'undefined',
-          service_charge: 'undefined',
-          rate: 'undefined',
-          bankin_amount: 'undefined',
-          china_beneficiary: 'undefined',
-          status: 2
-        }
+        label: 'RMB'
+      }],
+      options2: [{
+        value2: 'MYR',
+        label2: 'MYR'
+      }],
+      value: 'RMB',
+      dialogFormVisible: false,
+      dialogFormVisible1: false,
+      formLabelWidth: '0px',
+      bookingTable: [
+      ],
+      bookingConfirmTable: {
+        date: 'undefined',
+        marking: 'undefined',
+        payment_method: 'undefined',
+        amount: 'undefined',
+        service_charge: 'undefined',
+        rate: 'undefined',
+        bankin_amount: 'undefined',
+        china_beneficiary: 'undefined',
+        status: 2
       }
+    }
+  },
+  mounted () {
+    axios
+      .get('/api/booking/')
+      .then((response) => {
+        console.log(response)
+        this.bookingTable = response.data
+
+        // loading.close()
+      }).catch((error) => {
+        // console.log(error)
+        // loading.close()
+        // this.$router.push({
+        //   name: 'notfound'
+        // })
+      })
+  },
+  methods: {
+    // TODO fetch booking data on load
+    formatter (row, column) {
+      return row.address
     },
-    mounted(){
-      axios
-        .get('/api/booking/')
+    filterTag (value, row) {
+      return row.tag === value
+    },
+    filterHandler (value, row, column) {
+      const property = column['property']
+      return row[property] === value
+    },
+    acceptTerm: function (newterm) {
+      if (this.booking.amount == '') {
+        this.$message({
+          message: 'Please input amount',
+          type: 'warning'
+        })
+        return
+      }
+      this.dialogFormVisible = true
+      this.term = newterm
+    },
+    BookingList () {
+      axios.get('api/booking')
         .then((response) => {
           console.log(response)
-          this.bookingTable = response.data
-              
-          //loading.close()
-        }).catch((error) => {
-          // console.log(error)
-          // loading.close()
-          // this.$router.push({
-          //   name: 'notfound'
-          // })
+          this.list = response.data
         })
     },
-    methods: {
-      // TODO fetch booking data on load 
-      formatter(row, column) {
-        return row.address
-      },
-      filterTag(value, row) {
-        return row.tag === value
-      },
-      filterHandler(value, row, column) {
-        const property = column['property']
-        return row[property] === value
-      },
-      acceptTerm: function (newterm) {
-        if (this.booking.amount == '') {
-          this.$message({
-            message: 'Please input amount',
-            type: 'warning'
-          });
-          return;
-        }
-        this.dialogFormVisible = true
-        this.term = newterm
-      },
-      BookingList() {
-        axios.get('api/booking')
-          .then((response) => {
-            console.log(response)
-            this.list = response.data
-          })
-      },
-      // Get calculation before submitting booking 
-      getCalculationValue(formName) {
-        this.loading = true
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            let newConfirmation = {
-              amount: this.booking.amount,
-              term: this.term
-            }
-            axios.post('api/booking/calculation', newConfirmation)
-              .then((response) => {
-                this.loading = false
-                console.log(response)
-                this.bookingConfirmTable.date = response.data.date
-                this.bookingConfirmTable.marking = response.data.marking
-                this.bookingConfirmTable.payment_method = response.data.payment_method
-                this.bookingConfirmTable.amount = response.data.amount
-                this.bookingConfirmTable.service_charge = response.data.service_charge
-                this.bookingConfirmTable.rate = response.data.rate
-                this.bookingConfirmTable.bankin_amount = response.data.bankin_amount
-                this.bookingConfirmTable.account_name = this.bookingForm.account_name
-                this.dialogFormVisible = false
-                this.dialogFormVisible1 = true
-              })
-              .catch((error) => {
-                this.loading = false
-                console.log(error)
-              })
-          } else {
-            return;
+    // Get calculation before submitting booking
+    getCalculationValue (formName) {
+      this.loading = true
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          let newConfirmation = {
+            amount: this.booking.amount,
+            term: this.term
           }
-        });
+          axios.post('api/booking/calculation', newConfirmation)
+            .then((response) => {
+              this.loading = false
+              console.log(response)
+              this.bookingConfirmTable.date = response.data.date
+              this.bookingConfirmTable.marking = response.data.marking
+              this.bookingConfirmTable.payment_method = response.data.payment_method
+              this.bookingConfirmTable.amount = response.data.amount
+              this.bookingConfirmTable.service_charge = response.data.service_charge
+              this.bookingConfirmTable.rate = response.data.rate
+              this.bookingConfirmTable.bankin_amount = response.data.bankin_amount
+              this.bookingConfirmTable.account_name = this.bookingForm.account_name
+              this.dialogFormVisible = false
+              this.dialogFormVisible1 = true
+            })
+            .catch((error) => {
+              this.loading = false
+              console.log(error)
+            })
+        } else {
 
-      },
-      createBooking: function () {
-        this.loading = true,
-        this.dialogFormVisible1 = true
-
-        let newBooking = {
-          account_name: this.bookingForm.account_name,
-          account_num: this.bookingForm.account_num,
-          bank_name: this.bookingForm.bank_name,
-          bank_branch: this.bookingForm.bank_branch,
-          amount: this.booking.amount,
-          term: this.term
         }
-
-        console.log(newBooking)
-        axios.post('api/booking', newBooking)
-          .then((response) => {
-            this.loading = false
-            // push with return id 
-            this.$router.push({
-              name: 'booking.user.upload',
-              params: {id: response.data.id }
-            })
-
-            // pass variable to another router 
-
-          })
-          .catch((error) => {
-            console.log(error)
-            return
-          })
-      },
-      BookingStatus(status, booking_id) {
-        console.log(status)
-        // TODO : Get booking status from server 
-        this.status = status
-
-        switch (this.status) {
-          case 1:
-            this.$router.push({
-              name: 'booking.user.upload',
-              params: {id: booking_id }
-            })
-
-          case 2:
-              this.$router.push({
-              name: 'booking.confirmation',
-              params: {id: booking_id  }
-            })
-            break;
-          case 3:
-           this.$router.push({
-              name: 'booking.transfer',
-              params: {id: booking_id  }
-            })
-            break;
-          case 4:
-           this.$router.push({
-              name: 'booking.user.uploadpo',
-              params: {id: booking_id  }
-            })
-            break;
-
-          case 5:
-            this.$router.push({
-              name: 'booking.user.pocomplete',
-              params: {id: booking_id  }
-            })
-            break;
-
-          case 6:
-            this.$router.push({
-              name: 'booking.complete',
-              params: {id: booking_id  }
-            })
-            break;
-          default:
-            break
-        }
-      }
+      })
     },
+    createBooking: function () {
+      this.loading = true,
+      this.dialogFormVisible1 = true
+
+      let newBooking = {
+        account_name: this.bookingForm.account_name,
+        account_num: this.bookingForm.account_num,
+        bank_name: this.bookingForm.bank_name,
+        bank_branch: this.bookingForm.bank_branch,
+        amount: this.booking.amount,
+        term: this.term
+      }
+
+      console.log(newBooking)
+      axios.post('api/booking', newBooking)
+        .then((response) => {
+          this.loading = false
+          // push with return id
+          this.$router.push({
+            name: 'booking.user.upload',
+            params: {id: response.data.id }
+          })
+
+          // pass variable to another router
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    BookingStatus (status, booking_id) {
+      console.log(status)
+      // TODO : Get booking status from server
+      this.status = status
+
+      switch (this.status) {
+        case 1:
+          this.$router.push({
+            name: 'booking.user.upload',
+            params: {id: booking_id }
+          })
+
+        case 2:
+          this.$router.push({
+            name: 'booking.confirmation',
+            params: {id: booking_id }
+          })
+          break
+        case 3:
+          this.$router.push({
+            name: 'booking.transfer',
+            params: {id: booking_id }
+          })
+          break
+        case 4:
+          this.$router.push({
+            name: 'booking.user.uploadpo',
+            params: {id: booking_id }
+          })
+          break
+
+        case 5:
+          this.$router.push({
+            name: 'booking.user.pocomplete',
+            params: {id: booking_id }
+          })
+          break
+
+        case 6:
+          this.$router.push({
+            name: 'booking.complete',
+            params: {id: booking_id }
+          })
+          break
+        default:
+          break
+      }
+    }
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index 351dacfa..b1c5e996 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -18,15 +18,13 @@ const UploadPo = () => import('~/pages/booking/uploadPo').then(m => m.default ||
 const PoComplete = () => import('~/pages/booking/poComplete').then(m => m.default || m)
 const Completed = () => import('~/pages/booking/completed').then(m => m.default || m)
 
-
 // Admin booking
 const Verification = () => import('~/pages/admin/booking/verification').then(m => m.default || m)
 const Supplier = () => import('~/pages/admin/booking/supplierBooking').then(m => m.default || m)
 const SupplierReport = () => import('~/pages/admin/booking/supplierReport').then(m => m.default || m)
 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 Completed = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
-
+// const Completed = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
 
 const AdminHome = () => import('~/pages/admin/home').then(m => m.default || m)
 
@@ -45,7 +43,7 @@ export default [
       { path: 'profile', name: 'settings.profile', component: SettingsProfile },
       { path: 'password', name: 'settings.password', component: SettingsPassword }
     ] },
-  
+
   // Booking
   { path: '/booking/:id/upload-user-bankslip', name: 'booking.user.upload', component: Upload },
   { path: '/booking/:id/confirmation', name: 'booking.confirmation', component: Confirmation },
@@ -54,15 +52,14 @@ export default [
   { path: '/booking/:id/po-complete', name: 'booking.user.pocomplete', component: PoComplete },
   { path: '/booking/:id/complete', name: 'booking.complete', component: Completed },
 
-  // Admin booking 
+  // Admin booking
   { path: '/booking/:id/verification', name: 'booking.admin.verification', component: Verification },
   { path: '/booking/:id/supplier', name: 'booking.admin.supplier', component: Supplier },
   { path: '/booking/:id/supplier-report', name: 'booking.admin.supplier.report', component: SupplierReport },
   { 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/complete', name: 'booking.complete', component: Completed },
-
+  // { path: '/booking/:id/complete', name: 'booking.complete', component: Completed },
 
   { path: '/admin', name: 'admin.home', component: AdminHome },
-  { path: '*', name:'notfound', component: NotFound }
+  { path: '*', name: 'notfound', component: NotFound }
 ]
diff --git a/resources/assets/js/store/modules/auth.js b/resources/assets/js/store/modules/auth.js
index 11fe5241..c2ad7252 100644
--- a/resources/assets/js/store/modules/auth.js
+++ b/resources/assets/js/store/modules/auth.js
@@ -37,7 +37,7 @@ export const mutations = {
 
   [types.LOGOUT] (state) {
     state.user = null
-    state.role = null 
+    state.role = null
     state.token = null
 
     Cookies.remove('token')