feat: hide report keys

app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue

@@ -1,6 +1,7 @@
 <script>
 import V4Button from 'dashboard/components-next/button/Button.vue';
 import { useAlert, useTrack } from 'dashboard/composables';
+import { useHiddenMetrics } from 'dashboard/composables/useHiddenMetrics';
 import ReportFilterSelector from './components/FilterSelector.vue';
 import { GROUP_BY_FILTER } from './constants';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
@@ -8,7 +9,7 @@ import { generateFileName } from 'dashboard/helper/downloadHelper';
 import ReportContainer from './ReportContainer.vue';
 import ReportHeader from './components/ReportHeader.vue';
 
-const REPORTS_KEYS = {
+const ALL_REPORTS_KEYS = {
   CONVERSATIONS: 'conversations_count',
   INCOMING_MESSAGES: 'incoming_messages_count',
   OUTGOING_MESSAGES: 'outgoing_messages_count',
@@ -26,6 +27,10 @@ export default {
     ReportContainer,
     V4Button,
   },
+  setup() {
+    const { filterVisibleReportKeys } = useHiddenMetrics();
+    return { filterVisibleReportKeys };
+  },
   data() {
     return {
       from: 0,
@@ -34,6 +39,11 @@ export default {
       businessHours: false,
     };
   },
+  computed: {
+    reportKeys() {
+      return this.filterVisibleReportKeys(ALL_REPORTS_KEYS);
+    },
+  },
   methods: {
     fetchAllData() {
       this.fetchAccountSummary();
@@ -47,18 +57,10 @@ export default {
       }
     },
     fetchChartData() {
-      [
-        'CONVERSATIONS',
-        'INCOMING_MESSAGES',
-        'OUTGOING_MESSAGES',
-        'FIRST_RESPONSE_TIME',
-        'RESOLUTION_TIME',
-        'RESOLUTION_COUNT',
-        'REPLY_TIME',
-      ].forEach(async key => {
+      Object.keys(this.reportKeys).forEach(async key => {
         try {
           await this.$store.dispatch('fetchAccountReport', {
-            metric: REPORTS_KEYS[key],
+            metric: this.reportKeys[key],
             ...this.getRequestPayload(),
           });
         } catch {
@@ -121,6 +123,6 @@ export default {
       show-group-by-filter
       @filter-change="onFilterChange"
     />
-    <ReportContainer :group-by="groupBy" />
+    <ReportContainer :group-by="groupBy" :report-keys="reportKeys" />
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SummaryReports.vue

@@ -2,6 +2,7 @@
 import ReportFilterSelector from './FilterSelector.vue';
 import { formatTime } from '@chatwoot/utils';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { useHiddenMetrics } from 'dashboard/composables/useHiddenMetrics';
 import Table from 'dashboard/components/table/Table.vue';
 import { generateFileName } from 'dashboard/helper/downloadHelper';
 import {
@@ -44,6 +45,7 @@ import SummaryReportLink from './SummaryReportLink.vue';
 
 const rowItems = useMapGetter([props.getterKey]) || [];
 const reportMetrics = useMapGetter([props.summaryKey]) || [];
+const { isMetricHidden } = useHiddenMetrics();
 
 const getMetrics = id =>
   reportMetrics.value.find(metrics => metrics.id === Number(id)) || {};
@@ -59,38 +61,42 @@ const defaulSpanRender = cellProps =>
     cellProps.getValue()
   );
 
-const columns = computed(() => [
-  columnHelper.accessor('name', {
-    header: t(`SUMMARY_REPORTS.${props.type.toUpperCase()}`),
-    width: 300,
-    cell: cellProps => h(SummaryReportLink, cellProps),
-  }),
-  columnHelper.accessor('conversationsCount', {
-    header: t('SUMMARY_REPORTS.CONVERSATIONS'),
-    width: 200,
-    cell: defaulSpanRender,
-  }),
-  columnHelper.accessor('avgFirstResponseTime', {
-    header: t('SUMMARY_REPORTS.AVG_FIRST_RESPONSE_TIME'),
-    width: 200,
-    cell: defaulSpanRender,
-  }),
-  columnHelper.accessor('avgResolutionTime', {
-    header: t('SUMMARY_REPORTS.AVG_RESOLUTION_TIME'),
-    width: 200,
-    cell: defaulSpanRender,
-  }),
-  columnHelper.accessor('avgReplyTime', {
-    header: t('SUMMARY_REPORTS.AVG_REPLY_TIME'),
-    width: 200,
-    cell: defaulSpanRender,
-  }),
-  columnHelper.accessor('resolutionsCount', {
-    header: t('SUMMARY_REPORTS.RESOLUTION_COUNT'),
-    width: 200,
-    cell: defaulSpanRender,
-  }),
-]);
+const columns = computed(() => {
+  const allColumns = [
+    columnHelper.accessor('name', {
+      header: t(`SUMMARY_REPORTS.${props.type.toUpperCase()}`),
+      width: 300,
+      cell: cellProps => h(SummaryReportLink, cellProps),
+    }),
+    columnHelper.accessor('conversationsCount', {
+      header: t('SUMMARY_REPORTS.CONVERSATIONS'),
+      width: 200,
+      cell: defaulSpanRender,
+    }),
+    columnHelper.accessor('avgFirstResponseTime', {
+      header: t('SUMMARY_REPORTS.AVG_FIRST_RESPONSE_TIME'),
+      width: 200,
+      cell: defaulSpanRender,
+    }),
+    columnHelper.accessor('avgResolutionTime', {
+      header: t('SUMMARY_REPORTS.AVG_RESOLUTION_TIME'),
+      width: 200,
+      cell: defaulSpanRender,
+    }),
+    !isMetricHidden('reply_time') &&
+      columnHelper.accessor('avgReplyTime', {
+        header: t('SUMMARY_REPORTS.AVG_REPLY_TIME'),
+        width: 200,
+        cell: defaulSpanRender,
+      }),
+    columnHelper.accessor('resolutionsCount', {
+      header: t('SUMMARY_REPORTS.RESOLUTION_COUNT'),
+      width: 200,
+      cell: defaulSpanRender,
+    }),
+  ];
+  return allColumns.filter(Boolean);
+});
 
 const renderAvgTime = value => (value ? formatTime(value) : '--');