diff --git a/client/src/components/SchemaView.vue b/client/src/components/SchemaView.vue
index accf08f..1e2f059 100644
--- a/client/src/components/SchemaView.vue
+++ b/client/src/components/SchemaView.vue
@@ -71,7 +71,7 @@
         
         <div v-if="itsFirstState === false">
           <tabs> 
-          <TabPane v-if="this.$store.state.role === 1" :label="dataCount" icon="lock-combination">
+          <TabPane v-if="this.$store.state.role === 1" :label="'Data ('+ dataTotal + ')'" icon="lock-combination">
           <schemalist v-if="this.$store.state.role === 1" :schema="dataSchema" :pageno="pageno" :datashow="'dataA'" v-on:on-paginate="pagination" v-on:on-handlepage="handlepage" :limit="limit" :skip="skip" :dataTotal="dataTotal" :data="dataData" :configuration="configuration" :instanceEntries="instanceEntries" :dynamicData="dynamicData" v-on:setValues="setValues" :flowzData="flowzData" v-on:sort-data="sortData" v-on:search-data="searchData"></schemalist>
           <!-- <schemalist v-if="this.$store.state.role === 2" :schema="dataSchema" :pageno="pageno" :datashow="'dataU'" v-on:on-paginate="pagination" v-on:on-handlepage="handlepage" :limit="limit" :skip="skip" :dataTotal="dataTotal" :data="dataData2" :configuration="configuration" :instanceEntries="instanceEntries" :dynamicData="dynamicData" v-on:setValues="setValues" :flowzData="flowzData" v-on:sort-data="sortData" v-on:search-data="searchData"></schemalist> -->
 
@@ -130,8 +130,8 @@
             </div>
           </div>
           </TabPane>
-          <TabPane v-if="this.$store.state.role === 2" :label="'Work Pool ('+ dataData2.length + ')'" icon="lock-combination">
-            <schemalist :schema="dataSchema" :datashow="'dataU'" :pageno="pageno" v-on:on-paginate="pagination" v-on:on-handlepage="handlepage" :limit="limit" :skip="skip" :dataTotal="dataTotal" :data="dataData2" :configuration="configuration" :instanceEntries="instanceEntries" :dynamicData="dynamicData" v-on:setValues="setValues" :flowzData="flowzData" v-on:sort-data="sortData" v-on:search-data="searchData"></schemalist>
+          <TabPane v-if="this.$store.state.role === 2" :label="'Work Pool ('+ dataTotalUnclaim + ')'" icon="lock-combination">
+            <schemalist :schema="dataSchema" :datashow="'dataU'" :pageno="pageno" v-on:on-paginate="pagination" v-on:on-handlepage="handlepage" :limit="limit" :skip="skip" :dataTotalUnclaim="dataTotalUnclaim" :data="dataData2" :configuration="configuration" :instanceEntries="instanceEntries" :dynamicData="dynamicData" v-on:setValues="setValues" :flowzData="flowzData" v-on:sort-data="sortData" v-on:search-data="searchData"></schemalist>
             <div style="padding: 10px">
             <div class="row" v-if="id != null">
               <div class="col-md-12" id="top">
@@ -187,8 +187,8 @@
             </div>
           </div>
           </TabPane>
-          <TabPane v-if="this.$store.state.role === 2" :label="'In Progress ('+ dataClaim.length + ')'" icon="lock-combination">
-            <schemalist v-if="this.$store.state.role === 2" :schema="dataSchema" :pageno="pageno" :datashow="'dataC'" v-on:on-paginate="pagination" v-on:on-handlepage="handlepage" :limit="limit" :skip="skip" :dataTotal="dataTotal" :data="dataClaim" :configuration="configuration" :instanceEntries="instanceEntries" :dynamicData="dynamicData" v-on:setValues="setValues" :flowzData="flowzData" v-on:sort-data="sortData" v-on:search-data="searchData"></schemalist>
+          <TabPane v-if="this.$store.state.role === 2" :label="'In Progress ('+ dataTotalClaim + ')'" icon="lock-combination">
+            <schemalist v-if="this.$store.state.role === 2" :schema="dataSchema" :pageno="pageno" :datashow="'dataC'" v-on:on-paginate2="pagination2" v-on:on-handlepage2="handlepage2" :limit="limit" :skip="skip" :dataTotalClaim="dataTotalClaim" :data="dataClaim" :configuration="configuration" :instanceEntries="instanceEntries" :dynamicData="dynamicData" v-on:setValues="setValues" :flowzData="flowzData" v-on:sort-data="sortData" v-on:search-data="searchData"></schemalist>
           </TabPane>
           </Tabs>
         </div>
@@ -203,6 +203,7 @@
       <Spin v-if="loadEmail" size="large" fix></Spin>
       <div v-if="schemabinding">
       <schemasubformview ref="schemasubformview" :schemainstance="formSchemaInstance" id="schemasubformview"></schemasubformview>
+      <schemasubformview ref="schemasubformviewfile" :schemainstance="formSchemaInstancefile" id="schemasubformview"></schemasubformview>
     </div>
     <div v-if="email">
       <email :btnArr="btnArr" :flag="flag" :emailSchemaId="emailSchemaId" :sendDataEmail="sendDataEmail" :iid="item.id" v-on:on-done="emailService"></email>
@@ -212,6 +213,7 @@
 </template>
 
 <script>
+/*eslint-disable */
 import _ from 'lodash'
 import $ from 'jquery'
 
@@ -233,12 +235,19 @@ export default {
   },
   data () {
     return {
+      formSchemaInstancefile: {
+        data: [],
+        entity: []
+      },
+      fileYes: '',
       check: 0,
       dataClaim: [],
       loadEmail: false,
       skip: 0,
       limit: 10,
       dataTotal: 0,
+      dataTotalUnclaim: 0,
+      dataTotalClaim: 0,
       pageno: 1,
       isFlowzLoaded: false,
       htmlcontent: false,
@@ -353,6 +362,20 @@ export default {
       this.skip = 0
       this.populateTables()
     },
+    pagination2 (skip, limit, page) {
+      this.skip = skip
+      this.limit = limit
+      this.entriesTotal = limit
+      this.pageno = page
+      this.populateTables()
+      this.skip = 0
+    },
+    handlepage2 (skip, limit, size) {
+      this.limit = size
+      this.entriesTotal = size
+      this.skip = 0
+      this.populateTables()
+    },
     info (item, index, button) {
       this.modalInfo.title = `Row index: ${index}`
       this.modalInfo.content = JSON.stringify(item, null, 2)
@@ -734,9 +757,24 @@ export default {
                     this.email = true
                     this.loadEmail = false
                   } else {
-                    this.sendDataEmail = res.data.template + this.$refs.schemasubformview.$el.outerHTML
-                    this.email = true
-                    this.loadEmail = false
+                    if (res.data.template.indexOf("{{FileAttachment}}") !== -1) {
+                      let file_entity = _.filter(this.formSchemaInstance.entity, { 'type': 'file' })
+                      for (let i = 0; i < file_entity.length; i++) {
+                        this.formSchemaInstancefile.entity.push(file_entity[i])
+                        let fieldName = file_entity[i].name
+                        let files = this.formSchemaInstance.data[0][fieldName]
+                        this.formSchemaInstancefile.data.push({[fieldName]: files})
+                      }
+                      setTimeout(() => {
+                        this.sendDataEmail = res.data.template.replace(/{{OrderData}}/g, this.$refs.schemasubformview.$el.outerHTML).replace(/{{FileAttachment}}/g, this.$refs.schemasubformviewfile.$el.outerHTML)
+                        this.email = true
+                        this.loadEmail = false
+                      }, 1000);
+                    } else{ 
+                      this.sendDataEmail = res.data.template.replace(/{{OrderData}}/g, this.$refs.schemasubformview.$el.outerHTML)
+                      this.email = true
+                      this.loadEmail = false
+                    }
                   }
                 }, 1000)
               })
@@ -999,6 +1037,8 @@ export default {
     setValues (values) {
       this.validErr = []
       this.email = false
+      this.formSchemaInstancefile.entity = []
+      this.formSchemaInstancefile.data = []
       this.schemabinding = false
       this.nextTarget.value = ''
       this.nextTarget.options = []
@@ -1084,38 +1124,92 @@ export default {
       this.email = false
       this.htmlcontent = false
       this.id = null
-      dataQuerymodel.get(null, {
-        $last: true,
-        fid: this.$route.params.id,
-        currentStatus: this.$route.params.stateid,
-        $skip: this.skip,
-        $limit: this.limit
-      }).then(queryresp => {
-        // console.log('queryresp: ', queryresp)
-        // this.entriesTotal = queryresp.data.data.length
-        this.isFlowzLoaded = true
-        this.dataTotal = queryresp.data.total
-        if (queryresp.data.data.length > 0) {
-          this.instanceEntries = queryresp.data.data
-          if (this.$store.state.role === 2) {
-            this.dataClaim = _.filter(this.instanceEntries, function (o) { return o.claimUser === '' })
-            this.dataData2 = _.filter(this.instanceEntries, function (o) { return o.claimUser !== '' })
-          } else {
+      if (this.$store.state.role === 1) {
+        dataQuerymodel.get(null, {
+          $last: true,
+          fid: this.$route.params.id,
+          currentStatus: this.$route.params.stateid,
+          $skip: this.skip,
+          $limit: this.limit
+        }).then(queryresp => {
+          // console.log('queryresp: ', queryresp)
+          // this.entriesTotal = queryresp.data.data.length
+          this.isFlowzLoaded = true
+          this.dataTotal = queryresp.data.total
+          if (queryresp.data.data.length > 0) {
+            this.instanceEntries = queryresp.data.data
             this.dataData = this.instanceEntries
+            this.$Loading.finish()
+            this.dataLoading = false
+          } else {
+            this.instanceEntries = []
+            this.dataData = []
+            this.dataData2 = []
+            this.dataLoading = false
+            this.$Loading.finish()
           }
-          this.$Loading.finish()
+        }).catch(err => {
+          this.$Notice.error({duration: '3', title: err.message, desc: ''})
+          this.$Loading.error()
           this.dataLoading = false
-        } else {
-          this.instanceEntries = []
-          this.dataData = []
+        })
+      }
+      if (this.$store.state.role === 2) {
+        dataQuerymodel.get(null, {
+          $last: true,
+          fid: this.$route.params.id,
+          currentStatus: this.$route.params.stateid,
+          claimUser: '',
+          $skip: this.skip,
+          $limit: this.limit
+        }).then(queryresp => {
+          this.isFlowzLoaded = true
+          if (queryresp.data.data.length > 0) {
+            this.instanceEntries = queryresp.data.data
+            this.dataTotalClaim = queryresp.data.total
+            this.dataClaim = queryresp.data.data
+            this.$Loading.finish()
+            this.dataLoading = false
+          } else {
+            this.instanceEntries = []
+            this.dataData = []
+            this.dataData2 = []
+            this.dataLoading = false
+            this.$Loading.finish()
+          }
+        }).catch(err => {
+          this.$Notice.error({duration: '3', title: err.message, desc: ''})
+          this.$Loading.error()
           this.dataLoading = false
-          this.$Loading.finish()
-        }
-      }).catch(err => {
-        this.$Notice.error({duration: '3', title: err.message, desc: ''})
-        this.$Loading.error()
-        this.dataLoading = false
-      })
+        })
+        dataQuerymodel.get(null, {
+          $last: true,
+          fid: this.$route.params.id,
+          currentStatus: this.$route.params.stateid,
+          claimUser: this.$store.state.user._id,
+          $skip: this.skip,
+          $limit: this.limit
+        }).then(queryresp => {
+          this.isFlowzLoaded = true
+          if (queryresp.data.data.length > 0) {
+            this.instanceEntries = queryresp.data.data
+            this.dataTotalUnclaim = queryresp.data.total
+            this.dataData2 = queryresp.data.data
+            this.$Loading.finish()
+            this.dataLoading = false
+          } else {
+            this.instanceEntries = []
+            this.dataData = []
+            this.dataData2 = []
+            this.dataLoading = false
+            this.$Loading.finish()
+          }
+        }).catch(err => {
+          this.$Notice.error({duration: '3', title: err.message, desc: ''})
+          this.$Loading.error()
+          this.dataLoading = false
+        })
+      }
     },
 
     async init () {
@@ -1169,45 +1263,21 @@ export default {
       created (data) {
       },
       updated (data) {
+        this.pageno = 1
         if (this.$store.state.role === 1) {
           if (data.currentStatus === this.$route.params.stateid) {
-            // // data = data.data
-            // // data.data['iid'] = data.id
-            // // this.instanceEntries.push(data)
-            // // this.dataData.push(data.data)
-            // let StageName = data.stageReference[(data.stageReference.length - 1)].StageName
-
-            // setTimeout(() => {
-            //   flowzdataModal.get(null, {
-            //     iid: data.id,
-            //     state: StageName
-            //   }).then((resData) => {
-            //     // console.log('Form Data: ', resData)
-            //     data.data = resData.data[0].data
-            //     data.data['iid'] = data.id
-
-            //     console.log('Data: ', data)
-            //     this.instanceEntries.push(data)
-            //     this.dataData.push(data.data)
-            //   }).catch((err) => {
-            //     console.log('err: ', err)
-            //   })
-            // }, 2000)
-            // console.log('Length: ', this.instanceEntries.length)
-            // console.log('instanceEntries: ', this.instanceEntries.length, this.entriesTotal)
             if (this.instanceEntries.length < this.entriesTotal) {
-              // console.log('Ready to push: ', this.instanceEntries.length)
-              // push to table
               let instanceObj = data
-              // console.log('instanceObj: ', instanceObj)
+              let inx = _.findIndex(this.dataData, (o) => { return o.id === data.id })
+              this.populateTables()
               let lastEntryId = data.stageReference[data.stageReference.length - 1].stageRecordId
-              // console.log('lastEntryId: ', lastEntryId)
               if (lastEntryId !== undefined) {
                 flowzdataModal.get(lastEntryId).then(res => {
                   // console.log('Response fdata: ', res)
                   instanceObj['data'] = res.data.data
                   instanceObj['iid'] = data.id
-                  this.instanceEntries.push(instanceObj)
+                  // this.instanceEntries.push(instanceObj)
+                  this.dataData.splice(inx, 1)
                   this.dataData.push(instanceObj)
                   // console.log('Pushed data: ', this.instanceEntries, this.dataData)
                 })
@@ -1225,10 +1295,10 @@ export default {
         if (this.$store.state.role === 2) {
           if (data.claimuser === '') {
             this.dataClaim.push(data)
-            this.init()
+            this.populateTables()
           } else {
             this.dataData2.push(data)
-            this.init()
+            this.populateTables()
           }
         }
       },
diff --git a/client/src/components/editEmailTemplate.vue b/client/src/components/editEmailTemplate.vue
new file mode 100644
index 0000000..84f9aae
--- /dev/null
+++ b/client/src/components/editEmailTemplate.vue
@@ -0,0 +1,129 @@
+<template>
+  <div id="emailtemplate">
+    <Row type="flex" justify="end">
+      <Button type="primary" size="small" style="margin-bottom: 2px;position: absolute;right: 10px;" @click="emailTemplateList" icon="ivu-icon ivu-icon-ios-arrow-back"> back</Button>
+    </Row>
+    <div>
+      <h2 class="heading">Template Edit</h2>
+    </div>
+    <div class="editor">
+      <editor v-model="GetHtmlOfEditor" api-key="ppzi01crrfo3pvd43s3do89pguwkhowrwajpjdqdkginzj7k" :initial-value="GetHtmlContent"></editor>
+      <Input v-model="templateName" placeholder="Enter Template name" style="width: 300px" class="dataEnter"/>
+      <Button type="primary" @click="updateTemplate" class="dataEnter" :loading="loading">Update Template</Button>
+      <Button type="error" @click="cancelUpdateTemplate" class="dataEnter">Cancel</Button>
+    </div>
+  </div>
+</template>
+
+<script>
+import saveemailTemplate from '@/api/emailtemplate'
+
+export default {
+  props: ['id', 'name'],
+  data () {
+    return {
+      loading: false,
+      flag: false,
+      updateTemplateid: '',
+      newTemplate: true,
+      templateName: '',
+      GetHtmlOfEditor: '',
+      plugins: 'print preview searchreplace fullscreen image link media template codesample table hr pagebreak anchor toc insertdatetime lists textcolor imagetools contextmenu colorpicker',
+      toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
+      settings: {
+        templates: [
+          { title: 'Test template 1', content: 'Test 1' },
+          { title: 'Test template 2', content: 'Test 2' }
+        ]
+      }
+    }
+  },
+  components: {
+    'editor': (resolve) => { require(['@tinymce/tinymce-vue'], resolve) }
+  },
+  methods: {
+    updateTemplate () {
+      this.loading = true
+      let saveemailTemplateObj = {
+        user: this.$store.state.user._id,
+        template: this.GetHtmlOfEditor,
+        templateName: this.templateName,
+        date: new Date()
+      }
+      saveemailTemplate.patch(this.id, saveemailTemplateObj)
+      .then((res) => {
+        this.loading = false
+        this.$Message.success('Template updated.')
+        this.GetHtmlOfEditor = ''
+        this.$router.push({name: 'emailtemplate'})
+      })
+      .catch((err) => {
+        this.loading = false
+        this.$Message.error('Template Updation Error!')
+        console.log(err)
+      })
+    },
+    cancelUpdateTemplate () {
+      this.$router.push({name: 'emailtemplate'})
+    },
+    emailTemplateList () {
+      this.$router.push({name: 'emailtemplate'})
+    }
+  },
+  mounted () {
+    saveemailTemplate.get(this.id)
+    .then((res) => {
+      this.GetHtmlOfEditor = res.data.template
+      this.templateName = res.data.templateName
+    })
+    .catch((err) => {
+      console.log(err)
+      this.$Notice.error({duration: '3', title: err.message, desc: ''})
+    })
+  }
+}
+</script>
+
+<style scoped>
+.mce-edit-area.mce-container.mce-panel.mce-stack-layout-item > iframe {
+  height: 500px !important;
+}
+
+.dataEnter{
+  margin-top: 20px;
+}
+
+.editor{
+  margin-top: 40px;
+}
+
+.heading{
+  margin-bottom: 20px
+}
+
+.active {
+  background-color:red;
+  font-weight:bold;
+}
+
+.tableCss {
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden
+}
+
+.mce-widget.mce-notification.mce-notification-warning.mce-has-close.mce-in{
+  display: none !important;
+  z-index: -999999 !important;
+}
+</style>
+
+<style>
+
+.mce-widget.mce-notification.mce-notification-warning.mce-has-close.mce-in{
+  display: none !important;
+}
+</style>
+
+
+
diff --git a/client/src/components/email.vue b/client/src/components/email.vue
index fc12479..1f3e0c7 100644
--- a/client/src/components/email.vue
+++ b/client/src/components/email.vue
@@ -91,7 +91,7 @@ import schemaModel from '@/api/schema'
           </a>
           `
       }
-      this.tinyMCEcontent = this.sendDataEmail + this.btn
+      this.tinyMCEcontent = this.sendDataEmail.replace(/{{NextTargetButton}}/g, this.btn)
       if (this.flag == false) {
         let response = await schemaModel.get(this.emailSchemaId).catch(error => {
           console.log(error)
@@ -256,21 +256,15 @@ import schemaModel from '@/api/schema'
         let htmlContent;
         if(this.GetHtmlOfEditor === ''){
           htmlContent = this.sendDataEmail
+          htmlContent = this.sendDataEmail.replace(/{{NextTargetButton}}/g, this.btn)
         } else {
           htmlContent = this.GetHtmlOfEditor
         }
-        
         if (this.flag == true) {
           this.emailForm.html = `<!DOCTYPE html><html lang=\"en\" ><head> <meta charset=\"UTF-8\"><title>Email Proof</title>
-          <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> </head>
           <body><div class=\"container\">
           ` + htmlContent +`
-          <h2>Customer Proof:</h2>
-          ${this.btn}
-          <br> <h4>Comment: ${this.emailForm.Comment}</h4><br>
-          <h4>While we strongly you to take advantage of this time saving option,
-              your proof may still be fixed back to company name at: <strong>Toll Free Fax:</strong> 800-238-0082
-              <strong>Local Fax:<strong> 716-773-2332</h4></div></body></html>`
+          <br> <h4>Comment: ${this.emailForm.Comment}</h4><br></body></html>`
           sendmailModal.post(this.emailForm)
           .then((res)=>{
             this.loading = false
@@ -285,15 +279,9 @@ import schemaModel from '@/api/schema'
         } else {
           this.formSchemaInstance.data[0].html = []
           this.formSchemaInstance.data[0].html = `<!DOCTYPE html><html lang=\"en\" ><head> <meta charset=\"UTF-8\"><title>Email Proof</title>
-          <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> </head>
           <body><div class=\"container\">
           ` + htmlContent +`
-          <h2>Customer Proof:</h2>
-          ${this.btn}
-          <br> <h4>Comment: ${this.formSchemaInstance.data.comment}</h4><br>
-          <h4>While we strongly you to take advantage of this time saving option,
-              your proof may still be fixed back to company name at: <strong>Toll Free Fax:</strong> 800-238-0082
-              <strong>Local Fax:<strong> 716-773-2332</h4></div></body></html>`
+          <br> <h4>Comment: ${this.formSchemaInstance.data.comment}</h4><br></div></body></html>`
               console.log('this.formSchemaInstance.data', this.formSchemaInstance.data)
           sendmailModal.post(this.formSchemaInstance.data[0])
           .then((res)=>{
diff --git a/client/src/components/emailTemplateCreate.vue b/client/src/components/emailTemplateCreate.vue
new file mode 100644
index 0000000..e8e97a5
--- /dev/null
+++ b/client/src/components/emailTemplateCreate.vue
@@ -0,0 +1,120 @@
+<template>
+  <div id="emailtemplate">
+      <Row type="flex" justify="end">
+        <Button type="primary" size="small" style="margin-bottom: 2px;position: absolute;right: 10px;" @click="emailTemplateList" icon="ivu-icon ivu-icon-ios-arrow-back"> back</Button>
+      </Row>
+      <h2 class="heading">Create New Template</h2>
+      <keep-alive>
+        <editor v-model="GetHtmlOfEditor" api-key="ppzi01crrfo3pvd43s3do89pguwkhowrwajpjdqdkginzj7k" :toolbar="toolbar1" :plugins="plugins" :init="settings" :initial-value="gethtmlcontent"></editor>
+      </keep-alive>
+      <Input v-model="templateName" placeholder="Enter Template name" style="width: 300px" class="dataEnter"/>
+      <Button type="primary" @click="saveTemplate" class="dataEnter" :loading="loading">Save Template</Button>
+      <Button type="error" @click="cancelUpdateTemplate" class="dataEnter">Cancel</Button>
+  </div>
+</template>
+
+<script>
+import saveemailTemplate from '@/api/emailtemplate'
+
+export default {
+  data () {
+    return {
+      loading: false,
+      flag: false,
+      updateTemplateid: '',
+      newTemplate: true,
+      templateName: '',
+      GetHtmlOfEditor: '',
+      gethtmlcontent: '<p>Hello!</p>',
+      plugins: 'print preview searchreplace fullscreen image link media template codesample table hr pagebreak anchor toc insertdatetime lists textcolor imagetools contextmenu colorpicker',
+      toolbar1: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat',
+      settings: {
+        templates: [
+          { title: 'Test template 1', content: 'Test 1' },
+          { title: 'Test template 2', content: 'Test 2' }
+        ]
+      }
+    }
+  },
+  components: {
+    'editor': (resolve) => { require(['@tinymce/tinymce-vue'], resolve) }
+  },
+  methods: {
+    saveTemplate () {
+      this.loading = true
+      let saveemailTemplateObj = {
+        user: this.$store.state.user._id,
+        template: this.GetHtmlOfEditor,
+        templateName: this.templateName,
+        date: new Date()
+      }
+      saveemailTemplate.post(saveemailTemplateObj)
+      .then((res) => {
+        this.loading = false
+        this.$Message.success('Email Template Saved.')
+        this.GetHtmlOfEditor = ''
+        this.GetHtmlContent = ''
+        this.templateName = ''
+        this.$router.push({name: 'emailtemplate'})
+      })
+      .catch((err) => {
+        this.loading = false
+        this.$Message.error('Template Save Error!')
+        console.log(err)
+      })
+    },
+    cancelUpdateTemplate () {
+      this.$router.push({name: 'emailtemplate'})
+    },
+    emailTemplateList () {
+      this.$router.push({name: 'emailtemplate'})
+    }
+  },
+  mounted () {
+  }
+}
+</script>
+
+<style scoped>
+.mce-edit-area.mce-container.mce-panel.mce-stack-layout-item > iframe {
+  height: 500px !important;
+}
+
+.dataEnter{
+  margin-top: 20px;
+}
+
+.editor{
+  margin-top: 40px;
+}
+
+.heading{
+  margin-bottom: 20px
+}
+
+.active {
+  background-color:red;
+  font-weight:bold;
+}
+
+.tableCss {
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden
+}
+
+.mce-widget.mce-notification.mce-notification-warning.mce-has-close.mce-in{
+  display: none !important;
+  z-index: -999999 !important;
+}
+</style>
+
+<style>
+
+.mce-widget.mce-notification.mce-notification-warning.mce-has-close.mce-in{
+  display: none !important;
+}
+</style>
+
+
+
diff --git a/client/src/components/emailtemplate.vue b/client/src/components/emailtemplate.vue
index c51bee2..0e2737f 100644
--- a/client/src/components/emailtemplate.vue
+++ b/client/src/components/emailtemplate.vue
@@ -1,23 +1,14 @@
 <template>
   <div id="emailtemplate">
     <div>
+      <Row type="flex" justify="end">
+      <Button type="primary" size="small" style="margin-bottom: 2px;position: absolute;right: 10px;" @click="addNewEmailTemplate" icon="plus"> Add</Button>
+    </Row>
       <h2 class="heading">Templates</h2>
       <Table border highlight-row :columns="columns7" class="tableCss" :data="data6"></Table>
     </div>
-    <div class="editor" v-if="newTemplate && flag">
-      <h2 class="heading">Create Template</h2>
-      <keep-alive>
-        <editor v-model="GetHtmlOfEditor" api-key="ppzi01crrfo3pvd43s3do89pguwkhowrwajpjdqdkginzj7k" :toolbar="toolbar1" :plugins="plugins" :init="settings" :initial-value="gethtmlcontent"></editor>
-      </keep-alive>
-      <Input v-model="templateName" placeholder="Enter Template name" style="width: 300px" class="dataEnter"/>
-      <Button type="primary" @click="saveTemplate" class="dataEnter">Save Template</Button>
-    </div>
-    <div class="editor" v-else>
-      <h2 class="heading">View Template</h2>
-      <editor v-model="GetHtmlOfEditor" api-key="ppzi01crrfo3pvd43s3do89pguwkhowrwajpjdqdkginzj7k" :initial-value="GetHtmlContent"></editor>
-      <Input v-model="templateName" placeholder="Enter Template name" style="width: 300px" class="dataEnter"/>
-      <Button type="primary" @click="updateTemplate" class="dataEnter">Update Template</Button>
-      <Button type="error" @click="cancelUpdateTemplate" class="dataEnter">Cancel</Button>
+    <div style="margin-top: 20px; float:right">
+      <Page :total="total" show-sizer />
     </div>
   </div>
 </template>
@@ -29,6 +20,7 @@ import _ from 'lodash'
 export default {
   data () {
     return {
+      total: '',
       flag: false,
       updateTemplateid: '',
       newTemplate: true,
@@ -63,20 +55,21 @@ export default {
                 props: {
                   type: 'text',
                   size: 'large',
-                  icon: 'ios-eye-outline'
+                  icon: 'edit'
                 },
                 domProps: {
-                  title: 'view template'
+                  title: 'Edit Emailtemplate'
                 },
                 style: {
+                  color: '#7DE144',
                   marginRight: '3px',
                   padding: '0px',
-                  fontSize: '20px',
-                  color: '#0052a9'
+                  fontSize: '20px'
                 },
                 on: {
                   click: () => {
-                    this.show(params)
+                    console.log(params)
+                    this.$router.push({name: 'editemailtemplate', params: {id: params.row.id}})
                   }
                 }
               }, ''),
@@ -111,6 +104,9 @@ export default {
     'editor': (resolve) => { require(['@tinymce/tinymce-vue'], resolve) }
   },
   methods: {
+    addNewEmailTemplate () {
+      this.$router.push({name: 'createemailtemplate'})
+    },
     saveTemplate () {
       let saveemailTemplateObj = {
         user: this.$store.state.user._id,
@@ -182,6 +178,7 @@ export default {
     .then((res) => {
       this.flag = true
       this.data6 = res.data.data
+      this.total = res.data.data.length
     })
     .catch((err) => {
       console.log(err)
diff --git a/client/src/config/index.js b/client/src/config/index.js
index 4e6434a..b53850a 100644
--- a/client/src/config/index.js
+++ b/client/src/config/index.js
@@ -29,7 +29,9 @@ var temp = {
   subscriptionUrl: 'https://api.' + process.env.domainKey + '/subscription/',
   getAllPermissionsUrl: 'https://api.' + process.env.domainKey + '/authldap/getallpermission/',
   setPermissionUrl: 'https://api.' + process.env.domainKey + '/authldap/setpermission',
-  ldapURL: 'https://api.' + process.env.domainKey + '/authldap/init'
+  ldapURL: 'https://api.' + process.env.domainKey + '/authldap/init',
+  usermodulerole: 'https://api.' + process.env.domainKey + '/subscription/user-module-role',
+  userdetails: 'https://api.' + process.env.domainKey + '/user/getuserdetails/'
 }
 if (process.env.NODE_ENV !== 'development') {
   temp = {
@@ -54,7 +56,9 @@ if (process.env.NODE_ENV !== 'development') {
     subscriptionUrl: 'https://api.' + process.env.domainKey + '/subscription/',
     getAllPermissionsUrl: 'https://api.' + process.env.domainKey + '/authldap/getallpermission/',
     setPermissionUrl: 'https://api.' + process.env.domainKey + '/authldap/setpermission',
-    ldapURL: 'https://api.' + process.env.domainKey + '/authldap/init'
+    ldapURL: 'https://api.' + process.env.domainKey + '/authldap/init',
+    usermodulerole: 'https://api.' + process.env.domainKey + '/subscription/user-module-role',
+    userdetails: 'https://api.' + process.env.domainKey + '/user/getuserdetails/'
   }
 }
 export default temp
diff --git a/client/src/pages/flow/List.vue b/client/src/pages/flow/List.vue
index 979e34a..e34da6f 100644
--- a/client/src/pages/flow/List.vue
+++ b/client/src/pages/flow/List.vue
@@ -34,6 +34,10 @@
                                     <template v-for="(field,fieldNumber) in fields[moduleName]">
                                         <td v-if="fieldNumber ==0" style="padding:10px;font-weight:bold;border-right: 3px solid #cdd0d4;">
                                             {{selectedFlowObject.processList[titleCase(item.service)].name}}
+                                            <!-- {{item.service}}
+                                            <br>
+                                            <br>
+                                            {{selectedFlowObject.processList[titleCase(item.service)]}} -->
                                         </td>
                                         <td v-else>
                                             <table class="table-bordered" style="width:100%">
@@ -162,7 +166,7 @@
 <script>
 import flowz from '@/api/flowz'
 import _ from 'lodash'
-// import finstanceModal from '@/api/finstance'
+import finstanceModal from '@/api/finstance'
 import axios from 'axios'
 import viewSVG from './viewSVG'
 import psl from 'psl'
@@ -180,7 +184,7 @@ import moment from 'moment'
 export default {
   name: 'Flowz',
   components: {
-    viewSVG: (resolve) => { require(['./viewSVG'], resolve) },
+    'viewSVG': (resolve) => { require(['./viewSVG'], resolve) },
     expandRow2: (resolve) => { require(['./assigned_invite_table-expand.vue'], resolve) },
     subscription: (resolve) => { require(['@/components/subscription'], resolve) }
   },
@@ -244,32 +248,32 @@ export default {
           align: 'center',
           render: (h, params) => {
             return h('div', [
-              // h('Button', {
-              //   props: {
-              //     type: 'text',
-              //     size: 'large',
-              //     icon: 'arrow-right-b'
-              //   },
-              //   domProps: {
-              //     title: 'Start Instance'
-              //   },
-              //   style: {
-              //     marginRight: '3px',
-              //     padding: '0px',
-              //     fontSize: '20px',
-              //     color: '#2411c5'
-              //   },
-              //   on: {
-              //     click: () => {
-              //       this.createNewInstance(params.row.id)
-              //     }
-              //   }
-              // }, ''),
               h('Button', {
                 props: {
                   type: 'text',
                   size: 'large',
-                  icon: 'key'
+                  icon: 'arrow-right-b'
+                },
+                domProps: {
+                  title: 'Start Instance'
+                },
+                style: {
+                  marginRight: '3px',
+                  padding: '0px',
+                  fontSize: '20px',
+                  color: '#2411c5'
+                },
+                on: {
+                  click: () => {
+                    this.createNewInstance(params.row.id)
+                  }
+                }
+              }, ''),
+              h('Button', {
+                props: {
+                  type: 'text',
+                  size: 'large',
+                  icon: 'settings'
                 },
                 domProps: {
                   title: 'Set Permission'
@@ -313,9 +317,6 @@ export default {
                   size: 'large',
                   icon: 'ios-personadd'
                 },
-                domProps: {
-                  title: 'Invite User'
-                },
                 style: {
                   marginRight: '3px',
                   padding: '0px',
@@ -333,9 +334,6 @@ export default {
                   type: 'text',
                   size: 'large'
                 },
-                domProps: {
-                  title: 'Field Permissions'
-                },
                 style: {
                   marginRight: '3px',
                   padding: '0px',
@@ -516,7 +514,8 @@ export default {
             return days + ' Days'
           }
         }
-      ]
+      ],
+      entriesTotal: 10
     }
   },
   mounted () {
@@ -534,6 +533,32 @@ export default {
           console.log(error)
         })
       }
+    },
+    'flowz': {
+      created (data) {
+        if (this.total < this.entriesTotal) {
+          this.flowzList.push(data)
+        } else {
+          this.total = ((this.total) + 1)
+        }
+      },
+      updated (data) {
+        if (this.flowzList < this.entriesTotal) {
+          let inx = _.findIndex(this.flowzList, (o) => { return o.id === data.id })
+          this.flowzList.splice(inx, 1)
+          this.flowzList.push(data)
+          // console.log()
+        }
+      },
+      removed (data) {
+        // console.log('Removed Data: ', data)
+        if (this.$store.state.role === 1) {
+          // this.$store.state.flowz = []
+          // this.init()
+          let i = _.findIndex(this.flowzList, (o) => { return o.id === data.id })
+          this.flowzList.splice(i, 1)
+        }
+      }
     }
   },
   methods: {
@@ -709,7 +734,7 @@ export default {
       this.init()
     },
     init () {
-      // var string = '?$skip=' + this.skip + '&$limit=' + this.limit
+      this.loading = true
       flowz.get(null, {
         $skip: this.skip,
         $limit: this.limit
@@ -721,26 +746,26 @@ export default {
       })
       .catch(error => {
         this.loading = false
-        this.$Notice.error({duration: '3', title: error.message, desc: ''})
+        this.$Notice({duration: '3', title: 'Network Error', desc: ''})
         console.log(error)
       })
     },
-    // createNewInstance (item) {
-    //   this.$Loading.start()
-    //   let fheaders = null
-    //   finstanceModal.post({fid: item.id}, null, fheaders).then(res => {
-    //     this.$Notice.success({title: 'Instance Generated'})
-    //     this.$Loading.finish()
-    //   }).catch(e => {
-    //     this.$Loading.error()
-    //     console.log('error', e.response)
-    //     if (e.response.data.message) {
-    //       this.$Notice.error({title: 'Error', desc: e.response.data.message.toString()})
-    //     } else {
-    //       this.$Notice.error({title: 'Error', desc: 'Instace Not Generated'})
-    //     }
-    //   })
-    // },
+    createNewInstance (item) {
+      this.$Loading.start()
+      let fheaders = null
+      finstanceModal.post({fid: item.id}, null, fheaders).then(res => {
+        this.$Notice.success({title: 'Instance Generated'})
+        this.$Loading.finish()
+      }).catch(e => {
+        this.$Loading.error()
+        console.log('error', e.response)
+        if (e.response.data.message) {
+          this.$Notice.error({title: 'Error', desc: e.response.data.message.toString()})
+        } else {
+          this.$Notice.error({title: 'Error', desc: 'Instace Not Generated'})
+        }
+      })
+    },
     addNewFlow () {
       this.$store.dispatch('removeXMLtoLocalStorage')
       this.$router.push({name: 'flow/new'})
diff --git a/client/src/pages/flow/New.vue b/client/src/pages/flow/New.vue
index 8d2165f..741545e 100644
--- a/client/src/pages/flow/New.vue
+++ b/client/src/pages/flow/New.vue
@@ -379,7 +379,11 @@
           'user': this.$store.state.user._id
         })
         .then((res) => {
-          tempVar = res.data.data
+          // tempVar = res.data.data
+          tempVar.push({id: '', templateName: '--Select Template--'})
+          for (let i = 0; i < res.data.data.length; i++) {
+            tempVar.push({id: res.data.data[i].id, templateName: res.data.data[i].templateName})
+          }
         })
         .catch((err) => {
           console.log(err)
diff --git a/client/src/pages/user/SchemaList.vue b/client/src/pages/user/SchemaList.vue
index 5e5c39d..b574a64 100644
--- a/client/src/pages/user/SchemaList.vue
+++ b/client/src/pages/user/SchemaList.vue
@@ -16,59 +16,84 @@
 
     <div class="row">
       <div class="col-md-12">
-        <div class="card">
+        <div class="card" style="padding-bottom:15px">
           <div class="row">
-            <div class="col-md-6">
-              <Input search enter-button placeholder="Search..." v-model="searchQuery"/>
+            <div class="col-md-12">
+              <span><b>Select Action</b></span>
+              <Select v-if="this.$store.state.role === 1" v-model="action" label="Select Action" style="width:200px">
+                <Option v-for="item in dataActionRole1" :value="item.value" :key="item.value">{{ item.label }}</Option>
+              </Select>
+              <Select v-if="this.$store.state.role === 2" v-model="action" label="Select Action" style="width:200px">
+                <Option v-for="item in dataActionRole2" :value="item.value" :key="item.value">{{ item.label }}</Option>
+              </Select>
             </div>
-            <div class="col-md-4">
-              <div class="row">
-                <div class="col-md-12">
-                  <Select style="width: 100%" v-model="selectedFilterBy" clearable placeholder="Filter By">
-                    <Option v-for="item in filterBy" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                  </Select>
-                  <br>
-                  <DatePicker v-if="selectedFilterBy === 'customRange'" type="daterange" split-panels placeholder="Select date" style="width: 100%; margin: 5px 0;" v-model="enteredDateRange"></DatePicker>
+            <div v-if="action === 'search'" style="margin-top: 20px;">
+              <div class="col-md-4" style="margin-top: 20px;">
+                <Input search enter-button placeholder="Search..." v-model="searchQuery"/>
+              </div>
+              <div class="col-md-4" style="margin-top: 20px;">
+                <div class="row">
+                  <div class="col-md-12">
+                    <Select style="width: 100%" v-model="selectedFilterBy" clearable placeholder="Filter By">
+                      <Option v-for="item in filterBy" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                    </Select>
+                    <br>
+                    <DatePicker v-if="selectedFilterBy === 'customRange'" type="daterange" split-panels placeholder="Select date" style="width: 100%; margin: 5px 0;" v-model="enteredDateRange"></DatePicker>
+                  </div>
+                  <!-- <div class="col-md-6">
+                    <Select style="width: 100%" v-model="selectedSortBy" clearable placeholder="Sort By">
+                      <Option v-for="item in sortBy" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                    </Select>    
+                  </div> -->
                 </div>
-                <!-- <div class="col-md-6">
-                  <Select style="width: 100%" v-model="selectedSortBy" clearable placeholder="Sort By">
-                    <Option v-for="item in sortBy" :value="item.value" :key="item.value">{{ item.label }}</Option>
-                  </Select>    
-                </div> -->
+              </div>
+              <div class="col-md-3" style="margin-top: 20px;">
+                <Button icon="search" type="primary" @click="searchData">Search</Button>
+                <Tooltip content="Clear Search">
+                  <Button icon="ios-trash" type="error" @click="clearSearchData"></Button>  
+                </Tooltip>
+                
               </div>
             </div>
-            <div class="col-md-2">
-              <Button icon="search" type="primary" @click="searchData">Search</Button>
-              <Tooltip content="Clear Search" style="float: right;">
-                <Button icon="ios-trash" type="error" @click="clearSearchData"></Button>  
-              </Tooltip>
-              
+            <div v-if="action === 'filter'" style="margin-top: 10px;">
+              <div class="col-md-2" style="margin-top: 20px;">
+                <Select v-model="selectedAssignUser" style="width:200px">
+                  <Option v-for="item in stageClaimUsers" :value="item.value" :key="item.value">{{ item.label }}</Option>
+                </Select>
+              </div>
+              <div class="col-md-2 buttonAssign" style="margin-top: 20px;">
+                <Button type="primary" @click="unAssignUsers">Assign</Button>
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div v-if="datashow === 'dataA'">
-      <Table @on-sort-change="sortTableData" highlight-row :columns="setColumns" :data="data" :border="config.border" :stripe="config.stripe"></Table>
+      <Table ref="selection" @on-selection-change="AddRows" @on-sort-change="sortTableData" highlight-row :columns="setColumns" :data="data" :border="config.border" :stripe="config.stripe"></Table>
       <div style="margin: 10px;overflow: hidden">
-        <div style="float: right;">
-          <Page placement="top" :total="total" :current="pageno" :page-size="limit" show-sizer @on-change="handlePage" @on-page-size-change="handlePagesize"></Page>
+        <div style="display: inline-block">
+          <Button @click="handleSelectAll(true)">Set all selected</Button>
+          <Button @click="handleSelectAll(false)">Cancel all selected</Button>
+        </div>
+        <div style="float: right; display: inline-block">
+          <Page placement="top" :total="dataTotal" :current="pageno" :page-size="limit" show-sizer @on-change="handlePage" @on-page-size-change="handlePagesize"></Page>
         </div>
       </div>
     </div>
     <div v-if="datashow === 'dataC'">
-      <Table @on-sort-change="sortTableData" highlight-row :columns="setColumns2" :data="data" :border="config.border" :stripe="config.stripe"></Table>
+      <Table ref="selection" @on-sort-change="sortTableData" highlight-row :columns="setColumns2" :data="data" :border="config.border" :stripe="config.stripe"></Table>
       <div style="margin: 10px;overflow: hidden">
         <div style="float: right;">
-          <Page placement="top" :total="total" :current="pageno" :page-size="limit" show-sizer @on-change="handlePage" @on-page-size-change="handlePagesize"></Page>
+          <Page placement="top" :total="dataTotalClaim" :current="pageno" :page-size="limit" show-sizer @on-change="handlePage2" @on-page-size-change="handlePagesize2"></Page>
         </div>
       </div>
     </div>
     <div v-if="datashow === 'dataU'">
-      <Table @on-sort-change="sortTableData" highlight-row :columns="setColumns" :data="data" :border="config.border" :stripe="config.stripe"></Table>
+      <Table ref="selection" @on-sort-change="sortTableData" highlight-row :columns="setColumns" :data="data" :border="config.border" :stripe="config.stripe"></Table>
       <div style="margin: 10px;overflow: hidden">
         <div style="float: right;">
-          <Page placement="top" :total="total" :current="pageno" :page-size="limit" show-sizer @on-change="handlePage" @on-page-size-change="handlePagesize"></Page>
+          <Page placement="top" :total="dataTotalUnclaim" :current="pageno" :page-size="limit" show-sizer @on-change="handlePage" @on-page-size-change="handlePagesize"></Page>
         </div>
       </div>
     </div>
@@ -78,6 +103,10 @@
   import _ from 'lodash'
   import $ from 'jquery'
   import finstanceModal from '@/api/finstance'
+  import config from '../../config/index.js'
+  // import getuserdetails from '@/api/getuserdetails'
+  // import usermodulerole from '@/api/usermodulerole'
+  import axios from 'axios'
   export default {
     name: 'schemalist',
     props: {
@@ -88,12 +117,29 @@
       'flowzData': Object,
       'instanceEntries': Array,
       'dataTotal': Number,
+      'dataTotalClaim': Number,
+      'dataTotalUnclaim': Number,
       'pageno': Number,
       'limit': Number,
       'datashow': String
     },
     data () {
       return {
+        action: 'search',
+        dataActionRole1: [{
+          value: 'search',
+          label: 'SEARCH'
+        }, {
+          value: 'filter',
+          label: 'FILTER'
+        }],
+        dataActionRole2: [{
+          value: 'search',
+          label: 'SEARCH'
+        }],
+        selectedRows: [],
+        selectedAssignUser: 'noValue',
+        stageClaimUsers: [],
         dataClaim: [],
         skip: 0,
         total: 0,
@@ -257,6 +303,12 @@
       setColumns () {
         const cols = []
         if (this.dynamicData && this.$store.state.role === 1) {
+          cols.push({
+            type: 'selection',
+            width: 60,
+            align: 'center',
+            fixed: 'left'
+          })
           cols.push({
             title: 'Action',
             width: 80,
@@ -290,6 +342,17 @@
               ])
             }
           })
+          cols.push({
+            title: 'Assigned To',
+            key: 'claim',
+            fixed: 'left',
+            width: 200,
+            render: (h, params) => {
+              return h('span',
+              this.selectOption(params),
+              )
+            }
+          })
           cols.push({
             title: 'ID',
             key: 'iid',
@@ -649,10 +712,83 @@
       }
     },
     mounted () {
-      this.total = this.dataTotal
       this.mdata = this.data
+      axios.get(config.usermodulerole)
+      // usermodulerole.get()
+      .then((res) => {
+        let module = 'workflow_' + this.$route.params.id
+        let users = _.filter(res.data.data, {'module': module})
+        this.stageClaimUsers.push({value: 'noValue', label: '-- Unassign User --'})
+        for (let i = 0; i < users.length; i++) {
+          axios.get(config.userdetails + users[i].userId)
+          .then((response) => {
+            this.stageClaimUsers.push({value: users[i].userId, label: response.data.data[0].fullname})
+          })
+          .catch((error) => {
+            console.log(error)
+          })
+        }
+      })
+      .catch((err) => {
+        console.log(err)
+      })
     },
     methods: {
+      unAssignUsers () {
+        if (this.selectedAssignUser === '') {
+          this.$Notice.error({title: 'Please first select user'})
+        } else if (this.selectedRows.length === 0) {
+          this.$Notice.error({title: 'Please first select Rows'})
+        } else {
+          for (let i = 0; i < this.selectedRows.length; i++) {
+            let fheaders = {
+              workflowid: 'workflow_' + this.$route.params.id,
+              stateid: this.$route.params.stateid
+            }
+            if (this.selectedAssignUser !== 'noValue') {
+              finstanceModal.patch(this.selectedRows[i].id, {claimUser: this.selectedAssignUser}, null, fheaders)
+              .then((res) => {
+                this.$Notice.success({title: 'Successfully Assign'})
+              })
+              .catch((err) => {
+                if (err.response) {
+                  this.$Notice.error({title: err.response.data.message})
+                } else {
+                  this.$Message.error(err.message)
+                }
+              })
+            } else {
+              finstanceModal.patch(this.selectedRows[i].id, {claimUser: ''}, null, fheaders)
+              .then((res) => {
+                this.$Notice.success({title: 'Successfully Assign'})
+              })
+              .catch((err) => {
+                if (err.response) {
+                  this.$Notice.error({title: err.response.data.message})
+                } else {
+                  this.$Message.error(err.message)
+                }
+              })
+            }
+          }
+        }
+      },
+      AddRows (selection) {
+        this.selectedRows = []
+        this.selectedRows = selection
+      },
+      handleSelectAll (status) {
+        this.$refs.selection.selectAll(status)
+      },
+      selectOption (params) {
+        if (params.row.claimUser !== '') {
+          let obj = _.find(this.stageClaimUsers, {value: params.row.claimUser})
+          if (obj !== undefined) {
+            this.data[params.index].claim = obj.value
+            return obj.label
+          }
+        }
+      },
       clearSearchData () {
         this.searchQuery = ''
         this.selectedFilterBy = ''
@@ -681,6 +817,13 @@
       },
       handlePagesize (size) {
         this.$emit('on-handlepage', this.skip, this.limit, size)
+      },
+      handlePage2 (page) {
+        this.skip = (page * this.limit) - this.limit
+        this.$emit('on-paginate2', this.skip, this.limit, page)
+      },
+      handlePagesize2 (size) {
+        this.$emit('on-handlepage2', this.skip, this.limit, size)
       }
     }
   }
@@ -708,6 +851,29 @@
     overflow: hidden !important;
     text-overflow: ellipsis !important;
   }
+
+  @media only screen and (max-width: 1600px ) and (min-width: 1400px) {
+      .buttonAssign {
+        margin-left: 30px !important
+      }
+  }
+   @media only screen and (min-width: 900px) and (max-width: 1400px) {
+     .buttonAssign {
+        margin-left: 100px !important
+      }
+   }
+
+  /* @media only screen and (min-width: 1500px) {
+      .buttonAssign {
+        margin-left: 50px !important
+      }
+  }
+
+  @media only screen and (min-width: 950px) {
+      .buttonAssign {
+        margin-left: 100px !important
+      }
+  } */
 </style>
 
 <style>
diff --git a/client/src/router/index.js b/client/src/router/index.js
index ccd77d9..e6714df 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -25,6 +25,8 @@ import Analytics from '@/pages/flow/analytics'
 import ManageBPMNPlugin from '@/pages/BPMNPlugins/Manage'
 import SchemaView from '@/components/SchemaView'
 import emailtemplate from '@/components/emailtemplate'
+import editEmailTemplate from '@/components/editEmailTemplate'
+import emailTemplateCreate from '@/components/emailTemplateCreate'
 import permission from '@/components/permission'
 
 // const tagSpinner = resolve => require(['./spinner'], resolve)
@@ -85,6 +87,32 @@ const mroutes = [
         component: emailtemplate,
         name: 'emailtemplate',
         meta: { description: 'emailtemplate' }
+        // children: [
+        //   {
+        //     path: 'edit/:id',
+        //     component: editEmailTemplate,
+        //     name: 'emailtemplate/edit',
+        //     meta: { description: 'Edit' },
+        //     props: {
+        //       id: Number,
+        //       required: false
+        //     }
+        //   }
+        // ]
+      },
+      { // Emailtemplate
+        path: 'emailtemplate/edit/:id',
+        component: editEmailTemplate,
+        name: 'editemailtemplate',
+        meta: { description: 'emailtemplate' },
+        props: true
+      },
+      { // Emailtemplate
+        path: 'emailtemplate/new',
+        component: emailTemplateCreate,
+        name: 'createemailtemplate',
+        meta: { description: 'emailtemplate' },
+        props: true
       },
       { // permission
         path: 'permission/:id',
diff --git a/finish.sh b/finish.sh
index bf89039..b8ae3f4 100644
--- a/finish.sh
+++ b/finish.sh
@@ -40,7 +40,7 @@ then
 else
   {
       echo "call $TRAVIS_BRANCH branch"
-      ENV_ID=`curl -u ""$RANCHER_ACCESSKEY_QA":"$RANCHER_SECRETKEY_QA"" -X GET -H 'Accept: application/json' -H 'Content-Type: application/json' "$RANCHER_URL_QA/v2-beta/projects?name=Develop" | jq '.data[].id' | tr -d '"'`
+      ENV_ID=`curl -u ""$RANCHER_ACCESSKEY_QA":"$RANCHER_SECRETKEY_QA"" -X GET -H 'Accept: application/json' -H 'Content-Type: application/json' "$RANCHER_URL_QA/v2-beta/projects?name=QA" | jq '.data[].id' | tr -d '"'`
       echo $ENV_ID
       RANCHER_ACCESSKEY="$RANCHER_ACCESSKEY_QA";
       RANCHER_SECRETKEY="$RANCHER_SECRETKEY_QA";
diff --git a/netlify.toml b/netlify.toml
new file mode 100644
index 0000000..48ef9c3
--- /dev/null
+++ b/netlify.toml
@@ -0,0 +1,42 @@
+[Settings]
+ID = "Develop-I"
+[build]
+  # This will be your default build command
+  base = "client/"
+  command = "npm run build"
+  publish = "client/dist"
+
+#[[redirects]]
+#  from = "/"
+#  to = "/index.html"
+#  status = 200
+#  force = true
+
+#[[redirects]]
+#  from = "/*"
+#  to = "/index.html"
+#  status = 301
+#  force = true
+[[redirects]]
+  from = "/:page/:page/:page/:page"
+  to = "/index.html"
+  status = 200
+  force = true
+
+[[redirects]]
+  from = "/:page/:page/:page"
+  to = "/index.html"
+  status = 200
+  force = true
+
+[[redirects]]
+  from = "/:page/:page"
+  to = "/index.html"
+  status = 200
+  force = true
+
+[[redirects]]
+  from = "/:page"
+  to = "/index.html"
+  status = 200
+  force = true
diff --git a/upgrade.sh b/upgrade.sh
index 3567d67..90ad574 100644
--- a/upgrade.sh
+++ b/upgrade.sh
@@ -73,7 +73,7 @@ then
 else
   {
       echo "call $TRAVIS_BRANCH branch"
-      ENV_ID=`curl -u ""$RANCHER_ACCESSKEY_QA":"$RANCHER_SECRETKEY_QA"" -X GET -H 'Accept: application/json' -H 'Content-Type: application/json' "$RANCHER_URL_QA/v2-beta/projects?name=Develop" | jq '.data[].id' | tr -d '"'`
+      ENV_ID=`curl -u ""$RANCHER_ACCESSKEY_QA":"$RANCHER_SECRETKEY_QA"" -X GET -H 'Accept: application/json' -H 'Content-Type: application/json' "$RANCHER_URL_QA/v2-beta/projects?name=QA" | jq '.data[].id' | tr -d '"'`
       echo $ENV_ID
       USERNAME="$DOCKER_USERNAME";
       TAG="qa";
@@ -125,5 +125,5 @@ curl -u ""$RANCHER_ACCESSKEY":"$RANCHER_SECRETKEY"" \
 -H 'Accept: application/json' \
 -H 'Content-Type: application/json' \
 -d '{
-     "inServiceStrategy":{"launchConfig": {"imageUuid":"docker:'$USERNAME'/flowz_backend_flowz:'$TAG'","kind": "container","labels":{"io.rancher.container.pull_image": "always","io.rancher.scheduler.affinity:host_label": "'"$BACKEND_HOST"'"},"ports": ["3033:3033/tcp","4033:4033/tcp"],"environment": {"rauth":"'"$RAUTH"'","cert":"'"$CERT_FLOWZ_BACKEND_FLOWZ"'","RDB_HOST":"'"$RDB_HOST"'","RDB_PORT":"'"$RDB_PORT"'","domainKey":"'"$DOMAINKEY"'","SMTP_USER":"'"$SMTP_USER"'","SMTP_PASS":"'"$SMTP_PASS"'","SMTP_HOST":"'"$SMTP_HOST"'"},"healthCheck": {"type": "instanceHealthCheck","healthyThreshold": 2,"initializingTimeout": 60000,"interval": 2000,"name": null,"port": 3033,"recreateOnQuorumStrategyConfig": {"type": "recreateOnQuorumStrategyConfig","quorum": 1},"reinitializingTimeout": 60000,"responseTimeout": 60000,"strategy": "recreateOnQuorum","unhealthyThreshold": 3},"networkMode": "managed"}},"toServiceStrategy":null}' \
+     "inServiceStrategy":{"launchConfig": {"imageUuid":"docker:'$USERNAME'/flowz_backend_flowz:'$TAG'","kind": "container","labels":{"io.rancher.container.pull_image": "always","io.rancher.scheduler.affinity:host_label": "'"$BACKEND_HOST"'"},"environment": {"rauth":"'"$RAUTH"'","cert":"'"$CERT_FLOWZ_BACKEND_FLOWZ"'","RDB_HOST":"'"$RDB_HOST"'","RDB_PORT":"'"$RDB_PORT"'","domainKey":"'"$DOMAINKEY"'","SMTP_USER":"'"$SMTP_USER"'","SMTP_PASS":"'"$SMTP_PASS"'","SMTP_HOST":"'"$SMTP_HOST"'"},"healthCheck": {"type": "instanceHealthCheck","healthyThreshold": 2,"initializingTimeout": 60000,"interval": 2000,"name": null,"port": 3033,"recreateOnQuorumStrategyConfig": {"type": "recreateOnQuorumStrategyConfig","quorum": 1},"reinitializingTimeout": 60000,"responseTimeout": 60000,"strategy": "recreateOnQuorum","unhealthyThreshold": 3},"networkMode": "managed"}},"toServiceStrategy":null}' \
 $RANCHER_URL/v2-beta/projects/$ENV_ID/services/$SERVICE_ID_BACKEND?action=upgrade