diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index 1ab412a6..dcc1c17e 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -13,6 +13,7 @@ use App\Invoice;
 use App\SettingCredit;
 use App\SettingTaxRate;
 use App\SettingBillingCharge;
+use App\Notification;
 use Auth;
 use Validator;
 use DateTime;
@@ -80,7 +81,7 @@ class BookingController extends Controller
 		$user = Auth::user(); 
 		$bookings = Booking::select('user_id', 'id', 'created_at', 'admin_status', 'rate', 'term', 'amount', 'bia', 'verification_status')
         ->orderby('updated_at','desc')
-        ->get();
+        ->paginate(10);
 
 			// reformat to fit frontend structure 
 			foreach ($bookings as $booking) {
@@ -248,7 +249,9 @@ class BookingController extends Controller
         $term = $request->input('term');
         $amount = $request->input("amount");    // in RMB
         $rates = Rate::orderby('updated_at','desc')->first();
-		$creditLimit = SettingCredit::orderby('updated_at','desc')->first();
+        $creditLimit = SettingCredit::orderby('updated_at','desc')->first();
+        $taxrate = SettingTaxRate::latest()->first()->tax_rate;
+        $billingChargeRate = SettingBillingCharge::latest()->first()->billing_charge_rate;
 
 		if (!$creditLimit){
 			return response()->json("Credit limit not set, please contact admin", 405);
@@ -290,27 +293,31 @@ class BookingController extends Controller
         }
         
         // Service charge (RMB) : if amount higher than 10,000, no service charge. if amount lower than 10,000, 20.00 service charge
-         if ($amount >= 10000 && ($term == 'x2_cash' || $term == 'x2_cheque' || $term == 'x2_ba')) {
+        if ($amount >= 10000 && ($term == 'x2_cash' || $term == 'x2_cheque' || $term == 'x2_ba')) {
             $svcharge = 0;
         } else {
             $svcharge = 20.00;
         }
-
-        // initial rmb to myr amount 
-        $RMBinMYR = (($amount + $svcharge) / $rate);
-
-        // TODO : Should be remove this ? 
-        // gst 0% 
-        $gst = 0 * $RMBinMYR;
-
-        // Sales tax : 10 % 
-        $sales_tax = 0.10 * $RMBinMYR;
-
-        // Billing fees : 1.5%
-        $billing = 0.015 * $RMBinMYR;
-
-        // Bank in amount
-        $bia = round($RMBinMYR + $gst + $sales_tax + $billing, 2);
+       
+        $subtotal = round(($amount + $svcharge) / $rate,2);
+        
+        // TODO : refactor 
+        if ($taxrate !=0){
+           $taxAmount = round($subtotal * $taxrate - $subtotal,2);
+        }
+        else{
+            $taxAmount = 0;
+        }
+        
+        if ($billingChargeRate !=0){
+           $billingChargeAmount = round(($amount + $svcharge) * $billingChargeRate - ($amount + $svcharge), 2);
+        }
+        else{
+           $billingChargeAmount = 0;
+        }
+        
+        $billingChargeAmount = round((($amount / $rate) * $billingChargeRate) - ($amount / $rate), 2);
+        $bankin_amount = round($subtotal + $taxAmount + $billingChargeAmount , 2);
 
         $booking = new Booking();
         $booking->account_name = $request->input('account_name');
@@ -323,9 +330,9 @@ class BookingController extends Controller
         $booking->term = $term;
         $booking->rate_id = $rates->id;
         $booking->rate = $rate; 
-        $booking->rmb_book_amount = $request->input('amount');
+        $booking->rmb_book_amount = $request->input('amount'); // BIG TODO : amount change variable name to rmb_book_amount 
         $booking->status = 2; 
-        $booking->bia = $bia;
+        $booking->bia = $bankin_amount; // BID TODO : change bia viariable name 
         // $booking->user_id = $user->id;
         $booking->user()->associate($user);
        
@@ -456,9 +463,16 @@ class BookingController extends Controller
 		$booking->admin_status = 2; 
 		$booking->save();
 
+        // Add notification message to admin
+        $adminNotification = new Notification;
+        $adminNotification->detail = "A bankslip is uploaded for booking " . $booking->id;
+        $adminNotification->link = "/booking/" . $booking->id . "/verification";
+        $adminNotification->user_id = User::withRole('admin')->first()->id;
+        $adminNotification->save();
+
         $user_bankslip->transfer_amount = $request->input('transfer_amount');
         $user_bankslip->save();
-        return response()->json(["message"=> "Success"],200);
+        return response()->json($adminNotification,200);
     }
 
     public function uploadPurchaseOrder(Request $request, $id)
@@ -570,7 +584,6 @@ class BookingController extends Controller
         if($amount > $creditLimit->rmb_credit_limit){
             return response()->json(["message" => "Exceed credit limit, please contact our sales team for larger quantitiy"], 400);
         }
-
  
         switch ($term) {
          case "x1_cash":
@@ -604,16 +617,31 @@ class BookingController extends Controller
              ], 422);
              break;
          }
-    
-         if (($amount >= 10000) && ($term == 'x2_cash' || $term == 'x2_cheque' || $term == 'x2_ba')) {
+ 
+         if ($amount >= 10000 && ($term == 'x2_cash' || $term == 'x2_cheque' || $term == 'x2_ba')) {
              $svcharge = 0;
          } else {
              $svcharge = 20.00;
          }
         
-         $subtotal = round($amount + $svcharge / $rate,2);
-         $taxAmount =  round($subtotal * $taxrate,2);
-         $billingChargeAmount = round(($amount + $svcharge) * $billingChargeRate, 2);
+         $subtotal = round(($amount + $svcharge) / $rate,2);
+         
+         // TODO : refactor 
+         if ($taxrate !=0){
+            $taxAmount = round($subtotal * $taxrate - $subtotal,2);
+         }
+         else{
+             $taxAmount = 0;
+         }
+         
+         if ($billingChargeRate !=0){
+            $billingChargeAmount = round(($amount + $svcharge) * $billingChargeRate - ($amount + $svcharge), 2);
+         }
+         else{
+            $billingChargeAmount = 0;
+         }
+         
+         $billingChargeAmount = round((($amount / $rate) * $billingChargeRate) - ($amount / $rate), 2);
          $bankin_amount = round($subtotal + $taxAmount + $billingChargeAmount , 2);
  
          return response()->json([
@@ -630,6 +658,8 @@ class BookingController extends Controller
              'taxAmount' => $taxAmount,
              'billingChargeAmount' => $billingChargeAmount,
              'bankin_amount' => $bankin_amount,
+             'acc_name' => $request->input('acc_name'),
+             'acc_no' => $request->input('acc_no')
          ], 200);
     }
 
@@ -660,11 +690,26 @@ class BookingController extends Controller
 
         // update booking status 
 		$booking->status = 4;
-        if($booking->term !== "x1_ba" || $booking->term !== "x2_cheque")
+        if($booking->term !== "x1_ba" || $booking->term !== "x2_cheque"){
     		$booking->admin_status = 3;
-        else
+            // Add notification message to user
+            $userNotification = new Notification;
+            $userNotification->detail = "Your bankslip for booking " . $booking->id . " is approved.";
+            $userNotification->link = "/booking/" . $booking->id . "/transfer";
+            $userNotification->user_id = $booking->user_id;
+            $userNotification->save();
+        }
+        else{
             $booking->admin_status = 5;
+            // Add notification message to user
+            $userNotification = new Notification;
+            $userNotification->detail = "Your bankslip for booking " . $booking->id . " is approved.";
+            $userNotification->link = "/booking/" . $booking->id . "/supplier";
+            $userNotification->user_id = $booking->user_id;
+            $userNotification->save();
+        }
         $booking->save();
+
         
         return response()->json(['message'=>'Success'],200);
     }
@@ -760,6 +805,11 @@ class BookingController extends Controller
 		$booking->admin_status = 5;  // upload china bankslip 
         
         if($booking->save()){
+            $userNotification = new Notification;
+            $userNotification->detail = "Supplier booking report for booking " . $booking->id . " is completed.";
+            $userNotification->link = "/booking/" . $booking->id . "/transfer";
+            $userNotification->user_id = $booking->user_id;
+            $userNotification->save();
             return response()->json(['message'=>"Success"],200);
         }
     }
@@ -768,16 +818,21 @@ 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);
 		}
-		
         $booking->status = 6;  // wait invoice
         $booking->admin_status = 6; // upload invoice
         $booking->save();
-        return response()->json(['message'=>'Success'],200);
+
+        $adminNotification = new Notification;
+        $adminNotification->detail = "Purchase Order for booking " . $booking->id . " is uploaded.";
+        $adminNotification->link = "/booking/" . $booking->id . "/upload-invoice";
+        $adminNotification->user_id = User::withRole('admin')->first()->id;
+        $adminNotification->save();
+
+        return response()->json($purchase_order,200);
     }
 
     public function confirmInvoice(Request $request, $id)
@@ -794,6 +849,11 @@ class BookingController extends Controller
 		$booking->admin_status = 7;  // completed
         
         if($booking->save()){
+            $adminNotification = new Notification;
+            $adminNotification->detail = "Invoice for booking " . $booking->id . " is uploaded.";
+            $adminNotification->link = "/booking/" . $booking->id . "/complete";
+            $adminNotification->user_id = $booking->user_id;
+            $adminNotification->save();
             return response()->json(['message'=>"Success"],200);
         }
     }
diff --git a/app/Http/Controllers/ChinaBankSlipController.php b/app/Http/Controllers/ChinaBankSlipController.php
index eabfe4a5..58aad3a0 100644
--- a/app/Http/Controllers/ChinaBankSlipController.php
+++ b/app/Http/Controllers/ChinaBankSlipController.php
@@ -4,6 +4,8 @@ namespace App\Http\Controllers;
 
 use App\ChinaBankSlip;
 use App\Booking;
+use App\User;
+use App\Notification;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Storage;
 use Validator;
@@ -80,6 +82,13 @@ class ChinaBankSlipController extends Controller
 		$booking->admin_status = 6; 
 		$booking->save();
 
+        $userNotification = new Notification;
+        $userNotification->detail = "Your china bankslip for booking " . $booking->id . " is uploaded.";
+        $userNotification->link = "/booking/" . $booking->id . "/upload-po";
+        $userNotification->user_id = $booking->user_id;
+        $userNotification->save();
+
+
         return response()->json(["message"=> "Success"],200);
     }
 
diff --git a/app/Http/Controllers/NotificationController.php b/app/Http/Controllers/NotificationController.php
new file mode 100644
index 00000000..00c8e722
--- /dev/null
+++ b/app/Http/Controllers/NotificationController.php
@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Notification;
+use Illuminate\Support\Facades\DB;
+use Auth;
+
+class NotificationController extends Controller
+{
+    public function index()
+    {
+        return Notification::all()->orderby('updated_at','desc');
+    }
+
+    public function show(Notification $notification)
+    {
+     	return $notification;
+    }
+
+    public function store(Request $request)
+    {
+        $notification = Notification::create($request->all());
+
+        return response()->json($notification, 201);
+    }
+
+    public function update(Request $request, Notification $notification)
+    {
+        $notification->update($request->all());
+
+        return response()->json($notification, 200);
+    }
+
+    public function delete(Notification $notification)
+    {
+        $notification->delete();
+
+        return response()->json(null, 204);
+    }
+
+    public function getUserMessage()
+    {
+        $user_all_notification = Notification::Where("user_id",Auth::user()->id)->orderby('updated_at','desc')->get();
+
+
+    	return response()->json([
+    		"message"			=>$user_all_notification,
+			"unread_message"	=>Notification::Where([
+    			["user_id",Auth::user()->id],
+				["is_read",0]
+			])->orderby('updated_at','desc')->get()
+		],200);
+    }
+
+    public function readNotification($notification_id){
+    	$affected = DB::table('notifications')
+            ->Where('id', $notification_id)
+            ->update(array('is_read' => 1));
+    	return response()->json("Read message", 200);
+    }
+
+
+}
\ No newline at end of file
diff --git a/app/Notification.php b/app/Notification.php
new file mode 100644
index 00000000..0ac7488f
--- /dev/null
+++ b/app/Notification.php
@@ -0,0 +1,77 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Notification extends Model
+{
+    protected $fillable = ['detail','user_id','is_read'];
+    protected $appends = ['time_interval'];
+
+    public function getTimeIntervalAttribute()
+	{
+		$created_time = $this->created_at;
+
+		date_default_timezone_set('Asia/Kuala_Lumpur'); //Change as per your default time
+        $str = strtotime($created_time);
+        $today = strtotime(date('Y-m-d H:i:s'));
+
+        // It returns the time difference in Seconds...
+        $time_differnce = $today-$str;
+
+        // To Calculate the time difference in Years...
+        $years = 60*60*24*365;
+
+        // To Calculate the time difference in Months...
+        $months = 60*60*24*30;
+
+        // To Calculate the time difference in Days...
+        $days = 60*60*24;
+
+        // To Calculate the time difference in Hours...
+        $hours = 60*60;
+
+        // To Calculate the time difference in Minutes...
+        $minutes = 60;
+
+        if(intval($time_differnce/$years) > 1)
+        {
+            return intval($time_differnce/$years)." years ago";
+        }else if(intval($time_differnce/$years) > 0)
+        {
+            return intval($time_differnce/$years)." year ago";
+        }else if(intval($time_differnce/$months) > 1)
+        {
+            return intval($time_differnce/$months)." months ago";
+        }else if(intval(($time_differnce/$months)) > 0)
+        {
+            return intval(($time_differnce/$months))." month ago";
+        }else if(intval(($time_differnce/$days)) > 1)
+        {
+            return intval(($time_differnce/$days))." days ago";
+        }else if (intval(($time_differnce/$days)) > 0) 
+        {
+            return intval(($time_differnce/$days))." day ago";
+        }else if (intval(($time_differnce/$hours)) > 1) 
+        {
+            return intval(($time_differnce/$hours))." hours ago";
+        }else if (intval(($time_differnce/$hours)) > 0) 
+        {
+            return intval(($time_differnce/$hours))." hour ago";
+        }else if (intval(($time_differnce/$minutes)) > 1) 
+        {
+            return intval(($time_differnce/$minutes))." minutes ago";
+        }else if (intval(($time_differnce/$minutes)) > 0) 
+        {
+            return intval(($time_differnce/$minutes))." minute ago";
+        }else if (intval(($time_differnce)) > 1) 
+        {
+            return intval(($time_differnce))." seconds ago";
+        }else
+        {
+            return "few seconds ago";
+        }
+	}
+
+}
diff --git a/database/migrations/2018_07_21_102920_create_notification_table.php b/database/migrations/2018_07_21_102920_create_notification_table.php
new file mode 100644
index 00000000..7e3be228
--- /dev/null
+++ b/database/migrations/2018_07_21_102920_create_notification_table.php
@@ -0,0 +1,39 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateNotificationTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('notifications', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('detail');
+            $table->string('link');
+            $table->unsignedInteger('user_id');
+            $table->boolean('is_read')->default(0);
+            $table->timestamps();
+
+            $table->foreign('user_id')
+                    ->references('id')->on('users')
+                    ->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('notifications');
+    }
+}
diff --git a/database/seeds/DatabaseSeeder.php b/database/seeds/DatabaseSeeder.php
index ebc04e05..e0ba98e9 100644
--- a/database/seeds/DatabaseSeeder.php
+++ b/database/seeds/DatabaseSeeder.php
@@ -28,6 +28,7 @@ class DatabaseSeeder extends Seeder
         $this->call(SettingActiveBankSeeder::class);
         $this->call(SettingTaxRateSeeder::class);
         $this->call(SettingBillingChargeSeeder::class);
+        $this->call(NotificationSeeder::class);
         DB::statement('SET FOREIGN_KEY_CHECKS=1;');
     }
 }
diff --git a/database/seeds/NotificationSeeder.php b/database/seeds/NotificationSeeder.php
new file mode 100644
index 00000000..ac238997
--- /dev/null
+++ b/database/seeds/NotificationSeeder.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Database\Seeder;
+use App\User;
+use Carbon\Carbon;
+
+class NotificationSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+    	$user = User::where("email", "user@example.com")->first();
+    	$admin = User::where("email", "admin@example.com")->first();
+
+        DB::table('notifications')->insert([
+            'detail' => 'This is an user seeder notification',
+            'user_id' => $user->id,
+            'link' => 'http://www.google.com',
+            'created_at' => Carbon::now()->format('Y-m-d H:i:s'),
+            'updated_at' => Carbon::now()->format('Y-m-d H:i:s'),
+        ]);
+
+        DB::table('notifications')->insert([
+            'detail' => 'This is an admin seeder notification',
+            'user_id' => $admin->id,
+            'link' => 'http://www.google.com',
+            'created_at' => Carbon::now()->format('Y-m-d H:i:s'),
+            'updated_at' => Carbon::now()->format('Y-m-d H:i:s'),
+        ]);
+    }
+}
diff --git a/resources/assets/js/components/Navbar.vue b/resources/assets/js/components/Navbar.vue
index 9d8d5729..e01004de 100644
--- a/resources/assets/js/components/Navbar.vue
+++ b/resources/assets/js/components/Navbar.vue
@@ -12,30 +12,34 @@
       <div id="navbarToggler" class="collapse navbar-collapse">
         <ul class="navbar-nav ml-auto">
           <locale-dropdown/>
-          <!-- <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
-          </li> -->
         </ul>
 
         <ul class="navbar-nav ml-auto">
           <!-- Authenticated -->
           <template v-if="user">
-            <!-- <el-badge :value="12" class="item">
-              <el-button size="share-button"><i class="el-icon-bell"></i></el-button>
-            </el-badge> -->
-            <!-- <el-dropdown trigger="click">
-              <el-badge :value="12" class="item">
+            <el-dropdown trigger="click">
+              <el-badge :value="bellBadge > 0 ? bellBadge : ''" class="item">
                 <el-button icon="el-icon-bell" circle></el-button>
               </el-badge>
-              <el-dropdown-menu slot="dropdown" style="max-width: 30%" id="notification">
-                <a v-for="item in notification" :href="item.link">
-                  <el-dropdown-item>
-                    {{item.message}}
-                  </el-dropdown-item>
-                </a>
+              <el-dropdown-menu slot="dropdown" id="notification">
+                <div v-for="(item,index) in notification.message">
+                  <a v-on:click.prevent='readNotification(item.id);navigateTo(item.link)'>
+                    <el-dropdown-item>
+                      <b v-if="item.is_read == 0">
+                        {{item.detail}}
+                      </b>
+                      <span v-else >
+                        {{item.detail}}
+                      </span>
+                      <br/>
+                      <span class="opacity80">
+                        {{item.time_interval}}
+                      </span>
+                    </el-dropdown-item>
+                  </a>
+                </div>
               </el-dropdown-menu>
-            </el-dropdown> -->
-
+            </el-dropdown>
 
             <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle text-dark"
@@ -79,6 +83,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import LocaleDropdown from './LocaleDropdown'
+import axios from 'axios'
 
 export default {
   components: {
@@ -87,28 +92,58 @@ export default {
 
   data: () => ({
     appName: window.config.appName,
-    notification:[{
-      message : "You have an unread message",
-      link : "http://www.google.com"
-    },
-    {
-      message : "There are 10 booking for your approval",
-      link : "http://www.yahoo.com"
-    }]
+    notification:[],
+    loadingNotification:false,
+    bellBadge : 0,
+    unread_message_length:0,
 
   }),
 
   computed: mapGetters({
     user: 'auth/user'
   }),
-
+  mounted(){
+    this.getNotification();
+  },
   methods: {
-    async logout () {
+    async logout(){
       // Log out the user.
-      await this.$store.dispatch('auth/logout')
+      await this.$store.dispatch('auth/logout');
 
       // Redirect to login.
-      this.$router.push({ name: 'login' })
+      this.$router.push({ name: 'login' });
+    },
+    getNotification(){
+      this.notification = [];
+      this.loadingNotification=true;
+      axios
+        .get('/api/notification/user/')
+        .then((response) => {
+          this.loadingNotification=false;
+          this.notification = response.data;
+          this.bellBadge = this.notification.unread_message.length;
+          console.log(response.data);
+        }).catch((error) => {
+          console.log(error)
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+    },
+    readNotification(notification_id){
+      axios
+        .post('/api/notification/read-notification/'+notification_id)
+        .then((response) => {
+          this.getNotification();
+        }).catch((error) => {
+          console.log(error)
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+    },
+    navigateTo(nav) {
+      window.location.href = nav;
     }
   }
 }
@@ -120,4 +155,19 @@ export default {
   height: 2rem;
   margin: -.375rem 0;
 }
+.el-dropdown-menu{
+  max-height: 50%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+}
+.el-dropdown-menu__item {
+  line-height: 26px;
+}
+.opacity80{
+  opacity: 0.8 ;
+}
+::-webkit-scrollbar {
+    width: 0px;
+    background: transparent; /* make scrollbar transparent */
+}
 </style>
diff --git a/resources/assets/js/pages/admin/home.vue b/resources/assets/js/pages/admin/home.vue
index 501256b5..a595a717 100644
--- a/resources/assets/js/pages/admin/home.vue
+++ b/resources/assets/js/pages/admin/home.vue
@@ -4,8 +4,6 @@
 <el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button>
 </div>
 
- 
-
   <!-- Booking Table -->
   <el-row :gutter="20">
     <div>
@@ -47,6 +45,15 @@
       </el-table>
     </div>
   </el-row>
+  <div align="right">
+      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
+        Previous
+      </el-button>
+      <span>Page {{pagination.current_page}} of {{pagination.last_page}}</span>
+      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.next_page_url)" :disabled="!pagination.next_page_url">
+        Next
+      </el-button>
+    </div>
   <!-- Booking Table-end -->
   </div>
 </template>
@@ -59,9 +66,9 @@ export default {
   data () {
     return {
       status: null,
-      bookingTable: [
-      ],
-      url: 'api/admin/booking',   
+      bookingTable: [],
+      url: 'api/admin/booking',
+      pagination: {prev_page_url: null},
       loading_btn: false,
     }
   },
@@ -69,10 +76,12 @@ export default {
     this.getBooking()
   },
   methods: {
-    getBooking() {
+    getBooking(){
       let $this = this
       axios.get(this.url).then(response => {
-        this.bookingTable = response.data
+        this.bookingTable = response.data.data;
+        $this.makePagination(this.bookingTable);
+        console.log(response.data.data);
       })
     },
     RefreshBooking() {
@@ -80,7 +89,7 @@ export default {
       this.loading_btn = true
       axios.get(this.url).then(response => {
         this.loading_btn = false;
-        this.bookingTable = response.data
+        this.bookingTable = response.data.data
         this.$message({
           showClose: true,
           message: 'Booking is updated',
@@ -89,6 +98,20 @@ export default {
         })
       })
     },
+    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()
+    },
     filterHandlerStatus (value, row, column) {
       const status = row.track_status;
       if(value ==="Success")
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index 40fb2b0a..67090f97 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -267,8 +267,10 @@ export default {
 			let newUserSlip = {
 			transfer_amount: this.user_slip_form.transfer_amount
 			}
-			axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount', newUserSlip)
+			axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount/', newUserSlip)
 			.then((response) => {
+				console.log(response);
+
 				this.$message({
 				showClose: true,
 				message: 'Your bankinslip has been submitted, please wait admin to approve.',
@@ -279,6 +281,7 @@ export default {
 				this.$router.push({
 				name: 'home'
 				})
+
 			})
 			.catch((error) => {
 				this.loading = false
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 098139eb..4ed1c829 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -209,13 +209,13 @@
           <tr>
             <td>CNY/RMB :</td>
             <td>
-              <b> RM {{ bookingConfirmTable.amount }}</b>
+              <b> CNY {{ bookingConfirmTable.amount }}</b>
             </td>
           </tr>
           <tr>
             <td>+ Service Charges :</td>
             <td>
-             RM {{ bookingConfirmTable.service_charge }}
+               CNY {{ bookingConfirmTable.service_charge }}
             </td>
           </tr>
           <tr>
@@ -227,19 +227,37 @@
           <tr>
             <td></td>
             <td>
-              <b> RM {{ bookingConfirmTable.subtotal }}</b>
+               MYR {{ bookingConfirmTable.subtotal }}
             </td>
           </tr>
           <tr>
             <td>+ Tax :</td>
             <td>
-               RM {{ bookingConfirmTable.taxAmount }}
+              MYR {{ bookingConfirmTable.taxAmount }}
             </td>
           </tr>
           <tr>
             <td>+ Billing Charge :</td>
             <td>
-               RM {{ bookingConfirmTable.billingChargeAmount }} 
+               MYR {{ bookingConfirmTable.billingChargeAmount }}
+            </td>
+          </tr>
+          <tr>
+            <td>Bank In Amount :</td>
+            <td>
+              <b> MYR {{ bookingConfirmTable.bankin_amount }}</b>
+            </td>
+          </tr>
+          <tr>
+            <td>China Beneficiary Acc :</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>
+              Name : {{ bookingConfirmTable.acc_name }} <br>
+              Account No. : {{ bookingConfirmTable.acc_no }}
+            </td>
+            <td>
             </td>
           </tr>
           <tr>
@@ -250,6 +268,13 @@
             <td></td>
             <td></td>
           </tr>
+          <tr>
+            <td align="center" colspan="2">
+              <b>CIEF WORLDWIDE SDN. BHD.(1134596-M)</b>
+              <br/>
+              <b>MBB 568603010762</b>
+            </td>
+          </tr>
         </tbody>
       </table>
       <span slot="footer" class="dialog-footer">
@@ -354,12 +379,10 @@ export default {
         rate: ''
       },
       bookingForm: {
-          account_name: '',
-          bank_name: '',
-          bank_branch: '',
-          account_num: '',
-          order_no: null,
-          payment_for: 'Full Payment' 
+        account_name: '',
+        bank_name: '',
+        bank_branch: '',
+        account_num: ''
       },
       rules: {
           order_no: [{
@@ -443,7 +466,6 @@ export default {
       axios.get(this.url).then(response => {
         this.bookingTable = response.data.data
         $this.makePagination(response.data)
-        console.log(response)
       })
     },
     getRate() {
@@ -492,7 +514,6 @@ export default {
         prev_page_url: data.prev_page_url
       }
       this.pagination = pagination
-      console.log(this.pagination)
     },
     fetchPaginateBooking(url) {
       this.url = url
@@ -529,12 +550,13 @@ export default {
             amount: this.booking.amount,
             term: this.term,
             order_no: this.bookingForm.order_no,
-            payment_for: this.bookingForm.payment_for
+            payment_for: this.bookingForm.payment_for,
+            acc_name: this.bookingForm.account_name,
+            acc_no: this.bookingForm.account_num
           }
           axios.post('api/booking/calculation', newConfirmation)
             .then((response) => {
               this.loading = false
-              console.log(response)
               this.bookingConfirmTable = response.data;
               this.dialogFormVisible = false
               this.dialogFormVisible1 = true
diff --git a/routes/api.php b/routes/api.php
index 7669ab64..a2b2bda0 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -42,11 +42,14 @@ Route::group(['middleware' => 'auth:api'], function () {
 	Route::post('booking/{book_id}/reject-bank-slip','BookingController@rejectBankSlip');
 	Route::post('booking/{book_id}/approve-bank-slip','BookingController@approveBankSlip');
     Route::post('booking/{book_id}/cancel', 'BookingController@cancel');
-   	Route::get('/booking', 'BookingController@index'); 
+   	Route::get('booking', 'BookingController@index'); 
 	Route::get('user', 'UserController@show');
 	Route::patch('settings/profile', 'Settings\ProfileController@update');
 	Route::patch('settings/password', 'Settings\PasswordController@update');
 
+	Route::get('notification/user', 'NotificationController@getUserMessage');
+	Route::post('notification/read-notification/{notification_id}', 'NotificationController@readNotification');
+
 	// for both user and admin
 	Route::get('active-bank', 'SettingActiveBankController@index');	
 	Route::put('setting-tax', 'SettingActiveBankController@index');
@@ -109,6 +112,12 @@ Route::group(['middleware' => ['role:admin']], function() {
 	Route::put('supplier-booking/{id}', 'BookingSupplierController@update');
 	Route::post('booking/{id}/confirm-supplier', 'BookingController@confirmSupplier');
 
+	Route::get('notification', 'NotificationController@index');
+	Route::get('notification/{notification}', 'NotificationController@show');
+	Route::post('notification', 'NotificationController@store');
+	Route::put('notification/{notification}', 'NotificationController@update');
+	Route::delete('notification/{notification}', 'NotificationController@delete');
+
 	Route::post('booking/{id}/upload-china-bankslip','ChinaBankSlipController@store');
 	Route::patch('booking/{id}/update-china-bankslip','ChinaBankSlipController@update');
 	Route::get('booking/{id}/po', 'BookingController@showPurchaseOrder');