Merge branch 'integration/upload-invoice' into 'master'

Integration/upload invoice See merge request CIEFWorldwideSdnBhd/exchange!40
2026-08-27 00:04:10 +00:00 · 2018-06-28 03:41:54 +00:00
parent e8b22841bd 2ddd9704bd
commit fd5883c747
13 changed files with 768 additions and 79 deletions
@@ -43,5 +43,9 @@ class Booking extends Model
    public function userBankSlip(){
        return $this->hasOne(UserBankSlip::class);
    }
+
+    public function purchaseOrder(){
+        return $this->hasOne(PurchaseOrder::class);
+    }
 }

@@ -422,11 +422,18 @@ class BookingController extends Controller
    
    public function confirmPurchaseOrder($id){
        $booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first();
-        $booking->status = 5; 
+        $booking->status = 6; 
        $booking->save();
        return response()->json(['message'=>'Success'],200);
    }

+    public function showPurchaseOrder($id){
+        $booking = Booking::where('id',$id)->first();
+        $user_po = $booking->purchaseOrder()->first();
+
+        return response()->json(['po_path'=> $user_po],200);
+    }
+
    public function delete(Booking $book_id)
    {
        $booking = Booking::where('user_id', Auth::user())->where('id', $book_id)->firstOrFail();
@@ -7,4 +7,9 @@ use Illuminate\Database\Eloquent\Model;
 class PurchaseOrder extends Model
 {
    protected $fillable = ['image_url','amount','booking_id'];
+    
+    public function booking()
+    {
+        return $this->belongsTo(Booking::class);
+    }
 }
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class RenameBookingForeignkeyInPoTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('purchase_orders', function($table)
+        {
+            $table->dropForeign('book_id');
+            $table->integer('booking_id')->unsigned();
+            $table->foreign('booking_id')->references('id')->on('bookings');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}
@@ -6,6 +6,7 @@
      <el-step title="Supplier Booking"/>
      <el-step title="Supplier Report"/>
      <el-step title="Upload China Bankslip To Booking"/>
+      <el-step title="Waiting Purchase Order"/>
      <el-step title="Invoice"/>
      <el-step title="Completed"/>
    </el-steps>
@@ -6,6 +6,7 @@
      <el-step title="Order Confirmation"/>
      <el-step title="Processing Transfer"/>
      <el-step title="Transfer Complete"/>
+      <el-step title="Processing Invoice"/>
      <el-step title="Order Complete"/>
    </el-steps>
  </el-row>
@@ -0,0 +1,165 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Order Completed</h4>
+      <br>
+    </div>
+
+    <!-- upload card -->
+    <br>
+    <el-row :gutter="12" justify="center" align="center">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Purchase Order</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+          <el-row :gutter="12" type="flex">
+            <el-col :span="12">
+              <a target=" _blank" href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Invoice</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+          <el-row :gutter="12" type="flex">
+            <el-col :span="12">
+              <a target=" _blank" href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>China Bank Slip</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+          <el-row :gutter="12" type="flex">
+            <el-col :span="12">
+              <a target=" _blank" href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <br>
+
+    <!-- order details -->
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Details</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <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>Order Bankin Slip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+    .booking-details {
+        font-weight: bold;
+    }
+</style>
+<script>
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 6,
+      bookingConfirmTable: [{
+        data1: 'Order Number :',
+        data2: '001'
+      }, {
+        data1: 'Date :',
+        data2: '25/5/2018'
+      }, {
+        data1: 'Customer Marking :',
+        data2: 'CIEF/150ECE'
+      }, {
+        data1: '',
+        data2: ''
+      }, {
+        data1: 'Payment Method :',
+        data2: 'Cash/Bank Transfer'
+      }, {
+        data1: '',
+        data2: ''
+      }],
+      bookingConfirmTable2: [{
+        data1: 'CNY/RMB :',
+        data2: 'CNY 120,500.00'
+      }, {
+        data1: '+ Service Charge :',
+        data2: 'CNY 20.00'
+      }, {
+        data1: '/ RATE :',
+        data2: '1.63'
+      }, {
+        data1: '',
+        data2: 'MYR 73,848.04'
+      }, {
+        data1: '+ GST 6% :',
+        data2: 'MYR 4,430.88'
+      }, {
+        data1: '',
+        data2: 'MYR 78,278.92'
+      }, {
+        data1: '',
+        data2: ''
+      }]
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
@@ -1,13 +1,20 @@
 <template>
  <el-main>
-    <progress-track v-model="status"/>
+    <progress-track v-model="status" />

    <div align="center">
-      <h4 style="margin-top:5%;">Transfer In Progress</h4>
+      <h4 style="margin-top:5%;"></h4>
      <br>
-      <h5> ETA :  3 days 14 Hours </h5>
+      <div v-if="po_status">
+        <h4>Upload Invoice</h4>
+      </div>
+      <div v-else>
+        <h4>Waiting for User to Upload Purchase Order </h4>
+        <br>
+        <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+      </div>
      <br>
-      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+      <!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
    </div>
    <br>
    <el-row justify="center" align="center">
@@ -16,7 +23,165 @@
          <span>Order Details</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
        </div>
-        <el-row :gutter="12">
+        <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
+          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
+            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
+
+              <div class="el-table__body-wrapper is-scrolling-none">
+                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
+                  <colgroup>
+                    <col name="el-table_2_column_9" width="200">
+                    <col name="el-table_2_column_10" width="200">
+                  </colgroup>
+                  <tbody>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Order Number :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.id }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Date :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.created_at }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Customer Marking :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">CIEF/150ECE</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell"></div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Term :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.term }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell"></div>
+                      </td>
+                    </tr>
+                    <!---->
+                  </tbody>
+                </table>
+                <!---->
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <!---->
+              <!---->
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+            </div>
+          </div>
+          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
+            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
+              <div class="hidden-columns">
+                <div></div>
+                <div></div>
+              </div>
+              <!---->
+              <div class="el-table__body-wrapper is-scrolling-none">
+                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
+                  <colgroup>
+                    <col name="el-table_3_column_11" width="200">
+                    <col name="el-table_3_column_12" width="200">
+                  </colgroup>
+                  <tbody>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">CNY/RMB :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">CNY {{ booking_details.amount }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">+ Service Charge :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">CNY {{ booking_details.service_charge }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">/ RATE :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">{{ booking_details.rate }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">MYR {{ booking_details.bia }}</div>
+                      </td>
+                    </tr>
+                    <!-- <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">+ GST 6% :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">MYR 4,430.88</div>
+                      </td>
+                    </tr> -->
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">
+                          <b>MYR {{ booking_details.bia }}</b>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell"></div>
+                      </td>
+                    </tr>
+                    <!---->
+                  </tbody>
+                </table>
+                <!---->
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <!---->
+              <!---->
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+            </div>
+          </div>
+        </div>
+        <!-- <el-row :gutter="12">
          <el-col :span="12">
            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
              <el-table-column prop="data1" align="right" width="200" />
@@ -29,23 +194,56 @@
              <el-table-column prop="data2" align="left" width="200" />
            </el-table>
          </el-col>
-        </el-row>
+        </el-row> -->
      </el-card>
    </el-row>
    <br>

-    <el-row justify="center" align="center">
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>BankinSlip</span>
-          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-        </div>
-        <el-row :gutter="12">
-          <el-col :span="22" style="text-align:center">
-            <img src="http://via.placeholder.com/600x400" class="image">
-          </el-col>
-        </el-row>
-      </el-card>
+    <el-row :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-po'" :on-exceed="handleExceed" :on-preview="handlePreview"
+                     :on-remove="handleRemove"
+                     class="upload-demo"
+                     drag
+                     multiple>
+            <i class="el-icon-upload"/>
+            <div class="el-upload__text">Drop file here or
+              <em>click to upload</em>
+            </div>
+            <div slot="tip" class="el-upload__tip">jpg/png/pdf files with a size less than 3mb</div>
+          </el-upload>
+
+          <br>
+
+          <div class="bottom clearfix" style="text-align:right;">
+            <el-button :loading="loading" type="primary" @click="uploadPo">Submit</el-button>
+          </div>
+          <!-- upload image end -->
+
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>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">
+              <a href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
    </el-row>
  </el-main>
 </template>
@@ -55,20 +253,162 @@
  }
 </style>
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
-import ProgressTrack from '~/components/AdminProgressTrack'
+  import ProgressTrack from '~/components/AdminProgressTrack'
+  import axios from 'axios'

-export default {
-  components: {
-    'progress-track': ProgressTrack
-  },
-  data () {
-    return {
-      status: 4
+  export default {
+    components: {
+      'progress-track': ProgressTrack
+    },
+    data() {
+      return {
+        status: 6,
+        loading_btn: false,
+        po_status: null,
+        booking_id: this.$route.params.id,
+        booking_details: {
+          id: null,
+          amount: null,
+          bia: null,
+          user_bankslip_path: null,
+        },
+        supplier: null,
+        supplier_options: null,
+        chinaSlipForm: {
+          actual_transfer_amount: null,
+          date: null,
+          details: null,
+        },
+        rules: {
+          actual_transfer_amount: [{
+            required: true,
+            message: 'Please input amount',
+            trigger: 'change'
+          }],
+          date: [{
+            required: true,
+            message: 'Please input bank name',
+            trigger: 'change'
+          }],
+          details: [{
+            required: true,
+            message: 'Please input details',
+            trigger: 'change'
+          }]
+        },
+        pickerOptions1: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
+          shortcuts: [{
+            text: 'Today',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: 'Yesterday',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: 'A week ago',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        }
+      }
+    },
+    beforeCreate() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Please wait..',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+
+      axios
+        .get('/api/admin/booking/' + this.$route.params.id)
+        .then((response) => {
+          loading.close()
+          this.booking_details = response.data
+        }).catch((error) => {
+          console.log(error)
+          loading.close()
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+
+      axios
+        .get('/api/booking/'+ this.$route.params.id +'/po')
+        .then((response) => {
+          loading.close()
+          this.supplier_options = response.data
+        }).catch((error) => {
+          loading.close()
+          console.log(error)
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+
+    },
+    methods: {
+      uploadPo(formName) {
+        this.loading_btn = true
+
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            let newChinaSlip = {
+              date: this.chinaSlipForm.date,
+              actual_transfer_amount: this.chinaSlipForm.actual_transfer_amount,
+              details: this.chinaSlipForm.details,
+            }
+
+            axios.patch('/api/booking/' + this.booking_id + '/update-china-bankslip', newChinaSlip)
+              .then((response) => {
+                this.$message({
+                  showClose: true,
+                  message: 'Your bankinslip has been submitted, please wait admin to approve.',
+                  type: 'success',
+                  duration: 5000
+                })
+
+                console.log(response)
+                this.$router.push({
+                  name: 'home'
+                })
+              })
+              .catch((error) => {
+                this.loading = false
+                this.$message({
+                  showClose: true,
+                  message: 'Please upload your bankin slip first.',
+                  type: 'warning',
+                  duration: 10000
+                })
+                console.log(error)
+                this.loading_btn = false
+              })
+
+          } else {
+            this.loading_btn = false
+          }
+        })
+
+
+      },
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePreview(file) {
+        console.log(file);
+      }
    }
-  },
-  methods: {
-
  }
-}
-</script>
+</script>
@@ -0,0 +1,115 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Processing Invoice</h4>
+      <br>
+      <br>
+      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+    </div>
+    <br>
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Details</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+    <br>
+
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>BankinSlip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+  .booking-details {
+    font-weight: bold;
+  }
+</style>
+<script>
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 4,
+      bookingConfirmTable: [{
+        data1: 'Order Number :',
+        data2: '001'
+      }, {
+        data1: 'Date :',
+        data2: '25/5/2018'
+      }, {
+        data1: 'Customer Marking :',
+        data2: 'CIEF/150ECE'
+      }, {
+        data1: '',
+        data2: ''
+      }, {
+        data1: 'Payment Method :',
+        data2: 'Cash/Bank Transfer'
+      }, {
+        data1: '',
+        data2: ''
+      }],
+      bookingConfirmTable2: [{
+        data1: 'CNY/RMB :',
+        data2: 'CNY 120,500.00'
+      }, {
+        data1: '+ Service Charge :',
+        data2: 'CNY 20.00'
+      }, {
+        data1: '/ RATE :',
+        data2: '1.63'
+      }, {
+        data1: '',
+        data2: 'MYR 73,848.04'
+      }, {
+        data1: '+ GST 6% :',
+        data2: 'MYR 4,430.88'
+      }, {
+        data1: '',
+        data2: 'MYR 78,278.92'
+      }, {
+        data1: '',
+        data2: ''
+      }
+      ]
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
@@ -57,7 +57,7 @@
        <div class="grid-content bg-purple" align="left">X1 :</div>
      </el-col>
      <el-col>
-        <div class="grid-content bg-purple" align="center">1.56</div>
+        <div class="grid-content bg-purple" align="center">1.70</div>
      </el-col>
      <el-col>
        <div class="grid-content bg-purple" align="center">1.64</div>
@@ -4,9 +4,8 @@
      <card :title="$t('settings')" class="settings-card">
        <ul class="nav flex-column nav-pills">
          <li v-for="tab in tabs" :key="tab.route" class="nav-item">
-            <router-link :to="{ name: tab.route }" class="nav-link" active-class="active">
-              <fa :icon="tab.icon" fixed-width/>
-              {{ tab.name }}
+            <router-link v-if="(role == tab.role)" :to="{ name: tab.route }" class="nav-link" active-class="active">
+              <fa :icon="tab.icon" fixed-width/> {{ tab.name }}
            </router-link>
          </li>
        </ul>
@@ -22,50 +21,63 @@
 </template>

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

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

 <style>
-.settings-card .card-body {
-  padding: 0;
-}
-</style>
+  .settings-card .card-body {
+    padding: 0;
+  }
+</style>
@@ -21,6 +21,7 @@ const Transfer = () => import('~/pages/booking/transfer').then(m => m.default ||
 const UploadPo = () => import('~/pages/booking/uploadPo').then(m => m.default || m)
 const PoComplete = () => import('~/pages/booking/poComplete').then(m => m.default || m)
 const Completed = () => import('~/pages/booking/completed').then(m => m.default || m)
+const PurchaseOrder = () => import('~/pages/booking/po').then(m => m.default || m)

 // Admin booking
 const Verification = () => import('~/pages/admin/booking/verification').then(m => m.default || m)
@@ -28,6 +29,7 @@ const Supplier = () => import('~/pages/admin/booking/supplierBooking').then(m =>
 const SupplierReport = () => import('~/pages/admin/booking/supplierReport').then(m => m.default || m)
 const UploadCNSlip = () => import('~/pages/admin/booking/uploadChinaBankslip').then(m => m.default || m)
 const UploadInvoice = () => import('~/pages/admin/booking/uploadInvoice').then(m => m.default || m)
+const adminCompleted = () => import('~/pages/admin/booking/completed').then(m => m.default || m)
 // const Completed = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)

 // Admin pages
@@ -62,6 +64,7 @@ export default [
  { path: '/booking/:id/transfer', name: 'booking.user.transfer', component: Transfer },
  { path: '/booking/:id/upload-po', name: 'booking.user.uploadpo', component: UploadPo },
  { path: '/booking/:id/po-complete', name: 'booking.user.pocomplete', component: PoComplete },
+  { path: '/booking/:id/po', name: 'booking.complete', component: PurchaseOrder },
  { path: '/booking/:id/complete', name: 'booking.complete', component: Completed },

  // Admin booking
@@ -70,7 +73,7 @@ export default [
  { path: '/booking/:id/supplier-report', name: 'booking.admin.supplier.report', component: SupplierReport },
  { path: '/booking/:id/upload-cn-bankslip', name: 'booking.admin.cnslip', component: UploadCNSlip },
  { path: '/booking/:id/upload-invoice', name: 'booking.admin.invoice', component: UploadInvoice },
-  // { path: '/booking/:id/complete', name: 'booking.complete', component: Completed },
+  { path: '/booking/:id/admin/complete', name: 'booking.admin.complete', component: adminCompleted },

  // Admin pages
  { path: '/admin', name: 'admin.home', component: AdminHome },
@@ -103,6 +103,9 @@ Route::group(['middleware' => ['role:admin']], function() {

 	Route::post('/booking/{id}/upload-china-bankslip','ChinaBankSlipController@store');
 	Route::patch('/booking/{id}/update-china-bankslip','ChinaBankSlipController@update');
+
+	Route::get('/booking/{id}/po', 'BookingController@showPurchaseOrder');
+	
 });