diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index 6f8110c2..efd7dc3c 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -24,7 +24,68 @@ class BookingController extends Controller
     public function index(){
 		$user = Auth::user();
         $bookings = Booking::select('user_id', 'id', 'created_at', 'status', 'rate', 'term', 'amount', 'bia', 'verification_status')
-                                    ->where('user_id', $user->id)
+                                    ->where('status', '<', '7') 
+                                    ->orderby('updated_at','desc')
+                                    ->paginate(10);
+
+        // 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; 
+            
+            $booking->track_status = "(". $booking->status ."/7)";
+            switch ($booking->status) {
+                case 1:
+                    $status_desc = "Order in progress"; 
+                    break;
+                case 2:
+                    $status_desc = "Waiting for payment";  
+                    break;    
+                case 3:
+                    $status_desc = "Waiting verification";    
+                    break;  
+                case 4:
+                    $status_desc = "Processing transfer"; 
+                    break;
+                case 5:
+                    $status_desc = "Transfer Complete, please upload your PO"; 
+                    break;
+                case 6:
+                    $status_desc = "Processing invoice"; 
+                    break;
+                case 7:
+                    $status_desc = "Order Completed"; 
+                    break;
+                default:
+                    $status_desc = "";
+            }
+            $booking->status_desc = $status_desc;
+            $booking->marking = $booking->user->marking;
+        }
+       
+        return $bookings;
+	}
+    
+
+
+ 
+    
+    public function userComplete(){
+		$user = Auth::user();
+        $bookings = Booking::select('user_id', 'id', 'created_at', 'status', 'rate', 'term', 'amount', 'bia', 'verification_status')
+                                    ->where('status', '=', '7')
                                     ->orderby('updated_at','desc')
                                     ->paginate(10);
 
@@ -155,19 +216,76 @@ class BookingController extends Controller
 			return $bookings;
 	}
 
+    public function adminBookComplete(){
+		$user = Auth::user();
+        $bookings = Booking::select('user_id', 'id', 'created_at', 'status', 'rate', 'term', 'amount', 'bia', 'verification_status')
+                                    ->where('status', '=', '7')
+                                    ->orderby('updated_at','desc')
+                                    ->paginate(10);
+
+        // 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; 
+            
+            $booking->track_status = "(". $booking->status ."/7)";
+            switch ($booking->status) {
+                case 1:
+                    $status_desc = "Order in progress"; 
+                    break;
+                case 2:
+                    $status_desc = "Waiting for payment";  
+                    break;    
+                case 3:
+                    $status_desc = "Waiting verification";    
+                    break;  
+                case 4:
+                    $status_desc = "Processing transfer"; 
+                    break;
+                case 5:
+                    $status_desc = "Transfer Complete, please upload your PO"; 
+                    break;
+                case 6:
+                    $status_desc = "Processing invoice"; 
+                    break;
+                case 7:
+                    $status_desc = "Order Completed"; 
+                    break;
+                default:
+                    $status_desc = "";
+            }
+            $booking->status_desc = $status_desc;
+            $booking->marking = $booking->user->marking;
+        }
+       
+        return $bookings;
+	}
     public function show($id)
     {   
         $booking = Booking::where('user_id',Auth::user()->id)->where('id', $id)->first();
-       
-        $user_bankslip = $booking->userBankSlip()->first();
-        $china_bankslip = $booking->chinaBankSlip()->get();
-        $po = $booking->purchaseOrder()->first();
-        $invoice = $booking->invoice()->first();
+
 
 		if($booking){
 
             $date1 = new DateTime($booking->created_at);
             
+            $user_bankslip = $booking->userBankSlip()->first();
+            $china_bankslip = $booking->chinaBankSlip()->get();
+            $po = $booking->purchaseOrder()->first();
+            $invoice = $booking->invoice()->first();
+
             if ($user_bankslip){
                 $booking->user_bankslip_path = Storage::url($user_bankslip->bankslip_path);
                 $booking->reject_reason = $user_bankslip->reject_reason;
diff --git a/resources/assets/js/pages/admin/home.vue b/resources/assets/js/pages/admin/home.vue
index aa21c45e..e5aae7fe 100644
--- a/resources/assets/js/pages/admin/home.vue
+++ b/resources/assets/js/pages/admin/home.vue
@@ -5,6 +5,9 @@
 </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">
@@ -41,11 +44,9 @@
               <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>
-  <div align="right">
+          </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>
@@ -54,7 +55,67 @@
         Next
       </el-button>
     </div>
-  <!-- Booking Table-end -->
+      </div>
+    </el-row><br><br></el-tab-pane>
+      
+  <el-tab-pane label="Booking Completed Table">
+  <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.status, scope.row.id) }"> {{ scope.row.id }}</el-button>
+          </el-table-column>
+          <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
+          <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
+          <el-table-column label="Rate" width="74" prop="rate" />
+          <el-table-column label="Amount" prop="amount" justify="center" width="110" />
+          <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount"
+                           prop="transfer_amount" width="170" />
+          <!-- <el-table-column label="ETA" sortable width="100"/> -->
+          <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
+        </el-table-column> -->
+          <!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
+          <el-table-column label="Status" width="106">
+            <template slot-scope="scope">
+              <el-popover trigger="click" placement="top">
+                <p>{{ scope.row.status_desc }}</p>
+                <div slot="reference" class="name-wrapper">
+                  <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
+          <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
+          <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
+                           label="" width="180" filter-placement="bottom-end">
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> View Status </el-button>
+            <!-- <template slot-scope="scope">
+              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
+              <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
+            </template> -->
+          </el-table-column>
+        </el-table>
+        <div 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">
@@ -73,20 +134,32 @@ export default {
     return {
       status: null,
       bookingTable: [],
+      bookingTableComplete: [],
       url: 'api/admin/booking',
-      pagination: {prev_page_url: null},
+      completeBookingurl : "api/admin-complete-booking",
+      pagination: [],
+      completePagination: [],
+
       loading_btn: false,
     }
   },
   mounted () {
-    this.getBooking()
+    this.getBooking();
+    this.getBookingTableComplete();
   },
   methods: {
     getBooking(){
       let $this = this
       axios.get(this.url).then(response => {
         this.bookingTable = response.data.data;
-        $this.makePagination(this.bookingTable);
+        $this.makePagination(response.data);
+      })
+    },
+    getBookingTableComplete(){
+      let $this = this
+      axios.get(this.completeBookingurl).then(response => {
+        this.bookingTableComplete = response.data.data
+        $this.makeCompletePagination(response.data)
       })
     },
     RefreshBooking() {
@@ -111,11 +184,25 @@ export default {
         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.track_status;
       if(value ==="Success")
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index cb35b5a4..d635fd68 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -277,7 +277,10 @@
     <div align="right">
 <el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button></div>
 <!-- Booking Table -->
-    <el-row :gutter="20">
+
+<el-tabs type="border-card" class="table-switch">
+  <el-tab-pane label="Booking Table">
+  <el-row :gutter="20">
       <div>
         <el-table :data="bookingTable">
           <el-table-column label="Ref No." width="100">
@@ -314,10 +317,9 @@
               <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
             </template> -->
           </el-table-column>
+          
         </el-table>
-      </div>
-    </el-row><br><br>
-    <div align="right">
+        <div align="right">
       <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
         Previous
       </el-button>
@@ -326,6 +328,63 @@
         Next
       </el-button>
     </div>
+      </div>
+    </el-row><br><br></el-tab-pane>
+      
+  <el-tab-pane label="Booking Completed Table">
+  <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.status, scope.row.id) }"> {{ scope.row.id }}</el-button>
+          </el-table-column>
+          <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
+          <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
+          <el-table-column label="Rate" width="74" prop="rate" />
+          <el-table-column label="Amount" prop="amount" justify="center" width="110" />
+          <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount"
+                           prop="transfer_amount" width="170" />
+          <!-- <el-table-column label="ETA" sortable width="100"/> -->
+          <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
+        </el-table-column> -->
+          <!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
+          <el-table-column label="Status" width="106">
+            <template slot-scope="scope">
+              <el-popover trigger="click" placement="top">
+                <p>{{ scope.row.status_desc }}</p>
+                <div slot="reference" class="name-wrapper">
+                  <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
+          <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
+          <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
+                           label="" width="180" filter-placement="bottom-end">
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> View Status </el-button>
+            <!-- <template slot-scope="scope">
+              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
+              <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
+            </template> -->
+          </el-table-column>
+          
+        </el-table>
+        <div 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 -->
 
   </el-main>
@@ -438,10 +497,12 @@ export default {
       dialogFormVisible: false,
       dialogFormVisible1: false,
       formLabelWidth: '0px',
-      bookingTable: [
-      ],
+      bookingTable: [],
+      bookingTableComplete: [],
       url: 'api/booking',
+      completeBookingurl : "api/user-complete-booking",
       pagination: [],
+      completePagination: [],
       bookingConfirmTable: {
         date: 'undefined',
         marking: 'undefined',
@@ -459,6 +520,7 @@ export default {
     this.getBooking();
     this.initBooking();
     this.getRate();
+    this.getCompleteBooking();
   },
   methods: {
     getBooking(){
@@ -468,6 +530,13 @@ export default {
         $this.makePagination(response.data)
       })
     },
+    getCompleteBooking(){
+      let $this = this
+      axios.get(this.completeBookingurl).then(response => {
+        this.bookingTableComplete = response.data.data
+        $this.makeCompletePagination(response.data)
+      })
+    },
     getRate() {
       let $this = this
       axios.get('api/rate').then(response => {
@@ -517,10 +586,27 @@ export default {
       }
       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.getCompleteBooking()
+     },
+     
+    
     // TODO fetch booking data on load
     formatter (row, column) {
       return row.address
diff --git a/routes/api.php b/routes/api.php
index 170d63ec..2be2d238 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -32,7 +32,7 @@ Route::group(['middleware' => 'auth:api'], function () {
 	Route::get('booking/{book_id}', 'BookingController@show');
 	Route::put('booking/{book_id}', 'BookingController@update');
 	Route::delete('booking/{book_id}', 'BookingController@delete');
-	Route::post('booking', 'BookingController@store');
+	Route::post('booking/', 'BookingController@store');
 	Route::post('booking/calculation', 'BookingController@calculation');
 	Route::post('booking/{book_id}/cancel', 'BookingController@cancel');
 	Route::post('booking/{id}/upload-user-bankslip', 'BookingController@uploadbankslip');
@@ -42,7 +42,9 @@ Route::group(['middleware' => 'auth:api'], function () {
 	Route::post('booking/{book_id}/reject-bank-slip','BookingController@rejectBankSlip');
 	Route::post('booking/{book_id}/approve-bank-slip','BookingController@approveBankSlip');
     Route::post('booking/{book_id}/cancel', 'BookingController@cancel');
-   	Route::get('booking', 'BookingController@index'); 
+	Route::get('booking/', 'BookingController@index'); 
+	Route::get('user-complete-booking', 'BookingController@userComplete');
+
 	Route::get('user', 'UserController@show');
 	Route::patch('settings/profile', 'Settings\ProfileController@update');
 	Route::patch('settings/password', 'Settings\PasswordController@update');
@@ -68,6 +70,7 @@ 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/{id}', 'BookingController@adminShow');
 	Route::post('update-rate', 'RateController@store');
 	Route::put('update-rate/{rate}', 'RateController@update');