diff --git a/.gitignore b/.gitignore
index 07f35dc7..3d27b9dd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,4 +15,5 @@ Homestead.yaml
 npm-debug.log
 yarn-error.log
 .env
+vendor/composer/autoload_static.php
 package-lock.json
diff --git a/database/.gitignore b/database/.gitignore
deleted file mode 100644
index 824e6353..00000000
--- a/database/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-*.sqlite
-vendor/composer/autoload_static.php
-package-lock.json
\ No newline at end of file
diff --git a/resources/assets/js/pages/admin/booking/completed.vue b/resources/assets/js/pages/admin/booking/completed.vue
index e850c9e0..1854f3d7 100644
--- a/resources/assets/js/pages/admin/booking/completed.vue
+++ b/resources/assets/js/pages/admin/booking/completed.vue
@@ -20,7 +20,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a target=" _blank" href="#">
+              <a target=" _blank" :href="booking_details.user_po_path">
                 <img v-bind:src="booking_details.user_po_path" class="image">
               </a>
             </el-col>
@@ -36,7 +36,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a target=" _blank" href="#">
+              <a target=" _blank" :href="booking_details.china_bankslip_path">
                 <img v-bind:src="booking_details.china_bankslip_path" class="image">
               </a>
             </el-col>
@@ -50,8 +50,10 @@
             <!-- <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">     
+            <el-col :span="12">
+              <a target="_blank" :href="booking_details.invoice_path">     
                 <img v-bind:src="booking_details.invoice_path" class="image">
+              </a>
             </el-col>
           </el-row>
         </el-card>
@@ -262,7 +264,9 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="booking_details.user_bankslip_path">
+              <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            </a>
           </el-col>
         </el-row>
       </el-card>
@@ -273,6 +277,17 @@
   .booking-details {
     font-weight: bold;
   }
+  .image {
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-left: auto;
+      margin-right: auto;
+      width: 150px;
+      display: block;
+  }
+  .image:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
 </style>
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'
diff --git a/resources/assets/js/pages/admin/booking/supplierReport.vue b/resources/assets/js/pages/admin/booking/supplierReport.vue
index 3b29933a..1d96b517 100644
--- a/resources/assets/js/pages/admin/booking/supplierReport.vue
+++ b/resources/assets/js/pages/admin/booking/supplierReport.vue
@@ -215,7 +215,9 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="booking_details.user_bankslip_path">
+              <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            </a>
           </el-col>
         </el-row>
       </el-card>
@@ -235,6 +237,17 @@
   .booking-details {
     font-weight: bold;
   }
+  .image {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 150px;
+    display: block;
+  }
+  .image:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
diff --git a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
index 385cf529..f8e1261e 100644
--- a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
+++ b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
@@ -208,7 +208,7 @@
                 <el-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'" :on-preview="handlePreview"
                   :on-remove="handleRemove" :multiple="false" list-type="picture">
                   <el-button size="small" type="primary">Click to upload</el-button>
-                  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 3mb</div>
+                  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 3 MB</div>
                 </el-upload>
 
                 <br>
diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index 61a54f43..8b00f363 100644
--- a/resources/assets/js/pages/admin/booking/uploadInvoice.vue
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -219,7 +219,9 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
+              <a target="_blank" :href="booking_details.user_po_path">
                 <img v-bind:src="booking_details.user_po_path" class="image">
+              </a>
             </el-col>
           </el-row>
         </el-card>
@@ -231,6 +233,17 @@
   .booking-details {
     font-weight: bold;
   }
+  .image {
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-left: auto;
+      margin-right: auto;
+      width: 150px;
+      display: block;
+  }
+  .image:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
diff --git a/resources/assets/js/pages/admin/booking/verification.vue b/resources/assets/js/pages/admin/booking/verification.vue
index cd0cb8ab..5ad41ab0 100644
--- a/resources/assets/js/pages/admin/booking/verification.vue
+++ b/resources/assets/js/pages/admin/booking/verification.vue
@@ -201,16 +201,20 @@
           <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
         </div>
         <el-row :gutter="12">
-          <el-col :span="22" style="text-align:center">
+          <a target="_blank" :href="booking_details.user_bankslip_path">
             <img v-bind:src="booking_details.user_bankslip_path" class="image">
-          </el-col>
+          </a>
+          <!--<el-col :span="22" style="text-align:center">
+            <img v-bind:src="booking_details.user_bankslip_path" class="image">
+          </el-col>-->
+
         </el-row>
       </el-card>
 
       <el-card class="box-card">
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <el-button :loading="loading_btn" @click="approveUserSlip" type="success">Aprrove</el-button>
+            <el-button :loading="loading_btn" @click="approveUserSlip" type="success">Approve</el-button>
             <el-button :loading="loading_btn" @click="rejectDialogVisible = true" type="danger">Reject</el-button>
           </el-col>
         </el-row>
@@ -239,6 +243,17 @@
   .booking-details {
     font-weight: bold;
   }
+  .image {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 150px;
+    display: block;
+  }
+  .image:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
diff --git a/resources/assets/js/pages/booking/po.vue b/resources/assets/js/pages/booking/po.vue
index 7f472ae4..2375a6a6 100644
--- a/resources/assets/js/pages/booking/po.vue
+++ b/resources/assets/js/pages/booking/po.vue
@@ -20,7 +20,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a target=" _blank" href="#">
+              <a target=" _blank" :href="booking_details.user_po_path">
                 <img v-bind:src="booking_details.user_po_path" class="image">
               </a>
             </el-col>
@@ -36,7 +36,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a target=" _blank" href="#">
+              <a target=" _blank" :href="booking_details.china_bankslip_path">
                 <img v-bind:src="booking_details.china_bankslip_path" class="image">
               </a>
             </el-col>
@@ -51,7 +51,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">     
-                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">   
+                <img width="100%" height="100%" src="http://via.placeholder.com/900x1615">   
             </el-col>
           </el-row>
         </el-card>
@@ -262,7 +262,9 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="booking_details.user_bankslip_path">
+              <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            </a>
           </el-col>
         </el-row>
       </el-card>
@@ -273,6 +275,17 @@
   .booking-details {
     font-weight: bold;
   }
+  .image {
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-left: auto;
+      margin-right: auto;
+      width: 150px;
+      display: block;
+  }
+  .image:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
 </style>
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index a92a2b57..24f4a72a 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -48,7 +48,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a href="https://placeholder.com">
+              <a target="_blank" :href="booking_details.china_bankslip_path">
                 <img v-bind:src="booking_details.china_bankslip_path" class="image">
               </a>
             </el-col>
@@ -231,7 +231,9 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="booking_details.user_bankslip_path">
+              <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            </a>
           </el-col>
         </el-row>
       </el-card>
@@ -242,6 +244,17 @@
     .booking-details {
         font-weight: bold;
     }
+    .image {
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-left: auto;
+      margin-right: auto;
+      width: 150px;
+      display: block;
+  }
+    .image:hover {
+      box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+    }
 </style>
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'
diff --git a/resources/assets/js/pages/settings/admin-china-bank.vue b/resources/assets/js/pages/settings/admin-china-bank.vue
index 29f8a00f..cf57765f 100644
--- a/resources/assets/js/pages/settings/admin-china-bank.vue
+++ b/resources/assets/js/pages/settings/admin-china-bank.vue
@@ -1,115 +1,263 @@
 <template>
 <div>
-  <span align="center"><h4>CIEF China Bank Details</h4></span><br>
-    <el-table :data="tableData" border style="width: 100%">
-      <el-table-column prop="comp_name" label="Company Name" width="90px"></el-table-column>
-      <el-table-column prop="bank_name" label="Bank Name"></el-table-column>
-      <el-table-column prop="bank_acc_no" label="Bank Account No" width="115px"></el-table-column>
-      <el-table-column prop="bank_address" label="Bank Address" width="111px"></el-table-column>
-      <el-table-column prop="swift_code" label="SWIFT Code"></el-table-column>
-      <el-table-column prop="cnap" label="CNAP" width="80px"></el-table-column>
-      <el-table-column prop="bank_branch" label="Bank Branch"></el-table-column>
-      <el-table-column label="Action">
-          <template slot-scope="scope">
-              <el-button type="text" size="small" @click="EditDatadialogVisible = true">Edit</el-button>
-              <el-button type="text" size="small" @click="DeleteAdddialogVisible = true">Delete</el-button>
-          </template>
-      </el-table-column>
-    </el-table><br>
-    <div align="right">
-      <el-button type="primary" icon="el-icon-plus" @click="AddDatadialogVisible = true">Add New Data</el-button>
-    </div>
-    <!-- popup add new data -->
-      <el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible" width="40%">
-          <el-form :label-position="right" label-width="150px">
-            <el-form-item label="Company Name"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Name"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Account No"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Address"><el-input></el-input></el-form-item>
-            <el-form-item label="SWIFT Code"><el-input></el-input></el-form-item>
-            <el-form-item label="CNAP"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Branch"><el-input></el-input></el-form-item>
-          </el-form>
-        <div align="center">
-            <el-button @click="AddDatadialogVisible = false">Cancel</el-button>
-            <el-button type="primary" @click="AddDatadialogVisible = false; DoneAddDatadialogVisible = true">OK</el-button>
-        </div>
-        <span slot="footer" class="dialog-footer">
-            * Please key in the data in Chinese
-        </span>
-      </el-dialog>
-      <el-dialog align="center" :visible.sync="DoneAddDatadialogVisible" width="30%">
-        <span>Data Added Successfully</span><br><br>
-        <div align="center">
-            <el-button type="primary" @click="DoneAddDatadialogVisible = false">OK</el-button>
-        </div>
-      </el-dialog>
-    <!-- popup add new data end -->
-    <!-- popup edit data -->
-      <el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible" width="40%">
-          <el-form :label-position="right" label-width="150px">
-            <el-form-item label="Company Name"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Name"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Account No"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Address"><el-input></el-input></el-form-item>
-            <el-form-item label="SWIFT Code"><el-input></el-input></el-form-item>
-            <el-form-item label="CNAP"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Branch"><el-input></el-input></el-form-item>
-          </el-form>
-        <div align="center">
-            <el-button @click="EditDatadialogVisible = false">Cancel</el-button>
-            <el-button type="primary" @click="EditDatadialogVisible = false; DoneUpdateDatadialogVisible = true">Submit</el-button>
-        </div>
-        <span slot="footer" class="dialog-footer">
-            * Please key in the data in Chinese
-        </span>
-      </el-dialog>
-      <el-dialog align="center" :visible.sync="DoneUpdateDatadialogVisible" width="30%">
-        <span>Data Updated Successfully</span><br><br>
-        <div align="center">
-            <el-button type="primary" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
-        </div>
-      </el-dialog>
-    <!-- popup edit data end -->
-    <!-- popup delete -->
-      <el-dialog align="center" :visible.sync="DeleteAdddialogVisible" width="30%">
-        <span>Data Deleted</span><br><br>
-        <div align="center">
-            <el-button type="primary" @click="DeleteAdddialogVisible = false">OK</el-button>
-        </div>
-      </el-dialog>
-    <!-- popup delete end -->
+	<span align="center"><h4>CIEF China Bank Details</h4></span><br>
+		<el-table :data="tableData" border style="width: 100%">
+			<el-table-column prop="company_name" label="Company Name" width="90px"></el-table-column>
+			<el-table-column prop="bank_name" label="Bank Name"></el-table-column>
+			<el-table-column prop="acc_no" label="Bank Account No" width="115px"></el-table-column>
+			<el-table-column prop="bank_address" label="Bank Address" width="111px"></el-table-column>
+			<el-table-column prop="swift" label="SWIFT Code"></el-table-column>
+			<el-table-column prop="cnap" label="CNAP" width="80px"></el-table-column>
+			<el-table-column prop="bank_branch" label="Bank Branch"></el-table-column>
+			<el-table-column label="Action">
+				<template slot-scope="scope">
+					<el-button type="text" size="small" @click="PopOutEditBeneficiaries(scope.$index)">Edit</el-button>
+					<el-button type="text" size="small" @click="DeleteBeneficiaries(tableData[scope.$index].id)">Delete</el-button>
+				</template>
+			</el-table-column>
+		</el-table><br>
+		<div align="right">
+			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddBeneficiaries">Add New Data</el-button>
+		</div>
+		<!-- popup add new data -->
+			<el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible" width="40%">
+				<el-form label-width="150px">
+					<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
+						<el-input v-model="beneficiariesForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
+						<el-input v-model="beneficiariesForm.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="Bank Account No" :class="{'has-error': errors.has('acc_no') }">
+						<el-input v-model="beneficiariesForm.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>
+					<el-form-item label="Bank Address" :class="{'has-error': errors.has('bank_address') }">
+						<el-input v-model="beneficiariesForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('bank_address')">{{ errors.first('bank_address') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="SWIFT Code" :class="{'has-error': errors.has('swift') }">
+						<el-input v-model="beneficiariesForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('swift')">{{ errors.first('swift') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="CNAP" :class="{'has-error': errors.has('cnap') }">
+						<el-input v-model="beneficiariesForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
+						<span class="error-message text-danger" v-if="errors.has('cnap')">{{ errors.first('cnap') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Bank Branch" :class="{'has-error': errors.has('bank_branch') }">
+						<el-input v-model="beneficiariesForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('bank_branch')">{{ errors.first('bank_branch') }}<br/></span>
+					</el-form-item>
+				</el-form>
+				<div align="center">
+					<el-button @click="AddDatadialogVisible = false">Cancel</el-button>
+					<el-button type="primary" @click="CreateBeneficiaries">OK</el-button>
+				</div>
+				<span slot="footer" class="dialog-footer">
+					* Please key in the data in Chinese
+				</span>
+			</el-dialog>
+			<el-dialog align="center" :visible.sync="DoneAddDatadialogVisible" width="30%">
+				<span>Data Added Successfully</span><br><br>
+				<div align="center">
+						<el-button type="primary" @click="DoneAddDatadialogVisible = false">OK</el-button>
+				</div>
+			</el-dialog>
+		<!-- popup add new data end -->
+		<!-- popup edit data -->
+			<el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible" width="40%">
+				<el-form label-width="150px">
+					<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
+						<el-input v-model="beneficiariesForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
+						<el-input v-model="beneficiariesForm.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="Bank Account No" :class="{'has-error': errors.has('acc_no') }">
+						<el-input v-model="beneficiariesForm.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>
+					<el-form-item label="Bank Address" :class="{'has-error': errors.has('bank_address') }">
+						<el-input v-model="beneficiariesForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('bank_address')">{{ errors.first('bank_address') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="SWIFT Code" :class="{'has-error': errors.has('swift') }">
+						<el-input v-model="beneficiariesForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('swift')">{{ errors.first('swift') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="CNAP" :class="{'has-error': errors.has('cnap') }">
+						<el-input v-model="beneficiariesForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
+						<span class="error-message text-danger" v-if="errors.has('cnap')">{{ errors.first('cnap') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Bank Branch" :class="{'has-error': errors.has('bank_branch') }">
+						<el-input v-model="beneficiariesForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('bank_branch')">{{ errors.first('bank_branch') }}<br/></span>
+					</el-form-item>
+				</el-form>
+				<div align="center">
+					<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
+					<el-button type="primary" @click="EditBeneficiaries">Submit</el-button>
+				</div>
+				<span slot="footer" class="dialog-footer">
+					* Please key in the data in Chinese
+				</span>
+			</el-dialog>
+			<el-dialog align="center" :visible.sync="DoneUpdateDatadialogVisible" width="30%">
+				<span>Data Updated Successfully</span><br><br>
+				<div align="center">
+					<el-button type="primary" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
+				</div>
+			</el-dialog>
+		<!-- popup edit data end -->
+		<!-- popup delete -->
+			<el-dialog align="center" :visible.sync="DeleteAdddialogVisible" width="30%">
+				<span>Data Deleted</span><br><br>
+				<div align="center">
+					<el-button type="primary" @click="DeleteAdddialogVisible = false">OK</el-button>
+				</div>
+			</el-dialog>
+		<!-- popup delete end -->
 </div>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        tableData: [{
-            comp_name: 'CIEF Worldwide',
-            bank_name: 'Myabank',
-            bank_acc_no: '6725137521',
-            bank_address: 'Cyberjaya',
-            swift_code: '2376abc',
-            cnap: 'ghi123',
-            bank_branch: 'Klang'
-        }, {
-            comp_name: 'DPulze',
-            bank_name: 'AFFbank',
-            bank_acc_no: '246891247',
-            bank_address: 'Putrajaya',
-            swift_code: 'qwe4567',
-            cnap: '7890po',
-            bank_branch: 'Jawa'
-        }],
-        chinaBankForm : [],
-        EditDatadialogVisible: false,
-        DeleteAdddialogVisible: false,
-        AddDatadialogVisible: false,
-        DoneAddDatadialogVisible: false,
-        DoneUpdateDatadialogVisible: false
-      }
-    }
-  }
-</script>
\ No newline at end of file
+	var axios = require('axios');
+	var client = axios.create({
+		baseURL: 'http://localhost:8000'
+	});
+
+	export default {
+		data() {
+			return {
+				tableData: [],
+				beneficiariesForm : {
+					company_name : '',
+					bank_name : '',
+					acc_no : '',
+					bank_address : '',
+					swift : '',
+					cnap : '',
+					bank_branch : '',
+				},
+				EditDatadialogVisible: false,
+				DeleteAdddialogVisible: false,
+				AddDatadialogVisible: false,
+				DoneAddDatadialogVisible: false,
+				DoneUpdateDatadialogVisible: false,
+				currentEdit : -1,
+			}
+		},
+		beforeMount(){
+			this.UpdateTableData();
+		},
+		methods: {
+			CreateBeneficiaries : function(){
+				this.AddDatadialogVisible = false;
+				console.log(this.beneficiariesForm);
+				client.post('api/setting-beneficiary', this.beneficiariesForm)
+					.then((response) => {
+						this.DoneAddDatadialogVisible = true;
+						this.ClearBeneficiariesForm();
+						this.UpdateTableData();
+					})
+					.catch((error) => {
+						console.log(error);
+						this.$message({
+							showClose: true,
+							message: 'Create Fail',
+							type: 'error',
+							duration: 10000
+						});
+						this.ClearBeneficiariesForm();
+					});
+			},
+			UpdateTableData : function(){
+				client.get('api/setting-beneficiary', this.beneficiariesForm)
+					.then((response) => {
+						this.tableData = response.data;
+					})
+					.catch((error) => {
+						console.log(error);
+						this.$message({
+							showClose: true,
+							message: 'Fetch data fail',
+							type: 'error',
+							duration: 10000
+						});
+					})
+			},
+			DeleteBeneficiaries : function(beneficiaries_id){
+				this.DeleteAdddialogVisible = true;
+				client.delete('api/setting-beneficiary/' + beneficiaries_id)
+					.then((response) => {
+						this.UpdateTableData();
+					})
+					.catch((error) => {
+						console.log(error);
+						this.$message({
+							showClose: true,
+							message: 'Delete data fail',
+							type: 'error',
+							duration: 10000
+						});
+					});
+			},
+			EditBeneficiaries : function(){
+				this.EditDatadialogVisible = false; 
+				this.DoneUpdateDatadialogVisible = true;
+
+				client.put('api/setting-beneficiary/' + this.currentEdit, this.beneficiariesForm)
+					.then((response) => {
+						this.UpdateTableData();
+					})
+					.catch((error) => {
+						console.log(error);
+						this.$message({
+							showClose: true,
+							message: 'Update Fail',
+							type: 'error',
+							duration: 10000
+						});
+					});
+			},
+			PopOutAddBeneficiaries : function(){
+				this.AddDatadialogVisible = true;
+				this.ClearBeneficiariesForm();
+			},
+			PopOutEditBeneficiaries : function(tableDataRow){
+				this.EditDatadialogVisible = true;
+				this.FillupBeneficiariesForm(tableDataRow);
+				this.currentEdit = this.tableData[tableDataRow].id;
+			},
+			ClearBeneficiariesForm : function(){
+				this.beneficiariesForm.company_name = '';
+				this.beneficiariesForm.bank_name = '';
+				this.beneficiariesForm.acc_no = '';
+				this.beneficiariesForm.bank_address = '';
+				this.beneficiariesForm.swift = '';
+				this.beneficiariesForm.cnap = '';
+				this.beneficiariesForm.bank_branch = '';
+			},
+			FillupBeneficiariesForm : function(tableDataRow){
+				this.beneficiariesForm.company_name = this.tableData[tableDataRow].company_name;
+				this.beneficiariesForm.bank_name = this.tableData[tableDataRow].bank_name;
+				this.beneficiariesForm.acc_no = this.tableData[tableDataRow].acc_no;
+				this.beneficiariesForm.bank_address = this.tableData[tableDataRow].bank_address;
+				this.beneficiariesForm.swift = this.tableData[tableDataRow].swift;
+				this.beneficiariesForm.cnap = this.tableData[tableDataRow].cnap;
+				this.beneficiariesForm.bank_branch = this.tableData[tableDataRow].bank_branch;
+			}
+		}
+	}
+</script>
+<style type="text/css">
+	.error-message{
+		position: absolute;
+		left: 0;
+	}
+</style>
+
diff --git a/resources/assets/js/pages/settings/admin-supplier.vue b/resources/assets/js/pages/settings/admin-supplier.vue
index f43d1aac..56e80737 100644
--- a/resources/assets/js/pages/settings/admin-supplier.vue
+++ b/resources/assets/js/pages/settings/admin-supplier.vue
@@ -15,7 +15,7 @@
 			</el-table-column>
 		</el-table><br>
 		<div align="right">
-			<el-button type="primary" icon="el-icon-plus" @click="AddNewSupplierdialogVisible = true">Add New Supplier</el-button>
+			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddSupplier">Add New Supplier</el-button>
 		</div>
 		<!-- popup add new supplier -->
 			<el-dialog title="Add New Supplier" align="center" :visible.sync="AddNewSupplierdialogVisible" width="40%">
@@ -101,7 +101,10 @@
 </template>
 
 <script>
-import axios from 'axios'
+var axios = require('axios');
+var client = axios.create({
+	baseURL: 'http://localhost:8000'
+});
 
 	export default {
 		data() {
@@ -131,7 +134,6 @@ import axios from 'axios'
 				axios.post('/api/setting-supplier', this.supplierForm)
 				.then((response) => {
 					this.DoneAddSupplierdialogVisible = true;
-					this.ClearSupplierForm();
 					this.UpdateTableData();
 				})
 				.catch((error) => {
@@ -142,7 +144,6 @@ import axios from 'axios'
 						type: 'error',
 						duration: 10000
 					});
-					this.ClearSupplierForm();
 				});
 			},
 			UpdateTableData : function(){
@@ -150,7 +151,6 @@ import axios from 'axios'
 					.then((response) => {
 						console.log(response.data)
 						this.tableData = response.data;
-						//this.UpdateTableData();
 					})
 					.catch((error) => {
 						console.log(error);
@@ -196,10 +196,14 @@ import axios from 'axios'
 					});
 				})
 			},
-			PopOutEditSupplier : function(supplier_id){
+			PopOutAddSupplier : function(){
+				this.AddNewSupplierdialogVisible = true;
+				this.ClearSupplierForm();
+			},
+			PopOutEditSupplier : function(tableDataRow){
 				this.EditSupplierdialogVisible = true;
-				this.FillupSupplierForm(supplier_id);
-				this.currentEdit = this.tableData[supplier_id].id;
+				this.FillupSupplierForm(tableDataRow);
+				this.currentEdit = this.tableData[tableDataRow].id;
 			},
 			ClearSupplierForm : function(){
 				this.supplierForm.company_name = '';
@@ -208,12 +212,12 @@ import axios from 'axios'
 				this.supplierForm.bank_name = '';
 				this.supplierForm.acc_no = '';
 			},
-			FillupSupplierForm : function(supplier_id){
-				this.supplierForm.company_name = this.tableData[supplier_id].company_name;
-				this.supplierForm.supplier_reg_no = this.tableData[supplier_id].supplier_reg_no;
-				this.supplierForm.gst_no = this.tableData[supplier_id].gst_no;
-				this.supplierForm.bank_name = this.tableData[supplier_id].bank_name;
-				this.supplierForm.acc_no = this.tableData[supplier_id].acc_no;
+			FillupSupplierForm : function(tableDataRow){
+				this.supplierForm.company_name = this.tableData[tableDataRow].company_name;
+				this.supplierForm.supplier_reg_no = this.tableData[tableDataRow].supplier_reg_no;
+				this.supplierForm.gst_no = this.tableData[tableDataRow].gst_no;
+				this.supplierForm.bank_name = this.tableData[tableDataRow].bank_name;
+				this.supplierForm.acc_no = this.tableData[tableDataRow].acc_no;
 			}
 		}
 	}