diff --git a/.gitignore b/.gitignore
index 414589fc..9035d84d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@
 /.vscode
 /.vagrant
 /data
+vendor/composer
 Homestead.json
 Homestead.yaml
 npm-debug.log
diff --git a/app/Booking.php b/app/Booking.php
index 33e6fe75..b03276d9 100644
--- a/app/Booking.php
+++ b/app/Booking.php
@@ -7,6 +7,22 @@ use Illuminate\Database\Eloquent\Model;
 class Booking extends Model
 {
     // protected $guarded = [];
+    protected $hidden = array('user_id',  
+                                "rate_id",
+                                "rmb_book_amount",
+                                "rmb_book_pay_method",
+                                "rmb_book_account_name",
+                                "rmb_book_bank_name",
+                                "rmb_book_acc_no",
+                                "rmb_book_bank_branch",
+                                "usd_book_amount",
+                                "usd_book_pay_method",
+                                "usd_book_company_name",
+                                "usd_book_company_address",
+                                "usd_book_swift_code",
+                                "usd_book_cnap",
+                                "usd_book_bank_branch");
+
     protected $fillable = ['term', 'rate_id', 'user_id', 'amount', 'account_name', 'account_num', 'bank_name', 
                             'bank_branch', 'company_name'];
                             
diff --git a/app/Http/Controllers/Auth/RegisterController.php b/app/Http/Controllers/Auth/RegisterController.php
index ecfc4151..840ad692 100644
--- a/app/Http/Controllers/Auth/RegisterController.php
+++ b/app/Http/Controllers/Auth/RegisterController.php
@@ -4,6 +4,8 @@ namespace App\Http\Controllers\Auth;
 
 use App\User;
 use App\Role;
+use App\Marking;
+use Illuminate\Support\Facades\Auth;
 use Illuminate\Http\Request;
 use App\Http\Controllers\Controller;
 use Illuminate\Support\Facades\Validator;
@@ -56,8 +58,16 @@ class RegisterController extends Controller
      * @param  array  $data
      * @return User
      */
-    protected function create(array $data)
+    protected function create(Request $data)
     {
+        $marking = Marking::Where('email',$data['email'])->first();
+        if(!$marking){
+            return response()->json('Access Denied', 401);
+        }
+        if($marking->marking != $data['marking']){
+            return response()->json('Wrong Marking', 400);   
+        }
+        
         $role = Role::where('name','=','member')->first();
         $user = new User();
         $user->name = $data['name'];
@@ -66,7 +76,6 @@ class RegisterController extends Controller
         $user->save();
         $user->attachRole($role);
 
-        return $user;
-    
+        return response()->json($user, 201);   
     }
 }
diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index 6f26a2f1..dade691e 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -9,6 +9,8 @@ use App\Booking;
 use App\Rate;
 use App\UserBankSlip;
 use App\User;
+use App\Invoice;
+use App\SettingCredit;
 use Auth;
 use Validator;
 use DateTime;
@@ -16,32 +18,164 @@ use DateTime;
 class BookingController extends Controller
 {
 
+    public function index(){
+		$user = Auth::user(); 
+        $bookings = Booking::select('id', 'created_at', 'status', 'rate', 'term', 'amount', 'bia', 'verification_status')
+                            ->where('user_id', $user->id)
+							->get();
+        
+        // reformat to fit frontend structure 
+        foreach ($bookings as $booking) {
+            // set timeout 
+            $date1 = new DateTime($booking->created_at);
+            $date2 = new DateTime();
+            $time_in_seconds = SettingCredit::orderby('updated_at','desc')->first()->time_limit;
+            $difference_in_seconds = ($date1->format('U') + $time_in_seconds) - ($date2->format('U'));
+            $booking->timeout = $difference_in_seconds;  
+
+            // TODO : you can make it better
+            if($difference_in_seconds < 0 ){
+                $booking->timeout = 0;
+            }
+
+            // TODO : transfer_amount change name to bia 
+            $booking->transfer_amount = $booking->bia; 
+ 
+            $booking->track_status = "(". $booking->status ."/6)";
+            switch ($booking->status) {
+                case 1:
+                    $status_desc = "Order in progress"; 
+                    break;
+                case 2:
+                    $status_desc = "Waiting for payment";  
+                    break;    
+                case 3:
+                    $status_desc = "Waiting verification";    
+                    break;  
+                case 4:
+                    $status_desc = "Processing transfer"; 
+                    break;
+                case 5:
+                    $status_desc = "Transfer Complete, please upload your PO"; 
+                    break;
+                case 6:
+                    $status_desc = "Processing invoice"; 
+                    break;
+                default:
+                    $status_desc = "";
+            }
+            $booking->status_desc = $status_desc; 
+        }
+
+        return $bookings;
+	}
+	
+	public function adminIndex(){
+		$user = Auth::user(); 
+		$bookings = Booking::select('id', 'created_at', 'admin_status', 'rate', 'term', 'amount', 'bia', 'verification_status')
+		->get();
+
+			// reformat to fit frontend structure 
+			foreach ($bookings as $booking) {
+				// set timeout 
+				$date1 = new DateTime($booking->created_at);
+				$date2 = new DateTime();
+				$time_in_seconds = SettingCredit::orderby('updated_at','desc')->first()->time_limit;
+				$difference_in_seconds = ($date1->format('U') + $time_in_seconds) - ($date2->format('U'));
+				$booking->timeout = $difference_in_seconds;  
+
+				// TODO : you can make it better
+				if($difference_in_seconds < 0 ){
+					$booking->timeout = 0;
+				}
+
+				// TODO : transfer_amount change name to bia 
+				$booking->transfer_amount = $booking->bia; 
+		
+				$booking->track_status = "(". $booking->admin_status ."/6)";
+				switch ($booking->admin_status) {
+					case 0:
+						$status_desc = "Waiting user to upload bankin slip";
+						break;
+					case 1:
+						$status_desc = "Waiting for verification"; 
+						break;
+					case 2:
+						$status_desc = "Bookg with supplier";  
+						break;    
+					case 3:
+						$status_desc = "Supplier booking report. Please confirm with your booking.";    
+						break;  
+					case 4:
+						$status_desc = "Please update supplier booking status."; 
+						break;
+					case 5:
+						$status_desc = "Customer has uploaded the invoice, please upload purchase order"; 
+						break;
+					case 6:
+						$status_desc = "Booking completed"; 
+						break;
+					default:
+						$status_desc = "";
+				}
+				$booking->status_desc = $status_desc; 
+			}
+
+			return $bookings;
+
+	}
+
     public function show($id)
     {   
         $booking = Booking::where('user_id',Auth::user()->id)->where('id', $id)->first();
 
+		if($booking){
         $date1 = new DateTime($booking->created_at);
         $date2 = new DateTime();
         $difference_in_seconds = ($date1->format('U') + 600) - ($date2->format('U'));
 
-        
-
         $booking->timeout = $difference_in_seconds;   
 
         if (!$booking){
             return response()->json(['success'=>false, 'message'=>'not found'], 404);
         }
-        return $booking;
+		return $booking;
+		}
+	}
+	
+	public function adminShow($id)
+    {   
+		$booking = Booking::where('id', $id)->first();
+		return $booking->userBankSlip()->get(); 
+
+		if($booking){
+        $date1 = new DateTime($booking->created_at);
+        $date2 = new DateTime();
+        $difference_in_seconds = ($date1->format('U') + 600) - ($date2->format('U'));
+
+        $booking->timeout = $difference_in_seconds;   
+
+        if (!$booking){
+            return response()->json(['success'=>false, 'message'=>'not found'], 404);
+        }
+		return $booking;
+		}
     }
 
     public function store(Request $request)
     {
         $rates = Rate::orderby('updated_at','desc')->first();
         $term = $request->input('term');
-        $amount = $request->input("amount");
+        $amount = $request->input("amount");    // in RMB
+        $creditLimit = SettingCredit::orderby('updated_at','desc')->first();
+        if($amount > $creditLimit->rmb_credit_limit){
+            return response()->json("Exceed credit limit, need approved from admin", 401);
+        }
+
         $user = Auth::user(); 
         $rate = 1; // default rate to 1 
 
+
         switch ($term) {
             case "x1_cash":
                 $rate = $rates->x1_cash;
@@ -100,7 +234,9 @@ class BookingController extends Controller
         $booking->amount = $request->input('amount');
         $booking->term = $term;
         $booking->rate_id = $rates->id;
+        $booking->rate = $rate; 
         $booking->rmb_book_amount = $request->input('amount');
+        $booking->status = 2; 
         $booking->bia = $bia;
         // $booking->user_id = $user->id;
         $booking->user()->associate($user);
@@ -191,14 +327,14 @@ class BookingController extends Controller
         $input['file'] = $filename;
 
         $unique_name = 'bank_slip_' . md5($filename. time()); // probably not a good idea 
-        $unique_image_url = $unique_name. '.' .$ext;
+        $unique_image_path = $unique_name. '.' .$ext;
         Storage::putFileAs(
-            'user_bankslip', $bankslip_file, $unique_image_url
+            'user_bankslip', $bankslip_file, $unique_image_path
         ); 
 
         $user_bankslip = new UserBankSlip;
         $user_bankslip->booking_id = $booking->id;
-        $user_bankslip->bankslip_file =  $unique_image_url;
+        $user_bankslip->bankslip_path =  $unique_image_path;
         $user_bankslip->transfer_amount = $request->input('transfer_amount');
         $user_bankslip->save();
 
@@ -248,19 +384,25 @@ class BookingController extends Controller
 
         $input['file'] = $filename;
         $unique_name = 'purchase_order_' . md5($filename. time());
-        $unique_image_url = $unique_name. '.' .$ext;
+        $unique_image_path = $unique_name. '.' .$ext;
         Storage::putFileAs(
-            'file',/*folder name*/ $user_input_file, $unique_image_url
+            'purchase_order',/*folder name*/ $user_input_file, $unique_image_path
         );
 
         $user_po = new PurchaseOrder;
-        $user_po->image_url = $unique_image_url;
+        $user_po->image_path = $unique_image_path;
         $user_po->book_id = $booking->id;
-        $user_po->amount = $request->input('amount');
         $user_po->save();
 
         return response()->json(['message'=>'Success'],200);
     }
+    
+    public function confirmPurchaseOrder($id){
+        $booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first();
+        $booking->status = 5; 
+        $booking->save();
+        return response()->json(['message'=>'Success'],200);
+    }
 
     public function delete(Booking $book_id)
     {
@@ -282,7 +424,8 @@ class BookingController extends Controller
         return response()->json(['message'=>'Success'],200);
     }
 
-    public function calculation(Request $request){
+    public function calculation(Request $request)
+    {
         $amount = $request->input('amount');
         $term = $request->input('term');
         $china_beneficiary = $request->input('china_beneficiary');
@@ -342,7 +485,7 @@ class BookingController extends Controller
              'bankin_amount' => $bankin_amount,
              'china_beneficary' => $china_beneficiary
          ], 200);
-     }
+    }
 
     public function approveBankSlip(Request $request, $book_id)
     {
@@ -351,7 +494,7 @@ class BookingController extends Controller
             return response()->json(['message'=>'Access denied'], 200);
         }
 
-        if(!$userBankSlip = UserBankSlip::where('book_id',$booking->id)->first())
+        if(!$userBankSlip = UserBankSlip::where('booking_id',$booking->id)->first())
         {
             return response()->json(['message'=>'Access denied'], 200);   
         }
@@ -363,6 +506,7 @@ class BookingController extends Controller
         }
 
         $userBankSlip->is_approve = 1;
+        $userBankSlip->estimated_arrival_time = $request->input('estimated_arrival_time');
         $userBankSlip->save();
         return response()->json(['message'=>'Success'],200);
     }
@@ -374,7 +518,7 @@ class BookingController extends Controller
             return response()->json(['message'=>'Access denied'], 200);
         }
 
-        if(!$userBankSlip = UserBankSlip::where('book_id',$booking->id)->first())
+        if(!$userBankSlip = UserBankSlip::where('booking_id',$booking->id)->first())
         {
             return response()->json(['message'=>'Access denied'], 200);
         }
@@ -392,4 +536,48 @@ class BookingController extends Controller
         return response()->json(['message'=>'Success'],200);
     }
 
+    public function uploadInvoice(Request $request, $id)
+    {
+        $booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first();
+
+        /* Validation */
+            if (!$booking)
+            {
+                return response()->json(['message'=>'Access denied'], 200);
+            }
+
+            $validator = Validator::make($request->all(), [
+                'invoice_path'   => 'mimes:jpg,jpeg,bmp,png,pdf,doc,docx'
+            ]);
+
+            if($validator->fails())
+            {
+                return response()->json(['message'=>'Incorrect format'],200);
+            }
+
+            if(!$input_file = $request->file('invoice_path'))
+            {
+                return response()->json(['message'=>'No file detected'], 400);
+            }
+        /* End Validation */
+
+        $filename = $input_file->getClientOriginalName();
+        $ext = $input_file->getClientOriginalExtension();
+
+        $input['invoice_path'] = $filename;
+        $unique_name = 'invoice' . md5($filename. time());
+        $unique_file_url = $unique_name. '.' .$ext;
+        Storage::putFileAs(
+            'invoice',/*folder name*/ $input_file, $unique_file_url
+        );
+        
+        $invoice = new Invoice;
+        $invoice->invoice_path = $unique_file_url;
+        $invoice->amount = $request->input('amount');
+        $invoice->booking_id = $booking->id;
+        $invoice->save();
+
+        return response()->json(['message'=>"Success"],200);
+    }
+
 }
diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
new file mode 100644
index 00000000..a3af7dd8
--- /dev/null
+++ b/app/Http/Controllers/HomeController.php
@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class HomeController extends Controller
+{
+    /**
+     * Create a new controller instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        $this->middleware('auth');
+    }
+
+    /**
+     * Show the application dashboard.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function index()
+    {
+        return view('home');
+    }
+}
diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index 58f9b8ab..392564cc 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use Auth;
 
 class UserController extends Controller
 {
@@ -15,7 +16,9 @@ class UserController extends Controller
      * @return \Illuminate\Http\Response
      */
     public function show(Request $request)
-    {
-        return $request->user();
+    {   
+
+        $user = Auth::user();
+        return $user;
     }
 }
diff --git a/app/Http/Kernel.php b/app/Http/Kernel.php
index da7a7f5c..a95cd23b 100644
--- a/app/Http/Kernel.php
+++ b/app/Http/Kernel.php
@@ -61,5 +61,6 @@ class Kernel extends HttpKernel
         'ability' => 'App\Http\Middleware\TokenEntrustAbility',
         'role' => \Zizaco\Entrust\Middleware\EntrustRole::class,
         'permission' => \Zizaco\Entrust\Middleware\EntrustPermission::class,
+        'ability' => 'App\Http\Middleware\TokenEntrustAbility'
     ];
 }
diff --git a/app/Invoice.php b/app/Invoice.php
new file mode 100644
index 00000000..570dc72b
--- /dev/null
+++ b/app/Invoice.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Invoice extends Model
+{
+    protected $fillable = ['invoice_url','amount','booking_id'];
+}
diff --git a/app/SettingCredit.php b/app/SettingCredit.php
index 872fec8e..5d567ab3 100644
--- a/app/SettingCredit.php
+++ b/app/SettingCredit.php
@@ -6,5 +6,5 @@ use Illuminate\Database\Eloquent\Model;
 
 class SettingCredit extends Model
 {
-    protected $fillable = ['rmb_credit_limit','usd_credit_limit'];
+    protected $fillable = ['rmb_credit_limit','usd_credit_limit','time_limit'];
 }
diff --git a/app/User.php b/app/User.php
index 065b512e..855641bb 100644
--- a/app/User.php
+++ b/app/User.php
@@ -58,7 +58,7 @@ class User extends Authenticatable implements JWTSubject
      */
     public function getRoleAttribute()
     {
-       // return $this->roles->first()->name;
+       return $this->roles->first()->name;
     }
 
     /**
diff --git a/app/UserBankSlip.php b/app/UserBankSlip.php
index 3e3e6678..eb6ddc0e 100644
--- a/app/UserBankSlip.php
+++ b/app/UserBankSlip.php
@@ -6,7 +6,7 @@ use Illuminate\Database\Eloquent\Model;
 
 class UserBankSlip extends Model
 {
-    protected $fillable = ['bank_slip_type','bankslip_url','transfer_amount','booking_id','cust_marking'];
+    protected $fillable = ['bank_slip_type','bankslip_url','transfer_amount','booking_id','cust_marking','estimated_arrival_time'];
 
     public function booking()
     {
diff --git a/composer.lock b/composer.lock
index a060a284..674363c5 100644
--- a/composer.lock
+++ b/composer.lock
@@ -1063,16 +1063,16 @@
         },
         {
             "name": "laravel/framework",
-            "version": "v5.6.25",
+            "version": "v5.6.26",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/framework.git",
-                "reference": "a15efe4fbcd6b38ea76edc5c8939ffde4f4c7b7f"
+                "reference": "7047df295e77cecb6a2f84736a732af66cc6789c"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/framework/zipball/a15efe4fbcd6b38ea76edc5c8939ffde4f4c7b7f",
-                "reference": "a15efe4fbcd6b38ea76edc5c8939ffde4f4c7b7f",
+                "url": "https://api.github.com/repos/laravel/framework/zipball/7047df295e77cecb6a2f84736a732af66cc6789c",
+                "reference": "7047df295e77cecb6a2f84736a732af66cc6789c",
                 "shasum": ""
             },
             "require": {
@@ -1198,7 +1198,7 @@
                 "framework",
                 "laravel"
             ],
-            "time": "2018-06-12T14:39:24+00:00"
+            "time": "2018-06-20T14:21:11+00:00"
         },
         {
             "name": "laravel/socialite",
@@ -1327,16 +1327,16 @@
         },
         {
             "name": "laravelcollective/html",
-            "version": "v5.6.9",
+            "version": "v5.6.10",
             "source": {
                 "type": "git",
                 "url": "https://github.com/LaravelCollective/html.git",
-                "reference": "fda9d3dad85ecea609ef9c6323d6923536cf5643"
+                "reference": "974605fcd22a7e4d19f0b2ef635a0d1d7400387d"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/LaravelCollective/html/zipball/fda9d3dad85ecea609ef9c6323d6923536cf5643",
-                "reference": "fda9d3dad85ecea609ef9c6323d6923536cf5643",
+                "url": "https://api.github.com/repos/LaravelCollective/html/zipball/974605fcd22a7e4d19f0b2ef635a0d1d7400387d",
+                "reference": "974605fcd22a7e4d19f0b2ef635a0d1d7400387d",
                 "shasum": ""
             },
             "require": {
@@ -1391,7 +1391,7 @@
             ],
             "description": "HTML and Form Builders for the Laravel Framework",
             "homepage": "https://laravelcollective.com",
-            "time": "2018-05-30T16:09:07+00:00"
+            "time": "2018-06-18T15:04:16+00:00"
         },
         {
             "name": "lcobucci/jwt",
@@ -1441,7 +1441,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",
@@ -2295,16 +2295,16 @@
         },
         {
             "name": "symfony/console",
-            "version": "v4.1.0",
+            "version": "v4.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/console.git",
-                "reference": "2d5d973bf9933d46802b01010bd25c800c87c242"
+                "reference": "70591cda56b4b47c55776ac78e157c4bb6c8b43f"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/console/zipball/2d5d973bf9933d46802b01010bd25c800c87c242",
-                "reference": "2d5d973bf9933d46802b01010bd25c800c87c242",
+                "url": "https://api.github.com/repos/symfony/console/zipball/70591cda56b4b47c55776ac78e157c4bb6c8b43f",
+                "reference": "70591cda56b4b47c55776ac78e157c4bb6c8b43f",
                 "shasum": ""
             },
             "require": {
@@ -2359,11 +2359,11 @@
             ],
             "description": "Symfony Console Component",
             "homepage": "https://symfony.com",
-            "time": "2018-05-30T07:26:09+00:00"
+            "time": "2018-05-31T10:17:53+00:00"
         },
         {
             "name": "symfony/css-selector",
-            "version": "v4.1.0",
+            "version": "v4.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/css-selector.git",
@@ -2416,16 +2416,16 @@
         },
         {
             "name": "symfony/debug",
-            "version": "v4.1.0",
+            "version": "v4.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/debug.git",
-                "reference": "449f8b00b28ab6e6912c3e6b920406143b27193b"
+                "reference": "dbe0fad88046a755dcf9379f2964c61a02f5ae3d"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/debug/zipball/449f8b00b28ab6e6912c3e6b920406143b27193b",
-                "reference": "449f8b00b28ab6e6912c3e6b920406143b27193b",
+                "url": "https://api.github.com/repos/symfony/debug/zipball/dbe0fad88046a755dcf9379f2964c61a02f5ae3d",
+                "reference": "dbe0fad88046a755dcf9379f2964c61a02f5ae3d",
                 "shasum": ""
             },
             "require": {
@@ -2468,11 +2468,11 @@
             ],
             "description": "Symfony Debug Component",
             "homepage": "https://symfony.com",
-            "time": "2018-05-16T14:33:22+00:00"
+            "time": "2018-06-08T09:39:36+00:00"
         },
         {
             "name": "symfony/event-dispatcher",
-            "version": "v4.1.0",
+            "version": "v4.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/event-dispatcher.git",
@@ -2535,16 +2535,16 @@
         },
         {
             "name": "symfony/finder",
-            "version": "v4.1.0",
+            "version": "v4.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/finder.git",
-                "reference": "087e2ee0d74464a4c6baac4e90417db7477dc238"
+                "reference": "84714b8417d19e4ba02ea78a41a975b3efaafddb"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/finder/zipball/087e2ee0d74464a4c6baac4e90417db7477dc238",
-                "reference": "087e2ee0d74464a4c6baac4e90417db7477dc238",
+                "url": "https://api.github.com/repos/symfony/finder/zipball/84714b8417d19e4ba02ea78a41a975b3efaafddb",
+                "reference": "84714b8417d19e4ba02ea78a41a975b3efaafddb",
                 "shasum": ""
             },
             "require": {
@@ -2580,20 +2580,20 @@
             ],
             "description": "Symfony Finder Component",
             "homepage": "https://symfony.com",
-            "time": "2018-05-16T14:33:22+00:00"
+            "time": "2018-06-19T21:38:16+00:00"
         },
         {
             "name": "symfony/http-foundation",
-            "version": "v4.1.0",
+            "version": "v4.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/http-foundation.git",
-                "reference": "a916c88390fb861ee21f12a92b107d51bb68af99"
+                "reference": "4f9c7cf962e635b0b26b14500ac046e07dbef7f3"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/http-foundation/zipball/a916c88390fb861ee21f12a92b107d51bb68af99",
-                "reference": "a916c88390fb861ee21f12a92b107d51bb68af99",
+                "url": "https://api.github.com/repos/symfony/http-foundation/zipball/4f9c7cf962e635b0b26b14500ac046e07dbef7f3",
+                "reference": "4f9c7cf962e635b0b26b14500ac046e07dbef7f3",
                 "shasum": ""
             },
             "require": {
@@ -2634,20 +2634,20 @@
             ],
             "description": "Symfony HttpFoundation Component",
             "homepage": "https://symfony.com",
-            "time": "2018-05-25T14:55:38+00:00"
+            "time": "2018-06-19T21:38:16+00:00"
         },
         {
             "name": "symfony/http-kernel",
-            "version": "v4.1.0",
+            "version": "v4.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/http-kernel.git",
-                "reference": "b5ab9d4cdbfd369083744b6b5dfbf454e31e5f90"
+                "reference": "29c094a1c4f8209b7e033f612cbbd69029e38955"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/http-kernel/zipball/b5ab9d4cdbfd369083744b6b5dfbf454e31e5f90",
-                "reference": "b5ab9d4cdbfd369083744b6b5dfbf454e31e5f90",
+                "url": "https://api.github.com/repos/symfony/http-kernel/zipball/29c094a1c4f8209b7e033f612cbbd69029e38955",
+                "reference": "29c094a1c4f8209b7e033f612cbbd69029e38955",
                 "shasum": ""
             },
             "require": {
@@ -2655,13 +2655,13 @@
                 "psr/log": "~1.0",
                 "symfony/debug": "~3.4|~4.0",
                 "symfony/event-dispatcher": "~4.1",
-                "symfony/http-foundation": "~4.1",
+                "symfony/http-foundation": "^4.1.1",
                 "symfony/polyfill-ctype": "~1.8"
             },
             "conflict": {
                 "symfony/config": "<3.4",
                 "symfony/dependency-injection": "<4.1",
-                "symfony/var-dumper": "<4.1",
+                "symfony/var-dumper": "<4.1.1",
                 "twig/twig": "<1.34|<2.4,>=2"
             },
             "provide": {
@@ -2682,7 +2682,7 @@
                 "symfony/stopwatch": "~3.4|~4.0",
                 "symfony/templating": "~3.4|~4.0",
                 "symfony/translation": "~3.4|~4.0",
-                "symfony/var-dumper": "~4.1"
+                "symfony/var-dumper": "^4.1.1"
             },
             "suggest": {
                 "symfony/browser-kit": "",
@@ -2721,7 +2721,7 @@
             ],
             "description": "Symfony HttpKernel Component",
             "homepage": "https://symfony.com",
-            "time": "2018-05-30T12:52:34+00:00"
+            "time": "2018-06-25T13:06:45+00:00"
         },
         {
             "name": "symfony/polyfill-ctype",
@@ -3002,16 +3002,16 @@
         },
         {
             "name": "symfony/process",
-            "version": "v4.1.0",
+            "version": "v4.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/process.git",
-                "reference": "73445bd33b0d337c060eef9652b94df72b6b3434"
+                "reference": "1d1677391ecf00d1c5b9482d6050c0c27aa3ac3a"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/process/zipball/73445bd33b0d337c060eef9652b94df72b6b3434",
-                "reference": "73445bd33b0d337c060eef9652b94df72b6b3434",
+                "url": "https://api.github.com/repos/symfony/process/zipball/1d1677391ecf00d1c5b9482d6050c0c27aa3ac3a",
+                "reference": "1d1677391ecf00d1c5b9482d6050c0c27aa3ac3a",
                 "shasum": ""
             },
             "require": {
@@ -3047,20 +3047,20 @@
             ],
             "description": "Symfony Process Component",
             "homepage": "https://symfony.com",
-            "time": "2018-05-30T07:26:09+00:00"
+            "time": "2018-05-31T10:17:53+00:00"
         },
         {
             "name": "symfony/routing",
-            "version": "v4.1.0",
+            "version": "v4.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/routing.git",
-                "reference": "180b51c66d10f09e562c9ebc395b39aacb2cf8a2"
+                "reference": "b38b9797327b26ea2e4146a40e6e2dc9820a6932"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/routing/zipball/180b51c66d10f09e562c9ebc395b39aacb2cf8a2",
-                "reference": "180b51c66d10f09e562c9ebc395b39aacb2cf8a2",
+                "url": "https://api.github.com/repos/symfony/routing/zipball/b38b9797327b26ea2e4146a40e6e2dc9820a6932",
+                "reference": "b38b9797327b26ea2e4146a40e6e2dc9820a6932",
                 "shasum": ""
             },
             "require": {
@@ -3073,7 +3073,6 @@
             },
             "require-dev": {
                 "doctrine/annotations": "~1.0",
-                "doctrine/common": "~2.2",
                 "psr/log": "~1.0",
                 "symfony/config": "~3.4|~4.0",
                 "symfony/dependency-injection": "~3.4|~4.0",
@@ -3125,20 +3124,20 @@
                 "uri",
                 "url"
             ],
-            "time": "2018-05-30T07:26:09+00:00"
+            "time": "2018-06-19T21:38:16+00:00"
         },
         {
             "name": "symfony/translation",
-            "version": "v4.1.0",
+            "version": "v4.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/translation.git",
-                "reference": "16328f5b217cebc8dd4adfe4aeeaa8c377581f5a"
+                "reference": "b6d8164085ee0b6debcd1b7a131fd6f63bb04854"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/translation/zipball/16328f5b217cebc8dd4adfe4aeeaa8c377581f5a",
-                "reference": "16328f5b217cebc8dd4adfe4aeeaa8c377581f5a",
+                "url": "https://api.github.com/repos/symfony/translation/zipball/b6d8164085ee0b6debcd1b7a131fd6f63bb04854",
+                "reference": "b6d8164085ee0b6debcd1b7a131fd6f63bb04854",
                 "shasum": ""
             },
             "require": {
@@ -3194,20 +3193,20 @@
             ],
             "description": "Symfony Translation Component",
             "homepage": "https://symfony.com",
-            "time": "2018-05-30T07:26:09+00:00"
+            "time": "2018-06-22T08:59:39+00:00"
         },
         {
             "name": "symfony/var-dumper",
-            "version": "v4.1.0",
+            "version": "v4.1.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/symfony/var-dumper.git",
-                "reference": "bc88ad53e825ebacc7b190bbd360781fce381c64"
+                "reference": "b2eebaec085d1f2cafbad7644733d494a3bbbc9b"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/var-dumper/zipball/bc88ad53e825ebacc7b190bbd360781fce381c64",
-                "reference": "bc88ad53e825ebacc7b190bbd360781fce381c64",
+                "url": "https://api.github.com/repos/symfony/var-dumper/zipball/b2eebaec085d1f2cafbad7644733d494a3bbbc9b",
+                "reference": "b2eebaec085d1f2cafbad7644733d494a3bbbc9b",
                 "shasum": ""
             },
             "require": {
@@ -3269,7 +3268,7 @@
                 "debug",
                 "dump"
             ],
-            "time": "2018-04-29T07:56:09+00:00"
+            "time": "2018-06-23T12:23:56+00:00"
         },
         {
             "name": "tijsverkoyen/css-to-inline-styles",
@@ -3798,20 +3797,20 @@
         },
         {
             "name": "laravel/dusk",
-            "version": "v3.0.8",
+            "version": "v3.0.9",
             "source": {
                 "type": "git",
                 "url": "https://github.com/laravel/dusk.git",
-                "reference": "c6201427e63b869b0c1ee83d91c1d1958b71968e"
+                "reference": "48215ab0028d759e5fd7cc8989f4b6c58050841d"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/laravel/dusk/zipball/c6201427e63b869b0c1ee83d91c1d1958b71968e",
-                "reference": "c6201427e63b869b0c1ee83d91c1d1958b71968e",
+                "url": "https://api.github.com/repos/laravel/dusk/zipball/48215ab0028d759e5fd7cc8989f4b6c58050841d",
+                "reference": "48215ab0028d759e5fd7cc8989f4b6c58050841d",
                 "shasum": ""
             },
             "require": {
-                "facebook/webdriver": "~1.0",
+                "facebook/webdriver": "~1.3",
                 "illuminate/console": "~5.6",
                 "illuminate/support": "~5.6",
                 "nesbot/carbon": "~1.20",
@@ -3855,7 +3854,7 @@
                 "testing",
                 "webdriver"
             ],
-            "time": "2018-04-29T19:15:23+00:00"
+            "time": "2018-06-20T13:47:27+00:00"
         },
         {
             "name": "mockery/mockery",
@@ -3973,16 +3972,16 @@
         },
         {
             "name": "nunomaduro/collision",
-            "version": "v2.0.2",
+            "version": "v2.0.3",
             "source": {
                 "type": "git",
                 "url": "https://github.com/nunomaduro/collision.git",
-                "reference": "245958b02c6a9edf24627380f368333ac5413a51"
+                "reference": "b1f606399ae77e9479b5597cd1aa3d8ea0078176"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/nunomaduro/collision/zipball/245958b02c6a9edf24627380f368333ac5413a51",
-                "reference": "245958b02c6a9edf24627380f368333ac5413a51",
+                "url": "https://api.github.com/repos/nunomaduro/collision/zipball/b1f606399ae77e9479b5597cd1aa3d8ea0078176",
+                "reference": "b1f606399ae77e9479b5597cd1aa3d8ea0078176",
                 "shasum": ""
             },
             "require": {
@@ -3993,7 +3992,8 @@
             },
             "require-dev": {
                 "laravel/framework": "5.6.*",
-                "phpunit/phpunit": "~7.0"
+                "phpstan/phpstan": "^0.9.2",
+                "phpunit/phpunit": "~7.2"
             },
             "type": "library",
             "extra": {
@@ -4031,7 +4031,7 @@
                 "php",
                 "symfony"
             ],
-            "time": "2018-03-21T20:11:24+00:00"
+            "time": "2018-06-16T22:05:52+00:00"
         },
         {
             "name": "phar-io/manifest",
@@ -4601,16 +4601,16 @@
         },
         {
             "name": "phpunit/phpunit",
-            "version": "7.2.4",
+            "version": "7.2.6",
             "source": {
                 "type": "git",
                 "url": "https://github.com/sebastianbergmann/phpunit.git",
-                "reference": "00bc0b93f0ff4f557e9ea766557fde96da9a03dd"
+                "reference": "400a3836ee549ae6f665323ac3f21e27eac7155f"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/sebastianbergmann/phpunit/zipball/00bc0b93f0ff4f557e9ea766557fde96da9a03dd",
-                "reference": "00bc0b93f0ff4f557e9ea766557fde96da9a03dd",
+                "url": "https://api.github.com/repos/sebastianbergmann/phpunit/zipball/400a3836ee549ae6f665323ac3f21e27eac7155f",
+                "reference": "400a3836ee549ae6f665323ac3f21e27eac7155f",
                 "shasum": ""
             },
             "require": {
@@ -4626,7 +4626,7 @@
                 "php": "^7.1",
                 "phpspec/prophecy": "^1.7",
                 "phpunit/php-code-coverage": "^6.0.7",
-                "phpunit/php-file-iterator": "^2.0",
+                "phpunit/php-file-iterator": "^2.0.1",
                 "phpunit/php-text-template": "^1.2.1",
                 "phpunit/php-timer": "^2.0",
                 "sebastian/comparator": "^3.0",
@@ -4681,7 +4681,7 @@
                 "testing",
                 "xunit"
             ],
-            "time": "2018-06-05T03:40:05+00:00"
+            "time": "2018-06-21T13:13:39+00:00"
         },
         {
             "name": "sebastian/code-unit-reverse-lookup",
diff --git a/database/factories/MarkingFactory.php b/database/factories/MarkingFactory.php
new file mode 100644
index 00000000..989fcf07
--- /dev/null
+++ b/database/factories/MarkingFactory.php
@@ -0,0 +1,10 @@
+<?php
+
+use Faker\Generator as Faker;
+
+$factory->define(App\Marking::class, function (Faker $faker) {
+    return [
+        'email' => $faker->unique()->safeEmail,
+        'marking' => str_random(10)
+    ];
+});
diff --git a/database/factories/SettingCreditFactory.php b/database/factories/SettingCreditFactory.php
index 890b6be2..f1d4eeba 100644
--- a/database/factories/SettingCreditFactory.php
+++ b/database/factories/SettingCreditFactory.php
@@ -4,6 +4,8 @@ use Faker\Generator as Faker;
 
 $factory->define(App\SettingCredit::class, function (Faker $faker) {
     return [
-        //
+        'rmb_credit_limit' => $faker->randomDigit,
+        'usd_credit_limit' => $faker->randomDigit,
+        'time_limit' => $faker->randomDigit
     ];
 });
diff --git a/database/factories/UserBankSlipFactory.php b/database/factories/UserBankSlipFactory.php
index 7ab51f2d..e5406866 100644
--- a/database/factories/UserBankSlipFactory.php
+++ b/database/factories/UserBankSlipFactory.php
@@ -7,9 +7,10 @@ $factory->define(App\UserBankSlip::class, function (Faker $faker) {
 
     return [
         'bank_slip_type' => str_random(10),
-        'bankslip_url' => str_random(10),
+        'bankslip_path' => str_random(10),
         'transfer_amount' => $faker->randomDigit,
         'cust_marking' => str_random(10),
         'booking_id' => $faker->randomElement($book_id),
+        'estimated_arrival_time' => $faker->randomDigit
     ];
 });
diff --git a/database/migrations/2018_06_20_145105_add_rate_to_booking.php b/database/migrations/2018_06_20_145105_add_rate_to_booking.php
new file mode 100644
index 00000000..f74e2fb8
--- /dev/null
+++ b/database/migrations/2018_06_20_145105_add_rate_to_booking.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddRateToBooking extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->double('rate')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+                $table->dropColumn('rate');
+            // $table->dropColumn('reject_reason');
+        });   
+    }
+}
\ No newline at end of file
diff --git a/database/migrations/2018_06_21_024802_add_status_to_booking_table.php b/database/migrations/2018_06_21_024802_add_status_to_booking_table.php
new file mode 100644
index 00000000..3c7daec7
--- /dev/null
+++ b/database/migrations/2018_06_21_024802_add_status_to_booking_table.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddStatusToBookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {   
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->integer('status')->default(1);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->dropColumn('status');
+        // $table->dropColumn('reject_reason');
+    });   
+    }
+}
diff --git a/database/migrations/2018_06_21_040652_create_invoice_table.php b/database/migrations/2018_06_21_040652_create_invoice_table.php
new file mode 100644
index 00000000..ab3a8e48
--- /dev/null
+++ b/database/migrations/2018_06_21_040652_create_invoice_table.php
@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateInvoiceTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('invoices', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('invoice_path');
+            $table->double('amount');
+            $table->integer('booking_id')->unsigned();
+            $table->foreign('booking_id')->references('id')->on('bookings');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('invoices');
+    }
+}
diff --git a/database/migrations/2018_06_21_062637_rename_imageurl_to_imagepath_in_userbankslips_table.php b/database/migrations/2018_06_21_062637_rename_imageurl_to_imagepath_in_userbankslips_table.php
new file mode 100644
index 00000000..e29ffc4d
--- /dev/null
+++ b/database/migrations/2018_06_21_062637_rename_imageurl_to_imagepath_in_userbankslips_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class RenameImageurlToImagepathInUserbankslipsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('user_bank_slips', function($table)
+        {
+            $table->renameColumn('bankslip_url', 'bankslip_path');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}
diff --git a/database/migrations/2018_06_21_062700_rename_imageurl_to_imagepath_in_purchaseorders_table.php b/database/migrations/2018_06_21_062700_rename_imageurl_to_imagepath_in_purchaseorders_table.php
new file mode 100644
index 00000000..cc1ea4df
--- /dev/null
+++ b/database/migrations/2018_06_21_062700_rename_imageurl_to_imagepath_in_purchaseorders_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class RenameImageurlToImagepathInPurchaseordersTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('purchase_orders', function($table)
+        {
+            $table->renameColumn('image_url', 'image_path');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}
diff --git a/database/migrations/2018_06_21_072354_remove_amountcolumn_from_po_table.php b/database/migrations/2018_06_21_072354_remove_amountcolumn_from_po_table.php
new file mode 100644
index 00000000..d350c3c1
--- /dev/null
+++ b/database/migrations/2018_06_21_072354_remove_amountcolumn_from_po_table.php
@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class RemoveAmountcolumnFromPoTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('purchase_orders', function (Blueprint $table) {
+            $table->dropColumn('amount');
+        // $table->dropColumn('reject_reason');
+         });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('purchase_orders', function (Blueprint $table) {
+            $table->double('amount');
+        // $table->dropColumn('reject_reason');
+         });
+    }
+}
diff --git a/database/migrations/2018_06_22_042127_add_adminstatus_to_booking_table.php b/database/migrations/2018_06_22_042127_add_adminstatus_to_booking_table.php
new file mode 100644
index 00000000..4e7e93a9
--- /dev/null
+++ b/database/migrations/2018_06_22_042127_add_adminstatus_to_booking_table.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddAdminstatusToBookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->integer('admin_status')->default(1);
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->dropColumn('admin_status');
+        // $table->dropColumn('reject_reason');
+        });   
+    }
+}
diff --git a/database/migrations/2018_06_22_042911_change_adminstatus_default_booking_table.php b/database/migrations/2018_06_22_042911_change_adminstatus_default_booking_table.php
new file mode 100644
index 00000000..5047f990
--- /dev/null
+++ b/database/migrations/2018_06_22_042911_change_adminstatus_default_booking_table.php
@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class ChangeAdminstatusDefaultBookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->integer('admin_status')->default(0)->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+    }
+}
diff --git a/database/migrations/2018_06_25_075341_change_adminstatus_default_to1_on_booking_table.php b/database/migrations/2018_06_25_075341_change_adminstatus_default_to1_on_booking_table.php
new file mode 100644
index 00000000..ef50d656
--- /dev/null
+++ b/database/migrations/2018_06_25_075341_change_adminstatus_default_to1_on_booking_table.php
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class ChangeAdminstatusDefaultTo1OnBookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->integer('admin_status')->default(1)->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}
diff --git a/database/migrations/2018_06_25_101043_add_time_limit_setting_credit_table.php b/database/migrations/2018_06_25_101043_add_time_limit_setting_credit_table.php
new file mode 100644
index 00000000..4e0aefef
--- /dev/null
+++ b/database/migrations/2018_06_25_101043_add_time_limit_setting_credit_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddTimeLimitSettingCreditTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('setting_credits', function (Blueprint $table) {
+            $table->integer('time_limit');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('setting_credits', function (Blueprint $table) {
+            // $table->dropColumn('time_limit');
+        });   
+    }
+}
\ No newline at end of file
diff --git a/database/migrations/2018_06_26_035802_add_eta_user_bank_slip_table.php b/database/migrations/2018_06_26_035802_add_eta_user_bank_slip_table.php
new file mode 100644
index 00000000..acd53a08
--- /dev/null
+++ b/database/migrations/2018_06_26_035802_add_eta_user_bank_slip_table.php
@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddEtaUserBankSlipTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('user_bank_slips', function (Blueprint $table) {
+            $table->integer('estimated_arrival_time');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        if (Schema::hasColumn('user_bank_slips', 'estimated_arrival_time')) {
+            Schema::table('user_bank_slips', function (Blueprint $table) {
+                // $table->dropColumn('estimated_arrival_time');
+            });
+        }
+    }
+}
diff --git a/database/seeds/DatabaseSeeder.php b/database/seeds/DatabaseSeeder.php
index 098d40f3..bcf98f78 100644
--- a/database/seeds/DatabaseSeeder.php
+++ b/database/seeds/DatabaseSeeder.php
@@ -16,5 +16,6 @@ class DatabaseSeeder extends Seeder
         $this->call(UserRoleSeeder::class);
         $this->call(RateTableSeeder::class);
         $this->call(BookTableSeeder::class);     
+        $this->call(SettingCreditSeeder::class);
     }
 }
diff --git a/database/seeds/SettingCreditSeeder.php b/database/seeds/SettingCreditSeeder.php
new file mode 100644
index 00000000..0087203e
--- /dev/null
+++ b/database/seeds/SettingCreditSeeder.php
@@ -0,0 +1,21 @@
+<?php
+
+use Illuminate\Database\Seeder;
+use App\SettingCredit;
+
+class SettingCreditSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        DB::table('setting_credits')->insert([
+        	'rmb_credit_limit' => '4000',
+        	'usd_credit_limit' => '5000',
+        	'time_limit' => '600'
+        ]);
+    }
+}
diff --git a/resources/assets/js/components/AdminProgressTrack.vue b/resources/assets/js/components/AdminProgressTrack.vue
new file mode 100644
index 00000000..dfae9647
--- /dev/null
+++ b/resources/assets/js/components/AdminProgressTrack.vue
@@ -0,0 +1,46 @@
+<template>
+  <el-row>
+    <el-steps :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
+      <el-step title="Booking"/>
+      <el-step title="Verification"/>
+      <el-step title="Supplier Booking"/>
+      <el-step title="Supplier Report"/>
+      <el-step title="Upload China Bankslip To Booking"/>
+      <el-step title="Invoice"/>
+      <el-step title="Completed"/>
+    </el-steps>
+  </el-row>
+</template>
+
+<style type="text/css">
+    /* .el-row {
+        margin: 20px 0;
+    }
+
+    .el-steps {
+        padding-top: 70px;
+    }
+
+    .el-step .el-step__main {
+        transform: translateY(-70px);
+    }
+    .el-step__title.is-wait {
+        font-size: 10pt;
+    }
+    .el-step__title {
+        line-height: 1.4;
+    }
+
+    .el-step .is-success .el-step__line {
+        background-color: #67c23a;
+    } */
+</style>
+
+<script>
+export default {
+  props: ['value'],
+  data: () => ({
+    status: 1
+  })
+}
+</script>
diff --git a/resources/assets/js/components/LocaleDropdown.vue b/resources/assets/js/components/LocaleDropdown.vue
index b3d67fd4..f4b0d5c3 100644
--- a/resources/assets/js/components/LocaleDropdown.vue
+++ b/resources/assets/js/components/LocaleDropdown.vue
@@ -1,16 +1,24 @@
 <template>
-  <li class="nav-item dropdown">
-    <a class="nav-link dropdown-toggle" href="#" role="button"
-       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-      {{ locales[locale] }}
-    </a>
-    <div class="dropdown-menu">
-      <a v-for="(value, key) in locales" :key="key" class="dropdown-item" href="#"
-         @click.prevent="setLocale(key)">
-        {{ value }}
+<div>
+  <ul class="nav navbar-nav">
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" href="#" role="button"
+        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        {{ locales[locale] }}
       </a>
-    </div>
-  </li>
+      <div class="dropdown-menu">
+        <a v-for="(value, key) in locales" :key="key" class="dropdown-item" href="#"
+          @click.prevent="setLocale(key)">
+          {{ value }}
+        </a>
+      </div>
+    </li>
+    <li><a class="nav-link" href="#" role="button">Update Rate</a></li>
+    <li><a class="nav-link" href="#" role="button">Complete Order</a></li>
+    <li><a class="nav-link" href="#" role="button">Transaction History</a></li>
+    <li><a class="nav-link" href="#" role="button">Upload Supplier Bank Slip to System</a></li>
+  </ul>
+ </div> 
 </template>
 
 <script>
diff --git a/resources/assets/js/components/ProgressTrack.vue b/resources/assets/js/components/ProgressTrack.vue
index 0aa7c413..00c85c5d 100644
--- a/resources/assets/js/components/ProgressTrack.vue
+++ b/resources/assets/js/components/ProgressTrack.vue
@@ -1,17 +1,16 @@
 <template>
-    <el-row>
-        <el-steps v-bind:value="value" :active="value" :alignCenter="true" process-status="wait" finish-status="success">
-            <el-step title="Booking"></el-step>
-            <el-step title="Payment"></el-step>
-            <el-step title="Order Confirmation"></el-step>
-            <el-step title="Processing Transfer"></el-step>
-            <el-step title="Transfer Complete"></el-step>
-            <el-step title="Order Complete"></el-step>
-        </el-steps>
-    </el-row>
+  <el-row>
+    <el-steps :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
+      <el-step title="Booking"/>
+      <el-step title="Payment"/>
+      <el-step title="Order Confirmation"/>
+      <el-step title="Processing Transfer"/>
+      <el-step title="Transfer Complete"/>
+      <el-step title="Order Complete"/>
+    </el-steps>
+  </el-row>
 </template>
 
-
 <style type="text/css">
     /* .el-row {
         margin: 20px 0;
@@ -43,4 +42,4 @@ export default {
     status: 1
   })
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/assets/js/middleware/admin.js b/resources/assets/js/middleware/admin.js
index 276ef3de..f2ccc855 100644
--- a/resources/assets/js/middleware/admin.js
+++ b/resources/assets/js/middleware/admin.js
@@ -1,7 +1,8 @@
 import store from '~/store'
 
 export default (to, from, next) => {
-  if (store.getters['auth/user'].role !== 'admin') {
+  console.log(store.getters['auth/role'])
+  if (store.getters['auth/role'] !== 'admin') {
     next({ name: 'home' })
   } else {
     next()
diff --git a/resources/assets/js/middleware/auth.js b/resources/assets/js/middleware/auth.js
index 138da317..00805252 100644
--- a/resources/assets/js/middleware/auth.js
+++ b/resources/assets/js/middleware/auth.js
@@ -3,7 +3,7 @@ import store from '~/store'
 export default async (to, from, next) => {
   if (!store.getters['auth/check']) {
     next({ name: 'login' })
-  } else if (store.getters['auth/user'].role == 'admin') {
+  } else if (store.getters['auth/role'] === 'admin') {
     next({ name: 'admin.home' })
   } else {
     next()
diff --git a/resources/assets/js/pages/admin/booking/supplierBooking.vue b/resources/assets/js/pages/admin/booking/supplierBooking.vue
new file mode 100644
index 00000000..37196cb3
--- /dev/null
+++ b/resources/assets/js/pages/admin/booking/supplierBooking.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Transfer In Progress</h4>
+      <br>
+      <h5> ETA :  3 days 14 Hours </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>
+        <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-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/AdminProgressTrack'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 4
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/supplierReport.vue b/resources/assets/js/pages/admin/booking/supplierReport.vue
new file mode 100644
index 00000000..37196cb3
--- /dev/null
+++ b/resources/assets/js/pages/admin/booking/supplierReport.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Transfer In Progress</h4>
+      <br>
+      <h5> ETA :  3 days 14 Hours </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>
+        <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-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/AdminProgressTrack'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 4
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
new file mode 100644
index 00000000..37196cb3
--- /dev/null
+++ b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Transfer In Progress</h4>
+      <br>
+      <h5> ETA :  3 days 14 Hours </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>
+        <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-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/AdminProgressTrack'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 4
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
new file mode 100644
index 00000000..37196cb3
--- /dev/null
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -0,0 +1,74 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Transfer In Progress</h4>
+      <br>
+      <h5> ETA :  3 days 14 Hours </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>
+        <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-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/AdminProgressTrack'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 4
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/verification.vue b/resources/assets/js/pages/admin/booking/verification.vue
new file mode 100644
index 00000000..20bac84b
--- /dev/null
+++ b/resources/assets/js/pages/admin/booking/verification.vue
@@ -0,0 +1,280 @@
+<template>
+  <el-main>
+    <progress-track v-model="status" />
+
+    <div align="center">
+      <h4 style="margin-top:5%;"></h4>
+      <br>
+      <h5> Verify User Bankslip </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="200">
+                    <col name="el-table_2_column_10" width="200">
+                  </colgroup>
+                  <tbody>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Order Number :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.id }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Date :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.created_at }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Customer Marking :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">CIEF/150ECE</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell"></div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Term :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.term }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell"></div>
+                      </td>
+                    </tr>
+                    <!---->
+                  </tbody>
+                </table>
+                <!---->
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <!---->
+              <!---->
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+            </div>
+          </div>
+          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
+            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
+              <div class="hidden-columns">
+                <div></div>
+                <div></div>
+              </div>
+              <!---->
+              <div class="el-table__body-wrapper is-scrolling-none">
+                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
+                  <colgroup>
+                    <col name="el-table_3_column_11" width="200">
+                    <col name="el-table_3_column_12" width="200">
+                  </colgroup>
+                  <tbody>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">CNY/RMB :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">CNY {{ booking_details.amount }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">+ Service Charge :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">CNY {{ booking_details.service_charge }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">/ RATE :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">{{ booking_details.rate }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">MYR {{ booking_details.bia }}</div>
+                      </td>
+                    </tr>
+                    <!-- <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">+ GST 6% :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">MYR 4,430.88</div>
+                      </td>
+                    </tr> -->
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell"><b>MYR {{ booking_details.bia }}</b></div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell"></div>
+                      </td>
+                    </tr>
+                    <!---->
+                  </tbody>
+                </table>
+                <!---->
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <!---->
+              <!---->
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+            </div>
+          </div>
+        </div>
+        <!-- <el-row :gutter="12">
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <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-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <el-card class="box-card">
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <el-button :loading="loading" @click="approveUserSlip" type="success">Aprroved</el-button>
+            <el-button :loading="loading" @click="rejectUserSlip" type="danger">Rejected</el-button>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+  import ProgressTrack from '~/components/AdminProgressTrack'
+  import axios from 'axios'
+
+  export default {
+    components: {
+      'progress-track': ProgressTrack
+    },
+    data() {
+      return {
+        status: 2,
+        loading: false,
+        booking_details:{
+          id: null,
+          amount: null,
+          bia: 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
+        loading.close()
+
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+  },
+    methods: {
+      approveUserSlip() {
+        // axios.get('api/booking')
+        //   .then((response) => {
+        //     console.log(response)
+        //     this.list = response.data
+        //   })
+      },
+      rejectUserSlip() {
+        // axios.get('api/booking')
+        //   .then((response) => {
+        //     console.log(response)
+        //     this.list = response.data
+        //   })
+      },
+    }
+  }
+</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 f5f67c94..7fe842c0 100644
--- a/resources/assets/js/pages/admin/home.vue
+++ b/resources/assets/js/pages/admin/home.vue
@@ -1,15 +1,138 @@
 <template>
-  <card :title="$t('home')">
-    This is admin
-  </card>
+  <!-- Booking Table -->
+  <el-row :gutter="20">
+    <div>
+      <el-table :data="bookingTable">
+        <el-table-column label="No." width="100">
+          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
+          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id) }"> {{ scope.row.id }}</el-button>
+        </el-table-column>
+        <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
+        <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
+        <el-table-column label="Rate" width="74" prop="rate" />
+        <el-table-column label="Amount" prop="amount" justify="center" width="110" />
+        <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount"
+                         prop="transfer_amount" width="170" />
+        <!-- <el-table-column label="ETA" sortable width="100"/> -->
+        <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
+        </el-table-column> -->
+        <!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
+        <el-table-column label="Status" width="106">
+          <template slot-scope="scope">
+            <el-popover trigger="click" placement="top">
+              <p>{{ scope.row.status_desc }}</p>
+              <div slot="reference" class="name-wrapper">
+                <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
+              </div>
+            </el-popover>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
+        <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
+        <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
+                         label="" width="180" filter-placement="bottom-end">
+          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.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>
+              <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
+            </template> -->
+        </el-table-column>
+      </el-table>
+    </div>
+  </el-row>
+  <!-- Booking Table-end -->
 </template>
 
 <script>
+import axios from 'axios'
+
 export default {
   middleware: 'admin',
+  data () {
+    return {
+      status: null,
+      bookingTable: [
+      ]
+    }
+  },
+  mounted () {
+    axios
+      .get('/api/admin/booking')
+      .then((response) => {
+        console.log(response.data)
+        this.bookingTable = response.data
 
-  metaInfo () {
-    return { title: this.$t('home') }
+      // loading.close()
+      }).catch((error) => {
+      // console.log(error)
+      // loading.close()
+      // this.$router.push({
+      //   name: 'notfound'
+      // })
+      })
+  },
+  methods: {
+    filterTag (value, row) {
+      return row.tag === value
+    },
+    filterHandler (value, row, column) {
+      const property = column['property']
+      return row[property] === value
+    },
+    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',
+            params: {id: booking_id }
+          })
+          break
+        case 2:
+          this.$router.push({
+            name: 'booking.admin.verification',
+            params: {id: booking_id }
+          })
+          break
+        case 3:
+          this.$router.push({
+            name: 'booking.admin.supplier',
+            params: {id: booking_id }
+          })
+          break
+        case 4:
+          this.$router.push({
+            name: 'booking.admin.supplier.report',
+            params: {id: booking_id }
+          })
+          break
+        case 5:
+          this.$router.push({
+            name: 'booking.admin.cnslip',
+            params: {id: booking_id }
+          })
+          break
+
+        case 6:
+          this.$router.push({
+            name: 'booking.admin.invoice',
+            params: {id: booking_id }
+          })
+          break
+
+        case 7:
+          this.$router.push({
+            name: 'booking.complete',
+            params: {id: booking_id }
+          })
+          break
+        default:
+          break
+      }
+    }
   }
+
 }
 </script>
diff --git a/resources/assets/js/pages/admin/index.vue b/resources/assets/js/pages/admin/index.vue
index c60c3751..67871a7c 100644
--- a/resources/assets/js/pages/admin/index.vue
+++ b/resources/assets/js/pages/admin/index.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="top-right links">
       <template v-if="authenticated">
-        <router-link :to="{ name: 'home' }">
+        <router-link :to="{ name: 'admin/home' }">
           {{ $t('home') }}
         </router-link>
       </template>
@@ -18,7 +18,7 @@
 
     <div class="text-center">
       <div class="title mb-4">
-        This is admin
+        This index
       </div>
 
     </div>
@@ -32,7 +32,7 @@ export default {
   layout: 'basic',
 
   metaInfo () {
-    return { title: this.$t('home') }
+    // return { title: this.$t('admin.home') }
   },
 
   data: () => ({
@@ -51,8 +51,3 @@ export default {
   right: 10px;
   top: 18px;
 }
-
-.title {
-  font-size: 85px;
-}
-</style>
diff --git a/resources/assets/js/pages/auth/login.vue b/resources/assets/js/pages/auth/login.vue
index 054eb81f..06c5e6b4 100644
--- a/resources/assets/js/pages/auth/login.vue
+++ b/resources/assets/js/pages/auth/login.vue
@@ -80,11 +80,9 @@ export default {
 
   methods: {
     async login () {
-
       // Submit the form.
       const { data } = await this.form.post('/api/login')
 
-
       // Add loading screen
       const loading = this.$loading({
         lock: true,
@@ -96,14 +94,12 @@ export default {
       // Save the token.
       this.$store.dispatch('auth/saveToken', {
         token: data.token,
-        remember: this.remember,
+        remember: this.remember
       })
 
       // Fetch the user.
       await this.$store.dispatch('auth/fetchUser')
 
-
-
       // Redirect home.
       if (store.getters['auth/user'].role === 'admin') {
         this.$router.push({ name: 'admin.home' })
diff --git a/resources/assets/js/pages/booking/completed.vue b/resources/assets/js/pages/booking/completed.vue
index 1cb07172..42585d3c 100644
--- a/resources/assets/js/pages/booking/completed.vue
+++ b/resources/assets/js/pages/booking/completed.vue
@@ -1,103 +1,103 @@
 <template>
-    <el-main>
-        <progress-track v-model="status"></progress-track>
+  <el-main>
+    <progress-track v-model="status"/>
 
-        <div align="center">
-            <h4 style="margin-top:5%;">Order Completed</h4>
-            <br>
+    <div align="center">
+      <h4 style="margin-top:5%;">Order Completed</h4>
+      <br>
+    </div>
+
+    <!-- upload card -->
+    <br>
+    <el-row :gutter="12" justify="center" align="center">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Purchase Order</span>
+            <!-- <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="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Invoice</span>
+            <!-- <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="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>China Bank Slip</span>
+            <!-- <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="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <br>
+
+    <!-- order details -->
+    <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>
-
-        <!-- upload card -->
-        <br>
-        <el-row :gutter="12" justify="center" align="center">
-            <el-col :span="8">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>Purchase Order</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-                  <el-row type="flex" :gutter="12">
-                        <el-col :span="12">
-                            <a target=" _blank" href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-
-                </el-card>
-            </el-col>
-            <el-col :span="8">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>Invoice</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-                    <el-row type="flex" :gutter="12">
-                        <el-col :span="12">
-                            <a target=" _blank" href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-                </el-card>
-            </el-col>
-            <el-col :span="8">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>China Bank Slip</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-                    <el-row type="flex" :gutter="12">
-                        <el-col :span="12">
-                            <a target=" _blank" href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-                </el-card>
-            </el-col>
+        <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>
-        <br>
+      </el-card>
+    </el-row>
+    <br>
 
-        <!-- order details -->
-        <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>
-                <el-row :gutter="12">
-                    <el-col :span="12">
-                        <el-table :data="bookingConfirmTable" align="center" :show-header="false">
-                            <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" align="center" :show-header="false">
-                            <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 justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Bankin Slip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
         </el-row>
-        <br>
-
-        <el-row justify="center" align="center">
-            <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                    <span>Order Bankin Slip</span>
-                    <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                </div>
-                <el-row :gutter="12">
-                    <el-col :span="22" style="text-align:center">
-                        <img src="http://via.placeholder.com/600x400" class="image">
-                    </el-col>
-                </el-row>
-            </el-card>
-        </el-row>
-    </el-main>
+      </el-card>
+    </el-row>
+  </el-main>
 </template>
 <style>
     .booking-details {
@@ -105,62 +105,61 @@
     }
 </style>
 <script>
-    import VueCountdown from '@dmaksimovic/vue-countdown'
-    import ProgressTrack from '~/components/ProgressTrack'
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
 
-    export default {
-        components: {
-            'progress-track': ProgressTrack
-        },
-        data() {
-            return {
-                status: 6,
-                bookingConfirmTable: [{
-                    data1: 'Order Number :',
-                    data2: '001'
-                }, {
-                    data1: 'Date :',
-                    data2: '25/5/2018'
-                }, {
-                    data1: 'Customer Marking :',
-                    data2: 'CIEF/150ECE'
-                }, {
-                    data1: '',
-                    data2: ''
-                }, {
-                    data1: 'Payment Method :',
-                    data2: 'Cash/Bank Transfer'
-                }, {
-                    data1: '',
-                    data2: ''
-                }],
-                bookingConfirmTable2: [{
-                    data1: 'CNY/RMB :',
-                    data2: 'CNY 120,500.00'
-                }, {
-                    data1: '+ Service Charge :',
-                    data2: 'CNY 20.00'
-                }, {
-                    data1: '/ RATE :',
-                    data2: '1.63'
-                }, {
-                    data1: '',
-                    data2: 'MYR 73,848.04'
-                }, {
-                    data1: '+ GST 6% :',
-                    data2: 'MYR 4,430.88'
-                }, {
-                    data1: '',
-                    data2: 'MYR 78,278.92'
-                }, {
-                    data1: '',
-                    data2: ''
-                }]
-            }
-        },
-        methods: {
-
-
-        }
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 6,
+      bookingConfirmTable: [{
+        data1: 'Order Number :',
+        data2: '001'
+      }, {
+        data1: 'Date :',
+        data2: '25/5/2018'
+      }, {
+        data1: 'Customer Marking :',
+        data2: 'CIEF/150ECE'
+      }, {
+        data1: '',
+        data2: ''
+      }, {
+        data1: 'Payment Method :',
+        data2: 'Cash/Bank Transfer'
+      }, {
+        data1: '',
+        data2: ''
+      }],
+      bookingConfirmTable2: [{
+        data1: 'CNY/RMB :',
+        data2: 'CNY 120,500.00'
+      }, {
+        data1: '+ Service Charge :',
+        data2: 'CNY 20.00'
+      }, {
+        data1: '/ RATE :',
+        data2: '1.63'
+      }, {
+        data1: '',
+        data2: 'MYR 73,848.04'
+      }, {
+        data1: '+ GST 6% :',
+        data2: 'MYR 4,430.88'
+      }, {
+        data1: '',
+        data2: 'MYR 78,278.92'
+      }, {
+        data1: '',
+        data2: ''
+      }]
     }
-</script>
\ No newline at end of file
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/booking/confirmation.vue b/resources/assets/js/pages/booking/confirmation.vue
index 58812c71..8e2ce4bf 100644
--- a/resources/assets/js/pages/booking/confirmation.vue
+++ b/resources/assets/js/pages/booking/confirmation.vue
@@ -1,6 +1,6 @@
 <template>
   <el-main>
-    <progress-track v-model="status"></progress-track>
+    <progress-track v-model="status"/>
 
     <div align="center">
       <h4 style="margin-top:5%;">Bankin Slip Verification In Progress</h4>
@@ -16,13 +16,13 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="12">
-            <el-table :data="bookingConfirmTable" align="center" :show-header="false">
+            <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" align="center" :show-header="false">
+            <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>
@@ -32,7 +32,7 @@
     </el-row>
     <br>
 
-      <el-row justify="center" align="center">
+    <el-row justify="center" align="center">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
           <span>BankinSlip</span>
@@ -53,63 +53,62 @@
   }
 </style>
 <script>
-  import VueCountdown from '@dmaksimovic/vue-countdown'
-  import ProgressTrack from '~/components/ProgressTrack'
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
 
-  export default {
-    components: {
-      'progress-track': ProgressTrack
-    },
-    data() {
-      return {
-        status: 3,
-        bookingConfirmTable: [{
-          data1: 'Order Number :',
-          data2: '001'
-        }, {
-          data1: 'Date :',
-          data2: '25/5/2018'
-        }, {
-          data1: 'Customer Marking :',
-          data2: 'CIEF/150ECE'
-        }, {
-          data1: '',
-          data2: ''
-        }, {
-          data1: 'Payment Method :',
-          data2: 'Cash/Bank Transfer'
-        }, {
-          data1: '',
-          data2: ''
-        }],
-        bookingConfirmTable2:[{
-          data1: 'CNY/RMB :',
-          data2: 'CNY 120,500.00'
-        }, {
-          data1: '+ Service Charge :',
-          data2: 'CNY 20.00'
-        }, {
-          data1: '/ RATE :',
-          data2: '1.63'
-        }, {
-          data1: '',
-          data2: 'MYR 73,848.04'
-        }, {
-          data1: '+ GST 6% :',
-          data2: 'MYR 4,430.88'
-        }, {
-          data1: '',
-          data2: 'MYR 78,278.92'
-        }, {
-          data1: '',
-          data2: ''
-        }
-        ]
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 3,
+      bookingConfirmTable: [{
+        data1: 'Order Number :',
+        data2: '001'
+      }, {
+        data1: 'Date :',
+        data2: '25/5/2018'
+      }, {
+        data1: 'Customer Marking :',
+        data2: 'CIEF/150ECE'
+      }, {
+        data1: '',
+        data2: ''
+      }, {
+        data1: 'Payment Method :',
+        data2: 'Cash/Bank Transfer'
+      }, {
+        data1: '',
+        data2: ''
+      }],
+      bookingConfirmTable2: [{
+        data1: 'CNY/RMB :',
+        data2: 'CNY 120,500.00'
+      }, {
+        data1: '+ Service Charge :',
+        data2: 'CNY 20.00'
+      }, {
+        data1: '/ RATE :',
+        data2: '1.63'
+      }, {
+        data1: '',
+        data2: 'MYR 73,848.04'
+      }, {
+        data1: '+ GST 6% :',
+        data2: 'MYR 4,430.88'
+      }, {
+        data1: '',
+        data2: 'MYR 78,278.92'
+      }, {
+        data1: '',
+        data2: ''
       }
-    },
-    methods: {
-
-
+      ]
     }
+  },
+  methods: {
+
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/booking/poComplete.vue b/resources/assets/js/pages/booking/poComplete.vue
index e70b0242..bae24ee9 100644
--- a/resources/assets/js/pages/booking/poComplete.vue
+++ b/resources/assets/js/pages/booking/poComplete.vue
@@ -1,88 +1,88 @@
 <template>
-    <el-main>
-        <progress-track v-model="status"></progress-track>
+  <el-main>
+    <progress-track v-model="status"/>
 
-        <div align="center">
-            <h4 style="margin-top:5%;">Processing Invoice</h4>
-            <br>
+    <div align="center">
+      <h4 style="margin-top:5%;">Processing Invoice</h4>
+      <br>
+    </div>
+
+    <!-- upload card -->
+    <br>
+    <el-row :gutter="12" justify="center" align="center">
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Purchase Order</span>
+            <!-- <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="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>China Bank Slip</span>
+            <!-- <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="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <br>
+
+    <!-- order details -->
+    <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>
-
-        <!-- upload card -->
-        <br>
-        <el-row :gutter="12" justify="center" align="center">
-            <el-col :span="12">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>Purchase Order</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-                  <el-row type="flex" :gutter="12">
-                        <el-col :span="12">
-                            <a target=" _blank" href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-
-                </el-card>
-            </el-col>
-            <el-col :span="12">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>China Bank Slip</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-                    <el-row type="flex" :gutter="12">
-                        <el-col :span="12">
-                            <a  target=" _blank" href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-                </el-card>
-            </el-col>
+        <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>
-        <br>
+      </el-card>
+    </el-row>
+    <br>
 
-        <!-- order details -->
-        <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>
-                <el-row :gutter="12">
-                    <el-col :span="12">
-                        <el-table :data="bookingConfirmTable" align="center" :show-header="false">
-                            <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" align="center" :show-header="false">
-                            <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 justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Bankin Slip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
         </el-row>
-        <br>
-
-        <el-row justify="center" align="center">
-            <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                    <span>Order Bankin Slip</span>
-                    <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                </div>
-                <el-row :gutter="12">
-                    <el-col :span="22" style="text-align:center">
-                        <img src="http://via.placeholder.com/600x400" class="image">
-                    </el-col>
-                </el-row>
-            </el-card>
-        </el-row>
-    </el-main>
+      </el-card>
+    </el-row>
+  </el-main>
 </template>
 <style>
     .booking-details {
@@ -90,62 +90,61 @@
     }
 </style>
 <script>
-    import VueCountdown from '@dmaksimovic/vue-countdown'
-    import ProgressTrack from '~/components/ProgressTrack'
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
 
-    export default {
-        components: {
-            'progress-track': ProgressTrack
-        },
-        data() {
-            return {
-                status: 5,
-                bookingConfirmTable: [{
-                    data1: 'Order Number :',
-                    data2: '001'
-                }, {
-                    data1: 'Date :',
-                    data2: '25/5/2018'
-                }, {
-                    data1: 'Customer Marking :',
-                    data2: 'CIEF/150ECE'
-                }, {
-                    data1: '',
-                    data2: ''
-                }, {
-                    data1: 'Payment Method :',
-                    data2: 'Cash/Bank Transfer'
-                }, {
-                    data1: '',
-                    data2: ''
-                }],
-                bookingConfirmTable2: [{
-                    data1: 'CNY/RMB :',
-                    data2: 'CNY 120,500.00'
-                }, {
-                    data1: '+ Service Charge :',
-                    data2: 'CNY 20.00'
-                }, {
-                    data1: '/ RATE :',
-                    data2: '1.63'
-                }, {
-                    data1: '',
-                    data2: 'MYR 73,848.04'
-                }, {
-                    data1: '+ GST 6% :',
-                    data2: 'MYR 4,430.88'
-                }, {
-                    data1: '',
-                    data2: 'MYR 78,278.92'
-                }, {
-                    data1: '',
-                    data2: ''
-                }]
-            }
-        },
-        methods: {
-
-
-        }
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 5,
+      bookingConfirmTable: [{
+        data1: 'Order Number :',
+        data2: '001'
+      }, {
+        data1: 'Date :',
+        data2: '25/5/2018'
+      }, {
+        data1: 'Customer Marking :',
+        data2: 'CIEF/150ECE'
+      }, {
+        data1: '',
+        data2: ''
+      }, {
+        data1: 'Payment Method :',
+        data2: 'Cash/Bank Transfer'
+      }, {
+        data1: '',
+        data2: ''
+      }],
+      bookingConfirmTable2: [{
+        data1: 'CNY/RMB :',
+        data2: 'CNY 120,500.00'
+      }, {
+        data1: '+ Service Charge :',
+        data2: 'CNY 20.00'
+      }, {
+        data1: '/ RATE :',
+        data2: '1.63'
+      }, {
+        data1: '',
+        data2: 'MYR 73,848.04'
+      }, {
+        data1: '+ GST 6% :',
+        data2: 'MYR 4,430.88'
+      }, {
+        data1: '',
+        data2: 'MYR 78,278.92'
+      }, {
+        data1: '',
+        data2: ''
+      }]
     }
-</script>
\ No newline at end of file
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index c9c7b4d9..c2e85c3f 100644
--- a/resources/assets/js/pages/booking/transfer.vue
+++ b/resources/assets/js/pages/booking/transfer.vue
@@ -1,6 +1,6 @@
 <template>
   <el-main>
-    <progress-track v-model="status"></progress-track>
+    <progress-track v-model="status"/>
 
     <div align="center">
       <h4 style="margin-top:5%;">Transfer In Progress</h4>
@@ -18,13 +18,13 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="12">
-            <el-table :data="bookingConfirmTable" align="center" :show-header="false">
+            <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" align="center" :show-header="false">
+            <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>
@@ -34,7 +34,7 @@
     </el-row>
     <br>
 
-      <el-row justify="center" align="center">
+    <el-row justify="center" align="center">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
           <span>BankinSlip</span>
@@ -55,63 +55,62 @@
   }
 </style>
 <script>
-  import VueCountdown from '@dmaksimovic/vue-countdown'
-  import ProgressTrack from '~/components/ProgressTrack'
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
 
-  export default {
-    components: {
-      'progress-track': ProgressTrack
-    },
-    data() {
-      return {
-        status: 4,
-        bookingConfirmTable: [{
-          data1: 'Order Number :',
-          data2: '001'
-        }, {
-          data1: 'Date :',
-          data2: '25/5/2018'
-        }, {
-          data1: 'Customer Marking :',
-          data2: 'CIEF/150ECE'
-        }, {
-          data1: '',
-          data2: ''
-        }, {
-          data1: 'Payment Method :',
-          data2: 'Cash/Bank Transfer'
-        }, {
-          data1: '',
-          data2: ''
-        }],
-        bookingConfirmTable2:[{
-          data1: 'CNY/RMB :',
-          data2: 'CNY 120,500.00'
-        }, {
-          data1: '+ Service Charge :',
-          data2: 'CNY 20.00'
-        }, {
-          data1: '/ RATE :',
-          data2: '1.63'
-        }, {
-          data1: '',
-          data2: 'MYR 73,848.04'
-        }, {
-          data1: '+ GST 6% :',
-          data2: 'MYR 4,430.88'
-        }, {
-          data1: '',
-          data2: 'MYR 78,278.92'
-        }, {
-          data1: '',
-          data2: ''
-        }
-        ]
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 4,
+      bookingConfirmTable: [{
+        data1: 'Order Number :',
+        data2: '001'
+      }, {
+        data1: 'Date :',
+        data2: '25/5/2018'
+      }, {
+        data1: 'Customer Marking :',
+        data2: 'CIEF/150ECE'
+      }, {
+        data1: '',
+        data2: ''
+      }, {
+        data1: 'Payment Method :',
+        data2: 'Cash/Bank Transfer'
+      }, {
+        data1: '',
+        data2: ''
+      }],
+      bookingConfirmTable2: [{
+        data1: 'CNY/RMB :',
+        data2: 'CNY 120,500.00'
+      }, {
+        data1: '+ Service Charge :',
+        data2: 'CNY 20.00'
+      }, {
+        data1: '/ RATE :',
+        data2: '1.63'
+      }, {
+        data1: '',
+        data2: 'MYR 73,848.04'
+      }, {
+        data1: '+ GST 6% :',
+        data2: 'MYR 4,430.88'
+      }, {
+        data1: '',
+        data2: 'MYR 78,278.92'
+      }, {
+        data1: '',
+        data2: ''
       }
-    },
-    methods: {
-
-
+      ]
     }
+  },
+  methods: {
+
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index fb2a2c31..226ad452 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -1,99 +1,102 @@
 <template>
-    <el-main>
-        <progress-track v-model="status"></progress-track>
+  <el-main>
+    <progress-track v-model="status"/>
 
-        <div align="center">
-            <h4 style="margin-top:5%;">Transfer Completed</h4>
-            <h5> Please upload your PO </h5>
-            <br>
+    <div align="center">
+      <h4 style="margin-top:5%;">Transfer Completed</h4>
+      <h5> Please upload your PO </h5>
+      <br>
+    </div>
+
+    <!-- upload card -->
+    <br>
+    <el-row :gutter="12" justify="center" align="center">
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Upload PO</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+
+          <!-- upload image -->
+          <el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-exceed="handleExceed" :on-preview="handlePreview"
+                     :on-remove="handleRemove"
+                     class="upload-demo"
+                     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>
+          </el-upload>
+
+          <br>
+
+          <div class="bottom clearfix" style="text-align:right;">
+            <el-button :loading="loading" type="primary" @click="uploadPo">Submit</el-button>
+          </div>
+          <!-- upload image end -->
+
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>China Bank Slip</span>
+            <!-- <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 href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <br>
+
+    <!-- order details -->
+    <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>
-
-        <!-- upload card -->
-        <br>
-        <el-row :gutter="12" justify="center" align="center">
-            <el-col :span="12">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>Upload PO</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-
-                    <!-- upload image -->
-                    <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove"
-                        :file-list="fileList" multiple>
-                        <i class="el-icon-upload"></i>
-                        <div class="el-upload__text">Drop file here or
-                            <em>click to upload</em>
-                        </div>
-                        <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
-                    </el-upload>
-
-                    <br>
-
-                    <div class="bottom clearfix" style="text-align:right;">
-                        <el-button @click="uploadPo" type="primary">Submit</el-button>
-                    </div>
-                    <!-- upload image end -->
-
-                </el-card>
-            </el-col>
-            <el-col :span="12">
-                <el-card class="box-card">
-                    <div slot="header" class="clearfix">
-                        <span>China Bank Slip</span>
-                        <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                    </div>
-                    <el-row type="flex" :gutter="12">
-                        <el-col :span="12">
-                            <a href="https://placeholder.com">
-                                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
-                            </a>
-                        </el-col>
-                    </el-row>
-                </el-card>
-            </el-col>
+        <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>
-        <br>
+      </el-card>
+    </el-row>
+    <br>
 
-        <!-- order details -->
-        <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>
-                <el-row :gutter="12">
-                    <el-col :span="12">
-                        <el-table :data="bookingConfirmTable" align="center" :show-header="false">
-                            <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" align="center" :show-header="false">
-                            <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 justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Bankin Slip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
         </el-row>
-        <br>
-
-        <el-row justify="center" align="center">
-            <el-card class="box-card">
-                <div slot="header" class="clearfix">
-                    <span>Order Bankin Slip</span>
-                    <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                </div>
-                <el-row :gutter="12">
-                    <el-col :span="22" style="text-align:center">
-                        <img src="http://via.placeholder.com/600x400" class="image">
-                    </el-col>
-                </el-row>
-            </el-card>
-        </el-row>
-    </el-main>
+      </el-card>
+    </el-row>
+  </el-main>
 </template>
 <style>
     .booking-details {
@@ -101,71 +104,100 @@
     }
 </style>
 <script>
-    import VueCountdown from '@dmaksimovic/vue-countdown'
-    import ProgressTrack from '~/components/ProgressTrack'
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
+import axios from 'axios'
 
-    export default {
-        components: {
-            'progress-track': ProgressTrack
-        },
-        data() {
-            return {
-                status: 5,
-                bookingConfirmTable: [{
-                    data1: 'Order Number :',
-                    data2: '001'
-                }, {
-                    data1: 'Date :',
-                    data2: '25/5/2018'
-                }, {
-                    data1: 'Customer Marking :',
-                    data2: 'CIEF/150ECE'
-                }, {
-                    data1: '',
-                    data2: ''
-                }, {
-                    data1: 'Payment Method :',
-                    data2: 'Cash/Bank Transfer'
-                }, {
-                    data1: '',
-                    data2: ''
-                }],
-                bookingConfirmTable2: [{
-                    data1: 'CNY/RMB :',
-                    data2: 'CNY 120,500.00'
-                }, {
-                    data1: '+ Service Charge :',
-                    data2: 'CNY 20.00'
-                }, {
-                    data1: '/ RATE :',
-                    data2: '1.63'
-                }, {
-                    data1: '',
-                    data2: 'MYR 73,848.04'
-                }, {
-                    data1: '+ GST 6% :',
-                    data2: 'MYR 4,430.88'
-                }, {
-                    data1: '',
-                    data2: 'MYR 78,278.92'
-                }, {
-                    data1: '',
-                    data2: ''
-                }]
-            }
-        },
-        methods: {
-            uploadPo(){
-                this.$message({
-                showClose: true,
-                message: 'Your PO has been uploaded. We are processing the Invoice.',
-                type: 'success',
-                duration: 5000,
-                });
-                this.$router.push({
-                name: 'home'
-                })
-            }
-        }
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      booking_id: this.$route.params.id,
+      status: 5,
+      loading: false,
+      bookingConfirmTable: [{
+        data1: 'Order Number :',
+        data2: '001'
+      }, {
+        data1: 'Date :',
+        data2: '25/5/2018'
+      }, {
+        data1: 'Customer Marking :',
+        data2: 'CIEF/150ECE'
+      }, {
+        data1: '',
+        data2: ''
+      }, {
+        data1: 'Payment Method :',
+        data2: 'Cash/Bank Transfer'
+      }, {
+        data1: '',
+        data2: ''
+      }],
+      bookingConfirmTable2: [{
+        data1: 'CNY/RMB :',
+        data2: 'CNY 120,500.00'
+      }, {
+        data1: '+ Service Charge :',
+        data2: 'CNY 20.00'
+      }, {
+        data1: '/ RATE :',
+        data2: '1.63'
+      }, {
+        data1: '',
+        data2: 'MYR 73,848.04'
+      }, {
+        data1: '+ GST 6% :',
+        data2: 'MYR 4,430.88'
+      }, {
+        data1: '',
+        data2: 'MYR 78,278.92'
+      }, {
+        data1: '',
+        data2: ''
+      }]
     }
-</script>
\ No newline at end of file
+  },
+  methods: {
+    uploadPo () {
+      this.loading = true
+      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.',
+            type: 'success',
+            duration: 5000
+          })
+          this.$router.push({
+            name: 'home'
+          })
+          this.loading = false
+        }).catch((error) => {
+          console.log(error)
+          loading.close()
+          this.$router.push({
+            name: 'notfound'
+          })
+          this.loading = false
+        })
+    },
+    handleRemove (file, fileList) {
+      console.log(file, fileList)
+    },
+    handlePreview (file) {
+      console.log(file)
+    },
+    handleExceed (files, fileList) {
+      this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`)
+    },
+    beforeRemove (file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`)
+    }
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index 9323e09a..fa1cb4df 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -1,6 +1,6 @@
 <template>
   <el-main>
-    <progress-track v-model="status"></progress-track>
+    <progress-track v-model="status"/>
 
     <div align="center">
       <h4 style="margin-top:5%;">Waiting For Payment</h4>
@@ -12,13 +12,13 @@
           <tr>
             <td class="el-table_2_column_9 is-right ">Amount : </td>
             <td class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
-              <b> {{ booking.amount }} </b>
+              <b> RMB {{ booking.amount }} </b>
             </td>
           </tr>
           <tr>
             <td width="200" class="el-table_2_column_9 is-right ">Bankin Amount : </td>
             <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
-              <b> {{ booking.bankin_amount }} </b>
+              <b> MYR {{ booking.bankin_amount }} </b>
             </td>
           </tr>
         </tbody>
@@ -26,24 +26,20 @@
     </el-row>
     <br>
 
-
     <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
 
-
     <div align="center">
 
-      <vue-countdown :time="booking.timeout">
+      <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>
       <!-- <button v-on:click="startTimer">Start timer</button> -->
     </div>
     <br>
 
-
-
     <!-- upload image -->
-    <el-upload v-bind:action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
-      list-type="picture-card" align="center">
+    <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">
@@ -56,15 +52,15 @@
         <el-form-item label="Amount (RM) :"> -->
     <div align="center">
       Bankin Amount (RM) :
-      <el-form :model="user_slip_form" :rules="rules" ref="user_slip_form">
+      <el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
         <div align="center">
           <el-form-item prop="transfer_amount">
             <el-input v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount" style="width: 20%"
             />
           </el-form-item>
           <el-form-item>
-              <div align="center">
-              <el-button type="primary" @click="submitUserSlip('user_slip_form')">Submit</el-button>
+            <div align="center">
+              <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>
@@ -78,8 +74,6 @@
     <!-- </el-form-item>
     </el-form> -->
 
-
-
   </el-main>
 </template>
 <style>
@@ -88,121 +82,144 @@
   }
 </style>
 <script>
-  import VueCountdown from '@xkeshi/vue-countdown'
-  import ProgressTrack from '~/components/ProgressTrack'
-  import axios from 'axios'
+import VueCountdown from '@xkeshi/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
+import axios from 'axios'
 
-  export default {
-    middleware: ['auth'],
-    name: 'MyComponent',
-    components: {
-      'vue-countdown': VueCountdown,
-      'progress-track': ProgressTrack
-    },
-    data() {
-      return {
-        status: 2,
-        start: false,
-        dialogImageUrl: '',
-        dialogVisible: false,
-        booking_id: this.$route.params.id,
-        user_slip_form:{
-          transfer_amount : ''
-        },
-        booking: {
-          amount: '',
-          bankin_amount: '',
-          timeout: 1
-        },
-        rules: {
-          transfer_amount: [{
-            required: true,
-            message: 'Please input amount',
-            trigger: 'change'
-          }, ],}
-      }
-    },
-    beforeCreate() {
-      const loading = this.$loading({
-        lock: true,
-        text: 'Please wait..',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
+export default {
+  middleware: ['auth'],
+  name: 'MyComponent',
+  components: {
+    'vue-countdown': VueCountdown,
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 2,
+      start: false,
+      loading: false,
+      dialogImageUrl: '',
+      dialogVisible: false,
+      booking_id: this.$route.params.id,
+      user_slip_form: {
+        transfer_amount: ''
+      },
+      booking: {
+        amount: '',
+        bankin_amount: '',
+        timeout: 1
+      },
+      rules: {
+        transfer_amount: [{
+          required: true,
+          message: 'Please input amount',
+          trigger: 'change'
+        } ]}
+    }
+  },
+  beforeCreate () {
+    const loading = this.$loading({
+      lock: true,
+      text: 'Please wait..',
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
+    })
 
-      axios
-        .get('/api/booking/' + this.$route.params.id)
-        .then((response) => {
-          console.log(response)
-          this.booking.amount = response.data.amount
-          this.booking.bankin_amount = response.data.bia
-          this.booking.timeout = response.data.timeout * 1000
-          this.start = true;
-          loading.close()
-        }).catch((error) => {
-          console.log(error)
-          loading.close()
+    axios
+      .get('/api/booking/' + this.$route.params.id)
+      .then((response) => {
+        console.log(response)
+        this.booking.amount = response.data.amount
+        this.booking.bankin_amount = response.data.bia
+        this.booking.timeout = response.data.timeout * 1000
+        this.start = true
+        loading.close()
+
+        if (this.booking.timeout < 0) {
+          this.$message({
+            showClose: true,
+            message: 'Booking timeout, please make another booking.',
+            type: 'error',
+            duration: 30000
+          })
           this.$router.push({
-            name: 'notfound'
+            name: 'home'
+          })
+        }
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+  },
+  methods: {
+    handleCoutdownend () {
+      this.$message({
+        showClose: true,
+        message: 'Booking timeout, please make another booking.',
+        type: 'error',
+        duration: 30000
+      })
+      this.$router.push({
+        name: 'home'
+      })
+    },
+    handleRemove (file, fileList) {
+      console.log(file, fileList)
+    },
+    handlePictureCardPreview (file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
+    },
+    submitUserSlip (formName) {
+      this.loading = true
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          let newConfirmation = {
+            amount: this.booking.amount,
+            term: this.term
+          }
+        } else {
+          this.loading = false
+        }
+      })
+      let newUserSlip = {
+        transfer_amount: this.user_slip_form.transfer_amount
+      }
+      axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount', newUserSlip)
+        .then((response) => {
+          this.$message({
+            showClose: true,
+            message: 'Your bankinslip has been submitted, please wait admin to approve.',
+            type: 'success',
+            duration: 5000
+          })
+
+          console.log(response)
+          this.$router.push({
+            name: 'home'
           })
         })
-     
+        .catch((error) => {
+          this.loading = false
+          this.$message({
+            showClose: true,
+            message: 'Please upload your bankin slip first.',
+            type: 'warning',
+            duration: 10000
+          })
+          console.log(error)
+        })
     },
-    methods: {
-      handleRemove(file, fileList) {
-        console.log(file, fileList)
-      },
-      handlePictureCardPreview(file) {
-        this.dialogImageUrl = file.url
-        this.dialogVisible = true
-      },
-      submitUserSlip(formName) {
-         this.$refs[formName].validate((valid) => {
-          if (valid) {
-            let newConfirmation = {
-              amount: this.booking.amount,
-              term: this.term
-            }
-          }
-          else{
-            return
-          }
-          });
-         let newUserSlip = {
-          transfer_amount : this.user_slip_form.transfer_amount
-        }
-        axios.patch('/api/booking/'+ this.booking_id +'/bankslip-amount', newUserSlip)
-          .then((response) => {
-            this.$message({
-              showClose: true,
-              message: 'Your bankinslip has been submitted, please wait admin to approve.',
-              type: 'success',
-              duration: 5000,
-            });
-            console.log(response)
-             this.$router.push({
-              name: 'home'
-            })
-
-          })
-          .catch((error) => {
-            this.$message({
-              showClose: true,
-              message: 'Please upload your bankin slip first.',
-              type: 'warning',
-              duration: 10000,
-            });
-            console.log(error)
-            return
-          })
-      },
-      handleTimeExpire() {
-        alert('Booking expired')
-      },
-      startTimer() {
-        this.start = true
-      },
-
+    handleTimeExpire () {
+      alert('Booking expired')
+    },
+    startTimer () {
+      this.start = true
     }
+
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 7144f47c..26528fe4 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -140,8 +140,8 @@
     <!-- Rate-Display-end -->
 
     <!-- Form_popup -->
-    <el-dialog :visible.sync="dialogFormVisible" title="Booking" :fullscreen="true" center>
-      <el-form :model="bookingForm" :rules="rules" ref="bookingForm">
+    <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="account_name">
             <el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Account" style="width: 80%" required="true" />
@@ -159,7 +159,7 @@
           <el-form-item>
             <el-button @click="dialogFormVisible = false">Cancel</el-button>
 
-            <el-button type="primary" :loading="loading" @click="getCalculationValue('bookingForm')">Book Now</el-button>
+            <el-button :loading="loading" type="primary" @click="getCalculationValue('bookingForm')">Book Now</el-button>
           </el-form-item>
         </div>
       </el-form>
@@ -167,7 +167,7 @@
     <!-- Form_popup-end -->
 
     <!-- Booking_confirmation_popup -->
-    <el-dialog :visible.sync="dialogFormVisible1" title="Booking Confirmation" :fullscreen="true" center>
+    <el-dialog :visible.sync="dialogFormVisible1" :fullscreen="true" title="Booking Confirmation" center>
 
       <!-- Table_booking_confirmation -->
       <!-- <el-table :data="bookingConfirmTable" align="center">
@@ -203,12 +203,12 @@
             <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.rate }}</td>
           </tr>
           <tr>
-            <td width="200" class="el-table_2_column_9 is-right "> </td>
+            <td width="200" class="el-table_2_column_9 is-right "/>
             <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RM {{ bookingConfirmTable.bankin_amount }}</td>
           </tr>
           <tr>
-            <td width="200" class="el-table_2_column_9 is-right "> </td>
-            <td width="200" class="el-table_2_column_9 is-left "></td>
+            <td width="200" class="el-table_2_column_9 is-right "/>
+            <td width="200" class="el-table_2_column_9 is-left "/>
           </tr>
 
           <tr>
@@ -226,7 +226,7 @@
 
       <span slot="footer" class="dialog-footer">
         <!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
-        <el-button type="primary" :loading="loading" @click="createBooking">Confirm</el-button>
+        <el-button :loading="loading" type="primary" @click="createBooking">Confirm</el-button>
       </span>
     </el-dialog>
     <!-- Booking_confirmation_popup -->
@@ -239,17 +239,16 @@
     <el-row :gutter="20">
       <div>
         <el-table :data="bookingTable">
-          <el-table-column label="No." width="106">
+          <el-table-column label="No." width="100">
             <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
-            <el-button type="text" slot-scope="scope" @click="(event) => { BookingStatus(event, scope.row.booking_no) }"> {{scope.row.booking_no}}</el-button>
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> {{ scope.row.id }}</el-button>
           </el-table-column>
-          <el-table-column label="Date" prop="date" width="120" sortable/>
-          <!-- <el-table-column  label="Term" :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler">
-        </el-table-column> -->
+          <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
+          <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
           <el-table-column label="Rate" width="74" prop="rate" />
           <el-table-column label="Amount" prop="amount" justify="center" width="110" />
           <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount"
-            prop="transfer_amount" width="150" />
+                           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> -->
@@ -259,19 +258,20 @@
               <el-popover trigger="click" placement="top">
                 <p>{{ scope.row.status_desc }}</p>
                 <div slot="reference" class="name-wrapper">
-                  <el-tag size="medium">{{ scope.row.status }}</el-tag>
+                  <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
                 </div>
               </el-popover>
             </template>
           </el-table-column>
           <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
-          <el-table-column prop="timeout" label="Bankin Timeout" />
+          <!-- <el-table-column 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">
-            <template slot-scope="scope">
-              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
+                           label="" width="180" filter-placement="bottom-end">
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> View Status </el-button>
+            <!-- <template slot-scope="scope">
+              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
               <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
-            </template>
+            </template> -->
           </el-table-column>
         </el-table>
       </div>
@@ -286,290 +286,244 @@
   }
 </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: ''
-        }),
-        loading: false,
-        status: '',
-        booking: {
-          amount: '',
-          rate: ''
-        },
-        bookingForm: {
-          //amount: '',
-          account_name: '',
-          bank_name: '',
-          bank_branch: '',
-          account_num: ''
-        },
-        rules: {
-          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'
-          }]
-        },
+  data () {
+    return {
+      confirmForm: new Form({
         term: '',
-        options1: [{
-          value: 'RMB',
-          label: 'RMB'
+        amount: ''
+      }),
+      loading: false,
+      status: '',
+      booking: {
+        amount: '',
+        rate: ''
+      },
+      bookingForm: {
+        // amount: '',
+        account_name: '',
+        bank_name: '',
+        bank_branch: '',
+        account_num: ''
+      },
+      rules: {
+        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'
+        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: [{
-            date: '12/1/2018',
-            booking_no: '001',
-            rate: '1.23',
-            amount: 'RM 1000',
-            transfer_amount: 'RMB 10000',
-            status: '(1/6)',
-            status_desc: 'Waiting for payment',
-            timeout: '56:00:00'
-          },
-          {
-            date: '12/1/2018',
-            booking_no: '002',
-            rate: '1.23',
-            amount: 'RM 1000',
-            transfer_amount: 'RMB 10000',
-            status: '(2/6)',
-            status_desc: 'Waiting verification',
-            timeout: '56:00:00'
-          },
-          {
-            date: '12/1/2018',
-            booking_no: '003',
-            rate: '1.23',
-            amount: 'RM 1000',
-            transfer_amount: 'RMB 10000',
-            status: '(3/6)',
-            status_desc: 'Processing transfer',
-            timeout: '56:00:00'
-          },
-          {
-            date: '12/1/2018',
-            booking_no: '004',
-            rate: '1.23',
-            amount: 'RM 1000',
-            transfer_amount: 'RMB 10000',
-            status: '(4/6)',
-            status_desc: 'Transfer Complete, please upload your PO',
-            timeout: '56:00:00'
-          },
-          {
-            date: '12/1/2018',
-            booking_no: '005',
-            rate: '1.23',
-            amount: 'RM 1000',
-            transfer_amount: 'RMB 10000',
-            status: '(5/6)',
-            status_desc: 'Processing invoice',
-            timeout: '56:00:00'
-          },
-          {
-            date: '12/1/2018',
-            booking_no: '006',
-            rate: '1.23',
-            amount: 'RM 1000',
-            transfer_amount: 'RMB 10000',
-            status: '(6/6)',
-            status_desc: 'Order Completed',
-            timeout: '56:00:00'
-          }
-        ],
-        bookingConfirmTable: {
-          date: 'undefined',
-          marking: 'undefined',
-          payment_method: 'undefined',
-          amount: 'undefined',
-          service_charge: 'undefined',
-          rate: 'undefined',
-          bankin_amount: 'undefined',
-          china_beneficiary: 'undefined',
-        }
-      }
-    },
-    methods: {
-      // 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
-      },
-      BookingList() {
-        axios.get('api/booking')
-          .then((response) => {
-            console.log(response)
-            this.list = response.data
-          })
-      },
-      // 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.loading = false
-                console.log(error)
-              })
-          } else {
-            return;
-          }
-        });
-
-      },
-      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 }
-            })
-
-            // pass variable to another router 
-
-          })
-          .catch((error) => {
-            console.log(error)
-            return
-          })
-      },
-      BookingStatus(index, row) {
-
-        // TODO : Get booking status from server 
-        this.status = 2
-
-        switch (this.status) {
-          case 1:
-            this.$router.push({
-              name: 'booking.user.upload',
-              params: {id: "12" }
-            })
-
-          case 2:
-            this.$router.push({
-              name: 'booking.user.upload',
-              params: {id: "12" }
-            })
-            break;
-          case 3:
-            this.$router.push({
-              name: 'booking.confirmation',
-              params: {id: "1" }
-            })
-            break;
-          case 4:
-            this.$router.push({
-              name: 'booking.transfer',
-              params: {id: "1" }
-            })
-            break;
-
-          case 5:
-            this.$router.push({
-              name: 'booking.user.uploadpo',
-              params: {id: "1" }
-            })
-            break;
-
-          case 6:
-            this.$router.push({
-              name: 'booking.complete',
-              params: {id: "1" }
-            })
-            break;
-          default:
-            break
-        }
+        label: 'RMB'
+      }],
+      options2: [{
+        value2: 'MYR',
+        label2: 'MYR'
+      }],
+      value: 'RMB',
+      dialogFormVisible: false,
+      dialogFormVisible1: false,
+      formLabelWidth: '0px',
+      bookingTable: [
+      ],
+      bookingConfirmTable: {
+        date: 'undefined',
+        marking: 'undefined',
+        payment_method: 'undefined',
+        amount: 'undefined',
+        service_charge: 'undefined',
+        rate: 'undefined',
+        bankin_amount: 'undefined',
+        china_beneficiary: 'undefined',
+        status: 2
       }
     }
+  },
+  mounted () {
+    axios
+      .get('/api/booking/')
+      .then((response) => {
+        console.log(response)
+        this.bookingTable = response.data
 
+        // loading.close()
+      }).catch((error) => {
+        // console.log(error)
+        // loading.close()
+        // this.$router.push({
+        //   name: 'notfound'
+        // })
+      })
+  },
+  methods: {
+    // 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
+    },
+    BookingList () {
+      axios.get('api/booking')
+        .then((response) => {
+          console.log(response)
+          this.list = response.data
+        })
+    },
+    // 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.loading = false
+              console.log(error)
+            })
+        } else {
+
+        }
+      })
+    },
+    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 }
+          })
+
+          // pass variable to another router
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    BookingStatus (status, booking_id) {
+      console.log(status)
+      // TODO : Get booking status from server
+      this.status = status
+
+      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 6:
+          this.$router.push({
+            name: 'booking.user.complete',
+            params: {id: booking_id }
+          })
+          break
+        default:
+          break
+      }
+    }
   }
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/resources/assets/js/pages/settings/admin-bank-setting.vue b/resources/assets/js/pages/settings/admin-bank-setting.vue
new file mode 100644
index 00000000..7e1468d6
--- /dev/null
+++ b/resources/assets/js/pages/settings/admin-bank-setting.vue
@@ -0,0 +1,32 @@
+<template>
+<div>
+    <span align="center"><h4>Bank Setting</h4></span><br>
+    <el-form :inline="true">
+        <el-form-item>
+        Active CIEF bank account for today : 
+            X1 : <el-select size="mini">
+                    <el-option>Maybank</el-option>
+                    <el-option>Affinbank</el-option>
+                    <el-option>Bank Islam</el-option>
+                </el-select>
+            X2 : <el-select size="mini">
+                <el-option>Maybank</el-option>
+                <el-option>Affinbank</el-option>
+                <el-option>Bank Islam</el-option>
+            </el-select>
+            <el-button type="primary" size="mini">Update</el-button>
+        </el-form-item>
+    </el-form>
+    <el-form :inline="true">
+        <el-form-item>
+        Active CIEF China Beneficiary Account for Today : 
+            <el-select size="mini">
+                    <el-option>Bank of China</el-option>
+                    <el-option>China Bank</el-option>
+                    <el-option>Bank</el-option>
+            </el-select>
+            <el-button type="primary" size="mini">Update</el-button>
+        </el-form-item>
+    </el-form>
+</div>
+</template>
\ No newline at end of file
diff --git a/resources/assets/js/pages/settings/admin-china-bank.vue b/resources/assets/js/pages/settings/admin-china-bank.vue
new file mode 100644
index 00000000..ae2a02d1
--- /dev/null
+++ b/resources/assets/js/pages/settings/admin-china-bank.vue
@@ -0,0 +1,114 @@
+<template>
+<div>
+  <span align="center"><h4>CIEF China Bank Details</h4></span><br>
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column prop="comp_name" label="Company Name" width="90px"></el-table-column>
+      <el-table-column prop="bank_name" label="Bank Name"></el-table-column>
+      <el-table-column prop="bank_acc_no" label="Bank Account No" width="115px"></el-table-column>
+      <el-table-column prop="bank_address" label="Bank Address" width="111px"></el-table-column>
+      <el-table-column prop="swift_code" label="SWIFT Code"></el-table-column>
+      <el-table-column prop="cnap" label="CNAP" width="80px"></el-table-column>
+      <el-table-column prop="bank_branch" label="Bank Branch"></el-table-column>
+      <el-table-column label="Action">
+          <template slot-scope="scope">
+              <el-button type="text" size="small" @click="EditDatadialogVisible = true">Edit</el-button>
+              <el-button type="text" size="small" @click="DeleteAdddialogVisible = true">Delete</el-button>
+          </template>
+      </el-table-column>
+    </el-table><br>
+    <div align="right">
+      <el-button type="primary" icon="el-icon-plus" @click="AddDatadialogVisible = true">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 :label-position="right" label-width="150px">
+            <el-form-item label="Company Name"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Name"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Account No"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Address"><el-input></el-input></el-form-item>
+            <el-form-item label="SWIFT Code"><el-input></el-input></el-form-item>
+            <el-form-item label="CNAP"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Branch"><el-input></el-input></el-form-item>
+          </el-form>
+        <div align="center">
+            <el-button @click="AddDatadialogVisible = false">Cancel</el-button>
+            <el-button type="primary" @click="AddDatadialogVisible = false; DoneAddDatadialogVisible = true">OK</el-button>
+        </div>
+        <span slot="footer" class="dialog-footer">
+            * Please key in the data in Chinese
+        </span>
+      </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 :label-position="right" label-width="150px">
+            <el-form-item label="Company Name"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Name"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Account No"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Address"><el-input></el-input></el-form-item>
+            <el-form-item label="SWIFT Code"><el-input></el-input></el-form-item>
+            <el-form-item label="CNAP"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Branch"><el-input></el-input></el-form-item>
+          </el-form>
+        <div align="center">
+            <el-button @click="EditDatadialogVisible = false">Cancel</el-button>
+            <el-button type="primary" @click="EditDatadialogVisible = false; DoneUpdateDatadialogVisible = true">Submit</el-button>
+        </div>
+        <span slot="footer" class="dialog-footer">
+            * Please key in the data in Chinese
+        </span>
+      </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>
+  export default {
+    data() {
+      return {
+        tableData: [{
+            comp_name: 'CIEF Worldwide',
+            bank_name: 'Myabank',
+            bank_acc_no: '6725137521',
+            bank_address: 'Cyberjaya',
+            swift_code: '2376abc',
+            cnap: 'ghi123',
+            bank_branch: 'Klang'
+        }, {
+            comp_name: 'DPulze',
+            bank_name: 'AFFbank',
+            bank_acc_no: '246891247',
+            bank_address: 'Putrajaya',
+            swift_code: 'qwe4567',
+            cnap: '7890po',
+            bank_branch: 'Jawa'
+        }],
+        EditDatadialogVisible: false,
+        DeleteAdddialogVisible: false,
+        AddDatadialogVisible: false,
+        DoneAddDatadialogVisible: false,
+        DoneUpdateDatadialogVisible: false
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/settings/admin-credit-setting.vue b/resources/assets/js/pages/settings/admin-credit-setting.vue
new file mode 100644
index 00000000..61ce1b53
--- /dev/null
+++ b/resources/assets/js/pages/settings/admin-credit-setting.vue
@@ -0,0 +1,46 @@
+<template>
+<div>
+    <span align="center"><h4>Limitation</h4></span><br>
+    <el-form :inline="true" align="center">
+        <el-form-item>
+        Time Limit for Customer to Upload Bank Slip : 
+            <el-input size="mini" style=width:7% ></el-input>Hours
+            <el-input size="mini" style=width:7% ></el-input>Minutes
+            <el-input size="mini" style=width:7% ></el-input>Seconds
+            <el-button type="primary" size="mini"  @click="dialogVisible = true">Update Time Limit</el-button>
+        </el-form-item>
+    </el-form>
+    <el-dialog title="Time Limit" align="center" :visible.sync="dialogVisible" width="30%">
+        <span>Time limit for customer bank slip submission is updated</span>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">Cancel</el-button>
+            <el-button type="primary" @click="dialogVisible = false">OK</el-button>
+        </span>
+    </el-dialog>
+    <el-form>
+        <el-form-item align="center">
+            Credit Limit for RMB : 
+            <el-input placeholder="Amount" size="mini" style=width:10%></el-input>
+            <el-button type="primary" size="mini" @click="dialogVisible1 = true">Update Credit Limit</el-button>
+        </el-form-item>
+    </el-form>
+    <el-dialog title="Credit Limit" align="center" :visible.sync="dialogVisible1" width="30%">
+        <span>Credit limit for Customer Booking is updated</span>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible1 = false">Cancel</el-button>
+            <el-button type="primary" @click="dialogVisible1 = false">OK</el-button>
+        </span>
+    </el-dialog>
+</div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        dialogVisible: false,
+        dialogVisible1: false
+      };
+    },
+  };
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/settings/admin-supplier.vue b/resources/assets/js/pages/settings/admin-supplier.vue
new file mode 100644
index 00000000..dd13fe5f
--- /dev/null
+++ b/resources/assets/js/pages/settings/admin-supplier.vue
@@ -0,0 +1,98 @@
+<template>
+<div>
+  <span align="center"><h4>Suppplier Details</h4></span><br>
+    <el-table :data="tableData" border style="width: 100%">
+      <el-table-column prop="comp_name" label="Company Name"></el-table-column>
+      <el-table-column prop="reg_no" label="Registration No"></el-table-column>
+      <el-table-column prop="gst_no" label="GST No"></el-table-column>
+      <el-table-column prop="bank_name" label="Bank Name"></el-table-column>
+      <el-table-column prop="account_no" label="Account No"></el-table-column>
+      <el-table-column label="Action">
+          <template slot-scope="scope">
+              <el-button type="text" size="small" @click="EditSupplierdialogVisible = true">Edit</el-button>
+              <el-button type="text" size="small" @click="DeleteSupplierdialogVisible = true">Delete</el-button>
+          </template>
+      </el-table-column>
+    </el-table><br>
+    <div align="right">
+      <el-button type="primary" icon="el-icon-plus" @click="AddNewSupplierdialogVisible = true">Add New Supplier</el-button>
+    </div>
+    <!-- popup add new supplier -->
+      <el-dialog title="Add New Supplier" align="center" :visible.sync="AddNewSupplierdialogVisible" width="40%">
+          <el-form :label-position="right" label-width="150px">
+            <el-form-item label="Company Name"><el-input></el-input></el-form-item>
+            <el-form-item label="Registration No"><el-input></el-input></el-form-item>
+            <el-form-item label="GST No"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Name"><el-input></el-input></el-form-item>
+            <el-form-item label="Account No"><el-input></el-input></el-form-item>
+          </el-form>
+        <div align="center">
+            <el-button @click="AddNewSupplierdialogVisible = false">Cancel</el-button>
+            <el-button type="primary" @click="AddNewSupplierdialogVisible = false; DoneAddSupplierdialogVisible = true">OK</el-button>
+        </div>
+      </el-dialog>
+      <el-dialog align="center" :visible.sync="DoneAddSupplierdialogVisible" width="30%">
+        <span>Supplier Added Successfully</span><br><br>
+        <div align="center">
+            <el-button type="primary" @click="DoneAddSupplierdialogVisible = false">OK</el-button>
+        </div>
+      </el-dialog>
+    <!-- popup add new supplier end -->
+    <!-- popup edit supplier -->
+      <el-dialog title="Edit Supplier" align="center" :visible.sync="EditSupplierdialogVisible" width="40%">
+          <el-form :label-position="right" label-width="150px">
+            <el-form-item label="Company Name"><el-input></el-input></el-form-item>
+            <el-form-item label="Registration No"><el-input></el-input></el-form-item>
+            <el-form-item label="GST No"><el-input></el-input></el-form-item>
+            <el-form-item label="Bank Name"><el-input></el-input></el-form-item>
+            <el-form-item label="Account No"><el-input></el-input></el-form-item>
+          </el-form>
+        <div align="center">
+            <el-button @click="EditSupplierdialogVisible = false">Cancel</el-button>
+            <el-button type="primary" @click="EditSupplierdialogVisible = false; DoneUpdateSupplierdialogVisible = true">OK</el-button>
+        </div>
+      </el-dialog>
+      <el-dialog align="center" :visible.sync="DoneUpdateSupplierdialogVisible" width="30%">
+        <span>Supplier's Details Updated Successfully</span><br><br>
+        <div align="center">
+            <el-button type="primary" @click="DoneUpdateSupplierdialogVisible = false">OK</el-button>
+        </div>
+      </el-dialog>
+    <!-- popup edit supplier end -->
+    <!-- popup delete supplier -->
+      <el-dialog align="center" :visible.sync="DeleteSupplierdialogVisible" width="30%">
+        <span>Supplier's Details Deleted</span><br><br>
+        <div align="center">
+            <el-button type="primary" @click="DeleteSupplierdialogVisible = false">OK</el-button>
+        </div>
+      </el-dialog>
+    <!-- popup delete supplier end -->
+</div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [{
+          comp_name: 'CIEF',
+          reg_no: '2134241',
+          gst_no: '214',
+          bank_name: 'myabank', 
+          account_no: '1242521', 
+        }, {
+          comp_name: 'iPhone',
+          reg_no: '123214',
+          gst_no: '3532',
+          bank_name: 'adyabank', 
+          account_no: '21421421', 
+        }],
+        AddNewSupplierdialogVisible: false,
+        EditSupplierdialogVisible: false,
+        DoneAddSupplierdialogVisible: false,
+        DoneUpdateSupplierdialogVisible: false,
+        DeleteSupplierdialogVisible: false
+      }
+    }
+  }
+</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 12d57607..dcdac990 100644
--- a/resources/assets/js/pages/settings/index.vue
+++ b/resources/assets/js/pages/settings/index.vue
@@ -37,7 +37,27 @@ export default {
           icon: 'lock',
           name: this.$t('password'),
           route: 'settings.password'
-        }
+        },
+        {
+          icon: 'user',
+          name: this.$t('Supplier'),
+          route: 'settings.admin-supplier'
+        },
+        {
+          icon: 'cog',
+          name: this.$t('Credit Setting'),
+          route: 'settings.admin-credit-setting'
+        },
+        {
+          icon: 'flag',
+          name: this.$t('CIEF China Bank'),
+          route: 'settings.admin-china-bank'
+        },
+        {
+          icon: 'building',
+          name: this.$t('Bank Setting'),
+          route: 'settings.admin-bank-setting'
+        },
       ]
     }
   }
diff --git a/resources/assets/js/plugins/fontawesome.js b/resources/assets/js/plugins/fontawesome.js
index 45b4e322..8fe42e82 100644
--- a/resources/assets/js/plugins/fontawesome.js
+++ b/resources/assets/js/plugins/fontawesome.js
@@ -5,7 +5,7 @@ import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
 // import { } from '@fortawesome/fontawesome-free-regular/shakable.es'
 
 import {
-  faUser, faLock, faSignOutAlt, faCog
+  faUser, faLock, faSignOutAlt, faCog, faFlag, faBuilding
 } from '@fortawesome/fontawesome-free-solid/shakable.es'
 
 import {
@@ -13,7 +13,7 @@ import {
 } from '@fortawesome/fontawesome-free-brands/shakable.es'
 
 fontawesome.library.add(
-  faUser, faLock, faSignOutAlt, faCog, faGithub
+  faUser, faLock, faSignOutAlt, faCog, faFlag, faBuilding, faGithub
 )
 
 Vue.component('fa', FontAwesomeIcon)
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index e9fd43c9..116f0d7f 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -9,7 +9,13 @@ const Home = () => import('~/pages/home').then(m => m.default || m)
 const Settings = () => import('~/pages/settings/index').then(m => m.default || m)
 const SettingsProfile = () => import('~/pages/settings/profile').then(m => m.default || m)
 const SettingsPassword = () => import('~/pages/settings/password').then(m => m.default || m)
+const SettingsAdminSupplier = () => import('~/pages/settings/admin-supplier').then(m => m.default || m)
+const SettingsAdminCreditSetting = () => import('~/pages/settings/admin-credit-setting').then(m => m.default || m)
+const SettingsAdminChinaBank = () => import('~/pages/settings/admin-china-bank').then(m => m.default || m)
+const SettingsAdminBankSetting = () => import('~/pages/settings/admin-bank-setting').then(m => m.default || m)
 
+// const Admin = () => import('~/pages/admin/adminhome').then(m => m.default || m)
+const Admin = () => import('~/pages/admin/index').then(m => m.default || m)
 // Booking
 const Upload = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
 const Confirmation = () => import('~/pages/booking/confirmation').then(m => m.default || m)
@@ -18,6 +24,13 @@ const UploadPo = () => import('~/pages/booking/uploadPo').then(m => m.default ||
 const PoComplete = () => import('~/pages/booking/poComplete').then(m => m.default || m)
 const Completed = () => import('~/pages/booking/completed').then(m => m.default || m)
 
+// Admin booking
+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)
+const UploadCNSlip = () => import('~/pages/admin/booking/uploadChinaBankslip').then(m => m.default || m)
+const UploadInvoice = () => import('~/pages/admin/booking/uploadInvoice').then(m => m.default || m)
+// const Completed = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
 
 const AdminHome = () => import('~/pages/admin/home').then(m => m.default || m)
 
@@ -34,18 +47,36 @@ export default [
     children: [
       { path: '', redirect: { name: 'settings.profile' } },
       { path: 'profile', name: 'settings.profile', component: SettingsProfile },
-      { path: 'password', name: 'settings.password', component: SettingsPassword }
+      { path: 'password', name: 'settings.password', component: SettingsPassword },
+      { path: 'admin-supplier', name: 'settings.admin-supplier', component: SettingsAdminSupplier },
+      { path: 'admin-credit-setting', name: 'settings.admin-credit-setting', component: SettingsAdminCreditSetting },
+      { path: 'admin-china-bank', name: 'settings.admin-china-bank', component: SettingsAdminChinaBank },
+      { path: 'admin-bank-setting', name: 'settings.admin-bank-setting', component: SettingsAdminBankSetting }
     ] },
-  
+
   // Booking
   { path: '/booking/:id/upload-user-bankslip', name: 'booking.user.upload', component: Upload },
-  { path: '/booking/:id/confirmation', name: 'booking.confirmation', component: Confirmation },
-  { path: '/booking/:id/transfer', name: 'booking.transfer', component: Transfer },
+  { path: '/booking/:id/confirmation', name: 'booking.user.confirmation', component: Confirmation },
+  { path: '/booking/:id/transfer', name: 'booking.user.transfer', component: Transfer },
   { path: '/booking/:id/upload-po', name: 'booking.user.uploadpo', component: UploadPo },
   { path: '/booking/:id/po-complete', name: 'booking.user.pocomplete', component: PoComplete },
   { path: '/booking/:id/complete', name: 'booking.complete', component: Completed },
 
+  { path: '/admin',
+    component: Admin,
+    children: [
+      { path: '', redirect: { name: 'admin.index' } },
+      { path: 'index', name: 'admin.index', component: Admin },
+      { path: 'home', name: 'admin.home', component: AdminHome }
+    ] },
+  // Admin booking
+  { 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 },
+  { path: '/booking/:id/upload-cn-bankslip', name: 'booking.admin.cnslip', component: UploadCNSlip },
+  { path: '/booking/:id/upload-invoice', name: 'booking.admin.invoice', component: UploadInvoice },
+  // { path: '/booking/:id/complete', name: 'booking.complete', component: Completed },
 
   { path: '/admin', name: 'admin.home', component: AdminHome },
-  { path: '*', name:'notfound', component: NotFound }
+  { path: '*', name: 'notfound', component: NotFound }
 ]
diff --git a/resources/assets/js/store/modules/auth.js b/resources/assets/js/store/modules/auth.js
index 742199b0..c2ad7252 100644
--- a/resources/assets/js/store/modules/auth.js
+++ b/resources/assets/js/store/modules/auth.js
@@ -5,13 +5,15 @@ import * as types from '../mutation-types'
 // state
 export const state = {
   user: null,
-  token: Cookies.get('token')
+  token: Cookies.get('token'),
+  role: null
 }
 
 // getters
 export const getters = {
   user: state => state.user,
   token: state => state.token,
+  role: state => state.role,
   check: state => state.user !== null
 }
 
@@ -23,7 +25,9 @@ export const mutations = {
   },
 
   [types.FETCH_USER_SUCCESS] (state, { user }) {
+    console.log(user)
     state.user = user
+    state.role = user.role
   },
 
   [types.FETCH_USER_FAILURE] (state) {
@@ -33,6 +37,7 @@ export const mutations = {
 
   [types.LOGOUT] (state) {
     state.user = null
+    state.role = null
     state.token = null
 
     Cookies.remove('token')
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
new file mode 100644
index 00000000..e69de29b
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
new file mode 100644
index 00000000..4d469007
--- /dev/null
+++ b/resources/views/auth/passwords/email.blade.php
@@ -0,0 +1,47 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <div class="card-header">{{ __('Reset Password') }}</div>
+
+                <div class="card-body">
+                    @if (session('status'))
+                        <div class="alert alert-success">
+                            {{ session('status') }}
+                        </div>
+                    @endif
+
+                    <form method="POST" action="{{ route('password.email') }}">
+                        @csrf
+
+                        <div class="form-group row">
+                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required>
+
+                                @if ($errors->has('email'))
+                                    <span class="invalid-feedback">
+                                        <strong>{{ $errors->first('email') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                        </div>
+
+                        <div class="form-group row mb-0">
+                            <div class="col-md-6 offset-md-4">
+                                <button type="submit" class="btn btn-primary">
+                                    {{ __('Send Password Reset Link') }}
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php
new file mode 100644
index 00000000..52ef4266
--- /dev/null
+++ b/resources/views/auth/passwords/reset.blade.php
@@ -0,0 +1,65 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <div class="card-header">{{ __('Reset Password') }}</div>
+
+                <div class="card-body">
+                    <form method="POST" action="{{ route('password.request') }}">
+                        @csrf
+
+                        <input type="hidden" name="token" value="{{ $token }}">
+
+                        <div class="form-group row">
+                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ $email ?? old('email') }}" required autofocus>
+
+                                @if ($errors->has('email'))
+                                    <span class="invalid-feedback">
+                                        <strong>{{ $errors->first('email') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                        </div>
+
+                        <div class="form-group row">
+                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>
+
+                                @if ($errors->has('password'))
+                                    <span class="invalid-feedback">
+                                        <strong>{{ $errors->first('password') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                        </div>
+
+                        <div class="form-group row">
+                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
+                            </div>
+                        </div>
+
+                        <div class="form-group row mb-0">
+                            <div class="col-md-6 offset-md-4">
+                                <button type="submit" class="btn btn-primary">
+                                    {{ __('Reset Password') }}
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
new file mode 100644
index 00000000..60bdf664
--- /dev/null
+++ b/resources/views/auth/register.blade.php
@@ -0,0 +1,77 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <div class="card-header">{{ __('Register') }}</div>
+
+                <div class="card-body">
+                    <form method="POST" action="{{ route('register') }}">
+                        @csrf
+
+                        <div class="form-group row">
+                            <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="name" type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="name" value="{{ old('name') }}" required autofocus>
+
+                                @if ($errors->has('name'))
+                                    <span class="invalid-feedback">
+                                        <strong>{{ $errors->first('name') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                        </div>
+
+                        <div class="form-group row">
+                            <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required>
+
+                                @if ($errors->has('email'))
+                                    <span class="invalid-feedback">
+                                        <strong>{{ $errors->first('email') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                        </div>
+
+                        <div class="form-group row">
+                            <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>
+
+                                @if ($errors->has('password'))
+                                    <span class="invalid-feedback">
+                                        <strong>{{ $errors->first('password') }}</strong>
+                                    </span>
+                                @endif
+                            </div>
+                        </div>
+
+                        <div class="form-group row">
+                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
+
+                            <div class="col-md-6">
+                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
+                            </div>
+                        </div>
+
+                        <div class="form-group row mb-0">
+                            <div class="col-md-6 offset-md-4">
+                                <button type="submit" class="btn btn-primary">
+                                    {{ __('Register') }}
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
new file mode 100644
index 00000000..223d77ec
--- /dev/null
+++ b/resources/views/home.blade.php
@@ -0,0 +1,23 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <div class="card-header">Dashboard</div>
+
+                <div class="card-body">
+                    @if (session('status'))
+                        <div class="alert alert-success">
+                            {{ session('status') }}
+                        </div>
+                    @endif
+
+                    You are logged in!
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
new file mode 100644
index 00000000..efe06e45
--- /dev/null
+++ b/resources/views/layouts/app.blade.php
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="{{ app()->getLocale() }}">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- CSRF Token -->
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+
+    <title>{{ config('app.name', 'Laravel') }}</title>
+
+    <!-- Scripts -->
+    <script src="{{ asset('js/app.js') }}" defer></script>
+
+    <!-- Fonts -->
+    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
+
+    <!-- Styles -->
+    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+</head>
+<body>
+    <div id="app">
+        <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
+            <div class="container">
+                <a class="navbar-brand" href="{{ url('/') }}">
+                    {{ config('app.name', 'Laravel') }}
+                </a>
+                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <!-- Left Side Of Navbar -->
+                    <ul class="navbar-nav mr-auto">
+
+                    </ul>
+
+                    <!-- Right Side Of Navbar -->
+                    <ul class="navbar-nav ml-auto">
+                        <!-- Authentication Links -->
+                        @guest
+                            <li><a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a></li>
+                            <li><a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a></li>
+                        @else
+                            <li class="nav-item dropdown">
+                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
+                                    {{ Auth::user()->name }} <span class="caret"></span>
+                                </a>
+
+                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                                    <a class="dropdown-item" href="{{ route('logout') }}"
+                                       onclick="event.preventDefault();
+                                                     document.getElementById('logout-form').submit();">
+                                        {{ __('Logout') }}
+                                    </a>
+
+                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
+                                        @csrf
+                                    </form>
+                                </div>
+                            </li>
+                        @endguest
+                    </ul>
+                </div>
+            </div>
+        </nav>
+
+        <main class="py-4">
+            @yield('content')
+        </main>
+    </div>
+</body>
+</html>
diff --git a/routes/api.php b/routes/api.php
index 492d8e8f..ce7e28e2 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -26,10 +26,9 @@ Route::middleware('auth:api')->get('/user', function (Request $request) {
 //    return $request->user();
 //});
 Route::group(['middleware' => 'auth:api'], function () {
-	Route::post('logout', 'Auth\LoginController@logout');
-
+    Route::post('logout', 'Auth\LoginController@logout');
+    
 	/*Route for the booking */
-	Route::get('/booking', 'BookingController@index');
 	Route::get('/booking/{book_id}', 'BookingController@show');
 	Route::put('/booking/{book_id}', 'BookingController@update');
 	Route::delete('/booking/{book_id}', 'BookingController@delete');
@@ -37,11 +36,13 @@ Route::group(['middleware' => 'auth:api'], function () {
 	Route::post('/booking/calculation', 'BookingController@calculation');
 	Route::post('/booking/{book_id}/cancel', 'BookingController@cancel');
 	Route::post('/booking/{id}/upload-user-bankslip', 'BookingController@uploadbankslip');
-	Route::post('/booking/{id}/upload-po', 'BookingController@uploadPurchaseOrder');
+    Route::post('/booking/{id}/upload-po', 'BookingController@uploadPurchaseOrder');
+    Route::post('/booking/{id}/confirm-po', 'BookingController@confirmPurchaseOrder');
 	Route::patch('/booking/{id}/bankslip-amount', 'BookingController@updateBankSlipAmount');
 	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::post('booking/{book_id}/cancel', 'BookingController@cancel');
+    Route::get('/booking', 'BookingController@index');
 	Route::get('/user', 'UserController@show');
 });
 
@@ -50,16 +51,20 @@ Route::group(['middleware' => 'auth:api'], function () {
 
 
 Route::group(['middleware' => 'guest:api'], function () {
-	Route::post('login', 'Auth\LoginController@login');
-	Route::post('register', 'Auth\RegisterController@register');
-	Route::post('password/email', 'Auth\ForgotPasswordController@sendResetLinkEmail');
-	Route::post('password/reset', 'Auth\ResetPasswordController@reset');
+    Route::post('login', 'Auth\LoginController@login')->name('login');
+    Route::post('register', 'Auth\RegisterController@create');
+    Route::post('password/email', 'Auth\ForgotPasswordController@sendResetLinkEmail');
+    Route::post('password/reset', 'Auth\ResetPasswordController@reset');
 
 	Route::post('oauth/{driver}', 'Auth\OAuthController@redirectToProvider');
 	Route::get('oauth/{driver}/callback', 'Auth\OAuthController@handleProviderCallback')->name('oauth.callback');
 });
 
-Route::group(['middleware' => 'role:admin'], function() {
+Route::group(['middleware' => ['role:admin']], function() {
+	Route::get('admin/booking/', 'BookingController@adminIndex');
+	Route::get('admin/booking/{id}', 'BookingController@adminShow');
+	Route::post('booking/{id}/upload-invoice', 'BookingController@uploadInvoice');		
+
 	Route::post('update-rate', 'RateController@store');
 	Route::put('update-rate/{rate}', 'RateController@update');
 	Route::delete('update-rate/{rate}', 'RateController@delete');
diff --git a/routes/web.php b/routes/web.php
index 49812be0..7dc992f7 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -10,8 +10,11 @@
 | contains the "web" middleware group. Now create something great!
 |
 */
-
 Route::get('/', 'WelcomeController@index');
 Route::get('password/reset/{token}', 'Auth\ResetPasswordController@showResetForm')->name('password.request');
 Route::post('password/reset', 'Auth\ResetPasswordController@postReset')->name('password.reset');
 Route::get('{path}', 'WelcomeController@index')->where('path', '(.*)');
+
+Auth::routes();
+
+//Route::get('/home', 'WelcomeController@index')->name('home');
diff --git a/tests/Feature/BookingTest.php b/tests/Feature/BookingTest.php
index a30608bc..c44ed4b5 100644
--- a/tests/Feature/BookingTest.php
+++ b/tests/Feature/BookingTest.php
@@ -16,12 +16,14 @@ use App\User;
 use App\Booking;
 use App\UserBankSlip;
 use App\Role; 
+use App\SettingCredit;
 
 class BookingTest extends TestCase
 {
     protected $user;
     protected $booking;
     protected $userBankSlip;
+    protected $setting_credit;
     
     public function setUp()
     {
@@ -29,6 +31,7 @@ class BookingTest extends TestCase
         Artisan::call('db:seed');
 
         $this->user = factory(User::class)->create();
+        $this->setting_credit = factory(SettingCredit::class)->create();
         $this->booking = factory(Booking::class)->create([
             'user_id' => $this->user->id
         ]);
@@ -67,22 +70,28 @@ class BookingTest extends TestCase
             'usd_book_cnap' => '2131rew',
             'usd_book_bank_branch' => '2131rew',
             'verification_status' => '1'
-        ])
-        ->assertStatus(201);
+        ]);
+
+        if(14000 > $this->setting_credit->rmb_credit_limit){
+            $response->assertStatus(401);  
+        }
+        else{
+            $response->assertStatus(201);   
+        }
     }
 
     public function testuploadbankslip()
     {
         Storage::fake('file');
-        $bankslip_url = UploadedFile::fake()->image('comp.jpg');
+        $bankslip_path = UploadedFile::fake()->image('comp.jpg');
 
-        if(!file_exists($bankslip_url)){
+        if(!file_exists($bankslip_path)){
             $response->assertStatus(400);
         }
 
         $this->actingAs($this->user)
             ->json('POST', '/api/booking/' . $this->booking->id . '/upload-user-bankslip', [
-                'file' => $bankslip_url
+                'file' => $bankslip_path
             ])
             ->assertSuccessful();
     }
@@ -98,20 +107,19 @@ class BookingTest extends TestCase
 
     public function testuploadPO()
     {
-        Storage::fake('image_url');
-        $image_url = UploadedFile::fake()->image('comp.jpg');
+        Storage::fake('file');
+        $image_path = UploadedFile::fake()->image('comp.jpg');
 
-        if(!file_exists($image_url)){
+        if(!file_exists($image_path)){
             $response->assertStatus(400);    
         }
         
         $this->actingAs($this->user)
             ->json('POST', '/api/booking/' . $this->booking->id . '/upload-po', [
-                'file' => UploadedFile::fake()->image('comp.jpg'),
+                'file' =>  $image_path,
                 'amount' => '12345'
             ])
             ->assertSuccessful();
-            
     }
 
     public function testCancel()
@@ -124,11 +132,12 @@ class BookingTest extends TestCase
     public function testApproveBankSlip()
     {
         $this->actingAs($this->user)
-            ->json('POST','/api/booking/' . $this->booking->id . '/approve-bank-slip', [])
+            ->json('POST','/api/booking/' . $this->booking->id . '/approve-bank-slip', [
+                'estimated_arrival_time' => '6000'
+            ])
             ->assertSuccessful();
     }
 
-
     public function testRejectBankSlip()
     {
         $this->actingAs($this->user)
@@ -137,4 +146,24 @@ class BookingTest extends TestCase
             ])
             ->assertSuccessful();
     }
+
+    // Only this is Admin permision required
+    public function testUploadInvoice(){
+        $this->user->roles()->sync([]);
+        $this->user->attachRole(Role::Where('name','admin')->first());
+
+        Storage::fake('invoice_path');
+        $invoice_path = UploadedFile::fake()->create('document.pdf');
+
+        if(!file_exists($invoice_path)){
+            $response->assertStatus(400);    
+        }
+        
+        $this->actingAs($this->user)
+            ->json('POST', '/api/booking/' . $this->booking->id . '/upload-invoice', [
+                'invoice_path' => $invoice_path,
+                'amount' => '12345'
+            ])
+            ->assertSuccessful();
+    }
 }
diff --git a/tests/Feature/RegisterTest.php b/tests/Feature/RegisterTest.php
index 9861c9e0..4f1c3023 100644
--- a/tests/Feature/RegisterTest.php
+++ b/tests/Feature/RegisterTest.php
@@ -3,17 +3,30 @@
 namespace Tests\Feature;
 
 use Tests\TestCase;
+use App\Marking;
+use Artisan;
 
 class RegisterTest extends TestCase
 {
+    protected $marking;
+
+    public function setUp(){
+        parent::setUp();
+        Artisan::call('db:seed');
+
+        $this->marking = factory(Marking::class)->create();
+    }
+
+
     /** @test */
     public function can_register()
     {
         $this->postJson('/api/register', [
             'name' => 'Test User',
-            'email' => 'test@test.app',
+            'email' => $this->marking->email,
             'password' => 'secret',
             'password_confirmation' => 'secret',
+            'marking' => $this->marking->marking
         ])
         ->assertSuccessful()
         ->assertJsonStructure(['id', 'name', 'email']);
diff --git a/tests/Feature/SettingCreditTest.php b/tests/Feature/SettingCreditTest.php
index b0d0cc4c..00d7a339 100644
--- a/tests/Feature/SettingCreditTest.php
+++ b/tests/Feature/SettingCreditTest.php
@@ -24,10 +24,12 @@ class SettingCreditTest extends TestCase
     }
 
     public function testStore(){
+        
     	$this->actingAs($this->user)
 			->postJson('/api/setting-credit/',  [
 			'rmb_credit_limit' => '5000',
-			'usd_credit_limit' => '2000'
+			'usd_credit_limit' => '2000',
+            'time_limit' => '500'
 		])
 		->assertStatus(201);
     }