diff --git a/src/pages/Payroll/hourlyTemplate.vue b/src/pages/Payroll/hourlyTemplate.vue
new file mode 100644
index 0000000..6472dc7
--- /dev/null
+++ b/src/pages/Payroll/hourlyTemplate.vue
@@ -0,0 +1,408 @@
+<template>
+  <v-container fluid class="body-color">
+    <!-- ****** Edit  Hourly Template  ****** -->
+    <v-dialog v-model="editHourDialog" max-width="400px">
+      <v-card flat class="card-style pa-2" dark>
+        <v-layout>
+          <v-flex xs12>
+            <label class="title text-xs-center">Edit Hourly Template</label>
+            <v-icon size="24" class="right" @click="editHourDialog = false">cancel</v-icon>
+          </v-flex>
+        </v-layout>
+        <v-form ref="form">
+          <v-container fluid>
+            <v-flex xs12 sm12>
+              <v-layout>
+                <v-flex xs3 class="pt-4 subheading">
+                  <label class="right">Hourly Grades:</label>
+                </v-flex>
+                <v-flex xs8 sm7 class="ml-3">
+                  <v-text-field
+                    v-model="editedItem.hourlyGrades"
+                    placeholder="please fill this field"
+                  ></v-text-field>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+            <v-flex xs12 sm12>
+              <v-layout>
+                <v-flex xs3 class="pt-4 subheading">
+                  <label class="right">Hourly Reates:</label>
+                </v-flex>
+                <v-flex xs8 sm7 class="ml-3">
+                  <v-text-field
+                    v-model="editedItem.hourlyRate"
+                    placeholder="please fill this field"
+                  ></v-text-field>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+            <v-layout>
+              <v-flex xs12>
+                <v-layout>
+                  <v-spacer></v-spacer>
+                  <v-btn round dark @click="save" class="add-button">Update Hourly Template</v-btn>
+                  <v-spacer></v-spacer>
+                </v-layout>
+              </v-flex>
+            </v-layout>
+          </v-container>
+        </v-form>
+      </v-card>
+    </v-dialog>
+
+    <!-- **** HOURLY TEMPLATE **** -->
+    <v-toolbar color="transparent" flat>
+      <v-btn
+        fab
+        dark
+        class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
+        small
+        @click="addHourDialog = true"
+      >
+        <v-icon dark>add</v-icon>
+      </v-btn>
+      <v-btn
+        round
+        class="open-dialog-button hidden-sm-only hidden-xs-only"
+        dark
+        @click="addHourDialog = true"
+      >
+        <v-icon class="white--text pr-1" size="20">add</v-icon>Add Hourly Template
+      </v-btn>
+      <v-spacer></v-spacer>
+      <v-card-title class="body-1" v-show="show">
+        <v-btn icon large flat @click="displaySearch">
+          <v-avatar size="27">
+            <img src="/static/icon/search.png" alt="icon" />
+          </v-avatar>
+        </v-btn>
+      </v-card-title>
+      <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
+        <v-layout>
+          <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
+          <v-icon @click="closeSearch" color="error">close</v-icon>
+        </v-layout>
+      </v-flex>
+    </v-toolbar>
+
+    <v-data-table
+      :headers="headers"
+      :items="hourlyData"
+      :pagination.sync="pagination"
+      :search="search"
+    >
+      <template slot="items" slot-scope="props">
+        <tr class="tr">
+          <td class="td td-row">{{ props.index + 1}}</td>
+          <td class="td td-row text-xs-center">{{ props.item.hourlyGrades}}</td>
+          <td class="td td-row text-xs-center">{{ props.item.hourlyRate}}</td>
+          <!-- <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td> -->
+          <td class="td td-row text-xs-center">
+            <span>
+              <v-tooltip top>
+                <img
+                  slot="activator"
+                  style="cursor:pointer; width:20px; height:18px; "
+                  class="mr-3"
+                  @click="editItem(props.item)"
+                  src="/static/icon/edit.png"
+                />
+                <span>Edit</span>
+              </v-tooltip>
+              <v-tooltip top>
+                <img
+                  slot="activator"
+                  style="cursor:pointer; width:20px; height:20px; "
+                  class="mr-3"
+                  @click="deleteItem(props.item)"
+                  src="/static/icon/delete.png"
+                />
+                <span>Delete</span>
+              </v-tooltip>
+            </span>
+          </td>
+        </tr>
+      </template>
+      <v-alert
+        slot="no-results"
+        :value="true"
+        color="error"
+        icon="warning"
+      >Your search for "{{ search }}" found no results.</v-alert>
+    </v-data-table>
+
+    <!-- **** Add Hourly Template **** -->
+    <v-dialog v-model="addHourDialog" max-width="400px">
+      <v-card flat class="card-style pa-2" dark>
+        <v-layout>
+          <v-flex xs12>
+            <label class="title text-xs-center">Add Hourly Template</label>
+            <v-icon size="24" class="right" @click="addHourDialog = false">cancel</v-icon>
+          </v-flex>
+        </v-layout>
+        <v-form ref="form" v-model="valid" lazy-validation>
+          <v-container fluid>
+            <v-flex xs12>
+              <v-layout>
+                <v-flex xs4 class="pt-4 subheading">
+                  <label class="right">Hourly Grades:</label>
+                </v-flex>
+                <v-flex xs8 sm7 class="ml-3">
+                  <v-text-field
+                    placeholder="Please fill this field"
+                    :rules="hourRules"
+                    v-model="hourlyTypes.hourlyGrades"
+                  ></v-text-field>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+            <v-flex xs12>
+              <v-layout>
+                <v-flex xs4 class="pt-4 subheading">
+                  <label class="right">Hourly Rate:</label>
+                </v-flex>
+                <v-flex xs8 sm7 class="ml-3">
+                  <v-text-field
+                    placeholder="Please fill this field"
+                    :rules="hourRules"
+                    v-model="hourlyTypes.hourlyRate"
+                  ></v-text-field>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+            <v-layout>
+              <v-flex xs12 sm12>
+                <v-layout>
+                  <v-spacer></v-spacer>
+                  <!-- <v-btn @click="clear" round class="add-button" dark>clear</v-btn> -->
+                  <v-btn
+                    @click="submit"
+                    round
+                    dark
+                    :loading="loading"
+                    class="add-button"
+                  >Add Hourly Template</v-btn>
+                  <v-spacer></v-spacer>
+                </v-layout>
+              </v-flex>
+            </v-layout>
+          </v-container>
+        </v-form>
+      </v-card>
+    </v-dialog>
+
+    <v-snackbar
+      :timeout="timeout"
+      :top="y === 'top'"
+      :right="x === 'right'"
+      :vertical="mode === 'vertical'"
+      v-model="snackbar"
+      :color="color"
+    >{{ text }}</v-snackbar>
+    <div class="loader" v-if="showLoader">
+      <v-progress-circular indeterminate color="white"></v-progress-circular>
+    </div>
+  </v-container>
+</template>
+
+<script>
+import http from "@/Services/http.js";
+import moment from "moment";
+
+export default {
+  data: () => ({
+    snackbar: false,
+    date: null,
+    color: "",
+    y: "top",
+    x: "right",
+    mode: "",
+    timeout: 10000,
+    text: "",
+    show: true,
+    showSearch: false,
+    addHourDialog: false,
+    loading: false,
+    loadingSearch: false,
+    search: "",
+    showLoader: false,
+    editHourDialog: false,
+    valid: true,
+    disabled: true,
+    pagination: {
+      rowsPerPage: 10
+    },
+    hourRules: [v => !!v || "Field is required"],
+
+    headers: [
+      {
+        align: "",
+        text: "No",
+        sortable: false,
+        value: "No"
+      },
+      {
+        text: "Hourly Grades",
+        value: "hourlyGrades",
+        sortable: false,
+        align: "center"
+      },
+      {
+        text: "Hourly Rate",
+        value: "hourlyRate",
+        sortable: false,
+        align: "center"
+      },
+      { text: "Action", value: "", sortable: false, align: "center" }
+    ],
+    hourlyTypes: [],
+    hourlyData: [],
+    editedItem: {}
+  }),
+  methods: {
+      close() {
+      this.editHourDialog = false;
+    },
+    submit() {
+      var Hour = {
+        hourlyGrades: this.hourlyTypes.hourlyGrades,
+        hourlyRate: this.hourlyTypes.hourlyRate
+      };
+      if (this.$refs.form.validate()) {
+        this.loading = true;
+        http()
+          .post("/createHourly", Hour, {
+            headers: { Authorization: "Bearer " + this.token }
+          })
+          .then(response => {
+            this.snackbar = true;
+            this.text = response.data.message;
+            this.getHourlyList();
+            this.color = "green";
+            this.addHourDialog = false;
+            // this.color = "success";
+            this.clear();
+            this.loading = false;
+          })
+          .catch(error => {
+            console.log("error", error);
+            this.snackbar = true;
+            this.color = "red";
+            // this.text = error.response.data.message;
+            this.loading = false;
+          });
+      }
+    },
+    getHourlyList() {
+      this.showLoader = true;
+      this.loadingSearch = true;
+      http()
+        .get("/getHourlyList", {
+          headers: { Authorization: "Bearer " + this.token }
+        })
+        .then(response => {
+          this.hourlyData = response.data.data;
+          this.showLoader = false;
+          this.loadingSearch = false;
+        })
+        .catch(error => {
+          // console.log("err====>", err);
+          this.showLoader = false;
+          this.loadingSearch = false;
+          this.snackbar = true;
+          this.text = error.response.data.message;
+          if (error.response.status === 401) {
+            this.$router.replace({ path: "/" });
+            this.$store.dispatch("setToken", null);
+            this.$store.dispatch("Id", null);
+          }
+        });
+    },
+
+    editItem(item) {
+      this.editedIndex = this.hourlyData.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.editHourDialog = true;
+    },
+    deleteItem(item) {
+      let deleteGrade = {
+        hourlyId: item._id
+      };
+      http()
+        .delete(
+          "/deleteHourly",
+          confirm("Are you sure you want to delete this?") && {
+            params: deleteGrade
+          },
+          {
+            headers: {
+              Authorization: "Bearer " + this.token
+            }
+          }
+        )
+        .then(response => {
+          this.snackbar = true;
+        //   this.text = "Successfully Delete Salary ";
+          this.text = response.data.message;
+          this.color = "green";
+          this.getHourlyList();
+        })
+        .catch(error => {
+          console.log("error", error);
+          this.snackbar = true;
+          this.text = error.response.data.message;
+          this.color = "red";
+        });
+    },
+
+    save() {
+        var updateHourly = {
+            hourlyId: this.editedItem._id,
+            hourlyGrades: this.editedItem.hourlyGrades,
+            hourlyRate: this.editedItem.hourlyRate,
+        };
+      http()
+        .put("/updateHourly", updateHourly, {
+          headers: {
+            Authorization: "Bearer " + this.token
+          }
+        })
+        .then(response => {
+        //   this.text = "Successfully Edit Notification";
+          this.getHourlyList();
+          this.close();
+          this.snackbar = true;
+          this.text = response.data.message;
+          this.color = "green";
+          this.editHourDialog = false;
+        })
+        .catch(error => {
+          console.log("error", error);
+          this.snackbar = true;
+        //   this.text = error.response.data.message;
+          this.color = "red";
+        });
+    },
+
+    displaySearch() {
+      (this.show = false), (this.showSearch = true);
+    },
+    closeSearch() {
+      this.showSearch = false;
+      this.show = true;
+      this.search = "";
+    },
+    clear() {
+      this.$refs.form.reset();
+    }
+  },
+  mounted() {
+    this.token = this.$store.state.token;
+    this.getHourlyList();
+  }
+};
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/src/pages/Payroll/manageSalary.vue b/src/pages/Payroll/manageSalary.vue
new file mode 100644
index 0000000..f3755df
--- /dev/null
+++ b/src/pages/Payroll/manageSalary.vue
@@ -0,0 +1,908 @@
+<template>
+  <v-container fluid class="body-color">
+    <v-layout wrap>
+      <v-flex xs12 sm6>
+        <v-layout>
+          <v-flex xs4 class="pt-4 subheading">
+            <label class="right hidden-sm-only hidden-xs-only">Role:</label>
+            <label class="right hidden-lg-only hidden-xl-only hidden-md-only">Role:</label>
+          </v-flex>
+          <v-flex xs8 class="ml-3">
+            <v-autocomplete
+              v-model="getReport.role"
+              :rules="role"
+              :items="getRoles"
+              item-text="name"
+              item-value="role"
+              placeholder="Select Role"
+              @change="getUserDetailWithRoles"
+              required
+            ></v-autocomplete>
+          </v-flex>
+        </v-layout>
+      </v-flex>
+    </v-layout>
+
+    <!-- *** Salary Data *** -->
+    <v-data-table
+      :headers="headers"
+      :items="roleList"
+      :pagination.sync="pagination"
+      :search="search"
+    >
+      <template slot="items" slot-scope="props">
+        <tr class="tr">
+          <td class="td td-row">{{ props.index + 1}}</td>
+          <td class="td td-row text-xs-center">
+            <v-avatar size="40">
+              <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
+              <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
+            </v-avatar>
+          </td>
+          <td class="td td-row text-xs-center">{{ props.item.name}}</td>
+          <td class="td td-row text-xs-center">{{ dates(props.item.joinDate)}}</td>
+          <td class="text-xs-center td td-row">
+            <span>
+              <v-tooltip top>
+                <img
+                  slot="activator"
+                  style="cursor:pointer; width:25px; height:25px; "
+                  class="mr-3"
+                  @click="profile(props.item)"
+                  src="/static/icon/view.png"
+                />
+                <span>View</span>
+              </v-tooltip>
+              <v-tooltip top>
+                <img
+                  slot="activator"
+                  style="cursor:pointer; width:20px; height:18px; "
+                  class="mr-3"
+                  @click="editItem(props.item)"
+                  src="/static/icon/edit.png"
+                />
+                <span>Edit</span>
+              </v-tooltip>
+              <v-tooltip top>
+                <img
+                  slot="activator"
+                  style="cursor:pointer; width:20px; height:20px; "
+                  @click="deleteItem(props.item)"
+                  src="/static/icon/delete.png"
+                  class="mr-3"
+                />
+                <span>Delete</span>
+              </v-tooltip>
+            </span>
+          </td>
+        </tr>
+      </template>
+      <v-alert
+        slot="no-results"
+        :value="true"
+        color="error"
+        icon="warning"
+      >Your search for "{{ search }}" found no results.</v-alert>
+    </v-data-table>
+
+    <!-- ****** PROFILE VIEW  ******  -->
+
+    <v-dialog v-model="profileSalaryDialog">
+      <v-card flat class="text-xs-center white--text">
+        <v-layout>
+          <v-flex xs12 class="card-style pa-2">
+            <label class="title text-xs-center">View Manage Salary</label>
+            <v-icon
+              size="24"
+              color="white"
+              class="right"
+              @click="profileSalaryDialog = false"
+            >cancel</v-icon>
+          </v-flex>
+        </v-layout>
+        <v-layout wrap>
+          <v-flex xs12 sm12 md4>
+            <v-card flat>
+              <h3 class="py-2 text-xs-center card-style white--text">Profile</h3>
+              <v-card-text>
+                <v-container>
+                  <v-layout wrap>
+                    <v-flex xs12>
+                      <v-layout>
+                        <v-flex
+                          xs12
+                          class="text-xs-center text-sm-center text-md-center text-lg-center"
+                        >
+                          <v-avatar size="80px">
+                            <img src="/static/icon/user.png" v-if="!editedItem.profilePicUrl" />
+                            <img
+                              :src="editedItem.profilePicUrl"
+                              v-else-if="editedItem.profilePicUrl"
+                            />
+                          </v-avatar>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout>
+                        <v-flex xs12 sm12>
+                          <h3 class="text-xs-center">
+                            <b>{{ editedItem.name }}</b>
+                          </h3>
+                          <p class="text-xs-center grey--text">{{ editedItem.roleName }}</p>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout style="border: 1px solid lightgrey;">
+                        <v-flex xs6 sm6 class="pa-0">
+                          <h4 class="right">
+                            <b>Join Date :</b>
+                          </h4>
+                        </v-flex>
+                        <v-flex sm6 xs6 class="pa-0">
+                          <h4>{{ editedItem.joinDate }}</h4>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout style="border: 1px solid lightgrey;">
+                        <v-flex xs6 sm6 class="pa-0">
+                          <h4 class="right">
+                            <b>Date of Birth :</b>
+                          </h4>
+                        </v-flex>
+                        <v-flex sm6 xs6 class="pa-0">
+                          <h4>{{ editedItem.dob }}</h4>
+                        </v-flex>
+                      </v-layout>
+                      <v-layout style="border: 1px solid lightgrey;">
+                        <v-flex xs6 sm6 class="pa-0">
+                          <h4 class="right">
+                            <b>Phone No :</b>
+                          </h4>
+                        </v-flex>
+                        <v-flex sm6 xs6 class="pa-0">
+                          <h4>{{ editedItem.mobileNo }}</h4>
+                        </v-flex>
+                      </v-layout>
+                    </v-flex>
+                  </v-layout>
+                </v-container>
+              </v-card-text>
+            </v-card>
+          </v-flex>
+          <v-flex xs12 sm12 md8 v-if="viewSalary">
+            <v-card flat>
+              <v-flex xs12 sm12>
+                <v-container fluid grid-list-md>
+                  <v-layout wrap>
+                    <v-flex xs12 sm12 md6>
+                      <v-card flat>
+                        <v-form ref="form" lazy-validation class="py-4">
+                          <v-layout>
+                            <v-flex xs4 class="pt-4 subheading">
+                              <label class="right hidden-xs-only">Salary Grades :</label>
+                            </v-flex>
+                            <v-flex xs8 sm7 class="ml-3">
+                              <v-flex xs8 sm7 class="ml-3">
+                                <v-text-field
+                                  solo
+                                  v-model="editedItem.salaryTemplate.salaryGrades"
+                                  readonly
+                                ></v-text-field>
+                              </v-flex>
+                            </v-flex>
+                          </v-layout>
+                          <v-layout>
+                            <v-flex xs4 class="pt-4 subheading">
+                              <label class="right">Basic Salary :</label>
+                            </v-flex>
+                            <v-flex xs8 sm7 class="ml-3">
+                              <v-flex xs8 sm7 class="ml-3">
+                                <v-text-field
+                                  solo
+                                  v-model="editedItem.salaryTemplate.basicSalary"
+                                  readonly
+                                ></v-text-field>
+                              </v-flex>
+                            </v-flex>
+                          </v-layout>
+                        </v-form>
+                      </v-card>
+                    </v-flex>
+                    <v-flex xs12 sm12 md5></v-flex>
+                    <v-flex xs12 sm12 md6>
+                      <v-card flat>
+                        <v-toolbar>
+                          <h3>Allowances</h3>
+                        </v-toolbar>
+                        <v-layout v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.allowances" :key="index">
+                          <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                            <v-text-field
+                              readonly
+                              solo
+                              label="Enter Allowances Label"
+                              v-model="editedItem.allowancesName"
+                            ></v-text-field>
+                          </v-flex>
+                          <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
+                            <v-text-field
+                              readonly
+                              solo
+                              v-model="editedItem.allowancesValue"
+                              label="Enter Allowances Value"
+                            ></v-text-field>
+                          </v-flex>
+                        </v-layout>
+                      </v-card>
+                    </v-flex>
+                    <v-flex xs12 sm12 md6>
+                      <v-card flat>
+                        <v-toolbar>
+                          <h3>Deduction</h3>
+                        </v-toolbar>
+                        <v-layout v-for="(editedItem,salaryTemplate,index) in editedItem.salaryTemplate.deduction" :key="index">
+                          <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                            <v-text-field
+                              readonly
+                              solo
+                              label="Enter Deduction Label"
+                              v-model="editedItem.deductionName"
+                            ></v-text-field>
+                          </v-flex>
+                          <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
+                            <v-text-field
+                              readonly
+                              solo
+                              label="Enter Deduction Value"
+                              v-model="editedItem.deductionValue"
+                            ></v-text-field>
+                          </v-flex>
+                        </v-layout>
+                        <!-- <v-layout>
+                          <v-flex xs4 class="pt-4 subheading">
+                            <v-text-field
+                              v-model="editedItem.salaryTemplate.deduction.deductionName"
+                              readonly
+                            ></v-text-field>
+                          </v-flex>
+                          <v-flex xs8 sm7 class="ml-3">
+                            <v-flex xs8 sm7 class="ml-3">
+                              <v-text-field
+                                v-model="editedItem.salaryTemplate.deduction.deductionValue"
+                                readonly
+                              ></v-text-field>
+                            </v-flex>
+                          </v-flex>
+                        </v-layout> -->
+                      </v-card>
+                    </v-flex>
+                    <v-flex xs12 sm12 md12 style="padding-top: 1%;">
+                      <v-card>
+                        <v-toolbar>
+                          <h3>Total Salary Details</h3>
+                        </v-toolbar>
+                        <v-layout>
+                          <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                            <v-text-field solo value="Gross Salary"></v-text-field>
+                          </v-flex>
+                          <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
+                            <v-flex xs8 sm7 class="ml-3">
+                              <v-text-field
+                                v-model="editedItem.salaryTemplate.grossSalary"
+                                solo
+                                readonly
+                              ></v-text-field>
+                            </v-flex>
+                          </v-flex>
+                        </v-layout>
+                        <v-layout>
+                          <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                            <v-text-field solo value="Total Deduction"></v-text-field>
+                          </v-flex>
+                          <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
+                            <v-flex xs8 sm7 class="ml-3">
+                              <v-text-field
+                                v-model="editedItem.salaryTemplate.totalDeduction"
+                                solo
+                                readonly
+                              ></v-text-field>
+                            </v-flex>
+                          </v-flex>
+                        </v-layout>
+                        <v-layout>
+                          <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                            <v-text-field solo value="Net Salary"></v-text-field>
+                          </v-flex>
+                          <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
+                            <v-flex xs8 sm7 class="ml-3">
+                              <v-text-field
+                                v-model="editedItem.salaryTemplate.netSalary"
+                                solo
+                                readonly
+                              ></v-text-field>
+                            </v-flex>
+                          </v-flex>
+                        </v-layout>
+                      </v-card>
+                    </v-flex>
+                  </v-layout>
+                </v-container>
+              </v-flex>
+            </v-card>
+          </v-flex>
+          <v-flex xs12 sm12 md8 v-if="viewHourly">
+            <v-card flat>
+              <v-flex xs12 sm12>
+                <v-container fluid grid-list-md>
+                  <v-layout wrap>
+                    <v-flex xs12 sm12 md6>
+                      <v-card flat>
+                        <v-form ref="form" lazy-validation class="py-4">
+                          <v-layout>
+                            <v-flex xs4 class="pt-4 subheading">
+                              <label class="right hidden-xs-only">Hourly Grades :</label>
+                            </v-flex>
+                            <v-flex xs8 sm7 class="ml-3">
+                              <v-flex xs8 sm7 class="ml-3">
+                                <v-text-field
+                                  solo
+                                  v-model="editedItem.hourlyTemplate.hourlyGrades"
+                                  readonly
+                                ></v-text-field>
+                              </v-flex>
+                            </v-flex>
+                          </v-layout>
+                          <v-layout>
+                            <v-flex xs4 class="pt-4 subheading">
+                              <label class="right">Hourly Rate :</label>
+                            </v-flex>
+                            <v-flex xs8 sm7 class="ml-3">
+                              <v-flex xs8 sm7 class="ml-3">
+                                <v-text-field
+                                  solo
+                                  v-model="editedItem.hourlyTemplate.hourlyRate"
+                                  readonly
+                                ></v-text-field>
+                              </v-flex>
+                            </v-flex>
+                          </v-layout>
+                        </v-form>
+                      </v-card>
+                    </v-flex>
+                    <v-flex xs12 sm12 md12 style="padding-top: 1%;">
+                      <v-card>
+                        <v-toolbar>
+                          <h3>Total Salary Details</h3>
+                        </v-toolbar>
+                        <v-layout>
+                          <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                            <v-text-field solo value="Gross Salary"></v-text-field>
+                          </v-flex>
+                          <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
+                            <v-flex xs8 sm7 class="ml-3">
+                              <v-text-field
+                                v-model="editedItem.hourlyTemplate.grossSalary"
+                                solo
+                                readonly
+                              ></v-text-field>
+                            </v-flex>
+                          </v-flex>
+                        </v-layout>
+                        <v-layout>
+                          <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                            <v-text-field solo value="Total Deduction"></v-text-field>
+                          </v-flex>
+                          <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
+                            <v-flex xs8 sm7 class="ml-3">
+                              <v-text-field
+                                v-model="editedItem.hourlyTemplate.totalDeduction"
+                                solo
+                                readonly
+                              ></v-text-field>
+                            </v-flex>
+                          </v-flex>
+                        </v-layout>
+                        <v-layout>
+                          <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                            <v-text-field solo value="Net Hourly Rate"></v-text-field>
+                          </v-flex>
+                          <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
+                            <v-flex xs8 sm7 class="ml-3">
+                              <v-text-field
+                                v-model="editedItem.hourlyTemplate.netSalary"
+                                solo
+                                readonly
+                              ></v-text-field>
+                            </v-flex>
+                          </v-flex>
+                        </v-layout>
+                      </v-card>
+                    </v-flex>
+                  </v-layout>
+                </v-container>
+              </v-flex>
+            </v-card>
+          </v-flex>
+        </v-layout>
+      </v-card>
+    </v-dialog>
+
+    <!-- ****** Edit  Hourly Template  ****** -->
+    <v-dialog v-model="editSalaryDialog" max-width="400px">
+      <v-card flat class="card-style pa-2" dark>
+        <v-layout>
+          <v-flex xs12>
+            <label class="title text-xs-center">Edit Manage Salary</label>
+            <v-icon size="24" class="right" @click="editSalaryDialog = false">cancel</v-icon>
+          </v-flex>
+        </v-layout>
+        <v-form ref="form">
+          <v-container fluid>
+            <v-flex xs12 sm12>
+              <v-layout>
+                <v-flex xs3 class="pt-4 subheading">
+                  <label class="right">Salary:</label>
+                </v-flex>
+                <v-flex xs8 sm7 class="ml-3">
+                  <v-select
+                    :items="salary"
+                    v-model="editedItem.salary"
+                    placeholder="please fill this field"
+                    @change="selectSalary()"
+                  ></v-select>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+            <v-flex xs12 sm12>
+              <v-layout>
+                <v-flex xs3 class="pt-4 subheading">
+                  <label class="right">Template:</label>
+                </v-flex>
+                <v-flex xs8 sm7 class="ml-3" v-if="monthlyGrade">
+                  <v-autocomplete
+                    v-model="editedItem.salaryId"
+                    :items="salaryData"
+                    item-text="salaryGrades"
+                    item-value="_id"
+                    placeholder="please fill this field"
+                    @change="selectGrade()"
+                    required
+                  ></v-autocomplete>
+                </v-flex>
+                <v-flex xs8 sm7 class="ml-3" v-if="hourlyGrades">
+                  <v-autocomplete
+                    v-model="editedItem.salaryId"
+                    :items="hourlyData"
+                    item-text="hourlyGrades"
+                    item-value="_id"
+                    placeholder="please fill this field"
+                    @change="selectGrade()"
+                    required
+                  ></v-autocomplete>
+                </v-flex>
+              </v-layout>
+            </v-flex>
+            <v-layout>
+              <v-flex xs12>
+                <v-layout>
+                  <v-spacer></v-spacer>
+                  <v-btn round dark @click="save" class="add-button">Update Salary Template</v-btn>
+                  <v-spacer></v-spacer>
+                </v-layout>
+              </v-flex>
+            </v-layout>
+          </v-container>
+        </v-form>
+      </v-card>
+    </v-dialog>
+  </v-container>
+</template>
+
+<script>
+import http from "@/Services/http.js";
+import Util from "@/util";
+import moment from "moment";
+export default {
+  data: () => ({
+    search: "",
+    pagination: {
+      rowsPerPage: 10
+    },
+
+    role: [v => !!v || "Role Name is required"],
+    getRoles: [],
+    teacherList: [],
+    roleList: [],
+    salaryData: [],
+    hourlyData: [],
+    salary: ["Monthly", "Hourly"],
+
+    salaryItem: "",
+
+    getReport: {
+      role: ""
+    },
+
+    showTeacher: false,
+    editSalaryDialog: false,
+    profileSalaryDialog: false,
+    monthlyGrade: false,
+    hourlyGrades: false,
+    viewSalary: false,
+    viewHourly: false,
+
+    editedItem: {
+      salaryTemplate: {
+        allowances: {
+
+        },
+        deduction: {
+
+        }
+      },
+      hourlyTemplate: {}
+    },
+
+    // salaryGrades: {},
+    // salaryTemplate: {
+    //   salaryGrades: ""
+    // },
+    // salaryTemplate :{
+    //   allowances: {
+    //     allowancesName: "",
+    //     allowancesValue: ""
+    //   },
+    //   deduction: {
+    //     deductionName: "",
+    //     deductionValue: ""
+    //   }
+    // },
+
+    headers: [
+      {
+        text: "No",
+        align: "",
+        sortable: false,
+        value: "No"
+      },
+      {
+        text: "Profile Pic",
+        value: "profilePicUrl",
+        sortable: false,
+        align: "center"
+      },
+      { text: "Name", value: "name", sortable: false, align: "center" },
+      {
+        text: "Join Date",
+        value: "joinDate",
+        sortable: false,
+        align: "center"
+      },
+      { text: "Action", value: "", sortable: false, align: "center" }
+    ],
+    desserts: [],
+  }),
+
+  methods: {
+    close() {
+      this.editHourDialog = false;
+    },
+    dates: function(date) {
+      return moment(date).format("MMMM DD, YYYY");
+    },
+    editItem(item) {
+      this.editedIndex = this.roleList.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.editSalaryDialog = true;
+    },
+    profile(item) {
+      this.editedIndex = this.roleList.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.profileSalaryDialog = true;
+      // console.log("item", item);
+      if(item.salaryTemplate) {
+        this.viewSalary = true;
+        this.viewHourly = false
+      } else {
+        this.viewHourly = true;
+        this.viewSalary = false
+      }
+    },
+    getRole() {
+      this.showLoader = true;
+      var token = this.$store.state.token;
+      http()
+        .get("/getRolesList", {
+          headers: { Authorization: "Bearer " + token }
+        })
+        .then(response => {
+          this.getRoles = response.data.data;
+          if (this.getRoles[2].role !== 3) {
+            this.getRoles = response.data.data;
+            console.log("roles", this.getRoles[2].role);
+          }
+          this.showLoader = false;
+        })
+        .catch(error => {
+          this.showLoader = false;
+          if (error.response.status === 401) {
+            this.$router.replace({ path: "/" });
+            this.$store.dispatch("setToken", null);
+            this.$store.dispatch("Id", null);
+          }
+        });
+    },
+
+    getRoleInputs(role) {
+      // console.log("role", role);
+      if (role === 3) {
+        this.showTeacher = true;
+        this.getTeacherList();
+      }
+    },
+
+    getTeacherList() {
+      this.showLoader = true;
+      var token = this.$store.state.token;
+      http()
+        .get("/getTeachersList", {
+          headers: { Authorization: "Bearer " + token }
+        })
+        .then(response => {
+          this.teacherList = response.data.data;
+          this.showTeacher = true;
+          this.showLoader = false;
+        })
+        .catch(error => {
+          this.showLoader = false;
+          if (error.response.status === 401) {
+            this.$router.replace({ path: "/" });
+            this.$store.dispatch("setToken", null);
+            this.$store.dispatch("Id", null);
+          }
+        });
+    },
+
+    getUserDetailWithRoles() {
+      this.showLoader = true;
+      http()
+        .get(
+          "/getUserDetailWithRoles",
+          { params: { role: this.getReport.role } },
+          {
+            headers: { Authorization: "Bearer " + this.token }
+          }
+        )
+        .then(response => {
+          this.roleList = response.data.data;
+          this.showLoader = false;
+        })
+        .catch(err => {
+          this.showLoader = false;
+        });
+    },
+    getSalaryList() {
+      this.showLoader = true;
+      this.loadingSearch = true;
+      http()
+        .get("/getSalaryList", {
+          headers: { Authorization: "Bearer " + this.token }
+        })
+        .then(response => {
+          this.salaryData = response.data.data;
+          this.showLoader = false;
+          this.loadingSearch = false;
+        })
+        .catch(error => {
+          // console.log("err====>", err);
+          this.showLoader = false;
+          this.loadingSearch = false;
+          this.snackbar = true;
+          this.text = error.response.data.message;
+          if (error.response.status === 401) {
+            this.$router.replace({ path: "/" });
+            this.$store.dispatch("setToken", null);
+            this.$store.dispatch("Id", null);
+          }
+        });
+    },
+    getHourlyList() {
+      this.showLoader = true;
+      this.loadingSearch = true;
+      http()
+        .get("/getHourlyList", {
+          headers: { Authorization: "Bearer " + this.token }
+        })
+        .then(response => {
+          this.hourlyData = response.data.data;
+          this.showLoader = false;
+          this.loadingSearch = false;
+        })
+        .catch(error => {
+          // console.log("err====>", err);
+          this.showLoader = false;
+          this.loadingSearch = false;
+          this.snackbar = true;
+          this.text = error.response.data.message;
+          if (error.response.status === 401) {
+            this.$router.replace({ path: "/" });
+            this.$store.dispatch("setToken", null);
+            this.$store.dispatch("Id", null);
+          }
+        });
+    },
+    editItem(item) {
+      this.editedIndex = this.salaryData.indexOf(item);
+      this.editedIndex = this.hourlyData.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.editedItem.date =
+        this.editedItem.date != undefined
+          ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
+          : (this.editedItem.date = "");
+      this.editSalaryDialog = true;
+    },
+    selectSalary() {
+      if (this.editedItem.salary === "Monthly") {
+        this.monthlyGrade = true;
+        this.hourlyGrades = false;
+      } else {
+        this.monthlyGrade = false;
+        this.hourlyGrades = true;
+      }
+    },
+    selectGrade() {
+      console.log("this.editedItem", this.editedItem);
+    },
+    selectView() {
+      if (this.editedItem.view.png === "Monthly") {
+        this.viewSalary = true;
+        this.viewHourly = false;
+      } else {
+        this.viewSalary = false;
+        this.viewHourly = true;
+      }
+    },
+
+    save() {
+      var updateSalary = {
+        role: this.editedItem.role,
+        userId: this.editedItem._id,
+        templateName: this.editedItem.salary,
+        templateId: this.editedItem.salaryId
+      };
+      http()
+        .put("/updateUserSalary", updateSalary, {
+          headers: {
+            Authorization: "Bearer " + this.token
+          }
+        })
+        .then(response => {
+          this.getUserDetailWithRoles();
+          this.close();
+          this.snackbar = true;
+          this.text = response.data.message;
+          this.color = "green";
+          this.editSalaryDialog = false;
+        })
+        .catch(error => {
+          console.log("error", error);
+          this.snackbar = true;
+          this.color = "red";
+        });
+    },
+
+    deleteItem(item) {
+      // let deleteGrade = {
+      //   hourlyId: item._id
+      // };
+      // http()
+      //   .delete(
+      //     "/deleteHourly",
+      //     confirm("Are you sure you want to delete this?") && {
+      //       params: deleteGrade
+      //     },
+      //     {
+      //       headers: {
+      //         Authorization: "Bearer " + this.token
+      //       }
+      //     }
+      //   )
+      //   .then(response => {
+      //     this.snackbar = true;
+      //   //   this.text = "Successfully Delete Salary ";
+      //     this.text = response.data.message;
+      //     this.color = "green";
+      //     this.getUserDetailWithRoles();
+      //   })
+      //   .catch(error => {
+      //     console.log("error", error);
+      //     this.snackbar = true;
+      //     this.text = error.response.data.message;
+      //     this.color = "red";
+      //   });
+    }
+
+    // selectAllowances() {
+    //   this.salaryTypeData.push({
+    //     allowancesValue: (this.salaryType.allowancesValue = "")
+    //   });
+    //   //   console.log("this.salaryTypeData", this.salaryTypeData);
+    //   var totalAllowances = "";
+    //   this.salaryTypeData.forEach(allowancesValue_ => {
+    //     if (allowancesValue_.allowancesValue != "") {
+    //       // console.log("allowances", allowancesValue_.allowancesValue);
+    //       totalAllowances =
+    //         Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
+    //     }
+    //     this.grossSalary =
+    //       totalAllowances + Number(this.salaryType.basicSalary);
+    //   });
+    // },
+    // allowancesAdd() {
+    //   this.editedItem.allowances.push({
+    //     allowancesValue: (this.salaryType.allowancesValue = "")
+    //   });
+    //   var totalAllowances = "";
+    //   this.editedItem.allowances.forEach(allowancesValue_ => {
+    //     if (allowancesValue_.allowancesValue != "") {
+    //       //   console.log("allowances", allowancesValue_.allowancesValue);
+    //       totalAllowances =
+    //         Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
+    //       console.log("totalAllowances", totalAllowances);
+    //     }
+    //     this.editedItem.grossSalary =
+    //       totalAllowances + Number(this.editedItem.basicSalary);
+    //     console.log("this.editedItem.grossSalary", this.editedItem.grossSalary);
+    //   });
+    // },
+    // selectDeduction() {
+    //   this.salaryTypeDeductionData.push({
+    //     deductionValue: (this.salaryType.deductionValue = "")
+    //   });
+    //   var totalDeductions = "";
+    //   this.salaryTypeDeductionData.forEach(deductionValue_ => {
+    //     if (deductionValue_.deductionValue != "") {
+    //       //   console.log("deduction", deductionValue_.deductionValue);
+    //       totalDeductions =
+    //         Number(totalDeductions) + Number(deductionValue_.deductionValue);
+    //     }
+    //   });
+    // },
+    // deductionAdd() {
+    //   this.editedItem.deduction.push({
+    //     deductionValue: (this.salaryType.deductionValue = "")
+    //   });
+    //   var totalDeductions = "";
+    //   this.editedItem.deduction.forEach(deductionValue_ => {
+    //     if (deductionValue_.deductionValue != "") {
+    //       //   console.log("deduction", deductionValue_.deductionValue);
+    //       totalDeductions =
+    //         Number(totalDeductions) + Number(deductionValue_.deductionValue);
+    //       console.log("this.totalDeductions", totalDeductions);
+    //     }
+    //     // this.editedItem.totalDeduction = totalDeductions;
+    //     // console.log("this.totalDeduction", this.editedItem.totalDeduction);
+    //   });
+    // },
+    // deleteSelectAllowances: function(index) {
+    //   this.salaryTypeData.splice(index, 1);
+    // },
+    // deleteallowancesAdd: function(index) {
+    //   this.editedItem.allowances.splice(index, 1);
+    // },
+    // deleteSelectDeduction: function(index) {
+    //   this.salaryTypeDeductionData.splice(index, 1);
+    // },
+    // deletedeductionAdd: function(index) {
+    //   this.editedItem.deduction.splice(index, 1);
+    // },
+    // clear() {
+    //   this.$refs.form.reset();
+    //   this.disable = false;
+    // }
+  },
+
+  mounted() {
+    this.token = this.$store.state.token;
+    this.getRole();
+    this.getSalaryList();
+    this.getHourlyList();
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/pages/Payroll/salaryTemplate.vue b/src/pages/Payroll/salaryTemplate.vue
new file mode 100644
index 0000000..37c7efa
--- /dev/null
+++ b/src/pages/Payroll/salaryTemplate.vue
@@ -0,0 +1,1158 @@
+<template>
+  <v-container fluid class="body-color" style="box-sizing: border-box;">
+    <!-- ****** EDIT SALARY ****** -->
+    <v-dialog v-model="editSalaryDialog">
+      <v-card flat class="text-xs-center white--text">
+        <v-layout>
+          <v-flex xs12 class="card-style pa-2">
+            <label class="title text-xs-center">Edit Salary</label>
+            <v-icon size="24" color="white" class="right" @click="editSalaryDialog = false">cancel</v-icon>
+          </v-flex>
+        </v-layout>
+
+        <v-flex xs12 sm12>
+          <v-container fluid grid-list-md>
+            <v-layout wrap>
+              <v-flex xs12 sm12 md6>
+                <v-card flat>
+                  <v-toolbar dark class="card-styles" flat>
+                    <v-spacer></v-spacer>
+                    <h3>Salary Template</h3>
+                    <v-spacer></v-spacer>
+                  </v-toolbar>
+                  <v-form ref="form" v-model="valid" lazy-validation class="py-4">
+                    <v-layout>
+                      <v-flex xs4 class="pt-4 subheading">
+                        <label class="right hidden-xs-only">Salary Grades :</label>
+                      </v-flex>
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-flex xs8 sm7 class="ml-3">
+                          <v-text-field :rules="salaryRules" v-model="editedItem.salaryGrades"></v-text-field>
+                        </v-flex>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs4 class="pt-4 subheading">
+                        <label class="right">Basic Salary :</label>
+                      </v-flex>
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-flex xs8 sm7 class="ml-3">
+                          <v-text-field :rules="basicRules" v-model="editedItem.basicSalary"></v-text-field>
+                        </v-flex>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs4 class="pt-4 subheading">
+                        <label class="right">Overtime Rate (Per Hour) :</label>
+                      </v-flex>
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-flex xs8 sm7 class="ml-3">
+                          <v-text-field :rules="overtimeRules" v-model="editedItem.overtimeRate"></v-text-field>
+                        </v-flex>
+                      </v-flex>
+                    </v-layout>
+                  </v-form>
+                </v-card>
+              </v-flex>
+              <!-- <v-flex xs12 sm12 md5></v-flex> -->
+              <v-flex xs12 sm12 md6>
+                <v-card flat>
+                  <v-toolbar dark class="card-styles" flat>
+                    <v-spacer></v-spacer>
+                    <h3>Allowances</h3>
+                    <v-spacer></v-spacer>
+                  </v-toolbar>
+                  <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index">
+                    <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field
+                        solo
+                        label="Enter Allowances Label"
+                        v-model="editedItem.allowancesName"
+                      ></v-text-field>
+                    </v-flex>
+                    <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field
+                        solo
+                        v-model="editedItem.allowancesValue"
+                        label="Enter Allowances Value"
+                        v-on:keyup="addAllowancesValue"
+                      ></v-text-field>
+                    </v-flex>
+                    <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-btn
+                        color="white"
+                        round
+                        class="right mt-3"
+                        @click="deleteallowancesAdd(index)"
+                        v-if="index != 0"
+                      >
+                        <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
+                      </v-btn>
+                      <v-btn color="white" round class="right mt-3" @click="allowancesAdd">
+                        <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
+                      </v-btn>
+                    </v-flex>
+                  </v-layout>
+                  <!-- <v-flex xs12 sm12 md6> -->
+                  <v-card flat>
+                    <v-toolbar dark class="card-styles" flat>
+                      <v-spacer></v-spacer>
+                      <h3>Deduction</h3>
+                      <v-spacer></v-spacer>
+                    </v-toolbar>
+                    <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
+                      <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                        <v-text-field
+                          solo
+                          label="Enter Deduction Label"
+                          v-model="editedItem.deductionName"
+                        ></v-text-field>
+                      </v-flex>
+                      <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
+                        <v-text-field
+                          solo
+                          label="Enter Deduction Value"
+                          v-model="editedItem.deductionValue"
+                          v-on:keyup="addDeductionValue"
+                        ></v-text-field>
+                      </v-flex>
+                      <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
+                        <v-btn
+                          color="white"
+                          round
+                          class="right mt-3"
+                          @click="deletedeductionAdd(index)"
+                          v-if="index != 0"
+                        >
+                          <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
+                        </v-btn>
+                        <v-btn color="white" round class="right mt-3" @click="deductionAdd">
+                          <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
+                        </v-btn>
+                      </v-flex>
+                    </v-layout>
+                  </v-card>
+                  <!-- </v-flex> -->
+                </v-card>
+              </v-flex>
+              <!-- <v-flex xs12 sm12 md6>
+                <v-card flat>
+                  <v-toolbar dark class="card-styles" flat>
+                    <v-spacer></v-spacer>
+                    <h3>Deduction</h3>
+                    <v-spacer></v-spacer>
+                  </v-toolbar>
+                  <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
+                    <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field
+                        solo
+                        label="Enter Deduction Label"
+                        v-model="editedItem.deductionName"
+                      ></v-text-field>
+                    </v-flex>
+                    <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field
+                        solo
+                        label="Enter Deduction Value"
+                        v-model="editedItem.deductionValue"
+                        v-on:keyup="addDeductionValue"
+                      ></v-text-field>
+                    </v-flex>
+                    <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-btn
+                        color="white"
+                        round
+                        class="right mt-3"
+                        @click="deletedeductionAdd(index)"
+                        v-if="index != 0"
+                      >
+                        <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
+                      </v-btn>
+                      <v-btn color="white" round class="right mt-3" @click="deductionAdd">
+                        <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
+                      </v-btn>
+                    </v-flex>
+                  </v-layout>
+                </v-card>
+              </v-flex>-->
+              <!-- <v-flex xs12 sm12 md4></v-flex> -->
+              <v-flex xs12 sm12 md12 style="padding-top: 1%;">
+                <v-card flat>
+                  <v-toolbar dark class="card-styles" flat>
+                    <v-spacer></v-spacer>
+                    <h3>Total Salary Details</h3>
+                    <v-spacer></v-spacer>
+                  </v-toolbar>
+                  <v-layout>
+                    <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field solo value="Gross Salary"></v-text-field>
+                    </v-flex>
+                    <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-text-field v-model="editedItem.grossSalary" box readonly></v-text-field>
+                      </v-flex>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field solo value="Total Deduction"></v-text-field>
+                    </v-flex>
+                    <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-text-field v-model="editedItem.totalDeduction" box readonly></v-text-field>
+                      </v-flex>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field solo value="Net Salary"></v-text-field>
+                    </v-flex>
+                    <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-text-field v-model="editedItem.netSalary" box readonly></v-text-field>
+                      </v-flex>
+                    </v-flex>
+                  </v-layout>
+                </v-card>
+                <v-layout>
+                  <v-flex xs12>
+                    <v-card-actions>
+                      <v-spacer class="hidden-xs-only"></v-spacer>
+                      <v-btn
+                        color="open-dialog-button"
+                        dark
+                        class="right mt-3"
+                        @click="save"
+                      >Update Salary Template</v-btn>
+                    </v-card-actions>
+                  </v-flex>
+                </v-layout>
+              </v-flex>
+            </v-layout>
+          </v-container>
+        </v-flex>
+      </v-card>
+    </v-dialog>
+
+    <!-- ****** PROFILE VIEW  ******  -->
+
+    <v-dialog v-model="profileSalaryDialog">
+      <v-card flat class="text-xs-center white--text">
+        <v-layout>
+          <v-flex xs12 class="card-style pa-2">
+            <label class="title text-xs-center">View Salary</label>
+            <v-icon
+              size="24"
+              color="white"
+              class="right"
+              @click="profileSalaryDialog = false"
+            >cancel</v-icon>
+          </v-flex>
+        </v-layout>
+
+        <v-flex xs12 sm12>
+          <v-container fluid grid-list-md>
+            <v-layout wrap>
+              <v-flex xs12 sm12 md6>
+                <v-card flat>
+                  <v-toolbar dark class="card-styles" flat>
+                    <v-spacer></v-spacer>
+                    <h3>Salary Template</h3>
+                    <v-spacer></v-spacer>
+                  </v-toolbar>
+                  <v-form ref="form" v-model="valid" lazy-validation class="py-4">
+                    <v-layout>
+                      <v-flex xs4 class="pt-4 subheading">
+                        <label class="right hidden-xs-only">Salary Grades :</label>
+                      </v-flex>
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-flex xs8 sm7 class="ml-3">
+                          <v-text-field
+                            :rules="salaryRules"
+                            v-model="editedItem.salaryGrades"
+                            readonly
+                          ></v-text-field>
+                        </v-flex>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs4 class="pt-4 subheading">
+                        <label class="right">Basic Salary :</label>
+                      </v-flex>
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-flex xs8 sm7 class="ml-3">
+                          <v-text-field
+                            :rules="basicRules"
+                            v-model="editedItem.basicSalary"
+                            readonly
+                          ></v-text-field>
+                        </v-flex>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs4 class="pt-4 subheading">
+                        <label class="right">Overtime Rate (Per Hour) :</label>
+                      </v-flex>
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-flex xs8 sm7 class="ml-3">
+                          <v-text-field
+                            :rules="overtimeRules"
+                            v-model="editedItem.overtimeRate"
+                            readonly
+                          ></v-text-field>
+                        </v-flex>
+                      </v-flex>
+                    </v-layout>
+                  </v-form>
+                </v-card>
+              </v-flex>
+              <!-- <v-flex xs12 sm12 md5></v-flex> -->
+              <v-flex xs12 sm12 md6>
+                <v-card flat>
+                  <v-toolbar dark class="card-styles" flat>
+                    <v-spacer></v-spacer>
+                    <h3>Allowances</h3>
+                    <v-spacer></v-spacer>
+                  </v-toolbar>
+                  <v-layout v-for="(editedItem,index) in editedItem.allowances" :key="index">
+                    <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field
+                        solo
+                        label="Enter Allowances Label"
+                        v-model="editedItem.allowancesName"
+                      ></v-text-field>
+                    </v-flex>
+                    <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field
+                        solo
+                        v-model="editedItem.allowancesValue"
+                        label="Enter Allowances Value"
+                      ></v-text-field>
+                    </v-flex>
+                  </v-layout>
+                  <!-- <v-flex xs12 sm12 md6> -->
+                    <v-card flat>
+                      <v-toolbar dark class="card-styles" flat>
+                        <v-spacer></v-spacer>
+                        <h3>Deduction</h3>
+                        <v-spacer></v-spacer>
+                      </v-toolbar>
+                      <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
+                        <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                          <v-text-field
+                            solo
+                            label="Enter Deduction Label"
+                            v-model="editedItem.deductionName"
+                          ></v-text-field>
+                        </v-flex>
+                        <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
+                          <v-text-field
+                            solo
+                            label="Enter Deduction Value"
+                            v-model="editedItem.deductionValue"
+                          ></v-text-field>
+                        </v-flex>
+                      </v-layout>
+                    </v-card>
+                  <!-- </v-flex> -->
+                </v-card>
+              </v-flex>
+              <!-- <v-flex xs12 sm12 md6>
+                <v-card flat>
+                  <v-toolbar dark class="card-styles" flat>
+                    <v-spacer></v-spacer>
+                    <h3>Deduction</h3>
+                    <v-spacer></v-spacer>
+                  </v-toolbar>
+                  <v-layout v-for="(editedItem,index) in editedItem.deduction" :key="index">
+                    <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field
+                        solo
+                        label="Enter Deduction Label"
+                        v-model="editedItem.deductionName"
+                      ></v-text-field>
+                    </v-flex>
+                    <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field
+                        solo
+                        label="Enter Deduction Value"
+                        v-model="editedItem.deductionValue"
+                      ></v-text-field>
+                    </v-flex>
+                  </v-layout>
+                </v-card>
+              </v-flex>-->
+              <!-- <v-flex xs12 sm12 md4></v-flex> -->
+              <v-flex xs12 sm12 md12 style="padding-top: 1%;">
+                <v-card flat>
+                  <v-toolbar dark class="card-styles" flat>
+                    <v-spacer></v-spacer>
+                    <h3>Total Salary Details</h3>
+                    <v-spacer></v-spacer>
+                  </v-toolbar>
+                  <v-layout>
+                    <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field solo value="Gross Salary"></v-text-field>
+                    </v-flex>
+                    <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-text-field v-model="editedItem.grossSalary" solo readonly></v-text-field>
+                      </v-flex>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field solo value="Total Deduction"></v-text-field>
+                    </v-flex>
+                    <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-text-field v-model="editedItem.totalDeduction" solo readonly></v-text-field>
+                      </v-flex>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field solo value="Net Salary"></v-text-field>
+                    </v-flex>
+                    <v-flex xs8 sm7 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-text-field v-model="editedItem.netSalary" solo readonly></v-text-field>
+                      </v-flex>
+                    </v-flex>
+                  </v-layout>
+                </v-card>
+              </v-flex>
+            </v-layout>
+          </v-container>
+        </v-flex>
+      </v-card>
+    </v-dialog>
+    <!-- ****** EXAM TABLE****** -->
+
+    <v-toolbar color="transparent" flat>
+      <v-btn
+        fab
+        dark
+        class="open-dialog-button hidden-xl-only hidden-md-only hidden-lg-only"
+        small
+        @click="addSalaryDialog = true"
+      >
+        <v-icon dark>add</v-icon>
+      </v-btn>
+      <v-btn
+        round
+        class="open-dialog-button hidden-sm-only hidden-xs-only"
+        dark
+        @click="addSalaryDialog = true"
+      >
+        <v-icon class="white--text pr-1" size="20">add</v-icon>Add Salary
+      </v-btn>
+      <v-spacer></v-spacer>
+      <v-card-title class="body-1" v-show="show">
+        <v-btn icon large flat @click="displaySearch">
+          <v-avatar size="27">
+            <img src="/static/icon/search.png" alt="icon" />
+          </v-avatar>
+        </v-btn>
+      </v-card-title>
+      <v-flex xs8 sm8 md3 lg2 v-show="showSearch">
+        <v-layout>
+          <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
+          <v-icon @click="closeSearch" color="error">close</v-icon>
+        </v-layout>
+      </v-flex>
+    </v-toolbar>
+    <v-data-table
+      :headers="headers"
+      :items="salaryData"
+      :pagination.sync="pagination"
+      :search="search"
+    >
+      <template slot="items" slot-scope="props">
+        <tr class="tr">
+          <td class="td td-row">{{ props.index + 1}}</td>
+          <td class="td td-row text-xs-center">{{ props.item.salaryGrades}}</td>
+          <td class="td td-row text-xs-center">{{ props.item.basicSalary}}</td>
+          <td class="td td-row text-xs-center">{{ props.item.overtimeRate}}</td>
+          <td class="td td-row text-xs-center">
+            <span>
+              <v-tooltip top>
+                <img
+                  slot="activator"
+                  style="cursor:pointer; width:25px; height:25px; "
+                  class="mr-3"
+                  @click="profile(props.item)"
+                  src="/static/icon/view.png"
+                />
+                <span>View</span>
+              </v-tooltip>
+              <v-tooltip top>
+                <img
+                  slot="activator"
+                  style="cursor:pointer; width:20px; height:18px; "
+                  class="mr-3"
+                  @click="editItem(props.item)"
+                  src="/static/icon/edit.png"
+                />
+                <span>Edit</span>
+              </v-tooltip>
+              <v-tooltip top>
+                <img
+                  slot="activator"
+                  style="cursor:pointer; width:20px; height:20px; "
+                  class="mr-3"
+                  @click="deleteItem(props.item)"
+                  src="/static/icon/delete.png"
+                />
+                <span>Delete</span>
+              </v-tooltip>
+            </span>
+          </td>
+        </tr>
+      </template>
+      <v-alert
+        slot="no-results"
+        :value="true"
+        color="error"
+        icon="warning"
+      >Your search for "{{ search }}" found no results.</v-alert>
+    </v-data-table>
+
+    <!-- ****** ADD SALARY ****** -->
+    <v-dialog v-model="addSalaryDialog">
+      <v-card flat class="text-xs-center white--text">
+        <v-layout>
+          <v-flex xs12 class="card-style pa-2">
+            <label class="title text-xs-center">Add Salary</label>
+            <v-icon size="24" color="white" class="right" @click="addSalaryDialog = false">cancel</v-icon>
+          </v-flex>
+        </v-layout>
+
+        <v-flex xs12 sm12>
+          <v-container fluid grid-list-md>
+            <v-layout wrap>
+              <v-flex xs12 sm12 md6>
+                <v-card flat>
+                  <v-toolbar dark class="card-styles" flat>
+                    <v-spacer></v-spacer>
+                    <h3>Salary Template</h3>
+                    <v-spacer></v-spacer>
+                  </v-toolbar>
+                  <v-form ref="form" v-model="valid" lazy-validation class="py-4">
+                    <v-layout>
+                      <v-flex xs4 class="pt-4 subheading">
+                        <label class="right hidden-xs-only">Salary Grades :</label>
+                      </v-flex>
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-flex xs8 sm7 class="ml-3">
+                          <v-text-field :rules="salaryRules" v-model="salaryType.salaryGrades"></v-text-field>
+                        </v-flex>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs4 class="pt-4 subheading">
+                        <label class="right">Basic Salary :</label>
+                      </v-flex>
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-flex xs8 sm7 class="ml-3">
+                          <v-text-field
+                            :rules="basicRules"
+                            v-on:keyup="addSalary"
+                            v-model="salaryType.basicSalary"
+                          ></v-text-field>
+                        </v-flex>
+                      </v-flex>
+                    </v-layout>
+                    <v-layout>
+                      <v-flex xs4 class="pt-4 subheading">
+                        <label class="right">Overtime Rate (Per Hour) :</label>
+                      </v-flex>
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-flex xs8 sm7 class="ml-3">
+                          <v-text-field :rules="overtimeRules" v-model="salaryType.overtimeRate"></v-text-field>
+                        </v-flex>
+                      </v-flex>
+                    </v-layout>
+                  </v-form>
+                </v-card>
+              </v-flex>
+              <!-- <v-flex xs12 sm12 md5></v-flex> -->
+              <v-flex xs12 sm12 md6>
+                <v-card flat>
+                  <v-toolbar dark class="card-styles" flat>
+                    <v-spacer></v-spacer>
+                    <h3>Allowances</h3>
+                    <v-spacer></v-spacer>
+                  </v-toolbar>
+                  <v-layout v-for="(salaryType,index) in salaryTypeData" :key="index">
+                    <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field
+                        solo
+                        label="Enter Allowances Label"
+                        v-model="salaryType.allowancesName"
+                      ></v-text-field>
+                    </v-flex>
+                    <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field
+                        solo
+                        v-model="salaryType.allowancesValue"
+                        label="Enter Allowances Value"
+                        v-on:keyup="addAllowances"
+                      ></v-text-field>
+                    </v-flex>
+                    <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-btn
+                        color="white"
+                        round
+                        class="right mt-3"
+                        @click="deleteSelectAllowances(index)"
+                        v-if="index != 0"
+                      >
+                        <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
+                      </v-btn>
+                      <v-btn color="white" round class="right mt-3" @click="selectAllowances">
+                        <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
+                      </v-btn>
+                    </v-flex>
+                  </v-layout>
+                  <!-- <v-flex xs12 sm12 md6> -->
+                  <v-card flat>
+                    <v-toolbar dark class="card-styles" flat>
+                      <v-spacer></v-spacer>
+                      <h3>Deduction</h3>
+                      <v-spacer></v-spacer>
+                    </v-toolbar>
+                    <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index">
+                      <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                        <v-text-field
+                          solo
+                          label="Enter Deduction Label"
+                          v-model="salaryType.deductionName"
+                        ></v-text-field>
+                      </v-flex>
+                      <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
+                        <v-text-field
+                          solo
+                          label="Enter Deduction Value"
+                          v-model="salaryType.deductionValue"
+                          v-on:keyup="addDeduction"
+                        ></v-text-field>
+                      </v-flex>
+                      <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
+                        <v-btn
+                          color="white"
+                          round
+                          class="right mt-3"
+                          @click="deleteSelectDeduction(index)"
+                          v-if="index != 0"
+                        >
+                          <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
+                        </v-btn>
+                        <v-btn color="white" round class="right mt-3" @click="selectDeduction">
+                          <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
+                        </v-btn>
+                      </v-flex>
+                    </v-layout>
+                  </v-card>
+                  <!-- </v-flex> -->
+                </v-card>
+              </v-flex>
+              <!-- <v-flex xs12 sm12 md6>
+                <v-card flat>
+                  <v-toolbar dark class="card-styles" flat>
+                    <v-spacer></v-spacer>
+                    <h3>Deduction</h3>
+                    <v-spacer></v-spacer>
+                  </v-toolbar>
+                  <v-layout v-for="(salaryType,index) in salaryTypeDeductionData" :key="index">
+                    <v-flex xs4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field
+                        solo
+                        label="Enter Deduction Label"
+                        v-model="salaryType.deductionName"
+                      ></v-text-field>
+                    </v-flex>
+                    <v-flex xs8 sm4 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-text-field
+                        solo
+                        label="Enter Deduction Value"
+                        v-model="salaryType.deductionValue"
+                        v-on:keyup="addDeduction"
+                      ></v-text-field>
+                    </v-flex>
+                    <v-flex xs4 sm6 class="mt-4 hidden-xs-only hidden-sm-only">
+                      <v-btn
+                        color="white"
+                        round
+                        class="right mt-3"
+                        @click="deleteSelectDeduction(index)"
+                        v-if="index != 0"
+                      >
+                        <img src="/static/icon/delete1.png" style="width: 30px; height: 30px;" />
+                      </v-btn>
+                      <v-btn color="white" round class="right mt-3" @click="selectDeduction">
+                        <img src="/static/icon/add1.png" style="width: 30px; height: 30px;" />
+                      </v-btn>
+                    </v-flex>
+                  </v-layout>
+                </v-card>
+              </v-flex>-->
+              <!-- <v-flex xs12 sm12 md4></v-flex> -->
+              <v-flex xs12 sm12 md12 style="padding-top: 1%;">
+                <v-card flat>
+                  <v-toolbar dark class="card-styles" flat>
+                    <v-spacer></v-spacer>
+                    <h3>Total Salary Details</h3>
+                    <v-spacer></v-spacer>
+                  </v-toolbar>
+                  <v-layout>
+                    <v-flex xs4 class="pt-4 subheading">
+                      <v-text-field solo value="Gross Salary"></v-text-field>
+                    </v-flex>
+                    <v-flex xs8 sm7 class="ml-3">
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-text-field v-model="grossSalary" box readonly></v-text-field>
+                      </v-flex>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs4 class="pt-4 subheading">
+                      <v-text-field solo value="Total Deduction"></v-text-field>
+                    </v-flex>
+                    <v-flex xs8 sm7 class="ml-3">
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-text-field v-model="totalDeduction" box readonly></v-text-field>
+                      </v-flex>
+                    </v-flex>
+                  </v-layout>
+                  <v-layout>
+                    <v-flex xs4 class="pt-4 subheading">
+                      <v-text-field solo value="Net Salary"></v-text-field>
+                    </v-flex>
+                    <v-flex xs8 sm7 class="ml-3">
+                      <v-flex xs8 sm7 class="ml-3">
+                        <v-text-field v-model="salaryType.netSalary" box readonly></v-text-field>
+                      </v-flex>
+                    </v-flex>
+                  </v-layout>
+                </v-card>
+                <v-layout>
+                  <v-flex xs12>
+                    <v-card-actions>
+                      <v-spacer class="hidden-xs-only"></v-spacer>
+                      <v-btn
+                        color="open-dialog-button"
+                        dark
+                        class="right mt-3"
+                        @click="submit"
+                      >Add Salary Template</v-btn>
+                    </v-card-actions>
+                  </v-flex>
+                </v-layout>
+              </v-flex>
+            </v-layout>
+          </v-container>
+        </v-flex>
+      </v-card>
+    </v-dialog>
+    <v-snackbar
+      :timeout="timeout"
+      :top="y === 'top'"
+      :right="x === 'right'"
+      :vertical="mode === 'vertical'"
+      v-model="snackbar"
+      :color="color"
+    >{{ text }}</v-snackbar>
+    <div class="loader" v-if="showLoader">
+      <v-progress-circular indeterminate color="white"></v-progress-circular>
+    </div>
+  </v-container>
+</template>
+
+<script>
+import http from "@/Services/http.js";
+import moment from "moment";
+
+export default {
+  data: () => ({
+    snackbar: false,
+    date: null,
+    color: "",
+    y: "top",
+    x: "right",
+    mode: "",
+    timeout: 10000,
+    text: "",
+    show: true,
+    showSearch: false,
+    addSalaryDialog: false,
+    loading: false,
+    loadingSearch: false,
+    search: "",
+    showLoader: false,
+    editSalaryDialog: false,
+    profileSalaryDialog: false,
+    valid: true,
+    disabled: true,
+    showAllowances: false,
+    showDeduction: false,
+    pagination: {
+      rowsPerPage: 10
+    },
+    salaryTypes: [],
+    salaryTypeData: [
+      {
+        allowancesValue: "",
+        allowancesName: "House Rent",
+        totalAllowances: 0
+      }
+    ],
+    salaryTypeDeductionData: [
+      {
+        deductionValue: "",
+        deductionName: "Provident fund",
+        totalDeductions: 0
+      }
+    ],
+    grossSalary: 0,
+    totalDeduction: 0,
+    salaryType: {
+      netSalary: 0,
+      salaryGrades: "",
+      allowancesValue: "",
+      deductionValue: "",
+      overtimeRate: ""
+    },
+
+    basicRules: [v => !!v || " Basic Salary is required"],
+    salaryRules: [v => !!v || "Salary Grades is required"],
+    overtimeRules: [v => !!v || "Overtime Rate is required"],
+
+    headers: [
+      {
+        align: "",
+        text: "No",
+        sortable: false,
+        value: "No"
+      },
+      {
+        text: "Salary Grades",
+        value: "salaryGrades",
+        sortable: false,
+        align: "center"
+      },
+      {
+        text: "Basic Salary",
+        value: "basicSalary",
+        sortable: false,
+        align: "center"
+      },
+      {
+        text: "Overtime Rate",
+        value: "overtimeRate",
+        sortable: false,
+        align: "center"
+      },
+      { text: "Action", value: "", sortable: false, align: "center" }
+    ],
+    salaryData: [],
+    editedItem: {},
+    token: ""
+  }),
+  methods: {
+    getSalaryList() {
+      this.showLoader = true;
+      this.loadingSearch = true;
+      http()
+        .get("/getSalaryList", {
+          headers: { Authorization: "Bearer " + this.token }
+        })
+        .then(response => {
+          this.salaryData = response.data.data;
+          this.showLoader = false;
+          this.loadingSearch = false;
+        })
+        .catch(error => {
+          // console.log("err====>", err);
+          this.showLoader = false;
+          this.loadingSearch = false;
+          this.snackbar = true;
+          this.text = error.response.data.message;
+          if (error.response.status === 401) {
+            this.$router.replace({ path: "/" });
+            this.$store.dispatch("setToken", null);
+            this.$store.dispatch("Id", null);
+          }
+        });
+    },
+    editItem(item) {
+      this.editedIndex = this.salaryData.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.editedItem.date =
+        this.editedItem.date != undefined
+          ? (this.editedItem.date = this.editedItem.date.substring(0, 10))
+          : (this.editedItem.date = "");
+      this.editSalaryDialog = true;
+    },
+    profile(item) {
+      this.editedIndex = this.salaryData.indexOf(item);
+      this.editedItem = Object.assign({}, item);
+      this.profileSalaryDialog = true;
+    },
+    deleteItem(item) {
+      let Salary = {
+        salaryId: item._id
+      };
+      http()
+        .delete(
+          "/deleteSalary",
+          confirm("Are you sure you want to Delete this?") && {
+            params: Salary
+          },
+          {
+            headers: { Authorization: "Bearer " + this.token }
+          }
+        )
+        .then(response => {
+          this.snackbar = true;
+          this.text = "Successfully Delete Salary ";
+          this.text = response.data.message;
+          this.color = "green";
+          this.getSalaryList();
+        })
+        .catch(error => {
+          this.snackbar = true;
+          this.text = error.response.data.message;
+          this.color = "red";
+        });
+    },
+    close() {
+      this.editSalaryDialog = false;
+    },
+    submit() {
+      var salary = {
+        salaryGrades: this.salaryType.salaryGrades,
+        basicSalary: this.salaryType.basicSalary,
+        overtimeRate: this.salaryType.overtimeRate,
+        allowances: this.salaryTypeData,
+        deduction: this.salaryTypeDeductionData,
+        grossSalary: this.grossSalary,
+        totalDeduction: this.totalDeduction,
+        netSalary: this.salaryType.netSalary
+      };
+      if (this.$refs.form.validate()) {
+        this.loading = true;
+        //   console.log("api data", this.salaryType);
+        http()
+          .post("/createSalary", salary)
+          .then(response => {
+            // console.log("response", response);
+            this.snackbar = true;
+            this.text = "Successfully Created Salary ";
+            this.text = response.data.message;
+            this.color = "green";
+            this.addSalaryDialog = false;
+            this.getSalaryList();
+            this.color = "success";
+            this.salaryTypeData = [];
+            this.salaryTypeDeductionData = [];
+            this.salaryType = "";
+            this.grossSalary = "";
+            this.totalDeduction = "";
+            this.loading = false;
+            this.clear();
+          })
+          .catch(error => {
+            console.log("error", error);
+            this.snackbar = true;
+            this.text = error.response.data.message;
+            this.color = "red";
+            this.loading = false;
+          });
+      }
+    },
+    selectAllowances() {
+      this.salaryTypeData.push({
+        allowancesValue: (this.salaryType.allowancesValue = "")
+      });
+      //   console.log("this.salaryTypeData", this.salaryTypeData);
+      var totalAllowances = "";
+      this.salaryTypeData.forEach(allowancesValue_ => {
+        if (allowancesValue_.allowancesValue != "") {
+          // console.log("allowances", allowancesValue_.allowancesValue);
+          totalAllowances =
+            Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
+        }
+        this.grossSalary =
+          totalAllowances + Number(this.salaryType.basicSalary);
+      });
+    },
+    allowancesAdd() {
+      this.editedItem.allowances.push({
+        allowancesValue: (this.salaryType.allowancesValue = "")
+      });
+      var totalAllowances = "";
+      this.editedItem.allowances.forEach(allowancesValue_ => {
+        if (allowancesValue_.allowancesValue != "") {
+          //   console.log("allowances", allowancesValue_.allowancesValue);
+          totalAllowances =
+            Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
+          console.log("totalAllowances", totalAllowances);
+        }
+        this.editedItem.grossSalary =
+          totalAllowances + Number(this.editedItem.basicSalary);
+          console.log("this.editedItem.grossSalary", this.editedItem.grossSalary);
+      });
+    },
+    selectDeduction() {
+      this.salaryTypeDeductionData.push({
+        deductionValue: (this.salaryType.deductionValue = "")
+      });
+      var totalDeductions = "";
+      this.salaryTypeDeductionData.forEach(deductionValue_ => {
+        if (deductionValue_.deductionValue != "") {
+          //   console.log("deduction", deductionValue_.deductionValue);
+          totalDeductions =
+            Number(totalDeductions) + Number(deductionValue_.deductionValue);
+        }
+      });
+    },
+    deductionAdd() {
+      this.editedItem.deduction.push({
+        deductionValue: (this.salaryType.deductionValue = "")
+      });
+      var totalDeductions = "";
+      this.editedItem.deduction.forEach(deductionValue_ => {
+        if (deductionValue_.deductionValue != "") {
+          //   console.log("deduction", deductionValue_.deductionValue);
+          totalDeductions =
+            Number(totalDeductions) + Number(deductionValue_.deductionValue);
+          console.log("this.totalDeductions", totalDeductions);
+        }
+        // this.editedItem.totalDeduction = totalDeductions;
+        // console.log("this.totalDeduction", this.editedItem.totalDeduction);
+      });
+    },
+    deleteSelectAllowances: function(index) {
+      this.salaryTypeData.splice(index, 1);
+    },
+    deleteallowancesAdd: function(index) {
+      this.editedItem.allowances.splice(index, 1);
+    },
+    deleteSelectDeduction: function(index) {
+      this.salaryTypeDeductionData.splice(index, 1);
+    },
+    deletedeductionAdd: function(index) {
+      this.editedItem.deduction.splice(index, 1);
+    },
+    clear() {
+      this.$refs.form.reset();
+      this.disable = false;
+    },
+    save() {
+      var updateSalary = {
+        salaryId: this.editedItem._id,
+        salaryGrades: this.editedItem.salaryGrades,
+        basicSalary: this.editedItem.basicSalary,
+        overtimeRate: this.editedItem.overtimeRate,
+        allowances: this.salaryTypeData,
+        deduction: this.salaryTypeDeductionData,
+        grossSalary: this.editedItem.grossSalary,
+        totalDeduction: this.editedItem.totalDeduction,
+        netSalary: this.editedItem.netSalary
+      };
+      http()
+        .put("/updateSalary", updateSalary)
+        .then(response => {
+          this.snackbar = true;
+          this.text = response.data.message;
+          this.color = "green";
+          this.getSalaryList();
+          this.close();
+        })
+        .catch(error => {
+          this.snackbar = true;
+          this.text = error.response.data.message;
+          this.color = "red";
+        });
+    },
+    displaySearch() {
+      (this.show = false), (this.showSearch = true);
+    },
+    closeSearch() {
+      this.showSearch = false;
+      this.show = true;
+      this.search = "";
+    },
+    addSalary: function() {
+      var showSalary = this.salaryType.basicSalary;
+      this.grossSalary = showSalary;
+      //   console.log("salary", this.grossSalary);
+    },
+    addAllowances: function() {
+      var totalAllowances = "";
+      this.salaryTypeData.forEach(allowancesValue_ => {
+        if (allowancesValue_.allowancesValue != "") {
+          totalAllowances =
+            Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
+        }
+        this.grossSalary =
+          totalAllowances +
+          Number(this.salaryType.basicSalary) +
+          Number(this.salaryType.allowancesValue);
+      });
+    },
+    addAllowancesValue: function() {
+      var totalAllowances = "";
+      this.editedItem.allowances.forEach(allowancesValue_ => {
+        if (allowancesValue_.allowancesValue != "") {
+          totalAllowances =
+            Number(totalAllowances) + Number(allowancesValue_.allowancesValue);
+        }
+        this.grossSalary =
+          totalAllowances +
+          Number(this.editedItem.basicSalary) +
+          Number(this.editedItem.allowancesValue);
+      });
+    },
+    addDeduction: function() {
+      //   console.log(
+      //     "this.salaryType.deductionValue",
+      //     this.salaryType.deductionValue
+      //   );
+      var totalDeductions = "";
+      this.salaryTypeDeductionData.forEach(deductionValue_ => {
+        if (deductionValue_.deductionValue != "") {
+          totalDeductions =
+            Number(totalDeductions) + Number(deductionValue_.deductionValue);
+        }
+      });
+      //   console.log("deduction", totalDeductions);
+      this.totalDeduction = totalDeductions;
+      this.salaryType.netSalary = this.grossSalary - this.totalDeduction;
+    },
+    addDeductionValue: function() {
+      var totalDeductions = "";
+      this.editedItem.deduction.forEach(deductionValue_ => {
+        if (deductionValue_.deductionValue != "") {
+          totalDeductions =
+            Number(totalDeductions) + Number(deductionValue_.deductionValue);
+        }
+        // this.totalDeduction = totalDeductions;
+        // console.log("this.totalDeductions", this.totalDeduction);
+      });
+      this.editedItem.totalDeduction = totalDeductions;
+      this.editedItem.netSalary =
+        this.editedItem.grossSalary - this.editedItem.totalDeduction;
+    }
+  },
+
+  mounted() {
+    this.token = this.$store.state.token;
+    this.getSalaryList();
+  }
+};
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file