From 1038d1500ea2ea4738c03849b9699b77f7b03666 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Tue, 9 Apr 2024 05:44:36 +0530
Subject: [PATCH] feat: SLA reports view (#9189)

* feat: SLA report table


* feat: Add SLA popover card

* feat: Update popover position

* feat: Add loader

* Update SLACardLabel.vue

* feat: Update column order

* chore: fix conditions

* Update SLATable.vue

* chore: enable reports in ui

* chore: Revamp report SLA apis

* chore: revert download method

* chore: improve the code

* Update enterprise/app/views/api/v1/accounts/applied_slas/download.csv.erb

Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>

* chore: style fixes

* chore: fix specs

* feat: Add number of conversations

* chore: review comments

* fix: translation

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

Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>

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

Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>

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

Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>

* Update SLAReportItem.vue

* Update report.json

* Update package.json

* chore: review comments

* chore: remove unused translation

* feat: Add TableHeaderCell component

* chore: more review fixes

* Update app/javascript/dashboard/components/widgets/TableHeaderCell.vue

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

* Update TableHeaderCell.vue

---------

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
---
 .../layout/config/sidebarItems/reports.js     |   9 ++
 .../components/widgets/TableHeaderCell.vue    |  39 ++++++
 .../conversationCardComponents/CardLabels.vue |   5 +
 .../dashboard/i18n/locale/en/report.json      |  20 +++-
 .../dashboard/i18n/locale/en/settings.json    |   1 +
 .../mixins/conversation/labelMixin.js         |   4 +
 .../dashboard/settings/reports/SLAReports.vue |  78 ++++++++++++
 .../reports/components/FilterSelector.vue     |   4 +-
 .../reports/components/SLA/SLAMetrics.vue     |  17 ++-
 .../components/SLA/SLAReportFilters.vue       |  91 ++++++++++++++
 .../reports/components/SLA/SLAReportItem.vue  |  59 +++++++++
 .../reports/components/SLA/SLATable.vue       | 112 ++++++++++++++++++
 .../reports/components/SLA/SLAViewDetails.vue |  55 +++++++++
 .../settings/reports/reports.routes.js        |  18 +++
 .../dashboard/store/modules/SLAReports.js     |  19 +--
 .../modules/specs/slaReports/getters.spec.js  |  29 +++++
 .../specs/slaReports/mutations.spec.js        |   8 +-
 .../v1/accounts/applied_slas_controller.rb    |  46 ++++---
 enterprise/app/models/applied_sla.rb          |   2 +-
 .../v1/accounts/applied_slas/download.csv.erb |   6 +-
 .../accounts/applied_slas/index.json.jbuilder |  32 +++--
 .../applied_slas/metrics.json.jbuilder        |   2 +-
 package.json                                  |   2 +-
 .../accounts/applied_slas_controller_spec.rb  |  49 ++++----
 24 files changed, 623 insertions(+), 84 deletions(-)
 create mode 100644 app/javascript/dashboard/components/widgets/TableHeaderCell.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue

diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/reports.js b/app/javascript/dashboard/components/layout/config/sidebarItems/reports.js
index 551256c74..e7e4997fd 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/reports.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/reports.js
@@ -12,6 +12,7 @@ const reports = accountId => ({
     'label_reports',
     'inbox_reports',
     'team_reports',
+    'sla_reports',
   ],
   menuItems: [
     {
@@ -71,6 +72,14 @@ const reports = accountId => ({
       toState: frontendURL(`accounts/${accountId}/reports/teams`),
       toStateName: 'team_reports',
     },
+    {
+      icon: 'document-list-clock',
+      label: 'REPORTS_SLA',
+      hasSubMenu: false,
+      featureFlag: FEATURE_FLAGS.SLA,
+      toState: frontendURL(`accounts/${accountId}/reports/sla`),
+      toStateName: 'sla_reports',
+    },
   ],
 });
 
diff --git a/app/javascript/dashboard/components/widgets/TableHeaderCell.vue b/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
new file mode 100644
index 000000000..8e2cd6326
--- /dev/null
+++ b/app/javascript/dashboard/components/widgets/TableHeaderCell.vue
@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  span: {
+    type: Number,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+    default: '',
+  },
+});
+
+const spanClass = computed(() => {
+  if (props.span === 1) return 'col-span-1';
+  if (props.span === 2) return 'col-span-2';
+  if (props.span === 3) return 'col-span-3';
+  if (props.span === 4) return 'col-span-4';
+  if (props.span === 5) return 'col-span-5';
+  if (props.span === 6) return 'col-span-6';
+  if (props.span === 7) return 'col-span-7';
+  if (props.span === 8) return 'col-span-8';
+  if (props.span === 9) return 'col-span-9';
+  if (props.span === 10) return 'col-span-10';
+
+  return 'col-span-1';
+});
+</script>
+<template>
+  <div
+    class="flex items-center px-0 py-2 text-xs font-medium text-left uppercase text-slate-700 dark:text-slate-100 rtl:text-right"
+    :class="spanClass"
+  >
+    <slot>
+      {{ label }}
+    </slot>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
index c94e5389b..079d1c7bf 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
@@ -46,6 +46,11 @@ export default {
       type: Number,
       required: true,
     },
+    conversationLabels: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
diff --git a/app/javascript/dashboard/i18n/locale/en/report.json b/app/javascript/dashboard/i18n/locale/en/report.json
index c41e8b8a1..27beaa9ef 100644
--- a/app/javascript/dashboard/i18n/locale/en/report.json
+++ b/app/javascript/dashboard/i18n/locale/en/report.json
@@ -508,15 +508,29 @@
   },
   "SLA_REPORTS": {
     "HEADER": "SLA Reports",
+    "NO_RECORDS": "SLA applied conversations are not available.",
+    "LOADING": "Loading SLA data...",
     "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
         "TOOLTIP": "Percentage of SLAs created were completed successfully"
       },
-      "NO_OF_BREACHES": {
-        "LABEL": "Number of Breaches",
-        "TOOLTIP": "The total SLA breaches in a certain period."
+      "NO_OF_MISSES": {
+        "LABEL": "Number of Misses",
+        "TOOLTIP": "Total SLA misses in a certain period"
+      },
+      "NO_OF_CONVERSATIONS": {
+        "LABEL": "Number of Conversations",
+        "TOOLTIP": "Total number of conversations with SLA"
       }
+    },
+    "TABLE": {
+      "HEADER": {
+        "POLICY": "Policy",
+        "CONVERSATION": "Conversation",
+        "AGENT": "Agent"
+      },
+      "VIEW_DETAILS": "View Details"
     }
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index d9834c545..e9ac56f2a 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -240,6 +240,7 @@
     "CAMPAIGNS": "Campaigns",
     "ONGOING": "Ongoing",
     "ONE_OFF": "One off",
+    "REPORTS_SLA": "SLA",
     "REPORTS_BOT": "Bot",
     "REPORTS_AGENT": "Agents",
     "REPORTS_LABEL": "Labels",
diff --git a/app/javascript/dashboard/mixins/conversation/labelMixin.js b/app/javascript/dashboard/mixins/conversation/labelMixin.js
index 5d0e17507..6c9e954b6 100644
--- a/app/javascript/dashboard/mixins/conversation/labelMixin.js
+++ b/app/javascript/dashboard/mixins/conversation/labelMixin.js
@@ -4,6 +4,10 @@ export default {
   computed: {
     ...mapGetters({ accountLabels: 'labels/getLabels' }),
     savedLabels() {
+      // If conversationLabels is passed as prop, use it
+      if (this.conversationLabels)
+        return this.conversationLabels.split(',').map(item => item.trim());
+      // Otherwise, get labels from store
       return this.$store.getters['conversationLabels/getConversationLabels'](
         this.conversationId
       );
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
new file mode 100644
index 000000000..3c1f3775f
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="flex flex-col flex-1 px-4 pt-4 overflow-auto">
+    <SLAReportFilters @filter-change="onFilterChange" />
+    <div class="flex flex-col gap-6">
+      <SLAMetrics
+        :hit-rate="slaMetrics.hitRate"
+        :no-of-breaches="slaMetrics.numberOfSLAMisses"
+        :no-of-conversations="slaMetrics.numberOfConversations"
+        :is-loading="uiFlags.isFetchingMetrics"
+      />
+      <SLATable
+        :sla-reports="slaReports"
+        :is-loading="uiFlags.isFetching"
+        :current-page="Number(slaMeta.currentPage)"
+        :total-count="Number(slaMeta.count)"
+        @page-change="onPageChange"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+import SLAMetrics from './components/SLA/SLAMetrics.vue';
+import SLATable from './components/SLA/SLATable.vue';
+import SLAReportFilters from './components/SLA/SLAReportFilters.vue';
+
+export default {
+  name: 'SLAReports',
+  components: {
+    SLAMetrics,
+    SLATable,
+    SLAReportFilters,
+  },
+  data() {
+    return {
+      pageNumber: 1,
+      from: 0,
+      to: 0,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      slaReports: 'slaReports/getAll',
+      slaMetrics: 'slaReports/getMetrics',
+      slaMeta: 'slaReports/getMeta',
+      uiFlags: 'slaReports/getUIFlags',
+    }),
+  },
+  mounted() {
+    this.fetchSLAMetrics();
+    this.fetchSLAReports();
+  },
+  methods: {
+    fetchSLAReports({ pageNumber } = {}) {
+      this.$store.dispatch('slaReports/get', {
+        page: pageNumber || this.pageNumber,
+        from: this.from,
+        to: this.to,
+      });
+    },
+    fetchSLAMetrics() {
+      this.$store.dispatch('slaReports/getMetrics', {
+        from: this.from,
+        to: this.to,
+      });
+    },
+    onPageChange(pageNumber) {
+      this.fetchSLAReports({ pageNumber });
+    },
+    onFilterChange({ from, to }) {
+      this.from = from;
+      this.to = to;
+      this.fetchSLAReports();
+      this.fetchSLAMetrics();
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
index 84bae6198..0116f54d6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="flex flex-col md:flex-row justify-between mb-4">
-    <div class="md:grid flex flex-col filter-container gap-3 w-full">
+    <div
+      class="md:grid flex-col gap-3 w-full grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] p-5"
+    >
       <reports-filters-date-range @on-range-change="onDateRangeChange" />
       <woot-date-range-picker
         v-if="isDateRangeSelected"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
index 2abc1c601..5c598b403 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
@@ -13,9 +13,18 @@
       class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
     />
     <SLAMetricCard
-      :label="$t('SLA_REPORTS.METRICS.NO_OF_BREACHES.LABEL')"
+      :label="$t('SLA_REPORTS.METRICS.NO_OF_MISSES.LABEL')"
       :value="noOfBreaches"
-      :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_BREACHES.TOOLTIP')"
+      :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_MISSES.TOOLTIP')"
+      :is-loading="isLoading"
+    />
+    <div
+      class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
+    />
+    <SLAMetricCard
+      :label="$t('SLA_REPORTS.METRICS.NO_OF_CONVERSATIONS.LABEL')"
+      :value="noOfConversations"
+      :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_CONVERSATIONS.TOOLTIP')"
       :is-loading="isLoading"
     />
   </div>
@@ -32,6 +41,10 @@ defineProps({
     type: Number,
     required: true,
   },
+  noOfConversations: {
+    type: Number,
+    required: true,
+  },
   isLoading: {
     type: Boolean,
     default: false,
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
new file mode 100644
index 000000000..5748366b6
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="flex flex-col md:flex-row justify-between mb-4">
+    <div class="md:grid flex flex-col filter-container gap-3 w-full">
+      <reports-filters-date-range @on-range-change="onDateRangeChange" />
+      <woot-date-range-picker
+        v-if="isDateRangeSelected"
+        show-range
+        class="no-margin auto-width"
+        :value="customDateRange"
+        :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
+        :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
+        @change="onCustomDateRangeChange"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
+import ReportsFiltersDateRange from '../Filters/DateRange.vue';
+import subDays from 'date-fns/subDays';
+import { DATE_RANGE_OPTIONS } from '../../constants';
+import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';
+
+export default {
+  components: {
+    WootDateRangePicker,
+    ReportsFiltersDateRange,
+  },
+
+  data() {
+    return {
+      selectedDateRange: DATE_RANGE_OPTIONS.LAST_7_DAYS,
+      selectedGroupByFilter: null,
+      customDateRange: [new Date(), new Date()],
+    };
+  },
+  computed: {
+    isDateRangeSelected() {
+      return (
+        this.selectedDateRange.id === DATE_RANGE_OPTIONS.CUSTOM_DATE_RANGE.id
+      );
+    },
+    to() {
+      if (this.isDateRangeSelected) {
+        return getUnixEndOfDay(this.customDateRange[1]);
+      }
+      return getUnixEndOfDay(new Date());
+    },
+    from() {
+      if (this.isDateRangeSelected) {
+        return getUnixStartOfDay(this.customDateRange[0]);
+      }
+
+      const { offset } = this.selectedDateRange;
+      const fromDate = subDays(new Date(), offset);
+      return getUnixStartOfDay(fromDate);
+    },
+  },
+  watch: {
+    businessHoursSelected() {
+      this.emitChange();
+    },
+  },
+  mounted() {
+    this.emitChange();
+  },
+  methods: {
+    emitChange() {
+      const { from, to } = this;
+      this.$emit('filter-change', {
+        from,
+        to,
+      });
+    },
+    onDateRangeChange(selectedRange) {
+      this.selectedDateRange = selectedRange;
+      this.emitChange();
+    },
+    onCustomDateRangeChange(value) {
+      this.customDateRange = value;
+      this.emitChange();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.filter-container {
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
new file mode 100644
index 000000000..129265cdf
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
@@ -0,0 +1,59 @@
+<script setup>
+import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
+import CardLabels from 'dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue';
+import SLAViewDetails from './SLAViewDetails.vue';
+defineProps({
+  slaName: {
+    type: String,
+    required: true,
+  },
+  conversationId: {
+    type: Number,
+    required: true,
+  },
+  conversation: {
+    type: Object,
+    required: true,
+  },
+  slaEvents: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <div
+    class="grid content-center items-center h-16 grid-cols-12 gap-4 px-6 py-0 w-full bg-white border-b last:border-b-0 last:rounded-b-xl border-slate-75 dark:border-slate-800/50 dark:bg-slate-900"
+  >
+    <div
+      class="flex items-center gap-2 col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+    >
+      <span class="text-slate-700 dark:text-slate-200">
+        {{ `#${conversationId} ` }}
+      </span>
+      <span class="text-slate-600 dark:text-slate-300">with </span>
+      <span class="text-slate-700 dark:text-slate-200 capitalize truncate">{{
+        conversation.contact.name
+      }}</span>
+      <card-labels
+        class="w-[80%]"
+        :conversation-id="conversationId"
+        :conversation-labels="conversation.labels"
+      />
+    </div>
+    <div
+      class="flex items-center capitalize py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-50 text-left rtl:text-right col-span-2"
+    >
+      {{ slaName }}
+    </div>
+    <div class="flex items-center gap-2 col-span-2">
+      <user-avatar-with-name
+        v-if="conversation.assignee"
+        :user="conversation.assignee"
+      />
+      <span v-else class="text-slate-600 dark:text-slate-200"> --- </span>
+    </div>
+    <SLAViewDetails :sla-events="slaEvents" />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
new file mode 100644
index 000000000..b761c699a
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <div
+      class="min-w-full border rounded-xl border-slate-75 dark:border-slate-700/50"
+    >
+      <div
+        class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 border-b bg-slate-25 border-slate-75 dark:border-slate-800 rounded-t-xl dark:bg-slate-900"
+      >
+        <table-header-cell
+          :span="6"
+          :label="$t('SLA_REPORTS.TABLE.HEADER.CONVERSATION')"
+        />
+        <table-header-cell
+          :span="2"
+          :label="$t('SLA_REPORTS.TABLE.HEADER.POLICY')"
+        />
+        <table-header-cell
+          :span="2"
+          :label="$t('SLA_REPORTS.TABLE.HEADER.AGENT')"
+        />
+        <table-header-cell :span="2" label="" />
+      </div>
+
+      <div
+        v-if="isLoading"
+        class="flex items-center justify-center h-32 bg-white dark:bg-slate-900"
+      >
+        <spinner />
+        <span>{{ $t('SLA_REPORTS.LOADING') }}</span>
+      </div>
+      <div v-else-if="slaReports.length > 0">
+        <SLA-report-item
+          v-for="slaReport in slaReports"
+          :key="slaReport.applied_sla.id"
+          :sla-name="slaReport.applied_sla.sla_name"
+          :conversation="slaReport.conversation"
+          :conversation-id="slaReport.conversation.id"
+          :sla-events="slaReport.sla_events"
+        />
+      </div>
+      <div
+        v-else
+        class="flex items-center justify-center h-32 bg-white dark:bg-slate-900"
+      >
+        {{ $t('SLA_REPORTS.NO_RECORDS') }}
+      </div>
+    </div>
+    <table-footer
+      v-if="shouldShowFooter"
+      :current-page="currentPage"
+      :total-count="totalCount"
+      :page-size="pageSize"
+      class="bg-slate-25 dark:bg-slate-900 sticky bottom-0 border-none mt-4"
+      @page-change="onPageChange"
+    />
+  </div>
+</template>
+
+<script>
+import TableFooter from 'dashboard/components/widgets/TableFooter.vue';
+import TableHeaderCell from 'dashboard/components/widgets/TableHeaderCell.vue';
+import SLAReportItem from './SLAReportItem.vue';
+import Spinner from 'shared/components/Spinner.vue';
+export default {
+  name: 'SLATable',
+  components: {
+    SLAReportItem,
+    TableFooter,
+    Spinner,
+    TableHeaderCell,
+  },
+  props: {
+    slaReports: {
+      type: Array,
+      default: () => [],
+    },
+    totalCount: {
+      type: Number,
+      default: 0,
+    },
+    currentPage: {
+      type: Number,
+      default: 1,
+    },
+    pageSize: {
+      type: Number,
+      default: 25,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      pageNo: 1,
+    };
+  },
+  computed: {
+    shouldShowFooter() {
+      return this.currentPage === 1
+        ? this.totalCount > this.pageSize
+        : this.slaReports.length > 0;
+    },
+  },
+  methods: {
+    onPageChange(page) {
+      this.$emit('page-change', page);
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
new file mode 100644
index 000000000..72bc4749a
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAViewDetails.vue
@@ -0,0 +1,55 @@
+<template>
+  <div v-on-clickaway="closeSlaEvents" class="label-wrap">
+    <div
+      class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+    >
+      <div class="relative">
+        <woot-button
+          color-scheme="secondary"
+          variant="link"
+          @click="openSlaEvents"
+        >
+          {{ $t('SLA_REPORTS.TABLE.VIEW_DETAILS') }}
+        </woot-button>
+        <SLA-popover-card
+          v-if="showSlaPopoverCard"
+          :all-missed-slas="slaEvents"
+          class="right-0"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway';
+import SLAPopoverCard from 'dashboard/components/widgets/conversation/components/SLAPopoverCard.vue';
+export default {
+  components: {
+    SLAPopoverCard,
+  },
+  mixins: [clickaway],
+
+  props: {
+    slaEvents: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  data() {
+    return {
+      showSlaPopoverCard: false,
+    };
+  },
+
+  methods: {
+    closeSlaEvents() {
+      this.showSlaPopoverCard = false;
+    },
+    openSlaEvents() {
+      this.showSlaPopoverCard = !this.showSlaPopoverCard;
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
index 5e363553d..3792567da 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/reports.routes.js
@@ -9,6 +9,7 @@ const TeamReports = () => import('./TeamReports.vue');
 const CsatResponses = () => import('./CsatResponses.vue');
 const BotReports = () => import('./BotReports.vue');
 const LiveReports = () => import('./LiveReports.vue');
+const SLAReports = () => import('./SLAReports.vue');
 
 export default {
   routes: [
@@ -151,5 +152,22 @@ export default {
         },
       ],
     },
+    {
+      path: frontendURL('accounts/:accountId/reports'),
+      component: SettingsContent,
+      props: {
+        headerTitle: 'SLA_REPORTS.HEADER',
+        icon: 'document-list-clock',
+        keepAlive: false,
+      },
+      children: [
+        {
+          path: 'sla',
+          name: 'sla_reports',
+          roles: ['administrator'],
+          component: SLAReports,
+        },
+      ],
+    },
   ],
 };
diff --git a/app/javascript/dashboard/store/modules/SLAReports.js b/app/javascript/dashboard/store/modules/SLAReports.js
index 44c11fd0c..08ac714f7 100644
--- a/app/javascript/dashboard/store/modules/SLAReports.js
+++ b/app/javascript/dashboard/store/modules/SLAReports.js
@@ -5,7 +5,8 @@ import SLAReportsAPI from '../../api/slaReports';
 export const state = {
   records: [],
   metrics: {
-    numberOfSLABreaches: 0,
+    numberOfConversations: 0,
+    numberOfSLAMisses: 0,
     hitRate: '0%',
   },
   uiFlags: {
@@ -72,19 +73,21 @@ export const mutations = {
   [types.SET_SLA_REPORTS]: MutationHelpers.set,
   [types.SET_SLA_REPORTS_METRICS](
     _state,
-    { number_of_sla_breaches: numberOfSLABreaches, hit_rate: hitRate }
+    {
+      number_of_sla_misses: numberOfSLAMisses,
+      hit_rate: hitRate,
+      total_applied_slas: numberOfConversations,
+    }
   ) {
     _state.metrics = {
-      numberOfSLABreaches,
+      numberOfSLAMisses,
       hitRate,
+      numberOfConversations,
     };
   },
-  [types.SET_SLA_REPORTS_META](
-    _state,
-    { total_applied_slas: totalAppliedSLAs, current_page: currentPage }
-  ) {
+  [types.SET_SLA_REPORTS_META](_state, { count, current_page: currentPage }) {
     _state.meta = {
-      count: totalAppliedSLAs,
+      count,
       currentPage,
     };
   },
diff --git a/app/javascript/dashboard/store/modules/specs/slaReports/getters.spec.js b/app/javascript/dashboard/store/modules/specs/slaReports/getters.spec.js
index 6eddb3f60..c50a72027 100644
--- a/app/javascript/dashboard/store/modules/specs/slaReports/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/slaReports/getters.spec.js
@@ -21,4 +21,33 @@ describe('#getters', () => {
       isFetchingMetrics: false,
     });
   });
+
+  it('getMeta', () => {
+    const state = {
+      meta: {
+        count: 0,
+        currentPage: 1,
+      },
+    };
+    expect(getters.getMeta(state)).toEqual({
+      count: 0,
+      currentPage: 1,
+    });
+  });
+
+  it('getMetrics', () => {
+    const state = {
+      metrics: {
+        numberOfConversations: 27,
+        numberOfSLAMisses: 25,
+        hitRate: '7.41%',
+      },
+    };
+
+    expect(getters.getMetrics(state)).toEqual({
+      numberOfConversations: 27,
+      numberOfSLAMisses: 25,
+      hitRate: '7.41%',
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/modules/specs/slaReports/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/slaReports/mutations.spec.js
index 04e171889..fbeced61d 100644
--- a/app/javascript/dashboard/store/modules/specs/slaReports/mutations.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/slaReports/mutations.spec.js
@@ -23,12 +23,14 @@ describe('#mutations', () => {
     it('set metrics', () => {
       const state = { metrics: {} };
       mutations[types.SET_SLA_REPORTS_METRICS](state, {
-        number_of_sla_breaches: 1,
+        number_of_sla_misses: 1,
         hit_rate: '100%',
+        total_applied_slas: 1,
       });
       expect(state.metrics).toEqual({
-        numberOfSLABreaches: 1,
+        numberOfSLAMisses: 1,
         hitRate: '100%',
+        numberOfConversations: 1,
       });
     });
   });
@@ -37,7 +39,7 @@ describe('#mutations', () => {
     it('set meta', () => {
       const state = { meta: {} };
       mutations[types.SET_SLA_REPORTS_META](state, {
-        total_applied_slas: 1,
+        count: 1,
         current_page: 1,
       });
       expect(state.meta).toEqual({
diff --git a/enterprise/app/controllers/api/v1/accounts/applied_slas_controller.rb b/enterprise/app/controllers/api/v1/accounts/applied_slas_controller.rb
index 4ec27bbbb..e195686a3 100644
--- a/enterprise/app/controllers/api/v1/accounts/applied_slas_controller.rb
+++ b/enterprise/app/controllers/api/v1/accounts/applied_slas_controller.rb
@@ -6,22 +6,23 @@ class Api::V1::Accounts::AppliedSlasController < Api::V1::Accounts::EnterpriseAc
 
   before_action :set_applied_slas, only: [:index, :metrics, :download]
   before_action :set_current_page, only: [:index]
-  before_action :paginate_slas, only: [:index]
   before_action :check_admin_authorization?
 
   sort_on :created_at, type: :datetime
 
-  def index; end
+  def index
+    @count = number_of_sla_misses
+    @applied_slas = @missed_applied_slas.page(@current_page).per(RESULTS_PER_PAGE)
+  end
 
   def metrics
     @total_applied_slas = total_applied_slas
-    @number_of_sla_breaches = number_of_sla_breaches
+    @number_of_sla_misses = number_of_sla_misses
     @hit_rate = hit_rate
   end
 
   def download
-    @breached_slas = breached_slas
-
+    @missed_applied_slas = missed_applied_slas
     response.headers['Content-Type'] = 'text/csv'
     response.headers['Content-Disposition'] = 'attachment; filename=breached_conversation.csv'
     render layout: false, formats: [:csv]
@@ -29,41 +30,38 @@ class Api::V1::Accounts::AppliedSlasController < Api::V1::Accounts::EnterpriseAc
 
   private
 
-  def breached_slas
-    @applied_slas.includes(:sla_policy).joins(:conversation)
-                 .where.not(conversations: { status: :resolved })
-                 .where(applied_slas: { sla_status: :missed })
-  end
-
   def total_applied_slas
     @total_applied_slas ||= @applied_slas.count
   end
 
-  def number_of_sla_breaches
-    @number_of_sla_breaches ||= @applied_slas.missed.count
+  def number_of_sla_misses
+    @number_of_sla_misses ||= missed_applied_slas.count
   end
 
   def hit_rate
-    number_of_sla_breaches.zero? ? '100%' : "#{hit_rate_percentage}%"
+    number_of_sla_misses.zero? ? '100%' : "#{hit_rate_percentage}%"
   end
 
   def hit_rate_percentage
-    ((total_applied_slas - number_of_sla_breaches) / total_applied_slas.to_f * 100).round(2)
+    ((total_applied_slas - number_of_sla_misses) / total_applied_slas.to_f * 100).round(2)
   end
 
   def set_applied_slas
     initial_query = Current.account.applied_slas.includes(:conversation)
-    @applied_slas = initial_query
-                    .filter_by_date_range(range)
-                    .filter_by_inbox_id(params[:inbox_id])
-                    .filter_by_team_id(params[:team_id])
-                    .filter_by_sla_policy_id(params[:sla_policy_id])
-                    .filter_by_label_list(params[:label_list])
-                    .filter_by_assigned_agent_id(params[:assigned_agent_id])
+    @applied_slas = apply_filters(initial_query)
   end
 
-  def paginate_slas
-    @applied_slas = @applied_slas.page(@current_page).per(RESULTS_PER_PAGE)
+  def apply_filters(query)
+    query.filter_by_date_range(range)
+         .filter_by_inbox_id(params[:inbox_id])
+         .filter_by_team_id(params[:team_id])
+         .filter_by_sla_policy_id(params[:sla_policy_id])
+         .filter_by_label_list(params[:label_list])
+         .filter_by_assigned_agent_id(params[:assigned_agent_id])
+  end
+
+  def missed_applied_slas
+    @missed_applied_slas ||= @applied_slas.missed
   end
 
   def set_current_page
diff --git a/enterprise/app/models/applied_sla.rb b/enterprise/app/models/applied_sla.rb
index ce67fad07..0ae634536 100644
--- a/enterprise/app/models/applied_sla.rb
+++ b/enterprise/app/models/applied_sla.rb
@@ -39,7 +39,7 @@ class AppliedSla < ApplicationRecord
                                           joins(:conversation).where(conversations: { assigned_agent_id: assigned_agent_id })
                                         end
                                       }
-  scope :missed, -> { where(sla_status: :missed) }
+  scope :missed, -> { where(sla_status: %i[missed active_with_misses]) }
 
   after_update_commit :push_conversation_event
 
diff --git a/enterprise/app/views/api/v1/accounts/applied_slas/download.csv.erb b/enterprise/app/views/api/v1/accounts/applied_slas/download.csv.erb
index 676d6d680..9078eff25 100644
--- a/enterprise/app/views/api/v1/accounts/applied_slas/download.csv.erb
+++ b/enterprise/app/views/api/v1/accounts/applied_slas/download.csv.erb
@@ -10,8 +10,8 @@
 ] %>
 <%= CSV.generate_line headers %>
 
-<% @breached_slas.each do |sla| %>
-  <% breached_events = sla.sla_events.map(&:event_type).join(', ') %>
+<% @missed_applied_slas.each do |sla| %>
+  <% missed_events = sla.sla_events.map(&:event_type).join(', ') %>
   <% conversation = sla.conversation %>
   <%= CSV.generate_line([
     conversation.display_id,
@@ -21,6 +21,6 @@
     conversation.inbox&.name,
     conversation.cached_label_list,
     app_account_conversation_url(account_id: conversation.account_id, id: conversation.display_id),
-    breached_events
+    missed_events
   ]) %>
 <% end %>
diff --git a/enterprise/app/views/api/v1/accounts/applied_slas/index.json.jbuilder b/enterprise/app/views/api/v1/accounts/applied_slas/index.json.jbuilder
index e9a905d56..35b723807 100644
--- a/enterprise/app/views/api/v1/accounts/applied_slas/index.json.jbuilder
+++ b/enterprise/app/views/api/v1/accounts/applied_slas/index.json.jbuilder
@@ -1,14 +1,22 @@
-json.array! @applied_slas do |applied_sla|
-  json.id applied_sla.id
-  json.sla_policy_id applied_sla.sla_policy_id
-  json.conversation_id applied_sla.conversation_id
-  json.sla_status applied_sla.sla_status
-  json.created_at applied_sla.created_at
-  json.updated_at applied_sla.updated_at
-  json.conversation do
-    json.partial! 'api/v1/models/conversation', conversation: applied_sla.conversation
-  end
-  json.sla_events applied_sla.sla_events do |sla_event|
-    json.partial! 'api/v1/models/sla_event', formats: [:json], sla_event: sla_event
+json.payload do
+  json.array! @applied_slas do |applied_sla|
+    json.applied_sla applied_sla.push_event_data
+    json.conversation do
+      conversation = applied_sla.conversation
+      json.id conversation.id
+      json.contact do
+        json.name conversation.contact.name if conversation.contact
+      end
+      json.labels conversation.cached_label_list
+      json.assignee conversation.assignee.push_event_data if conversation.assignee
+    end
+    json.sla_events applied_sla.sla_events do |sla_event|
+      json.partial! 'api/v1/models/sla_event', formats: [:json], sla_event: sla_event
+    end
   end
 end
+
+json.meta do
+  json.count @count
+  json.current_page @current_page
+end
diff --git a/enterprise/app/views/api/v1/accounts/applied_slas/metrics.json.jbuilder b/enterprise/app/views/api/v1/accounts/applied_slas/metrics.json.jbuilder
index 13f184845..2752d901a 100644
--- a/enterprise/app/views/api/v1/accounts/applied_slas/metrics.json.jbuilder
+++ b/enterprise/app/views/api/v1/accounts/applied_slas/metrics.json.jbuilder
@@ -1,3 +1,3 @@
 json.total_applied_slas @total_applied_slas
-json.number_of_sla_breaches @number_of_sla_breaches
+json.number_of_sla_misses @number_of_sla_misses
 json.hit_rate @hit_rate
diff --git a/package.json b/package.json
index 313821424..e981ac52d 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
   "size-limit": [
     {
       "path": "public/packs/js/widget-*.js",
-      "limit": "280 KB"
+      "limit": "281 KB"
     },
     {
       "path": "public/packs/js/sdk.js",
diff --git a/spec/enterprise/controllers/api/v1/accounts/applied_slas_controller_spec.rb b/spec/enterprise/controllers/api/v1/accounts/applied_slas_controller_spec.rb
index 3945c8c93..34389dad4 100644
--- a/spec/enterprise/controllers/api/v1/accounts/applied_slas_controller_spec.rb
+++ b/spec/enterprise/controllers/api/v1/accounts/applied_slas_controller_spec.rb
@@ -33,7 +33,7 @@ RSpec.describe 'Applied SLAs API', type: :request do
         body = JSON.parse(response.body)
 
         expect(body).to include('total_applied_slas' => 1)
-        expect(body).to include('number_of_sla_breaches' => 1)
+        expect(body).to include('number_of_sla_misses' => 1)
         expect(body).to include('hit_rate' => '0.0%')
       end
 
@@ -48,7 +48,7 @@ RSpec.describe 'Applied SLAs API', type: :request do
         body = JSON.parse(response.body)
 
         expect(body).to include('total_applied_slas' => 1)
-        expect(body).to include('number_of_sla_breaches' => 0)
+        expect(body).to include('number_of_sla_misses' => 0)
         expect(body).to include('hit_rate' => '100%')
       end
 
@@ -64,7 +64,7 @@ RSpec.describe 'Applied SLAs API', type: :request do
         body = JSON.parse(response.body)
 
         expect(body).to include('total_applied_slas' => 3)
-        expect(body).to include('number_of_sla_breaches' => 1)
+        expect(body).to include('number_of_sla_misses' => 1)
         expect(body).to include('hit_rate' => '66.67%')
       end
 
@@ -80,7 +80,7 @@ RSpec.describe 'Applied SLAs API', type: :request do
         body = JSON.parse(response.body)
 
         expect(body).to include('total_applied_slas' => 2)
-        expect(body).to include('number_of_sla_breaches' => 1)
+        expect(body).to include('number_of_sla_misses' => 1)
         expect(body).to include('hit_rate' => '50.0%')
       end
 
@@ -98,7 +98,7 @@ RSpec.describe 'Applied SLAs API', type: :request do
         body = JSON.parse(response.body)
 
         expect(body).to include('total_applied_slas' => 2)
-        expect(body).to include('number_of_sla_breaches' => 1)
+        expect(body).to include('number_of_sla_misses' => 1)
         expect(body).to include('hit_rate' => '50.0%')
       end
     end
@@ -128,7 +128,7 @@ RSpec.describe 'Applied SLAs API', type: :request do
 
         csv_data = CSV.parse(response.body)
         csv_data.reject! { |row| row.all?(&:nil?) }
-        expect(csv_data.size).to eq(2)
+        expect(csv_data.size).to eq(3)
         expect(csv_data[1][0].to_i).to eq(conversation1.display_id)
       end
     end
@@ -145,21 +145,20 @@ RSpec.describe 'Applied SLAs API', type: :request do
     context 'when it is an authenticated user' do
       it 'returns the applied slas' do
         create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1)
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, sla_status: 'missed')
         get "/api/v1/accounts/#{account.id}/applied_slas",
             headers: administrator.create_new_auth_token
         expect(response).to have_http_status(:success)
         body = JSON.parse(response.body)
-
-        expect(body.size).to eq(2)
-        expect(body.first).to include('id')
-        expect(body.first).to include('sla_policy_id' => sla_policy1.id)
-        expect(body.first).to include('conversation_id' => conversation1.id)
+        expect(body['payload'].size).to eq(1)
+        expect(body['payload'].first).to include('applied_sla')
+        expect(body['payload'].first['conversation']['id']).to eq(conversation2.id)
+        expect(body['meta']).to include('count' => 1)
       end
 
       it 'filters applied slas based on a date range' do
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago)
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago, sla_status: 'missed')
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago, sla_status: 'missed')
 
         get "/api/v1/accounts/#{account.id}/applied_slas",
             params: { since: 5.days.ago.to_time.to_i.to_s, until: Time.zone.today.to_time.to_i.to_s },
@@ -167,13 +166,13 @@ RSpec.describe 'Applied SLAs API', type: :request do
         expect(response).to have_http_status(:success)
         body = JSON.parse(response.body)
 
-        expect(body.size).to eq(1)
+        expect(body['payload'].size).to eq(1)
       end
 
       it 'filters applied slas based on a date range and agent ids' do
         create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago)
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation3, created_at: 3.days.ago)
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation3, created_at: 3.days.ago, sla_status: 'missed')
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago, sla_status: 'active_with_misses')
 
         get "/api/v1/accounts/#{account.id}/applied_slas",
             params: { agent_ids: [agent2.id] },
@@ -181,13 +180,13 @@ RSpec.describe 'Applied SLAs API', type: :request do
         expect(response).to have_http_status(:success)
         body = JSON.parse(response.body)
 
-        expect(body.size).to eq(3)
+        expect(body['payload'].size).to eq(2)
       end
 
       it 'filters applied slas based on sla policy ids' do
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, sla_status: 'missed')
         create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2)
-        create(:applied_sla, sla_policy: sla_policy2, conversation: conversation2)
+        create(:applied_sla, sla_policy: sla_policy2, conversation: conversation2, sla_status: 'active_with_misses')
 
         get "/api/v1/accounts/#{account.id}/applied_slas",
             params: { sla_policy_id: sla_policy1.id },
@@ -195,15 +194,15 @@ RSpec.describe 'Applied SLAs API', type: :request do
         expect(response).to have_http_status(:success)
         body = JSON.parse(response.body)
 
-        expect(body.size).to eq(2)
+        expect(body['payload'].size).to eq(1)
       end
 
       it 'filters applied slas based on labels' do
         conversation2.update_labels('label1')
         conversation3.update_labels('label1')
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago)
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago)
-        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation3, created_at: 3.days.ago)
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation1, created_at: 10.days.ago, sla_status: 'active_with_misses')
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation2, created_at: 3.days.ago, sla_status: 'missed')
+        create(:applied_sla, sla_policy: sla_policy1, conversation: conversation3, created_at: 3.days.ago, sla_status: 'missed')
 
         get "/api/v1/accounts/#{account.id}/applied_slas",
             params: { label_list: ['label1'] },
@@ -211,7 +210,7 @@ RSpec.describe 'Applied SLAs API', type: :request do
         expect(response).to have_http_status(:success)
         body = JSON.parse(response.body)
 
-        expect(body.size).to eq(2)
+        expect(body['payload'].size).to eq(2)
       end
     end
   end