diff --git a/resources/assets/js/components/home/caseDetail/PmCaseSummary.vue b/resources/assets/js/components/home/caseDetail/PmCaseSummary.vue
index 9a5662332..c7f694a04 100644
--- a/resources/assets/js/components/home/caseDetail/PmCaseSummary.vue
+++ b/resources/assets/js/components/home/caseDetail/PmCaseSummary.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="card v-pmase-summary-card">
-    <div class="card-body">
+  <div class="card v-pmcase-summary-card">
+    <div class="card-body" v-if="data">
       <div
         v-for="section in data"
         :key="section.title"
@@ -28,7 +28,7 @@
 export default {
   name: "CaseSummary",
   props: {
-    data: Object,
+    data: Array,
   },
   data() {
     return {};
diff --git a/resources/assets/js/components/home/caseDetail/ProcessMap.vue b/resources/assets/js/components/home/caseDetail/ProcessMap.vue
new file mode 100644
index 000000000..8da4ce21d
--- /dev/null
+++ b/resources/assets/js/components/home/caseDetail/ProcessMap.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="card v-process-map">
+    <iframe
+      :width="width"
+      ref="IFrameProcessMap"
+      frameborder="0"
+      :src="path"
+      :height="height"
+      allowfullscreen
+    ></iframe>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProcessMap",
+  props: {
+    data: Object,
+  },
+  data() {
+    return {
+      height: "500px",
+      width: "100%",
+      diffHeight: 10,
+    };
+  },
+  computed: {
+    path() {
+      let url = "";
+      if (this.data && this.data.PRO_UID) {
+        url =
+          window.config.SYS_SERVER +
+          window.config.SYS_URI +
+          `designer?prj_uid=${this.data.PRO_UID}&prj_readonly=true&app_uid=${this.data.APP_UID}`;
+        return url;
+      }
+      return url;
+    },
+  },
+  mounted() {},
+  methods: {
+    classBtn(cls) {
+      return "btn v-btn-request " + cls;
+    },
+  },
+};
+</script>
+
+<style>
+.v-process-map {
+  font-size: 13px;
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/home/CaseDetail.vue b/resources/assets/js/home/CaseDetail.vue
index dad04f0c5..9f5027b41 100644
--- a/resources/assets/js/home/CaseDetail.vue
+++ b/resources/assets/js/home/CaseDetail.vue
@@ -7,7 +7,7 @@
       </p>
     </div>
     <div class="row">
-      <div class="col-sm-8">
+      <div class="col-sm-9">
         <div id="pending-task" ref="pending-task">
           <v-server-table
             :data="tableData"
@@ -40,9 +40,12 @@
             </div>
           </v-server-table>
         </div>
-        <TabsCaseDetail :dataCaseSummary="dataCaseSummaryTab"></TabsCaseDetail>
+        <TabsCaseDetail
+          :dataCaseSummary="dataCaseSummaryTab"
+          :dataCase="dataCase"
+        ></TabsCaseDetail>
       </div>
-      <div class="col-sm4">
+      <div class="col-sm-3">
         <case-summary
           v-if="dataCaseSummary"
           :data="dataCaseSummary"
@@ -58,14 +61,14 @@
     </div>
 
     <div class="row">
-      <div class="col-sm-8">
+      <div class="col-sm-9">
         <case-comments
           :data="dataComments"
           :onClick="onClickComment"
           :postComment="postComment"
         />
       </div>
-      <div class="col-sm4">
+      <div class="col-sm-3">
         <attached-documents :data="dataAttachedDocuments"></attached-documents>
       </div>
     </div>
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index 624a387b5..a0699c215 100644
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -15,7 +15,7 @@
         @click="collapsed = true"
       />
 
-      <component v-bind:is="page"></component>
+      <component v-bind:is="page" ref="component"></component>
     </div>
   </div>
 </template> 
@@ -72,10 +72,11 @@ export default {
     /**
      * Update page component
      */
-    updatePage(data) {
-      if (data.component == "ModalNewRequest") {
-        this.data = data.page;
-        this.dataCase = data.dataCase;
+    updatePage(data, page, callback) {
+      this.dataCase = data;
+      this.page = page;
+      if (this.$refs["component"] && this.$refs["component"].update) {
+        this.$refs["component"].update(data, callback);
       }
     },
     onResize() {
diff --git a/resources/assets/js/home/TabsCaseDetail.vue b/resources/assets/js/home/TabsCaseDetail.vue
index 4612412cf..bdedb7215 100644
--- a/resources/assets/js/home/TabsCaseDetail.vue
+++ b/resources/assets/js/home/TabsCaseDetail.vue
@@ -5,8 +5,7 @@
         <PmCaseSummary :data="dataCaseSummary"> </PmCaseSummary>
       </tab>
       <tab name="Second tab">
-        <h2 class="page-subtitle">Second tab</h2>
-        This is the content of the second tab.
+        <ProcessMap :data="dataCase"> </ProcessMap>
       </tab>
       <tab name="Disabled tab" :is-disabled="true">
         <h2 class="page-subtitle">Disabled tab</h2>
@@ -32,6 +31,7 @@
 import Tabs from "./../components/tabs/Tabs.vue";
 import Tab from "./../components/tabs/Tab.vue";
 import PmCaseSummary from "./../components/home/caseDetail/PmCaseSummary.vue";
+import ProcessMap from "./../components/home/caseDetail/ProcessMap.vue";
 import Api from "../api/index";
 
 export default {
@@ -39,9 +39,11 @@ export default {
   components: {
     Tabs,
     Tab,
+    ProcessMap,
     PmCaseSummary,
   },
   props: {
+    dataCase: Object,
     dataCaseSummary: Array,
   },
   data() {
diff --git a/resources/assets/js/home/Todo.vue b/resources/assets/js/home/Todo.vue
index 63cbe38e5..c066d6b02 100644
--- a/resources/assets/js/home/Todo.vue
+++ b/resources/assets/js/home/Todo.vue
@@ -233,6 +233,7 @@ export default {
       this.$parent.dataCase = {
         APP_UID: item.APP_UID,
         DEL_INDEX: item.DEL_INDEX,
+        PRO_UID: "6161281705fc91129328391060454559",
       };
       this.$parent.page = "case-detail";
     },