mergeConflict

.env-example

@@ -13,11 +13,6 @@ DB_DATABASE=default
 DB_USERNAME=default
 DB_PASSWORD=secret
 
-BROADCAST_DRIVER=log
-CACHE_DRIVER=file
-SESSION_DRIVER=file
-SESSION_LIFETIME=120
-QUEUE_DRIVER=sync
 
 REDIS_HOST=127.0.0.1
 REDIS_PASSWORD=null

.env.prod

@@ -0,0 +1,80 @@
+APP_NAME=IZYIM
+APP_ENV=production
+APP_KEY=base64:Fu2YulXExzm9HJ5LgVmZUmcbRkchHkc82q02MorN5GQ=
+APP_DEBUG=true
+APP_URL=http://localhost
+
+LOG_CHANNEL=stack
+
+DB_CONNECTION=mysql
+DB_HOST=mysql
+DB_PORT=3306
+DB_DATABASE=default
+DB_USERNAME=default
+DB_PASSWORD=secret
+
+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=mysql
+DB_PORT=3306
+DB_DATABASE=default
+DB_USERNAME=default
+DB_PASSWORD=secret
+
+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}"
+
+JWT_SECRET=FwYZ3SPFgjpEDqAwcaSIV6eEmQiMtGWt

.env.testing

@@ -0,0 +1,18 @@
+APP_ENV=phpunit
+APP_DEBUG=true
+APP_KEY=w7VQXeA7U31DCdh1U39lpRz0iD7i0oCI
+APP_URL=http://localhost
+
+DB_CONNECTION=mysql
+DB_HOST=mysql
+DB_PORT=3306
+DB_DATABASE=default
+DB_USERNAME=default
+DB_PASSWORD=secret
+
+CACHE_DRIVER=array
+SESSION_DRIVER=array
+QUEUE_DRIVER=sync
+MAIL_DRIVER=log
+
+JWT_SECRET=FwYx3SPFxjpEDxAwcaSIV6eExQiMtGWx

.gitignore

@@ -1,14 +1,14 @@
-/node_modules
+node_modules
-/public/hot
+public/hot
-/public/storage
+public/storage
-/public/js
+public/js
-/public/css
+public/css
 public/mix-manifest.json
-/storage/*.key
+storage/*.key
-/vendor/**
+vendor/**
-/.idea
+.idea
-/.vscode
+.vscode
-/.vagrant
+.vagrant
 /data
 vendor/composer
 Homestead.json
@@ -19,4 +19,5 @@ yarn-error.log
 .env.prod
 vendor/composer/autoload_static.php
 vendor/composer/autoload_classmap.php
-package-lock.json
+package-lock.json
+composer.lock

.gitlab-ci.sh

@@ -0,0 +1,35 @@
+#!/bin/bash
+
+# Install dependencies only for Docker.
+[[ ! -e /.dockerenv ]] && exit 0
+set -xe
+
+# Update packages and install composer and PHP dependencies.
+apt-get update -yqq
+apt-get install git libgd-dev libcurl4-gnutls-dev libicu-dev libmcrypt-dev libvpx-dev libjpeg-dev libpng-dev libxpm-dev zlib1g-dev libfreetype6-dev libxml2-dev libexpat1-dev libbz2-dev libgmp3-dev libldap2-dev unixodbc-dev libpq-dev libsqlite3-dev libaspell-dev libsnmp-dev libpcre3-dev libtidy-dev -yqq
+
+# Compile PHP, include these extensions.
+docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/
+docker-php-ext-install mbstring pdo_mysql curl json intl gd xml zip bz2 opcache
+
+# Install Composer and project dependencies.
+curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
+composer install
+
+# Copy over testing configuration.
+cp .env.testing .env
+
+# Install xdebug
+#pecl install xdebug && docker-php-ext-enable xdebug  
+
+# Generate an application key. Re-cache.
+php artisan key:generate
+php artisan jwt:secret
+php artisan config:cache
+php artisan config:clear
+# php artisan optimize // remove after laravel 5.6
+
+# Run database migrations with seeder
+php artisan migrate:refresh --seed
+
+

.gitlab-ci.yml

@@ -0,0 +1,34 @@
+before_script:
+  - bash .gitlab-ci.sh
+
+stages:
+  - testing
+  - staging
+
+variables:
+  MYSQL_DATABASE: default
+  MYSQL_USER: default
+  MYSQL_PASSWORD: secret
+  MYSQL_ROOT_PASSWORD: root
+
+unitTesting:
+  stage: testing
+  image: php:7.2.6
+  services:
+    - mysql:5.7
+  script:
+    - vendor/bin/phpunit --coverage-text --colors=never
+
+staging:
+  stage: staging
+  before_script:
+    - mkdir -p ~/.ssh
+    - echo -e "$SSH_PRIVATE_KEY" > ~/.ssh/id_rsa
+    - chmod 400 ~/.ssh/id_rsa
+    - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'
+  script:
+    - ssh admin@exchange-staging.izyim.com "cd exchange && git pull origin master && sudo docker-compose -f docker-prod.yml up -d"
+  environment:
+    name: staging
+    url: https://exchange-staging.izyim.com/
+  when: manual

CHANGELOG.md

@@ -1,21 +1,62 @@
 # Changelog
+### 1.0.5-alpha 2018-09-03 
+- Fixed 404 error on downloading PO format 
+- Fixed admin step 2 404 error 
+- Fixed all files 404 error 
+- Updated sorting feature
+- Added marking column to admin completed table 
 
-## 4.1.0 - 2018-03-14
+### 1.0.4-alpha 2018-08-27 
+- Updated bank setting dropdown list to [Beneficiary Name : bank name : bank account no]
+- Fixed some booking view status 404 error
+- Fixed admin completed table view status not clickable 
+- Migrated to Google Cloud  
+
+## 1.0.3-alpha - 2018-08-20
+- Added new feature - Rate is realtime now
+- Updated active bank setting now with bank account with bank name
+- Updated required field on bank setting (acc no, bank name, comp name)
+- Removed "Please key in the data in Chinese" note at bank setting 
+- Fixed completed booking showing in normal booking table 
+- Fixed booking page not found 
+- Fixed refresh button for both normal and completed booking 
+- Temporary removed notification
+- Working Progress Feature: Realtime notification, Cancel booking, Sort booking
+
+## 1.0.2-alpha - 2018-08-13
+- Added completed booking tab feature 
+- Removed login remember me checkbox
+- Updated blue report with bank name and bank branch
+- Fixed marking bug on mobile version
+- Fixed step 2 bug 
+
+## 1.0.1-alpha - 2018-08-09 
+- Fixed X2 milestone, now completed at step 5 
+- Fixed X2 no billing charge
+- Fixed forgot password bug 
+- Updated customer registration marking with auto capital feature
+- Updated admin marking setting with auto capital feature 
+- Added green report info for every page after supplier booking page 
+
+## 1.0.0-alpha - 2018-08-02
+- Release 1.0.0
+
+## 4.1.0-dev - 2018-03-14
 
 - Upgrade to Laravel 5.6
 - Update npm dependencies
 - Enabled Mix [esModule](https://github.com/JeffreyWay/laravel-mix/pull/1526#issuecomment-373044182) by default
 - Lint with eslint-plugin-vue and eslint-config-standard 
 
-## 4.0.0 - 2018-01-23
+## 4.0.0-dev - 2018-01-23
 
 - Brought back the `layout` property in pages that was removed in 3.0. By default it's set to `default` (`~/layouts/default.vue`).
 
-## 3.0.1 - 2018-01-22
+## 3.0.1-dev - 2018-01-22
 
 - Removed middleware from routes, since they don't work when you press the back button. Now you have to use the `middleware` property in pages.
 
-## 3.0.0 - 2018-01-22
+## 3.0.0-dev - 2018-01-22
 
 - Removed `layout` property from pages in favor of explicit layout components
 - Improved middleware system, you can either define it on a route or directly on a component
@@ -23,23 +64,23 @@
 - Change jwt token ttl to one day
 - Fixed  hot module replacement
 
-## 2.2.1 - 2018-01-19
+## 2.2.1-dev - 2018-01-19
 
 - Upgrade to Bootstrap 4
 
-## 2.2.0 - 2018-01-16
+## 2.2.0-dev - 2018-01-16
 
 - Added dynamic import for pages
 - Added locale with dynamic import
 - Import shakable fontawesome module
 
-## 2.1.0 - 2018-01-10
+## 2.1.0-dev - 2018-01-10
 
 - Simplifyd password reset
 - Upgrade to Bootstrap 4 beta3
 - Added oauth with popup window
 
-## 2.0.0 - 2017-12-19
+## 2.0.0-dev - 2017-12-19
 
 - Added support for Socialite
 - Added dropdown to select the locale 
@@ -52,7 +93,7 @@
 - Namespaced store modules  
 - Published project to Packagist 
 
-## 1.0.0 - 2017-09-02
+## 1.0.0-dev - 2017-09-02
 
 - Upgrade to Laravel 5.5.
 - Upgrade to Bootstrap 4 beta1.

Dockerfile

@@ -1,3 +1,11 @@
+# Build frontend assets
+# FROM node as frontend
+# WORKDIR /app
+# ADD . /app
+# RUN npm install
+# RUN npm run production
+
+# Build backend
 FROM php:7.1.3
 RUN apt-get update -y && apt-get install -y openssl zip unzip git zlib1g-dev netcat mysql-client libgd-dev libfreetype6-dev libjpeg62-turbo-dev libpng12-dev
 RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
@@ -5,13 +13,15 @@ RUN docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-di
 RUN docker-php-ext-install pdo pdo_mysql zip gd
 WORKDIR /app
 ADD . /app
-RUN chown -R www-data:www-data /app
 RUN chmod 755 /app/storage
+RUN chmod 777 -R /app/bootstrap/cache
 
 RUN composer install
 RUN php artisan clear-compiled
 
 COPY wait.sh /usr/local/bin/wait.sh
 RUN chmod +x /usr/local/bin/wait.sh
-CMD /usr/local/bin/wait.sh && composer update --no-scripts && composer dumpautoload && php artisan storage:link && php artisan migrate && php artisan serve --host=0.0.0.0 --port=8000
+
+RUN chown -R www-data:www-data /app
+CMD /usr/local/bin/wait.sh && composer update --no-scripts && composer dumpautoload  && php artisan migrate && php artisan serve --host=0.0.0.0 --port=8000
 EXPOSE 8000

LICENSE

@@ -1,21 +1,5 @@
-MIT License
+Copyright (C) CIEF Sdn Bhd - All Rights Reserved
 
-Copyright (c) 2017 Cretu Eusebiu
+Unauthorized copying of this file, via any medium is strictly prohibited
-
+Proprietary and confidential
-Permission is hereby granted, free of charge, to any person obtaining a copy
+Written by Elmer Fudd <jackgoh0@gmail.com>, August 2018
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

app/Events/RateUpdated.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Events;
+
+use Illuminate\Broadcasting\Channel;
+use Illuminate\Queue\SerializesModels;
+use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Broadcasting\PresenceChannel;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
+use App\Rate;
+
+class RateUpdated implements ShouldBroadcast
+{
+    use Dispatchable, InteractsWithSockets, SerializesModels;
+
+    public $rate;
+
+    /**
+     * Create a new event instance.
+     *
+     * @return void
+     */
+    public function __construct(Rate $rate)
+    {
+        $this->rate  = $rate;
+    }
+
+    /**
+     * Get the channels the event should broadcast on.
+     *
+     * @return \Illuminate\Broadcasting\Channel|array
+     */
+    public function broadcastOn()
+    {
+        return new Channel('rate-updated');
+        //return new PrivateChannel('rate-updated');
+    }
+
+    public function broadcastWith() {
+        return [
+          'rate' => $this->rate,
+        ];
+      }
+
+}

app/Http/Controllers/Auth/ForgotPasswordController.php

@@ -26,9 +26,16 @@ class ForgotPasswordController extends Controller
      * @param  string  $response
      * @return \Illuminate\Http\RedirectResponse
      */
-    protected function sendResetLinkEmail($response)
+    protected function sendResetLink(Request $request)
     {   
-        return ['status' => trans($response)];
+        if($request->input('email')) {
+            $this->sendResetLinkEmail($request);
+        }
+        
+        return response()->json([
+            'error' => false,
+            'status' => 'We have sent reset password link to '. $request->input('email')
+        ]);
     }
 
     /**

app/Http/Controllers/Auth/OAuthController.php

@@ -8,6 +8,8 @@ use App\Http\Controllers\Controller;
 use App\Exceptions\EmailTakenException;
 use Laravel\Socialite\Facades\Socialite;
 use Illuminate\Foundation\Auth\AuthenticatesUsers;
+use Tymon\JWTAuth\Facades\JWTAuth;
+use Tymon\JWTAuth\Exceptions\JWTException;
 
 class OAuthController extends Controller
 {

app/Http/Controllers/Auth/RegisterController.php

@@ -46,7 +46,6 @@ class RegisterController extends Controller
     protected function validator(array $data)
     {
         return Validator::make($data, [
-            'name' => 'required|name|max:255',
             'marking' => 'required|max:255|unique:markings',
             'email' => 'required|email|max:255|unique:users',
             'password' => 'required|min:6|confirmed',
@@ -61,12 +60,17 @@ class RegisterController extends Controller
      */
     protected function create(Request $data)
     {
+        $this->validate($data, [
+            'email' => 'required|email|max:255|unique:users',
+            'password' => 'required|min:6|confirmed',
+        ]);
+
         $marking = Marking::Where('email',$data['email'])->first();
 
         if(!$marking){
             return response()->json(["message"=>"Marking does not exist, please contact sales team to get one"], 400);
         }
-        if($marking->marking != $data['marking']){
+        if($marking->marking != strtoupper($data['marking'])){
             return response()->json(["message"=>"Incorrect marking"], 400);   
         }
         
@@ -78,7 +82,7 @@ class RegisterController extends Controller
         $user = new User();
         $user->name = $data['name'];
         $user->email = $data['email'];
-        $user->marking = $marking->marking;
+        $user->marking =  $marking->marking;
         $user->password = bcrypt($data['password']);
 
         $user->save();

app/Http/Controllers/BookingController.php

@@ -13,6 +13,7 @@ use App\Invoice;
 use App\SettingCredit;
 use App\SettingTaxRate;
 use App\SettingBillingCharge;
+use App\Notification;
 use Auth;
 use Validator;
 use DateTime;
@@ -22,10 +23,30 @@ class BookingController extends Controller
 
     public function index(){
 		$user = Auth::user();
-        $bookings = Booking::select('user_id', 'id', 'created_at', 'status', 'rate', 'term', 'amount', 'bia', 'verification_status')
+        $bookings = Booking::select('user_id', 'id', 'created_at', 'is_cancel', 'status', 'rate', 'term', 'amount', 'bia', 'verification_status')
-                                    ->where('user_id', $user->id)
+                                    ->where('user_id', Auth::user()->id)
+                                    ->where('is_cancel', 0)
+                                    ->where(function ($query) {
+                                        $query->where(function($query){
+                                            $query->where('status', '<', '5')
+                                            ->where(function ($query) {
+                                                $query->where('term', '=', 'x2_cheque')
+                                                ->orwhere('term', '=', 'x2_ba')
+                                                ->orwhere('term', '=', 'x2_cash');
+                                                });
+                                        })
+                                        ->orwhere(function ($query) {
+                                            $query->where('status', '<', '7')
+                                                ->where(function ($query) {
+                                                    $query->where('term', '=', 'x1_cheque')
+                                                    ->orwhere('term', '=', 'x1_ba')
+                                                    ->orwhere('term', '=', 'x1_cash');
+                                                });
+                                            });
+                                        })     
                                     ->orderby('updated_at','desc')
                                     ->paginate(10);
+                                
 
         // reformat to fit frontend structure 
         foreach ($bookings as $booking) {
@@ -45,6 +66,11 @@ class BookingController extends Controller
             $booking->transfer_amount = $booking->bia; 
             
             $booking->track_status = "(". $booking->status ."/7)";
+
+            if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba"){
+                $booking->track_status = "(". $booking->status ."/5)";
+            }
+            
             switch ($booking->status) {
                 case 1:
                     $status_desc = "Order in progress"; 
@@ -70,17 +96,104 @@ class BookingController extends Controller
                 default:
                     $status_desc = "";
             }
+            $booking->status_desc = $status_desc;
             $booking->marking = $booking->user->marking;
         }
        
         return $bookings;
 	}
+    
+    public function userComplete(){
+		$user = Auth::user();
+        $bookings = Booking::select('user_id', 'id', 'created_at', 'status', 'rate', 'term', 'amount', 'bia', 'verification_status')
+                                    ->where('user_id', Auth::user()->id)
+                                    ->where('status', '=', '5')
+                                    ->where(function ($query) {
+                                        $query->where('term', '=', 'x2_cash')
+                                           ->orwhere('term', '=', 'x2_cheque')
+                                           ->orwhere('term', '=', 'x2_ba');
+        })
+                                    ->orwhere('status', '=', '7')
+                                    ->where(function ($query) {
+                                        $query->where('term', '=', 'x1_cash')
+                                           ->orwhere('term', '=', 'x1_cheque')
+                                           ->orwhere('term', '=', 'x1_ba');
+        })
+                                    ->orderby('updated_at','desc')
+                                    ->paginate(10);
+
+        // reformat to fit frontend structure 
+        foreach ($bookings as $booking) {
+            // set timeout 
+            $date1 = new DateTime($booking->created_at);
+            $date2 = new DateTime();
+            $time_in_seconds = SettingCredit::orderby('updated_at','desc')->first()->time_limit;
+            $difference_in_seconds = ($date1->format('U') + $time_in_seconds) - ($date2->format('U'));
+            $booking->timeout = $difference_in_seconds; 
+
+            // TODO : you can make it better
+            if($difference_in_seconds < 0 ){
+                $booking->timeout = 0;
+            }
+
+            // TODO : transfer_amount change name to bia 
+            $booking->transfer_amount = $booking->bia; 
+            
+            $booking->track_status = "(". $booking->status ."/7)";
+
+            // all x2 until step 5 only
+            if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba") {
+                $booking->track_status = "(". $booking->status ."/5)";
+            }
+
+            switch ($booking->status) {
+                case 1:
+                    $status_desc = "Order in progress"; 
+                    break;
+                case 2:
+                    $status_desc = "Waiting for payment";  
+                    break;    
+                case 3:
+                    $status_desc = "Waiting verification";    
+                    break;  
+                case 4:
+                    $status_desc = "Processing transfer"; 
+                    break;
+                case 5:
+                    $status_desc = "Transfer Complete, please upload your PO"; 
+                    if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba"){
+                        $status_desc = "Order Completed";
+                    }
+                    break;
+                case 6:
+                    $status_desc = "Processing invoice"; 
+                    break;
+                case 7:
+                    $status_desc = "Order Completed"; 
+                    break;
+                default:
+                    $status_desc = "";
+            }
+            $booking->status_desc = $status_desc;
+            $booking->marking = $booking->user->marking;
+        }
+       
+        return $bookings;
+    }
 	
 	public function adminIndex(){
 		$user = Auth::user(); 
 		$bookings = Booking::select('user_id', 'id', 'created_at', 'admin_status', 'rate', 'term', 'amount', 'bia', 'verification_status')
-        ->orderby('updated_at','desc')
+        ->where('admin_status', '<', '6')
-        ->paginate(30);
+        ->orwhere(function ($query) {
+            $query->where('admin_status', '=', '6')
+            ->where('term', '!=', 'x2_cheque')
+            ->where('term', '!=', 'x2_ba')
+            ->where('term', '!=', 'x2_cash');
+            })
+                
+            ->orderby('updated_at','desc')
+            ->paginate(30);
 
 			// reformat to fit frontend structure 
 			foreach ($bookings as $booking) {
@@ -100,9 +213,8 @@ class BookingController extends Controller
 				$booking->transfer_amount = $booking->bia; 
 		
                 $term = $booking->term;
-                if($term == "x1_ba" || $term == "x2_cheque"){
+                if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba"){
-                    $status = $booking->admin_status > 2 ? $booking->admin_status - 2 : $booking->admin_status;
+                    $booking->track_status = "(". $booking->admin_status ."/6)";
-                    $booking->track_status = "(". $status ."/5)";
                 }
                 else{
 				    $booking->track_status = "(". $booking->admin_status ."/7)";
@@ -116,20 +228,19 @@ class BookingController extends Controller
 						$status_desc = "Verify user bank slip";  
 						break;    
 					case 3:
-                        if($term !== "x1_ba" || $term !== "x2_cheque"){
+                        $status_desc = "Generate supplier booking report";    
-                            $status_desc = "Generate supplier booking report";    
+                        break;  
-                            break;  
-                        }
 					case 4:
-                        if($term !== "x1_ba" || $term !== "x2_cheque"){
+                        $status_desc = "Supplier booking report. Please confirm with your booking."; 
-    						$status_desc = "Supplier booking report. Please confirm with your booking."; 
+                        break;
-    						break;
-                        }
 					case 5:
 						$status_desc = "Please, upload China Bankslip"; 
 						break;
-					case 6:
+                    case 6:
-						$status_desc = "Waiting customer to upload purchase order"; 
+                        $status_desc = "Waiting customer to upload purchase order"; 
+                        if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba"){
+                            $status_desc = "Order Completed";
+                        }
                         break;
                     case 7:
 						$status_desc = "Customer has uploaded purchase order, please upload invoice"; 
@@ -146,19 +257,98 @@ class BookingController extends Controller
 			return $bookings;
 	}
 
+    public function adminBookComplete(){
+		$user = Auth::user(); 
+		$bookings = Booking::select('user_id', 'id', 'created_at', 'admin_status', 'rate', 'term', 'amount', 'bia', 'verification_status')
+        ->where('admin_status', '=', '6')
+        ->where(function ($query) {
+                $query->where('term', '=', 'x2_cash')
+                ->orwhere('term', '=', 'x2_cheque')
+                ->orwhere('term', '=', 'x2_ba');
+        })
+        ->orwhere('admin_status', '=', '7')
+        ->where(function ($query) {
+                $query->where('term', '=', 'x1_cash')
+                ->orwhere('term', '=', 'x1_cheque')
+                ->orwhere('term', '=', 'x1_ba');
+        })
+        ->orderby('updated_at','desc')
+        ->paginate(10);    
+			// 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; 
+		
+                $term = $booking->term;
+                if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba"){
+                    $booking->track_status = "(". $booking->admin_status ."/6)";
+                }
+                else{
+				    $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"; 
+                        if ($booking->term == "x2_cash" || $booking->term == "x2_cheque" || $booking->term == "x2_ba"){
+                            $status_desc = "Order Completed";
+                        }
+                        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->marking = $booking->user->marking;
+				$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()->get();
-        $po = $booking->purchaseOrder()->first();
-        $invoice = $booking->invoice()->first();
 
 		if($booking){
 
             $date1 = new DateTime($booking->created_at);
             
+            $user_bankslip = $booking->userBankSlip()->first();
+            $china_bankslip = $booking->chinaBankSlip()->get();
+            $po = $booking->purchaseOrder()->first();
+            $invoice = $booking->invoice()->first();
+
             if ($user_bankslip){
                 $booking->user_bankslip_path = Storage::url($user_bankslip->bankslip_path);
                 $booking->reject_reason = $user_bankslip->reject_reason;
@@ -193,7 +383,10 @@ class BookingController extends Controller
             }
 
             return $booking;
-		}
+        }
+        else{
+            return response()->json(['success'=>false, 'message'=>'Booking not found'], 404);
+        }
     }
 
 	public function adminShow($id)
@@ -248,7 +441,9 @@ class BookingController extends Controller
         $term = $request->input('term');
         $amount = $request->input("amount");    // in RMB
         $rates = Rate::orderby('updated_at','desc')->first();
-		$creditLimit = SettingCredit::orderby('updated_at','desc')->first();
+        $creditLimit = SettingCredit::orderby('updated_at','desc')->first();
+        $taxrate = SettingTaxRate::latest()->first()->tax_rate;
+        $billingChargeRate = SettingBillingCharge::latest()->first()->billing_charge_rate;
 
 		if (!$creditLimit){
 			return response()->json("Credit limit not set, please contact admin", 405);
@@ -289,41 +484,49 @@ class BookingController extends Controller
                 break;
         }
         
-        // Service charge (RMB) : if amount higher than 10,000, no service charge. if amount lower than 10,000, 20.00 service charge
+        // Service charge (RMB) : if amount higher than 10,000 or term x2 no service charge. 
-         if ($amount >= 10000 && ($term == 'x2_cash' || $term = 'x2_cheque' || $term = 'x2_ba')) {
+        if ($amount >= 10000 && ($term == 'x2_cash' || $term == 'x2_cheque' || $term == 'x2_ba')) {
             $svcharge = 0;
         } else {
             $svcharge = 20.00;
+            //$svcharge = 0; // UPDATE ON : 15-8-2018 from PM
         }
-
+       
-        // initial rmb to myr amount 
+        $subtotal = round(($amount + $svcharge) / $rate, 2);
-        $RMBinMYR = (($amount + $svcharge) / $rate);
+        
-
+        // TODO : refactor 
-        // TODO : Should be remove this ? 
+        if ($taxrate !=0){
-        // gst 0% 
+           $taxAmount = round($subtotal * $taxrate - $subtotal, 2);
-        $gst = 0 * $RMBinMYR;
+        }
-
+        else{
-        // Sales tax : 10 % 
+            $taxAmount = 0;
-        $sales_tax = 0.10 * $RMBinMYR;
+        }
-
+        
-        // Billing fees : 1.5%
+        if ($term == 'x2_cash' || $term == 'x2_cheque' || $term == 'x2_ba'){
-        $billing = 0.015 * $RMBinMYR;
+            $billingChargeAmount = 0;
-
+        }
-        // Bank in amount
+        else{
-        $bia = round($RMBinMYR + $gst + $sales_tax + $billing, 2);
+            // TODO : billing charge rate to percentage so we do not need to minus amount + svcharge
-
+            $billingChargeAmount = round((($amount / $rate) * $billingChargeRate) - ($amount / $rate), 2);
+        }
+        
+        
+ 
+        $bankin_amount = round($subtotal + $taxAmount + $billingChargeAmount , 2);
         $booking = new Booking();
         $booking->account_name = $request->input('account_name');
         $booking->account_num = $request->input('account_num');
         $booking->bank_name = $request->input('bank_name');
         $booking->bank_branch = $request->input('bank_branch');
         $booking->amount = $request->input('amount');
+        $booking->order_no = $request->input('order_no');
+        $booking->payment_for = $request->input('payment_for');
         $booking->term = $term;
         $booking->rate_id = $rates->id;
         $booking->rate = $rate; 
-        $booking->rmb_book_amount = $request->input('amount');
+        $booking->rmb_book_amount = $request->input('amount'); // BIG TODO : amount change variable name to rmb_book_amount 
         $booking->status = 2; 
-        $booking->bia = $bia;
+        $booking->bia = $bankin_amount; // BID TODO : change bia viariable name 
         // $booking->user_id = $user->id;
         $booking->user()->associate($user);
        
@@ -350,8 +553,9 @@ class BookingController extends Controller
         // $booking->usd_book_cnap = $request->input('usd_book_cnap');
         // $booking->usd_book_bank_branch = $request->input('usd_book_bank_branch');
         // $booking->verification_status = $request->input('verification_status');
+        // return response()->json($booking, 201);
         $booking->save();
-        //return response()->json('error', 400);
+        // return response()->json('error', 400);
         return response()->json($booking, 201);
     }
 
@@ -392,7 +596,7 @@ class BookingController extends Controller
         }
 
         $validator = Validator::make($request->all(), [
-            'file'   => 'max:3072'
+            'file'   => 'max:10000' // image size 
         ]);
 
         if($validator->fails())
@@ -415,19 +619,26 @@ class BookingController extends Controller
                 'user_bankslip', $bankslip_file, $unique_image_path
             ); 
 
-            $user_bankslip = $booking->userBankSlip()->first();
+            if($upload_path){
+                $user_bankslip = $booking->userBankSlip()->first();
             
-            // if user bankslip not exist, create new one 
+                // if user bankslip not exist, create new one 
-            if(!$user_bankslip){
+                if(!$user_bankslip){
-                $user_bankslip = new UserBankSlip;
+                    $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' => 'File not uploaded. Please contact support'], 400);
             }
-            $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);
@@ -449,7 +660,7 @@ class BookingController extends Controller
 
         $user_bankslip->transfer_amount = $request->input('transfer_amount');
         $user_bankslip->save();
-        return response()->json(["message"=> "Success"],200);
+        return response()->json(["success"=>true],200);
     }
 
     public function uploadPurchaseOrder(Request $request, $id)
@@ -472,7 +683,7 @@ class BookingController extends Controller
             }
 
             $validator = Validator::make($request->all(), [
-                'file'   => 'max:3072'
+                'file'   => 'max:10000'
             ]);
 
             if($validator->fails())
@@ -533,10 +744,10 @@ class BookingController extends Controller
         {
             return response()->json(['message'=>'Access denied'],403);
         }
-
+        
         $booking->is_cancel = true;
         $booking->save();
-
+       
         return response()->json(['message'=>'Success'],200);
     }
 
@@ -545,6 +756,8 @@ class BookingController extends Controller
         $amount = $request->input('amount');
         $term = $request->input('term');
         $china_beneficiary = $request->input('china_beneficiary');
+        $order_no = $request->input('order_no');
+        $payment_for = $request->input('payment_for');
         $rates = Rate::orderby('updated_at','desc')->first();
         $marking = $user = Auth::user()->marking;
         $taxrate = SettingTaxRate::latest()->first()->tax_rate;
@@ -559,16 +772,15 @@ class BookingController extends Controller
         if($amount > $creditLimit->rmb_credit_limit){
             return response()->json(["message" => "Exceed credit limit, please contact our sales team for larger quantitiy"], 400);
         }
-
  
         switch ($term) {
          case "x1_cash":
              $rate = $rates->x1_cash;
-             $payment_method = "cash";
+             $payment_method = "CASH";
              break;
          case "x1_cheque":
              $rate = $rates->x1_cheque;
-             $payment_method = "Cheque";
+             $payment_method = "CHEQUE";
              break;
          case "x1_ba":
              $rate = $rates->x1_ba;
@@ -576,11 +788,11 @@ class BookingController extends Controller
              break;
          case "x2_cash":
              $rate = $rates->x2_cash;
-             $payment_method = "Cash";
+             $payment_method = "CASH";
              break;
          case "x2_cheque":
              $rate = $rates->x2_cheque;
-             $payment_method = "Cheque";
+             $payment_method = "CHEQUE";
              break;
          case "x2_ba":
              $rate = $rates->x2_ba;
@@ -594,19 +806,37 @@ class BookingController extends Controller
              break;
          }
  
-         if ($amount >= 10000 && ($term == 'x2_cash' || $term = 'x2_cheque' || $term = 'x2_ba')) {
+         if ($amount >= 10000 && ($term == 'x2_cash' || $term == 'x2_cheque' || $term == 'x2_ba')) {
              $svcharge = 0;
          } else {
              $svcharge = 20.00;
+             //$svcharge = 0; // UPDATE ON : 15-8-2018 from PM
          }
         
-         $subtotal = round($amount + $svcharge / $rate,2);
+         $subtotal = round(($amount + $svcharge) / $rate,2);
-         $taxAmount =  round($subtotal * $taxrate,2);
+         
-         $billingChargeAmount = round(($amount + $svcharge) * $billingChargeRate, 2);
+         // TODO : refactor 
+         if ($taxrate !=0){
+            $taxAmount = round($subtotal * $taxrate - $subtotal,2);
+         }
+         else{
+             $taxAmount = 0;
+         }
+         
+        if ($term == 'x2_cash' || $term == 'x2_cheque' || $term == 'x2_ba'){
+            $billingChargeAmount = 0;
+        }
+        else{
+            // TODO : billing charge rate to percentage so we do not need to minus amount + svcharge
+            $billingChargeAmount = round((($amount / $rate) * $billingChargeRate) - ($amount / $rate), 2);
+        }
+        
          $bankin_amount = round($subtotal + $taxAmount + $billingChargeAmount , 2);
  
          return response()->json([
              'date' => date('Y-m-d'),
+             'order_no' => $order_no,
+             'payment_for' => $payment_for,
              'marking' => $marking,
              'payment_method' => $payment_method,
              'china_beneficary' => $china_beneficiary,
@@ -617,6 +847,10 @@ class BookingController extends Controller
              'taxAmount' => $taxAmount,
              'billingChargeAmount' => $billingChargeAmount,
              'bankin_amount' => $bankin_amount,
+             'bank_name'=> $request->input('bank_name'),
+             'bank_branch'=> $request->input('bank_branch'),
+             'acc_name' => $request->input('acc_name'),
+             'acc_no' => $request->input('acc_no')
          ], 200);
     }
 
@@ -642,16 +876,22 @@ class BookingController extends Controller
 
         $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;
-        if($booking->term !== "x1_ba" || $booking->term !== "x2_cheque")
+        if($booking->term !== "x1_ba" || $booking->term !== "x2_cheque"){
     		$booking->admin_status = 3;
-        else
+            // TODO : Add notification message to user
+
+        }
+        else{
             $booking->admin_status = 5;
+            // TODO : Add notification message to user
+
+        }
         $booking->save();
+
         
         return response()->json(['message'=>'Success'],200);
     }
@@ -707,7 +947,7 @@ class BookingController extends Controller
             }
 
             $validator = Validator::make($request->all(), [
-                'invoice_path'   => 'max:3072'
+                'invoice_path'   => 'max:10000'
             ]);
 
             if($validator->fails())
@@ -747,6 +987,11 @@ class BookingController extends Controller
 		$booking->admin_status = 5;  // upload china bankslip 
         
         if($booking->save()){
+            // $userNotification = new Notification;
+            // $userNotification->detail = "Supplier booking report for booking " . $booking->id . " is completed.";
+            // $userNotification->link = "/booking/" . $booking->id . "/transfer";
+            // $userNotification->user_id = $booking->user_id;
+            // $userNotification->save();
             return response()->json(['message'=>"Success"],200);
         }
     }
@@ -755,16 +1000,15 @@ class BookingController extends Controller
         $booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first();
 
         $purchase_order = $booking->purchaseOrder()->first();
-        return($purchase_order);
 
         if(!$purchase_order){
             return response()->json(["message"=> "Please upload your purchase order"],400);
 		}
-		
         $booking->status = 6;  // wait invoice
         $booking->admin_status = 6; // upload invoice
         $booking->save();
-        return response()->json(['message'=>'Success'],200);
+
+        return response()->json($purchase_order,200);
     }
 
     public function confirmInvoice(Request $request, $id)
@@ -785,23 +1029,23 @@ class BookingController extends Controller
         }
     }
 
-    // public function adminShowCompletedOrders()
+    public function adminShowCompletedOrders()
-    // {
+    {
-    //     $bookings = Booking::select('id','created_at','user_id','rate','amount', 'bia', 'admin_status')
+        $bookings = Booking::select('id','created_at','user_id','rate','amount', 'bia', 'admin_status')
-    //            ->where('admin_status', 7)
+               ->where('admin_status', 7)
-    //            ->orderBy('id', 'desc')
+               ->orderBy('id', 'desc')
-    //            ->get();
+               ->get();
                
-    //     foreach ($bookings as $booking) {
+        foreach ($bookings as $booking) {
-    //         $booking->id;
+            $booking->id;
-    //         $booking->created_at;
+            $booking->created_at;
-    //         $booking->marking = $booking->user->marking;
+            $booking->marking = $booking->user->marking;
-    //         $booking->rate;
+            $booking->rate;
-    //         $booking->amount;
+            $booking->amount;
-    //         $booking->bia;
+            $booking->bia;
-    //         $booking->admin_status = "(". $booking->admin_status ."/7)";;
+            $booking->admin_status = "(". $booking->admin_status ."/7)";;
-    //     }
+        }
-    //     return $bookings;
+        return $bookings;
-    // }
+    }
 
 }

app/Http/Controllers/BookingSupplierController.php

@@ -11,6 +11,8 @@ use App\UserBankSlip;
 use App\SettingBeneficiary;
 use App\SupplierBookingItem;
 use App\SettingSupplier;
+use App\SettingTaxRate;
+use App\SettingActiveBank;
 use Illuminate\Http\Request;
 
 class BookingSupplierController extends Controller
@@ -30,15 +32,68 @@ class BookingSupplierController extends Controller
     public function show($id)
     {
         $booking = Booking::where('id', $id)->first();
+        $bankin_amount = round($booking->amount / $booking->rate, 2);
 
         if (!$booking){
             return response()->json(['message' => 'Booking not found'], 404);
         }
 
+        switch ($booking->term) {
+            case "x1_cash":  
+                $payment_method = "CASH";
+                break;
+            case "x1_cheque":
+              
+                $payment_method = "CHEQUE";
+                break;
+            case "x1_ba":
+               
+                $payment_method = "BA";
+                break;
+            case "x2_cash":
+            
+                $payment_method = "CASH";
+                break;
+            case "x2_cheque":
+                $payment_method = "CHEQUE";
+                break;
+            case "x2_ba":
+                $payment_method = "BA";
+                break;
+            default:
+                return response()->json([
+                    'success' => false,
+                    'message' => 'Invalid input',
+                ], 422);
+                break;
+            }
+
+
         $supplier_booking = $booking->supplierBooking()->first();
         $dt = new \DateTime($supplier_booking->created_at); 
         $supplier_booking->date = $dt->format('j F Y'); 
-        
+        $supplier_booking->marking = $booking->user->marking;
+        $supplier_booking->payment_for = $booking->payment_for;
+        $supplier_booking->order_no = $booking->order_no;
+        $supplier_booking->payment_method = $payment_method;
+
+        $active_bank = SettingActiveBank::first();
+
+        // if setting is set to use customer's beneficiary
+        if ($active_bank->beneficiary_id == 0){
+            $supplier_booking->acc_name = $booking->account_name;
+            $supplier_booking->acc_no = $booking->account_num; // TODO : standardize acc_no
+            $supplier_booking->bank_name = $booking->bank_name;
+            $supplier_booking->bank_branch = $booking->bank_branch;
+        }
+
+        else{
+            $beneficiary = SettingBeneficiary::find($active_bank->beneficiary_id);
+            $supplier_booking->acc_name = $beneficiary->company_name;
+            $supplier_booking->acc_no = $beneficiary->acc_no;
+            $supplier_booking->bank_name = $beneficiary->bank_name;
+            $supplier_booking->bank_branch = $beneficiary->bank_branch;
+        }
 
         return response()->json($supplier_booking ,200);
     }
@@ -47,41 +102,58 @@ class BookingSupplierController extends Controller
     // TODO : Multiple booking
     public function store(Request $request)
     {
-        $transfer_amount = $request->input("transfer_amount");
+        //$transfer_amount = $request->input("transfer_amount");
         $supplier_id = $request->input("supplier_id");
         $booking_id = $request->input("booking_id");
-        $rate = $request->input('rate');
+        $rate = $request->input('rate'); // costing 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);
 
+
+
+        // Calculation (backup)
+        // $amountInRMB = $transfer_amount * $rate;
+        // $billing = 0.015 * $transfer_amount;
+        // $sales_tax = 0.0 * $transfer_amount;
+        // $gst = 0 * $transfer_amount; // do we still need this ? 
+        // $customerBankInAmount = round($transfer_amount + $gst + $sales_tax + $billing,2);
+        // $rmbBankAmount = round($customerBankInAmount + $rebate, 2);
+
+        // Update: changes in 1.1 according to new supplier booking report
+        $transfer_amount = $booking->amount;
+   
+        $amount_in_myr = round($transfer_amount / $rate, 2);
+        $amountInRMB = $transfer_amount;
+        $tax_rate = SettingTaxRate::latest()->first()->tax_rate;
+        $sales_tax = round($tax_rate * $amount_in_myr - $amount_in_myr, 2);
+        $amount_after_tax = round($amount_in_myr * $tax_rate,2); 
+        //$billing = 0.015 * $transfer_amount;
+        //
+        //$gst = 0 * $transfer_amount; // do we still need this ? 
+        //$customerBankInAmount = round($transfer_amount + $gst + $sales_tax + $billing,2);
+        //$rmbBankAmount = round($customerBankInAmount + $rebate, 2);
+
         // update existing booking supplier if exist 
         $bookingsupplier = SupplierBooking::where('booking_id', $booking_id)->first();
 
         if (!$bookingsupplier){
             $bookingsupplier = new SupplierBooking();
-        
         }
 
         $bookingsupplier->supplier_id = $supplier->id;
-        $bookingsupplier->payment_method = $request->input('payment_method');
+        $bookingsupplier->amountInRMB = $amountInRMB; // TODO : rename to underscore
-        $bookingsupplier->transfer_amount = $transfer_amount;
+        $bookingsupplier->amount_in_myr = $amount_in_myr;
+        $bookingsupplier->tax_rate = $tax_rate;
+        $bookingsupplier->amount_after_tax = $amount_after_tax;
         $bookingsupplier->rate = $rate;
-        $bookingsupplier->billing_amount = $billing; 
+        $bookingsupplier->rebate = $rebate;  
-        $bookingsupplier->salestax_amount = $sales_tax;
+        $bookingsupplier->salestax_amount = $sales_tax;     
-        $bookingsupplier->rebate = $rebate;       
+        //$bookingsupplier->payment_method = $request->input('payment_method'); // TODO : remove from db
-        $bookingsupplier->amountInRMB = $amountInRMB;
+        //$bookingsupplier->transfer_amount = $transfer_amount; // TODO : remove from db 
-        $bookingsupplier->rmbBankAmount = $rmbBankAmount;
+        //$bookingsupplier->billing_amount = $billing; // TODO : remove from db
+       
+        //$bookingsupplier->rmbBankAmount = $rmbBankAmount; // TODO : remove from db 
         $bookingsupplier->booking_id = $booking->id;
         $bookingsupplier->save();
 
@@ -89,47 +161,12 @@ class BookingSupplierController extends Controller
 		$booking->status = 4;
 		$booking->admin_status = 4; 
         $booking->save();
+
+
     
         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();
-
-        /* For multiple booking */
-        // $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();

app/Http/Controllers/ChinaBankSlipController.php

@@ -4,6 +4,7 @@ namespace App\Http\Controllers;
 
 use App\ChinaBankSlip;
 use App\Booking;
+use App\User;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Storage;
 use Validator;
@@ -30,7 +31,7 @@ class ChinaBankSlipController extends Controller
         }
 
         $validator = Validator::make($request->all(), [
-            'china_bank_slips'   => 'max:3072'
+            'china_bank_slips'   => 'max:10000'
         ]);
         
         if($validator->fails()){

app/Http/Controllers/MarkingController.php

@@ -19,13 +19,17 @@ class MarkingController extends Controller
 
     public function store(Request $request)
     {
-        $marking = Marking::create($request->all());
+        $marking = new Marking; 
+        $marking->marking = strtoupper($request->input('marking'));
+        $marking->email = $request->input('email');
+        $marking->save();
 		
         return response()->json($marking, 201);
     }
 
     public function update(Request $request, Marking $marking)
     {
+        // TODO : update to upper case
         $marking->update($request->all());
 
         return response()->json($marking, 200);

app/Http/Controllers/NotificationController.php

@@ -0,0 +1,66 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\Notification;
+use Illuminate\Support\Facades\DB;
+use Auth;
+
+class NotificationController extends Controller
+{
+    public function index()
+    {
+        return Notification::all()->orderby('updated_at','desc');
+    }
+
+    public function show(Notification $notification)
+    {
+     	return $notification;
+    }
+
+    public function store(Request $request)
+    {
+        $notification = Notification::create($request->all());
+
+        return response()->json($notification, 201);
+    }
+
+    public function update(Request $request, Notification $notification)
+    {
+        $notification->update($request->all());
+
+        return response()->json($notification, 200);
+    }
+
+    public function delete(Notification $notification)
+    {
+        $notification->delete();
+
+        return response()->json(null, 204);
+    }
+
+    public function getUserMessage()
+    {
+        $user_all_notification = Notification::Where("user_id",Auth::user()->id)
+            ->orderby('updated_at','desc')
+            ->paginate(5);
+        $user_unread_notification = Notification::Where([["user_id",Auth::user()->id],["is_read",0]])
+            ->orderby('updated_at','desc')
+            ->get();
+
+    	return response()->json([
+    		"message"			=>$user_all_notification,
+			"unread_message"	=>$user_unread_notification
+		],200);
+    }
+
+    public function readNotification($notification_id){
+    	$affected = DB::table('notifications')
+            ->Where('id', $notification_id)
+            ->update(array('is_read' => 1));
+    	return response()->json("Read message", 200);
+    }
+
+
+}

app/Http/Controllers/SettingBeneficiaryController.php

@@ -12,8 +12,12 @@ class SettingBeneficiaryController extends Controller
         return SettingBeneficiary::all();
     }
 
-    public function show(SettingBeneficiary $beneficiary)
+    public function show($beneficiary)
     {
+        if ($beneficiary == 0){
+            response()->json(["company_name"=>"123", "account_number"=>"123"] , 201);
+        }
+        $beneficiary = SettingBeneficiary::find($beneficiary);
         return $beneficiary;
     }
 

app/Http/Kernel.php

@@ -61,6 +61,7 @@ class Kernel extends HttpKernel
         'ability' => 'App\Http\Middleware\TokenEntrustAbility',
         'role' => \Zizaco\Entrust\Middleware\EntrustRole::class,
         'permission' => \Zizaco\Entrust\Middleware\EntrustPermission::class,
+        'jwt' => \App\Http\Middleware\RefreshToken::class,
         'ability' => 'App\Http\Middleware\TokenEntrustAbility'
     ];
 }

app/Http/Middleware/TokenEntrustAbility.php

@@ -5,7 +5,7 @@ namespace App\Http\Middleware;
 use Closure;
 use Tymon\JWTAuth\Exceptions\JWTException;
 use Tymon\JWTAuth\Exceptions\TokenExpiredException;
-use Tymon\JWTAuth\Middleware\BaseMiddleware;
+use Tymon\JWTAuth\Http\Middleware\BaseMiddleware;
 
 class TokenEntrustAbility extends BaseMiddleware
 {

app/Notification.php

@@ -0,0 +1,77 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Notification extends Model
+{
+    protected $fillable = ['detail','user_id','is_read'];
+    protected $appends = ['time_interval'];
+
+    public function getTimeIntervalAttribute()
+	{
+		$created_time = $this->created_at;
+
+		date_default_timezone_set('Asia/Kuala_Lumpur'); //Change as per your default time
+        $str = strtotime($created_time);
+        $today = strtotime(date('Y-m-d H:i:s'));
+
+        // It returns the time difference in Seconds...
+        $time_differnce = $today-$str;
+
+        // To Calculate the time difference in Years...
+        $years = 60*60*24*365;
+
+        // To Calculate the time difference in Months...
+        $months = 60*60*24*30;
+
+        // To Calculate the time difference in Days...
+        $days = 60*60*24;
+
+        // To Calculate the time difference in Hours...
+        $hours = 60*60;
+
+        // To Calculate the time difference in Minutes...
+        $minutes = 60;
+
+        if(intval($time_differnce/$years) > 1)
+        {
+            return intval($time_differnce/$years)." years ago";
+        }else if(intval($time_differnce/$years) > 0)
+        {
+            return intval($time_differnce/$years)." year ago";
+        }else if(intval($time_differnce/$months) > 1)
+        {
+            return intval($time_differnce/$months)." months ago";
+        }else if(intval(($time_differnce/$months)) > 0)
+        {
+            return intval(($time_differnce/$months))." month ago";
+        }else if(intval(($time_differnce/$days)) > 1)
+        {
+            return intval(($time_differnce/$days))." days ago";
+        }else if (intval(($time_differnce/$days)) > 0) 
+        {
+            return intval(($time_differnce/$days))." day ago";
+        }else if (intval(($time_differnce/$hours)) > 1) 
+        {
+            return intval(($time_differnce/$hours))." hours ago";
+        }else if (intval(($time_differnce/$hours)) > 0) 
+        {
+            return intval(($time_differnce/$hours))." hour ago";
+        }else if (intval(($time_differnce/$minutes)) > 1) 
+        {
+            return intval(($time_differnce/$minutes))." minutes ago";
+        }else if (intval(($time_differnce/$minutes)) > 0) 
+        {
+            return intval(($time_differnce/$minutes))." minute ago";
+        }else if (intval(($time_differnce)) > 1) 
+        {
+            return intval(($time_differnce))." seconds ago";
+        }else
+        {
+            return "few seconds ago";
+        }
+	}
+
+}

app/Observers/RateObserver.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Observers;
+
+use App\Rate;
+use App\User;
+use App\Events\RateUpdated;
+
+class RateObserver
+{
+    /**
+     * Handle the rate "created" event.
+     *
+     * @param  \App\Rate  $rate
+     * @return void
+     */
+    public function created(Rate $rate)
+    {
+        event(new RateUpdated($rate));   
+    }
+}

app/Providers/AppServiceProvider.php

@@ -5,6 +5,8 @@ namespace App\Providers;
 use Laravel\Dusk\DuskServiceProvider;
 use Illuminate\Support\Facades\Schema;
 use Illuminate\Support\ServiceProvider;
+use App\Observers\RateObserver;
+use App\Rate;
 
 
 class AppServiceProvider extends ServiceProvider
@@ -21,6 +23,7 @@ class AppServiceProvider extends ServiceProvider
             Schema::defaultStringLength(191);
         }
         */
+        Rate::observe(RateObserver::class);
         Schema::defaultStringLength(191);
     }
 

app/Providers/BroadcastServiceProvider.php

@@ -14,7 +14,8 @@ class BroadcastServiceProvider extends ServiceProvider
      */
     public function boot()
     {
-        Broadcast::routes();
+        //Broadcast::routes();
+        Broadcast::routes(["middleware" => ["auth:api"]]);
 
         require base_path('routes/channels.php');
     }

app/UserBankSlip.php

@@ -6,7 +6,7 @@ use Illuminate\Database\Eloquent\Model;
 
 class UserBankSlip extends Model
 {
-    protected $fillable = ['bank_slip_type','bankslip_url','transfer_amount','booking_id','cust_marking','estimated_arrival_time'];
+    protected $fillable = ['bank_slip_type','bankslip_url','transfer_amount','booking_id','cust_marking'];
 
     public function booking()
     {

caddy/Caddyfile

@@ -1,18 +1,25 @@
-# Docs: https://caddyserver.com/docs/caddyfile
 https://exchange-staging.izyim.com {
     root /var/www/public
+    
     fastcgi / 127.0.0.1:9000 php {
         index index.php
     }
 
+    header / {
+        Cache-Control no-cache
+    }
+
     # To handle .html extensions with laravel change ext to
     # ext / .html
 
     rewrite {
-        to {path} {path}/ /index.php?{query}
+        r .*
+        ext /
+        to /index.php?{query}
     }
+
     gzip
-    browse
+    # browse
     log stdout
     errors stdout
     on startup php-fpm --nodaemonize

caddy/Dockerfile

@@ -12,6 +12,9 @@ RUN curl --silent --show-error --fail --location \
 
 COPY Caddyfile /etc/Caddyfile
 
-WORKDIR /var/www/public
+WORKDIR /var/www
+RUN mkdir -p /var/www/public/storage
+RUN ln -sf /var/www/storage/app/public /var/www/public/storage
+RUN chmod -R 777 storage/
 
 CMD ["/usr/bin/caddy", "--conf", "/etc/Caddyfile", "--log", "stdout"]

composer.json

@@ -13,6 +13,7 @@
         "laravel/socialite": "^3.0",
         "laravel/tinker": "~1.0",
         "laravelcollective/html": "^5.6",
+        "pusher/pusher-php-server": "~3.0",
         "tymon/jwt-auth": "^1.0.0-rc.2",
         "zizaco/entrust": "dev-master"
     },

config/app.php

@@ -165,10 +165,11 @@ return [
          */
         App\Providers\AppServiceProvider::class,
         App\Providers\AuthServiceProvider::class,
-        // App\Providers\BroadcastServiceProvider::class,
+        App\Providers\BroadcastServiceProvider::class,
         App\Providers\EventServiceProvider::class,
         App\Providers\RouteServiceProvider::class,
 
+        Tymon\JWTAuth\Providers\LaravelServiceProvider::class
     ],
 
     /*
@@ -219,6 +220,9 @@ return [
         'View' => Illuminate\Support\Facades\View::class,
         'Html' => Collective\Html\HtmlFacade::class,
         'Entrust'   => Zizaco\Entrust\EntrustFacade::class,
+        'JWTAuth' => Tymon\JWTAuth\Facades\JWTAuth::class,
+        'JWTFactory' => Tymon\JWTAuth\Facades\JWTFactory::class,
+
     ],
 
 ];

config/broadcasting.php

@@ -36,7 +36,8 @@ return [
             'secret' => env('PUSHER_APP_SECRET'),
             'app_id' => env('PUSHER_APP_ID'),
             'options' => [
-                //
+                'cluster' => env('PUSHER_APP_CLUSTER'),
+                'encrypted' => true,
             ],
         ],
 

config/database.php

@@ -50,7 +50,7 @@ return [
             'charset' => 'utf8mb4',
             'collation' => 'utf8mb4_unicode_ci',
             'prefix' => '',
-            'strict' => false,
+            'strict' => true,
             'engine' => null,
         ],
 
@@ -58,9 +58,9 @@ return [
             'driver' => 'mysql',
             'host' => env('DB_HOST', 'localhost'),
             'port' => env('DB_PORT', '3306'),
-            'database' => 'forunittest',
+            'database' => 'phpunit',
-            'username' => 'root',
+            'username' => 'default',
-            'password' => '',
+            'password' => 'secret',
             'unix_socket' => env('DB_SOCKET', ''),
             'charset' => 'utf8mb4',
             'collation' => 'utf8mb4_unicode_ci',

config/jwt.php

@@ -100,7 +100,7 @@ return [
     |
     */
 
-    'ttl' => env('JWT_TTL', 60),
+    'ttl' => env('JWT_TTL', 60 * 12),
 
     /*
     |--------------------------------------------------------------------------

database/factories/MarkingFactory.php

@@ -5,6 +5,6 @@ use Faker\Generator as Faker;
 $factory->define(App\Marking::class, function (Faker $faker) {
     return [
         'email' => $faker->unique()->safeEmail,
-        'marking' => str_random(10)
+        'marking' => strtoupper(str_random(5))
     ];
 });

database/factories/UserBankSlipFactory.php

@@ -11,6 +11,5 @@ $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
     ];
 });

database/factories/UserFactory.php

@@ -21,6 +21,6 @@ $factory->define(App\User::class, function (Faker $faker) {
         'email' => $faker->unique()->safeEmail,
         'password' => $password ?: $password = bcrypt('secret'),
         'remember_token' => str_random(10),
-        'marking' => $faker->name,
+        'marking' => $faker->name,        
     ];
-});
+});

database/migrations/2018_04_25_090031_create_setting_suppliers_table.php

@@ -17,7 +17,7 @@ class CreateSettingSuppliersTable extends Migration
             $table->increments('id');
             $table->string('company_name');
             $table->string('gst_no');
-            $table->string('supplier_reg_no');
+            $table->string('supplier_reg_no')->nullable();
             $table->string('bank_name');
             $table->string('acc_no');
             $table->timestamps();

database/migrations/2018_05_08_032048_create_china_bank_slips_table.php

@@ -21,7 +21,7 @@ class CreateChinaBankSlipsTable extends Migration
             $table->string('bank_address');
             $table->string('swift');
             $table->string('cnap');
-            $table->string('bank _branch');
+            $table->string('bank_branch');
             $table->string('order_id');
             $table->double('transfer_amount_needed');
             $table->double('actual_transfer_amount');

database/migrations/2018_05_28_085925_create_purchase_orders_table.php

@@ -17,7 +17,7 @@ class CreatePurchaseOrdersTable extends Migration
             $table->increments('id');
             $table->string('image_url');
             $table->double('amount');
-            $table->integer('book_id')->unsigned();
+            $table->integer('book_id')->unsigned()->nullable;
             $table->foreign('book_id')->references('id')->on('bookings');
             $table->timestamps();
         });

database/migrations/2018_06_25_101043_add_time_limit_setting_credit_table.php

@@ -14,7 +14,7 @@ class AddTimeLimitSettingCreditTable extends Migration
     public function up()
     {
         Schema::table('setting_credits', function (Blueprint $table) {
-            $table->integer('time_limit');
+            $table->integer('time_limit')->nullable();
         });
     }
 
@@ -26,7 +26,7 @@ class AddTimeLimitSettingCreditTable extends Migration
     public function down()
     {
         Schema::table('setting_credits', function (Blueprint $table) {
-            // $table->dropColumn('time_limit');
+            $table->dropColumn('time_limit');
         });   
     }
 }

database/migrations/2018_06_26_035802_add_eta_user_bank_slip_table.php

@@ -14,7 +14,7 @@ class AddEtaUserBankSlipTable extends Migration
     public function up()
     {
         Schema::table('user_bank_slips', function (Blueprint $table) {
-            $table->integer('estimated_arrival_time');
+            $table->integer('estimated_arrival_time')->nullable();
         });
     }
 
@@ -27,7 +27,7 @@ class AddEtaUserBankSlipTable extends Migration
     {
         if (Schema::hasColumn('user_bank_slips', 'estimated_arrival_time')) {
             Schema::table('user_bank_slips', function (Blueprint $table) {
-                // $table->dropColumn('estimated_arrival_time');
+                $table->dropColumn('estimated_arrival_time');
             });
         }
     }

database/migrations/2018_06_27_081455_add_bookingid_foreignkey_to_chinabankslip_table.php

@@ -15,7 +15,7 @@ class AddBookingidForeignkeyToChinabankslipTable extends Migration
     {
         Schema::table('china_bank_slips', function($table)
         {
-            $table->integer('booking_id')->unsigned();
+            $table->integer('booking_id')->unsigned()->nullable();
             $table->foreign('booking_id')->references('id')->on('bookings');
         });
     }

database/migrations/2018_06_28_011717_rename_booking_foreignkey_in_po_table.php

@@ -17,7 +17,7 @@ class RenameBookingForeignkeyInPoTable extends Migration
         {
             $table->dropForeign(['book_id']);
             $table->dropColumn('book_id');
-            $table->integer('booking_id')->unsigned();
+            $table->integer('booking_id')->unsigned()->nullable();
             $table->foreign('booking_id')->references('id')->on('bookings');
         });
     }

database/migrations/2018_07_02_104306_rename_booking_foreignkey_from_supplierbooking_table.php

@@ -17,7 +17,7 @@ class RenameBookingForeignkeyFromSupplierbookingTable extends Migration
         {
             $table->dropForeign(['book_id']);
             $table->dropColumn('book_id');
-            $table->integer('booking_id')->unsigned();
+            $table->integer('booking_id')->unsigned()->nullable();
             $table->foreign('booking_id')->references('id')->on('bookings');
         });
     }

database/migrations/2018_07_03_014020_add_billing_field_to_supplierbooking_table.php

@@ -15,7 +15,7 @@ class AddBillingFieldToSupplierbookingTable extends Migration
     {
         Schema::table('supplier_bookings', function($table)
         {
-            $table->double('billing_amount');
+            $table->double('billing_amount')->nullable();
         });
     }
 
@@ -26,6 +26,5 @@ class AddBillingFieldToSupplierbookingTable extends Migration
      */
     public function down()
     {
-        //
     }
 }

database/migrations/2018_07_03_014343_add_salestax_field_to_supplierbooking_table.php

@@ -15,7 +15,7 @@ class AddSalestaxFieldToSupplierbookingTable extends Migration
     {
         Schema::table('supplier_bookings', function($table)
         {
-            $table->double('salestax_amount');
+            $table->double('salestax_amount')->nullable();
         });
     }
 
@@ -26,6 +26,8 @@ class AddSalestaxFieldToSupplierbookingTable extends Migration
      */
     public function down()
     {
-        //
+        Schema::table('supplier_bookings', function (Blueprint $table) {
+            $table->dropColumn('salestax_amount');
+         });
     }
 }

database/migrations/2018_07_05_041532_add_name_in_users_table.php

@@ -15,7 +15,7 @@ class AddNameInUsersTable extends Migration
     {
         Schema::table('users', function($table)
         {
-            $table->string('name');
+            $table->string('name')->nullable();
         });
     }
 

database/migrations/2018_07_05_095441_add_marking_to_user_table.php

@@ -15,7 +15,7 @@ class AddMarkingToUserTable extends Migration
     {
         Schema::table('users', function($table)
         {
-            $table->string('marking');
+            $table->string('marking')->nullable();
         });
     }
 
@@ -25,7 +25,10 @@ class AddMarkingToUserTable extends Migration
      * @return void
      */
     public function down()
-    {
+    { 
-        //
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('marking');
+        });
+        
     }
 }

database/migrations/2018_07_06_075408_create_setting_active_bank_table.php

@@ -17,7 +17,7 @@ class CreateSettingActiveBankTable extends Migration
             $table->increments('id');
             $table->string('x1_bank_id')->unique();
             $table->string('x2_bank_id')->unique();
-            $table->string('beneficiary_id')->unique();
+            $table->string('beneficiary_id')->nullable();
             $table->foreign('x1_bank_id')
                 ->references('acc_no')->on('setting_malaysia_banks')
                 ->onDelete('cascade');

database/migrations/2018_07_11_150423_update_accno_to_id_setting_active_table.php

@@ -1,51 +0,0 @@
-<?php
-
-use Illuminate\Support\Facades\Schema;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Database\Migrations\Migration;
-
-class UpdateAccnoToIdSettingActiveTable extends Migration
-{
-    /**
-     * Run the migrations.
-     *
-     * @return void
-     */
-    public function up()
-    {
-        Schema::table('setting_active_banks', function(Blueprint $table)
-        {
-            $table->dropForeign('setting_active_banks_x1_bank_id_foreign');
-            $table->dropForeign('setting_active_banks_x2_bank_id_foreign');
-            $table->dropForeign('setting_active_banks_beneficiary_id_foreign');
-            $table->dropColumn('x1_bank_id');
-            $table->dropColumn('x2_bank_id');
-            $table->dropColumn('beneficiary_id');
-        });
-
-        Schema::table('setting_active_banks', function(Blueprint $table)
-        {
-            $table->unsignedInteger('x1_bank_id')->unique();
-            $table->foreign('x1_bank_id')
-                ->references('id')->on('setting_malaysia_banks');
-
-            $table->unsignedInteger('x2_bank_id')->unique();
-            $table->foreign('x2_bank_id')
-                ->references('id')->on('setting_malaysia_banks');
-
-            $table->unsignedInteger('beneficiary_id')->unique();
-            $table->foreign('beneficiary_id')
-                ->references('id')->on('setting_beneficiaries');
-        });
-    }
-
-    /**
-     * Reverse the migrations.
-     *
-     * @return void
-     */
-    public function down()
-    {
-        //
-    }
-}

database/migrations/2018_07_20_175339_add_orderno_n_paymentfor_field_to_bookings_table.php

@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddOrdernoNPaymentforFieldToBookingsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->string('order_no')->nullable();
+            $table->string('payment_for')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            //
+        });
+    }
+}

database/migrations/2018_07_21_102920_create_notification_table.php

@@ -0,0 +1,39 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateNotificationTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('notifications', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('detail');
+            $table->string('link');
+            $table->unsignedInteger('user_id');
+            $table->boolean('is_read')->default(0);
+            $table->timestamps();
+
+            $table->foreign('user_id')
+                    ->references('id')->on('users')
+                    ->onDelete('cascade');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('notifications');
+    }
+}

database/migrations/2018_07_26_094305_add_fields_into_supplier_bookings_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddFieldsIntoSupplierBookingsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('supplier_bookings', function (Blueprint $table) {
+            $table->string('amount_in_myr')->nullable();
+            $table->string('tax_rate')->nullable();
+            $table->string('amount_after_tax')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}

database/migrations/2018_07_30_162106_change_datatype_in_booking_table.php

@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class ChangeDatatypeInBookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->string('account_num')->nullable()->change();
+    
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            //
+        });
+    }
+}

database/migrations/2018_08_02_141753_make_nullable_in_china_bank_slips_table.php

@@ -0,0 +1,42 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class MakeNullableInChinaBankSlipsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('china_bank_slips', function (Blueprint $table) {
+            $table->string('company_name')->nullable()->change();
+            $table->string('bank_name')->nullable()->change();
+            $table->string('acc_no')->nullable()->change();
+            $table->string('bank_address')->nullable()->change();
+            $table->string('swift')->nullable()->change();
+            $table->string('cnap')->nullable()->change();
+            $table->string('order_id')->nullable()->change();
+            $table->decimal('transfer_amount_needed')->nullable()->change();
+            $table->decimal('actual_transfer_amount')->nullable()->change();
+            $table->string('date')->nullable()->change();
+            $table->string('details')->nullable()->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('china_bank_slips', function (Blueprint $table) {
+            //
+        });
+    }
+}

database/migrations/2018_08_08_103115_make_nullable_in_bookings_table.php

@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class MakeNullableInBookingsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->string('company_name')->nullable()->change();
+            $table->string('company_address')->nullable()->change();
+            $table->string('bank_address')->nullable()->change();
+            $table->string('swift_code')->nullable()->change();
+            $table->string('cnap')->nullable()->change();
+            $table->string('term')->nullable()->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            //
+        });
+    }
+}

database/migrations/2018_08_08_104726_make_nullable_in_supplier_bookings_table.php

@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class MakeNullableInSupplierBookingsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('supplier_bookings', function (Blueprint $table) {
+            $table->decimal('transfer_amount')->nullable()->change();
+            $table->decimal('rmbBankAmount')->nullable()->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('supplier_bookings', function (Blueprint $table) {
+            //
+        });
+    }
+}

database/migrations/2018_08_13_121253_drop_eta_in_china_bank_slips_table.php

@@ -0,0 +1,29 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class DropEtaInChinaBankSlipsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('user_bank_slips', function (Blueprint $table) {
+            $table->dropColumn('estimated_arrival_time');    
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+    }
+}

database/migrations/2018_08_13_161906_remove_billing_amount_in_supplier_bookings.php

@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class RemoveBillingAmountInSupplierBookings extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('supplier_bookings', function (Blueprint $table) {
+            $table->dropColumn('billing_amount');    
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}

database/migrations/2018_08_13_162910_dropcolumn_bank_branch_in_china_bank_slips_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class DropcolumnBankBranchInChinaBankSlipsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('china_bank_slips', function (Blueprint $table) {
+            $table->dropColumn('bank_branch');    
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('china_bank_slips', function (Blueprint $table) {
+            //
+        });
+    }
+}

database/migrations/2018_08_15_154652_remove_foreight_from_setting_active_banks_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class RemoveForeightFromSettingActiveBanksTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('setting_active_banks', function (Blueprint $table) {
+            $table->dropForeign('setting_active_banks_beneficiary_id_foreign');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('setting_active_banks', function (Blueprint $table) {
+            //
+        });
+    }
+}

database/migrations/2018_08_16_101635_drop_notifications_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class DropNotificationsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::dropIfExists('notifications');
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}

database/migrations/2018_08_16_101737_create_notifications_table.php

@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreateNotificationsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('notifications', function (Blueprint $table) {
+            $table->uuid('id')->primary();
+            $table->string('type');
+            $table->morphs('notifiable');
+            $table->text('data');
+            $table->timestamp('read_at')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('notifications');
+    }
+}

database/migrations/2018_08_20_172746_make_nullable_in_setting_beneficiaries_table.php

@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class MakeNullableInSettingBeneficiariesTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('setting_beneficiaries', function (Blueprint $table) {
+            $table->string('bank_address')->nullable()->change();
+            $table->string('swift')->nullable()->change();
+            $table->string('cnap')->nullable()->change();
+            $table->string('bank_branch')->nullable()->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('setting_beneficiaries', function (Blueprint $table) {
+            //
+        });
+    }
+}

database/migrations/2018_08_20_172851_make_nullable_in_setting_malaysia_banks_table.php

@@ -0,0 +1,35 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class MakeNullableInSettingMalaysiaBanksTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('setting_malaysia_banks', function (Blueprint $table) {
+            $table->string('bank_address')->nullable()->change();
+            $table->string('swift')->nullable()->change();
+            $table->string('cnap')->nullable()->change();
+            $table->string('bank_branch')->nullable()->change();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('setting_malaysia_banks', function (Blueprint $table) {
+            //
+        });
+    }
+}

database/seeds/BookTableSeeder.php

@@ -18,8 +18,8 @@ class BookTableSeeder extends Seeder
         $rate = Rate::all()->last();
         
         DB::table('bookings')->insert([
-            'account_name' => 'milah',
+            'account_name' => 'EXCHANGE SDN BHD',
-            'account_num' => '99898', 
+            'account_num' => '99898239298123', 
             'bank_name' => 'maybank', 
             'bank_branch' => 'rembau', 
             'company_name' => 'ICEF', 
@@ -35,7 +35,9 @@ class BookTableSeeder extends Seeder
             'rate_id' => $rate->id,
             'user_id' => $user->id,
             'status' => 2,
-            'admin_status' => 2,
+            'admin_status' => 1,
+            'order_no' => '001',
+            'payment_for' => 'FULL PAYMENT',
             'created_at' => Carbon::now()->format('Y-m-d H:i:s'),
             'updated_at' => Carbon::now()->format('Y-m-d H:i:s'),
         ]);

database/seeds/RolesAndPermissionsSeeder.php

@@ -132,21 +132,21 @@ class RolesAndPermissionsSeeder extends Seeder {
 		}
 		$this->command->info($commandBullet."Attached $pcount permissions to $role[name] role");
 		
-		// Update old records  
+		// Update old records : Temporary disabled 
-		if ($originalRole) 
+		// if ($originalRole) 
-		{  
+		// {  
-			$userCount = 0;
+		// 	$userCount = 0;
-			$RoleUsers = DB::table(Config::get('entrust.role_user_table'))->where('role_id',$originalRole->id)->get();
+		// 	$RoleUsers = DB::table(Config::get('entrust.role_user_table'))->where('role_id',$originalRole->id)->get();
-			foreach ($RoleUsers as $user) {
+		// 	foreach ($RoleUsers as $user) {
-				$u = User::where('id',$user->user_id)->first();
+		// 		$u = User::where('id',$user->user_id)->first();
-				$u->attachRole($newRole);
+		// 		$u->attachRole($newRole);
-				$userCount++;
+		// 		$userCount++;
-			}
+		// 	}
-			$this->command->info($commandBullet."Updated role attachment for $userCount users");
+		// 	$this->command->info($commandBullet."Updated role attachment for $userCount users");
 			
-			Role::where('id',$originalRole->id)->delete(); // will also remove old role_user records
+		// 	Role::where('id',$originalRole->id)->delete(); // will also remove old role_user records
-			$this->command->info($commandBullet."Removed the original $role[name] role");
+		// 	$this->command->info($commandBullet."Removed the original $role[name] role");
-		}
+		// }
 	}
 	
 	

database/seeds/SettingActiveBankSeeder.php

@@ -13,15 +13,15 @@ class SettingActiveBankSeeder extends Seeder
      */
     public function run()
     {
-        $bankx1 = SettingMalaysiaBank::where('acc_no', "=" ,'malaysiaacc01')->first();
+        $bankx1 = SettingMalaysiaBank::find(1);
-        $bankx2 = SettingMalaysiaBank::where('acc_no', "=",'malaysiaacc02')->first();
+        $bankx2 = SettingMalaysiaBank::find(2);
-        $chinabank = SettingBeneficiary::where('acc_no', "=" ,'123456789')->first();
+        $beneficiary = SettingBeneficiary::find(2);
 
         DB::table('setting_active_banks')->truncate();
         DB::table('setting_active_banks')->insert([
         	'x1_bank_id' => $bankx1->id,
         	'x2_bank_id' => $bankx2->id,
-        	'beneficiary_id' => $chinabank->id
+        	'beneficiary_id' => $beneficiary->id
         ]);
     }
 }

database/seeds/SettingBeneficiarySeeder.php

@@ -23,7 +23,7 @@ class SettingBeneficiarySeeder extends Seeder
         	'bank_branch' => 'Putra'
         ]);
         DB::table('setting_beneficiaries')->insert([
-        	'company_name' => 'Bota',
+        	'company_name' => 'CIEF1',
         	'bank_name' => 'CIMB',
         	'acc_no' => '123456789',
         	'bank_address' => 'Jalan cyberjaya',

database/seeds/SettingCreditSeeder.php

@@ -13,9 +13,9 @@ class SettingCreditSeeder extends Seeder
     public function run()
     {
         DB::table('setting_credits')->insert([
-        	'rmb_credit_limit' => '4000',
+        	'rmb_credit_limit' => '100000',
-        	'usd_credit_limit' => '5000',
+        	'usd_credit_limit' => '100000',
-        	'time_limit' => '6000'
+        	'time_limit' => '60000'
         ]);
     }
 }

database/seeds/SettingMalaysiaBankSeeder.php

@@ -15,8 +15,8 @@ class SettingMalaysiaBankSeeder extends Seeder
         DB::table('setting_malaysia_banks')->truncate();
         DB::table('setting_malaysia_banks')->insert([
         	'company_name' => 'CIEF',
-        	'bank_name' => 'Maybank',
+        	'bank_name' => 'MAYBANK',
-        	'acc_no' => 'malaysiaacc01',
+        	'acc_no' => '75930284783',
         	'bank_address' => 'Jalan putrajaya',
         	'swift' => 'ABC123',
         	'cnap' => 'CED234',
@@ -24,8 +24,8 @@ class SettingMalaysiaBankSeeder extends Seeder
         ]);
         DB::table('setting_malaysia_banks')->insert([
             'company_name' => 'CIEF',
-            'bank_name' => 'Maybank',
+            'bank_name' => 'MAYBANK',
-            'acc_no' => 'malaysiaacc02',
+            'acc_no' => '85839298348',
             'bank_address' => 'Jalan putrajaya',
             'swift' => 'ABC123',
             'cnap' => 'CED234',

database/seeds/SettingTaxRateSeeder.php

@@ -12,7 +12,7 @@ class SettingTaxRateSeeder extends Seeder
     public function run()
     {
         DB::table('setting_tax_rates')->insert([
-        	'tax_rate' => '1.1',
+        	'tax_rate' => '1.0',
         ]);
     }
 }

docker-prod.yml

@@ -67,5 +67,19 @@ services:
   cache:
     image: redis:3.0-alpine
 
+  phpmyadmin:
+    depends_on:
+      - mysql
+    image: phpmyadmin/phpmyadmin
+    restart: always
+    ports:
+      - 8090:80
+    environment:
+      PMA_HOST: mysql
+      MYSQL_ROOT_PASSWORD: root
+    networks:
+      - frontend
+      - backend
+
 volumes:
   dbdata:

package.json

@@ -16,7 +16,7 @@
     "@fortawesome/fontawesome-free-brands": "^5.0.8",
     "@fortawesome/fontawesome-free-regular": "^5.0.8",
     "@fortawesome/fontawesome-free-solid": "^5.0.8",
-    "@fortawesome/vue-fontawesome": "^0.0.22",
+    "@fortawesome/vue-fontawesome": "0.0.22",
     "@xkeshi/vue-countdown": "^0.6.0",
     "axios": "^0.18.0",
     "bootstrap": "^4.0.0",
@@ -24,10 +24,11 @@
     "element-ui": "^2.4.4",
     "jquery": "^3.3.1",
     "js-cookie": "^2.2.0",
-    "npm": "^6.4.1",
+    "laravel-echo": "^1.4.0",
+    "npm": "^6.4.0",
     "popper.js": "^1.14.1",
+    "pusher-js": "^4.3.0",
     "sweetalert2": "^7.15.1",
-    "vee-validate": "^2.1.0-beta.5",
     "vform": "^1.0.0",
     "vue": "^2.5.16",
     "vue-axios": "^2.1.1",
@@ -47,7 +48,7 @@
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "cross-env": "^5.1.4",
     "eslint": "^4.19.1",
-    "laravel-mix": "^2.1.14",
+    "laravel-mix": "^2.1.1",
     "vue-template-compiler": "^2.5.16",
     "webpack": "^3.11.0",
     "webpack-bundle-analyzer": "^2.13.1",

phpunit.xml

@@ -30,10 +30,12 @@
         <env name="CACHE_DRIVER" value="array"/>
         <env name="SESSION_DRIVER" value="array"/>
         <env name="QUEUE_DRIVER" value="sync"/>
-        <env name="DB_CONNECTION" value="testing"/>
+        <!-- <env name="DB_CONNECTION" value="testing"/> -->
         <env name="MAIL_DRIVER" value="array"/>
-        <env name="DB_CONNECTION" value="sqlite"/>
+        <env name="DB_CONNECTION" value="mysql"/>
-        <env name="DB_DATABASE" value=":memory:"/>
+        <env name="DB_DATABASE" value="default"/>
+        <!-- <env name="DB_CONNECTION" value="sqlite"/>
+        <env name="DB_DATABASE" value=":memory:"/> -->
         <ini name="display_errors" value="true"/>
     </php>
 </phpunit>

public/mix-manifest.json

@@ -1,7 +1,7 @@
 {
-    "/js/lang-zh-CN.489521629fd49ac7628e.js": "/js/lang-zh-CN.489521629fd49ac7628e.js",
+    "/js/lang-zh-CN.c0da3973e52421a8cfe5.js": "/js/lang-zh-CN.c0da3973e52421a8cfe5.js",
-    "/js/lang-es.459dcb868aa54d488979.js": "/js/lang-es.459dcb868aa54d488979.js",
+    "/js/lang-es.f4a1a5b4a30e92527b46.js": "/js/lang-es.f4a1a5b4a30e92527b46.js",
-    "/js/lang-en.31386792460363b93c17.js": "/js/lang-en.31386792460363b93c17.js",
+    "/js/lang-en.0f790217417404ecc662.js": "/js/lang-en.0f790217417404ecc662.js",
     "/js/app.js": "/js/app.js",
     "/css/app.css": "/css/app.css"
 }

readme.md

@@ -47,6 +47,13 @@ npm run hot
 npm run production
 ```
 
+#### Todo 
+- [ ] Unit test on supplier booking 
+- [ ] Continous delivery with npm build 
+- [ ] Add comments in controller functions 
+- [ ] Store files to AWS S3 
+- [ ] Real time rate update 
+
 ## Changelog
 
 Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.

resources/assets/js/app.js

@@ -10,26 +10,24 @@ import locale from 'element-ui/lib/locale/lang/en'
 import '~/plugins'
 import '~/components'
 
-import VeeValidate from 'vee-validate';
 const config = {
- errorBagName: 'errors', // change if property conflicts.
+  errorBagName: 'errors', // change if property conflicts.
- fieldsBagName: 'fields',
+  fieldsBagName: 'fields',
- delay: 0,
+  delay: 0,
- // locale: 'zh_CN',
+  // locale: 'zh_CN',
- strict: true,
+  strict: true,
- enableAutoClasses: false,
+  enableAutoClasses: false,
- classNames: {
+  classNames: {
-  touched: 'touched', // the control has been blurred
+    touched: 'touched', // the control has been blurred
-  untouched: 'untouched', // the control hasn't been blurred
+    untouched: 'untouched', // the control hasn't been blurred
-  valid: 'valid', // model is valid
+    valid: 'valid', // model is valid
-  invalid: 'invalid', // model is invalid
+    invalid: 'invalid', // model is invalid
-  pristine: 'pristine', // control has not been interacted with
+    pristine: 'pristine', // control has not been interacted with
-  dirty: 'dirty' // control has been interacted with
+    dirty: 'dirty' // control has been interacted with
- },
+  },
- events: 'blur',
+  events: 'blur',
- inject: true
+  inject: true
-};
+}
-Vue.use(VeeValidate, config);
 
 Vue.config.productionTip = false
 

resources/assets/js/components/AdminProgressTrack.vue

@@ -1,10 +1,10 @@
 <template>
   <el-row>
-    <el-steps :value="(value.term === 'x1_ba' || value.term === 'x2_cheque') && value.status > 2 ? value.status - 2 : value.status" :active="(value.term === 'x1_ba' || value.term === 'x2_cheque') && value.status > 2 ? value.status - 2 : value.status" :align-center="true" process-status="wait" finish-status="success">
+    <el-steps :value="value.status" :active="value.status" :align-center="true" process-status="wait" finish-status="success">
       <el-step title="Booking"/>
       <el-step title="Verification"/>
-      <el-step title="Supplier Booking" v-if="!(value.term === 'x1_ba' || value.term === 'x2_cheque')"/>
+      <el-step title="Supplier Booking"/>
-      <el-step title="Supplier Report" v-if="!(value.term === 'x1_ba' || value.term === 'x2_cheque')"/>
+      <el-step title="Supplier Report"/>
       <el-step title="Upload China Bankslip To Booking"/>
       <el-step title="Purchase Order/Invoice"/>
       <el-step title="Completed"/>

resources/assets/js/components/LocaleDropdown.vue

@@ -33,23 +33,23 @@
           {{ $t('Transaction History') }}
         </router-link>
       </li>
-      <li v-if="(user && role == 'admin')" class="nav-item">
+      <!-- TODO: remove entirely including controller and routes <li v-if="(user && role == 'admin')" class="nav-item">
         <router-link :to="{ name: 'admin.complete' }" class="nav-link">
           {{ $t('Completed Orders') }}
         </router-link>
-      </li>
+      </li> -->
   </ul>
 <!-- update rate dialog start -->
  <el-dialog align="center" :visible.sync="UpdateRateDialogVisible" width="900px">
     <el-form :inline="true" align="center" ref="rate" :model="rate" :rules="rules">
 
-        <el-form-item prop="x1_cash" >X1: &nbsp;&nbsp;&nbsp;Cash : <el-input v-model.number="rate.x1_cash" style=width:25% ></el-input></el-form-item>
+        <el-form-item prop="x1_cash" >X1: &nbsp;&nbsp;&nbsp;Cash : <el-input v-model.number="rate.x1_cash" style=width:60% ></el-input></el-form-item>
-        <el-form-item prop="x1_cheque" >Cheque : <el-input  v-model.number="rate.x1_cheque" style=width:25%></el-input></el-form-item>
+        <el-form-item prop="x1_cheque" >Cheque : <el-input  v-model.number="rate.x1_cheque" style=width:60%></el-input></el-form-item>
-        <el-form-item prop="x1_ba">BA : <el-input v-model.number="rate.x1_ba" style=width:25%></el-input></el-form-item>
+        <el-form-item prop="x1_ba">BA : <el-input v-model.number="rate.x1_ba" style=width:60%></el-input></el-form-item>
         <br>
-        <el-form-item prop="x2_cash" >X2: &nbsp;&nbsp;&nbsp;Cash : <el-input  v-model.number="rate.x2_cash" style=width:25% ></el-input></el-form-item>
+        <el-form-item prop="x2_cash" >X2: &nbsp;&nbsp;&nbsp;Cash : <el-input  v-model.number="rate.x2_cash" style=width:60% ></el-input></el-form-item>
-        <el-form-item prop="x2_cheque" >Cheque : <el-input  v-model.number="rate.x2_cheque" style=width:25%></el-input></el-form-item>
+        <el-form-item prop="x2_cheque" >Cheque : <el-input  v-model.number="rate.x2_cheque" style=width:60%></el-input></el-form-item>
-        <el-form-item prop="x2_ba" >BA : <el-input  v-model.number="rate.x2_ba" style=width:25%></el-input></el-form-item>
+        <el-form-item prop="x2_ba" >BA : <el-input  v-model.number="rate.x2_ba" style=width:60%></el-input></el-form-item>
     </el-form>
     <br>
     <div align="center">
@@ -139,7 +139,7 @@ export default {
         this.rate = response.data
       })
     },
-    createRate: function () {
+    createRate: function () { // TODO : we do not have create rate, only update rate. Delete this ? 
       this.loading = true,
       this.dialogFormVisible1 = true
           let newRate = {
@@ -210,6 +210,7 @@ export default {
         })
 
       },
+
   }
    
 }

resources/assets/js/components/Navbar.vue

@@ -5,6 +5,36 @@
         {{ appName }}
       </router-link>
 
+      <template v-if="user">
+            <!-- <el-dropdown trigger="click" align="right">
+              <el-badge :value="bellBadge > 0 ? bellBadge : ''" class="item">
+                <el-button icon="el-icon-bell" circle @click="refreshNoti()"></el-button>
+              </el-badge>
+              <el-dropdown-menu slot="dropdown">
+                <div id="notification">
+                  <div v-for="item in notification" :key="item">
+                    <a v-on:click.prevent='readNotification(item.id);navigateTo(item.link)'>
+                      <el-dropdown-item>
+                        <b v-if="item.is_read == 0">
+                          {{item.detail}}
+                        </b>
+                        <span v-else >
+                          {{item.detail}}
+                        </span>
+                        <br/>
+                        <span class="opacity80">
+                          {{item.time_interval}}
+                        </span>
+                      </el-dropdown-item>
+                    </a>
+                  </div>
+                </div>
+                <el-button v-if="pagination.next_page_url != null" id="notification-load-more" v-on:click='fetchPaginateBooking(pagination.next_page_url)'>Load more</el-button>
+                <div v-else id="notification-load-more"></div>
+              </el-dropdown-menu>
+            </el-dropdown> -->
+            </template>
+
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false">
         <span class="navbar-toggler-icon"/>
       </button>
@@ -12,31 +42,11 @@
       <div id="navbarToggler" class="collapse navbar-collapse">
         <ul class="navbar-nav ml-auto">
           <locale-dropdown/>
-          <!-- <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
-          </li> -->
         </ul>
 
         <ul class="navbar-nav ml-auto">
-          <!-- Authenticated -->
+          <!--Authenticated -->
           <template v-if="user">
-            <!-- <el-badge :value="12" class="item">
-              <el-button size="share-button"><i class="el-icon-bell"></i></el-button>
-            </el-badge> -->
-            <!-- <el-dropdown trigger="click">
-              <el-badge :value="12" class="item">
-                <el-button icon="el-icon-bell" circle></el-button>
-              </el-badge>
-              <el-dropdown-menu slot="dropdown" style="max-width: 30%" id="notification">
-                <a v-for="item in notification" :href="item.link">
-                  <el-dropdown-item>
-                    {{item.message}}
-                  </el-dropdown-item>
-                </a>
-              </el-dropdown-menu>
-            </el-dropdown> -->
-
-
             <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle text-dark"
                href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -57,7 +67,6 @@
             </div>
           </li>
           </template>
-          </li>
           <!-- Guest -->
           <template v-else>
             <li class="nav-item">
@@ -80,6 +89,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import LocaleDropdown from './LocaleDropdown'
+import axios from 'axios'
 
 export default {
   components: {
@@ -88,29 +98,95 @@ export default {
 
   data: () => ({
     appName: window.config.appName,
-    notification:[{
+    //notification:[],
-      message : "You have an unread message",
+    //loadingNotification:false,
-      link : "http://www.google.com"
+    bellBadge : 0,
-    },
+    unread_message_length:0,
-    {
+    url: '/api/notification/user',
-      message : "There are 10 booking for your approval",
+    pagination: [],
-      link : "http://www.yahoo.com"
-    }]
-
   }),
-
   computed: mapGetters({
     user: 'auth/user'
   }),
-
   methods: {
-    async logout () {
+    async logout(){
       // Log out the user.
-      await this.$store.dispatch('auth/logout')
+      await this.$store.dispatch('auth/logout');
 
       // Redirect to login.
-      this.$router.push({ name: 'login' })
+      this.$router.push({ name: 'login' });
-    }
+    },
+    // refreshNoti() {
+    //   axios.get(this.url).then(response => {
+    //     this.bookingTable = response.data.data
+    //     this.notification = response.data.message.data;
+    //     this.bellBadge = response.data.unread_message.length;
+    //     this.makePagination(response.data.message);
+    //     console.log(response.data);
+    //   })
+    // },
+    // getNotification(url){
+    //   this.notification = [];
+    //   this.loadingNotification=true;
+    //   axios
+    //     .get(url)
+    //     .then((response) => {
+    //       this.loadingNotification=false;
+    //       this.notification = response.data.message.data;
+    //       this.bellBadge = response.data.unread_message.length;
+    //       this.makePagination(response.data.message);
+    //       console.log(response.data);
+    //     }).catch((error) => {
+    //       console.log(error)
+    //       this.$router.push({
+    //         name: 'notfound'
+    //       })
+    //     })
+    // },
+    makePagination(data){
+      let pagination ={
+        current_page: data.current_page,
+        last_page: data.last_page,
+        next_page_url: data.next_page_url,
+        prev_page_url: data.prev_page_url
+      };
+      this.pagination = pagination;
+    },
+    fetchPaginateBooking(url) {
+      this.url = url;
+      //this.loadingNotification=true;
+      if(this.url !== null){
+        axios
+          .get(url)
+          .then((response) => {
+            this.loadingNotification=false;
+            this.notification = this.notification.concat(response.data.message.data);
+            this.bellBadge = response.data.unread_message.length;
+            this.makePagination(response.data.message);
+            console.log(this.notification);
+          }).catch((error) => {
+            console.log(error)
+            this.$router.push({
+              name: 'notfound'
+            })
+          })
+      }
+    },
+    // readNotification(notification_id){
+    //   axios
+    //     .post('/api/notification/read-notification/'+notification_id)
+    //     .then((response) => {
+    //       this.getNotification(this.url);
+    //     }).catch((error) => {
+    //       console.log(error)
+    //       this.$router.push({
+    //         name: 'notfound'
+    //       })
+    //     })
+    // },
+    navigateTo(nav) {
+      window.location.href = nav;
+    }  
   }
 }
 </script>
@@ -121,4 +197,33 @@ export default {
   height: 2rem;
   margin: -.375rem 0;
 }
+.el-dropdown-menu{
+  height: 50%;
+}
+#notification{
+  overflow-y: scroll;
+  overflow-x: hidden;
+  max-height: 100%;
+}
+#notification-load-more{
+  position: absolute;
+  width: 100%;
+  min-height: 20px;
+  background: white;
+  border: 1px solid #dcdfe6;
+}
+.el-dropdown-menu__item {
+  line-height: 26px;
+}
+.opacity80{
+  opacity: 0.8 ;
+}
+::-webkit-scrollbar {
+    width: 0px;
+    background: transparent; /* make scrollbar transparent */
+}
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
 </style>

resources/assets/js/components/ProgressTrack.vue

@@ -1,6 +1,6 @@
 <template>
   <el-row>
-    <el-steps class="progressBar" :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
+    <el-steps class="progressBar" :value="value.status" :active="value.status" :align-center="true" process-status="wait" finish-status="success">
       <el-step title="Booking"/>
       <el-step title="Payment"/>
       <el-step title="Order Confirmation"/>
@@ -19,32 +19,12 @@
         }
 		
 	}
-   
-    /*
-    .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>

resources/assets/js/components/X2AdminProgressTrack.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-row>
+    <el-steps :value="value.status" :active="value.status" :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="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: () => ({
+  })
+}
+</script>

resources/assets/js/components/X2ProgressTrack.vue

@@ -0,0 +1,27 @@
+<template>
+  <el-row>
+    <el-steps class="progressBar" :value="value.status" :active="value.status" :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="Order Complete"/>
+    </el-steps>
+  </el-row>
+</template>
+
+<style type="text/css">
+    @media screen and (max-width: 800px) {
+		 .progressBar {
+            width: 60%;
+        }
+		
+	}
+</style>
+
+<script>
+export default {
+  props: ['value'],
+  data: () => ({
+  })
+}
+</script>

resources/assets/js/middleware/admin.js

@@ -1,7 +1,6 @@
 import store from '~/store'
 
 export default (to, from, next) => {
-  console.log(store.getters['auth/role'])
   if (store.getters['auth/role'] !== 'admin') {
     next({ name: 'home' })
   } else {

resources/assets/js/pages/admin/booking/bookingDetail.vue

@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig" />
+    <x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
 
     <div align="center">
       <h4 style="margin-top:5%;"></h4>
@@ -28,7 +29,7 @@
                   <tbody>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
+                        <div class="cell">Ref No :</div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
                         <div class="cell">{{ booking_details.id }}</div>
@@ -211,11 +212,13 @@
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
+  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
   import axios from 'axios'
 
   export default {
     components: {
-      'progress-track': ProgressTrack
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
     },
     data() {
       return {

resources/assets/js/pages/admin/booking/completed.vue

@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig"/>
+    <x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
 
     <div align="center">
       <h4 style="margin-top:5%;">Order Completed</h4>
@@ -37,7 +38,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12" align="center">
-              <div v-for="cn_bankslip in booking_details.china_bankslip_path">
+              <div v-for="cn_bankslip in booking_details.china_bankslip_path" :key='cn_bankslip'>
                 <a target="_blank" :href="getURL(cn_bankslip)">
                   <img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
                   <p v-else>Download</p>
@@ -66,7 +67,7 @@
       </el-col>
     </el-row>
     <br>
-    <!-- bank slips END --> 
+    <!-- bank slips END -->
 
     <el-row justify="center" align="center">
       <el-card class="box-card">
@@ -91,7 +92,7 @@
         <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>
@@ -101,7 +102,7 @@
                   <tbody>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
+                        <div class="cell">Ref No :</div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
                         <div class="cell">{{ booking_details.id }}</div>
@@ -219,7 +220,9 @@
                         <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="cell">
+                          <b>MYR {{ booking_details.bia }}</b>
+                        </div>
                       </td>
                     </tr>
                     <tr class="el-table__row">
@@ -261,7 +264,37 @@
       </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">
+            <canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
+            <br>
+            <el-button @click="downloadReport()" type="text">Download Now</el-button>
+          </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">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
+            </a>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+    <br>
     <el-row justify="center" align="center">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
@@ -284,77 +317,269 @@
   .booking-details {
     font-weight: bold;
   }
+
   .image {
-      border: 1px solid #ddd;
+    border: 1px solid #ddd;
-      border-radius: 4px;
+    border-radius: 4px;
-      margin-left: auto;
+    margin-left: auto;
-      margin-right: auto;
+    margin-right: auto;
-      width: 150px;
+    width: 150px;
-      display: block;
+    display: block;
   }
+
   .image:hover {
     box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
   }
 </style>
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
+  import ProgressTrack from '~/components/AdminProgressTrack'
-import ProgressTrack from '~/components/AdminProgressTrack'
+  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
-import axios from 'axios'
+  import axios from 'axios'
 
-export default {
+  export default {
-  components: {
+    components: {
-    'progress-track': ProgressTrack
+      'progress-track': ProgressTrack,
-  },
+      'x2-progress-track': X2ProgressTrack
-  data () {
+    },
-    return {
+    data() {
-      trackerConfig :{
+      return {
+        trackerConfig: {
           status: 8,
           term: null
         },
-      loading_btn: false,
+        supplier_booking:{},
-      booking_details:{
+        loading_btn: false,
+        booking_details: {
           id: null,
           amount: null,
           bia: null,
           user_bankslip_path: null,
         }
-    }
+      }
-  },
+    },
-  beforeCreate () {
+    beforeCreate() {
-    const loading = this.$loading({
+      const loading = this.$loading({
-      lock: true,
+        lock: true,
-      text: 'Please wait..',
+        text: 'Please wait..',
-      spinner: 'el-icon-loading',
+        spinner: 'el-icon-loading',
-      background: 'rgba(0, 0, 0, 0.7)'
+        background: 'rgba(0, 0, 0, 0.7)'
-    })
-
-    axios
-      .get('/api/admin/booking/' + this.$route.params.id)
-      .then((response) => {
-        this.booking_details = response.data
-        this.trackerConfig.term = response.data.term;
-        loading.close()
-      }).catch((error) => {
-        console.log(error)
-        loading.close()
-        this.$router.push({
-          name: 'notfound'
-        })
       })
-  },
+
-  methods: {
+      axios
-    getExtension(path){
+        .get('/api/admin/booking/' + this.$route.params.id)
-      return path.slice(-3);
+        .then((response) => {
+          this.booking_details = response.data
+          this.trackerConfig.term = response.data.term;
+          loading.close()
+        }).catch((error) => {
+          console.log(error)
+          loading.close()
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+        axios.get('/api/supplier-booking/' + this.$route.params.id)
+        .then((response) => {
+          this.supplier_booking = response.data
+          loading.close()
+        }).catch((error) => {
+          console.log(error)
+          this.$router.push({
+            name: 'notfound'
+          })
+          loading.close()
+        })
     },
-    isImage(path){
+    methods: {
-      var ext = this.getExtension(path);
+      getExtension(path) {
-      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+        return path.slice(-3);
+      },
+      isImage(path) {
+        var ext = this.getExtension(path);
+        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+      },
+      getURL(path) {
+        var getUrl = window.location;
+        var baseUrl = getUrl.protocol + "//" + getUrl.host;
+        return baseUrl + path;
+      }
     },
-    getURL(path){
+    directives: {
-      var getUrl = window.location;
+      insertMessage: function (canvasElement, binding) {
-      var baseUrl = getUrl.protocol + "//" + getUrl.host;
+        setTimeout(function (canvasElement, binding) {
-      return baseUrl + path;
+          ////////////////// variable //////////////////////////
+          var canvasWidth = 450;
+          var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390,
+            410,
+            470, 490, 510, 610, 630
+          ]
+          const canvasHeight = rowHeight[rowHeight.length - 1];
+
+          var column1X = 220;
+          var column2X = 320;
+          var column3X = 420;
+
+          ///////////////////Canvast Init////////////////////
+          var canvas = document.getElementById("myCanvas");
+          canvas.width = canvasWidth;
+          canvas.height = canvasHeight;
+          // Get canvas context
+          var ctx = canvasElement.getContext("2d");
+          // Clear the canvas
+          ctx.clearRect(0, 0, 300, 150);
+
+          ctx.fillStyle = "#FFFFFF";
+          ctx.fillRect(0, 0, canvasWidth, rowHeight[0]);
+          for (var i = 1; i < rowHeight.length; i++) {
+            if (i % 2 == 1)
+              ctx.fillStyle = "#A9D08E";
+            else
+              ctx.fillStyle = "#FFFFFF";
+            ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i]);
+          }
+          ///////////// fillup with text////////////////
+          //// config canvas
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          ctx.textAlign = "right";
+          //// Row 1
+          ctx.fillText("Ref No. :", column1X, rowHeight[1] - 5);
+          ctx.fillText(binding.value.booking_id, column3X, rowHeight[1] - 5);
+          //// Row 2
+          ctx.fillText("Date :", column1X, rowHeight[2] - 5);
+          ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5);
+          //// Row 3
+          ctx.fillText("Marking :", column1X, rowHeight[3] - 5);
+          ctx.font = "bold 14px Arial";
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText(binding.value.marking, column3X, rowHeight[3] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //// Row 4
+          ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5);
+          ctx.fillText(binding.value.order_no, column3X, rowHeight[4] - 5);
+          //// Row 4
+          ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
+          ctx.fillText(binding.value.payment_for, column3X, rowHeight[5] - 5);
+          //// Row 5
+          ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5);
+          ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5);
+          //// Row 6
+          ctx.fillText("Remark :", column1X, rowHeight[7] - 10);
+          //// Row 7
+          // Empty
+          //// Row 8
+          ctx.fillText("MYR/RM :", column1X, rowHeight[9] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[9] - 5);
+          ctx.font = "bold 14px Arial";
+          ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[9] - 5);
+          ctx.font = "13px Arial";
+          //// Row 8
+          ctx.fillText("* RATE :", column1X, rowHeight[10] - 5);
+          ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5);
+          //// Row 9
+          ctx.fillText("REBATE :", column1X, rowHeight[11] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[11] - 5);
+          ctx.font = "14px Arial";
+          ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5);
+          ctx.font = "13px Arial";
+          //// Row 10
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("CNY", column2X, rowHeight[12] - 5);
+          ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5);
+          ctx.font = "13px Arial";
+          //line
+          ctx.beginPath();
+          ctx.lineWidth = 1;
+          ctx.moveTo(column1X + 30, rowHeight[11]);
+          ctx.lineTo(column3X + 20, rowHeight[11]);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.lineWidth = 2;
+          ctx.moveTo(column1X + 30, rowHeight[12]);
+          ctx.lineTo(column3X + 20, rowHeight[12]);
+          ctx.stroke();
+          //// Row 11
+          ctx.fillText("MYR/RM :", column1X, rowHeight[14] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[14] - 5);
+          ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[14] - 5);
+          //// Row 12
+          // ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5);
+          // ctx.fillText("MYR", column2X, rowHeight[15] - 5);
+          // ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5);
+          //// Row 13
+
+          ctx.fillText("+ TAX " + (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :",
+            column1X, rowHeight[16] - 5); // TODO : Change to percentage 
+          ctx.fillText("MYR", column2X, rowHeight[16] - 5);
+          ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5);
+          // //// Row 14
+          // ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15);
+          // ctx.fillText("MYR", column2X, rowHeight[17] - 15);
+          // ctx.fillText("289.84", column3X, rowHeight[17] - 15);
+          //// Row 15
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("Bank In Amount :", column1X, rowHeight[18] - 5);
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText("MYR", column2X, rowHeight[18] - 5);
+          ctx.fillText(binding.value.amount_after_tax, column3X, rowHeight[18] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //line
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[17]);
+          ctx.lineTo(column3X + 20, rowHeight[17]);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[18] + 1);
+          ctx.lineTo(column3X + 20, rowHeight[18] + 1);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[18] - 2);
+          ctx.lineTo(column3X + 20, rowHeight[18] - 2);
+          ctx.stroke();
+          //// Row 16
+          // ctx.fillText("Rebate :", column1X, rowHeight[19] - 25);
+          // ctx.fillText("CNY", column2X, rowHeight[19] - 25);
+          // ctx.fillText("224.68", column3X, rowHeight[19] - 25);
+          //// Row 16
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("Bank In to Account Below :", column1X, rowHeight[20] - 5);
+          ctx.font = "bold italic 15px Arial";
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText("CNY", column2X, rowHeight[20] - 5);
+          ctx.fillText(binding.value.amountInRMB, column3X - 20, rowHeight[20] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //// Row 17
+          //// Row 18
+          //// Row 19
+          // var img = new Image();
+          // img.src = "/banklogo.png";
+          // img.crossOrigin = "anonymous";
+          // var maxwidth = 70;
+          // var ratio = maxwidth / img.width;
+          // var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2);
+          // var y = rowHeight[21] + offset; // to make it always center
+
+          // img.onload=function(){
+          //   ctx.drawImage(img, 50, 530, 80, 50);
+          // };
+
+          // text
+          ctx.font = "bold 14px Arial";
+          ctx.textAlign = "center";
+          ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80);
+          ctx.fillText("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60);
+          ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40);
+          ctx.fillText(binding.value.bank_name, column2X - 40, rowHeight[22] - 20);
+          ctx.fillText(binding.value.bank_branch, column2X - 40, rowHeight[22] - 2);
+
+          ctx.font = "13px Arial";
+        }, 1000, canvasElement, binding);
+
+      }
     }
   }
-}
+</script>
-</script>

resources/assets/js/pages/admin/booking/supplierBooking.vue

@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig" />
+    <x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
 
     <div align="center">
       <h4 style="margin-top:5%;"></h4>
@@ -29,7 +30,7 @@
                   <tbody>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
+                        <div class="cell">Ref No :</div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
                         <div class="cell">{{ booking_details.id }}</div>
@@ -216,9 +217,9 @@
                 <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-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-form-item>
                   <el-button :loading="loading_btn" type="primary" @click="generateReport('supplierBookingForm')">Generate Report</el-button>
                 </el-form-item>
@@ -237,11 +238,13 @@
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
+  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
   import axios from 'axios'
 
   export default {
     components: {
-      'progress-track': ProgressTrack
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
     },
     data() {
       return {
@@ -260,7 +263,6 @@
         supplier_options: null,
         supplierBookingForm: {
           supplier: null,
-          amount: null,
           rebate: null,
           rate: null,
           transfer_amount: null,
@@ -333,10 +335,9 @@
             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,
+              //transfer_amount: this.supplierBookingForm.transfer_amount,
             }
 
             axios.post('/api/supplier-booking', newReport)

resources/assets/js/pages/admin/booking/supplierReport.vue

@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig" />
+    <x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
 
     <div align="center">
       <h4 style="margin-top:5%;"></h4>
@@ -29,7 +30,7 @@
                   <tbody>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
+                        <div class="cell">Ref No :</div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
                         <div class="cell">{{ booking_details.id }}</div>
@@ -201,7 +202,6 @@
         <el-row :gutter="12" style="text-align:center">
           <el-col :span="20" style="text-align:center">
             <canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
-            <img id="banklogo" src="/banklogo.png" style="display: none"/>
             <br>
             <el-button @click="downloadReport()" type="text">Download Now</el-button>
           </el-col>
@@ -253,11 +253,12 @@
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
   import axios from 'axios'
-  import Canvas2Image from 'canvas2image'
+  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
 
   export default {
     components: {
-      'progress-track': ProgressTrack
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
     },
     data() {
       return {
@@ -313,43 +314,14 @@
       axios.get('/api/supplier-booking/' + this.$route.params.id)
         .then((response) => {
           this.supplier_booking = response.data
+          loading.close()
         }).catch((error) => {
           console.log(error)
           this.$router.push({
             name: 'notfound'
           })
+          loading.close()
         })
-
-	  axios.get('/api/active-bank')
-          .then((response) => {
-            axios.get('/api/setting-beneficiary/' + response.data.beneficiary_id)
-	          .then((response) => {
-          		loading.close();
-	            this.supplier_booking.china_bank_name = response.data.bank_name;
-	            this.supplier_booking.china_company_name = response.data.company_name;
-	            this.supplier_booking.china_acc_no = response.data.acc_no;
-	          })
-	          .catch((error) => {
-          		loading.close();
-	            console.log(error);
-	            this.$message({
-	              showClose: true,
-	              message: 'Fetch data fail',
-	              type: 'error',
-	              duration: 10000
-	            });
-	          });
-          })
-          .catch((error) => {
-          	loading.close();
-            console.log(error);
-            this.$message({
-              showClose: true,
-              message: 'Fetch data fail',
-              type: 'error',
-              duration: 10000
-            });
-          });
     },
     methods: {
       downloadReport(){
@@ -451,8 +423,8 @@
             ctx.font = "13px Arial";
             ctx.textAlign = "right";
             //// Row 1
-            ctx.fillText("Payment Voucher :", column1X, rowHeight[1] - 5);
+            ctx.fillText("Ref No. :", column1X, rowHeight[1] - 5);
-            ctx.fillText(binding.value.id, column3X, rowHeight[1] - 5);
+            ctx.fillText(binding.value.booking_id, column3X, rowHeight[1] - 5);
             //// Row 2
             ctx.fillText("Date :", column1X, rowHeight[2] - 5);
             ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5);
@@ -460,15 +432,15 @@
             ctx.fillText("Marking :", column1X, rowHeight[3] - 5);
             ctx.font = "bold 14px Arial";
             ctx.fillStyle = "#0070D5";
-            ctx.fillText("CIEF/605HOS", column3X, rowHeight[3] - 5);
+            ctx.fillText(binding.value.marking, column3X, rowHeight[3] - 5);
             ctx.fillStyle = "#000000";
             ctx.font = "13px Arial";
             //// Row 4
             ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5);
-            ctx.fillText(binding.value.id, column3X, rowHeight[4] - 5);
+            ctx.fillText(binding.value.order_no, column3X, rowHeight[4] - 5);
             //// Row 4
             ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
-            ctx.fillText("Full Payment", column3X, rowHeight[5] - 5);
+            ctx.fillText(binding.value.payment_for, column3X, rowHeight[5] - 5);
             //// Row 5
             ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5);
             ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5);
@@ -480,13 +452,17 @@
             ctx.fillText("MYR/RM :", column1X, rowHeight[9] - 5);
             ctx.fillText("MYR", column2X, rowHeight[9] - 5);
             ctx.font = "bold 14px Arial";
-            ctx.fillText(binding.value.transfer_amount, column3X, rowHeight[9] - 5);
+            ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[9] - 5);
             ctx.font = "13px Arial";
             //// Row 8
             ctx.fillText("* RATE :", column1X, rowHeight[10] - 5);
             ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5);
             //// Row 9
-            // Empty
+            ctx.fillText("REBATE :", column1X, rowHeight[11] - 5);
+            ctx.fillText("MYR", column2X, rowHeight[11] - 5);
+            ctx.font = "14px Arial";
+            ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5);
+            ctx.font = "13px Arial";
             //// Row 10
             ctx.font = "bold 14px Arial";
             ctx.fillText("CNY", column2X, rowHeight[12] - 5);
@@ -506,25 +482,26 @@
             //// Row 11
             ctx.fillText("MYR/RM :", column1X, rowHeight[14] - 5);
             ctx.fillText("MYR", column2X, rowHeight[14] - 5);
-            ctx.fillText("4830.68", column3X, rowHeight[14] - 5);
+            ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[14] - 5);
             //// Row 12
-            ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5);
+            // ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5);
-            ctx.fillText("MYR", column2X, rowHeight[15] - 5);
+            // ctx.fillText("MYR", column2X, rowHeight[15] - 5);
-            ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5);
+            // ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5);
             //// Row 13
-            ctx.fillText("+ SALES TAX (10%) :", column1X, rowHeight[16] - 5);
+            
+            ctx.fillText("+ TAX "+ (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :", column1X, rowHeight[16] - 5); // TODO : Change to percentage 
             ctx.fillText("MYR", column2X, rowHeight[16] - 5);
             ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5);
-            //// Row 14
+            // //// Row 14
-            ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15);
+            // ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15);
-            ctx.fillText("MYR", column2X, rowHeight[17] - 15);
+            // ctx.fillText("MYR", column2X, rowHeight[17] - 15);
-            ctx.fillText("289.84", column3X, rowHeight[17] - 15);
+            // ctx.fillText("289.84", column3X, rowHeight[17] - 15);
             //// Row 15
             ctx.font = "bold 14px Arial";
-            ctx.fillText("Customer Bank In Amount :", column1X, rowHeight[18] - 5);
+            ctx.fillText("Bank In Amount :", column1X, rowHeight[18] - 5);
             ctx.fillStyle = "#0070D5";
             ctx.fillText("MYR", column2X, rowHeight[18] - 5);
-            ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[18] - 5);
+            ctx.fillText(binding.value.amount_after_tax, column3X, rowHeight[18] - 5);
             ctx.fillStyle = "#000000";
             ctx.font = "13px Arial";
             //line
@@ -542,40 +519,41 @@
             ctx.lineTo(column3X + 20, rowHeight[18] - 2);
             ctx.stroke();
             //// Row 16
-            ctx.fillText("Rebate :", column1X, rowHeight[19] - 25);
+            // ctx.fillText("Rebate :", column1X, rowHeight[19] - 25);
-            ctx.fillText("CNY", column2X, rowHeight[19] - 25);
+            // ctx.fillText("CNY", column2X, rowHeight[19] - 25);
-            ctx.fillText("224.68", column3X, rowHeight[19] - 25);
+            // ctx.fillText("224.68", column3X, rowHeight[19] - 25);
             //// Row 16
             ctx.font = "bold 14px Arial";
             ctx.fillText("Bank In to Account Below :", column1X, rowHeight[20] - 5);
             ctx.font = "bold italic 15px Arial";
             ctx.fillStyle = "#0070D5";
             ctx.fillText("CNY", column2X, rowHeight[20] - 5);
-            ctx.fillText("7692.17", column3X - 20, rowHeight[20] - 5);
+            ctx.fillText(binding.value.amountInRMB, column3X - 20, rowHeight[20] - 5);
             ctx.fillStyle = "#000000";
             ctx.font = "13px Arial";
             //// Row 17
             //// Row 18
             //// Row 19
-            var img = new Image();
+            // var img = new Image();
-            img.src = "/banklogo.png";
+            // img.src = "/banklogo.png";
-            img.crossOrigin = "anonymous";
+            // img.crossOrigin = "anonymous";
-            var maxwidth = 70;
+            // var maxwidth = 70;
-            var ratio = maxwidth / img.width;
+            // var ratio = maxwidth / img.width;
-            var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2);
+            // var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2);
-            var y = rowHeight[21] + offset; // to make it always center
+            // var y = rowHeight[21] + offset; // to make it always center
 
-            img.onload=function(){
+            // img.onload=function(){
-    		      ctx.drawImage(img, 50, 530, 80, 50);
+    		    //   ctx.drawImage(img, 50, 530, 80, 50);
-    	      };
+    	      // };
 
             // text
             ctx.font = "bold 14px Arial";
             ctx.textAlign = "center";
             ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80);
-            ctx.fillText("户名 : " + binding.value.china_company_name, column2X - 40, rowHeight[22] - 60);
+            ctx.fillText("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60);
-            ctx.fillText(binding.value.china_acc_no, column2X - 40, rowHeight[22] - 40);
+            ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40);
-            ctx.fillText(binding.value.china_bank_name , column2X - 40, rowHeight[22] - 20);
+            ctx.fillText(binding.value.bank_name , column2X - 40, rowHeight[22] - 20);
+            ctx.fillText(binding.value.bank_branch , column2X - 40, rowHeight[22] - 2);
             
             ctx.font = "13px Arial";
     	}, 1000,canvasElement,binding);

resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue

@@ -1,6 +1,8 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig" />
+    <x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')"
+      v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
 
     <div align="center">
       <h4 style="margin-top:5%;"></h4>
@@ -9,6 +11,49 @@
       <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>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-error="uploadError" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf" :on-remove="handleRemove"
+                  :multiple="false" list-type="picture">
+                  <el-button size="small" type="primary">Click to upload</el-button>
+                  <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
+                </el-upload>
+
+                <br>
+                <!-- upload image end -->
+                <!--                 <el-form-item prop="date">
+                  <el-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.number="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>
     <br>
     <el-row justify="center" align="center">
       <el-card class="box-card">
@@ -29,7 +74,7 @@
                   <tbody>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
+                        <div class="cell">Ref No :</div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
                         <div class="cell">{{ booking_details.id }}</div>
@@ -166,72 +211,40 @@
                 <!---->
                 <!---->
               </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>
 
+    <br>
     <el-row justify="center" align="center">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
-          <span>Upload China Bankslip</span>
+          <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">
-
+            <canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
-            <el-form ref="chinaSlipForm" :model="chinaSlipForm" :rules="rules">
+            <br>
-              <div align="center">
+            <el-button @click="downloadReport()" type="text">Download Now</el-button>
-
+          </el-col>
-                <!-- upload image -->
+        </el-row>
-                <el-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'" 
+      </el-card>
-                :on-preview="handlePreview"
+      <br>
-                :on-error="uploadError"
+      <el-card class="box-card">
-                  accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
+        <div slot="header" class="clearfix">
-                  :on-remove="handleRemove" :multiple="false" list-type="picture">
+          <span>User BankinSlip</span>
-                  <el-button size="small" type="primary">Click to upload</el-button>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-                  <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
+        </div>
-                </el-upload>
+        <el-row :gutter="12">
-
+          <el-col :span="22" style="text-align:center">
-                <br>
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
-                <!-- upload image end -->
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
-<!--                 <el-form-item prop="date">
+              <p v-else>Download</p>
-                  <el-date-picker v-model="chinaSlipForm.date" type="date" placeholder="Pick a day" :picker-options="pickerOptions1">
+            </a>
-                  </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>
@@ -245,15 +258,17 @@
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
+  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
   import axios from 'axios'
 
   export default {
     components: {
-      'progress-track': ProgressTrack
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
     },
     data() {
       return {
-        trackerConfig :{
+        trackerConfig: {
           status: 5,
           term: null
         },
@@ -266,6 +281,7 @@
           user_bankslip_path: null,
         },
         supplier: null,
+        supplier_booking: {},
         supplier_options: null,
         chinaSlipForm: {
           actual_transfer_amount: null,
@@ -274,10 +290,16 @@
         },
         rules: {
           actual_transfer_amount: [{
-            required: true,
+              required: true,
-            message: 'Please input transfer amount',
+              message: 'Please input amount',
-            trigger: 'change'
+              trigger: 'change'
-          }],
+            },
+            {
+              type: 'number',
+              message: 'Amount must be a number',
+              trigger: 'change'
+            }
+          ],
           // date: [{
           //   required: true,
           //   message: 'Please input date',
@@ -326,7 +348,7 @@
 
       axios
         .get('/api/admin/booking/' + this.$route.params.id)
-        .then((response) => {      
+        .then((response) => {
           this.booking_details = response.data
           this.trackerConfig.term = response.data.term;
           loading.close()
@@ -337,6 +359,18 @@
             name: 'notfound'
           })
         })
+      axios.get('/api/supplier-booking/' + this.$route.params.id)
+        .then((response) => {
+          this.supplier_booking = response.data
+          loading.close()
+        }).catch((error) => {
+          console.log(error)
+          this.$router.push({
+            name: 'notfound'
+          })
+          loading.close()
+        })
+
     },
     methods: {
       submitChinaSlip(formName) {
@@ -350,7 +384,7 @@
               details: this.chinaSlipForm.details,
             }
 
-            axios.patch('/api/booking/' + this.booking_id +'/update-china-bankslip', newChinaSlip)
+            axios.patch('/api/booking/' + this.booking_id + '/update-china-bankslip', newChinaSlip)
               .then((response) => {
                 this.$message({
                   showClose: true,
@@ -376,11 +410,11 @@
           } else {
             this.loading_btn = false
             this.$message({
-                  showClose: true,
+              showClose: true,
-                  message: 'Please upload your bankin slip first.',
+              message: 'Please upload your bankin slip first.',
-                  type: 'warning',
+              type: 'warning',
-                  duration: 10000
+              duration: 10000
-                })
+            })
           }
         })
       },
@@ -390,8 +424,197 @@
       handlePreview(file) {
         console.log(file);
       },
-      uploadError(file,fileList){
+      uploadError(file, fileList) {
         this.$message.warning(`Incorrect file format or file size too big.`)
+      },
+      getExtension(path){
+        return path.slice(-3);
+      },
+      isImage(path){
+        var ext = this.getExtension(path);
+        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+      },
+      getURL(path){
+        var getUrl = window.location;
+        var baseUrl = getUrl.protocol + "//" + getUrl.host;
+        return baseUrl + path;
+      }
+    },
+    directives: {
+      insertMessage: function (canvasElement, binding) {
+        setTimeout(function (canvasElement, binding) {
+          ////////////////// variable //////////////////////////
+          var canvasWidth = 450;
+          var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390,
+            410,
+            470, 490, 510, 610, 630
+          ]
+          const canvasHeight = rowHeight[rowHeight.length - 1];
+
+          var column1X = 220;
+          var column2X = 320;
+          var column3X = 420;
+
+          ///////////////////Canvast Init////////////////////
+          var canvas = document.getElementById("myCanvas");
+          canvas.width = canvasWidth;
+          canvas.height = canvasHeight;
+          // Get canvas context
+          var ctx = canvasElement.getContext("2d");
+          // Clear the canvas
+          ctx.clearRect(0, 0, 300, 150);
+
+          ctx.fillStyle = "#FFFFFF";
+          ctx.fillRect(0, 0, canvasWidth, rowHeight[0]);
+          for (var i = 1; i < rowHeight.length; i++) {
+            if (i % 2 == 1)
+              ctx.fillStyle = "#A9D08E";
+            else
+              ctx.fillStyle = "#FFFFFF";
+            ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i]);
+          }
+          ///////////// fillup with text////////////////
+          //// config canvas
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          ctx.textAlign = "right";
+          //// Row 1
+          ctx.fillText("Ref No. :", column1X, rowHeight[1] - 5);
+          ctx.fillText(binding.value.booking_id, column3X, rowHeight[1] - 5);
+          //// Row 2
+          ctx.fillText("Date :", column1X, rowHeight[2] - 5);
+          ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5);
+          //// Row 3
+          ctx.fillText("Marking :", column1X, rowHeight[3] - 5);
+          ctx.font = "bold 14px Arial";
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText(binding.value.marking, column3X, rowHeight[3] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //// Row 4
+          ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5);
+          ctx.fillText(binding.value.order_no, column3X, rowHeight[4] - 5);
+          //// Row 4
+          ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
+          ctx.fillText(binding.value.payment_for, column3X, rowHeight[5] - 5);
+          //// Row 5
+          ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5);
+          ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5);
+          //// Row 6
+          ctx.fillText("Remark :", column1X, rowHeight[7] - 10);
+          //// Row 7
+          // Empty
+          //// Row 8
+          ctx.fillText("MYR/RM :", column1X, rowHeight[9] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[9] - 5);
+          ctx.font = "bold 14px Arial";
+          ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[9] - 5);
+          ctx.font = "13px Arial";
+          //// Row 8
+          ctx.fillText("* RATE :", column1X, rowHeight[10] - 5);
+          ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5);
+          //// Row 9
+          ctx.fillText("REBATE :", column1X, rowHeight[11] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[11] - 5);
+          ctx.font = "14px Arial";
+          ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5);
+          ctx.font = "13px Arial";
+          //// Row 10
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("CNY", column2X, rowHeight[12] - 5);
+          ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5);
+          ctx.font = "13px Arial";
+          //line
+          ctx.beginPath();
+          ctx.lineWidth = 1;
+          ctx.moveTo(column1X + 30, rowHeight[11]);
+          ctx.lineTo(column3X + 20, rowHeight[11]);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.lineWidth = 2;
+          ctx.moveTo(column1X + 30, rowHeight[12]);
+          ctx.lineTo(column3X + 20, rowHeight[12]);
+          ctx.stroke();
+          //// Row 11
+          ctx.fillText("MYR/RM :", column1X, rowHeight[14] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[14] - 5);
+          ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[14] - 5);
+          //// Row 12
+          // ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5);
+          // ctx.fillText("MYR", column2X, rowHeight[15] - 5);
+          // ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5);
+          //// Row 13
+
+          ctx.fillText("+ TAX " + (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :",
+            column1X, rowHeight[16] - 5); // TODO : Change to percentage 
+          ctx.fillText("MYR", column2X, rowHeight[16] - 5);
+          ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5);
+          // //// Row 14
+          // ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15);
+          // ctx.fillText("MYR", column2X, rowHeight[17] - 15);
+          // ctx.fillText("289.84", column3X, rowHeight[17] - 15);
+          //// Row 15
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("Bank In Amount :", column1X, rowHeight[18] - 5);
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText("MYR", column2X, rowHeight[18] - 5);
+          ctx.fillText(binding.value.amount_after_tax, column3X, rowHeight[18] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //line
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[17]);
+          ctx.lineTo(column3X + 20, rowHeight[17]);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[18] + 1);
+          ctx.lineTo(column3X + 20, rowHeight[18] + 1);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[18] - 2);
+          ctx.lineTo(column3X + 20, rowHeight[18] - 2);
+          ctx.stroke();
+          //// Row 16
+          // ctx.fillText("Rebate :", column1X, rowHeight[19] - 25);
+          // ctx.fillText("CNY", column2X, rowHeight[19] - 25);
+          // ctx.fillText("224.68", column3X, rowHeight[19] - 25);
+          //// Row 16
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("Bank In to Account Below :", column1X, rowHeight[20] - 5);
+          ctx.font = "bold italic 15px Arial";
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText("CNY", column2X, rowHeight[20] - 5);
+          ctx.fillText(binding.value.amountInRMB, column3X - 20, rowHeight[20] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //// Row 17
+          //// Row 18
+          //// Row 19
+          // var img = new Image();
+          // img.src = "/banklogo.png";
+          // img.crossOrigin = "anonymous";
+          // var maxwidth = 70;
+          // var ratio = maxwidth / img.width;
+          // var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2);
+          // var y = rowHeight[21] + offset; // to make it always center
+
+          // img.onload=function(){
+          //   ctx.drawImage(img, 50, 530, 80, 50);
+          // };
+
+          // text
+          ctx.font = "bold 14px Arial";
+          ctx.textAlign = "center";
+          ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80);
+          ctx.fillText("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60);
+          ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40);
+          ctx.fillText(binding.value.bank_name, column2X - 40, rowHeight[22] - 20);
+          ctx.fillText(binding.value.bank_branch, column2X - 40, rowHeight[22] - 2);
+
+          ctx.font = "13px Arial";
+        }, 1000, canvasElement, binding);
+
       }
     }
   }

resources/assets/js/pages/admin/booking/uploadInvoice.vue

@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig" />
+    <x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
 
     <div align="center">
       <h4 style="margin-top:5%;"></h4>
@@ -16,6 +17,56 @@
       <br>
       <!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
     </div>
+    <br>
+        <el-row v-if="booking_details.user_po_path" :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"
+                     :on-error="uploadError"
+                     accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
+                     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">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx 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" align="center">
+              <a target="_blank" :href="getURL(booking_details.user_po_path)">
+                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
+                <p v-else>Download</p>
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
     <br>
     <el-row justify="center" align="center">
       <el-card class="box-card">
@@ -36,7 +87,7 @@
                   <tbody>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
+                        <div class="cell">Ref No :</div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
                         <div class="cell">{{ booking_details.id }}</div>
@@ -88,10 +139,6 @@
                 <!---->
                 <!---->
               </div>
-              <!---->
-              <!---->
-              <!---->
-              <!---->
               <div class="el-table__column-resize-proxy" style="display: none;"></div>
             </div>
           </div>
@@ -181,55 +228,38 @@
     </el-row>
     <br>
 
-    <el-row v-if="booking_details.user_po_path" :gutter="12" justify="center" align="center">
+        <el-row justify="center" align="center">
-      <el-col :span="12">
+      <el-card class="box-card">
-        <el-card  class="box-card">
+        <div slot="header" class="clearfix">
-          <div slot="header" class="clearfix">
+          <span>Supplier Report</span>
-            <span>Upload Invoice</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
-          </div>
+        <el-row :gutter="12" style="text-align:center">
-
+          <el-col :span="20" style="text-align:center">
-          <!-- upload image -->
+            <canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
-          <el-upload :action="'/api/booking/' + booking_id + '/upload-invoice'" :on-exceed="handleExceed" :on-preview="handlePreview"
+            <br>
-                     :on-remove="handleRemove"
+            <el-button @click="downloadReport()" type="text">Download Now</el-button>
-                     :on-error="uploadError"
+          </el-col>
-                     accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
+        </el-row>
-                     class="upload-demo"
+      </el-card>
-                     drag
+      <br>
-                     multiple>
+      <el-card class="box-card">
-            <i class="el-icon-upload"/>
+        <div slot="header" class="clearfix">
-            <div class="el-upload__text">Drop file here or
+          <span>User BankinSlip</span>
-              <em>click to upload</em>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-            </div>
+        </div>
-            <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3mb</div>
+        <el-row :gutter="12">
-          </el-upload>
+          <el-col :span="22" style="text-align:center">
-
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
-          <br>
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
-
+              <p v-else>Download</p>
-          <div class="bottom clearfix" style="text-align:right;">
+            </a>
-            <el-button :loading="loading_btn" type="primary" @click="confirmInvoice">Submit</el-button>
+          </el-col>
-          </div>
+        </el-row>
-          <!-- upload image end -->
+      </el-card>
-
+      <br>
-        </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" align="center">
-              <a target="_blank" :href="getURL(booking_details.user_po_path)">
-                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
-                <p v-else>Download</p>
-              </a>
-            </el-col>
-          </el-row>
-        </el-card>
-      </el-col>
     </el-row>
+    <br>
   </el-main>
 </template>
 <style>
@@ -250,16 +280,18 @@
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
+  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
   import axios from 'axios'
 
   export default {
     components: {
-      'progress-track': ProgressTrack
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
     },
     data() {
       return {
         trackerConfig :{
-          status: 6,
+          status: null,
           term: null
         },
         loading_btn: false,
@@ -272,6 +304,7 @@
         },
         supplier: null,
         supplier_options: null,
+        supplier_booking : {},
         chinaSlipForm: {
           actual_transfer_amount: null,
           date: null,
@@ -334,7 +367,8 @@
         .then((response) => {
           loading.close()
           this.booking_details = response.data
-          this.trackerConfig.term = response.data.term;
+          this.trackerConfig.term = response.data.term
+          this.trackerConfig.status = response.data.admin_status
         }).catch((error) => {
           console.log(error)
           loading.close()
@@ -342,6 +376,18 @@
             name: 'notfound'
           })
         })
+
+      axios.get('/api/supplier-booking/' + this.$route.params.id)
+        .then((response) => {
+          this.supplier_booking = response.data
+          loading.close()
+        }).catch((error) => {
+          console.log(error)
+          this.$router.push({
+            name: 'notfound'
+          })
+          loading.close()
+        })
     },
     methods: {
       confirmInvoice () {
@@ -383,6 +429,7 @@
       uploadError(file,fileList){
         this.$message.warning(`Incorrect file format or file size too big.`)
       },
+      // TODO : refactor into library since many pages are using this 
       getExtension(path){
        return path.slice(-3);
       },
@@ -394,6 +441,182 @@
         var getUrl = window.location;
         var baseUrl = getUrl.protocol + "//" + getUrl.host;
         return baseUrl + path;
+      },
+      
+    },
+        directives: {
+      insertMessage: function (canvasElement, binding) {
+      	setTimeout(function (canvasElement, binding) {
+            ////////////////// variable //////////////////////////
+            var canvasWidth = 450;
+            var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390, 410,
+              470, 490, 510, 610, 630
+            ]
+            const canvasHeight = rowHeight[rowHeight.length - 1];
+
+            var column1X = 220;
+            var column2X = 320;
+            var column3X = 420;
+
+            ///////////////////Canvast Init////////////////////
+            var canvas = document.getElementById("myCanvas");
+            canvas.width = canvasWidth;
+            canvas.height = canvasHeight;
+            // Get canvas context
+            var ctx = canvasElement.getContext("2d");
+            // Clear the canvas
+            ctx.clearRect(0, 0, 300, 150);
+
+            ctx.fillStyle = "#FFFFFF";
+            ctx.fillRect(0, 0, canvasWidth, rowHeight[0]);
+            for (var i = 1; i < rowHeight.length; i++) {
+              if (i % 2 == 1)
+                ctx.fillStyle = "#A9D08E";
+              else
+                ctx.fillStyle = "#FFFFFF";
+              ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i]);
+            }
+            ///////////// fillup with text////////////////
+            //// config canvas
+            ctx.fillStyle = "#000000";
+            ctx.font = "13px Arial";
+            ctx.textAlign = "right";
+            //// Row 1
+            ctx.fillText("Ref No. :", column1X, rowHeight[1] - 5);
+            ctx.fillText(binding.value.booking_id, column3X, rowHeight[1] - 5);
+            //// Row 2
+            ctx.fillText("Date :", column1X, rowHeight[2] - 5);
+            ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5);
+            //// Row 3
+            ctx.fillText("Marking :", column1X, rowHeight[3] - 5);
+            ctx.font = "bold 14px Arial";
+            ctx.fillStyle = "#0070D5";
+            ctx.fillText(binding.value.marking, column3X, rowHeight[3] - 5);
+            ctx.fillStyle = "#000000";
+            ctx.font = "13px Arial";
+            //// Row 4
+            ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5);
+            ctx.fillText(binding.value.order_no, column3X, rowHeight[4] - 5);
+            //// Row 4
+            ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
+            ctx.fillText(binding.value.payment_for, column3X, rowHeight[5] - 5);
+            //// Row 5
+            ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5);
+            ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5);
+            //// Row 6
+            ctx.fillText("Remark :", column1X, rowHeight[7] - 10);
+            //// Row 7
+            // Empty
+            //// Row 8
+            ctx.fillText("MYR/RM :", column1X, rowHeight[9] - 5);
+            ctx.fillText("MYR", column2X, rowHeight[9] - 5);
+            ctx.font = "bold 14px Arial";
+            ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[9] - 5);
+            ctx.font = "13px Arial";
+            //// Row 8
+            ctx.fillText("* RATE :", column1X, rowHeight[10] - 5);
+            ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5);
+            //// Row 9
+            ctx.fillText("REBATE :", column1X, rowHeight[11] - 5);
+            ctx.fillText("MYR", column2X, rowHeight[11] - 5);
+            ctx.font = "14px Arial";
+            ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5);
+            ctx.font = "13px Arial";
+            //// Row 10
+            ctx.font = "bold 14px Arial";
+            ctx.fillText("CNY", column2X, rowHeight[12] - 5);
+            ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5);
+            ctx.font = "13px Arial";
+            //line
+            ctx.beginPath();
+            ctx.lineWidth = 1;
+            ctx.moveTo(column1X + 30, rowHeight[11]);
+            ctx.lineTo(column3X + 20, rowHeight[11]);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.lineWidth = 2;
+            ctx.moveTo(column1X + 30, rowHeight[12]);
+            ctx.lineTo(column3X + 20, rowHeight[12]);
+            ctx.stroke();
+            //// Row 11
+            ctx.fillText("MYR/RM :", column1X, rowHeight[14] - 5);
+            ctx.fillText("MYR", column2X, rowHeight[14] - 5);
+            ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[14] - 5);
+            //// Row 12
+            // ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5);
+            // ctx.fillText("MYR", column2X, rowHeight[15] - 5);
+            // ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5);
+            //// Row 13
+            
+            ctx.fillText("+ TAX "+ (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :", column1X, rowHeight[16] - 5); // TODO : Change to percentage 
+            ctx.fillText("MYR", column2X, rowHeight[16] - 5);
+            ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5);
+            // //// Row 14
+            // ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15);
+            // ctx.fillText("MYR", column2X, rowHeight[17] - 15);
+            // ctx.fillText("289.84", column3X, rowHeight[17] - 15);
+            //// Row 15
+            ctx.font = "bold 14px Arial";
+            ctx.fillText("Bank In Amount :", column1X, rowHeight[18] - 5);
+            ctx.fillStyle = "#0070D5";
+            ctx.fillText("MYR", column2X, rowHeight[18] - 5);
+            ctx.fillText(binding.value.amount_after_tax, column3X, rowHeight[18] - 5);
+            ctx.fillStyle = "#000000";
+            ctx.font = "13px Arial";
+            //line
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(column1X + 30, rowHeight[17]);
+            ctx.lineTo(column3X + 20, rowHeight[17]);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(column1X + 30, rowHeight[18] + 1);
+            ctx.lineTo(column3X + 20, rowHeight[18] + 1);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(column1X + 30, rowHeight[18] - 2);
+            ctx.lineTo(column3X + 20, rowHeight[18] - 2);
+            ctx.stroke();
+            //// Row 16
+            // ctx.fillText("Rebate :", column1X, rowHeight[19] - 25);
+            // ctx.fillText("CNY", column2X, rowHeight[19] - 25);
+            // ctx.fillText("224.68", column3X, rowHeight[19] - 25);
+            //// Row 16
+            ctx.font = "bold 14px Arial";
+            ctx.fillText("Bank In to Account Below :", column1X, rowHeight[20] - 5);
+            ctx.font = "bold italic 15px Arial";
+            ctx.fillStyle = "#0070D5";
+            ctx.fillText("CNY", column2X, rowHeight[20] - 5);
+            ctx.fillText(binding.value.amountInRMB, column3X - 20, rowHeight[20] - 5);
+            ctx.fillStyle = "#000000";
+            ctx.font = "13px Arial";
+            //// Row 17
+            //// Row 18
+            //// Row 19
+            // var img = new Image();
+            // img.src = "/banklogo.png";
+            // img.crossOrigin = "anonymous";
+            // var maxwidth = 70;
+            // var ratio = maxwidth / img.width;
+            // var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2);
+            // var y = rowHeight[21] + offset; // to make it always center
+
+            // img.onload=function(){
+    		    //   ctx.drawImage(img, 50, 530, 80, 50);
+    	      // };
+
+            // text
+            ctx.font = "bold 14px Arial";
+            ctx.textAlign = "center";
+            ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80);
+            ctx.fillText("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60);
+            ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40);
+            ctx.fillText(binding.value.bank_name , column2X - 40, rowHeight[22] - 20);
+            ctx.fillText(binding.value.bank_branch , column2X - 40, rowHeight[22] - 2);
+            
+            ctx.font = "13px Arial";
+    	}, 1000,canvasElement,binding);
+	        
       }
     }
   }

resources/assets/js/pages/admin/booking/verification.vue

@@ -1,6 +1,7 @@
 <template>
   <el-main>
-    <progress-track v-model="trackerConfig" />
+    <x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
 
     <div align="center">
       <h4 style="margin-top:5%;"></h4>
@@ -31,7 +32,7 @@
                   <tbody>
                     <tr class="el-table__row">
                       <td class="el-table_2_column_9 is-right ">
-                        <div class="cell">Order Number :</div>
+                        <div class="cell">Ref No :</div>
                       </td>
                       <td class="el-table_2_column_10 is-left ">
                         <div class="cell">{{ booking_details.id }}</div>
@@ -256,11 +257,13 @@
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
+  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
   import axios from 'axios'
 
   export default {
     components: {
-      'progress-track': ProgressTrack
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
     },
     data() {
       return {
@@ -306,6 +309,7 @@
       approveUserSlip() {
         this.loading_btn = true
 
+        // TODO : this no longer used
         let newApprove = {
           estimated_arrival_time: this.estimated_arrival_time
         }
@@ -337,6 +341,7 @@
         this.centerDialogVisible = false
 
         let newApprove = {
+          // TODO : this no longer used 
           estimated_arrival_time: this.estimated_arrival_time,
           reject_reason: this.reject_reason
         }

resources/assets/js/pages/admin/booking/x2Completed.vue

@@ -0,0 +1,549 @@
+<template>
+  <el-main>
+    <x2-progress-track v-if="(booking_details.admin_status == 'x2_cash' || booking_details.admin_status == 'x2_cheque' || booking_details.admin_status == 'x2_ba')" v-model="trackerConfig" />
+    <progress-track v-else v-model="trackerConfig" />
+
+    <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 justify="center" align="center">
+      <el-col>
+        <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">
+            <el-col align="center">
+              <div v-for="cn_bankslip in booking_details.china_bankslip_path" :key='cn_bankslip'>
+                <a target="_blank" :href="getURL(cn_bankslip)">
+                  <img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
+                  <p v-else>Download</p>
+                  <br/>
+                </a>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+      </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="210">
+                    <col name="el-table_2_column_10" width="210">
+                  </colgroup>
+                  <tbody>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Ref No :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.id }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Date :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.created_at }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Customer Marking :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.marking }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Term :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.term }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Beneficiary Account : </div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{booking_details.account_name}}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Beneficiary Account Number : </div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{booking_details.account_num}}</div>
+                      </td>
+                    </tr>
+                    <!---->
+                  </tbody>
+                </table>
+                <!---->
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <!---->
+              <!---->
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+            </div>
+          </div>
+          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
+            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
+              <div class="hidden-columns">
+                <div></div>
+                <div></div>
+              </div>
+              <!---->
+              <div class="el-table__body-wrapper is-scrolling-none">
+                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
+                  <colgroup>
+                    <col name="el-table_3_column_11" width="200">
+                    <col name="el-table_3_column_12" width="200">
+                  </colgroup>
+                  <tbody>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">CNY/RMB :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">CNY {{ booking_details.amount }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">+ Service Charge :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">CNY {{ booking_details.service_charge }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">/ RATE :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">{{ booking_details.rate }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">MYR {{ booking_details.bia }}</div>
+                      </td>
+                    </tr>
+                    <!-- <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">+ GST 6% :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">MYR 4,430.88</div>
+                      </td>
+                    </tr> -->
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell"><b>MYR {{ booking_details.bia }}</b></div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell"></div>
+                      </td>
+                    </tr>
+                    <!---->
+                  </tbody>
+                </table>
+                <!---->
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <!---->
+              <!---->
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+            </div>
+          </div>
+        </div>
+        <!-- <el-row :gutter="12">
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+        </el-row> -->
+      </el-card>
+    </el-row>
+    <br>
+      <el-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">
+            <canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
+            <br>
+            <el-button @click="downloadReport()" type="text">Download Now</el-button>
+          </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">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
+            </a>
+          </el-col>
+        </el-row>
+      </el-card>
+    </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">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
+            </a>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+  .image {
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-left: auto;
+      margin-right: auto;
+      width: 150px;
+      display: block;
+  }
+  .image:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
+</style>
+<script>
+  import ProgressTrack from '~/components/AdminProgressTrack'
+  import X2ProgressTrack from '~/components/X2AdminProgressTrack'
+  import axios from 'axios'
+
+  export default {
+    components: {
+      'progress-track': ProgressTrack,
+      'x2-progress-track': X2ProgressTrack
+  },
+  data () {
+    return {
+      trackerConfig :{
+          status: 8,
+          term: null
+        },
+      supplier_booking: {},
+      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
+        this.trackerConfig.term = response.data.term;
+        loading.close()
+      }).catch((error) => {
+        console.log(error)
+        loading.close()
+        this.$router.push({
+          name: 'notfound'
+        })
+      })
+    axios.get('/api/supplier-booking/' + this.$route.params.id)
+      .then((response) => {
+        this.supplier_booking = response.data
+        loading.close()
+      }).catch((error) => {
+        console.log(error)
+        this.$router.push({
+          name: 'notfound'
+        })
+        loading.close()
+      })
+  },
+  methods: {
+    getExtension(path){
+      return path.slice(-3);
+    },
+    isImage(path){
+      var ext = this.getExtension(path);
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+    },
+    getURL(path){
+      var getUrl = window.location;
+      var baseUrl = getUrl.protocol + "//" + getUrl.host;
+      return baseUrl + path;
+    }
+  },
+     directives: {
+      insertMessage: function (canvasElement, binding) {
+        setTimeout(function (canvasElement, binding) {
+          ////////////////// variable //////////////////////////
+          var canvasWidth = 450;
+          var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390,
+            410,
+            470, 490, 510, 610, 630
+          ]
+          const canvasHeight = rowHeight[rowHeight.length - 1];
+
+          var column1X = 220;
+          var column2X = 320;
+          var column3X = 420;
+
+          ///////////////////Canvast Init////////////////////
+          var canvas = document.getElementById("myCanvas");
+          canvas.width = canvasWidth;
+          canvas.height = canvasHeight;
+          // Get canvas context
+          var ctx = canvasElement.getContext("2d");
+          // Clear the canvas
+          ctx.clearRect(0, 0, 300, 150);
+
+          ctx.fillStyle = "#FFFFFF";
+          ctx.fillRect(0, 0, canvasWidth, rowHeight[0]);
+          for (var i = 1; i < rowHeight.length; i++) {
+            if (i % 2 == 1)
+              ctx.fillStyle = "#A9D08E";
+            else
+              ctx.fillStyle = "#FFFFFF";
+            ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i]);
+          }
+          ///////////// fillup with text////////////////
+          //// config canvas
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          ctx.textAlign = "right";
+          //// Row 1
+          ctx.fillText("Ref No. :", column1X, rowHeight[1] - 5);
+          ctx.fillText(binding.value.booking_id, column3X, rowHeight[1] - 5);
+          //// Row 2
+          ctx.fillText("Date :", column1X, rowHeight[2] - 5);
+          ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5);
+          //// Row 3
+          ctx.fillText("Marking :", column1X, rowHeight[3] - 5);
+          ctx.font = "bold 14px Arial";
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText(binding.value.marking, column3X, rowHeight[3] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //// Row 4
+          ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5);
+          ctx.fillText(binding.value.order_no, column3X, rowHeight[4] - 5);
+          //// Row 4
+          ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
+          ctx.fillText(binding.value.payment_for, column3X, rowHeight[5] - 5);
+          //// Row 5
+          ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5);
+          ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5);
+          //// Row 6
+          ctx.fillText("Remark :", column1X, rowHeight[7] - 10);
+          //// Row 7
+          // Empty
+          //// Row 8
+          ctx.fillText("MYR/RM :", column1X, rowHeight[9] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[9] - 5);
+          ctx.font = "bold 14px Arial";
+          ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[9] - 5);
+          ctx.font = "13px Arial";
+          //// Row 8
+          ctx.fillText("* RATE :", column1X, rowHeight[10] - 5);
+          ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5);
+          //// Row 9
+          ctx.fillText("REBATE :", column1X, rowHeight[11] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[11] - 5);
+          ctx.font = "14px Arial";
+          ctx.fillText(binding.value.rebate, column3X, rowHeight[11] - 5);
+          ctx.font = "13px Arial";
+          //// Row 10
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("CNY", column2X, rowHeight[12] - 5);
+          ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5);
+          ctx.font = "13px Arial";
+          //line
+          ctx.beginPath();
+          ctx.lineWidth = 1;
+          ctx.moveTo(column1X + 30, rowHeight[11]);
+          ctx.lineTo(column3X + 20, rowHeight[11]);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.lineWidth = 2;
+          ctx.moveTo(column1X + 30, rowHeight[12]);
+          ctx.lineTo(column3X + 20, rowHeight[12]);
+          ctx.stroke();
+          //// Row 11
+          ctx.fillText("MYR/RM :", column1X, rowHeight[14] - 5);
+          ctx.fillText("MYR", column2X, rowHeight[14] - 5);
+          ctx.fillText(binding.value.amount_in_myr, column3X, rowHeight[14] - 5);
+          //// Row 12
+          // ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5);
+          // ctx.fillText("MYR", column2X, rowHeight[15] - 5);
+          // ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5);
+          //// Row 13
+
+          ctx.fillText("+ TAX " + (Math.round((binding.value.tax_rate * 100 - 100) * 100) / 100) + "% :",
+            column1X, rowHeight[16] - 5); // TODO : Change to percentage 
+          ctx.fillText("MYR", column2X, rowHeight[16] - 5);
+          ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5);
+          // //// Row 14
+          // ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15);
+          // ctx.fillText("MYR", column2X, rowHeight[17] - 15);
+          // ctx.fillText("289.84", column3X, rowHeight[17] - 15);
+          //// Row 15
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("Bank In Amount :", column1X, rowHeight[18] - 5);
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText("MYR", column2X, rowHeight[18] - 5);
+          ctx.fillText(binding.value.amount_after_tax, column3X, rowHeight[18] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //line
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[17]);
+          ctx.lineTo(column3X + 20, rowHeight[17]);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[18] + 1);
+          ctx.lineTo(column3X + 20, rowHeight[18] + 1);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.moveTo(column1X + 30, rowHeight[18] - 2);
+          ctx.lineTo(column3X + 20, rowHeight[18] - 2);
+          ctx.stroke();
+          //// Row 16
+          // ctx.fillText("Rebate :", column1X, rowHeight[19] - 25);
+          // ctx.fillText("CNY", column2X, rowHeight[19] - 25);
+          // ctx.fillText("224.68", column3X, rowHeight[19] - 25);
+          //// Row 16
+          ctx.font = "bold 14px Arial";
+          ctx.fillText("Bank In to Account Below :", column1X, rowHeight[20] - 5);
+          ctx.font = "bold italic 15px Arial";
+          ctx.fillStyle = "#0070D5";
+          ctx.fillText("CNY", column2X, rowHeight[20] - 5);
+          ctx.fillText(binding.value.amountInRMB, column3X - 20, rowHeight[20] - 5);
+          ctx.fillStyle = "#000000";
+          ctx.font = "13px Arial";
+          //// Row 17
+          //// Row 18
+          //// Row 19
+          // var img = new Image();
+          // img.src = "/banklogo.png";
+          // img.crossOrigin = "anonymous";
+          // var maxwidth = 70;
+          // var ratio = maxwidth / img.width;
+          // var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2);
+          // var y = rowHeight[21] + offset; // to make it always center
+
+          // img.onload=function(){
+          //   ctx.drawImage(img, 50, 530, 80, 50);
+          // };
+
+          // text
+          ctx.font = "bold 14px Arial";
+          ctx.textAlign = "center";
+          ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80);
+          ctx.fillText("户名 : " + binding.value.acc_name, column2X - 40, rowHeight[22] - 60);
+          ctx.fillText(binding.value.acc_no, column2X - 40, rowHeight[22] - 40);
+          ctx.fillText(binding.value.bank_name, column2X - 40, rowHeight[22] - 20);
+          ctx.fillText(binding.value.bank_branch, column2X - 40, rowHeight[22] - 2);
+
+          ctx.font = "13px Arial";
+        }, 1000, canvasElement, binding);
+
+      }
+    }
+}
+</script>

resources/assets/js/pages/admin/complete-orders.vue

@@ -6,7 +6,7 @@
     </div>
     <h1 align="center" style="margin-bottom:50px;">Completed Orders</h1>
     <el-table :data="tableData" stripe height="500" style="width: 100%">
-        <el-table-column label="No." prop="id" sortable></el-table-column>
+        <el-table-column label="Ref No." prop="id" sortable></el-table-column>
         <el-table-column label="Order Date"  prop="created_at" width="180" sortable></el-table-column>
         <el-table-column label="Marking" width="120" prop="marking"></el-table-column>
         <el-table-column label="Rate" prop="rate" width="74"></el-table-column>

resources/assets/js/pages/admin/home.vue

@@ -1,26 +1,27 @@
 <template>
 <div>
   <div align="right">
-<el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button>
+<el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking(); RefreshBookingTableComplete()">Refresh</el-button>
 </div>
 
- 
-
   <!-- Booking Table -->
+
+<el-tabs type="border-card" class="table-switch">
+  <el-tab-pane label="Booking Table">
   <el-row :gutter="20">
     <div>
-      <el-table :data="bookingTable">
+      <el-table :data="bookingTable" :default-sort = "{prop: 'date', order: 'descending'}">
-        <el-table-column label="No." width="100">
+        <el-table-column label="Ref 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-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
         </el-table-column>
         <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
         <el-table-column label="Marking" width="120" prop="marking" />
         <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandlerTerm" label="Term" prop="term" width="100"/>
         <el-table-column label="Rate" width="74" prop="rate" />
-        <el-table-column label="Amount" prop="amount" justify="center" width="110" />
+        <el-table-column label="Amount" prop="amount" justify="center" width="110" sortable />
         <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandlerTranferAmount" label="Transfer Amount"
-                         prop="transfer_amount" width="170" />
+                         prop="transfer_amount" width="180" sortable/>
         <!-- <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> -->
@@ -38,14 +39,23 @@
         <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
         <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
         <el-table-column label="" width="180">
-          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id) }"> View Status </el-button>
+          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> 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-column>
-      </el-table>
+        </el-table>
+        <div align="right">
+      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
+        Previous
+      </el-button>
+      <span>Page {{pagination.current_page}} of {{pagination.last_page}}</span>
+      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.next_page_url)" :disabled="!pagination.next_page_url">
+        Next
+      </el-button>
     </div>
+<<<<<<< HEAD
   </el-row>
   <div align="right">
       <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
@@ -57,9 +67,81 @@
       </el-button>
     </div>
   <!-- Booking Table-end -->
+=======
+      </div>
+    </el-row><br><br></el-tab-pane>
+      
+  <el-tab-pane label="Completed">
+  <el-row :gutter="20">
+      <div>
+        <el-table :data="bookingTableComplete">
+          <el-table-column label="Ref 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.term) }"> {{ scope.row.id }}</el-button>
+          </el-table-column>
+          <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
+          <el-table-column label="Marking" width="120" prop="marking" />
+          <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandlerTerm" label="Term" prop="term" width="100"/> -->
+          <el-table-column label="Rate" width="74" prop="rate" />
+          <el-table-column label="Amount" prop="amount" justify="center" width="110" sortable/>
+          <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandlerTranferAmount" label="Transfer Amount"
+                           prop="transfer_amount" width="180" sortable/>
+          <!-- <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" :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterHandlerStatus" prop="status_desc">
+            <template slot-scope="scope">
+              <el-popover trigger="click" placement="top">
+                <p>{{ scope.row.status_desc }}</p>
+                <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="filterHandlerStatus"
+                           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> -->
+            <el-table-column label="" width="180">
+          <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.admin_status, scope.row.id, scope.row.term) }"> 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 align="right">
+      <el-button type="primary" size="mini" @click="fetchCompletePaginateBooking(completePagination.prev_page_url)" :disabled="!completePagination.prev_page_url">
+        Previous
+      </el-button>
+      <span>Page {{completePagination.current_page}} of {{completePagination.last_page}}</span>
+      <el-button type="primary" size="mini" @click="fetchCompletePaginateBooking(completePagination.next_page_url)" :disabled="!completePagination.next_page_url">
+        Next
+      </el-button>
+    </div>
+      </div>
+    </el-row><br><br>
+  </el-tab-pane>
+</el-tabs>
+
+
+
+
+  
+    <!-- Booking Table-end -->
+>>>>>>> 9aaafd24d6527f6f6e60dfeaf2846fbc42363eed
   </div>
 </template>
-
+<style type="text/css">
+  .el-table__column-filter-trigger i {
+    font-size: 18px;
+    font-weight: 900;
+    vertical-align: sub;
+  }
+</style>
 <script>
 import axios from 'axios'
 
@@ -68,23 +150,46 @@ export default {
   data () {
     return {
       status: null,
+<<<<<<< HEAD
       bookingTable: [
       ],
       url: 'api/admin/booking', 
       pagination: [],  
+=======
+      bookingTable: [],
+      bookingTableComplete: [],
+      url: 'api/admin/booking',
+      completeBookingurl : "api/admin-complete-booking",
+      pagination: [],
+      completePagination: [],
+
+>>>>>>> 9aaafd24d6527f6f6e60dfeaf2846fbc42363eed
       loading_btn: false,
     }
   },
   mounted () {
-    this.getBooking()
+    this.getBooking();
+    this.getBookingTableComplete();
   },
   methods: {
-    getBooking() {
+    getBooking(){
       let $this = this
       axios.get(this.url).then(response => {
+<<<<<<< HEAD
         this.bookingTable = response.data.data
         $this.makePagination(response.data)
 
+=======
+        this.bookingTable = response.data.data;
+        $this.makePagination(response.data);
+      })
+    },
+    getBookingTableComplete(){
+      let $this = this
+      axios.get(this.completeBookingurl).then(response => {
+        this.bookingTableComplete = response.data.data
+        $this.makeCompletePagination(response.data)
+>>>>>>> 9aaafd24d6527f6f6e60dfeaf2846fbc42363eed
       })
     },
     RefreshBooking() {
@@ -101,6 +206,17 @@ export default {
         })
       })
     },
+<<<<<<< HEAD
+=======
+    RefreshBookingTableComplete() {
+      let $this = this
+      this.loading_btn = true
+      axios.get(this.completeBookingurl).then(response => {
+        this.loading_btn = false;
+        this.bookingTableComplete = response.data.data
+      })
+    },
+>>>>>>> 9aaafd24d6527f6f6e60dfeaf2846fbc42363eed
     makePagination(data){
       let pagination ={
         current_page: data.current_page,
@@ -109,12 +225,33 @@ export default {
         prev_page_url: data.prev_page_url
       }
       this.pagination = pagination
+<<<<<<< HEAD
       console.log(this.pagination)
+=======
+    },
+     makeCompletePagination(data){
+      let pagination ={
+        current_page: data.current_page,
+        last_page: data.last_page,
+        next_page_url: data.next_page_url,
+        prev_page_url: data.prev_page_url
+      }
+      this.completePagination = pagination
+>>>>>>> 9aaafd24d6527f6f6e60dfeaf2846fbc42363eed
     },
     fetchPaginateBooking(url) {
       this.url = url
       this.getBooking()
+<<<<<<< HEAD
     },
+=======
+     
+    },
+    fetchCompletePaginateBooking(url) {
+      this.completeBookingurl = url
+      this.getBookingTableComplete()
+     },
+>>>>>>> 9aaafd24d6527f6f6e60dfeaf2846fbc42363eed
     filterHandlerStatus (value, row, column) {
       const status = row.track_status;
       if(value ==="Success")
@@ -130,7 +267,7 @@ export default {
       const term = row.term;
       return value.toLowerCase() === term.substring(0,2);
     },
-    BookingStatus (status, booking_id) {
+    BookingStatus (status, booking_id, term) {
       // TODO : Get booking status from server
       this.status = status
       switch (this.status) {
@@ -166,6 +303,13 @@ export default {
           break
 
         case 6:
+          if(term == 'x2_cash' || term == 'x2_cheque' || term == 'x2_ba'){
+            this.$router.push({
+              name: 'booking.admin.x2complete',
+              params: {id: booking_id }
+            })
+            break
+          }
           this.$router.push({
             name: 'booking.admin.invoice',
             params: {id: booking_id }

resources/assets/js/pages/admin/upload-supplier-bank-slip.vue

@@ -5,7 +5,7 @@
             <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="Ref 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>