fix/npmCrash

app/Notifications/ResetPassword.php

@@ -17,7 +17,7 @@ class ResetPassword extends Notification
     {
         return (new MailMessage)
             ->line('You are receiving this email because we received a password reset request for your account.')
-            ->action('Reset Password', url(config('app.url').'/password/reset/'.$this->token).'?email='.urlencode($notifiable->email))
+            ->action('Reset Password', route('password.request', ['token' => $this->token]).'?email='.urlencode($notifiable->email))
             ->line('If you did not request a password reset, no further action is required.');
     }
 }

package.json

@@ -16,23 +16,29 @@
     "@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",
     "canvas2image": "^1.0.5",
     "element-ui": "^2.4.4",
+    "epic-spinners": "^1.0.3",
+    "image-compressor.js": "^1.1.4",
     "jquery": "^3.3.1",
     "js-cookie": "^2.2.0",
-    "npm": "^6.0.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",
+    "vee-validate": "^2.1.0-beta.11",
     "vform": "^1.0.0",
     "vue": "^2.5.16",
     "vue-axios": "^2.1.1",
     "vue-button-spinner": "^2.2.0",
     "vue-i18n": "^7.6.0",
+    "vue-image-compressor": "^1.0.3",
+    "vue-js-toggle-button": "^1.3.0",
     "vue-loader": "^14.2.2",
     "vue-loading-spinner": "^1.0.11",
     "vue-meta": "^1.4.4",
@@ -47,10 +53,12 @@
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "cross-env": "^5.1.4",
     "eslint": "^4.19.1",
-    "laravel-mix": "^2.1.1",
+    "laravel-mix": "^2.1.14",
     "vue-template-compiler": "^2.5.16",
+    "vuepress": "^0.14.2",
     "webpack": "^3.11.0",
     "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-cli": "^3.0.8"
+    "webpack-cli": "^3.0.8",
+    "webpack-dev-server": "^3.1.8"
   }
 }

public/mix-manifest.json

@@ -4,4 +4,4 @@
     "/js/lang-en.31386792460363b93c17.js": "/js/lang-en.31386792460363b93c17.js",
     "/js/app.js": "/js/app.js",
     "/css/app.css": "/css/app.css"
-}
+}

resources/assets/js/pages/home.vue

@@ -22,7 +22,7 @@
     <!-- Input-Amount-end -->
 
     <div align="right">
-    <el-button icon="el-icon-refresh" type="primary" size="mini" @click="refreshRate()">Refresh Rate</el-button></div>
+    <el-button type="primary" :loading="loading_btn" size="mini" @click="refreshRate()">Refresh Rate</el-button></div>
 
     <hr>
     <!-- Rate-Display -->
@@ -47,7 +47,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="right">
+        <el-tooltip class="item" effect="dark" content="With Invoice" placement="right">
           <div class="grid-content bg-purple" align="right">
             <i type="button" class="el-icon-question" circle/>
           </div>
@@ -94,7 +94,7 @@
     <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="right">
+        <el-tooltip class="item" effect="dark" content="Without Invoice" placement="right">
           <div class="grid-content bg-purple" align="right">
             <i type="button" class="el-icon-question" circle/>
           </div>
@@ -142,28 +142,42 @@
     <!-- Form_popup -->
       <el-dialog :visible.sync="dialogFormVisible" :fullscreen="true" title="Booking" center>
         <el-form ref="bookingForm" :model="bookingForm" :rules="rules">
-          <div align="center">
-            <el-form-item prop="account_name">
-              <el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Account" style="width: 80%" required="true" />
+          <div align="center"> 
+          <el-form-item prop="payment_for"> <!-- TODO : this should be payment for order number -->
+            <el-select v-model="bookingForm.payment_for" placeholder="Payment For" style="width: 80%" required="true">
+              <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item prop="order_no">
+            <el-input v-model="bookingForm.order_no" placeholder="Order No. (Optional)" style="width: 80%" required="true" />
+          </el-form-item>  
+            <br>
+          <div align=center>
+            <h7>China's Supplier Details</h7>
+          </div>
+            <br>
+          <el-form-item prop="account_name">
+              <el-input v-model="bookingForm.account_name" placeholder="Account Name" style="width: 80%" required="true" />
+            </el-form-item>
+            <el-form-item prop="account_num">
+              <el-input v-model="bookingForm.account_num" type="text" placeholder="Account Number" style="width: 80%"/>
             </el-form-item>
             <el-form-item prop="bank_name">
-              <el-input v-model="bookingForm.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" />
+              <el-input v-model="bookingForm.bank_name" type="text" placeholder="Bank Name" style="width: 80%" />
             </el-form-item>
             <el-form-item prop="bank_branch">
               <el-input v-model="bookingForm.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%" />
             </el-form-item>
-            <el-form-item prop="account_num">
-              <el-input v-model="bookingForm.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"
-              />
-            </el-form-item>
+            
             <el-form-item>
-              <el-button @click="dialogFormVisible = false">Cancel</el-button>
+              <!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
 
               <el-button :loading="loading" type="primary" @click="getCalculationValue('bookingForm')">Book Now</el-button>
             </el-form-item>
           </div>
         </el-form>
       </el-dialog>
+      
     <!-- Form_popup-end -->
 
     <!-- Booking_confirmation_popup -->
@@ -178,9 +192,13 @@
             <td>Customer Marking : </td>
             <td> {{ bookingConfirmTable.marking }}</td>
           </tr>
-          <tr>
+          <tr v-if="bookingConfirmTable.order_no != null">
             <td>Payment for (Order No.) : </td>
-            <td> {{ bookingConfirmTable.payment_order }}</td>
+            <td> {{ bookingConfirmTable.order_no }}</td>
+          </tr>
+          <tr>
+            <td>Payment for : </td>
+            <td> {{ bookingConfirmTable.payment_for }}</td>
           </tr>
           <tr>
             <td>Payment Method : </td>
@@ -197,45 +215,62 @@
           <tr>
             <td>CNY/RMB :</td>
             <td>
-              <b> RM {{ bookingConfirmTable.amount }}</b>
+              <b> CNY {{ bookingConfirmTable.amount }}</b>
             </td>
           </tr>
           <tr>
             <td>+ Service Charges :</td>
             <td>
-               RM {{ bookingConfirmTable.service_charge }}
+               CNY {{ bookingConfirmTable.service_charge }}
             </td>
           </tr>
           <tr>
             <td>/ Rate :</td>
             <td>
-              {{ bookingConfirmTable.rate }}
+               {{ bookingConfirmTable.rate }}
             </td>
           </tr>
           <tr>
             <td></td>
             <td>
-               RM {{ bookingConfirmTable.subtotal }}
+               MYR {{ bookingConfirmTable.subtotal }}
             </td>
           </tr>
           <tr>
             <td>+ Tax :</td>
             <td>
-              RM {{ bookingConfirmTable.taxAmount }}
+              MYR {{ bookingConfirmTable.taxAmount }}
             </td>
           </tr>
           <tr>
             <td>+ Billing Charge :</td>
             <td>
-               RM {{ bookingConfirmTable.billingChargeAmount }}
+               MYR {{ bookingConfirmTable.billingChargeAmount }}
             </td>
           </tr>
           <tr>
             <td>Bank In Amount :</td>
             <td>
-              <b> RM {{ bookingConfirmTable.bankin_amount }}</b>
+              <b> MYR {{ bookingConfirmTable.bankin_amount }}</b>
             </td>
           </tr>
+          <tr>
+            <td>China Beneficiary Acc : <br>
+              Name : {{ bookingConfirmTable.acc_name }} <br>
+              Account No. : {{ bookingConfirmTable.acc_no }} <br>
+              Bank : {{ bookingConfirmTable.bank_name }}<br>
+              Branch. : {{ bookingConfirmTable.bank_branch }}
+            </td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>Bank In Amount :</td>
+            <td><b>RM {{ bookingConfirmTable.bankin_amount }}</b></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+          </tr>
         </tbody>
       </table>
       <span slot="footer" class="dialog-footer">
@@ -249,21 +284,80 @@
     <br>
     <hr>
     <div align="right">
-<el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button></div>
+<el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking(); RefreshBookingTableComplete()">Refresh</el-button></div>
 <!-- Booking Table -->
-    <el-row :gutter="20">
+
+<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-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.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 cash', value: 'x1_cash'}, {text: 'X1 ba', value: 'x1_ba'}, {text: 'X1 cheque', value: 'x1_cheque'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
+          <el-table-column label="Rate" width="100" prop="rate" sortable/>
+          <el-table-column label="Amount" prop="amount" justify="center" width="110" sortable/>
+          <el-table-column label="Transfer Amount" prop="transfer_amount" width="170" 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" >
+            <template slot-scope="scope">
+              <el-popover trigger="click" placement="top">
+                <p>{{ scope.row.status_desc }}</p>
+                <div slot="reference" class="name-wrapper">
+                  <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
+                </div>
+              </el-popover>       
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
+          <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
+          <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
+                           label="" width="180" filter-placement="bottom-end">
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.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 :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
+                          label="" width="180" filter-placement="bottom-end">
+          <!-- <el-button slot-scope="scope" type="text" @click="(event) => { cancelBooking(scope.row.id) }"> Cancel Booking </el-button> -->
+          </el-table-column>
+        </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>
+      </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.status, scope.row.id) }"> {{ scope.row.id }}</el-button>
           </el-table-column>
           <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
-          <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
-          <el-table-column label="Rate" width="74" prop="rate" />
-          <el-table-column label="Amount" prop="amount" justify="center" width="110" />
-          <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount"
-                           prop="transfer_amount" width="170" />
+          <el-table-column :filters="[{text: 'X1 cash', value: 'x1_cash'}, {text: 'X1 ba', value: 'x1_ba'}, {text: 'X1 cheque', value: 'x1_cheque'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
+          <el-table-column label="Rate" width="120" prop="rate" sortable/>
+          <el-table-column label="Amount" prop="amount" justify="center" width="110" sortable />
+          <el-table-column label="Transfer Amount" prop="transfer_amount" width="170" 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> -->
@@ -288,19 +382,25 @@
               <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
             </template> -->
           </el-table-column>
+          
         </el-table>
-      </div>
-    </el-row><br><br>
-    <div align="right">
-      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
+        <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 {{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">
+      <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 -->
+
   </el-main>
 </template>
 <style>
@@ -313,12 +413,15 @@ import Form from 'vform'
 import LoginWithGithub from '~/components/LoginWithGithub'
 import store from '~/store'
 import axios from 'axios'
+import Echo from "laravel-echo"
+import Pusher from "pusher-js"
 
 export default {
   middleware: ['auth'],
 
   data () {
     return {
+      loading_btn: false,
       confirmForm: new Form({
         term: '',
         amount: ''
@@ -338,13 +441,23 @@ export default {
         amount: '',
         rate: ''
       },
-      bookingForm: [{
+      bookingForm: {
         account_name: '',
         bank_name: '',
         bank_branch: '',
         account_num: ''
-      }],
+      },
       rules: {
+          // order_no: [{
+          //   required: true,
+          //   message: 'Please input order number',
+          //   trigger: 'change'
+          // }],
+          payment_for: [{
+            required: true,
+            message: 'Please input payment for',
+            trigger: 'change'
+          }],
         amount: [{
           required: true,
           message: 'Please input amount',
@@ -380,14 +493,32 @@ export default {
         value2: 'MYR',
         label2: 'MYR'
       }],
+      options3: [{
+        value: 'Full Payment',
+        label: 'Full Payment'
+      },
+      {
+        value: 'Deposit',
+        label: 'Deposit'
+      },
+      {
+        value: 'Balance',
+        label: 'Balance'
+      },
+      {
+        value: 'Others',
+        label: 'Others'
+      }],
       value: 'RMB',
       dialogFormVisible: false,
       dialogFormVisible1: false,
       formLabelWidth: '0px',
-      bookingTable: [
-      ],
+      bookingTable: [],
+      bookingTableComplete: [],
       url: 'api/booking',
+      completeBookingurl : "api/user-complete-booking",
       pagination: [],
+      completePagination: [],
       bookingConfirmTable: {
         date: 'undefined',
         marking: 'undefined',
@@ -397,22 +528,69 @@ export default {
         rate: 'undefined',
         bankin_amount: 'undefined',
         china_beneficiary: 'undefined',
+        bank_name: null,
+        bank_branch: null,
         status: 2
       }
     }
   },
   mounted () {
-    this.getBooking();
-    this.initBooking();
-    this.getRate();
+    this.getBooking()
+    this.initBooking()
+    this.getRate()
+    this.getBookingTableComplete()
+    this.listen()
   },
   methods: {
+    // listen to update rate changes 
+    listen(){
+      window.Echo = new Echo({
+          broadcaster: 'pusher',
+          key: window.config.pusherUrl,
+          cluster: 'ap1',
+          encrypted: true,
+          auth: {
+              headers: {
+                  Authorization: 'Bearer ' + localStorage.getItem("token")
+              },
+          },
+        
+      });
+  
+      window.Echo.channel('rate-updated')
+      .listen('RateUpdated', response => {
+        if (! ('Notification' in window)) {
+              alert('Web Notification is not supported');
+              return;
+        }
+        this.$message({
+          showClose: true,
+          message: 'New rate updated at ' + response.rate.created_at,
+          duration: 20000
+        });
+        this.rate = response.rate      
+      });
+      
+    },
     getBooking(){
       let $this = this
       axios.get(this.url).then(response => {
         this.bookingTable = response.data.data
         $this.makePagination(response.data)
-        console.log(response)
+      })
+    },
+    cancelBooking(id){
+      console.log(id)
+      let $this = this
+      axios.post("api/booking/"+id+"/cancel").then(response => {
+        this.getBooking();
+      })
+    },
+    getBookingTableComplete(){
+      let $this = this
+      axios.get(this.completeBookingurl).then(response => {
+        this.bookingTableComplete = response.data.data
+        $this.makeCompletePagination(response.data)
       })
     },
     getRate() {
@@ -423,7 +601,9 @@ export default {
     },
     refreshRate() {
       let $this = this
+      this.loading_btn = true
       axios.get('api/rate').then(response => {
+        this.loading_btn = false
         this.rate = response.data
         this.$message({
           showClose: true,
@@ -453,6 +633,14 @@ export default {
         })
       })
     },
+    RefreshBookingTableComplete() {
+      let $this = this
+      this.loading_btn = true
+      axios.get(this.completeBookingurl).then(response => {
+        this.loading_btn = false;
+        this.bookingTableComplete = response.data.data
+      })
+    },
     makePagination(data){
       let pagination ={
         current_page: data.current_page,
@@ -461,12 +649,28 @@ export default {
         prev_page_url: data.prev_page_url
       }
       this.pagination = pagination
-      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
     },
     fetchPaginateBooking(url) {
       this.url = url
       this.getBooking()
+     
     },
+    fetchCompletePaginateBooking(url) {
+      this.completeBookingurl = url
+      this.getCompleteBooking()
+     },
+     
+    
     // TODO fetch booking data on load
     formatter (row, column) {
       return row.address
@@ -496,16 +700,18 @@ export default {
         if (valid) {
           let newConfirmation = {
             amount: this.booking.amount,
-            term: this.term
+            term: this.term,
+            order_no: this.bookingForm.order_no,
+            payment_for: this.bookingForm.payment_for,
+            acc_name: this.bookingForm.account_name,
+            acc_no: this.bookingForm.account_num,
+            bank_name: this.bookingForm.bank_name,
+            bank_branch: this.bookingForm.bank_branch
           }
           axios.post('api/booking/calculation', newConfirmation)
             .then((response) => {
               this.loading = false
-              console.log(response)
               this.bookingConfirmTable = response.data;
-              this.bookingConfirmTable.payment_for = 'Full Payment';//For future purpose
-              this.bookingConfirmTable.remark = '';//For future purpose
-              this.bookingConfirmTable.payment_order = '';//For future purpose
               this.dialogFormVisible = false
               this.dialogFormVisible1 = true
             })
@@ -534,6 +740,8 @@ export default {
       this.loading = true,
       this.dialogFormVisible1 = true
           let newBooking = {
+            order_no: this.bookingForm.order_no,
+            payment_for: this.bookingForm.payment_for,
             account_name: this.bookingForm.account_name,
             account_num: this.bookingForm.account_num,
             bank_name: this.bookingForm.bank_name,
@@ -543,6 +751,7 @@ export default {
           }
           axios.post('api/booking', newBooking)
             .then((response) => {
+              console.log(response);
               this.loading = false
               // push with return id
               this.$router.push({
@@ -563,7 +772,7 @@ export default {
              
             })
     },
-    BookingStatus (status, booking_id) {
+    BookingStatus (status, booking_id, term) {
       console.log(status)
       // TODO : Get booking status from server
       this.status = status
@@ -595,6 +804,14 @@ export default {
           break
 
         case 5:
+          console.log(term)
+          if(term == 'x2_cash' || term == 'x2_cheque' || term == 'x2_ba'){
+              this.$router.push({
+              name: 'booking.user.x2complete',
+              params: {id: booking_id }
+            })
+            break
+          }
           this.$router.push({
             name: 'booking.user.uploadpo',
             params: {id: booking_id }