diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 06915eec..774f9597 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,7 +1,7 @@
 {
-    "/js/lang-zh-CN.489521629fd49ac7628e.js": "/js/lang-zh-CN.489521629fd49ac7628e.js",
-    "/js/lang-es.459dcb868aa54d488979.js": "/js/lang-es.459dcb868aa54d488979.js",
-    "/js/lang-en.31386792460363b93c17.js": "/js/lang-en.31386792460363b93c17.js",
+    "/js/lang-zh-CN.c0da3973e52421a8cfe5.js": "/js/lang-zh-CN.c0da3973e52421a8cfe5.js",
+    "/js/lang-es.f4a1a5b4a30e92527b46.js": "/js/lang-es.f4a1a5b4a30e92527b46.js",
+    "/js/lang-en.0f790217417404ecc662.js": "/js/lang-en.0f790217417404ecc662.js",
     "/js/app.js": "/js/app.js",
     "/css/app.css": "/css/app.css"
 }
\ No newline at end of file
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index e0e5bcc2..9509ac12 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -11,23 +11,23 @@ import '~/plugins'
 import '~/components'
 
 const config = {
- errorBagName: 'errors', // change if property conflicts.
- fieldsBagName: 'fields',
- delay: 0,
- // locale: 'zh_CN',
- strict: true,
- enableAutoClasses: false,
- classNames: {
-  touched: 'touched', // the control has been blurred
-  untouched: 'untouched', // the control hasn't been blurred
-  valid: 'valid', // model is valid
-  invalid: 'invalid', // model is invalid
-  pristine: 'pristine', // control has not been interacted with
-  dirty: 'dirty' // control has been interacted with
- },
- events: 'blur',
- inject: true
-};
+  errorBagName: 'errors', // change if property conflicts.
+  fieldsBagName: 'fields',
+  delay: 0,
+  // locale: 'zh_CN',
+  strict: true,
+  enableAutoClasses: false,
+  classNames: {
+    touched: 'touched', // the control has been blurred
+    untouched: 'untouched', // the control hasn't been blurred
+    valid: 'valid', // model is valid
+    invalid: 'invalid', // model is invalid
+    pristine: 'pristine', // control has not been interacted with
+    dirty: 'dirty' // control has been interacted with
+  },
+  events: 'blur',
+  inject: true
+}
 
 Vue.config.productionTip = false
 
diff --git a/resources/assets/js/components/AdminProgressTrack.vue b/resources/assets/js/components/AdminProgressTrack.vue
index 3a0a6507..2b97fa9c 100644
--- a/resources/assets/js/components/AdminProgressTrack.vue
+++ b/resources/assets/js/components/AdminProgressTrack.vue
@@ -3,8 +3,8 @@
     <el-steps :value="(value.term === 'x1_ba' || value.term === 'x2_cheque') && value.status > 2 ? value.status - 2 : value.status" :active="(value.term === 'x1_ba' || value.term === 'x2_cheque') && value.status > 2 ? value.status - 2 : value.status" :align-center="true" process-status="wait" finish-status="success">
       <el-step title="Booking"/>
       <el-step title="Verification"/>
-      <el-step title="Supplier Booking" v-if="!(value.term === 'x1_ba' || value.term === 'x2_cheque')"/>
-      <el-step title="Supplier Report" v-if="!(value.term === 'x1_ba' || value.term === 'x2_cheque')"/>
+      <el-step v-if="!(value.term === 'x1_ba' || value.term === 'x2_cheque')" title="Supplier Booking"/>
+      <el-step v-if="!(value.term === 'x1_ba' || value.term === 'x2_cheque')" title="Supplier Report"/>
       <el-step title="Upload China Bankslip To Booking"/>
       <el-step title="Purchase Order/Invoice"/>
       <el-step title="Completed"/>
diff --git a/resources/assets/js/components/LocaleDropdown.vue b/resources/assets/js/components/LocaleDropdown.vue
index b4a2e143..e3911121 100644
--- a/resources/assets/js/components/LocaleDropdown.vue
+++ b/resources/assets/js/components/LocaleDropdown.vue
@@ -1,7 +1,7 @@
 <template>
-<div>
-  <ul class="nav navbar-nav">
-    <!-- <li class="nav-item dropdown">
+  <div>
+    <ul class="nav navbar-nav">
+      <!-- <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="#" role="button"
         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         {{ locales[locale] }}
@@ -13,21 +13,21 @@
         </a>
       </div>
     </li> -->
-    <ul class="navbar-nav">
-      <li v-if="(user && role == 'admin')" class="nav-item">
-        <el-popover placement="top" width="300" v-model="UpdateRatePopoverVisible">
+      <ul class="navbar-nav">
+        <li v-if="(user && role == 'admin')" class="nav-item">
+          <el-popover v-model="UpdateRatePopoverVisible" placement="top" width="300">
             <div align="center">
               <p>Today's Rate</p>
-              <p>X1 : Cash: {{rate.x1_cash}} Cheque: {{rate.x1_cheque}} BA: {{rate.x1_ba}}</p>
-              <p>X2 : Cash: {{rate.x2_cash}} Cheque: {{rate.x2_cheque}} BA: {{rate.x2_ba}}</p>
+              <p>X1 : Cash: {{ rate.x1_cash }} Cheque: {{ rate.x1_cheque }} BA: {{ rate.x1_ba }}</p>
+              <p>X2 : Cash: {{ rate.x2_cash }} Cheque: {{ rate.x2_cheque }} BA: {{ rate.x2_ba }}</p>
             </div>
             <div style="text-align: center; margin: 0">
               <el-button type="primary" size="mini" @click="UpdateRatePopoverVisible = false; UpdateRateDialogVisible = true">Update rate</el-button>
             </div>
-            <a class="nav-link" href="#" role="button" slot="reference">Update Rate</a>
-        </el-popover>
-      </li>
-    </ul>
+            <a slot="reference" class="nav-link" href="#" role="button">Update Rate</a>
+          </el-popover>
+        </li>
+      </ul>
       <li v-if="(user && role == 'admin')" class="nav-item">
         <router-link :to="{ name: 'admin.transaction-history' }" class="nav-link">
           {{ $t('Transaction History') }}
@@ -38,35 +38,35 @@
           {{ $t('Completed Orders') }}
         </router-link>
       </li>
-  </ul>
-<!-- update rate dialog start -->
- <el-dialog align="center" :visible.sync="UpdateRateDialogVisible" width="900px">
-    <el-form :inline="true" align="center" ref="rate" :model="rate" :rules="rules">
+    </ul>
+    <!-- update rate dialog start -->
+    <el-dialog :visible.sync="UpdateRateDialogVisible" align="center" width="900px">
+      <el-form ref="rate" :inline="true" :model="rate" :rules="rules" align="center">
 
-        <el-form-item prop="x1_cash" >X1: &nbsp;&nbsp;&nbsp;Cash : <el-input v-model.number="rate.x1_cash" style=width:60% ></el-input></el-form-item>
-        <el-form-item prop="x1_cheque" >Cheque : <el-input  v-model.number="rate.x1_cheque" style=width:60%></el-input></el-form-item>
-        <el-form-item prop="x1_ba">BA : <el-input v-model.number="rate.x1_ba" style=width:60%></el-input></el-form-item>
+        <el-form-item prop="x1_cash" >X1: &nbsp;&nbsp;&nbsp;Cash : <el-input v-model.number="rate.x1_cash" style="width:60%" /></el-form-item>
+        <el-form-item prop="x1_cheque" >Cheque : <el-input v-model.number="rate.x1_cheque" style="width:60%"/></el-form-item>
+        <el-form-item prop="x1_ba">BA : <el-input v-model.number="rate.x1_ba" style="width:60%"/></el-form-item>
         <br>
-        <el-form-item prop="x2_cash" >X2: &nbsp;&nbsp;&nbsp;Cash : <el-input  v-model.number="rate.x2_cash" style=width:60% ></el-input></el-form-item>
-        <el-form-item prop="x2_cheque" >Cheque : <el-input  v-model.number="rate.x2_cheque" style=width:60%></el-input></el-form-item>
-        <el-form-item prop="x2_ba" >BA : <el-input  v-model.number="rate.x2_ba" style=width:60%></el-input></el-form-item>
-    </el-form>
-    <br>
-    <div align="center">
+        <el-form-item prop="x2_cash" >X2: &nbsp;&nbsp;&nbsp;Cash : <el-input v-model.number="rate.x2_cash" style="width:60%" /></el-form-item>
+        <el-form-item prop="x2_cheque" >Cheque : <el-input v-model.number="rate.x2_cheque" style="width:60%"/></el-form-item>
+        <el-form-item prop="x2_ba" >BA : <el-input v-model.number="rate.x2_ba" style="width:60%"/></el-form-item>
+      </el-form>
+      <br>
+      <div align="center">
         <el-button type="text" @click="UpdateRateDialogVisible = false">Cancel</el-button>
         <el-button type="primary" @click="updateRate('rate'); UpdateRateDialogVisible = false; DoneUpdateRateDialogVisible = true" >Save</el-button>
-    </div>
-  </el-dialog> 
-<!-- update rate dialog done -->
+      </div>
+    </el-dialog>
+    <!-- update rate dialog done -->
 
-  <el-dialog align="center" :visible.sync="DoneUpdateRateDialogVisible" width="30%">
-    <span>Rate Successfully Updated</span><br><br>
-    <div align="center">
+    <el-dialog :visible.sync="DoneUpdateRateDialogVisible" align="center" width="30%">
+      <span>Rate Successfully Updated</span><br><br>
+      <div align="center">
         <el-button type="primary" @click="DoneUpdateRateDialogVisible = false">OK</el-button>
-    </div>
-  </el-dialog>
-<!-- update rate dialog done end -->
- </div> 
+      </div>
+    </el-dialog>
+    <!-- update rate dialog done end -->
+  </div>
 </template>
 
 <script>
@@ -75,28 +75,28 @@ import { loadMessages } from '~/plugins/i18n'
 import axios from 'axios'
 
 export default {
-  data() {
+  data () {
     return {
-        UpdateRatePopoverVisible: false,
-        UpdateRateDialogVisible: false,
-        DoneUpdateRateDialogVisible: false,
-        rate: {
-          x1_ba: null,
-          x1_cheque: null,
-          x1_cash: null,
-          x2_ba: null,
-          x2_cash: null,
-          x2_cheque: null,
-        },
+      UpdateRatePopoverVisible: false,
+      UpdateRateDialogVisible: false,
+      DoneUpdateRateDialogVisible: false,
+      rate: {
+        x1_ba: null,
+        x1_cheque: null,
+        x1_cash: null,
+        x2_ba: null,
+        x2_cash: null,
+        x2_cheque: null
+      },
       rules: {
         x1_cash: [
           { required: true, message: 'Please input rate for X1 Cash', trigger: 'change'},
           { type: 'number', message: 'Rate must be a number'}
-         ],
+        ],
         x1_cheque: [
           { required: true, message: 'Please input rate for X1 Cheque', trigger: 'change'},
           { type: 'number', message: 'Rate must be a number'}
-          ],
+        ],
         x1_ba: [
           { required: true, message: 'Please input rate for X1 BA', trigger: 'change'},
           { type: 'number', message: 'Rate must be a number'}
@@ -104,17 +104,17 @@ export default {
         x2_cash: [
           { required: true, message: 'Please input rate for X2 Cash', trigger: 'change'},
           { type: 'number', message: 'Rate must be a number'}
-          ],
+        ],
         x2_cheque: [
           { required: true, message: 'Please input rate for X2 Cheque', trigger: 'change'},
           { type: 'number', message: 'Rate must be a number'}
-          ],
+        ],
         x2_ba: [
           { required: true, message: 'Please input rate for X2 BA', trigger: 'change'},
           { type: 'number', message: 'Rate must be a number'}
         ]
-       }
       }
+    }
   },
   computed: mapGetters({
     locale: 'lang/locale',
@@ -123,7 +123,7 @@ export default {
     role: 'auth/role'
   }),
   mounted () {
-    this.getRate();
+    this.getRate()
   },
   methods: {
     setLocale (locale) {
@@ -133,22 +133,52 @@ export default {
         this.$store.dispatch('lang/setLocale', { locale })
       }
     },
-    getRate() {
+    getRate () {
       let $this = this
       axios.get('/api/rate').then(response => {
         this.rate = response.data
       })
     },
-    createRate: function () { // TODO : we do not have create rate, only update rate. Delete this ? 
+    createRate: function () { // TODO : we do not have create rate, only update rate. Delete this ?
       this.loading = true,
       this.dialogFormVisible1 = true
+      let newRate = {
+        x1_cash: this.rateForm.x1_cash,
+        x1_cheque: this.rateForm.x1_cheque,
+        x1_ba: this.rateForm.x1_ba,
+        x2_cash: this.rateForm.x2_cash,
+        x2_cheque: this.rateForm.x2_cheque,
+        x2_ba: this.rateForm.x2_ba
+      }
+
+      axios.post('/api/update-rate', newRate)
+        .then((response) => {
+          this.loading = false
+          this.rate = response.data
+        })
+        .catch((error) => {
+          console.log(error)
+          this.loading = false
+          this.$message({
+            showClose: true,
+            message: 'Error : All rate must be inserted',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    },
+
+    updateRate (formName) {
+      this.loading = true
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
           let newRate = {
-            x1_cash: this.rateForm.x1_cash,
-            x1_cheque: this.rateForm.x1_cheque,
-            x1_ba: this.rateForm.x1_ba,
-            x2_cash: this.rateForm.x2_cash,
-            x2_cheque: this.rateForm.x2_cheque,
-            x2_ba: this.rateForm.x2_ba
+            x1_cash: this.rate.x1_cash,
+            x1_cheque: this.rate.x1_cheque,
+            x1_ba: this.rate.x1_ba,
+            x2_cash: this.rate.x2_cash,
+            x2_cheque: this.rate.x2_cheque,
+            x2_ba: this.rate.x2_ba
           }
 
           axios.post('/api/update-rate', newRate)
@@ -156,37 +186,6 @@ export default {
               this.loading = false
               this.rate = response.data
             })
-            .catch((error) => {
-              console.log(error)
-              this.loading = false
-              this.$message({
-                showClose: true,
-                message: 'Error : All rate must be inserted',
-                type: 'error',
-                duration: 10000
-              })
-            })        
-    },
-
-    updateRate(formName) {
-        this.loading = true
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            let newRate = {
-            x1_cash: this.rate.x1_cash,
-            x1_cheque: this.rate.x1_cheque,
-            x1_ba: this.rate.x1_ba,
-            x2_cash: this.rate.x2_cash,
-            x2_cheque: this.rate.x2_cheque,
-            x2_ba: this.rate.x2_ba,
-            }
-
-            axios.post('/api/update-rate', newRate)
-            .then((response) => {
-              this.loading = false
-              this.rate = response.data
-
-            })
             .catch((error) => {
               this.loading = false
               this.$message({
@@ -196,21 +195,20 @@ export default {
                 duration: 10000
               })
             })
-          } else {
-            this.loading = false
-            DoneUpdateRateDialogVisible = false
-            UpdateRateDialogVisible = true
-            this.$message({
-                  showClose: true,
-                  message: 'Please fill the form',
-                  type: 'error',
-                  duration: 10000
-                })
-           }
-        })
-
-      },
+        } else {
+          this.loading = false
+          DoneUpdateRateDialogVisible = false
+          UpdateRateDialogVisible = true
+          this.$message({
+            showClose: true,
+            message: 'Please fill the form',
+            type: 'error',
+            duration: 10000
+          })
+        }
+      })
+    }
   }
-   
+
 }
 </script>
diff --git a/resources/assets/js/components/Navbar.vue b/resources/assets/js/components/Navbar.vue
index aa7ab426..4cbf64a2 100644
--- a/resources/assets/js/components/Navbar.vue
+++ b/resources/assets/js/components/Navbar.vue
@@ -23,7 +23,7 @@
               </el-badge>
               <el-dropdown-menu slot="dropdown">
                 <div id="notification">
-                  <div v-for="(item,index) in notification">
+                  <div v-for="(item,index) in notification" :key="item.id">
                     <a v-on:click.prevent='readNotification(item.id);navigateTo(item.link)'>
                       <el-dropdown-item>
                         <b v-if="item.is_read == 0">
diff --git a/resources/assets/js/components/ProgressTrack.vue b/resources/assets/js/components/ProgressTrack.vue
index 21241dfb..d5862b55 100644
--- a/resources/assets/js/components/ProgressTrack.vue
+++ b/resources/assets/js/components/ProgressTrack.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row>
-    <el-steps class="progressBar" :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
+    <el-steps :value="value" :active="value" :align-center="true" class="progressBar" process-status="wait" finish-status="success">
       <el-step title="Booking"/>
       <el-step title="Payment"/>
       <el-step title="Order Confirmation"/>
@@ -17,9 +17,9 @@
 		 .progressBar {
             width: 60%;
         }
-		
+
 	}
-   
+
     /*
     .el-steps {
         padding-top: 70px;
diff --git a/resources/assets/js/pages/admin/booking/bookingDetail.vue b/resources/assets/js/pages/admin/booking/bookingDetail.vue
index 197f77c9..9f6c7940 100644
--- a/resources/assets/js/pages/admin/booking/bookingDetail.vue
+++ b/resources/assets/js/pages/admin/booking/bookingDetail.vue
@@ -3,9 +3,9 @@
     <progress-track v-model="trackerConfig" />
 
     <div align="center">
-      <h4 style="margin-top:5%;"></h4>
+      <h4 style="margin-top:5%;"/>
       <h5>Waiting User Upload Bank Slip</h5>
-      <br/>
+      <br>
       <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
     </div>
     <br>
@@ -63,7 +63,7 @@
                         <div class="cell">Beneficiary Account : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{booking_details.account_name}}</div>
+                        <div class="cell">{{ booking_details.account_name }}</div>
                       </td>
                     </tr>
                     <tr class="el-table__row">
@@ -71,7 +71,7 @@
                         <div class="cell">Beneficiary Account Number : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{booking_details.account_num}}</div>
+                        <div class="cell">{{ booking_details.account_num }}</div>
                       </td>
                     </tr>
                     <!---->
@@ -84,14 +84,14 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+              <div class="el-table__column-resize-proxy" style="display: none;"/>
             </div>
           </div>
           <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
             <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
               <div class="hidden-columns">
-                <div></div>
-                <div></div>
+                <div/>
+                <div/>
               </div>
               <!---->
               <div class="el-table__body-wrapper is-scrolling-none">
@@ -127,7 +127,7 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
                         <div class="cell">MYR {{ booking_details.bia }}</div>
@@ -143,7 +143,7 @@
                     </tr> -->
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
                         <div class="cell">
@@ -153,10 +153,10 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"> </div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"> </div>
+                        <div class="cell"/>
                       </td>
                     </tr>
                     <!---->
@@ -169,7 +169,7 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+              <div class="el-table__column-resize-proxy" style="display: none;"/>
             </div>
           </div>
         </div>
@@ -210,54 +210,53 @@
   }
 </style>
 <script>
-  import ProgressTrack from '~/components/AdminProgressTrack'
-  import axios from 'axios'
+import ProgressTrack from '~/components/AdminProgressTrack'
+import axios from 'axios'
 
-  export default {
-    components: {
-      'progress-track': ProgressTrack
-    },
-    data() {
-      return {
-        trackerConfig :{
-          status: 1,
-          term: null
-        },
-        loading_btn: false,
-        rejectDialogVisible: false,
-        reject_reason: null,
-        booking_details: {
-          id: null,
-          amount: null,
-          bia: null,
-          user_bankslip_path: null,
-        },
-        estimated_arrival_time: null,
-      }
-    },
-    beforeCreate() {
-      const loading = this.$loading({
-        lock: true,
-        text: 'Please wait..',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      trackerConfig: {
+        status: 1,
+        term: null
+      },
+      loading_btn: false,
+      rejectDialogVisible: false,
+      reject_reason: null,
+      booking_details: {
+        id: null,
+        amount: null,
+        bia: null,
+        user_bankslip_path: null
+      },
+      estimated_arrival_time: null
+    }
+  },
+  beforeCreate () {
+    const loading = this.$loading({
+      lock: true,
+      text: 'Please wait..',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
 
-      axios
-        .get('/api/admin/booking/' + this.$route.params.id)
-        .then((response) => {
-          this.booking_details = response.data;
-          this.trackerConfig.term = response.data.term;
-          console.log(this.booking_details);
-          loading.close()
-
-        }).catch((error) => {
-          console.log(error)
-          loading.close()
-          this.$router.push({
-            name: 'notfound'
-          })
+    axios
+      .get('/api/admin/booking/' + this.$route.params.id)
+      .then((response) => {
+        this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
+        console.log(this.booking_details)
+        loading.close()
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
         })
-    },
+      })
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/completed.vue b/resources/assets/js/pages/admin/booking/completed.vue
index e3f14b71..d4eca8d9 100644
--- a/resources/assets/js/pages/admin/booking/completed.vue
+++ b/resources/assets/js/pages/admin/booking/completed.vue
@@ -20,8 +20,8 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12" align="center">
-              <a target="_blank" :href="getURL(booking_details.user_po_path)">
-                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
+              <a :href="getURL(booking_details.user_po_path)" target="_blank">
+                <img v-if="isImage(booking_details.user_po_path)" :src="booking_details.user_po_path" class="image">
                 <p v-else>Download</p>
               </a>
             </el-col>
@@ -37,11 +37,11 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12" align="center">
-              <div v-for="cn_bankslip in booking_details.china_bankslip_path" :key='cn_bankslip'>
-                <a target="_blank" :href="getURL(cn_bankslip)">
-                  <img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
+              <div v-for="cn_bankslip in booking_details.china_bankslip_path" :key="cn_bankslip">
+                <a :href="getURL(cn_bankslip)" target="_blank">
+                  <img v-if="isImage(cn_bankslip)" :src="cn_bankslip" class="image">
                   <p v-else>Download</p>
-                  <br/>
+                  <br>
                 </a>
               </div>
             </el-col>
@@ -56,8 +56,8 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12" align="center">
-              <a target="_blank" :href="getURL(booking_details.invoice_path)">
-                <img v-if="isImage(booking_details.invoice_path)" v-bind:src="booking_details.invoice_path" class="image">
+              <a :href="getURL(booking_details.invoice_path)" target="_blank">
+                <img v-if="isImage(booking_details.invoice_path)" :src="booking_details.invoice_path" class="image">
                 <p v-else>Download</p>
               </a>
             </el-col>
@@ -66,7 +66,7 @@
       </el-col>
     </el-row>
     <br>
-    <!-- bank slips END --> 
+    <!-- bank slips END -->
 
     <el-row justify="center" align="center">
       <el-card class="box-card">
@@ -91,7 +91,7 @@
         <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
           <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
             <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
-            
+
               <div class="el-table__body-wrapper is-scrolling-none">
                 <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
                   <colgroup>
@@ -136,7 +136,7 @@
                         <div class="cell">Beneficiary Account : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{booking_details.account_name}}</div>
+                        <div class="cell">{{ booking_details.account_name }}</div>
                       </td>
                     </tr>
                     <tr class="el-table__row">
@@ -144,7 +144,7 @@
                         <div class="cell">Beneficiary Account Number : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{booking_details.account_num}}</div>
+                        <div class="cell">{{ booking_details.account_num }}</div>
                       </td>
                     </tr>
                     <!---->
@@ -157,14 +157,14 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+              <div class="el-table__column-resize-proxy" style="display: none;"/>
             </div>
           </div>
           <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
             <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
               <div class="hidden-columns">
-                <div></div>
-                <div></div>
+                <div/>
+                <div/>
               </div>
               <!---->
               <div class="el-table__body-wrapper is-scrolling-none">
@@ -200,7 +200,7 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
                         <div class="cell">MYR {{ booking_details.bia }}</div>
@@ -216,7 +216,7 @@
                     </tr> -->
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
                         <div class="cell"><b>MYR {{ booking_details.bia }}</b></div>
@@ -224,10 +224,10 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                     </tr>
                     <!---->
@@ -240,7 +240,7 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+              <div class="el-table__column-resize-proxy" style="display: none;"/>
             </div>
           </div>
         </div>
@@ -270,8 +270,8 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
-              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a :href="getURL(booking_details.user_bankslip_path)" target="_blank">
+              <img v-if="isImage(booking_details.user_bankslip_path)" :src="booking_details.user_bankslip_path" class="image">
               <p v-else>Download</p>
             </a>
           </el-col>
@@ -307,17 +307,17 @@ export default {
   },
   data () {
     return {
-      trackerConfig :{
-          status: 8,
-          term: null
-        },
+      trackerConfig: {
+        status: 8,
+        term: null
+      },
       loading_btn: false,
-      booking_details:{
-          id: null,
-          amount: null,
-          bia: null,
-          user_bankslip_path: null,
-        }
+      booking_details: {
+        id: null,
+        amount: null,
+        bia: null,
+        user_bankslip_path: null
+      }
     }
   },
   beforeCreate () {
@@ -332,7 +332,7 @@ export default {
       .get('/api/admin/booking/' + this.$route.params.id)
       .then((response) => {
         this.booking_details = response.data
-        this.trackerConfig.term = response.data.term;
+        this.trackerConfig.term = response.data.term
         loading.close()
       }).catch((error) => {
         console.log(error)
@@ -343,17 +343,17 @@ export default {
       })
   },
   methods: {
-    getExtension(path){
-      return path.slice(-3);
+    getExtension (path) {
+      return path.slice(-3)
     },
-    isImage(path){
-      var ext = this.getExtension(path);
-      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+    isImage (path) {
+      var ext = this.getExtension(path)
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png'
     },
-    getURL(path){
-      var getUrl = window.location;
-      var baseUrl = getUrl.protocol + "//" + getUrl.host;
-      return baseUrl + path;
+    getURL (path) {
+      var getUrl = window.location
+      var baseUrl = getUrl.protocol + '//' + getUrl.host
+      return baseUrl + path
     }
   }
 }
diff --git a/resources/assets/js/pages/admin/booking/supplierBooking.vue b/resources/assets/js/pages/admin/booking/supplierBooking.vue
index c4490a78..996c9195 100644
--- a/resources/assets/js/pages/admin/booking/supplierBooking.vue
+++ b/resources/assets/js/pages/admin/booking/supplierBooking.vue
@@ -3,7 +3,7 @@
     <progress-track v-model="trackerConfig" />
 
     <div align="center">
-      <h4 style="margin-top:5%;"></h4>
+      <h4 style="margin-top:5%;"/>
       <br>
       <h5> Supplier Booking </h5>
       <br>
@@ -64,7 +64,7 @@
                         <div class="cell">Beneficiary Account : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{booking_details.account_name}}</div>
+                        <div class="cell">{{ booking_details.account_name }}</div>
                       </td>
                     </tr>
                     <tr class="el-table__row">
@@ -72,7 +72,7 @@
                         <div class="cell">Beneficiary Account Number : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{booking_details.account_num}}</div>
+                        <div class="cell">{{ booking_details.account_num }}</div>
                       </td>
                     </tr>
                     <!---->
@@ -85,14 +85,14 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+              <div class="el-table__column-resize-proxy" style="display: none;"/>
             </div>
           </div>
           <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
             <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
               <div class="hidden-columns">
-                <div></div>
-                <div></div>
+                <div/>
+                <div/>
               </div>
               <!---->
               <div class="el-table__body-wrapper is-scrolling-none">
@@ -128,7 +128,7 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
                         <div class="cell">MYR {{ booking_details.bia }}</div>
@@ -144,7 +144,7 @@
                     </tr> -->
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
                         <div class="cell">
@@ -154,10 +154,10 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                     </tr>
                     <!---->
@@ -170,7 +170,7 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+              <div class="el-table__column-resize-proxy" style="display: none;"/>
             </div>
           </div>
         </div>
@@ -204,9 +204,8 @@
             <el-form ref="supplierBookingForm" :model="supplierBookingForm" :rules="rules">
               <div align="center">
                 <el-form-item prop="supplier">
-                  <el-select prop="supplier" v-model="supplierBookingForm.supplier" placeholder="Choose Supplier">
-                    <el-option v-for="item in supplier_options" :key="item.value" :label="item.label" :value="item.value">
-                    </el-option>
+                  <el-select v-model="supplierBookingForm.supplier" prop="supplier" placeholder="Choose Supplier">
+                    <el-option v-for="item in supplier_options" :key="item.value" :label="item.label" :value="item.value"/>
                   </el-select>
                 </el-form-item>
 
@@ -236,137 +235,133 @@
   }
 </style>
 <script>
-  import ProgressTrack from '~/components/AdminProgressTrack'
-  import axios from 'axios'
+import ProgressTrack from '~/components/AdminProgressTrack'
+import axios from 'axios'
 
-  export default {
-    components: {
-      'progress-track': ProgressTrack
-    },
-    data() {
-      return {
-        trackerConfig :{
-          status: 3,
-          term: null
-        },
-        loading_btn: false,
-        booking_details: {
-          id: null,
-          amount: null,
-          bia: null,
-          user_bankslip_path: null,
-        },
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      trackerConfig: {
+        status: 3,
+        term: null
+      },
+      loading_btn: false,
+      booking_details: {
+        id: null,
+        amount: null,
+        bia: null,
+        user_bankslip_path: null
+      },
+      supplier: null,
+      supplier_options: null,
+      supplierBookingForm: {
         supplier: null,
-        supplier_options: null,
-        supplierBookingForm: {
-          supplier: null,
-          rebate: null,
-          rate: null,
-          transfer_amount: null,
-        },
-        value: '',
-        rules: {
-          supplier: [{
-            required: true,
-            message: 'Please select a supplier',
-            trigger: 'change'
-          }],
-          rebate: [{
-            required: true,
-            message: 'Please input rebate amount',
-            trigger: 'change'
-          }],
-          rate: [{
-            required: true,
-            message: 'Please input rate',
-            trigger: 'change'
-          }],
-          transfer_amount: [{
-            required: true,
-            message: 'Please input payment amount',
-            trigger: 'change'
-          }]
-        },
+        rebate: null,
+        rate: null,
+        transfer_amount: null
+      },
+      value: '',
+      rules: {
+        supplier: [{
+          required: true,
+          message: 'Please select a supplier',
+          trigger: 'change'
+        }],
+        rebate: [{
+          required: true,
+          message: 'Please input rebate amount',
+          trigger: 'change'
+        }],
+        rate: [{
+          required: true,
+          message: 'Please input rate',
+          trigger: 'change'
+        }],
+        transfer_amount: [{
+          required: true,
+          message: 'Please input payment amount',
+          trigger: 'change'
+        }]
       }
-    },
-    beforeCreate() {
-      const loading = this.$loading({
-        lock: true,
-        text: 'Please wait..',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
+    }
+  },
+  beforeCreate () {
+    const loading = this.$loading({
+      lock: true,
+      text: 'Please wait..',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
+
+    axios
+      .get('/api/admin/booking/' + this.$route.params.id)
+      .then((response) => {
+        this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
+      }).catch((error) => {
+        console.log(error)
+        this.$router.push({
+          name: 'notfound'
+        })
       })
 
-      axios
-        .get('/api/admin/booking/' + this.$route.params.id)
-        .then((response) => {   
-          this.booking_details = response.data
-          this.trackerConfig.term = response.data.term;
-        }).catch((error) => {
-          console.log(error)
-          this.$router.push({
-            name: 'notfound'
-          })
+    axios
+      .get('/api/setting-supplier/')
+      .then((response) => {
+        loading.close()
+        this.supplier_options = response.data
+      }).catch((error) => {
+        loading.close()
+        console.log(error)
+        this.$router.push({
+          name: 'notfound'
         })
+      })
+  },
+  methods: {
+    generateReport (formName) {
+      this.loading_btn = true
 
-      axios
-        .get('/api/setting-supplier/')
-        .then((response) => {
-          loading.close()
-          this.supplier_options = response.data
-        }).catch((error) => {
-          loading.close()
-          console.log(error)
-          this.$router.push({
-            name: 'notfound'
-          })
-        })
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          let newReport = {
+            booking_id: this.$route.params.id,
+            supplier_id: this.supplierBookingForm.supplier,
+            rebate: this.supplierBookingForm.rebate,
+            rate: this.supplierBookingForm.rate
+            // transfer_amount: this.supplierBookingForm.transfer_amount,
+          }
 
-    },
-    methods: {
-      generateReport(formName) {
-        this.loading_btn = true
-
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            let newReport = {
-              booking_id: this.$route.params.id,
-              supplier_id: this.supplierBookingForm.supplier,
-              rebate: this.supplierBookingForm.rebate,
-              rate: this.supplierBookingForm.rate,
-              //transfer_amount: this.supplierBookingForm.transfer_amount,
-            }
-
-            axios.post('/api/supplier-booking', newReport)
+          axios.post('/api/supplier-booking', newReport)
             .then((response) => {
               this.loading_btn = false
-              
+
               this.$router.push({
                 name: 'booking.admin.supplier.report',
                 params: {id: this.$route.params.id }
               })
-              // redirect to supplier report 
-
+              // redirect to supplier report
             })
             .catch((error) => {
               this.loading_btn = false
               console.log(error)
 
-              // TODO : Show error message 
+              // TODO : Show error message
             })
-
-          } else {
-            this.loading_btn = false
-            this.$message({
-                  showClose: true,
-                  message: 'Please fill the supplier form',
-                  type: 'error',
-                  duration: 10000
-                })
-          }
-        })
-
-      },
+        } else {
+          this.loading_btn = false
+          this.$message({
+            showClose: true,
+            message: 'Please fill the supplier form',
+            type: 'error',
+            duration: 10000
+          })
+        }
+      })
     }
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/supplierReport.vue b/resources/assets/js/pages/admin/booking/supplierReport.vue
index 72705c4a..36778b00 100644
--- a/resources/assets/js/pages/admin/booking/supplierReport.vue
+++ b/resources/assets/js/pages/admin/booking/supplierReport.vue
@@ -3,7 +3,7 @@
     <progress-track v-model="trackerConfig" />
 
     <div align="center">
-      <h4 style="margin-top:5%;"></h4>
+      <h4 style="margin-top:5%;"/>
       <br>
       <h5>Supplier Report</h5>
       <br>
@@ -64,7 +64,7 @@
                         <div class="cell">Beneficiary Account : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{booking_details.account_name}}</div>
+                        <div class="cell">{{ booking_details.account_name }}</div>
                       </td>
                     </tr>
                     <tr class="el-table__row">
@@ -72,7 +72,7 @@
                         <div class="cell">Beneficiary Account Number : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{booking_details.account_num}}</div>
+                        <div class="cell">{{ booking_details.account_num }}</div>
                       </td>
                     </tr>
                     <!---->
@@ -85,14 +85,14 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+              <div class="el-table__column-resize-proxy" style="display: none;"/>
             </div>
           </div>
           <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
             <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
               <div class="hidden-columns">
-                <div></div>
-                <div></div>
+                <div/>
+                <div/>
               </div>
               <!---->
               <div class="el-table__body-wrapper is-scrolling-none">
@@ -128,7 +128,7 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
                         <div class="cell">MYR {{ booking_details.bia }}</div>
@@ -144,7 +144,7 @@
                     </tr> -->
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
                         <div class="cell">
@@ -154,10 +154,10 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                     </tr>
                     <!---->
@@ -170,7 +170,7 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+              <div class="el-table__column-resize-proxy" style="display: none;"/>
             </div>
           </div>
         </div>
@@ -200,9 +200,9 @@
         </div>
         <el-row :gutter="12" style="text-align:center">
           <el-col :span="20" style="text-align:center">
-            <canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
+            <canvas v-insert-message="supplier_booking" id="myCanvas" ref="myCanvas"/>
             <br>
-            <el-button @click="downloadReport()" type="text">Download Now</el-button>
+            <el-button type="text" @click="downloadReport()">Download Now</el-button>
           </el-col>
         </el-row>
       </el-card>
@@ -214,8 +214,8 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
-              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a :href="getURL(booking_details.user_bankslip_path)" target="_blank">
+              <img v-if="isImage(booking_details.user_bankslip_path)" :src="booking_details.user_bankslip_path" class="image">
               <p v-else>Download</p>
             </a>
           </el-col>
@@ -225,8 +225,8 @@
       <el-card class="box-card">
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <el-button :loading="loading_btn" @click="goToSupplierBooking" type="primary">Edit</el-button>
-            <el-button :loading="loading_btn" @click="completeReport" type="success">Done</el-button>
+            <el-button :loading="loading_btn" type="primary" @click="goToSupplierBooking">Edit</el-button>
+            <el-button :loading="loading_btn" type="success" @click="completeReport">Done</el-button>
           </el-col>
         </el-row>
       </el-card>
@@ -250,313 +250,308 @@
   }
 </style>
 <script>
-  import ProgressTrack from '~/components/AdminProgressTrack'
-  import axios from 'axios'
-  import Canvas2Image from 'canvas2image'
+import ProgressTrack from '~/components/AdminProgressTrack'
+import axios from 'axios'
+import Canvas2Image from 'canvas2image'
 
-  export default {
-    components: {
-      'progress-track': ProgressTrack
-    },
-    data() {
-      return {
-        trackerConfig :{
-          status: 4,
-          term: null
-        },
-        loading_btn: false,
-        booking_details: {
-          id: null,
-          amount: null,
-          bia: null,
-          user_bankslip_path: null,
-        },
-        supplier_booking:{
-        },
-        active_bank_setting: {
-          x1_bank_id: null,
-          x2_bank_id: null,
-          beneficiary_id: null
-        },
-        beneficiaryDetail:{
-          company_name: '奕继椿',
-          bank_name: '民生银行 深川红荔支行',
-          acc_no: '123456789',
-        },
-        supplier: null,
-        supplier_options: null,
-        exampleContent: "This is TEXT"
-      }
-    },
-    beforeCreate() {
-      
-      const loading = this.$loading({
-        lock: true,
-        text: 'Please wait..',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-
-      axios
-        .get('/api/admin/booking/' + this.$route.params.id)
-        .then((response) => {
-          this.booking_details = response.data
-          this.trackerConfig.term = response.data.term;
-        }).catch((error) => {
-          console.log(error)
-          this.$router.push({
-            name: 'notfound'
-          })
-        })
-
-      axios.get('/api/supplier-booking/' + this.$route.params.id)
-        .then((response) => {
-          this.supplier_booking = response.data
-          loading.close()
-        }).catch((error) => {
-          console.log(error)
-          this.$router.push({
-            name: 'notfound'
-          })
-          loading.close()
-        })
-    },
-    methods: {
-      downloadReport(){
-        let canvas = document.getElementById('myCanvas')
-        var dataString = canvas.toDataURL("image/png");
-        var link = document.createElement("a");
-        link.download = 'image';
-        link.href = dataString;
-        link.click();
-      },
-      goToSupplierBooking(){
-          this.$router.push({
-            name: 'booking.admin.supplier',
-            params: this.$route.params.id
-          })
-      },
-      completeReport() {
-    	// TODO : send request to change status
-        this.loading_btn = true
-        axios
-          .post('/api/booking/' + this.$route.params.id + '/confirm-supplier')
-          .then((response) => {
-            this.loading_btn = false
-            this.$message({
-              showClose: true,
-              message: 'Success, please comeback after getting china bankslip',
-              type: 'success',
-              duration: 5000
-            })
-            this.$router.push({
-              name: 'home'
-            })
-            //this.booking_details = response.data
-          }).catch((error) => {
-            this.loading_btn = false
-            console.log(error)
-            this.$message({
-              showClose: true,
-              message: 'Suceess',
-              type: 'success',
-              duration: 5000
-            })
-          })
-        this.$router.push({
-          name: 'booking.admin.cnslip',
-          params: {
-            id: this.$route.params.id
-          }
-        })
-      },
-      getExtension(path){
-        return path.slice(-3);
-      },
-      isImage(path){
-        var ext = this.getExtension(path);
-        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
-      },
-      getURL(path){
-        var getUrl = window.location;
-        var baseUrl = getUrl.protocol + "//" + getUrl.host;
-        return baseUrl + path;
-      }
-    },
-    directives: {
-      insertMessage: function (canvasElement, binding) {
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  directives: {
+    insertMessage: function (canvasElement, binding) {
       	setTimeout(function (canvasElement, binding) {
-            ////////////////// variable //////////////////////////
-            var canvasWidth = 450;
-            var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390, 410,
-              470, 490, 510, 610, 630
-            ]
-            const canvasHeight = rowHeight[rowHeight.length - 1];
+        /// /////////////// variable //////////////////////////
+        var canvasWidth = 450
+        var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390, 410,
+          470, 490, 510, 610, 630
+        ]
+        const canvasHeight = rowHeight[rowHeight.length - 1]
 
-            var column1X = 220;
-            var column2X = 320;
-            var column3X = 420;
+        var column1X = 220
+        var column2X = 320
+        var column3X = 420
 
-            ///////////////////Canvast Init////////////////////
-            var canvas = document.getElementById("myCanvas");
-            canvas.width = canvasWidth;
-            canvas.height = canvasHeight;
-            // Get canvas context
-            var ctx = canvasElement.getContext("2d");
-            // Clear the canvas
-            ctx.clearRect(0, 0, 300, 150);
+        /// ////////////////Canvast Init////////////////////
+        var canvas = document.getElementById('myCanvas')
+        canvas.width = canvasWidth
+        canvas.height = canvasHeight
+        // Get canvas context
+        var ctx = canvasElement.getContext('2d')
+        // Clear the canvas
+        ctx.clearRect(0, 0, 300, 150)
 
-            ctx.fillStyle = "#FFFFFF";
-            ctx.fillRect(0, 0, canvasWidth, rowHeight[0]);
-            for (var i = 1; i < rowHeight.length; i++) {
-              if (i % 2 == 1)
-                ctx.fillStyle = "#A9D08E";
-              else
-                ctx.fillStyle = "#FFFFFF";
-              ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i]);
-            }
-            ///////////// fillup with text////////////////
-            //// config canvas
-            ctx.fillStyle = "#000000";
-            ctx.font = "13px Arial";
-            ctx.textAlign = "right";
-            //// Row 1
-            ctx.fillText("Ref No. :", column1X, rowHeight[1] - 5);
-            ctx.fillText(binding.value.booking_id, column3X, rowHeight[1] - 5);
-            //// Row 2
-            ctx.fillText("Date :", column1X, rowHeight[2] - 5);
-            ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5);
-            //// Row 3
-            ctx.fillText("Marking :", column1X, rowHeight[3] - 5);
-            ctx.font = "bold 14px Arial";
-            ctx.fillStyle = "#0070D5";
-            ctx.fillText(binding.value.marking, column3X, rowHeight[3] - 5);
-            ctx.fillStyle = "#000000";
-            ctx.font = "13px Arial";
-            //// Row 4
-            ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5);
-            ctx.fillText(binding.value.order_no, column3X, rowHeight[4] - 5);
-            //// Row 4
-            ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
-            ctx.fillText(binding.value.payment_for, column3X, rowHeight[5] - 5);
-            //// Row 5
-            ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5);
-            ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5);
-            //// Row 6
-            ctx.fillText("Remark :", column1X, rowHeight[7] - 10);
-            //// Row 7
-            // Empty
-            //// Row 8
-            ctx.fillText("MYR/RM :", column1X, rowHeight[9] - 5);
-            ctx.fillText("MYR", column2X, rowHeight[9] - 5);
-            ctx.font = "bold 14px Arial";
-            ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[9] - 5);
-            ctx.font = "13px Arial";
-            //// Row 8
-            ctx.fillText("* RATE :", column1X, rowHeight[10] - 5);
-            ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5);
-            //// Row 9
-            ctx.fillText("REBATE :", column1X, rowHeight[11] - 5);
-            ctx.fillText("MYR", column2X, rowHeight[11] - 5);
-            ctx.font = "14px Arial";
-            ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5);
-            ctx.font = "13px Arial";
-            //// Row 10
-            ctx.font = "bold 14px Arial";
-            ctx.fillText("CNY", column2X, rowHeight[12] - 5);
-            ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5);
-            ctx.font = "13px Arial";
-            //line
-            ctx.beginPath();
-            ctx.lineWidth = 1;
-            ctx.moveTo(column1X + 30, rowHeight[11]);
-            ctx.lineTo(column3X + 20, rowHeight[11]);
-            ctx.stroke();
-            ctx.beginPath();
-            ctx.lineWidth = 2;
-            ctx.moveTo(column1X + 30, rowHeight[12]);
-            ctx.lineTo(column3X + 20, rowHeight[12]);
-            ctx.stroke();
-            //// Row 11
-            ctx.fillText("MYR/RM :", column1X, rowHeight[14] - 5);
-            ctx.fillText("MYR", column2X, rowHeight[14] - 5);
-            ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[14] - 5);
-            //// Row 12
-            // ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5);
-            // ctx.fillText("MYR", column2X, rowHeight[15] - 5);
-            // ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5);
-            //// Row 13
-            
-            ctx.fillText("+ TAX "+ (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :", column1X, rowHeight[16] - 5); // TODO : Change to percentage 
-            ctx.fillText("MYR", column2X, rowHeight[16] - 5);
-            ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5);
-            // //// Row 14
-            // ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15);
-            // ctx.fillText("MYR", column2X, rowHeight[17] - 15);
-            // ctx.fillText("289.84", column3X, rowHeight[17] - 15);
-            //// Row 15
-            ctx.font = "bold 14px Arial";
-            ctx.fillText("Bank In Amount :", column1X, rowHeight[18] - 5);
-            ctx.fillStyle = "#0070D5";
-            ctx.fillText("MYR", column2X, rowHeight[18] - 5);
-            ctx.fillText(binding.value.amount_after_tax, column3X, rowHeight[18] - 5);
-            ctx.fillStyle = "#000000";
-            ctx.font = "13px Arial";
-            //line
-            ctx.lineWidth = 1;
-            ctx.beginPath();
-            ctx.moveTo(column1X + 30, rowHeight[17]);
-            ctx.lineTo(column3X + 20, rowHeight[17]);
-            ctx.stroke();
-            ctx.beginPath();
-            ctx.moveTo(column1X + 30, rowHeight[18] + 1);
-            ctx.lineTo(column3X + 20, rowHeight[18] + 1);
-            ctx.stroke();
-            ctx.beginPath();
-            ctx.moveTo(column1X + 30, rowHeight[18] - 2);
-            ctx.lineTo(column3X + 20, rowHeight[18] - 2);
-            ctx.stroke();
-            //// Row 16
-            // ctx.fillText("Rebate :", column1X, rowHeight[19] - 25);
-            // ctx.fillText("CNY", column2X, rowHeight[19] - 25);
-            // ctx.fillText("224.68", column3X, rowHeight[19] - 25);
-            //// Row 16
-            ctx.font = "bold 14px Arial";
-            ctx.fillText("Bank In to Account Below :", column1X, rowHeight[20] - 5);
-            ctx.font = "bold italic 15px Arial";
-            ctx.fillStyle = "#0070D5";
-            ctx.fillText("CNY", column2X, rowHeight[20] - 5);
-            ctx.fillText(binding.value.amountInRMB, column3X - 20, rowHeight[20] - 5);
-            ctx.fillStyle = "#000000";
-            ctx.font = "13px Arial";
-            //// Row 17
-            //// Row 18
-            //// Row 19
-            // var img = new Image();
-            // img.src = "/banklogo.png";
-            // img.crossOrigin = "anonymous";
-            // var maxwidth = 70;
-            // var ratio = maxwidth / img.width;
-            // var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2);
-            // var y = rowHeight[21] + offset; // to make it always center
+        ctx.fillStyle = '#FFFFFF'
+        ctx.fillRect(0, 0, canvasWidth, rowHeight[0])
+        for (var i = 1; i < rowHeight.length; i++) {
+          if (i % 2 == 1) { ctx.fillStyle = '#A9D08E' } else { ctx.fillStyle = '#FFFFFF' }
+          ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i])
+        }
+        /// ////////// fillup with text////////////////
+        /// / config canvas
+        ctx.fillStyle = '#000000'
+        ctx.font = '13px Arial'
+        ctx.textAlign = 'right'
+        /// / Row 1
+        ctx.fillText('Ref No. :', column1X, rowHeight[1] - 5)
+        ctx.fillText(binding.value.booking_id, column3X, rowHeight[1] - 5)
+        /// / Row 2
+        ctx.fillText('Date :', column1X, rowHeight[2] - 5)
+        ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5)
+        /// / Row 3
+        ctx.fillText('Marking :', column1X, rowHeight[3] - 5)
+        ctx.font = 'bold 14px Arial'
+        ctx.fillStyle = '#0070D5'
+        ctx.fillText(binding.value.marking, column3X, rowHeight[3] - 5)
+        ctx.fillStyle = '#000000'
+        ctx.font = '13px Arial'
+        /// / Row 4
+        ctx.fillText('Payment For(Order No.) :', column1X, rowHeight[4] - 5)
+        ctx.fillText(binding.value.order_no, column3X, rowHeight[4] - 5)
+        /// / Row 4
+        ctx.fillText('Payment For :', column1X, rowHeight[5] - 5)
+        ctx.fillText(binding.value.payment_for, column3X, rowHeight[5] - 5)
+        /// / Row 5
+        ctx.fillText('Payment Method :', column1X, rowHeight[6] - 5)
+        ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5)
+        /// / Row 6
+        ctx.fillText('Remark :', column1X, rowHeight[7] - 10)
+        /// / Row 7
+        // Empty
+        /// / Row 8
+        ctx.fillText('MYR/RM :', column1X, rowHeight[9] - 5)
+        ctx.fillText('MYR', column2X, rowHeight[9] - 5)
+        ctx.font = 'bold 14px Arial'
+        ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[9] - 5)
+        ctx.font = '13px Arial'
+        /// / Row 8
+        ctx.fillText('* RATE :', column1X, rowHeight[10] - 5)
+        ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5)
+        /// / Row 9
+        ctx.fillText('REBATE :', column1X, rowHeight[11] - 5)
+        ctx.fillText('MYR', column2X, rowHeight[11] - 5)
+        ctx.font = '14px Arial'
+        ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5)
+        ctx.font = '13px Arial'
+        /// / Row 10
+        ctx.font = 'bold 14px Arial'
+        ctx.fillText('CNY', column2X, rowHeight[12] - 5)
+        ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5)
+        ctx.font = '13px Arial'
+        // line
+        ctx.beginPath()
+        ctx.lineWidth = 1
+        ctx.moveTo(column1X + 30, rowHeight[11])
+        ctx.lineTo(column3X + 20, rowHeight[11])
+        ctx.stroke()
+        ctx.beginPath()
+        ctx.lineWidth = 2
+        ctx.moveTo(column1X + 30, rowHeight[12])
+        ctx.lineTo(column3X + 20, rowHeight[12])
+        ctx.stroke()
+        /// / Row 11
+        ctx.fillText('MYR/RM :', column1X, rowHeight[14] - 5)
+        ctx.fillText('MYR', column2X, rowHeight[14] - 5)
+        ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[14] - 5)
+        /// / Row 12
+        // ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5);
+        // ctx.fillText("MYR", column2X, rowHeight[15] - 5);
+        // ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5);
+        /// / Row 13
 
-            // img.onload=function(){
+        ctx.fillText('+ TAX ' + (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + '% :', column1X, rowHeight[16] - 5) // TODO : Change to percentage
+        ctx.fillText('MYR', column2X, rowHeight[16] - 5)
+        ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5)
+        // //// Row 14
+        // ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15);
+        // ctx.fillText("MYR", column2X, rowHeight[17] - 15);
+        // ctx.fillText("289.84", column3X, rowHeight[17] - 15);
+        /// / Row 15
+        ctx.font = 'bold 14px Arial'
+        ctx.fillText('Bank In Amount :', column1X, rowHeight[18] - 5)
+        ctx.fillStyle = '#0070D5'
+        ctx.fillText('MYR', column2X, rowHeight[18] - 5)
+        ctx.fillText(binding.value.amount_after_tax, column3X, rowHeight[18] - 5)
+        ctx.fillStyle = '#000000'
+        ctx.font = '13px Arial'
+        // line
+        ctx.lineWidth = 1
+        ctx.beginPath()
+        ctx.moveTo(column1X + 30, rowHeight[17])
+        ctx.lineTo(column3X + 20, rowHeight[17])
+        ctx.stroke()
+        ctx.beginPath()
+        ctx.moveTo(column1X + 30, rowHeight[18] + 1)
+        ctx.lineTo(column3X + 20, rowHeight[18] + 1)
+        ctx.stroke()
+        ctx.beginPath()
+        ctx.moveTo(column1X + 30, rowHeight[18] - 2)
+        ctx.lineTo(column3X + 20, rowHeight[18] - 2)
+        ctx.stroke()
+        /// / Row 16
+        // ctx.fillText("Rebate :", column1X, rowHeight[19] - 25);
+        // ctx.fillText("CNY", column2X, rowHeight[19] - 25);
+        // ctx.fillText("224.68", column3X, rowHeight[19] - 25);
+        /// / Row 16
+        ctx.font = 'bold 14px Arial'
+        ctx.fillText('Bank In to Account Below :', column1X, rowHeight[20] - 5)
+        ctx.font = 'bold italic 15px Arial'
+        ctx.fillStyle = '#0070D5'
+        ctx.fillText('CNY', column2X, rowHeight[20] - 5)
+        ctx.fillText(binding.value.amountInRMB, column3X - 20, rowHeight[20] - 5)
+        ctx.fillStyle = '#000000'
+        ctx.font = '13px Arial'
+        /// / Row 17
+        /// / Row 18
+        /// / Row 19
+        // var img = new Image();
+        // img.src = "/banklogo.png";
+        // img.crossOrigin = "anonymous";
+        // var maxwidth = 70;
+        // var ratio = maxwidth / img.width;
+        // var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2);
+        // var y = rowHeight[21] + offset; // to make it always center
+
+        // img.onload=function(){
     		    //   ctx.drawImage(img, 50, 530, 80, 50);
     	      // };
 
-            // text
-            ctx.font = "bold 14px Arial";
-            ctx.textAlign = "center";
-            ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80);
-            ctx.fillText("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60);
-            ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40);
-            ctx.fillText(binding.value.bank_name , column2X - 40, rowHeight[22] - 20);
-            
-            ctx.font = "13px Arial";
-    	}, 1000,canvasElement,binding);
-	        
-      }
-    }
+        // text
+        ctx.font = 'bold 14px Arial'
+        ctx.textAlign = 'center'
+        ctx.fillText('China beneficiary Account', column2X - 40, rowHeight[22] - 80)
+        ctx.fillText('户名 : ' + binding.value.acc_name, column2X - 40, rowHeight[22] - 60)
+        ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40)
+        ctx.fillText(binding.value.bank_name, column2X - 40, rowHeight[22] - 20)
 
+        ctx.font = '13px Arial'
+    	}, 1000, canvasElement, binding)
+    }
+  },
+  data () {
+    return {
+      trackerConfig: {
+        status: 4,
+        term: null
+      },
+      loading_btn: false,
+      booking_details: {
+        id: null,
+        amount: null,
+        bia: null,
+        user_bankslip_path: null
+      },
+      supplier_booking: {
+      },
+      active_bank_setting: {
+        x1_bank_id: null,
+        x2_bank_id: null,
+        beneficiary_id: null
+      },
+      beneficiaryDetail: {
+        company_name: '奕继椿',
+        bank_name: '民生银行 深川红荔支行',
+        acc_no: '123456789'
+      },
+      supplier: null,
+      supplier_options: null,
+      exampleContent: 'This is TEXT'
+    }
+  },
+  beforeCreate () {
+    const loading = this.$loading({
+      lock: true,
+      text: 'Please wait..',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
+
+    axios
+      .get('/api/admin/booking/' + this.$route.params.id)
+      .then((response) => {
+        this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
+      }).catch((error) => {
+        console.log(error)
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+
+    axios.get('/api/supplier-booking/' + this.$route.params.id)
+      .then((response) => {
+        this.supplier_booking = response.data
+        loading.close()
+      }).catch((error) => {
+        console.log(error)
+        this.$router.push({
+          name: 'notfound'
+        })
+        loading.close()
+      })
+  },
+  methods: {
+    downloadReport () {
+      let canvas = document.getElementById('myCanvas')
+      var dataString = canvas.toDataURL('image/png')
+      var link = document.createElement('a')
+      link.download = 'image'
+      link.href = dataString
+      link.click()
+    },
+    goToSupplierBooking () {
+      this.$router.push({
+        name: 'booking.admin.supplier',
+        params: this.$route.params.id
+      })
+    },
+    completeReport () {
+    	// TODO : send request to change status
+      this.loading_btn = true
+      axios
+        .post('/api/booking/' + this.$route.params.id + '/confirm-supplier')
+        .then((response) => {
+          this.loading_btn = false
+          this.$message({
+            showClose: true,
+            message: 'Success, please comeback after getting china bankslip',
+            type: 'success',
+            duration: 5000
+          })
+          this.$router.push({
+            name: 'home'
+          })
+          // this.booking_details = response.data
+        }).catch((error) => {
+          this.loading_btn = false
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Suceess',
+            type: 'success',
+            duration: 5000
+          })
+        })
+      this.$router.push({
+        name: 'booking.admin.cnslip',
+        params: {
+          id: this.$route.params.id
+        }
+      })
+    },
+    getExtension (path) {
+      return path.slice(-3)
+    },
+    isImage (path) {
+      var ext = this.getExtension(path)
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png'
+    },
+    getURL (path) {
+      var getUrl = window.location
+      var baseUrl = getUrl.protocol + '//' + getUrl.host
+      return baseUrl + path
+    }
   }
-</script>
\ No newline at end of file
+
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
index fa8be99f..93d9ff19 100644
--- a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
+++ b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
@@ -3,7 +3,7 @@
     <progress-track v-model="trackerConfig" />
 
     <div align="center">
-      <h4 style="margin-top:5%;"></h4>
+      <h4 style="margin-top:5%;"/>
       <br>
       <h5> Upload China Bankslip To Customer </h5>
       <br>
@@ -64,7 +64,7 @@
                         <div class="cell">Beneficiary Account : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{booking_details.account_name}}</div>
+                        <div class="cell">{{ booking_details.account_name }}</div>
                       </td>
                     </tr>
                     <tr class="el-table__row">
@@ -72,7 +72,7 @@
                         <div class="cell">Beneficiary Account Number : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{booking_details.account_num}}</div>
+                        <div class="cell">{{ booking_details.account_num }}</div>
                       </td>
                     </tr>
                     <!---->
@@ -85,14 +85,14 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+              <div class="el-table__column-resize-proxy" style="display: none;"/>
             </div>
           </div>
           <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
             <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
               <div class="hidden-columns">
-                <div></div>
-                <div></div>
+                <div/>
+                <div/>
               </div>
               <!---->
               <div class="el-table__body-wrapper is-scrolling-none">
@@ -128,7 +128,7 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
                         <div class="cell">MYR {{ booking_details.bia }}</div>
@@ -144,7 +144,7 @@
                     </tr> -->
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
                         <div class="cell">
@@ -154,10 +154,10 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                     </tr>
                     <!---->
@@ -170,7 +170,7 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+              <div class="el-table__column-resize-proxy" style="display: none;"/>
             </div>
           </div>
         </div>
@@ -205,18 +205,18 @@
               <div align="center">
 
                 <!-- upload image -->
-                <el-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'" 
-                :on-preview="handlePreview"
-                :on-error="uploadError"
-                  accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
-                  :on-remove="handleRemove" :multiple="false" list-type="picture">
+                <el-upload :action="'/api/booking/' + booking_id + '/upload-china-bankslip'" :on-preview="handlePreview"
+                           :on-error="uploadError"
+                           :on-remove="handleRemove"
+                           :multiple="false"
+                           class="upload-demo" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf" list-type="picture">
                   <el-button size="small" type="primary">Click to upload</el-button>
                   <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
                 </el-upload>
 
                 <br>
                 <!-- upload image end -->
-<!--                 <el-form-item prop="date">
+                <!--                 <el-form-item prop="date">
                   <el-date-picker v-model="chinaSlipForm.date" type="date" placeholder="Pick a day" :picker-options="pickerOptions1">
                   </el-date-picker>
                 </el-form-item> -->
@@ -244,155 +244,155 @@
   }
 </style>
 <script>
-  import ProgressTrack from '~/components/AdminProgressTrack'
-  import axios from 'axios'
+import ProgressTrack from '~/components/AdminProgressTrack'
+import axios from 'axios'
 
-  export default {
-    components: {
-      'progress-track': ProgressTrack
-    },
-    data() {
-      return {
-        trackerConfig :{
-          status: 5,
-          term: null
-        },
-        loading_btn: false,
-        booking_id: this.$route.params.id,
-        booking_details: {
-          id: null,
-          amount: null,
-          bia: null,
-          user_bankslip_path: null,
-        },
-        supplier: null,
-        supplier_options: null,
-        chinaSlipForm: {
-          actual_transfer_amount: null,
-          // date: null,
-          details: null,
-        },
-        rules: {
-          actual_transfer_amount: [{
-            required: true,
-            message: 'Please input transfer amount',
-            trigger: 'change'
-          }],
-          // date: [{
-          //   required: true,
-          //   message: 'Please input date',
-          //   trigger: 'change'
-          // }],
-          // details: [{
-          //   required: true,
-          //   message: 'Please input details',
-          //   trigger: 'change'
-          // }]
-        },
-        // pickerOptions1: {
-        //   disabledDate(time) {
-        //     return time.getTime() > Date.now();
-        //   },
-        //   shortcuts: [{
-        //     text: 'Today',
-        //     onClick(picker) {
-        //       picker.$emit('pick', new Date());
-        //     }
-        //   }, {
-        //     text: 'Yesterday',
-        //     onClick(picker) {
-        //       const date = new Date();
-        //       date.setTime(date.getTime() - 3600 * 1000 * 24);
-        //       picker.$emit('pick', date);
-        //     }
-        //   }, {
-        //     text: 'A week ago',
-        //     onClick(picker) {
-        //       const date = new Date();
-        //       date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-        //       picker.$emit('pick', date);
-        //     }
-        //   }]
-        // }
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      trackerConfig: {
+        status: 5,
+        term: null
+      },
+      loading_btn: false,
+      booking_id: this.$route.params.id,
+      booking_details: {
+        id: null,
+        amount: null,
+        bia: null,
+        user_bankslip_path: null
+      },
+      supplier: null,
+      supplier_options: null,
+      chinaSlipForm: {
+        actual_transfer_amount: null,
+        // date: null,
+        details: null
+      },
+      rules: {
+        actual_transfer_amount: [{
+          required: true,
+          message: 'Please input transfer amount',
+          trigger: 'change'
+        }]
+        // date: [{
+        //   required: true,
+        //   message: 'Please input date',
+        //   trigger: 'change'
+        // }],
+        // details: [{
+        //   required: true,
+        //   message: 'Please input details',
+        //   trigger: 'change'
+        // }]
       }
-    },
-    beforeCreate() {
-      const loading = this.$loading({
-        lock: true,
-        text: 'Please wait..',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
+      // pickerOptions1: {
+      //   disabledDate(time) {
+      //     return time.getTime() > Date.now();
+      //   },
+      //   shortcuts: [{
+      //     text: 'Today',
+      //     onClick(picker) {
+      //       picker.$emit('pick', new Date());
+      //     }
+      //   }, {
+      //     text: 'Yesterday',
+      //     onClick(picker) {
+      //       const date = new Date();
+      //       date.setTime(date.getTime() - 3600 * 1000 * 24);
+      //       picker.$emit('pick', date);
+      //     }
+      //   }, {
+      //     text: 'A week ago',
+      //     onClick(picker) {
+      //       const date = new Date();
+      //       date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+      //       picker.$emit('pick', date);
+      //     }
+      //   }]
+      // }
+    }
+  },
+  beforeCreate () {
+    const loading = this.$loading({
+      lock: true,
+      text: 'Please wait..',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
+
+    axios
+      .get('/api/admin/booking/' + this.$route.params.id)
+      .then((response) => {
+        this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
+        loading.close()
+      }).catch((error) => {
+        loading.close()
+        console.log(error)
+        this.$router.push({
+          name: 'notfound'
+        })
       })
+  },
+  methods: {
+    submitChinaSlip (formName) {
+      this.loading_btn = true
 
-      axios
-        .get('/api/admin/booking/' + this.$route.params.id)
-        .then((response) => {      
-          this.booking_details = response.data
-          this.trackerConfig.term = response.data.term;
-          loading.close()
-        }).catch((error) => {
-          loading.close()
-          console.log(error)
-          this.$router.push({
-            name: 'notfound'
-          })
-        })
-    },
-    methods: {
-      submitChinaSlip(formName) {
-        this.loading_btn = true
-
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            let newChinaSlip = {
-              date: this.chinaSlipForm.date,
-              actual_transfer_amount: this.chinaSlipForm.actual_transfer_amount,
-              details: this.chinaSlipForm.details,
-            }
-
-            axios.patch('/api/booking/' + this.booking_id +'/update-china-bankslip', newChinaSlip)
-              .then((response) => {
-                this.$message({
-                  showClose: true,
-                  message: 'Your bankinslip has been submitted, please wait customer to upload their purchase order',
-                  type: 'success',
-                  duration: 5000
-                })
-                console.log(response)
-                this.$router.push({
-                  name: 'home'
-                })
-              })
-              .catch((error) => {
-                console.log(error)
-                this.loading_btn = false
-                this.$message({
-                  showClose: true,
-                  message: 'Please upload your bankin slip first.',
-                  type: 'warning',
-                  duration: 10000
-                })
-              })
-          } else {
-            this.loading_btn = false
-            this.$message({
-                  showClose: true,
-                  message: 'Please upload your bankin slip first.',
-                  type: 'warning',
-                  duration: 10000
-                })
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          let newChinaSlip = {
+            date: this.chinaSlipForm.date,
+            actual_transfer_amount: this.chinaSlipForm.actual_transfer_amount,
+            details: this.chinaSlipForm.details
           }
-        })
-      },
-      handleRemove(file, fileList) {
-        console.log(file, fileList);
-      },
-      handlePreview(file) {
-        console.log(file);
-      },
-      uploadError(file,fileList){
-        this.$message.warning(`Incorrect file format or file size too big.`)
-      }
+
+          axios.patch('/api/booking/' + this.booking_id + '/update-china-bankslip', newChinaSlip)
+            .then((response) => {
+              this.$message({
+                showClose: true,
+                message: 'Your bankinslip has been submitted, please wait customer to upload their purchase order',
+                type: 'success',
+                duration: 5000
+              })
+              console.log(response)
+              this.$router.push({
+                name: 'home'
+              })
+            })
+            .catch((error) => {
+              console.log(error)
+              this.loading_btn = false
+              this.$message({
+                showClose: true,
+                message: 'Please upload your bankin slip first.',
+                type: 'warning',
+                duration: 10000
+              })
+            })
+        } else {
+          this.loading_btn = false
+          this.$message({
+            showClose: true,
+            message: 'Please upload your bankin slip first.',
+            type: 'warning',
+            duration: 10000
+          })
+        }
+      })
+    },
+    handleRemove (file, fileList) {
+      console.log(file, fileList)
+    },
+    handlePreview (file) {
+      console.log(file)
+    },
+    uploadError (file, fileList) {
+      this.$message.warning(`Incorrect file format or file size too big.`)
     }
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index 13c9016d..fa82ccb6 100644
--- a/resources/assets/js/pages/admin/booking/uploadInvoice.vue
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -3,7 +3,7 @@
     <progress-track v-model="trackerConfig" />
 
     <div align="center">
-      <h4 style="margin-top:5%;"></h4>
+      <h4 style="margin-top:5%;"/>
       <br>
       <div v-if="booking_details.user_po_path">
         <h4>Upload Invoice</h4>
@@ -71,7 +71,7 @@
                         <div class="cell">Beneficiary Account : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{booking_details.account_name}}</div>
+                        <div class="cell">{{ booking_details.account_name }}</div>
                       </td>
                     </tr>
                     <tr class="el-table__row">
@@ -79,7 +79,7 @@
                         <div class="cell">Beneficiary Account Number : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{booking_details.account_num}}</div>
+                        <div class="cell">{{ booking_details.account_num }}</div>
                       </td>
                     </tr>
                     <!---->
@@ -92,14 +92,14 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+              <div class="el-table__column-resize-proxy" style="display: none;"/>
             </div>
           </div>
           <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
             <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
               <div class="hidden-columns">
-                <div></div>
-                <div></div>
+                <div/>
+                <div/>
               </div>
               <!---->
               <div class="el-table__body-wrapper is-scrolling-none">
@@ -135,7 +135,7 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
                         <div class="cell">MYR {{ booking_details.bia }}</div>
@@ -151,7 +151,7 @@
                     </tr> -->
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
                         <div class="cell">
@@ -161,10 +161,10 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                     </tr>
                     <!---->
@@ -173,7 +173,7 @@
                 <!---->
                 <!---->
               </div>
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+              <div class="el-table__column-resize-proxy" style="display: none;"/>
             </div>
           </div>
         </div>
@@ -183,7 +183,7 @@
 
     <el-row v-if="booking_details.user_po_path" :gutter="12" justify="center" align="center">
       <el-col :span="12">
-        <el-card  class="box-card">
+        <el-card class="box-card">
           <div slot="header" class="clearfix">
             <span>Upload Invoice</span>
             <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
@@ -221,8 +221,8 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12" align="center">
-              <a target="_blank" :href="getURL(booking_details.user_po_path)">
-                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
+              <a :href="getURL(booking_details.user_po_path)" target="_blank">
+                <img v-if="isImage(booking_details.user_po_path)" :src="booking_details.user_po_path" class="image">
                 <p v-else>Download</p>
               </a>
             </el-col>
@@ -249,102 +249,102 @@
   }
 </style>
 <script>
-  import ProgressTrack from '~/components/AdminProgressTrack'
-  import axios from 'axios'
+import ProgressTrack from '~/components/AdminProgressTrack'
+import axios from 'axios'
 
-  export default {
-    components: {
-      'progress-track': ProgressTrack
-    },
-    data() {
-      return {
-        trackerConfig :{
-          status: 6,
-          term: null
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      trackerConfig: {
+        status: 6,
+        term: null
+      },
+      loading_btn: false,
+      booking_id: this.$route.params.id,
+      booking_details: {
+        id: null,
+        amount: null,
+        bia: null,
+        user_bankslip_path: null
+      },
+      supplier: null,
+      supplier_options: null,
+      chinaSlipForm: {
+        actual_transfer_amount: null,
+        date: null,
+        details: null
+      },
+      rules: {
+        actual_transfer_amount: [{
+          required: true,
+          message: 'Please input amount',
+          trigger: 'change'
+        }],
+        date: [{
+          required: true,
+          message: 'Please input bank name',
+          trigger: 'change'
+        }],
+        details: [{
+          required: true,
+          message: 'Please input details',
+          trigger: 'change'
+        }]
+      },
+      pickerOptions1: {
+        disabledDate (time) {
+          return time.getTime() > Date.now()
         },
-        loading_btn: false,
-        booking_id: this.$route.params.id,
-        booking_details: {
-          id: null,
-          amount: null,
-          bia: null,
-          user_bankslip_path: null,
-        },
-        supplier: null,
-        supplier_options: null,
-        chinaSlipForm: {
-          actual_transfer_amount: null,
-          date: null,
-          details: null,
-        },
-        rules: {
-          actual_transfer_amount: [{
-            required: true,
-            message: 'Please input amount',
-            trigger: 'change'
-          }],
-          date: [{
-            required: true,
-            message: 'Please input bank name',
-            trigger: 'change'
-          }],
-          details: [{
-            required: true,
-            message: 'Please input details',
-            trigger: 'change'
-          }]
-        },
-        pickerOptions1: {
-          disabledDate(time) {
-            return time.getTime() > Date.now();
-          },
-          shortcuts: [{
-            text: 'Today',
-            onClick(picker) {
-              picker.$emit('pick', new Date());
-            }
-          }, {
-            text: 'Yesterday',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.$emit('pick', date);
-            }
-          }, {
-            text: 'A week ago',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', date);
-            }
-          }]
-        }
+        shortcuts: [{
+          text: 'Today',
+          onClick (picker) {
+            picker.$emit('pick', new Date())
+          }
+        }, {
+          text: 'Yesterday',
+          onClick (picker) {
+            const date = new Date()
+            date.setTime(date.getTime() - 3600 * 1000 * 24)
+            picker.$emit('pick', date)
+          }
+        }, {
+          text: 'A week ago',
+          onClick (picker) {
+            const date = new Date()
+            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', date)
+          }
+        }]
       }
-    },
-    beforeCreate() {
-      const loading = this.$loading({
-        lock: true,
-        text: 'Please wait..',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
+    }
+  },
+  beforeCreate () {
+    const loading = this.$loading({
+      lock: true,
+      text: 'Please wait..',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
 
-      axios
-        .get('/api/admin/booking/' + this.$route.params.id)
-        .then((response) => {
-          loading.close()
-          this.booking_details = response.data
-          this.trackerConfig.term = response.data.term;
-        }).catch((error) => {
-          console.log(error)
-          loading.close()
-          this.$router.push({
-            name: 'notfound'
-          })
+    axios
+      .get('/api/admin/booking/' + this.$route.params.id)
+      .then((response) => {
+        loading.close()
+        this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
         })
-    },
-    methods: {
-      confirmInvoice () {
+      })
+  },
+  methods: {
+    confirmInvoice () {
       this.loading_btn = true
       axios
         .post('/api/booking/' + this.$route.params.id + '/confirm-invoice')
@@ -361,40 +361,40 @@
           })
           this.loading_btn = false
         }).catch((error) => {
-            this.$message({
-              showClose: true,
-              message: 'Please upload invoice',
-              type: 'error',
-              duration: 30000
-            })
+          this.$message({
+            showClose: true,
+            message: 'Please upload invoice',
+            type: 'error',
+            duration: 30000
+          })
           this.loading_btn = false
         })
     },
-      handleRemove(file, fileList) {
-        console.log(file, fileList);
-        // Should send some reqeust to controller to delete the file
-      },
-      handlePreview(file) {
-        console.log(file);
-      },
-      handleExceed(file){
-        console.log(file)
-      },
-      uploadError(file,fileList){
-        this.$message.warning(`Incorrect file format or file size too big.`)
-      },
-      getExtension(path){
-       return path.slice(-3);
-      },
-      isImage(path){
-        var ext = this.getExtension(path);
-        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
-      },
-      getURL(path){
-        var getUrl = window.location;
-        var baseUrl = getUrl.protocol + "//" + getUrl.host;
-        return baseUrl + path;
-      }
+    handleRemove (file, fileList) {
+      console.log(file, fileList)
+      // Should send some reqeust to controller to delete the file
+    },
+    handlePreview (file) {
+      console.log(file)
+    },
+    handleExceed (file) {
+      console.log(file)
+    },
+    uploadError (file, fileList) {
+      this.$message.warning(`Incorrect file format or file size too big.`)
+    },
+    getExtension (path) {
+      return path.slice(-3)
+    },
+    isImage (path) {
+      var ext = this.getExtension(path)
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png'
+    },
+    getURL (path) {
+      var getUrl = window.location
+      var baseUrl = getUrl.protocol + '//' + getUrl.host
+      return baseUrl + path
     }
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/verification.vue b/resources/assets/js/pages/admin/booking/verification.vue
index 39b2f2b3..07670115 100644
--- a/resources/assets/js/pages/admin/booking/verification.vue
+++ b/resources/assets/js/pages/admin/booking/verification.vue
@@ -3,7 +3,7 @@
     <progress-track v-model="trackerConfig" />
 
     <div align="center">
-      <h4 style="margin-top:5%;"></h4>
+      <h4 style="margin-top:5%;"/>
       <br>
       <h5> Verify User Bankslip </h5>
       <br>
@@ -66,7 +66,7 @@
                         <div class="cell">Beneficiary Account : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{booking_details.account_name}}</div>
+                        <div class="cell">{{ booking_details.account_name }}</div>
                       </td>
                     </tr>
                     <tr class="el-table__row">
@@ -74,7 +74,7 @@
                         <div class="cell">Beneficiary Account Number : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{booking_details.account_num}}</div>
+                        <div class="cell">{{ booking_details.account_num }}</div>
                       </td>
                     </tr>
                     <!---->
@@ -87,14 +87,14 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+              <div class="el-table__column-resize-proxy" style="display: none;"/>
             </div>
           </div>
           <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
             <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
               <div class="hidden-columns">
-                <div></div>
-                <div></div>
+                <div/>
+                <div/>
               </div>
               <!---->
               <div class="el-table__body-wrapper is-scrolling-none">
@@ -130,7 +130,7 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
                         <div class="cell">MYR {{ booking_details.bia }}</div>
@@ -146,7 +146,7 @@
                     </tr> -->
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
                         <div class="cell">
@@ -156,10 +156,10 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"></div>
+                        <div class="cell"/>
                       </td>
                     </tr>
                     <!---->
@@ -172,7 +172,7 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+              <div class="el-table__column-resize-proxy" style="display: none;"/>
             </div>
           </div>
         </div>
@@ -202,8 +202,8 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
-              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a :href="getURL(booking_details.user_bankslip_path)" target="_blank">
+              <img v-if="isImage(booking_details.user_bankslip_path)" :src="booking_details.user_bankslip_path" class="image">
               <p v-else>Download</p>
             </a>
           </el-col>
@@ -213,29 +213,27 @@
       <el-card class="box-card">
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <el-button :loading="loading_btn" @click="approveUserSlip" type="success">Approve</el-button>
-            <el-button :loading="loading_btn" @click="rejectDialogVisible = true" type="danger">Reject</el-button>
+            <el-button :loading="loading_btn" type="success" @click="approveUserSlip">Approve</el-button>
+            <el-button :loading="loading_btn" type="danger" @click="rejectDialogVisible = true">Reject</el-button>
           </el-col>
         </el-row>
       </el-card>
     </el-row>
 
-    <el-dialog title="Reason of Reject" :visible.sync="rejectDialogVisible" width="30%" center>
+    <el-dialog :visible.sync="rejectDialogVisible" title="Reason of Reject" width="30%" center>
       <span>
         <el-input
-          type="textarea"
           :rows="2"
-          placeholder="Please input the reason"
-          v-model="reject_reason">
-        </el-input>
+          v-model="reject_reason"
+          type="textarea"
+          placeholder="Please input the reason"/>
       </span>
       <span slot="footer" class="dialog-footer">
         <el-button @click="rejectDialogVisible = false">Cancel</el-button>
-        <el-button type="primary" :loading="loading_btn" @click="rejectUserSlip">Submit</el-button>
+        <el-button :loading="loading_btn" type="primary" @click="rejectUserSlip">Submit</el-button>
       </span>
     </el-dialog>
 
-
   </el-main>
 </template>
 <style>
@@ -255,126 +253,126 @@
   }
 </style>
 <script>
-  import ProgressTrack from '~/components/AdminProgressTrack'
-  import axios from 'axios'
+import ProgressTrack from '~/components/AdminProgressTrack'
+import axios from 'axios'
 
-  export default {
-    components: {
-      'progress-track': ProgressTrack
-    },
-    data() {
-      return {
-        trackerConfig :{
-          status: 2,
-          term: null
-        },
-        loading_btn: false,
-        rejectDialogVisible: false,
-        reject_reason: null,
-        booking_details: {
-          id: null,
-          amount: null,
-          bia: null,
-          user_bankslip_path: null,
-        },
-        estimated_arrival_time: null,
-      }
-    },
-    beforeCreate() {
-      const loading = this.$loading({
-        lock: true,
-        text: 'Please wait..',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      trackerConfig: {
+        status: 2,
+        term: null
+      },
+      loading_btn: false,
+      rejectDialogVisible: false,
+      reject_reason: null,
+      booking_details: {
+        id: null,
+        amount: null,
+        bia: null,
+        user_bankslip_path: null
+      },
+      estimated_arrival_time: null
+    }
+  },
+  beforeCreate () {
+    const loading = this.$loading({
+      lock: true,
+      text: 'Please wait..',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
+
+    axios
+      .get('/api/admin/booking/' + this.$route.params.id)
+      .then((response) => {
+        this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
+        loading.close()
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
       })
+  },
+  methods: {
+    approveUserSlip () {
+      this.loading_btn = true
 
-      axios
-        .get('/api/admin/booking/' + this.$route.params.id)
+      let newApprove = {
+        estimated_arrival_time: this.estimated_arrival_time
+      }
+
+      axios.post('/api/booking/' + this.$route.params.id + '/approve-bank-slip', newApprove)
         .then((response) => {
-          this.booking_details = response.data;
-          this.trackerConfig.term = response.data.term;
-          loading.close()
-        }).catch((error) => {
-          console.log(error)
-          loading.close()
-          this.$router.push({
-            name: 'notfound'
+          this.loading_btn = false
+
+          this.$message({
+            showClose: true,
+            message: 'User bankinslip accepted. Proceed with book with supplier.',
+            type: 'success',
+            duration: 5000
           })
+
+          this.$router.push({
+            name: this.booking_details.term === 'x1_ba' || this.booking_details.term === 'x2_cheque' ? 'booking.admin.cnslip' : 'booking.admin.supplier'
+          })
+
+          // pass variable to another router
+        })
+        .catch((error) => {
+          this.loading_btn = false
+          console.log(error)
         })
     },
-    methods: {
-      approveUserSlip() {
-        this.loading_btn = true
+    rejectUserSlip () {
+      this.loading_btn = true
+      this.centerDialogVisible = false
 
-        let newApprove = {
-          estimated_arrival_time: this.estimated_arrival_time
-        }
-
-        axios.post('/api/booking/' + this.$route.params.id + '/approve-bank-slip', newApprove)
-          .then((response) => {
-            this.loading_btn = false
-
-            this.$message({
-              showClose: true,
-              message: 'User bankinslip accepted. Proceed with book with supplier.',
-              type: 'success',
-              duration: 5000
-            })
-
-            this.$router.push({
-              name: this.booking_details.term === 'x1_ba' || this.booking_details.term === 'x2_cheque' ? 'booking.admin.cnslip' : 'booking.admin.supplier'
-            })
-
-            // pass variable to another router
-          })
-          .catch((error) => {
-            this.loading_btn = false
-            console.log(error)
-          })
-      },
-      rejectUserSlip() {
-        this.loading_btn = true
-        this.centerDialogVisible = false
-
-        let newApprove = {
-          estimated_arrival_time: this.estimated_arrival_time,
-          reject_reason: this.reject_reason
-        }
-
-        axios.post('/api/booking/' + this.$route.params.id + '/reject-bank-slip', newApprove)
-          .then((response) => {
-            this.loading_btn = false
-
-            this.$message({
-              showClose: true,
-              message: 'User bankinslip rejected. Waiting user to reupload their user bankslip.',
-              type: 'warning',
-              duration: 5000
-            })
-
-            this.$router.push({
-              name: 'admin.home'
-            })
-
-            // pass variable to another router
-          })
-          .catch((error) => {
-            this.loading_btn = false
-            console.log(error)
-          })
-      },
-      getExtension(path){
-        return path.slice(-3);
-      },
-      isImage(path){
-        var ext = this.getExtension(path);
-        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
-      },
-      getURL(path){
-        var getUrl = window.location;
-        var baseUrl = getUrl.protocol + "//" + getUrl.host;
-        return baseUrl + path;
+      let newApprove = {
+        estimated_arrival_time: this.estimated_arrival_time,
+        reject_reason: this.reject_reason
       }
+
+      axios.post('/api/booking/' + this.$route.params.id + '/reject-bank-slip', newApprove)
+        .then((response) => {
+          this.loading_btn = false
+
+          this.$message({
+            showClose: true,
+            message: 'User bankinslip rejected. Waiting user to reupload their user bankslip.',
+            type: 'warning',
+            duration: 5000
+          })
+
+          this.$router.push({
+            name: 'admin.home'
+          })
+
+          // pass variable to another router
+        })
+        .catch((error) => {
+          this.loading_btn = false
+          console.log(error)
+        })
+    },
+    getExtension (path) {
+      return path.slice(-3)
+    },
+    isImage (path) {
+      var ext = this.getExtension(path)
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png'
+    },
+    getURL (path) {
+      var getUrl = window.location
+      var baseUrl = getUrl.protocol + '//' + getUrl.host
+      return baseUrl + path
     }
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/admin/complete-orders.vue b/resources/assets/js/pages/admin/complete-orders.vue
index 9ed8dac5..91bfdf16 100644
--- a/resources/assets/js/pages/admin/complete-orders.vue
+++ b/resources/assets/js/pages/admin/complete-orders.vue
@@ -6,107 +6,107 @@
     </div>
     <h1 align="center" style="margin-bottom:50px;">Completed Orders</h1>
     <el-table :data="tableData" stripe height="500" style="width: 100%">
-        <el-table-column label="Ref No." prop="id" sortable></el-table-column>
-        <el-table-column label="Order Date"  prop="created_at" width="180" sortable></el-table-column>
-        <el-table-column label="Marking" width="120" prop="marking"></el-table-column>
-        <el-table-column label="Rate" prop="rate" width="74"></el-table-column>
-        <el-table-column label="Amount" prop="amount" sortable></el-table-column>
-        <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount" prop="bia"></el-table-column>
-        <el-table-column label="Status" width="106" prop="admin_status">
-          <template slot-scope="scope">
-            <el-tag size="medium" type="success">{{ scope.row.admin_status }}</el-tag>
-          </template>        
-        </el-table-column>
-        <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag" width="180" filter-placement="bottom-end">
-          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id) }"> View Status </el-button>
-        </el-table-column>
+      <el-table-column label="Ref No." prop="id" sortable/>
+      <el-table-column label="Order Date" prop="created_at" width="180" sortable/>
+      <el-table-column label="Marking" width="120" prop="marking"/>
+      <el-table-column label="Rate" prop="rate" width="74"/>
+      <el-table-column label="Amount" prop="amount" sortable/>
+      <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount" prop="bia"/>
+      <el-table-column label="Status" width="106" prop="admin_status">
+        <template slot-scope="scope">
+          <el-tag size="medium" type="success">{{ scope.row.admin_status }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag" width="180" filter-placement="bottom-end">
+        <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id) }"> View Status </el-button>
+      </el-table-column>
     </el-table>
   </div>
 </template>
 
 <script>
-  import axios from 'axios'
-  export default {
-      data() {
-        return {
-          tableData: [],
-          url: '/api/admin/complete-orders',
-                loading_btn: false,
+import axios from 'axios'
+export default {
+  data () {
+    return {
+      tableData: [],
+      url: '/api/admin/complete-orders',
+      loading_btn: false
 
-        }
-      },
-      mounted () {
-        this.RefreshCompletedOrders()
-      },
-      methods: {
-        RefreshCompletedOrders() {
-          let $this = this
-                this.loading_btn = true
-          axios.get(this.url).then(response => {
-        this.loading_btn = false;
-            this.tableData = response.data
+    }
+  },
+  mounted () {
+    this.RefreshCompletedOrders()
+  },
+  methods: {
+    RefreshCompletedOrders () {
+      let $this = this
+      this.loading_btn = true
+      axios.get(this.url).then(response => {
+        this.loading_btn = false
+        this.tableData = response.data
+      })
+    },
+    filterTag (value, row) {
+      return row.tag === value
+    },
+    filterHandler (value, row, column) {
+      const property = column['property']
+      return row[property] === value
+    },
+    BookingStatus (status, booking_id) {
+      // TODO : Get booking status from server
+      this.status = status
+      console.log(this.status)
+      switch (this.status) {
+        case 1:
+          this.$router.push({
+            name: 'booking.admin.pending',
+            params: {id: booking_id }
           })
-        },
-        filterTag (value, row) {
-          return row.tag === value
-        },
-        filterHandler (value, row, column) {
-          const property = column['property']
-          return row[property] === value
-        },
-        BookingStatus (status, booking_id) {
-          // TODO : Get booking status from server
-          this.status = status
-          console.log(this.status)
-          switch (this.status) {
-            case 1:
-              this.$router.push({
-                name: 'booking.admin.pending',
-                params: {id: booking_id }
-              })
-              break
-            case 2:
-              this.$router.push({
-                name: 'booking.admin.verification',
-                params: {id: booking_id }
-              })
-              break
-            case 3:
-              this.$router.push({
-                name: 'booking.admin.supplier',
-                params: {id: booking_id }
-              })
-              break
-            case 4:
-              this.$router.push({
-                name: 'booking.admin.supplier.report',
-                params: {id: booking_id }
-              })
-              break
-            case 5:
-              this.$router.push({
-                name: 'booking.admin.cnslip',
-                params: {id: booking_id }
-              })
-              break
+          break
+        case 2:
+          this.$router.push({
+            name: 'booking.admin.verification',
+            params: {id: booking_id }
+          })
+          break
+        case 3:
+          this.$router.push({
+            name: 'booking.admin.supplier',
+            params: {id: booking_id }
+          })
+          break
+        case 4:
+          this.$router.push({
+            name: 'booking.admin.supplier.report',
+            params: {id: booking_id }
+          })
+          break
+        case 5:
+          this.$router.push({
+            name: 'booking.admin.cnslip',
+            params: {id: booking_id }
+          })
+          break
 
-            case 6:
-              this.$router.push({
-                name: 'booking.admin.invoice',
-                params: {id: booking_id }
-              })
-              break
+        case 6:
+          this.$router.push({
+            name: 'booking.admin.invoice',
+            params: {id: booking_id }
+          })
+          break
 
-            case 7:
-              this.$router.push({
-                name: 'booking.admin.complete',
-                params: {id: booking_id }
-              })
-              break
-            default:
-              break
-          }
+        case 7:
+          this.$router.push({
+            name: 'booking.admin.complete',
+            params: {id: booking_id }
+          })
+          break
+        default:
+          break
       }
     }
   }
-</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 da9b88cc..69fd9697 100644
--- a/resources/assets/js/pages/admin/home.vue
+++ b/resources/assets/js/pages/admin/home.vue
@@ -1,56 +1,56 @@
 <template>
-<div>
-  <div align="right">
-<el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button>
-</div>
+  <div>
+    <div align="right">
+      <el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button>
+    </div>
 
-  <!-- Booking Table -->
-  <el-row :gutter="20">
-    <div>
-      <el-table :data="bookingTable">
-        <el-table-column label="Ref No." width="100">
-          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
-          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_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="Marking" width="120" prop="marking" />
-        <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandlerTerm" label="Term" prop="term" width="100"/>
-        <el-table-column label="Rate" width="74" prop="rate" />
-        <el-table-column label="Amount" prop="amount" justify="center" width="110" />
-        <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandlerTranferAmount" label="Transfer Amount"
-                         prop="transfer_amount" width="170" />
-        <!-- <el-table-column label="ETA" sortable width="100"/> -->
-        <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
+    <!-- Booking Table -->
+    <el-row :gutter="20">
+      <div>
+        <el-table :data="bookingTable">
+          <el-table-column label="Ref No." width="100">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_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="Marking" width="120" prop="marking" />
+          <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandlerTerm" label="Term" prop="term" width="100"/>
+          <el-table-column label="Rate" width="74" prop="rate" />
+          <el-table-column label="Amount" prop="amount" justify="center" width="110" />
+          <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandlerTranferAmount" label="Transfer Amount"
+                           prop="transfer_amount" width="170" />
+          <!-- <el-table-column label="ETA" sortable width="100"/> -->
+          <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
         </el-table-column> -->
-        <!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
-        <el-table-column label="Status" width="106" :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterHandlerStatus" prop="status_desc">
-          <template slot-scope="scope">
-            <el-popover trigger="click" placement="top">
-              <p>{{ scope.row.status_desc }}</p>
-              <div slot="reference" class="name-wrapper">
-                <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
-              </div>
-            </el-popover>
-          </template>
-        </el-table-column>
-        <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
-        <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
-        <el-table-column label="" width="180">
-          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id) }"> View Status </el-button>
+          <!-- <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 :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterHandlerStatus" label="Status" width="106" prop="status_desc">
+            <template slot-scope="scope">
+              <el-popover trigger="click" placement="top">
+                <p>{{ scope.row.status_desc }}</p>
+                <div slot="reference" class="name-wrapper">
+                  <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
+          <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
+          <el-table-column label="" width="180">
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id) }"> 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>
-  <div align="right">
-      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-row>
+    <div align="right">
+      <el-button :disabled="!pagination.prev_page_url" type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)">
         Previous
       </el-button>
-      <span>Page {{pagination.current_page}} of {{pagination.last_page}}</span>
-      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.next_page_url)" :disabled="!pagination.next_page_url">
+      <span>Page {{ pagination.current_page }} of {{ pagination.last_page }}</span>
+      <el-button :disabled="!pagination.next_page_url" type="primary" size="mini" @click="fetchPaginateBooking(pagination.next_page_url)">
         Next
       </el-button>
     </div>
@@ -69,25 +69,25 @@ export default {
       bookingTable: [],
       url: 'api/admin/booking',
       pagination: {prev_page_url: null},
-      loading_btn: false,
+      loading_btn: false
     }
   },
   mounted () {
     this.getBooking()
   },
   methods: {
-    getBooking(){
+    getBooking () {
       let $this = this
       axios.get(this.url).then(response => {
-        this.bookingTable = response.data.data;
-        $this.makePagination(this.bookingTable);
+        this.bookingTable = response.data.data
+        $this.makePagination(this.bookingTable)
       })
     },
-    RefreshBooking() {
+    RefreshBooking () {
       let $this = this
       this.loading_btn = true
       axios.get(this.url).then(response => {
-        this.loading_btn = false;
+        this.loading_btn = false
         this.bookingTable = response.data.data
         this.$message({
           showClose: true,
@@ -97,8 +97,8 @@ export default {
         })
       })
     },
-    makePagination(data){
-      let pagination ={
+    makePagination (data) {
+      let pagination = {
         current_page: data.current_page,
         last_page: data.last_page,
         next_page_url: data.next_page_url,
@@ -106,24 +106,21 @@ export default {
       }
       this.pagination = pagination
     },
-    fetchPaginateBooking(url) {
+    fetchPaginateBooking (url) {
       this.url = url
       this.getBooking()
     },
     filterHandlerStatus (value, row, column) {
-      const status = row.track_status;
-      if(value ==="Success")
-        return status === "(5/5)" || status === "(7/7)";
-      else
-        return !(status === "(5/5)" || status === "(7/7)");
+      const status = row.track_status
+      if (value === 'Success') { return status === '(5/5)' || status === '(7/7)' } else { return !(status === '(5/5)' || status === '(7/7)') }
     },
     filterHandlerTranferAmount (value, row, column) {
       // Pending...lol
-      return false;
+      return false
     },
-    filterHandlerTerm(value, row, column){
-      const term = row.term;
-      return value.toLowerCase() === term.substring(0,2);
+    filterHandlerTerm (value, row, column) {
+      const term = row.term
+      return value.toLowerCase() === term.substring(0, 2)
     },
     BookingStatus (status, booking_id) {
       // TODO : Get booking status from server
diff --git a/resources/assets/js/pages/admin/transaction-history.vue b/resources/assets/js/pages/admin/transaction-history.vue
index 6eaa4c36..bd2f739e 100644
--- a/resources/assets/js/pages/admin/transaction-history.vue
+++ b/resources/assets/js/pages/admin/transaction-history.vue
@@ -1,29 +1,29 @@
 <template>
-    <div>
-        <span align="center"><h2>Transaction History</h2></span><br>
-        <el-table :data="tableData" stripe style="width: 100%">
-            <el-table-column prop="transaction_date" label="Transaction Date" sortable></el-table-column>
-            <el-table-column prop="booking_no" label="Booking No" sortable></el-table-column>
-            <el-table-column prop="marking" label="Marking" sortable></el-table-column>
-            <el-table-column prop="debit_in" label="Debit In"></el-table-column>
-            <el-table-column prop="credit_out" label="Credit Out"></el-table-column>
-            <el-table-column prop="balance" label="Balance"></el-table-column>
-            <el-table-column prop="bank_recon" label="Bank Recon"></el-table-column>
-        </el-table><br><br>
-        <div align="right">
-            <el-button>Export to Excel</el-button><el-button>Print</el-button><br><br>
-            <el-pagination background layout="prev, pager, next" :total="30"></el-pagination>
-        </div>
+  <div>
+    <span align="center"><h2>Transaction History</h2></span><br>
+    <el-table :data="tableData" stripe style="width: 100%">
+      <el-table-column prop="transaction_date" label="Transaction Date" sortable/>
+      <el-table-column prop="booking_no" label="Booking No" sortable/>
+      <el-table-column prop="marking" label="Marking" sortable/>
+      <el-table-column prop="debit_in" label="Debit In"/>
+      <el-table-column prop="credit_out" label="Credit Out"/>
+      <el-table-column prop="balance" label="Balance"/>
+      <el-table-column prop="bank_recon" label="Bank Recon"/>
+    </el-table><br><br>
+    <div align="right">
+      <el-button>Export to Excel</el-button><el-button>Print</el-button><br><br>
+      <el-pagination :total="30" background layout="prev, pager, next"/>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-      return {
+  data () {
+    return {
 
-      }
     }
+  }
 }
 </script>
 
diff --git a/resources/assets/js/pages/admin/upload-supplier-bank-slip.vue b/resources/assets/js/pages/admin/upload-supplier-bank-slip.vue
index 7dcbc597..fef0c4ea 100644
--- a/resources/assets/js/pages/admin/upload-supplier-bank-slip.vue
+++ b/resources/assets/js/pages/admin/upload-supplier-bank-slip.vue
@@ -1,58 +1,58 @@
 <template>
-    <div>
-        <span align="center"><h2>Uploaded Supplier Bank Slip</h2></span><br>
-        <div align="right">
-            <el-button type="primary" icon="el-icon-plus" @click="AddNewDialogVisible = true">Add New</el-button>
-        </div><br>
-            <el-table :data="tableData" stripe style="width: 100%">
-            <el-table-column label="Ref No" sortable></el-table-column>
-            <el-table-column label="Amount (RMB)" sortable></el-table-column>
-            <el-table-column label="Date" sortable></el-table-column>
-            <el-table-column label="Bank Slip File"></el-table-column>
-        </el-table><br><br>
+  <div>
+    <span align="center"><h2>Uploaded Supplier Bank Slip</h2></span><br>
+    <div align="right">
+      <el-button type="primary" icon="el-icon-plus" @click="AddNewDialogVisible = true">Add New</el-button>
+    </div><br>
+    <el-table :data="tableData" stripe style="width: 100%">
+      <el-table-column label="Ref No" sortable/>
+      <el-table-column label="Amount (RMB)" sortable/>
+      <el-table-column label="Date" sortable/>
+      <el-table-column label="Bank Slip File"/>
+    </el-table><br><br>
 
     <!-- popup add new dialog -->
-    <el-dialog align="center" :visible.sync="AddNewDialogVisible">
-        <el-form :label-position="right" label-width="150px">
-            <el-form-item label="Select bank slip : " align="left">
-                <el-upload class="upload-slip" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture">
-                <el-button size="small" type="primary">Click to upload</el-button></el-upload>
-            </el-form-item>
-            <el-form-item label="For Order No : "><el-input></el-input></el-form-item>
-            <el-form-item label="Amount : "><el-input></el-input></el-form-item>
-            <el-form-item label="Date : " align="left"><el-date-picker v-model="date" type="date" placeholder="Pick a date"></el-date-picker></el-form-item>
-        </el-form>
-        <div align="center">
-            <el-button type="text" @click="AddNewDialogVisible = false">Cancel</el-button>
-            <el-button type="primary" @click="AddNewDialogVisible = false; DoneAddNewDialogVisible = true">Submit</el-button>
-        </div>
+    <el-dialog :visible.sync="AddNewDialogVisible" align="center">
+      <el-form :label-position="right" label-width="150px">
+        <el-form-item label="Select bank slip : " align="left">
+          <el-upload :on-preview="handlePreview" :on-remove="handleRemove" class="upload-slip" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture">
+          <el-button size="small" type="primary">Click to upload</el-button></el-upload>
+        </el-form-item>
+        <el-form-item label="For Order No : "><el-input/></el-form-item>
+        <el-form-item label="Amount : "><el-input/></el-form-item>
+        <el-form-item label="Date : " align="left"><el-date-picker v-model="date" type="date" placeholder="Pick a date"/></el-form-item>
+      </el-form>
+      <div align="center">
+        <el-button type="text" @click="AddNewDialogVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="AddNewDialogVisible = false; DoneAddNewDialogVisible = true">Submit</el-button>
+      </div>
     </el-dialog>
-<!-- popup add new dialog end -->
-<!-- popup done upload -->
-      <el-dialog align="center" :visible.sync="DoneAddNewDialogVisible" width="30%">
-        <span>Bank Slip Successfully Updated</span><br><br>
-        <div align="center">
-            <el-button type="primary" @click="DoneAddNewDialogVisible = false">Close</el-button>
-        </div>
-      </el-dialog>
-<!-- popup done upload end -->
-    </div>
+    <!-- popup add new dialog end -->
+    <!-- popup done upload -->
+    <el-dialog :visible.sync="DoneAddNewDialogVisible" align="center" width="30%">
+      <span>Bank Slip Successfully Updated</span><br><br>
+      <div align="center">
+        <el-button type="primary" @click="DoneAddNewDialogVisible = false">Close</el-button>
+      </div>
+    </el-dialog>
+    <!-- popup done upload end -->
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-      return {
-        AddNewDialogVisible: false,
-        DoneAddNewDialogVisible: false,
-        date: ''
-      }
-    },
-    methods: {
-        handlePreview(file) {
-        console.log(file);
-      }
+  data () {
+    return {
+      AddNewDialogVisible: false,
+      DoneAddNewDialogVisible: false,
+      date: ''
     }
+  },
+  methods: {
+    handlePreview (file) {
+      console.log(file)
+    }
+  }
 }
 </script>
 
diff --git a/resources/assets/js/pages/auth/register.vue b/resources/assets/js/pages/auth/register.vue
index dc4dccd2..1c27067d 100644
--- a/resources/assets/js/pages/auth/register.vue
+++ b/resources/assets/js/pages/auth/register.vue
@@ -1,81 +1,79 @@
 <template>
-	<div class="container">
-		<div class="row">
-			<div class="col-lg-8 m-auto">
-				<card :title="$t('register')">
-					<form @submit.prevent="register" @keydown="form.onKeydown($event)">
-						<!-- Marking -->
-						<div class="form-group row" :class="{'has-error': errors.has('marking') }">
-							<label class="col-md-3 col-form-label text-md-right">{{ $t('Marking') }}</label>
-							<div class="col-md-7">
-								<el-input v-model="form.marking" v-validate="'required|max:255'" type="text" name="marking" placeholder="Marking Number">
-								</el-input>
-								<span class="text-danger" v-if="errors.has('marking')">{{ errors.first('marking') }}<br/></span>
-							</div>
-						</div>
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-8 m-auto">
+        <card :title="$t('register')">
+          <form @submit.prevent="register" @keydown="form.onKeydown($event)">
+            <!-- Marking -->
+            <div :class="{'has-error': errors.has('marking') }" class="form-group row">
+              <label class="col-md-3 col-form-label text-md-right">{{ $t('Marking') }}</label>
+              <div class="col-md-7">
+                <el-input v-validate="'required|max:255'" v-model="form.marking" type="text" name="marking" placeholder="Marking Number"/>
+                <span v-if="errors.has('marking')" class="text-danger">{{ errors.first('marking') }}<br></span>
+              </div>
+            </div>
 
-						<!-- Email -->
-						<div class="form-group row" :class="{'has-error': errors.has('email') }">
-							<label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
-							<div class="col-md-7">
-								<el-input v-model="form.email" v-validate="'required|max:255'" type="email" name="email" placeholder="Email">
-								</el-input>
-								<span class="text-danger" v-if="errors.has('email')">{{ errors.first('email') }}</span>
-							</div>
-						</div>
+            <!-- Email -->
+            <div :class="{'has-error': errors.has('email') }" class="form-group row">
+              <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
+              <div class="col-md-7">
+                <el-input v-validate="'required|max:255'" v-model="form.email" type="email" name="email" placeholder="Email"/>
+                <span v-if="errors.has('email')" class="text-danger">{{ errors.first('email') }}</span>
+              </div>
+            </div>
 
-						<!-- Password -->
-						<div class="form-group row" :class="{'has-error': errors.has('password') }">
-							<label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
-							<div class="col-md-7">
-								<el-input v-if="password_visible" v-model="form.password" v-validate="'required|min:6|max:255'" type="text" name="password" placeholder="Password">
-									<template slot="append">
-										<el-button type="primary" @click="password_visible = !password_visible"><i class="fas fa-eye"></i></el-button>
-									</template>
-								</el-input>
-								<el-input v-else v-model="form.password" v-validate="'required|min:6|max:255'" type="password" name="password" placeholder="Password">
-									<template slot="append">
-										<el-button type="primary" @click="password_visible = !password_visible"><i class="fas fa-eye-slash"></i></el-button>
-									</template>
-								</el-input>
-								<span class="text-danger" v-if="errors.has('password')">{{ errors.first('password') }}</span>
-							</div>
-						</div>
+            <!-- Password -->
+            <div :class="{'has-error': errors.has('password') }" class="form-group row">
+              <label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
+              <div class="col-md-7">
+                <el-input v-validate="'required|min:6|max:255'" v-if="password_visible" v-model="form.password" type="text" name="password" placeholder="Password">
+                  <template slot="append">
+                    <el-button type="primary" @click="password_visible = !password_visible"><i class="fas fa-eye"/></el-button>
+                  </template>
+                </el-input>
+                <el-input v-validate="'required|min:6|max:255'" v-else v-model="form.password" type="password" name="password" placeholder="Password">
+                  <template slot="append">
+                    <el-button type="primary" @click="password_visible = !password_visible"><i class="fas fa-eye-slash"/></el-button>
+                  </template>
+                </el-input>
+                <span v-if="errors.has('password')" class="text-danger">{{ errors.first('password') }}</span>
+              </div>
+            </div>
 
-						<!-- Password Confirmation -->
-						<div class="form-group row" :class="{'has-error': errors.has('confirm_password') }">
-							<label class="col-md-3 col-form-label text-md-right">{{ $t('confirm_password') }}</label>
-							<div class="col-md-7">
-								<el-input v-if="password_confirmation_visible" v-model="form.password_confirmation" v-validate="'required|min:6|max:255'" type="text" name="password_confirmation" placeholder="Confirm Password">
-									<template slot="append">
-										<el-button type="primary" @click="password_confirmation_visible = !password_confirmation_visible"><i class="fas fa-eye"></i></el-button>
-									</template>
-								</el-input>
-								<el-input v-else v-model="form.password_confirmation" v-validate="'required|min:6|max:255'" type="password" name="password_confirmation" placeholder="Confirm Password">
-									<template slot="append">
-										<el-button type="primary" @click="password_confirmation_visible = !password_confirmation_visible"><i class="fas fa-eye-slash"></i></el-button>
-									</template>
-								</el-input>
-								<span class="text-danger" v-if="errors.has('password_confirmation')">{{ errors.first('password_confirmation') }}<br/></span>
-							</div>
-						</div>
+            <!-- Password Confirmation -->
+            <div :class="{'has-error': errors.has('confirm_password') }" class="form-group row">
+              <label class="col-md-3 col-form-label text-md-right">{{ $t('confirm_password') }}</label>
+              <div class="col-md-7">
+                <el-input v-validate="'required|min:6|max:255'" v-if="password_confirmation_visible" v-model="form.password_confirmation" type="text" name="password_confirmation" placeholder="Confirm Password">
+                  <template slot="append">
+                    <el-button type="primary" @click="password_confirmation_visible = !password_confirmation_visible"><i class="fas fa-eye"/></el-button>
+                  </template>
+                </el-input>
+                <el-input v-validate="'required|min:6|max:255'" v-else v-model="form.password_confirmation" type="password" name="password_confirmation" placeholder="Confirm Password">
+                  <template slot="append">
+                    <el-button type="primary" @click="password_confirmation_visible = !password_confirmation_visible"><i class="fas fa-eye-slash"/></el-button>
+                  </template>
+                </el-input>
+                <span v-if="errors.has('password_confirmation')" class="text-danger">{{ errors.first('password_confirmation') }}<br></span>
+              </div>
+            </div>
 
-						<div class="form-group row">
-							<div class="col-md-7 offset-md-3 d-flex">
-								<!-- Submit Button -->
-								<v-button :loading="form.busy" :disabled="errors.any() || form.password=='' || form.password_confirmation=='' || form.email=='' || form.marking=='' ? true : false">
-									{{ $t('register') }}
-								</v-button>
+            <div class="form-group row">
+              <div class="col-md-7 offset-md-3 d-flex">
+                <!-- Submit Button -->
+                <v-button :loading="form.busy" :disabled="errors.any() || form.password=='' || form.password_confirmation=='' || form.email=='' || form.marking=='' ? true : false">
+                  {{ $t('register') }}
+                </v-button>
 
-								<!-- GitHub Register Button -->
-								<login-with-github/>
-							</div>
-						</div>
-					</form>
-				</card>
-			</div>
-		</div>
-	</div>
+                <!-- GitHub Register Button -->
+                <login-with-github/>
+              </div>
+            </div>
+          </form>
+        </card>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -85,81 +83,78 @@ import store from '~/store'
 import Vue from 'vue'
 
 export default {
-	middleware: 'guest',
+  middleware: 'guest',
 
-	components: {
-		LoginWithGithub
-	},
+  components: {
+    LoginWithGithub
+  },
 
-	metaInfo () {
-		return { title: this.$t('register') }
-	},
+  metaInfo () {
+    return { title: this.$t('register') }
+  },
 
-	data: () => ({
-		form: new Form({
-			marking:'',
-			email: '',
-			password: '',
-			password_confirmation: ''
-		}),
-		email : '',
-		password_visible : false,
-		password_confirmation_visible : false
-	}),
+  data: () => ({
+    form: new Form({
+      marking: '',
+      email: '',
+      password: '',
+      password_confirmation: ''
+    }),
+    email: '',
+    password_visible: false,
+    password_confirmation_visible: false
+  }),
 
-
-	methods: {
-		async register () {
-			var token
-			var data 
-			// Register the user.
-			await this.form.post('/api/register')
-			.then( (response) => {
+  methods: {
+    async register () {
+      var token
+      var data
+      // Register the user.
+      await this.form.post('/api/register')
+        .then((response) => {
 				 data = response.data
 			    this.$message({
-				message: "Success. Logging in..",
-				type: 'success'
-				})
-			})
-			.catch( (error) => {
-				console.log(error)
+            message: 'Success. Logging in..',
+            type: 'success'
+          })
+        })
+        .catch((error) => {
+          console.log(error)
 			    this.$message({
-				message: error.response.data.message,
-				type: 'error'
-				})
-			}
-			)
+            message: error.response.data.message,
+            type: 'error'
+          })
+        }
+        )
 
-			
-			await this.form.post('/api/login')
-			.then( (response) => {
-				console.log(response.data)
-				token = response.data.token
-			})
-			.catch( (error) => {
-				console.log(error)
+      await this.form.post('/api/login')
+        .then((response) => {
+          console.log(response.data)
+          token = response.data.token
+        })
+        .catch((error) => {
+          console.log(error)
 			    this.$message({
-				message: error.response.data.message,
-				type: 'error'
-				})
-			}
-			)
+            message: error.response.data.message,
+            type: 'error'
+          })
+        }
+        )
 
-			console.log(token)
-			// Save the token.
-			this.$store.dispatch('auth/saveToken', { token } )
+      console.log(token)
+      // Save the token.
+      this.$store.dispatch('auth/saveToken', { token })
 
-			// Update the user.
-			await this.$store.dispatch('auth/updateUser', { user: data })
+      // Update the user.
+      await this.$store.dispatch('auth/updateUser', { user: data })
 
-			// Redirect home.
-			if (store.getters['auth/user'].role === 'admin') {
-				this.$router.push({ name: 'admin.home' })
-			} else {
-				this.$router.push({ name: 'home' })
-			}
-
-		}
-	}
+      // Redirect home.
+      if (store.getters['auth/user'].role === 'admin') {
+        this.$router.push({ name: 'admin.home' })
+      } else {
+        this.$router.push({ name: 'home' })
+      }
+    }
+  }
 }
 </script>
diff --git a/resources/assets/js/pages/booking/completed.vue b/resources/assets/js/pages/booking/completed.vue
index 19c6c4e8..fe8f013d 100644
--- a/resources/assets/js/pages/booking/completed.vue
+++ b/resources/assets/js/pages/booking/completed.vue
@@ -12,8 +12,8 @@
           <div class="card-header">Purchase Order</div>
           <div class="row">
             <div class="card-body">
-              <a target="_blank" :href="getURL(booking_details.user_po_path)">
-                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
+              <a :href="getURL(booking_details.user_po_path)" target="_blank">
+                <img v-if="isImage(booking_details.user_po_path)" :src="booking_details.user_po_path" class="image">
                 <p v-else>Download</p>
               </a>
             </div>
@@ -24,11 +24,11 @@
         <div class="card">
           <div class="card-header">China Bank Slip</div>
           <div class="row">
-            <div  v-for="cn_bankslip in booking_details.china_bankslip_path" :key='cn_bankslip'> 
-              <a target="_blank" :href="getURL(cn_bankslip)">
-                <img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
+            <div v-for="cn_bankslip in booking_details.china_bankslip_path" :key="cn_bankslip">
+              <a :href="getURL(cn_bankslip)" target="_blank">
+                <img v-if="isImage(cn_bankslip)" :src="cn_bankslip" class="image">
                 <p v-else>Download</p>
-                <br/>
+                <br>
               </a>
             </div>
           </div>
@@ -38,9 +38,9 @@
         <div class="card">
           <div class="card-header">Invoice</div>
           <div class="row">
-            <div class="card-body">     
-              <a target="_blank" :href="getURL(booking_details.invoice_path)">
-                <img v-if="isImage(booking_details.invoice_path)" v-bind:src="booking_details.invoice_path" class="image">
+            <div class="card-body">
+              <a :href="getURL(booking_details.invoice_path)" target="_blank">
+                <img v-if="isImage(booking_details.invoice_path)" :src="booking_details.invoice_path" class="image">
                 <p v-else>Download</p>
               </a>
             </div>
@@ -50,8 +50,8 @@
     </div>
     <!-- order details -->
     <div class="card">
-    <div class="card-header">Order Details</div>
-    <div class="card-body">
+      <div class="card-header">Order Details</div>
+      <div class="card-body">
         <div class="row">
           <div class="col">
             <table class="table table-striped">
@@ -62,11 +62,11 @@
                 </tr>
                 <tr>
                   <td>Date :</td>
-                  <td>{{ booking_details.created_at }}</td> 
+                  <td>{{ booking_details.created_at }}</td>
                 </tr>
                 <tr>
                   <td>Customer Marking :</td>
-                  <td>{{ booking_details.marking }}</td> 
+                  <td>{{ booking_details.marking }}</td>
                 </tr>
                 <tr>
                   <td>Term: </td>
@@ -84,14 +84,14 @@
                 </tr>
                 <tr>
                   <td>+ Service Charge :</td>
-                  <td>CNY {{ booking_details.service_charge }}</td> 
+                  <td>CNY {{ booking_details.service_charge }}</td>
                 </tr>
                 <tr>
                   <td>RATE :</td>
-                  <td>{{ booking_details.rate }}</td> 
+                  <td>{{ booking_details.rate }}</td>
                 </tr>
                 <tr>
-                  <td></td>
+                  <td/>
                   <td><b>MYR {{ booking_details.bia }}</b></td>
                 </tr>
               </tbody>
@@ -104,10 +104,10 @@
       <div class="card-header">Order Bankin Slip</div>
       <div class="row">
         <div class="card-body">
-          <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
-            <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+          <a :href="getURL(booking_details.user_bankslip_path)" target="_blank">
+            <img v-if="isImage(booking_details.user_bankslip_path)" :src="booking_details.user_bankslip_path" class="image">
             <p v-else>Download</p>
-          </a>  
+          </a>
         </div>
       </div>
     </div>
@@ -160,12 +160,12 @@ export default {
     return {
       status: 7,
       loading_btn: false,
-      booking_details:{
-          id: null,
-          amount: null,
-          bia: null,
-          user_bankslip_path: null,
-        }
+      booking_details: {
+        id: null,
+        amount: null,
+        bia: null,
+        user_bankslip_path: null
+      }
     }
   },
   beforeCreate () {
@@ -180,8 +180,7 @@ export default {
       .get('/api/booking/' + this.$route.params.id)
       .then((response) => {
         this.booking_details = response.data
-        loading.close();
-
+        loading.close()
       }).catch((error) => {
         console.log(error)
         loading.close()
@@ -191,17 +190,17 @@ export default {
       })
   },
   methods: {
-    getExtension(path){
-      return path.slice(-3);
+    getExtension (path) {
+      return path.slice(-3)
     },
-    isImage(path){
-      var ext = this.getExtension(path);
-      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+    isImage (path) {
+      var ext = this.getExtension(path)
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png'
     },
-    getURL(path){
-      var getUrl = window.location;
-      var baseUrl = getUrl.protocol + "//" + getUrl.host;
-      return baseUrl + path;
+    getURL (path) {
+      var getUrl = window.location
+      var baseUrl = getUrl.protocol + '//' + getUrl.host
+      return baseUrl + path
     }
   }
 }
diff --git a/resources/assets/js/pages/booking/confirmation.vue b/resources/assets/js/pages/booking/confirmation.vue
index 24dc64a5..0db8a151 100644
--- a/resources/assets/js/pages/booking/confirmation.vue
+++ b/resources/assets/js/pages/booking/confirmation.vue
@@ -6,8 +6,8 @@
       <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
     </div>
     <div class="card">
-    <div class="card-header">Order Details</div>
-    <div class="card-body">
+      <div class="card-header">Order Details</div>
+      <div class="card-body">
         <div class="row">
           <div class="col">
             <table class="table table-striped">
@@ -18,11 +18,11 @@
                 </tr>
                 <tr>
                   <td>Date :</td>
-                  <td>{{ booking_details.created_at }}</td> 
+                  <td>{{ booking_details.created_at }}</td>
                 </tr>
                 <tr>
                   <td>Customer Marking :</td>
-                  <td>{{ booking_details.marking }}</td> 
+                  <td>{{ booking_details.marking }}</td>
                 </tr>
                 <tr>
                   <td>Term: </td>
@@ -40,14 +40,14 @@
                 </tr>
                 <tr>
                   <td>+ Service Charge :</td>
-                  <td>CNY {{ booking_details.service_charge }}</td> 
+                  <td>CNY {{ booking_details.service_charge }}</td>
                 </tr>
                 <tr>
                   <td>RATE :</td>
-                  <td>{{ booking_details.rate }}</td> 
+                  <td>{{ booking_details.rate }}</td>
                 </tr>
                 <tr>
-                  <td></td>
+                  <td/>
                   <td><b>MYR {{ booking_details.bia }}</b></td>
                 </tr>
               </tbody>
@@ -61,8 +61,8 @@
       <div class="card-header">Order Bankin Slip</div>
       <div class="row">
         <div class="card-body">
-          <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
-            <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+          <a :href="getURL(booking_details.user_bankslip_path)" target="_blank">
+            <img v-if="isImage(booking_details.user_bankslip_path)" :src="booking_details.user_bankslip_path" class="image">
             <p v-else>Download</p>
           </a>
         </div>
@@ -114,12 +114,12 @@ export default {
     return {
       status: 3,
       loading_btn: false,
-      booking_details:{
-          id: null,
-          amount: null,
-          bia: null,
-          user_bankslip_path: null,
-        }
+      booking_details: {
+        id: null,
+        amount: null,
+        bia: null,
+        user_bankslip_path: null
+      }
     }
   },
   beforeCreate () {
@@ -135,7 +135,6 @@ export default {
       .then((response) => {
         this.booking_details = response.data
         loading.close()
-
       }).catch((error) => {
         console.log(error)
         loading.close()
@@ -145,18 +144,18 @@ export default {
       })
   },
   methods: {
-    getExtension(path){
-        return path.slice(-3);
-      },
-      isImage(path){
-        var ext = this.getExtension(path);
-        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
-      },
-      getURL(path){
-        var getUrl = window.location;
-        var baseUrl = getUrl.protocol + "//" + getUrl.host;
-        return baseUrl + path;
-      }
+    getExtension (path) {
+      return path.slice(-3)
+    },
+    isImage (path) {
+      var ext = this.getExtension(path)
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png'
+    },
+    getURL (path) {
+      var getUrl = window.location
+      var baseUrl = getUrl.protocol + '//' + getUrl.host
+      return baseUrl + path
+    }
   }
 }
 </script>
diff --git a/resources/assets/js/pages/booking/po.vue b/resources/assets/js/pages/booking/po.vue
index 8f248d6b..cd637759 100644
--- a/resources/assets/js/pages/booking/po.vue
+++ b/resources/assets/js/pages/booking/po.vue
@@ -12,8 +12,8 @@
           <div class="card-header">Purchase Order</div>
           <div class="row">
             <div class="card-body">
-              <a target="_blank" :href="getURL(booking_details.user_po_path)">
-                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
+              <a :href="getURL(booking_details.user_po_path)" target="_blank">
+                <img v-if="isImage(booking_details.user_po_path)" :src="booking_details.user_po_path" class="image">
                 <p v-else>Download</p>
               </a>
             </div>
@@ -25,8 +25,8 @@
           <div class="card-header">China Bank Slip</div>
           <div class="row">
             <div class="card-body">
-              <a target="_blank" :href="getURL(booking_details.china_bankslip_path)">
-                <img v-if="isImage(booking_details.china_bankslip_path)" v-bind:src="booking_details.china_bankslip_path" class="image">
+              <a :href="getURL(booking_details.china_bankslip_path)" target="_blank">
+                <img v-if="isImage(booking_details.china_bankslip_path)" :src="booking_details.china_bankslip_path" class="image">
                 <p v-else>Download</p>
               </a>
             </div>
@@ -37,8 +37,8 @@
         <div class="card">
           <div class="card-header">Invoice</div>
           <div class="row">
-            <div class="card-body">     
-                <img class="uploadedImage" src="http://via.placeholder.com/900x1615">   
+            <div class="card-body">
+              <img class="uploadedImage" src="http://via.placeholder.com/900x1615">
             </div>
           </div>
         </div>
@@ -46,8 +46,8 @@
     </div>
     <!-- order details -->
     <div class="card">
-    <div class="card-header">Order Details</div>
-    <div class="card-body">
+      <div class="card-header">Order Details</div>
+      <div class="card-body">
         <div class="row">
           <div class="col">
             <table class="table table-striped">
@@ -58,11 +58,11 @@
                 </tr>
                 <tr>
                   <td>Date :</td>
-                  <td>{{ booking_details.created_at }}</td> 
+                  <td>{{ booking_details.created_at }}</td>
                 </tr>
                 <tr>
                   <td>Customer Marking :</td>
-                  <td>{{ booking_details.marking }}</td> 
+                  <td>{{ booking_details.marking }}</td>
                 </tr>
                 <tr>
                   <td>Term: </td>
@@ -80,14 +80,14 @@
                 </tr>
                 <tr>
                   <td>+ Service Charge :</td>
-                  <td>CNY {{ booking_details.service_charge }}</td> 
+                  <td>CNY {{ booking_details.service_charge }}</td>
                 </tr>
                 <tr>
                   <td>RATE :</td>
-                  <td>{{ booking_details.rate }}</td> 
+                  <td>{{ booking_details.rate }}</td>
                 </tr>
                 <tr>
-                  <td></td>
+                  <td/>
                   <td><b>MYR {{ booking_details.bia }}</b></td>
                 </tr>
               </tbody>
@@ -100,8 +100,8 @@
       <div class="card-header">Order Bankin Slip</div>
       <div class="row">
         <div class="card-body">
-          <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
-            <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+          <a :href="getURL(booking_details.user_bankslip_path)" target="_blank">
+            <img v-if="isImage(booking_details.user_bankslip_path)" :src="booking_details.user_bankslip_path" class="image">
             <p v-else>Download</p>
           </a>
         </div>
@@ -156,12 +156,12 @@ export default {
     return {
       status: 6,
       loading_btn: false,
-      booking_details:{
-          id: null,
-          amount: null,
-          bia: null,
-          user_bankslip_path: null,
-        }
+      booking_details: {
+        id: null,
+        amount: null,
+        bia: null,
+        user_bankslip_path: null
+      }
     }
   },
   beforeCreate () {
@@ -177,7 +177,6 @@ export default {
       .then((response) => {
         this.booking_details = response.data
         loading.close()
-
       }).catch((error) => {
         console.log(error)
         loading.close()
@@ -187,17 +186,17 @@ export default {
       })
   },
   methods: {
-    getExtension(path){
-      return path.slice(-3);
+    getExtension (path) {
+      return path.slice(-3)
     },
-    isImage(path){
-      var ext = this.getExtension(path);
-      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+    isImage (path) {
+      var ext = this.getExtension(path)
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png'
     },
-    getURL(path){
-      var getUrl = window.location;
-      var baseUrl = getUrl.protocol + "//" + getUrl.host;
-      return baseUrl + path;
+    getURL (path) {
+      var getUrl = window.location
+      var baseUrl = getUrl.protocol + '//' + getUrl.host
+      return baseUrl + path
     }
   }
 }
diff --git a/resources/assets/js/pages/booking/poComplete.vue b/resources/assets/js/pages/booking/poComplete.vue
index 78a53e43..65867f5c 100644
--- a/resources/assets/js/pages/booking/poComplete.vue
+++ b/resources/assets/js/pages/booking/poComplete.vue
@@ -21,7 +21,7 @@
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
               <a target=" _blank" href="#">
-                <img v-bind:src="booking_details.user_po_path" class="image">
+                <img :src="booking_details.user_po_path" class="image">
               </a>
             </el-col>
           </el-row>
@@ -37,7 +37,7 @@
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
               <a target=" _blank" href="#">
-                <img v-bind:src="booking_details.china_bankslip_path" class="image">
+                <img :src="booking_details.china_bankslip_path" class="image">
               </a>
             </el-col>
           </el-row>
@@ -50,20 +50,20 @@
             <!-- <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">     
-                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">   
+            <el-col :span="12">
+              <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
             </el-col>
           </el-row>
         </el-card>
       </el-col>
     </el-row>
     <br>
-    <!-- bank slips END --> 
+    <!-- bank slips END -->
 
     <!-- order details -->
     <div class="card">
-    <div class="card-header">Order Details</div>
-    <div class="card-body">
+      <div class="card-header">Order Details</div>
+      <div class="card-body">
         <div class="row">
           <div class="col">
             <table class="table table-striped">
@@ -74,11 +74,11 @@
                 </tr>
                 <tr>
                   <td>Date :</td>
-                  <td>{{ booking_details.created_at }}</td> 
+                  <td>{{ booking_details.created_at }}</td>
                 </tr>
                 <tr>
                   <td>Customer Marking :</td>
-                  <td>{{ booking_details.marking }}</td> 
+                  <td>{{ booking_details.marking }}</td>
                 </tr>
                 <tr>
                   <td>Term: </td>
@@ -96,14 +96,14 @@
                 </tr>
                 <tr>
                   <td>+ Service Charge :</td>
-                  <td>CNY {{ booking_details.service_charge }}</td> 
+                  <td>CNY {{ booking_details.service_charge }}</td>
                 </tr>
                 <tr>
                   <td>RATE :</td>
-                  <td>{{ booking_details.rate }}</td> 
+                  <td>{{ booking_details.rate }}</td>
                 </tr>
                 <tr>
-                  <td></td>
+                  <td/>
                   <td><b>MYR {{ booking_details.bia }}</b></td>
                 </tr>
               </tbody>
@@ -112,14 +112,14 @@
         </div>
       </div>
     </div>
-     <br>
+    <br>
     <div class="card">
       <div class="card-header">Payment Bankin Slip</div>
       <div class="row">
         <div class="card-body">
-          <a target="_blank" :href="booking_details.user_bankslip_path">
-            <img v-bind:src="booking_details.user_bankslip_path" class="uploadedImage">
-          </a>    
+          <a :href="booking_details.user_bankslip_path" target="_blank">
+            <img :src="booking_details.user_bankslip_path" class="uploadedImage">
+          </a>
         </div>
       </div>
     </div>
@@ -143,12 +143,12 @@ export default {
     return {
       status: 6,
       loading_btn: false,
-      booking_details:{
-          id: null,
-          amount: null,
-          bia: null,
-          user_bankslip_path: null,
-        }
+      booking_details: {
+        id: null,
+        amount: null,
+        bia: null,
+        user_bankslip_path: null
+      }
     }
   },
   beforeCreate () {
@@ -164,7 +164,6 @@ export default {
       .then((response) => {
         this.booking_details = response.data
         loading.close()
-
       }).catch((error) => {
         console.log(error)
         loading.close()
@@ -172,7 +171,6 @@ export default {
           name: 'notfound'
         })
       })
-
   },
   methods: {
 
diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index 877f757b..3c9e0c05 100644
--- a/resources/assets/js/pages/booking/transfer.vue
+++ b/resources/assets/js/pages/booking/transfer.vue
@@ -8,8 +8,8 @@
     </div>
     <!-- order details -->
     <div class="card">
-    <div class="card-header">Order Details</div>
-    <div class="card-body">
+      <div class="card-header">Order Details</div>
+      <div class="card-body">
         <div class="row">
           <div class="col">
             <table class="table table-striped">
@@ -20,11 +20,11 @@
                 </tr>
                 <tr>
                   <td>Date :</td>
-                  <td>{{ booking_details.created_at }}</td> 
+                  <td>{{ booking_details.created_at }}</td>
                 </tr>
                 <tr>
                   <td>Customer Marking :</td>
-                  <td>{{ booking_details.marking }}</td> 
+                  <td>{{ booking_details.marking }}</td>
                 </tr>
                 <tr>
                   <td>Term: </td>
@@ -46,14 +46,14 @@
                 </tr>
                 <tr>
                   <td>+ Service Charge :</td>
-                  <td>CNY {{ booking_details.service_charge }}</td> 
+                  <td>CNY {{ booking_details.service_charge }}</td>
                 </tr>
                 <tr>
                   <td>RATE :</td>
-                  <td>{{ booking_details.rate }}</td> 
+                  <td>{{ booking_details.rate }}</td>
                 </tr>
                 <tr>
-                  <td></td>
+                  <td/>
                   <td><b>MYR {{ booking_details.bia }}</b></td>
                 </tr>
                 <tr>
@@ -70,12 +70,12 @@
       <div class="card-header">Order Bankin Slip</div>
       <div class="row">
         <div class="card-body">
-          <a target="_blank" :href="booking_details.user_bankslip_path">
-            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
-              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+          <a :href="booking_details.user_bankslip_path" target="_blank">
+            <a :href="getURL(booking_details.user_bankslip_path)" target="_blank">
+              <img v-if="isImage(booking_details.user_bankslip_path)" :src="booking_details.user_bankslip_path" class="image">
               <p v-else>Download</p>
             </a>
-          </a>    
+          </a>
         </div>
       </div>
     </div>
@@ -135,12 +135,12 @@ export default {
     return {
       status: 4,
       loading_btn: false,
-      booking_details:{
-          id: null,
-          amount: null,
-          bia: null,
-          user_bankslip_path: null,
-        }
+      booking_details: {
+        id: null,
+        amount: null,
+        bia: null,
+        user_bankslip_path: null
+      }
     }
   },
   beforeCreate () {
@@ -156,7 +156,6 @@ export default {
       .then((response) => {
         this.booking_details = response.data
         loading.close()
-
       }).catch((error) => {
         console.log(error)
         loading.close()
@@ -166,17 +165,17 @@ export default {
       })
   },
   methods: {
-    getExtension(path){
-      return path.slice(-3);
+    getExtension (path) {
+      return path.slice(-3)
     },
-    isImage(path){
-      var ext = this.getExtension(path);
-      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+    isImage (path) {
+      var ext = this.getExtension(path)
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png'
     },
-    getURL(path){
-      var getUrl = window.location;
-      var baseUrl = getUrl.protocol + "//" + getUrl.host;
-      return baseUrl + path;
+    getURL (path) {
+      var getUrl = window.location
+      var baseUrl = getUrl.protocol + '//' + getUrl.host
+      return baseUrl + path
     }
   }
 }
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index 6fe76174..fe054a7c 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -14,16 +14,16 @@
           <div class="card-body">
 
             <el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-exceed="handleExceed" :on-preview="handlePreview" :on-remove="handleRemove"
-              :on-error="uploadError" class="upload-demo  uploadAreaOne" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
-              drag multiple>
+                       :on-error="uploadError" class="upload-demo  uploadAreaOne" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
+                       drag multiple>
               <i class="el-icon-upload" />
               <div class="el-upload__text">Drop file here or
                 <em>click to upload</em>
               </div>
               <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
             </el-upload>
-            <el-upload class="upload-demo uploadAreaTwo" :action="'/api/booking/' + booking_id + '/upload-po'" :on-preview="handlePreview"
-              :on-remove="handleRemove" :before-remove="beforeRemove" multiple :file-list="fileList">
+            <el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-preview="handlePreview" :on-remove="handleRemove"
+                       :before-remove="beforeRemove" :file-list="fileList" class="upload-demo uploadAreaTwo" multiple>
               <el-button size="small" type="primary">Click to upload</el-button>
               <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
             </el-upload>
@@ -39,8 +39,8 @@
         <div class="card">
           <div class="card-header">China Bank Slip</div>
           <div class="card-body">
-            <a target="_blank" :href="getURL(booking_details.china_bankslip_path)">
-              <img v-if="isImage(booking_details.china_bankslip_path)" v-bind:src="booking_details.china_bankslip_path" class="image">
+            <a :href="getURL(booking_details.china_bankslip_path)" target="_blank">
+              <img v-if="isImage(booking_details.china_bankslip_path)" :src="booking_details.china_bankslip_path" class="image">
               <p v-else>Download</p>
             </a>
           </div>
@@ -94,7 +94,7 @@
                   <td>{{ booking_details.rate }}</td>
                 </tr>
                 <tr>
-                  <td></td>
+                  <td/>
                   <td>
                     <b>MYR {{ booking_details.bia }}</b>
                   </td>
@@ -113,8 +113,8 @@
       <div class="card-header">Order Bankin Slip</div>
       <div class="row">
         <div class="card-body">
-          <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
-            <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+          <a :href="getURL(booking_details.user_bankslip_path)" target="_blank">
+            <img v-if="isImage(booking_details.user_bankslip_path)" :src="booking_details.user_bankslip_path" class="image">
             <p v-else>Download</p>
           </a>
         </div>
@@ -183,106 +183,105 @@
   }
 </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_btn: false,
-        booking_details: {
-          id: null,
-          amount: null,
-          bia: null,
-          user_bankslip_path: null,
-          china_bankslip_path: null,
-        }
-      }
-    },
-    beforeCreate() {
-      const loading = this.$loading({
-        lock: true,
-        text: 'Please wait..',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-
-      axios
-        .get('/api/booking/' + this.$route.params.id)
-        .then((response) => {
-          this.booking_details = response.data
-          loading.close()
-
-        }).catch((error) => {
-          console.log(error)
-          loading.close()
-          this.$router.push({
-            name: 'notfound'
-          })
-        })
-    },
-    methods: {
-      uploadPo() {
-        this.loading_btn = true
-        axios
-          .post('/api/booking/' + this.$route.params.id + '/confirm-po')
-          .then((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_btn = false
-          }).catch((error) => {
-            this.$message({
-              showClose: true,
-              message: "Please upload your purchase order",
-              type: 'error',
-              duration: 30000
-            })
-            this.loading_btn = false
-          })
-      },
-      handleRemove(file, fileList) {
-        console.log(file, fileList)
-        // Should send some reqeust to controller to delete the file
-      },
-      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}？`)
-      },
-      uploadError(file, fileList) {
-        this.$message.warning(`Incorrect file format or file size too big.`)
-      },
-      getExtension(path) {
-        return path.slice(-3);
-      },
-      isImage(path) {
-        var ext = this.getExtension(path);
-        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
-      },
-      getURL(path) {
-        var getUrl = window.location;
-        var baseUrl = getUrl.protocol + "//" + getUrl.host;
-        return baseUrl + path;
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      booking_id: this.$route.params.id,
+      status: 5,
+      loading_btn: false,
+      booking_details: {
+        id: null,
+        amount: null,
+        bia: null,
+        user_bankslip_path: null,
+        china_bankslip_path: null
       }
     }
+  },
+  beforeCreate () {
+    const loading = this.$loading({
+      lock: true,
+      text: 'Please wait..',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
+
+    axios
+      .get('/api/booking/' + this.$route.params.id)
+      .then((response) => {
+        this.booking_details = response.data
+        loading.close()
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+  },
+  methods: {
+    uploadPo () {
+      this.loading_btn = true
+      axios
+        .post('/api/booking/' + this.$route.params.id + '/confirm-po')
+        .then((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_btn = false
+        }).catch((error) => {
+          this.$message({
+            showClose: true,
+            message: 'Please upload your purchase order',
+            type: 'error',
+            duration: 30000
+          })
+          this.loading_btn = false
+        })
+    },
+    handleRemove (file, fileList) {
+      console.log(file, fileList)
+      // Should send some reqeust to controller to delete the file
+    },
+    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}？`)
+    },
+    uploadError (file, fileList) {
+      this.$message.warning(`Incorrect file format or file size too big.`)
+    },
+    getExtension (path) {
+      return path.slice(-3)
+    },
+    isImage (path) {
+      var ext = this.getExtension(path)
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png'
+    },
+    getURL (path) {
+      var getUrl = window.location
+      var baseUrl = getUrl.protocol + '//' + getUrl.host
+      return baseUrl + path
+    }
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index 67090f97..8cdf46d1 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -1,79 +1,79 @@
 <template>
-	<el-main>
-	<progress-track v-model="status"/>
-	<div align="center" v-if="booking.user_bankslip_path">
-		<h4 style="margin-top:5%" >
-		Your Bankslip Has Been Rejected, Please Reupload Your Bankslip <br>
-		Reason : {{ booking.reject_reason }}
-		</h4>
-		<br>
-		<br>
-	</div>
-	<div v-else align="center">
-		<h1>Waiting For Payment</h1>
-	</div>
+  <el-main>
+    <progress-track v-model="status"/>
+    <div v-if="booking.user_bankslip_path" align="center">
+      <h4 style="margin-top:5%" >
+        Your Bankslip Has Been Rejected, Please Reupload Your Bankslip <br>
+        Reason : {{ booking.reject_reason }}
+      </h4>
+      <br>
+      <br>
+    </div>
+    <div v-else align="center">
+      <h1>Waiting For Payment</h1>
+    </div>
 
-	<div class="row">
-		<table class="table table-striped">
-			<tbody>
-				<tr>
-					<td>Amount : </td>
-					<td><b>RMB {{ booking.amount }}</b></td>
-				</tr>
-				<tr>
-					<td>Bankin Amount : </td>
-					<td><b> MYR {{ booking.bankin_amount }}</b></td>
-				</tr>
-				<tr>
-					<td colspan="2">
-						<b>{{ bankDetail.company_name }}</b><br>
-						{{ bankDetail.bank_name }} : {{ bankDetail.acc_no }}
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</div>
-	<div class="row timer">
-		<div class="col">
-			<vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
-			<template slot-scope="props">Time Remaining：<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
-			</vue-countdown>
-		</div>
-	</div>
-	<!-- upload image -->
-	<div class="row upload">
-		<div class="col">
-			<el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" 
-				:on-preview="handlePictureCardPreview" 
-				:on-remove="handleRemove"
-				:on-error="uploadError"
-				accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
-				list-type="picture-card" align="center">
-				<i class="el-icon-plus" />
-			</el-upload>
-			<el-dialog :visible.sync="dialogVisible">
-				<img :src="dialogImageUrl" width="100%" alt="">
-			</el-dialog>
-		</div>
-	</div>
-	<!-- upload image end -->
-	<div class="row bankinAmount">
-		<div class="col">
-			Bankin Amount (RM) :<br>
-			<el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
-				<el-form-item prop="transfer_amount">
-					<el-input class="transferAmountInput" v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount"/>
-				</el-form-item>
-				<el-form-item>
-					<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>
-				</el-form-item>	
-			</el-form>
-		</div>
-	</div>
-	</el-main>
+    <div class="row">
+      <table class="table table-striped">
+        <tbody>
+          <tr>
+            <td>Amount : </td>
+            <td><b>RMB {{ booking.amount }}</b></td>
+          </tr>
+          <tr>
+            <td>Bankin Amount : </td>
+            <td><b> MYR {{ booking.bankin_amount }}</b></td>
+          </tr>
+          <tr>
+            <td colspan="2">
+              <b>{{ bankDetail.company_name }}</b><br>
+              {{ bankDetail.bank_name }} : {{ bankDetail.acc_no }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="row timer">
+      <div class="col">
+        <vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
+          <template slot-scope="props">Time Remaining：<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
+        </vue-countdown>
+      </div>
+    </div>
+    <!-- upload image -->
+    <div class="row upload">
+      <div class="col">
+        <el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'"
+                   :on-preview="handlePictureCardPreview"
+                   :on-remove="handleRemove"
+                   :on-error="uploadError"
+                   accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
+                   list-type="picture-card" align="center">
+          <i class="el-icon-plus" />
+        </el-upload>
+        <el-dialog :visible.sync="dialogVisible">
+          <img :src="dialogImageUrl" width="100%" alt="">
+        </el-dialog>
+      </div>
+    </div>
+    <!-- upload image end -->
+    <div class="row bankinAmount">
+      <div class="col">
+        Bankin Amount (RM) :<br>
+        <el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
+          <el-form-item prop="transfer_amount">
+            <el-input v-model="user_slip_form.transfer_amount" class="transferAmountInput" type="text" placeholder="Transfer Amount"/>
+          </el-form-item>
+          <el-form-item>
+            <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>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </el-main>
 </template>
 <style>
 	h1 {
@@ -85,7 +85,7 @@
 	.timer, .upload, .bankinAmount {
 		text-align: center;
 	}
-	
+
 	.transferAmountInput {
 		width: 20%;
 	}
@@ -113,193 +113,190 @@ 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,
-			term : '123',
-			user_bankslip_path: null,
-			reject_reason: null,
-			},
-			rules: {
-			transfer_amount: [{
-				required: true,
-				message: 'Please input amount',
-				trigger: 'change'
-			}]
-			},
-			active_bank_setting: {
-				x1_bank_id: null,
-				x2_bank_id: null,
-				beneficiary_id: null
-			},
-			bankDetail: {}
-		}
-	},
-	beforeCreate () {
-		const loading = this.$loading({
-		lock: true,
-		text: 'Please wait..',
-		spinner: 'el-icon-loading',
-		background: 'rgba(0, 0, 0, 0.7)'
-		})
+  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,
+        term: '123',
+        user_bankslip_path: null,
+        reject_reason: null
+      },
+      rules: {
+        transfer_amount: [{
+          required: true,
+          message: 'Please input amount',
+          trigger: 'change'
+        }]
+      },
+      active_bank_setting: {
+        x1_bank_id: null,
+        x2_bank_id: null,
+        beneficiary_id: null
+      },
+      bankDetail: {}
+    }
+  },
+  beforeCreate () {
+    const loading = this.$loading({
+      lock: true,
+      text: 'Please wait..',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
 
-		axios.get('/api/booking/' + this.$route.params.id)
-		.then((response) => {
-		this.booking.amount = response.data.amount;
-		this.booking.bankin_amount = response.data.bia;
-		this.booking.timeout = response.data.timeout * 1000;
-		this.booking.term = response.data.term;
+    axios.get('/api/booking/' + this.$route.params.id)
+      .then((response) => {
+        this.booking.amount = response.data.amount
+        this.booking.bankin_amount = response.data.bia
+        this.booking.timeout = response.data.timeout * 1000
+        this.booking.term = response.data.term
 
-		if (response.data.user_bankslip_path)
-		{
-			this.booking.user_bankslip_path = response.data.user_bankslip_path
-			this.booking.reject_reason = response.data.reject_reason
-		}
-		console.log(this.booking);
-		this.start = true;
+        if (response.data.user_bankslip_path) {
+          this.booking.user_bankslip_path = response.data.user_bankslip_path
+          this.booking.reject_reason = response.data.reject_reason
+        }
+        console.log(this.booking)
+        this.start = true
 
-		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) => {
-			this.$router.push({
-				name: 'notfound'
-			})
-			console.log(error)
-		})
-		axios.get('/api/active-bank')
-			.then((response) => {
-				this.active_bank_setting = response.data;
-				var url = '';
-				if(this.booking.term === 'x1_cash' || this.booking.term === 'x1_cheque' ||this.booking.term === 'x1_ba'){
-					url = '/api/malaysia-bank/' + this.active_bank_setting.x1_bank_id;
-				}
-				else if(this.booking.term === 'x2_cash' || this.booking.term === 'x2_cheque' ||this.booking.term === 'x2_ba'){
-					url = '/api/malaysia-bank/' + this.active_bank_setting.x2_bank_id;
-				}
+        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) => {
+        this.$router.push({
+          name: 'notfound'
+        })
+        console.log(error)
+      })
+    axios.get('/api/active-bank')
+      .then((response) => {
+        this.active_bank_setting = response.data
+        var url = ''
+        if (this.booking.term === 'x1_cash' || this.booking.term === 'x1_cheque' || this.booking.term === 'x1_ba') {
+          url = '/api/malaysia-bank/' + this.active_bank_setting.x1_bank_id
+        } else if (this.booking.term === 'x2_cash' || this.booking.term === 'x2_cheque' || this.booking.term === 'x2_ba') {
+          url = '/api/malaysia-bank/' + this.active_bank_setting.x2_bank_id
+        }
 
-				axios.get(url)
-					.then((response) => {
-						this.bankDetail = response.data;
-						loading.close()
-					})
-					.catch((error) => {
-						loading.close()
-						console.log(error);
-						this.$message({
-							showClose: true,
-							message: 'Fetch data fail',
-							type: 'error',
-							duration: 10000
-						});
-					});
-			})
-			.catch((error) => {
-				console.log(error);
-				this.$message({
-					showClose: true,
-					message: 'Fetch bank details fail',
-					type: 'error',
-					duration: 10000
-				});
-			});
-	},
-	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)
-		},
-		uploadError(file,fileList){
-			this.$message.warning(`Incorrect file format or file size too big.`)
-		},
-		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) => {
-				console.log(response);
+        axios.get(url)
+          .then((response) => {
+            this.bankDetail = response.data
+            loading.close()
+          })
+          .catch((error) => {
+            loading.close()
+            console.log(error)
+            this.$message({
+              showClose: true,
+              message: 'Fetch data fail',
+              type: 'error',
+              duration: 10000
+            })
+          })
+      })
+      .catch((error) => {
+        console.log(error)
+        this.$message({
+          showClose: true,
+          message: 'Fetch bank details fail',
+          type: 'error',
+          duration: 10000
+        })
+      })
+  },
+  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)
+    },
+    uploadError (file, fileList) {
+      this.$message.warning(`Incorrect file format or file size too big.`)
+    },
+    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) => {
+          console.log(response)
 
-				this.$message({
-				showClose: true,
-				message: 'Your bankinslip has been submitted, please wait admin to approve.',
-				type: 'success',
-				duration: 5000
-				})
+          this.$message({
+            showClose: true,
+            message: 'Your bankinslip has been submitted, please wait admin to approve.',
+            type: 'success',
+            duration: 5000
+          })
 
-				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;
-		}
-	}
+          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>
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 775d4ff6..4753397f 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -1,28 +1,28 @@
 <template>
   <el-main>
     <!-- Input-Amount -->
-      <el-row :gutter="20" type="flex" justify="center" align="middle">
-        <el-col :span="20">
-          <div class="grid-content bg-purple" align="center">
-            I need :
-            <el-select v-model="value" placeholder="RMB">
-              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
-            </el-select>
-          </div>
-        </el-col>
-      </el-row>
-      <br>
-      <el-row :gutter="20" type="flex" justify="center" align="middle">
-        <el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8">
-          <div class="grid-content bg-purple" align="left">
-            <el-input v-model="booking.amount" placeholder="Amount" />
-          </div>
-        </el-col>
-      </el-row>
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col :span="20">
+        <div class="grid-content bg-purple" align="center">
+          I need :
+          <el-select v-model="value" placeholder="RMB">
+            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </div>
+      </el-col>
+    </el-row>
+    <br>
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8">
+        <div class="grid-content bg-purple" align="left">
+          <el-input v-model="booking.amount" placeholder="Amount" />
+        </div>
+      </el-col>
+    </el-row>
     <!-- Input-Amount-end -->
 
     <div align="right">
-    <el-button type="primary" :loading="loading_btn" size="mini" @click="refreshRate()">Refresh Rate</el-button></div>
+    <el-button :loading="loading_btn" type="primary" size="mini" @click="refreshRate()">Refresh Rate</el-button></div>
 
     <hr>
     <!-- Rate-Display -->
@@ -140,9 +140,9 @@
     <!-- Rate-Display-end -->
 
     <!-- Form_popup -->
-      <el-dialog :visible.sync="dialogFormVisible" :fullscreen="true" title="Booking" center>
-        <el-form ref="bookingForm" :model="bookingForm" :rules="rules">
-          <div align="center"> 
+    <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="payment_for"> <!-- TODO : this should be payment for order number -->
             <el-select v-model="bookingForm.payment_for" placeholder="Payment For" style="width: 80%" required="true">
               <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
@@ -151,27 +151,27 @@
           <el-form-item prop="order_no">
             <el-input v-model="bookingForm.order_no" placeholder="Order No." style="width: 80%" required="true" />
           </el-form-item>
-            <el-form-item prop="account_name">
-              <el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Account" style="width: 80%" required="true" />
-            </el-form-item>
-            <el-form-item prop="bank_name">
-              <el-input v-model="bookingForm.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" />
-            </el-form-item>
-            <el-form-item prop="bank_branch">
-              <el-input v-model="bookingForm.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%" />
-            </el-form-item>
-            <el-form-item prop="account_num">
-              <el-input v-model="bookingForm.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"
-              />
-            </el-form-item>
-            <el-form-item>
-              <el-button @click="dialogFormVisible = false">Cancel</el-button>
+          <el-form-item prop="account_name">
+            <el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Account" style="width: 80%" required="true" />
+          </el-form-item>
+          <el-form-item prop="bank_name">
+            <el-input v-model="bookingForm.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" />
+          </el-form-item>
+          <el-form-item prop="bank_branch">
+            <el-input v-model="bookingForm.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%" />
+          </el-form-item>
+          <el-form-item prop="account_num">
+            <el-input v-model="bookingForm.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="dialogFormVisible = false">Cancel</el-button>
 
-              <el-button :loading="loading" type="primary" @click="getCalculationValue('bookingForm')">Book Now</el-button>
-            </el-form-item>
-          </div>
-        </el-form>
-      </el-dialog>
+            <el-button :loading="loading" type="primary" @click="getCalculationValue('bookingForm')">Book Now</el-button>
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-dialog>
     <!-- Form_popup-end -->
 
     <!-- Booking_confirmation_popup -->
@@ -203,8 +203,8 @@
             <td> {{ bookingConfirmTable.remark }}</td>
           </tr>
           <tr>
-            <td></td>
-            <td></td>
+            <td/>
+            <td/>
           </tr>
           <tr>
             <td>CNY/RMB :</td>
@@ -215,19 +215,19 @@
           <tr>
             <td>+ Service Charges :</td>
             <td>
-               CNY {{ bookingConfirmTable.service_charge }}
+              CNY {{ bookingConfirmTable.service_charge }}
             </td>
           </tr>
           <tr>
             <td>/ Rate :</td>
             <td>
-               {{ bookingConfirmTable.rate }}
+              {{ bookingConfirmTable.rate }}
             </td>
           </tr>
           <tr>
-            <td></td>
+            <td/>
             <td>
-               MYR {{ bookingConfirmTable.subtotal }}
+              MYR {{ bookingConfirmTable.subtotal }}
             </td>
           </tr>
           <tr>
@@ -239,7 +239,7 @@
           <tr>
             <td>+ Billing Charge :</td>
             <td>
-               MYR {{ bookingConfirmTable.billingChargeAmount }}
+              MYR {{ bookingConfirmTable.billingChargeAmount }}
             </td>
           </tr>
           <tr>
@@ -250,22 +250,22 @@
           </tr>
           <tr>
             <td>China Beneficiary Acc : <br>
-             Name : {{ bookingConfirmTable.acc_name }} <br>
+              Name : {{ bookingConfirmTable.acc_name }} <br>
               Account No. : {{ bookingConfirmTable.acc_no }}</td>
-            <td></td>
+            <td/>
           </tr>
           <tr>
             <td>Bank In Amount :</td>
             <td><b>RM {{ bookingConfirmTable.bankin_amount }}</b></td>
           </tr>
           <tr>
-            <td></td>
-            <td></td>
+            <td/>
+            <td/>
           </tr>
           <tr>
             <td align="center" colspan="2">
               <b>CIEF WORLDWIDE SDN. BHD.(1134596-M)</b>
-              <br/>
+              <br>
               <b>MBB 568603010762</b>
             </td>
           </tr>
@@ -282,8 +282,8 @@
     <br>
     <hr>
     <div align="right">
-<el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button></div>
-<!-- Booking Table -->
+    <el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button></div>
+    <!-- Booking Table -->
     <el-row :gutter="20">
       <div>
         <el-table :data="bookingTable">
@@ -325,11 +325,11 @@
       </div>
     </el-row><br><br>
     <div align="right">
-      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
+      <el-button :disabled="!pagination.prev_page_url" type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)">
         Previous
       </el-button>
-      <span>Page {{pagination.current_page}} of {{pagination.last_page}}</span>
-      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.next_page_url)" :disabled="!pagination.next_page_url">
+      <span>Page {{ pagination.current_page }} of {{ pagination.last_page }}</span>
+      <el-button :disabled="!pagination.next_page_url" type="primary" size="mini" @click="fetchPaginateBooking(pagination.next_page_url)">
         Next
       </el-button>
     </div>
@@ -364,9 +364,9 @@ export default {
         x1_cash: null,
         x2_ba: null,
         x2_cash: null,
-        x2_cheque: null,
+        x2_cheque: null
       },
-      loading : null,
+      loading: null,
       loading_btn: false,
       status: '',
       booking: {
@@ -380,16 +380,16 @@ export default {
         account_num: ''
       },
       rules: {
-          order_no: [{
-            required: true,
-            message: 'Please input order number',
-            trigger: 'change'
-          }],
-          payment_for: [{
-            required: true,
-            message: 'Please input payment for',
-            trigger: 'change'
-          }],
+        order_no: [{
+          required: true,
+          message: 'Please input order number',
+          trigger: 'change'
+        }],
+        payment_for: [{
+          required: true,
+          message: 'Please input payment for',
+          trigger: 'change'
+        }],
         amount: [{
           required: true,
           message: 'Please input amount',
@@ -463,25 +463,25 @@ export default {
     }
   },
   mounted () {
-    this.getBooking();
-    this.initBooking();
-    this.getRate();
+    this.getBooking()
+    this.initBooking()
+    this.getRate()
   },
   methods: {
-    getBooking(){
+    getBooking () {
       let $this = this
       axios.get(this.url).then(response => {
         this.bookingTable = response.data.data
         $this.makePagination(response.data)
       })
     },
-    getRate() {
+    getRate () {
       let $this = this
       axios.get('api/rate').then(response => {
         this.rate = response.data
       })
     },
-    refreshRate() {
+    refreshRate () {
       let $this = this
       this.loading_btn = true
       axios.get('api/rate').then(response => {
@@ -495,17 +495,17 @@ export default {
         })
       })
     },
-    initBooking() {
+    initBooking () {
       let $this = this
       axios.get(this.url).then(response => {
         this.bookingTable = response.data.data
       })
     },
-    RefreshBooking() {
+    RefreshBooking () {
       let $this = this
       this.loading_btn = true
       axios.get(this.url).then(response => {
-        this.loading_btn = false;
+        this.loading_btn = false
         this.bookingTable = response.data.data
         this.$message({
           showClose: true,
@@ -515,8 +515,8 @@ export default {
         })
       })
     },
-    makePagination(data){
-      let pagination ={
+    makePagination (data) {
+      let pagination = {
         current_page: data.current_page,
         last_page: data.last_page,
         next_page_url: data.next_page_url,
@@ -524,7 +524,7 @@ export default {
       }
       this.pagination = pagination
     },
-    fetchPaginateBooking(url) {
+    fetchPaginateBooking (url) {
       this.url = url
       this.getBooking()
     },
@@ -566,66 +566,65 @@ export default {
           axios.post('api/booking/calculation', newConfirmation)
             .then((response) => {
               this.loading = false
-              this.bookingConfirmTable = response.data;
+              this.bookingConfirmTable = response.data
               this.dialogFormVisible = false
               this.dialogFormVisible1 = true
             })
             .catch((error) => {
               this.$message({
-                  showClose: true,
-                  message: error.response.data.message,
-                  type: 'error',
-                  duration: 10000
-              });
+                showClose: true,
+                message: error.response.data.message,
+                type: 'error',
+                duration: 10000
+              })
               this.loading = false
               console.log(error)
             })
         } else {
           this.loading = false
           this.$message({
-                showClose: true,
-                message: 'Please fill the booking form in full.',
-                type: 'error',
-                duration: 10000
-              })
+            showClose: true,
+            message: 'Please fill the booking form in full.',
+            type: 'error',
+            duration: 10000
+          })
         }
       })
     },
     createBooking: function () {
       this.loading = true,
       this.dialogFormVisible1 = true
-          let newBooking = {
-            order_no: this.bookingForm.order_no,
-            payment_for: this.bookingForm.payment_for,
-            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
-          }
-          axios.post('api/booking', newBooking)
-            .then((response) => {
-              console.log(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)
-              this.loading = false
-              this.$message({
-                showClose: true,
-                message: 'Internal server error. Please contact support',
-                type: 'error',
-                duration: 10000
-              })
-             
-            })
+      let newBooking = {
+        order_no: this.bookingForm.order_no,
+        payment_for: this.bookingForm.payment_for,
+        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
+      }
+      axios.post('api/booking', newBooking)
+        .then((response) => {
+          console.log(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)
+          this.loading = false
+          this.$message({
+            showClose: true,
+            message: 'Internal server error. Please contact support',
+            type: 'error',
+            duration: 10000
+          })
+        })
     },
     BookingStatus (status, booking_id) {
       console.log(status)
diff --git a/resources/assets/js/pages/settings/admin-bank-setting.vue b/resources/assets/js/pages/settings/admin-bank-setting.vue
index 7666ba77..8c262cc9 100644
--- a/resources/assets/js/pages/settings/admin-bank-setting.vue
+++ b/resources/assets/js/pages/settings/admin-bank-setting.vue
@@ -1,160 +1,156 @@
 <template>
-<div>
+  <div>
     <span align="center"><h4>Bank Setting</h4></span><br>
     <el-form :inline="true">
-        <el-form-item>
-            Active CIEF bank account for today : 
-            X1 : 
-            <el-select v-model="active_bank_setting.x1_bank_id" size="mini">
-                <el-option
-                  v-for="item in options_CIEF"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-            </el-select>
-        </el-form-item>
-        <el-form-item>
-            X2 : 
-            <el-select v-model="active_bank_setting.x2_bank_id" size="mini">
-                <el-option
-                  v-for="item in options_CIEF"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-            </el-select>
-        </el-form-item>
-        <el-form-item>
-            Active CIEF China Beneficiary Account for Today : 
-            <el-select v-model="active_bank_setting.beneficiary_id" size="mini">
-                <el-option
-                  v-for="item in options_china_bank"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value">
-                </el-option>
-            </el-select>
-        </el-form-item>
-        <el-form-item>
-            <el-button type="primary" size="mini" :loading="loading_btn" @click="EditActiveBankSetting">Update</el-button>
-        </el-form-item>
+      <el-form-item>
+        Active CIEF bank account for today :
+        X1 :
+        <el-select v-model="active_bank_setting.x1_bank_id" size="mini">
+          <el-option
+            v-for="item in options_CIEF"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        X2 :
+        <el-select v-model="active_bank_setting.x2_bank_id" size="mini">
+          <el-option
+            v-for="item in options_CIEF"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        Active CIEF China Beneficiary Account for Today :
+        <el-select v-model="active_bank_setting.beneficiary_id" size="mini">
+          <el-option
+            v-for="item in options_china_bank"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button :loading="loading_btn" type="primary" size="mini" @click="EditActiveBankSetting">Update</el-button>
+      </el-form-item>
     </el-form>
-</div>
+  </div>
 </template>
 
 <script type="text/javascript">
 import axios from 'axios'
 
 export default {
-    // TODO : update credit limit and timeout 
-    data() {
-        return {
-            options_CIEF: [],
-            options_china_bank: [],
-            active_bank_setting : {
-                x1_bank_id: null,
-                x2_bank_id: null,
-                beneficiary_id: null
-            },
-            loading_btn: false
-        };
-    },
-    beforeMount(){
-        this.UpdateMalaysiaBankOption();
-        this.UpdateChinaBankOption();
-        this.UpdateActiveBankSetting();
-    },
-    methods :{
-        UpdateMalaysiaBankOption : function(){
-            var malaysiaBankData;
-            axios.get('/api/setting-malaysia-bank')
-                .then((response) => {
-                    malaysiaBankData = response.data;
-                    this.options_CIEF = malaysiaBankData.map(function(item){
-                        return {
-                            value : item.id,
-                            label : item.acc_no,
-                        };
-                    });
-                })
-                .catch((error) => {
-                    console.log(error);
-                    this.$message({
-                        showClose: true,
-                        message: 'Fetch data fail',
-                        type: 'error',
-                        duration: 10000
-                    });
-                });
-        },
-        UpdateChinaBankOption : function(){
-            var chinaBankData;
-            axios.get('/api/setting-beneficiary')
-                .then((response) => {
-                    chinaBankData = response.data;
-                    this.options_china_bank = chinaBankData.map(function(item){
-                        return {
-                            value : item.id,
-                            label : item.acc_no,
-                        };
-                    });
-                    this.options_china_bank.unshift({
-                            value : 0,
-                            label : "Use Customer's Beneficiary"
-                    });
-                })
-                .catch((error) => {
-                    console.log(error);
-                    this.$message({
-                        showClose: true,
-                        message: 'Fetch data fail',
-                        type: 'error',
-                        duration: 10000
-                    });
-                });
-        },
-        UpdateActiveBankSetting : function(){
-            axios.get('/api/setting-active-bank')
-                .then((response) => {
-                    this.active_bank_setting = response.data;
-                })
-                .catch((error) => {
-                    console.log(error);
-                    this.$message({
-                        showClose: true,
-                        message: 'Fetch data fail',
-                        type: 'error',
-                        duration: 10000
-                    });
-                });
-        },
-        EditActiveBankSetting : function(){
-            this.loading_btn = true;
-            axios.put('/api/setting-active-bank', this.active_bank_setting)
-            .then((response) => {
-                this.loading_btn = false;
-                this.$message({
-                    showClose: true,
-                    message: 'Success',
-                    type: 'success',
-                    duration: 5000
-                });
-            })
-            .catch((error) => {
-                this.loading_btn = false;
-                console.log(error);
-                this.$message({
-                    showClose: true,
-                    message: 'Update failed, please contact support',
-                    type: 'error',
-                    duration: 10000
-                });
-            })
-        },
+  // TODO : update credit limit and timeout
+  data () {
+    return {
+      options_CIEF: [],
+      options_china_bank: [],
+      active_bank_setting: {
+        x1_bank_id: null,
+        x2_bank_id: null,
+        beneficiary_id: null
+      },
+      loading_btn: false
     }
+  },
+  beforeMount () {
+    this.UpdateMalaysiaBankOption()
+    this.UpdateChinaBankOption()
+    this.UpdateActiveBankSetting()
+  },
+  methods: {
+    UpdateMalaysiaBankOption: function () {
+      var malaysiaBankData
+      axios.get('/api/setting-malaysia-bank')
+        .then((response) => {
+          malaysiaBankData = response.data
+          this.options_CIEF = malaysiaBankData.map(function (item) {
+            return {
+              value: item.id,
+              label: item.acc_no
+            }
+          })
+        })
+        .catch((error) => {
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Fetch data fail',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    },
+    UpdateChinaBankOption: function () {
+      var chinaBankData
+      axios.get('/api/setting-beneficiary')
+        .then((response) => {
+          chinaBankData = response.data
+          this.options_china_bank = chinaBankData.map(function (item) {
+            return {
+              value: item.id,
+              label: item.acc_no
+            }
+          })
+          this.options_china_bank.unshift({
+            value: 0,
+            label: "Use Customer's Beneficiary"
+          })
+        })
+        .catch((error) => {
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Fetch data fail',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    },
+    UpdateActiveBankSetting: function () {
+      axios.get('/api/setting-active-bank')
+        .then((response) => {
+          this.active_bank_setting = response.data
+        })
+        .catch((error) => {
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Fetch data fail',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    },
+    EditActiveBankSetting: function () {
+      this.loading_btn = true
+      axios.put('/api/setting-active-bank', this.active_bank_setting)
+        .then((response) => {
+          this.loading_btn = false
+          this.$message({
+            showClose: true,
+            message: 'Success',
+            type: 'success',
+            duration: 5000
+          })
+        })
+        .catch((error) => {
+          this.loading_btn = false
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Update failed, please contact support',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    }
+  }
 
 }
 
-
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/assets/js/pages/settings/admin-billing-charge-setting.vue b/resources/assets/js/pages/settings/admin-billing-charge-setting.vue
index 1a3c2ecd..3a63a878 100644
--- a/resources/assets/js/pages/settings/admin-billing-charge-setting.vue
+++ b/resources/assets/js/pages/settings/admin-billing-charge-setting.vue
@@ -1,65 +1,65 @@
 <template>
-    <div>
-        <span align="center">
-            <h4>Billing Charge Setting</h4>
-        </span>
-        <br>
-        <el-form>
-            <el-form-item align="center">
-                Billing Charge Rate : 
-                <el-input size="mini" v-model="billing_charge_setting.billing_charge_rate" style=width:20%></el-input> %
-            </el-form-item>
-            <el-form-item align="center">
-                <el-button type="primary" align="center" :loading="loading_btn" size="primary" @click="updateBillingChargeSetting">Update</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div>
+    <span align="center">
+      <h4>Billing Charge Setting</h4>
+    </span>
+    <br>
+    <el-form>
+      <el-form-item align="center">
+        Billing Charge Rate :
+        <el-input v-model="billing_charge_setting.billing_charge_rate" size="mini" style="width:20%"/> %
+      </el-form-item>
+      <el-form-item align="center">
+        <el-button :loading="loading_btn" type="primary" align="center" size="primary" @click="updateBillingChargeSetting">Update</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
-    import axios from 'axios'
-    export default {
-        // TODO : update credit limit and timeout 
-        data() {
-            return {
-                loading_btn: false,
-                billing_charge_setting: {
-                    billing_charge_rate : null
-                },
-            };
-        },
-        beforeMount() {
-            this.getBillingChargeSetting();
-        },
-        methods: {
-            getBillingChargeSetting() {
-                axios.get('/api/setting-billing-charge').then(response => {
-                    this.billing_charge_setting = response.data
-                })
-            },
-            updateBillingChargeSetting (){
-                this.loading_btn = true
-				axios.put('/api/setting-billing-charge', this.billing_charge_setting)
-				.then((response) => {
-                    this.loading_btn = false
-						this.$message({
-						showClose: true,
-						message: 'Success',
-						type: 'success',
-						duration: 5000
-					});
-				})
-				.catch((error) => {
-                    this.loading_btn = false
-					console.log(error);
-					this.$message({
-						showClose: true,
-						message: 'Update failed, please contact support',
-						type: 'error',
-						duration: 10000
-					});
-				})
-			},
-        }
-    };
-</script>
\ No newline at end of file
+import axios from 'axios'
+export default {
+  // TODO : update credit limit and timeout
+  data () {
+    return {
+      loading_btn: false,
+      billing_charge_setting: {
+        billing_charge_rate: null
+      }
+    }
+  },
+  beforeMount () {
+    this.getBillingChargeSetting()
+  },
+  methods: {
+    getBillingChargeSetting () {
+      axios.get('/api/setting-billing-charge').then(response => {
+        this.billing_charge_setting = response.data
+      })
+    },
+    updateBillingChargeSetting () {
+      this.loading_btn = true
+      axios.put('/api/setting-billing-charge', this.billing_charge_setting)
+        .then((response) => {
+          this.loading_btn = false
+          this.$message({
+            showClose: true,
+            message: 'Success',
+            type: 'success',
+            duration: 5000
+          })
+        })
+        .catch((error) => {
+          this.loading_btn = false
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Update failed, please contact support',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    }
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/settings/admin-china-bank.vue b/resources/assets/js/pages/settings/admin-china-bank.vue
index 9509fff1..df7f69dd 100644
--- a/resources/assets/js/pages/settings/admin-china-bank.vue
+++ b/resources/assets/js/pages/settings/admin-china-bank.vue
@@ -1,281 +1,278 @@
 <template>
-<div>
-	<span align="center"><h4>CIEF China Bank Details</h4></span><br>
-		<el-table :data="tableData" border style="width: 100%">
-			<el-table-column prop="company_name" label="Company Name" width="90px"></el-table-column>
-			<el-table-column prop="bank_name" label="Bank Name"></el-table-column>
-			<el-table-column prop="acc_no" label="Bank Account No" width="115px"></el-table-column>
-			<el-table-column prop="bank_address" label="Bank Address" width="111px"></el-table-column>
-			<el-table-column prop="swift" label="SWIFT Code"></el-table-column>
-			<el-table-column prop="cnap" label="CNAP" width="80px"></el-table-column>
-			<el-table-column prop="bank_branch" label="Bank Branch"></el-table-column>
-			<el-table-column label="Action">
-				<template slot-scope="scope">
-					<el-button type="text" size="small" @click="PopOutEditBeneficiaries(scope.$index)">Edit</el-button>
-					<el-button type="text" size="small" @click="DeleteBeneficiaries(tableData[scope.$index].id)">Delete</el-button>
-				</template>
-			</el-table-column>
-		</el-table><br>
-		<div align="right">
-			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddBeneficiaries">Add New Data</el-button>
-		</div>
-		<!-- popup add new data -->
-			<el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible" width="40%">
-				<el-form label-width="150px">
-					<el-form-item label="Company Name">
-						<el-input v-model="beneficiariesForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Bank Name">
-						<el-input v-model="beneficiariesForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Bank Account No">
-						<el-input v-model="beneficiariesForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
-					
-					</el-form-item>
-					<el-form-item label="Bank Address">
-						<el-input v-model="beneficiariesForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
-					
-					</el-form-item>
-					<el-form-item label="SWIFT Code">
-						<el-input v-model="beneficiariesForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
-					
-					</el-form-item>
-					<el-form-item label="CNAP">
-						<el-input v-model="beneficiariesForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Bank Branch">
-						<el-input v-model="beneficiariesForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
-						
-					</el-form-item>
-				</el-form>
-				<div align="center">
-					<el-button @click="AddDatadialogVisible = false">Cancel</el-button>
-					<el-button type="primary" :loading="loading_btn" @click="CreateBeneficiaries" :disabled="beneficiariesForm.company_name=='' || beneficiariesForm.bank_name=='' || beneficiariesForm.acc_no=='' || beneficiariesForm.bank_address=='' || beneficiariesForm.swift =='' || beneficiariesForm.cnap=='' || beneficiariesForm.bank_branch=='' ? true : false">OK</el-button>
-				</div>
-				<span slot="footer" class="dialog-footer">
-					* Please key in the data in Chinese
-				</span>
-			</el-dialog>
-			<el-dialog align="center" :visible.sync="DoneAddDatadialogVisible" width="30%">
-				<span>Data Added Successfully</span><br><br>
-				<div align="center">
-						<el-button type="primary" :loading="loading_btn" @click="DoneAddDatadialogVisible = false">OK</el-button>
-				</div>
-			</el-dialog>
-		<!-- popup add new data end -->
-		<!-- popup edit data -->
-			<el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible" width="40%">
-				<el-form label-width="150px">
-					<el-form-item label="Company Name">
-						<el-input v-model="beneficiariesForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>	
-					</el-form-item>
-					<el-form-item label="Bank Name">
-						<el-input v-model="beneficiariesForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
-					</el-form-item>
-					<el-form-item label="Bank Account No">
-						<el-input v-model="beneficiariesForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Bank Address">
-						<el-input v-model="beneficiariesForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="SWIFT Code">
-						<el-input v-model="beneficiariesForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="CNAP">
-						<el-input v-model="beneficiariesForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Bank Branch">
-						<el-input v-model="beneficiariesForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
-						
-					</el-form-item>
-				</el-form>
-				<div align="center">
-					<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
-					<el-button type="primary" :loading="loading_btn" @click="EditBeneficiaries" :disabled="beneficiariesForm.company_name=='' || beneficiariesForm.bank_name=='' || beneficiariesForm.acc_no=='' || beneficiariesForm.bank_address=='' || beneficiariesForm.swift =='' || beneficiariesForm.cnap=='' || beneficiariesForm.bank_branch=='' ? true : false">Submit</el-button>
-				</div>
-				<span slot="footer" class="dialog-footer">
-					* Please key in the data in Chinese
-				</span>
-			</el-dialog>
-			<el-dialog align="center" :visible.sync="DoneUpdateDatadialogVisible" width="30%">
-				<span>Data Updated Successfully</span><br><br>
-				<div align="center">
-					<el-button type="primary" :loading="loading_btn" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
-				</div>
-			</el-dialog>
-		<!-- popup edit data end -->
-		<!-- popup delete -->
-			<el-dialog align="center" :visible.sync="DeleteAdddialogVisible" width="30%">
-				<span>Data Deleted</span><br><br>
-				<div align="center">
-					<el-button type="primary" :loading="loading_btn" @click="DeleteAdddialogVisible = false">OK</el-button>
-				</div>
-			</el-dialog>
-		<!-- popup delete end -->
-</div>
+  <div>
+    <span align="center"><h4>CIEF China Bank Details</h4></span><br>
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column prop="company_name" label="Company Name" width="90px"/>
+      <el-table-column prop="bank_name" label="Bank Name"/>
+      <el-table-column prop="acc_no" label="Bank Account No" width="115px"/>
+      <el-table-column prop="bank_address" label="Bank Address" width="111px"/>
+      <el-table-column prop="swift" label="SWIFT Code"/>
+      <el-table-column prop="cnap" label="CNAP" width="80px"/>
+      <el-table-column prop="bank_branch" label="Bank Branch"/>
+      <el-table-column label="Action">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="PopOutEditBeneficiaries(scope.$index)">Edit</el-button>
+          <el-button type="text" size="small" @click="DeleteBeneficiaries(tableData[scope.$index].id)">Delete</el-button>
+        </template>
+      </el-table-column>
+    </el-table><br>
+    <div align="right">
+      <el-button type="primary" icon="el-icon-plus" @click="PopOutAddBeneficiaries">Add New Data</el-button>
+    </div>
+    <!-- popup add new data -->
+    <el-dialog :visible.sync="AddDatadialogVisible" title="Add New Data" align="center" width="40%">
+      <el-form label-width="150px">
+        <el-form-item label="Company Name">
+          <el-input v-validate="'required|max:191'" v-model="beneficiariesForm.company_name" name="company_name"/>
+
+        </el-form-item>
+        <el-form-item label="Bank Name">
+          <el-input v-validate="'required|max:191'" v-model="beneficiariesForm.bank_name" name="bank_name"/>
+
+        </el-form-item>
+        <el-form-item label="Bank Account No">
+          <el-input v-validate="'required|max:191'" v-model="beneficiariesForm.acc_no" name="acc_no"/>
+
+        </el-form-item>
+        <el-form-item label="Bank Address">
+          <el-input v-validate="'required|max:191'" v-model="beneficiariesForm.bank_address" name="bank_address"/>
+
+        </el-form-item>
+        <el-form-item label="SWIFT Code">
+          <el-input v-validate="'required|max:191'" v-model="beneficiariesForm.swift" name="swift"/>
+
+        </el-form-item>
+        <el-form-item label="CNAP">
+          <el-input v-validate="'required|max:191'" v-model="beneficiariesForm.cnap" name="cnap" />
+
+        </el-form-item>
+        <el-form-item label="Bank Branch">
+          <el-input v-validate="'required|max:191'" v-model="beneficiariesForm.bank_branch" name="bank_branch"/>
+
+        </el-form-item>
+      </el-form>
+      <div align="center">
+        <el-button @click="AddDatadialogVisible = false">Cancel</el-button>
+        <el-button :loading="loading_btn" :disabled="beneficiariesForm.company_name=='' || beneficiariesForm.bank_name=='' || beneficiariesForm.acc_no=='' || beneficiariesForm.bank_address=='' || beneficiariesForm.swift =='' || beneficiariesForm.cnap=='' || beneficiariesForm.bank_branch=='' ? true : false" type="primary" @click="CreateBeneficiaries">OK</el-button>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        * Please key in the data in Chinese
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="DoneAddDatadialogVisible" align="center" width="30%">
+      <span>Data Added Successfully</span><br><br>
+      <div align="center">
+        <el-button :loading="loading_btn" type="primary" @click="DoneAddDatadialogVisible = false">OK</el-button>
+      </div>
+    </el-dialog>
+    <!-- popup add new data end -->
+    <!-- popup edit data -->
+    <el-dialog :visible.sync="EditDatadialogVisible" title="Edit Data" align="center" width="40%">
+      <el-form label-width="150px">
+        <el-form-item label="Company Name">
+          <el-input v-validate="'required|max:191'" v-model="beneficiariesForm.company_name" name="company_name"/>
+        </el-form-item>
+        <el-form-item label="Bank Name">
+          <el-input v-validate="'required|max:191'" v-model="beneficiariesForm.bank_name" name="bank_name"/>
+        </el-form-item>
+        <el-form-item label="Bank Account No">
+          <el-input v-validate="'required|max:191'" v-model="beneficiariesForm.acc_no" name="acc_no"/>
+
+        </el-form-item>
+        <el-form-item label="Bank Address">
+          <el-input v-validate="'required|max:191'" v-model="beneficiariesForm.bank_address" name="bank_address"/>
+
+        </el-form-item>
+        <el-form-item label="SWIFT Code">
+          <el-input v-validate="'required|max:191'" v-model="beneficiariesForm.swift" name="swift"/>
+
+        </el-form-item>
+        <el-form-item label="CNAP">
+          <el-input v-validate="'required|max:191'" v-model="beneficiariesForm.cnap" name="cnap" />
+
+        </el-form-item>
+        <el-form-item label="Bank Branch">
+          <el-input v-validate="'required|max:191'" v-model="beneficiariesForm.bank_branch" name="bank_branch"/>
+
+        </el-form-item>
+      </el-form>
+      <div align="center">
+        <el-button @click="EditDatadialogVisible = false">Cancel</el-button>
+        <el-button :loading="loading_btn" :disabled="beneficiariesForm.company_name=='' || beneficiariesForm.bank_name=='' || beneficiariesForm.acc_no=='' || beneficiariesForm.bank_address=='' || beneficiariesForm.swift =='' || beneficiariesForm.cnap=='' || beneficiariesForm.bank_branch=='' ? true : false" type="primary" @click="EditBeneficiaries">Submit</el-button>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        * Please key in the data in Chinese
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="DoneUpdateDatadialogVisible" align="center" width="30%">
+      <span>Data Updated Successfully</span><br><br>
+      <div align="center">
+        <el-button :loading="loading_btn" type="primary" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
+      </div>
+    </el-dialog>
+    <!-- popup edit data end -->
+    <!-- popup delete -->
+    <el-dialog :visible.sync="DeleteAdddialogVisible" align="center" width="30%">
+      <span>Data Deleted</span><br><br>
+      <div align="center">
+        <el-button :loading="loading_btn" type="primary" @click="DeleteAdddialogVisible = false">OK</el-button>
+      </div>
+    </el-dialog>
+    <!-- popup delete end -->
+  </div>
 </template>
 
 <script>
-	import axios from 'axios'
+import axios from 'axios'
 
-	export default {
-		data() {
-			return {
-				loading_btn: false,
-				tableData: [],
-				beneficiariesForm : {
-					company_name : '',
-					bank_name : '',
-					acc_no : '',
-					bank_address : '',
-					swift : '',
-					cnap : '',
-					bank_branch : '',
-				},
-				EditDatadialogVisible: false,
-				DeleteAdddialogVisible: false,
-				AddDatadialogVisible: false,
-				DoneAddDatadialogVisible: false,
-				DoneUpdateDatadialogVisible: false,
-				currentEdit : -1,
-			}
-		},
-		beforeMount(){
-			this.UpdateTableData();
-		},
-		methods: {
-			CreateBeneficiaries : function(){
-				this.loading_btn = true
-				this.AddDatadialogVisible = false;
-				axios.post('/api/setting-beneficiary', this.beneficiariesForm)
-					.then((response) => {
-						this.loading_btn = false
-						this.DoneAddDatadialogVisible = true;
-						this.ClearBeneficiariesForm();
-						this.UpdateTableData();
-					})
-					.catch((error) => {
-						this.loading_btn = false
-						console.log(error);
-						this.$message({
-							showClose: true,
-							message: 'Create Fail',
-							type: 'error',
-							duration: 10000
-						});
-						this.ClearBeneficiariesForm();
-					});
-			},
-			UpdateTableData : function(){
-				this.loading_btn = true
-				axios.get('/api/setting-beneficiary', this.beneficiariesForm)
-					.then((response) => {
-						this.loading_btn = false
-						this.tableData = response.data;
-						
-					})
-				
-				
-					.catch((error) => {
-						this.loading_btn = false
-						console.log(error);
-						this.$message({
-							showClose: true,
-							message: 'Fetch data fail',
-							type: 'error',
-							duration: 10000
-						});
-					})
-			},
-			DeleteBeneficiaries : function(beneficiaries_id){
-				this.loading_btn = true
-				this.DeleteAdddialogVisible = true;
-				axios.delete('/api/setting-beneficiary/' + beneficiaries_id)
-					.then((response) => {
-						this.loading_btn = false
-						this.UpdateTableData();
-						this.$message({
-						showClose: true,
-						message: 'Data Deleted Successfully',
-						type: 'success',
-						duration: 5000
-					});
-					})
-					.catch((error) => {
-						this.loading_btn = false
-						console.log(error);
-						this.$message({
-							showClose: true,
-							message: 'Delete data fail',
-							type: 'error',
-							duration: 10000
-						});
-					});
-			},
-			EditBeneficiaries : function(){
-				this.loading_btn = true
-				this.EditDatadialogVisible = false; 
-				this.DoneUpdateDatadialogVisible = true;
+export default {
+  data () {
+    return {
+      loading_btn: false,
+      tableData: [],
+      beneficiariesForm: {
+        company_name: '',
+        bank_name: '',
+        acc_no: '',
+        bank_address: '',
+        swift: '',
+        cnap: '',
+        bank_branch: ''
+      },
+      EditDatadialogVisible: false,
+      DeleteAdddialogVisible: false,
+      AddDatadialogVisible: false,
+      DoneAddDatadialogVisible: false,
+      DoneUpdateDatadialogVisible: false,
+      currentEdit: -1
+    }
+  },
+  beforeMount () {
+    this.UpdateTableData()
+  },
+  methods: {
+    CreateBeneficiaries: function () {
+      this.loading_btn = true
+      this.AddDatadialogVisible = false
+      axios.post('/api/setting-beneficiary', this.beneficiariesForm)
+        .then((response) => {
+          this.loading_btn = false
+          this.DoneAddDatadialogVisible = true
+          this.ClearBeneficiariesForm()
+          this.UpdateTableData()
+        })
+        .catch((error) => {
+          this.loading_btn = false
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Create Fail',
+            type: 'error',
+            duration: 10000
+          })
+          this.ClearBeneficiariesForm()
+        })
+    },
+    UpdateTableData: function () {
+      this.loading_btn = true
+      axios.get('/api/setting-beneficiary', this.beneficiariesForm)
+        .then((response) => {
+          this.loading_btn = false
+          this.tableData = response.data
+        })
 
-				axios.put('/api/setting-beneficiary/' + this.currentEdit, this.beneficiariesForm)
-					.then((response) => {
-						this.loading_btn = false
-						this.UpdateTableData();
-						this.$message({
-						showClose: true,
-						message: 'Data Updated Succesfully',
-						type: 'success',
-						duration: 5000
-					});
-				
-					})
-					.catch((error) => {
-						this.loading_btn = false
-						console.log(error);
-						this.$message({
-							showClose: true,
-							message: 'Update Fail',
-							type: 'error',
-							duration: 10000
-						});
-					});
-			},
-			PopOutAddBeneficiaries : function(){
-				this.AddDatadialogVisible = true;
-				this.ClearBeneficiariesForm();
-			},
-			PopOutEditBeneficiaries : function(tableDataRow){
-				this.EditDatadialogVisible = true;
-				this.FillupBeneficiariesForm(tableDataRow);
-				this.currentEdit = this.tableData[tableDataRow].id;
-			},
-			ClearBeneficiariesForm : function(){
-				this.beneficiariesForm.company_name = '';
-				this.beneficiariesForm.bank_name = '';
-				this.beneficiariesForm.acc_no = '';
-				this.beneficiariesForm.bank_address = '';
-				this.beneficiariesForm.swift = '';
-				this.beneficiariesForm.cnap = '';
-				this.beneficiariesForm.bank_branch = '';
-			},
-			FillupBeneficiariesForm : function(tableDataRow){
-				this.beneficiariesForm.company_name = this.tableData[tableDataRow].company_name;
-				this.beneficiariesForm.bank_name = this.tableData[tableDataRow].bank_name;
-				this.beneficiariesForm.acc_no = this.tableData[tableDataRow].acc_no;
-				this.beneficiariesForm.bank_address = this.tableData[tableDataRow].bank_address;
-				this.beneficiariesForm.swift = this.tableData[tableDataRow].swift;
-				this.beneficiariesForm.cnap = this.tableData[tableDataRow].cnap;
-				this.beneficiariesForm.bank_branch = this.tableData[tableDataRow].bank_branch;
-			}
-		}
-	}
+        .catch((error) => {
+          this.loading_btn = false
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Fetch data fail',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    },
+    DeleteBeneficiaries: function (beneficiaries_id) {
+      this.loading_btn = true
+      this.DeleteAdddialogVisible = true
+      axios.delete('/api/setting-beneficiary/' + beneficiaries_id)
+        .then((response) => {
+          this.loading_btn = false
+          this.UpdateTableData()
+          this.$message({
+            showClose: true,
+            message: 'Data Deleted Successfully',
+            type: 'success',
+            duration: 5000
+          })
+        })
+        .catch((error) => {
+          this.loading_btn = false
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Delete data fail',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    },
+    EditBeneficiaries: function () {
+      this.loading_btn = true
+      this.EditDatadialogVisible = false
+      this.DoneUpdateDatadialogVisible = true
+
+      axios.put('/api/setting-beneficiary/' + this.currentEdit, this.beneficiariesForm)
+        .then((response) => {
+          this.loading_btn = false
+          this.UpdateTableData()
+          this.$message({
+            showClose: true,
+            message: 'Data Updated Succesfully',
+            type: 'success',
+            duration: 5000
+          })
+        })
+        .catch((error) => {
+          this.loading_btn = false
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Update Fail',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    },
+    PopOutAddBeneficiaries: function () {
+      this.AddDatadialogVisible = true
+      this.ClearBeneficiariesForm()
+    },
+    PopOutEditBeneficiaries: function (tableDataRow) {
+      this.EditDatadialogVisible = true
+      this.FillupBeneficiariesForm(tableDataRow)
+      this.currentEdit = this.tableData[tableDataRow].id
+    },
+    ClearBeneficiariesForm: function () {
+      this.beneficiariesForm.company_name = ''
+      this.beneficiariesForm.bank_name = ''
+      this.beneficiariesForm.acc_no = ''
+      this.beneficiariesForm.bank_address = ''
+      this.beneficiariesForm.swift = ''
+      this.beneficiariesForm.cnap = ''
+      this.beneficiariesForm.bank_branch = ''
+    },
+    FillupBeneficiariesForm: function (tableDataRow) {
+      this.beneficiariesForm.company_name = this.tableData[tableDataRow].company_name
+      this.beneficiariesForm.bank_name = this.tableData[tableDataRow].bank_name
+      this.beneficiariesForm.acc_no = this.tableData[tableDataRow].acc_no
+      this.beneficiariesForm.bank_address = this.tableData[tableDataRow].bank_address
+      this.beneficiariesForm.swift = this.tableData[tableDataRow].swift
+      this.beneficiariesForm.cnap = this.tableData[tableDataRow].cnap
+      this.beneficiariesForm.bank_branch = this.tableData[tableDataRow].bank_branch
+    }
+  }
+}
 </script>
 <style type="text/css">
 	.error-message{
@@ -283,4 +280,3 @@
 		left: 0;
 	}
 </style>
-
diff --git a/resources/assets/js/pages/settings/admin-credit-setting.vue b/resources/assets/js/pages/settings/admin-credit-setting.vue
index f776a0c8..fa9b7b2b 100644
--- a/resources/assets/js/pages/settings/admin-credit-setting.vue
+++ b/resources/assets/js/pages/settings/admin-credit-setting.vue
@@ -1,83 +1,82 @@
 <template>
-    <div>
-        <span align="center">
-            <h4>User Credit Limit Setting</h4>
-        </span>
+  <div>
+    <span align="center">
+      <h4>User Credit Limit Setting</h4>
+    </span>
+    <br>
+    <el-form>
+      <el-form-item align="center">
+        Time Limit for Customer to Upload Bank Slip :
         <br>
-        <el-form>
-            <el-form-item align="center">
-                Time Limit for Customer to Upload Bank Slip :
-                <br>
-                <el-input size="mini" v-model="credit_setting.time_limit" style=width:20%></el-input> Seconds
-            </el-form-item>
-            <el-form-item align="center">
-                Credit Limit for RMB :
-                <el-input placeholder="Amount" v-model="credit_setting.rmb_credit_limit" size="mini" style=width:10%></el-input>
-            </el-form-item>
-            <el-form-item align="center">
-                <el-button type="primary" align="center" :loading="loading_btn" size="primary" @click="updateCreditSetting">Update</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+        <el-input v-model="credit_setting.time_limit" size="mini" style="width:20%"/> Seconds
+      </el-form-item>
+      <el-form-item align="center">
+        Credit Limit for RMB :
+        <el-input v-model="credit_setting.rmb_credit_limit" placeholder="Amount" size="mini" style="width:10%"/>
+      </el-form-item>
+      <el-form-item align="center">
+        <el-button :loading="loading_btn" type="primary" align="center" size="primary" @click="updateCreditSetting">Update</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
-    import axios from 'axios'
-    export default {
-        // TODO : update credit limit and timeout 
-        data() {
-            return {
-                loading_btn: false,
-                credit_setting: {
-                    rmb_credit_limit: null,
-                    time_limit: null
-                },
-                TimeLimitDialogVisible: false,
-                CreditLimitDialogVisible: false
-            };
-        },
-        mounted() {
-            this.getCreditSetting();
-        },
-        methods: {
-            ValidateAll : function(){
-                var working;
-                this.$validator.validateAll().then((result) => {
-                    working = result;
-                }).catch(() => {
-                    });
-            },
-            getCreditSetting() {
-                axios.get('/api/setting-credit').then(response => {
-                    this.credit_setting = response.data
-                })
-            },
-            updateCreditSetting (){
-                if(this.ValidateAll())
-                    return;
-                
-                this.loading_btn = true
-				axios.put('/api/setting-credit', this.credit_setting)
-				.then((response) => {
-                    this.loading_btn = false
-						this.$message({
-						showClose: true,
-						message: 'Time Limit and Credit Limit Updated Successfully',
-						type: 'success',
-						duration: 5000
-					});
-				})
-				.catch((error) => {
-                    this.loading_btn = false
-					console.log(error);
-					this.$message({
-						showClose: true,
-						message: 'Update failed, please contact support',
-						type: 'error',
-						duration: 10000
-					});
-				})
-			},
-        }
-    };
-</script>
\ No newline at end of file
+import axios from 'axios'
+export default {
+  // TODO : update credit limit and timeout
+  data () {
+    return {
+      loading_btn: false,
+      credit_setting: {
+        rmb_credit_limit: null,
+        time_limit: null
+      },
+      TimeLimitDialogVisible: false,
+      CreditLimitDialogVisible: false
+    }
+  },
+  mounted () {
+    this.getCreditSetting()
+  },
+  methods: {
+    ValidateAll: function () {
+      var working
+      this.$validator.validateAll().then((result) => {
+        working = result
+      }).catch(() => {
+      })
+    },
+    getCreditSetting () {
+      axios.get('/api/setting-credit').then(response => {
+        this.credit_setting = response.data
+      })
+    },
+    updateCreditSetting () {
+      if (this.ValidateAll()) { return }
+
+      this.loading_btn = true
+      axios.put('/api/setting-credit', this.credit_setting)
+        .then((response) => {
+          this.loading_btn = false
+          this.$message({
+            showClose: true,
+            message: 'Time Limit and Credit Limit Updated Successfully',
+            type: 'success',
+            duration: 5000
+          })
+        })
+        .catch((error) => {
+          this.loading_btn = false
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Update failed, please contact support',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    }
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/settings/admin-malaysia-bank.vue b/resources/assets/js/pages/settings/admin-malaysia-bank.vue
index ebf2f3ad..88df2c7a 100644
--- a/resources/assets/js/pages/settings/admin-malaysia-bank.vue
+++ b/resources/assets/js/pages/settings/admin-malaysia-bank.vue
@@ -1,286 +1,282 @@
 <template>
-<div>
-	<span align="center"><h4>Malaysia Bank Details</h4></span><br>
-		<el-table :data="tableData" border style="width: 100%">
-			<el-table-column prop="company_name" label="Company Name" width="90px"></el-table-column>
-			<el-table-column prop="bank_name" label="Bank Name"></el-table-column>
-			<el-table-column prop="acc_no" label="Bank Account No" width="115px"></el-table-column>
-			<el-table-column prop="bank_address" label="Bank Address" width="111px"></el-table-column>
-			<el-table-column prop="swift" label="SWIFT Code"></el-table-column>
-			<el-table-column prop="cnap" label="CNAP" width="80px"></el-table-column>
-			<el-table-column prop="bank_branch" label="Bank Branch"></el-table-column>
-			<el-table-column label="Action">
-				<template slot-scope="scope">
-					<el-button type="text" size="small" :loading="loading_btn" @click="PopOutEditMalaysiaBank(scope.$index)">Edit</el-button>
-					<el-button type="text" size="small" :loading="loading_btn" @click="DeleteMalaysiaBank(tableData[scope.$index].id)">Delete</el-button>
-				</template>
-			</el-table-column>
-		</el-table><br>
-		<div align="right">
-			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddMalaysiaBank">Add New Data</el-button>
-		</div>
-		<!-- popup add new data -->
-			<el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible" width="40%">
-				<el-form label-width="150px">
-					<el-form-item label="Company Name">
-						<el-input v-model="malaysiaBankForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Bank Name">
-						<el-input v-model="malaysiaBankForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Bank Account No">
-						<el-input v-model="malaysiaBankForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Bank Address">
-						<el-input v-model="malaysiaBankForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="SWIFT Code">
-						<el-input v-model="malaysiaBankForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="CNAP">
-						<el-input v-model="malaysiaBankForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Bank Branch">
-						<el-input v-model="malaysiaBankForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
-						
-					</el-form-item>
-				</el-form>
-				<div align="center">
-					<el-button @click="AddDatadialogVisible = false">Cancel</el-button>
-					<el-button type="primary" :loading="loading_btn" @click="CreateMalaysiaBank" :disabled="malaysiaBankForm.company_name=='' || malaysiaBankForm.bank_name=='' || malaysiaBankForm.acc_no=='' || malaysiaBankForm.bank_address=='' || malaysiaBankForm.swift =='' || malaysiaBankForm.cnap=='' || malaysiaBankForm.bank_branch=='' ? true : false">OK</el-button>
-				</div>
-				<span slot="footer" class="dialog-footer">
-					* Please key in the data in Chinese
-				</span>
-			</el-dialog>
-			<el-dialog align="center" :visible.sync="DoneAddDatadialogVisible" width="30%">
-				<span>Data Added Successfully</span><br><br>
-				<div align="center">
-						<el-button type="primary" :loading="loading_btn" @click="DoneAddDatadialogVisible = false">OK</el-button>
-				</div>
-			</el-dialog>
-		<!-- popup add new data end -->
-		<!-- popup edit data -->
-			<el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible" width="40%">
-				<el-form label-width="150px">
-					<el-form-item label="Company Name">
-						<el-input v-model="malaysiaBankForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Bank Name">
-						<el-input v-model="malaysiaBankForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Bank Account No">
-						<el-input v-model="malaysiaBankForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Bank Address">
-						<el-input v-model="malaysiaBankForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="SWIFT Code">
-						<el-input v-model="malaysiaBankForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="CNAP">
-						<el-input v-model="malaysiaBankForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
-					
-					</el-form-item>
-					<el-form-item label="Bank Branch">
-						<el-input v-model="malaysiaBankForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
-						
-					</el-form-item>
-				</el-form>
-				<div align="center">
-					<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
-					<el-button type="primary" :loading="loading_btn" @click="EditMalaysiaBank" :disabled="malaysiaBankForm.company_name=='' || malaysiaBankForm.bank_name=='' || malaysiaBankForm.acc_no=='' || malaysiaBankForm.bank_address=='' || malaysiaBankForm.swift =='' || malaysiaBankForm.cnap=='' || malaysiaBankForm.bank_branch=='' ? true : false">Submit</el-button>
-				</div>
-				<span slot="footer" class="dialog-footer">
-					* Please key in the data in Chinese
-				</span>
-			</el-dialog>
-			<el-dialog align="center" :visible.sync="DoneUpdateDatadialogVisible" width="30%">
-				<span>Data Updated Successfully</span><br><br>
-				<div align="center">
-					<el-button type="primary" :loading="loading_btn" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
-				</div>
-			</el-dialog>
-		<!-- popup edit data end -->
-		<!-- popup delete -->
-			<el-dialog align="center" :visible.sync="DeleteAdddialogVisible" width="30%">
-				<span>Data Deleted</span><br><br>
-				<div align="center">
-					<el-button type="primary" :loading="loading_btn" @click="DeleteAdddialogVisible = false">OK</el-button>
-				</div>
-			</el-dialog>
-		<!-- popup delete end -->
-</div>
+  <div>
+    <span align="center"><h4>Malaysia Bank Details</h4></span><br>
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column prop="company_name" label="Company Name" width="90px"/>
+      <el-table-column prop="bank_name" label="Bank Name"/>
+      <el-table-column prop="acc_no" label="Bank Account No" width="115px"/>
+      <el-table-column prop="bank_address" label="Bank Address" width="111px"/>
+      <el-table-column prop="swift" label="SWIFT Code"/>
+      <el-table-column prop="cnap" label="CNAP" width="80px"/>
+      <el-table-column prop="bank_branch" label="Bank Branch"/>
+      <el-table-column label="Action">
+        <template slot-scope="scope">
+          <el-button :loading="loading_btn" type="text" size="small" @click="PopOutEditMalaysiaBank(scope.$index)">Edit</el-button>
+          <el-button :loading="loading_btn" type="text" size="small" @click="DeleteMalaysiaBank(tableData[scope.$index].id)">Delete</el-button>
+        </template>
+      </el-table-column>
+    </el-table><br>
+    <div align="right">
+      <el-button type="primary" icon="el-icon-plus" @click="PopOutAddMalaysiaBank">Add New Data</el-button>
+    </div>
+    <!-- popup add new data -->
+    <el-dialog :visible.sync="AddDatadialogVisible" title="Add New Data" align="center" width="40%">
+      <el-form label-width="150px">
+        <el-form-item label="Company Name">
+          <el-input v-validate="'required|max:191'" v-model="malaysiaBankForm.company_name" name="company_name"/>
+
+        </el-form-item>
+        <el-form-item label="Bank Name">
+          <el-input v-validate="'required|max:191'" v-model="malaysiaBankForm.bank_name" name="bank_name"/>
+
+        </el-form-item>
+        <el-form-item label="Bank Account No">
+          <el-input v-validate="'required|max:191'" v-model="malaysiaBankForm.acc_no" name="acc_no"/>
+
+        </el-form-item>
+        <el-form-item label="Bank Address">
+          <el-input v-validate="'required|max:191'" v-model="malaysiaBankForm.bank_address" name="bank_address"/>
+
+        </el-form-item>
+        <el-form-item label="SWIFT Code">
+          <el-input v-validate="'required|max:191'" v-model="malaysiaBankForm.swift" name="swift"/>
+
+        </el-form-item>
+        <el-form-item label="CNAP">
+          <el-input v-validate="'required|max:191'" v-model="malaysiaBankForm.cnap" name="cnap" />
+
+        </el-form-item>
+        <el-form-item label="Bank Branch">
+          <el-input v-validate="'required|max:191'" v-model="malaysiaBankForm.bank_branch" name="bank_branch"/>
+
+        </el-form-item>
+      </el-form>
+      <div align="center">
+        <el-button @click="AddDatadialogVisible = false">Cancel</el-button>
+        <el-button :loading="loading_btn" :disabled="malaysiaBankForm.company_name=='' || malaysiaBankForm.bank_name=='' || malaysiaBankForm.acc_no=='' || malaysiaBankForm.bank_address=='' || malaysiaBankForm.swift =='' || malaysiaBankForm.cnap=='' || malaysiaBankForm.bank_branch=='' ? true : false" type="primary" @click="CreateMalaysiaBank">OK</el-button>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        * Please key in the data in Chinese
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="DoneAddDatadialogVisible" align="center" width="30%">
+      <span>Data Added Successfully</span><br><br>
+      <div align="center">
+        <el-button :loading="loading_btn" type="primary" @click="DoneAddDatadialogVisible = false">OK</el-button>
+      </div>
+    </el-dialog>
+    <!-- popup add new data end -->
+    <!-- popup edit data -->
+    <el-dialog :visible.sync="EditDatadialogVisible" title="Edit Data" align="center" width="40%">
+      <el-form label-width="150px">
+        <el-form-item label="Company Name">
+          <el-input v-validate="'required|max:191'" v-model="malaysiaBankForm.company_name" name="company_name"/>
+
+        </el-form-item>
+        <el-form-item label="Bank Name">
+          <el-input v-validate="'required|max:191'" v-model="malaysiaBankForm.bank_name" name="bank_name"/>
+
+        </el-form-item>
+        <el-form-item label="Bank Account No">
+          <el-input v-validate="'required|max:191'" v-model="malaysiaBankForm.acc_no" name="acc_no"/>
+
+        </el-form-item>
+        <el-form-item label="Bank Address">
+          <el-input v-validate="'required|max:191'" v-model="malaysiaBankForm.bank_address" name="bank_address"/>
+
+        </el-form-item>
+        <el-form-item label="SWIFT Code">
+          <el-input v-validate="'required|max:191'" v-model="malaysiaBankForm.swift" name="swift"/>
+
+        </el-form-item>
+        <el-form-item label="CNAP">
+          <el-input v-validate="'required|max:191'" v-model="malaysiaBankForm.cnap" name="cnap" />
+
+        </el-form-item>
+        <el-form-item label="Bank Branch">
+          <el-input v-validate="'required|max:191'" v-model="malaysiaBankForm.bank_branch" name="bank_branch"/>
+
+        </el-form-item>
+      </el-form>
+      <div align="center">
+        <el-button @click="EditDatadialogVisible = false">Cancel</el-button>
+        <el-button :loading="loading_btn" :disabled="malaysiaBankForm.company_name=='' || malaysiaBankForm.bank_name=='' || malaysiaBankForm.acc_no=='' || malaysiaBankForm.bank_address=='' || malaysiaBankForm.swift =='' || malaysiaBankForm.cnap=='' || malaysiaBankForm.bank_branch=='' ? true : false" type="primary" @click="EditMalaysiaBank">Submit</el-button>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        * Please key in the data in Chinese
+      </span>
+    </el-dialog>
+    <el-dialog :visible.sync="DoneUpdateDatadialogVisible" align="center" width="30%">
+      <span>Data Updated Successfully</span><br><br>
+      <div align="center">
+        <el-button :loading="loading_btn" type="primary" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
+      </div>
+    </el-dialog>
+    <!-- popup edit data end -->
+    <!-- popup delete -->
+    <el-dialog :visible.sync="DeleteAdddialogVisible" align="center" width="30%">
+      <span>Data Deleted</span><br><br>
+      <div align="center">
+        <el-button :loading="loading_btn" type="primary" @click="DeleteAdddialogVisible = false">OK</el-button>
+      </div>
+    </el-dialog>
+    <!-- popup delete end -->
+  </div>
 </template>
 
 <script>
-	import axios from 'axios'
+import axios from 'axios'
 
-	export default {
-		data() {
-			return {
-				loading_btn: false,
-				tableData: [],
-				malaysiaBankForm : {
-					company_name : '',
-					bank_name : '',
-					acc_no : '',
-					bank_address : '',
-					swift : '',
-					cnap : '',
-					bank_branch : '',
-				},
-				EditDatadialogVisible: false,
-				DeleteAdddialogVisible: false,
-				AddDatadialogVisible: false,
-				DoneAddDatadialogVisible: false,
-				DoneUpdateDatadialogVisible: false,
-				currentEdit : -1,
-			}
-		},
-	    mounted(){
-	    	this.UpdateTableData();
+export default {
+  data () {
+    return {
+      loading_btn: false,
+      tableData: [],
+      malaysiaBankForm: {
+        company_name: '',
+        bank_name: '',
+        acc_no: '',
+        bank_address: '',
+        swift: '',
+        cnap: '',
+        bank_branch: ''
+      },
+      EditDatadialogVisible: false,
+      DeleteAdddialogVisible: false,
+      AddDatadialogVisible: false,
+      DoneAddDatadialogVisible: false,
+      DoneUpdateDatadialogVisible: false,
+      currentEdit: -1
+    }
+  },
+	    mounted () {
+	    	this.UpdateTableData()
 	    },
-		methods: {
-			CreateMalaysiaBank : function(){
-				this.loading_btn = true
-	            this.AddDatadialogVisible = false;
-				axios.post('/api/setting-malaysia-bank', this.malaysiaBankForm)
-					.then((response) => {
-						this.loading_btn = false
-						this.DoneAddDatadialogVisible = true;
-						this.ClearMalaysiaBankForm();
-						this.UpdateTableData();
-						this.$message({
-                    showClose: true,
-                    message: 'Success',
-                    type: 'success',
-                    duration: 5000
-                });
-            })
-					.catch((error) => {
-						this.loading_btn = false
-						console.log(error);
-						this.$message({
-							showClose: true,
-							message: 'Create Fail',
-							type: 'error',
-							duration: 10000
-						});
-						this.ClearMalaysiaBankForm();
-					});
-			},
-			UpdateTableData : function(){
-				this.loading_btn = true
-				axios.get('/api/setting-malaysia-bank', this.malaysiaBankForm)
-					.then((response) => {
-						this.loading_btn = false;
-						this.tableData = response.data;
-						
-            
-					})
-					.catch((error) => {
-						this.loading_btn = false
-						console.log(error);
-						this.$message({
-							showClose: true,
-							message: 'Fetch data fail',
-							type: 'error',
-							duration: 10000
-						});
-					})
-			},
-			DeleteMalaysiaBank : function(malaysiaBank_id){
-				this.loading_btn = true;
-				this.DeleteAdddialogVisible = true;
-				axios.delete('/api/setting-malaysia-bank/' + malaysiaBank_id)
-					.then((response) => {
-						this.UpdateTableData();
-						this.$message({
-                    showClose: true,
-                    message: 'Data Deleted Successfully',
-                    type: 'success',
-                    duration: 5000
-                });
-            
-					})
-					.catch((error) => {
-						this.loading_btn = false;
-						console.log(error);
-						this.$message({
-							showClose: true,
-							message: 'Delete data fail',
-							type: 'error',
-							duration: 10000
-						});
-					});
-			},
-			EditMalaysiaBank : function(){
-				this.loading_btn = true;
-				this.EditDatadialogVisible = false;
-				this.DoneUpdateDatadialogVisible = true;
-				axios.put('/api/setting-malaysia-bank/' + this.currentEdit, this.malaysiaBankForm)
-					.then((response) => {
-						this.loading_btn = false;
-						this.UpdateTableData();
-						this.$message({
-                    showClose: true,
-                    message: 'Updated Successfully',
-                    type: 'success',
-                    duration: 5000
-                });
-            
-					})
-					.catch((error) => {
-						console.log(error);
-						this.$message({
-							showClose: true,
-							message: 'Update Fail',
-							type: 'error',
-							duration: 10000
-						});
-					});
-			},
-			PopOutAddMalaysiaBank : function(){
-				this.AddDatadialogVisible = true;
-				this.ClearMalaysiaBankForm();
-			},
-			PopOutEditMalaysiaBank : function(tableDataRow){
-				this.EditDatadialogVisible = true;
-				this.FillupMalaysiaBankForm(tableDataRow);
-				this.currentEdit = this.tableData[tableDataRow].id;
-			},
-			ClearMalaysiaBankForm : function(){
-				this.malaysiaBankForm.company_name = '';
-				this.malaysiaBankForm.bank_name = '';
-				this.malaysiaBankForm.acc_no = '';
-				this.malaysiaBankForm.bank_address = '';
-				this.malaysiaBankForm.swift = '';
-				this.malaysiaBankForm.cnap = '';
-				this.malaysiaBankForm.bank_branch = '';
-			},
-			FillupMalaysiaBankForm : function(tableDataRow){
-				this.malaysiaBankForm.company_name = this.tableData[tableDataRow].company_name;
-				this.malaysiaBankForm.bank_name = this.tableData[tableDataRow].bank_name;
-				this.malaysiaBankForm.acc_no = this.tableData[tableDataRow].acc_no;
-				this.malaysiaBankForm.bank_address = this.tableData[tableDataRow].bank_address;
-				this.malaysiaBankForm.swift = this.tableData[tableDataRow].swift;
-				this.malaysiaBankForm.cnap = this.tableData[tableDataRow].cnap;
-				this.malaysiaBankForm.bank_branch = this.tableData[tableDataRow].bank_branch;
-			}
-		}
-	}
+  methods: {
+    CreateMalaysiaBank: function () {
+      this.loading_btn = true
+	            this.AddDatadialogVisible = false
+      axios.post('/api/setting-malaysia-bank', this.malaysiaBankForm)
+        .then((response) => {
+          this.loading_btn = false
+          this.DoneAddDatadialogVisible = true
+          this.ClearMalaysiaBankForm()
+          this.UpdateTableData()
+          this.$message({
+            showClose: true,
+            message: 'Success',
+            type: 'success',
+            duration: 5000
+          })
+        })
+        .catch((error) => {
+          this.loading_btn = false
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Create Fail',
+            type: 'error',
+            duration: 10000
+          })
+          this.ClearMalaysiaBankForm()
+        })
+    },
+    UpdateTableData: function () {
+      this.loading_btn = true
+      axios.get('/api/setting-malaysia-bank', this.malaysiaBankForm)
+        .then((response) => {
+          this.loading_btn = false
+          this.tableData = response.data
+        })
+        .catch((error) => {
+          this.loading_btn = false
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Fetch data fail',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    },
+    DeleteMalaysiaBank: function (malaysiaBank_id) {
+      this.loading_btn = true
+      this.DeleteAdddialogVisible = true
+      axios.delete('/api/setting-malaysia-bank/' + malaysiaBank_id)
+        .then((response) => {
+          this.UpdateTableData()
+          this.$message({
+            showClose: true,
+            message: 'Data Deleted Successfully',
+            type: 'success',
+            duration: 5000
+          })
+        })
+        .catch((error) => {
+          this.loading_btn = false
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Delete data fail',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    },
+    EditMalaysiaBank: function () {
+      this.loading_btn = true
+      this.EditDatadialogVisible = false
+      this.DoneUpdateDatadialogVisible = true
+      axios.put('/api/setting-malaysia-bank/' + this.currentEdit, this.malaysiaBankForm)
+        .then((response) => {
+          this.loading_btn = false
+          this.UpdateTableData()
+          this.$message({
+            showClose: true,
+            message: 'Updated Successfully',
+            type: 'success',
+            duration: 5000
+          })
+        })
+        .catch((error) => {
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Update Fail',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    },
+    PopOutAddMalaysiaBank: function () {
+      this.AddDatadialogVisible = true
+      this.ClearMalaysiaBankForm()
+    },
+    PopOutEditMalaysiaBank: function (tableDataRow) {
+      this.EditDatadialogVisible = true
+      this.FillupMalaysiaBankForm(tableDataRow)
+      this.currentEdit = this.tableData[tableDataRow].id
+    },
+    ClearMalaysiaBankForm: function () {
+      this.malaysiaBankForm.company_name = ''
+      this.malaysiaBankForm.bank_name = ''
+      this.malaysiaBankForm.acc_no = ''
+      this.malaysiaBankForm.bank_address = ''
+      this.malaysiaBankForm.swift = ''
+      this.malaysiaBankForm.cnap = ''
+      this.malaysiaBankForm.bank_branch = ''
+    },
+    FillupMalaysiaBankForm: function (tableDataRow) {
+      this.malaysiaBankForm.company_name = this.tableData[tableDataRow].company_name
+      this.malaysiaBankForm.bank_name = this.tableData[tableDataRow].bank_name
+      this.malaysiaBankForm.acc_no = this.tableData[tableDataRow].acc_no
+      this.malaysiaBankForm.bank_address = this.tableData[tableDataRow].bank_address
+      this.malaysiaBankForm.swift = this.tableData[tableDataRow].swift
+      this.malaysiaBankForm.cnap = this.tableData[tableDataRow].cnap
+      this.malaysiaBankForm.bank_branch = this.tableData[tableDataRow].bank_branch
+    }
+  }
+}
 </script>
 <style type="text/css">
 	.error-message{
@@ -288,4 +284,3 @@
 		left: 0;
 	}
 </style>
-
diff --git a/resources/assets/js/pages/settings/admin-marking-setting.vue b/resources/assets/js/pages/settings/admin-marking-setting.vue
index 491c9aa2..f23d7292 100644
--- a/resources/assets/js/pages/settings/admin-marking-setting.vue
+++ b/resources/assets/js/pages/settings/admin-marking-setting.vue
@@ -1,90 +1,90 @@
 <template>
-<div>
-	<span align="center"><h4>Marking Setting</h4></span><br>
-		<el-table :data="tableData" border style="width: 100%">
-			<el-table-column prop="marking" label="Marking" width="120px"></el-table-column>
-			<el-table-column prop="email" label="Email"></el-table-column>
-			<el-table-column label="Action">
-				<template slot-scope="scope">
-					<el-button type="text" size="small" @click="PopOutEditMarking(scope.$index)">Edit</el-button>
-					<el-button type="text" size="small" @click="DeleteMarking(tableData[scope.$index].id)">Delete</el-button>
-				</template>
-			</el-table-column>
-		</el-table><br>
-		<div align="right">
-			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddMarking">Add New Data</el-button>
-		</div>
-		<!-- popup add new data -->
-			<el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible" width="40%">
-				<el-form ref="markingForm" :model="markingForm" :rules="rules">
-			      <div align="right">
-			        <el-form-item label="Marking" prop="marking">
-			          <el-input v-model="markingForm.marking" type="text" style="width: 80%" />
-			        </el-form-item>
-			        <el-form-item label="Email" prop="email">
-			          <el-input v-model="markingForm.email" type="text" style="width: 80%" />
-			        </el-form-item>
-			      </div>
-			    </el-form>
-				<div align="right">
-					<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
-                <el-button type="primary"  :loading="loading_btn"  @click="CreateMarking('markingForm')">Add New Data</el-button>
-				</div>
+  <div>
+    <span align="center"><h4>Marking Setting</h4></span><br>
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column prop="marking" label="Marking" width="120px"/>
+      <el-table-column prop="email" label="Email"/>
+      <el-table-column label="Action">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="PopOutEditMarking(scope.$index)">Edit</el-button>
+          <el-button type="text" size="small" @click="DeleteMarking(tableData[scope.$index].id)">Delete</el-button>
+        </template>
+      </el-table-column>
+    </el-table><br>
+    <div align="right">
+      <el-button type="primary" icon="el-icon-plus" @click="PopOutAddMarking">Add New Data</el-button>
+    </div>
+    <!-- popup add new data -->
+    <el-dialog :visible.sync="AddDatadialogVisible" title="Add New Data" align="center" width="40%">
+      <el-form ref="markingForm" :model="markingForm" :rules="rules">
+        <div align="right">
+          <el-form-item label="Marking" prop="marking">
+            <el-input v-model="markingForm.marking" type="text" style="width: 80%" />
+          </el-form-item>
+          <el-form-item label="Email" prop="email">
+            <el-input v-model="markingForm.email" type="text" style="width: 80%" />
+          </el-form-item>
+        </div>
+      </el-form>
+      <div align="right">
+        <el-button @click="EditDatadialogVisible = false">Cancel</el-button>
+        <el-button :loading="loading_btn" type="primary" @click="CreateMarking('markingForm')">Add New Data</el-button>
+      </div>
 
-			</el-dialog>
-			<el-dialog align="center" :visible.sync="DoneAddDatadialogVisible" width="30%">
-				<span>Data Added Successfully</span><br><br>
-				<div align="center">
-						<el-button type="primary" @click="DoneAddDatadialogVisible = false">OK</el-button>
-				</div>
-			</el-dialog>
-		<!-- popup add new data end -->
-		<!-- popup edit data -->
-			<el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible" width="40%">
-				<el-form ref="markingForm" :model="markingForm" :rules="rules">
-			      <div align="right">
-			        <el-form-item label="Marking" prop="marking">
-			          <el-input v-model="markingForm.marking" type="text" style="width: 80%" />
-			        </el-form-item>
-			        <el-form-item label="Email" prop="email">
-			          <el-input v-model="markingForm.email" type="text" style="width: 80%" />
-			        </el-form-item>
-			      </div>
-			    </el-form>
-				<div align="right">
-					<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
-					<el-button type="primary" icon="el-icon-plus" @click="EditMarking">Submit</el-button>
-				</div>
-			</el-dialog>
-			<el-dialog align="center" :visible.sync="DoneUpdateDatadialogVisible" width="30%">
-				<span>Data Updated Successfully</span><br><br>
-				<div align="center">
-					<el-button type="primary" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
-				</div>
-			</el-dialog>
-		<!-- popup edit data end -->
-		<!-- popup delete -->
-			<el-dialog align="center" :visible.sync="DeleteAdddialogVisible" width="30%">
-				<span>Data Deleted</span><br><br>
-				<div align="center">
-					<el-button type="primary" @click="DeleteAdddialogVisible = false">OK</el-button>
-				</div>
-			</el-dialog>
-		<!-- popup delete end -->
-</div>
+    </el-dialog>
+    <el-dialog :visible.sync="DoneAddDatadialogVisible" align="center" width="30%">
+      <span>Data Added Successfully</span><br><br>
+      <div align="center">
+        <el-button type="primary" @click="DoneAddDatadialogVisible = false">OK</el-button>
+      </div>
+    </el-dialog>
+    <!-- popup add new data end -->
+    <!-- popup edit data -->
+    <el-dialog :visible.sync="EditDatadialogVisible" title="Edit Data" align="center" width="40%">
+      <el-form ref="markingForm" :model="markingForm" :rules="rules">
+        <div align="right">
+          <el-form-item label="Marking" prop="marking">
+            <el-input v-model="markingForm.marking" type="text" style="width: 80%" />
+          </el-form-item>
+          <el-form-item label="Email" prop="email">
+            <el-input v-model="markingForm.email" type="text" style="width: 80%" />
+          </el-form-item>
+        </div>
+      </el-form>
+      <div align="right">
+        <el-button @click="EditDatadialogVisible = false">Cancel</el-button>
+        <el-button type="primary" icon="el-icon-plus" @click="EditMarking">Submit</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog :visible.sync="DoneUpdateDatadialogVisible" align="center" width="30%">
+      <span>Data Updated Successfully</span><br><br>
+      <div align="center">
+        <el-button type="primary" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
+      </div>
+    </el-dialog>
+    <!-- popup edit data end -->
+    <!-- popup delete -->
+    <el-dialog :visible.sync="DeleteAdddialogVisible" align="center" width="30%">
+      <span>Data Deleted</span><br><br>
+      <div align="center">
+        <el-button type="primary" @click="DeleteAdddialogVisible = false">OK</el-button>
+      </div>
+    </el-dialog>
+    <!-- popup delete end -->
+  </div>
 </template>
 
 <script>
-	import axios from 'axios'
-	export default {
-		data() {
-			return {
-				loading_btn: false,
+import axios from 'axios'
+export default {
+  data () {
+    return {
+      loading_btn: false,
 		        markingForm: {
-		          	marking : null,
-					email : null,
+		          	marking: null,
+        email: null
 		        },
-				rules: {
+      rules: {
 			      email: [{
 			        required: true,
 			        message: 'Please input email',
@@ -97,127 +97,126 @@
 			      }]
 		        },
 		        tableData: [],
-				EditDatadialogVisible: false,
-				DeleteAdddialogVisible: false,
-				AddDatadialogVisible: false,
-				DoneAddDatadialogVisible: false,
-				DoneUpdateDatadialogVisible: false,
-				currentEdit : -1,
-			}
-		},
-		mounted(){
-	    	this.UpdateTableData();
+      EditDatadialogVisible: false,
+      DeleteAdddialogVisible: false,
+      AddDatadialogVisible: false,
+      DoneAddDatadialogVisible: false,
+      DoneUpdateDatadialogVisible: false,
+      currentEdit: -1
+    }
+  },
+  mounted () {
+	    	this.UpdateTableData()
 	    },
-		methods: {
-			CreateMarking : function(formName){	
-				this.loading_btn = true
-				this.AddDatadialogVisible = false;
-				this.$refs[formName].validate((valid) => {
-					if (valid) {
-						axios.post('/api/setting-marking', this.markingForm)
-							.then((response) => {
+  methods: {
+    CreateMarking: function (formName) {
+      this.loading_btn = true
+      this.AddDatadialogVisible = false
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          axios.post('/api/setting-marking', this.markingForm)
+            .then((response) => {
 			                    this.loading_btn = false
-								this.$message({
-									showClose: true,
-									message: 'Success',
-									type: 'success',
-									duration: 5000
-								});
-								this.ClearMarkingForm();
-								this.UpdateTableData();
-							})
-							.catch((error) => {
+              this.$message({
+                showClose: true,
+                message: 'Success',
+                type: 'success',
+                duration: 5000
+              })
+              this.ClearMarkingForm()
+              this.UpdateTableData()
+            })
+            .catch((error) => {
 			                    this.loading_btn = false
-								console.log(error);
-								this.$message({
-									showClose: true,
-									message: 'Update failed, please contact support',
-									type: 'error',
-									duration: 10000
-								});
-								this.ClearMarkingForm();
-								this.UpdateTableData();
-							});
-					}
-					else{
-						this.$message({
-							showClose: true,
-							message: 'Please fillup form',
-							type: 'error',
-							duration: 10000
-						});
-					}
-				});				
-			},
-			ClearMarkingForm : function(){
-				this.markingForm.marking = '';
-				this.markingForm.email = '';
-			},
-			UpdateTableData : function(){
-				axios.get('/api/setting-marking', this.markingForm)
-					.then((response) => {
-						this.tableData = response.data;
-					})
-					.catch((error) => {
-						console.log(error);
-						this.$message({
-							showClose: true,
-							message: 'Fetch data fail',
-							type: 'error',
-							duration: 10000
-						});
-					})
-			},
-			DeleteMarking : function(marking_id){
-				this.DeleteAdddialogVisible = true;
-				console.log(marking_id);
-				axios.delete('/api/setting-marking/' + marking_id)
-					.then((response) => {
-						console.log('123fuck');
-						this.UpdateTableData();
-					})
-					.catch((error) => {
-						console.log(error);
-						this.$message({
-							showClose: true,
-							message: 'Delete data fail',
-							type: 'error',
-							duration: 10000
-						});
-					});
-			},
-			EditMarking : function(){
-				this.EditDatadialogVisible = false;
-				this.DoneUpdateDatadialogVisible = true;
-				axios.put('/api/setting-marking/' + this.currentEdit, this.markingForm)
-					.then((response) => {
-						this.UpdateTableData();
-					})
-					.catch((error) => {
-						console.log(error);
-						this.$message({
-							showClose: true,
-							message: 'Update Fail',
-							type: 'error',
-							duration: 10000
-						});
-					});
-			},
-			PopOutAddMarking : function(){
-				this.AddDatadialogVisible = true;
-				this.ClearMarkingForm();
-			},
-			PopOutEditMarking : function(tableDataRow){
-				this.EditDatadialogVisible = true;
-				this.FillupMarkingForm(tableDataRow);
-				this.currentEdit = this.tableData[tableDataRow].id;
-			},
-			FillupMarkingForm : function(tableDataRow){
-				this.markingForm.marking = this.tableData[tableDataRow].marking;
-				this.markingForm.email = this.tableData[tableDataRow].email;
-			}
-		},	
-	}
+              console.log(error)
+              this.$message({
+                showClose: true,
+                message: 'Update failed, please contact support',
+                type: 'error',
+                duration: 10000
+              })
+              this.ClearMarkingForm()
+              this.UpdateTableData()
+            })
+        } else {
+          this.$message({
+            showClose: true,
+            message: 'Please fillup form',
+            type: 'error',
+            duration: 10000
+          })
+        }
+      })
+    },
+    ClearMarkingForm: function () {
+      this.markingForm.marking = ''
+      this.markingForm.email = ''
+    },
+    UpdateTableData: function () {
+      axios.get('/api/setting-marking', this.markingForm)
+        .then((response) => {
+          this.tableData = response.data
+        })
+        .catch((error) => {
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Fetch data fail',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    },
+    DeleteMarking: function (marking_id) {
+      this.DeleteAdddialogVisible = true
+      console.log(marking_id)
+      axios.delete('/api/setting-marking/' + marking_id)
+        .then((response) => {
+          console.log('123fuck')
+          this.UpdateTableData()
+        })
+        .catch((error) => {
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Delete data fail',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    },
+    EditMarking: function () {
+      this.EditDatadialogVisible = false
+      this.DoneUpdateDatadialogVisible = true
+      axios.put('/api/setting-marking/' + this.currentEdit, this.markingForm)
+        .then((response) => {
+          this.UpdateTableData()
+        })
+        .catch((error) => {
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Update Fail',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    },
+    PopOutAddMarking: function () {
+      this.AddDatadialogVisible = true
+      this.ClearMarkingForm()
+    },
+    PopOutEditMarking: function (tableDataRow) {
+      this.EditDatadialogVisible = true
+      this.FillupMarkingForm(tableDataRow)
+      this.currentEdit = this.tableData[tableDataRow].id
+    },
+    FillupMarkingForm: function (tableDataRow) {
+      this.markingForm.marking = this.tableData[tableDataRow].marking
+      this.markingForm.email = this.tableData[tableDataRow].email
+    }
+  }
+}
 </script>
 <style type="text/css">
 	.error-message{
@@ -225,5 +224,3 @@
 		left: 0;
 	}
 </style>
-
-
diff --git a/resources/assets/js/pages/settings/admin-supplier.vue b/resources/assets/js/pages/settings/admin-supplier.vue
index eb151563..91457288 100644
--- a/resources/assets/js/pages/settings/admin-supplier.vue
+++ b/resources/assets/js/pages/settings/admin-supplier.vue
@@ -1,223 +1,223 @@
 <template>
-<div>
-	<span align="center"><h4>Supplier Details</h4></span><br>
-		<el-table :data="tableData" border style="width: 100%">
-			<el-table-column prop="company_name" label="Company Name"></el-table-column>
-			<el-table-column prop="supplier_reg_no" label="Registration No"></el-table-column>
-			<el-table-column prop="gst_no" label="GST No"></el-table-column>
-			<el-table-column prop="bank_name" label="Bank Name"></el-table-column>
-			<el-table-column prop="acc_no" label="Account No"></el-table-column>
-			<el-table-column label="Action">
-				<template slot-scope="scope">
-					<el-button type="text" size="small" @click="PopOutEditSupplier(scope.$index)">Edit</el-button>
-					<el-button type="text" size="small" @click="DeleteSupplier(tableData[scope.$index].id)">Delete</el-button>
-				</template>
-			</el-table-column>
-		</el-table><br>
-		<div align="right">
-			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddSupplier">Add New Supplier</el-button>
-		</div>
-		<!-- popup add new supplier -->
-			<el-dialog title="Add New Supplier" align="center" :visible.sync="AddNewSupplierdialogVisible" width="40%">
-				<el-form  label-width="150px" >
-					<el-form-item label="Company Name">
-						<el-input v-model="supplierForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Registration No">
-						<el-input v-model="supplierForm.supplier_reg_no" v-validate="'required|max:191'" name="supplier_reg_no"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="GST No">
-						<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Bank Name">
-						<el-input v-model="supplierForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Account No">
-						<el-input v-model="supplierForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
-						
-					</el-form-item>
-				</el-form>
-				<div align="center">
-						<el-button @click="AddNewSupplierdialogVisible = false">Cancel</el-button>
-						<el-button type="primary" @click="CreateSupplier" :disabled="supplierForm.company_name=='' || supplierForm.supplier_reg_no=='' || supplierForm.gst_no=='' || supplierForm.bank_name=='' || supplierForm.acc_no =='' ? true : false">OK</el-button>
-				</div>
-			</el-dialog>
-			<el-dialog align="center" :visible.sync="DoneAddSupplierdialogVisible" width="30%">
-				<span>Supplier Added Successfully</span><br><br>
-				<div align="center">
-						<el-button type="primary" @click="DoneAddSupplierdialogVisible = false;">OK</el-button>
-				</div>
-			</el-dialog>
-		<!-- popup add new supplier end -->
-		<!-- popup edit supplier -->
-			<el-dialog title="Edit Supplier" align="center" :visible.sync="EditSupplierdialogVisible" width="40%">
-					<el-form  label-width="150px" >
-					<el-form-item label="Company Name">
-						<el-input v-model="supplierForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Registration No">
-						<el-input v-model="supplierForm.supplier_reg_no" v-validate="'required|max:191'" name="supplier_reg_no"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="GST No">
-						<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Bank Name">
-						<el-input v-model="supplierForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
-						
-					</el-form-item>
-					<el-form-item label="Account No">
-						<el-input v-model="supplierForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
-						
-					</el-form-item>
-				</el-form>
-				<div align="center">
-						<el-button @click="EditSupplierdialogVisible = false">Cancel</el-button>
-						<el-button type="primary" @click="EditSupplier" :disabled="supplierForm.company_name=='' || supplierForm.supplier_reg_no=='' || supplierForm.gst_no=='' || supplierForm.bank_name=='' || supplierForm.acc_no =='' ? true : false">OK</el-button>
-				</div>
-			</el-dialog>
-			<el-dialog align="center" :visible.sync="DoneUpdateSupplierdialogVisible" width="30%">
-				<span>Supplier's Details Updated Successfully</span><br><br>
-				<div align="center">
-						<el-button type="primary" @click="DoneUpdateSupplierdialogVisible = false" >OK</el-button>
-				</div>
-			</el-dialog>
-		<!-- popup edit supplier end -->
-		<!-- popup delete supplier -->
-			<el-dialog align="center" :visible.sync="DeleteSupplierdialogVisible" width="30%">
-				<span>Supplier's Details Deleted</span><br><br>
-				<div align="center">
-						<el-button type="primary" @click="DeleteSupplierdialogVisible = false">OK</el-button>
-				</div>
-			</el-dialog>
-		<!-- popup delete supplier end -->
-</div>
+  <div>
+    <span align="center"><h4>Supplier Details</h4></span><br>
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column prop="company_name" label="Company Name"/>
+      <el-table-column prop="supplier_reg_no" label="Registration No"/>
+      <el-table-column prop="gst_no" label="GST No"/>
+      <el-table-column prop="bank_name" label="Bank Name"/>
+      <el-table-column prop="acc_no" label="Account No"/>
+      <el-table-column label="Action">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="PopOutEditSupplier(scope.$index)">Edit</el-button>
+          <el-button type="text" size="small" @click="DeleteSupplier(tableData[scope.$index].id)">Delete</el-button>
+        </template>
+      </el-table-column>
+    </el-table><br>
+    <div align="right">
+      <el-button type="primary" icon="el-icon-plus" @click="PopOutAddSupplier">Add New Supplier</el-button>
+    </div>
+    <!-- popup add new supplier -->
+    <el-dialog :visible.sync="AddNewSupplierdialogVisible" title="Add New Supplier" align="center" width="40%">
+      <el-form label-width="150px" >
+        <el-form-item label="Company Name">
+          <el-input v-validate="'required|max:191'" v-model="supplierForm.company_name" name="company_name"/>
+
+        </el-form-item>
+        <el-form-item label="Registration No">
+          <el-input v-validate="'required|max:191'" v-model="supplierForm.supplier_reg_no" name="supplier_reg_no"/>
+
+        </el-form-item>
+        <el-form-item label="GST No">
+          <el-input v-validate="'required|max:191'" v-model="supplierForm.gst_no" name="gst_no"/>
+
+        </el-form-item>
+        <el-form-item label="Bank Name">
+          <el-input v-validate="'required|max:191'" v-model="supplierForm.bank_name" name="bank_name"/>
+
+        </el-form-item>
+        <el-form-item label="Account No">
+          <el-input v-validate="'required|max:191'" v-model="supplierForm.acc_no" name="acc_no"/>
+
+        </el-form-item>
+      </el-form>
+      <div align="center">
+        <el-button @click="AddNewSupplierdialogVisible = false">Cancel</el-button>
+        <el-button :disabled="supplierForm.company_name=='' || supplierForm.supplier_reg_no=='' || supplierForm.gst_no=='' || supplierForm.bank_name=='' || supplierForm.acc_no =='' ? true : false" type="primary" @click="CreateSupplier">OK</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog :visible.sync="DoneAddSupplierdialogVisible" align="center" width="30%">
+      <span>Supplier Added Successfully</span><br><br>
+      <div align="center">
+        <el-button type="primary" @click="DoneAddSupplierdialogVisible = false;">OK</el-button>
+      </div>
+    </el-dialog>
+    <!-- popup add new supplier end -->
+    <!-- popup edit supplier -->
+    <el-dialog :visible.sync="EditSupplierdialogVisible" title="Edit Supplier" align="center" width="40%">
+      <el-form label-width="150px" >
+        <el-form-item label="Company Name">
+          <el-input v-validate="'required|max:191'" v-model="supplierForm.company_name" name="company_name"/>
+
+        </el-form-item>
+        <el-form-item label="Registration No">
+          <el-input v-validate="'required|max:191'" v-model="supplierForm.supplier_reg_no" name="supplier_reg_no"/>
+
+        </el-form-item>
+        <el-form-item label="GST No">
+          <el-input v-validate="'required|max:191'" v-model="supplierForm.gst_no" name="gst_no"/>
+
+        </el-form-item>
+        <el-form-item label="Bank Name">
+          <el-input v-validate="'required|max:191'" v-model="supplierForm.bank_name" name="bank_name"/>
+
+        </el-form-item>
+        <el-form-item label="Account No">
+          <el-input v-validate="'required|max:191'" v-model="supplierForm.acc_no" name="acc_no"/>
+
+        </el-form-item>
+      </el-form>
+      <div align="center">
+        <el-button @click="EditSupplierdialogVisible = false">Cancel</el-button>
+        <el-button :disabled="supplierForm.company_name=='' || supplierForm.supplier_reg_no=='' || supplierForm.gst_no=='' || supplierForm.bank_name=='' || supplierForm.acc_no =='' ? true : false" type="primary" @click="EditSupplier">OK</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog :visible.sync="DoneUpdateSupplierdialogVisible" align="center" width="30%">
+      <span>Supplier's Details Updated Successfully</span><br><br>
+      <div align="center">
+        <el-button type="primary" @click="DoneUpdateSupplierdialogVisible = false" >OK</el-button>
+      </div>
+    </el-dialog>
+    <!-- popup edit supplier end -->
+    <!-- popup delete supplier -->
+    <el-dialog :visible.sync="DeleteSupplierdialogVisible" align="center" width="30%">
+      <span>Supplier's Details Deleted</span><br><br>
+      <div align="center">
+        <el-button type="primary" @click="DeleteSupplierdialogVisible = false">OK</el-button>
+      </div>
+    </el-dialog>
+    <!-- popup delete supplier end -->
+  </div>
 </template>
 
 <script>
-	import axios from 'axios'
+import axios from 'axios'
 
-	export default {
-		data() {
-			return {
-				tableData: [],
-				supplierForm : {
-					company_name: '',
-					supplier_reg_no: '',
-					gst_no: '',
-					bank_name: '', 
-					acc_no: '', 
-				},
-				AddNewSupplierdialogVisible: false,
-				EditSupplierdialogVisible: false,
-				DoneAddSupplierdialogVisible: false,
-				DoneUpdateSupplierdialogVisible: false,
-				DeleteSupplierdialogVisible: false,
-				currentEdit: -1,
-			}
-		},
-		beforeMount(){
-			this.UpdateTableData();
-		},
-		methods:{
-			CreateSupplier : function(){
-				this.AddNewSupplierdialogVisible = false; 
-				axios.post('/api/setting-supplier', this.supplierForm)
-				.then((response) => {
-					this.DoneAddSupplierdialogVisible = true;
-					this.UpdateTableData();
-				})
-				.catch((error) => {
-					console.log(error);
-					this.$message({
-						showClose: true,
-						message: 'Create Fail',
-						type: 'error',
-						duration: 10000
-					});
-				});
-			},
-			UpdateTableData : function(){
-				axios.get('/api/setting-supplier', this.supplierForm)
-					.then((response) => {
-						console.log(response.data)
-						this.tableData = response.data;
-					})
-					.catch((error) => {
-						console.log(error);
-						this.$message({
-							showClose: true,
-							message: 'Fetch data fail',
-							type: 'error',
-							duration: 10000
-						});
-					})
-			},
-			DeleteSupplier : function(supplier_id){
-				this.DeleteSupplierdialogVisible = true;
-				axios.delete('/api/setting-supplier/' + supplier_id)
-					.then((response) => {
-						this.UpdateTableData();
-					})
-					.catch((error) => {
-						console.log(error);
-						this.$message({
-							showClose: true,
-							message: 'Delete data fail',
-							type: 'error',
-							duration: 10000
-						});
-					})
-			},
-			EditSupplier : function(){
-				this.EditSupplierdialogVisible = false; 
-				this.DoneUpdateSupplierdialogVisible = true;
+export default {
+  data () {
+    return {
+      tableData: [],
+      supplierForm: {
+        company_name: '',
+        supplier_reg_no: '',
+        gst_no: '',
+        bank_name: '',
+        acc_no: ''
+      },
+      AddNewSupplierdialogVisible: false,
+      EditSupplierdialogVisible: false,
+      DoneAddSupplierdialogVisible: false,
+      DoneUpdateSupplierdialogVisible: false,
+      DeleteSupplierdialogVisible: false,
+      currentEdit: -1
+    }
+  },
+  beforeMount () {
+    this.UpdateTableData()
+  },
+  methods: {
+    CreateSupplier: function () {
+      this.AddNewSupplierdialogVisible = false
+      axios.post('/api/setting-supplier', this.supplierForm)
+        .then((response) => {
+          this.DoneAddSupplierdialogVisible = true
+          this.UpdateTableData()
+        })
+        .catch((error) => {
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Create Fail',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    },
+    UpdateTableData: function () {
+      axios.get('/api/setting-supplier', this.supplierForm)
+        .then((response) => {
+          console.log(response.data)
+          this.tableData = response.data
+        })
+        .catch((error) => {
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Fetch data fail',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    },
+    DeleteSupplier: function (supplier_id) {
+      this.DeleteSupplierdialogVisible = true
+      axios.delete('/api/setting-supplier/' + supplier_id)
+        .then((response) => {
+          this.UpdateTableData()
+        })
+        .catch((error) => {
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Delete data fail',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    },
+    EditSupplier: function () {
+      this.EditSupplierdialogVisible = false
+      this.DoneUpdateSupplierdialogVisible = true
 
-				axios.put('/api/setting-supplier/' + this.currentEdit, this.supplierForm)
-				.then((response) => {
-					this.UpdateTableData();
-				})
-				.catch((error) => {
-					console.log(error);
-					this.$message({
-						showClose: true,
-						message: 'Update Fail',
-						type: 'error',
-						duration: 10000
-					});
-				})
-			},
-			PopOutAddSupplier : function(){
-				this.AddNewSupplierdialogVisible = true;
-				this.ClearSupplierForm();
-			},
-			PopOutEditSupplier : function(tableDataRow){
-				this.EditSupplierdialogVisible = true;
-				this.FillupSupplierForm(tableDataRow);
-				this.currentEdit = this.tableData[tableDataRow].id;
-			},
-			ClearSupplierForm : function(){
-				this.supplierForm.company_name = '';
-				this.supplierForm.supplier_reg_no = '';
-				this.supplierForm.gst_no = '';
-				this.supplierForm.bank_name = '';
-				this.supplierForm.acc_no = '';
-			},
-			FillupSupplierForm : function(tableDataRow){
-				this.supplierForm.company_name = this.tableData[tableDataRow].company_name;
-				this.supplierForm.supplier_reg_no = this.tableData[tableDataRow].supplier_reg_no;
-				this.supplierForm.gst_no = this.tableData[tableDataRow].gst_no;
-				this.supplierForm.bank_name = this.tableData[tableDataRow].bank_name;
-				this.supplierForm.acc_no = this.tableData[tableDataRow].acc_no;
-			}
-		}
-	}
+      axios.put('/api/setting-supplier/' + this.currentEdit, this.supplierForm)
+        .then((response) => {
+          this.UpdateTableData()
+        })
+        .catch((error) => {
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Update Fail',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    },
+    PopOutAddSupplier: function () {
+      this.AddNewSupplierdialogVisible = true
+      this.ClearSupplierForm()
+    },
+    PopOutEditSupplier: function (tableDataRow) {
+      this.EditSupplierdialogVisible = true
+      this.FillupSupplierForm(tableDataRow)
+      this.currentEdit = this.tableData[tableDataRow].id
+    },
+    ClearSupplierForm: function () {
+      this.supplierForm.company_name = ''
+      this.supplierForm.supplier_reg_no = ''
+      this.supplierForm.gst_no = ''
+      this.supplierForm.bank_name = ''
+      this.supplierForm.acc_no = ''
+    },
+    FillupSupplierForm: function (tableDataRow) {
+      this.supplierForm.company_name = this.tableData[tableDataRow].company_name
+      this.supplierForm.supplier_reg_no = this.tableData[tableDataRow].supplier_reg_no
+      this.supplierForm.gst_no = this.tableData[tableDataRow].gst_no
+      this.supplierForm.bank_name = this.tableData[tableDataRow].bank_name
+      this.supplierForm.acc_no = this.tableData[tableDataRow].acc_no
+    }
+  }
+}
 </script>
 <style type="text/css">
 	.error-message{
diff --git a/resources/assets/js/pages/settings/admin-tax-setting.vue b/resources/assets/js/pages/settings/admin-tax-setting.vue
index 4809493f..29eaefa7 100644
--- a/resources/assets/js/pages/settings/admin-tax-setting.vue
+++ b/resources/assets/js/pages/settings/admin-tax-setting.vue
@@ -1,66 +1,66 @@
 <template>
-    <div>
-        <span align="center">
-            <h4>Tax Setting</h4>
-        </span>
-        <br>
-        <el-form>
-            <el-form-item align="center">
-                Tax : 
-                <el-input size="mini" v-model="tax_setting.tax_rate" style=width:20%></el-input> <br>(Example : 1%, input 1.01 and 0% input 1.0)
-            </el-form-item>
-            <el-form-item align="center">
-                <el-button type="primary" align="center" :loading="loading_btn" size="primary" @click="updateTaxSetting">Update</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div>
+    <span align="center">
+      <h4>Tax Setting</h4>
+    </span>
+    <br>
+    <el-form>
+      <el-form-item align="center">
+        Tax :
+        <el-input v-model="tax_setting.tax_rate" size="mini" style="width:20%"/> <br>(Example : 1%, input 1.01 and 0% input 1.0)
+      </el-form-item>
+      <el-form-item align="center">
+        <el-button :loading="loading_btn" type="primary" align="center" size="primary" @click="updateTaxSetting">Update</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
-    import axios from 'axios'
-    export default {
-        data() {
-            return {
-                loading_btn: false,
-                tax_setting: {
-                    tax_rate : null
-                },
-            };
-        },
-        mounted() {
-            this.getTaxSetting();
-        },
-        methods: {
-            getTaxSetting() {
-                axios.get('/api/setting-tax').then(response => {
-                    this.tax_setting = response.data;
-                    console.log(this.tax_setting);
-                })
-            },
-            updateTaxSetting (){
-                this.loading_btn = true
-                console.log(this.tax_setting);
-				axios.put('/api/setting-tax', this.tax_setting)
-				.then((response) => {
-                    this.loading_btn = false
-						this.$message({
-						showClose: true,
-						message: 'Success',
-						type: 'success',
-						duration: 5000
-					});
-				})
-				.catch((error) => {
-                    this.loading_btn = false
-					console.log(error);
-					this.$message({
-						showClose: true,
-						message: 'Update failed, please contact support',
-						type: 'error',
-						duration: 10000
-					});
-				})
-			},
-        }
-    };
-</script>
\ No newline at end of file
+import axios from 'axios'
+export default {
+  data () {
+    return {
+      loading_btn: false,
+      tax_setting: {
+        tax_rate: null
+      }
+    }
+  },
+  mounted () {
+    this.getTaxSetting()
+  },
+  methods: {
+    getTaxSetting () {
+      axios.get('/api/setting-tax').then(response => {
+        this.tax_setting = response.data
+        console.log(this.tax_setting)
+      })
+    },
+    updateTaxSetting () {
+      this.loading_btn = true
+      console.log(this.tax_setting)
+      axios.put('/api/setting-tax', this.tax_setting)
+        .then((response) => {
+          this.loading_btn = false
+          this.$message({
+            showClose: true,
+            message: 'Success',
+            type: 'success',
+            duration: 5000
+          })
+        })
+        .catch((error) => {
+          this.loading_btn = false
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Update failed, please contact support',
+            type: 'error',
+            duration: 10000
+          })
+        })
+    }
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/settings/index.vue b/resources/assets/js/pages/settings/index.vue
index 782a8077..be4a7f7a 100644
--- a/resources/assets/js/pages/settings/index.vue
+++ b/resources/assets/js/pages/settings/index.vue
@@ -21,87 +21,86 @@
 </template>
 
 <script>
-  import {
-    mapGetters
-  } from 'vuex'
-  export default {
-    middleware: 'check-auth',
+import {
+  mapGetters
+} from 'vuex'
+export default {
+  middleware: 'check-auth',
 
-    computed: {
-      role() {
-        return this.$store.getters['auth/role']
+  computed: {
+    role () {
+      return this.$store.getters['auth/role']
+    },
+    tabs () {
+      return [{
+        icon: 'user',
+        name: this.$t('profile'),
+        route: 'settings.profile',
+        role: 'member'
       },
-      tabs() {
-        return [{
-            icon: 'user',
-            name: this.$t('profile'),
-            route: 'settings.profile',
-            role: 'member'
-          },
-          {
-            icon: 'lock',
-            name: this.$t('password'),
-            route: 'settings.password',
-            role: 'member'
-          },
-          {
-            icon: 'user',
-            name: this.$t('Supplier'),
-            route: 'settings.admin-supplier',
-            role: 'admin'
-          },
-          {
-            icon: 'cog',
-            name: this.$t('Credit Setting'),
-            route: 'settings.admin-credit-setting',
-            role: 'admin'
-          },
-          {
-            icon: 'flag',
-            name: this.$t('CIEF China Bank'),
-            route: 'settings.admin-china-bank',
-            role: 'admin'
-          },
-          {
-            icon: 'flag',
-            name: this.$t('CIEF Malaysia Bank'),
-            route: 'settings.admin-malaysia-bank',
-            role: 'admin'
-          },
-          {
-            icon: 'building',
-            name: this.$t('Bank Setting'),
-            route: 'settings.admin-bank-setting',
-            role: 'admin'
-          },
-          {
-            icon: 'building',
-            name: this.$t('Marking Setting'),
-            route: 'settings.admin-marking-setting',
-            role: 'admin'
-          },
-          {
-            icon: 'building',
-            name: this.$t('Tax Setting'),
-            route: 'settings.admin-tax-setting',
-            role: 'admin'
-          },
-          {
-            icon: 'building',
-            name: this.$t('Billing Charge Setting'),
-            route: 'settings.admin-billing-charge-setting',
-            role: 'admin'
-          },
-        ]
+      {
+        icon: 'lock',
+        name: this.$t('password'),
+        route: 'settings.password',
+        role: 'member'
+      },
+      {
+        icon: 'user',
+        name: this.$t('Supplier'),
+        route: 'settings.admin-supplier',
+        role: 'admin'
+      },
+      {
+        icon: 'cog',
+        name: this.$t('Credit Setting'),
+        route: 'settings.admin-credit-setting',
+        role: 'admin'
+      },
+      {
+        icon: 'flag',
+        name: this.$t('CIEF China Bank'),
+        route: 'settings.admin-china-bank',
+        role: 'admin'
+      },
+      {
+        icon: 'flag',
+        name: this.$t('CIEF Malaysia Bank'),
+        route: 'settings.admin-malaysia-bank',
+        role: 'admin'
+      },
+      {
+        icon: 'building',
+        name: this.$t('Bank Setting'),
+        route: 'settings.admin-bank-setting',
+        role: 'admin'
+      },
+      {
+        icon: 'building',
+        name: this.$t('Marking Setting'),
+        route: 'settings.admin-marking-setting',
+        role: 'admin'
+      },
+      {
+        icon: 'building',
+        name: this.$t('Tax Setting'),
+        route: 'settings.admin-tax-setting',
+        role: 'admin'
+      },
+      {
+        icon: 'building',
+        name: this.$t('Billing Charge Setting'),
+        route: 'settings.admin-billing-charge-setting',
+        role: 'admin'
       }
+      ]
     }
-
-
   }
+
+}
 </script>
 
 <style>
   .settings-card .card-body {
     padding: 0;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/resources/assets/js/pages/welcome.vue b/resources/assets/js/pages/welcome.vue
index d626947f..5f224e3b 100644
--- a/resources/assets/js/pages/welcome.vue
+++ b/resources/assets/js/pages/welcome.vue
@@ -19,24 +19,24 @@
 </template>
 
 <script>
-  import { mapGetters } from 'vuex'
+import { mapGetters } from 'vuex'
 
-  export default {
-    middleware: 'guest',
-    layout: 'basic',
+export default {
+  middleware: 'guest',
+  layout: 'basic',
 
-    metaInfo () {
-      return { title: this.$t('home') }
-    },
+  metaInfo () {
+    return { title: this.$t('home') }
+  },
 
-    data: () => ({
-      title: window.config.appName
-    }),
+  data: () => ({
+    title: window.config.appName
+  }),
 
-    computed: mapGetters({
-      authenticated: 'auth/check'
-    })
-  }
+  computed: mapGetters({
+    authenticated: 'auth/check'
+  })
+}
 </script>
 
 <style scoped>
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index 91506aeb..49e2371b 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -64,7 +64,7 @@ export default [
       { path: 'admin-bank-setting', name: 'settings.admin-bank-setting', component: SettingsAdminBankSetting },
       { path: 'admin-marking-setting', name: 'settings.admin-marking-setting', component: SettingsAdminMarkingSetting },
       { path: 'admin-tax-setting', name: 'settings.admin-tax-setting', component: SettingsAdminTaxSetting },
-      { path: 'admin-billing-charge-setting', name: 'settings.admin-billing-charge-setting', component: SettingsAdminBillingChargeSetting },
+      { path: 'admin-billing-charge-setting', name: 'settings.admin-billing-charge-setting', component: SettingsAdminBillingChargeSetting }
     ] },
 
   // Booking