diff --git a/app/Http/Controllers/BookingSupplierController.php b/app/Http/Controllers/BookingSupplierController.php
index 800f6971..3a606c98 100644
--- a/app/Http/Controllers/BookingSupplierController.php
+++ b/app/Http/Controllers/BookingSupplierController.php
@@ -103,7 +103,7 @@ class BookingSupplierController extends Controller
         //$transfer_amount = $request->input("transfer_amount");
         $supplier_id = $request->input("supplier_id");
         $booking_id = $request->input("booking_id");
-        //$rate = $request->input('rate');
+        $rate = $request->input('rate'); // costing rate 
         $rebate = $request->input('rebate');
         $supplier = SettingSupplier::find($supplier_id);
         $booking = Booking::find($booking_id);
@@ -120,7 +120,6 @@ class BookingSupplierController extends Controller
 
         // Update: changes in 1.1 according to new supplier booking report
         $transfer_amount = $booking->amount;
-        $rate = $booking->rate;
    
         $amount_in_myr = round($transfer_amount / $rate, 2);
         $amountInRMB = $transfer_amount;
diff --git a/resources/assets/js/pages/admin/booking/supplierBooking.vue b/resources/assets/js/pages/admin/booking/supplierBooking.vue
index 32042123..ad3da400 100644
--- a/resources/assets/js/pages/admin/booking/supplierBooking.vue
+++ b/resources/assets/js/pages/admin/booking/supplierBooking.vue
@@ -210,9 +210,9 @@
                   </el-select>
                 </el-form-item>
 
-                <!-- <el-form-item prop="rate">
+                <el-form-item prop="rate">
                   <el-input v-model="supplierBookingForm.rate" type="text" placeholder="Rate" style="width: 80%" />
-                </el-form-item> -->
+                </el-form-item>
                 <el-form-item prop="rebate">
                   <el-input v-model="supplierBookingForm.rebate" type="text" placeholder="Rebate" style="width: 80%" />
                 </el-form-item>
@@ -333,7 +333,7 @@
               booking_id: this.$route.params.id,
               supplier_id: this.supplierBookingForm.supplier,
               rebate: this.supplierBookingForm.rebate,
-              //rate: this.supplierBookingForm.rate,
+              rate: this.supplierBookingForm.rate,
               //transfer_amount: this.supplierBookingForm.transfer_amount,
             }
 
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index 12a28cb6..ff36bce7 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -1,64 +1,56 @@
 <template>
-<el-main>
-  <progress-track v-model="status"/>
-  <h1>Transfer Completed</h1>
-  <h2> Please upload your purchase order </h2>
-  <!-- upload card -->
-  <div class="row">
-    <div class="col">
-      <div class="card">
-        <div class="card-header">Upload PO</div>
-        <!-- upload image -->
-        <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>
-            <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-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>
-          
-          <div class="bottom clearfix" style="text-align:right;">
-            <el-button :loading="loading_btn" type="primary" @click="uploadPo">Submit</el-button>
+  <el-main>
+    <progress-track v-model="status" />
+    <h1>Transfer Completed</h1>
+    <h2> Please upload your purchase order </h2>
+    <!-- upload card -->
+    <div class="row">
+      <div class="col">
+        <div class="card">
+          <div class="card-header">Upload PO
+            <a href="/po-format.xls" target="_blank">(Download Po Format)</a>
+          </div>
+          <!-- upload image -->
+          <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>
+              <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-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>
+
+            <div class="bottom clearfix" style="text-align:right;">
+              <el-button :loading="loading_btn" type="primary" @click="uploadPo">Submit</el-button>
+            </div>
+            <!-- upload image end -->
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <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">
+              <p v-else>Download</p>
+            </a>
           </div>
-        <!-- upload image end -->
         </div>
       </div>
     </div>
-    <div class="col">
-      <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">
-            <p v-else>Download</p>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- order details -->
-  <div class="card">
-    <div class="card-header">Order Details</div>
-    <div class="card-body">
+    <!-- order details -->
+    <div class="card">
+      <div class="card-header">Order Details</div>
+      <div class="card-body">
         <div class="row">
           <div class="col">
             <table class="table table-striped">
@@ -69,11 +61,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>
@@ -95,15 +87,17 @@
                 </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><b>MYR {{ booking_details.bia }}</b></td>
+                  <td>
+                    <b>MYR {{ booking_details.bia }}</b>
+                  </td>
                 </tr>
                 <tr>
                   <td>Beneficiary Account Number : </td>
@@ -120,9 +114,9 @@
       <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">
-              <p v-else>Download</p>
-            </a>  
+            <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>
       </div>
     </div>
@@ -132,19 +126,23 @@
   * {
     box-sizing: border-box;
   }
+
   h1 {
-    margin-top:5%;
-    font-size:3vw;
-    text-align:center;
+    margin-top: 5%;
+    font-size: 3vw;
+    text-align: center;
   }
+
   h2 {
-    font-size:2vw;
-    text-align:center;
-    margin-bottom:3%;
+    font-size: 2vw;
+    text-align: center;
+    margin-bottom: 3%;
   }
+
   .booking-details {
     font-weight: bold;
   }
+
   .bankinSlipImage {
     border: 1px solid #ddd;
     border-radius: 4px;
@@ -153,26 +151,30 @@
     width: 150px;
     display: block;
   }
+
   .bankinSlipImage:hover {
     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   }
+
   .uploadAreaTwo {
     display: none;
   }
+
   .card {
     margin-bottom: 3%;
   }
-  @media only screen and (max-width : 767px) {
+
+  @media only screen and (max-width: 767px) {
     .uploadAreaOne {
       display: none;
     }
     .uploadAreaTwo {
       display: unset;
     }
-		.table {
-			font-size: 3.5vmin;
-		}
-		h1 {
+    .table {
+      font-size: 3.5vmin;
+    }
+    h1 {
       font-size: 1em;
     }
     h2 {
@@ -181,104 +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'
-        })
+    },
+    beforeCreate() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Please wait..',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
       })
-  },
-  methods: {
-    uploadPo () {
-      this.loading_btn = true
+
       axios
-        .post('/api/booking/' + this.$route.params.id + '/confirm-po')
+        .get('/api/booking/' + this.$route.params.id)
         .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
+          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;
+            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