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/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 {