diff --git a/package.json b/package.json
index c544d500e..b3f73d27c 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/vue-fontawesome": "^2.0.2",
+    "apexcharts": "^3.27.3",
     "axios": "^0.15.3",
     "bootstrap": "^4.5.3",
     "bootstrap-colorpicker": "^3.0.3",
@@ -38,6 +39,7 @@
     "idempotent-babel-polyfill": "^7.4.4",
     "jquery": "^3.1.1",
     "lodash": "^4.17.20",
+    "moment": "^2.29.1",
     "muuri": "^0.7.1",
     "npm-font-open-sans": "^1.1.0",
     "popper.js": "^1.12",
@@ -48,6 +50,7 @@
     "verte": "0.0.12",
     "vfa-picker": "^5.9.1",
     "vue": "^2.6.12",
+    "vue-apexcharts": "^1.6.1",
     "vue-awesome-swiper": "^3.1.3",
     "vue-chartjs": "^3.3.2",
     "vue-clipboards": "^1.2.4",
diff --git a/resources/assets/js/api/Cases.js b/resources/assets/js/api/Cases.js
index 3a009f571..d3b3b1100 100644
--- a/resources/assets/js/api/Cases.js
+++ b/resources/assets/js/api/Cases.js
@@ -324,6 +324,17 @@ export let cases = {
             window.config.SYS_URI +
             `cases/debug_triggers?r=${r}&_dc=${dc}`);
     },
+    /**
+     * Make a search request to the Api service 
+     * @param {object} dt - filter parameters
+     */
+    listTotalCases(dt) {
+      return Api.get({
+        service: "LIST_TOTAL_CASES",
+        params: {},
+        keys: {}
+      })
+    },
 };
 
 export let casesHeader = {
diff --git a/resources/assets/js/api/Filters.js b/resources/assets/js/api/Filters.js
index cac153fa5..e0ef9a995 100644
--- a/resources/assets/js/api/Filters.js
+++ b/resources/assets/js/api/Filters.js
@@ -1,7 +1,7 @@
 import axios from "axios";
 import ApiInstance from "./Api.js";
 import Services from "./Services";
-let Api = new ApiInstance( Services );
+let Api = new ApiInstance(Services);
 export let filters = {
     get(data) {
         return Api.get({
@@ -42,8 +42,8 @@ export let filters = {
         params.append("action", "startCase");
         return axios.post(
             window.config.SYS_SERVER_AJAX +
-                window.config.SYS_URI +
-                `cases/casesStartPage_Ajax.php`,
+            window.config.SYS_URI +
+            `cases/casesStartPage_Ajax.php`,
             params
         );
     },
@@ -88,11 +88,16 @@ export let filters = {
      * Service to get the categories list
      */
     categories(query) {
+        let pr = {
+            limit: 15,
+            offset: 0
+        };
+        if (query) {
+            pr["name"] = query;
+        }
         return Api.get({
             service: "CATEGORIES",
-            params: {
-                name: query,
-            },
+            params: pr,
             keys: {},
         });
     },
@@ -102,8 +107,8 @@ export let filters = {
     userValues(query) {
         return axios.post(
             window.config.SYS_SERVER_AJAX +
-                window.config.SYS_URI +
-                `cases/casesList_Ajax?actionAjax=userValues&action=search`,
+            window.config.SYS_URI +
+            `cases/casesList_Ajax?actionAjax=userValues&action=search`,
             {
                 query,
             }
diff --git a/resources/assets/js/api/Process.js b/resources/assets/js/api/Process.js
index ed4ef4d83..987d4b85c 100644
--- a/resources/assets/js/api/Process.js
+++ b/resources/assets/js/api/Process.js
@@ -1,6 +1,6 @@
 import ApiInstance from "./Api.js";
 import Services from "./Services";
-let Api = new ApiInstance( Services );
+let Api = new ApiInstance(Services);
 
 export let process = {
     list: {
@@ -12,5 +12,36 @@ export let process = {
                 keys: {}
             });
         }
-    }
+    },
+    totalCasesByProcess(dt) {
+        return Api.get({
+            service: "TOTAL_CASES_BY_PROCESS",
+            params: dt,
+            keys: {}
+        });
+    },
+    processCategories() {
+        return Api.fetch({
+            service: "PROCESS_CATEGORIES",
+            method: "get",
+            data: {},
+            keys: {}
+        });
+    },
+    totalCasesByRange(dt) {
+      return Api.get({
+          service: "TOTAL_CASES_BY_RANGE",
+          method: "get",
+          params: dt,
+          keys: {}
+      });
+    },
+    totalCasesByRisk(dt) {
+      return Api.get({
+          service: "CASES_RISK",
+          method: "get",
+          params: dt,
+          keys: {}
+      });
+    },
 };
\ No newline at end of file
diff --git a/resources/assets/js/api/Services.js b/resources/assets/js/api/Services.js
index e874cc744..c7f15bb18 100644
--- a/resources/assets/js/api/Services.js
+++ b/resources/assets/js/api/Services.js
@@ -68,6 +68,10 @@
     TASKS: "/home/tasks",
     CATEGORIES: "/home/categories",
     DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}",
+    LIST_TOTAL_CASES: "/metrics/list-total-cases",
+    TOTAL_CASES_BY_PROCESS:"/metrics/total-cases-by-process",
+    TOTAL_CASES_BY_RANGE:"/metrics/process-total-cases",
+    CASES_RISK:"/metrics/cases-risk",
     CONFIG: "/home/config",
     GET_CONFIG: "/home/config/{id}/{name}",
     PAUSE_CASE: "/cases/{app_uid}/pause",
diff --git a/resources/assets/js/components/utils/BreadCrumb.vue b/resources/assets/js/components/utils/BreadCrumb.vue
new file mode 100644
index 000000000..c8181a131
--- /dev/null
+++ b/resources/assets/js/components/utils/BreadCrumb.vue
@@ -0,0 +1,92 @@
+<template>
+  <nav aria-label="breadcrumb">
+    <ol class="vp-breadcrumb">
+      <li
+        v-for="item in formatOptions(options)"
+        :key="item.label"
+        :class="item.classObject"
+      >
+        <span v-if="item.classObject.active === true">{{ item.label }}</span>
+        <a
+          v-if="item.classObject.active === false"
+          href="#"
+          @click="item.onClick"
+          >{{ item.label }}</a
+        >
+      </li>
+      <div
+        v-for="item in settings"
+        :key="item.id"
+        class="vp-bread-crumbs-settings vp-float-right vp-inline-block"
+      >
+        <span
+          @click="item.onClick"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          :title="item.tooltip || ''"
+        >
+          <i :class="formatClass(item)"></i>
+        </span>
+      </div>
+    </ol>
+  </nav>
+</template>
+
+<script>
+import _ from "lodash";
+export default {
+  name: "BreadCrumb",
+  props: ["options", "settings"],
+  data() {
+    return {};
+  },
+  methods: {
+    /**
+     * format options to Bread Crumbs
+     */
+    formatOptions(data) {
+      let options = data;
+      for (let i = 0; i <= options.length - 1; i++) {
+        if (i === options.length - 1) {
+          options[i].classObject = {
+            "breadcrumb-item": true,
+            active: true,
+            "vp-inline-block": true,
+          };
+        } else {
+          options[i].classObject = {
+            "breadcrumb-item": true,
+            active: false,
+            "vp-inline-block": true,
+          };
+        }
+      }
+      return options;
+    },
+    formatClass(item) {
+      return item.class;
+    },
+  },
+};
+</script>
+<style scoped>
+.vp-float-right {
+  float: right;
+}
+
+.vp-bread-crumbs-settings {
+  line-height: 20px;
+}
+
+.vp-breadcrumb {
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  list-style: none;
+  background-color: #e9ecef;
+  border-radius: 0.25rem;
+}
+
+.vp-inline-block {
+  display: inline-block;
+}
+</style>
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index 977166000..e3c05091b 100644
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -48,6 +48,7 @@ import Inbox from "./Inbox/Inbox.vue";
 import Paused from "./Paused/Paused.vue";
 import Draft from "./Draft/Draft.vue";
 import Unassigned from "./Unassigned/Unassigned.vue";
+import TaskMetrics from "./TaskMetrics/TaskMetrics.vue";
 import BatchRouting from "./BatchRouting";
 import CaseDetail from "./CaseDetail";
 import XCase from "./XCase";
@@ -74,7 +75,8 @@ export default {
         Unassigned,
         CaseDetail,
         LegacyFrame,
-        CustomCaseList,
+        TaskMetrics,
+        CustomCaseList
     },
     data() {
         return {
@@ -122,9 +124,15 @@ export default {
             parseInt(window.config.FORMATS.casesListRefreshTime) * 1000
         );
         // adding eventBus listener
-         eventBus.$on('sort-menu', (data) => {
+        eventBus.$on('sort-menu', (data) => {
             that.updateUserSettings('customCasesList', data);
         });
+        eventBus.$on('home-update-page', (data) => {
+            that.onUpdatePage(data);
+        });
+        eventBus.$on('home-update-datacase', (data) => {
+            that.onUpdateDataCase(data);
+        });
     },
     methods: {
         /**
@@ -244,6 +252,7 @@ export default {
         mappingMenu(data) {
             var i,
                 j,
+                that = this,
                 newData = data,
                 auxId;
             for (i = 0; i < data.length; i += 1) {
@@ -265,7 +274,7 @@ export default {
                                 hiddenOnCollapse: data[i].hiddenOnCollapse,
                                 icon: 'pie-chart-fill',
                                 onClick: function (item) {
-                                    // TODO click evet handler
+                                  that.onUpdatePage("task-metrics");
                                 }
                             }
                         }
diff --git a/resources/assets/js/home/TaskMetrics/DrillDown.vue b/resources/assets/js/home/TaskMetrics/DrillDown.vue
new file mode 100644
index 000000000..6501d96ee
--- /dev/null
+++ b/resources/assets/js/home/TaskMetrics/DrillDown.vue
@@ -0,0 +1,162 @@
+<template>
+  <div
+    id="v-pm-drill-down"
+    ref="v-pm-drill-down"
+    class="v-pm-drill-down vp-inline-block"
+  >
+    <div class="p-1 v-flex">
+      <h6 class="v-search-title">{{ $t("ID_DRILL_DOWN_NAVIGATOR") }}</h6>
+    </div>
+    <div
+      v-for="item in loadItems(data, level)"
+      :key="item.content"
+      class="vp-padding-b10"
+      @click="onClick(item)"
+    >
+      <span class="vp-inline-block vp-padding-r10 vp-font-size-r1">
+        {{ item.label }}
+      </span>
+      <div class="vp-inline-block">
+        <span :class="item.classObject"> {{ item.content }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+export default {
+  name: "DrillDown",
+  mixins: [],
+  components: {},
+  props: ["level"],
+  data() {
+    let that = this;
+    return {
+      classObject: {
+        "rounded-circle": true,
+        "v-pm-drill-down-number": true,
+        "vp-btn-secondary": true,
+        "btn-primary": false,
+        "vp-block": true,
+      },
+      data: [
+        {
+          label: that.$t("ID_LEVEL"),
+          content: "0",
+          click() {
+            that.$emit("onChangeLevel", 0);
+          },
+        },
+        {
+          label: that.$t("ID_LEVEL"),
+          content: "1",
+          click() {
+            that.$emit("onChangeLevel", 1);
+          },
+        },
+        {
+          label: that.$t("ID_LEVEL"),
+          content: "2",
+          click() {
+            that.$emit("onChangeLevel", 2);
+          },
+        },
+        {
+          label: that.$t("ID_LEVEL"),
+          content: "3",
+          click() {},
+        },
+      ],
+    };
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  computed: {},
+  updated() {},
+  beforeCreate() {},
+  methods: {
+    /**
+     * Click in drill option
+     */
+    onClick(item) {
+      let array,
+        i = 0,
+        nindex;
+      array = _.clone(this.data);
+      array.forEach((el) => {
+        if (el.content === item.content) {
+          nindex = i;
+        }
+        i++;
+      });
+      this.index = nindex;
+      if (nindex <= this.level) {
+        item.click(item);
+      }
+    },
+    /**
+     * Load items in drill items
+     */
+    loadItems(items, index) {
+      let array,
+        i = 0,
+        that = this;
+      array = _.clone(items);
+      array.forEach((el) => {
+        el.classObject = _.clone(that.classObject);
+        if (i <= index) {
+          el.classObject["vp-btn-secondary"] = false;
+          el.classObject["btn-primary"] = true;
+        }
+        i += 1;
+      });
+      return array;
+    },
+  },
+};
+</script>
+<style>
+.v-pm-drill-down-number {
+  height: 5rem;
+  width: 5rem;
+  text-align: center;
+  line-height: 5rem;
+  font-size: 1.5rem;
+}
+
+.vp-inline-block {
+  display: inline-block;
+}
+.vp-block {
+  display: block;
+}
+.vp-padding-r10 {
+  padding-right: 10px;
+}
+
+.vp-padding-b10 {
+  padding-bottom: 10px;
+}
+
+.vp-font-size-r1 {
+  font-size: 1rem;
+}
+
+.vp-btn-secondary {
+  color: #2f3133;
+  background-color: #b5b6b6;
+}
+
+.vp-btn-secondary:hover {
+  color: #fff;
+  background-color: #6c757d;
+  border-color: #6c757d;
+}
+
+.v-pm-drill-down {
+  vertical-align: top;
+  padding-left: 50px;
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/home/TaskMetrics/ProcessPopover.vue b/resources/assets/js/home/TaskMetrics/ProcessPopover.vue
new file mode 100644
index 000000000..248089870
--- /dev/null
+++ b/resources/assets/js/home/TaskMetrics/ProcessPopover.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="pm-all-view-popover">
+    <b-popover
+      :target="target"
+      ref="popover"
+      triggers="click"
+      placement="bottom"
+      @show="onshow"
+    >
+      <template #title>{{ $t("ID_PROCESSES").toUpperCase() }}</template>
+      <div>
+        <div class="input-group input-group-sm mb-3">
+          <span class="input-group-text" id="inputGroup-sizing-sm"
+            ><i class="fas fa-search"></i
+          ></span>
+          <input
+            type="text"
+            class="form-control"
+            aria-describedby="inputGroup-sizing-sm"
+            @keyup="search"
+            v-model="text"
+          />
+        </div>
+        <div class="form-check border-bottom">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            v-model="allColumns"
+            @change="toogleAllColumns"
+          />
+          <label class="form-check-label" for="flexCheckDefault">
+            {{ $t("ID_ALL") }}
+          </label>
+        </div>
+        <b-form-group>
+          <b-form-checkbox-group
+            v-model="localSelected"
+            :options="results"
+            value-field="key"
+            text-field="value"
+            name="flavour-2a"
+            @change="changeOptions"
+            stacked
+          ></b-form-checkbox-group>
+        </b-form-group>
+        <div class="v-popover-footer">
+          <div class="float-right">
+            <b-button @click="onClose" size="sm" variant="danger">
+              {{ $t("ID_CANCEL") }}</b-button
+            >
+            <b-button @click="onSave" size="sm" variant="success">{{
+              $t("ID_SAVE")
+            }}</b-button>
+          </div>
+        </div>
+      </div>
+    </b-popover>
+  </div>
+</template>
+<script>
+export default {
+  name: "ProcessPopover",
+  props: ["target"],
+  data() {
+    return {
+      options: [],
+      text: "",
+      results: [],
+      allColumns: false,
+      localSelected: [],
+      selected: [],
+    };
+  },
+  mounted() {
+    this.results = this.options;
+    this.localSelected = this.selected;
+  },
+  methods: {
+    /**
+     * Setter options for fill the popover
+     * @param {*} options
+     */
+    setOptions(options) {
+      this.options = options;
+      this.results = options;
+    },
+    /**
+     * Setter the selected options
+     * @param {*} options
+     */
+    setSelectedOptions(options) {
+      this.selected = options;
+      this.localSelected = options;
+    },
+    /**
+     * Close buton click handler
+     */
+    onClose() {
+      this.$refs.popover.$emit("close");
+      this.$emit("closePopover");
+    },
+    /**
+     * Save button click handler
+     */
+    onSave() {
+      let sels;
+      sels = _.clone(this.localSelected);
+      this.$root.$emit("bv::hide::popover");
+      this.$emit("onUpdateColumnSettings", sels);
+    },
+    /**
+     * Show popover event handler
+     */
+    onshow() {
+      this.$root.$emit("bv::hide::popover");
+    },
+    /**
+     * Search in the column name
+     */
+    search() {
+      let txt = this.text.toLowerCase(),
+        val,
+        opts = [];
+
+      opts = _.filter(this.options, function (o) {
+        val = o.value.toLowerCase();
+
+        return val.search(txt) != -1;
+      });
+
+      this.results = opts;
+    },
+    /**
+     * Toogle all options in popover
+     */
+    toogleAllColumns() {
+      let res = [];
+      if (this.allColumns) {
+        _.each(this.options, function (o) {
+          res.push(o.key);
+        });
+      }
+      this.selected = res;
+    },
+    /**
+     * Handler when change options event
+     */
+    changeOptions() {
+      let that = this,
+        res = [];
+      _.each(this.options, function (o) {
+        if (
+          _.findIndex(that.localSelected, function (v) {
+            return v === o.key;
+          }) != -1
+        ) {
+          res.push(o.key);
+        }
+      });
+      this.localSelected = res;
+    },
+  },
+};
+</script>
+<style scoped>
+.pm-all-view-popover .popover {
+  max-width: 350px !important;
+  min-width: 200px !important;
+}
+.v-popover-footer {
+  display: flow-root;
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/home/TaskMetrics/TaskMetrics.vue b/resources/assets/js/home/TaskMetrics/TaskMetrics.vue
new file mode 100644
index 000000000..9d735f547
--- /dev/null
+++ b/resources/assets/js/home/TaskMetrics/TaskMetrics.vue
@@ -0,0 +1,79 @@
+<template>
+  <div id="v-pm-task-metrics" ref="v-pm-task-metrics" class="v-pm-task-metrics">
+    <button-fleft :data="newCase"></button-fleft>
+    <div class="p-1 v-flex">
+      <h4 class="v-search-title">
+        Task metrics
+        <span class="vp-padding-r3"> <i class="fas fa-chart-pie"></i></span>
+      </h4>
+    </div>
+    <modal-new-request ref="newRequest"></modal-new-request>
+    <div class="d-inline-flex p-2">
+      <vue-charts
+        ref="pm-vue-chart"
+        @onChangeLevel="changeLevel"
+        :level="level"
+      />
+      <div class="vp-6"></div>
+      <drill-down :level="level" @onChangeLevel="updateVueChart" />
+    </div>
+  </div>
+</template>
+
+<script>
+import ButtonFleft from "../../components/home/ButtonFleft.vue";
+import ModalNewRequest from "../ModalNewRequest.vue";
+import DrillDown from "./DrillDown.vue";
+import VueCharts from "./VueCharts.vue";
+
+import defaultMixins from "./defaultMixins";
+export default {
+  name: "TaskMetrics",
+  mixins: [defaultMixins],
+  components: {
+    ButtonFleft,
+    ModalNewRequest,
+    DrillDown,
+    VueCharts,
+  },
+  props: [],
+  data() {
+    let that = this;
+    return {
+      level: 0,
+    };
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  computed: {},
+  updated() {},
+  beforeCreate() {},
+  methods: {
+    /**
+     * Change level in drill down
+     */
+    changeLevel(lv) {
+      this.level = lv;
+    },
+    /**
+     * update data in charts
+     */
+    updateVueChart(lv) {
+      this.$refs["pm-vue-chart"].onChangeLevel(lv);
+    },
+  },
+};
+</script>
+<style>
+.v-pm-task-metrics {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  padding-left: 50px;
+  padding-right: 50px;
+}
+
+.vp-padding-r3 {
+  padding-right: 3rem;
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
new file mode 100644
index 000000000..8f716b39f
--- /dev/null
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
@@ -0,0 +1,365 @@
+<template>
+  <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
+    <div class="p-1 v-flex">
+      <h6 class="v-search-title">
+        {{ $t("ID_DRILL_DOWN_NUMBER_TASKS_PROCESS") }}
+      </h6>
+      <div>
+        <BreadCrumb
+          :options="breadCrumbs.data"
+          :settings="settingsBreadcrumbs"
+        />
+        <ProcessPopover
+          :options="optionsProcesses"
+          target="pm-task-process"
+          ref="pm-task-process"
+          @onUpdateColumnSettings="onUpdateColumnSettings"
+        />
+        <div class="vp-width-p40 vp-inline-block">
+          <multiselect
+            v-model="category"
+            :options="optionsCategory"
+            :searchable="false"
+            :close-on-select="true"
+            :show-labels="false"
+            track-by="id"
+            label="name"
+            @select="changeOption"
+          ></multiselect>
+        </div>
+        <label class="vp-inline-block vp-padding-l20">{{
+          $t("ID_TOP")
+        }}</label>
+        <div class="vp-inline-block">
+          <b-form-checkbox
+            v-model="top"
+            name="check-button"
+            @change="changeOption"
+            switch
+          >
+          </b-form-checkbox>
+        </div>
+        <div class="vp-inline-block vp-right vp-padding-r40">
+          <h4
+            class="v-search-title"
+            @click="showProcessesPopover"
+            id="pm-task-process"
+          >
+            <i class="fas fa-cog"></i>
+          </h4>
+        </div>
+      </div>
+      <apexchart
+        ref="LevelOneChart"
+        :width="width"
+        :options="optionsBar"
+        :series="seriesBar"
+      ></apexchart>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+import Api from "../../api/index";
+import BreadCrumb from "../../components/utils/BreadCrumb.vue";
+import ProcessPopover from "./ProcessPopover.vue";
+import Multiselect from "vue-multiselect";
+
+export default {
+  name: "VueChartLvOne",
+  mixins: [],
+  components: {
+    Multiselect,
+    BreadCrumb,
+    ProcessPopover,
+  },
+  props: ["data", "breadCrumbs"],
+  data() {
+    let that = this;
+    return {
+      category: null,
+      dataProcesses: null, //Data API processes
+      settingsBreadcrumbs: [
+        {
+          class: "fas fa-info-circle",
+          tooltip: this.$t("ID_TASK_RISK_LEVEL1_INFO"),
+          onClick() {},
+        },
+      ],
+      optionsCategory: [],
+      optionsProcesses: [],
+      selectedProcesses: [],
+      top: false,
+      width: 0,
+      totalCases: [],
+      currentSelection: null,
+      seriesBar: [
+        {
+          data: [],
+        },
+      ],
+      optionsBar: {
+        chart: {
+          type: "bar",
+          id: "LevelOneChart",
+          toolbar: {
+            show: false,
+          },
+          events: {
+            legendClick: function (chartContext, seriesIndex, config) {
+              that.currentSelection = that.totalCases[seriesIndex];
+              that.$emit("updateDataLevel", {
+                id: that.currentSelection["PRO_ID"],
+                name: that.currentSelection["PRO_TITLE"],
+                level: 1,
+                data: that.currentSelection,
+              });
+            },
+          },
+        },
+        plotOptions: {
+          bar: {
+            barHeight: "100%",
+            distributed: true,
+            horizontal: true,
+          },
+        },
+        legend: {
+          position: "top",
+        },
+        colors: ["#33b2df", "#546E7A", "#d4526e", "#13d8aa"],
+        dataLabels: {
+          enabled: false,
+        },
+        xaxis: {
+          categories: [],
+        },
+        tooltip: {
+          x: {
+            show: false,
+          },
+          y: {
+            title: {
+              formatter: function () {
+                return "";
+              },
+            },
+          },
+        },
+      },
+    };
+  },
+  created() {},
+  mounted() {
+    this.getBodyHeight();
+    this.getCategories();
+    this.getProcesses();
+  },
+  watch: {},
+  computed: {},
+  updated() {},
+  beforeCreate() {},
+  methods: {
+    /**
+     * Return the height for Vue Card View body
+     */
+    getBodyHeight() {
+      this.width = window.innerHeight;
+    },
+    /**
+     * Get Categories form API
+     */
+    getCategories() {
+      let that = this;
+      Api.filters
+        .categories()
+        .then((response) => {
+          that.formatDataCategories(response.data);
+        })
+        .catch((e) => {
+          console.error(err);
+        });
+    },
+    /**
+     * Get Processes form API
+     */
+    getProcesses() {
+      let that = this;
+      Api.filters
+        .processList("")
+        .then((response) => {
+          that.formatDataProcesses(response.data);
+          that.changeOption({
+            id: 0,
+          });
+        })
+        .catch((e) => {
+          console.error(err);
+        });
+    },
+    /**
+     * Format categories for multiselect
+     * @param {*} data
+     */
+    formatDataCategories(data) {
+      let array = [];
+      array.push({
+        name: this.$t("ID_PROCESS_NONE_CATEGORY"),
+        id: "0",
+      });
+      _.each(data, (el) => {
+        array.push({ name: el["CATEGORY_NAME"], id: el["CATEGORY_ID"] });
+      });
+      this.optionsCategory = array;
+      this.category = array[0];
+    },
+    /**
+     * Format processes for popover
+     * @param {*} data
+     */
+    formatDataProcesses(data) {
+      let sels = [],
+        labels = [],
+        array = [];
+
+      _.each(data, (el) => {
+        array.push({ value: el["PRO_TITLE"], key: el["PRO_ID"] });
+        sels.push(el["PRO_ID"]);
+        labels;
+      });
+      this.optionsProcesses = array;
+      this.selectedProcesses = sels;
+
+      //Update the labels
+      this.dataProcesses = data;
+      this.updateLabels(data);
+    },
+    /**
+     * Change the options in TOTAL CASES BY PROCESS
+     * @param {*} option
+     */
+    changeOption(option) {
+      let that = this,
+        dt = {};
+      if (this.data.length > 0) {
+        dt = {
+          category: option.id,
+          caseList: this.data[0].id.toLowerCase(),
+          processes: this.selectedProcesses,
+          top: this.top,
+        };
+        Api.process
+          .totalCasesByProcess(dt)
+          .then((response) => {
+            that.totalCases = response.data;
+            that.formatTotalCases(response.data);
+          })
+          .catch((e) => {
+            console.error(err);
+          });
+      }
+    },
+    /**
+     * Show the processes popover
+     */
+    showProcessesPopover() {
+      this.$root.$emit("bv::show::popover", "pm-task-process");
+      this.$refs["pm-task-process"].setOptions(this.optionsProcesses);
+      this.$refs["pm-task-process"].setSelectedOptions(this.selectedProcesses);
+    },
+    /**
+     * Format response form BE to chart
+     * @param {*} data
+     */
+    formatTotalCases(data) {
+      let serie = [],
+        labels = [];
+      _.each(data, (el) => {
+        serie.push(el["TOTAL"]);
+        labels.push(el["PRO_TITLE"]);
+      });
+
+      this.$refs["LevelOneChart"].updateOptions({ labels: labels });
+      this.$apexcharts.exec("LevelOneChart", "updateSeries", [
+        {
+          data: serie,
+        },
+      ]);
+    },
+    /**
+     * Update list processes in chart
+     * @param {*} data
+     */
+    onUpdateColumnSettings(data) {
+      let res;
+      this.selectedProcesses = data;
+      res = _.intersectionBy(this.totalCases, data, (el) => {
+        if (_.isNumber(el)) {
+          return el;
+        }
+        if (_.isObject(el) && el["PRO_ID"]) {
+          return el["PRO_ID"];
+        }
+      });
+      this.formatTotalCases(res);
+    },
+    /**
+     * Update labels in chart
+     * @param {*} processes
+     */
+    updateLabels(processes) {
+      let labels = [];
+      _.each(processes, (el) => {
+        labels.push(el["PRO_TITLE"]);
+      });
+      this.$refs["LevelOneChart"].updateOptions({ labels: labels });
+    },
+    /**
+     * UPdate serie in chart
+     * @param {*} processes
+     */
+    updateSerie(processes) {
+      let labels = [];
+      _.each(processes, (el) => {
+        labels.push(el["TOTAL"]);
+      });
+      this.$refs["LevelOneChart"].updateOptions({ labels: labels });
+    },
+    /**
+     * Force update view when update level
+     */
+    forceUpdateView() {
+      this.changeOption({
+        id: 0,
+      });
+    },
+  },
+};
+</script>
+<style>
+.vp-task-metrics-label {
+  display: inline-block;
+}
+
+.vp-width-p40 {
+  width: 40%;
+}
+
+.vp-inline-block {
+  display: inline-block;
+}
+
+.vp-padding-l20 {
+  padding-left: 20px;
+}
+
+.vp-padding-r40 {
+  padding-right: 40px;
+}
+
+.vp-right {
+  float: right;
+}
+</style>
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
\ No newline at end of file
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue b/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
new file mode 100644
index 000000000..ed5f662be
--- /dev/null
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvThree.vue
@@ -0,0 +1,493 @@
+<template>
+  <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
+    <div class="p-1 v-flex">
+      <h6 class="v-search-title">{{$t("ID_DRILL_DOWN_RISK_MATRIX")}}</h6>
+      <div>
+        <BreadCrumb
+          :options="breadCrumbs.data"
+          :settings="settingsBreadcrumbs"
+        />
+        <div class="vp-width-p30 vp-inline-block">
+          <b-form-datepicker
+            id="date-from"
+            :date-format-options="{
+              year: '2-digit',
+              month: '2-digit',
+              day: '2-digit',
+            }"
+            size="sm"
+            :placeholder="$t('ID_DELEGATE_DATE_FROM')"
+            v-model="dateFrom"
+            @input="changeOption"
+          ></b-form-datepicker>
+        </div>
+        <div class="vp-width-p30 vp-inline-block">
+          <b-form-datepicker
+            id="date-to"
+            size="sm"
+            :date-format-options="{
+              year: '2-digit',
+              month: '2-digit',
+              day: '2-digit',
+            }"
+            :placeholder="$t('ID_DELEGATE_DATE_TO')"
+            v-model="dateTo"
+            @input="changeOption"
+          ></b-form-datepicker>
+        </div>
+        <div class="vp-inline-block">
+          <label class="form-label">{{
+            $t("ID_TOP")
+          }}</label>
+        </div>
+        <div class="vp-inline-block">
+          <multiselect
+            v-model="size"
+            :options="sizeOptions"
+            :searchable="false"
+            :close-on-select="true"
+            :show-labels="false"
+            track-by="id"
+            label="name"
+            @input="changeOption"
+          ></multiselect>
+        </div>
+      </div>
+      <apexchart
+        ref="LevelThreeChart"
+        :width="width"
+        :options="options"
+        :series="series"
+      ></apexchart>
+      <div class="vp-width-p100">
+        <div class="vp-text-align-center" role="group">
+          <button
+            type="button"
+            @click="
+              riskType = 'ON_TIME';
+              changeOption();
+            "
+            class="btn vp-btn-success btn-sm"
+          >
+            On Time
+          </button>
+          <button
+            type="button"
+            @click="
+              riskType = 'AT_RISK';
+              changeOption();
+            "
+            class="btn vp-btn-warning btn-sm"
+          >
+            At Risk
+          </button>
+          <button
+            type="button"
+            @click="
+              riskType = 'OVERDUE';
+              changeOption();
+            "
+            class="btn vp-btn-danger btn-sm"
+          >
+            Overdue
+          </button>
+        </div>
+      </div>
+      <div class="vp-width-p100 vp-text-align-center">
+        <label class="vp-form-label">
+          {{ $t("ID_TODAY") }} : {{ dateNow }}
+        </label>
+      </div>
+      <ModalUnpauseCase ref="modal-unpause-case"></ModalUnpauseCase>
+      <ModalClaimCase ref="modal-claim-case"></ModalClaimCase>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+import Api from "../../api/index";
+import Multiselect from "vue-multiselect";
+import BreadCrumb from "../../components/utils/BreadCrumb.vue";
+import moment from "moment";
+import ModalUnpauseCase from "../modal/ModalUnpauseCase.vue";
+import ModalClaimCase from "../modal/ModalClaimCase.vue";
+
+export default {
+  name: "VueChartLvThree",
+  mixins: [],
+  components: {
+    Multiselect,
+    BreadCrumb,
+    ModalUnpauseCase,
+    ModalClaimCase,
+  },
+  props: ["data", "breadCrumbs"],
+  data() {
+    let that = this;
+    return {
+      currentSelection: null,
+      dateFrom: "",
+      dateTo: "",
+      dateNow: "",
+      size: { name: this.$t("ID_ALL"), id: "all" },
+      riskType: "ON_TIME",
+      settingsBreadcrumbs: [
+        {
+          class: "fas fa-info-circle",
+          tooltip: this.$t("ID_TASK_RISK_LEVEL3_INFO"),
+          onClick() {},
+        },
+      ],
+      sizeOptions: [
+        { name: this.$t("ID_ALL"), id: "all" },
+        { name: "5", id: "5" },
+        { name: "10", id: "10" },
+        { name: "15", id: "15" },
+        { name: "20", id: "20" },
+      ],
+      dataCasesByRisk: [],
+      width: 0,
+      series: [],
+      options: {
+        chart: {
+          height: 350,
+          type: "bubble",
+          zoom: {
+            enabled: true,
+            type: "xy",
+          },
+          id: "LevelThreeChart",
+          events: {
+            markerClick: function (event, chartContext, config) {
+              that.currentSelection = that.dataCasesByRisk[config.seriesIndex];
+              that.onClickCaseMarker(that.currentSelection);
+            },
+          },
+        },
+        legend: {
+          show: false,
+        },
+        dataLabels: {
+          enabled: true,
+          formatter: function (val, opt) {
+            if (that.dataCasesByRisk.length > 0) {
+              return that.dataCasesByRisk[opt["seriesIndex"]]["number_case"];
+            }
+            return "";
+          },
+          offsetX: 0,
+        },
+        xaxis: {
+          type: "datetime",
+        },
+        yaxis: {
+          tickAmount: 1,
+        },
+        tooltip: {
+          custom: function ({ series, seriesIndex, dataPointIndex, w }) {
+            return that.customTooltip(series, seriesIndex, dataPointIndex, w);
+          },
+        },
+      },
+    };
+  },
+  created() {},
+  mounted() {
+    this.getBodyHeight();
+  },
+  watch: {},
+  computed: {},
+  updated() {},
+  beforeCreate() {},
+  methods: {
+    /**
+     * Return the height for Vue Card View body
+     */
+    getBodyHeight() {
+      this.width = window.innerHeight * 0.95;
+    },
+    /**
+     * Change datepickers or radio button
+     */
+    changeOption() {
+      let that = this,
+        dt;
+      if (this.dateFrom && this.dateTo) {
+        dt = {
+          process: this.data[1].id,
+          caseList: this.data[0].id.toLowerCase(),
+          dateFrom: moment(this.dateFrom).format("DD/MM/YYYY"),
+          dateTo: moment(this.dateTo).format("DD/MM/YYYY"),
+          riskStatus: this.riskType,
+        };
+        this.size.id != "all" ? (dt["topCases"] = this.size.id) : null;
+        this.dateNow = moment().format("DD/MM/YYYY h:mm:ss a");
+        Api.process
+          .totalCasesByRisk(dt)
+          .then((response) => {
+            that.formatDataRange(response.data);
+          })
+          .catch((e) => {
+            console.error(err);
+          });
+      }
+    },
+    /**
+     * Format response fromn API
+     * @param {object} data
+     */
+    formatDataRange(data) {
+      let that = this,
+        serie = [];
+      this.dataCasesByRisk = data;
+      _.each(data, (el) => {
+        //Format the response to risk type Overdue/At risk/ On time
+        switch (that.riskType) {
+          case "OVERDUE":
+            serie.push({
+              name: el["number_case"].toString(),
+              data: [
+                [moment(el["due_date"]).toDate().getTime(), el["days"], 20],
+              ],
+            });
+            break;
+          case "AT_RISK":
+            serie.push({
+              name: el["number_case"].toString(),
+              data: [
+                [moment(el["delegated"]).toDate().getTime(), -el["days"], 20],
+              ],
+            });
+            break;
+          case "ON_TIME":
+            serie.push({
+              name: el["number_case"].toString(),
+              data: [
+                [moment(el["delegated"]).toDate().getTime(), -el["days"], 20],
+              ],
+            });
+            break;
+        }
+      });
+
+      this.updateApexchartAxis();
+      if (this.data[0].id.toLowerCase() == "draft") {
+        this.series = []; // Draft is empty
+      } else {
+        this.series = serie;
+      }
+    },
+    /**
+     * Update axis chart
+     */
+    updateApexchartAxis() {
+      switch (this.riskType) {
+        case "OVERDUE":
+          this.$refs["LevelThreeChart"].updateOptions({
+            yaxis: {
+              min: 0,
+            },
+            title: {
+              text: "Overdue days",
+            },
+          });
+          break;
+        case "AT_RISK":
+          this.$refs["LevelThreeChart"].updateOptions({
+            yaxis: {
+              max: 0,
+            },
+            title: {
+              text: "Days before being Overdue",
+            },
+          });
+          break;
+        case "ON_TIME":
+          this.$refs["LevelThreeChart"].updateOptions({
+            yaxis: {
+              max: 0,
+            },
+            title: {
+              text: "Days before being At-Risk",
+            },
+          });
+          break;
+      }
+    },
+    /**
+     * Create custom tooltip
+     */
+    customTooltip(series, seriesIndex, dataPointIndex, w) {
+      let obj = this.dataCasesByRisk[seriesIndex];
+      return `<div class="apexcharts-theme-light">
+                  <div class="apexcharts-tooltip-title" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
+                    ${"Number Case"} : ${obj["number_case"]}
+                  </div>
+                  <div class="apexcharts-tooltip-series-group apexcharts-active" style="order: 1; display: flex;">
+                  <div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;">
+                  <div class="apexcharts-tooltip-y-group">
+                    <span class="" style="background-color: #28a745;"></span>
+                    <span class="apexcharts-tooltip-text-y-label">Delegated</span> : <span class="apexcharts-tooltip-text-y-value">${
+                      obj["delegated"]
+                    }</span>
+                  </div>
+                   <div class="apexcharts-tooltip-y-group">
+                    <span class="" style="background-color: #28a745;"></span>
+                    <span class="apexcharts-tooltip-text-y-label">At Risk</span> : <span class="apexcharts-tooltip-text-y-value">${
+                      obj["at_risk"]
+                    }</span>
+                  </div>
+                   <div class="apexcharts-tooltip-y-group">
+                    <span class="" style="background-color: #28a745;"></span>
+                    <span class="apexcharts-tooltip-text-y-label">Due Date</span> : <span class="apexcharts-tooltip-text-y-value">${
+                      obj["due_date"]
+                    }</span>
+                  </div>
+                </div>
+              </div>
+            </div>`;
+    },
+    /**
+     * Open selected cases in the inbox
+     * @param {object} item
+     */
+    openCase(item) {
+      this.$parent.$parent.$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.$parent.$parent.$emit("onUpdatePage", "XCase");
+    },
+    /**
+     * Click in marker chart
+     * @param {object} selection
+     */
+    onClickCaseMarker(selection) {
+      let process = this.data[1].id,
+        caseList = this.data[0].id.toLowerCase();
+      switch (caseList) {
+        case "inbox":
+        case "draft":
+          this.openCase({
+            APP_UID: selection["app_uid"],
+            DEL_INDEX: selection["del_index"],
+            PRO_UID: process,
+            TAS_UID: selection["tas_uid"],
+          });
+          break;
+        case "paused":
+          this.showModalUnpauseCase({
+            APP_UID: selection["app_uid"],
+            DEL_INDEX: selection["del_index"],
+            PRO_UID: process,
+            TAS_UID: selection["tas_uid"],
+          });
+          break;
+        case "unassigned":
+          this.showModalClaimCase({
+            APP_UID: selection["app_uid"],
+            DEL_INDEX: selection["del_index"],
+            PRO_UID: process,
+            TAS_UID: selection["tas_uid"],
+          });
+          break;
+      }
+    },
+    /**
+     * Show modal unpause
+     * @param {object} item
+     */
+    showModalUnpauseCase(item) {
+      this.$refs["modal-unpause-case"].data = item;
+      this.$refs["modal-unpause-case"].show();
+    },
+    /**
+     * Claim case
+     * @param {object} item
+     */
+    showModalClaimCase(item) {
+      let that = this;
+      api.cases.open(_.extend({ ACTION: "unassigned" }, item)).then(() => {
+        api.cases.cases_open(_.extend({ ACTION: "todo" }, item)).then(() => {
+          that.$refs["modal-claim-case"].data = item;
+          that.$refs["modal-claim-case"].show();
+        });
+      });
+    },
+  },
+};
+</script>
+<style>
+.vp-task-metrics-label {
+  display: inline-block;
+}
+
+.vp-width-p30 {
+  width: 30%;
+}
+
+.vp-inline-block {
+  display: inline-block;
+}
+
+.vp-padding-l20 {
+  padding-left: 20px;
+}
+
+.vp-width-p100 {
+  width: 100%;
+}
+
+.vp-text-align-center {
+  text-align: center;
+}
+
+.vp-btn-success {
+  color: #fff;
+  background-color: #368b48;
+  border-color: #368b48;
+}
+.vp-btn-success:hover {
+  color: #fff;
+  background-color: #255a30;
+  border-color: #368b48;
+}
+
+.vp-btn-warning {
+  color: #fff;
+  background-color: #c99e11;
+  border-color: #a1831d;
+}
+.vp-btn-warning:hover {
+  color: #fff;
+  background-color: #886c0e;
+  border-color: #a1831d;
+}
+.vp-btn-danger {
+  color: #fff;
+  background-color: #b63b32;
+  border-color: #b63b32;
+}
+
+.vp-btn-danger:hover {
+  color: #fff;
+  background-color: #832923;
+  border-color: #b63b32;
+}
+
+.vp-form-label {
+  display: inline-block;
+  font-family: Helvetica, Arial, sans-serif;
+  text-anchor: start;
+  font-size: 14px;
+  font-weight: 900;
+  fill: rgb(15 17 18);
+  margin-top: 0.5rem;
+  color: #7d7f93;
+}
+</style>
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
\ No newline at end of file
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
new file mode 100644
index 000000000..73ab25e90
--- /dev/null
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvTwo.vue
@@ -0,0 +1,219 @@
+<template>
+  <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
+    <div class="p-1 v-flex">
+      <h6 class="v-search-title">{{$t("ID_DRILL_DOWN_NUMBER_TASKS_PROCESS_BY_TASK")}}</h6>
+      <div>
+        <BreadCrumb
+          :options="breadCrumbs.data"
+          :settings="settingsBreadcrumbs"
+        />
+        <div class="vp-width-p30 vp-inline-block">
+          <b-form-datepicker
+            id="date-from"
+            :date-format-options="{
+              year: '2-digit',
+              month: '2-digit',
+              day: '2-digit',
+            }"
+            size="sm"
+            :placeholder="$t('ID_DELEGATE_DATE_FROM')"
+            v-model="dateFrom"
+            @input="changeOption"
+          ></b-form-datepicker>
+        </div>
+        <div class="vp-width-p30 vp-inline-block">
+          <b-form-datepicker
+            id="date-to"
+            size="sm"
+            :date-format-options="{
+              year: '2-digit',
+              month: '2-digit',
+              day: '2-digit',
+            }"
+            :placeholder="$t('ID_DELEGATE_DATE_TO')"
+            v-model="dateTo"
+            @input="changeOption"
+          ></b-form-datepicker>
+        </div>
+        <div class="vp-inline-block">
+          <b-form-radio-group
+            id="btn-radios"
+            v-model="period"
+            :options="periodOptions"
+            button-variant="outline-secondary"
+            size="sm"
+            name="radio-btn-outline"
+            buttons
+            @change="changeOption"
+          ></b-form-radio-group>
+        </div>
+      </div>
+      <apexchart
+        ref="LevelTwoChart"
+        :width="width"
+        :options="options"
+        :series="series"
+      ></apexchart>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+import Api from "../../api/index";
+import Multiselect from "vue-multiselect";
+import BreadCrumb from "../../components/utils/BreadCrumb.vue";
+import moment from "moment";
+export default {
+  name: "VueChartLvTwo",
+  mixins: [],
+  components: {
+    Multiselect,
+    BreadCrumb,
+  },
+  props: ["data", "breadCrumbs"],
+  data() {
+    let that = this;
+    return {
+      dateFrom: "",
+      dateTo: "",
+      period: "",
+      periodOptions: [
+        { text: this.$t("ID_DAY"), value: "day" },
+        { text: this.$t("ID_MONTH"), value: "month" },
+        { text: this.$t("ID_YEAR"), value: "year" },
+      ],
+      settingsBreadcrumbs: [
+        {
+          class: "fas fa-info-circle",
+          tooltip: this.$t("ID_TASK_RISK_LEVEL2_INFO"),
+          onClick() {},
+        },
+      ],
+      dataCasesByRange: [],
+      width: 0,
+      options: {
+        chart: {
+          type: "area",
+          zoom: {
+            enabled: false,
+          },
+          id: "LevelTwoChart",
+          events: {
+            markerClick: function (event, chartContext, config) {
+              that.currentSelection = that.dataCasesByRange[config.seriesIndex];
+              that.$emit("updateDataLevel", {
+                id: that.currentSelection["PRO_ID"],
+                name: that.currentSelection["PRO_TITLE"],
+                level: 2,
+                data: null,
+              });
+            },
+          },
+        },
+        dataLabels: {
+          enabled: false,
+        },
+        stroke: {
+          curve: "smooth",
+        },
+        xaxis: {
+          type: "datetime",
+        },
+        tooltip: {
+          fixed: {
+            enabled: false,
+            position: "topRight",
+          },
+        },
+      },
+      series: [],
+    };
+  },
+  created() {},
+  mounted() {
+    this.getBodyHeight();
+  },
+  watch: {},
+  computed: {},
+  updated() {},
+  beforeCreate() {},
+  methods: {
+    /**
+     * Return the height for Vue Card View body
+     */
+    getBodyHeight() {
+      this.width = window.innerHeight;
+    },
+    /**
+     * Change datepickers or radio button
+     */
+    changeOption() {
+      let that = this,
+        dt;
+      if (this.dateFrom && this.dateTo && this.period) {
+        dt = {
+          processId: this.data[1].id,
+          caseList: this.data[0].id.toLowerCase(),
+          dateFrom: moment(this.dateFrom).format("DD/MM/YYYY"),
+          dateTo: moment(this.dateTo).format("DD/MM/YYYY"),
+          groupBy: this.period,
+        };
+        Api.process
+          .totalCasesByRange(dt)
+          .then((response) => {
+            that.formatDataRange(response.data);
+          })
+          .catch((e) => {
+            console.error(e);
+          });
+      }
+    },
+    /**
+     * Format response from API
+     * @param {object} data
+     */
+    formatDataRange(data) {
+      let labels = [],
+        serie = [];
+
+      this.dataCasesByRange = data;
+      _.each(data, (el) => {
+        serie.push(el["TOTAL"]);
+        labels.push(el["dateGroup"]);
+      });
+      this.$refs["LevelTwoChart"].updateOptions({
+        labels: labels,
+        title: {
+          text: this.data[0]["PRO_TITLE"],
+          align: "left",
+        },
+      });
+      this.$apexcharts.exec("LevelTwoChart", "updateSeries", [
+        {
+          name: this.data[0]["PRO_TITLE"],
+          data: serie,
+        },
+      ]);
+    },
+  },
+};
+</script>
+<style>
+.vp-task-metrics-label {
+  display: inline-block;
+}
+
+.vp-width-p30 {
+  width: 30%;
+}
+
+.vp-inline-block {
+  display: inline-block;
+}
+
+.vp-padding-l20 {
+  padding-left: 20px;
+}
+</style>
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
\ No newline at end of file
diff --git a/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
new file mode 100644
index 000000000..82e9f02b5
--- /dev/null
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvZero.vue
@@ -0,0 +1,248 @@
+<template>
+  <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
+    <div class="p-1 v-flex">
+      <h6 class="v-search-title">{{$t("ID_DRILL_DOWN_NUMBER_TASKS")}}</h6>
+      <BreadCrumb :options="breadCrumbs.data" :settings="settingsBreadcrumbs" />
+      <apexchart
+        v-show="typeView === 'donut'"
+        ref="apexchart1"
+        :width="width"
+        :options="optionsDonut"
+        :series="seriesDonut"
+      ></apexchart>
+      <apexchart
+        v-show="typeView === 'bar'"
+        ref="apexchart2"
+        :width="width"
+        :options="optionsBar"
+        :series="seriesBar"
+      ></apexchart>
+
+      <div class="row">
+        <div class="col-sm vp-align-right">
+          <button
+            @click="changeView('donut')"
+            type="button"
+            class="btn btn-primary"
+          >
+            <i class="fas fa-chart-pie"></i
+            ><span class="vp-padding-l10">{{ $t("ID_VIEW") }}</span>
+          </button>
+        </div>
+        <div class="col-sm">
+          <button
+            @click="changeView('bar')"
+            type="button"
+            class="btn btn-primary"
+          >
+            <i class="fas fa-chart-bar"></i
+            ><span class="vp-padding-l10">{{ $t("ID_VIEW") }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+import Api from "../../api/index";
+import BreadCrumb from "./../../components/utils/BreadCrumb.vue";
+export default {
+  name: "VueChartLvZero",
+  mixins: [],
+  components: { BreadCrumb },
+  props: ["breadCrumbs"],
+  data() {
+    let that = this;
+    return {
+      typeView: "donut",
+      width: 0,
+      data: [],
+      currentSelection: null,
+      seriesDonut: [],
+      settingsBreadcrumbs: [
+        {
+          class: "fas fa-info-circle",
+          tooltip: this.$t("ID_TASK_RISK_LEVEL0_INFO"),
+          onClick() {},
+        },
+      ],
+      optionsDonut: {
+        labels: [
+          this.$i18n.t("ID_INBOX"),
+          this.$i18n.t("ID_DRAFT"),
+          this.$i18n.t("ID_PAUSED"),
+          this.$i18n.t("ID_UNASSIGNED"),
+        ],
+        chart: {
+          id: "apexchart1",
+          type: "donut",
+          events: {
+            legendClick: function (chartContext, seriesIndex, config) {
+              that.currentSelection = that.data[seriesIndex];
+              that.$emit("updateDataLevel", {
+                id: that.currentSelection["List Name"],
+                name: that.currentSelection["List Name"],
+                level: 0,
+                data: that.currentSelection,
+              });
+            },
+          },
+        },
+        legend: {
+          position: "top",
+          offsetY: 0,
+        },
+      },
+      seriesBar: [
+        {
+          data: [400, 430, 448, 470],
+        },
+      ],
+      optionsBar: {
+        chart: {
+          type: "bar",
+          id: "apexchart2",
+          toolbar: {
+            show: false,
+          },
+          events: {
+            legendClick: function (chartContext, seriesIndex, config) {
+              that.currentSelection = that.data[seriesIndex];
+              that.$emit("updateDataLevel", {
+                id: that.currentSelection["List Name"],
+                name: that.currentSelection["List Name"],
+                level: 0,
+                data: that.currentSelection,
+              });
+            },
+          },
+        },
+        plotOptions: {
+          bar: {
+            barHeight: "100%",
+            distributed: true,
+          },
+        },
+        legend: {
+          position: "top",
+          offsetY: 0,
+        },
+        colors: ["#33b2df", "#546E7A", "#d4526e", "#13d8aa"],
+        dataLabels: {
+          enabled: false,
+        },
+        xaxis: {
+          categories: [
+            this.$i18n.t("ID_INBOX"),
+            this.$i18n.t("ID_DRAFT"),
+            this.$i18n.t("ID_PAUSED"),
+            this.$i18n.t("ID_UNASSIGNED"),
+          ],
+        },
+        tooltip: {
+          x: {
+            show: false,
+          },
+          y: {
+            title: {
+              formatter: function () {
+                return "";
+              },
+            },
+          },
+        },
+      },
+    };
+  },
+  created() {},
+  mounted() {
+    this.getBodyHeight();
+    this.getData();
+  },
+  watch: {},
+  computed: {},
+  updated() {},
+  beforeCreate() {},
+  methods: {
+    /**
+     * Return the height for Vue Card View body
+     */
+    getBodyHeight() {
+      this.width = window.innerHeight * 0.8;
+    },
+    /**
+     * Change view - donut/bar
+     */
+    changeView(view) {
+      this.typeView = view;
+      this.getData();
+    },
+    /**
+     * Get data from rest API
+     */
+    getData() {
+      let that = this;
+      Api.cases
+        .listTotalCases()
+        .then((response) => {
+          that.formatData(response.data);
+        })
+        .catch((response) => {});
+    },
+    /**
+     * Format the data for chart
+     */
+    formatData(data) {
+      let l = [],
+        c = [],
+        s = [];
+      _.each(data, (el) => {
+        l.push(el["List Name"]);
+        s.push(el["Total"]);
+        if (el["Color"] == "green") {
+          c.push("#179a6e");
+        }
+        if (el["Color"] == "yellow") {
+          c.push("#feb019");
+        }
+        if (el["Color"] == "blue") {
+          c.push("#008ffb");
+        }
+        if (el["Color"] == "gray") {
+          c.push("#8f99a0");
+        }
+      });
+      this.data = data;
+      this.seriesDonut = s;
+      this.seriesBar = [
+        {
+          data: s,
+        },
+      ];
+      this.$refs["apexchart1"].updateOptions({ labels: l, colors: c });
+      this.$refs["apexchart2"].updateOptions({ labels: l, colors: c });
+      this.$apexcharts.exec("apexchart1", "updateSeries", s);
+      this.$apexcharts.exec("apexchart2", "updateSeries", [
+        {
+          data: s,
+        },
+      ]);
+    },
+  },
+};
+</script>
+<style>
+.vp-center {
+  text-align: center;
+}
+
+.vp-align-right {
+  text-align: right;
+}
+
+.vp-padding-l10 {
+  padding-left: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/home/TaskMetrics/VueCharts.vue b/resources/assets/js/home/TaskMetrics/VueCharts.vue
new file mode 100644
index 000000000..063ff49c2
--- /dev/null
+++ b/resources/assets/js/home/TaskMetrics/VueCharts.vue
@@ -0,0 +1,157 @@
+<template>
+  <div id="v-pm-charts" ref="v-pm-charts" class="v-pm-charts vp-inline-block">
+    <vue-chart-lv-zero
+      v-show="level === 0"
+      @updateDataLevel="updateDataLevel"
+      :breadCrumbs="dataBreadCrumbs()"
+    />
+    <vue-chart-lv-one
+      :key="key1"
+      v-show="level === 1"
+      :data="data"
+      @onChangeLevel="onChangeLevel"
+      @updateDataLevel="updateDataLevel"
+      :breadCrumbs="dataBreadCrumbs()"
+    />
+    <vue-chart-lv-two
+      :key="key2"
+      v-show="level === 2"
+      :data="data"
+      @onChangeLevel="onChangeLevel"
+      @updateDataLevel="updateDataLevel"
+      :breadCrumbs="dataBreadCrumbs()"
+    />
+    <vue-chart-lv-three
+      :key="key3"
+      v-show="level === 3"
+      :data="data"
+      @onChangeLevel="onChangeLevel"
+      :breadCrumbs="dataBreadCrumbs()"
+    />
+  </div>
+</template>
+
+<script>
+import VueChartLvZero from "./VueChartLvZero.vue";
+import VueChartLvOne from "./VueChartLvOne.vue";
+import VueChartLvTwo from "./VueChartLvTwo.vue";
+import VueChartLvThree from "./VueChartLvThree.vue";
+
+export default {
+  name: "VueCharts",
+  mixins: [],
+  components: {
+    VueChartLvZero,
+    VueChartLvOne,
+    VueChartLvTwo,
+    VueChartLvThree,
+  },
+  props: [],
+  data() {
+    let that = this;
+    return {
+      level: 0,
+      key1: 1,
+      key2: 1,
+      key3: 1,
+      data: [],
+      settingsBreadCrumbs: [
+        {
+          class: "fas fa-info-circle",
+          onClick() {},
+        },
+      ],
+    };
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  computed: {},
+  updated() {},
+  beforeCreate() {},
+  methods: {
+    /**
+     * Set data level 0
+     */
+    updateDataLevel(data) {
+      this.data.push(data);
+      this.level = data.level + 1;
+      this.$emit("onChangeLevel", data.level + 1);
+      this.updateKey();
+    },
+    updateKey() {
+      switch (this.level) {
+        case 0:
+          break;
+        case 1:
+          this.key1++;
+          break;
+        case 2:
+          this.key2++;
+          break;
+        case 3:
+          this.key3++;
+          break;
+      }
+    },
+    /**
+     * Format data to vue charts any level
+     */
+    formatData() {
+      return {
+        level: this.level,
+        data: this.data,
+      };
+    },
+    /**
+     * Change level with changes in data
+     * @param {object} lv
+     */
+    onChangeLevel(lv) {
+      _.remove(this.data, function (n) {
+        return n.level >= lv;
+      });
+      this.level = lv;
+      this.$emit("onChangeLevel", this.level);
+    },
+    /**
+     * Format data for data beadcrumbs
+     */
+    dataBreadCrumbs() {
+      let res = [],
+        that = this,
+        index = 0;
+      _.each(this.data, (el) => {
+        if (index <= that.level && el.data) {
+          res.push({
+            label: el.name,
+            onClick() {
+              that.onChangeLevel(el.level);
+            },
+          });
+        }
+      });
+      res.push({
+        label: this.$t("ID_SELECT"),
+        onClick() {},
+      });
+      switch (this.level) {
+        case 0:
+          return {
+            data: res,
+            settings: this.settingsBreadCrumbs,
+          };
+          break;
+        default:
+          return {
+            data: res,
+            settings: this.settingsBreadCrumbs,
+          };
+          break;
+      }
+    }
+  },
+};
+</script>
+<style>
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/home/TaskMetrics/defaultMixins.js b/resources/assets/js/home/TaskMetrics/defaultMixins.js
new file mode 100644
index 000000000..2481bf105
--- /dev/null
+++ b/resources/assets/js/home/TaskMetrics/defaultMixins.js
@@ -0,0 +1,16 @@
+import _ from "lodash";
+import api from "../../api/index";
+export default {
+  data() {
+    let that = this;
+    return {
+      newCase: {
+        title: this.$i18n.t("ID_NEW_CASE"),
+        class: "btn-success",
+        onClick: () => {
+          this.$refs["newRequest"].show();
+        },
+      },
+    }
+  }
+}
\ No newline at end of file
diff --git a/resources/assets/js/home/main.js b/resources/assets/js/home/main.js
index 1f35d38a2..eaf91b5d1 100644
--- a/resources/assets/js/home/main.js
+++ b/resources/assets/js/home/main.js
@@ -11,9 +11,13 @@ import Sortable from 'sortablejs';
 import "@fortawesome/fontawesome-free/css/all.css";
 import 'bootstrap/dist/css/bootstrap-grid.css';
 import 'bootstrap/dist/css/bootstrap.min.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css';
+import VueApexCharts from 'vue-apexcharts'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 import Home from "./Home";
+
+Vue.use(VueApexCharts);
 Vue.use(VueRouter);
 Vue.use(VueSidebarMenu);
 Vue.use(BootstrapVue);
@@ -26,9 +30,12 @@ Vue.use(ServerTable, {}, false, 'bootstrap3', {
 });
 Vue.use(ClientTable, {}, false, 'bootstrap3', {});
 Vue.component('settings-popover', SettingsPopover);
+Vue.component('apexchart', VueApexCharts);
+
 window.ProcessMaker = {
     apiClient: require('axios')
 };
+
 window.ProcessMaker.pluginBase = "/sysworkflow/en/neoclassic/viena/index.php";
 window.ProcessMaker.apiClient.defaults.baseURL = '/sysworkflow/en/neoclassic/viena/index.php/api/';
 window.ProcessMaker.SYS_SYS = "workflow";
diff --git a/resources/assets/js/home/modal/ModalClaimCase.vue b/resources/assets/js/home/modal/ModalClaimCase.vue
index 59267d840..805e320d2 100644
--- a/resources/assets/js/home/modal/ModalClaimCase.vue
+++ b/resources/assets/js/home/modal/ModalClaimCase.vue
@@ -30,6 +30,8 @@
 
 <script>
 import api from "./../../api/index";
+import eventBus from "../EventBus/eventBus";
+
 export default {
   name: "ModalClaimCase",
   components: {},
@@ -57,14 +59,15 @@ export default {
       api.cases.claim(this.data).then((response) => {
         if (response.status === 200) {
           that.$refs["modal-claim-case"].hide();
-          that.$parent.$emit("onUpdateDataCase", {
+          //TODO Trigger onUpdateDataCase
+          eventBus.$emit("home-update-datacase", {
             APP_UID: this.data.APP_UID,
             DEL_INDEX: this.data.DEL_INDEX,
             PRO_UID: this.data.PRO_UID,
             TAS_UID: this.data.TAS_UID,
             ACTION: "todo",
           });
-          that.$parent.$emit("onUpdatePage", "XCase");
+          eventBus.$emit("home-update-page", "XCase");
         }
       });
     },
diff --git a/resources/assets/js/home/modal/ModalUnpauseCase.vue b/resources/assets/js/home/modal/ModalUnpauseCase.vue
index 02065151a..a74db61b8 100644
--- a/resources/assets/js/home/modal/ModalUnpauseCase.vue
+++ b/resources/assets/js/home/modal/ModalUnpauseCase.vue
@@ -55,7 +55,9 @@ export default {
       api.cases.unpause(this.data).then((response) => {
         if (response.statusText == "OK") {
           that.$refs["modal-unpause-case"].hide();
-          that.$parent.$refs["vueTable"].getData();
+          if (that.$parent.$refs["vueTable"]) { // TODO this component should be return a event to parent to code in the parent
+            that.$parent.$refs["vueTable"].getData();
+          }
         }
       });
     },
diff --git a/workflow/engine/content/translations/english/processmaker.en.po b/workflow/engine/content/translations/english/processmaker.en.po
index 7cb1eb9de..fb55ae2d0 100755
--- a/workflow/engine/content/translations/english/processmaker.en.po
+++ b/workflow/engine/content/translations/english/processmaker.en.po
@@ -53053,4 +53053,70 @@ msgstr "Send email to participants"
 # LABEL/ID_TRYING_CANCEL
 #: LABEL/ID_TRYING_CANCEL
 msgid "You are tying to cancel the current case. Please be aware this action cannot be undone"
-msgstr "You are tying to cancel the current case. Please be aware this action cannot be undone"
\ No newline at end of file
+msgstr "You are tying to cancel the current case. Please be aware this action cannot be undone"
+
+# TRANSLATION
+# LABEL/ID_TASK_RISK_LEVEL0_INFO
+#: LABEL/ID_TASK_RISK_LEVEL0_INFO
+msgid "Select a task status option to drill down by status for all processes. Then view can be changed as pie or bar chart."
+msgstr "Select a task status option to drill down by status for all processes. Then view can be changed as pie or bar chart."
+
+# TRANSLATION
+# LABEL/ID_TASK_RISK_LEVEL1_INFO
+#: LABEL/ID_TASK_RISK_LEVEL1_INFO
+msgid "Select the 'Drill' option of a Process in the Chart, to Drill Down By a Range of Dates listing the number of tasks By Task Status of the Process, or use the 'Data' option to open the Task List displaying all Tasks of the Process and Status"
+msgstr "Select the 'Drill' option of a Process in the Chart, to Drill Down By a Range of Dates listing the number of tasks By Task Status of the Process, or use the 'Data' option to open the Task List displaying all Tasks of the Process and Status"
+
+# TRANSLATION
+# LABEL/ID_TASK_RISK_LEVEL2_INFO
+#: LABEL/ID_TASK_RISK_LEVEL2_INFO
+msgid "Select the Drill option to have a Risk Matrix of the tasks or select the Data option to open the Task Folder listing all Tasks of the Process status by a range of date"
+msgstr "Select the Drill option to have a Risk Matrix of the tasks or select the Data option to open the Task Folder listing all Tasks of the Process status by a range of date"
+
+# TRANSLATION
+# LABEL/ID_TASK_RISK_LEVEL3_INFO
+#: LABEL/ID_TASK_RISK_LEVEL3_INFO
+msgid "By selecting the task will be open automatically if the task is Inbox or Draft"
+msgstr "By selecting the task will be open automatically if the task is Inbox or Draft"
+
+# TRANSLATION
+# LABEL/ID_LEVEL
+#: LABEL/ID_LEVEL
+msgid "Level"
+msgstr "Level"
+
+# TRANSLATION
+# LABEL/ID_DRILL_DOWN_NAVIGATOR
+#: LABEL/ID_DRILL_DOWN_NAVIGATOR
+msgid "Drill Down Navigator"
+msgstr "Drill Down Navigator"
+
+# TRANSLATION
+# LABEL/ID_DRILL_DOWN_NUMBER_TASKS
+#: LABEL/ID_DRILL_DOWN_NUMBER_TASKS
+msgid "Number of tasks per Task Status"
+msgstr "Number of tasks per Task Status"
+
+# TRANSLATION
+# LABEL/ID_DRILL_DOWN_NUMBER_TASKS_PROCESS
+#: LABEL/ID_DRILL_DOWN_NUMBER_TASKS_PROCESS
+msgid "Number of Tasks Status per Process"
+msgstr "Number of Tasks Status per Process"
+
+# TRANSLATION
+# LABEL/ID_DRILL_DOWN_NUMBER_TASKS_PROCESS_BY_TASK
+#: LABEL/ID_DRILL_DOWN_NUMBER_TASKS_PROCESS_BY_TASK
+msgid "Number of Tasks Status per Process by task status"
+msgstr "Number of Tasks Status per Process by task status"
+
+# TRANSLATION
+# LABEL/ID_DRILL_DOWN_RISK_MATRIX
+#: LABEL/ID_DRILL_DOWN_RISK_MATRIX
+msgid "Risk Matrix per Process by Task Status"
+msgstr "Risk Matrix per Process by Task Status"
+
+# TRANSLATION
+# LABEL/ID_TOP
+#: LABEL/ID_TOP
+msgid "Top"
+msgstr "Top"
\ No newline at end of file
diff --git a/workflow/engine/data/mysql/insert.sql b/workflow/engine/data/mysql/insert.sql
index 743394fc3..0a8e9bea7 100755
--- a/workflow/engine/data/mysql/insert.sql
+++ b/workflow/engine/data/mysql/insert.sql
@@ -57998,6 +57998,11 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_DOWN_TRIGGER','en','Down Trigger','2015-02-20') ,
 ( 'LABEL','ID_DRAFT','en','Draft','2014-01-15') ,
 ( 'LABEL','ID_DRIVE_HELP_ENABLE','en','When this option is enabled, all input, output and attached documents generated in your processes can be stored in Google Drive.','2016-01-05') ,
+( 'LABEL','ID_DRILL_DOWN_NAVIGATOR','en','Drill Down Navigator','2020-08-26') ,
+( 'LABEL','ID_DRILL_DOWN_NUMBER_TASKS','en','Number of tasks per Task Status','2020-08-26') ,
+( 'LABEL','ID_DRILL_DOWN_NUMBER_TASKS_PROCESS','en','Number of Tasks Status per Process','2020-08-26') ,
+( 'LABEL','ID_DRILL_DOWN_NUMBER_TASKS_PROCESS_BY_TASK','en','Number of Tasks Status per Process by task status','2020-08-26') ,
+( 'LABEL','ID_DRILL_DOWN_RISK_MATRIX','en','Risk Matrix per Process by Task Status','2020-08-26') ,
 ( 'LABEL','ID_DROP_DATABASE_EXISTS','en','Drop database if exists','2014-01-15') ,
 ( 'LABEL','ID_DROP_FILE_HERE','en','Drop file here...','2020-12-10') ,
 ( 'LABEL','ID_DUE_DATE','en','Due Date','2014-01-15') ,
@@ -58735,6 +58740,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_LEFT','en','left','2014-09-18') ,
 ( 'LABEL','ID_LEFT_MARGIN','en','Left Margin','2014-01-15') ,
 ( 'LABEL','ID_LESS_THAN','en','less than','2015-03-23') ,
+( 'LABEL','ID_LEVEL','en','Level','2021-08-26') ,
 ( 'LABEL','ID_LIBRARY_DOES_NOT_EXIST','en','The library with {0}: "{1}" does not exist.','2014-05-20') ,
 ( 'LABEL','ID_LIBRARY_FUNCTION_DOES_NOT_EXIST','en','The function with {0}: "{1}" does not exist in the library.','2014-05-20') ,
 ( 'LABEL','ID_LICENCE_LOGIN_TITLE','en','License','2015-12-07') ,
@@ -61316,6 +61322,10 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_TAS_EDIT','en','Tasks (Edit mode)','2014-01-15') ,
 ( 'LABEL','ID_TAS_UID_PARAMETER_IS_EMPTY','en','The TAS_UID parameter is empty.','2016-04-08') ,
 ( 'LABEL','ID_TAS_VIEW','en','Tasks (View mode)','2014-01-15') ,
+( 'LABEL','ID_TASK_RISK_LEVEL0_INFO','en','Select a task status option to drill down by status for all processes. Then view can be changed as pie or bar chart.','2020-08-26') ,
+( 'LABEL','ID_TASK_RISK_LEVEL1_INFO','en','Select the "Drill" option of a Process in the Chart, to Drill Down By a Range of Dates listing the number of tasks By Task Status of the Process, or use the "Data" option to open the Task List displaying all Tasks of the Process and Status','2020-08-26'),
+( 'LABEL','ID_TASK_RISK_LEVEL2_INFO','en','Select the Drill option to have a Risk Matrix of the tasks or select the Data option to open the Task Folder listing all Tasks of the Process status by a range of date','2020-08-26') ,
+( 'LABEL','ID_TASK_RISK_LEVEL3_INFO','en','By selecting the task will be open automatically if the task is Inbox or Draft','2020-08-26') ,
 ( 'LABEL','ID_TEMPLATES','en','Templates','2014-01-15') ,
 ( 'LABEL','ID_TEMPLATE_FILE_NOT_EXIST','en','Template file ''{FILE_TEMPLATE}'' does not exist.','2014-01-15') ,
 ( 'LABEL','ID_TEMPLATE_PARAMETER_EMPTY','en','The TEMPLATE parameter is empty.','2016-04-08') ,
@@ -61413,6 +61423,7 @@ INSERT INTO TRANSLATION (TRN_CATEGORY,TRN_ID,TRN_LANG,TRN_VALUE,TRN_UPDATE_DATE
 ( 'LABEL','ID_TOOLS','en','Tools','2014-01-15') ,
 ( 'LABEL','ID_TOO_MANY_REQUESTS','en','Upon configurations, you have reached the maximum number of files to upload.','2018-12-17') ,
 ( 'LABEL','ID_TOP_MARGIN','en','Top Margin','2014-01-15') ,
+( 'LABEL','ID_TOP','en','Top','2020-08-27') ,
 ( 'LABEL','ID_TOTAL_CASES','en','Total Cases','2014-01-15') ,
 ( 'LABEL','ID_TOTAL_CASES_REASSIGNED','en','Total Cases Reassigned','2014-01-15') ,
 ( 'LABEL','ID_TO_DO','en','To do','2014-01-15') ,