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 dde1ae12..a2523b6c 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%">
@@ -103,7 +103,7 @@
 <script>
 var axios = require('axios');
 var client = axios.create({
-  baseURL: 'http://localhost:8000'
+	baseURL: 'http://localhost:8000'
 });
 
 	export default {
@@ -134,7 +134,7 @@ var client = axios.create({
 				client.post('api/setting-supplier', this.supplierForm)
 				.then((response) => {
 					this.DoneAddSupplierdialogVisible = true;
-					this.ClearSupplierForm();
+					this.UpdateTableData();
 				})
 				.catch((error) => {
 					console.log(error);
@@ -144,14 +144,12 @@ var client = axios.create({
 						type: 'error',
 						duration: 10000
 					});
-					this.ClearSupplierForm();
 				});
 			},
 			UpdateTableData : function(){
 				client.get('api/setting-supplier', this.supplierForm)
 					.then((response) => {
 						this.tableData = response.data;
-						this.UpdateTableData();
 					})
 					.catch((error) => {
 						console.log(error);
@@ -197,10 +195,14 @@ var client = axios.create({
 					});
 				})
 			},
-			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 = '';
@@ -209,12 +211,12 @@ var client = axios.create({
 				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;
 			}
 		}
 	}