diff --git a/resources/assets/js/components/dataViews/vueCardView/VueCard.vue b/resources/assets/js/components/dataViews/vueCardView/VueCard.vue
new file mode 100644
index 000000000..c94a7a0e7
--- /dev/null
+++ b/resources/assets/js/components/dataViews/vueCardView/VueCard.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="pm-vue-card">
+    <div class="card pm-vue-card-inside" style="width: 20rem">
+      <div class="card-body">
+        <slot> </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VueCardView",
+  props: ["columns", "item"],
+  data() {
+    return {};
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn btn-slim btn-force-radius v-btn-header " + cls;
+    },
+  },
+};
+</script>
+
+<style>
+.pm-vue-card {
+  display: inline-block;
+  padding: 0.7rem;
+}
+.pm-vue-card-inside {
+  border-left: solid lightseagreen;
+  color: #212529;
+  background-color: #f8f9fa;
+}
+
+.pm-vue-card-inside:hover {
+  background-color: #cfd9e4;
+}
+</style>
diff --git a/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue b/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue
new file mode 100644
index 000000000..26c4ed368
--- /dev/null
+++ b/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="pm-vue-card-view" :height="height">
+    <div class="pm-vue-card-view-container">
+      <div
+        class="pm-vue-card-view-body"
+        :style="{height: height + 'px'}"
+      >
+        <vue-card v-for="item in data" :key="item.id">
+          <slot
+            v-for="column in options.columns"
+            :name="column"
+            :item="item"
+            :column="column"
+            :headings="options.headings"
+          ></slot>
+        </vue-card>
+      </div>
+
+      <div class="pm-vue-card-view-footer">
+        <a @click="viewMore" class="list-group-item">View more</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VueCard from "./VueCard.vue";
+import DefaultMixins from "./VueCardViewMixins";
+export default {
+  name: "VueCardView",
+  mixins: [DefaultMixins],
+  components: {
+    VueCard,
+  },
+  props: ["options"],
+  data() {
+    return {
+    };
+  },
+  mounted() {
+
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn btn-slim btn-force-radius v-btn-header " + cls;
+    },
+  },
+};
+</script>
+
+<style>
+.pm-vue-card-view {
+  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 0.9rem;
+}
+
+.pm-vue-card-view-body {
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  padding-bottom: 5px;
+  margin-top: 5px;
+  overflow-y: auto;
+}
+
+.pm-vue-card-view-footer {
+  text-align: center;
+  line-height: 1.25;
+}
+</style>
diff --git a/resources/assets/js/components/dataViews/vueCardView/VueCardViewMixins.js b/resources/assets/js/components/dataViews/vueCardView/VueCardViewMixins.js
new file mode 100644
index 000000000..d7604a7ce
--- /dev/null
+++ b/resources/assets/js/components/dataViews/vueCardView/VueCardViewMixins.js
@@ -0,0 +1,55 @@
+export default {
+  data() {
+    let that = this;
+    return {
+      height: 0,
+      config: {
+        page: 1
+      },
+      data: []
+    }
+  },
+  mounted: function () {
+    this.getData();
+    this.getBodyHeight();
+  },
+  methods: {
+    /**
+     * Get data similar to vue Table
+     */
+    getData() {
+      let options = _.extend({}, this.config, this.options),
+        that = this;
+      this.options.requestFunction(options)
+        .then((data) => {
+          that.data = data.data;
+        })
+        .catch(() => {
+
+        });
+    },
+    /**
+     * Get data when press the button more view
+     */
+    viewMore() {
+      let options = _.extend({}, this.config, this.options, { page: this.config.page + 1 }),
+        that = this;
+      this.options.requestFunctionViewMore(options)
+        .then((data) => {
+          if (data.data && data.data.length != 0) {
+            that.data = that.data.concat(data.data);
+            that.config.page += 1;
+          }
+        })
+        .catch(() => {
+
+        });
+    },
+    /**
+     * Return the height for Vue Card View body
+     */
+    getBodyHeight() {
+      this.height = window.innerHeight - this.$root.$el.clientHeight;
+    }
+  }
+}
\ No newline at end of file
diff --git a/resources/assets/js/components/dataViews/vueListView/VueList.vue b/resources/assets/js/components/dataViews/vueListView/VueList.vue
new file mode 100644
index 000000000..759f3a967
--- /dev/null
+++ b/resources/assets/js/components/dataViews/vueListView/VueList.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="pm-vue-list">
+    <div class="card pm-vue-list-inside">
+      <div class="card-body">
+        <slot> </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VueCardView",
+  props: ["columns", "item"],
+  data() {
+    return {};
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn btn-slim btn-force-radius v-btn-header " + cls;
+    },
+  },
+};
+</script>
+
+<style>
+.pm-vue-list {
+  padding: 0.7rem 0.7rem 0rem 0.7rem;
+}
+.pm-vue-list-inside {
+  border-left: solid lightseagreen;
+  color: #212529;
+  background-color: #f8f9fa;
+}
+
+.pm-vue-list-inside:hover {
+  background-color: #cfd9e4;
+}
+</style>
diff --git a/resources/assets/js/components/dataViews/vueListView/VueListView.vue b/resources/assets/js/components/dataViews/vueListView/VueListView.vue
new file mode 100644
index 000000000..71fd252ae
--- /dev/null
+++ b/resources/assets/js/components/dataViews/vueListView/VueListView.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="pm-vue-list-view" :height="height">
+    <div class="pm-vue-list-view-container">
+      <div
+        class="pm-vue-list-view-body"
+        :style="{height: height + 'px'}"
+      >
+        <vue-list v-for="item in data" :key="item.id">
+          <slot
+            v-for="column in options.columns"
+            :name="column"
+            :item="item"
+            :column="column"
+            :headings="options.headings"
+          ></slot>
+        </vue-list>
+      </div>
+
+      <div class="pm-vue-list-view-footer">
+        <a @click="viewMore" class="list-group-item">View more</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VueList from "./VueList.vue";
+import DefaultMixins from "./VueListViewMixins";
+export default {
+  name: "VueListView",
+  mixins: [DefaultMixins],
+  components: {
+    VueList,
+  },
+  props: ["options"],
+  data() {
+    return {
+    };
+  },
+  mounted() {
+
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn btn-slim btn-force-radius v-btn-header " + cls;
+    },
+  },
+};
+</script>
+
+<style>
+.pm-vue-list-view {
+  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 0.9rem;
+}
+
+.pm-vue-list-view-body {
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  padding-bottom: 5px;
+  margin-top: 5px;
+  overflow-y: auto;
+}
+
+.pm-vue-list-view-footer {
+  text-align: center;
+  line-height: 1.25;
+}
+</style>
diff --git a/resources/assets/js/components/dataViews/vueListView/VueListViewMixins.js b/resources/assets/js/components/dataViews/vueListView/VueListViewMixins.js
new file mode 100644
index 000000000..ee26a8354
--- /dev/null
+++ b/resources/assets/js/components/dataViews/vueListView/VueListViewMixins.js
@@ -0,0 +1,55 @@
+export default {
+  data() {
+    let that = this;
+    return {
+      height: 0,
+      config: {
+        page: 1
+      },
+      data: []
+    }
+  },
+  mounted: function () {
+    this.getData();
+    this.getBodyHeight();
+  },
+  methods: {
+    /**
+     * Get data similar to vue Table
+     */
+    getData() {
+      let options = _.extend({}, this.config, this.options),
+        that = this;
+      this.options.requestFunction(options)
+        .then((data) => {
+          that.data = data.data;
+        })
+        .catch(() => {
+
+        });
+    },
+    /**
+     * Get data when press the button more view
+     */
+    viewMore() {
+      let options = _.extend({}, this.config, this.options, { page: this.config.page + 1 }),
+        that = this;
+      this.options.requestFunctionViewMore(options)
+        .then((data) => {
+          if (data.data && data.data.length != 0) {
+            that.data = that.data.concat(data.data);
+            that.config.page += 1;
+          }
+        })
+        .catch(() => {
+
+        });
+    },
+    /**
+     * Return the height for Vue list View body
+     */
+    getBodyHeight() {
+      this.height = window.innerHeight - this.$root.$el.clientHeight;
+    }
+  }
+}
\ No newline at end of file
diff --git a/resources/assets/js/components/headers/MultiviewHeader.vue b/resources/assets/js/components/headers/MultiviewHeader.vue
new file mode 100644
index 000000000..d7402e3aa
--- /dev/null
+++ b/resources/assets/js/components/headers/MultiviewHeader.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="pm-multiview-header">
+    <div class="pm-multiview-header-title"></div>
+    <div class="pm-multiview-header-actions">
+      <div>
+        <button
+          v-for="action in data.actions"
+          :key="action.id"
+          @click="action.onClick(action)"
+          class="pm-multiview-header-button"
+          :title="action.title"
+        >
+          <div>
+            <span>
+              <i :class="action.icon"></i>
+            </span>
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MultiviewHeader",
+  props: ["data"],
+  data() {
+    return {};
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn btn-slim btn-force-radius v-btn-header " + cls;
+    },
+  },
+};
+</script>
+
+<style>
+.pm-multiview-header {
+}
+.pm-multiview-header-title {
+}
+.pm-multiview-header-actions {
+  text-align: end;
+}
+.pm-multiview-header-button {
+  background-color: transparent;
+  border-color: white;
+  font-size: 1.6rem;
+  color: #007bff;
+  display: inline-block;
+  padding: 0px 7px 0px 7px;
+}
+</style>
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index 68b3022ab..c780de3ee 100644
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -40,7 +40,7 @@
 import CustomSidebar from "./../components/menu/CustomSidebar";
 import MyCases from "./MyCases";
 import MyDocuments from "./MyDocuments";
-import Todo from "./Todo";
+import Todo from "./Inbox/Todo.vue";
 import Draft from "./Draft";
 import Paused from "./Paused";
 import Unassigned from "./Unassigned";
diff --git a/resources/assets/js/home/Inbox/Todo.vue b/resources/assets/js/home/Inbox/Todo.vue
new file mode 100644
index 000000000..b0b90de6e
--- /dev/null
+++ b/resources/assets/js/home/Inbox/Todo.vue
@@ -0,0 +1,522 @@
+<template>
+  <div id="v-todo" ref="v-todo" class="v-container-todo">
+    <button-fleft :data="newCase"></button-fleft>
+    <modal-new-request ref="newRequest"></modal-new-request>
+    <CasesFilter
+      :filters="filters"
+      :title="$t('ID_CASES_STATUS_TO_DO')"
+      @onRemoveFilter="onRemoveFilter"
+      @onUpdateFilters="onUpdateFilters"
+    />
+    <multiview-header :data="dataMultiviewHeader" />
+    <v-server-table
+      v-if="typeView === 'GRID'"
+      :data="tableData"
+      :columns="columns"
+      :options="options"
+      ref="vueTable"
+      @row-click="onRowClick"
+    >
+      <div slot="detail" slot-scope="props">
+        <div class="btn-default" @click="openCaseDetail(props.row)">
+          <i class="fas fa-info-circle"></i>
+        </div>
+      </div>
+      <div slot="case_number" slot-scope="props">
+        {{ props.row.CASE_NUMBER }}
+      </div>
+      <div slot="case_title" slot-scope="props">
+        {{ props.row.CASE_TITLE }}
+      </div>
+      <div slot="process_name" slot-scope="props">
+        {{ props.row.PROCESS_NAME }}
+      </div>
+
+      <div slot="task" slot-scope="props">
+        <TaskCell :data="props.row.TASK" />
+      </div>
+      <div slot="current_user" slot-scope="props">
+        {{ props.row.USERNAME_DISPLAY_FORMAT }}
+      </div>
+      <div slot="due_date" slot-scope="props">
+        {{ props.row.DUE_DATE }}
+      </div>
+      <div slot="delegation_date" slot-scope="props">
+        {{ props.row.DELEGATION_DATE }}
+      </div>
+      <div slot="priority" slot-scope="props">{{ props.row.PRIORITY }}</div>
+      <div slot="actions" slot-scope="props">
+        <button class="btn btn-success btn-sm" @click="openCase(props.row)">
+          {{ $t("ID_OPEN_CASE") }}
+        </button>
+      </div>
+    </v-server-table>
+    <VueCardView
+      v-if="typeView === 'CARD'"
+      :options="optionsVueCardView"
+      ref="vueCardView"
+    >
+      <div slot="detail" slot-scope="props">
+        <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+          <i class="fas fa-info-circle"></i>
+        </div>
+      </div>
+      <div slot="case_number" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-highlight"
+          >{{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
+        >
+      </div>
+      <div slot="case_title" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["CASE_TITLE"] }}
+        </span>
+      </div>
+      <div slot="process_name" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_NAME"] }}
+        </span>
+      </div>
+      <div slot="due_date" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["DUE_DATE"] }}
+        </span>
+      </div>
+      <div slot="delegation_date" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["DELEGATION_DATE"] }}
+        </span>
+      </div>
+      <div slot="task" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light">
+          <TaskCell :data="props.item.TASK" />
+        </span>
+      </div>
+
+    </VueCardView>
+    <VueListView
+      v-if="typeView === 'LIST'"
+      :options="optionsVueListView"
+      ref="vueListView"
+    >
+      <div slot="detail" slot-scope="props">
+        <div class="v-pm-card-info" @click="openCaseDetail(props.item)">
+          <i class="fas fa-info-circle"></i>
+        </div>
+      </div>
+      <div slot="case_number" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-highlight"
+          >{{ props["headings"][props.column] }} : {{ props["item"]["CASE_NUMBER"] }}</span
+        >
+      </div>
+      <div slot="case_title" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["CASE_TITLE"] }}
+        </span>
+      </div>
+      <div slot="process_name" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["PROCESS_NAME"] }}
+        </span>
+      </div>
+      <div slot="due_date" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["DUE_DATE"] }}
+        </span>
+      </div>
+      <div slot="delegation_date" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light"
+          >{{ props["item"]["DELEGATION_DATE"] }}
+        </span>
+      </div>
+      <div slot="task" slot-scope="props" class="v-card-text">
+        <span class="v-card-text-dark"
+          >{{ props["headings"][props.column] }} :</span
+        >
+        <span class="v-card-text-light">
+          <TaskCell :data="props.item.TASK" />
+        </span>
+      </div>
+    </VueListView>
+  </div>
+</template>
+
+<script>
+import HeaderCounter from "../../components/home/HeaderCounter.vue";
+import ButtonFleft from "../../components/home/ButtonFleft.vue";
+import ModalNewRequest from "../ModalNewRequest.vue";
+import TaskCell from "../../components/vuetable/TaskCell.vue";
+import CasesFilter from "../../components/search/CasesFilter";
+import api from "../../api/index";
+import utils from "../../utils/utils";
+import MultiviewHeader from "../../components/headers/MultiviewHeader.vue";
+import VueCardView from "../../components/dataViews/vueCardView/VueCardView.vue";
+import VueListView from "../../components/dataViews/vueListView/VueListView.vue";
+import defaultMixins from "./defaultMixins";
+
+export default {
+  name: "Todo",
+  mixins: [defaultMixins],
+  components: {
+    HeaderCounter,
+    ButtonFleft,
+    ModalNewRequest,
+    TaskCell,
+    CasesFilter,
+    MultiviewHeader,
+    VueCardView,
+    VueListView
+  },
+  props: ["defaultOption", "filters"],
+  data() {
+    return {
+      newCase: {
+        title: this.$i18n.t("ID_NEW_CASE"),
+        class: "btn-success",
+        onClick: () => {
+          this.$refs["newRequest"].show();
+        },
+      },
+      columns: [
+        "detail",
+        "case_number",
+        "case_title",
+        "process_name",
+        "task",
+        "due_date",
+        "delegation_date",
+        "priority",
+        "actions",
+      ],
+      tableData: [],
+      options: {
+        filterable: false,
+        headings: {
+          detail: "",
+          case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
+          case_title: this.$i18n.t("ID_CASE_TITLE"),
+          process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          task: this.$i18n.t("ID_TASK"),
+          current_user: this.$i18n.t("ID_CURRENT_USER"),
+          due_date: this.$i18n.t("ID_DUE_DATE"),
+          delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
+          priority: this.$i18n.t("ID_PRIORITY"),
+          actions: "",
+        },
+        texts: {
+          count: this.$i18n.t("ID_SHOWING_FROM_RECORDS_COUNT"),
+          first: this.$i18n.t("ID_FIRST"),
+          last: this.$i18n.t("ID_LAST"),
+          filter: this.$i18n.t("ID_FILTER") + ":",
+          limit: this.$i18n.t("ID_RECORDS") + ":",
+          page: this.$i18n.t("ID_PAGE") + ":",
+          noResults: this.$i18n.t("ID_NO_MATCHING_RECORDS"),
+        },
+        selectable: {
+          mode: "single",
+          only: function (row) {
+            return true;
+          },
+          selectAllMode: "page",
+          programmatic: false,
+        },
+        requestFunction(data) {
+          return this.$parent.$parent.getCasesForVueTable(data);
+        },
+      },
+      pmDateFormat: "Y-m-d H:i:s",
+      clickCount: 0,
+      singleClickTimer: null,
+      statusTitle: {
+        ON_TIME: this.$i18n.t("ID_IN_PROGRESS"),
+        OVERDUE: this.$i18n.t("ID_TASK_OVERDUE"),
+        DRAFT: this.$i18n.t("ID_IN_DRAFT"),
+        PAUSED: this.$i18n.t("ID_PAUSED"),
+        UNASSIGNED: this.$i18n.t("ID_UNASSIGNED"),
+      },
+    };
+  },
+  created() {
+    this.initFilters();
+  },
+  mounted() {
+    // force to open case
+    this.openDefaultCase();
+  },
+  watch: {},
+  computed: {
+    /**
+     * Build our ProcessMaker apiClient
+     */
+    ProcessMaker() {
+      return window.ProcessMaker;
+    },
+  },
+  updated() {},
+  beforeCreate() {},
+  methods: {
+    /**
+     * Initialize filters
+     */
+    initFilters() {
+      let params;
+      if (this.defaultOption) {
+        params = utils.getAllUrlParams(this.defaultOption);
+        if (params && params.openapplicationuid) {
+          this.$emit("onUpdateFilters", [
+            {
+              fieldId: "caseNumber",
+              filterVar: "caseNumber",
+              label: "",
+              options: [],
+              value: params.openapplicationuid,
+              autoShow: false,
+            },
+          ]);
+        }
+      }
+    },
+    /**
+     * Open a case when the component was mounted
+     */
+    openDefaultCase() {
+      let params;
+      if (this.defaultOption) {
+        params = utils.getAllUrlParams(this.defaultOption);
+        if (params && params.app_uid && params.del_index) {
+          this.openCase({
+            APP_UID: params.app_uid,
+            DEL_INDEX: params.del_index,
+          });
+          this.$emit("cleanDefaultOption");
+        }
+        //force to search in the parallel tasks
+        if (params && params.openapplicationuid) {
+          this.onUpdateFilters({
+            params: [
+              {
+                fieldId: "caseNumber",
+                filterVar: "caseNumber",
+                label: "",
+                options: [],
+                value: params.openapplicationuid,
+                autoShow: false,
+              },
+            ],
+            refresh: false,
+          });
+          this.$emit("cleanDefaultOption");
+        }
+      }
+    },
+    /**
+     * On row click event handler
+     * @param {object} event
+     */
+    onRowClick(event) {
+      let self = this;
+      self.clickCount += 1;
+      if (self.clickCount === 1) {
+        self.singleClickTimer = setTimeout(function () {
+          self.clickCount = 0;
+        }, 400);
+      } else if (self.clickCount === 2) {
+        clearTimeout(self.singleClickTimer);
+        self.clickCount = 0;
+        self.openCase(event.row);
+      }
+    },
+    /**
+     * Get cases todo data
+     */
+    getCasesForVueTable(data) {
+      let that = this,
+        dt,
+        paged,
+        limit = data.limit,
+        start = data.page === 1 ? 0 : limit * (data.page - 1),
+        filters = {};
+      paged = start + "," + limit;
+
+      filters = {
+        paged: paged,
+      };
+
+      _.forIn(this.filters, function (item, key) {
+        filters[item.filterVar] = item.value;
+      });
+      return new Promise((resolutionFunc, rejectionFunc) => {
+        api.cases
+          .todo(filters)
+          .then((response) => {
+            dt = that.formatDataResponse(response.data.data);
+            resolutionFunc({
+              data: dt,
+              count: response.data.total,
+            });
+          })
+          .catch((e) => {
+            rejectionFunc(e);
+          });
+      });
+    },
+    /**
+     * Format Response API TODO to grid todo and columns
+     */
+    formatDataResponse(response) {
+      let data = [];
+      _.forEach(response, (v) => {
+        data.push({
+          CASE_NUMBER: v.APP_NUMBER,
+          CASE_TITLE: v.DEL_TITLE,
+          PROCESS_NAME: v.PRO_TITLE,
+          TASK: [
+            {
+              TITLE: v.TAS_TITLE,
+              CODE_COLOR: v.TAS_COLOR,
+              COLOR: v.TAS_COLOR_LABEL,
+              DELAYED_TITLE:
+                v.TAS_STATUS === "OVERDUE"
+                  ? this.$i18n.t("ID_DELAYED") + ":"
+                  : this.statusTitle[v.TAS_STATUS],
+              DELAYED_MSG: v.TAS_STATUS === "OVERDUE" ? v.DELAY : "",
+            },
+          ],
+          USERNAME_DISPLAY_FORMAT: utils.userNameDisplayFormat({
+            userName: v.USR_LASTNAME,
+            firstName: v.USR_LASTNAME,
+            lastName: v.USR_LASTNAME,
+            format: window.config.FORMATS.format || null,
+          }),
+          DUE_DATE: v.DEL_TASK_DUE_DATE_LABEL,
+          DELEGATION_DATE: v.DEL_DELEGATE_DATE_LABEL,
+          PRIORITY: v.DEL_PRIORITY_LABEL,
+          DEL_INDEX: v.DEL_INDEX,
+          APP_UID: v.APP_UID,
+          PRO_UID: v.PRO_UID,
+          TAS_UID: v.TAS_UID,
+        });
+      });
+      return data;
+    },
+    /**
+     * Open selected cases in the inbox
+     *
+     * @param {object} item
+     */
+    openCase(item) {
+      this.$emit("onUpdateDataCase", {
+        APP_UID: item.APP_UID,
+        DEL_INDEX: item.DEL_INDEX,
+        PRO_UID: item.PRO_UID,
+        TAS_UID: item.TAS_UID,
+        ACTION: "todo",
+      });
+      this.$emit("onUpdatePage", "XCase");
+    },
+    /**
+     * Open case detail
+     *
+     * @param {object} item
+     */
+    openCaseDetail(item) {
+      let that = this;
+      api.cases.open(_.extend({ ACTION: "todo" }, item)).then(() => {
+        api.cases.cases_open(_.extend({ ACTION: "todo" }, item)).then(() => {
+          that.$emit("onUpdateDataCase", {
+            APP_UID: item.APP_UID,
+            DEL_INDEX: item.DEL_INDEX,
+            PRO_UID: item.PRO_UID,
+            TAS_UID: item.TAS_UID,
+            APP_NUMBER: item.CASE_NUMBER,
+            ACTION: "todo",
+          });
+          that.$emit("onUpdatePage", "case-detail");
+        });
+      });
+    },
+    onRemoveFilter(data) {},
+    onUpdateFilters(data) {
+      this.$emit("onUpdateFilters", data.params);
+      if (data.refresh) {
+        this.$nextTick(() => {
+          if (this.typeView === "GRID") {
+            this.$refs["vueTable"].getData();
+          }
+          if (this.typeView === "CARD") {
+            this.$refs["vueCardView"].getData();
+          }
+          if (this.typeView === "LIST") {
+            this.$refs["vueListView"].getData();
+          }
+        });
+      }
+    },
+    /**
+     * update view in component
+     */
+    updateView() {
+      this.$refs["vueTable"].getData();
+    },
+  },
+};
+</script>
+<style>
+.v-container-todo {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  padding-left: 50px;
+  padding-right: 50px;
+}
+.VueTables__limit {
+  display: none;
+}
+
+.v-card-text-dark {
+  color: #343944;
+  display: inline-block;
+}
+
+.v-card-text-highlight {
+  color: #313541;
+  display: inline-block;
+}
+
+.v-card-text-light {
+  color: #313541;
+  display: inline-block;
+}
+
+.v-card-text {
+}
+
+.v-pm-card-info{
+  float: right;
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/home/Inbox/defaultMixins.js b/resources/assets/js/home/Inbox/defaultMixins.js
new file mode 100644
index 000000000..ed071edac
--- /dev/null
+++ b/resources/assets/js/home/Inbox/defaultMixins.js
@@ -0,0 +1,166 @@
+import api from "../../api/index";
+export default {
+  data() {
+    let that = this;
+    return {
+      typeView: "GRID",
+      dataMultiviewHeader: {
+        actions: [
+          {
+            id: "view-grid",
+            title: "Grid",
+            onClick(action) {
+              that.typeView = "GRID";
+            },
+            icon: "fas fa-table",
+          },
+          {
+            id: "view-list",
+            title: "List",
+            onClick(action) {
+              that.typeView = "LIST";
+            },
+            icon: "fas fa-list",
+          },
+          {
+            id: "view-card",
+            title: "Card",
+            onClick(action) {
+              that.typeView = "CARD";
+            },
+            icon: "fas fa-th",
+          },
+        ],
+      },
+      optionsVueCardView: {
+        limit: 10,
+        headings: {
+          detail: "",
+          case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
+          case_title: this.$i18n.t("ID_CASE_TITLE"),
+          process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          task: this.$i18n.t("ID_TASK"),
+          current_user: this.$i18n.t("ID_CURRENT_USER"),
+          due_date: this.$i18n.t("ID_DUE_DATE"),
+          delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
+          priority: this.$i18n.t("ID_PRIORITY")
+        },
+        columns: [
+          "detail",
+          "case_number",
+          "case_title",
+          "process_name",
+          "due_date",
+          "delegation_date",
+          "priority",
+          "task"
+        ],
+        requestFunction(data) {
+          return that.getCasesVueCard(data);
+        },
+        requestFunctionViewMore(data) {
+          return that.getCasesVueCardViewMore(data);
+        }
+      },
+      optionsVueListView: {
+        limit: 10,
+        headings: {
+          detail: "",
+          case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
+          case_title: this.$i18n.t("ID_CASE_TITLE"),
+          process_name: this.$i18n.t("ID_PROCESS_NAME"),
+          task: this.$i18n.t("ID_TASK"),
+          current_user: this.$i18n.t("ID_CURRENT_USER"),
+          due_date: this.$i18n.t("ID_DUE_DATE"),
+          delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
+          priority: this.$i18n.t("ID_PRIORITY")
+        },
+        columns: [
+          "detail",
+          "case_number",
+          "case_title",
+          "process_name",
+          "due_date",
+          "delegation_date",
+          "priority",
+          "task"
+        ],
+        requestFunction(data) {
+          return that.getCasesVueCard(data);
+        },
+        requestFunctionViewMore(data) {
+          return that.getCasesVueCardViewMore(data);
+        }
+      }
+    }
+  },
+  created: function () {
+
+  },
+  methods: {
+    /**
+    * Get cases for Vue Card View
+    */
+    getCasesVueCard(data) {
+      let that = this,
+        dt,
+        start = 0,
+        limit = data.limit,
+        filters = {};
+      filters = {
+        paged: "0," + limit,
+      };
+
+      _.forIn(this.filters, function (item, key) {
+        filters[item.filterVar] = item.value;
+      });
+      return new Promise((resolutionFunc, rejectionFunc) => {
+        api.cases
+          .todo(filters)
+          .then((response) => {
+            dt = that.formatDataResponse(response.data.data);
+            resolutionFunc({
+              data: dt,
+              count: response.data.total,
+            });
+          })
+          .catch((e) => {
+            rejectionFunc(e);
+          });
+      });
+    },
+    /**
+    * Get cases for Vue Card View
+    */
+    getCasesVueCardViewMore(data) {
+      let that = this,
+        dt,
+        paged,
+        limit = data.limit,
+        start = data.page === 1 ? 0 : limit * (data.page - 1),
+        filters = {};
+      paged = start + "," + limit;
+
+      filters = {
+        paged: paged,
+      };
+      _.forIn(this.filters, function (item, key) {
+        filters[item.filterVar] = item.value;
+      });
+      return new Promise((resolutionFunc, rejectionFunc) => {
+        api.cases
+          .todo(filters)
+          .then((response) => {
+            dt = that.formatDataResponse(response.data.data);
+            resolutionFunc({
+              data: dt,
+              count: response.data.total,
+            });
+          })
+          .catch((e) => {
+            rejectionFunc(e);
+          });
+      });
+    },
+  }
+}
\ No newline at end of file