diff --git a/resources/assets/js/api/Cases.js b/resources/assets/js/api/Cases.js
index ea0003d1f..a64b57909 100644
--- a/resources/assets/js/api/Cases.js
+++ b/resources/assets/js/api/Cases.js
@@ -293,6 +293,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/Services.js b/resources/assets/js/api/Services.js
index 95bcdcedb..a5e857cee 100644
--- a/resources/assets/js/api/Services.js
+++ b/resources/assets/js/api/Services.js
@@ -67,5 +67,6 @@
     USERS: "/home/users",
     TASKS: "/home/tasks",
     CATEGORIES: "/home/categories",
-    DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}"
+    DEBUG_STATUS: "/home/process-debug-status?processUid={prj_uid}",
+    LIST_TOTAL_CASES: "/metrics/list-total-cases"
 };
\ No newline at end of file
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index ce8ab8d90..b3ad7bf01 100644
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -44,6 +44,7 @@ import Todo from "./Inbox/Todo.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";
@@ -68,7 +69,8 @@ export default {
         Paused,
         Unassigned,
         CaseDetail,
-        LegacyFrame
+        LegacyFrame,
+        TaskMetrics
     },
     data() {
         return {
diff --git a/resources/assets/js/home/Inbox/Todo.vue b/resources/assets/js/home/Inbox/Todo.vue
index 5ff1debd1..eb59216d2 100644
--- a/resources/assets/js/home/Inbox/Todo.vue
+++ b/resources/assets/js/home/Inbox/Todo.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="v-todo" ref="v-todo" class="v-container-todo">
     <button-fleft :data="newCase"></button-fleft>
+    <button type="button" @click="task" class="btn btn-primary">Primary</button>
     <modal-new-request ref="newRequest"></modal-new-request>
     <ModalPauseCase ref="modal-pause-case"></ModalPauseCase>
     <ModalReassignCase ref="modal-reassign-case"></ModalReassignCase>
diff --git a/resources/assets/js/home/Inbox/defaultMixins.js b/resources/assets/js/home/Inbox/defaultMixins.js
index 9440d2db8..0fe506578 100644
--- a/resources/assets/js/home/Inbox/defaultMixins.js
+++ b/resources/assets/js/home/Inbox/defaultMixins.js
@@ -172,6 +172,9 @@ export default {
       }
       this.columns = cols;
       this.random = _.random(0, 10000000000);
+    },
+    task(){
+      this.$emit("onUpdatePage", "task-metrics");
     }
   }
 }
\ No newline at end of file
diff --git a/resources/assets/js/home/TaskMetrics/DrillDown.vue b/resources/assets/js/home/TaskMetrics/DrillDown.vue
new file mode 100644
index 000000000..86165d4a1
--- /dev/null
+++ b/resources/assets/js/home/TaskMetrics/DrillDown.vue
@@ -0,0 +1,151 @@
+<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">Drill Down Navigator</h6>
+    </div>
+    <div
+      v-for="item in loadItems(data, index)"
+      :key="item.content"
+      class="vp-padding-b10"
+    >
+      <span class="vp-inline-block vp-padding-r10 vp-font-size-r1">
+        {{ item.label }}
+      </span>
+      <div class="vp-inline-block">
+        <span :class="item.classObject" @click="onClick(item)">
+          {{ item.content }}</span
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+export default {
+  name: "DrillDown",
+  mixins: [],
+  components: {},
+  props: [],
+  data() {
+    let that = this;
+    return {
+      index: 0,
+      classObject: {
+        "rounded-circle": true,
+        "v-pm-drill-down-number": true,
+        "vp-btn-secondary": true,
+        "btn-primary": false,
+        "vp-block": true,
+      },
+      data: [
+        {
+          label: "Level",
+          content: "1",
+          click() {},
+        },
+        {
+          label: "Level",
+          content: "2",
+          click() {},
+        },
+        {
+          label: "Level",
+          content: "3",
+          click() {},
+        },
+        {
+          label: "Level",
+          content: "4",
+          click() {},
+        },
+      ],
+    };
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  computed: {},
+  updated() {},
+  beforeCreate() {},
+  methods: {
+    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;
+      item.click(item);
+    },
+    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++;
+      });
+      console.log("aquiaaa");
+      return array;
+    },
+    changeItem(item) {},
+  },
+};
+</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;
+}
+</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..09357856d
--- /dev/null
+++ b/resources/assets/js/home/TaskMetrics/TaskMetrics.vue
@@ -0,0 +1,57 @@
+<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">
+      <h5 class="v-search-title">Task metrics</h5>
+    </div>
+    <modal-new-request ref="newRequest"></modal-new-request>
+    <div class="d-inline-flex p-2">
+      <vue-charts />
+      <div class="vp-6"></div>
+      <drill-down />
+    </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 {};
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  computed: {},
+  updated() {},
+  beforeCreate() {},
+  methods: {},
+};
+</script>
+<style>
+.v-pm-task-metrics {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  padding-left: 50px;
+  padding-right: 50px;
+}
+
+.vp-6 {
+  padding: 3.5rem !important;
+}
+</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..7d291bb9c
--- /dev/null
+++ b/resources/assets/js/home/TaskMetrics/VueChartLvOne.vue
@@ -0,0 +1,339 @@
+<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">Number of tasks per Task Status</h6>
+      <apexchart
+        v-show="typeView === 'donut'"
+        ref="apexchart1"
+        :width="width"
+        :options="chartOptions1"
+        :series="series1"
+      ></apexchart>
+      <apexchart
+        v-show="typeView === 'bar'"
+        ref="apexchart2"
+        :width="width"
+        :options="chartOptions2"
+        :series="series2"
+      ></apexchart>
+
+      <div class="row">
+        <div class="col-sm vp-center">
+          <button
+            @click="changeView('donut')"
+            type="button"
+            class="btn btn-primary"
+          >
+            <i class="fas fa-chart-pie"></i
+            ><span class="vp-padding-l10">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">View</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+import Api from "../../api/index";
+export default {
+  name: "VueChartLvOne",
+  mixins: [],
+  components: {},
+  props: [],
+  data() {
+    let that = this;
+    return {
+      typeView: "bar",
+      width: 0,
+      series1: [],
+      chartOptions1: {
+        labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
+        chart: {
+          id: "apexchart1",
+          type: "pie",
+        },
+      },
+      series2: [
+        {
+          name: "Inflation",
+          data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2],
+        },
+      ],
+      chartOptions2: {
+        chart: {
+          id: "apexchart2",
+          type: "bar",
+        },
+        plotOptions: {
+          bar: {
+            borderRadius: 10,
+            dataLabels: {
+              position: "top", // top, center, bottom
+            },
+          },
+        },
+        dataLabels: {
+          enabled: true,
+          formatter: function (val) {
+            return val + "%";
+          },
+          offsetY: -20,
+          style: {
+            fontSize: "12px",
+            colors: ["#304758"],
+          },
+        },
+
+        xaxis: {
+          categories: [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May",
+            "Jun",
+            "Jul",
+            "Aug",
+            "Sep",
+            "Oct",
+            "Nov",
+            "Dec",
+          ],
+          position: "top",
+          axisBorder: {
+            show: false,
+          },
+          axisTicks: {
+            show: false,
+          },
+          crosshairs: {
+            fill: {
+              type: "gradient",
+              gradient: {
+                colorFrom: "#D8E3F0",
+                colorTo: "#BED1E6",
+                stops: [0, 100],
+                opacityFrom: 0.4,
+                opacityTo: 0.5,
+              },
+            },
+          },
+          tooltip: {
+            enabled: true,
+          },
+        },
+        yaxis: {
+          axisBorder: {
+            show: false,
+          },
+          axisTicks: {
+            show: false,
+          },
+          labels: {
+            show: false,
+            formatter: function (val) {
+              return val + "%";
+            },
+          },
+        },
+        title: {
+          text: "Monthly Inflation in Argentina, 2002",
+          floating: true,
+          offsetY: 330,
+          align: "center",
+          style: {
+            color: "#444",
+          },
+        },
+      },
+    };
+  },
+  created() {},
+  mounted() {
+    this.getBodyHeight();
+    this.getDataDonut();
+    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;
+      if (view == "donut") {
+        this.getDataDonut();
+      } else {
+        //this.getDataBar();
+      }
+    },
+    getDataDonut() {
+      this.chartOptions1 = {
+        labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
+        chart: {
+          id: "apexchart1",
+          type: "donut",
+        },
+        responsive: [
+          {
+            breakpoint: 480,
+            options: {
+              chart: {
+                width: 200,
+              },
+              legend: {
+                position: "bottom",
+              },
+            },
+          },
+        ],
+      };
+      this.series1 = [44, 55, 41, 17, 15];
+    },
+    getDataBar() {
+      this.chartOptions2 = {
+        chart: {
+          id: "apexchart2",
+          type: "bar",
+        },
+        plotOptions: {
+          bar: {
+            borderRadius: 10,
+            dataLabels: {
+              position: "top", // top, center, bottom
+            },
+          },
+        },
+        dataLabels: {
+          enabled: true,
+          formatter: function (val) {
+            return val + "%";
+          },
+          offsetY: -20,
+          style: {
+            fontSize: "12px",
+            colors: ["#304758"],
+          },
+        },
+
+        xaxis: {
+          categories: [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May",
+            "Jun",
+            "Jul",
+            "Aug",
+            "Sep",
+            "Oct",
+            "Nov",
+            "Dec",
+          ],
+          position: "top",
+          axisBorder: {
+            show: false,
+          },
+          axisTicks: {
+            show: false,
+          },
+          crosshairs: {
+            fill: {
+              type: "gradient",
+              gradient: {
+                colorFrom: "#D8E3F0",
+                colorTo: "#BED1E6",
+                stops: [0, 100],
+                opacityFrom: 0.4,
+                opacityTo: 0.5,
+              },
+            },
+          },
+          tooltip: {
+            enabled: true,
+          },
+        },
+        yaxis: {
+          axisBorder: {
+            show: false,
+          },
+          axisTicks: {
+            show: false,
+          },
+          labels: {
+            show: false,
+            formatter: function (val) {
+              return val + "%";
+            },
+          },
+        },
+        title: {
+          text: "Monthly Inflation in Argentina, 2002",
+          floating: true,
+          offsetY: 330,
+          align: "center",
+          style: {
+            color: "#444",
+          },
+        },
+      };
+      /*
+      this.$apexcharts.exec("apexchart2", "updateSeries", [
+        {
+          name: "Inflation",
+          data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2],
+        },
+      ]);*/
+
+      /*this.series2 = [
+        {
+          name: "Inflation",
+          data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2],
+        },
+      ];*/
+    },
+    getData() {
+      Api.cases
+        .listTotalCases()
+        .then((response) => {
+          console.log("response");
+          console.log(response);
+        })
+        .catch((response) => {
+          console.log("error");
+          console.log(response);
+        });
+    },
+  },
+};
+</script>
+<style>
+.vp-center {
+  text-align: center;
+}
+
+.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..5f9c08a47
--- /dev/null
+++ b/resources/assets/js/home/TaskMetrics/VueCharts.vue
@@ -0,0 +1,37 @@
+<template>
+  <div
+    id="v-pm-charts"
+    ref="v-pm-charts"
+    class="v-pm-charts vp-inline-block"
+  >
+  <vue-chart-lv-one/>
+  </div>
+</template>
+
+<script>
+import VueChartLvOne from "./VueChartLvOne.vue";
+
+export default {
+  name: "VueCharts",
+  mixins: [],
+  components: {
+    VueChartLvOne,
+  },
+  props: [],
+  data() {
+    let that = this;
+    return {
+      width: 0,
+    };
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  computed: {},
+  updated() {},
+  beforeCreate() {},
+  methods: {},
+};
+</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..7db7566c3
--- /dev/null
+++ b/resources/assets/js/home/TaskMetrics/defaultMixins.js
@@ -0,0 +1,21 @@
+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();
+        },
+      },
+    }
+  },
+  created: function () {
+
+  },
+  methods: {
+  }
+}
\ No newline at end of file
diff --git a/resources/assets/js/home/main.js b/resources/assets/js/home/main.js
index ad7208823..f1e6a5c4d 100644
--- a/resources/assets/js/home/main.js
+++ b/resources/assets/js/home/main.js
@@ -11,9 +11,11 @@ import "@fortawesome/fontawesome-free/css/all.css";
 import "@fortawesome/fontawesome-free/js/all.js";
 import 'bootstrap/dist/css/bootstrap-grid.css';
 import 'bootstrap/dist/css/bootstrap.min.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
-
+import 'bootstrap-vue/dist/bootstrap-vue.css';
+import VueApexCharts from 'vue-apexcharts'
 import Home from "./Home";
+
+Vue.use(VueApexCharts);
 Vue.use(VueRouter);
 Vue.use(VueSidebarMenu);
 Vue.use(BootstrapVue);
@@ -25,9 +27,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";