diff --git a/jero-web/src/views/toDoCenter/projectRegulationTasks/components/confirmationDrawer.vue b/jero-web/src/views/toDoCenter/projectRegulationTasks/components/confirmationDrawer.vue
new file mode 100644
index 000000000..3d1729b03
--- /dev/null
+++ b/jero-web/src/views/toDoCenter/projectRegulationTasks/components/confirmationDrawer.vue
@@ -0,0 +1,212 @@
+<template>
+  <a-drawer
+    :title="titlename == 1 ? this.$t('Taskresponsibilityrecognition'): this.$t('complianceConfirmation')"
+    :maskClosable="false"
+    :width="948"
+    placement="right"
+    :closable="true"
+    @close="handleCancel"
+    :visible="visible"
+    style="height: 100%;overflow: auto;padding-bottom: 53px;">
+    <div style="margin-bottom: 20px">
+      <div class="header-text">
+        {{$t('Listoftreatableregulations')}}
+      </div>
+      <a-table
+        :pagination="false"
+        :scroll="{x: '100%'}"
+        rowKey="id"
+        :columns="columns">
+
+      </a-table>
+    </div>
+    <div style="margin-bottom: 20px">
+      <div class="header-text">
+        {{$t('Listofuntractableregulations')}}
+      </div>
+      <a-table
+        :pagination="false"
+        :scroll="{x: '100%'}"
+        rowKey="id"
+        :columns="columns">
+
+      </a-table>
+    </div>
+    <div style="margin-bottom: 40px">
+      <div class="header-text">
+        {{titlename == 1 ? this.$t('Taskconfirmationresult'): this.$t('Compliancetaskhandling')}}
+      </div>
+      <div class="box-title-text">
+        <div class="title-text">
+          <span class="title-text-text" :title="$t('resultofhandling')">{{$t('resultofhandling')}}</span>
+        </div>
+        <a-form-model-item class="itemModel">
+          <a-radio-group>
+            <a-radio value="1">
+              {{$t('accept')}}
+            </a-radio>
+            <a-radio value="2">
+              {{$t('refuse')}}
+            </a-radio>
+          </a-radio-group>
+        </a-form-model-item>
+      </div>
+      <div class="box-title-text">
+        <div class="title-text">
+          <span class="title-text-text" :title="$t('feedbackMessage')">{{$t('feedbackMessage')}}</span>
+        </div>
+        <a-form-model-item class="itemModel">
+          <a-textarea :placeholder="$t('pleaseEnter')+$t('feedbackMessage')"
+                      rows="4"/>
+        </a-form-model-item>
+      </div>
+      <div class="box-title-text" v-if="titlename == 1 ? false:true">
+        <div class="title-text">
+          <span class="title-text-text" :title="$t('enclosure')">{{$t('enclosure')}}</span>
+        </div>
+        <a-form-model-item class="itemModel">
+          <a-button type="primary" class="button-text">{{$t('uploadattachment')}}</a-button>
+        </a-form-model-item>
+      </div>
+    </div>
+    <div class="drawer-bootom-button">
+      <a-button style="margin-right: .8rem" @click="handleCancel">{{$t('cancel')}}</a-button>
+      <a-button type="primary">{{$t('determine')}}</a-button>
+    </div>
+</a-drawer>
+</template>
+
+<script>
+export default {
+  name:'confirmationDrawer',
+  props: {
+  },
+  data() {
+    return {
+      titlename:'',
+      allTitle: '',
+      visible:false,
+      columns:[
+        {
+          title: this.$t('project'),
+          align: 'left',
+          dataIndex: '',
+          ellipsis: true,
+          width: 170
+        },
+        {
+          title: this.$t('standard'),
+          align: 'left',
+          dataIndex: '',
+          ellipsis: true,
+          width: 170
+        },
+        {
+          title: this.$t('areaOfResponsibility'),
+          align: 'left',
+          dataIndex: '',
+          ellipsis: true,
+          width: 120
+        },
+        {
+          title: this.$t('taskType'),
+          align: 'left',
+          dataIndex: '',
+          ellipsis: true,
+          width: 150
+        },
+        {
+          title: this.$t('Categoryofdeliverables'),
+          align: 'left',
+          dataIndex: '',
+          ellipsis: true,
+          width: 120
+        },
+        {
+          title: this.$t('closingDate'),
+          align: 'left',
+          dataIndex: '',
+          ellipsis: true,
+          width: 170
+        },
+      ]
+    }
+  },
+  methods:{
+    confirmation(data){
+      this.visible = true
+      this.$nextTick(()=>{
+        this.titlename = data
+      })
+
+    },
+    handleCancel(){
+      this.visible = false
+      this.titlename = ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.header-text {
+  font-size: 14px;
+  font-weight: bold;
+  height: 24px;
+  margin-bottom: 20px;
+}
+
+.box-title-text {
+  line-height: 1.4;
+  display: flex;
+  /*align-items: center;*/
+}
+
+.title-text {
+  width: 88px;
+  text-align: right;
+  display: inline-block;
+  font-weight: 500;
+  font-size: 14px;
+  margin-right: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 42px;
+  line-height: 48px;
+  color: #000F16;
+}
+
+.title-text-text {
+  margin-top: 9px;
+}
+
+.itemModel {
+  width: 100%;
+  display: inline-block;
+  margin-top: 2px;
+  margin-bottom: 12px;
+}
+
+.drawer-bootom-button {
+  position: absolute;
+  bottom: 0;
+  z-index: 100;
+  width: 100%;
+  border-top: 1px solid #e8e8e8;
+  padding: 10px 16px;
+  text-align: right;
+  left: 0;
+  background: #fff;
+  border-radius: 0 0 2px 2px;
+}
+
+/*.button-text {*/
+/*  height: 38px;*/
+/*  width: calc(100% - 250px);*/
+/*  line-height: 38px;*/
+/*  background: #fff;*/
+/*  border: 1px #00B3BE solid;*/
+/*  color: #00B3BE;*/
+/*}*/
+</style>
\ No newline at end of file