diff --git a/app/Booking.php b/app/Booking.php
index 5a1c2e0e..24990028 100644
--- a/app/Booking.php
+++ b/app/Booking.php
@@ -38,7 +38,7 @@ class Booking extends Model
     }
 
     public function chinaBankSlip(){
-        return $this->hasOne(ChinaBankSlip::class);
+        return $this->hasMany(ChinaBankSlip::class);
     }
     
     public function userBankSlip(){
diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index e5f350c3..dd00550d 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -11,6 +11,8 @@ use App\UserBankSlip;
 use App\User;
 use App\Invoice;
 use App\SettingCredit;
+use App\SettingTaxRate;
+use App\SettingBillingCharge;
 use Auth;
 use Validator;
 use DateTime;
@@ -149,7 +151,7 @@ class BookingController extends Controller
         $booking = Booking::where('user_id',Auth::user()->id)->where('id', $id)->first();
        
         $user_bankslip = $booking->userBankSlip()->first();
-        $china_bankslip = $booking->chinaBankSlip()->first();
+        $china_bankslip = $booking->chinaBankSlip()->get();
         $po = $booking->purchaseOrder()->first();
         $invoice = $booking->invoice()->first();
 
@@ -164,7 +166,10 @@ class BookingController extends Controller
             }
 
             if($china_bankslip){
-                $booking->china_bankslip_path = Storage::url($china_bankslip->china_bank_slip_path);
+                for($index = 0;$index < $booking->chinaBankSlip()->count();$index++){
+                    $china_bankslip[$index] = Storage::url($china_bankslip[$index]->china_bank_slip_path);
+                }
+                $booking->china_bankslip_path = $china_bankslip;
             }
 
             if($po){
@@ -197,12 +202,11 @@ class BookingController extends Controller
 
         
         $user_bankslip = $booking->userBankSlip()->first();
-        $china_bankslip = $booking->chinaBankSlip()->first();
+        $china_bankslip = $booking->chinaBankSlip()->get();
         $po = $booking->purchaseOrder()->first();
         $invoice = $booking->invoice()->first();
 
 		if($booking){
-
             if ($user_bankslip){
                 $booking->user_bankslip_path = Storage::url($user_bankslip->bankslip_path);
                 $booking->reject_reason = $user_bankslip->reject_reason;
@@ -210,7 +214,10 @@ class BookingController extends Controller
             }
 
             if($china_bankslip){
-                $booking->china_bankslip_path = Storage::url($china_bankslip->china_bank_slip_path);
+                for($index = 0;$index < $booking->chinaBankSlip()->count();$index++){
+                    $china_bankslip[$index] = Storage::url($china_bankslip[$index]->china_bank_slip_path);
+                }
+                $booking->china_bankslip_path = $china_bankslip;
             }
 
             if($po){
@@ -372,16 +379,16 @@ class BookingController extends Controller
         /* Validation*/
         if (!$booking)
         {
-            return response()->json(['message'=>'Access denied'], 200);
+            return response()->json(['message'=>'Access denied'], 403);
         }
 
         $validator = Validator::make($request->all(), [
-            'file'   => 'image|mimes:jpg,jpeg,bmp,png'
+            'file'   => 'mimes:jpg,jpeg,bmp,png,xls,xlsx,doc,docx,pdf'
         ]);
 
         if($validator->fails())
         {
-            return response()->json(['message'=>'Incorrect format'],200);
+            return response()->json(['message'=>'Incorrect format'],400);
         }
 
         $validator = Validator::make($request->all(), [
@@ -452,16 +459,16 @@ class BookingController extends Controller
         /* Validation */
             if (!$booking)
             {
-                return response()->json(['message'=>'Access denied'], 200);
+                return response()->json(['message'=>'Access denied'], 403);
             }
 
             $validator = Validator::make($request->all(), [
-                'file'   => 'image|mimes:jpg,jpeg,bmp,png'
+                'file'   => 'mimes:jpg,jpeg,bmp,png,xls,xlsx,doc,docx,pdf'
             ]);
 
             if($validator->fails())
             {
-                return response()->json(['message'=>'Incorrect format'],200);
+                return response()->json(['message'=>'Incorrect format'],400);
             }
 
             $validator = Validator::make($request->all(), [
@@ -470,12 +477,12 @@ class BookingController extends Controller
 
             if($validator->fails())
             {
-                return response()->json(['message'=>'Image too large, upload files up to 3 MB'], 400);
+                return response()->json(['message'=>'File too large, upload files up to 3 MB'], 400);
             }
 
             if(!$user_input_file = $request->file('file'))
             {
-                return response()->json(['message' => 'No file detected'], 400);
+                return response()->json(['message' => 'No file detected'], 404);
             }
         /* End Validation */
 
@@ -495,7 +502,8 @@ class BookingController extends Controller
         $user_po->save();
 
         $booking->status = 6;
-		$booking->admin_status = 7; 
+		// $booking->admin_status = 7; 
+        $booking->admin_status = 6; 
         $booking->save();
 
         return response()->json(['message'=>'Success'],200);
@@ -523,7 +531,7 @@ class BookingController extends Controller
     {
         if (!$booking = Booking::where('user_id',Auth::user()->id)->where('id',$book_id)->first())
         {
-            return response()->json(['message'=>'Access denied'], 200);
+            return response()->json(['message'=>'Access denied'],403);
         }
 
         $booking->is_cancel = true;
@@ -539,6 +547,8 @@ class BookingController extends Controller
         $china_beneficiary = $request->input('china_beneficiary');
         $rates = Rate::orderby('updated_at','desc')->first();
         $marking = $user = Auth::user()->marking;
+        $taxrate = SettingTaxRate::latest()->first()->tax_rate;
+        $billingChargeRate = SettingBillingCharge::latest()->first()->billing_charge_rate;
 
         $creditLimit = SettingCredit::orderby('updated_at','desc')->first();
 
@@ -589,18 +599,24 @@ class BookingController extends Controller
          } else {
              $svcharge = 20.00;
          }
- 
-         $bankin_amount = round(($amount + $svcharge) / $rate + (0 * ($amount + $svcharge)), 2);
+        
+         $subtotal = round($amount + $svcharge / $rate,2);
+         $taxAmount =  round($subtotal * $taxrate,2);
+         $billingChargeAmount = round(($amount + $svcharge) * $billingChargeRate, 2);
+         $bankin_amount = round($subtotal + $taxAmount + $billingChargeAmount , 2);
  
          return response()->json([
              'date' => date('Y-m-d'),
              'marking' => $marking,
-             'amount' => $amount,
              'payment_method' => $payment_method,
+             'china_beneficary' => $china_beneficiary,
+             'amount' => $amount,
              'service_charge' => $svcharge,
              'rate' => $rate,
+             'subtotal' => $subtotal,
+             'taxAmount' => $taxAmount,
+             'billingChargeAmount' => $billingChargeAmount,
              'bankin_amount' => $bankin_amount,
-             'china_beneficary' => $china_beneficiary
          ], 200);
     }
 
@@ -645,12 +661,12 @@ class BookingController extends Controller
         $booking = Booking::where('id',$book_id)->first();
         if (!$booking)
         {
-            return response()->json(['message'=>'Access denied'], 200);
+            return response()->json(['message'=>'Access denied'], 403);
         }
 
         if(!$userBankSlip = UserBankSlip::where('booking_id',$booking->id)->first())
         {
-            return response()->json(['message'=>'Access denied'], 200);
+            return response()->json(['message'=>'Access denied'], 403);
         }
 
         // approved bankslip cannot be reject again
@@ -678,16 +694,16 @@ class BookingController extends Controller
         /* Validation */
             if (!$booking)
             {
-                return response()->json(['message'=>'Access denied'], 200);
+                return response()->json(['message'=>'Access denied'], 403);
             }
 
             $validator = Validator::make($request->all(), [
-                'invoice_path'   => 'mimes:jpg,jpeg,bmp,png,pdf,doc,docx'
+                'invoice_path'   => 'mimes:jpg,jpeg,bmp,png,xls,xlsx,doc,docx,pdf'
             ]);
 
             if($validator->fails())
             {
-                return response()->json(['message'=>'Incorrect format'],200);
+                return response()->json(['message'=>'Incorrect format'],400);
             }
 
             $validator = Validator::make($request->all(), [
@@ -739,6 +755,7 @@ class BookingController extends Controller
         $booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first();
 
         $purchase_order = $booking->purchaseOrder()->first();
+        return($purchase_order);
 
         if(!$purchase_order){
             return response()->json(["message"=> "Please upload your purchase order"],400);
@@ -768,23 +785,23 @@ class BookingController extends Controller
         }
     }
 
-    public function adminShowCompletedOrders()
-    {
-        $bookings = Booking::select('id','created_at','user_id','rate','amount', 'bia', 'admin_status')
-               ->where('admin_status', 7)
-               ->orderBy('id', 'desc')
-               ->get();
+    // public function adminShowCompletedOrders()
+    // {
+    //     $bookings = Booking::select('id','created_at','user_id','rate','amount', 'bia', 'admin_status')
+    //            ->where('admin_status', 7)
+    //            ->orderBy('id', 'desc')
+    //            ->get();
                
-        foreach ($bookings as $booking) {
-            $booking->id;
-            $booking->created_at;
-            $booking->marking = $booking->user->marking;
-            $booking->rate;
-            $booking->amount;
-            $booking->bia;
-            $booking->admin_status = "(". $booking->admin_status ."/7)";;
-        }
-        return $bookings;
-    }
+    //     foreach ($bookings as $booking) {
+    //         $booking->id;
+    //         $booking->created_at;
+    //         $booking->marking = $booking->user->marking;
+    //         $booking->rate;
+    //         $booking->amount;
+    //         $booking->bia;
+    //         $booking->admin_status = "(". $booking->admin_status ."/7)";;
+    //     }
+    //     return $bookings;
+    // }
 
 }
diff --git a/app/Http/Controllers/ChinaBankSlipController.php b/app/Http/Controllers/ChinaBankSlipController.php
index f0b8c291..eabfe4a5 100644
--- a/app/Http/Controllers/ChinaBankSlipController.php
+++ b/app/Http/Controllers/ChinaBankSlipController.php
@@ -15,30 +15,29 @@ class ChinaBankSlipController extends Controller
     {      
         $booking = Booking::where('id',$id)->firstOrFail();
         
+        if (!$booking) {
+            return response()->json(['message'=>'Access denied'], 403);
+        }
+
         // TODO : put this after check file exist 
         // validate file format 
         $validator = Validator::make($request->all(), [
-            'file'   => 'image|mimes:jpg,jpeg,bmp,png'
+            'file'   => 'mimes:jpg,jpeg,bmp,png,xls,xlsx,doc,docx,pdf'
         ]);
 
-        if($validator->fails())
-        {
-            return response()->json(['message'=>'Incorrect format'],200);
+        if($validator->fails()){
+            return response()->json(['message'=>'Incorrect format'],400);
         }
 
-
         $validator = Validator::make($request->all(), [
             'china_bank_slips'   => 'max:3072'
         ]);
         
-        if($validator->fails())
-        {
+        if($validator->fails()){
             return response()->json(['message'=>'Image too large, upload files up to 3 MB'], 400);
         }
 
-
         if($bankslip_file = $request->file('file')){
-         
             $filename = $bankslip_file->getClientOriginalName();
             $ext = $bankslip_file->getClientOriginalExtension();
             $unique_name = 'cnbank_slip_' . md5($filename. time()); // probably not a good idea 
diff --git a/app/Http/Controllers/SettingBillingChargeController.php b/app/Http/Controllers/SettingBillingChargeController.php
new file mode 100644
index 00000000..85dd119e
--- /dev/null
+++ b/app/Http/Controllers/SettingBillingChargeController.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\SettingBillingCharge;
+
+class SettingBillingChargeController extends Controller
+{
+    public function index()
+    {
+        $billing_charge_setting = SettingBillingCharge::latest()->first();
+        return response()->json($billing_charge_setting, 201);
+    }
+
+    public function update(Request $request)
+    {
+        if($billing_charge_setting = SettingBillingCharge::latest()->first())
+            $billing_charge_setting->update($request->all());
+        else
+            $billing_charge_setting = SettingBillingCharge::create($request->all());
+
+        return response()->json($billing_charge_setting, 200);
+    }
+}
diff --git a/app/Http/Controllers/SettingTaxRateController.php b/app/Http/Controllers/SettingTaxRateController.php
new file mode 100644
index 00000000..354e7689
--- /dev/null
+++ b/app/Http/Controllers/SettingTaxRateController.php
@@ -0,0 +1,25 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\SettingTaxRate;
+
+class SettingTaxRateController extends Controller
+{
+	public function index()
+	{
+	    $setting_tax = SettingTaxRate::latest()->first();
+	    return response()->json($setting_tax, 201);
+	}
+
+	public function update(Request $request)
+	{
+	    if($setting_tax = SettingTaxRate::latest()->first())
+	        $setting_tax->update($request->all());
+	    else
+	        $setting_tax = SettingTaxRate::create($request->all());
+
+	    return response()->json($setting_tax, 200);
+	}
+}
diff --git a/app/SettingBillingCharge.php b/app/SettingBillingCharge.php
new file mode 100644
index 00000000..32e5f9ab
--- /dev/null
+++ b/app/SettingBillingCharge.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class SettingBillingCharge extends Model
+{
+    protected $fillable = ['billing_charge_rate'];
+}
diff --git a/app/SettingTaxRate.php b/app/SettingTaxRate.php
new file mode 100644
index 00000000..32b5a762
--- /dev/null
+++ b/app/SettingTaxRate.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class SettingTaxRate extends Model
+{
+    protected $fillable = ['tax_rate'];
+}
diff --git a/composer.lock b/composer.lock
index 6d0e86e8..aa761c45 100644
--- a/composer.lock
+++ b/composer.lock
@@ -1311,7 +1311,7 @@
                 {
                     "name": "Luís Otávio Cobucci Oblonczyk",
                     "email": "lcobucci@gmail.com",
-                    "role": "developer"
+                    "role": "Developer"
                 }
             ],
             "description": "A simple library to work with JSON Web Token and JSON Web Signature",
@@ -1715,33 +1715,29 @@
         },
         {
             "name": "paragonie/random_compat",
-            "version": "v2.0.17",
+            "version": "v9.99.99",
             "source": {
                 "type": "git",
                 "url": "https://github.com/paragonie/random_compat.git",
-                "reference": "29af24f25bab834fcbb38ad2a69fa93b867e070d"
+                "reference": "84b4dfb120c6f9b4ff7b3685f9b8f1aa365a0c95"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/paragonie/random_compat/zipball/29af24f25bab834fcbb38ad2a69fa93b867e070d",
-                "reference": "29af24f25bab834fcbb38ad2a69fa93b867e070d",
+                "url": "https://api.github.com/repos/paragonie/random_compat/zipball/84b4dfb120c6f9b4ff7b3685f9b8f1aa365a0c95",
+                "reference": "84b4dfb120c6f9b4ff7b3685f9b8f1aa365a0c95",
                 "shasum": ""
             },
             "require": {
-                "php": ">=5.2.0"
+                "php": "^7"
             },
             "require-dev": {
-                "phpunit/phpunit": "4.*|5.*"
+                "phpunit/phpunit": "4.*|5.*",
+                "vimeo/psalm": "^1"
             },
             "suggest": {
                 "ext-libsodium": "Provides a modern crypto API that can be used to generate random bytes."
             },
             "type": "library",
-            "autoload": {
-                "files": [
-                    "lib/random.php"
-                ]
-            },
             "notification-url": "https://packagist.org/downloads/",
             "license": [
                 "MIT"
@@ -1760,7 +1756,7 @@
                 "pseudorandom",
                 "random"
             ],
-            "time": "2018-07-04T16:31:37+00:00"
+            "time": "2018-07-02T15:55:56+00:00"
         },
         {
             "name": "psr/container",
@@ -2030,21 +2026,22 @@
         },
         {
             "name": "ramsey/uuid",
-            "version": "3.7.3",
+            "version": "3.8.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/ramsey/uuid.git",
-                "reference": "44abcdad877d9a46685a3a4d221e3b2c4b87cb76"
+                "reference": "d09ea80159c1929d75b3f9c60504d613aeb4a1e3"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/ramsey/uuid/zipball/44abcdad877d9a46685a3a4d221e3b2c4b87cb76",
-                "reference": "44abcdad877d9a46685a3a4d221e3b2c4b87cb76",
+                "url": "https://api.github.com/repos/ramsey/uuid/zipball/d09ea80159c1929d75b3f9c60504d613aeb4a1e3",
+                "reference": "d09ea80159c1929d75b3f9c60504d613aeb4a1e3",
                 "shasum": ""
             },
             "require": {
-                "paragonie/random_compat": "^1.0|^2.0",
-                "php": "^5.4 || ^7.0"
+                "paragonie/random_compat": "^1.0|^2.0|9.99.99",
+                "php": "^5.4 || ^7.0",
+                "symfony/polyfill-ctype": "^1.8"
             },
             "replace": {
                 "rhumsaa/uuid": "self.version"
@@ -2052,16 +2049,17 @@
             "require-dev": {
                 "codeception/aspect-mock": "^1.0 | ~2.0.0",
                 "doctrine/annotations": "~1.2.0",
-                "goaop/framework": "1.0.0-alpha.2 | ^1.0 | ^2.1",
+                "goaop/framework": "1.0.0-alpha.2 | ^1.0 | ~2.1.0",
                 "ircmaxell/random-lib": "^1.1",
                 "jakub-onderka/php-parallel-lint": "^0.9.0",
                 "mockery/mockery": "^0.9.9",
                 "moontoast/math": "^1.1",
                 "php-mock/php-mock-phpunit": "^0.3|^1.1",
-                "phpunit/phpunit": "^4.7|^5.0",
+                "phpunit/phpunit": "^4.7|^5.0|^6.5",
                 "squizlabs/php_codesniffer": "^2.3"
             },
             "suggest": {
+                "ext-ctype": "Provides support for PHP Ctype functions",
                 "ext-libsodium": "Provides the PECL libsodium extension for use with the SodiumRandomGenerator",
                 "ext-uuid": "Provides the PECL UUID extension for use with the PeclUuidTimeGenerator and PeclUuidRandomGenerator",
                 "ircmaxell/random-lib": "Provides RandomLib for use with the RandomLibAdapter",
@@ -2106,7 +2104,7 @@
                 "identifier",
                 "uuid"
             ],
-            "time": "2018-01-20T00:28:24+00:00"
+            "time": "2018-07-19T23:38:55+00:00"
         },
         {
             "name": "swiftmailer/swiftmailer",
diff --git a/database/migrations/2018_07_18_174712_update_autoincrement_start_from_2000_in_booking_table.php b/database/migrations/2018_07_18_174712_update_autoincrement_start_from_2000_in_booking_table.php
new file mode 100644
index 00000000..1d310042
--- /dev/null
+++ b/database/migrations/2018_07_18_174712_update_autoincrement_start_from_2000_in_booking_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class UpdateAutoincrementStartFrom2000InBookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        DB::statement("ALTER TABLE bookings AUTO_INCREMENT = 2000;");
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}
diff --git a/database/migrations/2018_07_20_172148_create_setting_billing_charge_table.php b/database/migrations/2018_07_20_172148_create_setting_billing_charge_table.php
new file mode 100644
index 00000000..e3f38dd1
--- /dev/null
+++ b/database/migrations/2018_07_20_172148_create_setting_billing_charge_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateSettingBillingChargeTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('setting_billing_charges', function (Blueprint $table) {
+            $table->increments('id');
+            $table->double('billing_charge_rate');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('setting_billing_charges');
+    }
+}
diff --git a/database/migrations/2018_07_20_183325_create_setting_tax_rate_table.php b/database/migrations/2018_07_20_183325_create_setting_tax_rate_table.php
new file mode 100644
index 00000000..0743eb7b
--- /dev/null
+++ b/database/migrations/2018_07_20_183325_create_setting_tax_rate_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateSettingTaxRateTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('setting_tax_rates', function (Blueprint $table) {
+            $table->increments('id');
+            $table->double('tax_rate');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('setting_tax_rates');
+    }
+}
diff --git a/database/seeds/DatabaseSeeder.php b/database/seeds/DatabaseSeeder.php
index 2c2e3c17..ebc04e05 100644
--- a/database/seeds/DatabaseSeeder.php
+++ b/database/seeds/DatabaseSeeder.php
@@ -26,6 +26,8 @@ class DatabaseSeeder extends Seeder
         $this->call(SettingMalaysiaBankSeeder::class);  
         $this->call(SettingBeneficiarySeeder::class);  
         $this->call(SettingActiveBankSeeder::class);
+        $this->call(SettingTaxRateSeeder::class);
+        $this->call(SettingBillingChargeSeeder::class);
         DB::statement('SET FOREIGN_KEY_CHECKS=1;');
     }
 }
diff --git a/database/seeds/SettingBillingChargeSeeder.php b/database/seeds/SettingBillingChargeSeeder.php
new file mode 100644
index 00000000..5b53433f
--- /dev/null
+++ b/database/seeds/SettingBillingChargeSeeder.php
@@ -0,0 +1,18 @@
+<?php
+
+use Illuminate\Database\Seeder;
+
+class SettingBillingChargeSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        DB::table('setting_billing_charges')->insert([
+        	'billing_charge_rate' => '1.2',
+        ]);
+    }
+}
diff --git a/database/seeds/SettingTaxRateSeeder.php b/database/seeds/SettingTaxRateSeeder.php
new file mode 100644
index 00000000..9ecff163
--- /dev/null
+++ b/database/seeds/SettingTaxRateSeeder.php
@@ -0,0 +1,18 @@
+<?php
+
+use Illuminate\Database\Seeder;
+
+class SettingTaxRateSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        DB::table('setting_tax_rates')->insert([
+        	'tax_rate' => '1.1',
+        ]);
+    }
+}
diff --git a/resources/assets/js/components/LocaleDropdown.vue b/resources/assets/js/components/LocaleDropdown.vue
index 3a139a66..b4a2e143 100644
--- a/resources/assets/js/components/LocaleDropdown.vue
+++ b/resources/assets/js/components/LocaleDropdown.vue
@@ -41,20 +41,20 @@
   </ul>
 <!-- update rate dialog start -->
  <el-dialog align="center" :visible.sync="UpdateRateDialogVisible" width="900px">
-    <el-form :inline="true" align="center" ref="rateForm" :model="rateForm" :rules="rules">
+    <el-form :inline="true" align="center" ref="rate" :model="rate" :rules="rules">
 
-        <el-form-item prop="x1_cash" >X1: &nbsp;&nbsp;&nbsp;Cash : <el-input v-model.number="rateForm.x1_cash" style=width:60% ></el-input></el-form-item>
-        <el-form-item prop="x1_cheque" >Cheque : <el-input  v-model.number="rateForm.x1_cheque" style=width:60%></el-input></el-form-item>
-        <el-form-item prop="x1_ba">BA : <el-input v-model.number="rateForm.x1_ba" style=width:60%></el-input></el-form-item>
+        <el-form-item prop="x1_cash" >X1: &nbsp;&nbsp;&nbsp;Cash : <el-input v-model.number="rate.x1_cash" style=width:60% ></el-input></el-form-item>
+        <el-form-item prop="x1_cheque" >Cheque : <el-input  v-model.number="rate.x1_cheque" style=width:60%></el-input></el-form-item>
+        <el-form-item prop="x1_ba">BA : <el-input v-model.number="rate.x1_ba" style=width:60%></el-input></el-form-item>
         <br>
-        <el-form-item prop="x2_cash" >X2: &nbsp;&nbsp;&nbsp;Cash : <el-input  v-model.number="rateForm.x2_cash" style=width:60% ></el-input></el-form-item>
-        <el-form-item prop="x2_cheque" >Cheque : <el-input  v-model.number="rateForm.x2_cheque" style=width:60%></el-input></el-form-item>
-        <el-form-item prop="x2_ba" >BA : <el-input  v-model.number="rateForm.x2_ba" style=width:60%></el-input></el-form-item>
+        <el-form-item prop="x2_cash" >X2: &nbsp;&nbsp;&nbsp;Cash : <el-input  v-model.number="rate.x2_cash" style=width:60% ></el-input></el-form-item>
+        <el-form-item prop="x2_cheque" >Cheque : <el-input  v-model.number="rate.x2_cheque" style=width:60%></el-input></el-form-item>
+        <el-form-item prop="x2_ba" >BA : <el-input  v-model.number="rate.x2_ba" style=width:60%></el-input></el-form-item>
     </el-form>
     <br>
     <div align="center">
         <el-button type="text" @click="UpdateRateDialogVisible = false">Cancel</el-button>
-        <el-button type="primary" @click="updateRate('rateForm'); UpdateRateDialogVisible = false; DoneUpdateRateDialogVisible = true" >Save</el-button>
+        <el-button type="primary" @click="updateRate('rate'); UpdateRateDialogVisible = false; DoneUpdateRateDialogVisible = true" >Save</el-button>
     </div>
   </el-dialog> 
 <!-- update rate dialog done -->
@@ -81,21 +81,13 @@ export default {
         UpdateRateDialogVisible: false,
         DoneUpdateRateDialogVisible: false,
         rate: {
-        x1_ba: null,
-        x1_cheque: null,
-        x1_cash: null,
-        x2_ba: null,
-        x2_cash: null,
-        x2_cheque: null,
+          x1_ba: null,
+          x1_cheque: null,
+          x1_cash: null,
+          x2_ba: null,
+          x2_cash: null,
+          x2_cheque: null,
         },
-        rateForm: {
-        x1_cash: '',
-        x1_cheque: '',
-        x1_ba: '',
-        x1_cash: '',
-        x1_cheque: '',
-        x1_ba: '',
-       },
       rules: {
         x1_cash: [
           { required: true, message: 'Please input rate for X1 Cash', trigger: 'change'},
@@ -130,11 +122,9 @@ export default {
     user: 'auth/user',
     role: 'auth/role'
   }),
-
-    mounted () {
-    this.getRate()
+  mounted () {
+    this.getRate();
   },
-
   methods: {
     setLocale (locale) {
       if (this.$i18n.locale !== locale) {
@@ -147,11 +137,9 @@ export default {
       let $this = this
       axios.get('/api/rate').then(response => {
         this.rate = response.data
-        console.log(this.rate)
       })
     },
-
-    createRate: function () {
+    createRate: function () { // TODO : we do not have create rate, only update rate. Delete this ? 
       this.loading = true,
       this.dialogFormVisible1 = true
           let newRate = {
@@ -163,7 +151,6 @@ export default {
             x2_ba: this.rateForm.x2_ba
           }
 
-          console.log(newRate)
           axios.post('/api/update-rate', newRate)
             .then((response) => {
               this.loading = false
@@ -186,12 +173,12 @@ export default {
         this.$refs[formName].validate((valid) => {
           if (valid) {
             let newRate = {
-            x1_cash: this.rateForm.x1_cash,
-            x1_cheque: this.rateForm.x1_cheque,
-            x1_ba: this.rateForm.x1_ba,
-            x2_cash: this.rateForm.x2_cash,
-            x2_cheque: this.rateForm.x2_cheque,
-            x2_ba: this.rateForm.x2_ba,
+            x1_cash: this.rate.x1_cash,
+            x1_cheque: this.rate.x1_cheque,
+            x1_ba: this.rate.x1_ba,
+            x2_cash: this.rate.x2_cash,
+            x2_cheque: this.rate.x2_cheque,
+            x2_ba: this.rate.x2_ba,
             }
 
             axios.post('/api/update-rate', newRate)
diff --git a/resources/assets/js/pages/admin/booking/bookingDetail.vue b/resources/assets/js/pages/admin/booking/bookingDetail.vue
new file mode 100644
index 00000000..002b219e
--- /dev/null
+++ b/resources/assets/js/pages/admin/booking/bookingDetail.vue
@@ -0,0 +1,263 @@
+<template>
+  <el-main>
+    <progress-track v-model="trackerConfig" />
+
+    <div align="center">
+      <h4 style="margin-top:5%;"></h4>
+      <h5>Waiting User Upload Bank Slip</h5>
+      <br/>
+      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+    </div>
+    <br>
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Details</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
+          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
+            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
+
+              <div class="el-table__body-wrapper is-scrolling-none">
+                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
+                  <colgroup>
+                    <col name="el-table_2_column_9" width="210">
+                    <col name="el-table_2_column_10" width="210">
+                  </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">{{ booking_details.marking }}</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">Beneficiary Account : </div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{booking_details.account_name}}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Beneficiary Account Number : </div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{booking_details.account_num}}</div>
+                      </td>
+                    </tr>
+                    <!---->
+                  </tbody>
+                </table>
+                <!---->
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <!---->
+              <!---->
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+            </div>
+          </div>
+          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
+            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
+              <div class="hidden-columns">
+                <div></div>
+                <div></div>
+              </div>
+              <!---->
+              <div class="el-table__body-wrapper is-scrolling-none">
+                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
+                  <colgroup>
+                    <col name="el-table_3_column_11" width="200">
+                    <col name="el-table_3_column_12" width="200">
+                  </colgroup>
+                  <tbody>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">CNY/RMB :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">CNY {{ booking_details.amount }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">+ Service Charge :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">CNY {{ booking_details.service_charge }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">/ RATE :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">{{ booking_details.rate }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">MYR {{ booking_details.bia }}</div>
+                      </td>
+                    </tr>
+                    <!-- <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">+ GST 6% :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">MYR 4,430.88</div>
+                      </td>
+                    </tr> -->
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">
+                          <b>MYR {{ booking_details.bia }}</b>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"> </div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell"> </div>
+                      </td>
+                    </tr>
+                    <!---->
+                  </tbody>
+                </table>
+                <!---->
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <!---->
+              <!---->
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+            </div>
+          </div>
+        </div>
+        <!-- <el-row :gutter="12">
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+        </el-row> -->
+      </el-card>
+    </el-row>
+    <br>
+
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+  .image {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 150px;
+    display: block;
+  }
+  .image:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
+</style>
+<script>
+  import ProgressTrack from '~/components/AdminProgressTrack'
+  import axios from 'axios'
+
+  export default {
+    components: {
+      'progress-track': ProgressTrack
+    },
+    data() {
+      return {
+        trackerConfig :{
+          status: 1,
+          term: null
+        },
+        loading_btn: false,
+        rejectDialogVisible: false,
+        reject_reason: null,
+        booking_details: {
+          id: null,
+          amount: null,
+          bia: null,
+          user_bankslip_path: null,
+        },
+        estimated_arrival_time: null,
+      }
+    },
+    beforeCreate() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Please wait..',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+
+      axios
+        .get('/api/admin/booking/' + this.$route.params.id)
+        .then((response) => {
+          this.booking_details = response.data;
+          this.trackerConfig.term = response.data.term;
+          console.log(this.booking_details);
+          loading.close()
+
+        }).catch((error) => {
+          console.log(error)
+          loading.close()
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+    },
+  }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/admin/booking/completed.vue b/resources/assets/js/pages/admin/booking/completed.vue
index 0b471477..eee2c21b 100644
--- a/resources/assets/js/pages/admin/booking/completed.vue
+++ b/resources/assets/js/pages/admin/booking/completed.vue
@@ -19,9 +19,10 @@
             <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
           <el-row :gutter="12" type="flex">
-            <el-col :span="12">
-              <a target=" _blank" :href="booking_details.user_po_path">
-                <img v-bind:src="booking_details.user_po_path" class="image">
+            <el-col :span="12" align="center">
+              <a target="_blank" :href="getURL(booking_details.user_po_path)">
+                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
+                <p v-else>Download</p>
               </a>
             </el-col>
           </el-row>
@@ -35,10 +36,14 @@
             <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
           <el-row :gutter="12" type="flex">
-            <el-col :span="12">
-              <a target=" _blank" :href="booking_details.china_bankslip_path">
-                <img v-bind:src="booking_details.china_bankslip_path" class="image">
-              </a>
+            <el-col :span="12" align="center">
+              <div v-for="cn_bankslip in booking_details.china_bankslip_path">
+                <a target="_blank" :href="getURL(cn_bankslip)">
+                  <img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
+                  <p v-else>Download</p>
+                  <br/>
+                </a>
+              </div>
             </el-col>
           </el-row>
         </el-card>
@@ -50,9 +55,10 @@
             <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
           <el-row :gutter="12" type="flex">
-            <el-col :span="12">
-              <a target="_blank" :href="booking_details.invoice_path">     
-                <img v-bind:src="booking_details.invoice_path" class="image">
+            <el-col :span="12" align="center">
+              <a target="_blank" :href="getURL(booking_details.invoice_path)">
+                <img v-if="isImage(booking_details.invoice_path)" v-bind:src="booking_details.invoice_path" class="image">
+                <p v-else>Download</p>
               </a>
             </el-col>
           </el-row>
@@ -89,8 +95,8 @@
               <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">
+                    <col name="el-table_2_column_9" width="210">
+                    <col name="el-table_2_column_10" width="210">
                   </colgroup>
                   <tbody>
                     <tr class="el-table__row">
@@ -117,14 +123,6 @@
                         <div class="cell">{{ booking_details.marking }}</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>
@@ -135,10 +133,18 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell">Beneficiary Account : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
+                        <div class="cell">{{booking_details.account_name}}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Beneficiary Account Number : </div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{booking_details.account_num}}</div>
                       </td>
                     </tr>
                     <!---->
@@ -264,8 +270,9 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <a target="_blank" :href="booking_details.user_bankslip_path">
-              <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
             </a>
           </el-col>
         </el-row>
@@ -336,7 +343,18 @@ export default {
       })
   },
   methods: {
-
+    getExtension(path){
+      return path.slice(-3);
+    },
+    isImage(path){
+      var ext = this.getExtension(path);
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+    },
+    getURL(path){
+      var getUrl = window.location;
+      var baseUrl = getUrl.protocol + "//" + getUrl.host;
+      return baseUrl + path;
+    }
   }
 }
 </script>
diff --git a/resources/assets/js/pages/admin/booking/supplierBooking.vue b/resources/assets/js/pages/admin/booking/supplierBooking.vue
index 1a66ee46..dc4910c0 100644
--- a/resources/assets/js/pages/admin/booking/supplierBooking.vue
+++ b/resources/assets/js/pages/admin/booking/supplierBooking.vue
@@ -23,8 +23,8 @@
               <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">
+                    <col name="el-table_2_column_9" width="210">
+                    <col name="el-table_2_column_10" width="210">
                   </colgroup>
                   <tbody>
                     <tr class="el-table__row">
@@ -51,14 +51,6 @@
                         <div class="cell">{{ booking_details.marking }}</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>
@@ -69,10 +61,18 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell">Beneficiary Account : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
+                        <div class="cell">{{booking_details.account_name}}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Beneficiary Account Number : </div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{booking_details.account_num}}</div>
                       </td>
                     </tr>
                     <!---->
@@ -203,8 +203,6 @@
 
             <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">
diff --git a/resources/assets/js/pages/admin/booking/supplierReport.vue b/resources/assets/js/pages/admin/booking/supplierReport.vue
index 6eaddec8..310b3901 100644
--- a/resources/assets/js/pages/admin/booking/supplierReport.vue
+++ b/resources/assets/js/pages/admin/booking/supplierReport.vue
@@ -5,7 +5,7 @@
     <div align="center">
       <h4 style="margin-top:5%;"></h4>
       <br>
-      <h5> Supplier Report</h5>
+      <h5>Supplier Report</h5>
       <br>
       <!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
     </div>
@@ -23,8 +23,8 @@
               <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">
+                    <col name="el-table_2_column_9" width="210">
+                    <col name="el-table_2_column_10" width="210">
                   </colgroup>
                   <tbody>
                     <tr class="el-table__row">
@@ -51,14 +51,6 @@
                         <div class="cell">{{ booking_details.marking }}</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>
@@ -69,10 +61,18 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell">Beneficiary Account : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
+                        <div class="cell">{{booking_details.account_name}}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Beneficiary Account Number : </div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{booking_details.account_num}}</div>
                       </td>
                     </tr>
                     <!---->
@@ -215,8 +215,9 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <a target="_blank" :href="booking_details.user_bankslip_path">
-              <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
             </a>
           </el-col>
         </el-row>
@@ -354,7 +355,6 @@
       downloadReport(){
         let canvas = document.getElementById('myCanvas')
         var dataString = canvas.toDataURL("image/png");
-        console.log(dataString)
         var link = document.createElement("a");
         link.download = 'image';
         link.href = dataString;
@@ -400,6 +400,18 @@
           }
         })
       },
+      getExtension(path){
+        return path.slice(-3);
+      },
+      isImage(path){
+        var ext = this.getExtension(path);
+        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+      },
+      getURL(path){
+        var getUrl = window.location;
+        var baseUrl = getUrl.protocol + "//" + getUrl.host;
+        return baseUrl + path;
+      }
     },
     directives: {
       insertMessage: function (canvasElement, binding) {
@@ -560,8 +572,6 @@
             // text
             ctx.font = "bold 14px Arial";
             ctx.textAlign = "center";
-            console.log(binding.value.amountInRMB);
-            console.log(binding.value);
             ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80);
             ctx.fillText("户名 : " + binding.value.china_company_name, column2X - 40, rowHeight[22] - 60);
             ctx.fillText(binding.value.china_acc_no, column2X - 40, rowHeight[22] - 40);
diff --git a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
index a2cb054c..5ac9ede6 100644
--- a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
+++ b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
@@ -23,8 +23,8 @@
               <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">
+                    <col name="el-table_2_column_9" width="210">
+                    <col name="el-table_2_column_10" width="210">
                   </colgroup>
                   <tbody>
                     <tr class="el-table__row">
@@ -51,14 +51,6 @@
                         <div class="cell">{{ booking_details.marking }}</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>
@@ -69,10 +61,18 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell">Beneficiary Account : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
+                        <div class="cell">{{booking_details.account_name}}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Beneficiary Account Number : </div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{booking_details.account_num}}</div>
                       </td>
                     </tr>
                     <!---->
@@ -205,18 +205,21 @@
               <div align="center">
 
                 <!-- upload image -->
-                <el-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'" :on-preview="handlePreview"
+                <el-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'" 
+                :on-preview="handlePreview"
+                :on-error="uploadError"
+                  accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
                   :on-remove="handleRemove" :multiple="false" list-type="picture">
                   <el-button size="small" type="primary">Click to upload</el-button>
-                  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 3 MB</div>
+                  <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
                 </el-upload>
 
                 <br>
                 <!-- upload image end -->
-                <el-form-item prop="date">
+<!--                 <el-form-item prop="date">
                   <el-date-picker v-model="chinaSlipForm.date" type="date" placeholder="Pick a day" :picker-options="pickerOptions1">
                   </el-date-picker>
-                </el-form-item>
+                </el-form-item> -->
                 <el-form-item prop="actual_transfer_amount">
                   <el-input v-model="chinaSlipForm.actual_transfer_amount" type="text" placeholder="Amount" style="width: 80%" />
                 </el-form-item>
@@ -266,7 +269,7 @@
         supplier_options: null,
         chinaSlipForm: {
           actual_transfer_amount: null,
-          date: null,
+          // date: null,
           details: null,
         },
         rules: {
@@ -275,42 +278,42 @@
             message: 'Please input transfer amount',
             trigger: 'change'
           }],
-          date: [{
-            required: true,
-            message: 'Please input date',
-            trigger: 'change'
-          }],
-          details: [{
-            required: true,
-            message: 'Please input details',
-            trigger: 'change'
-          }]
+          // date: [{
+          //   required: true,
+          //   message: 'Please input date',
+          //   trigger: 'change'
+          // }],
+          // details: [{
+          //   required: true,
+          //   message: 'Please input details',
+          //   trigger: 'change'
+          // }]
         },
-        pickerOptions1: {
-          disabledDate(time) {
-            return time.getTime() > Date.now();
-          },
-          shortcuts: [{
-            text: 'Today',
-            onClick(picker) {
-              picker.$emit('pick', new Date());
-            }
-          }, {
-            text: 'Yesterday',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24);
-              picker.$emit('pick', date);
-            }
-          }, {
-            text: 'A week ago',
-            onClick(picker) {
-              const date = new Date();
-              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
-              picker.$emit('pick', date);
-            }
-          }]
-        }
+        // pickerOptions1: {
+        //   disabledDate(time) {
+        //     return time.getTime() > Date.now();
+        //   },
+        //   shortcuts: [{
+        //     text: 'Today',
+        //     onClick(picker) {
+        //       picker.$emit('pick', new Date());
+        //     }
+        //   }, {
+        //     text: 'Yesterday',
+        //     onClick(picker) {
+        //       const date = new Date();
+        //       date.setTime(date.getTime() - 3600 * 1000 * 24);
+        //       picker.$emit('pick', date);
+        //     }
+        //   }, {
+        //     text: 'A week ago',
+        //     onClick(picker) {
+        //       const date = new Date();
+        //       date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+        //       picker.$emit('pick', date);
+        //     }
+        //   }]
+        // }
       }
     },
     beforeCreate() {
@@ -351,11 +354,10 @@
               .then((response) => {
                 this.$message({
                   showClose: true,
-                  message: 'Your bankinslip has been submitted, please wait customer to upload their purchase order.',
+                  message: 'Your bankinslip has been submitted, please wait customer to upload their purchase order',
                   type: 'success',
                   duration: 5000
                 })
-
                 console.log(response)
                 this.$router.push({
                   name: 'home'
@@ -371,7 +373,6 @@
                   duration: 10000
                 })
               })
-
           } else {
             this.loading_btn = false
             this.$message({
@@ -388,6 +389,9 @@
       },
       handlePreview(file) {
         console.log(file);
+      },
+      uploadError(file,fileList){
+        this.$message.warning(`Incorrect file format or file size too big.`)
       }
     }
   }
diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index 8d08a264..fa8adcd4 100644
--- a/resources/assets/js/pages/admin/booking/uploadInvoice.vue
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -30,8 +30,8 @@
               <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">
+                    <col name="el-table_2_column_9" width="210">
+                    <col name="el-table_2_column_10" width="210">
                   </colgroup>
                   <tbody>
                     <tr class="el-table__row">
@@ -58,14 +58,6 @@
                         <div class="cell">{{ booking_details.marking }}</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>
@@ -76,10 +68,18 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell">Beneficiary Account : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
+                        <div class="cell">{{booking_details.account_name}}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Beneficiary Account Number : </div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{booking_details.account_num}}</div>
                       </td>
                     </tr>
                     <!---->
@@ -192,6 +192,8 @@
           <!-- upload image -->
           <el-upload :action="'/api/booking/' + booking_id + '/upload-invoice'" :on-exceed="handleExceed" :on-preview="handlePreview"
                      :on-remove="handleRemove"
+                     :on-error="uploadError"
+                     accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
                      class="upload-demo"
                      drag
                      multiple>
@@ -199,7 +201,7 @@
             <div class="el-upload__text">Drop file here or
               <em>click to upload</em>
             </div>
-            <div slot="tip" class="el-upload__tip">jpg/png/pdf files with a size less than 3mb</div>
+            <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3mb</div>
           </el-upload>
 
           <br>
@@ -218,9 +220,10 @@
             <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
           <el-row :gutter="12" type="flex">
-            <el-col :span="12">
-              <a target="_blank" :href="booking_details.user_po_path">
-                <img v-bind:src="booking_details.user_po_path" class="image">
+            <el-col :span="12" align="center">
+              <a target="_blank" :href="getURL(booking_details.user_po_path)">
+                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
+                <p v-else>Download</p>
               </a>
             </el-col>
           </el-row>
@@ -369,12 +372,28 @@
     },
       handleRemove(file, fileList) {
         console.log(file, fileList);
+        // Should send some reqeust to controller to delete the file
       },
       handlePreview(file) {
         console.log(file);
       },
       handleExceed(file){
         console.log(file)
+      },
+      uploadError(file,fileList){
+        this.$message.warning(`Incorrect file format or file size too big.`)
+      },
+      getExtension(path){
+       return path.slice(-3);
+      },
+      isImage(path){
+        var ext = this.getExtension(path);
+        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+      },
+      getURL(path){
+        var getUrl = window.location;
+        var baseUrl = getUrl.protocol + "//" + getUrl.host;
+        return baseUrl + path;
       }
     }
   }
diff --git a/resources/assets/js/pages/admin/booking/verification.vue b/resources/assets/js/pages/admin/booking/verification.vue
index 2e495694..65b13a07 100644
--- a/resources/assets/js/pages/admin/booking/verification.vue
+++ b/resources/assets/js/pages/admin/booking/verification.vue
@@ -25,8 +25,8 @@
               <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">
+                    <col name="el-table_2_column_9" width="210">
+                    <col name="el-table_2_column_10" width="210">
                   </colgroup>
                   <tbody>
                     <tr class="el-table__row">
@@ -53,14 +53,6 @@
                         <div class="cell">{{ booking_details.marking }}</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>
@@ -71,10 +63,18 @@
                     </tr>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell"></div>
+                        <div class="cell">Beneficiary Account : </div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
-                        <div class="cell"></div>
+                        <div class="cell">{{booking_details.account_name}}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Beneficiary Account Number : </div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{booking_details.account_num}}</div>
                       </td>
                     </tr>
                     <!---->
@@ -201,13 +201,12 @@
           <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
         </div>
         <el-row :gutter="12">
-          <a target="_blank" :href="booking_details.user_bankslip_path">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
-          </a>
-          <!--<el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
-          </el-col>-->
-
+          <el-col :span="22" style="text-align:center">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
+            </a>
+          </el-col>
         </el-row>
       </el-card>
 
@@ -295,7 +294,6 @@
           this.booking_details = response.data;
           this.trackerConfig.term = response.data.term;
           loading.close()
-
         }).catch((error) => {
           console.log(error)
           loading.close()
@@ -365,6 +363,18 @@
             console.log(error)
           })
       },
+      getExtension(path){
+        return path.slice(-3);
+      },
+      isImage(path){
+        var ext = this.getExtension(path);
+        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+      },
+      getURL(path){
+        var getUrl = window.location;
+        var baseUrl = getUrl.protocol + "//" + getUrl.host;
+        return baseUrl + path;
+      }
     }
   }
 </script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/admin/home.vue b/resources/assets/js/pages/admin/home.vue
index b1a5b795..501256b5 100644
--- a/resources/assets/js/pages/admin/home.vue
+++ b/resources/assets/js/pages/admin/home.vue
@@ -16,16 +16,16 @@
         </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="filterHandler" label="Term" prop="term" width="100"/>
+        <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" />
-        <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount"
+        <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandlerTranferAmount" 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">
+        <el-table-column label="Status" width="106" :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterHandlerStatus" prop="status_desc">
           <template slot-scope="scope">
             <el-popover trigger="click" placement="top">
               <p>{{ scope.row.status_desc }}</p>
@@ -37,8 +37,7 @@
         </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-table-column label="" width="180">
           <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id) }"> View Status </el-button>
           <!-- <template slot-scope="scope">
               <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
@@ -64,36 +63,54 @@ export default {
       ],
       url: 'api/admin/booking',   
       loading_btn: false,
-
     }
   },
   mounted () {
-    this.RefreshBooking()
+    this.getBooking()
   },
   methods: {
+    getBooking() {
+      let $this = this
+      axios.get(this.url).then(response => {
+        this.bookingTable = response.data
+      })
+    },
     RefreshBooking() {
       let $this = this
       this.loading_btn = true
       axios.get(this.url).then(response => {
         this.loading_btn = false;
         this.bookingTable = response.data
+        this.$message({
+          showClose: true,
+          message: 'Booking is updated',
+          type: 'success',
+          duration: 5000
+        })
       })
     },
-    filterTag (value, row) {
-      return row.tag === value
+    filterHandlerStatus (value, row, column) {
+      const status = row.track_status;
+      if(value ==="Success")
+        return status === "(5/5)" || status === "(7/7)";
+      else
+        return !(status === "(5/5)" || status === "(7/7)");
     },
-    filterHandler (value, row, column) {
-      const property = column['property']
-      return row[property] === value
+    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) {
       // TODO : Get booking status from server
       this.status = status
-      console.log(this.status)
       switch (this.status) {
         case 1:
           this.$router.push({
-            name: 'booking.admin.pending',
+            name: 'booking.admin.booking.detail',
             params: {id: booking_id }
           })
           break
diff --git a/resources/assets/js/pages/booking/completed.vue b/resources/assets/js/pages/booking/completed.vue
index c915fd7e..e3446bfe 100644
--- a/resources/assets/js/pages/booking/completed.vue
+++ b/resources/assets/js/pages/booking/completed.vue
@@ -12,8 +12,9 @@
           <div class="card-header">Purchase Order</div>
           <div class="row">
             <div class="card-body">
-              <a target=" _blank" :href="booking_details.user_po_path">
-                <img v-bind:src="booking_details.user_po_path" class="uploadedImage">
+              <a target="_blank" :href="getURL(booking_details.user_po_path)">
+                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
+                <p v-else>Download</p>
               </a>
             </div>
           </div>
@@ -23,9 +24,11 @@
         <div class="card">
           <div class="card-header">China Bank Slip</div>
           <div class="row">
-            <div class="card-body">
-              <a target=" _blank" :href="booking_details.china_bankslip_path">
-                <img v-bind:src="booking_details.china_bankslip_path" class="uploadedImage">
+            <div v-for="cn_bankslip in booking_details.china_bankslip_path">
+              <a target="_blank" :href="getURL(cn_bankslip)">
+                <img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
+                <p v-else>Download</p>
+                <br/>
               </a>
             </div>
           </div>
@@ -36,7 +39,10 @@
           <div class="card-header">Invoice</div>
           <div class="row">
             <div class="card-body">     
-                <img class="uploadedImage" src="http://via.placeholder.com/900x1615">   
+              <a target="_blank" :href="getURL(booking_details.invoice_path)">
+                <img v-if="isImage(booking_details.invoice_path)" v-bind:src="booking_details.invoice_path" class="image">
+                <p v-else>Download</p>
+              </a>
             </div>
           </div>
         </div>
@@ -98,9 +104,10 @@
       <div class="card-header">Order Bankin Slip</div>
       <div class="row">
         <div class="card-body">
-          <a target="_blank" :href="booking_details.user_bankslip_path">
-            <img v-bind:src="booking_details.user_bankslip_path" class="uploadedImage">
-          </a>    
+          <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+            <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+            <p v-else>Download</p>
+          </a>  
         </div>
       </div>
     </div>
@@ -173,7 +180,7 @@ export default {
       .get('/api/booking/' + this.$route.params.id)
       .then((response) => {
         this.booking_details = response.data
-        loading.close()
+        loading.close();
 
       }).catch((error) => {
         console.log(error)
@@ -184,7 +191,18 @@ export default {
       })
   },
   methods: {
-
+    getExtension(path){
+      return path.slice(-3);
+    },
+    isImage(path){
+      var ext = this.getExtension(path);
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+    },
+    getURL(path){
+      var getUrl = window.location;
+      var baseUrl = getUrl.protocol + "//" + getUrl.host;
+      return baseUrl + path;
+    }
   }
 }
 </script>
diff --git a/resources/assets/js/pages/booking/confirmation.vue b/resources/assets/js/pages/booking/confirmation.vue
index c5b00205..18b06a6f 100644
--- a/resources/assets/js/pages/booking/confirmation.vue
+++ b/resources/assets/js/pages/booking/confirmation.vue
@@ -61,9 +61,10 @@
       <div class="card-header">Order Bankin Slip</div>
       <div class="row">
         <div class="card-body">
-          <a target="_blank" :href="booking_details.user_bankslip_path">
-            <img v-bind:src="booking_details.user_bankslip_path" class="uploadedImage">
-          </a>    
+          <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+            <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+            <p v-else>Download</p>
+          </a>
         </div>
       </div>
     </div>
@@ -144,7 +145,18 @@ export default {
       })
   },
   methods: {
-
+    getExtension(path){
+        return path.slice(-3);
+      },
+      isImage(path){
+        var ext = this.getExtension(path);
+        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+      },
+      getURL(path){
+        var getUrl = window.location;
+        var baseUrl = getUrl.protocol + "//" + getUrl.host;
+        return baseUrl + path;
+      }
   }
 }
 </script>
diff --git a/resources/assets/js/pages/booking/po.vue b/resources/assets/js/pages/booking/po.vue
index 50cdab99..ab8d5d5f 100644
--- a/resources/assets/js/pages/booking/po.vue
+++ b/resources/assets/js/pages/booking/po.vue
@@ -12,8 +12,9 @@
           <div class="card-header">Purchase Order</div>
           <div class="row">
             <div class="card-body">
-              <a target=" _blank" :href="booking_details.user_po_path">
-                <img v-bind:src="booking_details.user_po_path" class="uploadedImage">
+              <a target="_blank" :href="getURL(booking_details.user_po_path)">
+                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
+                <p v-else>Download</p>
               </a>
             </div>
           </div>
@@ -24,8 +25,9 @@
           <div class="card-header">China Bank Slip</div>
           <div class="row">
             <div class="card-body">
-              <a target=" _blank" :href="booking_details.china_bankslip_path">
-                <img v-bind:src="booking_details.china_bankslip_path" class="uploadedImage">
+              <a target="_blank" :href="getURL(booking_details.china_bankslip_path)">
+                <img v-if="isImage(booking_details.china_bankslip_path)" v-bind:src="booking_details.china_bankslip_path" class="image">
+                <p v-else>Download</p>
               </a>
             </div>
           </div>
@@ -98,9 +100,10 @@
       <div class="card-header">Order Bankin Slip</div>
       <div class="row">
         <div class="card-body">
-          <a target="_blank" :href="booking_details.user_bankslip_path">
-            <img v-bind:src="booking_details.user_bankslip_path" class="uploadedImage">
-          </a>    
+          <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+            <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+            <p v-else>Download</p>
+          </a>
         </div>
       </div>
     </div>
@@ -184,7 +187,18 @@ export default {
       })
   },
   methods: {
-
+    getExtension(path){
+      return path.slice(-3);
+    },
+    isImage(path){
+      var ext = this.getExtension(path);
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+    },
+    getURL(path){
+      var getUrl = window.location;
+      var baseUrl = getUrl.protocol + "//" + getUrl.host;
+      return baseUrl + path;
+    }
   }
 }
 </script>
diff --git a/resources/assets/js/pages/booking/poComplete.vue b/resources/assets/js/pages/booking/poComplete.vue
index 77778baa..2bcec40f 100644
--- a/resources/assets/js/pages/booking/poComplete.vue
+++ b/resources/assets/js/pages/booking/poComplete.vue
@@ -172,6 +172,7 @@ export default {
           name: 'notfound'
         })
       })
+
   },
   methods: {
 
diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index 8db07eaf..1346fc78 100644
--- a/resources/assets/js/pages/booking/transfer.vue
+++ b/resources/assets/js/pages/booking/transfer.vue
@@ -30,6 +30,10 @@
                   <td>Term: </td>
                   <td>{{ booking_details.term }}</td>
                 </tr>
+                <tr>
+                  <td>Beneficiary Account : </td>
+                  <td>{{ booking_details.account_name }}</td>
+                </tr>
               </tbody>
             </table>
           </div>
@@ -52,6 +56,10 @@
                   <td></td>
                   <td><b>MYR {{ booking_details.bia }}</b></td>
                 </tr>
+                <tr>
+                  <td>Beneficiary Account Number : </td>
+                  <td>{{ booking_details.account_num }}</td>
+                </tr>
               </tbody>
             </table>
           </div>
@@ -63,7 +71,10 @@
       <div class="row">
         <div class="card-body">
           <a target="_blank" :href="booking_details.user_bankslip_path">
-            <img v-bind:src="booking_details.user_bankslip_path" class="uploadedImage">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
+            </a>
           </a>    
         </div>
       </div>
@@ -155,7 +166,18 @@ export default {
       })
   },
   methods: {
-
+    getExtension(path){
+      return path.slice(-3);
+    },
+    isImage(path){
+      var ext = this.getExtension(path);
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+    },
+    getURL(path){
+      var getUrl = window.location;
+      var baseUrl = getUrl.protocol + "//" + getUrl.host;
+      return baseUrl + path;
+    }
   }
 }
 </script>
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index c74e9076..12a28cb6 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -12,15 +12,17 @@
         <div class="card-body">
           
           <el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-exceed="handleExceed" :on-preview="handlePreview"
-                      :on-remove="handleRemove"
-                      class="upload-demo uploadAreaOne"
-                      drag
-                      multiple>
+             :on-remove="handleRemove"
+             :on-error="uploadError"
+             class="upload-demo  uploadAreaOne"
+             accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
+             drag
+             multiple>
             <i class="el-icon-upload"/>
             <div class="el-upload__text">Drop file here or
               <em>click to upload</em>
             </div>
-            <div slot="tip" class="el-upload__tip">jpg/png/pdf files with a size less than 3mb</div>
+            <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
           </el-upload>
           <el-upload
             class="upload-demo uploadAreaTwo"
@@ -45,8 +47,9 @@
       <div class="card">
         <div class="card-header">China Bank Slip</div>
         <div class="card-body">
-          <a target="_blank" :href="booking_details.china_bankslip_path">
-            <img v-bind:src="booking_details.china_bankslip_path" class="bankinSlipImage">
+           <a target="_blank" :href="getURL(booking_details.china_bankslip_path)">
+            <img v-if="isImage(booking_details.china_bankslip_path)" v-bind:src="booking_details.china_bankslip_path" class="image">
+            <p v-else>Download</p>
           </a>
         </div>
       </div>
@@ -76,6 +79,10 @@
                   <td>Term: </td>
                   <td>{{ booking_details.term }}</td>
                 </tr>
+                <tr>
+                  <td>Beneficiary Account : </td>
+                  <td>{{ booking_details.account_name }}</td>
+                </tr>
               </tbody>
             </table>
           </div>
@@ -98,6 +105,10 @@
                   <td></td>
                   <td><b>MYR {{ booking_details.bia }}</b></td>
                 </tr>
+                <tr>
+                  <td>Beneficiary Account Number : </td>
+                  <td>{{ booking_details.account_num }}</td>
+                </tr>
               </tbody>
             </table>
           </div>
@@ -108,9 +119,10 @@
       <div class="card-header">Order Bankin Slip</div>
       <div class="row">
         <div class="card-body">
-          <a target="_blank" :href="booking_details.user_bankslip_path">
-            <img v-bind:src="booking_details.user_bankslip_path" class="bankinSlipImage">
-          </a>    
+          <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
+            </a>  
         </div>
       </div>
     </div>
@@ -219,7 +231,6 @@ export default {
       axios
         .post('/api/booking/' + this.$route.params.id + '/confirm-po')
         .then((response) => {
-          console.log(response)
           this.$message({
             showClose: true,
             message: 'Your PO has been uploaded. We are processing the Invoice.',
@@ -233,7 +244,7 @@ export default {
         }).catch((error) => {
             this.$message({
               showClose: true,
-              message: 'Please upload purchase order',
+              message: "Please upload your purchase order",
               type: 'error',
               duration: 30000
             })
@@ -242,6 +253,7 @@ export default {
     },
     handleRemove (file, fileList) {
       console.log(file, fileList)
+      // Should send some reqeust to controller to delete the file
     },
     handlePreview (file) {
       console.log(file)
@@ -251,6 +263,21 @@ export default {
     },
     beforeRemove (file, fileList) {
       return this.$confirm(`确定移除 ${file.name}？`)
+    },
+    uploadError(file,fileList){
+      this.$message.warning(`Incorrect file format or file size too big.`)
+    },
+    getExtension(path){
+      return path.slice(-3);
+    },
+    isImage(path){
+      var ext = this.getExtension(path);
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+    },
+    getURL(path){
+      var getUrl = window.location;
+      var baseUrl = getUrl.protocol + "//" + getUrl.host;
+      return baseUrl + path;
     }
   }
 }
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index b5d1c6bd..f4271e58 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -1,74 +1,78 @@
 <template>
 	<el-main>
-		<progress-track v-model="status"/>
-		<div align="center" v-if="booking.user_bankslip_path">
-			<h4 style="margin-top:5%" >
-			Your Bankslip Has Been Rejected, Please Reupload Your Bankslip <br>
-			Reason : {{ booking.reject_reason }}
-			</h4>
-			<br>
-			<br>
-		</div>
-		<div v-else align="center">
-			<h1>Waiting For Payment</h1>
-		</div>
+	<progress-track v-model="status"/>
+	<div align="center" v-if="booking.user_bankslip_path">
+		<h4 style="margin-top:5%" >
+		Your Bankslip Has Been Rejected, Please Reupload Your Bankslip <br>
+		Reason : {{ booking.reject_reason }}
+		</h4>
+		<br>
+		<br>
+	</div>
+	<div v-else align="center">
+		<h1>Waiting For Payment</h1>
+	</div>
 
-		<div class="row">
-			<table class="table table-striped">
-				<tbody>
-					<tr>
-						<td>Amount : </td>
-						<td><b>RMB {{ booking.amount }}</b></td>
-					</tr>
-					<tr>
-						<td>Bankin Amount : </td>
-						<td><b> MYR {{ booking.bankin_amount }}</b></td>
-					</tr>
-					<tr>
-						<td colspan="2">
-							<b>{{ bankDetail.company_name }}</b><br>
-							{{ bankDetail.bank_name }} : {{ bankDetail.acc_no }}
-						</td>
-					</tr>
-				</tbody>
-			</table>
+	<div class="row">
+		<table class="table table-striped">
+			<tbody>
+				<tr>
+					<td>Amount : </td>
+					<td><b>RMB {{ booking.amount }}</b></td>
+				</tr>
+				<tr>
+					<td>Bankin Amount : </td>
+					<td><b> MYR {{ booking.bankin_amount }}</b></td>
+				</tr>
+				<tr>
+					<td colspan="2">
+						<b>{{ bankDetail.company_name }}</b><br>
+						{{ bankDetail.bank_name }} : {{ bankDetail.acc_no }}
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+	<div class="row timer">
+		<div class="col">
+			<vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
+			<template slot-scope="props">Time Remaining：<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
+			</vue-countdown>
 		</div>
-		<div class="row timer">
-			<div class="col">
-				<vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
-				<template slot-scope="props">Time Remaining：<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
-				</vue-countdown>
-			</div>
+	</div>
+	<!-- upload image -->
+	<div class="row upload">
+		<div class="col">
+			<el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" 
+				:on-preview="handlePictureCardPreview" 
+				:on-remove="handleRemove"
+				:on-error="uploadError"
+				accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
+				list-type="picture-card" align="center">
+				<i class="el-icon-plus" />
+			</el-upload>
+			<el-dialog :visible.sync="dialogVisible">
+				<img :src="dialogImageUrl" width="100%" alt="">
+			</el-dialog>
 		</div>
-		<!-- upload image -->
-		<div class="row upload">
-			<div class="col">
-				<el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
-							list-type="picture-card" align="center">
-					<i class="el-icon-plus" />
-				</el-upload>
-				<el-dialog :visible.sync="dialogVisible">
-					<img :src="dialogImageUrl" width="100%" alt="">
-				</el-dialog>
-			</div>
-		</div>
-		<!-- upload image end -->
-		<div class="row bankinAmount">
-			<div class="col">
-				Bankin Amount (RM) :<br>
-				<el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
-					<el-form-item prop="transfer_amount">
-						<el-input class="transferAmountInput" v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount"/>
-					</el-form-item>
-					<el-form-item>
-						<el-button :loading="loading" type="primary" @click="submitUserSlip('user_slip_form')">Submit</el-button>
-						<router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
-							Upload Later
-						</router-link>
-					</el-form-item>	
-				</el-form>
-			</div>
+	</div>
+	<!-- upload image end -->
+	<div class="row bankinAmount">
+		<div class="col">
+			Bankin Amount (RM) :<br>
+			<el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
+				<el-form-item prop="transfer_amount">
+					<el-input class="transferAmountInput" v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount"/>
+				</el-form-item>
+				<el-form-item>
+					<el-button :loading="loading" type="primary" @click="submitUserSlip('user_slip_form')">Submit</el-button>
+					<router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
+						Upload Later
+					</router-link>
+				</el-form-item>	
+			</el-form>
 		</div>
+	</div>
 	</el-main>
 </template>
 <style>
@@ -101,7 +105,6 @@
 		h1 {
       		font-size: 1em;
     	}
-		
 	}
 </style>
 <script>
@@ -113,8 +116,8 @@ export default {
 	middleware: ['auth'],
 	name: 'MyComponent',
 	components: {
-	'vue-countdown': VueCountdown,
-	'progress-track': ProgressTrack
+		'vue-countdown': VueCountdown,
+		'progress-track': ProgressTrack
 	},
 	data () {
 		return {
@@ -170,9 +173,8 @@ export default {
 			this.booking.user_bankslip_path = response.data.user_bankslip_path
 			this.booking.reject_reason = response.data.reject_reason
 		}
-
-		this.start = true
-		loading.close()
+		console.log(this.booking);
+		this.start = true;
 
 		if (this.booking.timeout < 0){
 			this.$message({
@@ -186,15 +188,47 @@ export default {
 			})
 		}
 		}).catch((error) => {
-		console.log(error)
-		loading.close()
-		this.$router.push({
-			name: 'notfound'
+			this.$router.push({
+				name: 'notfound'
+			})
+			console.log(error)
 		})
-		})
-	},
-	beforeMount() {
-		this.updateBankDetail();
+		axios.get('/api/active-bank')
+			.then((response) => {
+				this.active_bank_setting = response.data;
+				var url = '';
+				if(this.booking.term === 'x1_cash' || this.booking.term === 'x1_cheque' ||this.booking.term === 'x1_ba'){
+					url = '/api/malaysia-bank/' + this.active_bank_setting.x1_bank_id;
+				}
+				else if(this.booking.term === 'x2_cash' || this.booking.term === 'x2_cheque' ||this.booking.term === 'x2_ba'){
+					url = '/api/malaysia-bank/' + this.active_bank_setting.x2_bank_id;
+				}
+
+				axios.get(url)
+					.then((response) => {
+						this.bankDetail = response.data;
+						loading.close()
+					})
+					.catch((error) => {
+						loading.close()
+						console.log(error);
+						this.$message({
+							showClose: true,
+							message: 'Fetch data fail',
+							type: 'error',
+							duration: 10000
+						});
+					});
+			})
+			.catch((error) => {
+				console.log(error);
+				this.$message({
+					showClose: true,
+					message: 'Fetch data fail',
+					type: 'error',
+					duration: 10000
+				});
+			});
 	},
 	methods: {
 		handleCoutdownend () {
@@ -211,6 +245,9 @@ export default {
 		handleRemove (file, fileList) {
 			// console.log(file, fileList)
 		},
+		uploadError(file,fileList){
+			this.$message.warning(`Incorrect file format or file size too big.`)
+		},
 		handlePictureCardPreview (file) {
 			this.dialogImageUrl = file.url
 			this.dialogVisible = true
@@ -259,46 +296,6 @@ export default {
 		},
 		startTimer () {
 			this.start = true;
-		},
-		updateBankDetail(){
-			axios.get('/api/active-bank')
-			.then((response) => {
-				this.active_bank_setting = response.data;
-				console.log(this.active_bank_setting.x1_bank_id);
-				this.getBankDetailWithTerm();
-			})
-			.catch((error) => {
-				console.log(error);
-				this.$message({
-					showClose: true,
-					message: 'Fetch data fail',
-					type: 'error',
-					duration: 10000
-				});
-			});
-		},
-		getBankDetailWithTerm(){
-			var url = '';
-			if(this.booking.term === 'x1_cash' || this.booking.term === 'x1_cheque' ||this.booking.term === 'x1_ba'){
-				url = '/api/malaysia-bank/' + this.active_bank_setting.x1_bank_id;
-			}
-			else if(this.booking.term === 'x2_cash' || this.booking.term === 'x2_cheque' ||this.booking.term === 'x2_ba'){
-				url = '/api/malaysia-bank/' + this.active_bank_setting.x2_bank_id;
-			}
-
-			axios.get(url)
-				.then((response) => {
-					this.bankDetail = response.data;
-				})
-				.catch((error) => {
-					console.log(error);
-					this.$message({
-						showClose: true,
-						message: 'Fetch data fail',
-						type: 'error',
-						duration: 10000
-					});
-				});
 		}
 	}
 }
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index ef4acbdc..8f7c6ee7 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -1,25 +1,29 @@
 <template>
   <el-main>
     <!-- Input-Amount -->
-    <el-row :gutter="20" type="flex" justify="center" align="middle">
-      <el-col :span="20">
-        <div class="grid-content bg-purple" align="center">
-          I need :
-          <el-select v-model="value" placeholder="RMB">
-            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
-          </el-select>
-        </div>
-      </el-col>
-    </el-row>
-    <br>
-    <el-row :gutter="20" type="flex" justify="center" align="middle">
-      <el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8">
-        <div class="grid-content bg-purple" align="right">
-          <el-input v-model="booking.amount" placeholder="Amount" />
-        </div>
-      </el-col>
-    </el-row>
+      <el-row :gutter="20" type="flex" justify="center" align="middle">
+        <el-col :span="20">
+          <div class="grid-content bg-purple" align="center">
+            I need :
+            <el-select v-model="value" placeholder="RMB">
+              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </div>
+        </el-col>
+      </el-row>
+      <br>
+      <el-row :gutter="20" type="flex" justify="center" align="middle">
+        <el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8">
+          <div class="grid-content bg-purple" align="left">
+            <el-input v-model="booking.amount" placeholder="Amount" />
+          </div>
+        </el-col>
+      </el-row>
     <!-- Input-Amount-end -->
+
+    <div align="right">
+    <el-button icon="el-icon-refresh" type="primary" size="mini" @click="refreshRate()">Refresh Rate</el-button></div>
+
     <hr>
     <!-- Rate-Display -->
     <br>
@@ -136,9 +140,9 @@
     <!-- Rate-Display-end -->
 
     <!-- Form_popup -->
-    <el-dialog :visible.sync="dialogFormVisible" :fullscreen="true" title="Booking" center>
-      <el-form ref="bookingForm" :model="bookingForm" :rules="rules">
-        <div align="center">
+      <el-dialog :visible.sync="dialogFormVisible" :fullscreen="true" title="Booking" center>
+        <el-form ref="bookingForm" :model="bookingForm" :rules="rules">
+          <div align="center">
           <el-form-item prop="payment_for">
             <el-select v-model="bookingForm.payment_for" placeholder="Payment For" style="width: 80%" required="true">
               <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
@@ -147,27 +151,27 @@
           <el-form-item prop="order_no">
             <el-input v-model="bookingForm.order_no" placeholder="Order No." style="width: 80%" required="true" />
           </el-form-item>
-          <el-form-item prop="account_name">
-            <el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Account" style="width: 80%" required="true" />
-          </el-form-item>
-          <el-form-item prop="bank_name">
-            <el-input v-model="bookingForm.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" />
-          </el-form-item>
-          <el-form-item prop="bank_branch">
-            <el-input v-model="bookingForm.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%" />
-          </el-form-item>
-          <el-form-item prop="account_num">
-            <el-input v-model="bookingForm.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"
-            />
-          </el-form-item>
-          <el-form-item>
-            <el-button @click="dialogFormVisible = false">Cancel</el-button>
+            <el-form-item prop="account_name">
+              <el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Account" style="width: 80%" required="true" />
+            </el-form-item>
+            <el-form-item prop="bank_name">
+              <el-input v-model="bookingForm.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" />
+            </el-form-item>
+            <el-form-item prop="bank_branch">
+              <el-input v-model="bookingForm.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%" />
+            </el-form-item>
+            <el-form-item prop="account_num">
+              <el-input v-model="bookingForm.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="dialogFormVisible = false">Cancel</el-button>
 
-            <el-button :loading="loading" type="primary" @click="getCalculationValue('bookingForm')">Book Now</el-button>
-          </el-form-item>
-        </div>
-      </el-form>
-    </el-dialog>
+              <el-button :loading="loading" type="primary" @click="getCalculationValue('bookingForm')">Book Now</el-button>
+            </el-form-item>
+          </div>
+        </el-form>
+      </el-dialog>
     <!-- Form_popup-end -->
 
     <!-- Booking_confirmation_popup -->
@@ -182,32 +186,66 @@
             <td>Customer Marking : </td>
             <td> {{ bookingConfirmTable.marking }}</td>
           </tr>
+          <tr>
+            <td>Payment for (Order No.) : </td>
+            <td> {{ bookingConfirmTable.payment_order }}</td>
+          </tr>
           <tr>
             <td>Payment Method : </td>
             <td> {{ bookingConfirmTable.payment_method }}</td>
           </tr>
           <tr>
-            <td>CNY/RMB : </td>
-            <td> {{ bookingConfirmTable.amount }}</td>
+            <td>Remarks : </td>
+            <td> {{ bookingConfirmTable.remark }}</td>
           </tr>
           <tr>
-            <td>+ Service Charge : </td>
-            <td> RMB {{ bookingConfirmTable.service_charge }}</td>
+            <td></td>
+            <td></td>
           </tr>
           <tr>
-            <td> RATE :</td>
-            <td> {{ bookingConfirmTable.rate }}</td>
-          </tr>
-          <tr>
-            <td>China Beneficiary Acc :</td>
-            <td> {{ bookingConfirmTable.account_name }}</td>
-          </tr>
-          <tr>
-            <td>Bank in Amount :</td>
+            <td>CNY/RMB :</td>
             <td>
-              <b> RM {{ bookingConfirmTable.bankin_amount }}</b>
+              <b> RM {{ bookingConfirmTable.amount }}</b>
             </td>
           </tr>
+          <tr>
+            <td>+ Service Charges :</td>
+            <td>
+             RM {{ bookingConfirmTable.service_charge }}
+            </td>
+          </tr>
+          <tr>
+            <td>/ Rate :</td>
+            <td>
+               {{ bookingConfirmTable.rate }}
+            </td>
+          </tr>
+          <tr>
+            <td></td>
+            <td>
+              <b> RM {{ bookingConfirmTable.subtotal }}</b>
+            </td>
+          </tr>
+          <tr>
+            <td>+ Tax :</td>
+            <td>
+               RM {{ bookingConfirmTable.taxAmount }}
+            </td>
+          </tr>
+          <tr>
+            <td>+ Billing Charge :</td>
+            <td>
+               RM {{ bookingConfirmTable.billingChargeAmount }} 
+            </td>
+          </tr>
+          <tr>
+            <td>Bank In Amount :</td>
+            <td><b>RM {{ bookingConfirmTable.bankin_amount }}</b></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+          </tr>
         </tbody>
       </table>
       <span slot="footer" class="dialog-footer">
@@ -221,12 +259,8 @@
     <br>
     <hr>
     <div align="right">
-      <el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button>
-    </div>
-    <p class="mobile-view"> Scroll left or right to navigate the table
-      <i class="fas fa-arrows-alt-h"></i>
-    </p>
-    <!-- Booking Table -->
+<el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button></div>
+<!-- Booking Table -->
     <el-row :gutter="20">
       <div>
         <el-table :data="bookingTable">
@@ -235,12 +269,11 @@
             <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 :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
           <el-table-column label="Rate" width="74" prop="rate" />
           <el-table-column label="Amount" prop="amount" justify="center" width="110" />
           <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount"
-            prop="transfer_amount" width="170" />
+                           prop="transfer_amount" width="170" />
           <!-- <el-table-column label="ETA" sortable width="100"/> -->
           <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
         </el-table-column> -->
@@ -258,7 +291,7 @@
           <!-- <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">
+                           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>
@@ -267,9 +300,7 @@
           </el-table-column>
         </el-table>
       </div>
-    </el-row>
-    <br>
-    <br>
+    </el-row><br><br>
     <div align="right">
       <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
         Previous
@@ -280,57 +311,52 @@
       </el-button>
     </div>
     <!-- Booking Table-end -->
+
   </el-main>
 </template>
 <style>
   .el-tag {
     cursor: pointer;
   }
-
-  @media only screen and (min-width: 768px) {
-    .mobile-view {
-      display: none;
-    }
-  }
 </style>
 <script>
-  import Form from 'vform'
-  import LoginWithGithub from '~/components/LoginWithGithub'
-  import store from '~/store'
-  import axios from 'axios'
+import Form from 'vform'
+import LoginWithGithub from '~/components/LoginWithGithub'
+import store from '~/store'
+import axios from 'axios'
 
-  export default {
-    middleware: ['auth'],
+export default {
+  middleware: ['auth'],
 
-    data() {
-      return {
-        confirmForm: new Form({
-          term: '',
-          amount: ''
-        }),
-        rate: {
-          x1_ba: null,
-          x1_cheque: null,
-          x1_cash: null,
-          x2_ba: null,
-          x2_cash: null,
-          x2_cheque: null,
-        },
-        loading: false,
-        loading_btn: false,
-        status: '',
-        booking: {
-          amount: '',
-          rate: ''
-        },
-        bookingForm: {
+  data () {
+    return {
+      confirmForm: new Form({
+        term: '',
+        amount: ''
+      }),
+      rate: {
+        x1_ba: null,
+        x1_cheque: null,
+        x1_cash: null,
+        x2_ba: null,
+        x2_cash: null,
+        x2_cheque: null,
+      },
+      loading : null,
+      loading_btn: false,
+      status: '',
+      booking: {
+        amount: '',
+        rate: ''
+      },
+      bookingForm: {
           account_name: '',
           bank_name: '',
           bank_branch: '',
           account_num: '',
           payment_for: 'Full Payment'
-        },
-        rules: {
+      },
+      rules: {
           order_no: [{
             required: true,
             message: 'Please input order number',
@@ -341,284 +367,284 @@
             message: 'Please input payment for',
             trigger: 'change'
           }],
-          amount: [{
-            required: true,
-            message: 'Please input amount',
-            trigger: 'change'
-          }],
-          bank_name: [{
-            required: true,
-            message: 'Please input bank name',
-            trigger: 'change'
-          }],
-          account_name: [{
-            required: true,
-            message: 'Please input account name',
-            trigger: 'change'
-          }],
-          bank_branch: [{
-            required: true,
-            message: 'Please input branch',
-            trigger: 'change'
-          }],
-          account_num: [{
-            required: true,
-            message: 'Please input account number',
-            trigger: 'change'
-          }]
-        },
-        term: '',
-        options1: [{
-          value: 'RMB',
-          label: 'RMB'
+        amount: [{
+          required: true,
+          message: 'Please input amount',
+          trigger: 'change'
+        } ],
+        bank_name: [{
+          required: true,
+          message: 'Please input bank name',
+          trigger: 'change'
+        } ],
+        account_name: [{
+          required: true,
+          message: 'Please input account name',
+          trigger: 'change'
         }],
-        options2: [{
-          value2: 'MYR',
-          label2: 'MYR'
-        }],
-        options3: [{
-          value: 'Full Payment',
-          label: 'Full Payment'
+        bank_branch: [{
+          required: true,
+          message: 'Please input branch',
+          trigger: 'change'
         }],
+        account_num: [{
+          required: true,
+          message: 'Please input account number',
+          trigger: 'change'
+        }]
+      },
+      term: '',
+      options1: [{
         value: 'RMB',
-        dialogFormVisible: false,
-        dialogFormVisible1: false,
-        formLabelWidth: '0px',
-        bookingTable: null,
-        url: 'api/booking',
-        pagination: [],
-        bookingConfirmTable: {
-          date: 'undefined',
-          marking: 'undefined',
-          payment_method: 'undefined',
-          amount: 'undefined',
-          service_charge: 'undefined',
-          rate: 'undefined',
-          bankin_amount: 'undefined',
-          china_beneficiary: 'undefined',
-          status: 2
-        }
+        label: 'RMB'
+      }],
+      options2: [{
+        value2: 'MYR',
+        label2: 'MYR'
+      }],
+      options3: [{
+        value: 'Full Payment',
+        label: 'Full Payment'
+      }],
+      value: 'RMB',
+      dialogFormVisible: false,
+      dialogFormVisible1: false,
+      formLabelWidth: '0px',
+      bookingTable: [
+      ],
+      url: 'api/booking',
+      pagination: [],
+      bookingConfirmTable: {
+        date: 'undefined',
+        marking: 'undefined',
+        payment_method: 'undefined',
+        amount: 'undefined',
+        service_charge: 'undefined',
+        rate: 'undefined',
+        bankin_amount: 'undefined',
+        china_beneficiary: 'undefined',
+        status: 2
       }
+    }
+  },
+  mounted () {
+    this.getBooking();
+    this.initBooking();
+    this.getRate();
+  },
+  methods: {
+    getBooking(){
+      let $this = this
+      axios.get(this.url).then(response => {
+        this.bookingTable = response.data.data
+        $this.makePagination(response.data)
+        console.log(response)
+      })
     },
-    mounted() {
+    getRate() {
+      let $this = this
+      axios.get('api/rate').then(response => {
+        this.rate = response.data
+      })
+    },
+    refreshRate() {
+      let $this = this
+      axios.get('api/rate').then(response => {
+        this.rate = response.data
+        this.$message({
+          showClose: true,
+          message: 'Rate is updated',
+          type: 'success',
+          duration: 5000
+        })
+      })
+    },
+    initBooking() {
+      let $this = this
+      axios.get(this.url).then(response => {
+        this.bookingTable = response.data.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
+        })
+      })
+    },
+    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
+      console.log(this.pagination)
+    },
+    fetchPaginateBooking(url) {
+      this.url = url
       this.getBooking()
-      this.RefreshBooking()
-      this.getRate()
     },
-    methods: {
-      getRate() {
-        let $this = this
-        axios.get(this.url).then(response => {
-          this.bookingTable = response.data.data
-
-          $this.makePagination(response.data)
+    // TODO fetch booking data on load
+    formatter (row, column) {
+      return row.address
+    },
+    filterTag (value, row) {
+      return row.tag === value
+    },
+    filterHandler (value, row, column) {
+      const property = column['property']
+      return row[property] === value
+    },
+    acceptTerm: function (newterm) {
+      if (this.booking.amount == '') {
+        this.$message({
+          message: 'Please input amount',
+          type: 'warning'
         })
-      },
-      getBooking() {
-        let $this = this
-        axios.get('api/rate').then(response => {
-          this.rate = response.data
-          console.log(this.rate)
-        })
-      },
-      RefreshBooking() {
-        let $this = this
-        this.loading_btn = true
-        axios.get(this.url).then(response => {
-          this.loading_btn = false;
-          this.bookingTable = response.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
-      },
-      fetchPaginateBooking(url) {
-        this.url = url
-        this.getBooking()
-      },
-      // TODO fetch booking data on load
-      formatter(row, column) {
-        return row.address
-      },
-      filterTag(value, row) {
-        return row.tag === value
-      },
-      filterHandler(value, row, column) {
-        const property = column['property']
-        return row[property] === value
-      },
-      acceptTerm: function (newterm) {
-        if (this.booking.amount == '') {
-          this.$message({
-            message: 'Please input amount',
-            type: 'warning'
-          })
-          return
-        }
-        this.dialogFormVisible = true
-        this.term = newterm
-      },
-      // Get calculation before submitting booking
-      getCalculationValue(formName) {
-        this.loading = true
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            let newConfirmation = {
-              amount: this.booking.amount,
-              term: this.term
-            }
-            axios.post('api/booking/calculation', newConfirmation)
-              .then((response) => {
-                this.loading = false
-                console.log(response)
-                this.bookingConfirmTable.date = response.data.date
-                this.bookingConfirmTable.marking = response.data.marking
-                this.bookingConfirmTable.payment_method = response.data.payment_method
-                this.bookingConfirmTable.amount = response.data.amount
-                this.bookingConfirmTable.service_charge = response.data.service_charge
-                this.bookingConfirmTable.rate = response.data.rate
-                this.bookingConfirmTable.bankin_amount = response.data.bankin_amount
-                this.bookingConfirmTable.account_name = this.bookingForm.account_name
-                this.dialogFormVisible = false
-                this.dialogFormVisible1 = true
-              })
-              .catch((error) => {
-                this.$message({
+        return
+      }
+      this.dialogFormVisible = true
+      this.term = newterm
+    },
+    // Get calculation before submitting booking
+    getCalculationValue (formName) {
+      this.loading = true
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          let newConfirmation = {
+            amount: this.booking.amount,
+            term: this.term
+          }
+          axios.post('api/booking/calculation', newConfirmation)
+            .then((response) => {
+              this.loading = false
+              console.log(response)
+              this.bookingConfirmTable = response.data;
+              this.bookingConfirmTable.payment_for = 'Full Payment';//For future purpose
+              this.bookingConfirmTable.remark = '';//For future purpose
+              this.bookingConfirmTable.payment_order = '';//For future purpose
+              this.dialogFormVisible = false
+              this.dialogFormVisible1 = true
+            })
+            .catch((error) => {
+              this.$message({
                   showClose: true,
                   message: error.response.data.message,
                   type: 'error',
                   duration: 10000
-                });
-                this.loading = false
-                console.log(error)
+              });
+              this.loading = false
+              console.log(error)
+            })
+        } else {
+          this.loading = false
+          this.$message({
+                showClose: true,
+                message: 'Please fill the booking form in full.',
+                type: 'error',
+                duration: 10000
               })
-          } else {
-            this.loading = false
-            this.$message({
-              showClose: true,
-              message: 'Please fill the booking form in full.',
-              type: 'error',
-              duration: 10000
-            })
+        }
+      })
+    },
+    createBooking: function () {
+      this.loading = true,
+      this.dialogFormVisible1 = true
+          let newBooking = {
+            account_name: this.bookingForm.account_name,
+            account_num: this.bookingForm.account_num,
+            bank_name: this.bookingForm.bank_name,
+            bank_branch: this.bookingForm.bank_branch,
+            amount: this.booking.amount,
+            term: this.term
           }
-        })
-      },
-      createBooking: function () {
-        this.loading = true,
-          this.dialogFormVisible1 = true
-        let newBooking = {
-          account_name: this.bookingForm.account_name,
-          account_num: this.bookingForm.account_num,
-          bank_name: this.bookingForm.bank_name,
-          bank_branch: this.bookingForm.bank_branch,
-          amount: this.booking.amount,
-          term: this.term
-        }
-
-        console.log(newBooking)
-        axios.post('api/booking', newBooking)
-          .then((response) => {
-            this.loading = false
-            // push with return id
-            this.$router.push({
-              name: 'booking.user.upload',
-              params: {
-                id: response.data.id
-              }
+          axios.post('api/booking', newBooking)
+            .then((response) => {
+              this.loading = false
+              // push with return id
+              this.$router.push({
+                name: 'booking.user.upload',
+                params: {id: response.data.id }
+              })
+              // pass variable to another router
             })
+            .catch((error) => {
+              console.log(error)
+              this.loading = false
+              this.$message({
+                showClose: true,
+                message: 'Internal server issues. Please contact support',
+                type: 'error',
+                duration: 10000
+              })
+             
+            })
+    },
+    BookingStatus (status, booking_id) {
+      console.log(status)
+      // TODO : Get booking status from server
+      this.status = status
 
-            // pass variable to another router
+      switch (this.status) {
+        case 1:
+          this.$router.push({
+            name: 'booking.user.upload',
+            params: {id: booking_id }
           })
-          .catch((error) => {
-            console.log(error)
-            this.loading = false
-            this.$message({
-              showClose: true,
-              message: 'Internal server issues. Please contact support',
-              type: 'error',
-              duration: 10000
-            })
-
+          break
+        case 2:
+          this.$router.push({
+            name: 'booking.user.upload',
+            params: {id: booking_id }
           })
-      },
-      BookingStatus(status, booking_id) {
-        console.log(status)
-        // TODO : Get booking status from server
-        this.status = status
+          break
+        case 3:
+          this.$router.push({
+            name: 'booking.user.confirmation',
+            params: {id: booking_id }
+          })
+          break
+        case 4:
+          this.$router.push({
+            name: 'booking.user.transfer',
+            params: {id: booking_id }
+          })
+          break
 
-        switch (this.status) {
-          case 1:
-            this.$router.push({
-              name: 'booking.user.upload',
-              params: {
-                id: booking_id
-              }
-            })
-            break
-          case 2:
-            this.$router.push({
-              name: 'booking.user.upload',
-              params: {
-                id: booking_id
-              }
-            })
-            break
-          case 3:
-            this.$router.push({
-              name: 'booking.user.confirmation',
-              params: {
-                id: booking_id
-              }
-            })
-            break
-          case 4:
-            this.$router.push({
-              name: 'booking.user.transfer',
-              params: {
-                id: booking_id
-              }
-            })
-            break
+        case 5:
+          this.$router.push({
+            name: 'booking.user.uploadpo',
+            params: {id: booking_id }
+          })
+          break
 
-          case 5:
-            this.$router.push({
-              name: 'booking.user.uploadpo',
-              params: {
-                id: booking_id
-              }
-            })
-            break
+        case 6:
+          this.$router.push({
+            name: 'booking.user.po',
+            params: {id: booking_id }
+          })
+          break
 
-          case 6:
-            this.$router.push({
-              name: 'booking.user.po',
-              params: {
-                id: booking_id
-              }
-            })
-            break
+        case 7:
+          this.$router.push({
+            name: 'booking.user.complete',
+            params: {id: booking_id }
+          })
+          break
 
-          case 7:
-            this.$router.push({
-              name: 'booking.user.complete',
-              params: {
-                id: booking_id
-              }
-            })
-            break
-
-          default:
-            break
-        }
+        default:
+          break
       }
     }
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/settings/admin-billing-charge-setting.vue b/resources/assets/js/pages/settings/admin-billing-charge-setting.vue
new file mode 100644
index 00000000..1a3c2ecd
--- /dev/null
+++ b/resources/assets/js/pages/settings/admin-billing-charge-setting.vue
@@ -0,0 +1,65 @@
+<template>
+    <div>
+        <span align="center">
+            <h4>Billing Charge Setting</h4>
+        </span>
+        <br>
+        <el-form>
+            <el-form-item align="center">
+                Billing Charge Rate : 
+                <el-input size="mini" v-model="billing_charge_setting.billing_charge_rate" style=width:20%></el-input> %
+            </el-form-item>
+            <el-form-item align="center">
+                <el-button type="primary" align="center" :loading="loading_btn" size="primary" @click="updateBillingChargeSetting">Update</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    import axios from 'axios'
+    export default {
+        // TODO : update credit limit and timeout 
+        data() {
+            return {
+                loading_btn: false,
+                billing_charge_setting: {
+                    billing_charge_rate : null
+                },
+            };
+        },
+        beforeMount() {
+            this.getBillingChargeSetting();
+        },
+        methods: {
+            getBillingChargeSetting() {
+                axios.get('/api/setting-billing-charge').then(response => {
+                    this.billing_charge_setting = response.data
+                })
+            },
+            updateBillingChargeSetting (){
+                this.loading_btn = true
+				axios.put('/api/setting-billing-charge', this.billing_charge_setting)
+				.then((response) => {
+                    this.loading_btn = false
+						this.$message({
+						showClose: true,
+						message: 'Success',
+						type: 'success',
+						duration: 5000
+					});
+				})
+				.catch((error) => {
+                    this.loading_btn = false
+					console.log(error);
+					this.$message({
+						showClose: true,
+						message: 'Update failed, please contact support',
+						type: 'error',
+						duration: 10000
+					});
+				})
+			},
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/settings/admin-marking-setting.vue b/resources/assets/js/pages/settings/admin-marking-setting.vue
index b7531562..07bccc2d 100644
--- a/resources/assets/js/pages/settings/admin-marking-setting.vue
+++ b/resources/assets/js/pages/settings/admin-marking-setting.vue
@@ -1,65 +1,220 @@
 <template>
 <div>
 	<span align="center"><h4>Marking Setting</h4></span><br>
-	<el-form label-width="150px">
-		<el-form-item label="Marking" :class="{'has-error': errors.has('marking') }">
-			<el-input v-model="markingForm.marking" v-validate="'required|max:255'" name="marking"></el-input>
-			<span class="error-message text-danger" v-if="errors.has('marking')">{{ errors.first('marking') }}<br/></span>
-		</el-form-item>
-		<el-form-item label="Email" :class="{'has-error': errors.has('email') }">
-			<el-input v-model="markingForm.email" v-validate="'required|email|max:255'" name="email"></el-input>
-			<span class="error-message text-danger" v-if="errors.has('email')">{{ errors.first('email') }}<br/></span>
-		</el-form-item>
-	</el-form>
-	<div align="right">
-		<el-button type="primary" icon="el-icon-plus" @click="CreateMarking" :disabled="errors.any() || markingForm.email=='' || markingForm.marking=='' ? true : false">Add New Data</el-button>
-	</div>
+		<el-table :data="tableData" border style="width: 100%">
+			<el-table-column prop="marking" label="Marking" width="120px"></el-table-column>
+			<el-table-column prop="email" label="Email"></el-table-column>
+			<el-table-column label="Action">
+				<template slot-scope="scope">
+					<el-button type="text" size="small" @click="PopOutEditMarking(scope.$index)">Edit</el-button>
+					<el-button type="text" size="small" @click="DeleteMarking(tableData[scope.$index].id)">Delete</el-button>
+				</template>
+			</el-table-column>
+		</el-table><br>
+		<div align="right">
+			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddMarking">Add New Data</el-button>
+		</div>
+		<!-- popup add new data -->
+			<el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible" width="40%">
+				<el-form ref="markingForm" :model="markingForm" :rules="rules">
+			      <div align="right">
+			        <el-form-item label="Marking" prop="marking">
+			          <el-input v-model="markingForm.marking" type="text" style="width: 80%" />
+			        </el-form-item>
+			        <el-form-item label="Email" prop="email">
+			          <el-input v-model="markingForm.email" type="text" style="width: 80%" />
+			        </el-form-item>
+			      </div>
+			    </el-form>
+				<div align="right">
+					<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
+					<el-button type="primary" icon="el-icon-plus" @click="CreateMarking('markingForm')">Add New Data</el-button>
+				</div>
+			</el-dialog>
+			<el-dialog align="center" :visible.sync="DoneAddDatadialogVisible" width="30%">
+				<span>Data Added Successfully</span><br><br>
+				<div align="center">
+						<el-button type="primary" @click="DoneAddDatadialogVisible = false">OK</el-button>
+				</div>
+			</el-dialog>
+		<!-- popup add new data end -->
+		<!-- popup edit data -->
+			<el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible" width="40%">
+				<el-form ref="markingForm" :model="markingForm" :rules="rules">
+			      <div align="right">
+			        <el-form-item label="Marking" prop="marking">
+			          <el-input v-model="markingForm.marking" type="text" style="width: 80%" />
+			        </el-form-item>
+			        <el-form-item label="Email" prop="email">
+			          <el-input v-model="markingForm.email" type="text" style="width: 80%" />
+			        </el-form-item>
+			      </div>
+			    </el-form>
+				<div align="right">
+					<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
+					<el-button type="primary" icon="el-icon-plus" @click="EditMarking">Submit</el-button>
+				</div>
+			</el-dialog>
+			<el-dialog align="center" :visible.sync="DoneUpdateDatadialogVisible" width="30%">
+				<span>Data Updated Successfully</span><br><br>
+				<div align="center">
+					<el-button type="primary" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
+				</div>
+			</el-dialog>
+		<!-- popup edit data end -->
+		<!-- popup delete -->
+			<el-dialog align="center" :visible.sync="DeleteAdddialogVisible" width="30%">
+				<span>Data Deleted</span><br><br>
+				<div align="center">
+					<el-button type="primary" @click="DeleteAdddialogVisible = false">OK</el-button>
+				</div>
+			</el-dialog>
+		<!-- popup delete end -->
 </div>
 </template>
 
 <script>
 	import axios from 'axios'
-
 	export default {
 		data() {
 			return {
 				loading_btn: false,
-				markingForm : {
-					marking : '',
-					email : '',
-				},
+		        markingForm: {
+		          	marking : null,
+					email : null,
+		        },
+				rules: {
+			      email: [{
+			        required: true,
+			        message: 'Please input email',
+			        trigger: 'change'
+			      }],
+			      marking: [{
+			        required: true,
+			        message: 'Please input marking',
+			        trigger: 'change'
+			      }]
+		        },
+		        tableData: [],
+				EditDatadialogVisible: false,
+				DeleteAdddialogVisible: false,
+				AddDatadialogVisible: false,
+				DoneAddDatadialogVisible: false,
+				DoneUpdateDatadialogVisible: false,
+				currentEdit : -1,
 			}
 		},
+		mounted(){
+	    	this.UpdateTableData();
+	    },
 		methods: {
-			CreateMarking : function(){
-				axios.post('/api/setting-marking', this.markingForm)
-					.then((response) => {
-	                    this.loading_btn = false
-							this.$message({
-							showClose: true,
-							message: 'Success',
-							type: 'success',
-							duration: 5000
-						});
-						this.ClearMarkingForm();
-					})
-					.catch((error) => {
-	                    this.loading_btn = false
-						console.log(error);
+			CreateMarking : function(formName){	
+				this.AddDatadialogVisible = false;
+				this.$refs[formName].validate((valid) => {
+					if (valid) {
+						axios.post('/api/setting-marking', this.markingForm)
+							.then((response) => {
+			                    this.loading_btn = false
+								this.$message({
+									showClose: true,
+									message: 'Success',
+									type: 'success',
+									duration: 5000
+								});
+								this.ClearMarkingForm();
+								this.UpdateTableData();
+							})
+							.catch((error) => {
+			                    this.loading_btn = false
+								console.log(error);
+								this.$message({
+									showClose: true,
+									message: 'Update failed, please contact support',
+									type: 'error',
+									duration: 10000
+								});
+								this.ClearMarkingForm();
+								this.UpdateTableData();
+							});
+					}
+					else{
 						this.$message({
 							showClose: true,
-							message: 'Update failed, please contact support',
+							message: 'Please fillup form',
 							type: 'error',
 							duration: 10000
 						});
-						this.ClearMarkingForm();
-					});
+					}
+				});				
 			},
 			ClearMarkingForm : function(){
 				this.markingForm.marking = '';
 				this.markingForm.email = '';
 			},
-		}
+			UpdateTableData : function(){
+				axios.get('/api/setting-marking', this.markingForm)
+					.then((response) => {
+						this.tableData = response.data;
+					})
+					.catch((error) => {
+						console.log(error);
+						this.$message({
+							showClose: true,
+							message: 'Fetch data fail',
+							type: 'error',
+							duration: 10000
+						});
+					})
+			},
+			DeleteMarking : function(marking_id){
+				this.DeleteAdddialogVisible = true;
+				console.log(marking_id);
+				axios.delete('/api/setting-marking/' + marking_id)
+					.then((response) => {
+						console.log('123fuck');
+						this.UpdateTableData();
+					})
+					.catch((error) => {
+						console.log(error);
+						this.$message({
+							showClose: true,
+							message: 'Delete data fail',
+							type: 'error',
+							duration: 10000
+						});
+					});
+			},
+			EditMarking : function(){
+				this.EditDatadialogVisible = false;
+				this.DoneUpdateDatadialogVisible = true;
+				axios.put('/api/setting-marking/' + this.currentEdit, this.markingForm)
+					.then((response) => {
+						this.UpdateTableData();
+					})
+					.catch((error) => {
+						console.log(error);
+						this.$message({
+							showClose: true,
+							message: 'Update Fail',
+							type: 'error',
+							duration: 10000
+						});
+					});
+			},
+			PopOutAddMarking : function(){
+				this.AddDatadialogVisible = true;
+				this.ClearMarkingForm();
+			},
+			PopOutEditMarking : function(tableDataRow){
+				this.EditDatadialogVisible = true;
+				this.FillupMarkingForm(tableDataRow);
+				this.currentEdit = this.tableData[tableDataRow].id;
+			},
+			FillupMarkingForm : function(tableDataRow){
+				this.markingForm.marking = this.tableData[tableDataRow].marking;
+				this.markingForm.email = this.tableData[tableDataRow].email;
+			}
+		},	
 	}
 </script>
 <style type="text/css">
diff --git a/resources/assets/js/pages/settings/admin-tax-setting.vue b/resources/assets/js/pages/settings/admin-tax-setting.vue
new file mode 100644
index 00000000..b26c8636
--- /dev/null
+++ b/resources/assets/js/pages/settings/admin-tax-setting.vue
@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <span align="center">
+            <h4>Tax Setting</h4>
+        </span>
+        <br>
+        <el-form>
+            <el-form-item align="center">
+                Tax : 
+                <el-input size="mini" v-model="tax_setting.tax_rate" style=width:20%></el-input> %
+            </el-form-item>
+            <el-form-item align="center">
+                <el-button type="primary" align="center" :loading="loading_btn" size="primary" @click="updateTaxSetting">Update</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+    import axios from 'axios'
+    export default {
+        data() {
+            return {
+                loading_btn: false,
+                tax_setting: {
+                    tax_rate : null
+                },
+            };
+        },
+        mounted() {
+            this.getTaxSetting();
+        },
+        methods: {
+            getTaxSetting() {
+                axios.get('/api/setting-tax').then(response => {
+                    this.tax_setting = response.data;
+                    console.log(this.tax_setting);
+                })
+            },
+            updateTaxSetting (){
+                this.loading_btn = true
+                console.log(this.tax_setting);
+				axios.put('/api/setting-tax', this.tax_setting)
+				.then((response) => {
+                    this.loading_btn = false
+						this.$message({
+						showClose: true,
+						message: 'Success',
+						type: 'success',
+						duration: 5000
+					});
+				})
+				.catch((error) => {
+                    this.loading_btn = false
+					console.log(error);
+					this.$message({
+						showClose: true,
+						message: 'Update failed, please contact support',
+						type: 'error',
+						duration: 10000
+					});
+				})
+			},
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/settings/index.vue b/resources/assets/js/pages/settings/index.vue
index 878e7c8f..782a8077 100644
--- a/resources/assets/js/pages/settings/index.vue
+++ b/resources/assets/js/pages/settings/index.vue
@@ -80,6 +80,18 @@
             route: 'settings.admin-marking-setting',
             role: 'admin'
           },
+          {
+            icon: 'building',
+            name: this.$t('Tax Setting'),
+            route: 'settings.admin-tax-setting',
+            role: 'admin'
+          },
+          {
+            icon: 'building',
+            name: this.$t('Billing Charge Setting'),
+            route: 'settings.admin-billing-charge-setting',
+            role: 'admin'
+          },
         ]
       }
     }
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index 34a10e7f..91506aeb 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -15,6 +15,8 @@ const SettingsAdminChinaBank = () => import('~/pages/settings/admin-china-bank')
 const SettingsAdminMalaysiaBank = () => import('~/pages/settings/admin-malaysia-bank').then(m => m.default || m)
 const SettingsAdminBankSetting = () => import('~/pages/settings/admin-bank-setting').then(m => m.default || m)
 const SettingsAdminMarkingSetting = () => import('~/pages/settings/admin-marking-setting').then(m => m.default || m)
+const SettingsAdminTaxSetting = () => import('~/pages/settings/admin-tax-setting').then(m => m.default || m)
+const SettingsAdminBillingChargeSetting = () => import('~/pages/settings/admin-billing-charge-setting').then(m => m.default || m)
 
 // Booking
 const Upload = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
@@ -26,6 +28,7 @@ const Completed = () => import('~/pages/booking/completed').then(m => m.default
 const PurchaseOrder = () => import('~/pages/booking/po').then(m => m.default || m)
 
 // Admin booking
+const BookingDetail = () => import('~/pages/admin/booking/bookingDetail').then(m => m.default || m)
 const Verification = () => import('~/pages/admin/booking/verification').then(m => m.default || m)
 const Supplier = () => import('~/pages/admin/booking/supplierBooking').then(m => m.default || m)
 const SupplierReport = () => import('~/pages/admin/booking/supplierReport').then(m => m.default || m)
@@ -59,7 +62,9 @@ export default [
       { path: 'admin-china-bank', name: 'settings.admin-china-bank', component: SettingsAdminChinaBank },
       { path: 'admin-malaysia-bank', name: 'settings.admin-malaysia-bank', component: SettingsAdminMalaysiaBank },
       { path: 'admin-bank-setting', name: 'settings.admin-bank-setting', component: SettingsAdminBankSetting },
-      { path: 'admin-marking-setting', name: 'settings.admin-marking-setting', component: SettingsAdminMarkingSetting }
+      { path: 'admin-marking-setting', name: 'settings.admin-marking-setting', component: SettingsAdminMarkingSetting },
+      { path: 'admin-tax-setting', name: 'settings.admin-tax-setting', component: SettingsAdminTaxSetting },
+      { path: 'admin-billing-charge-setting', name: 'settings.admin-billing-charge-setting', component: SettingsAdminBillingChargeSetting },
     ] },
 
   // Booking
@@ -72,6 +77,7 @@ export default [
   { path: '/booking/:id/complete', name: 'booking.user.complete', component: Completed },
 
   // Admin booking
+  { path: '/booking/:id/booking-detail', name: 'booking.admin.booking.detail', component: BookingDetail },
   { path: '/booking/:id/verification', name: 'booking.admin.verification', component: Verification },
   { path: '/booking/:id/supplier', name: 'booking.admin.supplier', component: Supplier },
   { path: '/booking/:id/supplier-report', name: 'booking.admin.supplier.report', component: SupplierReport },
diff --git a/resources/assets/js/store/modules/auth.js b/resources/assets/js/store/modules/auth.js
index 65d2e8cd..6f2d0dc6 100644
--- a/resources/assets/js/store/modules/auth.js
+++ b/resources/assets/js/store/modules/auth.js
@@ -25,7 +25,6 @@ export const mutations = {
   },
 
   [types.FETCH_USER_SUCCESS] (state, { user }) {
-    console.log(user)
     state.user = user
     state.role = user.role
   },
diff --git a/routes/api.php b/routes/api.php
index 2774be94..7669ab64 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -49,6 +49,8 @@ Route::group(['middleware' => 'auth:api'], function () {
 
 	// for both user and admin
 	Route::get('active-bank', 'SettingActiveBankController@index');	
+	Route::put('setting-tax', 'SettingActiveBankController@index');
+	Route::put('setting-billing-charge', 'SettingBillingChargeController@index');
 	Route::get('malaysia-bank/{malaysiaBank}', 'SettingMalaysiaBankController@show');
 });
 
@@ -74,6 +76,10 @@ Route::group(['middleware' => ['role:admin']], function() {
 
 	Route::put('setting-active-bank', 'SettingActiveBankController@update');
 
+	Route::put('setting-tax', 'SettingTaxRateController@update');
+
+	Route::put('setting-billing-charge', 'SettingBillingChargeController@update');
+
 	Route::get('setting-supplier', 'SettingSupplierController@index');
 	Route::get('setting-supplier/{supplier}', 'SettingSupplierController@show');
 	Route::post('setting-supplier', 'SettingSupplierController@store');
@@ -93,9 +99,9 @@ Route::group(['middleware' => ['role:admin']], function() {
 
 	Route::get('setting-marking', 'MarkingController@index');
 	Route::post('setting-marking', 'MarkingController@store');
-	Route::get('setting-marking/{beneficiary}', 'MarkingController@show');
-	Route::put('setting-marking/{beneficiary}', 'MarkingController@update');
-	Route::delete('setting-marking/{beneficiary}', 'MarkingController@delete');
+	Route::get('setting-marking/{marking}', 'MarkingController@show');
+	Route::put('setting-marking/{marking}', 'MarkingController@update');
+	Route::delete('setting-marking/{marking}', 'MarkingController@delete');
 
 	Route::get('supplier-booking', 'BookingSupplierController@index');
 	Route::get('supplier-booking/{id}', 'BookingSupplierController@show');
@@ -112,6 +118,8 @@ Route::group(['middleware' => ['role:admin']], function() {
 	Route::get('admin/complete-orders', 'BookingController@adminShowCompletedOrders');
 	// for both user and admin
 	Route::get('setting-active-bank', 'SettingActiveBankController@index');	
+	Route::get('setting-tax', 'SettingTaxRateController@index');
+	Route::get('setting-billing-charge', 'SettingBillingChargeController@index');
 	Route::get('setting-malaysia-bank/{malaysiaBank}', 'SettingMalaysiaBankController@show');	
 	
 });
\ No newline at end of file