diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index a91f34f5..ea7332b2 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -19,9 +19,10 @@ class BookingController extends Controller
 {
 
     public function index(){
+		$user = Auth::user(); 
         $bookings = Booking::select('id', 'created_at', 'status', 'rate', 'term', 'amount', 'bia', 'verification_status')
-                            ->where('user_id',Auth::user()->id)
-                            ->get();
+                            ->where('user_id', $user->id)
+							->get();
         
         // reformat to fit frontend structure 
         foreach ($bookings as $booking) {
@@ -60,18 +61,73 @@ class BookingController extends Controller
                     $status_desc = "Processing invoice"; 
                     break;
                 default:
-                    $biastatus_desc = "";
+                    $status_desc = "";
             }
             $booking->status_desc = $status_desc; 
         }
 
         return $bookings;
-    }
+	}
+	
+	public function adminIndex(){
+		$user = Auth::user(); 
+		$bookings = Booking::select('id', 'created_at', 'admin_status', 'rate', 'term', 'amount', 'bia', 'verification_status')
+		->get();
+
+			// reformat to fit frontend structure 
+			foreach ($bookings as $booking) {
+				// set timeout 
+				$date1 = new DateTime($booking->created_at);
+				$date2 = new DateTime();
+				$difference_in_seconds = ($date1->format('U') + 600) - ($date2->format('U'));
+				$booking->timeout = $difference_in_seconds;  
+
+				// TODO : you can make it better
+				if($difference_in_seconds < 0 ){
+					$booking->timeout = 0;
+				}
+
+				// TODO : transfer_amount change name to bia 
+				$booking->transfer_amount = $booking->bia; 
+		
+				$booking->track_status = "(". $booking->admin_status ."/6)";
+				switch ($booking->admin_status) {
+					case 0:
+						$status_desc = "Waiting user to upload bankin slip";
+						break;
+					case 1:
+						$status_desc = "Waiting for verification"; 
+						break;
+					case 2:
+						$status_desc = "Bookg with supplier";  
+						break;    
+					case 3:
+						$status_desc = "Supplier booking report. Please confirm with your booking.";    
+						break;  
+					case 4:
+						$status_desc = "Please update supplier booking status."; 
+						break;
+					case 5:
+						$status_desc = "Customer has uploaded the invoice, please upload purchase order"; 
+						break;
+					case 6:
+						$status_desc = "Booking completed"; 
+						break;
+					default:
+						$status_desc = "";
+				}
+				$booking->status_desc = $status_desc; 
+			}
+
+			return $bookings;
+
+	}
 
     public function show($id)
     {   
         $booking = Booking::where('user_id',Auth::user()->id)->where('id', $id)->first();
 
+		if($booking){
         $date1 = new DateTime($booking->created_at);
         $date2 = new DateTime();
         $difference_in_seconds = ($date1->format('U') + 600) - ($date2->format('U'));
@@ -81,7 +137,27 @@ class BookingController extends Controller
         if (!$booking){
             return response()->json(['success'=>false, 'message'=>'not found'], 404);
         }
-        return $booking;
+		return $booking;
+		}
+	}
+	
+	public function adminShow($id)
+    {   
+		$booking = Booking::where('id', $id)->first();
+		return $booking->userBankSlip()->get(); 
+
+		if($booking){
+        $date1 = new DateTime($booking->created_at);
+        $date2 = new DateTime();
+        $difference_in_seconds = ($date1->format('U') + 600) - ($date2->format('U'));
+
+        $booking->timeout = $difference_in_seconds;   
+
+        if (!$booking){
+            return response()->json(['success'=>false, 'message'=>'not found'], 404);
+        }
+		return $booking;
+		}
     }
 
     public function store(Request $request)
diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index 58f9b8ab..392564cc 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use Auth;
 
 class UserController extends Controller
 {
@@ -15,7 +16,9 @@ class UserController extends Controller
      * @return \Illuminate\Http\Response
      */
     public function show(Request $request)
-    {
-        return $request->user();
+    {   
+
+        $user = Auth::user();
+        return $user;
     }
 }
diff --git a/app/Http/Kernel.php b/app/Http/Kernel.php
index da7a7f5c..a95cd23b 100644
--- a/app/Http/Kernel.php
+++ b/app/Http/Kernel.php
@@ -61,5 +61,6 @@ class Kernel extends HttpKernel
         'ability' => 'App\Http\Middleware\TokenEntrustAbility',
         'role' => \Zizaco\Entrust\Middleware\EntrustRole::class,
         'permission' => \Zizaco\Entrust\Middleware\EntrustPermission::class,
+        'ability' => 'App\Http\Middleware\TokenEntrustAbility'
     ];
 }
diff --git a/app/User.php b/app/User.php
index 065b512e..855641bb 100644
--- a/app/User.php
+++ b/app/User.php
@@ -58,7 +58,7 @@ class User extends Authenticatable implements JWTSubject
      */
     public function getRoleAttribute()
     {
-       // return $this->roles->first()->name;
+       return $this->roles->first()->name;
     }
 
     /**
diff --git a/database/migrations/2018_06_22_042127_add_adminstatus_to_booking_table.php b/database/migrations/2018_06_22_042127_add_adminstatus_to_booking_table.php
new file mode 100644
index 00000000..4e7e93a9
--- /dev/null
+++ b/database/migrations/2018_06_22_042127_add_adminstatus_to_booking_table.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddAdminstatusToBookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->integer('admin_status')->default(1);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->dropColumn('admin_status');
+        // $table->dropColumn('reject_reason');
+        });   
+    }
+}
diff --git a/database/migrations/2018_06_22_042911_change_adminstatus_default_booking_table.php b/database/migrations/2018_06_22_042911_change_adminstatus_default_booking_table.php
new file mode 100644
index 00000000..5047f990
--- /dev/null
+++ b/database/migrations/2018_06_22_042911_change_adminstatus_default_booking_table.php
@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class ChangeAdminstatusDefaultBookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->integer('admin_status')->default(0)->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+    }
+}
diff --git a/database/migrations/2018_06_25_075341_change_adminstatus_default_to1_on_booking_table.php b/database/migrations/2018_06_25_075341_change_adminstatus_default_to1_on_booking_table.php
new file mode 100644
index 00000000..ef50d656
--- /dev/null
+++ b/database/migrations/2018_06_25_075341_change_adminstatus_default_to1_on_booking_table.php
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class ChangeAdminstatusDefaultTo1OnBookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->integer('admin_status')->default(1)->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}
diff --git a/resources/assets/js/components/AdminProgressTrack.vue b/resources/assets/js/components/AdminProgressTrack.vue
new file mode 100644
index 00000000..dfae9647
--- /dev/null
+++ b/resources/assets/js/components/AdminProgressTrack.vue
@@ -0,0 +1,46 @@
+<template>
+  <el-row>
+    <el-steps :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
+      <el-step title="Booking"/>
+      <el-step title="Verification"/>
+      <el-step title="Supplier Booking"/>
+      <el-step title="Supplier Report"/>
+      <el-step title="Upload China Bankslip To Booking"/>
+      <el-step title="Invoice"/>
+      <el-step title="Completed"/>
+    </el-steps>
+  </el-row>
+</template>
+
+<style type="text/css">
+    /* .el-row {
+        margin: 20px 0;
+    }
+
+    .el-steps {
+        padding-top: 70px;
+    }
+
+    .el-step .el-step__main {
+        transform: translateY(-70px);
+    }
+    .el-step__title.is-wait {
+        font-size: 10pt;
+    }
+    .el-step__title {
+        line-height: 1.4;
+    }
+
+    .el-step .is-success .el-step__line {
+        background-color: #67c23a;
+    } */
+</style>
+
+<script>
+export default {
+  props: ['value'],
+  data: () => ({
+    status: 1
+  })
+}
+</script>
diff --git a/resources/assets/js/components/ProgressTrack.vue b/resources/assets/js/components/ProgressTrack.vue
index 0aa7c413..00c85c5d 100644
--- a/resources/assets/js/components/ProgressTrack.vue
+++ b/resources/assets/js/components/ProgressTrack.vue
@@ -1,17 +1,16 @@
 <template>
-    <el-row>
-        <el-steps v-bind:value="value" :active="value" :alignCenter="true" process-status="wait" finish-status="success">
-            <el-step title="Booking"></el-step>
-            <el-step title="Payment"></el-step>
-            <el-step title="Order Confirmation"></el-step>
-            <el-step title="Processing Transfer"></el-step>
-            <el-step title="Transfer Complete"></el-step>
-            <el-step title="Order Complete"></el-step>
-        </el-steps>
-    </el-row>
+  <el-row>
+    <el-steps :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
+      <el-step title="Booking"/>
+      <el-step title="Payment"/>
+      <el-step title="Order Confirmation"/>
+      <el-step title="Processing Transfer"/>
+      <el-step title="Transfer Complete"/>
+      <el-step title="Order Complete"/>
+    </el-steps>
+  </el-row>
 </template>
 
-
 <style type="text/css">
     /* .el-row {
         margin: 20px 0;
@@ -43,4 +42,4 @@ export default {
     status: 1
   })
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/assets/js/middleware/admin.js b/resources/assets/js/middleware/admin.js
index 276ef3de..f2ccc855 100644
--- a/resources/assets/js/middleware/admin.js
+++ b/resources/assets/js/middleware/admin.js
@@ -1,7 +1,8 @@
 import store from '~/store'
 
 export default (to, from, next) => {
-  if (store.getters['auth/user'].role !== 'admin') {
+  console.log(store.getters['auth/role'])
+  if (store.getters['auth/role'] !== 'admin') {
     next({ name: 'home' })
   } else {
     next()
diff --git a/resources/assets/js/middleware/auth.js b/resources/assets/js/middleware/auth.js
index 138da317..d89739bb 100644
--- a/resources/assets/js/middleware/auth.js
+++ b/resources/assets/js/middleware/auth.js
@@ -3,7 +3,7 @@ import store from '~/store'
 export default async (to, from, next) => {
   if (!store.getters['auth/check']) {
     next({ name: 'login' })
-  } else if (store.getters['auth/user'].role == 'admin') {
+  } else if (store.getters['auth/role'] == 'admin') {
     next({ name: 'admin.home' })
   } else {
     next()
diff --git a/resources/assets/js/pages/admin/booking/supplierBooking.vue b/resources/assets/js/pages/admin/booking/supplierBooking.vue
new file mode 100644
index 00000000..37196cb3
--- /dev/null
+++ b/resources/assets/js/pages/admin/booking/supplierBooking.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Transfer In Progress</h4>
+      <br>
+      <h5> ETA :  3 days 14 Hours </h5>
+      <br>
+      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+    </div>
+    <br>
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Details</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+    <br>
+
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/AdminProgressTrack'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 4
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/supplierReport.vue b/resources/assets/js/pages/admin/booking/supplierReport.vue
new file mode 100644
index 00000000..37196cb3
--- /dev/null
+++ b/resources/assets/js/pages/admin/booking/supplierReport.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Transfer In Progress</h4>
+      <br>
+      <h5> ETA :  3 days 14 Hours </h5>
+      <br>
+      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+    </div>
+    <br>
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Details</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+    <br>
+
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/AdminProgressTrack'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 4
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
new file mode 100644
index 00000000..37196cb3
--- /dev/null
+++ b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Transfer In Progress</h4>
+      <br>
+      <h5> ETA :  3 days 14 Hours </h5>
+      <br>
+      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+    </div>
+    <br>
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Details</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+    <br>
+
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/AdminProgressTrack'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 4
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
new file mode 100644
index 00000000..37196cb3
--- /dev/null
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Transfer In Progress</h4>
+      <br>
+      <h5> ETA :  3 days 14 Hours </h5>
+      <br>
+      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+    </div>
+    <br>
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Details</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+    <br>
+
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/AdminProgressTrack'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 4
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/verification.vue b/resources/assets/js/pages/admin/booking/verification.vue
new file mode 100644
index 00000000..20bac84b
--- /dev/null
+++ b/resources/assets/js/pages/admin/booking/verification.vue
@@ -0,0 +1,280 @@
+<template>
+  <el-main>
+    <progress-track v-model="status" />
+
+    <div align="center">
+      <h4 style="margin-top:5%;"></h4>
+      <br>
+      <h5> Verify User Bankslip </h5>
+      <br>
+      <!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
+    </div>
+    <br>
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Details</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
+          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
+            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
+            
+              <div class="el-table__body-wrapper is-scrolling-none">
+                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
+                  <colgroup>
+                    <col name="el-table_2_column_9" width="200">
+                    <col name="el-table_2_column_10" width="200">
+                  </colgroup>
+                  <tbody>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Order Number :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.id }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Date :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.created_at }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Customer Marking :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">CIEF/150ECE</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell"></div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Term :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.term }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell"></div>
+                      </td>
+                    </tr>
+                    <!---->
+                  </tbody>
+                </table>
+                <!---->
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <!---->
+              <!---->
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+            </div>
+          </div>
+          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
+            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
+              <div class="hidden-columns">
+                <div></div>
+                <div></div>
+              </div>
+              <!---->
+              <div class="el-table__body-wrapper is-scrolling-none">
+                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
+                  <colgroup>
+                    <col name="el-table_3_column_11" width="200">
+                    <col name="el-table_3_column_12" width="200">
+                  </colgroup>
+                  <tbody>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">CNY/RMB :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">CNY {{ booking_details.amount }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">+ Service Charge :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">CNY {{ booking_details.service_charge }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">/ RATE :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">{{ booking_details.rate }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">MYR {{ booking_details.bia }}</div>
+                      </td>
+                    </tr>
+                    <!-- <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">+ GST 6% :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">MYR 4,430.88</div>
+                      </td>
+                    </tr> -->
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell"><b>MYR {{ booking_details.bia }}</b></div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell"></div>
+                      </td>
+                    </tr>
+                    <!---->
+                  </tbody>
+                </table>
+                <!---->
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <!---->
+              <!---->
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+            </div>
+          </div>
+        </div>
+        <!-- <el-row :gutter="12">
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+        </el-row> -->
+      </el-card>
+    </el-row>
+    <br>
+
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <el-card class="box-card">
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <el-button :loading="loading" @click="approveUserSlip" type="success">Aprroved</el-button>
+            <el-button :loading="loading" @click="rejectUserSlip" type="danger">Rejected</el-button>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+  import ProgressTrack from '~/components/AdminProgressTrack'
+  import axios from 'axios'
+
+  export default {
+    components: {
+      'progress-track': ProgressTrack
+    },
+    data() {
+      return {
+        status: 2,
+        loading: false,
+        booking_details:{
+          id: null,
+          amount: null,
+          bia: null,
+        }
+      }
+    },
+    beforeCreate () {
+    const loading = this.$loading({
+      lock: true,
+      text: 'Please wait..',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
+
+    axios
+      .get('/api/admin/booking/' + this.$route.params.id)
+      .then((response) => {
+        this.booking_details = response.data
+        loading.close()
+
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+  },
+    methods: {
+      approveUserSlip() {
+        // axios.get('api/booking')
+        //   .then((response) => {
+        //     console.log(response)
+        //     this.list = response.data
+        //   })
+      },
+      rejectUserSlip() {
+        // axios.get('api/booking')
+        //   .then((response) => {
+        //     console.log(response)
+        //     this.list = response.data
+        //   })
+      },
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/admin/home.vue b/resources/assets/js/pages/admin/home.vue
index f5f67c94..7fe842c0 100644
--- a/resources/assets/js/pages/admin/home.vue
+++ b/resources/assets/js/pages/admin/home.vue
@@ -1,15 +1,138 @@
 <template>
-  <card :title="$t('home')">
-    This is admin
-  </card>
+  <!-- Booking Table -->
+  <el-row :gutter="20">
+    <div>
+      <el-table :data="bookingTable">
+        <el-table-column label="No." width="100">
+          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
+          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id) }"> {{ scope.row.id }}</el-button>
+        </el-table-column>
+        <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
+        <el-table-column :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.admin_status, scope.row.id) }"> View Status </el-button>
+          <!-- <template slot-scope="scope">
+              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
+              <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
+            </template> -->
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-row>
+  <!-- Booking Table-end -->
 </template>
 
 <script>
+import axios from 'axios'
+
 export default {
   middleware: 'admin',
+  data () {
+    return {
+      status: null,
+      bookingTable: [
+      ]
+    }
+  },
+  mounted () {
+    axios
+      .get('/api/admin/booking')
+      .then((response) => {
+        console.log(response.data)
+        this.bookingTable = response.data
 
-  metaInfo () {
-    return { title: this.$t('home') }
+      // loading.close()
+      }).catch((error) => {
+      // console.log(error)
+      // loading.close()
+      // this.$router.push({
+      //   name: 'notfound'
+      // })
+      })
+  },
+  methods: {
+    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.complete',
+            params: {id: booking_id }
+          })
+          break
+        default:
+          break
+      }
+    }
   }
+
 }
 </script>
diff --git a/resources/assets/js/pages/auth/login.vue b/resources/assets/js/pages/auth/login.vue
index 054eb81f..06c5e6b4 100644
--- a/resources/assets/js/pages/auth/login.vue
+++ b/resources/assets/js/pages/auth/login.vue
@@ -80,11 +80,9 @@ export default {
 
   methods: {
     async login () {
-
       // Submit the form.
       const { data } = await this.form.post('/api/login')
 
-
       // Add loading screen
       const loading = this.$loading({
         lock: true,
@@ -96,14 +94,12 @@ export default {
       // Save the token.
       this.$store.dispatch('auth/saveToken', {
         token: data.token,
-        remember: this.remember,
+        remember: this.remember
       })
 
       // Fetch the user.
       await this.$store.dispatch('auth/fetchUser')
 
-
-
       // Redirect home.
       if (store.getters['auth/user'].role === 'admin') {
         this.$router.push({ name: 'admin.home' })
diff --git a/resources/assets/js/pages/booking/completed.vue b/resources/assets/js/pages/booking/completed.vue
index 1cb07172..42585d3c 100644
--- a/resources/assets/js/pages/booking/completed.vue
+++ b/resources/assets/js/pages/booking/completed.vue
@@ -1,103 +1,103 @@
 <template>
-    <el-main>
-        <progress-track v-model="status"></progress-track>
+  <el-main>
+    <progress-track v-model="status"/>
 
-        <div align="center">
-            <h4 style="margin-top:5%;">Order Completed</h4>
-            <br>
+    <div align="center">
+      <h4 style="margin-top:5%;">Order Completed</h4>
+      <br>
+    </div>
+
+    <!-- upload card -->
+    <br>
+    <el-row :gutter="12" justify="center" align="center">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Purchase Order</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+          <el-row :gutter="12" type="flex">
+            <el-col :span="12">
+              <a target=" _blank" href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Invoice</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+          <el-row :gutter="12" type="flex">
+            <el-col :span="12">
+              <a target=" _blank" href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>China Bank Slip</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+          <el-row :gutter="12" type="flex">
+            <el-col :span="12">
+              <a target=" _blank" href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <br>
+
+    <!-- order details -->
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Details</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
         </div>
-
-        <!-- upload card -->
-        <br>
-        <el-row :gutter="12" justify="center" align="center">
-            <el-col :span="8">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>Purchase Order</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-                  <el-row type="flex" :gutter="12">
-                        <el-col :span="12">
-                            <a target=" _blank" href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-
-                </el-card>
-            </el-col>
-            <el-col :span="8">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>Invoice</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-                    <el-row type="flex" :gutter="12">
-                        <el-col :span="12">
-                            <a target=" _blank" href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-                </el-card>
-            </el-col>
-            <el-col :span="8">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>China Bank Slip</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-                    <el-row type="flex" :gutter="12">
-                        <el-col :span="12">
-                            <a target=" _blank" href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-                </el-card>
-            </el-col>
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
         </el-row>
-        <br>
+      </el-card>
+    </el-row>
+    <br>
 
-        <!-- order details -->
-        <el-row justify="center" align="center">
-            <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                    <span>Order Details</span>
-                    <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                </div>
-                <el-row :gutter="12">
-                    <el-col :span="12">
-                        <el-table :data="bookingConfirmTable" align="center" :show-header="false">
-                            <el-table-column prop="data1" align="right" width="200" />
-                            <el-table-column prop="data2" align="left" width="200" />
-                        </el-table>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-table :data="bookingConfirmTable2" align="center" :show-header="false">
-                            <el-table-column prop="data1" align="right" width="200" />
-                            <el-table-column prop="data2" align="left" width="200" />
-                        </el-table>
-                    </el-col>
-                </el-row>
-            </el-card>
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Bankin Slip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
         </el-row>
-        <br>
-
-        <el-row justify="center" align="center">
-            <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                    <span>Order Bankin Slip</span>
-                    <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                </div>
-                <el-row :gutter="12">
-                    <el-col :span="22" style="text-align:center">
-                        <img src="http://via.placeholder.com/600x400" class="image">
-                    </el-col>
-                </el-row>
-            </el-card>
-        </el-row>
-    </el-main>
+      </el-card>
+    </el-row>
+  </el-main>
 </template>
 <style>
     .booking-details {
@@ -105,62 +105,61 @@
     }
 </style>
 <script>
-    import VueCountdown from '@dmaksimovic/vue-countdown'
-    import ProgressTrack from '~/components/ProgressTrack'
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
 
-    export default {
-        components: {
-            'progress-track': ProgressTrack
-        },
-        data() {
-            return {
-                status: 6,
-                bookingConfirmTable: [{
-                    data1: 'Order Number :',
-                    data2: '001'
-                }, {
-                    data1: 'Date :',
-                    data2: '25/5/2018'
-                }, {
-                    data1: 'Customer Marking :',
-                    data2: 'CIEF/150ECE'
-                }, {
-                    data1: '',
-                    data2: ''
-                }, {
-                    data1: 'Payment Method :',
-                    data2: 'Cash/Bank Transfer'
-                }, {
-                    data1: '',
-                    data2: ''
-                }],
-                bookingConfirmTable2: [{
-                    data1: 'CNY/RMB :',
-                    data2: 'CNY 120,500.00'
-                }, {
-                    data1: '+ Service Charge :',
-                    data2: 'CNY 20.00'
-                }, {
-                    data1: '/ RATE :',
-                    data2: '1.63'
-                }, {
-                    data1: '',
-                    data2: 'MYR 73,848.04'
-                }, {
-                    data1: '+ GST 6% :',
-                    data2: 'MYR 4,430.88'
-                }, {
-                    data1: '',
-                    data2: 'MYR 78,278.92'
-                }, {
-                    data1: '',
-                    data2: ''
-                }]
-            }
-        },
-        methods: {
-
-
-        }
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 6,
+      bookingConfirmTable: [{
+        data1: 'Order Number :',
+        data2: '001'
+      }, {
+        data1: 'Date :',
+        data2: '25/5/2018'
+      }, {
+        data1: 'Customer Marking :',
+        data2: 'CIEF/150ECE'
+      }, {
+        data1: '',
+        data2: ''
+      }, {
+        data1: 'Payment Method :',
+        data2: 'Cash/Bank Transfer'
+      }, {
+        data1: '',
+        data2: ''
+      }],
+      bookingConfirmTable2: [{
+        data1: 'CNY/RMB :',
+        data2: 'CNY 120,500.00'
+      }, {
+        data1: '+ Service Charge :',
+        data2: 'CNY 20.00'
+      }, {
+        data1: '/ RATE :',
+        data2: '1.63'
+      }, {
+        data1: '',
+        data2: 'MYR 73,848.04'
+      }, {
+        data1: '+ GST 6% :',
+        data2: 'MYR 4,430.88'
+      }, {
+        data1: '',
+        data2: 'MYR 78,278.92'
+      }, {
+        data1: '',
+        data2: ''
+      }]
     }
-</script>
\ No newline at end of file
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/booking/confirmation.vue b/resources/assets/js/pages/booking/confirmation.vue
index 58812c71..8e2ce4bf 100644
--- a/resources/assets/js/pages/booking/confirmation.vue
+++ b/resources/assets/js/pages/booking/confirmation.vue
@@ -1,6 +1,6 @@
 <template>
   <el-main>
-    <progress-track v-model="status"></progress-track>
+    <progress-track v-model="status"/>
 
     <div align="center">
       <h4 style="margin-top:5%;">Bankin Slip Verification In Progress</h4>
@@ -16,13 +16,13 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="12">
-            <el-table :data="bookingConfirmTable" align="center" :show-header="false">
+            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
               <el-table-column prop="data1" align="right" width="200" />
               <el-table-column prop="data2" align="left" width="200" />
             </el-table>
           </el-col>
           <el-col :span="12">
-            <el-table :data="bookingConfirmTable2" align="center" :show-header="false">
+            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
               <el-table-column prop="data1" align="right" width="200" />
               <el-table-column prop="data2" align="left" width="200" />
             </el-table>
@@ -32,7 +32,7 @@
     </el-row>
     <br>
 
-      <el-row justify="center" align="center">
+    <el-row justify="center" align="center">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
           <span>BankinSlip</span>
@@ -53,63 +53,62 @@
   }
 </style>
 <script>
-  import VueCountdown from '@dmaksimovic/vue-countdown'
-  import ProgressTrack from '~/components/ProgressTrack'
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
 
-  export default {
-    components: {
-      'progress-track': ProgressTrack
-    },
-    data() {
-      return {
-        status: 3,
-        bookingConfirmTable: [{
-          data1: 'Order Number :',
-          data2: '001'
-        }, {
-          data1: 'Date :',
-          data2: '25/5/2018'
-        }, {
-          data1: 'Customer Marking :',
-          data2: 'CIEF/150ECE'
-        }, {
-          data1: '',
-          data2: ''
-        }, {
-          data1: 'Payment Method :',
-          data2: 'Cash/Bank Transfer'
-        }, {
-          data1: '',
-          data2: ''
-        }],
-        bookingConfirmTable2:[{
-          data1: 'CNY/RMB :',
-          data2: 'CNY 120,500.00'
-        }, {
-          data1: '+ Service Charge :',
-          data2: 'CNY 20.00'
-        }, {
-          data1: '/ RATE :',
-          data2: '1.63'
-        }, {
-          data1: '',
-          data2: 'MYR 73,848.04'
-        }, {
-          data1: '+ GST 6% :',
-          data2: 'MYR 4,430.88'
-        }, {
-          data1: '',
-          data2: 'MYR 78,278.92'
-        }, {
-          data1: '',
-          data2: ''
-        }
-        ]
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 3,
+      bookingConfirmTable: [{
+        data1: 'Order Number :',
+        data2: '001'
+      }, {
+        data1: 'Date :',
+        data2: '25/5/2018'
+      }, {
+        data1: 'Customer Marking :',
+        data2: 'CIEF/150ECE'
+      }, {
+        data1: '',
+        data2: ''
+      }, {
+        data1: 'Payment Method :',
+        data2: 'Cash/Bank Transfer'
+      }, {
+        data1: '',
+        data2: ''
+      }],
+      bookingConfirmTable2: [{
+        data1: 'CNY/RMB :',
+        data2: 'CNY 120,500.00'
+      }, {
+        data1: '+ Service Charge :',
+        data2: 'CNY 20.00'
+      }, {
+        data1: '/ RATE :',
+        data2: '1.63'
+      }, {
+        data1: '',
+        data2: 'MYR 73,848.04'
+      }, {
+        data1: '+ GST 6% :',
+        data2: 'MYR 4,430.88'
+      }, {
+        data1: '',
+        data2: 'MYR 78,278.92'
+      }, {
+        data1: '',
+        data2: ''
       }
-    },
-    methods: {
-
-
+      ]
     }
+  },
+  methods: {
+
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/booking/poComplete.vue b/resources/assets/js/pages/booking/poComplete.vue
index e70b0242..bae24ee9 100644
--- a/resources/assets/js/pages/booking/poComplete.vue
+++ b/resources/assets/js/pages/booking/poComplete.vue
@@ -1,88 +1,88 @@
 <template>
-    <el-main>
-        <progress-track v-model="status"></progress-track>
+  <el-main>
+    <progress-track v-model="status"/>
 
-        <div align="center">
-            <h4 style="margin-top:5%;">Processing Invoice</h4>
-            <br>
+    <div align="center">
+      <h4 style="margin-top:5%;">Processing Invoice</h4>
+      <br>
+    </div>
+
+    <!-- upload card -->
+    <br>
+    <el-row :gutter="12" justify="center" align="center">
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Purchase Order</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+          <el-row :gutter="12" type="flex">
+            <el-col :span="12">
+              <a target=" _blank" href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>China Bank Slip</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+          <el-row :gutter="12" type="flex">
+            <el-col :span="12">
+              <a target=" _blank" href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <br>
+
+    <!-- order details -->
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Details</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
         </div>
-
-        <!-- upload card -->
-        <br>
-        <el-row :gutter="12" justify="center" align="center">
-            <el-col :span="12">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>Purchase Order</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-                  <el-row type="flex" :gutter="12">
-                        <el-col :span="12">
-                            <a target=" _blank" href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-
-                </el-card>
-            </el-col>
-            <el-col :span="12">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>China Bank Slip</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-                    <el-row type="flex" :gutter="12">
-                        <el-col :span="12">
-                            <a  target=" _blank" href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-                </el-card>
-            </el-col>
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
         </el-row>
-        <br>
+      </el-card>
+    </el-row>
+    <br>
 
-        <!-- order details -->
-        <el-row justify="center" align="center">
-            <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                    <span>Order Details</span>
-                    <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                </div>
-                <el-row :gutter="12">
-                    <el-col :span="12">
-                        <el-table :data="bookingConfirmTable" align="center" :show-header="false">
-                            <el-table-column prop="data1" align="right" width="200" />
-                            <el-table-column prop="data2" align="left" width="200" />
-                        </el-table>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-table :data="bookingConfirmTable2" align="center" :show-header="false">
-                            <el-table-column prop="data1" align="right" width="200" />
-                            <el-table-column prop="data2" align="left" width="200" />
-                        </el-table>
-                    </el-col>
-                </el-row>
-            </el-card>
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Bankin Slip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
         </el-row>
-        <br>
-
-        <el-row justify="center" align="center">
-            <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                    <span>Order Bankin Slip</span>
-                    <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                </div>
-                <el-row :gutter="12">
-                    <el-col :span="22" style="text-align:center">
-                        <img src="http://via.placeholder.com/600x400" class="image">
-                    </el-col>
-                </el-row>
-            </el-card>
-        </el-row>
-    </el-main>
+      </el-card>
+    </el-row>
+  </el-main>
 </template>
 <style>
     .booking-details {
@@ -90,62 +90,61 @@
     }
 </style>
 <script>
-    import VueCountdown from '@dmaksimovic/vue-countdown'
-    import ProgressTrack from '~/components/ProgressTrack'
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
 
-    export default {
-        components: {
-            'progress-track': ProgressTrack
-        },
-        data() {
-            return {
-                status: 5,
-                bookingConfirmTable: [{
-                    data1: 'Order Number :',
-                    data2: '001'
-                }, {
-                    data1: 'Date :',
-                    data2: '25/5/2018'
-                }, {
-                    data1: 'Customer Marking :',
-                    data2: 'CIEF/150ECE'
-                }, {
-                    data1: '',
-                    data2: ''
-                }, {
-                    data1: 'Payment Method :',
-                    data2: 'Cash/Bank Transfer'
-                }, {
-                    data1: '',
-                    data2: ''
-                }],
-                bookingConfirmTable2: [{
-                    data1: 'CNY/RMB :',
-                    data2: 'CNY 120,500.00'
-                }, {
-                    data1: '+ Service Charge :',
-                    data2: 'CNY 20.00'
-                }, {
-                    data1: '/ RATE :',
-                    data2: '1.63'
-                }, {
-                    data1: '',
-                    data2: 'MYR 73,848.04'
-                }, {
-                    data1: '+ GST 6% :',
-                    data2: 'MYR 4,430.88'
-                }, {
-                    data1: '',
-                    data2: 'MYR 78,278.92'
-                }, {
-                    data1: '',
-                    data2: ''
-                }]
-            }
-        },
-        methods: {
-
-
-        }
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 5,
+      bookingConfirmTable: [{
+        data1: 'Order Number :',
+        data2: '001'
+      }, {
+        data1: 'Date :',
+        data2: '25/5/2018'
+      }, {
+        data1: 'Customer Marking :',
+        data2: 'CIEF/150ECE'
+      }, {
+        data1: '',
+        data2: ''
+      }, {
+        data1: 'Payment Method :',
+        data2: 'Cash/Bank Transfer'
+      }, {
+        data1: '',
+        data2: ''
+      }],
+      bookingConfirmTable2: [{
+        data1: 'CNY/RMB :',
+        data2: 'CNY 120,500.00'
+      }, {
+        data1: '+ Service Charge :',
+        data2: 'CNY 20.00'
+      }, {
+        data1: '/ RATE :',
+        data2: '1.63'
+      }, {
+        data1: '',
+        data2: 'MYR 73,848.04'
+      }, {
+        data1: '+ GST 6% :',
+        data2: 'MYR 4,430.88'
+      }, {
+        data1: '',
+        data2: 'MYR 78,278.92'
+      }, {
+        data1: '',
+        data2: ''
+      }]
     }
-</script>
\ No newline at end of file
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index c9c7b4d9..c2e85c3f 100644
--- a/resources/assets/js/pages/booking/transfer.vue
+++ b/resources/assets/js/pages/booking/transfer.vue
@@ -1,6 +1,6 @@
 <template>
   <el-main>
-    <progress-track v-model="status"></progress-track>
+    <progress-track v-model="status"/>
 
     <div align="center">
       <h4 style="margin-top:5%;">Transfer In Progress</h4>
@@ -18,13 +18,13 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="12">
-            <el-table :data="bookingConfirmTable" align="center" :show-header="false">
+            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
               <el-table-column prop="data1" align="right" width="200" />
               <el-table-column prop="data2" align="left" width="200" />
             </el-table>
           </el-col>
           <el-col :span="12">
-            <el-table :data="bookingConfirmTable2" align="center" :show-header="false">
+            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
               <el-table-column prop="data1" align="right" width="200" />
               <el-table-column prop="data2" align="left" width="200" />
             </el-table>
@@ -34,7 +34,7 @@
     </el-row>
     <br>
 
-      <el-row justify="center" align="center">
+    <el-row justify="center" align="center">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
           <span>BankinSlip</span>
@@ -55,63 +55,62 @@
   }
 </style>
 <script>
-  import VueCountdown from '@dmaksimovic/vue-countdown'
-  import ProgressTrack from '~/components/ProgressTrack'
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
 
-  export default {
-    components: {
-      'progress-track': ProgressTrack
-    },
-    data() {
-      return {
-        status: 4,
-        bookingConfirmTable: [{
-          data1: 'Order Number :',
-          data2: '001'
-        }, {
-          data1: 'Date :',
-          data2: '25/5/2018'
-        }, {
-          data1: 'Customer Marking :',
-          data2: 'CIEF/150ECE'
-        }, {
-          data1: '',
-          data2: ''
-        }, {
-          data1: 'Payment Method :',
-          data2: 'Cash/Bank Transfer'
-        }, {
-          data1: '',
-          data2: ''
-        }],
-        bookingConfirmTable2:[{
-          data1: 'CNY/RMB :',
-          data2: 'CNY 120,500.00'
-        }, {
-          data1: '+ Service Charge :',
-          data2: 'CNY 20.00'
-        }, {
-          data1: '/ RATE :',
-          data2: '1.63'
-        }, {
-          data1: '',
-          data2: 'MYR 73,848.04'
-        }, {
-          data1: '+ GST 6% :',
-          data2: 'MYR 4,430.88'
-        }, {
-          data1: '',
-          data2: 'MYR 78,278.92'
-        }, {
-          data1: '',
-          data2: ''
-        }
-        ]
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 4,
+      bookingConfirmTable: [{
+        data1: 'Order Number :',
+        data2: '001'
+      }, {
+        data1: 'Date :',
+        data2: '25/5/2018'
+      }, {
+        data1: 'Customer Marking :',
+        data2: 'CIEF/150ECE'
+      }, {
+        data1: '',
+        data2: ''
+      }, {
+        data1: 'Payment Method :',
+        data2: 'Cash/Bank Transfer'
+      }, {
+        data1: '',
+        data2: ''
+      }],
+      bookingConfirmTable2: [{
+        data1: 'CNY/RMB :',
+        data2: 'CNY 120,500.00'
+      }, {
+        data1: '+ Service Charge :',
+        data2: 'CNY 20.00'
+      }, {
+        data1: '/ RATE :',
+        data2: '1.63'
+      }, {
+        data1: '',
+        data2: 'MYR 73,848.04'
+      }, {
+        data1: '+ GST 6% :',
+        data2: 'MYR 4,430.88'
+      }, {
+        data1: '',
+        data2: 'MYR 78,278.92'
+      }, {
+        data1: '',
+        data2: ''
       }
-    },
-    methods: {
-
-
+      ]
     }
+  },
+  methods: {
+
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index 6570f5a5..226ad452 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -1,102 +1,102 @@
 <template>
-    <el-main>
-        <progress-track v-model="status"></progress-track>
+  <el-main>
+    <progress-track v-model="status"/>
 
-        <div align="center">
-            <h4 style="margin-top:5%;">Transfer Completed</h4>
-            <h5> Please upload your PO </h5>
-            <br>
+    <div align="center">
+      <h4 style="margin-top:5%;">Transfer Completed</h4>
+      <h5> Please upload your PO </h5>
+      <br>
+    </div>
+
+    <!-- upload card -->
+    <br>
+    <el-row :gutter="12" justify="center" align="center">
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Upload PO</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+
+          <!-- upload image -->
+          <el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-exceed="handleExceed" :on-preview="handlePreview"
+                     :on-remove="handleRemove"
+                     class="upload-demo"
+                     drag
+                     multiple>
+            <i class="el-icon-upload"/>
+            <div class="el-upload__text">Drop file here or
+              <em>click to upload</em>
+            </div>
+            <div slot="tip" class="el-upload__tip">jpg/png/pdf files with a size less than 3mb</div>
+          </el-upload>
+
+          <br>
+
+          <div class="bottom clearfix" style="text-align:right;">
+            <el-button :loading="loading" type="primary" @click="uploadPo">Submit</el-button>
+          </div>
+          <!-- upload image end -->
+
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>China Bank Slip</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+          <el-row :gutter="12" type="flex">
+            <el-col :span="12">
+              <a href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <br>
+
+    <!-- order details -->
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Details</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
         </div>
-
-        <!-- upload card -->
-        <br>
-        <el-row :gutter="12" justify="center" align="center">
-            <el-col :span="12">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>Upload PO</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-
-                    <!-- upload image -->
-                    <el-upload class="upload-demo" drag v-bind:action="'/api/booking/' + booking_id + '/upload-po'" 
-                        :on-exceed="handleExceed"
-                        :on-preview="handlePreview" 
-                        :on-remove="handleRemove"
-                        multiple>
-                        <i class="el-icon-upload"></i>
-                        <div class="el-upload__text">Drop file here or
-                            <em>click to upload</em>
-                        </div>
-                        <div class="el-upload__tip" slot="tip">jpg/png/pdf files with a size less than 3mb</div>
-                    </el-upload>
-
-                    <br>
-
-                    <div class="bottom clearfix" style="text-align:right;">
-                        <el-button @click="uploadPo" :loading="loading" type="primary">Submit</el-button>
-                    </div>
-                    <!-- upload image end -->
-
-                </el-card>
-            </el-col>
-            <el-col :span="12">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>China Bank Slip</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-                    <el-row type="flex" :gutter="12">
-                        <el-col :span="12">
-                            <a href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-                </el-card>
-            </el-col>
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
         </el-row>
-        <br>
+      </el-card>
+    </el-row>
+    <br>
 
-        <!-- order details -->
-        <el-row justify="center" align="center">
-            <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                    <span>Order Details</span>
-                    <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                </div>
-                <el-row :gutter="12">
-                    <el-col :span="12">
-                        <el-table :data="bookingConfirmTable" align="center" :show-header="false">
-                            <el-table-column prop="data1" align="right" width="200" />
-                            <el-table-column prop="data2" align="left" width="200" />
-                        </el-table>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-table :data="bookingConfirmTable2" align="center" :show-header="false">
-                            <el-table-column prop="data1" align="right" width="200" />
-                            <el-table-column prop="data2" align="left" width="200" />
-                        </el-table>
-                    </el-col>
-                </el-row>
-            </el-card>
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Bankin Slip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
         </el-row>
-        <br>
-
-        <el-row justify="center" align="center">
-            <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                    <span>Order Bankin Slip</span>
-                    <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                </div>
-                <el-row :gutter="12">
-                    <el-col :span="22" style="text-align:center">
-                        <img src="http://via.placeholder.com/600x400" class="image">
-                    </el-col>
-                </el-row>
-            </el-card>
-        </el-row>
-    </el-main>
+      </el-card>
+    </el-row>
+  </el-main>
 </template>
 <style>
     .booking-details {
@@ -104,101 +104,100 @@
     }
 </style>
 <script>
-    import VueCountdown from '@dmaksimovic/vue-countdown'
-    import ProgressTrack from '~/components/ProgressTrack'
-    import axios from 'axios'
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
+import axios from 'axios'
 
-    export default {
-        components: {
-            'progress-track': ProgressTrack
-        },
-        data() {
-            return {
-                booking_id: this.$route.params.id,
-                status: 5,
-                loading: false,
-                bookingConfirmTable: [{
-                    data1: 'Order Number :',
-                    data2: '001'
-                }, {
-                    data1: 'Date :',
-                    data2: '25/5/2018'
-                }, {
-                    data1: 'Customer Marking :',
-                    data2: 'CIEF/150ECE'
-                }, {
-                    data1: '',
-                    data2: ''
-                }, {
-                    data1: 'Payment Method :',
-                    data2: 'Cash/Bank Transfer'
-                }, {
-                    data1: '',
-                    data2: ''
-                }],
-                bookingConfirmTable2: [{
-                    data1: 'CNY/RMB :',
-                    data2: 'CNY 120,500.00'
-                }, {
-                    data1: '+ Service Charge :',
-                    data2: 'CNY 20.00'
-                }, {
-                    data1: '/ RATE :',
-                    data2: '1.63'
-                }, {
-                    data1: '',
-                    data2: 'MYR 73,848.04'
-                }, {
-                    data1: '+ GST 6% :',
-                    data2: 'MYR 4,430.88'
-                }, {
-                    data1: '',
-                    data2: 'MYR 78,278.92'
-                }, {
-                    data1: '',
-                    data2: ''
-                }]
-            }
-        },
-        methods: {
-            uploadPo(){
-                this.loading = true
-                axios
-                .post('/api/booking/' + this.$route.params.id + '/confirm-po')
-                .then((response) => {
-                    console.log(response)
-                    this.$message({
-                    showClose: true,
-                    message: 'Your PO has been uploaded. We are processing the Invoice.',
-                    type: 'success',
-                    duration: 5000,
-                    });
-                    this.$router.push({
-                    name: 'home'
-                    })
-                    this.loading = false
-
-                }).catch((error) => {
-                    console.log(error)
-                    loading.close()
-                    this.$router.push({
-                        name: 'notfound'
-                    })
-                    this.loading = false
-                })
-            },
-            handleRemove(file, fileList) {
-                console.log(file, fileList);
-            },
-            handlePreview(file) {
-                console.log(file);
-            },
-            handleExceed(files, fileList) {
-                this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);
-            },
-            beforeRemove(file, fileList) {
-                return this.$confirm(`确定移除 ${ file.name }？`);
-            }
-        }
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      booking_id: this.$route.params.id,
+      status: 5,
+      loading: false,
+      bookingConfirmTable: [{
+        data1: 'Order Number :',
+        data2: '001'
+      }, {
+        data1: 'Date :',
+        data2: '25/5/2018'
+      }, {
+        data1: 'Customer Marking :',
+        data2: 'CIEF/150ECE'
+      }, {
+        data1: '',
+        data2: ''
+      }, {
+        data1: 'Payment Method :',
+        data2: 'Cash/Bank Transfer'
+      }, {
+        data1: '',
+        data2: ''
+      }],
+      bookingConfirmTable2: [{
+        data1: 'CNY/RMB :',
+        data2: 'CNY 120,500.00'
+      }, {
+        data1: '+ Service Charge :',
+        data2: 'CNY 20.00'
+      }, {
+        data1: '/ RATE :',
+        data2: '1.63'
+      }, {
+        data1: '',
+        data2: 'MYR 73,848.04'
+      }, {
+        data1: '+ GST 6% :',
+        data2: 'MYR 4,430.88'
+      }, {
+        data1: '',
+        data2: 'MYR 78,278.92'
+      }, {
+        data1: '',
+        data2: ''
+      }]
     }
-</script>
\ No newline at end of file
+  },
+  methods: {
+    uploadPo () {
+      this.loading = true
+      axios
+        .post('/api/booking/' + this.$route.params.id + '/confirm-po')
+        .then((response) => {
+          console.log(response)
+          this.$message({
+            showClose: true,
+            message: 'Your PO has been uploaded. We are processing the Invoice.',
+            type: 'success',
+            duration: 5000
+          })
+          this.$router.push({
+            name: 'home'
+          })
+          this.loading = false
+        }).catch((error) => {
+          console.log(error)
+          loading.close()
+          this.$router.push({
+            name: 'notfound'
+          })
+          this.loading = false
+        })
+    },
+    handleRemove (file, fileList) {
+      console.log(file, fileList)
+    },
+    handlePreview (file) {
+      console.log(file)
+    },
+    handleExceed (files, fileList) {
+      this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`)
+    },
+    beforeRemove (file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`)
+    }
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index db35014e..fa1cb4df 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -1,6 +1,6 @@
 <template>
   <el-main>
-    <progress-track v-model="status"></progress-track>
+    <progress-track v-model="status"/>
 
     <div align="center">
       <h4 style="margin-top:5%;">Waiting For Payment</h4>
@@ -26,10 +26,8 @@
     </el-row>
     <br>
 
-
     <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
 
-
     <div align="center">
 
       <vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
@@ -39,11 +37,9 @@
     </div>
     <br>
 
-
-
     <!-- upload image -->
-    <el-upload v-bind:action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
-      list-type="picture-card" align="center">
+    <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">
@@ -56,15 +52,15 @@
         <el-form-item label="Amount (RM) :"> -->
     <div align="center">
       Bankin Amount (RM) :
-      <el-form :model="user_slip_form" :rules="rules" ref="user_slip_form">
+      <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 type="primary" :loading="loading" @click="submitUserSlip('user_slip_form')">Submit</el-button>
+            <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>
@@ -78,8 +74,6 @@
     <!-- </el-form-item>
     </el-form> -->
 
-
-
   </el-main>
 </template>
 <style>
@@ -88,151 +82,144 @@
   }
 </style>
 <script>
-  import VueCountdown from '@xkeshi/vue-countdown'
-  import ProgressTrack from '~/components/ProgressTrack'
-  import axios from 'axios'
+import VueCountdown from '@xkeshi/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
+import axios from 'axios'
 
-  export default {
-    middleware: ['auth'],
-    name: 'MyComponent',
-    components: {
-      'vue-countdown': VueCountdown,
-      'progress-track': ProgressTrack
-    },
-    data() {
-      return {
-        status: 2,
-        start: false,
-        loading: false,
-        dialogImageUrl: '',
-        dialogVisible: false,
-        booking_id: this.$route.params.id,
-        user_slip_form:{
-          transfer_amount : ''
-        },
-        booking: {
-          amount: '',
-          bankin_amount: '',
-          timeout: 1
-        },
-        rules: {
-          transfer_amount: [{
-            required: true,
-            message: 'Please input amount',
-            trigger: 'change'
-          }, ],}
-      }
-    },
-    beforeCreate() {
-      const loading = this.$loading({
-        lock: true,
-        text: 'Please wait..',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-
-      axios
-        .get('/api/booking/' + this.$route.params.id)
-        .then((response) => {
-          console.log(response)
-          this.booking.amount = response.data.amount
-          this.booking.bankin_amount = response.data.bia
-          this.booking.timeout = response.data.timeout * 1000
-          this.start = true;
-          loading.close()
-
-          if(this.booking.timeout < 0 ){
-              this.$message({
-              showClose: true,
-              message: 'Booking timeout, please make another booking.',
-              type: 'error',
-              duration: 30000,
-            });
-            this.$router.push({
-              name: 'home'
-            })
-          }
-
-        }).catch((error) => {
-          console.log(error)
-          loading.close()
-          this.$router.push({
-            name: 'notfound'
-          })
-        })
-     
-    },
-    methods: {
-      handleCoutdownend(){
-        this.$message({
-          showClose: true,
-          message: 'Booking timeout, please make another booking.',
-          type: 'error',
-          duration: 30000,
-        });
-        this.$router.push({
-          name: 'home'
-        })
+export default {
+  middleware: ['auth'],
+  name: 'MyComponent',
+  components: {
+    'vue-countdown': VueCountdown,
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 2,
+      start: false,
+      loading: false,
+      dialogImageUrl: '',
+      dialogVisible: false,
+      booking_id: this.$route.params.id,
+      user_slip_form: {
+        transfer_amount: ''
       },
-      handleRemove(file, fileList) {
-        console.log(file, fileList)
+      booking: {
+        amount: '',
+        bankin_amount: '',
+        timeout: 1
       },
-      handlePictureCardPreview(file) {
-        this.dialogImageUrl = file.url
-        this.dialogVisible = true
-      },
-      submitUserSlip(formName) {
-         this.loading = true
-         this.$refs[formName].validate((valid) => {
-          if (valid) {
-            let newConfirmation = {
-              amount: this.booking.amount,
-              term: this.term
-            }
-          }
-          else{
-            this.loading = false
-            return
-          }
-          });
-         let newUserSlip = {
-          transfer_amount : this.user_slip_form.transfer_amount
-        }
-        axios.patch('/api/booking/'+ this.booking_id +'/bankslip-amount', newUserSlip)
-          .then((response) => {
-          
-            this.$message({
-              showClose: true,
-              message: 'Your bankinslip has been submitted, please wait admin to approve.',
-              type: 'success',
-              duration: 5000,
-            });
-            
-            console.log(response)
-             this.$router.push({
-              name: 'home'
-            })
-
-          })
-          .catch((error) => {
-            this.loading = false
-            this.$message({
-              showClose: true,
-              message: 'Please upload your bankin slip first.',
-              type: 'warning',
-              duration: 10000,
-            });
-            console.log(error)
-            return
-          })
-      },
-      handleTimeExpire() {
-        alert('Booking expired')
-      },
-      startTimer() {
-        this.start = true
-      },
-
+      rules: {
+        transfer_amount: [{
+          required: true,
+          message: 'Please input amount',
+          trigger: 'change'
+        } ]}
     }
+  },
+  beforeCreate () {
+    const loading = this.$loading({
+      lock: true,
+      text: 'Please wait..',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
+
+    axios
+      .get('/api/booking/' + this.$route.params.id)
+      .then((response) => {
+        console.log(response)
+        this.booking.amount = response.data.amount
+        this.booking.bankin_amount = response.data.bia
+        this.booking.timeout = response.data.timeout * 1000
+        this.start = true
+        loading.close()
+
+        if (this.booking.timeout < 0) {
+          this.$message({
+            showClose: true,
+            message: 'Booking timeout, please make another booking.',
+            type: 'error',
+            duration: 30000
+          })
+          this.$router.push({
+            name: 'home'
+          })
+        }
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+  },
+  methods: {
+    handleCoutdownend () {
+      this.$message({
+        showClose: true,
+        message: 'Booking timeout, please make another booking.',
+        type: 'error',
+        duration: 30000
+      })
+      this.$router.push({
+        name: 'home'
+      })
+    },
+    handleRemove (file, fileList) {
+      console.log(file, fileList)
+    },
+    handlePictureCardPreview (file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    submitUserSlip (formName) {
+      this.loading = true
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          let newConfirmation = {
+            amount: this.booking.amount,
+            term: this.term
+          }
+        } else {
+          this.loading = false
+        }
+      })
+      let newUserSlip = {
+        transfer_amount: this.user_slip_form.transfer_amount
+      }
+      axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount', newUserSlip)
+        .then((response) => {
+          this.$message({
+            showClose: true,
+            message: 'Your bankinslip has been submitted, please wait admin to approve.',
+            type: 'success',
+            duration: 5000
+          })
+
+          console.log(response)
+          this.$router.push({
+            name: 'home'
+          })
+        })
+        .catch((error) => {
+          this.loading = false
+          this.$message({
+            showClose: true,
+            message: 'Please upload your bankin slip first.',
+            type: 'warning',
+            duration: 10000
+          })
+          console.log(error)
+        })
+    },
+    handleTimeExpire () {
+      alert('Booking expired')
+    },
+    startTimer () {
+      this.start = true
+    }
+
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index b53ed7d8..26528fe4 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -140,8 +140,8 @@
     <!-- Rate-Display-end -->
 
     <!-- Form_popup -->
-    <el-dialog :visible.sync="dialogFormVisible" title="Booking" :fullscreen="true" center>
-      <el-form :model="bookingForm" :rules="rules" ref="bookingForm">
+    <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" />
@@ -159,7 +159,7 @@
           <el-form-item>
             <el-button @click="dialogFormVisible = false">Cancel</el-button>
 
-            <el-button type="primary" :loading="loading" @click="getCalculationValue('bookingForm')">Book Now</el-button>
+            <el-button :loading="loading" type="primary" @click="getCalculationValue('bookingForm')">Book Now</el-button>
           </el-form-item>
         </div>
       </el-form>
@@ -167,7 +167,7 @@
     <!-- Form_popup-end -->
 
     <!-- Booking_confirmation_popup -->
-    <el-dialog :visible.sync="dialogFormVisible1" title="Booking Confirmation" :fullscreen="true" center>
+    <el-dialog :visible.sync="dialogFormVisible1" :fullscreen="true" title="Booking Confirmation" center>
 
       <!-- Table_booking_confirmation -->
       <!-- <el-table :data="bookingConfirmTable" align="center">
@@ -203,12 +203,12 @@
             <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>
+            <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>
-            <td width="200" class="el-table_2_column_9 is-left "></td>
+            <td width="200" class="el-table_2_column_9 is-right "/>
+            <td width="200" class="el-table_2_column_9 is-left "/>
           </tr>
 
           <tr>
@@ -226,7 +226,7 @@
 
       <span slot="footer" class="dialog-footer">
         <!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
-        <el-button type="primary" :loading="loading" @click="createBooking">Confirm</el-button>
+        <el-button :loading="loading" type="primary" @click="createBooking">Confirm</el-button>
       </span>
     </el-dialog>
     <!-- Booking_confirmation_popup -->
@@ -241,15 +241,14 @@
         <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 type="text" slot-scope="scope" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> {{scope.row.id}}</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  label="Term" prop="term" :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" width="100" :filter-method="filterHandler">
-        </el-table-column> -->
+          <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" />
+                           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> -->
@@ -267,8 +266,8 @@
           <!-- <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 type="text" slot-scope="scope" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> View Status </el-button>
+                           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>
@@ -287,247 +286,244 @@
   }
 </style>
 <script>
-  import Form from 'vform'
-  import LoginWithGithub from '~/components/LoginWithGithub'
-  import store from '~/store'
-  import axios from 'axios'
+import Form from 'vform'
+import LoginWithGithub from '~/components/LoginWithGithub'
+import store from '~/store'
+import axios from 'axios'
 
-  export default {
-    middleware: ['auth'],
+export default {
+  middleware: ['auth'],
 
-    data() {
-      return {
-        confirmForm: new Form({
-          term: '',
-          amount: ''
-        }),
-        loading: false,
-        status: '',
-        booking: {
-          amount: '',
-          rate: ''
-        },
-        bookingForm: {
-          //amount: '',
-          account_name: '',
-          bank_name: '',
-          bank_branch: '',
-          account_num: ''
-        },
-        rules: {
-          amount: [{
-            required: true,
-            message: 'Please input amount',
-            trigger: 'change'
-          }, ],
-          bank_name: [{
-            required: true,
-            message: 'Please input bank name',
-            trigger: 'change'
-          }, ],
-          account_name: [{
-            required: true,
-            message: 'Please input account name',
-            trigger: 'change'
-          }],
-          bank_branch: [{
-            required: true,
-            message: 'Please input branch',
-            trigger: 'change'
-          }],
-          account_num: [{
-            required: true,
-            message: 'Please input account number',
-            trigger: 'change'
-          }]
-        },
+  data () {
+    return {
+      confirmForm: new Form({
         term: '',
-        options1: [{
-          value: 'RMB',
-          label: 'RMB'
+        amount: ''
+      }),
+      loading: false,
+      status: '',
+      booking: {
+        amount: '',
+        rate: ''
+      },
+      bookingForm: {
+        // amount: '',
+        account_name: '',
+        bank_name: '',
+        bank_branch: '',
+        account_num: ''
+      },
+      rules: {
+        amount: [{
+          required: true,
+          message: 'Please input amount',
+          trigger: 'change'
+        } ],
+        bank_name: [{
+          required: true,
+          message: 'Please input bank name',
+          trigger: 'change'
+        } ],
+        account_name: [{
+          required: true,
+          message: 'Please input account name',
+          trigger: 'change'
         }],
-        options2: [{
-          value2: 'MYR',
-          label2: 'MYR'
+        bank_branch: [{
+          required: true,
+          message: 'Please input branch',
+          trigger: 'change'
         }],
+        account_num: [{
+          required: true,
+          message: 'Please input account number',
+          trigger: 'change'
+        }]
+      },
+      term: '',
+      options1: [{
         value: 'RMB',
-        dialogFormVisible: false,
-        dialogFormVisible1: false,
-        formLabelWidth: '0px',
-        bookingTable: [
-        ],
-        bookingConfirmTable: {
-          date: 'undefined',
-          marking: 'undefined',
-          payment_method: 'undefined',
-          amount: 'undefined',
-          service_charge: 'undefined',
-          rate: 'undefined',
-          bankin_amount: 'undefined',
-          china_beneficiary: 'undefined',
-          status: 2
-        }
+        label: 'RMB'
+      }],
+      options2: [{
+        value2: 'MYR',
+        label2: 'MYR'
+      }],
+      value: 'RMB',
+      dialogFormVisible: false,
+      dialogFormVisible1: false,
+      formLabelWidth: '0px',
+      bookingTable: [
+      ],
+      bookingConfirmTable: {
+        date: 'undefined',
+        marking: 'undefined',
+        payment_method: 'undefined',
+        amount: 'undefined',
+        service_charge: 'undefined',
+        rate: 'undefined',
+        bankin_amount: 'undefined',
+        china_beneficiary: 'undefined',
+        status: 2
       }
+    }
+  },
+  mounted () {
+    axios
+      .get('/api/booking/')
+      .then((response) => {
+        console.log(response)
+        this.bookingTable = response.data
+
+        // loading.close()
+      }).catch((error) => {
+        // console.log(error)
+        // loading.close()
+        // this.$router.push({
+        //   name: 'notfound'
+        // })
+      })
+  },
+  methods: {
+    // TODO fetch booking data on load
+    formatter (row, column) {
+      return row.address
     },
-    mounted(){
-      axios
-        .get('/api/booking/')
+    filterTag (value, row) {
+      return row.tag === value
+    },
+    filterHandler (value, row, column) {
+      const property = column['property']
+      return row[property] === value
+    },
+    acceptTerm: function (newterm) {
+      if (this.booking.amount == '') {
+        this.$message({
+          message: 'Please input amount',
+          type: 'warning'
+        })
+        return
+      }
+      this.dialogFormVisible = true
+      this.term = newterm
+    },
+    BookingList () {
+      axios.get('api/booking')
         .then((response) => {
           console.log(response)
-          this.bookingTable = response.data
-              
-          //loading.close()
-        }).catch((error) => {
-          // console.log(error)
-          // loading.close()
-          // this.$router.push({
-          //   name: 'notfound'
-          // })
+          this.list = response.data
         })
     },
-    methods: {
-      // TODO fetch booking data on load 
-      formatter(row, column) {
-        return row.address
-      },
-      filterTag(value, row) {
-        return row.tag === value
-      },
-      filterHandler(value, row, column) {
-        const property = column['property']
-        return row[property] === value
-      },
-      acceptTerm: function (newterm) {
-        if (this.booking.amount == '') {
-          this.$message({
-            message: 'Please input amount',
-            type: 'warning'
-          });
-          return;
-        }
-        this.dialogFormVisible = true
-        this.term = newterm
-      },
-      BookingList() {
-        axios.get('api/booking')
-          .then((response) => {
-            console.log(response)
-            this.list = response.data
-          })
-      },
-      // Get calculation before submitting booking 
-      getCalculationValue(formName) {
-        this.loading = true
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            let newConfirmation = {
-              amount: this.booking.amount,
-              term: this.term
-            }
-            axios.post('api/booking/calculation', newConfirmation)
-              .then((response) => {
-                this.loading = false
-                console.log(response)
-                this.bookingConfirmTable.date = response.data.date
-                this.bookingConfirmTable.marking = response.data.marking
-                this.bookingConfirmTable.payment_method = response.data.payment_method
-                this.bookingConfirmTable.amount = response.data.amount
-                this.bookingConfirmTable.service_charge = response.data.service_charge
-                this.bookingConfirmTable.rate = response.data.rate
-                this.bookingConfirmTable.bankin_amount = response.data.bankin_amount
-                this.bookingConfirmTable.account_name = this.bookingForm.account_name
-                this.dialogFormVisible = false
-                this.dialogFormVisible1 = true
-              })
-              .catch((error) => {
-                this.loading = false
-                console.log(error)
-              })
-          } else {
-            return;
+    // Get calculation before submitting booking
+    getCalculationValue (formName) {
+      this.loading = true
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          let newConfirmation = {
+            amount: this.booking.amount,
+            term: this.term
           }
-        });
+          axios.post('api/booking/calculation', newConfirmation)
+            .then((response) => {
+              this.loading = false
+              console.log(response)
+              this.bookingConfirmTable.date = response.data.date
+              this.bookingConfirmTable.marking = response.data.marking
+              this.bookingConfirmTable.payment_method = response.data.payment_method
+              this.bookingConfirmTable.amount = response.data.amount
+              this.bookingConfirmTable.service_charge = response.data.service_charge
+              this.bookingConfirmTable.rate = response.data.rate
+              this.bookingConfirmTable.bankin_amount = response.data.bankin_amount
+              this.bookingConfirmTable.account_name = this.bookingForm.account_name
+              this.dialogFormVisible = false
+              this.dialogFormVisible1 = true
+            })
+            .catch((error) => {
+              this.loading = false
+              console.log(error)
+            })
+        } else {
 
-      },
-      createBooking: function () {
-        this.loading = true,
-        this.dialogFormVisible1 = true
-
-        let newBooking = {
-          account_name: this.bookingForm.account_name,
-          account_num: this.bookingForm.account_num,
-          bank_name: this.bookingForm.bank_name,
-          bank_branch: this.bookingForm.bank_branch,
-          amount: this.booking.amount,
-          term: this.term
         }
-
-        console.log(newBooking)
-        axios.post('api/booking', newBooking)
-          .then((response) => {
-            this.loading = false
-            // push with return id 
-            this.$router.push({
-              name: 'booking.user.upload',
-              params: {id: response.data.id }
-            })
-
-            // pass variable to another router 
-
-          })
-          .catch((error) => {
-            console.log(error)
-            return
-          })
-      },
-      BookingStatus(status, booking_id) {
-        console.log(status)
-        // TODO : Get booking status from server 
-        this.status = status
-
-        switch (this.status) {
-          case 1:
-            this.$router.push({
-              name: 'booking.user.upload',
-              params: {id: booking_id }
-            })
-
-          case 2:
-              this.$router.push({
-              name: 'booking.confirmation',
-              params: {id: booking_id  }
-            })
-            break;
-          case 3:
-           this.$router.push({
-              name: 'booking.transfer',
-              params: {id: booking_id  }
-            })
-            break;
-          case 4:
-           this.$router.push({
-              name: 'booking.user.uploadpo',
-              params: {id: booking_id  }
-            })
-            break;
-
-          case 5:
-            this.$router.push({
-              name: 'booking.user.pocomplete',
-              params: {id: booking_id  }
-            })
-            break;
-
-          case 6:
-            this.$router.push({
-              name: 'booking.complete',
-              params: {id: booking_id  }
-            })
-            break;
-          default:
-            break
-        }
-      }
+      })
     },
+    createBooking: function () {
+      this.loading = true,
+      this.dialogFormVisible1 = true
+
+      let newBooking = {
+        account_name: this.bookingForm.account_name,
+        account_num: this.bookingForm.account_num,
+        bank_name: this.bookingForm.bank_name,
+        bank_branch: this.bookingForm.bank_branch,
+        amount: this.booking.amount,
+        term: this.term
+      }
+
+      console.log(newBooking)
+      axios.post('api/booking', newBooking)
+        .then((response) => {
+          this.loading = false
+          // push with return id
+          this.$router.push({
+            name: 'booking.user.upload',
+            params: {id: response.data.id }
+          })
+
+          // pass variable to another router
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    BookingStatus (status, booking_id) {
+      console.log(status)
+      // TODO : Get booking status from server
+      this.status = status
+
+      switch (this.status) {
+        case 1:
+          this.$router.push({
+            name: 'booking.user.upload',
+            params: {id: booking_id }
+          })
+          break
+        case 2:
+          this.$router.push({
+            name: 'booking.user.upload',
+            params: {id: booking_id }
+          })
+          break
+        case 3:
+          this.$router.push({
+            name: 'booking.user.confirmation',
+            params: {id: booking_id }
+          })
+          break
+        case 4:
+          this.$router.push({
+            name: 'booking.user.transfer',
+            params: {id: booking_id }
+          })
+          break
+
+        case 5:
+          this.$router.push({
+            name: 'booking.user.uploadpo',
+            params: {id: booking_id }
+          })
+          break
+
+        case 6:
+          this.$router.push({
+            name: 'booking.user.complete',
+            params: {id: booking_id }
+          })
+          break
+        default:
+          break
+      }
+    }
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index e9fd43c9..be5ecf5a 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -18,6 +18,13 @@ const UploadPo = () => import('~/pages/booking/uploadPo').then(m => m.default ||
 const PoComplete = () => import('~/pages/booking/poComplete').then(m => m.default || m)
 const Completed = () => import('~/pages/booking/completed').then(m => m.default || m)
 
+// Admin booking
+const Verification = () => import('~/pages/admin/booking/verification').then(m => m.default || m)
+const Supplier = () => import('~/pages/admin/booking/supplierBooking').then(m => m.default || m)
+const SupplierReport = () => import('~/pages/admin/booking/supplierReport').then(m => m.default || m)
+const UploadCNSlip = () => import('~/pages/admin/booking/uploadChinaBankslip').then(m => m.default || m)
+const UploadInvoice = () => import('~/pages/admin/booking/uploadInvoice').then(m => m.default || m)
+// const Completed = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
 
 const AdminHome = () => import('~/pages/admin/home').then(m => m.default || m)
 
@@ -36,16 +43,23 @@ export default [
       { path: 'profile', name: 'settings.profile', component: SettingsProfile },
       { path: 'password', name: 'settings.password', component: SettingsPassword }
     ] },
-  
+
   // Booking
   { path: '/booking/:id/upload-user-bankslip', name: 'booking.user.upload', component: Upload },
-  { path: '/booking/:id/confirmation', name: 'booking.confirmation', component: Confirmation },
-  { path: '/booking/:id/transfer', name: 'booking.transfer', component: Transfer },
+  { path: '/booking/:id/confirmation', name: 'booking.user.confirmation', component: Confirmation },
+  { path: '/booking/:id/transfer', name: 'booking.user.transfer', component: Transfer },
   { path: '/booking/:id/upload-po', name: 'booking.user.uploadpo', component: UploadPo },
   { path: '/booking/:id/po-complete', name: 'booking.user.pocomplete', component: PoComplete },
   { path: '/booking/:id/complete', name: 'booking.complete', component: Completed },
 
+  // Admin booking
+  { path: '/booking/:id/verification', name: 'booking.admin.verification', component: Verification },
+  { path: '/booking/:id/supplier', name: 'booking.admin.supplier', component: Supplier },
+  { path: '/booking/:id/supplier-report', name: 'booking.admin.supplier.report', component: SupplierReport },
+  { path: '/booking/:id/upload-cn-bankslip', name: 'booking.admin.cnslip', component: UploadCNSlip },
+  { path: '/booking/:id/upload-invoice', name: 'booking.admin.invoice', component: UploadInvoice },
+  // { path: '/booking/:id/complete', name: 'booking.complete', component: Completed },
 
   { path: '/admin', name: 'admin.home', component: AdminHome },
-  { path: '*', name:'notfound', component: NotFound }
+  { path: '*', name: 'notfound', component: NotFound }
 ]
diff --git a/resources/assets/js/store/modules/auth.js b/resources/assets/js/store/modules/auth.js
index 742199b0..c2ad7252 100644
--- a/resources/assets/js/store/modules/auth.js
+++ b/resources/assets/js/store/modules/auth.js
@@ -5,13 +5,15 @@ import * as types from '../mutation-types'
 // state
 export const state = {
   user: null,
-  token: Cookies.get('token')
+  token: Cookies.get('token'),
+  role: null
 }
 
 // getters
 export const getters = {
   user: state => state.user,
   token: state => state.token,
+  role: state => state.role,
   check: state => state.user !== null
 }
 
@@ -23,7 +25,9 @@ export const mutations = {
   },
 
   [types.FETCH_USER_SUCCESS] (state, { user }) {
+    console.log(user)
     state.user = user
+    state.role = user.role
   },
 
   [types.FETCH_USER_FAILURE] (state) {
@@ -33,6 +37,7 @@ export const mutations = {
 
   [types.LOGOUT] (state) {
     state.user = null
+    state.role = null
     state.token = null
 
     Cookies.remove('token')
diff --git a/routes/api.php b/routes/api.php
index 28fa46e0..86fe8e53 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -60,8 +60,9 @@ Route::group(['middleware' => 'guest:api'], function () {
 	Route::get('oauth/{driver}/callback', 'Auth\OAuthController@handleProviderCallback')->name('oauth.callback');
 });
 
-Route::group(['middleware' => 'role:admin'], function() {
-
+Route::group(['middleware' => ['role:admin']], function() {
+	Route::get('admin/booking/', 'BookingController@adminIndex');
+	Route::get('admin/booking/{id}', 'BookingController@adminShow');
 	Route::post('booking/{id}/upload-invoice', 'BookingController@uploadInvoice');		
 
 	Route::post('update-rate', 'RateController@store');