Merge conflict fix

2026-08-22 05:44:13 +00:00 · 2018-07-02 15:13:32 +08:00
parent 1bad5dbd8e e23d2ef346
commit 27877e8a65
92 changed files with 27570 additions and 2231 deletions
@@ -1,79 +0,0 @@
-APP_NAME=EXCHANGE
-APP_NAME=Exchange
-APP_ENV=local
-APP_KEY=base64:Fu2YulXExzm9HJ5LgVmZUmcbRkchHkc82q02MorN5GQ=
-APP_DEBUG=true
-APP_URL=http://localhost
-
-LOG_CHANNEL=stack
-
-DB_CONNECTION=mysql
-DB_HOST=127.0.0.1
-DB_PORT=3306
-DB_DATABASE=exchange
-DB_USERNAME=root
-DB_PASSWORD=
-
-BROADCAST_DRIVER=log
-CACHE_DRIVER=file
-SESSION_DRIVER=file
-SESSION_LIFETIME=120
-QUEUE_DRIVER=sync
-
-REDIS_HOST=127.0.0.1
-REDIS_PASSWORD=null
-REDIS_PORT=6379
-
-MAIL_DRIVER=smtp
-MAIL_HOST=smtp.mailtrap.io
-MAIL_PORT=2525
-MAIL_USERNAME=null
-MAIL_PASSWORD=null
-MAIL_ENCRYPTION=null
-
-PUSHER_APP_ID=
-PUSHER_APP_KEY=
-PUSHER_APP_SECRET=
-PUSHER_APP_CLUSTER=mt1
-
-MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
-MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
-APP_NAME=exchange
-APP_ENV=local
-APP_KEY=base64:Fu2YulXExzm9HJ5LgVmZUmcbRkchHkc82q02MorN5GQ=
-APP_DEBUG=true
-APP_URL=http://localhost
-
-LOG_CHANNEL=stack
-
-DB_CONNECTION=mysql
-DB_HOST=127.0.0.1
-DB_PORT=3306
-DB_DATABASE=homestead
-DB_USERNAME=homestead
-DB_PASSWORD=secr
-
-BROADCAST_DRIVER=log
-CACHE_DRIVER=file
-SESSION_DRIVER=file
-SESSION_LIFETIME=120
-QUEUE_DRIVER=sync
-
-REDIS_HOST=127.0.0.1
-REDIS_PASSWORD=null
-REDIS_PORT=6379
-
-MAIL_DRIVER=smtp
-MAIL_HOST=smtp.mailtrap.io
-MAIL_PORT=2525
-MAIL_USERNAME=null
-MAIL_PASSWORD=null
-MAIL_ENCRYPTION=null
-
-PUSHER_APP_ID=
-PUSHER_APP_KEY=
-PUSHER_APP_SECRET=
-PUSHER_APP_CLUSTER=mt1
-
-MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
-MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
@@ -9,5 +9,5 @@ RUN composer install

 COPY wait.sh /usr/local/bin/wait.sh
 RUN chmod +x /usr/local/bin/wait.sh
-CMD /usr/local/bin/wait.sh && composer dumpautoload && php artisan migrate && php artisan db:seed && php artisan serve --host=0.0.0.0 --port=8000
+CMD /usr/local/bin/wait.sh && composer dumpautoload && php artisan storage:link && php artisan migrate && php artisan db:seed && php artisan serve --host=0.0.0.0 --port=8000
 EXPOSE 8000
@@ -27,13 +27,31 @@ class Booking extends Model
                            'bank_branch', 'company_name'];
                            
    public $timestamps = true;
-
+    
    public function user(){
        return $this->belongsTo('app\User');
    }

+    public function bookingSupplier(){
+        return $this->belongsTo('app\BookingSupplier ');
+    }
+
+    public function chinaBankSlip(){
+        return $this->hasOne(ChinaBankSlip::class);
+    }
+    
    public function userBankSlip(){
        return $this->hasOne(UserBankSlip::class);
    }
+
+    public function purchaseOrder(){
+        return $this->hasOne(PurchaseOrder::class);
+    }
+
+    public function invoice(){
+        return $this->hasOne(Invoice::class);
+    }
+
+
 }

@@ -6,5 +6,10 @@ use Illuminate\Database\Eloquent\Model;

 class ChinaBankSlip extends Model
 {
-    protected $fillable = ['actual_transfer_amount','date','details','china_bank_slips'];
+    protected $fillable = ['actual_transfer_amount','date','details','china_bank_slip_path'];
+
+    public function booking()
+    {
+        return $this->belongsTo(Booking::class);
+    }
 }
@@ -10,6 +10,7 @@ use App\Rate;
 use App\UserBankSlip;
 use App\User;
 use App\Invoice;
+use App\SettingCredit;
 use Auth;
 use Validator;
 use DateTime;
@@ -18,17 +19,20 @@ 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',Auth::user()->id)
-                            ->get();
-        
+                                    ->where('user_id', $user->id)
+                                    ->paginate(10);
+
+
        // reformat to fit frontend structure 
        foreach ($bookings as $booking) {
            // set timeout 
            $date1 = new DateTime($booking->created_at);
            $date2 = new DateTime();
-            $difference_in_seconds = ($date1->format('U') + 600) - ($date2->format('U'));
-            $booking->timeout = $difference_in_seconds;  
+            $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 ){
@@ -38,7 +42,7 @@ class BookingController extends Controller
            // TODO : transfer_amount change name to bia 
            $booking->transfer_amount = $booking->bia; 
 
-            $booking->track_status = "(". $booking->status ."/6)";
+            $booking->track_status = "(". $booking->status ."/7)";
            switch ($booking->status) {
                case 1:
                    $status_desc = "Order in progress"; 
@@ -58,39 +62,183 @@ class BookingController extends Controller
                case 6:
                    $status_desc = "Processing invoice"; 
                    break;
+                case 7:
+                    $status_desc = "Order Completed"; 
+                    break;
                default:
-                    $biastatus_desc = "";
+                    $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 ."/7)";
+				switch ($booking->admin_status) {
+					case 1:
+						$status_desc = "Waiting customer upload bank slip"; 
+						break;
+					case 2:
+						$status_desc = "Verify user bank slip";  
+						break;    
+					case 3:
+						$status_desc = "Generate supplier booking report";    
+						break;  
+					case 4:
+						$status_desc = "Supplier booking report. Please confirm with your booking."; 
+						break;
+					case 5:
+						$status_desc = "Please, upload China Bankslip"; 
+						break;
+					case 6:
+						$status_desc = "Waiting customer to upload purchase order"; 
+                        break;
+                    case 7:
+						$status_desc = "Customer has uploaded purchase order, please upload invoice"; 
+                        break;
+                    case 8:
+						$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();
+       
+        $user_bankslip = $booking->userBankSlip()->first();
+        $china_bankslip = $booking->chinaBankSlip()->first();
+        $po = $booking->purchaseOrder()->first();
+        $invoice = $booking->invoice()->first();

-        $date1 = new DateTime($booking->created_at);
-        $date2 = new DateTime();
-        $difference_in_seconds = ($date1->format('U') + 600) - ($date2->format('U'));
+		if($booking){

-        $booking->timeout = $difference_in_seconds;   
+            $date1 = new DateTime($booking->created_at);
+            
+            if ($user_bankslip){
+                $booking->user_bankslip_path = Storage::url($user_bankslip->bankslip_path);
+                $booking->reject_reason = $user_bankslip->reject_reason;
+                $date1 = new DateTime($user_bankslip->updated_at);
+            }

-        if (!$booking){
-            return response()->json(['success'=>false, 'message'=>'not found'], 404);
-        }
-        return $booking;
+            if($china_bankslip){
+                $booking->china_bankslip_path = Storage::url($china_bankslip->china_bank_slip_path);
+            }
+
+            if($po){
+                $booking->user_po_path = Storage::url($po->image_path);
+            }
+
+            if($invoice){
+                $booking->invoice_path = Storage::url($invoice->invoice_path);
+            }
+
+            // 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; 
+
+            if (!$booking){
+                return response()->json(['success'=>false, 'message'=>'not found'], 404);
+            }
+
+            return $booking;
+		}
+    }
+
+	public function adminShow($id)
+    {   
+		$booking = Booking::where('id', $id)->firstOrFail();
+
+        
+        $user_bankslip = $booking->userBankSlip()->first();
+        $china_bankslip = $booking->chinaBankSlip()->first();
+        $po = $booking->purchaseOrder()->first();
+        $invoice = $booking->invoice()->first();
+
+		if($booking){
+
+            if ($user_bankslip){
+                $booking->user_bankslip_path = Storage::url($user_bankslip->bankslip_path);
+                $booking->reject_reason = $user_bankslip->reject_reason;
+                $date1 = new DateTime($user_bankslip->updated_at);
+            }
+
+            if($china_bankslip){
+                $booking->china_bankslip_path = Storage::url($china_bankslip->china_bank_slip_path);
+            }
+
+            if($po){
+                $booking->user_po_path = Storage::url($po->image_path);
+            }
+
+            if($invoice){
+                $booking->invoice_path = Storage::url($invoice->invoice_path);
+            }
+
+            // 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; 
+
+            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
+        $rates = Rate::orderby('updated_at','desc')->first();
+		$creditLimit = SettingCredit::orderby('updated_at','desc')->first();
+
+		if (!$creditLimit){
+			return response()->json("Credit limit not set, please contact admin", 405);
+		}
+
+        if($amount > $creditLimit->rmb_credit_limit){
+            return response()->json("Exceed credit limit, need approved from admin", 401);
+        }
+
        $user = Auth::user(); 
        $rate = 1; // default rate to 1 

+
        switch ($term) {
            case "x1_cash":
                $rate = $rates->x1_cash;
@@ -197,289 +345,400 @@ class BookingController extends Controller
        $book_id->cnap = $request->input('cnap');
        $book_id->save();
 
-		return response()->json(['book_id'=>$book_id],200);
-	}
+        return response()->json(['book_id'=>$book_id],200);
+    }
+    //upload
+    public function uploadbankslip(Request $request, $id)
+    {
+        $booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first();
+        
+        /* Validation*/
+        if (!$booking)
+        {
+            return response()->json(['message'=>'Access denied'], 200);
+        }

-	public function uploadbankslip(Request $request, $id)
-	{
-		$booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first();
+        $validator = Validator::make($request->all(), [
+            'file'   => 'image|mimes:jpg,jpeg,bmp,png'
+        ]);
+
+        if($validator->fails())
+        {
+            return response()->json(['message'=>'Incorrect format'],200);
+        }
+
+        $validator = Validator::make($request->all(), [
+            'file'   => 'max:3072'
+        ]);
+
+        if($validator->fails())
+        {
+            return response()->json(['message'=>'Image too large, upload files up to 3 MB'], 400);
+        }
+
+
+        if($bankslip_file = $request->file('file'))
+        {
+            /* End Validation */
+            $filename = $bankslip_file->getClientOriginalName();
+            $ext = $bankslip_file->getClientOriginalExtension();
+
+
+            $unique_name = 'bank_slip_' . md5($filename. time()); // probably not a good idea 
+            $unique_image_path = $unique_name. '.' .$ext;
+
+            $upload_path = Storage::disk('public')->putFileAs(
+                'user_bankslip', $bankslip_file, $unique_image_path
+            ); 
+
+            $user_bankslip = $booking->userBankSlip()->first();
+            
+            // if user bankslip not exist, create new one 
+            if(!$user_bankslip){
+                $user_bankslip = new UserBankSlip;
+            }
+            $user_bankslip->booking_id = $booking->id;
+            $user_bankslip->bankslip_path =  $upload_path;
+            $user_bankslip->transfer_amount = $request->input('transfer_amount');
+            $user_bankslip->save();
+
+
+            return response()->json(['message'=>"Success"],200);   
+        } 
+        else {
+            return response()->json(['message' => 'No file detected'], 400);
+        }
+      
+    }
+
+    public function updateBankSlipAmount(Request $request, $id){
+        $booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first();
+        $user_bankslip = $booking->userBankSlip()->first();
+
+        if(!$user_bankslip){
+            return response()->json(["message"=> "not found"],400);
+		}
 		
-		/* Validation*/
-		if (!$booking)
-		{
-			return response()->json(['message'=>'Access denied'], 200);
-		}
+		// update booking status 
+		$booking->status = 3;
+		$booking->admin_status = 2; 
+		$booking->save();

-		$validator = Validator::make($request->all(), [
-			'file'   => 'image|mimes:jpg,jpeg,bmp,png'
-		]);
+        $user_bankslip->transfer_amount = $request->input('transfer_amount');
+        $user_bankslip->save();
+        return response()->json(["message"=> "Success"],200);
+    }

-		if($validator->fails())
-		{
-			return response()->json(['message'=>'Incorrect format'],200);
-		}
+    public function uploadPurchaseOrder(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);
+            }

-		if(!$bankslip_file = $request->file('file'))
-		{
-			return response()->json(['message' => 'No file detected'], 400);
-		}
-		/* End Validation */
-		$filename = $bankslip_file->getClientOriginalName();
-		$ext = $bankslip_file->getClientOriginalExtension();
-		$input['file'] = $filename;
+            $validator = Validator::make($request->all(), [
+                'file'   => 'image|mimes:jpg,jpeg,bmp,png'
+            ]);

-		$unique_name = 'bank_slip_' . md5($filename. time()); // probably not a good idea 
-		$unique_image_path = $unique_name. '.' .$ext;
-		Storage::putFileAs(
-			'user_bankslip', $bankslip_file, $unique_image_path
-		); 
+            if($validator->fails())
+            {
+                return response()->json(['message'=>'Incorrect format'],200);
+            }

-		$user_bankslip = new UserBankSlip;
-		$user_bankslip->booking_id = $booking->id;
-		$user_bankslip->bankslip_path =  $unique_image_path;
-		$user_bankslip->transfer_amount = $request->input('transfer_amount');
-		$user_bankslip->save();
+            $validator = Validator::make($request->all(), [
+                'file'   => 'max:3072'
+            ]);

+            if($validator->fails())
+            {
+                return response()->json(['message'=>'Image too large, upload files up to 3 MB'], 400);
+            }

-		return response()->json(['message'=>"Success"],200);
-	}
+            if(!$user_input_file = $request->file('file'))
+            {
+                return response()->json(['message' => 'No file detected'], 400);
+            }
+        /* End Validation */

-	public function updateBankSlipAmount(Request $request, $id){
-		$booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first();
-		$user_bankslip = $booking->userBankSlip()->first();
+        $filename = $user_input_file->getClientOriginalName();
+        $ext = $user_input_file->getClientOriginalExtension();

-		if(!$user_bankslip){
-			return response()->json(["message"=> "not found"],400);
-		}
-		$user_bankslip->transfer_amount = $request->input('transfer_amount');
-		$user_bankslip->save();
-		return response()->json(["message"=> "Success"],200);
-	}
+        $input['file'] = $filename;
+        $unique_name = 'purchase_order_' . md5($filename. time());
+        $unique_image_path = $unique_name. '.' .$ext;
+        $upload_path = Storage::disk('public')->putFileAs(
+            'purchase_order',/*folder name*/ $user_input_file, $unique_image_path, 'public'
+        );

-	public function uploadPurchaseOrder(Request $request, $id)
-	{
-		$booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first();
+        $user_po = new PurchaseOrder;
+        $user_po->image_path = $upload_path;
+        $user_po->booking_id = $booking->id;
+        $user_po->save();

-		/* Validation */
-			if (!$booking)
-			{
-				return response()->json(['message'=>'Access denied'], 200);
-			}
+        $booking->status = 6;
+		$booking->admin_status = 7; 
+        $booking->save();

-			$validator = Validator::make($request->all(), [
-				'file'   => 'image|mimes:jpg,jpeg,bmp,png'
-			]);
+        return response()->json(['message'=>'Success'],200);
+    }
+    

-			if($validator->fails())
-			{
-				return response()->json(['message'=>'Incorrect format'],200);
-			}
+    public function showPurchaseOrder($id){
+        $booking = Booking::where('id',$id)->first();
+        $user_po = $booking->purchaseOrder()->first();

-			if(!$user_input_file = $request->file('file'))
-			{
-				return response()->json(['message' => 'No file detected'], 400);
-			}
-		/* End Validation */
+        if($user_po){
+            return response()->json(['user_po_path'=> $user_po->image_path ],200);
+        }

-		$filename = $user_input_file->getClientOriginalName();
-		$ext = $user_input_file->getClientOriginalExtension();
+        return response()->json(['message'=> 'waiting customer to upload their po'], 200);
+    }

-		$input['file'] = $filename;
-		$unique_name = 'purchase_order_' . md5($filename. time());
-		$unique_image_path = $unique_name. '.' .$ext;
-		Storage::putFileAs(
-			'purchase_order',/*folder name*/ $user_input_file, $unique_image_path
-		);
+    public function delete(Booking $book_id)
+    {
+        $booking = Booking::where('user_id', Auth::user())->where('id', $book_id)->firstOrFail();
+        $booking->delete($book_id);
+        return response()->json($book_id, 204);
+    }

-		$user_po = new PurchaseOrder;
-		$user_po->image_path = $unique_image_path;
-		$user_po->book_id = $booking->id;
-		$user_po->save();
+    public function cancel(Request $request, $book_id)
+    {
+        if (!$booking = Booking::where('user_id',Auth::user()->id)->where('id',$book_id)->first())
+        {
+            return response()->json(['message'=>'Access denied'], 200);
+        }

-		return response()->json(['message'=>'Success'],200);
+        $booking->is_cancel = true;
+        $booking->save();
+
+        return response()->json(['message'=>'Success'],200);
+    }
+
+    public function calculation(Request $request)
+    {
+        $amount = $request->input('amount');
+        $term = $request->input('term');
+        $china_beneficiary = $request->input('china_beneficiary');
+        $rates = Rate::orderby('updated_at','desc')->first();
+ 
+        // TODO : get marking 
+        $marking = "123X";
+ 
+        switch ($term) {
+         case "x1_cash":
+             $rate = $rates->x1_cash;
+             $payment_method = "cash";
+             break;
+         case "x1_cheque":
+             $rate = $rates->x1_cheque;
+             $payment_method = "Cheque";
+             break;
+         case "x1_ba":
+             $rate = $rates->x1_ba;
+             $payment_method = "BA";
+             break;
+         case "x2_cash":
+             $rate = $rates->x2_cash;
+             $payment_method = "Cash";
+             break;
+         case "x2_cheque":
+             $rate = $rates->x2_cheque;
+             $payment_method = "Cheque";
+             break;
+         case "x2_ba":
+             $rate = $rates->x2_ba;
+             $payment_method = "BA";
+             break;
+         default:
+             return response()->json([
+                 'success' => false,
+                 'message' => 'Invalid input',
+             ], 422);
+             break;
+         }
+ 
+         if ($amount >= 10000 && ($term == 'x2_cash' || $term = 'x2_cheque' || $term = 'x2_ba')) {
+             $svcharge = 0;
+         } else {
+             $svcharge = 20.00;
+         }
+ 
+         $bankin_amount = round(($amount + $svcharge) / $rate + (0 * ($amount + $svcharge)), 2);
+ 
+         return response()->json([
+             'date' => date('Y-m-d'),
+             'marking' => $marking,
+             'amount' => $amount,
+             'payment_method' => $payment_method,
+             'service_charge' => $svcharge,
+             'rate' => $rate,
+             'bankin_amount' => $bankin_amount,
+             'china_beneficary' => $china_beneficiary
+         ], 200);
+    }
+
+    public function approveBankSlip(Request $request, $book_id)
+    {
+        $booking = Booking::where('id',$book_id)->first();
+
+        if (!$booking)
+        {
+            return response()->json(['message'=>'Booking not found'], 400);
+        }
+
+        if(!$userBankSlip = UserBankSlip::where('booking_id',$booking->id)->first())
+        {
+            return response()->json(['message'=>'User bankslip not found'], 400);   
+        }
+
+        // Rejected bankslip cannot be approve again
+        // if($userBankSlip->is_reject == 1)
+        // {
+        //     return response()->json(['message'=>'Bankslip already rejected'],200);    
+        // }
+
+        $userBankSlip->is_approve = 1;
+        $userBankSlip->is_reject = 0;
+        $userBankSlip->estimated_arrival_time = $request->input('estimated_arrival_time');
+        $userBankSlip->save();
+
+        // update booking status 
+		$booking->status = 4;
+		$booking->admin_status = 3; 
+        $booking->save();
+        
+        return response()->json(['message'=>'Success'],200);
+    }
+
+    public function rejectBankSlip(Request $request, $book_id)
+    {
+        $booking = Booking::where('id',$book_id)->first();
+        if (!$booking)
+        {
+            return response()->json(['message'=>'Access denied'], 200);
+        }
+
+        if(!$userBankSlip = UserBankSlip::where('booking_id',$booking->id)->first())
+        {
+            return response()->json(['message'=>'Access denied'], 200);
+        }
+
+        // approved bankslip cannot be reject again
+        if($userBankSlip->is_approve == 1)
+        {
+            return response()->json(['message'=>'Bankslip already approved'],200);    
+        }
+
+        $userBankSlip->is_reject = 1;
+        $userBankSlip->reject_reason = $request->input('reject_reason');
+        $userBankSlip->save();
+
+        // update booking status 
+		$booking->status = 2; // upload user bankslip 
+		$booking->admin_status = 1; // user booking  
+        $booking->save();
+
+        return response()->json(['message'=>'Success'],200);
+    }
+    //upload
+    public function uploadInvoice(Request $request, $id)
+    {
+        $booking = Booking::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);
+            }
+
+            $validator = Validator::make($request->all(), [
+                'invoice_path'   => 'max:3072'
+            ]);
+
+            if($validator->fails())
+            {
+                return response()->json(['message'=>'Image too large, upload files up to 3 MB'], 400);
+            }
+
+            if(!$input_file = $request->file('file'))
+            {
+                return response()->json(['message'=>'No file detected'], 400);
+            }
+        /* End Validation */
+
+        $filename = $input_file->getClientOriginalName();
+        $ext = $input_file->getClientOriginalExtension();
+
+        $unique_name = 'invoice' . md5($filename. time());
+        $unique_file_url = $unique_name. '.' .$ext;
+        $upload_path = Storage::disk('public')->putFileAs(
+            'invoice', $input_file, $unique_file_url, 'public'
+        );
+        
+        $invoice = new Invoice;
+        $invoice->invoice_path = $upload_path;
+        // TODO : amount 
+        $invoice->amount = 0;
+        $invoice->booking_id = $booking->id;
+        $invoice->save();
+
+        return response()->json(['message'=>"Success"],200);
+    }
+
+    public function confirmSupplier(Request $request, $id)
+    {
+        $booking = Booking::where('id', $id)->firstOrFail();
+        $booking->status = 4; // processing transfer 
+		$booking->admin_status = 5;  // upload china bankslip 
+        
+        if($booking->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; 
+
+        $purchase_order = $booking->purchaseOrder()->first();
+
+        if(!$purchase_order){
+            return response()->json(["message"=> "Please upload your purchase order"],400);
+		}
+		
+        $booking->status = 6;  // wait invoice
+        $booking->admin_status = 6; // upload invoice
        $booking->save();
        return response()->json(['message'=>'Success'],200);
    }

-	public function delete(Booking $book_id)
-	{
-		$booking = Booking::where('user_id', Auth::user())->where('id', $book_id)->firstOrFail();
-		$booking->delete($book_id);
-		return response()->json($book_id, 204);
-	}
+    public function confirmInvoice(Request $request, $id)
+    {
+        $booking = Booking::where('id', $id)->firstOrFail();

-	public function cancel(Request $request, $book_id)
-	{
-		if (!$booking = Booking::where('user_id',Auth::user()->id)->where('id',$book_id)->first())
-		{
-			return response()->json(['message'=>'Access denied'], 200);
-		}
+        $invoice = $booking->invoice()->first();

-		$booking->is_cancel = true;
-		$booking->save();
+        if(!$invoice){
+            return response()->json(["message"=> "Please upload your invoice"],400);
+        }

-		return response()->json(['message'=>'Success'],200);
-	}
-
-	public function calculation(Request $request)
-	{
-		$amount = $request->input('amount');
-		$term = $request->input('term');
-		$china_beneficiary = $request->input('china_beneficiary');
-		$rates = Rate::orderby('updated_at','desc')->first();
- 
-		// TODO : get marking 
-		$marking = "123X";
- 
-		switch ($term) {
-		 case "x1_cash":
-			 $rate = $rates->x1_cash;
-			 $payment_method = "cash";
-			 break;
-		 case "x1_cheque":
-			 $rate = $rates->x1_cheque;
-			 $payment_method = "Cheque";
-			 break;
-		 case "x1_ba":
-			 $rate = $rates->x1_ba;
-			 $payment_method = "BA";
-			 break;
-		 case "x2_cash":
-			 $rate = $rates->x2_cash;
-			 $payment_method = "Cash";
-			 break;
-		 case "x2_cheque":
-			 $rate = $rates->x2_cheque;
-			 $payment_method = "Cheque";
-			 break;
-		 case "x2_ba":
-			 $rate = $rates->x2_ba;
-			 $payment_method = "BA";
-			 break;
-		 default:
-			 return response()->json([
-				 'success' => false,
-				 'message' => 'Invalid input',
-			 ], 422);
-			 break;
-		 }
- 
-		 if ($amount >= 10000 && ($term == 'x2_cash' || $term = 'x2_cheque' || $term = 'x2_ba')) {
-			 $svcharge = 0;
-		 } else {
-			 $svcharge = 20.00;
-		 }
- 
-		 $bankin_amount = round(($amount + $svcharge) / $rate + (0 * ($amount + $svcharge)), 2);
- 
-		 return response()->json([
-			 'date' => date('Y-m-d'),
-			 'marking' => $marking,
-			 'amount' => $amount,
-			 'payment_method' => $payment_method,
-			 'service_charge' => $svcharge,
-			 'rate' => $rate,
-			 'bankin_amount' => $bankin_amount,
-			 'china_beneficary' => $china_beneficiary
-		 ], 200);
-	}
-
-	public function approveBankSlip(Request $request, $book_id)
-	{
-		if (!$booking = Booking::where('user_id',Auth::user()->id)->where('id',$book_id)->first())
-		{
-			return response()->json(['message'=>'Access denied'], 200);
-		}
-
-		if(!$userBankSlip = UserBankSlip::where('book_id',$booking->id)->first())
-		{
-			return response()->json(['message'=>'Access denied'], 200);   
-		}
-
-		// Rejected bankslip cannot be approve again
-		if($userBankSlip->is_reject == 1)
-		{
-			return response()->json(['message'=>'Bankslip already rejected'],200);    
-		}
-
-		$userBankSlip->is_approve = 1;
-		$userBankSlip->save();
-		return response()->json(['message'=>'Success'],200);
-	}
-
-	public function rejectBankSlip(Request $request, $book_id)
-	{
-		if (!$booking = Booking::where('user_id',Auth::user()->id)->where('id',$book_id)->first())
-		{
-			return response()->json(['message'=>'Access denied'], 200);
-		}
-
-		if(!$userBankSlip = UserBankSlip::where('book_id',$booking->id)->first())
-		{
-			return response()->json(['message'=>'Access denied'], 200);
-		}
-
-		// approved bankslip cannot be reject again
-		if($userBankSlip->is_approve == 1)
-		{
-			return response()->json(['message'=>'Bankslip already approved'],200);    
-		}
-
-		$userBankSlip->is_reject = 1;
-		$userBankSlip->reject_reason = $request->reject_reason;
-		$userBankSlip->save();
-
-		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);
-	}
+        $booking->status = 7; // completed
+		$booking->admin_status = 7;  // completed
+        
+        if($booking->save()){
+            return response()->json(['message'=>"Success"],200);
+        }
+    }

 }
@@ -0,0 +1,138 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Auth;
+use App\SupplierBooking;
+use App\Booking;
+use App\Rate;
+use App\User;
+use App\UserBankSlip;
+use App\SettingBeneficiary;
+use App\SupplierBookingItem;
+use App\SettingSupplier;
+use Illuminate\Http\Request;
+
+class BookingSupplierController extends Controller
+{
+
+    public function index()
+    {
+        $bookingsupplier = SupplierBooking::all();
+    
+        $response = [
+            'supplier-booking' => $bookingsupplier
+        ];
+
+        return response()->json($response, 200);
+    }
+
+    public function show($id)
+    {
+        $bookingsupplier = SupplierBooking::has('supplier-booking')->findOrFail($id);
+
+        $response = [
+            'supplier-booking' => $bookingsupplier
+        ];
+
+        return response()->json($response, 200);
+    }
+
+    // Only for single booking 
+    // TODO : Multiple booking
+    public function store(Request $request)
+    {
+
+        $transfer_amount = $request->input("transfer_amount");
+        $supplier_id = $request->input("supplier_id");
+        $booking_id = $request->input("booking_id");
+        $rate = $request->input('rate');
+        $rebate = $request->input('rebate');
+        
+        // Calculation
+        $amountInRMB = $transfer_amount * $rate;
+        $billing = 0.015 * $transfer_amount;
+        $sales_tax = 0.10 * $transfer_amount;
+        $gst = 0 * $transfer_amount; // do we still need this ? 
+        $customerBankInAmount = round($transfer_amount + $gst + $sales_tax + $billing,2);
+        $rmbBankAmount = $customerBankInAmount + $rebate;
+
+        $user = Auth::user();
+        $supplier = SettingSupplier::find($supplier_id);
+        $booking = Booking::find($booking_id);
+
+        // update existing booking supplier if exist 
+        $bookingsupplier = SupplierBooking::where('book_id', $booking_id)->first();
+
+        if (!$bookingsupplier){
+            $bookingsupplier = new SupplierBooking();
+        
+        }
+
+        $bookingsupplier->supplier_id = $supplier->id;
+        $bookingsupplier->payment_method = $request->input('payment_method');
+        $bookingsupplier->transfer_amount = $transfer_amount;
+        $bookingsupplier->rate = $rate;
+        $bookingsupplier->rebate = $rebate;       
+        $bookingsupplier->amountInRMB = $amountInRMB;
+        $bookingsupplier->rmbBankAmount = $rmbBankAmount;
+        $bookingsupplier->book_id = $booking->id;
+        $bookingsupplier->save();
+
+        // update booking status 
+		$booking->status = 4;
+		$booking->admin_status = 4; 
+        $booking->save();
+        
+        // TODO : generate a jpg version of report and save the path 
+
+        return response()->json($bookingsupplier, 201);
+    }
+
+
+    public function update(Request $request, $id)
+    {
+        $bookingsupplier = SupplierBooking::find($id);
+        $bookingsupplier->payment_method = $request->input('payment_method');
+        $bookingsupplier->transfer_amount = $request->input('transfer_amount');
+        $bookingsupplier->rate = $request->input('rate');
+        $bookingsupplier->rebate = $request->input('rebate');
+        // calculation
+        $amountInRMB = $amount * $rate;
+        $billing = 0.015 * $amount;
+        $sales_tax = 0.10 * $amount;
+        $gst = 0 * $amount;
+        $customerBankInAmount = round($amount + $gst + $sales_tax + $billing,2);
+        $rmbBankAmount = $customerBankInAmount + $rebate;
+
+        // save amount in rmb 
+        $bookingsupplier->amountInRMB = $amountInRMB;
+        // save rmb bank amount 
+        $bookingsupplier->rmbBankAmount = $rmbBankAmount;
+        $bookingsupplier->save();
+
+        // $supplierbookingitems = $request->input("supplierbookingitem");      
+        // foreach ($bookings as $booking)
+        //  {
+        //         $update_supplierbookingitem = SupplierBookingItem::where('supplierbooking_id', $id)->first(); 
+        //         $update_supplierbookingitem->china_bankslip_url = $booking['china_bankslip_url'];
+        //         $update_supplierbookingitem->bank_in_amount = $booking['bank_in_amount'];
+        //         $update_supplierbookingitem->date = $booking['date'];
+        //         $update_supplierbookingitem->details = $booking['details'];
+        //         $update_supplierbookingitem->save();
+        //   }
+        return response()->json(['book_id'=>$book_id],201);
+    }
+
+
+    public function report(Request $request, $id)
+    {
+        $supplier_booking = Booking::firstOrFail($id)->supplierBooking()->firstOrFail();
+
+        return response()->json($supplier_booking ,200);
+    }
+
+
+
+
+}
@@ -3,105 +3,85 @@
 namespace App\Http\Controllers;

 use App\ChinaBankSlip;
+use App\Booking;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Storage;
+use Validator;

 class ChinaBankSlipController extends Controller
 {
-    /**
-     * Display a listing of the resource.
-     *
-     * @return \Illuminate\Http\Response
-     */
-    public function index()
-    {
-        //
-    }

-    /**
-     * Show the form for creating a new resource.
-     *
-     * @return \Illuminate\Http\Response
-     */
-    public function create()
-    {
-        //
-    }
+    public function store(Request $request, $id)
+    {      
+        $booking = Booking::where('id',$id)->firstOrFail();
+        
+        // TODO : put this after check file exist 
+        // validate file format 
+        $validator = Validator::make($request->all(), [
+            'file'   => 'image|mimes:jpg,jpeg,bmp,png'
+        ]);

-    /**
-     * Store a newly created resource in storage.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @return \Illuminate\Http\Response
-     */
-    public function store(Request $request)
-    {
-        // Handle File Upload
-        if($request->hasFile('china_bank_slips')){
-            // Get filename with the extension
-            $filenameWithExt = $request->file('china_bank_slips')->getClientOriginalName();
-            // Get just filename
-            $filename = pathinfo($filenameWithExt, PATHINFO_FILENAME);
-            // Get just ext
-            $extension = $request->file('china_bank_slips')->getClientOriginalExtension();
-            // Filename to store
-            $fileNameToStore= $filename.'_'.time().'.'.$extension;
-            // Upload Image
-            $path = $request->file('china_bank_slips')->storeAs('public/bankslip', $fileNameToStore);
-        } else {
-            $fileNameToStore = 'hello.jpg';
+        if($validator->fails())
+        {
+            return response()->json(['message'=>'Incorrect format'],200);
        }
-        // Create Post
-        $post = new ChinaBankSlip;
-        $post->actual_transfer_amount = $request->input('actual_transfer_amount');
-        $post->date = $request->input('date');
-        $post->details = $request->input('details');
-        $post->china_bank_slips = $fileNameToStore;
-        $post->save();;
-    }


-    /**
-     * Display the specified resource.
-     *
-     * @param  \App\ChinaBankSlip  $chinaBankSlip
-     * @return \Illuminate\Http\Response
-     */
-    public function show(ChinaBankSlip $chinaBankSlip)
-    {
-        //
+        $validator = Validator::make($request->all(), [
+            'china_bank_slips'   => 'max:3072'
+        ]);
+        
+        if($validator->fails())
+        {
+            return response()->json(['message'=>'Image too large, upload files up to 3 MB'], 400);
+        }
+
+
+        if($bankslip_file = $request->file('file')){
+         
+            $filename = $bankslip_file->getClientOriginalName();
+            $ext = $bankslip_file->getClientOriginalExtension();
+            $unique_name = 'cnbank_slip_' . md5($filename. time()); // probably not a good idea 
+            $unique_image_path = $unique_name. '.' .$ext;
+    
+            // Upload Image
+            $upload_path = Storage::disk('public')->putFileAs(
+                'china_bank_slip', $bankslip_file, $unique_image_path
+            ); 
+
+
+        } else {
+            return response()->json(['message'=>'file not found'],200);
+        }
+   
+        $china_bankslip = new ChinaBankSlip;
+        $china_bankslip->booking_id = $booking->id;
+        $china_bankslip->china_bank_slip_path = $upload_path;
+        $china_bankslip->save();
+
+        return response()->json(['message'=>'success'], 201);
    }

-    /**
-     * Show the form for editing the specified resource.
-     *
-     * @param  \App\ChinaBankSlip  $chinaBankSlip
-     * @return \Illuminate\Http\Response
-     */
-    public function edit(ChinaBankSlip $chinaBankSlip)
-    {
-        //
+    public function update(Request $request, $id){
+        $booking = Booking::where('id',$id)->first();
+        $china_bankslip = $booking->chinaBankSlip()->first();
+
+        // TODO: first or fail 
+        if(!$china_bankslip){
+            return response()->json(["message"=> "China bankslip not found. Please upload first."],400);
+		}
+		
+        $china_bankslip->actual_transfer_amount = $request->input('actual_transfer_amount');
+        $china_bankslip->date = $request->input('date');
+        $china_bankslip->details = $request->input('details');
+        $china_bankslip->save();
+
+        // update booking status 
+		$booking->status = 5;
+		$booking->admin_status = 6; 
+		$booking->save();
+
+        return response()->json(["message"=> "Success"],200);
    }

-    /**
-     * Update the specified resource in storage.
-     *
-     * @param  \Illuminate\Http\Request  $request
-     * @param  \App\ChinaBankSlip  $chinaBankSlip
-     * @return \Illuminate\Http\Response
-     */
-    public function update(Request $request, ChinaBankSlip $chinaBankSlip)
-    {
-        //
-    }
-
-    /**
-     * Remove the specified resource from storage.
-     *
-     * @param  \App\ChinaBankSlip  $chinaBankSlip
-     * @return \Illuminate\Http\Response
-     */
-    public function destroy(ChinaBankSlip $chinaBankSlip)
-    {
-        //
-    }
 }
@@ -12,11 +12,6 @@ class RateController extends Controller
        return Rate::all();
    }

-    public function show(Rate $rate)
-    {
-        return $rate;
-    }
-
    public function store(Request $request)
    {
        $rate = Rate::create($request->all());
@@ -37,4 +32,11 @@ class RateController extends Controller

        return response()->json(null, 204);
    }
+
+    public function show()
+    {
+        $rate = DB::table('rates')->latest()->first();
+
+        return response()->json($rate, 200);
+    }
 }
@@ -9,7 +9,13 @@ class SettingSupplierController extends Controller
 {
    public function index()
    {
-        return SettingSupplier::all();
+        $suppliers = SettingSupplier::all();
+
+        foreach ($suppliers as $supplier) {
+            $supplier->value = $supplier->id;
+            $supplier->label = $supplier->company_name;
+        }
+        return $suppliers;
    }

    public function show(SettingSupplier $supplier)
@@ -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;
    }
 }
@@ -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'
    ];
 }
@@ -7,4 +7,8 @@ use Illuminate\Database\Eloquent\Model;
 class Invoice extends Model
 {
    protected $fillable = ['invoice_url','amount','booking_id'];
+
+    public function booking(){
+        return $this->hasOne('App\Booking');
+    }
 }
@@ -7,4 +7,9 @@ use Illuminate\Database\Eloquent\Model;
 class PurchaseOrder extends Model
 {
    protected $fillable = ['image_url','amount','booking_id'];
+    
+    public function booking()
+    {
+        return $this->belongsTo(Booking::class);
+    }
 }
@@ -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'];
 }
@@ -0,0 +1,27 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class SupplierBooking extends Model
+{
+    // protected $guarded = [];
+    protected $fillable = ['rate','rebate','payment_amount','payment_method'];
+    public $timestamps = true;
+
+    public function user()
+    {
+        return $this->belongsTo('app\User');
+    }
+
+    public function booking(){
+        return $this->hasOne('App\Booking');
+    }
+
+    public function supplierBookingTtem()
+    {
+        return $this->hasMany('App\SupplierBookingItem');
+    }
+
+}
@@ -0,0 +1,25 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class SupplierBookingItem extends Model
+{
+    protected $fillable = [
+        'id',
+        'china_bankslip_url',
+        'book_id',
+        'bank_in_amount',
+        'date',
+        'details',
+        'supplierbooking_id'
+    ];
+
+    public function bookingsupplier()
+    {
+        return $this->belongsTo('App\BookingSupplier');
+    }
+    
+
+}
@@ -58,7 +58,7 @@ class User extends Authenticatable implements JWTSubject
     */
    public function getRoleAttribute()
    {
-       // return $this->roles->first()->name;
+       return $this->roles->first()->name;
    }

    /**
@@ -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()
    {
@@ -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",
@@ -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
    ];
 });
@@ -4,6 +4,10 @@ use Faker\Generator as Faker;

 $factory->define(App\SettingSupplier::class, function (Faker $faker) {
    return [
-        //
+        'company_name' => $faker->name,
+        'gst_no' => $faker->unique()->randomDigit,
+        'supplier_reg_no' => $faker->unique()->randomDigit,
+        'bank_name' => $faker->name,
+        'acc_no' => $faker->unique()->randomDigit
    ];
 });
@@ -0,0 +1,9 @@
+<?php
+
+use Faker\Generator as Faker;
+
+$factory->define(App\SupplierBookingItem::class, function (Faker $faker) {
+    return [
+        //
+    ];
+});
@@ -11,5 +11,6 @@ $factory->define(App\UserBankSlip::class, function (Faker $faker) {
        'transfer_amount' => $faker->randomDigit,
        'cust_marking' => str_random(10),
        'booking_id' => $faker->randomElement($book_id),
+        'estimated_arrival_time' => $faker->randomDigit
    ];
 });
@@ -30,6 +30,6 @@ class CreateUsersTable extends Migration
     */
    public function down()
    {
-        Schema::dropIfExists('users');
+        
    }
 }
@@ -32,6 +32,6 @@ class CreateRatesTable extends Migration
     */
    public function down()
    {
-        Schema::dropIfExists('rates');
+
    }
 }
@@ -42,7 +42,7 @@ class CreateBookingsTable extends Migration
     */
    public function down()
    {
-        Schema::dropIfExists('bookings');
+
        
    }
 }
@@ -0,0 +1,44 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class SupplierBookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('supplier_bookings', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('payment_method');
+            $table->double('transfer_amount');
+            $table->double('rate');
+            $table->double('rebate');
+            $table->double('amountInRMB');
+            $table->double('rmbBankAmount');
+
+            $table->integer('book_id')->unsigned();
+            $table->foreign('book_id')->references('id')->on('bookings');
+
+            $table->integer('supplier_id')->unsigned();
+            $table->foreign('supplier_id')->references('id')->on('setting_suppliers');
+
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('supplier_bookings');
+    }
+}
@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class SupplierbookingCustomerbookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('supplierbooking_customerbooking', function (Blueprint $table) {
+            $table->integer('supplierbooking_id')->unsigned();
+            $table->integer('booking_id')->unsigned();
+
+            $table->foreign('supplierbooking_id')->references('id')->on('supplier_bookings');
+            $table->foreign('booking_id')->references('id')->on('bookings');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('supplierbooking_customerbooking');
+    }
+}
@@ -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');
+        });   
+    }
+}
@@ -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()
+    {
+    }
+}
@@ -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()
+    {
+        //
+    }
+}
@@ -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');
+        });   
+    }
+}
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateSupplierBookingItemsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('supplier_booking_items', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('china_bankslip_url');
+            $table->integer('book_id')->unsigned();
+            $table->foreign('book_id')->references('id')->on('bookings');
+            $table->double('bank_in_amount');
+            $table->integer('supplierbooking_id')->unsigned();
+            $table->foreign('supplierbooking_id')->references('id')->on('supplier_bookings');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('supplier_booking_items');
+    }
+}
@@ -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');
+            });
+        }
+    }
+}
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class RenameBankslipUrlToChinabanksliPathInChinaBankSlipTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('china_bank_slips', function($table)
+        {
+            $table->renameColumn('bankslip_url', 'china_bank_slip_path');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class MakePaymentmethodNulltableInSupplierbookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('supplier_bookings', function($table)
+        {
+            $table->string('payment_method')->nullable()->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddBookingidForeignkeyToChinabankslipTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('china_bank_slips', function($table)
+        {
+            $table->integer('booking_id')->unsigned();
+            $table->foreign('booking_id')->references('id')->on('bookings');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}
@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class RenameBookingForeignkeyInPoTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('purchase_orders', function($table)
+        {
+            $table->dropForeign(['book_id']);
+            $table->dropColumn('book_id');
+            $table->integer('booking_id')->unsigned();
+            $table->foreign('booking_id')->references('id')->on('bookings');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}
@@ -27,10 +27,15 @@ class BookTableSeeder extends Seeder
            'bank_address' => 'cyber', 
            'swift_code' => 'qwe123', 
            'cnap' => '123asd',
-            'term' => 'x1',
-            'amount' => 1.2,
+            'term' => 'x1_cash',
+            'amount' => 200,
+            'rmb_book_amount' => 200,
+            'bia' => 189,
+            'rate' => 1.2,
            'rate_id' => $rate->id,
            'user_id' => $user->id,
+            'status' => 2,
+            'admin_status' => 1,
            'created_at' => Carbon::now()->format('Y-m-d H:i:s'),
            'updated_at' => Carbon::now()->format('Y-m-d H:i:s'),
        ]);
@@ -1,6 +1,7 @@
 <?php

 use Illuminate\Database\Seeder;
+use Illuminate\Support\Facades\DB;

 class DatabaseSeeder extends Seeder
 {
@@ -16,5 +17,7 @@ class DatabaseSeeder extends Seeder
        $this->call(UserRoleSeeder::class);
        $this->call(RateTableSeeder::class);
        $this->call(BookTableSeeder::class);     
+        $this->call(SettingCreditSeeder::class);  
+        $this->call(SuppliersTableSeeder::class);  
    }
 }
@@ -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' => '6000'
+        ]);
+    }
+}
@@ -0,0 +1,21 @@
+<?php
+
+use Illuminate\Database\Seeder;
+
+class SuppliersTableSeeder extends Seeder
+{
+    /**
+     * Run the database seeds.
+     *
+     * @return void
+     */
+    public function run()
+    {
+        DB::table('setting_suppliers')->insert([
+        	'company_name' => 'WongKok PLT',
+        	'gst_no' => 'GTS12232123',
+            'bank_name' => 'HSBC',
+            'acc_no' => '86774723848593'
+        ]);
+    }
+}
@@ -29,10 +29,12 @@
    "vform": "^1.0.0",
    "vue": "^2.5.16",
    "vue-i18n": "^7.6.0",
+    "vue-loader": "14.2.2",
    "vue-meta": "^1.4.4",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
-    "vuex-router-sync": "^5.0.0"
+    "vuex-router-sync": "^5.0.0",
+    "webpack": "^3.11.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-eslint": "^3.0.0-beta.6",
@@ -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="Purchase Order/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>
@@ -1,16 +1,69 @@
 <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 class="dropdown-menu">
+        <a v-for="(value, key) in locales" :key="key" class="dropdown-item" href="#"
+          @click.prevent="setLocale(key)">
+          {{ value }}
+        </a>
+      </div>
+    </li>
+    <ul class="navbar-nav mr-auto">
+    <li v-if="(user && role == 'admin')" class="nav-item">
+      <el-popover placement="top" width="300" v-model="UpdateRatePopoverVisible">
+          <div align="center">
+            <p>Today's Rate</p>
+            <p>X1 : Cash: {{x1_cash}} Cheque: {{x1_cheque}} BA: {{x1_ba}}</p>
+            <p>X2 : Cash: {{x2_cash}} Cheque: {{x2_cheque}} BA: {{x2_ba}}</p>
+          </div>
+          <div style="text-align: center; margin: 0">
+            <el-button type="primary" size="mini" @click="UpdateRatePopoverVisible = false; UpdateRateDialogVisible = true">Update rate</el-button>
+          </div>
+          <a class="nav-link" href="#" role="button" slot="reference">Update Rate</a>
+        </el-popover>
+      </li></ul>
+      <li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.complete-order' }" class="nav-link">{{ $t('Complete Order') }}</router-link></li>
+      <li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.transaction-history' }" class="nav-link">{{ $t('Transaction History') }}</router-link></li>
+      <li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.upload-supplier-bank-slip' }" class="nav-link">{{ $t('Upload Supplier Bank Slip to System') }}</router-link></li>
+   
+  </ul>
+
+<!-- update rate dialog -->
+  <el-dialog align="center" :visible.sync="UpdateRateDialogVisible">
+    <el-form :inline="true" align="center">
+        <el-form-item>X1 : 
+            Cash : <el-input style=width:10% ></el-input>
+            Cheque : <el-input style=width:10%></el-input>
+            BA : <el-input style=width:10%></el-input>
+        </el-form-item>
+    </el-form>
+    <el-form :inline="true" align="center">
+        <el-form-item>X2 : 
+            Cash : <el-input style=width:10% ></el-input>
+            Cheque : <el-input style=width:10%></el-input>
+            BA : <el-input style=width:10%></el-input>
+        </el-form-item>
+    </el-form>
+    <div align="center">
+        <el-button type="text" @click="UpdateRateDialogVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="UpdateRateDialogVisible = false; DoneUpdateRateDialogVisible = true">Save</el-button>
    </div>
-  </li>
+  </el-dialog>
+<!-- update rate dialog end -->
+<!-- update rate dialog done -->
+  <el-dialog align="center" :visible.sync="DoneUpdateRateDialogVisible" width="30%">
+    <span>Rate Successfully Updated</span><br><br>
+    <div align="center">
+        <el-button type="primary" @click="DoneUpdateRateDialogVisible = false">OK</el-button>
+    </div>
+  </el-dialog>
+<!-- update rate dialog done end -->
+ </div> 
 </template>

 <script>
@@ -18,9 +71,24 @@ import { mapGetters } from 'vuex'
 import { loadMessages } from '~/plugins/i18n'

 export default {
+  data() {
+    return {
+        UpdateRatePopoverVisible: false,
+        UpdateRateDialogVisible: false,
+        DoneUpdateRateDialogVisible: false,
+        x1_cash: '1.56',
+        x1_cheque: '1.63',
+        x1_ba: '1.66',
+        x2_cash: '1.61',
+        x2_cheque: '1.70',
+        x2_ba: '1.72',
+      };
+  },
  computed: mapGetters({
    locale: 'lang/locale',
-    locales: 'lang/locales'
+    locales: 'lang/locales',
+    user: 'auth/user',
+    role: 'auth/role'
  }),

  methods: {
@@ -1,17 +1,17 @@
 <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="Processing Invoice"/>
+      <el-step title="Order Complete"/>
+    </el-steps>
+  </el-row>
 </template>

-
 <style type="text/css">
    /* .el-row {
        margin: 20px 0;
@@ -43,4 +43,4 @@ export default {
    status: 1
  })
 }
-</script>
+</script>
@@ -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()
@@ -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()
@@ -0,0 +1,324 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Order Completed</h4>
+      <br>
+      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+    </div>
+    <br>
+
+    <!-- bankslip  -->
+    <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="#">
+                <img v-bind:src="booking_details.user_po_path" class="image">
+              </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="#">
+                <img v-bind:src="booking_details.china_bankslip_path" class="image">
+              </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">     
+                <img v-bind:src="booking_details.invoice_path" class="image">
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <br>
+    <!-- bank slips END --> 
+
+    <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> -->
+        <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>Payment 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 v-bind:src="booking_details.user_bankslip_path" 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'
+import axios from 'axios'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 8,
+      loading_btn: false,
+      booking_details:{
+          id: null,
+          amount: null,
+          bia: null,
+          user_bankslip_path: 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: {
+
+  }
+}
+</script>
@@ -0,0 +1,367 @@
+<template>
+  <el-main>
+    <progress-track v-model="status" />
+
+    <div align="center">
+      <h4 style="margin-top:5%;"></h4>
+      <br>
+      <h5> Supplier Booking </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>Supplier Form</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12" style="text-align:center">
+          <el-col :span="20" style="text-align:center">
+
+            <el-form ref="supplierBookingForm" :model="supplierBookingForm" :rules="rules">
+              <div align="center">
+
+
+                <el-form-item prop="supplier">
+                  <el-select prop="supplier" v-model="supplierBookingForm.supplier" placeholder="Choose Supplier">
+                    <el-option v-for="item in supplier_options" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+
+                <el-form-item prop="rate">
+                  <el-input v-model="supplierBookingForm.rate" type="text" placeholder="Rate" style="width: 80%" />
+                </el-form-item>
+                <el-form-item prop="rebate">
+                  <el-input v-model="supplierBookingForm.rebate" type="text" placeholder="Rebate" style="width: 80%" />
+                </el-form-item>
+                <el-form-item prop="transfer_amount">
+                  <el-input v-model="supplierBookingForm.transfer_amount" type="text" placeholder="Payment Amount" style="width: 80%" />
+                </el-form-item>
+                <el-form-item>
+                  <el-button :loading="loading_btn" type="primary" @click="generateReport('supplierBookingForm')">Generate Report</el-button>
+                </el-form-item>
+              </div>
+            </el-form>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </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: 3,
+        loading_btn: false,
+        booking_details: {
+          id: null,
+          amount: null,
+          bia: null,
+          user_bankslip_path: null,
+        },
+        supplier: null,
+        supplier_options: null,
+        supplierBookingForm: {
+          supplier: null,
+          amount: null,
+          rebate: null,
+          rate: null,
+          transfer_amount: null,
+        },
+        value: '',
+        rules: {
+          supplier: [{
+            required: true,
+            message: 'Please select a supplier',
+            trigger: 'change'
+          }],
+          rebate: [{
+            required: true,
+            message: 'Please input rebate amount',
+            trigger: 'change'
+          }],
+          rate: [{
+            required: true,
+            message: 'Please input rate',
+            trigger: 'change'
+          }],
+          transfer_amount: [{
+            required: true,
+            message: 'Please input payment 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/admin/booking/' + this.$route.params.id)
+        .then((response) => {   
+          this.booking_details = response.data
+        }).catch((error) => {
+          console.log(error)
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+
+      axios
+        .get('/api/setting-supplier/')
+        .then((response) => {
+          loading.close()
+          this.supplier_options = response.data
+        }).catch((error) => {
+          loading.close()
+          console.log(error)
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+
+    },
+    methods: {
+      generateReport(formName) {
+        this.loading_btn = true
+
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            let newReport = {
+              booking_id: this.$route.params.id,
+              supplier_id: this.supplierBookingForm.supplier,
+              amount: this.supplierBookingForm.amount,
+              rebate: this.supplierBookingForm.rebate,
+              rate: this.supplierBookingForm.rate,
+              transfer_amount: this.supplierBookingForm.transfer_amount,
+            }
+
+            axios.post('/api/supplier-booking', newReport)
+            .then((response) => {
+              this.loading_btn = false
+              
+              this.$router.push({
+                name: 'booking.admin.supplier.report',
+                params: {id: this.$route.params.id }
+              })
+              // redirect to supplier report 
+
+            })
+            .catch((error) => {
+              this.loading_btn = false
+              console.log(error)
+
+              // TODO : Show error message 
+
+            })
+
+          } else {
+            this.loading_btn = false
+          }
+        })
+
+      },
+    }
+  }
+</script>
@@ -0,0 +1,321 @@
+<template>
+  <el-main>
+    <progress-track v-model="status" />
+
+    <div align="center">
+      <h4 style="margin-top:5%;"></h4>
+      <br>
+      <h5> Supplier Report</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>Supplier Report</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12" style="text-align:center">
+          <el-col :span="20" style="text-align:center">
+
+          
+          </el-col>
+        </el-row>
+      </el-card>
+    <br>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>User 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 v-bind:src="booking_details.user_bankslip_path" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+   <br>
+      <el-card class="box-card">
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <el-button :loading="loading_btn" @click="$router.go(-1)" type="primary">Edit</el-button>
+            <el-button :loading="loading_btn" @click="completeReport" type="success">Done</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: 4,
+        loading_btn: false,
+        booking_details: {
+          id: null,
+          amount: null,
+          bia: null,
+          user_bankslip_path: null,
+        },
+        supplier: null,
+        supplier_options: 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) => {
+          loading.close()
+          this.booking_details = response.data
+        }).catch((error) => {
+          console.log(error)
+          loading.close()
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+
+    
+
+    },
+    methods: {
+      completeReport(){
+        // TODO : send request to change status
+        this.loading_btn = true
+        axios
+        .post('/api/booking/' + this.$route.params.id + '/confirm-supplier')
+        .then((response) => {
+          this.loading_btn = false
+          this.$message({
+            showClose: true,
+            message: 'Success, please comeback after getting china bankslip',
+            type: 'success',
+            duration: 5000
+          })
+          this.$router.push({
+            name: 'home'
+          })
+          //this.booking_details = response.data
+        }).catch((error) => {
+           this.loading_btn = false
+          console.log(error)
+          this.$message({
+            showClose: true,
+            message: 'Suceess',
+            type: 'success',
+            duration: 5000
+          })
+        })
+     this.$router.push({
+          name: 'booking.admin.cnslip',
+          params: {id: this.$route.params.id }
+        })
+      }
+
+    }
+  }
+</script>
@@ -0,0 +1,387 @@
+<template>
+  <el-main>
+    <progress-track v-model="status" />
+
+    <div align="center">
+      <h4 style="margin-top:5%;"></h4>
+      <br>
+      <h5> Upload China Bankslip To Customer </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>Upload China Bankslip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12" style="text-align:center">
+          <el-col :span="20" style="text-align:center">
+
+            <el-form ref="chinaSlipForm" :model="chinaSlipForm" :rules="rules">
+              <div align="center">
+
+                <!-- upload image -->
+                <el-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'" :on-preview="handlePreview"
+                  :on-remove="handleRemove" :multiple="false" list-type="picture">
+                  <el-button size="small" type="primary">Click to upload</el-button>
+                  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 3mb</div>
+                </el-upload>
+
+                <br>
+                <!-- upload image end -->
+                <el-form-item prop="date">
+                  <el-date-picker v-model="chinaSlipForm.date" type="date" placeholder="Pick a day" :picker-options="pickerOptions1">
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item prop="actual_transfer_amount">
+                  <el-input v-model="chinaSlipForm.actual_transfer_amount" type="text" placeholder="Amount" style="width: 80%" />
+                </el-form-item>
+
+                <el-form-item prop="details">
+                  <el-input v-model="chinaSlipForm.details" type="text" placeholder="Details" style="width: 80%" />
+                </el-form-item>
+                <el-form-item>
+                  <el-button :loading="loading_btn" type="primary" @click="submitChinaSlip('chinaSlipForm')">Submit</el-button>
+                </el-form-item>
+              </div>
+            </el-form>
+          </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: 5,
+        loading_btn: false,
+        booking_id: this.$route.params.id,
+        booking_details: {
+          id: null,
+          amount: null,
+          bia: null,
+          user_bankslip_path: null,
+        },
+        supplier: null,
+        supplier_options: null,
+        chinaSlipForm: {
+          actual_transfer_amount: null,
+          date: null,
+          details: null,
+        },
+        rules: {
+          actual_transfer_amount: [{
+            required: true,
+            message: 'Please input transfer amount',
+            trigger: 'change'
+          }],
+          date: [{
+            required: true,
+            message: 'Please input date',
+            trigger: 'change'
+          }],
+          details: [{
+            required: true,
+            message: 'Please input details',
+            trigger: 'change'
+          }]
+        },
+        pickerOptions1: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
+          shortcuts: [{
+            text: 'Today',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: 'Yesterday',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: 'A week ago',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        }
+      }
+    },
+    beforeCreate() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Please wait..',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+
+      axios
+        .get('/api/admin/booking/' + this.$route.params.id)
+        .then((response) => {      
+          loading.close()
+          this.booking_details = response.data
+        }).catch((error) => {
+          loading.close()
+          console.log(error)
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+    },
+    methods: {
+      submitChinaSlip(formName) {
+        this.loading_btn = true
+
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            let newChinaSlip = {
+              date: this.chinaSlipForm.date,
+              actual_transfer_amount: this.chinaSlipForm.actual_transfer_amount,
+              details: this.chinaSlipForm.details,
+            }
+
+            axios.patch('/api/booking/' + this.booking_id +'/update-china-bankslip', newChinaSlip)
+              .then((response) => {
+                this.$message({
+                  showClose: true,
+                  message: 'Your bankinslip has been submitted, please wait customer to upload their purchase order.',
+                  type: 'success',
+                  duration: 5000
+                })
+
+                console.log(response)
+                this.$router.push({
+                  name: 'home'
+                })
+              })
+              .catch((error) => {
+                this.loading = false
+                this.$message({
+                  showClose: true,
+                  message: 'Please upload your bankin slip first.',
+                  type: 'warning',
+                  duration: 10000
+                })
+                console.log(error)
+                this.loading_btn = false
+              })
+
+          } else {
+            this.loading_btn = false
+          }
+        })
+
+
+      },
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePreview(file) {
+        console.log(file);
+      }
+    }
+  }
+</script>
@@ -0,0 +1,362 @@
+<template>
+  <el-main>
+    <progress-track v-model="status" />
+
+    <div align="center">
+      <h4 style="margin-top:5%;"></h4>
+      <br>
+      <div v-if="booking_details.user_po_path !== null">
+        <h4>Upload Invoice</h4>
+      </div>
+      <div v-else>
+        <h4>Waiting for User to Upload Purchase Order </h4>
+        <br>
+        <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+      </div>
+      <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-card>
+    </el-row>
+    <br>
+
+    <el-row v-if="booking_details.user_po_path !== null" :gutter="12" justify="center" align="center">
+      <el-col :span="12">
+        <el-card  class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Upload Invoice</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-invoice'" :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_btn" type="primary" @click="confirmInvoice">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>Customer 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">
+                <img v-bind:src="booking_details.user_po_path" class="image">
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </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: 6,
+        loading_btn: false,
+        booking_id: this.$route.params.id,
+        booking_details: {
+          id: null,
+          amount: null,
+          bia: null,
+          user_bankslip_path: null,
+          user_po_path: null,
+        },
+        supplier: null,
+        supplier_options: null,
+        chinaSlipForm: {
+          actual_transfer_amount: null,
+          date: null,
+          details: null,
+        },
+        rules: {
+          actual_transfer_amount: [{
+            required: true,
+            message: 'Please input amount',
+            trigger: 'change'
+          }],
+          date: [{
+            required: true,
+            message: 'Please input bank name',
+            trigger: 'change'
+          }],
+          details: [{
+            required: true,
+            message: 'Please input details',
+            trigger: 'change'
+          }]
+        },
+        pickerOptions1: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
+          shortcuts: [{
+            text: 'Today',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: 'Yesterday',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: 'A week ago',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        }
+      }
+    },
+    beforeCreate() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Please wait..',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+
+      axios
+        .get('/api/admin/booking/' + this.$route.params.id)
+        .then((response) => {
+          loading.close()
+          this.booking_details = response.data
+        }).catch((error) => {
+          console.log(error)
+          loading.close()
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+    },
+    methods: {
+      confirmInvoice () {
+      this.loading_btn = true
+      axios
+        .post('/api/booking/' + this.$route.params.id + '/confirm-invoice')
+        .then((response) => {
+          console.log(response)
+          this.$message({
+            showClose: true,
+            message: 'Your invoice has been uploaded. Order completed !',
+            type: 'success',
+            duration: 5000
+          })
+          this.$router.push({
+            name: 'home'
+          })
+          this.loading_btn = false
+        }).catch((error) => {
+            this.$message({
+              showClose: true,
+              message: 'Please upload invoice',
+              type: 'error',
+              duration: 30000
+            })
+          this.loading_btn = false
+        })
+    },
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePreview(file) {
+        console.log(file);
+      }
+    }
+  }
+</script>
@@ -0,0 +1,351 @@
+<template>
+  <el-main>
+    <progress-track v-model="status" />
+
+    <div align="center">
+      <h4 style="margin-top:5%;"></h4>
+      <br>
+      <h5> Verify User Bankslip </h5>
+      <br>
+      <h5> ( Scroll down to view the customer 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 v-bind:src="booking_details.user_bankslip_path" 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_btn" @click="approveUserSlip" type="success">Aprrove</el-button>
+            <el-button :loading="loading_btn" @click="rejectDialogVisible = true" type="danger">Reject</el-button>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+
+    <el-dialog title="Reason of Reject" :visible.sync="rejectDialogVisible" width="30%" center>
+      <span>
+        <el-input
+          type="textarea"
+          :rows="2"
+          placeholder="Please input the reason"
+          v-model="reject_reason">
+        </el-input>
+      </span>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="rejectDialogVisible = false">Cancel</el-button>
+        <el-button type="primary" :loading="loading_btn" @click="rejectUserSlip">Submit</el-button>
+      </span>
+    </el-dialog>
+
+
+  </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_btn: false,
+        rejectDialogVisible: false,
+        reject_reason: null,
+        booking_details: {
+          id: null,
+          amount: null,
+          bia: null,
+          user_bankslip_path: null,
+        },
+        estimated_arrival_time: null,
+      }
+    },
+    beforeCreate() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Please wait..',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+
+      axios
+        .get('/api/admin/booking/' + this.$route.params.id)
+        .then((response) => {
+          this.booking_details = response.data
+          loading.close()
+
+        }).catch((error) => {
+          console.log(error)
+          loading.close()
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+    },
+    methods: {
+      approveUserSlip() {
+        this.loading_btn = true
+
+        let newApprove = {
+          estimated_arrival_time: this.estimated_arrival_time
+        }
+
+        axios.post('/api/booking/' + this.$route.params.id + '/approve-bank-slip', newApprove)
+          .then((response) => {
+            this.loading_btn = false
+
+            this.$message({
+              showClose: true,
+              message: 'User bankinslip accepted. Proceed with book with supplier.',
+              type: 'success',
+              duration: 5000
+            })
+
+            this.$router.push({
+              name: 'booking.admin.supplier'
+            })
+
+            // pass variable to another router
+          })
+          .catch((error) => {
+            this.loading_btn = false
+            console.log(error)
+          })
+      },
+      rejectUserSlip() {
+        this.loading_btn = true
+        this.centerDialogVisible = false
+
+        let newApprove = {
+          estimated_arrival_time: this.estimated_arrival_time,
+          reject_reason: this.reject_reason
+        }
+
+        axios.post('/api/booking/' + this.$route.params.id + '/reject-bank-slip', newApprove)
+          .then((response) => {
+            this.loading_btn = false
+
+            this.$message({
+              showClose: true,
+              message: 'User bankinslip rejected. Waiting user to reupload their user bankslip.',
+              type: 'warning',
+              duration: 5000
+            })
+
+            this.$router.push({
+              name: 'admin.home'
+            })
+
+            // pass variable to another router
+          })
+          .catch((error) => {
+            this.loading_btn = false
+            console.log(error)
+          })
+      },
+    }
+  }
+</script>
@@ -0,0 +1,37 @@
+<template>
+<div>
+    <span align="center"><h2>Complete Order</h2></span><br>
+    <el-table :data="tableData" stripe style="width: 100%">
+        <el-table-column prop="order_no" label="Order No" sortable></el-table-column>
+        <el-table-column prop="cust_marking" label="Customer Marking" sortable></el-table-column>
+        <el-table-column prop="order_date" label="Order Date" sortable></el-table-column>
+        <el-table-column prop="transfer_amount" label="Transfer Amount (RMB)" sortable></el-table-column>
+        <el-table-column prop="status" label="Status"></el-table-column>
+    </el-table><br><br>
+    <div align="right">
+        <el-pagination background layout="prev, pager, next" :total="30"></el-pagination>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    data() {
+      return {
+        tableData: [{
+          order_no: '001',
+          cust_marking: 'CIEF/155ECE',
+          order_date: '27/6/2018',
+          transfer_amount: '1200',
+          status: 'Complete',
+        }, {
+          order_no: '002',
+          cust_marking: 'CIEF/143EDR',
+          order_date: '23/6/2018',
+          transfer_amount: '14000',
+          status: 'Complete',
+        }]
+      }
+    }
+}
+</script>
@@ -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.admin.complete',
+            params: {id: booking_id }
+          })
+          break
+        default:
+          break
+      }
+    }
  }
+
 }
 </script>
@@ -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>
@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <span align="center"><h2>Transaction History</h2></span><br>
+        <el-table :data="tableData" stripe style="width: 100%">
+            <el-table-column prop="transaction_date" label="Transaction Date" sortable></el-table-column>
+            <el-table-column prop="booking_no" label="Booking No" sortable></el-table-column>
+            <el-table-column prop="marking" label="Marking" sortable></el-table-column>
+            <el-table-column prop="debit_in" label="Debit In"></el-table-column>
+            <el-table-column prop="credit_out" label="Credit Out"></el-table-column>
+            <el-table-column prop="balance" label="Balance"></el-table-column>
+            <el-table-column prop="bank_recon" label="Bank Recon"></el-table-column>
+        </el-table><br><br>
+        <div align="right">
+            <el-button>Export to Excel</el-button><el-button>Print</el-button><br><br>
+            <el-pagination background layout="prev, pager, next" :total="30"></el-pagination>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+      return {
+
+      }
+    }
+}
+</script>
+
+<style>
+
+</style>
@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <span align="center"><h2>Uploaded Supplier Bank Slip</h2></span><br>
+        <div align="right">
+            <el-button type="primary" icon="el-icon-plus" @click="AddNewDialogVisible = true">Add New</el-button>
+        </div><br>
+            <el-table :data="tableData" stripe style="width: 100%">
+            <el-table-column label="Order No" sortable></el-table-column>
+            <el-table-column label="Amount (RMB)" sortable></el-table-column>
+            <el-table-column label="Date" sortable></el-table-column>
+            <el-table-column label="Bank Slip File"></el-table-column>
+        </el-table><br><br>
+
+    <!-- popup add new dialog -->
+    <el-dialog align="center" :visible.sync="AddNewDialogVisible">
+        <el-form :label-position="right" label-width="150px">
+            <el-form-item label="Select bank slip : " align="left">
+                <el-upload class="upload-slip" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture">
+                <el-button size="small" type="primary">Click to upload</el-button></el-upload>
+            </el-form-item>
+            <el-form-item label="For Order No : "><el-input></el-input></el-form-item>
+            <el-form-item label="Amount : "><el-input></el-input></el-form-item>
+            <el-form-item label="Date : " align="left"><el-date-picker v-model="date" type="date" placeholder="Pick a date"></el-date-picker></el-form-item>
+        </el-form>
+        <div align="center">
+            <el-button type="text" @click="AddNewDialogVisible = false">Cancel</el-button>
+            <el-button type="primary" @click="AddNewDialogVisible = false; DoneAddNewDialogVisible = true">Submit</el-button>
+        </div>
+    </el-dialog>
+<!-- popup add new dialog end -->
+<!-- popup done upload -->
+      <el-dialog align="center" :visible.sync="DoneAddNewDialogVisible" width="30%">
+        <span>Bank Slip Successfully Updated</span><br><br>
+        <div align="center">
+            <el-button type="primary" @click="DoneAddNewDialogVisible = false">Close</el-button>
+        </div>
+      </el-dialog>
+<!-- popup done upload end -->
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+      return {
+        AddNewDialogVisible: false,
+        DoneAddNewDialogVisible: false,
+        date: ''
+      }
+    },
+    methods: {
+        handlePreview(file) {
+        console.log(file);
+      }
+    }
+}
+</script>
+
+<style>
+
+</style>
@@ -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' })
@@ -1,166 +1,324 @@
 <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>
+      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+    </div>
+    <br>
+
+    <!-- bankslip  -->
+    <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="#">
+                <img v-bind:src="booking_details.user_po_path" class="image">
+              </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="#">
+                <img v-bind:src="booking_details.china_bankslip_path" class="image">
+              </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">     
+                <img v-bind:src="booking_details.invoice_path" class="image">
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <br>
+    <!-- bank slips END --> 
+
+    <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> -->
+        <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>

-        <!-- 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 justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Payment 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 v-bind:src="booking_details.user_bankslip_path" class="image">
+          </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>
-                <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>
-        <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 {
-        font-weight: bold;
-    }
+  .booking-details {
+    font-weight: bold;
+  }
 </style>
 <script>
-    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: {
-
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
+import axios from 'axios'

+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 7,
+      loading_btn: false,
+      booking_details:{
+          id: null,
+          amount: null,
+          bia: null,
+          user_bankslip_path: null,
        }
    }
-</script>
+  },
+  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) => {
+        this.booking_details = response.data
+        loading.close()
+
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+  },
+  methods: {
+
+  }
+}
+</script>
@@ -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>
@@ -14,25 +14,195 @@
          <span>Order Details</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
        </div>
-        <el-row :gutter="12">
+        <!-- <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>
          </el-col>
-        </el-row>
+        </el-row> -->
+        <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-row justify="center" align="center">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>Banking Slip</span>
@@ -40,7 +210,7 @@
        </div>
        <el-row :gutter="12">
          <el-col :span="22" style="text-align:center">
-            <img src="http://via.placeholder.com/600x400" class="image">
+            <img v-bind:src="booking_details.user_bankslip_path" class="image">
          </el-col>
        </el-row>
      </el-card>
@@ -53,63 +223,50 @@
  }
 </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: 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,
+      loading_btn: false,
+      booking_details:{
+          id: null,
+          amount: null,
+          bia: null,
+          user_bankslip_path: null,
        }
-        ]
-      }
-    },
-    methods: {
-
-
    }
+  },
+  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) => {
+        this.booking_details = response.data
+        loading.close()
+
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+  },
+  methods: {
+
  }
-</script>
+}
+</script>
@@ -0,0 +1,324 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Processing Invoice</h4>
+      <br>
+      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+    </div>
+    <br>
+
+    <!-- bankslip  -->
+    <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="#">
+                <img v-bind:src="booking_details.user_po_path" class="image">
+              </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="#">
+                <img v-bind:src="booking_details.china_bankslip_path" class="image">
+              </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">     
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">   
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <br>
+    <!-- bank slips END --> 
+
+    <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> -->
+        <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>Payment 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 v-bind:src="booking_details.user_bankslip_path" 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/ProgressTrack'
+import axios from 'axios'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 6,
+      loading_btn: false,
+      booking_details:{
+          id: null,
+          amount: null,
+          bia: null,
+          user_bankslip_path: 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/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: {
+
+  }
+}
+</script>
@@ -1,151 +1,324 @@
 <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>
+      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+    </div>
+    <br>
+
+    <!-- bankslip  -->
+    <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="#">
+                <img v-bind:src="booking_details.user_po_path" class="image">
+              </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="#">
+                <img v-bind:src="booking_details.china_bankslip_path" class="image">
+              </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">     
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">   
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <br>
+    <!-- bank slips END --> 
+
+    <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> -->
+        <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>

-        <!-- 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 justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Payment 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 v-bind:src="booking_details.user_bankslip_path" class="image">
+          </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>
-                <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>
-        <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 {
-        font-weight: bold;
-    }
+  .booking-details {
+    font-weight: bold;
+  }
 </style>
 <script>
-    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: {
-
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
+import axios from 'axios'

+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 6,
+      loading_btn: false,
+      booking_details:{
+          id: null,
+          amount: null,
+          bia: null,
+          user_bankslip_path: null,
        }
    }
-</script>
+  },
+  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) => {
+        this.booking_details = response.data
+        loading.close()
+
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+  },
+  methods: {
+
+  }
+}
+</script>
@@ -1,11 +1,9 @@
 <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>
-      <br>
-      <h5> ETA :  3 days 14 Hours </h5>
+      <h4 style="margin-top:5%;">Bankin Slip Aprroved <br><br> Transfer In Progress</h4>
      <br>
      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
    </div>
@@ -16,25 +14,195 @@
          <span>Order Details</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
        </div>
-        <el-row :gutter="12">
+        <!-- <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>
          </el-col>
-        </el-row>
+        </el-row> -->
+        <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-row justify="center" align="center">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>BankinSlip</span>
@@ -42,7 +210,7 @@
        </div>
        <el-row :gutter="12">
          <el-col :span="22" style="text-align:center">
-            <img src="http://via.placeholder.com/600x400" class="image">
+            <img v-bind:src="booking_details.user_bankslip_path" class="image">
          </el-col>
        </el-row>
      </el-card>
@@ -55,63 +223,50 @@
  }
 </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: 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,
+      loading_btn: false,
+      booking_details:{
+          id: null,
+          amount: null,
+          bia: null,
+          user_bankslip_path: null,
        }
-        ]
-      }
-    },
-    methods: {
-
-
    }
+  },
+  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) => {
+        this.booking_details = response.data
+        loading.close()
+
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+  },
+  methods: {
+
  }
-</script>
+}
+</script>
@@ -1,102 +1,242 @@
 <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 purchase order </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_btn" 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 v-bind:src="booking_details.china_bankslip_path" class="image">
+              </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>
+                <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">

-        <!-- 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 v-bind:action="'/api/booking/' + booking_id + '/upload-po'" 
-                        :on-exceed="handleExceed"
-                        :on-preview="handlePreview" 
-                        :on-remove="handleRemove"
-                        multiple>
-                        <i class="el-icon-upload"></i>
-                        <div class="el-upload__text">Drop file here or
-                            <em>click to upload</em>
+              <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>
-                        <div class="el-upload__tip" slot="tip">jpg/png/pdf files with a size less than 3mb</div>
-                    </el-upload>
+                      </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-card>
+    </el-row>
+    <br>

-                    <br>
-
-                    <div class="bottom clearfix" style="text-align:right;">
-                        <el-button @click="uploadPo" :loading="loading" 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 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 v-bind:src="booking_details.user_bankslip_path" class="image">
+          </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>
-                <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>
-        <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 {
@@ -104,101 +244,89 @@
    }
 </style>
 <script>
-    import VueCountdown from '@dmaksimovic/vue-countdown'
-    import ProgressTrack from '~/components/ProgressTrack'
-    import axios from 'axios'
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
+import axios from 'axios'

-    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: ''
-                }]
-            }
-        },
-        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 }？`);
-            }
-        }
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      booking_id: this.$route.params.id,
+      status: 5,
+      loading_btn: false,
+      booking_details:{
+        id: null,
+        amount: null,
+        bia: null,
+        user_bankslip_path: null,
+        china_bankslip_path: null,
+      }
    }
-</script>
+  },
+  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) => {
+        this.booking_details = response.data
+        loading.close()
+
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+  },
+  methods: {
+    uploadPo () {
+      this.loading_btn = 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_btn = false
+        }).catch((error) => {
+            this.$message({
+              showClose: true,
+              message: 'Please upload purchase order',
+              type: 'error',
+              duration: 30000
+            })
+          this.loading_btn = 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>
@@ -1,8 +1,17 @@
 <template>
  <el-main>
-    <progress-track v-model="status"></progress-track>
+    <progress-track v-model="status"/>

-    <div align="center">
+    <div align="center" v-if="booking.user_bankslip_path">
+      <h4 style="margin-top:5%" >
+        Your Bankslip Has Been Rejected, Please Reupload Your Bankslip <br>
+        Reason : {{ booking.reject_reason }}
+      </h4>
+      <br>
+      <br>
+    </div>
+
+     <div v-else align="center">
      <h4 style="margin-top:5%;">Waiting For Payment</h4>
    </div>

@@ -26,10 +35,8 @@
    </el-row>
    <br>

-
    <!-- action="https://jsonplaceholder.typicode.com/posts/" -->

-
    <div align="center">

      <vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
@@ -39,11 +46,9 @@
    </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 +61,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" :loading="loading" @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 +83,6 @@
    <!-- </el-form-item>
    </el-form> -->

-
-
  </el-main>
 </template>
 <style>
@@ -88,151 +91,153 @@
  }
 </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,
-        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()
-
-          if(this.booking.timeout < 0 ){
-              this.$message({
-              showClose: true,
-              message: 'Booking timeout, please make another booking.',
-              type: 'error',
-              duration: 30000,
-            });
-            this.$router.push({
-              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'
-        })
+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: ''
      },
-      handleRemove(file, fileList) {
-        console.log(file, fileList)
+      booking: {
+        amount: '',
+        bankin_amount: '',
+        timeout: 1,
+        user_bankslip_path: null,
+        reject_reason: null,
      },
-      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
-            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.loading = false
-            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
-      },
-
+      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
+
+        if (response.data.user_bankslip_path)
+        {
+          this.booking.user_bankslip_path = response.data.user_bankslip_path
+          this.booking.reject_reason = response.data.reject_reason
+        }
+
+        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: '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)
+        })
+    },
+    handleTimeExpire () {
+      alert('Booking expired')
+    },
+    startTimer () {
+      this.start = true
+    }
+
  }
-</script>
+}
+</script>
@@ -57,7 +57,7 @@
        <div class="grid-content bg-purple" align="left">X1 :</div>
      </el-col>
      <el-col>
-        <div class="grid-content bg-purple" align="center">1.56</div>
+        <div class="grid-content bg-purple" align="center">1.70</div>
      </el-col>
      <el-col>
        <div class="grid-content bg-purple" align="center">1.64</div>
@@ -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 -->
@@ -241,15 +241,14 @@
        <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 type="text" slot-scope="scope" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> {{scope.row.id}}</el-button>
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> {{ scope.row.id }}</el-button>
          </el-table-column>
          <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
-         <el-table-column  label="Term" prop="term" :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" width="100" :filter-method="filterHandler">
-        </el-table-column> -->
+          <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
          <el-table-column label="Rate" width="74" prop="rate" />
          <el-table-column label="Amount" prop="amount" justify="center" width="110" />
          <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount"
-            prop="transfer_amount" width="170" />
+                           prop="transfer_amount" width="170" />
          <!-- <el-table-column label="ETA" sortable width="100"/> -->
          <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
        </el-table-column> -->
@@ -267,8 +266,8 @@
          <!-- <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 type="text" slot-scope="scope" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> View Status </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>
@@ -287,247 +286,250 @@
  }
 </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: [
-        ],
-        bookingConfirmTable: {
-          date: 'undefined',
-          marking: 'undefined',
-          payment_method: 'undefined',
-          amount: 'undefined',
-          service_charge: 'undefined',
-          rate: 'undefined',
-          bankin_amount: 'undefined',
-          china_beneficiary: 'undefined',
-          status: 2
-        }
+        label: 'RMB'
+      }],
+      options2: [{
+        value2: 'MYR',
+        label2: 'MYR'
+      }],
+      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.data
+        // loading.close()
+      }).catch((error) => {
+        // loading.close()
+        // this.$router.push({
+        //   name: 'notfound'
+        // })
+      })
+  },
+  methods: {
+    // TODO fetch booking data on load
+    formatter (row, column) {
+      return row.address
    },
-    mounted(){
-      axios
-        .get('/api/booking/')
+    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.bookingTable = response.data
-              
-          //loading.close()
-        }).catch((error) => {
-          // console.log(error)
-          // loading.close()
-          // this.$router.push({
-          //   name: 'notfound'
-          // })
+          this.list = response.data
        })
    },
-    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;
+    // 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)
-            return
-          })
-      },
-      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 }
-            })
-
-          case 2:
-              this.$router.push({
-              name: 'booking.confirmation',
-              params: {id: booking_id  }
-            })
-            break;
-          case 3:
-           this.$router.push({
-              name: 'booking.transfer',
-              params: {id: booking_id  }
-            })
-            break;
-          case 4:
-           this.$router.push({
-              name: 'booking.user.uploadpo',
-              params: {id: booking_id  }
-            })
-            break;
-
-          case 5:
-            this.$router.push({
-              name: 'booking.user.pocomplete',
-              params: {id: booking_id  }
-            })
-            break;
-
-          case 6:
-            this.$router.push({
-              name: 'booking.complete',
-              params: {id: booking_id  }
-            })
-            break;
-          default:
-            break
-        }
-      }
+      })
    },
+    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.po',
+            params: {id: booking_id }
+          })
+          break
+
+        case 7:
+          this.$router.push({
+            name: 'booking.user.complete',
+            params: {id: booking_id }
+          })
+          break
+
+        default:
+          break
+      }
+    }
  }
-</script>
+}
+</script>
@@ -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>
@@ -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>
@@ -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="TimeLimitDialogVisible = true">Update Time Limit</el-button>
+        </el-form-item>
+    </el-form>
+    <el-dialog title="Time Limit" align="center" :visible.sync="TimeLimitDialogVisible" width="30%">
+        <span>Time limit for customer bank slip submission is updated</span>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="TimeLimitDialogVisible = false">Cancel</el-button>
+            <el-button type="primary" @click="TimeLimitDialogVisible = 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="CreditLimitDialogVisible = true">Update Credit Limit</el-button>
+        </el-form-item>
+    </el-form>
+    <el-dialog title="Credit Limit" align="center" :visible.sync="CreditLimitDialogVisible" width="30%">
+        <span>Credit limit for Customer Booking is updated</span>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="CreditLimitDialogVisible = false">Cancel</el-button>
+            <el-button type="primary" @click="CreditLimitDialogVisible = false">OK</el-button>
+        </span>
+    </el-dialog>
+</div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        TimeLimitDialogVisible: false,
+        CreditLimitDialogVisible: false
+      };
+    },
+  };
+</script>
@@ -0,0 +1,98 @@
+<template>
+<div>
+  <span align="center"><h4>Supplier 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>
@@ -4,9 +4,8 @@
      <card :title="$t('settings')" class="settings-card">
        <ul class="nav flex-column nav-pills">
          <li v-for="tab in tabs" :key="tab.route" class="nav-item">
-            <router-link :to="{ name: tab.route }" class="nav-link" active-class="active">
-              <fa :icon="tab.icon" fixed-width/>
-              {{ tab.name }}
+            <router-link v-if="(role == tab.role)" :to="{ name: tab.route }" class="nav-link" active-class="active">
+              <fa :icon="tab.icon" fixed-width/> {{ tab.name }}
            </router-link>
          </li>
        </ul>
@@ -22,30 +21,63 @@
 </template>

 <script>
-export default {
-  middleware: 'auth',
+  import {
+    mapGetters
+  } from 'vuex'
+  export default {
+    middleware: 'check-auth',

-  computed: {
-    tabs () {
-      return [
-        {
-          icon: 'user',
-          name: this.$t('profile'),
-          route: 'settings.profile'
-        },
-        {
-          icon: 'lock',
-          name: this.$t('password'),
-          route: 'settings.password'
-        }
-      ]
+    computed: {
+      role() {
+        return this.$store.getters['auth/role']
+      },
+      tabs() {
+        return [{
+            icon: 'user',
+            name: this.$t('profile'),
+            route: 'settings.profile',
+            role: 'member'
+          },
+          {
+            icon: 'lock',
+            name: this.$t('password'),
+            route: 'settings.password',
+            role: 'member'
+          },
+          {
+            icon: 'user',
+            name: this.$t('Supplier'),
+            route: 'settings.admin-supplier',
+            role: 'admin'
+          },
+          {
+            icon: 'cog',
+            name: this.$t('Credit Setting'),
+            route: 'settings.admin-credit-setting',
+            role: 'admin'
+          },
+          {
+            icon: 'flag',
+            name: this.$t('CIEF China Bank'),
+            route: 'settings.admin-china-bank',
+            role: 'admin'
+          },
+          {
+            icon: 'building',
+            name: this.$t('Bank Setting'),
+            route: 'settings.admin-bank-setting',
+            role: 'admin'
+          },
+        ]
+      }
    }
+
+
  }
-}
 </script>

 <style>
-.settings-card .card-body {
-  padding: 0;
-}
-</style>
+  .settings-card .card-body {
+    padding: 0;
+  }
+</style>
@@ -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)
@@ -9,6 +9,10 @@ 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)

 // Booking
 const Upload = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
@@ -17,9 +21,22 @@ const Transfer = () => import('~/pages/booking/transfer').then(m => m.default ||
 const UploadPo = () => import('~/pages/booking/uploadPo').then(m => m.default || m)
 const PoComplete = () => import('~/pages/booking/poComplete').then(m => m.default || m)
 const Completed = () => import('~/pages/booking/completed').then(m => m.default || m)
+const PurchaseOrder = () => import('~/pages/booking/po').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 adminCompleted = () => import('~/pages/admin/booking/completed').then(m => m.default || m)
+// const Completed = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)

+// Admin pages
 const AdminHome = () => import('~/pages/admin/home').then(m => m.default || m)
+const AdminCompleteOrder = () => import('~/pages/admin/complete-order').then(m => m.default || m)
+const TransactionHistory = () => import('~/pages/admin/transaction-history').then(m => m.default || m)
+const UploadSupplierBankSlip = () => import('~/pages/admin/upload-supplier-bank-slip').then(m => m.default || m)

 export default [
  { path: '/', name: 'welcome', component: Welcome },
@@ -34,18 +51,34 @@ 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: '/booking/:id/po', name: 'booking.user.po', component: PurchaseOrder },
+  { path: '/booking/:id/complete', name: 'booking.user.complete', component: Completed },

+  // 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/admin/complete', name: 'booking.admin.complete', component: adminCompleted },

+  // Admin pages
  { path: '/admin', name: 'admin.home', component: AdminHome },
-  { path: '*', name:'notfound', component: NotFound }
+  { path: '/admin/complete-order', name: 'admin.complete', component: AdminCompleteOrder },
+  { path: '/admin/transaction-history', name: 'admin.transaction-history', component: TransactionHistory },
+  { path: '/admin/upload-supplier-bank-slip', name: 'admin.upload-supplier-bank-slip', component: UploadSupplierBankSlip },
+  { path: '*', name: 'notfound', component: NotFound }
 ]
@@ -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')
@@ -42,12 +42,13 @@ Route::group(['middleware' => 'auth:api'], function () {
 	Route::post('booking/{book_id}/reject-bank-slip','BookingController@rejectBankSlip');
 	Route::post('booking/{book_id}/approve-bank-slip','BookingController@approveBankSlip');
    Route::post('booking/{book_id}/cancel', 'BookingController@cancel');
-    Route::get('/booking', 'BookingController@index');
+   	Route::get('/booking', 'BookingController@index'); 
 	Route::get('/user', 'UserController@show');
-});

 	Route::patch('settings/profile', 'Settings\ProfileController@update');
 	Route::patch('settings/password', 'Settings\PasswordController@update');
+});
+


 Route::group(['middleware' => 'guest:api'], function () {
@@ -60,13 +61,17 @@ Route::group(['middleware' => 'guest:api'], function () {
 	Route::get('oauth/{driver}/callback', 'Auth\OAuthController@handleProviderCallback')->name('oauth.callback');
 });

-Route::group(['middleware' => 'role:admin'], function() {
-
-	Route::post('booking/{id}/upload-invoice', 'BookingController@uploadInvoice');		
+Route::group(['middleware' => ['role:admin']], function() {
+	Route::get('admin/booking/', 'BookingController@adminIndex');
+	Route::get('admin/booking/{id}', 'BookingController@adminShow');

 	Route::post('update-rate', 'RateController@store');
 	Route::put('update-rate/{rate}', 'RateController@update');
 	Route::delete('update-rate/{rate}', 'RateController@delete');
+	Route::get('update-rate', 'RateController@index');
+	
+	//show current rate
+	Route::get('rate', 'RateController@show');

 	Route::get('setting-credit', 'SettingCreditController@index');
 	Route::get('setting-credit/{credit}', 'SettingCreditController@show');
@@ -91,15 +96,19 @@ Route::group(['middleware' => 'role:admin'], function() {
 	Route::get('marking/{beneficiary}', 'MarkingController@show');
 	Route::put('marking/{beneficiary}', 'MarkingController@update');
 	Route::delete('marking/{beneficiary}', 'MarkingController@delete');
+
+	Route::get('supplier-booking', 'BookingSupplierController@index');
+	Route::get('supplier-booking/{id}', 'BookingSupplierController@show');
+	Route::post('supplier-booking', 'BookingSupplierController@store');
+	Route::put('supplier-booking/{id}', 'BookingSupplierController@update');
+	Route::post('/booking/{id}/confirm-supplier', 'BookingController@confirmSupplier');
+
+	Route::post('/booking/{id}/upload-china-bankslip','ChinaBankSlipController@store');
+	Route::patch('/booking/{id}/update-china-bankslip','ChinaBankSlipController@update');
+	Route::get('/booking/{id}/po', 'BookingController@showPurchaseOrder');
+	Route::post('booking/{id}/upload-invoice', 'BookingController@uploadInvoice');
+	Route::post('booking/{id}/confirm-invoice', 'BookingController@confirmInvoice');	
+	
 });

-Route::get('update-rate', 'RateController@index');
-Route::get('update-rate/{rate}', 'RateController@show');
-
-
-Route::post('upload-china-bankslip', 'ChinaBankSlipController@store');
-
-
-Route::post('booking/{id}/upload-user-bankslip', 'BookingController@uploadbankslip');
-Route::post('booking/{id}/upload-po', 'BookingController@uploadPurchaseOrder');

@@ -4,6 +4,7 @@ namespace Tests\Feature;

 use Tests\TestCase;
 use Illuminate\Foundation\Testing\WithoutMiddleware;
+use Illuminate\Foundation\Testing\DatabaseTransactions;
 use Illuminate\Database\Seeder;
 use Illuminate\Foundation\Testing\DatabaseMigrations;
 use Illuminate\Support\Facades\Storage;
@@ -16,12 +17,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 +32,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,24 +71,34 @@ 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_path = UploadedFile::fake()->image('comp.jpg');
-
-        if(!file_exists($bankslip_path)){
-            $response->assertStatus(400);
-        }
+        $size_in_kb = 3072;    // 3072KB = 3MB
+        $bankslip_path = UploadedFile::fake()->image('comp.jpg')->size($size_in_kb);

+        $response = 
        $this->actingAs($this->user)
            ->json('POST', '/api/booking/' . $this->booking->id . '/upload-user-bankslip', [
                'file' => $bankslip_path
-            ])
-            ->assertSuccessful();
+            ]);
+
+        if(!file_exists($bankslip_path) || $size_in_kb > 3072){
+            $response->assertStatus(400);    
+        }
+        else{
+            $response->assertSuccessful();
+        }
    }

    public function testUpdateBankslipAmount()
@@ -99,18 +113,22 @@ class BookingTest extends TestCase
    public function testuploadPO()
    {
        Storage::fake('file');
-        $image_path = UploadedFile::fake()->image('comp.jpg');
-
-        if(!file_exists($image_path)){
-            $response->assertStatus(400);    
-        }
+        $size_in_kb = 3072;    // 3072KB = 3MB
+        $image_path = UploadedFile::fake()->image('comp.jpg')->size($size_in_kb);
        
+        $response = 
        $this->actingAs($this->user)
            ->json('POST', '/api/booking/' . $this->booking->id . '/upload-po', [
                'file' =>  $image_path,
                'amount' => '12345'
-            ])
-            ->assertSuccessful();
+            ]);
+
+        if(!file_exists($image_path) || $size_in_kb > 3072){
+            $response->assertStatus(400);    
+        }
+        else{
+            $response->assertSuccessful();
+        }
    }

    public function testCancel()
@@ -123,7 +141,9 @@ 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();
    }

@@ -141,18 +161,22 @@ class BookingTest extends TestCase
        $this->user->roles()->sync([]);
        $this->user->attachRole(Role::Where('name','admin')->first());

+        $size_in_kb = 3072;
        Storage::fake('invoice_path');
-        $invoice_path = UploadedFile::fake()->create('document.pdf');
-
-        if(!file_exists($invoice_path)){
-            $response->assertStatus(400);    
-        }
+        $invoice_path = UploadedFile::fake()->create('document.pdf',$size_in_kb);
        
+        $response = 
        $this->actingAs($this->user)
            ->json('POST', '/api/booking/' . $this->booking->id . '/upload-invoice', [
                'invoice_path' => $invoice_path,
                'amount' => '12345'
-            ])
-            ->assertSuccessful();
+            ]);
+        
+        if(!file_exists($invoice_path) || $size_in_kb > 3072){
+            $response->assertStatus(400);    
+        }
+        else{
+            $response->assertSuccessful();
+        }
    }
 }
@@ -0,0 +1,39 @@
+<?php
+
+namespace Tests\Feature;
+
+use Tests\TestCase;
+use Illuminate\Foundation\Testing\WithFaker;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Http\UploadedFile;
+use Artisan;
+
+class ChinaBankSlipTest extends TestCase
+{
+    /**
+     * A basic test example.
+     *
+     * @return void
+     */
+    public function testStore(){
+    	Storage::fake('file');
+    	$size_in_kb = 3072;    // 3072KB = 3MB
+    	$china_bank_slips_path = UploadedFile::fake()->image('comp.jpg')->size($size_in_kb);
+        
+    	$response = 
+		$this->postJson('api/upload-china-bankslip',[
+			'china_bank_slips' => $china_bank_slips_path,
+			'actual_transfer_amount' => '12',
+			'details' => "123123",
+			'date' => "123123"
+		]);
+
+		if(!file_exists($china_bank_slips_path) || $size_in_kb > 3072){
+		    $response->assertStatus(400);    
+		}
+		else{
+		    $response->assertSuccessful();
+		}
+    }
+}
@@ -43,8 +43,8 @@ class RateTest extends TestCase
    	      'x2_ba' => '1.2'
    	  ])
    	  ->assertStatus(201);
-    }
-
+	}
+	
    public function testUpdate(){
    	$response =
    	$this->actingAs($this->user)
@@ -57,5 +57,12 @@ class RateTest extends TestCase
    	      'x2_ba' => '1.2'
    	  ])
    	  ->assertStatus(200);
+	}
+	
+    public function testShowRate(){
+	    $response = $this->json('GET', '/api/rate');
+    	$response
+        	->assertStatus(200);
    }
+
 }
@@ -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);
    }
@@ -0,0 +1,68 @@
+<?php
+
+namespace Tests\Feature;
+
+use Tests\TestCase;
+use Illuminate\Foundation\Testing\WithFaker;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use App\User;
+use App\SettingSupplier;
+use App\Role;
+use Artisan;
+
+class SettingSupplierTest extends TestCase
+{
+    protected $user;
+    protected $settingSupplier;
+
+    public function setUp(){
+    	parent::setUp();
+    	Artisan::call('db:seed');
+
+    	$this->user = factory(User::class)->create();
+    	$this->settingSupplier = factory(SettingSupplier::class)->create();
+    	$this->user->attachRole(Role::Where('name','admin')->first());
+    }
+
+    public function testStore(){
+    	$this->actingAs($this->user)
+    		->postJson('api/setting-supplier',[
+    			'company_name' => "CompanyABC",
+    			'gst_no' => "123321",
+    			'supplier_reg_no' => "12332123",
+    			'bank_name' => "maybank",
+    			'acc_no' => "1231522334"
+    		])
+    		->assertStatus(201);  
+
+    	$this->assertDatabaseHas('setting_suppliers', [
+    	       'acc_no' => '1231522334'
+    	   ]);
+    }
+
+    public function testUpdate(){
+    	$this->actingAs($this->user)
+    		->json('PUT','api/setting-supplier/' . $this->settingSupplier->id,[
+    			'company_name' => "CompanyDDEDED",
+    			'gst_no' => "gstgstgstgst",
+    			'supplier_reg_no' => "ABC12332123",
+    			'bank_name' => "Cimb bank",
+    			'acc_no' => "7030303030"
+    		])
+    		->assertStatus(200);
+    }
+
+    public function testDelete(){
+    	$id =  $this->settingSupplier->id;
+    	$this->actingAs($this->user)
+    		->json('DELETE','api/setting-supplier/' . $this->settingSupplier->id,[
+    			'id' => $this->settingSupplier->id
+    		])
+    		->assertStatus(204);
+
+    	$this->assertDatabaseMissing('setting_suppliers',[
+    		'id' => $id
+    	]);
+    }
+
+}