From 77dc6bc89f67d55ee85667c75cbe3efb70aed294 Mon Sep 17 00:00:00 2001
From: Mouhamed Lamine <mouhamedlaminebah@gmail.com>
Date: Mon, 23 Jul 2018 20:06:59 +0800
Subject: [PATCH] Almost done

---
 .../js/pages/admin/booking/bookingDetail.vue  | 262 ++++---------
 .../js/pages/admin/booking/completed.vue      | 344 ++++++-----------
 .../pages/admin/booking/supplierBooking.vue   | 270 ++++---------
 .../js/pages/admin/booking/supplierReport.vue | 327 ++++++----------
 .../admin/booking/uploadChinaBankslip.vue     | 274 ++++----------
 .../js/pages/admin/booking/uploadInvoice.vue  | 348 +++++++----------
 .../js/pages/admin/booking/verification.vue   | 357 ++++++------------
 resources/assets/js/pages/admin/home.vue      |  81 ++--
 .../assets/js/pages/booking/uploadPo.vue      |   3 -
 .../js/pages/booking/uploadUserBankSlip.vue   |  12 +-
 10 files changed, 733 insertions(+), 1545 deletions(-)

diff --git a/resources/assets/js/pages/admin/booking/bookingDetail.vue b/resources/assets/js/pages/admin/booking/bookingDetail.vue
index 002b219e..1ef47e36 100644
--- a/resources/assets/js/pages/admin/booking/bookingDetail.vue
+++ b/resources/assets/js/pages/admin/booking/bookingDetail.vue
@@ -1,201 +1,81 @@
 <template>
   <el-main>
     <progress-track v-model="trackerConfig" />
-
-    <div align="center">
-      <h4 style="margin-top:5%;"></h4>
-      <h5>Waiting User Upload Bank Slip</h5>
-      <br/>
-      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+    <h1>Waiting for User to Upload Bank Slip</h1>
+    <div class="goBackButton">
+      <button type="button" class="btn btn-primary" @click="$router.go(-1)">Go Back</button>
     </div>
-    <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">Order Number :</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="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>{{ booking_details.id }}</td>
+                </tr>
+                <tr>
+                  <td>Date :</td>
+                  <td>{{ booking_details.created_at }}</td> 
+                </tr>
+                <tr>
+                  <td>Customer Marking :</td>
+                  <td>{{ booking_details.marking }}</td> 
+                </tr>
+                <tr>
+                  <td>Term: </td>
+                  <td>{{ booking_details.term }}</td>
+                </tr>
+                <tr>
+                  <td>Beneficiary Account : </td>
+                  <td>{{ booking_details.account_name }}</td>
+                </tr>
+              </tbody>
+            </table>
           </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 class="col">
+            <table class="table table-striped">
+              <tbody>
+                <tr>
+                  <td>Beneficiary Account Number : </td>
+                  <td>{{ booking_details.account_num }}</td>
+                </tr>
+                <tr>
+                  <td>CNY/RMB :</td>
+                  <td>CNY {{ booking_details.amount }}</td>
+                </tr>
+                <tr>
+                  <td>+ Service Charge :</td>
+                  <td>CNY {{ booking_details.service_charge }}</td> 
+                </tr>
+                <tr>
+                  <td>RATE :</td>
+                  <td>{{ booking_details.rate }}</td> 
+                </tr>
+                <tr>
+                  <td></td>
+                  <td><b>MYR {{ booking_details.bia }}</b></td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
-        <!-- <el-row :gutter="12">
-          <el-col :span="12">
-            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
-              <el-table-column prop="data1" align="right" width="200" />
-              <el-table-column prop="data2" align="left" width="200" />
-            </el-table>
-          </el-col>
-          <el-col :span="12">
-            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
-              <el-table-column prop="data1" align="right" width="200" />
-              <el-table-column prop="data2" align="left" width="200" />
-            </el-table>
-          </el-col>
-        </el-row> -->
-      </el-card>
-    </el-row>
-    <br>
+      </div>
+    </div>
 
   </el-main>
 </template>
 <style>
-  .booking-details {
-    font-weight: bold;
+  h1 {
+    margin-top:5%;
+    font-size:3vw;
+    text-align:center;
+  }
+  .goBackButton {
+    text-align:center;
+    margin-bottom:3%;
   }
   .image {
     border: 1px solid #ddd;
@@ -208,6 +88,14 @@
   .image:hover {
     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   }
+  .card {
+    margin-bottom: 3%;
+  }
+  @media only screen and (max-width : 767px) {
+    h1 {
+      font-size: 1em;
+    }
+  }
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
diff --git a/resources/assets/js/pages/admin/booking/completed.vue b/resources/assets/js/pages/admin/booking/completed.vue
index eee2c21b..9822a7e6 100644
--- a/resources/assets/js/pages/admin/booking/completed.vue
+++ b/resources/assets/js/pages/admin/booking/completed.vue
@@ -1,42 +1,30 @@
 <template>
   <el-main>
     <progress-track v-model="trackerConfig"/>
-
-    <div align="center">
-      <h4 style="margin-top:5%;">Order Completed</h4>
-      <br>
+    <h1>Order Completed</h1>
+    <div class="goBackButton">
       <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
     </div>
-    <br>
-
     <!-- bankslip  -->
-    <br>
-    <el-row :gutter="12" justify="center" align="center">
-      <el-col :span="8">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>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 class="row">
+      <div class="col">
+        <div class="card">
+          <div class="card-header">Customer Purchase Order</div>
+          <div class="row">
+            <div class="card-body">
               <a target="_blank" :href="getURL(booking_details.user_po_path)">
                 <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
                 <p v-else>Download</p>
               </a>
-            </el-col>
-          </el-row>
-
-        </el-card>
-      </el-col>
-      <el-col :span="8">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>China Bank Slip</span>
-            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+            </div>
           </div>
-          <el-row :gutter="12" type="flex">
-            <el-col :span="12" align="center">
+        </div>
+      </div>
+      <div class="col">
+        <div class="card">
+          <div class="card-header">China Bank Slip</div>
+          <div class="row">
+            <div class="card-body">
               <div v-for="cn_bankslip in booking_details.china_bankslip_path">
                 <a target="_blank" :href="getURL(cn_bankslip)">
                   <img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
@@ -44,228 +32,90 @@
                   <br/>
                 </a>
               </div>
-            </el-col>
-          </el-row>
-        </el-card>
-      </el-col>
-      <el-col :span="8">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>Invoice</span>
-            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+            </div>
           </div>
-          <el-row :gutter="12" type="flex">
-            <el-col :span="12" align="center">
+        </div>
+      </div>
+      <div class="col">
+        <div class="card">
+          <div class="card-header">Invoice</div>
+          <div class="row">
+            <div class="card-body">
               <a target="_blank" :href="getURL(booking_details.invoice_path)">
                 <img v-if="isImage(booking_details.invoice_path)" v-bind:src="booking_details.invoice_path" class="image">
                 <p v-else>Download</p>
               </a>
-            </el-col>
-          </el-row>
-        </el-card>
-      </el-col>
-    </el-row>
-    <br>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <!-- bank slips END --> 
 
-    <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>
-        <!-- <el-row :gutter="12">
-          <el-col :span="12">
-            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
-              <el-table-column prop="data1" align="right" width="200" />
-              <el-table-column prop="data2" align="left" width="200" />
-            </el-table>
-          </el-col>
-          <el-col :span="12">
-            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
-              <el-table-column prop="data1" align="right" width="200" />
-              <el-table-column prop="data2" align="left" width="200" />
-            </el-table>
-          </el-col>
-        </el-row> -->
-        <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">Order Number :</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="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>{{ booking_details.id }}</td>
+                </tr>
+                <tr>
+                  <td>Date :</td>
+                  <td>{{ booking_details.created_at }}</td> 
+                </tr>
+                <tr>
+                  <td>Customer Marking :</td>
+                  <td>{{ booking_details.marking }}</td> 
+                </tr>
+                <tr>
+                  <td>Term: </td>
+                  <td>{{ booking_details.term }}</td>
+                </tr>
+                <tr>
+                  <td>Beneficiary Account : </td>
+                  <td>{{ booking_details.account_name }}</td>
+                </tr>
+              </tbody>
+            </table>
           </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 class="col">
+            <table class="table table-striped">
+              <tbody>
+                <tr>
+                  <td>Beneficiary Account Number : </td>
+                  <td>{{ booking_details.account_num }}</td>
+                </tr>
+                <tr>
+                  <td>CNY/RMB :</td>
+                  <td>CNY {{ booking_details.amount }}</td>
+                </tr>
+                <tr>
+                  <td>+ Service Charge :</td>
+                  <td>CNY {{ booking_details.service_charge }}</td> 
+                </tr>
+                <tr>
+                  <td>RATE :</td>
+                  <td>{{ booking_details.rate }}</td> 
+                </tr>
+                <tr>
+                  <td></td>
+                  <td><b>MYR {{ booking_details.bia }}</b></td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
-        <!-- <el-row :gutter="12">
-          <el-col :span="12">
-            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
-              <el-table-column prop="data1" align="right" width="200" />
-              <el-table-column prop="data2" align="left" width="200" />
-            </el-table>
-          </el-col>
-          <el-col :span="12">
-            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
-              <el-table-column prop="data1" align="right" width="200" />
-              <el-table-column prop="data2" align="left" width="200" />
-            </el-table>
-          </el-col>
-        </el-row> -->
-      </el-card>
-    </el-row>
-    <br>
+      </div>
+    </div>
 
     <el-row justify="center" align="center">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
-          <span>Payment Bankin Slip</span>
+          <span>Payment Bank-In Slip</span>
           <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
         </div>
         <el-row :gutter="12">
@@ -281,8 +131,15 @@
   </el-main>
 </template>
 <style>
-  .booking-details {
-    font-weight: bold;
+   h1 {
+    margin-top:3%;
+    margin-bottom:3%;
+    font-size:3vw;
+    text-align:center;
+  }
+  .goBackButton {
+    text-align:center;
+    margin-bottom:3%;
   }
   .image {
       border: 1px solid #ddd;
@@ -295,6 +152,17 @@
   .image:hover {
     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   }
+  .card {
+    margin-bottom: 3%;
+  }
+  @media only screen and (max-width : 767px) {
+    h1 {
+      font-size: 1em;
+    }
+    .table {
+			font-size: 3.5vmin;
+		}
+  }
 </style>
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'
diff --git a/resources/assets/js/pages/admin/booking/supplierBooking.vue b/resources/assets/js/pages/admin/booking/supplierBooking.vue
index dc4910c0..bfc42f16 100644
--- a/resources/assets/js/pages/admin/booking/supplierBooking.vue
+++ b/resources/assets/js/pages/admin/booking/supplierBooking.vue
@@ -1,197 +1,66 @@
 <template>
   <el-main>
     <progress-track v-model="trackerConfig" />
-
-    <div align="center">
-      <h4 style="margin-top:5%;"></h4>
-      <br>
-      <h5> Supplier Booking </h5>
-      <br>
-      <!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
+    <h1> Supplier Booking </h1>
+    <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>{{ booking_details.id }}</td>
+                </tr>
+                <tr>
+                  <td>Date :</td>
+                  <td>{{ booking_details.created_at }}</td> 
+                </tr>
+                <tr>
+                  <td>Customer Marking :</td>
+                  <td>{{ booking_details.marking }}</td> 
+                </tr>
+                <tr>
+                  <td>Term: </td>
+                  <td>{{ booking_details.term }}</td>
+                </tr>
+                <tr>
+                  <td>Beneficiary Account : </td>
+                  <td>{{ booking_details.account_name }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="col">
+            <table class="table table-striped">
+              <tbody>
+                <tr>
+                  <td>Beneficiary Account Number : </td>
+                  <td>{{ booking_details.account_num }}</td>
+                </tr>
+                <tr>
+                  <td>CNY/RMB :</td>
+                  <td>CNY {{ booking_details.amount }}</td>
+                </tr>
+                <tr>
+                  <td>+ Service Charge :</td>
+                  <td>CNY {{ booking_details.service_charge }}</td> 
+                </tr>
+                <tr>
+                  <td>RATE :</td>
+                  <td>{{ booking_details.rate }}</td> 
+                </tr>
+                <tr>
+                  <td></td>
+                  <td><b>MYR {{ booking_details.bia }}</b></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
     </div>
-    <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">Order Number :</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>
-          <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-row :gutter="12">
-          <el-col :span="12">
-            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
-              <el-table-column prop="data1" align="right" width="200" />
-              <el-table-column prop="data2" align="left" width="200" />
-            </el-table>
-          </el-col>
-          <el-col :span="12">
-            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
-              <el-table-column prop="data1" align="right" width="200" />
-              <el-table-column prop="data2" align="left" width="200" />
-            </el-table>
-          </el-col>
-        </el-row> -->
-      </el-card>
-    </el-row>
-    <br>
-
     <el-row justify="center" align="center">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
@@ -200,7 +69,6 @@
         </div>
         <el-row :gutter="12" style="text-align:center">
           <el-col :span="20" style="text-align:center">
-
             <el-form ref="supplierBookingForm" :model="supplierBookingForm" :rules="rules">
               <div align="center">
                 <el-form-item prop="supplier">
@@ -209,7 +77,6 @@
                     </el-option>
                   </el-select>
                 </el-form-item>
-
                 <el-form-item prop="rate">
                   <el-input v-model="supplierBookingForm.rate" type="text" placeholder="Rate" style="width: 80%" />
                 </el-form-item>
@@ -231,9 +98,24 @@
   </el-main>
 </template>
 <style>
-  .booking-details {
-    font-weight: bold;
+  h1 {
+    margin-top:3%;
+    margin-bottom:3%;
+    font-size:3vw;
+    text-align:center;
   }
+  .card {
+    margin-bottom: 3%;
+  }
+  @media only screen and (max-width : 767px) {
+    h1 {
+      font-size: 1em;
+    }
+    .table {
+			font-size: 3.5vmin;
+		}
+  }
+  
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
diff --git a/resources/assets/js/pages/admin/booking/supplierReport.vue b/resources/assets/js/pages/admin/booking/supplierReport.vue
index b5e6e75d..a4fb3843 100644
--- a/resources/assets/js/pages/admin/booking/supplierReport.vue
+++ b/resources/assets/js/pages/admin/booking/supplierReport.vue
@@ -1,203 +1,82 @@
 <template>
   <el-main>
     <progress-track v-model="trackerConfig" />
-
-    <div align="center">
-      <h4 style="margin-top:5%;"></h4>
-      <br>
-      <h5>Supplier Report</h5>
-      <br>
-      <!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
+    <h1> Supplier Report </h1>
+    <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>{{ booking_details.id }}</td>
+                </tr>
+                <tr>
+                  <td>Date :</td>
+                  <td>{{ booking_details.created_at }}</td> 
+                </tr>
+                <tr>
+                  <td>Customer Marking :</td>
+                  <td>{{ booking_details.marking }}</td> 
+                </tr>
+                <tr>
+                  <td>Term: </td>
+                  <td>{{ booking_details.term }}</td>
+                </tr>
+                <tr>
+                  <td>Beneficiary Account : </td>
+                  <td>{{ booking_details.account_name }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="col">
+            <table class="table table-striped">
+              <tbody>
+                <tr>
+                  <td>Beneficiary Account Number : </td>
+                  <td>{{ booking_details.account_num }}</td>
+                </tr>
+                <tr>
+                  <td>CNY/RMB :</td>
+                  <td>CNY {{ booking_details.amount }}</td>
+                </tr>
+                <tr>
+                  <td>+ Service Charge :</td>
+                  <td>CNY {{ booking_details.service_charge }}</td> 
+                </tr>
+                <tr>
+                  <td>RATE :</td>
+                  <td>{{ booking_details.rate }}</td> 
+                </tr>
+                <tr>
+                  <td></td>
+                  <td><b>MYR {{ booking_details.bia }}</b></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
     </div>
-    <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">Order Number :</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>
-          <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 class="card">
+      <div class="card-header">Supplier Report</div>
+        <div class="row">
+          <div class="card-body">
+            <canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
+            <img id="banklogo" src="/banklogo.png" style="display: none"/>
+            <br>
+            <button type="button" class="btn btn-link" id="dlButton" @click="downloadReport()">Download Now</button>
           </div>
         </div>
-        <!-- <el-row :gutter="12">
-          <el-col :span="12">
-            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
-              <el-table-column prop="data1" align="right" width="200" />
-              <el-table-column prop="data2" align="left" width="200" />
-            </el-table>
-          </el-col>
-          <el-col :span="12">
-            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
-              <el-table-column prop="data1" align="right" width="200" />
-              <el-table-column prop="data2" align="left" width="200" />
-            </el-table>
-          </el-col>
-        </el-row> -->
-      </el-card>
-    </el-row>
-    <br>
-
-    <el-row justify="center" align="center">
-      <el-card class="box-card">
+    </div>
+      <!--<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>
+        <!--</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>
@@ -206,39 +85,34 @@
             <el-button @click="downloadReport()" type="text">Download Now</el-button>
           </el-col>
         </el-row>
-      </el-card>
-      <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">
+      </el-card>-->
+      <div class="card">
+      <div class="card-header">Bank-In Slip</div>
+        <div class="row">
+          <div class="card-body">
             <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
-              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="bankinSlipImage">
               <p v-else>Download</p>
-            </a>
-          </el-col>
-        </el-row>
-      </el-card>
-      <br>
-      <el-card class="box-card">
-        <el-row :gutter="12">
-          <el-col :span="22" style="text-align:center">
-            <el-button :loading="loading_btn" @click="goToSupplierBooking" type="primary">Edit</el-button>
-            <el-button :loading="loading_btn" @click="completeReport" type="success">Done</el-button>
-          </el-col>
-        </el-row>
-      </el-card>
-    </el-row>
+            </a>  
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="btn-group" role="group">
+          <button type="button" class="btn btn-primary" :loading="loading_btn" @click="goToSupplierBooking">Edit</button>
+          <button type="button" class="btn btn-success" :loading="loading_btn" @click="completeReport">Done</button>
+        </div>
+      </div>
   </el-main>
 </template>
 <style>
-  .booking-details {
-    font-weight: bold;
+  h1 {
+    margin-top:3%;
+    margin-bottom:3%;
+    font-size:3vw;
+    text-align:center;
   }
-  .image {
+  .bankinSlipImage {
     border: 1px solid #ddd;
     border-radius: 4px;
     margin-left: auto;
@@ -246,9 +120,24 @@
     width: 150px;
     display: block;
   }
-  .image:hover {
+  .bankinSlipImage {
     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   }
+  .card {
+    margin-bottom: 3%;
+  }
+  #myCanvas, #dlButton, .btn-group{
+    margin: 0 auto;
+    display:block;
+  }
+  @media only screen and (max-width : 767px) {
+    h1 {
+      font-size: 1em;
+    }
+    .table {
+			font-size: 3.5vmin;
+		}
+  }
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
diff --git a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
index 5ac9ede6..c621eb23 100644
--- a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
+++ b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
@@ -1,197 +1,66 @@
 <template>
   <el-main>
     <progress-track v-model="trackerConfig" />
-
-    <div align="center">
-      <h4 style="margin-top:5%;"></h4>
-      <br>
-      <h5> Upload China Bankslip To Customer </h5>
-      <br>
-      <!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
+    <h1> Upload China Bankslip To Customer </h1>
+    <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>{{ booking_details.id }}</td>
+                </tr>
+                <tr>
+                  <td>Date :</td>
+                  <td>{{ booking_details.created_at }}</td> 
+                </tr>
+                <tr>
+                  <td>Customer Marking :</td>
+                  <td>{{ booking_details.marking }}</td> 
+                </tr>
+                <tr>
+                  <td>Term: </td>
+                  <td>{{ booking_details.term }}</td>
+                </tr>
+                <tr>
+                  <td>Beneficiary Account : </td>
+                  <td>{{ booking_details.account_name }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="col">
+            <table class="table table-striped">
+              <tbody>
+                <tr>
+                  <td>Beneficiary Account Number : </td>
+                  <td>{{ booking_details.account_num }}</td>
+                </tr>
+                <tr>
+                  <td>CNY/RMB :</td>
+                  <td>CNY {{ booking_details.amount }}</td>
+                </tr>
+                <tr>
+                  <td>+ Service Charge :</td>
+                  <td>CNY {{ booking_details.service_charge }}</td> 
+                </tr>
+                <tr>
+                  <td>RATE :</td>
+                  <td>{{ booking_details.rate }}</td> 
+                </tr>
+                <tr>
+                  <td></td>
+                  <td><b>MYR {{ booking_details.bia }}</b></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
     </div>
-    <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">Order Number :</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>
-          <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-row :gutter="12">
-          <el-col :span="12">
-            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
-              <el-table-column prop="data1" align="right" width="200" />
-              <el-table-column prop="data2" align="left" width="200" />
-            </el-table>
-          </el-col>
-          <el-col :span="12">
-            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
-              <el-table-column prop="data1" align="right" width="200" />
-              <el-table-column prop="data2" align="left" width="200" />
-            </el-table>
-          </el-col>
-        </el-row> -->
-      </el-card>
-    </el-row>
-    <br>
-
     <el-row justify="center" align="center">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
@@ -213,17 +82,10 @@
                   <el-button size="small" type="primary">Click to upload</el-button>
                   <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
                 </el-upload>
-
                 <br>
-                <!-- upload image end -->
-<!--                 <el-form-item prop="date">
-                  <el-date-picker v-model="chinaSlipForm.date" type="date" placeholder="Pick a day" :picker-options="pickerOptions1">
-                  </el-date-picker>
-                </el-form-item> -->
                 <el-form-item prop="actual_transfer_amount">
                   <el-input v-model="chinaSlipForm.actual_transfer_amount" type="text" placeholder="Amount" style="width: 80%" />
                 </el-form-item>
-
                 <el-form-item prop="details">
                   <el-input v-model="chinaSlipForm.details" type="text" placeholder="Details" style="width: 80%" />
                 </el-form-item>
@@ -239,8 +101,22 @@
   </el-main>
 </template>
 <style>
-  .booking-details {
-    font-weight: bold;
+  h1 {
+    margin-top:3%;
+    margin-bottom:3%;
+    font-size:3vw;
+    text-align:center;
+  }
+  .card {
+    margin-bottom: 3%;
+  }
+  @media only screen and (max-width : 767px) {
+    h1 {
+      font-size: 1em;
+    }
+    .table {
+			font-size: 3.5vmin;
+		}
   }
 </style>
 <script>
diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index fa8adcd4..a8d7fbcf 100644
--- a/resources/assets/js/pages/admin/booking/uploadInvoice.vue
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -1,240 +1,136 @@
 <template>
   <el-main>
     <progress-track 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>
-        <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> -->
+    <h1 v-if="booking_details.user_po_path">Upload Invoice</h1>
+    <h1 v-else>Waiting for User to Upload Purchase Order</h1>
+    <div class="goBackButton">
+      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
     </div>
-    <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">Order Number :</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="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>{{ booking_details.id }}</td>
+                </tr>
+                <tr>
+                  <td>Date :</td>
+                  <td>{{ booking_details.created_at }}</td> 
+                </tr>
+                <tr>
+                  <td>Customer Marking :</td>
+                  <td>{{ booking_details.marking }}</td> 
+                </tr>
+                <tr>
+                  <td>Term: </td>
+                  <td>{{ booking_details.term }}</td>
+                </tr>
+                <tr>
+                  <td>Beneficiary Account : </td>
+                  <td>{{ booking_details.account_name }}</td>
+                </tr>
+              </tbody>
+            </table>
           </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 class="col">
+            <table class="table table-striped">
+              <tbody>
+                <tr>
+                  <td>Beneficiary Account Number : </td>
+                  <td>{{ booking_details.account_num }}</td>
+                </tr>
+                <tr>
+                  <td>CNY/RMB :</td>
+                  <td>CNY {{ booking_details.amount }}</td>
+                </tr>
+                <tr>
+                  <td>+ Service Charge :</td>
+                  <td>CNY {{ booking_details.service_charge }}</td> 
+                </tr>
+                <tr>
+                  <td>RATE :</td>
+                  <td>{{ booking_details.rate }}</td> 
+                </tr>
+                <tr>
+                  <td></td>
+                  <td><b>MYR {{ booking_details.bia }}</b></td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
-      </el-card>
-    </el-row>
-    <br>
+      </div>
+    </div>
 
-    <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"
+    <div class="row" v-if="booking_details.user_po_path">
+      <div class="col">
+        <div class="card">
+          <div class="card-header">Upload Invoice</div>
+            <div class="card-body">
+              <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"
+                     class="upload-demo uploadAreaOne"
                      drag
                      multiple>
-            <i class="el-icon-upload"/>
-            <div class="el-upload__text">Drop file here or
-              <em>click to upload</em>
+              <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-invoice'"
+                :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>
+              <br>
+              <div class="submitInvoiceButton">
+                <el-button :loading="loading_btn" type="primary" @click="confirmInvoice">Submit</el-button>
+              </div>
             </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>
-
-          <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>
+      </div>
+      <div class="col">
+        <div class="card">
+          <div class="card-header">Customer Purchase Order</div>
+          <div class="row">
+            <div class="card-body">
               <a target="_blank" :href="getURL(booking_details.user_po_path)">
                 <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
                 <p v-else>Download</p>
               </a>
-            </el-col>
-          </el-row>
-        </el-card>
-      </el-col>
-    </el-row>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </el-main>
 </template>
 <style>
-  .booking-details {
-    font-weight: bold;
+  h1 {
+    margin-top:3%;
+    margin-bottom:3%;
+    font-size:3vw;
+    text-align:center;
+  }
+  .goBackButton {
+    text-align:center;
+    margin-bottom:3%;
+  }
+  .submitInvoiceButton {
+    text-align: right;
   }
   .image {
       border: 1px solid #ddd;
@@ -247,6 +143,26 @@
   .image:hover {
     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   }
+  .card {
+    margin-bottom: 3%;
+  }
+  .uploadAreaTwo {
+    display: none;
+  }
+  @media screen and (max-width: 767px) {
+    .uploadAreaOne {
+      display: none;
+    }
+    .uploadAreaTwo {
+      display: unset;
+    }
+		.table {
+			font-size: 3.5vmin;
+		}
+		h1 {
+      font-size: 1em;
+    }
+	}
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
diff --git a/resources/assets/js/pages/admin/booking/verification.vue b/resources/assets/js/pages/admin/booking/verification.vue
index 65b13a07..c1d26934 100644
--- a/resources/assets/js/pages/admin/booking/verification.vue
+++ b/resources/assets/js/pages/admin/booking/verification.vue
@@ -1,248 +1,119 @@
 <template>
   <el-main>
     <progress-track v-model="trackerConfig" />
-
-    <div align="center">
-      <h4 style="margin-top:5%;"></h4>
-      <br>
-      <h5> Verify User Bankslip </h5>
-      <br>
-      <h5> ( Scroll down to view the customer bankslip ) </h5>
-      <br>
-      <!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
+    <h1> Verify User Bankslip </h1>
+    <h2> ( Scroll down to view the customer bankslip ) </h2>
+    <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>{{ booking_details.id }}</td>
+                </tr>
+                <tr>
+                  <td>Date :</td>
+                  <td>{{ booking_details.created_at }}</td> 
+                </tr>
+                <tr>
+                  <td>Customer Marking :</td>
+                  <td>{{ booking_details.marking }}</td> 
+                </tr>
+                <tr>
+                  <td>Term: </td>
+                  <td>{{ booking_details.term }}</td>
+                </tr>
+                <tr>
+                  <td>Beneficiary Account : </td>
+                  <td>{{ booking_details.account_name }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="col">
+            <table class="table table-striped">
+              <tbody>
+                <tr>
+                  <td>Beneficiary Account Number : </td>
+                  <td>{{ booking_details.account_num }}</td>
+                </tr>
+                <tr>
+                  <td>CNY/RMB :</td>
+                  <td>CNY {{ booking_details.amount }}</td>
+                </tr>
+                <tr>
+                  <td>+ Service Charge :</td>
+                  <td>CNY {{ booking_details.service_charge }}</td> 
+                </tr>
+                <tr>
+                  <td>RATE :</td>
+                  <td>{{ booking_details.rate }}</td> 
+                </tr>
+                <tr>
+                  <td></td>
+                  <td><b>MYR {{ booking_details.bia }}</b></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
     </div>
-    <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 class="card">
+      <div class="card-header">Bank-In Slip</div>
+      <div class="row">
+        <div class="card-body">
+          <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+            <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="bankinSlipImage">
+            <p v-else>Download</p>
+          </a>  
         </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">Order Number :</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>
+    </div>
+    <div class="row">
+      <div class="btn-group" role="group">
+        <button type="button" class="btn btn-success" :loading="loading_btn" @click="approveUserSlip">Approve</button>
+        <button type="button" class="btn btn-danger" :loading="loading_btn" data-toggle="modal" data-target="#rejectDialogVisible" @click="rejectDialogVisible = true">Reject</button>
+      </div>
+    </div>
+    <!-- Modal -->
+    <div class="modal fade" id="rejectDialogVisible" tabindex="-1" role="dialog" aria-labelledby="rejectDialogVisible" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="rejectDialogVisible">Reason for Rejection</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </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 class="modal-body">
+            <textarea class="form-control" rows="2" placeholder="Please input the reason" v-model="reject_reason"></textarea>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="rejectDialogVisible = false">Cancel</button>
+            <button type="button" class="btn btn-primary" :loading="loading_btn" @click="rejectUserSlip">Submit</button>
           </div>
         </div>
-        <!-- <el-row :gutter="12">
-          <el-col :span="12">
-            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
-              <el-table-column prop="data1" align="right" width="200" />
-              <el-table-column prop="data2" align="left" width="200" />
-            </el-table>
-          </el-col>
-          <el-col :span="12">
-            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
-              <el-table-column prop="data1" align="right" width="200" />
-              <el-table-column prop="data2" align="left" width="200" />
-            </el-table>
-          </el-col>
-        </el-row> -->
-      </el-card>
-    </el-row>
-    <br>
-
-    <el-row justify="center" align="center">
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>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>
-
-      <el-card class="box-card">
-        <el-row :gutter="12">
-          <el-col :span="22" style="text-align:center">
-            <el-button :loading="loading_btn" @click="approveUserSlip" type="success">Approve</el-button>
-            <el-button :loading="loading_btn" @click="rejectDialogVisible = true" type="danger">Reject</el-button>
-          </el-col>
-        </el-row>
-      </el-card>
-    </el-row>
-
-    <el-dialog title="Reason of Reject" :visible.sync="rejectDialogVisible" width="30%" center>
-      <span>
-        <el-input
-          type="textarea"
-          :rows="2"
-          placeholder="Please input the reason"
-          v-model="reject_reason">
-        </el-input>
-      </span>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="rejectDialogVisible = false">Cancel</el-button>
-        <el-button type="primary" :loading="loading_btn" @click="rejectUserSlip">Submit</el-button>
-      </span>
-    </el-dialog>
-
-
+      </div>
+    </div>
+    
   </el-main>
 </template>
 <style>
-  .booking-details {
-    font-weight: bold;
+  h1 {
+    margin-top:3%;
+    font-size:3vw;
+    text-align:center;
   }
-  .image {
+  h2 {
+    font-size:2vw;
+    text-align:center;
+    margin-bottom:3%;
+  }
+  .bankinSlipImage {
     border: 1px solid #ddd;
     border-radius: 4px;
     margin-left: auto;
@@ -250,9 +121,27 @@
     width: 150px;
     display: block;
   }
-  .image:hover {
+  .bankinSlipImage:hover {
     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   }
+  .card {
+    margin-bottom: 3%;
+  }
+  .btn-group{
+    margin: 0 auto;
+    display:block;
+  }
+  @media only screen and (max-width : 767px) {
+    h1 {
+      font-size: 1em;
+    }
+    h2 {
+      font-size: 0.8em;
+    }
+    .table {
+			font-size: 3.5vmin;
+		}
+  }
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
diff --git a/resources/assets/js/pages/admin/home.vue b/resources/assets/js/pages/admin/home.vue
index 501256b5..fc0a9d39 100644
--- a/resources/assets/js/pages/admin/home.vue
+++ b/resources/assets/js/pages/admin/home.vue
@@ -1,53 +1,38 @@
 <template>
-<div>
-  <div align="right">
-<el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button>
-</div>
-
- 
-
-  <!-- Booking Table -->
-  <el-row :gutter="20">
-    <div>
-      <el-table :data="bookingTable">
-        <el-table-column label="No." width="100">
-          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
-          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id) }"> {{ scope.row.id }}</el-button>
-        </el-table-column>
-        <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
-        <el-table-column label="Marking" width="120" prop="marking" />
-        <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandlerTerm" label="Term" prop="term" width="100"/>
-        <el-table-column label="Rate" width="74" prop="rate" />
-        <el-table-column label="Amount" prop="amount" justify="center" width="110" />
-        <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandlerTranferAmount" label="Transfer Amount"
-                         prop="transfer_amount" width="170" />
-        <!-- <el-table-column label="ETA" sortable width="100"/> -->
-        <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
-        </el-table-column> -->
-        <!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
-        <el-table-column label="Status" width="106" :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterHandlerStatus" prop="status_desc">
-          <template slot-scope="scope">
-            <el-popover trigger="click" placement="top">
-              <p>{{ scope.row.status_desc }}</p>
-              <div slot="reference" class="name-wrapper">
-                <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
-              </div>
-            </el-popover>
-          </template>
-        </el-table-column>
-        <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
-        <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
-        <el-table-column label="" width="180">
-          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id) }"> View Status </el-button>
-          <!-- <template slot-scope="scope">
-              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
-              <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
-            </template> -->
-        </el-table-column>
-      </el-table>
+  <div>
+    <div align="right">
+      <el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button>
     </div>
-  </el-row>
-  <!-- Booking Table-end -->
+    <!-- Booking Table -->
+    <div class="row">
+        <el-table :data="bookingTable">
+          <el-table-column label="No." width="100">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id) }"> {{ scope.row.id }}</el-button>
+          </el-table-column>
+          <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
+          <el-table-column label="Marking" width="120" prop="marking" />
+          <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandlerTerm" label="Term" prop="term" width="100"/>
+          <el-table-column label="Rate" width="74" prop="rate" />
+          <el-table-column label="Amount" prop="amount" justify="center" width="110" />
+          <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandlerTranferAmount" label="Transfer Amount"
+                          prop="transfer_amount" width="170" />
+          <el-table-column label="Status" width="106" :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterHandlerStatus" prop="status_desc">
+            <template slot-scope="scope">
+              <el-popover trigger="click" placement="top">
+                <p>{{ scope.row.status_desc }}</p>
+                <div slot="reference" class="name-wrapper">
+                  <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
+          <el-table-column label="" width="180">
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id) }"> View Status </el-button>
+          </el-table-column>
+        </el-table>
+    </div>
+    <!-- Booking Table-end -->
   </div>
 </template>
 
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index 12a28cb6..bfb08d35 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -142,9 +142,6 @@
     text-align:center;
     margin-bottom:3%;
   }
-  .booking-details {
-    font-weight: bold;
-  }
   .bankinSlipImage {
     border: 1px solid #ddd;
     border-radius: 4px;
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index f4271e58..7f9ac8fd 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -2,14 +2,12 @@
 	<el-main>
 	<progress-track v-model="status"/>
 	<div align="center" v-if="booking.user_bankslip_path">
-		<h4 style="margin-top:5%" >
-		Your Bankslip Has Been Rejected, Please Reupload Your Bankslip <br>
-		Reason : {{ booking.reject_reason }}
-		</h4>
-		<br>
-		<br>
+		<h1 class="alert-heading">Your Bank Slip Has Been Rejected</h1>
+		<p>Reason : {{ booking.reject_reason }}</p>
+		<p>Please Reupload Your Bank Slip</p>
+		<hr>
 	</div>
-	<div v-else align="center">
+	<div v-else>
 		<h1>Waiting For Payment</h1>
 	</div>