From d29d3c49eba18a7c9905bbf3611899106af5d93e Mon Sep 17 00:00:00 2001
From: Mouhamed Lamine <mouhamedlaminebah@gmail.com>
Date: Mon, 16 Jul 2018 19:15:01 +0800
Subject: [PATCH 1/5] Adding Completed Orders Link on Admin Nav Bar

---
 app/Http/Controllers/BookingController.php    |   7 +-
 .../assets/js/components/LocaleDropdown.vue   |  41 +-
 resources/assets/js/components/Navbar.vue     |   2 +-
 .../assets/js/pages/admin/complete-order.vue  |  41 --
 .../assets/js/pages/admin/complete-orders.vue | 107 ++++
 resources/assets/js/pages/auth/login.vue      |  84 +--
 .../assets/js/pages/auth/password/email.vue   |  44 +-
 .../assets/js/pages/auth/password/reset.vue   |  72 +--
 resources/assets/js/pages/auth/register.vue   | 128 ++--
 .../js/pages/booking/uploadUserBankSlip.vue   | 170 +++---
 resources/assets/js/pages/errors/404.vue      |  18 +-
 resources/assets/js/pages/home.vue            | 560 +++++++++---------
 .../assets/js/pages/settings/profile.vue      |  50 +-
 resources/assets/js/pages/welcome.vue         |  60 +-
 resources/assets/js/router/routes.js          |   4 +-
 routes/api.php                                |   2 +-
 16 files changed, 723 insertions(+), 667 deletions(-)
 delete mode 100644 resources/assets/js/pages/admin/complete-order.vue
 create mode 100644 resources/assets/js/pages/admin/complete-orders.vue

diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index 4c2ed0e1..a3ba25a2 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -755,19 +755,18 @@ class BookingController extends Controller
 
     public function adminShowCompletedOrders()
     {
-        $bookings = Booking::select('id', 'company_name','company_address','created_at','rate','amount', 'rmb_book_amount', 'admin_status')
+        $bookings = Booking::select('id','created_at','user_id','rate','amount', 'bia', 'admin_status')
                ->where('admin_status', 7)
                ->orderBy('id', 'desc')
                ->get();
                
         foreach ($bookings as $booking) {
             $booking->id;
-            $booking->company_name;
-            $booking->company_address;
             $booking->created_at;
+            $booking->marking = $booking->user->marking;
             $booking->rate;
             $booking->amount;
-            $booking->rmb_book_amount;
+            $booking->bia;
             $booking->admin_status;
         }
         return $bookings;
diff --git a/resources/assets/js/components/LocaleDropdown.vue b/resources/assets/js/components/LocaleDropdown.vue
index 822dfcb4..4a0d4872 100644
--- a/resources/assets/js/components/LocaleDropdown.vue
+++ b/resources/assets/js/components/LocaleDropdown.vue
@@ -13,24 +13,31 @@
         </a>
       </div>
     </li> -->
-    <ul class="navbar-nav mr-auto">
-    <li v-if="(user && role == 'admin')" class="nav-item">
-      <el-popover placement="top" width="300" v-model="UpdateRatePopoverVisible">
-          <div align="center">
-            <p>Today's Rate</p>
-            <p>X1 : Cash: {{rate.x1_cash}} Cheque: {{rate.x1_cheque}} BA: {{rate.x1_ba}}</p>
-            <p>X2 : Cash: {{rate.x2_cash}} Cheque: {{rate.x2_cheque}} BA: {{rate.x2_ba}}</p>
-          </div>
-          <div style="text-align: center; margin: 0">
-            <el-button type="primary" size="mini" @click="UpdateRatePopoverVisible = false; UpdateRateDialogVisible = true">Update rate</el-button>
-          </div>
-          <a class="nav-link" href="#" role="button" slot="reference">Update Rate</a>
+    <ul class="navbar-nav">
+      <li v-if="(user && role == 'admin')" class="nav-item">
+        <el-popover placement="top" width="300" v-model="UpdateRatePopoverVisible">
+            <div align="center">
+              <p>Today's Rate</p>
+              <p>X1 : Cash: {{rate.x1_cash}} Cheque: {{rate.x1_cheque}} BA: {{rate.x1_ba}}</p>
+              <p>X2 : Cash: {{rate.x2_cash}} Cheque: {{rate.x2_cheque}} BA: {{rate.x2_ba}}</p>
+            </div>
+            <div style="text-align: center; margin: 0">
+              <el-button type="primary" size="mini" @click="UpdateRatePopoverVisible = false; UpdateRateDialogVisible = true">Update rate</el-button>
+            </div>
+            <a class="nav-link" href="#" role="button" slot="reference">Update Rate</a>
         </el-popover>
-      </li></ul>
-      <!-- <li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.complete' }" class="nav-link">{{ $t('Complete Order') }}</router-link></li> -->
-      <li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.transaction-history' }" class="nav-link">{{ $t('Transaction History') }}</router-link></li>
-      <!-- <li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.upload-supplier-bank-slip' }" class="nav-link">{{ $t('Upload Supplier Bank Slip to System') }}</router-link></li> -->
-   
+      </li>
+    </ul>
+      <li v-if="(user && role == 'admin')" class="nav-item">
+        <router-link :to="{ name: 'admin.transaction-history' }" class="nav-link">
+          {{ $t('Transaction History') }}
+        </router-link>
+      </li>
+      <li v-if="(user && role == 'admin')" class="nav-item">
+        <router-link :to="{ name: 'admin.complete' }" class="nav-link">
+          {{ $t('Completed Orders') }}
+        </router-link>
+      </li>
   </ul>
 <!-- update rate dialog start -->
  <el-dialog align="center" :visible.sync="UpdateRateDialogVisible" width="900px">
diff --git a/resources/assets/js/components/Navbar.vue b/resources/assets/js/components/Navbar.vue
index 71c3aace..a21b9b6d 100644
--- a/resources/assets/js/components/Navbar.vue
+++ b/resources/assets/js/components/Navbar.vue
@@ -10,7 +10,7 @@
       </button>
 
       <div id="navbarToggler" class="collapse navbar-collapse">
-        <ul class="navbar-nav">
+        <ul class="navbar-nav ml-auto">
           <locale-dropdown/>
           <!-- <li class="nav-item">
             <a class="nav-link" href="#">Link</a>
diff --git a/resources/assets/js/pages/admin/complete-order.vue b/resources/assets/js/pages/admin/complete-order.vue
deleted file mode 100644
index 4acc9f92..00000000
--- a/resources/assets/js/pages/admin/complete-order.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div>
-    <div align="right">
-      <el-button icon="el-icon-refresh" type="primary" size="mini" @click="RefreshCompletedOrders()">Refresh</el-button>
-    </div>
-    <h1 align="center">Completed Orders</h1>
-    <el-table :data="tableData" stripe height="500" style="width: 100%">
-        <el-table-column label="Order No" prop="id" sortable></el-table-column>
-        <el-table-column label="Company Name"  prop="company_name"></el-table-column>
-        <el-table-column label="Company Address"  prop="company_address"></el-table-column>
-        <el-table-column label="Order Date"  prop="created_at" sortable></el-table-column>
-        <el-table-column label="Rate" prop="rate" sortable></el-table-column>
-        <el-table-column label="Amount" prop="amount" sortable></el-table-column>
-        <el-table-column label="Transfer Amount (RMB)" prop="rmb_book_amount" sortable></el-table-column>
-        <el-table-column label="Status" prop="admin_status"></el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-  import axios from 'axios'
-  export default {
-      data() {
-        return {
-          tableData: [],
-          url: '/api/admin/complete-order',
-        }
-      },
-      mounted () {
-        this.RefreshCompletedOrders()
-      },
-      methods: {
-        RefreshCompletedOrders() {
-          let $this = this
-          axios.get(this.url).then(response => {
-            this.tableData = response.data
-          })
-        },
-      }
-  }
-</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/admin/complete-orders.vue b/resources/assets/js/pages/admin/complete-orders.vue
new file mode 100644
index 00000000..91a50e17
--- /dev/null
+++ b/resources/assets/js/pages/admin/complete-orders.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div align="right">
+      <el-button icon="el-icon-refresh" type="primary" size="mini" @click="RefreshCompletedOrders()">Refresh</el-button>
+    </div>
+    <h1 align="center" style="margin-bottom:50px;">Completed Orders</h1>
+    <el-table :data="tableData" stripe height="500" style="width: 100%">
+        <el-table-column label="No." prop="id" sortable></el-table-column>
+        <el-table-column label="Order Date"  prop="created_at" width="180" sortable></el-table-column>
+        <el-table-column label="Marking" width="120" prop="marking"></el-table-column>
+        <el-table-column label="Rate" prop="rate" width="74"></el-table-column>
+        <el-table-column label="Amount" prop="amount" sortable></el-table-column>
+        <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount" prop="bia"></el-table-column>
+        <el-table-column label="Status" width="106" prop="admin_status">
+          <template slot-scope="scope">
+            <el-tag size="medium" type="success">{{ scope.row.admin_status }}</el-tag>
+          </template>        
+        </el-table-column>
+        <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag" width="180" filter-placement="bottom-end">
+          <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>
+</template>
+
+<script>
+  import axios from 'axios'
+  export default {
+      data() {
+        return {
+          tableData: [],
+          url: '/api/admin/complete-orders',
+        }
+      },
+      mounted () {
+        this.RefreshCompletedOrders()
+      },
+      methods: {
+        RefreshCompletedOrders() {
+          let $this = this
+          axios.get(this.url).then(response => {
+            this.tableData = response.data
+          })
+        },
+        filterTag (value, row) {
+          return row.tag === value
+        },
+        filterHandler (value, row, column) {
+          const property = column['property']
+          return row[property] === value
+        },
+        BookingStatus (status, booking_id) {
+          // TODO : Get booking status from server
+          this.status = status
+          console.log(this.status)
+          switch (this.status) {
+            case 1:
+              this.$router.push({
+                name: 'booking.admin.pending',
+                params: {id: booking_id }
+              })
+              break
+            case 2:
+              this.$router.push({
+                name: 'booking.admin.verification',
+                params: {id: booking_id }
+              })
+              break
+            case 3:
+              this.$router.push({
+                name: 'booking.admin.supplier',
+                params: {id: booking_id }
+              })
+              break
+            case 4:
+              this.$router.push({
+                name: 'booking.admin.supplier.report',
+                params: {id: booking_id }
+              })
+              break
+            case 5:
+              this.$router.push({
+                name: 'booking.admin.cnslip',
+                params: {id: booking_id }
+              })
+              break
+
+            case 6:
+              this.$router.push({
+                name: 'booking.admin.invoice',
+                params: {id: booking_id }
+              })
+              break
+
+            case 7:
+              this.$router.push({
+                name: 'booking.admin.complete',
+                params: {id: booking_id }
+              })
+              break
+            default:
+              break
+          }
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/auth/login.vue b/resources/assets/js/pages/auth/login.vue
index 06c5e6b4..c9407a81 100644
--- a/resources/assets/js/pages/auth/login.vue
+++ b/resources/assets/js/pages/auth/login.vue
@@ -1,55 +1,57 @@
 <template>
-  <div class="row">
-    <div class="col-lg-8 m-auto">
-      <card :title="$t('login')">
-        <form @submit.prevent="login" @keydown="form.onKeydown($event)">
-          <!-- Email -->
-          <div class="form-group row">
-            <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
-            <div class="col-md-7">
-              <input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email">
-              <has-error :form="form" field="email"/>
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-8 m-auto">
+        <card :title="$t('login')">
+          <form @submit.prevent="login" @keydown="form.onKeydown($event)">
+            <!-- Email -->
+            <div class="form-group row">
+              <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
+              <div class="col-md-7">
+                <input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email">
+                <has-error :form="form" field="email"/>
+              </div>
             </div>
-          </div>
 
-          <!-- Password -->
-          <div class="form-group row">
-            <label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
-            <div class="col-md-7">
-              <input v-model="form.password" :class="{ 'is-invalid': form.errors.has('password') }" class="form-control" type="password" name="password">
-              <has-error :form="form" field="password"/>
+            <!-- Password -->
+            <div class="form-group row">
+              <label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
+              <div class="col-md-7">
+                <input v-model="form.password" :class="{ 'is-invalid': form.errors.has('password') }" class="form-control" type="password" name="password">
+                <has-error :form="form" field="password"/>
+              </div>
             </div>
-          </div>
 
-          <!-- Remember Me -->
-          <div class="form-group row">
-            <div class="col-md-3"/>
-            <div class="col-md-7 d-flex">
-              <checkbox v-model="remember" name="remember">
-                {{ $t('remember_me') }}
-              </checkbox>
+            <!-- Remember Me -->
+            <div class="form-group row">
+              <div class="col-md-3"/>
+              <div class="col-md-7 d-flex">
+                <checkbox v-model="remember" name="remember">
+                  {{ $t('remember_me') }}
+                </checkbox>
 
-              <router-link :to="{ name: 'password.request' }" class="small ml-auto my-auto">
-                {{ $t('forgot_password') }}
-              </router-link>
+                <router-link :to="{ name: 'password.request' }" class="small ml-auto my-auto">
+                  {{ $t('forgot_password') }}
+                </router-link>
+              </div>
             </div>
-          </div>
 
-          <div class="form-group row">
-            <div class="col-md-7 offset-md-3 d-flex">
-              <!-- Submit Button -->
-              <v-button :loading="form.busy">
-                {{ $t('login') }}
-              </v-button>
+            <div class="form-group row">
+              <div class="col-md-7 offset-md-3 d-flex">
+                <!-- Submit Button -->
+                <v-button :loading="form.busy">
+                  {{ $t('login') }}
+                </v-button>
 
-              <!-- <el-button type="primary" @click="openFullScreen2">As a service</el-button> -->
+                <!-- <el-button type="primary" @click="openFullScreen2">As a service</el-button> -->
 
-              <!-- GitHub Login Button -->
-              <login-with-github/>
+                <!-- GitHub Login Button -->
+                <login-with-github/>
+              </div>
             </div>
-          </div>
-        </form>
-      </card>
+          </form>
+        </card>
+      </div>
     </div>
   </div>
 </template>
diff --git a/resources/assets/js/pages/auth/password/email.vue b/resources/assets/js/pages/auth/password/email.vue
index 7502bec3..0240f2cd 100644
--- a/resources/assets/js/pages/auth/password/email.vue
+++ b/resources/assets/js/pages/auth/password/email.vue
@@ -1,29 +1,31 @@
 <template>
-  <div class="row">
-    <div class="col-lg-8 m-auto">
-      <card :title="$t('reset_password')">
-        <form @submit.prevent="send" @keydown="form.onKeydown($event)">
-          <alert-success :form="form" :message="status"/>
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-8 m-auto">
+        <card :title="$t('reset_password')">
+          <form @submit.prevent="send" @keydown="form.onKeydown($event)">
+            <alert-success :form="form" :message="status"/>
 
-          <!-- Email -->
-          <div class="form-group row">
-            <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
-            <div class="col-md-7">
-              <input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email">
-              <has-error :form="form" field="email"/>
+            <!-- Email -->
+            <div class="form-group row">
+              <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
+              <div class="col-md-7">
+                <input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email">
+                <has-error :form="form" field="email"/>
+              </div>
             </div>
-          </div>
 
-          <!-- Submit Button -->
-          <div class="form-group row">
-            <div class="col-md-9 ml-md-auto">
-              <v-button :loading="form.busy">
-                {{ $t('send_password_reset_link') }}
-              </v-button>
+            <!-- Submit Button -->
+            <div class="form-group row">
+              <div class="col-md-9 ml-md-auto">
+                <v-button :loading="form.busy">
+                  {{ $t('send_password_reset_link') }}
+                </v-button>
+              </div>
             </div>
-          </div>
-        </form>
-      </card>
+          </form>
+        </card>
+      </div>
     </div>
   </div>
 </template>
diff --git a/resources/assets/js/pages/auth/password/reset.vue b/resources/assets/js/pages/auth/password/reset.vue
index 09d4edec..107fce5c 100644
--- a/resources/assets/js/pages/auth/password/reset.vue
+++ b/resources/assets/js/pages/auth/password/reset.vue
@@ -1,47 +1,49 @@
 <template>
-  <div class="row">
-    <div class="col-lg-8 m-auto">
-      <card :title="$t('reset_password')">
-        <form @submit.prevent="reset" @keydown="form.onKeydown($event)">
-          <alert-success :form="form" :message="status"/>
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-8 m-auto">
+        <card :title="$t('reset_password')">
+          <form @submit.prevent="reset" @keydown="form.onKeydown($event)">
+            <alert-success :form="form" :message="status"/>
 
-          <!-- Email -->
-          <div class="form-group row">
-            <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
-            <div class="col-md-7">
-              <input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email" readonly>
-              <has-error :form="form" field="email"/>
+            <!-- Email -->
+            <div class="form-group row">
+              <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
+              <div class="col-md-7">
+                <input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email" readonly>
+                <has-error :form="form" field="email"/>
+              </div>
             </div>
-          </div>
 
-          <!-- Password -->
-          <div class="form-group row">
-            <label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
-            <div class="col-md-7">
-              <input v-model="form.password" :class="{ 'is-invalid': form.errors.has('password') }" class="form-control" type="password" name="password">
-              <has-error :form="form" field="password"/>
+            <!-- Password -->
+            <div class="form-group row">
+              <label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
+              <div class="col-md-7">
+                <input v-model="form.password" :class="{ 'is-invalid': form.errors.has('password') }" class="form-control" type="password" name="password">
+                <has-error :form="form" field="password"/>
+              </div>
             </div>
-          </div>
 
-          <!-- Password Confirmation -->
-          <div class="form-group row">
-            <label class="col-md-3 col-form-label text-md-right">{{ $t('confirm_password') }}</label>
-            <div class="col-md-7">
-              <input v-model="form.password_confirmation" :class="{ 'is-invalid': form.errors.has('password_confirmation') }" class="form-control" type="password" name="password_confirmation">
-              <has-error :form="form" field="password_confirmation"/>
+            <!-- Password Confirmation -->
+            <div class="form-group row">
+              <label class="col-md-3 col-form-label text-md-right">{{ $t('confirm_password') }}</label>
+              <div class="col-md-7">
+                <input v-model="form.password_confirmation" :class="{ 'is-invalid': form.errors.has('password_confirmation') }" class="form-control" type="password" name="password_confirmation">
+                <has-error :form="form" field="password_confirmation"/>
+              </div>
             </div>
-          </div>
 
-          <!-- Submit Button -->
-          <div class="form-group row">
-            <div class="col-md-9 ml-md-auto">
-              <v-button :loading="form.busy">
-                {{ $t('reset_password') }}
-              </v-button>
+            <!-- Submit Button -->
+            <div class="form-group row">
+              <div class="col-md-9 ml-md-auto">
+                <v-button :loading="form.busy">
+                  {{ $t('reset_password') }}
+                </v-button>
+              </div>
             </div>
-          </div>
-        </form>
-      </card>
+          </form>
+        </card>
+      </div>
     </div>
   </div>
 </template>
diff --git a/resources/assets/js/pages/auth/register.vue b/resources/assets/js/pages/auth/register.vue
index 672f0539..d80d1524 100644
--- a/resources/assets/js/pages/auth/register.vue
+++ b/resources/assets/js/pages/auth/register.vue
@@ -1,77 +1,79 @@
 <template>
-	<div class="row">
-		<div class="col-lg-8 m-auto">
-			<card :title="$t('register')">
-				<form @submit.prevent="register" @keydown="form.onKeydown($event)">
-					 <!-- Marking -->
-					<div class="form-group row" :class="{'has-error': errors.has('marking') }">
-						<label class="col-md-3 col-form-label text-md-right">{{ $t('Marking') }}</label>
-						<div class="col-md-7">
-							<el-input v-model="form.marking" v-validate="'required|max:255'" type="text" name="marking" placeholder="Marking Number">
-							</el-input>
-							<span class="text-danger" v-if="errors.has('marking')">{{ errors.first('marking') }}<br/></span>
+	<div class="container">
+		<div class="row">
+			<div class="col-lg-8 m-auto">
+				<card :title="$t('register')">
+					<form @submit.prevent="register" @keydown="form.onKeydown($event)">
+						<!-- Marking -->
+						<div class="form-group row" :class="{'has-error': errors.has('marking') }">
+							<label class="col-md-3 col-form-label text-md-right">{{ $t('Marking') }}</label>
+							<div class="col-md-7">
+								<el-input v-model="form.marking" v-validate="'required|max:255'" type="text" name="marking" placeholder="Marking Number">
+								</el-input>
+								<span class="text-danger" v-if="errors.has('marking')">{{ errors.first('marking') }}<br/></span>
+							</div>
 						</div>
-					</div>
 
-					<!-- Email -->
-					<div class="form-group row" :class="{'has-error': errors.has('email') }">
-						<label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
-						<div class="col-md-7">
-							<el-input v-model="form.email" v-validate="'required|max:255'" type="email" name="email" placeholder="Email">
-							</el-input>
-							 <span class="text-danger" v-if="errors.has('email')">{{ errors.first('email') }}</span>
+						<!-- Email -->
+						<div class="form-group row" :class="{'has-error': errors.has('email') }">
+							<label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
+							<div class="col-md-7">
+								<el-input v-model="form.email" v-validate="'required|max:255'" type="email" name="email" placeholder="Email">
+								</el-input>
+								<span class="text-danger" v-if="errors.has('email')">{{ errors.first('email') }}</span>
+							</div>
 						</div>
-					</div>
 
-					<!-- Password -->
-					<div class="form-group row" :class="{'has-error': errors.has('password') }">
-						<label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
-						<div class="col-md-7">
-							<el-input v-if="password_visible" v-model="form.password" v-validate="'required|min:6|max:255'" type="text" name="password" placeholder="Password">
-								<template slot="append">
-									<el-button type="primary" @click="password_visible = !password_visible"><i class="fas fa-eye"></i></el-button>
-								</template>
-							</el-input>
-							<el-input v-else v-model="form.password" v-validate="'required|min:6|max:255'" type="password" name="password" placeholder="Password">
-								<template slot="append">
-									<el-button type="primary" @click="password_visible = !password_visible"><i class="fas fa-eye-slash"></i></el-button>
-								</template>
-							</el-input>
-							<span class="text-danger" v-if="errors.has('password')">{{ errors.first('password') }}</span>
+						<!-- Password -->
+						<div class="form-group row" :class="{'has-error': errors.has('password') }">
+							<label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
+							<div class="col-md-7">
+								<el-input v-if="password_visible" v-model="form.password" v-validate="'required|min:6|max:255'" type="text" name="password" placeholder="Password">
+									<template slot="append">
+										<el-button type="primary" @click="password_visible = !password_visible"><i class="fas fa-eye"></i></el-button>
+									</template>
+								</el-input>
+								<el-input v-else v-model="form.password" v-validate="'required|min:6|max:255'" type="password" name="password" placeholder="Password">
+									<template slot="append">
+										<el-button type="primary" @click="password_visible = !password_visible"><i class="fas fa-eye-slash"></i></el-button>
+									</template>
+								</el-input>
+								<span class="text-danger" v-if="errors.has('password')">{{ errors.first('password') }}</span>
+							</div>
 						</div>
-					</div>
 
-					<!-- Password Confirmation -->
-					<div class="form-group row" :class="{'has-error': errors.has('confirm_password') }">
-						<label class="col-md-3 col-form-label text-md-right">{{ $t('confirm_password') }}</label>
-						<div class="col-md-7">
-							<el-input v-if="password_confirmation_visible" v-model="form.password_confirmation" v-validate="'required|min:6|max:255'" type="text" name="password_confirmation" placeholder="Confirm Password">
-								<template slot="append">
-									<el-button type="primary" @click="password_confirmation_visible = !password_confirmation_visible"><i class="fas fa-eye"></i></el-button>
-								</template>
-							</el-input>
-							<el-input v-else v-model="form.password_confirmation" v-validate="'required|min:6|max:255'" type="password" name="password_confirmation" placeholder="Confirm Password">
-								<template slot="append">
-									<el-button type="primary" @click="password_confirmation_visible = !password_confirmation_visible"><i class="fas fa-eye-slash"></i></el-button>
-								</template>
-							</el-input>
-							<span class="text-danger" v-if="errors.has('password_confirmation')">{{ errors.first('password_confirmation') }}<br/></span>
+						<!-- Password Confirmation -->
+						<div class="form-group row" :class="{'has-error': errors.has('confirm_password') }">
+							<label class="col-md-3 col-form-label text-md-right">{{ $t('confirm_password') }}</label>
+							<div class="col-md-7">
+								<el-input v-if="password_confirmation_visible" v-model="form.password_confirmation" v-validate="'required|min:6|max:255'" type="text" name="password_confirmation" placeholder="Confirm Password">
+									<template slot="append">
+										<el-button type="primary" @click="password_confirmation_visible = !password_confirmation_visible"><i class="fas fa-eye"></i></el-button>
+									</template>
+								</el-input>
+								<el-input v-else v-model="form.password_confirmation" v-validate="'required|min:6|max:255'" type="password" name="password_confirmation" placeholder="Confirm Password">
+									<template slot="append">
+										<el-button type="primary" @click="password_confirmation_visible = !password_confirmation_visible"><i class="fas fa-eye-slash"></i></el-button>
+									</template>
+								</el-input>
+								<span class="text-danger" v-if="errors.has('password_confirmation')">{{ errors.first('password_confirmation') }}<br/></span>
+							</div>
 						</div>
-					</div>
 
-					<div class="form-group row">
-						<div class="col-md-7 offset-md-3 d-flex">
-							<!-- Submit Button -->
-							<v-button :loading="form.busy" :disabled="errors.any() || form.password=='' || form.password_confirmation=='' || form.email=='' || form.marking=='' ? true : false">
-								{{ $t('register') }}
-							</v-button>
+						<div class="form-group row">
+							<div class="col-md-7 offset-md-3 d-flex">
+								<!-- Submit Button -->
+								<v-button :loading="form.busy" :disabled="errors.any() || form.password=='' || form.password_confirmation=='' || form.email=='' || form.marking=='' ? true : false">
+									{{ $t('register') }}
+								</v-button>
 
-							<!-- GitHub Register Button -->
-							<login-with-github/>
+								<!-- GitHub Register Button -->
+								<login-with-github/>
+							</div>
 						</div>
-					</div>
-				</form>
-			</card>
+					</form>
+				</card>
+			</div>
 		</div>
 	</div>
 </template>
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index 5071cf96..90062af2 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -1,98 +1,88 @@
 <template>
-  <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>
-    </div>
-
-     <div v-else align="center">
-      <h4 style="margin-top:5%;">Waiting For Payment</h4>
-    </div>
-
-    <el-row justify="center" align="center">
-      <table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;">
-        <tbody>
+  <el-container>
+    <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>
+      </div>
+      <div v-else align="center">
+        <h4 style="margin-top:5%;">Waiting For Payment</h4>
+      </div>
+      <el-row justify="center" align="center">
+        <table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;">
+          <tbody>
+            <tr>
+              <td class="el-table_2_column_9 is-right ">Amount : </td>
+              <td class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
+                <b> RMB {{ booking.amount }} </b>
+              </td>
+            </tr>
+            <tr>
+              <td width="200" class="el-table_2_column_9 is-right ">Bankin Amount : </td>
+              <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
+                <b> MYR {{ booking.bankin_amount }} </b>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;"  align="center">
           <tr>
-            <td class="el-table_2_column_9 is-right ">Amount : </td>
-            <td class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
-              <b> RMB {{ booking.amount }} </b>
-            </td>
+            <td align="center">TC Global Trade (M) Sdn Bhd (1190583-A) <br> GST : 001408413696 <br> HLB : 2200 0010 531 <br> MBB : 5148 4233 6341</td>
           </tr>
-          <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">Bankin Amount : </td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
-              <b> MYR {{ booking.bankin_amount }} </b>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;"  align="center">
-      <tr>
-        <td align="center">TC Global Trade (M) Sdn Bhd (1190583-A) <br> GST : 001408413696 <br> HLB : 2200 0010 531 <br> MBB : 5148 4233 6341</td>
-        
-      </tr>
-            <!-- <tr><td align="center">GST : 001408413696</td></tr>
-            <tr><td align="center">HLB : 2200 0010 531</td></tr>
-            <tr><td align="center">MBB : 5148 4233 6341</td></tr>   -->
-            </table>
-    </el-row>
-    <br>
-
-    <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
-
-    <div align="center">
-
-      <vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
-        <template slot-scope="props">Time Remaining：<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
-      </vue-countdown>
-      <!-- <button v-on:click="startTimer">Start timer</button> -->
-    </div>
-    <br>
-
-    <!-- upload image -->
-    <el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
-               list-type="picture-card" align="center">
-      <i class="el-icon-plus" />
-    </el-upload>
-    <el-dialog :visible.sync="dialogVisible">
-      <img :src="dialogImageUrl" width="100%" alt="">
-    </el-dialog>
-    <br>
-    <!-- upload image end -->
-
-    <!-- <el-form label-width="300px">
-        <el-form-item label="Amount (RM) :"> -->
-    <div align="center">
-      Bankin Amount (RM) :
-      <el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
-        <div align="center">
-          <el-form-item prop="transfer_amount">
-            <el-input v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount" style="width: 20%"
-            />
-          </el-form-item>
-          <el-form-item>
-            <div align="center">
-              <el-button :loading="loading" type="primary" @click="submitUserSlip('user_slip_form')">Submit</el-button>
-              <router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
-                Upload Later
-              </router-link>
-            </div>
-          </el-form-item>
-        </div>
-      </el-form>
+              <!-- <tr><td align="center">GST : 001408413696</td></tr>
+              <tr><td align="center">HLB : 2200 0010 531</td></tr>
+              <tr><td align="center">MBB : 5148 4233 6341</td></tr>   -->
+        </table>
+      </el-row>
       <br>
-      <br>
-    </div>
-    <!-- </el-form-item>
-    </el-form> -->
 
-  </el-main>
+      <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
+
+      <div align="center">
+        <vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
+          <template slot-scope="props">Time Remaining：<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
+        </vue-countdown>
+        <!-- <button v-on:click="startTimer">Start timer</button> -->
+      </div>
+      <br>
+      <!-- upload image -->
+      <el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
+                list-type="picture-card" align="center">
+        <i class="el-icon-plus" />
+      </el-upload>
+      <el-dialog :visible.sync="dialogVisible">
+        <img :src="dialogImageUrl" width="100%" alt="">
+      </el-dialog>
+      <br>
+      <!-- upload image end -->
+      <div align="center">
+        Bankin Amount (RM) :
+        <el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
+          <div align="center">
+            <el-form-item prop="transfer_amount">
+              <el-input v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount" style="width: 20%"
+              />
+            </el-form-item>
+            <el-form-item>
+              <div align="center">
+                <el-button :loading="loading" type="primary" @click="submitUserSlip('user_slip_form')">Submit</el-button>
+                <router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
+                  Upload Later
+                </router-link>
+              </div>
+            </el-form-item>
+          </div>
+        </el-form>
+        <br>
+        <br>
+      </div>
+    </el-main>
+  </div>
+  </el-container>
 </template>
 <style>
   .booking-details {
diff --git a/resources/assets/js/pages/errors/404.vue b/resources/assets/js/pages/errors/404.vue
index afa8e2ca..f826100d 100644
--- a/resources/assets/js/pages/errors/404.vue
+++ b/resources/assets/js/pages/errors/404.vue
@@ -1,13 +1,15 @@
 <template>
-  <card class="text-center">
-    <h3 class="mb-4">{{ $t('page_not_found') }}</h3>
+  <div class="container">
+    <card class="text-center">
+      <h3 class="mb-4">{{ $t('page_not_found') }}</h3>
 
-    <div class="links">
-      <router-link :to="{ name: 'home' }">
-        {{ $t('go_home') }}
-      </router-link>
-    </div>
-  </card>
+      <div class="links">
+        <router-link :to="{ name: 'home' }">
+          {{ $t('go_home') }}
+        </router-link>
+      </div>
+    </card>
+  </div>
 </template>
 
 <script>
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index c045ed52..d43d32c4 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -1,293 +1,289 @@
 <template>
-
-  <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-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-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" />
-        </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-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/>
+      <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-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/>
+        </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-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-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>
 
-    <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>
+      <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>
-      </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-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>
-    </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>
+      <!-- Booking Table-end -->
+    </el-main>
+  </el-container>
 </template>
 <style>
   .el-tag {
diff --git a/resources/assets/js/pages/settings/profile.vue b/resources/assets/js/pages/settings/profile.vue
index ba1b2e4a..6f115872 100644
--- a/resources/assets/js/pages/settings/profile.vue
+++ b/resources/assets/js/pages/settings/profile.vue
@@ -1,34 +1,36 @@
 <template>
-  <card :title="$t('your_info')">
-    <form @submit.prevent="update" @keydown="form.onKeydown($event)">
-      <alert-success :form="form" :message="$t('info_updated')"/>
+  <div class="container">
+    <card :title="$t('your_info')">
+      <form @submit.prevent="update" @keydown="form.onKeydown($event)">
+        <alert-success :form="form" :message="$t('info_updated')"/>
 
-      <!-- Name -->
-      <div class="form-group row">
-        <label class="col-md-3 col-form-label text-md-right">{{ $t('name') }}</label>
-        <div class="col-md-7">
-          <input v-model="form.name" :class="{ 'is-invalid': form.errors.has('name') }" class="form-control" type="text" name="name">
-          <has-error :form="form" field="name"/>
+        <!-- Name -->
+        <div class="form-group row">
+          <label class="col-md-3 col-form-label text-md-right">{{ $t('name') }}</label>
+          <div class="col-md-7">
+            <input v-model="form.name" :class="{ 'is-invalid': form.errors.has('name') }" class="form-control" type="text" name="name">
+            <has-error :form="form" field="name"/>
+          </div>
         </div>
-      </div>
 
-      <!-- Email -->
-      <div class="form-group row">
-        <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
-        <div class="col-md-7">
-          <input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email">
-          <has-error :form="form" field="email" />
+        <!-- Email -->
+        <div class="form-group row">
+          <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
+          <div class="col-md-7">
+            <input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email">
+            <has-error :form="form" field="email" />
+          </div>
         </div>
-      </div>
 
-      <!-- Submit Button -->
-      <div class="form-group row">
-        <div class="col-md-9 ml-md-auto">
-          <v-button :loading="form.busy" type="success">{{ $t('update') }}</v-button>
+        <!-- Submit Button -->
+        <div class="form-group row">
+          <div class="col-md-9 ml-md-auto">
+            <v-button :loading="form.busy" type="success">{{ $t('update') }}</v-button>
+          </div>
         </div>
-      </div>
-    </form>
-  </card>
+      </form>
+    </card>
+  </div>
 </template>
 
 <script>
diff --git a/resources/assets/js/pages/welcome.vue b/resources/assets/js/pages/welcome.vue
index 6c0e129e..d626947f 100644
--- a/resources/assets/js/pages/welcome.vue
+++ b/resources/assets/js/pages/welcome.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="container">
     <div class="top-right links">
       <template v-if="authenticated">
         <router-link :to="{ name: 'home' }">
@@ -15,52 +15,38 @@
         </router-link>
       </template>
     </div>
-
-    <div class="text-center">
-      <div class="title mb-4">
-        {{ title }}
-      </div>
-
-      <div class="links">
-        <a href="https://laravel.com/docs">Documentation</a>
-        <a href="https://laracasts.com">Laracasts</a>
-        <a href="https://laravel-news.com">News</a>
-        <a href="https://forge.laravel.com">Forge</a>
-        <a href="https://github.com/laravel/laravel">GitHub</a>
-      </div>
-    </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+  import { mapGetters } from 'vuex'
 
-export default {
-  middleware: 'guest',
-  layout: 'basic',
+  export default {
+    middleware: 'guest',
+    layout: 'basic',
 
-  metaInfo () {
-    return { title: this.$t('home') }
-  },
+    metaInfo () {
+      return { title: this.$t('home') }
+    },
 
-  data: () => ({
-    title: window.config.appName
-  }),
+    data: () => ({
+      title: window.config.appName
+    }),
 
-  computed: mapGetters({
-    authenticated: 'auth/check'
-  })
-}
+    computed: mapGetters({
+      authenticated: 'auth/check'
+    })
+  }
 </script>
 
 <style scoped>
-.top-right {
-  position: absolute;
-  right: 10px;
-  top: 18px;
-}
+  .top-right {
+    position: absolute;
+    right: 10px;
+    top: 18px;
+  }
 
-.title {
-  font-size: 85px;
-}
+  .title {
+    font-size: 85px;
+  }
 </style>
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index 4e2231a0..34a10e7f 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -36,7 +36,7 @@ const adminCompleted = () => import('~/pages/admin/booking/completed').then(m =>
 
 // Admin pages
 const AdminHome = () => import('~/pages/admin/home').then(m => m.default || m)
-const AdminCompleteOrder = () => import('~/pages/admin/complete-order').then(m => m.default || m)
+const AdminCompleteOrder = () => import('~/pages/admin/complete-orders').then(m => m.default || m)
 const TransactionHistory = () => import('~/pages/admin/transaction-history').then(m => m.default || m)
 const UploadSupplierBankSlip = () => import('~/pages/admin/upload-supplier-bank-slip').then(m => m.default || m)
 
@@ -81,7 +81,7 @@ export default [
 
   // Admin pages
   { path: '/admin', name: 'admin.home', component: AdminHome },
-  { path: '/admin/complete-order', name: 'admin.complete', component: AdminCompleteOrder },
+  { path: '/admin/complete-orders', name: 'admin.complete', component: AdminCompleteOrder },
   { path: '/admin/transaction-history', name: 'admin.transaction-history', component: TransactionHistory },
   { path: '/admin/upload-supplier-bank-slip', name: 'admin.upload-supplier-bank-slip', component: UploadSupplierBankSlip },
   { path: '*', name: 'notfound', component: NotFound }
diff --git a/routes/api.php b/routes/api.php
index 142577f7..a4a9a8a9 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -109,6 +109,6 @@ Route::group(['middleware' => ['role:admin']], function() {
 	Route::post('booking/{id}/upload-invoice', 'BookingController@uploadInvoice');
 	Route::post('booking/{id}/confirm-invoice', 'BookingController@confirmInvoice');	
 
-	Route::get('admin/complete-order', 'BookingController@adminShowCompletedOrders');
+	Route::get('admin/complete-orders', 'BookingController@adminShowCompletedOrders');
 	
 });
\ No newline at end of file

From e868c99440eb2c502c9d018dc02c0b61cb5e3692 Mon Sep 17 00:00:00 2001
From: Mouhamed Lamine <mouhamedlaminebah@gmail.com>
Date: Mon, 16 Jul 2018 19:26:09 +0800
Subject: [PATCH 2/5] Added the track status thing

---
 app/Http/Controllers/BookingController.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index a3ba25a2..f987b795 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -767,7 +767,7 @@ class BookingController extends Controller
             $booking->rate;
             $booking->amount;
             $booking->bia;
-            $booking->admin_status;
+            $booking->admin_status = "(". $booking->admin_status ."/7)";;
         }
         return $bookings;
     }

From 31ee05cbe9964a4584c18f5ad87e2f69b916c1e3 Mon Sep 17 00:00:00 2001
From: Jack Goh <jackgoh0@gmail.com>
Date: Tue, 17 Jul 2018 11:21:58 +0800
Subject: [PATCH 3/5] added .env-example

---
 .env-example | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 readme.md    |  3 +-
 2 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 .env-example

diff --git a/.env-example b/.env-example
new file mode 100644
index 00000000..4271cefe
--- /dev/null
+++ b/.env-example
@@ -0,0 +1,80 @@
+APP_NAME=IZYIM
+APP_ENV=local
+APP_KEY=base64:Fu2YulXExzm9HJ5LgVmZUmcbRkchHkc82q02MorN5GQ=
+APP_DEBUG=true
+APP_URL=http://localhost
+
+LOG_CHANNEL=stack
+
+DB_CONNECTION=mysql
+DB_HOST=mysql
+DB_PORT=3306
+DB_DATABASE=default
+DB_USERNAME=default
+DB_PASSWORD=secret
+
+BROADCAST_DRIVER=log
+CACHE_DRIVER=file
+SESSION_DRIVER=file
+SESSION_LIFETIME=120
+QUEUE_DRIVER=sync
+
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_DRIVER=smtp
+MAIL_HOST=smtp.mailtrap.io
+MAIL_PORT=2525
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_ENCRYPTION=null
+
+PUSHER_APP_ID=
+PUSHER_APP_KEY=
+PUSHER_APP_SECRET=
+PUSHER_APP_CLUSTER=mt1
+
+MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+APP_NAME=exchange
+APP_ENV=local
+APP_KEY=base64:Fu2YulXExzm9HJ5LgVmZUmcbRkchHkc82q02MorN5GQ=
+APP_DEBUG=true
+APP_URL=http://localhost
+
+LOG_CHANNEL=stack
+
+DB_CONNECTION=mysql
+DB_HOST=mysql
+DB_PORT=3306
+DB_DATABASE=default
+DB_USERNAME=default
+DB_PASSWORD=secret
+
+BROADCAST_DRIVER=log
+CACHE_DRIVER=file
+SESSION_DRIVER=file
+SESSION_LIFETIME=120
+QUEUE_DRIVER=sync
+
+REDIS_HOST=127.0.0.1
+REDIS_PASSWORD=null
+REDIS_PORT=6379
+
+MAIL_DRIVER=smtp
+MAIL_HOST=smtp.mailtrap.io
+MAIL_PORT=2525
+MAIL_USERNAME=null
+MAIL_PASSWORD=null
+MAIL_ENCRYPTION=null
+
+PUSHER_APP_ID=
+PUSHER_APP_KEY=
+PUSHER_APP_SECRET=
+PUSHER_APP_CLUSTER=mt1
+
+MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+
+JWT_SECRET=FwYZ3SPFgjpEDqAwcaSIV6eEmQiMtGWt
\ No newline at end of file
diff --git a/readme.md b/readme.md
index e4f0893d..96d0a864 100644
--- a/readme.md
+++ b/readme.md
@@ -19,9 +19,10 @@
 ## Installation
 
 - `git clone git@gitlab.com:CIEFWorldwideSdnBhd/exchange.git`
+- `cd` in your working folder 
 - Copy `.env-example` to `.env`
 - Edit `.env` and set your database connection details
-- `Comp` run `php artisan key:generate` and `php artisan jwt:secret`)
+- Cmd or git bash run `php artisan key:generate` and `php artisan jwt:secret`)
 - `php artisan migrate`
 - `yarn` / `npm install`
 

From e92e9b551fdf1a7ed5265f226ef70bb161a1de71 Mon Sep 17 00:00:00 2001
From: Jack Goh <jackgoh0@gmail.com>
Date: Tue, 17 Jul 2018 11:28:14 +0800
Subject: [PATCH 4/5] updated readme

---
 readme.md | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/readme.md b/readme.md
index 96d0a864..b67d5296 100644
--- a/readme.md
+++ b/readme.md
@@ -21,10 +21,9 @@
 - `git clone git@gitlab.com:CIEFWorldwideSdnBhd/exchange.git`
 - `cd` in your working folder 
 - Copy `.env-example` to `.env`
-- Edit `.env` and set your database connection details
-- Cmd or git bash run `php artisan key:generate` and `php artisan jwt:secret`)
-- `php artisan migrate`
-- `yarn` / `npm install`
+- Run `docker-compose up` 
+- Open another git bash run `yarn install`
+- Run `yarn run watch`
 
 ## Usage
 

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 5/5] 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 {