diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index a18e9cf6..f3f2bc88 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -77,7 +77,63 @@ class BookingController extends Controller
        
         return $bookings;
 	}
-	
+    
+    public function bookingcompleted(){
+		$user = Auth::user();
+        $bookings = Booking::select('user_id', 'id', 'created_at', 'status', 'rate', 'term', 'amount', 'bia', 'verification_status')
+                                    ->where('user_id', $user->id)
+                                    ->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 $bookingcompleted;
+	}
 	public function adminIndex(){
 		$user = Auth::user(); 
 		$bookings = Booking::select('user_id', 'id', 'created_at', 'admin_status', 'rate', 'term', 'amount', 'bia', 'verification_status')
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 96549344..f3800a0e 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -278,8 +278,50 @@
 <el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button></div>
 <!-- Booking Table -->
 
-<el-tabs type="border-card">
-  <el-tab-pane label="Booking Table"></el-tab-pane>
+<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">
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> {{ scope.row.id }}</el-button>
+          </el-table-column>
+          <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
+          <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
+          <el-table-column label="Rate" width="74" prop="rate" />
+          <el-table-column label="Amount" prop="amount" justify="center" width="110" />
+          <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount"
+                           prop="transfer_amount" width="170" />
+          <!-- <el-table-column label="ETA" sortable width="100"/> -->
+          <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
+        </el-table-column> -->
+          <!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
+          <el-table-column label="Status" width="106">
+            <template slot-scope="scope">
+              <el-popover trigger="click" placement="top">
+                <p>{{ scope.row.status_desc }}</p>
+                <div slot="reference" class="name-wrapper">
+                  <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
+          <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
+          <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
+                           label="" width="180" filter-placement="bottom-end">
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> View Status </el-button>
+            <!-- <template slot-scope="scope">
+              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
+              <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
+            </template> -->
+          </el-table-column>
+        </el-table>
+      </div>
+    </el-row><br><br></el-tab-pane>
+      
+  <el-tab-pane label="Booking Completed Table">
   <el-row :gutter="20">
       <div>
         <el-table :data="bookingTable">
@@ -320,12 +362,10 @@
         </el-table>
       </div>
     </el-row><br><br>
-  
-</el-tabs>
+</el-tab-pane></el-tabs>
 
 
-    
-    <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>
@@ -334,6 +374,8 @@
         Next
       </el-button>
     </div>
+
+  
     <!-- Booking Table-end -->
 
   </el-main>
diff --git a/routes/api.php b/routes/api.php
index a2b2bda0..c0ebeae2 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -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::post('booking', 'BookingController@bookingcompleted'); 
+
 	Route::get('user', 'UserController@show');
 	Route::patch('settings/profile', 'Settings\ProfileController@update');
 	Route::patch('settings/password', 'Settings\PasswordController@update');