diff --git a/Dockerfile b/Dockerfile
index edff056f..c1fb53e0 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -13,5 +13,7 @@ RUN php artisan clear-compiled
 
 COPY wait.sh /usr/local/bin/wait.sh
 RUN chmod +x /usr/local/bin/wait.sh
-CMD /usr/local/bin/wait.sh && composer update --no-scripts && composer dumpautoload && php artisan storage:link && php artisan migrate && php artisan serve --host=0.0.0.0 --port=8000
+RUN php artisan storage:link
+
+CMD /usr/local/bin/wait.sh && composer update --no-scripts && composer dumpautoload  && php artisan migrate && php artisan serve --host=0.0.0.0 --port=8000
 EXPOSE 8000
diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index dbfe44d2..844754e1 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -71,6 +71,7 @@ class BookingController extends Controller
                 default:
                     $status_desc = "";
             }
+            $booking->status_desc = $status_desc;
             $booking->marking = $booking->user->marking;
         }
        
diff --git a/app/Http/Controllers/BookingSupplierController.php b/app/Http/Controllers/BookingSupplierController.php
index 800f6971..7f84c087 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/caddy/Caddyfile b/caddy/Caddyfile
index 062f2168..e4f1b0d1 100644
--- a/caddy/Caddyfile
+++ b/caddy/Caddyfile
@@ -1,10 +1,14 @@
-# Docs: https://caddyserver.com/docs/caddyfile
 https://exchange-staging.izyim.com {
     root /var/www/public
+    
     fastcgi / 127.0.0.1:9000 php {
         index index.php
     }
 
+    header / {
+        Cache-Control no-cache
+    }
+
     # To handle .html extensions with laravel change ext to
     # ext / .html
 
@@ -13,8 +17,9 @@ https://exchange-staging.izyim.com {
         ext /
         to /index.php?{query}
     }
+
     gzip
-    browse
+    # browse
     log stdout
     errors stdout
     on startup php-fpm --nodaemonize
diff --git a/caddy/Dockerfile b/caddy/Dockerfile
index 675a39b5..bff61e5d 100644
--- a/caddy/Dockerfile
+++ b/caddy/Dockerfile
@@ -12,6 +12,7 @@ RUN curl --silent --show-error --fail --location \
 
 COPY Caddyfile /etc/Caddyfile
 
-WORKDIR /var/www/public
+WORKDIR /var/www
+RUN ln -sf /var/www/storage/app/public /var/www/public
 
 CMD ["/usr/bin/caddy", "--conf", "/etc/Caddyfile", "--log", "stdout"]
\ No newline at end of file
diff --git a/config/jwt.php b/config/jwt.php
index c4ea92db..b9fffd28 100644
--- a/config/jwt.php
+++ b/config/jwt.php
@@ -100,7 +100,7 @@ return [
     |
     */
 
-    'ttl' => env('JWT_TTL', 60),
+    'ttl' => env('JWT_TTL', 60 * 12),
 
     /*
     |--------------------------------------------------------------------------
diff --git a/public/banklogo.png b/public/banklogo.png
deleted file mode 100644
index 90b6a8c8..00000000
Binary files a/public/banklogo.png and /dev/null differ
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
new file mode 100644
index 00000000..06915eec
--- /dev/null
+++ b/public/mix-manifest.json
@@ -0,0 +1,7 @@
+{
+    "/js/lang-zh-CN.489521629fd49ac7628e.js": "/js/lang-zh-CN.489521629fd49ac7628e.js",
+    "/js/lang-es.459dcb868aa54d488979.js": "/js/lang-es.459dcb868aa54d488979.js",
+    "/js/lang-en.31386792460363b93c17.js": "/js/lang-en.31386792460363b93c17.js",
+    "/js/app.js": "/js/app.js",
+    "/css/app.css": "/css/app.css"
+}
\ No newline at end of file
diff --git a/resources/assets/js/pages/admin/booking/bookingDetail.vue b/resources/assets/js/pages/admin/booking/bookingDetail.vue
index 002b219e..197f77c9 100644
--- a/resources/assets/js/pages/admin/booking/bookingDetail.vue
+++ b/resources/assets/js/pages/admin/booking/bookingDetail.vue
@@ -28,7 +28,7 @@
                   <tbody>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
+                        <div class="cell">Ref No :</div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
                         <div class="cell">{{ booking_details.id }}</div>
diff --git a/resources/assets/js/pages/admin/booking/completed.vue b/resources/assets/js/pages/admin/booking/completed.vue
index eee2c21b..e3f14b71 100644
--- a/resources/assets/js/pages/admin/booking/completed.vue
+++ b/resources/assets/js/pages/admin/booking/completed.vue
@@ -37,7 +37,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12" align="center">
-              <div v-for="cn_bankslip in booking_details.china_bankslip_path">
+              <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>
@@ -101,7 +101,7 @@
                   <tbody>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
+                        <div class="cell">Ref No :</div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
                         <div class="cell">{{ booking_details.id }}</div>
diff --git a/resources/assets/js/pages/admin/booking/supplierBooking.vue b/resources/assets/js/pages/admin/booking/supplierBooking.vue
index 32042123..c4490a78 100644
--- a/resources/assets/js/pages/admin/booking/supplierBooking.vue
+++ b/resources/assets/js/pages/admin/booking/supplierBooking.vue
@@ -29,7 +29,7 @@
                   <tbody>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
+                        <div class="cell">Ref No :</div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
                         <div class="cell">{{ booking_details.id }}</div>
@@ -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/admin/booking/supplierReport.vue b/resources/assets/js/pages/admin/booking/supplierReport.vue
index 83e17a3a..72705c4a 100644
--- a/resources/assets/js/pages/admin/booking/supplierReport.vue
+++ b/resources/assets/js/pages/admin/booking/supplierReport.vue
@@ -29,7 +29,7 @@
                   <tbody>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
+                        <div class="cell">Ref No :</div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
                         <div class="cell">{{ booking_details.id }}</div>
@@ -201,7 +201,6 @@
         <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>
-            <img id="banklogo" src="/banklogo.png" style="display: none"/>
             <br>
             <el-button @click="downloadReport()" type="text">Download Now</el-button>
           </el-col>
@@ -533,17 +532,17 @@
             //// 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
+            // 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);
-    	      };
+            // img.onload=function(){
+    		    //   ctx.drawImage(img, 50, 530, 80, 50);
+    	      // };
 
             // text
             ctx.font = "bold 14px Arial";
diff --git a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
index 6a81f8c6..5b66d902 100644
--- a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
+++ b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
@@ -29,7 +29,7 @@
                   <tbody>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
+                        <div class="cell">Ref No :</div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
                         <div class="cell">{{ booking_details.id }}</div>
diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index fa8adcd4..13c9016d 100644
--- a/resources/assets/js/pages/admin/booking/uploadInvoice.vue
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -36,7 +36,7 @@
                   <tbody>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
+                        <div class="cell">Ref No :</div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
                         <div class="cell">{{ booking_details.id }}</div>
diff --git a/resources/assets/js/pages/admin/booking/verification.vue b/resources/assets/js/pages/admin/booking/verification.vue
index 65b13a07..39b2f2b3 100644
--- a/resources/assets/js/pages/admin/booking/verification.vue
+++ b/resources/assets/js/pages/admin/booking/verification.vue
@@ -31,7 +31,7 @@
                   <tbody>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
+                        <div class="cell">Ref No :</div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
                         <div class="cell">{{ booking_details.id }}</div>
diff --git a/resources/assets/js/pages/admin/complete-orders.vue b/resources/assets/js/pages/admin/complete-orders.vue
index bccc9a90..9ed8dac5 100644
--- a/resources/assets/js/pages/admin/complete-orders.vue
+++ b/resources/assets/js/pages/admin/complete-orders.vue
@@ -6,7 +6,7 @@
     </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="No." prop="id" sortable></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>
diff --git a/resources/assets/js/pages/admin/home.vue b/resources/assets/js/pages/admin/home.vue
index e01db5f1..2a7ae9b5 100644
--- a/resources/assets/js/pages/admin/home.vue
+++ b/resources/assets/js/pages/admin/home.vue
@@ -8,7 +8,7 @@
   <el-row :gutter="20">
     <div>
       <el-table :data="bookingTable">
-        <el-table-column label="No." width="100">
+        <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>
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 7f853d77..7dcbc597 100644
--- a/resources/assets/js/pages/admin/upload-supplier-bank-slip.vue
+++ b/resources/assets/js/pages/admin/upload-supplier-bank-slip.vue
@@ -5,7 +5,7 @@
             <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="Order No" sortable></el-table-column>
+            <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>
diff --git a/resources/assets/js/pages/booking/completed.vue b/resources/assets/js/pages/booking/completed.vue
index e3446bfe..19c6c4e8 100644
--- a/resources/assets/js/pages/booking/completed.vue
+++ b/resources/assets/js/pages/booking/completed.vue
@@ -24,7 +24,7 @@
         <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">
+            <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>
@@ -57,7 +57,7 @@
             <table class="table table-striped">
               <tbody>
                 <tr>
-                  <td>Order Number :</td>
+                  <td>Ref No :</td>
                   <td>{{ booking_details.id }}</td>
                 </tr>
                 <tr>
diff --git a/resources/assets/js/pages/booking/confirmation.vue b/resources/assets/js/pages/booking/confirmation.vue
index 18b06a6f..24dc64a5 100644
--- a/resources/assets/js/pages/booking/confirmation.vue
+++ b/resources/assets/js/pages/booking/confirmation.vue
@@ -13,7 +13,7 @@
             <table class="table table-striped">
               <tbody>
                 <tr>
-                  <td>Order Number :</td>
+                  <td>Ref No :</td>
                   <td>{{ booking_details.id }}</td>
                 </tr>
                 <tr>
diff --git a/resources/assets/js/pages/booking/po.vue b/resources/assets/js/pages/booking/po.vue
index ab8d5d5f..8f248d6b 100644
--- a/resources/assets/js/pages/booking/po.vue
+++ b/resources/assets/js/pages/booking/po.vue
@@ -53,7 +53,7 @@
             <table class="table table-striped">
               <tbody>
                 <tr>
-                  <td>Order Number :</td>
+                  <td>Ref No :</td>
                   <td>{{ booking_details.id }}</td>
                 </tr>
                 <tr>
diff --git a/resources/assets/js/pages/booking/poComplete.vue b/resources/assets/js/pages/booking/poComplete.vue
index 2bcec40f..78a53e43 100644
--- a/resources/assets/js/pages/booking/poComplete.vue
+++ b/resources/assets/js/pages/booking/poComplete.vue
@@ -69,7 +69,7 @@
             <table class="table table-striped">
               <tbody>
                 <tr>
-                  <td>Order Number :</td>
+                  <td>Ref No :</td>
                   <td>{{ booking_details.id }}</td>
                 </tr>
                 <tr>
diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index 1346fc78..877f757b 100644
--- a/resources/assets/js/pages/booking/transfer.vue
+++ b/resources/assets/js/pages/booking/transfer.vue
@@ -15,7 +15,7 @@
             <table class="table table-striped">
               <tbody>
                 <tr>
-                  <td>Order Number :</td>
+                  <td>Ref No:</td>
                   <td>{{ booking_details.id }}</td>
                 </tr>
                 <tr>
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index 12a28cb6..6fe76174 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -1,79 +1,71 @@
 <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">
               <tbody>
                 <tr>
-                  <td>Order Number :</td>
+                  <td>Ref No :</td>
                   <td>{{ booking_details.id }}</td>
                 </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
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 7af5a5eb..748e8fb6 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -22,7 +22,7 @@
     <!-- Input-Amount-end -->
 
     <div align="right">
-    <el-button icon="el-icon-refresh" 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 -->
@@ -249,17 +249,11 @@
             </td>
           </tr>
           <tr>
-            <td>China Beneficiary Acc :</td>
+            <td>China Beneficiary Acc : <br>
+             Name : {{ bookingConfirmTable.acc_name }} <br>
+              Account No. : {{ bookingConfirmTable.acc_no }}</td>
             <td></td>
           </tr>
-          <tr>
-            <td>
-              Name : {{ bookingConfirmTable.acc_name }} <br>
-              Account No. : {{ bookingConfirmTable.acc_no }}
-            </td>
-            <td>
-            </td>
-          </tr>
           <tr>
             <td>Bank In Amount :</td>
             <td><b>RM {{ bookingConfirmTable.bankin_amount }}</b></td>
@@ -286,7 +280,7 @@
     <el-row :gutter="20">
       <div>
         <el-table :data="bookingTable">
-          <el-table-column label="No." width="100">
+          <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.status, scope.row.id) }"> {{ scope.row.id }}</el-button>
           </el-table-column>
@@ -352,6 +346,7 @@ export default {
 
   data () {
     return {
+      loading_btn: false,
       confirmForm: new Form({
         term: '',
         amount: ''
@@ -426,6 +421,18 @@ export default {
       options3: [{
         value: 'Full Payment',
         label: 'Full Payment'
+      },
+      {
+        value: 'Deposit',
+        label: 'Deposit'
+      },
+      {
+        value: 'Balance',
+        label: 'Balance'
+      },
+      {
+        value: 'Others',
+        label: 'Others'
       }],
       value: 'RMB',
       dialogFormVisible: false,
@@ -469,7 +476,9 @@ export default {
     },
     refreshRate() {
       let $this = this
+      this.loading_btn = true
       axios.get('api/rate').then(response => {
+        this.loading_btn = false
         this.rate = response.data
         this.$message({
           showClose: true,
diff --git a/resources/assets/js/pages/settings/admin-china-bank.vue b/resources/assets/js/pages/settings/admin-china-bank.vue
index b743ccf9..9509fff1 100644
--- a/resources/assets/js/pages/settings/admin-china-bank.vue
+++ b/resources/assets/js/pages/settings/admin-china-bank.vue
@@ -22,38 +22,38 @@
 		<!-- 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" :class="{'has-error': errors.has('company_name') }">
+					<el-form-item label="Company Name">
 						<el-input v-model="beneficiariesForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
+					<el-form-item label="Bank Name">
 						<el-input v-model="beneficiariesForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Bank Account No" :class="{'has-error': errors.has('acc_no') }">
+					<el-form-item label="Bank Account No">
 						<el-input v-model="beneficiariesForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
+					
 					</el-form-item>
-					<el-form-item label="Bank Address" :class="{'has-error': errors.has('bank_address') }">
+					<el-form-item label="Bank Address">
 						<el-input v-model="beneficiariesForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('bank_address')">{{ errors.first('bank_address') }}<br/></span>
+					
 					</el-form-item>
-					<el-form-item label="SWIFT Code" :class="{'has-error': errors.has('swift') }">
+					<el-form-item label="SWIFT Code">
 						<el-input v-model="beneficiariesForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('swift')">{{ errors.first('swift') }}<br/></span>
+					
 					</el-form-item>
-					<el-form-item label="CNAP" :class="{'has-error': errors.has('cnap') }">
+					<el-form-item label="CNAP">
 						<el-input v-model="beneficiariesForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
-						<span class="error-message text-danger" v-if="errors.has('cnap')">{{ errors.first('cnap') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Bank Branch" :class="{'has-error': errors.has('bank_branch') }">
+					<el-form-item label="Bank Branch">
 						<el-input v-model="beneficiariesForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('bank_branch')">{{ errors.first('bank_branch') }}<br/></span>
+						
 					</el-form-item>
 				</el-form>
 				<div align="center">
 					<el-button @click="AddDatadialogVisible = false">Cancel</el-button>
-					<el-button type="primary" @click="CreateBeneficiaries" :disabled="errors.any() || beneficiariesForm.company_name=='' || beneficiariesForm.bank_name=='' || beneficiariesForm.acc_no=='' || beneficiariesForm.bank_address=='' || beneficiariesForm.swift =='' || beneficiariesForm.cnap=='' || beneficiariesForm.bank_branch=='' ? true : false">OK</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
@@ -62,45 +62,43 @@
 			<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>
+						<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" :class="{'has-error': errors.has('company_name') }">
-						<el-input v-model="beneficiariesForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
+					<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" :class="{'has-error': errors.has('bank_name') }">
+					<el-form-item label="Bank Name">
 						<el-input v-model="beneficiariesForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
 					</el-form-item>
-					<el-form-item label="Bank Account No" :class="{'has-error': errors.has('acc_no') }">
+					<el-form-item label="Bank Account No">
 						<el-input v-model="beneficiariesForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Bank Address" :class="{'has-error': errors.has('bank_address') }">
+					<el-form-item label="Bank Address">
 						<el-input v-model="beneficiariesForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('bank_address')">{{ errors.first('bank_address') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="SWIFT Code" :class="{'has-error': errors.has('swift') }">
+					<el-form-item label="SWIFT Code">
 						<el-input v-model="beneficiariesForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('swift')">{{ errors.first('swift') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="CNAP" :class="{'has-error': errors.has('cnap') }">
+					<el-form-item label="CNAP">
 						<el-input v-model="beneficiariesForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
-						<span class="error-message text-danger" v-if="errors.has('cnap')">{{ errors.first('cnap') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Bank Branch" :class="{'has-error': errors.has('bank_branch') }">
+					<el-form-item label="Bank Branch">
 						<el-input v-model="beneficiariesForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('bank_branch')">{{ errors.first('bank_branch') }}<br/></span>
+						
 					</el-form-item>
 				</el-form>
 				<div align="center">
 					<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
-					<el-button type="primary" @click="EditBeneficiaries" :disabled="errors.any() || beneficiariesForm.company_name=='' || beneficiariesForm.bank_name=='' || beneficiariesForm.acc_no=='' || beneficiariesForm.bank_address=='' || beneficiariesForm.swift =='' || beneficiariesForm.cnap=='' || beneficiariesForm.bank_branch=='' ? true : false">Submit</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
@@ -109,7 +107,7 @@
 			<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>
+					<el-button type="primary" :loading="loading_btn" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
 				</div>
 			</el-dialog>
 		<!-- popup edit data end -->
@@ -117,7 +115,7 @@
 			<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>
+					<el-button type="primary" :loading="loading_btn" @click="DeleteAdddialogVisible = false">OK</el-button>
 				</div>
 			</el-dialog>
 		<!-- popup delete end -->
@@ -130,6 +128,7 @@
 	export default {
 		data() {
 			return {
+				loading_btn: false,
 				tableData: [],
 				beneficiariesForm : {
 					company_name : '',
@@ -153,14 +152,17 @@
 		},
 		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,
@@ -172,11 +174,17 @@
 					});
 			},
 			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,
@@ -187,12 +195,21 @@
 					})
 			},
 			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,
@@ -203,14 +220,24 @@
 					});
 			},
 			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,
diff --git a/resources/assets/js/pages/settings/admin-credit-setting.vue b/resources/assets/js/pages/settings/admin-credit-setting.vue
index 21b74e01..f776a0c8 100644
--- a/resources/assets/js/pages/settings/admin-credit-setting.vue
+++ b/resources/assets/js/pages/settings/admin-credit-setting.vue
@@ -62,7 +62,7 @@
                     this.loading_btn = false
 						this.$message({
 						showClose: true,
-						message: 'Success',
+						message: 'Time Limit and Credit Limit Updated Successfully',
 						type: 'success',
 						duration: 5000
 					});
diff --git a/resources/assets/js/pages/settings/admin-malaysia-bank.vue b/resources/assets/js/pages/settings/admin-malaysia-bank.vue
index 3f9345de..ebf2f3ad 100644
--- a/resources/assets/js/pages/settings/admin-malaysia-bank.vue
+++ b/resources/assets/js/pages/settings/admin-malaysia-bank.vue
@@ -11,8 +11,8 @@
 			<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="PopOutEditMalaysiaBank(scope.$index)">Edit</el-button>
-					<el-button type="text" size="small" @click="DeleteMalaysiaBank(tableData[scope.$index].id)">Delete</el-button>
+					<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>
@@ -22,38 +22,38 @@
 		<!-- 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" :class="{'has-error': errors.has('company_name') }">
+					<el-form-item label="Company Name">
 						<el-input v-model="malaysiaBankForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
+					<el-form-item label="Bank Name">
 						<el-input v-model="malaysiaBankForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Bank Account No" :class="{'has-error': errors.has('acc_no') }">
+					<el-form-item label="Bank Account No">
 						<el-input v-model="malaysiaBankForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Bank Address" :class="{'has-error': errors.has('bank_address') }">
+					<el-form-item label="Bank Address">
 						<el-input v-model="malaysiaBankForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('bank_address')">{{ errors.first('bank_address') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="SWIFT Code" :class="{'has-error': errors.has('swift') }">
+					<el-form-item label="SWIFT Code">
 						<el-input v-model="malaysiaBankForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('swift')">{{ errors.first('swift') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="CNAP" :class="{'has-error': errors.has('cnap') }">
+					<el-form-item label="CNAP">
 						<el-input v-model="malaysiaBankForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
-						<span class="error-message text-danger" v-if="errors.has('cnap')">{{ errors.first('cnap') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Bank Branch" :class="{'has-error': errors.has('bank_branch') }">
+					<el-form-item label="Bank Branch">
 						<el-input v-model="malaysiaBankForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('bank_branch')">{{ errors.first('bank_branch') }}<br/></span>
+						
 					</el-form-item>
 				</el-form>
 				<div align="center">
 					<el-button @click="AddDatadialogVisible = false">Cancel</el-button>
-					<el-button type="primary" @click="CreateMalaysiaBank" :disabled="errors.any() || malaysiaBankForm.company_name=='' || malaysiaBankForm.bank_name=='' || malaysiaBankForm.acc_no=='' || malaysiaBankForm.bank_address=='' || malaysiaBankForm.swift =='' || malaysiaBankForm.cnap=='' || malaysiaBankForm.bank_branch=='' ? true : false">OK</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
@@ -62,45 +62,45 @@
 			<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>
+						<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" :class="{'has-error': errors.has('company_name') }">
+					<el-form-item label="Company Name">
 						<el-input v-model="malaysiaBankForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
+					<el-form-item label="Bank Name">
 						<el-input v-model="malaysiaBankForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Bank Account No" :class="{'has-error': errors.has('acc_no') }">
+					<el-form-item label="Bank Account No">
 						<el-input v-model="malaysiaBankForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Bank Address" :class="{'has-error': errors.has('bank_address') }">
+					<el-form-item label="Bank Address">
 						<el-input v-model="malaysiaBankForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('bank_address')">{{ errors.first('bank_address') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="SWIFT Code" :class="{'has-error': errors.has('swift') }">
+					<el-form-item label="SWIFT Code">
 						<el-input v-model="malaysiaBankForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('swift')">{{ errors.first('swift') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="CNAP" :class="{'has-error': errors.has('cnap') }">
+					<el-form-item label="CNAP">
 						<el-input v-model="malaysiaBankForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
-						<span class="error-message text-danger" v-if="errors.has('cnap')">{{ errors.first('cnap') }}<br/></span>
+					
 					</el-form-item>
-					<el-form-item label="Bank Branch" :class="{'has-error': errors.has('bank_branch') }">
+					<el-form-item label="Bank Branch">
 						<el-input v-model="malaysiaBankForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('bank_branch')">{{ errors.first('bank_branch') }}<br/></span>
+						
 					</el-form-item>
 				</el-form>
 				<div align="center">
 					<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
-					<el-button type="primary" @click="EditMalaysiaBank" :disabled="errors.any() || malaysiaBankForm.company_name=='' || malaysiaBankForm.bank_name=='' || malaysiaBankForm.acc_no=='' || malaysiaBankForm.bank_address=='' || malaysiaBankForm.swift =='' || malaysiaBankForm.cnap=='' || malaysiaBankForm.bank_branch=='' ? true : false">Submit</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
@@ -109,7 +109,7 @@
 			<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>
+					<el-button type="primary" :loading="loading_btn" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
 				</div>
 			</el-dialog>
 		<!-- popup edit data end -->
@@ -117,7 +117,7 @@
 			<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>
+					<el-button type="primary" :loading="loading_btn" @click="DeleteAdddialogVisible = false">OK</el-button>
 				</div>
 			</el-dialog>
 		<!-- popup delete end -->
@@ -130,6 +130,7 @@
 	export default {
 		data() {
 			return {
+				loading_btn: false,
 				tableData: [],
 				malaysiaBankForm : {
 					company_name : '',
@@ -153,14 +154,23 @@
 	    },
 		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,
@@ -172,11 +182,16 @@
 					});
 			},
 			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,
@@ -187,12 +202,21 @@
 					})
 			},
 			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,
@@ -203,11 +227,20 @@
 					});
 			},
 			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);
@@ -222,8 +255,6 @@
 			PopOutAddMalaysiaBank : function(){
 				this.AddDatadialogVisible = true;
 				this.ClearMalaysiaBankForm();
-				this.$validator.validateAll();
-				console.log(this.errors.count());
 			},
 			PopOutEditMalaysiaBank : function(tableDataRow){
 				this.EditDatadialogVisible = true;
diff --git a/resources/assets/js/pages/settings/admin-marking-setting.vue b/resources/assets/js/pages/settings/admin-marking-setting.vue
index 07bccc2d..491c9aa2 100644
--- a/resources/assets/js/pages/settings/admin-marking-setting.vue
+++ b/resources/assets/js/pages/settings/admin-marking-setting.vue
@@ -28,8 +28,9 @@
 			    </el-form>
 				<div align="right">
 					<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
-					<el-button type="primary" icon="el-icon-plus" @click="CreateMarking('markingForm')">Add New Data</el-button>
+                <el-button type="primary"  :loading="loading_btn"  @click="CreateMarking('markingForm')">Add New Data</el-button>
 				</div>
+
 			</el-dialog>
 			<el-dialog align="center" :visible.sync="DoneAddDatadialogVisible" width="30%">
 				<span>Data Added Successfully</span><br><br>
@@ -109,6 +110,7 @@
 	    },
 		methods: {
 			CreateMarking : function(formName){	
+				this.loading_btn = true
 				this.AddDatadialogVisible = false;
 				this.$refs[formName].validate((valid) => {
 					if (valid) {
diff --git a/resources/assets/js/pages/settings/admin-supplier.vue b/resources/assets/js/pages/settings/admin-supplier.vue
index 00ce985a..eb151563 100644
--- a/resources/assets/js/pages/settings/admin-supplier.vue
+++ b/resources/assets/js/pages/settings/admin-supplier.vue
@@ -20,30 +20,30 @@
 		<!-- 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" :class="{'has-error': errors.has('company_name') }">
+					<el-form-item label="Company Name">
 						<el-input v-model="supplierForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Registration No" :class="{'has-error': errors.has('supplier_reg_no') }">
+					<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>
-						<span class="error-message text-danger" v-if="errors.has('supplier_reg_no')">{{ errors.first('supplier_reg_no') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="GST No" :class="{'has-error': errors.has('gst_no') }">
+					<el-form-item label="GST No">
 						<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('gst_no')">{{ errors.first('gst_no') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
+					<el-form-item label="Bank Name">
 						<el-input v-model="supplierForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Account No" :class="{'has-error': errors.has('acc_no') }">
+					<el-form-item label="Account No">
 						<el-input v-model="supplierForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
+						
 					</el-form-item>
 				</el-form>
 				<div align="center">
 						<el-button @click="AddNewSupplierdialogVisible = false">Cancel</el-button>
-						<el-button type="primary" @click="CreateSupplier" :disabled="errors.any() || supplierForm.company_name=='' || supplierForm.supplier_reg_no=='' || supplierForm.gst_no=='' || supplierForm.bank_name=='' || supplierForm.acc_no =='' ? true : false">OK</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%">
@@ -56,30 +56,30 @@
 		<!-- 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" :class="{'has-error': errors.has('company_name') }">
+					<el-form-item label="Company Name">
 						<el-input v-model="supplierForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Registration No" :class="{'has-error': errors.has('supplier_reg_no') }">
+					<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>
-						<span class="error-message text-danger" v-if="errors.has('supplier_reg_no')">{{ errors.first('supplier_reg_no') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="GST No" :class="{'has-error': errors.has('gst_no') }">
+					<el-form-item label="GST No">
 						<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('gst_no')">{{ errors.first('gst_no') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
+					<el-form-item label="Bank Name">
 						<el-input v-model="supplierForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
+						
 					</el-form-item>
-					<el-form-item label="Account No" :class="{'has-error': errors.has('acc_no') }">
+					<el-form-item label="Account No">
 						<el-input v-model="supplierForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
-						<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
+						
 					</el-form-item>
 				</el-form>
 				<div align="center">
 						<el-button @click="EditSupplierdialogVisible = false">Cancel</el-button>
-						<el-button type="primary" @click="EditSupplier" :disabled="errors.any() || supplierForm.company_name=='' || supplierForm.supplier_reg_no=='' || supplierForm.gst_no=='' || supplierForm.bank_name=='' || supplierForm.acc_no =='' ? true : false">OK</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%">
diff --git a/resources/assets/js/pages/settings/admin-tax-setting.vue b/resources/assets/js/pages/settings/admin-tax-setting.vue
index b26c8636..4809493f 100644
--- a/resources/assets/js/pages/settings/admin-tax-setting.vue
+++ b/resources/assets/js/pages/settings/admin-tax-setting.vue
@@ -7,7 +7,7 @@
         <el-form>
             <el-form-item align="center">
                 Tax : 
-                <el-input size="mini" v-model="tax_setting.tax_rate" style=width:20%></el-input> %
+                <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>