feat: Update reports UI to make it better (#7544)

app/javascript/dashboard/store/modules/reports.js

@@ -11,10 +11,23 @@ import {
 
 const state = {
   fetchingStatus: false,
-  reportData: [],
   accountReport: {
-    isFetching: false,
-    data: [],
+    isFetching: {
+      conversations_count: false,
+      incoming_messages_count: false,
+      outgoing_messages_count: false,
+      avg_first_response_time: false,
+      avg_resolution_time: false,
+      resolutions_count: false,
+    },
+    data: {
+      conversations_count: [],
+      incoming_messages_count: [],
+      outgoing_messages_count: [],
+      avg_first_response_time: [],
+      avg_resolution_time: [],
+      resolutions_count: [],
+    },
   },
   accountSummary: {
     avg_first_response_time: 0,
@@ -60,12 +73,22 @@ const getters = {
 
 export const actions = {
   fetchAccountReport({ commit }, reportObj) {
-    commit(types.default.TOGGLE_ACCOUNT_REPORT_LOADING, true);
+    const { metric } = reportObj;
+    commit(types.default.TOGGLE_ACCOUNT_REPORT_LOADING, {
+      metric,
+      value: true,
+    });
     Report.getReports(reportObj).then(accountReport => {
       let { data } = accountReport;
       data = clampDataBetweenTimeline(data, reportObj.from, reportObj.to);
-      commit(types.default.SET_ACCOUNT_REPORTS, data);
-      commit(types.default.TOGGLE_ACCOUNT_REPORT_LOADING, false);
+      commit(types.default.SET_ACCOUNT_REPORTS, {
+        metric,
+        data,
+      });
+      commit(types.default.TOGGLE_ACCOUNT_REPORT_LOADING, {
+        metric,
+        value: false,
+      });
     });
   },
   fetchAccountConversationHeatmap({ commit }, reportObj) {
@@ -202,14 +225,14 @@ export const actions = {
 };
 
 const mutations = {
-  [types.default.SET_ACCOUNT_REPORTS](_state, accountReport) {
-    _state.accountReport.data = accountReport;
+  [types.default.SET_ACCOUNT_REPORTS](_state, { metric, data }) {
+    _state.accountReport.data[metric] = data;
   },
   [types.default.SET_HEATMAP_DATA](_state, heatmapData) {
     _state.overview.accountConversationHeatmap = heatmapData;
   },
-  [types.default.TOGGLE_ACCOUNT_REPORT_LOADING](_state, flag) {
-    _state.accountReport.isFetching = flag;
+  [types.default.TOGGLE_ACCOUNT_REPORT_LOADING](_state, { metric, value }) {
+    _state.accountReport.isFetching[metric] = value;
   },
   [types.default.TOGGLE_HEATMAP_LOADING](_state, flag) {
     _state.overview.uiFlags.isFetchingAccountConversationsHeatmap = flag;