diff --git a/Dockerfile b/Dockerfile
index 5eb8b990..9efcd1c2 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -9,5 +9,5 @@ RUN composer install
 
 COPY wait.sh /usr/local/bin/wait.sh
 RUN chmod +x /usr/local/bin/wait.sh
-CMD /usr/local/bin/wait.sh && composer dumpautoload && php artisan migrate && php artisan db:seed && php artisan serve --host=0.0.0.0 --port=8000
+CMD /usr/local/bin/wait.sh && composer dumpautoload && php artisan storage:link && php artisan migrate && php artisan db:seed && php artisan serve --host=0.0.0.0 --port=8000
 EXPOSE 8000
diff --git a/app/ChinaBankSlip.php b/app/ChinaBankSlip.php
index c607ec34..d7354956 100644
--- a/app/ChinaBankSlip.php
+++ b/app/ChinaBankSlip.php
@@ -6,5 +6,5 @@ use Illuminate\Database\Eloquent\Model;
 
 class ChinaBankSlip extends Model
 {
-    protected $fillable = ['actual_transfer_amount','date','details','china_bank_slips'];
+    protected $fillable = ['actual_transfer_amount','date','details','china_bank_slip_path'];
 }
diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index dade691e..f190aefb 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -29,8 +29,7 @@ class BookingController extends Controller
             // 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'));
+            $difference_in_seconds = ($date1->format('U') + 600) - ($date2->format('U'));
             $booking->timeout = $difference_in_seconds;  
 
             // TODO : you can make it better
@@ -146,7 +145,8 @@ class BookingController extends Controller
 	public function adminShow($id)
     {   
 		$booking = Booking::where('id', $id)->first();
-		return $booking->userBankSlip()->get(); 
+		$user_bankslip_path = $booking->userBankSlip()->first()->bankslip_path;
+		$booking->user_bankslip_path = Storage::url($user_bankslip_path);
 
 		if($booking){
         $date1 = new DateTime($booking->created_at);
@@ -167,7 +167,12 @@ class BookingController extends Controller
         $rates = Rate::orderby('updated_at','desc')->first();
         $term = $request->input('term');
         $amount = $request->input("amount");    // in RMB
-        $creditLimit = SettingCredit::orderby('updated_at','desc')->first();
+		$creditLimit = SettingCredit::orderby('updated_at','desc')->first();
+
+		if (!$creditLimit){
+			return response()->json("Credit limit not set, please contact admin", 405);
+		}
+
         if($amount > $creditLimit->rmb_credit_limit){
             return response()->json("Exceed credit limit, need approved from admin", 401);
         }
@@ -284,7 +289,7 @@ class BookingController extends Controller
  
         return response()->json(['book_id'=>$book_id],200);
     }
-
+    //upload
     public function uploadbankslip(Request $request, $id)
     {
         $booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first();
@@ -304,7 +309,16 @@ class BookingController extends Controller
             return response()->json(['message'=>'Incorrect format'],200);
         }
 
-        if($file = $request->file('file'))
+        $validator = Validator::make($request->all(), [
+            'file'   => 'max:3072'
+        ]);
+
+        if($validator->fails())
+        {
+            return response()->json(['message'=>'Image too large, upload files up to 3 MB'], 400);
+        }
+
+        if(!$bankslip_file = $request->file('file'))
         {
             $bankslip_file = $request->file('file');
             $filename = $bankslip_file->getClientOriginalName();
@@ -327,14 +341,15 @@ class BookingController extends Controller
         $input['file'] = $filename;
 
         $unique_name = 'bank_slip_' . md5($filename. time()); // probably not a good idea 
-        $unique_image_path = $unique_name. '.' .$ext;
-        Storage::putFileAs(
+		$unique_image_path = $unique_name. '.' .$ext;
+
+		$upload_path = Storage::disk('public')->putFileAs(
             'user_bankslip', $bankslip_file, $unique_image_path
-        ); 
+		); 
 
         $user_bankslip = new UserBankSlip;
         $user_bankslip->booking_id = $booking->id;
-        $user_bankslip->bankslip_path =  $unique_image_path;
+        $user_bankslip->bankslip_path =  $upload_path;
         $user_bankslip->transfer_amount = $request->input('transfer_amount');
         $user_bankslip->save();
 
@@ -348,7 +363,13 @@ class BookingController extends Controller
 
         if(!$user_bankslip){
             return response()->json(["message"=> "not found"],400);
-        }
+		}
+		
+		// update booking status 
+		$booking->status = 3;
+		$booking->admin_status = 2; 
+		$booking->save();
+
         $user_bankslip->transfer_amount = $request->input('transfer_amount');
         $user_bankslip->save();
         return response()->json(["message"=> "Success"],200);
@@ -373,6 +394,15 @@ class BookingController extends Controller
                 return response()->json(['message'=>'Incorrect format'],200);
             }
 
+            $validator = Validator::make($request->all(), [
+                'file'   => 'max:3072'
+            ]);
+
+            if($validator->fails())
+            {
+                return response()->json(['message'=>'Image too large, upload files up to 3 MB'], 400);
+            }
+
             if(!$user_input_file = $request->file('file'))
             {
                 return response()->json(['message' => 'No file detected'], 400);
@@ -385,12 +415,12 @@ class BookingController extends Controller
         $input['file'] = $filename;
         $unique_name = 'purchase_order_' . md5($filename. time());
         $unique_image_path = $unique_name. '.' .$ext;
-        Storage::putFileAs(
-            'purchase_order',/*folder name*/ $user_input_file, $unique_image_path
+        $upload_path = Storage::disk('public')->putFileAs(
+            'purchase_order',/*folder name*/ $user_input_file, $unique_image_path, 'public'
         );
 
         $user_po = new PurchaseOrder;
-        $user_po->image_path = $unique_image_path;
+        $user_po->image_path = $upload_path;
         $user_po->book_id = $booking->id;
         $user_po->save();
 
@@ -489,14 +519,16 @@ class BookingController extends Controller
 
     public function approveBankSlip(Request $request, $book_id)
     {
-        if (!$booking = Booking::where('user_id',Auth::user()->id)->where('id',$book_id)->first())
+        $booking = Booking::where('id',$book_id)->first();
+
+        if (!$booking)
         {
-            return response()->json(['message'=>'Access denied'], 200);
+            return response()->json(['message'=>'Booking not found'], 400);
         }
 
         if(!$userBankSlip = UserBankSlip::where('booking_id',$booking->id)->first())
         {
-            return response()->json(['message'=>'Access denied'], 200);   
+            return response()->json(['message'=>'User bankslip not found'], 400);   
         }
 
         // Rejected bankslip cannot be approve again
@@ -508,12 +540,19 @@ class BookingController extends Controller
         $userBankSlip->is_approve = 1;
         $userBankSlip->estimated_arrival_time = $request->input('estimated_arrival_time');
         $userBankSlip->save();
+
+        // update booking status 
+		$booking->status = 4;
+		$booking->admin_status = 3; 
+        $booking->save();
+        
         return response()->json(['message'=>'Success'],200);
     }
 
     public function rejectBankSlip(Request $request, $book_id)
     {
-        if (!$booking = Booking::where('user_id',Auth::user()->id)->where('id',$book_id)->first())
+        $booking = Booking::where('id',$book_id)->first();
+        if (!$booking)
         {
             return response()->json(['message'=>'Access denied'], 200);
         }
@@ -533,9 +572,15 @@ class BookingController extends Controller
         $userBankSlip->reject_reason = $request->reject_reason;
         $userBankSlip->save();
 
+        // TODO : reject user bankinslip 
+        // update booking status 
+		$booking->status = 0;
+		$booking->admin_status = 0; 
+        $booking->save();
+
         return response()->json(['message'=>'Success'],200);
     }
-
+    //upload
     public function uploadInvoice(Request $request, $id)
     {
         $booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first();
@@ -555,6 +600,15 @@ class BookingController extends Controller
                 return response()->json(['message'=>'Incorrect format'],200);
             }
 
+            $validator = Validator::make($request->all(), [
+                'invoice_path'   => 'max:3072'
+            ]);
+
+            if($validator->fails())
+            {
+                return response()->json(['message'=>'Image too large, upload files up to 3 MB'], 400);
+            }
+
             if(!$input_file = $request->file('invoice_path'))
             {
                 return response()->json(['message'=>'No file detected'], 400);
@@ -567,12 +621,12 @@ class BookingController extends Controller
         $input['invoice_path'] = $filename;
         $unique_name = 'invoice' . md5($filename. time());
         $unique_file_url = $unique_name. '.' .$ext;
-        Storage::putFileAs(
-            'invoice',/*folder name*/ $input_file, $unique_file_url
+        $upload_path = Storage::disk('public')->putFileAs(
+            'invoice',/*folder name*/ $input_file, $unique_file_url, 'public'
         );
         
         $invoice = new Invoice;
-        $invoice->invoice_path = $unique_file_url;
+        $invoice->invoice_path = $upload_path;
         $invoice->amount = $request->input('amount');
         $invoice->booking_id = $booking->id;
         $invoice->save();
diff --git a/app/Http/Controllers/ChinaBankSlipController.php b/app/Http/Controllers/ChinaBankSlipController.php
index 9a2048d6..7e860d62 100644
--- a/app/Http/Controllers/ChinaBankSlipController.php
+++ b/app/Http/Controllers/ChinaBankSlipController.php
@@ -4,6 +4,8 @@ namespace App\Http\Controllers;
 
 use App\ChinaBankSlip;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Storage;
+use Validator;
 
 class ChinaBankSlipController extends Controller
 {
@@ -45,6 +47,16 @@ class ChinaBankSlipController extends Controller
             $extension = $request->file('china_bank_slips')->getClientOriginalExtension();
             // Filename to store
             $fileNameToStore= $filename.'_'.time().'.'.$extension;
+
+            // File size checking
+            $validator = Validator::make($request->all(), [
+                'china_bank_slips'   => 'max:3072'
+            ]);
+            
+            if($validator->fails())
+            {
+                return response()->json(['message'=>'Image too large, upload files up to 3 MB'], 400);
+            }
             // Upload Image
             $path = $request->file('china_bank_slips')->storeAs('public/bankslip', $fileNameToStore);
         } else {
@@ -55,8 +67,9 @@ class ChinaBankSlipController extends Controller
         $post->actual_transfer_amount = $request->input('actual_transfer_amount');
         $post->date = $request->input('date');
         $post->details = $request->input('details');
-        $post->china_bank_slips = $fileNameToStore;
-        $post->save();;
+        $post->china_bank_slip_path = $fileNameToStore;
+        $post->save();
+        return response()->json(['message'=>$post], 200);
     }
 
 
diff --git a/app/Http/Controllers/SettingSupplierController.php b/app/Http/Controllers/SettingSupplierController.php
index 96f0a861..6b1f8f12 100644
--- a/app/Http/Controllers/SettingSupplierController.php
+++ b/app/Http/Controllers/SettingSupplierController.php
@@ -9,7 +9,13 @@ class SettingSupplierController extends Controller
 {
     public function index()
     {
-        return SettingSupplier::all();
+        $suppliers = SettingSupplier::all();
+
+        foreach ($suppliers as $supplier) {
+            $supplier->value = $supplier->company_name;
+            $supplier->label = $supplier->company_name;
+        }
+        return $suppliers;
     }
 
     public function show(SettingSupplier $supplier)
diff --git a/database/migrations/2018_06_26_141337_rename_bankslip_url_to_chinabanksli_path_in_china_bank_slip_table.php b/database/migrations/2018_06_26_141337_rename_bankslip_url_to_chinabanksli_path_in_china_bank_slip_table.php
new file mode 100644
index 00000000..9c23bfc8
--- /dev/null
+++ b/database/migrations/2018_06_26_141337_rename_bankslip_url_to_chinabanksli_path_in_china_bank_slip_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class RenameBankslipUrlToChinabanksliPathInChinaBankSlipTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('china_bank_slips', function($table)
+        {
+            $table->renameColumn('bankslip_url', 'china_bank_slip_path');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}
diff --git a/database/seeds/DatabaseSeeder.php b/database/seeds/DatabaseSeeder.php
index bcf98f78..0834c81d 100644
--- a/database/seeds/DatabaseSeeder.php
+++ b/database/seeds/DatabaseSeeder.php
@@ -1,6 +1,7 @@
 <?php
 
 use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;
 
 class DatabaseSeeder extends Seeder
 {
@@ -16,6 +17,6 @@ class DatabaseSeeder extends Seeder
         $this->call(UserRoleSeeder::class);
         $this->call(RateTableSeeder::class);
         $this->call(BookTableSeeder::class);     
-        $this->call(SettingCreditSeeder::class);
+        $this->call(CreditTableSeeder::class);  
     }
 }
diff --git a/resources/assets/js/pages/admin/booking/supplierBooking.vue b/resources/assets/js/pages/admin/booking/supplierBooking.vue
index 37196cb3..095440a9 100644
--- a/resources/assets/js/pages/admin/booking/supplierBooking.vue
+++ b/resources/assets/js/pages/admin/booking/supplierBooking.vue
@@ -1,13 +1,13 @@
 <template>
   <el-main>
-    <progress-track v-model="status"/>
+    <progress-track v-model="status" />
 
     <div align="center">
-      <h4 style="margin-top:5%;">Transfer In Progress</h4>
+      <h4 style="margin-top:5%;"></h4>
       <br>
-      <h5> ETA :  3 days 14 Hours </h5>
+      <h5> Supplier Booking </h5>
       <br>
-      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+      <!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
     </div>
     <br>
     <el-row justify="center" align="center">
@@ -16,7 +16,163 @@
           <span>Order Details</span>
           <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
         </div>
-        <el-row :gutter="12">
+        <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" />
@@ -29,7 +185,7 @@
               <el-table-column prop="data2" align="left" width="200" />
             </el-table>
           </el-col>
-        </el-row>
+        </el-row> -->
       </el-card>
     </el-row>
     <br>
@@ -37,13 +193,47 @@
     <el-row justify="center" align="center">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
-          <span>BankinSlip</span>
+          <span>Supplier Form</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-row :gutter="12" style="text-align:center">
+          <el-col :span="20" style="text-align:center">
+
+        <el-form ref="supplierBookingForm" :model="supplierBookingForm" :rules="rules">
+          <div align="center">
+            
+         
+<el-form-item prop="supplier">
+              <el-select prop="supplier" v-model="supplierBookingForm.supplier" placeholder="Choose Supplier">
+                <el-option
+                  v-for="item in supplier_options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+ </el-form-item>
+            <el-form-item prop="amount">
+              <el-input v-model="supplierBookingForm.amount" type="text" placeholder="Amount" style="width: 80%" />
+            </el-form-item>
+            <el-form-item prop="rate">
+              <el-input v-model="supplierBookingForm.rate" type="text" placeholder="Rate" style="width: 80%" />
+            </el-form-item>
+            <el-form-item prop="transfer_amount">
+              <el-input v-model="supplierBookingForm.transfer_amount" type="text" placeholder="Transfer Amount" style="width: 80%"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button :loading="loading_btn" type="primary" @click="generateReport('supplierBookingForm')">Generate Report</el-button>
+            </el-form-item>
+          </div>
+        </el-form>
+
+       
+           
+
           </el-col>
+    
         </el-row>
       </el-card>
     </el-row>
@@ -55,20 +245,129 @@
   }
 </style>
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
-import ProgressTrack from '~/components/AdminProgressTrack'
+  import ProgressTrack from '~/components/AdminProgressTrack'
+  import axios from 'axios'
 
-export default {
-  components: {
-    'progress-track': ProgressTrack
+  export default {
+    components: {
+      'progress-track': ProgressTrack
+    },
+    data() {
+      return {
+        status: 3,
+        loading_btn: false,
+        booking_details:{
+          id: null,
+          amount: null,
+          bia: null,
+          user_bankslip_path: null,
+        },
+        supplier: null,
+        supplier_options: null,
+        supplierBookingForm:{
+          supplier: null,
+          amount: null,
+          rate: null,
+          transfer_amount: null,
+        },
+        value: '',
+        rules: {
+          supplier: [{
+            required: true,
+            message: 'Please input amount',
+            trigger: 'change'
+          } ],
+          amount: [{
+            required: true,
+            message: 'Please input bank name',
+            trigger: 'change'
+          } ],
+          rate: [{
+            required: true,
+            message: 'Please input account name',
+            trigger: 'change'
+          }],
+          transfer_amount: [{
+            required: true,
+            message: 'Please input branch',
+            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/admin/booking/' + this.$route.params.id)
+      .then((response) => {
+        loading.close()
+        this.booking_details = response.data
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+
+    axios
+      .get('/api/setting-supplier/')
+      .then((response) => {
+        loading.close()
+        this.supplier_options = response.data
+      }).catch((error) => {
+        loading.close()
+        console.log(error) 
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+      
   },
-  data () {
-    return {
-      status: 4
+    methods: {
+      generateReport (formName) {
+        this.loading_btn = 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{
+            this.loading_btn = false
+          }
+        })
+
+      },
     }
-  },
-  methods: {
-
   }
-}
-</script>
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/admin/booking/verification.vue b/resources/assets/js/pages/admin/booking/verification.vue
index 20bac84b..b789f8ad 100644
--- a/resources/assets/js/pages/admin/booking/verification.vue
+++ b/resources/assets/js/pages/admin/booking/verification.vue
@@ -198,7 +198,7 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <img src="http://via.placeholder.com/600x400" class="image">
+            <img v-bind:src="booking_details.user_bankslip_path" class="image">
           </el-col>
         </el-row>
       </el-card>
@@ -206,8 +206,8 @@
       <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-button :loading="loading_btn" @click="approveUserSlip" type="success">Aprroved</el-button>
+            <el-button :loading="loading_btn" @click="rejectUserSlip" type="danger">Rejected</el-button>
           </el-col>
         </el-row>
       </el-card>
@@ -230,12 +230,14 @@
     data() {
       return {
         status: 2,
-        loading: false,
+        loading_btn: false,
         booking_details:{
           id: null,
           amount: null,
           bia: null,
-        }
+          user_bankslip_path: null,
+        },
+        estimated_arrival_time : null,
       }
     },
     beforeCreate () {
@@ -262,18 +264,62 @@
   },
     methods: {
       approveUserSlip() {
-        // axios.get('api/booking')
-        //   .then((response) => {
-        //     console.log(response)
-        //     this.list = response.data
-        //   })
+        this.loading_btn = true
+
+        let newApprove = {
+         estimated_arrival_time: this.estimated_arrival_time
+        }
+
+        axios.post('/api/booking/' + this.$route.params.id  + '/approve-bank-slip', newApprove)
+          .then((response) => {
+            this.loading_btn = false
+
+          this.$message({
+            showClose: true,
+            message: 'User bankinslip accepted. Proceed with book with supplier.',
+            type: 'success',
+            duration: 5000
+          })
+
+          this.$router.push({
+            name: 'booking.admin.supplier'
+          })
+
+            // pass variable to another router
+          })
+          .catch((error) => {
+            this.loading_btn = false
+            console.log(error)
+          })
       },
       rejectUserSlip() {
-        // axios.get('api/booking')
-        //   .then((response) => {
-        //     console.log(response)
-        //     this.list = response.data
-        //   })
+        this.loading_btn = true
+
+        let newApprove = {
+         estimated_arrival_time: this.estimated_arrival_time
+        }
+
+        axios.post('/api/booking/' + this.$route.params.id  + '/reject-bank-slip', newApprove)
+          .then((response) => {
+            this.loading_btn = false
+
+          this.$message({
+            showClose: true,
+            message: 'User bankinslip rejected. Waiting user to reupload their user bankslip.',
+            type: 'warning',
+            duration: 5000
+          })
+
+          this.$router.push({
+            name: 'admin.home'
+          })
+
+            // pass variable to another router
+          })
+          .catch((error) => {
+            this.loading_btn = false
+            console.log(error)
+          })
       },
     }
   }
diff --git a/tests/Feature/BookingTest.php b/tests/Feature/BookingTest.php
index c44ed4b5..616b6b25 100644
--- a/tests/Feature/BookingTest.php
+++ b/tests/Feature/BookingTest.php
@@ -83,17 +83,21 @@ class BookingTest extends TestCase
     public function testuploadbankslip()
     {
         Storage::fake('file');
-        $bankslip_path = UploadedFile::fake()->image('comp.jpg');
-
-        if(!file_exists($bankslip_path)){
-            $response->assertStatus(400);
-        }
+        $size_in_kb = 3072;    // 3072KB = 3MB
+        $bankslip_path = UploadedFile::fake()->image('comp.jpg')->size($size_in_kb);
 
+        $response = 
         $this->actingAs($this->user)
             ->json('POST', '/api/booking/' . $this->booking->id . '/upload-user-bankslip', [
                 'file' => $bankslip_path
-            ])
-            ->assertSuccessful();
+            ]);
+
+        if(!file_exists($bankslip_path) || $size_in_kb > 3072){
+            $response->assertStatus(400);    
+        }
+        else{
+            $response->assertSuccessful();
+        }
     }
 
     public function testUpdateBankslipAmount()
@@ -108,18 +112,22 @@ class BookingTest extends TestCase
     public function testuploadPO()
     {
         Storage::fake('file');
-        $image_path = UploadedFile::fake()->image('comp.jpg');
-
-        if(!file_exists($image_path)){
-            $response->assertStatus(400);    
-        }
+        $size_in_kb = 3072;    // 3072KB = 3MB
+        $image_path = UploadedFile::fake()->image('comp.jpg')->size($size_in_kb);
         
+        $response = 
         $this->actingAs($this->user)
             ->json('POST', '/api/booking/' . $this->booking->id . '/upload-po', [
                 'file' =>  $image_path,
                 'amount' => '12345'
-            ])
-            ->assertSuccessful();
+            ]);
+
+        if(!file_exists($image_path) || $size_in_kb > 3072){
+            $response->assertStatus(400);    
+        }
+        else{
+            $response->assertSuccessful();
+        }
     }
 
     public function testCancel()
@@ -152,18 +160,22 @@ class BookingTest extends TestCase
         $this->user->roles()->sync([]);
         $this->user->attachRole(Role::Where('name','admin')->first());
 
+        $size_in_kb = 3072;
         Storage::fake('invoice_path');
-        $invoice_path = UploadedFile::fake()->create('document.pdf');
-
-        if(!file_exists($invoice_path)){
-            $response->assertStatus(400);    
-        }
+        $invoice_path = UploadedFile::fake()->create('document.pdf',$size_in_kb);
         
+        $response = 
         $this->actingAs($this->user)
             ->json('POST', '/api/booking/' . $this->booking->id . '/upload-invoice', [
                 'invoice_path' => $invoice_path,
                 'amount' => '12345'
-            ])
-            ->assertSuccessful();
+            ]);
+        
+        if(!file_exists($invoice_path) || $size_in_kb > 3072){
+            $response->assertStatus(400);    
+        }
+        else{
+            $response->assertSuccessful();
+        }
     }
 }
diff --git a/tests/Feature/ChinaBankSlipTest.php b/tests/Feature/ChinaBankSlipTest.php
new file mode 100644
index 00000000..9d499b33
--- /dev/null
+++ b/tests/Feature/ChinaBankSlipTest.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Tests\Feature;
+
+use Tests\TestCase;
+use Illuminate\Foundation\Testing\WithFaker;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Http\UploadedFile;
+use Artisan;
+
+class ChinaBankSlipTest extends TestCase
+{
+    /**
+     * A basic test example.
+     *
+     * @return void
+     */
+    public function testStore(){
+    	Storage::fake('file');
+    	$size_in_kb = 3072;    // 3072KB = 3MB
+    	$china_bank_slips_path = UploadedFile::fake()->image('comp.jpg')->size($size_in_kb);
+        
+    	$response = 
+		$this->postJson('api/upload-china-bankslip',[
+			'china_bank_slips' => $china_bank_slips_path,
+			'actual_transfer_amount' => '12',
+			'details' => "123123",
+			'date' => "123123"
+		]);
+
+		if(!file_exists($china_bank_slips_path) || $size_in_kb > 3072){
+		    $response->assertStatus(400);    
+		}
+		else{
+		    $response->assertSuccessful();
+		}
+    }
+}