From 3410008dd4f20f8c3823d60da0c9c1780fce7384 Mon Sep 17 00:00:00 2001
From: Mouhamed Lamine <mouhamedlaminebah@gmail.com>
Date: Tue, 17 Jul 2018 16:52:30 +0800
Subject: [PATCH] final commit

---
 resources/assets/js/pages/home.vue | 568 +++++++++++++++--------------
 1 file changed, 285 insertions(+), 283 deletions(-)

diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index d43d32c4..b69bfe76 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -1,289 +1,291 @@
 <template>
-  <el-container>
-    <el-main>
-      <!-- Input-Amount :sm="6" :md="6" :lg="6" :xl="6" :sm="12" :md="12" :lg="12" :xl="10" :sm="8" :md="8" :lg="10" :xl="10"-->
-      <el-row :gutter="10" type="flex" justify="center" align="middle">
-        <el-col  :sm="8"  align="right">
-          I need:
-        </el-col>
-        <el-col  :sm="8"  align="center">
-            <el-select v-model="value" placeholder="RMB">
-              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
-              <!-- <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2" /> -->
-            </el-select>
-        </el-col>
-        <el-col :sm="8" align="center">
-          <el-input v-model="booking.amount" placeholder="Amount" />
-        </el-col>
-      </el-row>
-      <br>
-      <!-- Input-Amount-end -->
-      <hr>
-      <!-- Rate-Display -->
-      <br>
-      <el-row :gutter="20" type="flex" justify="center" align="middle">
-        <el-col>
-          <div class="grid-content bg-purple" align="right" />
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" align="left" />
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" align="center">Cash/Bank Transfer</div>
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" align="center">Cheque</div>
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" align="center">BA</div>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20" type="flex" justify="center" align="middle">
-        <el-col>
-          <el-tooltip class="item" effect="dark" content="Payment to China Supplier" placement="left">
-            <div class="grid-content bg-purple" align="right">
-              <i type="button" class="el-icon-question" circle/>
-            </div>
-          </el-tooltip>
-        </el-col>
-        <!-- <el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle/></div></el-col> -->
-        <el-col>
-          <div class="grid-content bg-purple" align="left">X1 :</div>
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" align="center">{{ rate.x1_cash }}</div>
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" align="center">{{ rate.x1_cheque }}</div>
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" align="center">{{ rate.x1_ba }}</div>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20" type="flex" justify="center" align="middle">
-        <el-col>
-          <div class="grid-content bg-purple" />
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" />
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" align="center">
-            <el-button type="text" @click="acceptTerm('x1_cash')">Book</el-button>
-          </div>
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" align="center">
-            <el-button type="text" @click="acceptTerm('x1_cheque')">Book</el-button>
-          </div>
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" align="center">
-            <el-button type="text" @click="acceptTerm('x1_ba')">Book</el-button>
-          </div>
-        </el-col>
-      </el-row>
-
-      <br>
-      <el-row :gutter="20" type="flex" justify="center" align="middle">
-        <el-col>
-          <el-tooltip class="item" effect="dark" content="Payment to China Supplier Only" placement="left">
-            <div class="grid-content bg-purple" align="right">
-              <i type="button" class="el-icon-question" circle/>
-            </div>
-          </el-tooltip>
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" align="left">X2 :</div>
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" align="center">{{ rate.x2_cash }}</div>
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" align="center">{{ rate.x2_cheque }}</div>
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" align="center">{{ rate.x2_ba }}</div>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="20" type="flex" justify="center" align="middle">
-        <el-col>
-          <div class="grid-content bg-purple" />
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" />
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" align="center">
-            <el-button type="text" @click="acceptTerm('x2_cash')">Book</el-button>
-          </div>
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" align="center">
-            <el-button type="text" @click="acceptTerm('x2_cheque')">Book</el-button>
-          </div>
-        </el-col>
-        <el-col>
-          <div class="grid-content bg-purple" align="center">
-            <el-button type="text" @click="acceptTerm('x2_ba')">Book</el-button>
-          </div>
-        </el-col>
-      </el-row>
-      <!-- Rate-Display-end -->
-
-      <!-- Form_popup -->
-      <el-dialog :visible.sync="dialogFormVisible" :fullscreen="true" title="Booking" center>
-        <el-form ref="bookingForm" :model="bookingForm" :rules="rules">
-          <div align="center">
-            <el-form-item prop="account_name">
-              <el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Account" style="width: 80%" required="true" />
-            </el-form-item>
-            <el-form-item prop="bank_name">
-              <el-input v-model="bookingForm.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" />
-            </el-form-item>
-            <el-form-item prop="bank_branch">
-              <el-input v-model="bookingForm.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%" />
-            </el-form-item>
-            <el-form-item prop="account_num">
-              <el-input v-model="bookingForm.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"
-              />
-            </el-form-item>
-            <el-form-item>
-              <el-button @click="dialogFormVisible = false">Cancel</el-button>
-
-              <el-button :loading="loading" type="primary" @click="getCalculationValue('bookingForm')">Book Now</el-button>
-            </el-form-item>
-          </div>
-        </el-form>
-      </el-dialog>
-      <!-- Form_popup-end -->
-
-      <!-- Booking_confirmation_popup -->
-      <el-dialog :visible.sync="dialogFormVisible1" :fullscreen="true" title="Booking Confirmation" center>
-
-        <!-- Table_booking_confirmation -->
-        <!-- <el-table :data="bookingConfirmTable" align="center">
-          <el-table-column prop="data1" align="right" width="200" />
-          <el-table-column prop="data2" align="left" width="200" />
-        </el-table> -->
-        <!-- Table_booking_confirmation-end -->
-
-        <table class="table-responsive el-table" style="display:table; width:80%; margin: 0 auto;">
-          <tbody>
-            <tr>
-              <td class="el-table_2_column_9 is-right ">Date : </td>
-              <td class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.date }}</td>
-            </tr>
-            <tr>
-              <td width="200" class="el-table_2_column_9 is-right ">Customer Marking : </td>
-              <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.marking }}</td>
-            </tr>
-            <tr>
-              <td width="200" class="el-table_2_column_9 is-right ">Payment Method : </td>
-              <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.payment_method }}</td>
-            </tr>
-            <tr>
-              <td width="200" class="el-table_2_column_9 is-right ">CNY/RMB : </td>
-              <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.amount }}</td>
-            </tr>
-            <tr>
-              <td width="200" class="el-table_2_column_9 is-right ">+ Service Charge : </td>
-              <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RMB {{ bookingConfirmTable.service_charge }}</td>
-            </tr>
-            <tr>
-              <td width="200" class="el-table_2_column_9 is-right "> RATE :</td>
-              <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.rate }}</td>
-            </tr>
-            <tr>
-              <td width="200" class="el-table_2_column_9 is-right "/>
-              <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RM {{ bookingConfirmTable.bankin_amount }}</td>
-            </tr>
-            <tr>
-              <td width="200" class="el-table_2_column_9 is-right "/>
-              <td width="200" class="el-table_2_column_9 is-left "/>
-            </tr>
-
-            <tr>
-              <td width="200" class="el-table_2_column_9 is-right ">China Beneficiary Acc :</td>
-              <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.account_name }}</td>
-            </tr>
-            <tr>
-              <td width="200" class="el-table_2_column_9 is-right ">Bank in Amount :</td>
-              <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
-                <b> RM {{ bookingConfirmTable.bankin_amount }}</b>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <span slot="footer" class="dialog-footer">
-          <!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
-          <el-button :loading="loading" type="primary" @click="createBooking">Confirm</el-button>
-        </span>
-      </el-dialog>
-      <!-- Booking_confirmation_popup -->
-      
-      <br>
-      <br>
-      <hr>
-      <div align="right">
-      <el-button icon="el-icon-refresh" 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.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 :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" 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="filterHandler" 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">
-              <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 :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
-                            label="" width="180" filter-placement="bottom-end">
-              <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.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>
+  <el-main>
+    <!-- Input-Amount -->
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col :span="20">
+        <div class="grid-content bg-purple" align="center">
+          I need :
+          <el-select v-model="value" placeholder="RMB">
+            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+            <!-- <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2" /> -->
+          </el-select>
         </div>
-      </el-row><br><br>
-      <div align="right">
-        <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
-          Previous
-        </el-button>
-        <span>Page {{pagination.current_page}} of {{pagination.last_page}}</span>
-        <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.next_page_url)" :disabled="!pagination.next_page_url">
-          Next
-        </el-button>
+      </el-col>
+    </el-row>
+    <br>
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8">
+        <div class="grid-content bg-purple" align="left">
+          <el-input v-model="booking.amount" placeholder="Amount" />
+        </div>
+      </el-col>
+    </el-row>
+    <!-- Input-Amount-end -->
+    <hr>
+    <!-- Rate-Display -->
+    <br>
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col>
+        <div class="grid-content bg-purple" align="right" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="left" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">Cash/Bank Transfer</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">Cheque</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">BA</div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col>
+        <el-tooltip class="item" effect="dark" content="Payment to China Supplier" placement="left">
+          <div class="grid-content bg-purple" align="right">
+            <i type="button" class="el-icon-question" circle/>
+          </div>
+        </el-tooltip>
+      </el-col>
+      <!-- <el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle/></div></el-col> -->
+      <el-col>
+        <div class="grid-content bg-purple" align="left">X1 :</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">{{ rate.x1_cash }}</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">{{ rate.x1_cheque }}</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">{{ rate.x1_ba }}</div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col>
+        <div class="grid-content bg-purple" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x1_cash')">Book</el-button>
+        </div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x1_cheque')">Book</el-button>
+        </div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x1_ba')">Book</el-button>
+        </div>
+      </el-col>
+    </el-row>
+
+    <br>
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col>
+        <el-tooltip class="item" effect="dark" content="Payment to China Supplier Only" placement="left">
+          <div class="grid-content bg-purple" align="right">
+            <i type="button" class="el-icon-question" circle/>
+          </div>
+        </el-tooltip>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="left">X2 :</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">{{ rate.x2_cash }}</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">{{ rate.x2_cheque }}</div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">{{ rate.x2_ba }}</div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col>
+        <div class="grid-content bg-purple" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" />
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x2_cash')">Book</el-button>
+        </div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x2_cheque')">Book</el-button>
+        </div>
+      </el-col>
+      <el-col>
+        <div class="grid-content bg-purple" align="center">
+          <el-button type="text" @click="acceptTerm('x2_ba')">Book</el-button>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- Rate-Display-end -->
+
+    <!-- Form_popup -->
+    <el-dialog :visible.sync="dialogFormVisible" :fullscreen="true" title="Booking" center>
+      <el-form ref="bookingForm" :model="bookingForm" :rules="rules">
+        <div align="center">
+          <el-form-item prop="account_name">
+            <el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Account" style="width: 80%" required="true" />
+          </el-form-item>
+          <el-form-item prop="bank_name">
+            <el-input v-model="bookingForm.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" />
+          </el-form-item>
+          <el-form-item prop="bank_branch">
+            <el-input v-model="bookingForm.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%" />
+          </el-form-item>
+          <el-form-item prop="account_num">
+            <el-input v-model="bookingForm.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="dialogFormVisible = false">Cancel</el-button>
+
+            <el-button :loading="loading" type="primary" @click="getCalculationValue('bookingForm')">Book Now</el-button>
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-dialog>
+    <!-- Form_popup-end -->
+
+    <!-- Booking_confirmation_popup -->
+    <el-dialog :visible.sync="dialogFormVisible1" :fullscreen="true" title="Booking Confirmation" center>
+
+      <!-- Table_booking_confirmation -->
+      <!-- <el-table :data="bookingConfirmTable" align="center">
+        <el-table-column prop="data1" align="right" width="200" />
+        <el-table-column prop="data2" align="left" width="200" />
+      </el-table> -->
+      <!-- Table_booking_confirmation-end -->
+
+      <table class="table-responsive el-table" style="display:table; width:80%; margin: 0 auto;">
+        <tbody>
+          <tr>
+            <td class="el-table_2_column_9 is-right ">Date : </td>
+            <td class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.date }}</td>
+          </tr>
+          <tr>
+            <td width="200" class="el-table_2_column_9 is-right ">Customer Marking : </td>
+            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.marking }}</td>
+          </tr>
+          <tr>
+            <td width="200" class="el-table_2_column_9 is-right ">Payment Method : </td>
+            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.payment_method }}</td>
+          </tr>
+          <tr>
+            <td width="200" class="el-table_2_column_9 is-right ">CNY/RMB : </td>
+            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.amount }}</td>
+          </tr>
+          <tr>
+            <td width="200" class="el-table_2_column_9 is-right ">+ Service Charge : </td>
+            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RMB {{ bookingConfirmTable.service_charge }}</td>
+          </tr>
+          <tr>
+            <td width="200" class="el-table_2_column_9 is-right "> RATE :</td>
+            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.rate }}</td>
+          </tr>
+          <tr>
+            <td width="200" class="el-table_2_column_9 is-right "/>
+            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RM {{ bookingConfirmTable.bankin_amount }}</td>
+          </tr>
+          <tr>
+            <td width="200" class="el-table_2_column_9 is-right "/>
+            <td width="200" class="el-table_2_column_9 is-left "/>
+          </tr>
+
+          <tr>
+            <td width="200" class="el-table_2_column_9 is-right ">China Beneficiary Acc :</td>
+            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.account_name }}</td>
+          </tr>
+          <tr>
+            <td width="200" class="el-table_2_column_9 is-right ">Bank in Amount :</td>
+            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
+              <b> RM {{ bookingConfirmTable.bankin_amount }}</b>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <span slot="footer" class="dialog-footer">
+        <!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
+        <el-button :loading="loading" type="primary" @click="createBooking">Confirm</el-button>
+      </span>
+    </el-dialog>
+    <!-- Booking_confirmation_popup -->
+    
+    <br>
+    <br>
+    <hr>
+    <div align="right">
+    <el-button icon="el-icon-refresh" 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.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 :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" 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="filterHandler" 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">
+            <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 :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
+                           label="" width="180" filter-placement="bottom-end">
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.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>
-      <!-- Booking Table-end -->
-    </el-main>
-  </el-container>
+    </el-row><br><br>
+    <div align="right">
+      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
+        Previous
+      </el-button>
+      <span>Page {{pagination.current_page}} of {{pagination.last_page}}</span>
+      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.next_page_url)" :disabled="!pagination.next_page_url">
+        Next
+      </el-button>
+    </div>
+    <!-- Booking Table-end -->
+  </el-main>
 </template>
 <style>
   .el-tag {