feat: label reports overview (#11194)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/api/summaryReports.js

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

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -87,7 +87,7 @@ const newReportRoutes = () => [
   {
     name: 'Reports Label',
     label: t('SIDEBAR.REPORTS_LABEL'),
-    to: accountScopedRoute('label_reports'),
+    to: accountScopedRoute('label_reports_index'),
   },
   {
     name: 'Reports Inbox',

app/javascript/dashboard/i18n/locale/en/report.json

@@ -193,6 +193,7 @@
   },
   "LABEL_REPORTS": {
     "HEADER": "Labels Overview",
+    "DESCRIPTION": "Track label performance with key metrics including conversations, response times, resolution times, and resolved cases. Click a label name for detailed insights.",
     "LOADING_CHART": "Loading chart data...",
     "NO_ENOUGH_DATA": "We've not received enough data points to generate report, Please try again later.",
     "DOWNLOAD_LABEL_REPORTS": "Download label reports",
@@ -559,6 +560,7 @@
     "INBOX": "Inbox",
     "AGENT": "Agent",
     "TEAM": "Team",
+    "LABEL": "Label",
     "AVG_RESOLUTION_TIME": "Avg. Resolution Time",
     "AVG_FIRST_RESPONSE_TIME": "Avg. First Response Time",
     "AVG_REPLY_TIME": "Avg. Customer Waiting Time",

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

@@ -0,0 +1,35 @@
+<script setup>
+import { ref } from 'vue';
+import ReportHeader from './components/ReportHeader.vue';
+import SummaryReports from './components/SummaryReports.vue';
+import V4Button from 'dashboard/components-next/button/Button.vue';
+
+const summarReportsRef = ref(null);
+
+const onDownloadClick = () => {
+  summarReportsRef.value.downloadReports();
+};
+</script>
+
+<template>
+  <ReportHeader
+    :header-title="$t('LABEL_REPORTS.HEADER')"
+    :header-description="$t('LABEL_REPORTS.DESCRIPTION')"
+  >
+    <V4Button
+      :label="$t('LABEL_REPORTS.DOWNLOAD_LABEL_REPORTS')"
+      icon="i-ph-download-simple"
+      size="sm"
+      @click="onDownloadClick"
+    />
+  </ReportHeader>
+
+  <SummaryReports
+    ref="summarReportsRef"
+    action-key="summaryReports/fetchLabelSummaryReports"
+    getter-key="labels/getLabels"
+    fetch-items-key="labels/get"
+    summary-key="summaryReports/getLabelSummaryReports"
+    type="label"
+  />
+</template>

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

@@ -0,0 +1,31 @@
+<script setup>
+import { onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useFunctionGetter, useStore } from 'dashboard/composables/store';
+
+import WootReports from './components/WootReports.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const route = useRoute();
+const store = useStore();
+const label = useFunctionGetter('labels/getLabelById', route.params.id);
+
+onMounted(() => store.dispatch('labels/get'));
+</script>
+
+<template>
+  <WootReports
+    v-if="label.id"
+    :key="label.id"
+    type="label"
+    getter-key="labels/getLabels"
+    action-key="labels/get"
+    :selected-item="label"
+    :download-button-label="$t('LABEL_REPORTS.DOWNLOAD_LABEL_REPORTS')"
+    :report-title="$t('LABEL_REPORTS.HEADER')"
+    has-back-button
+  />
+  <div v-else class="w-full py-20">
+    <Spinner class="mx-auto" />
+  </div>
+</template>

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

@@ -108,7 +108,8 @@ const tableData = computed(() =>
     } = rowMetrics;
     return {
       id: row.id,
-      name: row.name,
+      // we fallback on title, label for instance does not have a name property
+      name: row.name ?? row.title,
       type: props.type,
       conversationsCount: renderCount(conversationsCount),
       avgFirstResponseTime: renderAvgTime(avgFirstResponseTime),
@@ -177,7 +178,7 @@ defineExpose({ downloadReports });
 <template>
   <ReportFilterSelector @filter-change="onFilterChange" />
   <div
-    class="flex-1 overflow-auto px-5 py-6 mt-5 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2"
+    class="flex-1 overflow-auto px-2 py-2 mt-5 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2"
   >
     <Table :table="table" />
   </div>

app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js

@@ -7,10 +7,12 @@ import Index from './Index.vue';
 import AgentReportsIndex from './AgentReportsIndex.vue';
 import InboxReportsIndex from './InboxReportsIndex.vue';
 import TeamReportsIndex from './TeamReportsIndex.vue';
+import LabelReportsIndex from './LabelReportsIndex.vue';
 
 import AgentReportsShow from './AgentReportsShow.vue';
 import InboxReportsShow from './InboxReportsShow.vue';
 import TeamReportsShow from './TeamReportsShow.vue';
+import LabelReportsShow from './LabelReportsShow.vue';
 
 import AgentReports from './AgentReports.vue';
 import InboxReports from './InboxReports.vue';
@@ -104,6 +106,22 @@ const revisedReportRoutes = [
     },
     component: TeamReportsShow,
   },
+  {
+    path: 'labels_overview',
+    name: 'label_reports_index',
+    meta: {
+      permissions: ['administrator', 'report_manage'],
+    },
+    component: LabelReportsIndex,
+  },
+  {
+    path: 'labels/:id',
+    name: 'label_reports_show',
+    meta: {
+      permissions: ['administrator', 'report_manage'],
+    },
+    component: LabelReportsShow,
+  },
 ];
 
 export default {

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

@@ -26,6 +26,9 @@ export const getters = {
       .filter(record => record.show_on_sidebar)
       .sort((a, b) => a.title.localeCompare(b.title));
   },
+  getLabelById: _state => id => {
+    return _state.records.find(record => record.id === Number(id));
+  },
 };
 
 export const actions = {

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

@@ -7,6 +7,7 @@ vi.mock('dashboard/api/summaryReports', () => ({
     getInboxReports: vi.fn(),
     getAgentReports: vi.fn(),
     getTeamReports: vi.fn(),
+    getLabelReports: vi.fn(),
   },
 }));
 
@@ -25,10 +26,12 @@ describe('Summary Reports Store', () => {
         inboxSummaryReports: [],
         agentSummaryReports: [],
         teamSummaryReports: [],
+        labelSummaryReports: [],
         uiFlags: {
           isFetchingInboxSummaryReports: false,
           isFetchingAgentSummaryReports: false,
           isFetchingTeamSummaryReports: false,
+          isFetchingLabelSummaryReports: false,
         },
       });
     });
@@ -39,6 +42,7 @@ describe('Summary Reports Store', () => {
       inboxSummaryReports: [{ id: 1 }],
       agentSummaryReports: [{ id: 2 }],
       teamSummaryReports: [{ id: 3 }],
+      labelSummaryReports: [{ id: 4 }],
       uiFlags: { isFetchingInboxSummaryReports: true },
     };
 
@@ -54,6 +58,10 @@ describe('Summary Reports Store', () => {
       expect(store.getters.getTeamSummaryReports(state)).toEqual([{ id: 3 }]);
     });
 
+    it('should return label summary reports', () => {
+      expect(store.getters.getLabelSummaryReports(state)).toEqual([{ id: 4 }]);
+    });
+
     it('should return UI flags', () => {
       expect(store.getters.getUIFlags(state)).toEqual({
         isFetchingInboxSummaryReports: true,
@@ -86,6 +94,14 @@ describe('Summary Reports Store', () => {
       expect(state.teamSummaryReports).toEqual(data);
     });
 
+    it('should set label summary report', () => {
+      const state = { ...initialState };
+      const data = [{ id: 4 }];
+
+      store.mutations.setLabelSummaryReport(state, data);
+      expect(state.labelSummaryReports).toEqual(data);
+    });
+
     it('should merge UI flags with existing flags', () => {
       const state = {
         uiFlags: { flag1: true, flag2: false },
@@ -185,5 +201,29 @@ describe('Summary Reports Store', () => {
         });
       });
     });
+
+    describe('fetchLabelSummaryReports', () => {
+      it('should fetch label reports successfully', async () => {
+        const params = { labelId: 789 };
+        const mockResponse = {
+          data: [{ label_id: 789, label_name: 'Test Label' }],
+        };
+
+        SummaryReportsAPI.getLabelReports.mockResolvedValue(mockResponse);
+
+        await store.actions.fetchLabelSummaryReports({ commit }, params);
+
+        expect(commit).toHaveBeenCalledWith('setUIFlags', {
+          isFetchingLabelSummaryReports: true,
+        });
+        expect(SummaryReportsAPI.getLabelReports).toHaveBeenCalledWith(params);
+        expect(commit).toHaveBeenCalledWith('setLabelSummaryReport', [
+          { labelId: 789, labelName: 'Test Label' },
+        ]);
+        expect(commit).toHaveBeenCalledWith('setUIFlags', {
+          isFetchingLabelSummaryReports: false,
+        });
+      });
+    });
   });
 });

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

@@ -17,6 +17,11 @@ const typeMap = {
     apiMethod: 'getTeamReports',
     mutationKey: 'setTeamSummaryReport',
   },
+  label: {
+    flagKey: 'isFetchingLabelSummaryReports',
+    apiMethod: 'getLabelReports',
+    mutationKey: 'setLabelSummaryReport',
+  },
 };
 
 async function fetchSummaryReports(type, params, { commit }) {
@@ -38,10 +43,12 @@ export const initialState = {
   inboxSummaryReports: [],
   agentSummaryReports: [],
   teamSummaryReports: [],
+  labelSummaryReports: [],
   uiFlags: {
     isFetchingInboxSummaryReports: false,
     isFetchingAgentSummaryReports: false,
     isFetchingTeamSummaryReports: false,
+    isFetchingLabelSummaryReports: false,
   },
 };
 
@@ -55,6 +62,9 @@ export const getters = {
   getTeamSummaryReports(state) {
     return state.teamSummaryReports;
   },
+  getLabelSummaryReports(state) {
+    return state.labelSummaryReports;
+  },
   getUIFlags(state) {
     return state.uiFlags;
   },
@@ -72,6 +82,10 @@ export const actions = {
   fetchTeamSummaryReports({ commit }, params) {
     return fetchSummaryReports('team', params, { commit });
   },
+
+  fetchLabelSummaryReports({ commit }, params) {
+    return fetchSummaryReports('label', params, { commit });
+  },
 };
 
 export const mutations = {
@@ -84,6 +98,9 @@ export const mutations = {
   setTeamSummaryReport(state, data) {
     state.teamSummaryReports = data;
   },
+  setLabelSummaryReport(state, data) {
+    state.labelSummaryReports = data;
+  },
   setUIFlags(state, uiFlag) {
     state.uiFlags = { ...state.uiFlags, ...uiFlag };
   },