From 7fcbe8d77f3518d050127eb655a4d2a7b50dce22 Mon Sep 17 00:00:00 2001
From: Elsio Sanchez <45974454+elsiosanchez@users.noreply.github.com>
Date: Wed, 17 Jan 2024 21:29:22 -0400
Subject: [PATCH] Fix: Add Performance Gauge and Portlet Dashboard (#1851)

* Fix: Add Performance Gauge and Portlet Dashboard

* Update index.vue

* Update index.vue

* Update index.vue

---------

Co-authored-by: Edwin Betancourt <EdwinBetanc0urt@outlook.com>
---
 .../ADempiere/Dashboard/activities.vue        |   2 +-
 .../ADempiere/Dashboard/calendar/index.vue    |   2 +-
 .../Dashboard/charts/CardPortletChart.vue     |   8 +-
 .../ADempiere/Dashboard/charts/Portlet.vue    | 170 +++++++++
 src/components/ADempiere/Dashboard/index.vue  |  32 +-
 .../Dashboard/panelGroupPie/index.vue         | 278 +++++++++++++++
 .../Dashboard/panelGroupPortlet/index.vue     | 322 ++++++++++++++++++
 src/store/modules/ADempiere/dashboard.js      |   7 +-
 src/views/ADempiere/Charts/index.vue          |   2 +-
 .../dashboard/admin/components/PanelGroup.vue |   2 -
 .../admin/components/TodoList/index.scss      |   2 +
 src/views/dashboard/admin/index.vue           |  36 +-
 12 files changed, 844 insertions(+), 19 deletions(-)
 create mode 100644 src/components/ADempiere/Dashboard/charts/Portlet.vue
 create mode 100644 src/components/ADempiere/Dashboard/panelGroupPie/index.vue
 create mode 100644 src/components/ADempiere/Dashboard/panelGroupPortlet/index.vue

diff --git a/src/components/ADempiere/Dashboard/activities.vue b/src/components/ADempiere/Dashboard/activities.vue
index 6b2d39353b..d4e06bbf0d 100644
--- a/src/components/ADempiere/Dashboard/activities.vue
+++ b/src/components/ADempiere/Dashboard/activities.vue
@@ -17,7 +17,7 @@
 -->
 
 <template>
-  <div class="activities-dashboard-container">
+  <div class="activities-dashboard-container" style="height: 455px;">
     <el-table
       :data="activitiesList"
       :highlight-current-row="true"
diff --git a/src/components/ADempiere/Dashboard/calendar/index.vue b/src/components/ADempiere/Dashboard/calendar/index.vue
index 319e6aa026..671dc7847c 100644
--- a/src/components/ADempiere/Dashboard/calendar/index.vue
+++ b/src/components/ADempiere/Dashboard/calendar/index.vue
@@ -16,7 +16,7 @@
  along with this program.  If not, see <https:www.gnu.org/licenses/>.
 -->
 <template>
-  <el-calendar>
+  <el-calendar style="height: 455px;overflow: auto;">
     <!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
     <template
       slot="dateCell"
diff --git a/src/components/ADempiere/Dashboard/charts/CardPortletChart.vue b/src/components/ADempiere/Dashboard/charts/CardPortletChart.vue
index 12bd44ebe1..25b844047f 100644
--- a/src/components/ADempiere/Dashboard/charts/CardPortletChart.vue
+++ b/src/components/ADempiere/Dashboard/charts/CardPortletChart.vue
@@ -161,9 +161,11 @@ export default defineComponent({
       return colorPercnt
     }
 
-    props.metadata.groupPortlet.forEach(element => {
-      loadMetrics(element)
-    })
+    if (!isEmptyValue(props.metadata.groupPortlet)) {
+      props.metadata.groupPortlet.forEach(element => {
+        loadMetrics(element)
+      })
+    }
 
     return {
       portlet,
diff --git a/src/components/ADempiere/Dashboard/charts/Portlet.vue b/src/components/ADempiere/Dashboard/charts/Portlet.vue
new file mode 100644
index 0000000000..a34e69454f
--- /dev/null
+++ b/src/components/ADempiere/Dashboard/charts/Portlet.vue
@@ -0,0 +1,170 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A.
+  Contributor(s): Yamel Senih ysenih@erpya.com www.erpya.com
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+<template>
+  <div v-if="!isEmptyValue(chart) && !isEmptyValue(chart.performanceGoal)">
+    <p style="margin: 0px;font-size: 18px;text-align: right;">
+      <count-to
+        :start-val="0"
+        :end-val="valueAmount(chart.measureActual)"
+        :duration="2600"
+        style="font-size: 50px;font-weight: 500;color: #303133;"
+      />
+    </p>
+    <p style="margin: 0px;text-align: left;">
+      <span style="color: #606266;">
+        {{ chart.description }}
+      </span>
+      <span style="float: right;">
+        <count-to
+          :start-val="0"
+          :decimals="2"
+          :end-val="valueAmount(chart.performanceGoal) * 100"
+          style="font-size: 18px;"
+          :style="{ color: colorSchemas(chart) }"
+        />
+        <b :style="{ color: colorSchemas(chart) }">
+          {{ '%' }}
+          <svg-icon :icon-class="iconClass(valueAmount(chart.performanceGoal) * 100)" />
+        </b>
+      </span>
+    </p>
+  </div>
+  <el-button
+    v-else
+    type="text"
+  >
+    {{ $t('component.dashboard.reload') }}
+    <i class="el-icon-loading" />
+  </el-button>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+require('echarts/theme/macarons') // echarts theme
+import resize from './mixins/resize'
+
+// API Request Methods
+import { getMetricRequest } from '@/api/ADempiere/dashboard/index.ts'
+
+// Utils and Helper Methods
+import { getContextAttributes } from '@/utils/ADempiere/contextUtils/contextAttributes'
+
+// const animationDuration = 2800
+
+export default {
+  components: {
+    CountTo
+  },
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    metadata: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  methods: {
+    initChart() {
+      if (!this.isEmptyValue(this.metadata.actions)) {
+        const contextAttributesList = getContextAttributes({
+          containerUuid: this.$store.getters.getContainerInfo.currentTab.containerUuid,
+          parentUuid: this.$store.getters.getContainerInfo.currentTab.parentUuid,
+          contextColumnNames: this.metadata.context_column_names,
+          isBooleanToString: true,
+          keyName: 'key'
+        })
+        this.$store.dispatch('metrics', {
+          id: this.metadata.id,
+          tableName: this.metadata.tableName,
+          recordId: this.metadata.recordId,
+          recordUuid: this.metadata.recordUuid,
+          contextAttributes: contextAttributesList,
+          filters: this.metadata.filter
+        })
+          .then(response => {
+            this.loadChartMetrics(response)
+          })
+          .catch(error => {
+            console.warn(`Error getting Metrics: ${error.message}. Code: ${error.code}.`)
+          })
+        return
+      }
+      getMetricRequest({
+        id: this.metadata.id
+      })
+        .then(metrics => {
+          this.loadChartMetrics(metrics)
+        })
+        .catch(error => {
+          console.warn(`Error getting Metrics: ${error.message}. Code: ${error.code}.`)
+        })
+    },
+    loadChartMetrics(metrics) {
+      this.chart = metrics
+    },
+    valueAmount(amount) {
+      if (this.isEmptyValue(amount)) return 0
+      return Number(amount)
+    },
+    colorSchemas(metrics) {
+      const {
+        performanceGoal,
+        colorSchemas
+      } = metrics
+      const total = this.valueAmount(performanceGoal) * 100
+      let colorPercnt = 'red'
+      colorSchemas.forEach(element => {
+        const { percent, color } = element
+        if (total <= Number(percent)) colorPercnt = color
+      })
+      return colorPercnt
+    },
+    iconClass(num) {
+      if (num < 50) return 'arrow-down'
+      if (num === 50) return ''
+      if (num > 50) return 'arrow-up'
+      return ''
+    }
+  }
+}
+</script>
diff --git a/src/components/ADempiere/Dashboard/index.vue b/src/components/ADempiere/Dashboard/index.vue
index aab9a52a5c..5c8bb3fe8f 100644
--- a/src/components/ADempiere/Dashboard/index.vue
+++ b/src/components/ADempiere/Dashboard/index.vue
@@ -46,12 +46,15 @@
       </el-row>
     </div>
     <transition name="el-zoom-in-top">
-      <div v-show="metadata.isCollapsible" class="dashboard-transitio">
+      <div
+        v-show="metadata.isCollapsible"
+        :class="ClassDashboardTransitio"
+      >
         <component
           :is="renderDashboard"
           :ref="metadata.name"
           :metadata="metadata"
-          :height="'450px'"
+          :height="heightSize"
         />
       </div>
     </transition>
@@ -85,6 +88,10 @@ export default defineComponent({
     main: {
       type: Boolean,
       default: false
+    },
+    heightSize: {
+      type: String,
+      default: '450px'
     }
   },
 
@@ -118,6 +125,9 @@ export default defineComponent({
           case 'notices':
             dashboard = () => import('@/components/ADempiere/Dashboard/notices')
             break
+          case 'todo':
+            dashboard = () => import('@/views/dashboard/admin/components/TodoList/index.vue')
+            break
           default:
             dashboard = () => import('@/components/ADempiere/Dashboard/UnsupportedDashboard')
             break
@@ -139,13 +149,26 @@ export default defineComponent({
       return props.title
     })
 
+    const ClassDashboardTransitio = computed(() => {
+      return {
+        margin: '0px;',
+        width: '100%;',
+        paddingRight: '2%;',
+        borderRadius: '4px;',
+        textAlign: 'center;',
+        boxSizing: 'border-box;',
+        height: props.heightSize,
+        overflow: 'auto'
+      }
+    })
+
     function sendMain(dashboard) {
       store.dispatch('mainDashboard', dashboard)
     }
 
-    if (props.metadata.fileName === 'notices') sendMain(props.metadata)
+    // if (props.metadata.fileName === 'notices') sendMain(props.metadata)
 
-    // loadMainPanelNotice()
+    // loadMainPanelNotice()if (!isEmptyValue(props.metadata.groupPortlet))
 
     return {
       UNSUPPORTED_DASHBOARDS,
@@ -153,6 +176,7 @@ export default defineComponent({
       // computeds
       renderDashboard,
       labelDashboard,
+      ClassDashboardTransitio,
       // methods
       sendMain
     }
diff --git a/src/components/ADempiere/Dashboard/panelGroupPie/index.vue b/src/components/ADempiere/Dashboard/panelGroupPie/index.vue
new file mode 100644
index 0000000000..3fa601b722
--- /dev/null
+++ b/src/components/ADempiere/Dashboard/panelGroupPie/index.vue
@@ -0,0 +1,278 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Elsio Sanchez elsiosanches@gmail.com https://github.com/elsiosanchez
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div
+    :style="styleMain"
+  >
+    <el-row
+      :gutter="20"
+      class="panel-group-pie"
+    >
+      <el-col
+        v-for="(dashboardAttributes, key) in dashboardsList"
+        :key="key"
+        :xs="12"
+        :sm="12"
+        :lg="spanSize"
+        class="card-panel-col"
+      >
+        <dashboard-definition
+          :metadata="dashboardAttributes"
+          :title="dashboardAttributes.name"
+          :main="true"
+          :height-size="'250px'"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed } from '@vue/composition-api'
+
+import store from '@/store'
+
+// Components and Mixins
+import CountTo from 'vue-count-to'
+import DashboardDefinition from '@/components/ADempiere/Dashboard/index.vue'
+
+// Utils and Helper Methods
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils.js'
+// import { zoomIn } from '@/utils/ADempiere/coreUtils.js'
+import { setIconsTableName } from '@/utils/ADempiere'
+
+export default defineComponent({
+  name: 'PanelGroupPie',
+
+  components: {
+    CountTo,
+    DashboardDefinition
+  },
+
+  setup(props) {
+    const isMobile = computed(() => {
+      return store.state.app.device === 'mobile'
+    })
+
+    const dashboardsList = computed(() => {
+      return store.getters.getStoredDashboardsList.filter(list => {
+        return !isEmptyValue(list.chartType) && list.chartType === 'GU'
+      })
+    })
+
+    const spanSize = computed(() => {
+      const quantity = dashboardsList.value.length
+      if (quantity === 1) {
+        return 24
+      }
+      if (quantity === 2) {
+        return 12
+      }
+      if (quantity === 3) {
+        return 8
+      }
+      if (quantity <= 4) {
+        return 6
+      }
+      if (quantity >= 5) {
+        return 4
+      }
+      return 6
+    })
+
+    const styleMain = computed(() => {
+      const quantity = mainTaks.value.length
+      if (quantity > 4) {
+        return 'display: flex;padding: 0px 15px 10px 5px;'
+      }
+      return 'padding: 0px 15px 10px 5px;'
+    })
+
+    const documentList = computed(() => {
+      return store.getters.getListTaks.map(tasks => {
+        const { tableName } = tasks
+        return {
+          ...tasks,
+          svg: setIconsTableName({
+            tableName
+          })
+        }
+      })
+    })
+
+    const mainTaks = computed(() => {
+      const list = documentList.value
+      return list.map((currentValue, index, array) => {
+        let classCard = 'card-panel-icon-wrapper icon-people'
+        switch (index) {
+          case 1:
+            classCard = 'card-panel-icon-wrapper icon-message'
+            break
+          case 2:
+            classCard = 'card-panel-icon-wrapper icon-money'
+            break
+          case 3:
+            classCard = 'card-panel-icon-wrapper icon-shopping'
+            break
+        }
+        return {
+          ...currentValue,
+          classCard
+        }
+      })
+    })
+
+    return {
+      // Computed
+      mainTaks,
+      isMobile,
+      spanSize,
+      styleMain,
+      documentList,
+      dashboardsList
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.class-card-panel {
+  .el-badge__content.is-fixed {
+    position: absolute;
+    top: 6px;
+    right: 20px;
+    transform: translateY(-50%) translateX(100%);
+  }
+}
+.panel-group-pie {
+  margin: 0px;
+  display: flex;
+  overflow: auto;
+  padding-bottom: 7px;
+
+  .card-panel-col {
+    margin-bottom: 0px;
+  }
+
+  .card-panel {
+    height: 200px;
+    cursor: pointer;
+    font-size: 12px;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 0px;
+      // margin: 5px 0px 5px 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 60px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 15px;
+      margin-left: 0px;
+      width: 100%;
+      margin-right: 10px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        text-align: end;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/components/ADempiere/Dashboard/panelGroupPortlet/index.vue b/src/components/ADempiere/Dashboard/panelGroupPortlet/index.vue
new file mode 100644
index 0000000000..dcdc94d089
--- /dev/null
+++ b/src/components/ADempiere/Dashboard/panelGroupPortlet/index.vue
@@ -0,0 +1,322 @@
+<!--
+  ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+  Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+  Contributor(s): Elsio Sanchez elsiosanches@gmail.com https://github.com/elsiosanchez
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU General Public License as published by
+  the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU General Public License for more details.
+
+  You should have received a copy of the GNU General Public License
+  along with this program. If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <div
+    :style="styleMain"
+  >
+    <el-row
+      :gutter="20"
+      class="panel-group-pie"
+    >
+      <el-col
+        v-for="(portlet, key) in dashboardsList"
+        :key="key"
+        :xs="12"
+        :sm="12"
+        :lg="spanSize"
+        class="card-panel-col"
+      >
+        <el-card style="border: 0px;">
+          <el-card
+            :body-style="{ padding: '10px' }"
+            class="card-portlet"
+            style="border: 0px;"
+          >
+            <p slot="header" style="margin: 0px;padding: 0pc;color: #606266;text-align: left;">
+              {{ portlet.name }}
+              <i class="el-icon-warning-outline" />
+            </p>
+            <el-button
+              v-if="isEmptyValue(portlet.metrics)"
+              type="primary"
+              class="button-base-icon"
+              icon="el-icon-loading"
+            />
+            <div v-if="!isEmptyValue(portlet.metrics)"> {{ portlet.metrics.measureActual }} </div>
+            <portlet :metadata="portlet" />
+          </el-card>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed } from '@vue/composition-api'
+
+import store from '@/store'
+
+// API Request Methods
+import { getMetricRequest } from '@/api/ADempiere/dashboard/index.ts'
+
+// Components and Mixins
+import CountTo from 'vue-count-to'
+import DashboardDefinition from '@/components/ADempiere/Dashboard/index.vue'
+import portlet from '@/components/ADempiere/Dashboard/charts/Portlet.vue'
+
+// Utils and Helper Methods
+// import { zoomIn } from '@/utils/ADempiere/coreUtils.js'
+import { setIconsTableName } from '@/utils/ADempiere'
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils.js'
+
+export default defineComponent({
+  name: 'PanelGroupPorlet',
+
+  components: {
+    CountTo,
+    portlet,
+    DashboardDefinition
+  },
+
+  setup(props) {
+    const isMobile = computed(() => {
+      return store.state.app.device === 'mobile'
+    })
+
+    const dashboardsList = computed(() => {
+      return store.getters.getStoredDashboardsList
+        .filter(list => !isEmptyValue(list.chartType) && list.chartType === 'PT')
+        .map(list => {
+          return {
+            ...list,
+            metrics: requestMetric(list)
+          }
+        })
+    })
+
+    const spanSize = computed(() => {
+      const quantity = dashboardsList.value.length
+      if (quantity === 1) {
+        return 24
+      }
+      if (quantity === 2) {
+        return 12
+      }
+      if (quantity === 3) {
+        return 8
+      }
+      if (quantity <= 4) {
+        return 6
+      }
+      if (quantity >= 5) {
+        return 4
+      }
+      return 6
+    })
+
+    const styleMain = computed(() => {
+      const quantity = mainTaks.value.length
+      if (quantity > 4) {
+        return 'display: flex;padding: 0px 15px 10px 5px;'
+      }
+      return 'padding: 0px 15px 10px 5px;'
+    })
+
+    const documentList = computed(() => {
+      return store.getters.getListTaks.map(tasks => {
+        const { tableName } = tasks
+        return {
+          ...tasks,
+          svg: setIconsTableName({
+            tableName
+          })
+        }
+      })
+    })
+
+    const mainTaks = computed(() => {
+      const list = documentList.value
+      return list.map((currentValue, index, array) => {
+        let classCard = 'card-panel-icon-wrapper icon-people'
+        switch (index) {
+          case 1:
+            classCard = 'card-panel-icon-wrapper icon-message'
+            break
+          case 2:
+            classCard = 'card-panel-icon-wrapper icon-money'
+            break
+          case 3:
+            classCard = 'card-panel-icon-wrapper icon-shopping'
+            break
+        }
+        return {
+          ...currentValue,
+          classCard
+        }
+      })
+    })
+
+    function requestMetric(element) {
+      let metrics
+      return new Promise(resolve => {
+        getMetricRequest({
+          id: element.id
+        })
+          .then(response => {
+            metrics = response
+            resolve(metrics)
+            return metrics
+          })
+          .catch(() => {
+            resolve(metrics)
+            return metrics
+          })
+      })
+    }
+
+    return {
+      // Computed
+      mainTaks,
+      isMobile,
+      spanSize,
+      styleMain,
+      documentList,
+      dashboardsList,
+      // loadMetrics,
+      requestMetric
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.class-card-panel {
+  .el-badge__content.is-fixed {
+    position: absolute;
+    top: 6px;
+    right: 20px;
+    transform: translateY(-50%) translateX(100%);
+  }
+}
+.panel-group-pie {
+  margin: 0px;
+  display: flex;
+  overflow: auto;
+  padding-bottom: 7px;
+
+  .card-panel-col {
+    margin-bottom: 0px;
+  }
+
+  .card-panel {
+    height: 200px;
+    cursor: pointer;
+    font-size: 12px;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      float: left;
+      margin: 0px;
+      // margin: 5px 0px 5px 14px;
+      padding: 16px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      float: left;
+      font-size: 60px;
+    }
+
+    .card-panel-description {
+      float: right;
+      font-weight: bold;
+      margin: 15px;
+      margin-left: 0px;
+      width: 100%;
+      margin-right: 10px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        text-align: end;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>
diff --git a/src/store/modules/ADempiere/dashboard.js b/src/store/modules/ADempiere/dashboard.js
index 84dc48fad2..9d810c1731 100644
--- a/src/store/modules/ADempiere/dashboard.js
+++ b/src/store/modules/ADempiere/dashboard.js
@@ -74,7 +74,12 @@ const dashboard = {
             commit('setDashboardsList', dashboardsList)
 
             if (isEmptyValue(getters.getStoredMainDashboard)) {
-              dispatch('mainDashboard', dashboardsList.at())
+              const defaulDashboard = dashboardsList.find(list => list.fileName === 'recentItems')
+              if (defaulDashboard) {
+                dispatch('mainDashboard', defaulDashboard)
+                return
+              }
+              dispatch('mainDashboard', dashboardsList.at(2))
             }
             resolve(roleDashboards)
           })
diff --git a/src/views/ADempiere/Charts/index.vue b/src/views/ADempiere/Charts/index.vue
index 28fc820eee..874afa5fc3 100644
--- a/src/views/ADempiere/Charts/index.vue
+++ b/src/views/ADempiere/Charts/index.vue
@@ -35,7 +35,7 @@
         :xs="{ span: 24 }"
         :sm="{ span: 24 }"
         :md="{ span: 24 }"
-        :lg="{ span: 8 }"
+        :lg="{ span: 12 }"
         :xl="{ span: 8 }"
         style="padding-right:8px;margin-bottom:2px;"
       >
diff --git a/src/views/dashboard/admin/components/PanelGroup.vue b/src/views/dashboard/admin/components/PanelGroup.vue
index 364ba2ca29..3598752173 100644
--- a/src/views/dashboard/admin/components/PanelGroup.vue
+++ b/src/views/dashboard/admin/components/PanelGroup.vue
@@ -32,7 +32,6 @@
         :lg="spanSize"
         class="card-panel-col"
       >
-        <!-- <p style="margin: 0px;"> -->
         <div class="card-panel" @click="handleClick(taks)">
           <div
             :class="taks.classCard"
@@ -62,7 +61,6 @@
             </p>
           </div>
         </div>
-        <!-- </p> -->
       </el-col>
     </el-row>
   </div>
diff --git a/src/views/dashboard/admin/components/TodoList/index.scss b/src/views/dashboard/admin/components/TodoList/index.scss
index f7b9a2c5fc..aee29d1f47 100644
--- a/src/views/dashboard/admin/components/TodoList/index.scss
+++ b/src/views/dashboard/admin/components/TodoList/index.scss
@@ -1,4 +1,6 @@
 .todoapp {
+  height: 455px;
+  overflow: auto;
   font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
   line-height: 1.4em;
   color: #4d4d4d;
diff --git a/src/views/dashboard/admin/index.vue b/src/views/dashboard/admin/index.vue
index c23347e1a6..1b0c6ec835 100644
--- a/src/views/dashboard/admin/index.vue
+++ b/src/views/dashboard/admin/index.vue
@@ -34,6 +34,12 @@
       <el-col :span="24">
         <panel-group />
       </el-col>
+      <el-col :span="24">
+        <panel-group-pie />
+      </el-col>
+      <el-col :span="24">
+        <panel-group-portlet />
+      </el-col>
       <el-col v-if="!isEmptyValue(mainDashboard)" :span="24" style="padding-right:8px;margin-bottom:2px;">
         <dashboard-definition
           :metadata="mainDashboard"
@@ -43,6 +49,7 @@
 
       <template v-for="(dashboardAttributes, index) in listDashboard">
         <el-col
+          v-if="mainDashboard.name !== dashboardAttributes.name"
           :key="index"
           :span="colNum"
           style="padding-right:8px;margin-bottom:2px;"
@@ -54,7 +61,7 @@
           />
         </el-col>
       </template>
-      <el-col
+      <!-- <el-col
         :span="colNum"
         style="padding-right:8px;margin-bottom:2px;"
       >
@@ -63,7 +70,7 @@
           :title="mainDashboard.name"
           style="margin: 0px;width: 100% !important;"
         />
-      </el-col>
+      </el-col> -->
     </el-row>
     <page-style-settings />
   </div>
@@ -83,6 +90,8 @@ import language from '@/lang'
 // Components and Mixins
 import DashboardDefinition from '@/components/ADempiere/Dashboard/index.vue'
 import PanelGroup from '@/views/dashboard/admin/components/PanelGroup.vue'
+import PanelGroupPie from '@/components/ADempiere/Dashboard/panelGroupPie'
+import PanelGroupPortlet from '@/components/ADempiere/Dashboard/panelGroupPortlet'
 import PageStyleSettings from '@/components/ADempiere/PageStyleSettings'
 import Todo from '@/views/dashboard/admin/components/TodoList/index.vue'
 import UserInfo from '@/views/profile/components/InfoUser.vue'
@@ -103,7 +112,9 @@ export default defineComponent({
     RightPanel,
     PanelGroup,
     ThemePicker,
+    PanelGroupPie,
     PageStyleSettings,
+    PanelGroupPortlet,
     DashboardDefinition
   },
 
@@ -190,7 +201,7 @@ export default defineComponent({
     })
 
     const dashboardsList = computed(() => {
-      return store.getters.getStoredDashboardsList
+      return store.getters.getStoredDashboardsList.filter(list => list.fileName !== 'docstatus')
     })
 
     const mainDashboard = computed(() => {
@@ -206,6 +217,15 @@ export default defineComponent({
       }
     })
 
+    const panelTodo = computed(() => {
+      return {
+        dashboardType: 'dashboard',
+        fileName: 'todo',
+        isCollapsible: true,
+        name: 'Todo'
+      }
+    })
+
     const listDashboard = computed(() => {
       const list = dashboardsList.value
       if (isEmptyValue(list)) {
@@ -220,6 +240,9 @@ export default defineComponent({
             return dashboard
           }
         })
+        if (isEmptyValue(listDashboardPanel.find(list => list.name === 'todo'))) {
+          listDashboardPanel.push(panelTodo.value)
+        }
         if (isEmptyValue(listDashboardPanel.find(list => list.name === 'notices'))) {
           listDashboardPanel.push(panelNotice.value)
         }
@@ -258,17 +281,18 @@ export default defineComponent({
     })
 
     return {
+      numColDashboard,
       dashboardsList,
       mainDashboard,
       listDashboard,
+      showSettings,
       panelNotice,
       currentRole,
-      showSettings,
       sidebarLogo,
+      panelTodo,
+      panelMain,
       tagsView,
       colNum,
-      numColDashboard,
-      panelMain,
       themeChange
     }
   }