diff --git a/app/Booking.php b/app/Booking.php
index 24990028..8ea5ecab 100644
--- a/app/Booking.php
+++ b/app/Booking.php
@@ -8,7 +8,6 @@ class Booking extends Model
 {
     // protected $guarded = [];
     protected $hidden = array(  "user",
-                                "user_id",
                                 "rate_id",
                                 "rmb_book_amount",
                                 "rmb_book_pay_method",
@@ -24,10 +23,17 @@ class Booking extends Model
                                 "usd_book_cnap",
                                 "usd_book_bank_branch");
 
-    protected $fillable = ['term', 'rate_id', 'user_id', 'amount', 'account_name', 'account_num', 'bank_name', 
+    protected $fillable = ['id', 'term', 'rate_id', 'user_id', 'amount', 'account_name', 'account_num', 'bank_name',
                             'bank_branch', 'company_name'];
                             
     public $timestamps = true;
+
+    public function scopeUserBooking($query, $userId){
+        if($userId){
+            return $query->where('user_id', $userId);
+        }
+        return $query;
+    }
     
     public function user(){
         return $this->belongsTo(User::class);
diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index 65522a9a..a4ccf7a1 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -106,22 +106,27 @@ class BookingController extends Controller
 
     public function userComplete(){
 		$user = Auth::user();
-        $bookings = Booking::select('user_id', 'id', 'created_at', 'status', 'rate', 'term', 'amount', 'bia', 'verification_status')
-                                    ->where('user_id', Auth::user()->id)
-                                    ->where('status', '=', '5')
-                                    ->where(function ($query) {
-                                        $query->where('term', '=', 'x2_cash')
-                                           ->orwhere('term', '=', 'x2_cheque')
-                                           ->orwhere('term', '=', 'x2_ba');
-        })
-                                    ->orwhere('status', '=', '7')
-                                    ->where(function ($query) {
-                                        $query->where('term', '=', 'x1_cash')
-                                           ->orwhere('term', '=', 'x1_cheque')
-                                           ->orwhere('term', '=', 'x1_ba');
-        })
-                                    ->orderby('updated_at','desc')
-                                    ->paginate(10);
+        $bookings = Booking::where('user_id', $user->id)
+            ->where(function ($query) {
+                $query->where(function ($query) {
+                    $query->where('status', '5')
+                        ->where(function ($query) {
+                            $query->where('term', 'x2_cash')
+                                ->orwhere('term', 'x2_cheque')
+                                ->orwhere('term', 'x2_ba');
+                        });
+                })
+                ->orwhere(function ($query) {
+                    $query->where('status', '7')
+                        ->where(function ($query) {
+                            $query->where('term', 'x1_cash')
+                                ->orwhere('term', 'x1_cheque')
+                                ->orwhere('term', 'x1_ba');
+                        });
+                });
+            })
+            ->orderby('updated_at','desc')
+            ->paginate(10);
 
         // reformat to fit frontend structure 
         foreach ($bookings as $booking) {
@@ -182,99 +187,104 @@ class BookingController extends Controller
         return $bookings;
     }
 	
-	public function adminIndex(){
-		$user = Auth::user(); 
-		$bookings = Booking::select('user_id', 'id', 'created_at', 'admin_status', 'rate', 'term', 'amount', 'bia', 'verification_status')
+	public function adminIndex(?string $userId = null){
+		$user = Auth::user();
+		$bookings = Booking::UserBooking($userId)->select('user_id', 'id', 'created_at', 'admin_status', 'rate', 'term', 'amount', 'bia', 'verification_status')
         ->where('admin_status', '<', '6')
         ->orwhere(function ($query) {
             $query->where('admin_status', '=', '6')
             ->where('term', '!=', 'x2_cheque')
             ->where('term', '!=', 'x2_ba')
             ->where('term', '!=', 'x2_cash');
-            })
-                
-            ->orderby('updated_at','desc')
-            ->paginate(30);
-
-			// reformat to fit frontend structure 
-			foreach ($bookings as $booking) {
-				// set timeout 
-				$date1 = new DateTime($booking->created_at);
-				$date2 = new DateTime();
-				$time_in_seconds = SettingCredit::orderby('updated_at','desc')->first()->time_limit;
-				$difference_in_seconds = ($date1->format('U') + $time_in_seconds) - ($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; 
-		
-                $term = $booking->term;
-                if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba"){
-                    $booking->track_status = "(". $booking->admin_status ."/6)";
-                }
-                else{
-				    $booking->track_status = "(". $booking->admin_status ."/7)";
-                }
-
-				switch ($booking->admin_status) {
-					case 1:
-						$status_desc = "Waiting customer upload bank slip"; 
-						break;
-					case 2:
-						$status_desc = "Verify user bank slip";  
-						break;    
-					case 3:
-                        $status_desc = "Generate supplier booking report";    
-                        break;  
-					case 4:
-                        $status_desc = "Supplier booking report. Please confirm with your booking."; 
-                        break;
-					case 5:
-						$status_desc = "Please, upload China Bankslip"; 
-						break;
-                    case 6:
-                        $status_desc = "Waiting customer to upload purchase order"; 
-                        if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba"){
-                            $status_desc = "Order Completed";
-                        }
-                        break;
-                    case 7:
-						$status_desc = "Customer has uploaded purchase order, please upload invoice"; 
-                        break;
-                    case 8:
-						$status_desc = "Booking Completed"; 
-						break;
-					default:
-						$status_desc = "";
-                }
-                $booking->marking = $booking->user->marking;
-				$booking->status_desc = $status_desc; 
-			}
-			return $bookings;
-	}
-
-    public function adminBookComplete(){
-		$user = Auth::user(); 
-		$bookings = Booking::select('user_id', 'id', 'created_at', 'admin_status', 'rate', 'term', 'amount', 'bia', 'verification_status')
-        ->where('admin_status', '=', '6')
-        ->where(function ($query) {
-                $query->where('term', '=', 'x2_cash')
-                ->orwhere('term', '=', 'x2_cheque')
-                ->orwhere('term', '=', 'x2_ba');
-        })
-        ->orwhere('admin_status', '=', '7')
-        ->where(function ($query) {
-                $query->where('term', '=', 'x1_cash')
-                ->orwhere('term', '=', 'x1_cheque')
-                ->orwhere('term', '=', 'x1_ba');
         })
         ->orderby('updated_at','desc')
-        ->paginate(10);    
+        ->paginate(30);
+
+        // reformat to fit frontend structure
+        foreach ($bookings as $booking) {
+            // set timeout
+            $date1 = new DateTime($booking->created_at);
+            $date2 = new DateTime();
+            $time_in_seconds = SettingCredit::orderby('updated_at','desc')->first()->time_limit;
+            $difference_in_seconds = ($date1->format('U') + $time_in_seconds) - ($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;
+
+            $term = $booking->term;
+            if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba"){
+                $booking->track_status = "(". $booking->admin_status ."/6)";
+            }
+            else{
+                $booking->track_status = "(". $booking->admin_status ."/7)";
+            }
+
+            switch ($booking->admin_status) {
+                case 1:
+                    $status_desc = "Waiting customer upload bank slip";
+                    break;
+                case 2:
+                    $status_desc = "Verify user bank slip";
+                    break;
+                case 3:
+                    $status_desc = "Generate supplier booking report";
+                    break;
+                case 4:
+                    $status_desc = "Supplier booking report. Please confirm with your booking.";
+                    break;
+                case 5:
+                    $status_desc = "Please, upload China Bankslip";
+                    break;
+                case 6:
+                    $status_desc = "Waiting customer to upload purchase order";
+                    if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba"){
+                        $status_desc = "Order Completed";
+                    }
+                    break;
+                case 7:
+                    $status_desc = "Customer has uploaded purchase order, please upload invoice";
+                    break;
+                case 8:
+                    $status_desc = "Booking Completed";
+                    break;
+                default:
+                    $status_desc = "";
+            }
+            $booking->marking = $booking->user->marking;
+            $booking->status_desc = $status_desc;
+        }
+        return $bookings;
+	}
+
+    public function adminBookComplete(?string $userId = null){
+		$user = Auth::user(); 
+		$bookings = Booking::UserBooking($userId)->select('user_id', 'id', 'created_at', 'admin_status', 'rate', 'term', 'amount', 'bia', 'verification_status')
+            ->where(function ($query) {
+                $query->where(function ($query) {
+                    $query->where('admin_status', '6')
+                        ->where(function ($query) {
+                            $query->where('term', 'x2_cash')
+                                ->orwhere('term', 'x2_cheque')
+                                ->orwhere('term', 'x2_ba');
+                        });
+                })
+                    ->orwhere(function ($query) {
+                        $query->where('admin_status', '7')
+                            ->where(function ($query) {
+                                $query->where('term', 'x1_cash')
+                                    ->orwhere('term', 'x1_cheque')
+                                    ->orwhere('term', 'x1_ba');
+                            });
+                    });
+            })
+            ->orderby('updated_at','desc')
+            ->paginate(10);
 			// reformat to fit frontend structure 
 			foreach ($bookings as $booking) {
 				// set timeout 
diff --git a/resources/assets/js/pages/admin/home.vue b/resources/assets/js/pages/admin/home.vue
index f1edc3d7..8c5e0ef2 100644
--- a/resources/assets/js/pages/admin/home.vue
+++ b/resources/assets/js/pages/admin/home.vue
@@ -16,7 +16,10 @@
           <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
         </el-table-column>
         <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
-        <el-table-column label="Marking" width="120" prop="marking" />
+        <el-table-column label="Ref No." width="100" >
+          <el-button slot-scope="scope" type="text" style="font-size: 12px;" @click="(event) => { userBookings(scope.row.user_id) }"> {{ scope.row.marking }} </el-button>
+        </el-table-column>
+        <!--<el-table-column label="Marking" width="120" prop="marking" />-->
         <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandlerTerm" label="Term" prop="term" width="100"/>
         <el-table-column label="Rate" width="74" prop="rate" />
         <el-table-column label="Amount" prop="amount" justify="center" width="110" sortable />
@@ -66,7 +69,9 @@
             <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
           </el-table-column>
           <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
-          <el-table-column label="Marking" width="120" prop="marking" />
+          <el-table-column label="Ref No." width="100" >
+            <el-button slot-scope="scope" type="text" style="font-size: 12px;" @click="(event) => { userBookings(scope.row.user_id) }"> {{ scope.row.marking }} </el-button>
+          </el-table-column>
           <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandlerTerm" label="Term" prop="term" width="100"/> -->
           <el-table-column label="Rate" width="74" prop="rate" />
           <el-table-column label="Amount" prop="amount" justify="center" width="110" sortable/>
@@ -229,6 +234,12 @@ export default {
       const term = row.term;
       return value.toLowerCase() === term.substring(0,2);
     },
+    userBookings(user_id){
+        this.$router.push({
+            name: 'admin.userBookings',
+            params: {userId: user_id }
+        })
+    },
     BookingStatus (status, booking_id, term) {
       // TODO : Get booking status from server
       this.status = status
diff --git a/resources/assets/js/pages/admin/userBookings.vue b/resources/assets/js/pages/admin/userBookings.vue
new file mode 100644
index 00000000..021b4085
--- /dev/null
+++ b/resources/assets/js/pages/admin/userBookings.vue
@@ -0,0 +1,294 @@
+<template>
+<div>
+  <div align="right">
+<el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking(); RefreshBookingTableComplete()">Refresh</el-button>
+</div>
+
+  <!-- Booking Table -->
+
+<el-tabs type="border-card" class="table-switch">
+  <el-tab-pane label="Booking Table">
+  <el-row :gutter="20">
+    <div>
+      <el-table :data="bookingTable" :default-sort = "{prop: 'date', order: 'descending'}">
+        <el-table-column label="Ref No." width="100" >
+          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
+          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
+        </el-table-column>
+        <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
+        <el-table-column label="Marking" width="120" prop="marking" />
+        <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandlerTerm" label="Term" prop="term" width="100"/>
+        <el-table-column label="Rate" width="74" prop="rate" />
+        <el-table-column label="Amount" prop="amount" justify="center" width="110" sortable />
+        <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandlerTranferAmount" label="Transfer Amount"
+                         prop="transfer_amount" width="180" sortable/>
+        <!-- <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', value: 1}, {text: '2', value: 2}, {text: '3', value: 3}, {text: '4', value: 4}, {text: '5', value: 5}, {text: '6', value: 6}]" :filter-method="filterHandlerStatus" prop="status" label="Status">
+          <template slot-scope="scope">
+            <el-popover trigger="click" placement="top">
+              <p>{{ scope.row.status_desc }}</p>
+              <div slot="reference" class="name-wrapper">
+                <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
+              </div>
+            </el-popover>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
+        <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
+        <el-table-column label="" width="180">
+          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> 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 align="right">
+      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
+        Previous
+      </el-button>
+      <span>Page {{pagination.current_page}} of {{pagination.last_page}}</span>
+      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.next_page_url)" :disabled="!pagination.next_page_url">
+        Next
+      </el-button>
+    </div>
+      </div>
+    </el-row><br><br></el-tab-pane>
+
+  <el-tab-pane label="Completed">
+  <el-row :gutter="20">
+      <div>
+        <el-table :data="bookingTableComplete">
+          <el-table-column label="Ref No." width="100" >
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
+          </el-table-column>
+          <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
+          <el-table-column label="Marking" width="120" prop="marking" />
+          <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandlerTerm" label="Term" prop="term" width="100"/> -->
+          <el-table-column label="Rate" width="74" prop="rate" />
+          <el-table-column label="Amount" prop="amount" justify="center" width="110" sortable/>
+          <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandlerTranferAmount" label="Transfer Amount"
+                           prop="transfer_amount" width="180" sortable/>
+          <!-- <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" prop="status_desc">
+            <template slot-scope="scope">
+              <el-popover trigger="click" placement="top">
+                <p>{{ scope.row.status_desc }}</p>
+                <div slot="reference" class="name-wrapper">
+                  <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
+          <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
+          <!-- <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterHandlerStatus"
+                           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> -->
+            <el-table-column label="" width="180">
+          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> 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 align="right">
+      <el-button type="primary" size="mini" @click="fetchCompletePaginateBooking(completePagination.prev_page_url)" :disabled="!completePagination.prev_page_url">
+        Previous
+      </el-button>
+      <span>Page {{completePagination.current_page}} of {{completePagination.last_page}}</span>
+      <el-button type="primary" size="mini" @click="fetchCompletePaginateBooking(completePagination.next_page_url)" :disabled="!completePagination.next_page_url">
+        Next
+      </el-button>
+    </div>
+      </div>
+    </el-row><br><br>
+  </el-tab-pane>
+</el-tabs>
+
+
+
+
+
+    <!-- Booking Table-end -->
+  </div>
+</template>
+<style type="text/css">
+  .el-table__column-filter-trigger i {
+    font-size: 18px;
+    font-weight: 900;
+    vertical-align: sub;
+  }
+</style>
+<script>
+import axios from 'axios'
+
+export default {
+  middleware: 'admin',
+  data () {
+    return {
+      status: null,
+      bookingTable: [],
+      bookingTableComplete: [],
+      url: 'api/admin/booking',
+      completeBookingurl : "api/admin-complete-booking",
+      pagination: [],
+      completePagination: [],
+
+      loading_btn: false,
+    }
+  },
+  mounted () {
+    this.getBooking();
+    this.getBookingTableComplete();
+  },
+  methods: {
+    getBooking(){
+      let $this = this
+      axios.get("/"+this.url+"/"+ this.$route.params.userId).then(response => {
+        this.bookingTable = response.data.data;
+        $this.makePagination(response.data);
+      })
+    },
+    getBookingTableComplete(){
+      let $this = this
+      axios.get("/"+this.completeBookingurl + "/" + this.$route.params.userId).then(response => {
+        this.bookingTableComplete = response.data.data
+        $this.makeCompletePagination(response.data)
+      })
+    },
+    RefreshBooking() {
+      let $this = this
+      this.loading_btn = true
+      axios.get(this.url).then(response => {
+        this.loading_btn = false;
+        this.bookingTable = response.data.data
+        this.$message({
+          showClose: true,
+          message: 'Booking is updated',
+          type: 'success',
+          duration: 5000
+        })
+      })
+    },
+    RefreshBookingTableComplete() {
+      let $this = this
+      this.loading_btn = true
+      axios.get(this.completeBookingurl).then(response => {
+        this.loading_btn = false;
+        this.bookingTableComplete = response.data.data
+      })
+    },
+    makePagination(data){
+      let pagination ={
+        current_page: data.current_page,
+        last_page: data.last_page,
+        next_page_url: data.next_page_url,
+        prev_page_url: data.prev_page_url
+      }
+      this.pagination = pagination
+    },
+     makeCompletePagination(data){
+      let pagination ={
+        current_page: data.current_page,
+        last_page: data.last_page,
+        next_page_url: data.next_page_url,
+        prev_page_url: data.prev_page_url
+      }
+      this.completePagination = pagination
+    },
+    fetchPaginateBooking(url) {
+      this.url = url
+      this.getBooking()
+
+    },
+    fetchCompletePaginateBooking(url) {
+      this.completeBookingurl = url
+      this.getBookingTableComplete()
+     },
+    filterHandlerStatus (value, row, column) {
+      const status = row.admin_status;
+      return value === status;
+      // if(value ==="Success")
+      //   return status === "(5/5)" || status === "(7/7)";
+      // else
+      //   return !(status === "(5/5)" || status === "(7/7)");
+    },
+    filterHandlerTranferAmount (value, row, column) {
+      // Pending...lol
+      return false;
+    },
+    filterHandlerTerm(value, row, column){
+      const term = row.term;
+      return value.toLowerCase() === term.substring(0,2);
+    },
+    BookingStatus (status, booking_id, term) {
+      // TODO : Get booking status from server
+      this.status = status
+      switch (this.status) {
+        case 1:
+          this.$router.push({
+            name: 'booking.admin.booking.detail',
+            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:
+          if(term == 'x2_cash' || term == 'x2_cheque' || term == 'x2_ba'){
+            this.$router.push({
+              name: 'booking.admin.x2complete',
+              params: {id: booking_id }
+            })
+            break
+          }
+          this.$router.push({
+            name: 'booking.admin.invoice',
+            params: {id: booking_id }
+          })
+          break
+
+        case 7:
+          this.$router.push({
+            name: 'booking.admin.complete',
+            params: {id: booking_id }
+          })
+          break
+        default:
+          break
+      }
+    }
+  }
+
+}
+</script>
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index a6450404..1b4bb38f 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -38,9 +38,11 @@ const UploadInvoice = () => import('~/pages/admin/booking/uploadInvoice').then(m
 const adminCompleted = () => import('~/pages/admin/booking/completed').then(m => m.default || m)
 const adminX2Completed = () => import('~/pages/admin/booking/x2Completed').then(m => m.default || m)
 
+
 // Admin pages
 const AdminHome = () => import('~/pages/admin/home').then(m => m.default || m)
 const AdminCompleteOrder = () => import('~/pages/admin/complete-orders').then(m => m.default || m)
+const adminUserBookings = () => import('~/pages/admin/userBookings').then(m => m.default || m)
 const TransactionHistory = () => import('~/pages/admin/transaction-history').then(m => m.default || m)
 const UploadSupplierBankSlip = () => import('~/pages/admin/upload-supplier-bank-slip').then(m => m.default || m)
 
@@ -91,6 +93,7 @@ export default [
   // Admin pages
   { path: '/admin', name: 'admin.home', component: AdminHome },
   { path: '/admin/complete-orders', name: 'admin.complete', component: AdminCompleteOrder },
+  { path: '/admin/:userId/userBookings', name: 'admin.userBookings', component: adminUserBookings },
   { path: '/admin/transaction-history', name: 'admin.transaction-history', component: TransactionHistory },
   { path: '/admin/upload-supplier-bank-slip', name: 'admin.upload-supplier-bank-slip', component: UploadSupplierBankSlip },
   { path: '*', name: 'notfound', component: NotFound }
diff --git a/routes/api.php b/routes/api.php
index 2cf5315d..9a2d2a19 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -69,8 +69,8 @@ Route::group(['middleware' => 'guest:api'], function () {
 });
 
 Route::group(['middleware' => ['role:admin']], function() {
-	Route::get('admin/booking/', 'BookingController@adminIndex');
-	Route::get('admin-complete-booking', 'BookingController@adminBookComplete');
+	Route::get('admin/booking/{userId?}', 'BookingController@adminIndex');
+	Route::get('admin-complete-booking/{userId?}', 'BookingController@adminBookComplete');
 	Route::get('admin/booking/{id}', 'BookingController@adminShow');
 	Route::post('update-rate', 'RateController@store');
 	Route::put('update-rate/{rate}', 'RateController@update');