diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index f290f2ab..482bd3cc 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -14,17 +14,14 @@
           <!-- upload image -->
           <div class="card-body">
 
-            <el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :auto-upload="false" :on-change="beforeFileUpload" :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>
+            <el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :auto-upload="false" :on-change="beforeFileUpload" :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>
               <i class="el-icon-upload" />
               <div class="el-upload__text">Drop file here or
                 <em>click to upload</em>
               </div>
               <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
             </el-upload>
-            <el-upload class="upload-demo uploadAreaTwo" :action="'/api/booking/' + booking_id + '/upload-po'" :on-preview="handlePreview"
-              :on-remove="handleRemove" :before-remove="beforeRemove" multiple :file-list="fileList">
+            <el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :file-list="fileList" multiple class="upload-demo uploadAreaTwo" >
               <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>
@@ -40,8 +37,8 @@
         <div class="card">
           <div class="card-header">China Bank Slip</div>
           <div class="card-body">
-            <a target="_blank" :href="getURL(booking_details.china_bankslip_path)">
-              <img v-if="isImage(booking_details.china_bankslip_path)" v-bind:src="booking_details.china_bankslip_path" class="image">
+            <a :href="getURL(booking_details.china_bankslip_path)" target="_blank" >
+              <img v-if="isImage(booking_details.china_bankslip_path)" :src="booking_details.china_bankslip_path" class="image">
               <p v-else>Download</p>
             </a>
           </div>
@@ -95,7 +92,7 @@
                   <td>{{ booking_details.rate }}</td>
                 </tr>
                 <tr>
-                  <td></td>
+                  <td/>
                   <td>
                     <b>MYR {{ booking_details.bia }}</b>
                   </td>
@@ -114,8 +111,8 @@
       <div class="card-header">Order Bankin Slip</div>
       <div class="row">
         <div class="card-body">
-          <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
-            <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+          <a :href="getURL(booking_details.user_bankslip_path)" target="_blank" >
+            <img v-if="isImage(booking_details.user_bankslip_path)" :src="booking_details.user_bankslip_path" class="image">
             <p v-else>Download</p>
           </a>
         </div>
@@ -184,7 +181,7 @@
   }
 </style>
 <script>
- import ProgressTrack from '~/components/ProgressTrack'
+import ProgressTrack from '~/components/ProgressTrack'
 import X2ProgressTrack from '~/components/X2ProgressTrack'
 import axios from 'axios'
 import ImageCompressor from 'image-compressor.js'
@@ -194,142 +191,140 @@ export default {
     'progress-track': ProgressTrack,
     'x2-progress-track': X2ProgressTrack
   },
-    data() {
-      return {
-        booking_id: this.$route.params.id,
-        trackerConfig :{
-            status: 5,
-            term: null
-        },
-        purchaseOrderArray: [],
-        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
-          this.trackerConfig.term = response.data.term
-          loading.close()
-
-        }).catch((error) => {
-          console.log(error)
-          loading.close()
-          this.$router.push({
-            name: 'notfound'
-          })
-        })
-    },
-    methods: {
-      uploadPo() {
-        this.loading_btn = true
-        console.log(this.purchaseOrderArray);
-        axios
-          .post('/api/booking/' + this.$route.params.id + '/confirm-po', { images: this.purchaseOrderArray})
-          .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
-          })
+  data () {
+    return {
+      booking_id: this.$route.params.id,
+      trackerConfig: {
+        status: 5,
+        term: null
       },
-      beforeFileUpload(file, fileList) {
-        this.purchaseOrderArray = [];
-        var vm = this;
-        for (var i in fileList) {
-          var filetype = fileList[i].raw.type.split("/")[0];
-          if(filetype === 'image'){
-            new ImageCompressor(fileList[i].raw, {
-              quality: .4,
-              convertSize: 1500000,
-              success(result) {
-                vm.convertFile(result)
-              },
-              error(e) {
-                console.log(e.message);
-              }
-            });
-          } else {
-            this.convertFile(fileList[i].raw)
-          }
-          
-        }
-
-        
-      },
-      convertFile(file){
-        var vm = this,
-            reader = new FileReader();
-        reader.readAsDataURL(file); 
-        reader.onloadend = function() {
-          vm.purchaseOrderArray.push(reader.result);
-          console.log(vm.purchaseOrderArray);
-        }
-      },
-      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) {
-          if(path != null){
-              var ext = this.getExtension(path);
-              return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
-          } else {
-              return false;
-          }
-
-      },
-      getURL(path) {
-        var getUrl = window.location;
-        var baseUrl = getUrl.protocol + "//" + getUrl.host;
-        return baseUrl + path;
+      purchaseOrderArray: [],
+      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) => {
+        console.log(response)
+        this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
+        loading.close()
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+  },
+
+  methods: {
+    uploadPo () {
+      this.loading_btn = true
+      console.log(this.purchaseOrderArray)
+      axios
+        .post('/api/booking/' + this.$route.params.id + '/confirm-po', { images: this.purchaseOrderArray })
+        .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) => {
+          console.error(error)
+          this.$message({
+            showClose: true,
+            message: 'Please upload your purchase order',
+            type: 'error',
+            duration: 30000
+          })
+          this.loading_btn = false
+        })
+    },
+    beforeFileUpload (file, fileList) {
+      this.purchaseOrderArray = []
+      const vm = this
+      for (let i in fileList) {
+        const filetype = fileList[i].raw.type.split('/')[0]
+        if (filetype === 'image') {
+          ImageCompressor(fileList[i].raw, {
+            quality: 0.4,
+            convertSize: 1500000,
+            success (result) {
+              vm.convertFile(result)
+            },
+            error (e) {
+              console.error(e.message)
+            }
+          })
+        } else {
+          this.convertFile(fileList[i].raw)
+        }
+      }
+    },
+    convertFile (file) {
+      let vm = this
+      const reader = new FileReader()
+      reader.readAsDataURL(file)
+      reader.onloadend = function () {
+        vm.purchaseOrderArray.push(reader.result)
+        console.log(vm.purchaseOrderArray)
+      }
+    },
+    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) {
+      if (path != null) {
+        const ext = this.getExtension(path)
+        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png'
+      } else {
+        return false
+      }
+    },
+    getURL (path) {
+      const getUrl = window.location
+      const baseUrl = getUrl.protocol + '//' + getUrl.host
+      return baseUrl + path
+    }
   }
-</script>
\ No newline at end of file
+}
+</script>