Halfway through the task

2026-08-19 12:24:09 +00:00 · 2018-07-17 16:41:09 +08:00
parent d38d801638 e81b9d1f20
commit d2337953a6
24 changed files with 717 additions and 529 deletions
@@ -97,7 +97,15 @@ class BookingController extends Controller
 				// TODO : transfer_amount change name to bia 
 				$booking->transfer_amount = $booking->bia; 
 		
-				$booking->track_status = "(". $booking->admin_status ."/7)";
+                $term = $booking->term;
+                if($term == "x1_ba" || $term == "x2_cheque"){
+                    $status = $booking->admin_status > 2 ? $booking->admin_status - 2 : $booking->admin_status;
+                    $booking->track_status = "(". $status ."/5)";
+                }
+                else{
+				    $booking->track_status = "(". $booking->admin_status ."/7)";
+                }
+
 				switch ($booking->admin_status) {
 					case 1:
 						$status_desc = "Waiting customer upload bank slip"; 
@@ -106,11 +114,15 @@ class BookingController extends Controller
 						$status_desc = "Verify user bank slip";  
 						break;    
 					case 3:
-						$status_desc = "Generate supplier booking report";    
-						break;  
+                        if($term !== "x1_ba" || $term !== "x2_cheque"){
+                            $status_desc = "Generate supplier booking report";    
+                            break;  
+                        }
 					case 4:
-						$status_desc = "Supplier booking report. Please confirm with your booking."; 
-						break;
+                        if($term !== "x1_ba" || $term !== "x2_cheque"){
+    						$status_desc = "Supplier booking report. Please confirm with your booking."; 
+    						break;
+                        }
 					case 5:
 						$status_desc = "Please, upload China Bankslip"; 
 						break;
@@ -619,7 +631,10 @@ class BookingController extends Controller

        // update booking status 
 		$booking->status = 4;
-		$booking->admin_status = 3; 
+        if($booking->term !== "x1_ba" || $booking->term !== "x2_cheque")
+    		$booking->admin_status = 3;
+        else
+            $booking->admin_status = 5;
        $booking->save();
        
        return response()->json(['message'=>'Success'],200);
@@ -0,0 +1,51 @@
+<?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()
+    {
+        //
+    }
+}
@@ -24,7 +24,7 @@ class DatabaseSeeder extends Seeder
        $this->call(MarkingSeeder::class);  
        DB::statement('SET FOREIGN_KEY_CHECKS=0;');
        $this->call(SettingMalaysiaBankSeeder::class);  
-        $this->call(SettingBeneficiaresSeeder::class);  
+        $this->call(SettingBeneficiarySeeder::class);  
        $this->call(SettingActiveBankSeeder::class);
        DB::statement('SET FOREIGN_KEY_CHECKS=1;');
    }
@@ -1,6 +1,8 @@
 <?php

 use Illuminate\Database\Seeder;
+use App\SettingMalaysiaBank;
+use App\SettingBeneficiary;

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

 use Illuminate\Database\Seeder;
+use App\SettingBeneficiary;

-class SettingBeneficiaresSeeder extends Seeder
+class SettingBeneficiarySeeder extends Seeder
 {
    /**
     * Run the database seeds.
@@ -1,10 +1,10 @@
 <template>
  <el-row>
-    <el-steps :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
+    <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-step title="Booking"/>
      <el-step title="Verification"/>
-      <el-step title="Supplier Booking"/>
-      <el-step title="Supplier Report"/>
+      <el-step title="Supplier Booking" v-if="!(value.term === 'x1_ba' || value.term === 'x2_cheque')"/>
+      <el-step title="Supplier Report" v-if="!(value.term === 'x1_ba' || value.term === 'x2_cheque')"/>
      <el-step title="Upload China Bankslip To Booking"/>
      <el-step title="Purchase Order/Invoice"/>
      <el-step title="Completed"/>
@@ -40,7 +40,6 @@
 export default {
  props: ['value'],
  data: () => ({
-    status: 1
  })
 }
 </script>
@@ -19,7 +19,25 @@

        <ul class="navbar-nav ml-auto">
          <!-- Authenticated -->
-          <li v-if="user" class="nav-item dropdown">
+          <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">
              <img :src="user.photo_url" class="rounded-circle profile-photo mr-1">
@@ -38,6 +56,8 @@
              </a>
            </div>
          </li>
+          </template>
+          </li>
          <!-- Guest -->
          <template v-else>
            <li class="nav-item">
@@ -67,7 +87,16 @@ export default {
  },

  data: () => ({
-    appName: window.config.appName
+    appName: window.config.appName,
+    notification:[{
+      message : "You have an unread message",
+      link : "http://www.google.com"
+    },
+    {
+      message : "There are 10 booking for your approval",
+      link : "http://www.yahoo.com"
+    }]
+
  }),

  computed: mapGetters({
@@ -1,6 +1,6 @@
 <template>
  <el-row>
-    <el-steps :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
+    <el-steps class="progressBar" :value="value" :active="value" :align-center="true" process-status="wait" finish-status="success">
      <el-step title="Booking"/>
      <el-step title="Payment"/>
      <el-step title="Order Confirmation"/>
@@ -13,10 +13,14 @@
 </template>

 <style type="text/css">
-    /* .el-row {
-        margin: 20px 0;
-    }
-
+    @media screen and (max-width: 800px) {
+		 .progressBar {
+            width: 60%;
+        }
+		
+	}
+   
+    /*
    .el-steps {
        padding-top: 70px;
    }
@@ -1,6 +1,6 @@
 <template>
  <el-main>
-    <progress-track v-model="status"/>
+    <progress-track v-model="trackerConfig"/>

    <div align="center">
      <h4 style="margin-top:5%;">Order Completed</h4>
@@ -300,7 +300,10 @@ export default {
  },
  data () {
    return {
-      status: 8,
+      trackerConfig :{
+          status: 8,
+          term: null
+        },
      loading_btn: false,
      booking_details:{
          id: null,
@@ -322,8 +325,8 @@ export default {
      .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()
@@ -1,6 +1,6 @@
 <template>
  <el-main>
-    <progress-track v-model="status" />
+    <progress-track v-model="trackerConfig" />

    <div align="center">
      <h4 style="margin-top:5%;"></h4>
@@ -247,7 +247,10 @@
    },
    data() {
      return {
-        status: 3,
+        trackerConfig :{
+          status: 3,
+          term: null
+        },
        loading_btn: false,
        booking_details: {
          id: null,
@@ -301,6 +304,7 @@
        .get('/api/admin/booking/' + this.$route.params.id)
        .then((response) => {   
          this.booking_details = response.data
+          this.trackerConfig.term = response.data.term;
        }).catch((error) => {
          console.log(error)
          this.$router.push({
@@ -1,6 +1,6 @@
 <template>
  <el-main>
-    <progress-track v-model="status" />
+    <progress-track v-model="trackerConfig" />

    <div align="center">
      <h4 style="margin-top:5%;"></h4>
@@ -260,7 +260,10 @@
    },
    data() {
      return {
-        status: 4,
+        trackerConfig :{
+          status: 4,
+          term: null
+        },
        loading_btn: false,
        booking_details: {
          id: null,
@@ -270,13 +273,23 @@
        },
        supplier_booking:{
        },
+        active_bank_setting: {
+          x1_bank_id: null,
+          x2_bank_id: null,
+          beneficiary_id: null
+        },
+        beneficiaryDetail:{
+          company_name: '奕继椿',
+          bank_name: '民生银行 深川红荔支行',
+          acc_no: '123456789',
+        },
        supplier: null,
        supplier_options: null,
        exampleContent: "This is TEXT"
-
      }
    },
    beforeCreate() {
+      
      const loading = this.$loading({
        lock: true,
        text: 'Please wait..',
@@ -287,41 +300,65 @@
      axios
        .get('/api/admin/booking/' + this.$route.params.id)
        .then((response) => {
-          loading.close()
          this.booking_details = response.data
+          this.trackerConfig.term = response.data.term;
        }).catch((error) => {
          console.log(error)
-          loading.close()
          this.$router.push({
            name: 'notfound'
          })
        })

-      axios
-        .get('/api/supplier-booking/' + this.$route.params.id)
+      axios.get('/api/supplier-booking/' + this.$route.params.id)
        .then((response) => {
-          loading.close()
          this.supplier_booking = response.data
        }).catch((error) => {
          console.log(error)
-          loading.close()
          this.$router.push({
            name: 'notfound'
          })
        })

-
-
+	  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(){
        let canvas = document.getElementById('myCanvas')
-     var dataString = canvas.toDataURL("image/png");
-     console.log(dataString)
-      var link = document.createElement("a");
-      link.download = 'image';
-      link.href = dataString;
-      link.click();
+        var dataString = canvas.toDataURL("image/png");
+        console.log(dataString)
+        var link = document.createElement("a");
+        link.download = 'image';
+        link.href = dataString;
+        link.click();
      },
      goToSupplierBooking(){
          this.$router.push({
@@ -330,7 +367,7 @@
          })
      },
      completeReport() {
-        // TODO : send request to change status
+    	// TODO : send request to change status
        this.loading_btn = true
        axios
          .post('/api/booking/' + this.$route.params.id + '/confirm-supplier')
@@ -362,174 +399,179 @@
            id: this.$route.params.id
          }
        })
-      }
-
+      },
    },
    directives: {
      insertMessage: 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];
+      	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;
+            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);
+            ///////////////////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("Payment Voucher :", column1X, rowHeight[1] - 5);
-        ctx.fillText(binding.value.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("CIEF/605HOS", 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);
-        //// Row 4
-        ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
-        ctx.fillText("Full Payment", 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.transfer_amount, 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
-        //// 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("4830.68", 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("+ SALES TAX (10%) :", column1X, rowHeight[16] - 5);
-        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("Customer 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.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("7692.17", 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
+            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("Payment Voucher :", column1X, rowHeight[1] - 5);
+            ctx.fillText(binding.value.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("CIEF/605HOS", 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);
+            //// Row 4
+            ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
+            ctx.fillText("Full Payment", 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.transfer_amount, 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
+            //// 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("4830.68", 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("+ SALES TAX (10%) :", column1X, rowHeight[16] - 5);
+            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("Customer 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.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("7692.17", 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("户名 : 奕继椿", column2X - 40, rowHeight[22] - 60);
-        ctx.fillText("6226 1906 8014 3314", column2X - 40, rowHeight[22] - 40);
-        ctx.fillText("民生银行 深川红荔支行", column2X - 40, rowHeight[22] - 20);
-        ctx.font = "13px Arial";
+            img.onload=function(){
+    		      ctx.drawImage(img, 50, 530, 80, 50);
+    	      };

+            // text
+            ctx.font = "bold 14px Arial";
+            ctx.textAlign = "center";
+            console.log(binding.value.amountInRMB);
+            console.log(binding.value);
+            ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80);
+            ctx.fillText("户名 : " + binding.value.china_company_name, column2X - 40, rowHeight[22] - 60);
+            ctx.fillText(binding.value.china_acc_no, column2X - 40, rowHeight[22] - 40);
+            ctx.fillText(binding.value.china_bank_name , column2X - 40, rowHeight[22] - 20);
+            
+            ctx.font = "13px Arial";
+    	}, 1000,canvasElement,binding);
+	        
      }
    }
+
  }
 </script>
@@ -1,6 +1,6 @@
 <template>
  <el-main>
-    <progress-track v-model="status" />
+    <progress-track v-model="trackerConfig" />

    <div align="center">
      <h4 style="margin-top:5%;"></h4>
@@ -250,7 +250,10 @@
    },
    data() {
      return {
-        status: 5,
+        trackerConfig :{
+          status: 5,
+          term: null
+        },
        loading_btn: false,
        booking_id: this.$route.params.id,
        booking_details: {
@@ -321,8 +324,9 @@
      axios
        .get('/api/admin/booking/' + this.$route.params.id)
        .then((response) => {      
-          loading.close()
          this.booking_details = response.data
+          this.trackerConfig.term = response.data.term;
+          loading.close()
        }).catch((error) => {
          loading.close()
          console.log(error)
@@ -1,6 +1,6 @@
 <template>
  <el-main>
-    <progress-track v-model="status" />
+    <progress-track v-model="trackerConfig" />

    <div align="center">
      <h4 style="margin-top:5%;"></h4>
@@ -255,7 +255,10 @@
    },
    data() {
      return {
-        status: 6,
+        trackerConfig :{
+          status: 6,
+          term: null
+        },
        loading_btn: false,
        booking_id: this.$route.params.id,
        booking_details: {
@@ -328,7 +331,7 @@
        .then((response) => {
          loading.close()
          this.booking_details = response.data
-          console.log(this.booking_details)
+          this.trackerConfig.term = response.data.term;
        }).catch((error) => {
          console.log(error)
          loading.close()
@@ -1,6 +1,6 @@
 <template>
  <el-main>
-    <progress-track v-model="status" />
+    <progress-track v-model="trackerConfig" />

    <div align="center">
      <h4 style="margin-top:5%;"></h4>
@@ -265,7 +265,10 @@
    },
    data() {
      return {
-        status: 2,
+        trackerConfig :{
+          status: 2,
+          term: null
+        },
        loading_btn: false,
        rejectDialogVisible: false,
        reject_reason: null,
@@ -289,7 +292,8 @@
      axios
        .get('/api/admin/booking/' + this.$route.params.id)
        .then((response) => {
-          this.booking_details = response.data
+          this.booking_details = response.data;
+          this.trackerConfig.term = response.data.term;
          loading.close()

        }).catch((error) => {
@@ -320,7 +324,7 @@
            })

            this.$router.push({
-              name: 'booking.admin.supplier'
+              name: this.booking_details.term === 'x1_ba' || this.booking_details.term === 'x2_cheque' ? 'booking.admin.cnslip' : 'booking.admin.supplier'
            })

            // pass variable to another router
@@ -70,6 +70,7 @@ export default {
      let $this = this
      axios.get(this.url).then(response => {
        this.bookingTable = response.data
+        console.log(this.bookingTable);
      })
    },
    filterTag (value, row) {
@@ -1,103 +1,107 @@
 <template>
-  <el-main>
-    <progress-track v-model="status"/>
+	<el-main>
+		<progress-track v-model="status"/>
+		<div align="center" v-if="booking.user_bankslip_path">
+			<h4 style="margin-top:5%" >
+			Your Bankslip Has Been Rejected, Please Reupload Your Bankslip <br>
+			Reason : {{ booking.reject_reason }}
+			</h4>
+			<br>
+			<br>
+		</div>
+		<div v-else align="center">
+			<h4 style="margin-top:5%;margin-bottom:5%;font-size:5vw">Waiting For Payment</h4>
+		</div>

-    <div align="center" v-if="booking.user_bankslip_path">
-      <h4 style="margin-top:5%" >
-        Your Bankslip Has Been Rejected, Please Reupload Your Bankslip <br>
-        Reason : {{ booking.reject_reason }}
-      </h4>
-      <br>
-      <br>
-    </div>
+		<el-row justify="center" align="center">
+			<table class="table-responsive el-table" style="display:table; width:70%; margin: 0 auto;">
+				<tbody>
+					<tr>
+						<td class="el-table_2_column_9 is-center ">Amount : </td>
+						<td class="el-table_2_column_9 is-center ">&nbsp;
+							<b> RMB {{ booking.amount }} </b>
+						</td>
+					</tr>
+					<tr>
+						<td class="el-table_2_column_9 is-center ">Bankin Amount : </td>
+						<td class="el-table_2_column_9 is-center ">&nbsp;
+							<b> MYR {{ booking.bankin_amount }} </b>
+						</td>
+					</tr>
+					<!--<tr>
+						<td align="center">
+							{{bankDetail.company_name}}<br/>
+							{{bankDetail.bank_name}} : {{bankDetail.acc_no}}
+						</td>
+					</tr>-->
+				</tbody>
+			</table>
+			
+			
+		</el-row>
+		<br>

-     <div v-else align="center">
-      <h4 style="margin-top:5%;">Waiting For Payment</h4>
-    </div>
+		<!-- action="https://jsonplaceholder.typicode.com/posts/" -->

-    <el-row justify="center" align="center">
-      <table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;">
-        <tbody>
-          <tr>
-            <td class="el-table_2_column_9 is-right ">Amount : </td>
-            <td class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
-              <b> RMB {{ booking.amount }} </b>
-            </td>
-          </tr>
-          <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">Bankin Amount : </td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
-              <b> MYR {{ booking.bankin_amount }} </b>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <table class="table-responsive el-table" style="display:table; width:50%; margin: 0 auto;"  align="center">
-      <tr>
-        <td align="center">TC Global Trade (M) Sdn Bhd (1190583-A) <br> GST : 001408413696 <br> HLB : 2200 0010 531 <br> MBB : 5148 4233 6341</td>
-        
-      </tr>
-            <!-- <tr><td align="center">GST : 001408413696</td></tr>
-            <tr><td align="center">HLB : 2200 0010 531</td></tr>
-            <tr><td align="center">MBB : 5148 4233 6341</td></tr>   -->
-            </table>
-    </el-row>
-    <br>
+		<div align="center">

-    <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
+			<vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
+			<template slot-scope="props">Time Remaining：<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
+			</vue-countdown>
+			<!-- <button v-on:click="startTimer">Start timer</button> -->
+		</div>
+		<br>

-    <div align="center">
+		<!-- upload image -->
+		<el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
+					list-type="picture-card" align="center">
+			<i class="el-icon-plus" />
+		</el-upload>
+		<el-dialog :visible.sync="dialogVisible">
+			<img :src="dialogImageUrl" width="100%" alt="">
+		</el-dialog>
+		<br>
+		<!-- upload image end -->

-      <vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
-        <template slot-scope="props">Time Remaining：<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
-      </vue-countdown>
-      <!-- <button v-on:click="startTimer">Start timer</button> -->
-    </div>
-    <br>
-
-    <!-- upload image -->
-    <el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
-               list-type="picture-card" align="center">
-      <i class="el-icon-plus" />
-    </el-upload>
-    <el-dialog :visible.sync="dialogVisible">
-      <img :src="dialogImageUrl" width="100%" alt="">
-    </el-dialog>
-    <br>
-    <!-- upload image end -->
-
-    <!-- <el-form label-width="300px">
-        <el-form-item label="Amount (RM) :"> -->
-    <div align="center">
-      Bankin Amount (RM) :
-      <el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
-        <div align="center">
-          <el-form-item prop="transfer_amount">
-            <el-input v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount" style="width: 20%"
-            />
-          </el-form-item>
-          <el-form-item>
-            <div align="center">
-              <el-button :loading="loading" type="primary" @click="submitUserSlip('user_slip_form')">Submit</el-button>
-              <router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
-                Upload Later
-              </router-link>
-            </div>
-          </el-form-item>
-        </div>
-      </el-form>
-      <br>
-      <br>
-    </div>
-    <!-- </el-form-item>
-    </el-form> -->
-
-  </el-main>
+		<!-- <el-form label-width="300px">
+		<el-form-item label="Amount (RM) :"> -->
+		<div align="center">
+			Bankin Amount (RM) :
+			<el-form ref="user_slip_form" :model="user_slip_form" :rules="rules">
+			<div align="center">
+				<el-form-item prop="transfer_amount">
+					<el-input class="transferAmountInput" v-model="user_slip_form.transfer_amount" type="text" placeholder="Transfer Amount"/>
+				</el-form-item>
+				<el-form-item>
+				<div align="center">
+					<el-button :loading="loading" type="primary" @click="submitUserSlip('user_slip_form')">Submit</el-button>
+					<router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
+					Upload Later
+					</router-link>
+				</div>
+				</el-form-item>
+			</div>
+			</el-form>
+			<br>
+			<br>
+		</div>
+		<!-- </el-form-item>
+		</el-form> -->
+	</el-main>
 </template>
 <style>
-  .booking-details {
-    font-weight: bold;
-  }
+	.booking-details {
+	font-weight: bold;
+	}
+	.transferAmountInput {
+		width: 20%;
+	}
+	@media screen and (max-width: 800px) {
+		.transferAmountInput {
+			width: 60%;
+		}
+		
+	}
 </style>
 <script>
 import VueCountdown from '@xkeshi/vue-countdown'
@@ -105,148 +109,197 @@ import ProgressTrack from '~/components/ProgressTrack'
 import axios from 'axios'

 export default {
-  middleware: ['auth'],
-  name: 'MyComponent',
-  components: {
-    'vue-countdown': VueCountdown,
-    'progress-track': ProgressTrack
-  },
-  data () {
-    return {
-      status: 2,
-      start: false,
-      loading: false,
-      dialogImageUrl: '',
-      dialogVisible: false,
-      booking_id: this.$route.params.id,
-      user_slip_form: {
-        transfer_amount: ''
-      },
-      booking: {
-        amount: '',
-        bankin_amount: '',
-        timeout: 1,
-        user_bankslip_path: null,
-        reject_reason: null,
-      },
-      rules: {
-        transfer_amount: [{
-          required: true,
-          message: 'Please input amount',
-          trigger: 'change'
-        } ]}
-    }
-  },
-  beforeCreate () {
-    const loading = this.$loading({
-      lock: true,
-      text: 'Please wait..',
-      spinner: 'el-icon-loading',
-      background: 'rgba(0, 0, 0, 0.7)'
-    })
+	middleware: ['auth'],
+	name: 'MyComponent',
+	components: {
+	'vue-countdown': VueCountdown,
+	'progress-track': ProgressTrack
+	},
+	data () {
+		return {
+			status: 2,
+			start: false,
+			loading: false,
+			dialogImageUrl: '',
+			dialogVisible: false,
+			booking_id: this.$route.params.id,
+			user_slip_form: {
+			transfer_amount: ''
+			},
+			booking: {
+			amount: '',
+			bankin_amount: '',
+			timeout: 1,
+			term : '123',
+			user_bankslip_path: null,
+			reject_reason: null,
+			},
+			rules: {
+			transfer_amount: [{
+				required: true,
+				message: 'Please input amount',
+				trigger: 'change'
+			}]
+			},
+			active_bank_setting: {
+				x1_bank_id: null,
+				x2_bank_id: null,
+				beneficiary_id: null
+			},
+			bankDetail : {},

-    axios
-      .get('/api/booking/' + this.$route.params.id)
-      .then((response) => {
-        console.log(response)
-        this.booking.amount = response.data.amount
-        this.booking.bankin_amount = response.data.bia
-        this.booking.timeout = response.data.timeout * 1000
+		}
+	},
+	beforeCreate () {
+		const loading = this.$loading({
+		lock: true,
+		text: 'Please wait..',
+		spinner: 'el-icon-loading',
+		background: 'rgba(0, 0, 0, 0.7)'
+		})

-        if (response.data.user_bankslip_path)
-        {
-          this.booking.user_bankslip_path = response.data.user_bankslip_path
-          this.booking.reject_reason = response.data.reject_reason
-        }
+		axios.get('/api/booking/' + this.$route.params.id)
+		.then((response) => {
+		this.booking.amount = response.data.amount;
+		this.booking.bankin_amount = response.data.bia;
+		this.booking.timeout = response.data.timeout * 1000;
+		this.booking.term = response.data.term;

-        this.start = true
-        loading.close()
+		if (response.data.user_bankslip_path)
+		{
+			this.booking.user_bankslip_path = response.data.user_bankslip_path
+			this.booking.reject_reason = response.data.reject_reason
+		}

-        if (this.booking.timeout < 0) {
-          this.$message({
-            showClose: true,
-            message: 'Booking timeout, please make another booking.',
-            type: 'error',
-            duration: 30000
-          })
-          this.$router.push({
-            name: 'home'
-          })
-        }
-      }).catch((error) => {
-        console.log(error)
-        loading.close()
-        this.$router.push({
-          name: 'notfound'
-        })
-      })
-  },
-  methods: {
-    handleCoutdownend () {
-      this.$message({
-        showClose: true,
-        message: 'Booking timeout, please make another booking.',
-        type: 'error',
-        duration: 30000
-      })
-      this.$router.push({
-        name: 'home'
-      })
-    },
-    handleRemove (file, fileList) {
-      console.log(file, fileList)
-    },
-    handlePictureCardPreview (file) {
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
-    },
-    submitUserSlip (formName) {
-      this.loading = true
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          let newConfirmation = {
-            amount: this.booking.amount,
-            term: this.term
-          }
-        } else {
-          this.loading = false
-        }
-      })
-      let newUserSlip = {
-        transfer_amount: this.user_slip_form.transfer_amount
-      }
-      axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount', newUserSlip)
-        .then((response) => {
-          this.$message({
-            showClose: true,
-            message: 'Your bankinslip has been submitted, please wait admin to approve.',
-            type: 'success',
-            duration: 5000
-          })
+		this.start = true
+		loading.close()

-          console.log(response)
-          this.$router.push({
-            name: 'home'
-          })
-        })
-        .catch((error) => {
-          this.loading = false
-          this.$message({
-            showClose: true,
-            message: 'Please upload your bankin slip first.',
-            type: 'warning',
-            duration: 10000
-          })
-          console.log(error)
-        })
-    },
-    handleTimeExpire () {
-      alert('Booking expired')
-    },
-    startTimer () {
-      this.start = true
-    }
+		if (this.booking.timeout < 0){
+			this.$message({
+			showClose: true,
+			message: 'Booking timeout, please make another booking.',
+			type: 'error',
+			duration: 30000
+			})
+			this.$router.push({
+			name: 'home'
+			})
+		}
+		}).catch((error) => {
+		console.log(error)
+		loading.close()
+		this.$router.push({
+			name: 'notfound'
+		})
+		})
+	},
+	beforeMount(){
+		this.updateBankDetail();
+	},
+	methods: {
+		handleCoutdownend () {
+			this.$message({
+			showClose: true,
+			message: 'Booking timeout, please make another booking.',
+			type: 'error',
+			duration: 30000
+			})
+			this.$router.push({
+			name: 'home'
+			})
+		},
+		handleRemove (file, fileList) {
+			// console.log(file, fileList)
+		},
+		handlePictureCardPreview (file) {
+			this.dialogImageUrl = file.url
+			this.dialogVisible = true
+		},
+		submitUserSlip (formName) {
+			this.loading = true
+			this.$refs[formName].validate((valid) => {
+			if (valid) {
+				let newConfirmation = {
+				amount: this.booking.amount,
+				term: this.term
+				}
+			} else {
+				this.loading = false
+			}
+			})
+			let newUserSlip = {
+			transfer_amount: this.user_slip_form.transfer_amount
+			}
+			axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount', newUserSlip)
+			.then((response) => {
+				this.$message({
+				showClose: true,
+				message: 'Your bankinslip has been submitted, please wait admin to approve.',
+				type: 'success',
+				duration: 5000
+				})

-  }
+				this.$router.push({
+				name: 'home'
+				})
+			})
+			.catch((error) => {
+				this.loading = false
+				this.$message({
+				showClose: true,
+				message: 'Please upload your bankin slip first.',
+				type: 'warning',
+				duration: 10000
+				})
+				console.log(error)
+			})
+		},
+		handleTimeExpire () {
+			alert('Booking expired')
+		},
+		startTimer () {
+			this.start = true;
+		},
+		updateBankDetail(){
+			axios.get('/api/active-bank')
+			.then((response) => {
+				this.active_bank_setting = response.data;
+				console.log(this.active_bank_setting.x1_bank_id);
+				this.getBankDetailWithTerm();
+			})
+			.catch((error) => {
+				console.log(error);
+				this.$message({
+					showClose: true,
+					message: 'Fetch data fail',
+					type: 'error',
+					duration: 10000
+				});
+			});
+		},
+		getBankDetailWithTerm(){
+			var url = '';
+			if(this.booking.term === 'x1_cash' || this.booking.term === 'x1_cheque' ||this.booking.term === 'x1_ba'){
+				url = '/api/malaysia-bank/' + this.active_bank_setting.x1_bank_id;
+			}
+			else if(this.booking.term === 'x2_cash' || this.booking.term === 'x2_cheque' ||this.booking.term === 'x2_ba'){
+				url = '/api/malaysia-bank/' + this.active_bank_setting.x2_bank_id;
+			}
+
+			axios.get(url)
+				.then((response) => {
+					this.bankDetail = response.data;
+				})
+				.catch((error) => {
+					console.log(error);
+					this.$message({
+						showClose: true,
+						message: 'Fetch data fail',
+						type: 'error',
+						duration: 10000
+					});
+				});
+		}
+	}
 }
 </script>
@@ -1,7 +1,5 @@
 <template>
-
  <el-main>
-
    <!-- Input-Amount -->
    <el-row :gutter="20" type="flex" justify="center" align="middle">
      <el-col :span="20">
@@ -9,7 +7,6 @@
          I need :
          <el-select v-model="value" placeholder="RMB">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
-            <!-- <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2" /> -->
          </el-select>
        </div>
      </el-col>
@@ -17,7 +14,7 @@
    <br>
    <el-row :gutter="20" type="flex" justify="center" align="middle">
      <el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8">
-        <div class="grid-content bg-purple" align="left">
+        <div class="grid-content bg-purple" align="right">
          <el-input v-model="booking.amount" placeholder="Amount" />
        </div>
      </el-col>
@@ -31,7 +28,7 @@
        <div class="grid-content bg-purple" align="right" />
      </el-col>
      <el-col>
-        <div class="grid-content bg-purple" align="left" />
+        <div class="grid-content bg-purple" align="right" />
      </el-col>
      <el-col>
        <div class="grid-content bg-purple" align="center">Cash/Bank Transfer</div>
@@ -46,7 +43,7 @@

    <el-row :gutter="20" type="flex" justify="center" align="middle">
      <el-col>
-        <el-tooltip class="item" effect="dark" content="Payment to China Supplier" placement="left">
+        <el-tooltip class="item" effect="dark" content="Payment to China Supplier" placement="right">
          <div class="grid-content bg-purple" align="right">
            <i type="button" class="el-icon-question" circle/>
          </div>
@@ -54,7 +51,7 @@
      </el-col>
      <!-- <el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle/></div></el-col> -->
      <el-col>
-        <div class="grid-content bg-purple" align="left">X1 :</div>
+        <div class="grid-content bg-purple" align="right">X1 :</div>
      </el-col>
      <el-col>
        <div class="grid-content bg-purple" align="center">{{ rate.x1_cash }}</div>
@@ -94,14 +91,14 @@
    <br>
    <el-row :gutter="20" type="flex" justify="center" align="middle">
      <el-col>
-        <el-tooltip class="item" effect="dark" content="Payment to China Supplier Only" placement="left">
+        <el-tooltip class="item" effect="dark" content="Payment to China Supplier Only" placement="right">
          <div class="grid-content bg-purple" align="right">
            <i type="button" class="el-icon-question" circle/>
          </div>
        </el-tooltip>
      </el-col>
      <el-col>
-        <div class="grid-content bg-purple" align="left">X2 :</div>
+        <div class="grid-content bg-purple" align="right">X2 :</div>
      </el-col>
      <el-col>
        <div class="grid-content bg-purple" align="center">{{ rate.x2_cash }}</div>
@@ -168,56 +165,39 @@

    <!-- Booking_confirmation_popup -->
    <el-dialog :visible.sync="dialogFormVisible1" :fullscreen="true" title="Booking Confirmation" center>
-
-      <!-- Table_booking_confirmation -->
-      <!-- <el-table :data="bookingConfirmTable" align="center">
-        <el-table-column prop="data1" align="right" width="200" />
-        <el-table-column prop="data2" align="left" width="200" />
-      </el-table> -->
-      <!-- Table_booking_confirmation-end -->
-
-      <table class="table-responsive el-table" style="display:table; width:80%; margin: 0 auto;">
+      <table class="table-responsive el-table" style="display:table; width:100%; margin: 0 auto;">
        <tbody>
          <tr>
-            <td class="el-table_2_column_9 is-right ">Date : </td>
-            <td class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.date }}</td>
+            <td class="el-table_2_column_9 is-center ">Date : </td>
+            <td class="el-table_2_column_9 is-center ">&nbsp;&nbsp; {{ bookingConfirmTable.date }}</td>
          </tr>
          <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">Customer Marking : </td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.marking }}</td>
+            <td width="200" class="el-table_2_column_9 is-center ">Customer Marking : </td>
+            <td width="200" class="el-table_2_column_9 is-center ">&nbsp;&nbsp; {{ bookingConfirmTable.marking }}</td>
          </tr>
          <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">Payment Method : </td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.payment_method }}</td>
+            <td width="200" class="el-table_2_column_9 is-center ">Payment Method : </td>
+            <td width="200" class="el-table_2_column_9 is-center ">&nbsp;&nbsp; {{ bookingConfirmTable.payment_method }}</td>
          </tr>
          <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">CNY/RMB : </td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.amount }}</td>
+            <td width="200" class="el-table_2_column_9 is-center ">CNY/RMB : </td>
+            <td width="200" class="el-table_2_column_9 is-center ">&nbsp;&nbsp; {{ bookingConfirmTable.amount }}</td>
          </tr>
          <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">+ Service Charge : </td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RMB {{ bookingConfirmTable.service_charge }}</td>
+            <td width="200" class="el-table_2_column_9 is-center ">+ Service Charge : </td>
+            <td width="200" class="el-table_2_column_9 is-center ">&nbsp;&nbsp; RMB {{ bookingConfirmTable.service_charge }}</td>
          </tr>
          <tr>
-            <td width="200" class="el-table_2_column_9 is-right "> RATE :</td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.rate }}</td>
+            <td width="200" class="el-table_2_column_9 is-center "> RATE :</td>
+            <td width="200" class="el-table_2_column_9 is-center ">&nbsp;&nbsp; {{ bookingConfirmTable.rate }}</td>
          </tr>
          <tr>
-            <td width="200" class="el-table_2_column_9 is-right "/>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; RM {{ bookingConfirmTable.bankin_amount }}</td>
+            <td width="200" class="el-table_2_column_9 is-center ">China Beneficiary Acc :</td>
+            <td width="200" class="el-table_2_column_9 is-center ">&nbsp;&nbsp; {{ bookingConfirmTable.account_name }}</td>
          </tr>
          <tr>
-            <td width="200" class="el-table_2_column_9 is-right "/>
-            <td width="200" class="el-table_2_column_9 is-left "/>
-          </tr>
-
-          <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">China Beneficiary Acc :</td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp; {{ bookingConfirmTable.account_name }}</td>
-          </tr>
-          <tr>
-            <td width="200" class="el-table_2_column_9 is-right ">Bank in Amount :</td>
-            <td width="200" class="el-table_2_column_9 is-left ">&nbsp;&nbsp;
+            <td width="200" class="el-table_2_column_9 is-center ">Bank in Amount :</td>
+            <td width="200" class="el-table_2_column_9 is-center ">&nbsp;&nbsp;
              <b> RM {{ bookingConfirmTable.bankin_amount }}</b>
            </td>
          </tr>
@@ -230,7 +210,7 @@
      </span>
    </el-dialog>
    <!-- Booking_confirmation_popup -->
-    
+
    <br>
    <br>
    <hr>
@@ -287,6 +267,7 @@
      </el-button>
    </div>
    <!-- Booking Table-end -->
+    </div>
  </el-main>
 </template>
 <style>
@@ -44,10 +44,7 @@
 </template>

 <script type="text/javascript">
-var axios = require('axios');
-var client = axios.create({
-    baseURL: 'http://localhost:8000'
-});
+import axios from 'axios'

 export default {
    // TODO : update credit limit and timeout 
@@ -71,12 +68,12 @@ export default {
    methods :{
        UpdateMalaysiaBankOption : function(){
            var malaysiaBankData;
-            client.get('api/setting-malaysia-bank')
+            axios.get('/api/setting-malaysia-bank')
                .then((response) => {
                    malaysiaBankData = response.data;
                    this.options_CIEF = malaysiaBankData.map(function(item){
                        return {
-                            value : item.acc_no,
+                            value : item.id,
                            label : item.acc_no,
                        };
                    });
@@ -93,12 +90,12 @@ export default {
        },
        UpdateChinaBankOption : function(){
            var chinaBankData;
-            client.get('api/setting-beneficiary')
+            axios.get('/api/setting-beneficiary')
                .then((response) => {
                    chinaBankData = response.data;
                    this.options_china_bank = chinaBankData.map(function(item){
                        return {
-                            value : item.acc_no,
+                            value : item.id,
                            label : item.acc_no,
                        };
                    });
@@ -114,7 +111,7 @@ export default {
                });
        },
        UpdateActiveBankSetting : function(){
-            client.get('api/setting-active-bank')
+            axios.get('/api/setting-active-bank')
                .then((response) => {
                    this.active_bank_setting = response.data;
                })
@@ -130,7 +127,7 @@ export default {
        },
        EditActiveBankSetting : function(){
            this.loading_btn = true;
-            client.put('/api/setting-active-bank', this.active_bank_setting)
+            axios.put('/api/setting-active-bank', this.active_bank_setting)
            .then((response) => {
                this.loading_btn = false;
                this.$message({
@@ -125,10 +125,7 @@
 </template>

 <script>
-	var axios = require('axios');
-	var client = axios.create({
-		baseURL: 'http://localhost:8000'
-	});
+	import axios from 'axios'

 	export default {
 		data() {
@@ -157,7 +154,7 @@
 		methods: {
 			CreateBeneficiaries : function(){
 				this.AddDatadialogVisible = false;
-				client.post('api/setting-beneficiary', this.beneficiariesForm)
+				axios.post('/api/setting-beneficiary', this.beneficiariesForm)
 					.then((response) => {
 						this.DoneAddDatadialogVisible = true;
 						this.ClearBeneficiariesForm();
@@ -175,7 +172,7 @@
 					});
 			},
 			UpdateTableData : function(){
-				client.get('api/setting-beneficiary', this.beneficiariesForm)
+				axios.get('/api/setting-beneficiary', this.beneficiariesForm)
 					.then((response) => {
 						this.tableData = response.data;
 					})
@@ -191,7 +188,7 @@
 			},
 			DeleteBeneficiaries : function(beneficiaries_id){
 				this.DeleteAdddialogVisible = true;
-				client.delete('api/setting-beneficiary/' + beneficiaries_id)
+				axios.delete('/api/setting-beneficiary/' + beneficiaries_id)
 					.then((response) => {
 						this.UpdateTableData();
 					})
@@ -209,7 +206,7 @@
 				this.EditDatadialogVisible = false; 
 				this.DoneUpdateDatadialogVisible = true;

-				client.put('api/setting-beneficiary/' + this.currentEdit, this.beneficiariesForm)
+				axios.put('/api/setting-beneficiary/' + this.currentEdit, this.beneficiariesForm)
 					.then((response) => {
 						this.UpdateTableData();
 					})
@@ -125,10 +125,7 @@
 </template>

 <script>
-	var axios = require('axios');
-	var client = axios.create({
-		baseURL: 'http://localhost:8000'
-	});
+	import axios from 'axios'

 	export default {
 		data() {
@@ -157,7 +154,7 @@
 		methods: {
 			CreateMalaysiaBank : function(){
 	            this.AddDatadialogVisible = false;
-				client.post('api/setting-malaysia-bank', this.malaysiaBankForm)
+				axios.post('/api/setting-malaysia-bank', this.malaysiaBankForm)
 					.then((response) => {
 						this.DoneAddDatadialogVisible = true;
 						this.ClearMalaysiaBankForm();
@@ -175,7 +172,7 @@
 					});
 			},
 			UpdateTableData : function(){
-				client.get('api/setting-malaysia-bank', this.malaysiaBankForm)
+				axios.get('/api/setting-malaysia-bank', this.malaysiaBankForm)
 					.then((response) => {
 						this.tableData = response.data;
 					})
@@ -191,7 +188,7 @@
 			},
 			DeleteMalaysiaBank : function(malaysiaBank_id){
 				this.DeleteAdddialogVisible = true;
-				client.delete('api/setting-malaysia-bank/' + malaysiaBank_id)
+				axios.delete('/api/setting-malaysia-bank/' + malaysiaBank_id)
 					.then((response) => {
 						this.UpdateTableData();
 					})
@@ -208,7 +205,7 @@
 			EditMalaysiaBank : function(){
 				this.EditDatadialogVisible = false;
 				this.DoneUpdateDatadialogVisible = true;
-				client.put('api/setting-malaysia-bank/' + this.currentEdit, this.malaysiaBankForm)
+				axios.put('/api/setting-malaysia-bank/' + this.currentEdit, this.malaysiaBankForm)
 					.then((response) => {
 						this.UpdateTableData();
 					})
@@ -18,10 +18,7 @@
 </template>

 <script>
-	var axios = require('axios');
-	var client = axios.create({
-		baseURL: 'http://localhost:8000'
-	});
+	import axios from 'axios'

 	export default {
 		data() {
@@ -35,7 +32,7 @@
 		},
 		methods: {
 			CreateMarking : function(){
-				client.post('api/setting-marking', this.markingForm)
+				axios.post('/api/setting-marking', this.markingForm)
 					.then((response) => {
 	                    this.loading_btn = false
 							this.$message({
@@ -32,11 +32,11 @@
 						<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no"></el-input>
 						<span class="error-message text-danger" v-if="errors.has('gst_no')">{{ errors.first('gst_no') }}<br/></span>
 					</el-form-item>
-					<el-form-item label="Bank Name":class="{'has-error': errors.has('bank_name') }">
+					<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
 						<el-input v-model="supplierForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
 						<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
 					</el-form-item>
-					<el-form-item label="Account No":class="{'has-error': errors.has('acc_no') }">
+					<el-form-item label="Account No" :class="{'has-error': errors.has('acc_no') }">
 						<el-input v-model="supplierForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
 						<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
 					</el-form-item>
@@ -68,11 +68,11 @@
 						<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no"></el-input>
 						<span class="error-message text-danger" v-if="errors.has('gst_no')">{{ errors.first('gst_no') }}<br/></span>
 					</el-form-item>
-					<el-form-item label="Bank Name":class="{'has-error': errors.has('bank_name') }">
+					<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
 						<el-input v-model="supplierForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
 						<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
 					</el-form-item>
-					<el-form-item label="Account No":class="{'has-error': errors.has('acc_no') }">
+					<el-form-item label="Account No" :class="{'has-error': errors.has('acc_no') }">
 						<el-input v-model="supplierForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
 						<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
 					</el-form-item>
@@ -101,10 +101,7 @@
 </template>

 <script>
-var axios = require('axios');
-var client = axios.create({
-	baseURL: 'http://localhost:8000'
-});
+	import axios from 'axios'

 	export default {
 		data() {
@@ -46,10 +46,12 @@ Route::group(['middleware' => 'auth:api'], function () {
 	Route::get('user', 'UserController@show');
 	Route::patch('settings/profile', 'Settings\ProfileController@update');
 	Route::patch('settings/password', 'Settings\PasswordController@update');
+
+	// for both user and admin
+	Route::get('active-bank', 'SettingActiveBankController@index');	
+	Route::get('malaysia-bank/{malaysiaBank}', 'SettingMalaysiaBankController@show');
 });

-
-
 Route::group(['middleware' => 'guest:api'], function () {
    Route::post('login', 'Auth\LoginController@login')->name('login');
    Route::post('register', 'Auth\RegisterController@create');
@@ -70,7 +72,6 @@ Route::group(['middleware' => ['role:admin']], function() {
 	Route::get('setting-credit', 'SettingCreditController@index');
 	Route::put('setting-credit', 'SettingCreditController@update');

-	Route::get('setting-active-bank', 'SettingActiveBankController@index');
 	Route::put('setting-active-bank', 'SettingActiveBankController@update');

 	Route::get('setting-supplier', 'SettingSupplierController@index');
@@ -86,7 +87,6 @@ Route::group(['middleware' => ['role:admin']], function() {
 	Route::delete('setting-beneficiary/{beneficiary}', 'SettingBeneficiaryController@delete');

 	Route::get('setting-malaysia-bank', 'SettingMalaysiaBankController@index');
-	Route::get('setting-malaysia-bank/{malaysiaBank}', 'SettingMalaysiaBankController@show');
 	Route::post('setting-malaysia-bank', 'SettingMalaysiaBankController@store');
 	Route::put('setting-malaysia-bank/{malaysiaBank}', 'SettingMalaysiaBankController@update');
 	Route::delete('setting-malaysia-bank/{malaysiaBank}', 'SettingMalaysiaBankController@delete');
@@ -110,5 +110,8 @@ Route::group(['middleware' => ['role:admin']], function() {
 	Route::post('booking/{id}/confirm-invoice', 'BookingController@confirmInvoice');	

 	Route::get('admin/complete-order', 'BookingController@adminShowCompletedOrders');
+	// for both user and admin
+	Route::get('setting-active-bank', 'SettingActiveBankController@index');	
+	Route::get('setting-malaysia-bank/{malaysiaBank}', 'SettingMalaysiaBankController@show');	
 	
 });
@@ -3984,7 +3984,7 @@ class ComposerStaticInite450fcd5b0627496bb38e1386c9a81ad
        'SebastianBergmann\\Timer\\Timer' => __DIR__ . '/..' . '/phpunit/php-timer/src/Timer.php',
        'SebastianBergmann\\Version' => __DIR__ . '/..' . '/sebastian/version/src/Version.php',
        'SettingActiveBankSeeder' => __DIR__ . '/../..' . '/database/seeds/SettingActiveBankSeeder.php',
-        'SettingBeneficiaresSeeder' => __DIR__ . '/../..' . '/database/seeds/SettingBeneficiaresSeeder.php',
+        'SettingBeneficiarySeeder' => __DIR__ . '/../..' . '/database/seeds/SettingBeneficiarySeeder.php',
        'SettingCreditSeeder' => __DIR__ . '/../..' . '/database/seeds/SettingCreditSeeder.php',
        'SettingMalaysiaBankSeeder' => __DIR__ . '/../..' . '/database/seeds/SettingMalaysiaBankSeeder.php',
        'SuppliersTableSeeder' => __DIR__ . '/../..' . '/database/seeds/SuppliersTableSeeder.php',