inbox view

app/javascript/dashboard/api/summaryReports.js

@@ -25,6 +25,16 @@ class SummaryReportsAPI extends ApiClient {
       },
     });
   }
+
+  getInboxReports({ since, until, businessHours } = {}) {
+    return axios.get(`${this.url}/inbox`, {
+      params: {
+        since,
+        until,
+        business_hours: businessHours,
+      },
+    });
+  }
 }
 
 export default new SummaryReportsAPI();

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

@@ -14,7 +14,7 @@
     </metric-card>
     <metric-card
       :is-live="false"
-      header="Agentwise reports"
+      header="Agent-wise reports"
       class="overflow-visible"
     >
       <woot-reports

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

@@ -1,19 +1,46 @@
 <template>
-  <woot-reports
-    key="inbox-reports"
-    type="inbox"
-    getter-key="inboxes/getInboxes"
-    action-key="inboxes/get"
-    :download-button-label="$t('INBOX_REPORTS.DOWNLOAD_INBOX_REPORTS')"
-  />
+  <div class="column overflow-auto">
+    <metric-card :is-live="false" header="All inboxes overview">
+      <woot-summary-reports
+        key="inbox-view-reports"
+        class="!p-0"
+        type="inbox"
+        getter-key="inboxes/getInboxes"
+        action-key="summaryReports/fetchInboxSummaryReports"
+        summary-key="summaryReports/getInboxSummaryReports"
+        :download-button-label="$t('INBOX_REPORTS.DOWNLOAD_INBOX_REPORTS')"
+      />
+    </metric-card>
+    <metric-card
+      :is-live="false"
+      header="Inbox-wise reports"
+      class="overflow-visible"
+    >
+      <woot-reports
+        key="inbox-reports"
+        :show-download-button="false"
+        class="!p-0"
+        type="inbox"
+        getter-key="inboxes/getInboxes"
+        action-key="inboxes/get"
+      />
+    </metric-card>
+  </div>
 </template>
 
 <script>
+import WootSummaryReports from './components/WootSummaryReports.vue';
+import MetricCard from './components/overview/MetricCard.vue';
 import WootReports from './components/WootReports.vue';
 
 export default {
   components: {
     WootReports,
+    MetricCard,
+    WootSummaryReports,
+  },
+  mounted() {
+    this.$store.dispatch('agents/get');
   },
 };
 </script>

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

@@ -14,7 +14,7 @@
     </metric-card>
     <metric-card
       :is-live="false"
-      header="Teamwise reports"
+      header="Team-wise reports"
       class="overflow-visible"
     >
       <woot-reports

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

@@ -4,6 +4,7 @@ import Vue from 'vue';
 export const state = {
   teamSummaryReports: [],
   agentSummaryReports: [],
+  inboxSummaryReports: [],
   uiFlags: {},
 };
 
@@ -14,6 +15,9 @@ export const getters = {
   getTeamSummaryReports(_state) {
     return _state.teamSummaryReports;
   },
+  getInboxSummaryReports(_state) {
+    return _state.inboxSummaryReports;
+  },
 };
 
 export const actions = {
@@ -33,6 +37,14 @@ export const actions = {
       // Ignore error
     }
   },
+  async fetchInboxSummaryReports({ commit }, params) {
+    try {
+      const response = await SummaryReportsAPI.getInboxReports(params);
+      commit('setInboxSummaryReport', response.data);
+    } catch (error) {
+      // Ignore error
+    }
+  },
 };
 
 export const mutations = {
@@ -42,6 +54,9 @@ export const mutations = {
   setAgentSummaryReport(_state, data) {
     Vue.set(_state, 'agentSummaryReports', data);
   },
+  setInboxSummaryReport(_state, data) {
+    Vue.set(_state, 'inboxSummaryReports', data);
+  },
 };
 
 export default {