From 8727f7d9cbec779f786522bf091605f589a8a987 Mon Sep 17 00:00:00 2001
From: lonetrinity <psychixkilax@com>
Date: Tue, 31 Jul 2018 17:04:25 +0800
Subject: [PATCH] fix/merge_revert

---
 resources/assets/js/app.js                    |  34 +-
 .../js/components/AdminProgressTrack.vue      |   4 +-
 .../assets/js/components/LocaleDropdown.vue   | 212 +++---
 resources/assets/js/components/Navbar.vue     |   2 +-
 .../assets/js/components/ProgressTrack.vue    |   6 +-
 .../js/pages/admin/booking/bookingDetail.vue  | 119 ++--
 .../js/pages/admin/booking/completed.vue      |  84 +--
 .../pages/admin/booking/supplierBooking.vue   | 247 +++----
 .../js/pages/admin/booking/supplierReport.vue | 625 +++++++++---------
 .../admin/booking/uploadChinaBankslip.vue     | 258 +++-----
 .../js/pages/admin/booking/uploadInvoice.vue  | 276 ++++----
 .../js/pages/admin/booking/verification.vue   | 266 ++++----
 .../assets/js/pages/admin/complete-orders.vue | 184 +++---
 resources/assets/js/pages/admin/home.vue      | 121 ++--
 .../js/pages/admin/transaction-history.vue    |  36 +-
 .../pages/admin/upload-supplier-bank-slip.vue |  92 +--
 resources/assets/js/pages/auth/register.vue   | 203 ++----
 .../assets/js/pages/booking/completed.vue     |  71 +-
 .../assets/js/pages/booking/confirmation.vue  |  55 +-
 resources/assets/js/pages/booking/po.vue      |  61 +-
 .../assets/js/pages/booking/poComplete.vue    |  46 +-
 .../assets/js/pages/booking/transfer.vue      |  53 +-
 .../assets/js/pages/booking/uploadPo.vue      | 215 +++---
 .../js/pages/booking/uploadUserBankSlip.vue   |   2 +-
 resources/assets/js/pages/home.vue            | 256 ++++---
 .../js/pages/settings/admin-bank-setting.vue  | 288 ++++----
 .../settings/admin-billing-charge-setting.vue | 122 ++--
 .../js/pages/settings/admin-china-bank.vue    | 542 +++++++--------
 .../pages/settings/admin-credit-setting.vue   | 155 ++---
 .../js/pages/settings/admin-malaysia-bank.vue | 551 +++++++--------
 .../pages/settings/admin-marking-setting.vue  | 397 +++++------
 .../js/pages/settings/admin-supplier.vue      | 428 ++++++------
 .../js/pages/settings/admin-tax-setting.vue   | 124 ++--
 resources/assets/js/pages/settings/index.vue  | 145 ++--
 resources/assets/js/pages/welcome.vue         |  28 +-
 resources/assets/js/router/routes.js          |   2 +-
 36 files changed, 3101 insertions(+), 3209 deletions(-)

diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index 9509ac12..e0e5bcc2 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 2b97fa9c..3a0a6507 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 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="Supplier Booking" v-if="!(value.term === 'x1_ba' || value.term === 'x2_cheque')"/>
+      <el-step title="Supplier Report" v-if="!(value.term === 'x1_ba' || value.term === 'x2_cheque')"/>
       <el-step title="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 e3911121..b4a2e143 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 v-model="UpdateRatePopoverVisible" placement="top" width="300">
+    <ul class="navbar-nav">
+      <li v-if="(user && role == 'admin')" class="nav-item">
+        <el-popover placement="top" width="300" v-model="UpdateRatePopoverVisible">
             <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 slot="reference" class="nav-link" href="#" role="button">Update Rate</a>
-          </el-popover>
-        </li>
-      </ul>
+            <a class="nav-link" href="#" role="button" slot="reference">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 :visible.sync="UpdateRateDialogVisible" align="center" width="900px">
-      <el-form ref="rate" :inline="true" :model="rate" :rules="rules" align="center">
+  </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">
 
-        <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>
+        <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>
         <br>
-        <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-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-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 :visible.sync="DoneUpdateRateDialogVisible" align="center" width="30%">
-      <span>Rate Successfully Updated</span><br><br>
-      <div align="center">
+  <el-dialog align="center" :visible.sync="DoneUpdateRateDialogVisible" 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,52 +133,22 @@ 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.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
+            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)
@@ -186,6 +156,37 @@ 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({
@@ -195,20 +196,21 @@ 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 4cbf64a2..5263cd80 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" :key="item.id">
+                  <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 d5862b55..21241dfb 100644
--- a/resources/assets/js/components/ProgressTrack.vue
+++ b/resources/assets/js/components/ProgressTrack.vue
@@ -1,6 +1,6 @@
 <template>
   <el-row>
-    <el-steps :value="value" :active="value" :align-center="true" class="progressBar" process-status="wait" finish-status="success">
+    <el-steps class="progressBar" :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
       <el-step title="Booking"/>
       <el-step title="Payment"/>
       <el-step title="Order Confirmation"/>
@@ -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 9f6c7940..197f77c9 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 style="margin-top:5%;"></h4>
       <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 class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
           <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
             <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
               <div class="hidden-columns">
-                <div/>
-                <div/>
+                <div></div>
+                <div></div>
               </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 class="cell"></div>
                       </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 class="cell"></div>
                       </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 class="cell"> </div>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"/>
+                        <div class="cell"> </div>
                       </td>
                     </tr>
                     <!---->
@@ -169,7 +169,7 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"/>
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
         </div>
@@ -210,53 +210,54 @@
   }
 </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)'
-    })
-
-    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'
-        })
+  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'
+          })
+        })
+    },
   }
-}
-</script>
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/admin/booking/completed.vue b/resources/assets/js/pages/admin/booking/completed.vue
index d4eca8d9..e3f14b71 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 :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">
+              <a target="_blank" :href="getURL(booking_details.user_po_path)">
+                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
                 <p v-else>Download</p>
               </a>
             </el-col>
@@ -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 :href="getURL(cn_bankslip)" target="_blank">
-                  <img v-if="isImage(cn_bankslip)" :src="cn_bankslip" class="image">
+              <div v-for="cn_bankslip in booking_details.china_bankslip_path" :key='cn_bankslip'>
+                <a target="_blank" :href="getURL(cn_bankslip)">
+                  <img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
                   <p v-else>Download</p>
-                  <br>
+                  <br/>
                 </a>
               </div>
             </el-col>
@@ -56,8 +56,8 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12" align="center">
-              <a :href="getURL(booking_details.invoice_path)" target="_blank">
-                <img v-if="isImage(booking_details.invoice_path)" :src="booking_details.invoice_path" class="image">
+              <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">
                 <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 class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
           <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
             <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
               <div class="hidden-columns">
-                <div/>
-                <div/>
+                <div></div>
+                <div></div>
               </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 class="cell"></div>
                       </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 class="cell"></div>
                       </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 class="cell"></div>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"/>
+                        <div class="cell"></div>
                       </td>
                     </tr>
                     <!---->
@@ -240,7 +240,7 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"/>
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
         </div>
@@ -270,8 +270,8 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <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">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
               <p v-else>Download</p>
             </a>
           </el-col>
@@ -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 996c9195..c4490a78 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 style="margin-top:5%;"></h4>
       <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 class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
           <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
             <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
               <div class="hidden-columns">
-                <div/>
-                <div/>
+                <div></div>
+                <div></div>
               </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 class="cell"></div>
                       </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 class="cell"></div>
                       </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 class="cell"></div>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"/>
+                        <div class="cell"></div>
                       </td>
                     </tr>
                     <!---->
@@ -170,7 +170,7 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"/>
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
         </div>
@@ -204,8 +204,9 @@
             <el-form ref="supplierBookingForm" :model="supplierBookingForm" :rules="rules">
               <div align="center">
                 <el-form-item prop="supplier">
-                  <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 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>
                 </el-form-item>
 
@@ -235,133 +236,137 @@
   }
 </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
-      },
-      supplier: null,
-      supplier_options: null,
-      supplierBookingForm: {
+  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,
-        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'
-        }]
+        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'
+          }]
+        },
       }
-    }
-  },
-  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'
-        })
+    },
+    beforeCreate() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Please wait..',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
       })
 
-    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'
+      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'
+          })
         })
-      })
-  },
-  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
+        .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'
+          })
+        })
 
-          axios.post('/api/supplier-booking', newReport)
+    },
+    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)
             .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>
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/admin/booking/supplierReport.vue b/resources/assets/js/pages/admin/booking/supplierReport.vue
index 36778b00..72705c4a 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 style="margin-top:5%;"></h4>
       <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 class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
           <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
             <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
               <div class="hidden-columns">
-                <div/>
-                <div/>
+                <div></div>
+                <div></div>
               </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 class="cell"></div>
                       </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 class="cell"></div>
                       </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 class="cell"></div>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"/>
+                        <div class="cell"></div>
                       </td>
                     </tr>
                     <!---->
@@ -170,7 +170,7 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"/>
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
             </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 v-insert-message="supplier_booking" id="myCanvas" ref="myCanvas"/>
+            <canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
             <br>
-            <el-button type="text" @click="downloadReport()">Download Now</el-button>
+            <el-button @click="downloadReport()" type="text">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 :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">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
               <p v-else>Download</p>
             </a>
           </el-col>
@@ -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" type="primary" @click="goToSupplierBooking">Edit</el-button>
-            <el-button :loading="loading_btn" type="success" @click="completeReport">Done</el-button>
+            <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-col>
         </el-row>
       </el-card>
@@ -250,308 +250,313 @@
   }
 </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
-  },
-  directives: {
-    insertMessage: function (canvasElement, binding) {
+  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) {
       	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.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.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(){
+            // 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>
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
index 3afaf10f..5b66d902 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 style="margin-top:5%;"></h4>
       <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 class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
           <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
             <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
               <div class="hidden-columns">
-                <div/>
-                <div/>
+                <div></div>
+                <div></div>
               </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 class="cell"></div>
                       </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 class="cell"></div>
                       </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 class="cell"></div>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"/>
+                        <div class="cell"></div>
                       </td>
                     </tr>
                     <!---->
@@ -170,7 +170,7 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"/>
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
         </div>
@@ -205,18 +205,18 @@
               <div align="center">
 
                 <!-- upload image -->
-                <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-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'" 
+                :on-preview="handlePreview"
+                :on-error="uploadError"
+                  accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
+                  :on-remove="handleRemove" :multiple="false" list-type="picture">
                   <el-button size="small" type="primary">Click to upload</el-button>
                   <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
                 </el-upload>
 
                 <br>
                 <!-- upload image end -->
-                <!--                 <el-form-item prop="date">
+<!--                 <el-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,52 +244,9 @@
   }
 </style>
 <script>
-import ProgressTrack from '~/components/AdminProgressTrack'
-import axios from 'axios'
+  import ProgressTrack from '~/components/AdminProgressTrack'
+  import axios from 'axios'
 
-<<<<<<< HEAD
-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'
-        // }]
-=======
   export default {
     components: {
       'progress-track': ProgressTrack
@@ -355,112 +312,85 @@ export default {
         //     }
         //   }]
         // }
->>>>>>> efa9ed6c91b98b6889eebd459e952a75a6c68708
       }
-      // 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'
-        })
+    },
+    beforeCreate() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Please wait..',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
       })
-  },
-  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
+      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'
           })
-        }
-      })
+        })
     },
-    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.`)
+    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
+                })
+          }
+        })
+      },
+      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>
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index fa82ccb6..13c9016d 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 style="margin-top:5%;"></h4>
       <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 class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
           <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
             <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
               <div class="hidden-columns">
-                <div/>
-                <div/>
+                <div></div>
+                <div></div>
               </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 class="cell"></div>
                       </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 class="cell"></div>
                       </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 class="cell"></div>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"/>
+                        <div class="cell"></div>
                       </td>
                     </tr>
                     <!---->
@@ -173,7 +173,7 @@
                 <!---->
                 <!---->
               </div>
-              <div class="el-table__column-resize-proxy" style="display: none;"/>
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
             </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 :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">
+              <a target="_blank" :href="getURL(booking_details.user_po_path)">
+                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
                 <p v-else>Download</p>
               </a>
             </el-col>
@@ -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
-      },
-      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()
+  export default {
+    components: {
+      'progress-track': ProgressTrack
+    },
+    data() {
+      return {
+        trackerConfig :{
+          status: 6,
+          term: null
         },
-        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)
-          }
-        }]
+        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);
+            }
+          }]
+        }
       }
-    }
-  },
-  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'
-        })
+    },
+    beforeCreate() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Please wait..',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
       })
-  },
-  methods: {
-    confirmInvoice () {
+
+      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 () {
       this.loading_btn = true
       axios
         .post('/api/booking/' + this.$route.params.id + '/confirm-invoice')
@@ -361,40 +361,40 @@ export default {
           })
           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>
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/admin/booking/verification.vue b/resources/assets/js/pages/admin/booking/verification.vue
index 07670115..39b2f2b3 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 style="margin-top:5%;"></h4>
       <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 class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
           <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
             <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
               <div class="hidden-columns">
-                <div/>
-                <div/>
+                <div></div>
+                <div></div>
               </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 class="cell"></div>
                       </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 class="cell"></div>
                       </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 class="cell"></div>
                       </td>
                       <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"/>
+                        <div class="cell"></div>
                       </td>
                     </tr>
                     <!---->
@@ -172,7 +172,7 @@
               <!---->
               <!---->
               <!---->
-              <div class="el-table__column-resize-proxy" style="display: none;"/>
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
         </div>
@@ -202,8 +202,8 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <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">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
               <p v-else>Download</p>
             </a>
           </el-col>
@@ -213,27 +213,29 @@
       <el-card class="box-card">
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <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-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-col>
         </el-row>
       </el-card>
     </el-row>
 
-    <el-dialog :visible.sync="rejectDialogVisible" title="Reason of Reject" width="30%" center>
+    <el-dialog title="Reason of Reject" :visible.sync="rejectDialogVisible" width="30%" center>
       <span>
         <el-input
-          :rows="2"
-          v-model="reject_reason"
           type="textarea"
-          placeholder="Please input the reason"/>
+          :rows="2"
+          placeholder="Please input the reason"
+          v-model="reject_reason">
+        </el-input>
       </span>
       <span slot="footer" class="dialog-footer">
         <el-button @click="rejectDialogVisible = false">Cancel</el-button>
-        <el-button :loading="loading_btn" type="primary" @click="rejectUserSlip">Submit</el-button>
+        <el-button type="primary" :loading="loading_btn" @click="rejectUserSlip">Submit</el-button>
       </span>
     </el-dialog>
 
+
   </el-main>
 </template>
 <style>
@@ -253,126 +255,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)'
-    })
-
-    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'
-        })
+  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)'
       })
-  },
-  methods: {
-    approveUserSlip () {
-      this.loading_btn = true
 
-      let newApprove = {
-        estimated_arrival_time: this.estimated_arrival_time
-      }
-
-      axios.post('/api/booking/' + this.$route.params.id + '/approve-bank-slip', newApprove)
+      axios
+        .get('/api/admin/booking/' + this.$route.params.id)
         .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
+          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'
+          })
         })
     },
-    rejectUserSlip () {
-      this.loading_btn = true
-      this.centerDialogVisible = false
+    methods: {
+      approveUserSlip() {
+        this.loading_btn = true
 
-      let newApprove = {
-        estimated_arrival_time: this.estimated_arrival_time,
-        reject_reason: this.reject_reason
+        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;
       }
-
-      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>
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/admin/complete-orders.vue b/resources/assets/js/pages/admin/complete-orders.vue
index 91bfdf16..9ed8dac5 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 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-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>
   </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
-      })
-    },
-    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 }
+        }
+      },
+      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
           })
-          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
+        },
+        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
 
-        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>
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/admin/home.vue b/resources/assets/js/pages/admin/home.vue
index 27878a3c..2a7ae9b5 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 :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>
+        <!-- <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>
           <!-- <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 :disabled="!pagination.prev_page_url" type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)">
+        </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">
         Previous
       </el-button>
-      <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)">
+      <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">
         Next
       </el-button>
     </div>
@@ -75,25 +75,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,
@@ -103,8 +103,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,
@@ -112,21 +112,24 @@ 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 bd2f739e..6eaa4c36 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 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>
+        <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>
-  </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 fef0c4ea..7dcbc597 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 label="Amount (RMB)" sortable/>
-      <el-table-column label="Date" sortable/>
-      <el-table-column label="Bank Slip File"/>
-    </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>
+            <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>
 
     <!-- popup add new dialog -->
-    <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 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>
-    <!-- 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>
+<!-- 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>
 </template>
 
 <script>
 export default {
-  data () {
-    return {
-      AddNewDialogVisible: false,
-      DoneAddNewDialogVisible: false,
-      date: ''
+    data() {
+      return {
+        AddNewDialogVisible: false,
+        DoneAddNewDialogVisible: false,
+        date: ''
+      }
+    },
+    methods: {
+        handlePreview(file) {
+        console.log(file);
+      }
     }
-  },
-  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 6f1ba79f..c6609c44 100644
--- a/resources/assets/js/pages/auth/register.vue
+++ b/resources/assets/js/pages/auth/register.vue
@@ -1,81 +1,4 @@
 <template>
-<<<<<<< HEAD
-  <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="{'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="{'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="{'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>
-
-                <!-- GitHub Register Button -->
-                <login-with-github/>
-              </div>
-            </div>
-          </form>
-        </card>
-      </div>
-    </div>
-  </div>
-=======
 	<div class="container">
 		<div class="row">
 			<div class="col-lg-8 m-auto">
@@ -152,7 +75,6 @@
 			</div>
 		</div>
 	</div>
->>>>>>> efa9ed6c91b98b6889eebd459e952a75a6c68708
 </template>
 
 <script>
@@ -162,78 +84,81 @@ 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 fe8f013d..19c6c4e8 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 :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">
+              <a target="_blank" :href="getURL(booking_details.user_po_path)">
+                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
                 <p v-else>Download</p>
               </a>
             </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 :href="getURL(cn_bankslip)" target="_blank">
-                <img v-if="isImage(cn_bankslip)" :src="cn_bankslip" class="image">
+            <div  v-for="cn_bankslip in booking_details.china_bankslip_path" :key='cn_bankslip'> 
+              <a target="_blank" :href="getURL(cn_bankslip)">
+                <img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
                 <p v-else>Download</p>
-                <br>
+                <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 :href="getURL(booking_details.invoice_path)" target="_blank">
-                <img v-if="isImage(booking_details.invoice_path)" :src="booking_details.invoice_path" class="image">
+            <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">
                 <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 :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">
+          <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+            <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
             <p v-else>Download</p>
-          </a>
+          </a>  
         </div>
       </div>
     </div>
@@ -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,7 +180,8 @@ 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()
@@ -190,17 +191,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 0db8a151..24dc64a5 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 :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">
+          <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+            <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
             <p v-else>Download</p>
           </a>
         </div>
@@ -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,6 +135,7 @@ export default {
       .then((response) => {
         this.booking_details = response.data
         loading.close()
+
       }).catch((error) => {
         console.log(error)
         loading.close()
@@ -144,18 +145,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 cd637759..8f248d6b 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 :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">
+              <a target="_blank" :href="getURL(booking_details.user_po_path)">
+                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
                 <p v-else>Download</p>
               </a>
             </div>
@@ -25,8 +25,8 @@
           <div class="card-header">China Bank Slip</div>
           <div class="row">
             <div class="card-body">
-              <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">
+              <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">
                 <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 :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">
+          <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+            <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
             <p v-else>Download</p>
           </a>
         </div>
@@ -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,6 +177,7 @@ export default {
       .then((response) => {
         this.booking_details = response.data
         loading.close()
+
       }).catch((error) => {
         console.log(error)
         loading.close()
@@ -186,17 +187,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 65867f5c..78a53e43 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 :src="booking_details.user_po_path" class="image">
+                <img v-bind: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 :src="booking_details.china_bankslip_path" class="image">
+                <img v-bind: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 :href="booking_details.user_bankslip_path" target="_blank">
-            <img :src="booking_details.user_bankslip_path" class="uploadedImage">
-          </a>
+          <a target="_blank" :href="booking_details.user_bankslip_path">
+            <img v-bind: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,6 +164,7 @@ export default {
       .then((response) => {
         this.booking_details = response.data
         loading.close()
+
       }).catch((error) => {
         console.log(error)
         loading.close()
@@ -171,6 +172,7 @@ export default {
           name: 'notfound'
         })
       })
+
   },
   methods: {
 
diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index 3c9e0c05..877f757b 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 :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">
+          <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">
               <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,6 +156,7 @@ export default {
       .then((response) => {
         this.booking_details = response.data
         loading.close()
+
       }).catch((error) => {
         console.log(error)
         loading.close()
@@ -165,17 +166,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 fe054a7c..6fe76174 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 :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-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-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 :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">
+            <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">
               <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 :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">
+          <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+            <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
             <p v-else>Download</p>
           </a>
         </div>
@@ -183,105 +183,106 @@
   }
 </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
+  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;
       }
     }
-  },
-  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>
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index c0c6f224..4f640558 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -371,4 +371,4 @@
 			}
 		}
 	}
-</script>
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index bb2bf64d..748e8fb6 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 :loading="loading_btn" type="primary" size="mini" @click="refreshRate()">Refresh Rate</el-button></div>
+    <el-button type="primary" :loading="loading_btn" 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 Name" 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" 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" 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,24 +250,17 @@
           </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/>
-          </tr>
-          <tr>
-            <td align="center" colspan="2">
-              <b>CIEF WORLDWIDE SDN. BHD.(1134596-M)</b>
-              <br>
-              <b>MBB 568603010762</b>
-            </td>
+            <td></td>
+            <td></td>
           </tr>
         </tbody>
       </table>
@@ -282,8 +275,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 +318,11 @@
       </div>
     </el-row><br><br>
     <div align="right">
-      <el-button :disabled="!pagination.prev_page_url" type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)">
+      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
         Previous
       </el-button>
-      <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)">
+      <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">
         Next
       </el-button>
     </div>
@@ -364,9 +357,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 +373,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 +456,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 +488,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 +508,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 +517,7 @@ export default {
       }
       this.pagination = pagination
     },
-    fetchPaginateBooking (url) {
+    fetchPaginateBooking(url) {
       this.url = url
       this.getBooking()
     },
@@ -566,65 +559,66 @@ 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 8c262cc9..7666ba77 100644
--- a/resources/assets/js/pages/settings/admin-bank-setting.vue
+++ b/resources/assets/js/pages/settings/admin-bank-setting.vue
@@ -1,156 +1,160 @@
 <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-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-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>
-  </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
+    // 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
+                });
+            })
+        },
     }
-  },
-  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>
+
+</script>
\ No newline at end of file
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 3a63a878..1a3c2ecd 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 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>
+    <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>
 </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>
+    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
diff --git a/resources/assets/js/pages/settings/admin-china-bank.vue b/resources/assets/js/pages/settings/admin-china-bank.vue
index df7f69dd..9509fff1 100644
--- a/resources/assets/js/pages/settings/admin-china-bank.vue
+++ b/resources/assets/js/pages/settings/admin-china-bank.vue
@@ -1,278 +1,281 @@
 <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 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>
+<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>
 </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
-        })
+	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;
 
-        .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
-    }
-  }
-}
+				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{
@@ -280,3 +283,4 @@ export default {
 		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 fa9b7b2b..f776a0c8 100644
--- a/resources/assets/js/pages/settings/admin-credit-setting.vue
+++ b/resources/assets/js/pages/settings/admin-credit-setting.vue
@@ -1,82 +1,83 @@
 <template>
-  <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 :
+    <div>
+        <span align="center">
+            <h4>User Credit Limit Setting</h4>
+        </span>
         <br>
-        <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>
+        <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>
 </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>
+    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
diff --git a/resources/assets/js/pages/settings/admin-malaysia-bank.vue b/resources/assets/js/pages/settings/admin-malaysia-bank.vue
index 88df2c7a..ebf2f3ad 100644
--- a/resources/assets/js/pages/settings/admin-malaysia-bank.vue
+++ b/resources/assets/js/pages/settings/admin-malaysia-bank.vue
@@ -1,282 +1,286 @@
 <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 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>
+<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>
 </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{
@@ -284,3 +288,4 @@ export default {
 		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 f23d7292..491c9aa2 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 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>
+<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>
 
-    </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>
+			</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>
 </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,126 +97,127 @@ export default {
 			      }]
 		        },
 		        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{
@@ -224,3 +225,5 @@ export default {
 		left: 0;
 	}
 </style>
+
+
diff --git a/resources/assets/js/pages/settings/admin-supplier.vue b/resources/assets/js/pages/settings/admin-supplier.vue
index 91457288..eb151563 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 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>
+<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>
 </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 29eaefa7..4809493f 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 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>
+    <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>
 </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>
+    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
diff --git a/resources/assets/js/pages/settings/index.vue b/resources/assets/js/pages/settings/index.vue
index be4a7f7a..782a8077 100644
--- a/resources/assets/js/pages/settings/index.vue
+++ b/resources/assets/js/pages/settings/index.vue
@@ -21,86 +21,87 @@
 </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']
-    },
-    tabs () {
-      return [{
-        icon: 'user',
-        name: this.$t('profile'),
-        route: 'settings.profile',
-        role: 'member'
+    computed: {
+      role() {
+        return this.$store.getters['auth/role']
       },
-      {
-        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'
+      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'
+          },
+        ]
       }
-      ]
     }
-  }
 
-}
+
+  }
 </script>
 
 <style>
   .settings-card .card-body {
     padding: 0;
   }
-</style>
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/pages/welcome.vue b/resources/assets/js/pages/welcome.vue
index 5f224e3b..d626947f 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 49e2371b..91506aeb 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