Add agent reports

app/javascript/dashboard/api/summaryReports.js

@@ -17,7 +17,7 @@ class SummaryReportsAPI extends ApiClient {
   }
 
   getAgentReports({ since, until, businessHours } = {}) {
-    return axios.get(`${this.url}/agents`, {
+    return axios.get(`${this.url}/agent`, {
       params: {
         since,
         until,

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

@@ -1,19 +1,44 @@
 <template>
-  <woot-reports
-    key="agent-reports"
-    type="agent"
-    getter-key="agents/getAgents"
-    action-key="agents/get"
-    :download-button-label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
-  />
+  <div class="column overflow-auto">
+    <metric-card :is-live="false" header="All teams overview">
+      <woot-summary-reports
+        key="agent-summary-reports"
+        class="!p-0"
+        type="agent"
+        getter-key="agents/getAgents"
+        attribute-key="team_id"
+        action-key="summaryReports/fetchAgentSummaryReports"
+        summary-key="summaryReports/getAgentSummaryReports"
+        :download-button-label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
+      />
+    </metric-card>
+    <metric-card
+      :is-live="false"
+      header="Agentwise reports"
+      class="overflow-visible"
+    >
+      <woot-reports
+        key="agent-reports"
+        :show-download-button="false"
+        class="!p-0"
+        type="agent"
+        getter-key="agents/getAgents"
+        action-key="agents/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,
   },
 };
 </script>

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

@@ -14,7 +14,7 @@
     </metric-card>
     <metric-card
       :is-live="false"
-      header="Team wise reports"
+      header="Teamwise reports"
       class="overflow-visible"
     >
       <woot-reports
@@ -40,5 +40,8 @@ export default {
     MetricCard,
     WootSummaryReports,
   },
+  mounted() {
+    this.$store.dispatch('agents/get');
+  },
 };
 </script>

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

@@ -53,10 +53,6 @@ export default {
       type: String,
       default: '',
     },
-    attributeKey: {
-      type: String,
-      default: '',
-    },
     downloadButtonLabel: {
       type: String,
       default: 'Download Reports',

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

@@ -8,7 +8,7 @@ export const state = {
 };
 
 export const getters = {
-  getAgentSummaryReport(_state) {
+  getAgentSummaryReports(_state) {
     return _state.agentSummaryReports;
   },
   getTeamSummaryReports(_state) {
@@ -25,10 +25,10 @@ export const actions = {
       // Ignore error
     }
   },
-  async getAgentSummaryReports({ commit }, params) {
+  async fetchAgentSummaryReports({ commit }, params) {
     try {
       const response = await SummaryReportsAPI.getAgentReports(params);
-      commit('setAgentSummayReport', response.data);
+      commit('setAgentSummaryReport', response.data);
     } catch (error) {
       // Ignore error
     }