diff --git a/app/Http/Controllers/InvoiceController.php b/app/Http/Controllers/InvoiceController.php
index 6eee03c4..8c8b6844 100644
--- a/app/Http/Controllers/InvoiceController.php
+++ b/app/Http/Controllers/InvoiceController.php
@@ -22,7 +22,7 @@ class InvoiceController extends Controller
 
         $invoice = Invoice::where('booking_id', $id)->first();
         if (!$invoice) {
-            return response().json(['message' => 'Invoice Not Found'], 404);
+            return response()->json(['message' => 'Invoice Not Found'], 404);
         }
         $lines = InvoiceDetails::where('invoice_id', $invoice['id'])->orderBy('order', 'asc')->get();
 
diff --git a/resources/assets/js/components/NewInvoice.vue b/resources/assets/js/components/NewInvoice.vue
index 64f7420a..3b8e0a43 100644
--- a/resources/assets/js/components/NewInvoice.vue
+++ b/resources/assets/js/components/NewInvoice.vue
@@ -1,7 +1,12 @@
 /* eslint-disable camelcase */
 <template>
   <div class="invoice">
-    <h3 class="title">Purchase Order</h3>
+    <h3 v-if="created" class="title">
+      Purchase Order (Pending Approval)
+    </h3>
+    <h3 v-else class="title">
+      Purchase Order
+    </h3>
 
     <div class="invoice-container">
       <form @submit.prevent="submitForm">
@@ -24,6 +29,7 @@
                        'is-invalid': $v.form.formData.buyer_company.$invalid && $v.form.formData.buyer_company.$dirty,
                        'is-valid': !$v.form.formData.buyer_company.$invalid && $v.form.formData.buyer_company.$dirty
                      }"
+                     :disabled="!editable"
                      type="text"
                      class="form-control"
                      @blur="$v.form.formData.buyer_company.$touch()">
@@ -43,6 +49,7 @@
                        'is-invalid': $v.form.formData.contact_no.$invalid && $v.form.formData.contact_no.$dirty,
                        'is-valid': !$v.form.formData.contact_no.$invalid && $v.form.formData.contact_no.$dirty
                      }"
+                     :disabled="!editable"
                      type="tel"
                      class="form-control"
                      @blur="$v.form.formData.contact_no.$touch()">
@@ -58,6 +65,7 @@
                           'is-invalid': $v.form.formData.address.$invalid && $v.form.formData.address.$dirty,
                           'is-valid': !$v.form.formData.address.$invalid && $v.form.formData.address.$dirty
                         }"
+                        :disabled="!editable"
                         class="form-control"
                         cols="30"
                         rows="4"
@@ -100,6 +108,7 @@
                              'is-invalid': $v.form.addLine.stock_code.$invalid && $v.form.addLine.stock_code.$dirty,
                              'is-valid': !$v.form.addLine.stock_code.$invalid && $v.form.addLine.stock_code.$dirty
                            }"
+                           :disabled="!editable"
                            name="stockcode" type="text"
                            class="form-control"
                            @blur="$v.form.addLine.stock_code.$touch()">
@@ -116,6 +125,7 @@
                                 'is-invalid': $v.form.addLine.description.$invalid && $v.form.addLine.description.$dirty,
                                 'is-valid': !$v.form.addLine.description.$invalid && $v.form.addLine.description.$dirty
                               }"
+                              :disabled="!editable"
                               name="description" cols="20" rows="2"
                               @blur="$v.form.addLine.description.$touch()"/>
                     <div class="invalid-feedback">
@@ -131,6 +141,7 @@
                              'is-invalid': $v.form.addLine.quantity.$invalid && $v.form.addLine.quantity.$dirty,
                              'is-valid': !$v.form.addLine.quantity.$invalid && $v.form.addLine.quantity.$dirty
                            }"
+                           :disabled="!editable"
                            type="number"
                            min="1"
                            class="form-control"
@@ -150,6 +161,7 @@
                              'is-invalid': $v.form.addLine.unit_price_rmb.$invalid && $v.form.addLine.unit_price_rmb.$dirty,
                              'is-valid': !$v.form.addLine.unit_price_rmb.$invalid && $v.form.addLine.unit_price_rmb.$dirty
                            }"
+                           :disabled="!editable"
                            type="number"
                            min="0"
                            name="rmb-unit-price"
@@ -169,6 +181,7 @@
                              'is-invalid': $v.form.addLine.unit_price_rm.$invalid && $v.form.addLine.unit_price_rm.$dirty,
                              'is-valid': !$v.form.addLine.unit_price_rm.$invalid && $v.form.addLine.unit_price_rm.$dirty
                            }"
+                           :disabled="!editable"
                            type="number"
                            min="0"
                            name="rm-unit-price"
@@ -192,7 +205,7 @@
                   </div>
                 </td>
                 <td>
-                  <button class="btn btn-success" type="button" @click="onAddLine()">
+                  <button :disabled="!editable" class="btn btn-success" type="button" @click="onAddLine()">
                     Add
                   </button>
                 </td>
@@ -220,7 +233,7 @@
                   {{ line.total }}
                 </td>
                 <td>
-                  <button class="btn btn-danger" @click="onRemoveLine(index)">
+                  <button :disabled="!editable" class="btn btn-danger" @click="onRemoveLine(index)">
                     Remove
                   </button>
                 </td>
@@ -266,7 +279,7 @@
               <tr>
                 <td colspan="5">&nbsp;</td>
                 <td colspan="2">
-                  <button class="btn btn-success btn-block" type="submit">
+                  <button :disabled="!editable" class="btn btn-success btn-block" type="submit">
                     Create PO
                   </button>
                 </td>
@@ -399,10 +412,16 @@ export default {
       invoice_total: 0,
       tax: 0,
       subtotal: 0,
-      total: 0
+      total: 0,
+      role: null,
+      created: false
     }
   },
   computed: {
+    editable: function () {
+      // Not editable if created and not admin
+      return this.role === 'admin' || !this.created
+    }
   },
   validations: {
     form: {
@@ -452,10 +471,6 @@ export default {
   watch: {
     booking_details: function () {
       const {
-        buyer_company,
-        reg_no,
-        address,
-        contact_no,
         marking,
         tax,
         service_charge,
@@ -463,10 +478,6 @@ export default {
         rate
       } = this.booking_details
 
-      this.form.formData.buyer_company = buyer_company
-      this.form.formData.reg_no = reg_no
-      this.form.formData.address = address
-      this.form.formData.contact_no = contact_no
       this.form.formData.marking = marking
       this.tax = tax
       this.service_charge = service_charge
@@ -474,8 +485,9 @@ export default {
       this.rate = rate
     }
   },
-  created: {
-
+  mounted () {
+    this.getInvoice()
+    this.getUser()
   },
   methods: {
     onAddLine: function () {
@@ -555,8 +567,40 @@ export default {
 
       axios
         .post(url, this.form.formData)
-        .then(resp => console.log(resp))
-        .catch(err => console.error(err))
+        .then(resp => {
+          this.created = true
+          alert('PO Created. Pending Approval.')
+          this.$router.push({ name: 'home' })
+          console.log(resp)
+        })
+        .catch(err => {
+          alert(JSON.stringify(err.response.data.message))
+          console.error(err.response.data.message)
+        })
+    },
+    getInvoice () {
+      const url = '/api/invoice/' + this.booking_id
+      axios
+        .get(url)
+        .then(resp => {
+          this.form.formData.buyer_company = resp.data.buyer_company
+          this.form.formData.contact_no = resp.data.contact_no
+          this.form.formData.address = resp.data.address
+
+          resp.data.lines.forEach((el, i) => {
+            this.form.formData.lines.push(el)
+          })
+
+          this.created = true
+        })
+    },
+    getUser () {
+      const url = '/api/user'
+      axios
+        .get(url)
+        .then(resp => {
+          this.role = resp.data.role
+        })
     }
   }
 }
diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index 97942305..bbe208f8 100644
--- a/resources/assets/js/pages/admin/booking/uploadInvoice.vue
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -3,266 +3,270 @@
     <x2-progress-track v-if="(trackerConfig.term == 'x2_cash' || trackerConfig.term == 'x2_cheque' || trackerConfig.term == 'x2_ba')" v-model="trackerConfig" />
     <progress-track v-else v-model="trackerConfig" />
 
-    <div align="center">
-      <h4 style="margin-top:5%;"></h4>
-      <br>
-      <div v-if="booking_details.user_po_path">
-        <h4>Upload Invoice</h4>
-      </div>
-      <div v-else>
-        <h4>Waiting for User to Upload Purchase Order </h4>
+    <div id="old-invoice">
+      <div align="center">
+        <h4 style="margin-top:5%" />
         <br>
-        <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+        <div v-if="booking_details.user_po_path">
+          <h4>Upload Invoice</h4>
+        </div>
+        <div v-else>
+          <h4>Waiting for User to Upload Purchase Order </h4>
+          <br>
+          <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+        </div>
+        <br>
+        <!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
       </div>
       <br>
-      <!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
-    </div>
-    <br>
-        <el-row v-if="booking_details.user_po_path" :gutter="12" justify="center" align="center">
-      <el-col :span="12">
-        <el-card  class="box-card">
-          <div slot="header" class="clearfix">
-            <span>Upload Invoice</span>
-            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-          </div>
-
-          <!-- upload image -->
-          <el-upload :action="'/api/booking/' + booking_id + '/upload-invoice'" :on-exceed="handleExceed" :on-preview="handlePreview"
-                     :on-remove="handleRemove"
-                     :on-error="uploadError"
-                     accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
-                     class="upload-demo"
-                     drag
-                     multiple>
-            <i class="el-icon-upload"/>
-            <div class="el-upload__text">Drop file here or
-              <em>click to upload</em>
+      <el-row v-if="booking_details.user_po_path" :gutter="12" justify="center" align="center">
+        <el-col :span="12">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>Upload Invoice</span>
+              <!-- <el-button style="float: right padding: 3px 0" type="text">Operation button</el-button> -->
             </div>
-            <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 -->
+            <el-upload :action = "`/api/booking/${booking_id}/upload-invoice`"
+                       :on-exceed="handleExceed"
+                       :on-preview="handlePreview"
+                       :on-remove="handleRemove"
+                       :on-error="uploadError"
+                       accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
+                       class="upload-demo"
+                       drag
+                       multiple>
+              <i class="el-icon-upload"/>
+              <div class="el-upload__text">Drop file here or
+                <em>click to upload</em>
+              </div>
+              <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3mb</div>
+            </el-upload>
 
-          <div class="bottom clearfix" style="text-align:right;">
-            <el-button :loading="loading_btn" type="primary" @click="confirmInvoice">Submit</el-button>
-          </div>
-          <!-- upload image end -->
+            <br>
 
-        </el-card>
-      </el-col>
-      <el-col :span="12">
+            <div class="bottom clearfix" style="text-align:right">
+              <el-button :loading="loading_btn" type="primary" @click="confirmInvoice">Submit</el-button>
+            </div>
+            <!-- upload image end -->
+
+          </el-card>
+        </el-col>
+        <el-col :span="12">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>Customer Purchase Order</span>
+              <!-- <el-button style="float: right padding: 3px 0" type="text">Operation button</el-button> -->
+            </div>
+            <el-row :gutter="12" type="flex">
+              <el-col :span="12" align="center">
+                <div v-for="po in booking_details.user_po_path" :key="po">
+                  <a :href="getURL(po)" target="_blank">
+                    <img v-if="isImage(po)" :src="po" class="image" style="max-width: 100%">
+                    <p v-else>Download</p>
+                    <br>
+                  </a>
+                </div>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-col>
+      </el-row>
+      <br>
+      <el-row justify="center" align="center">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>Customer Purchase Order</span>
-            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+            <span>Order Details</span>
+            <!-- <el-button style="float: right padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
-          <el-row :gutter="12" type="flex">
-            <el-col :span="12" align="center">
-              <div v-for="po in booking_details.user_po_path" :key='po'>
-                <a target="_blank" :href="getURL(po)">
-                  <img v-if="isImage(po)" v-bind:src="po" class="image" style="max-width: 100%">
-                  <p v-else>Download</p>
-                  <br/>
-                </a>
+          <div class="el-row" style="margin-left: -6px margin-right: -6px">
+            <div class="el-col el-col-12" style="padding-left: 6px padding-right: 6px">
+              <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
+
+                <div class="el-table__body-wrapper is-scrolling-none">
+                  <table class="el-table__body" style="width: 400px" cellspacing="0" cellpadding="0" border="0">
+                    <colgroup>
+                      <col name="el-table_2_column_9" width="210">
+                      <col name="el-table_2_column_10" width="210">
+                    </colgroup>
+                    <tbody>
+                      <tr class="el-table__row">
+                        <td class="el-table_2_column_9 is-right ">
+                          <div class="cell">Ref No :</div>
+                        </td>
+                        <td class="el-table_2_column_10 is-left ">
+                          <div class="cell">{{ booking_details.id }}</div>
+                        </td>
+                      </tr>
+                      <tr class="el-table__row">
+                        <td class="el-table_2_column_9 is-right ">
+                          <div class="cell">Date :</div>
+                        </td>
+                        <td class="el-table_2_column_10 is-left ">
+                          <div class="cell">{{ booking_details.created_at }}</div>
+                        </td>
+                      </tr>
+                      <tr class="el-table__row">
+                        <td class="el-table_2_column_9 is-right ">
+                          <div class="cell">Customer Marking :</div>
+                        </td>
+                        <td class="el-table_2_column_10 is-left ">
+                          <div class="cell">{{ booking_details.marking }}</div>
+                        </td>
+                      </tr>
+                      <tr class="el-table__row">
+                        <td class="el-table_2_column_9 is-right ">
+                          <div class="cell">Term :</div>
+                        </td>
+                        <td class="el-table_2_column_10 is-left ">
+                          <div class="cell">{{ booking_details.term }}</div>
+                        </td>
+                      </tr>
+                      <tr class="el-table__row">
+                        <td class="el-table_2_column_9 is-right ">
+                          <div class="cell">Beneficiary Account : </div>
+                        </td>
+                        <td class="el-table_2_column_10 is-left ">
+                          <div class="cell">{{ booking_details.account_name }}</div>
+                        </td>
+                      </tr>
+                      <tr class="el-table__row">
+                        <td class="el-table_2_column_9 is-right ">
+                          <div class="cell">Beneficiary Account Number : </div>
+                        </td>
+                        <td class="el-table_2_column_10 is-left ">
+                          <div class="cell">{{ booking_details.account_num }}</div>
+                        </td>
+                      </tr>
+                      <!---->
+                    </tbody>
+                  </table>
+                  <!---->
+                  <!---->
+                </div>
+                <div class="el-table__column-resize-proxy" style="display: none" />
               </div>
+            </div>
+            <div 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 class="el-table__body-wrapper is-scrolling-none">
+                  <table class="el-table__body" style="width: 400px" cellspacing="0" cellpadding="0" border="0">
+                    <colgroup>
+                      <col name="el-table_3_column_11" width="200">
+                      <col name="el-table_3_column_12" width="200">
+                    </colgroup>
+                    <tbody>
+                      <tr class="el-table__row">
+                        <td class="el-table_3_column_11 is-right ">
+                          <div class="cell">CNY/RMB :</div>
+                        </td>
+                        <td class="el-table_3_column_12 is-left ">
+                          <div class="cell">CNY {{ booking_details.amount }}</div>
+                        </td>
+                      </tr>
+                      <tr class="el-table__row">
+                        <td class="el-table_3_column_11 is-right ">
+                          <div class="cell">+ Service Charge :</div>
+                        </td>
+                        <td class="el-table_3_column_12 is-left ">
+                          <div class="cell">CNY {{ booking_details.service_charge }}</div>
+                        </td>
+                      </tr>
+                      <tr class="el-table__row">
+                        <td class="el-table_3_column_11 is-right ">
+                          <div class="cell">/ RATE :</div>
+                        </td>
+                        <td class="el-table_3_column_12 is-left ">
+                          <div class="cell">{{ booking_details.rate }}</div>
+                        </td>
+                      </tr>
+                      <tr class="el-table__row">
+                        <td class="el-table_3_column_11 is-right ">
+                          <div class="cell"/>
+                        </td>
+                        <td class="el-table_3_column_12 is-left ">
+                          <div class="cell">MYR {{ booking_details.bia }}</div>
+                        </td>
+                      </tr>
+                      <!-- <tr class="el-table__row">
+                        <td class="el-table_3_column_11 is-right ">
+                          <div class="cell">+ GST 6% :</div>
+                        </td>
+                        <td class="el-table_3_column_12 is-left ">
+                          <div class="cell">MYR 4,430.88</div>
+                        </td>
+                      </tr> -->
+                      <tr class="el-table__row">
+                        <td class="el-table_3_column_11 is-right ">
+                          <div class="cell" />
+                        </td>
+                        <td class="el-table_3_column_12 is-left ">
+                          <div class="cell">
+                            <b>MYR {{ booking_details.bia }}</b>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr class="el-table__row">
+                        <td class="el-table_3_column_11 is-right ">
+                          <div class="cell" />
+                        </td>
+                        <td class="el-table_3_column_12 is-left ">
+                          <div class="cell" />
+                        </td>
+                      </tr>
+                      <!---->
+                    </tbody>
+                  </table>
+                  <!---->
+                  <!---->
+                </div>
+                <div class="el-table__column-resize-proxy" style="display: none" />
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-row>
+      <br>
+
+      <el-row justify="center" align="center">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Supplier Report</span>
+            <!-- <el-button style="float: right padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+          <el-row :gutter="12" style="text-align:center">
+            <el-col :span="20" style="text-align:center">
+              <canvas v-insert-message="supplier_booking" id="myCanvas" ref="myCanvas" />
+              <br>
+              <el-button type="text" @click="downloadReport()">Download Now</el-button>
             </el-col>
           </el-row>
         </el-card>
-      </el-col>
-    </el-row>
-    <br>
-    <el-row justify="center" align="center">
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>Order Details</span>
-          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-        </div>
-        <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
-          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
-            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
-
-              <div class="el-table__body-wrapper is-scrolling-none">
-                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
-                  <colgroup>
-                    <col name="el-table_2_column_9" width="210">
-                    <col name="el-table_2_column_10" width="210">
-                  </colgroup>
-                  <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Ref No :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.id }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Date :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.created_at }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Customer Marking :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.marking }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Term :</div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{ booking_details.term }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Beneficiary Account : </div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{booking_details.account_name}}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Beneficiary Account Number : </div>
-                      </td>
-                      <td class="el-table_2_column_10 is-left ">
-                        <div class="cell">{{booking_details.account_num}}</div>
-                      </td>
-                    </tr>
-                    <!---->
-                  </tbody>
-                </table>
-                <!---->
-                <!---->
-              </div>
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
-            </div>
+        <br>
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>User BankinSlip</span>
+            <!-- <el-button style="float: right padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
-          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
-            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
-              <div class="hidden-columns">
-                <div></div>
-                <div></div>
-              </div>
-              <!---->
-              <div class="el-table__body-wrapper is-scrolling-none">
-                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
-                  <colgroup>
-                    <col name="el-table_3_column_11" width="200">
-                    <col name="el-table_3_column_12" width="200">
-                  </colgroup>
-                  <tbody>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">CNY/RMB :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">CNY {{ booking_details.amount }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">+ Service Charge :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">CNY {{ booking_details.service_charge }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">/ RATE :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">{{ booking_details.rate }}</div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">MYR {{ booking_details.bia }}</div>
-                      </td>
-                    </tr>
-                    <!-- <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell">+ GST 6% :</div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">MYR 4,430.88</div>
-                      </td>
-                    </tr> -->
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell">
-                          <b>MYR {{ booking_details.bia }}</b>
-                        </div>
-                      </td>
-                    </tr>
-                    <tr class="el-table__row">
-                      <td class="el-table_3_column_11 is-right ">
-                        <div class="cell"></div>
-                      </td>
-                      <td class="el-table_3_column_12 is-left ">
-                        <div class="cell"></div>
-                      </td>
-                    </tr>
-                    <!---->
-                  </tbody>
-                </table>
-                <!---->
-                <!---->
-              </div>
-              <div class="el-table__column-resize-proxy" style="display: none;"></div>
-            </div>
-          </div>
-        </div>
-      </el-card>
-    </el-row>
-    <br>
-
-        <el-row justify="center" align="center">
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>Supplier Report</span>
-          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-        </div>
-        <el-row :gutter="12" style="text-align:center">
-          <el-col :span="20" style="text-align:center">
-            <canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
-            <br>
-            <el-button @click="downloadReport()" type="text">Download Now</el-button>
-          </el-col>
-        </el-row>
-      </el-card>
+          <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">
+                <p v-else>Download</p>
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+        <br>
+      </el-row>
       <br>
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>User BankinSlip</span>
-          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-        </div>
-        <el-row :gutter="12">
-          <el-col :span="22" style="text-align:center">
-            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
-              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
-              <p v-else>Download</p>
-            </a>
-          </el-col>
-        </el-row>
-      </el-card>
-      <br>
-    </el-row>
-    <br>
+    </div>
   </el-main>
 </template>
 <style>
@@ -278,122 +282,300 @@
       display: block;
   }
   .image:hover {
-    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5)
   }
 </style>
 <script>
-  import ProgressTrack from '~/components/AdminProgressTrack'
-  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
-  import axios from 'axios'
+import ProgressTrack from '~/components/AdminProgressTrack'
+import X2ProgressTrack from '~/components/X2AdminProgressTrack'
+import axios from 'axios'
 
-  export default {
-    components: {
-      'progress-track': ProgressTrack,
-      'x2-progress-track': X2ProgressTrack
-    },
-    data() {
-      return {
-        trackerConfig :{
-          status: null,
-          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,
-        supplier_booking : {},
-        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);
-            }
-          }]
+export default {
+  components: {
+    'progress-track': ProgressTrack,
+    'x2-progress-track': X2ProgressTrack
+  },
+  directives: {
+    insertMessage: function (canvasElement, binding) {
+      setTimeout(function (canvasElement, binding) {
+        // //////////////// variable //////////////////////////
+        var canvasWidth = 450
+        var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390, 410,
+          470, 490, 510, 610, 630
+        ]
+        const canvasHeight = rowHeight[rowHeight.length - 1]
+
+        var column1X = 220
+        var column2X = 320
+        var column3X = 420
+
+        // /////////////////Canvast Init////////////////////
+        var canvas = document.getElementById('myCanvas')
+        canvas.width = canvasWidth
+        canvas.height = canvasHeight
+        // Get canvas context
+        var ctx = canvasElement.getContext('2d')
+        // Clear the canvas
+        ctx.clearRect(0, 0, 300, 150)
+
+        ctx.fillStyle = '#FFFFFF'
+        ctx.fillRect(0, 0, canvasWidth, rowHeight[0])
+        for (var i = 1; i < rowHeight.length; i++) {
+          if (i % 2 === 1) {
+            ctx.fillStyle = '#A9D08E'
+          } else {
+            ctx.fillStyle = '#FFFFFF'
+            ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i])
+          }
         }
+        // /////////// fillup with text////////////////
+        // // config canvas
+        ctx.fillStyle = '#000000'
+        ctx.font = '13px Arial'
+        ctx.textAlign = 'right'
+        // // Row 1
+        ctx.fillText('Ref No. :', column1X, rowHeight[1] - 5)
+        ctx.fillText(binding.value.booking_id, column3X, rowHeight[1] - 5)
+        // // Row 2
+        ctx.fillText('Date :', column1X, rowHeight[2] - 5)
+        ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5)
+        // // Row 3
+        ctx.fillText('Marking :', column1X, rowHeight[3] - 5)
+        ctx.font = 'bold 14px Arial'
+        ctx.fillStyle = '#0070D5'
+        ctx.fillText(binding.value.marking, column3X, rowHeight[3] - 5)
+        ctx.fillStyle = '#000000'
+        ctx.font = '13px Arial'
+        // // Row 4
+        ctx.fillText('Payment For(Order No.) :', column1X, rowHeight[4] - 5)
+        ctx.fillText(binding.value.order_no, column3X, rowHeight[4] - 5)
+        // // Row 4
+        ctx.fillText('Payment For :', column1X, rowHeight[5] - 5)
+        ctx.fillText(binding.value.payment_for, column3X, rowHeight[5] - 5)
+        // // Row 5
+        ctx.fillText('Payment Method :', column1X, rowHeight[6] - 5)
+        ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5)
+        // // Row 6
+        ctx.fillText('Remark :', column1X, rowHeight[7] - 10)
+        // // Row 7
+        // Empty
+        // // Row 8
+        ctx.fillText('MYR/RM :', column1X, rowHeight[9] - 5)
+        ctx.fillText('MYR', column2X, rowHeight[9] - 5)
+        ctx.font = 'bold 14px Arial'
+        ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[9] - 5)
+        ctx.font = '13px Arial'
+        // // Row 8
+        ctx.fillText('* RATE :', column1X, rowHeight[10] - 5)
+        ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5)
+        // // Row 9
+        ctx.fillText('REBATE :', column1X, rowHeight[11] - 5)
+        ctx.fillText('MYR', column2X, rowHeight[11] - 5)
+        ctx.font = '14px Arial'
+        ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5)
+        ctx.font = '13px Arial'
+        // // Row 10
+        ctx.font = 'bold 14px Arial'
+        ctx.fillText('CNY', column2X, rowHeight[12] - 5)
+        ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5)
+        ctx.font = '13px Arial'
+        // line
+        ctx.beginPath()
+        ctx.lineWidth = 1
+        ctx.moveTo(column1X + 30, rowHeight[11])
+        ctx.lineTo(column3X + 20, rowHeight[11])
+        ctx.stroke()
+        ctx.beginPath()
+        ctx.lineWidth = 2
+        ctx.moveTo(column1X + 30, rowHeight[12])
+        ctx.lineTo(column3X + 20, rowHeight[12])
+        ctx.stroke()
+        // // Row 11
+        ctx.fillText('MYR/RM :', column1X, rowHeight[14] - 5)
+        ctx.fillText('MYR', column2X, rowHeight[14] - 5)
+        ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[14] - 5)
+        // // Row 12
+        // ctx.fillText('Billing(1.0%) :', column1X, rowHeight[15] - 5)
+        // ctx.fillText('MYR', column2X, rowHeight[15] - 5)
+        // ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5)
+        // // Row 13
+        ctx.fillText('+ TAX ' + (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + '% :', column1X, rowHeight[16] - 5) // TODO : Change to percentage
+        ctx.fillText('MYR', column2X, rowHeight[16] - 5)
+        ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5)
+        // //// Row 14
+        // ctx.fillText('+ GST 6% :', column1X, rowHeight[17] - 15)
+        // ctx.fillText('MYR', column2X, rowHeight[17] - 15)
+        // ctx.fillText('289.84', column3X, rowHeight[17] - 15)
+        // // Row 15
+        ctx.font = 'bold 14px Arial'
+        ctx.fillText('Bank In Amount :', column1X, rowHeight[18] - 5)
+        ctx.fillStyle = '#0070D5'
+        ctx.fillText('MYR', column2X, rowHeight[18] - 5)
+        ctx.fillText(binding.value.amount_after_tax, column3X, rowHeight[18] - 5)
+        ctx.fillStyle = '#000000'
+        ctx.font = '13px Arial'
+        // line
+        ctx.lineWidth = 1
+        ctx.beginPath()
+        ctx.moveTo(column1X + 30, rowHeight[17])
+        ctx.lineTo(column3X + 20, rowHeight[17])
+        ctx.stroke()
+        ctx.beginPath()
+        ctx.moveTo(column1X + 30, rowHeight[18] + 1)
+        ctx.lineTo(column3X + 20, rowHeight[18] + 1)
+        ctx.stroke()
+        ctx.beginPath()
+        ctx.moveTo(column1X + 30, rowHeight[18] - 2)
+        ctx.lineTo(column3X + 20, rowHeight[18] - 2)
+        ctx.stroke()
+        // // Row 16
+        // ctx.fillText('Rebate :', column1X, rowHeight[19] - 25)
+        // ctx.fillText('CNY', column2X, rowHeight[19] - 25)
+        // ctx.fillText('224.68', column3X, rowHeight[19] - 25)
+        // // Row 16
+        ctx.font = 'bold 14px Arial'
+        ctx.fillText('Bank In to Account Below :', column1X, rowHeight[20] - 5)
+        ctx.font = 'bold italic 15px Arial'
+        ctx.fillStyle = '#0070D5'
+        ctx.fillText('CNY', column2X, rowHeight[20] - 5)
+        ctx.fillText(binding.value.amountInRMB, column3X - 20, rowHeight[20] - 5)
+        ctx.fillStyle = '#000000'
+        ctx.font = '13px Arial'
+        // // Row 17
+        // // Row 18
+        // // Row 19
+        // var img = new Image()
+        // img.src = '/banklogo.png'
+        // img.crossOrigin = 'anonymous'
+        // var maxwidth = 70
+        // var ratio = maxwidth / img.width
+        // var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2)
+        // var y = rowHeight[21] + offset // to make it always center
+
+        // img.onload=function(){
+        //   ctx.drawImage(img, 50, 530, 80, 50)
+        // }
+
+        // text
+        ctx.font = 'bold 14px Arial'
+        ctx.textAlign = 'center'
+        ctx.fillText('China beneficiary Account', column2X - 40, rowHeight[22] - 80)
+        ctx.fillText('户名 : ' + binding.value.acc_name, column2X - 40, rowHeight[22] - 60)
+        ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40)
+        ctx.fillText(binding.value.bank_name, column2X - 40, rowHeight[22] - 20)
+        ctx.fillText(binding.value.bank_branch, column2X - 40, rowHeight[22] - 2)
+        ctx.font = '13px Arial'
+      }, 1000, canvasElement, binding)
+    }
+  },
+  data () {
+    return {
+      trackerConfig: {
+        status: null,
+        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,
+      supplier_booking: {},
+      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)'
+    }
+  },
+  computed: {
+    isLegacy: function () {
+      return this.booking_details.user_po_path && this.booking_details.user_po_path.length > 0
+    }
+  },
+  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 + '/details')
+      .then((response) => {
+        loading.close()
+        this.booking_details = response.data
+        this.trackerConfig.term = response.data.term
+        this.trackerConfig.status = response.data.admin_status
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
       })
 
-      axios
-        .get('/api/admin/booking/' + this.$route.params.id  + '/details')
-        .then((response) => {
-          loading.close()
-          this.booking_details = response.data
-          this.trackerConfig.term = response.data.term
-          this.trackerConfig.status = response.data.admin_status
-        }).catch((error) => {
-          console.log(error)
-          loading.close()
-          this.$router.push({
-            name: 'notfound'
-          })
+    axios.get('/api/supplier-booking/' + this.$route.params.id)
+      .then((response) => {
+        this.supplier_booking = response.data
+        loading.close()
+      }).catch((error) => {
+        console.log(error)
+        this.$router.push({
+          name: 'notfound'
         })
-
-      axios.get('/api/supplier-booking/' + this.$route.params.id)
-        .then((response) => {
-          this.supplier_booking = response.data
-          loading.close()
-        }).catch((error) => {
-          console.log(error)
-          this.$router.push({
-            name: 'notfound'
-          })
-          loading.close()
-        })
-    },
-    methods: {
-      confirmInvoice () {
+        loading.close()
+      })
+  },
+  methods: {
+    confirmInvoice () {
       this.loading_btn = true
       axios
         .post('/api/booking/' + this.$route.params.id + '/confirm-invoice')
@@ -409,219 +591,46 @@
             name: 'home'
           })
           this.loading_btn = false
-        }).catch((error) => {
-            this.$message({
-              showClose: true,
-              message: 'Please upload invoice',
-              type: 'error',
-              duration: 30000
-            })
+        }).catch(() => {
+          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.`)
-      },
-      // TODO : refactor into library since many pages are using this 
-      getExtension(path){
-          let index = path.lastIndexOf('.') + 1;
-          return path.slice(index);
-      },
-      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
     },
-        directives: {
-      insertMessage: function (canvasElement, binding) {
-      	setTimeout(function (canvasElement, binding) {
-            ////////////////// variable //////////////////////////
-            var canvasWidth = 450;
-            var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390, 410,
-              470, 490, 510, 610, 630
-            ]
-            const canvasHeight = rowHeight[rowHeight.length - 1];
-
-            var column1X = 220;
-            var column2X = 320;
-            var column3X = 420;
-
-            ///////////////////Canvast Init////////////////////
-            var canvas = document.getElementById("myCanvas");
-            canvas.width = canvasWidth;
-            canvas.height = canvasHeight;
-            // Get canvas context
-            var ctx = canvasElement.getContext("2d");
-            // Clear the canvas
-            ctx.clearRect(0, 0, 300, 150);
-
-            ctx.fillStyle = "#FFFFFF";
-            ctx.fillRect(0, 0, canvasWidth, rowHeight[0]);
-            for (var i = 1; i < rowHeight.length; i++) {
-              if (i % 2 == 1)
-                ctx.fillStyle = "#A9D08E";
-              else
-                ctx.fillStyle = "#FFFFFF";
-              ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i]);
-            }
-            ///////////// fillup with text////////////////
-            //// config canvas
-            ctx.fillStyle = "#000000";
-            ctx.font = "13px Arial";
-            ctx.textAlign = "right";
-            //// Row 1
-            ctx.fillText("Ref No. :", column1X, rowHeight[1] - 5);
-            ctx.fillText(binding.value.booking_id, column3X, rowHeight[1] - 5);
-            //// Row 2
-            ctx.fillText("Date :", column1X, rowHeight[2] - 5);
-            ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5);
-            //// Row 3
-            ctx.fillText("Marking :", column1X, rowHeight[3] - 5);
-            ctx.font = "bold 14px Arial";
-            ctx.fillStyle = "#0070D5";
-            ctx.fillText(binding.value.marking, column3X, rowHeight[3] - 5);
-            ctx.fillStyle = "#000000";
-            ctx.font = "13px Arial";
-            //// Row 4
-            ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5);
-            ctx.fillText(binding.value.order_no, column3X, rowHeight[4] - 5);
-            //// Row 4
-            ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
-            ctx.fillText(binding.value.payment_for, column3X, rowHeight[5] - 5);
-            //// Row 5
-            ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5);
-            ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5);
-            //// Row 6
-            ctx.fillText("Remark :", column1X, rowHeight[7] - 10);
-            //// Row 7
-            // Empty
-            //// Row 8
-            ctx.fillText("MYR/RM :", column1X, rowHeight[9] - 5);
-            ctx.fillText("MYR", column2X, rowHeight[9] - 5);
-            ctx.font = "bold 14px Arial";
-            ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[9] - 5);
-            ctx.font = "13px Arial";
-            //// Row 8
-            ctx.fillText("* RATE :", column1X, rowHeight[10] - 5);
-            ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5);
-            //// Row 9
-            ctx.fillText("REBATE :", column1X, rowHeight[11] - 5);
-            ctx.fillText("MYR", column2X, rowHeight[11] - 5);
-            ctx.font = "14px Arial";
-            ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5);
-            ctx.font = "13px Arial";
-            //// Row 10
-            ctx.font = "bold 14px Arial";
-            ctx.fillText("CNY", column2X, rowHeight[12] - 5);
-            ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5);
-            ctx.font = "13px Arial";
-            //line
-            ctx.beginPath();
-            ctx.lineWidth = 1;
-            ctx.moveTo(column1X + 30, rowHeight[11]);
-            ctx.lineTo(column3X + 20, rowHeight[11]);
-            ctx.stroke();
-            ctx.beginPath();
-            ctx.lineWidth = 2;
-            ctx.moveTo(column1X + 30, rowHeight[12]);
-            ctx.lineTo(column3X + 20, rowHeight[12]);
-            ctx.stroke();
-            //// Row 11
-            ctx.fillText("MYR/RM :", column1X, rowHeight[14] - 5);
-            ctx.fillText("MYR", column2X, rowHeight[14] - 5);
-            ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[14] - 5);
-            //// Row 12
-            // ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5);
-            // ctx.fillText("MYR", column2X, rowHeight[15] - 5);
-            // ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5);
-            //// Row 13
-            
-            ctx.fillText("+ TAX "+ (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :", column1X, rowHeight[16] - 5); // TODO : Change to percentage 
-            ctx.fillText("MYR", column2X, rowHeight[16] - 5);
-            ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5);
-            // //// Row 14
-            // ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15);
-            // ctx.fillText("MYR", column2X, rowHeight[17] - 15);
-            // ctx.fillText("289.84", column3X, rowHeight[17] - 15);
-            //// Row 15
-            ctx.font = "bold 14px Arial";
-            ctx.fillText("Bank In Amount :", column1X, rowHeight[18] - 5);
-            ctx.fillStyle = "#0070D5";
-            ctx.fillText("MYR", column2X, rowHeight[18] - 5);
-            ctx.fillText(binding.value.amount_after_tax, column3X, rowHeight[18] - 5);
-            ctx.fillStyle = "#000000";
-            ctx.font = "13px Arial";
-            //line
-            ctx.lineWidth = 1;
-            ctx.beginPath();
-            ctx.moveTo(column1X + 30, rowHeight[17]);
-            ctx.lineTo(column3X + 20, rowHeight[17]);
-            ctx.stroke();
-            ctx.beginPath();
-            ctx.moveTo(column1X + 30, rowHeight[18] + 1);
-            ctx.lineTo(column3X + 20, rowHeight[18] + 1);
-            ctx.stroke();
-            ctx.beginPath();
-            ctx.moveTo(column1X + 30, rowHeight[18] - 2);
-            ctx.lineTo(column3X + 20, rowHeight[18] - 2);
-            ctx.stroke();
-            //// Row 16
-            // ctx.fillText("Rebate :", column1X, rowHeight[19] - 25);
-            // ctx.fillText("CNY", column2X, rowHeight[19] - 25);
-            // ctx.fillText("224.68", column3X, rowHeight[19] - 25);
-            //// Row 16
-            ctx.font = "bold 14px Arial";
-            ctx.fillText("Bank In to Account Below :", column1X, rowHeight[20] - 5);
-            ctx.font = "bold italic 15px Arial";
-            ctx.fillStyle = "#0070D5";
-            ctx.fillText("CNY", column2X, rowHeight[20] - 5);
-            ctx.fillText(binding.value.amountInRMB, column3X - 20, rowHeight[20] - 5);
-            ctx.fillStyle = "#000000";
-            ctx.font = "13px Arial";
-            //// Row 17
-            //// Row 18
-            //// Row 19
-            // var img = new Image();
-            // img.src = "/banklogo.png";
-            // img.crossOrigin = "anonymous";
-            // var maxwidth = 70;
-            // var ratio = maxwidth / img.width;
-            // var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2);
-            // var y = rowHeight[21] + offset; // to make it always center
-
-            // img.onload=function(){
-    		    //   ctx.drawImage(img, 50, 530, 80, 50);
-    	      // };
-
-            // text
-            ctx.font = "bold 14px Arial";
-            ctx.textAlign = "center";
-            ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80);
-            ctx.fillText("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60);
-            ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40);
-            ctx.fillText(binding.value.bank_name , column2X - 40, rowHeight[22] - 20);
-            ctx.fillText(binding.value.bank_branch , column2X - 40, rowHeight[22] - 2);
-            
-            ctx.font = "13px Arial";
-    	}, 1000,canvasElement,binding);
-	        
+    handlePreview (file) {
+      console.log(file)
+    },
+    handleExceed (file) {
+      console.log(file)
+    },
+    uploadError (file, fileList) {
+      this.$message.warning(`Incorrect file format or file size too big.`)
+    },
+    // TODO : refactor into library since many pages are using this
+    getExtension (path) {
+      if (!path) {
+        return null
       }
+      let index = path.lastIndexOf('.') + 1
+      return path.slice(index)
+    },
+    isImage (path) {
+      var ext = this.getExtension(path)
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png'
+    },
+    getURL (path) {
+      var getUrl = window.location
+      var baseUrl = getUrl.protocol + '//' + getUrl.host
+      return baseUrl + path
     }
   }
-</script>
\ No newline at end of file
+}
+</script>