From 5ab9efc464405f554a5cad588a51739ff63c946f Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Wed, 27 Mar 2024 11:46:34 +0530
Subject: [PATCH 1/6] feat: Add SLA reports page

---
 .../layout/config/sidebarItems/reports.js      |  7 +++++++
 .../dashboard/i18n/locale/en/report.json       |  3 +++
 .../dashboard/i18n/locale/en/settings.json     |  1 +
 .../dashboard/settings/reports/SLAReports.vue  | 11 +++++++++++
 .../settings/reports/reports.routes.js         | 18 ++++++++++++++++++
 5 files changed, 40 insertions(+)
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.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..1e4deeb28 100644
--- a/app/javascript/dashboard/components/layout/config/sidebarItems/reports.js
+++ b/app/javascript/dashboard/components/layout/config/sidebarItems/reports.js
@@ -71,6 +71,13 @@ const reports = accountId => ({
       toState: frontendURL(`accounts/${accountId}/reports/teams`),
       toStateName: 'team_reports',
     },
+    {
+      icon: 'people',
+      label: 'REPORTS_SLA',
+      hasSubMenu: false,
+      toState: frontendURL(`accounts/${accountId}/reports/sla`),
+      toStateName: 'sla_reports',
+    },
   ],
 });
 
diff --git a/app/javascript/dashboard/i18n/locale/en/report.json b/app/javascript/dashboard/i18n/locale/en/report.json
index 56ca21773..b74fdb8f2 100644
--- a/app/javascript/dashboard/i18n/locale/en/report.json
+++ b/app/javascript/dashboard/i18n/locale/en/report.json
@@ -505,5 +505,8 @@
     "THURSDAY": "Thursday",
     "FRIDAY": "Friday",
     "SATURDAY": "Saturday"
+  },
+  "SLA_REPORTS": {
+    "HEADER": "SLA Reports"
   }
 }
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 9a4bde2c8..3d37b7bf5 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -239,6 +239,7 @@
     "REPORTS_LABEL": "Labels",
     "REPORTS_INBOX": "Inbox",
     "REPORTS_TEAM": "Team",
+    "REPORTS_SLA": "SLA",
     "SET_AVAILABILITY_TITLE": "Set yourself as",
     "SLA": "SLA",
     "BETA": "Beta",
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..b917cf5ef
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="flex-1 overflow-auto p-4">
+    <h1>SLA Reports</h1>
+  </div>
+</template>
+<script>
+import { defineComponent, ref, watch, watchEffect } from 'vue';
+export default {
+  name: 'SLAReports',
+};
+</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..7d14eb804 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: 'people-team',
+        keepAlive: false,
+      },
+      children: [
+        {
+          path: 'sla',
+          name: 'sla_reports',
+          roles: ['administrator'],
+          component: SLAReports,
+        },
+      ],
+    },
   ],
 };

From 5abe802198ea1e6661de6bdb49855951a0aaa353 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Wed, 27 Mar 2024 15:24:39 +0530
Subject: [PATCH 2/6] feat: Add SLA table

---
 .../dashboard/settings/reports/SLAMetrics.vue | 54 ++++++++++++++++++
 .../dashboard/settings/reports/SLAReports.vue | 12 +++-
 .../dashboard/settings/reports/SLATable.vue   | 55 +++++++++++++++++++
 3 files changed, 118 insertions(+), 3 deletions(-)
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/SLAMetrics.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/SLATable.vue

diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAMetrics.vue
new file mode 100644
index 000000000..90a4bbb6f
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAMetrics.vue
@@ -0,0 +1,54 @@
+<script setup>
+// defineProps({
+//   keepAlive: {
+//     type: Boolean,
+//     default: true,
+//   },
+// });
+</script>
+
+<template>
+  <div
+    class="flex w-full gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4 max-h-[92px] h-full"
+  >
+    <div class="flex flex-col items-start justify-center min-w-[160px] gap-2">
+      <span
+        class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm text-slate-700 dark:text-slate-200 font-medium"
+      >
+        Hit rate
+        <fluent-icon
+          v-tooltip.right="`Hit rate`"
+          size="14"
+          icon="information"
+          type="outline"
+          class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-slate-500 dark:text-slate-500"
+        />
+      </span>
+      <span
+        class="text-2xl font-medium text-slate-900 dark:text-slate-25 tracking-[-1.5%]"
+      >
+        12%
+      </span>
+    </div>
+    <div class="border border-slate-75 dark:border-slate-700/50 h-full w-px" />
+    <div class="flex flex-col gap-2 items-start justify-center min-w-[160px]">
+      <span
+        class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm text-slate-700 dark:text-slate-200 font-medium"
+      >
+        No. of breaches
+        <fluent-icon
+          v-tooltip.right="`No of breaches`"
+          size="14"
+          icon="information"
+          type="outline"
+          class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-slate-500 dark:text-slate-500"
+        />
+      </span>
+      <span
+        class="text-2xl font-medium text-slate-900 dark:text-slate-25 tracking-[-1.5%]"
+      >
+        5
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
index b917cf5ef..fa83baa53 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
@@ -1,11 +1,17 @@
 <template>
-  <div class="flex-1 overflow-auto p-4">
-    <h1>SLA Reports</h1>
+  <div class="flex flex-col flex-1 overflow-auto p-4 font-inter gap-6">
+    <SLAMetrics />
+    <SLATable />
   </div>
 </template>
 <script>
-import { defineComponent, ref, watch, watchEffect } from 'vue';
+import SLAMetrics from './SLAMetrics.vue';
+import SLATable from './SLATable.vue';
 export default {
   name: 'SLAReports',
+  components: {
+    SLAMetrics,
+    SLATable,
+  },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLATable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLATable.vue
new file mode 100644
index 000000000..b930037cf
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLATable.vue
@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="min-w-full border rounded-xl border-slate-75 dark:border-slate-800/50"
+  >
+    <!-- Header -->
+    <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"
+    >
+      <div
+        class="flex items-center font-medium capitalize text-xs py-2 px-0 tracking-[10%] text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-2"
+      >
+        POLICY BREACHED
+      </div>
+      <div
+        class="flex items-center col-span-6 px-0 py-2 text-xs font-medium text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        CONVERSATION
+      </div>
+      <div
+        class="flex items-center px-0 text-xs font-medium text-left capitalize col-span-2py-2 text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        AGENT
+      </div>
+      <div
+        class="col-span-2 px-0 py-2 text-xs font-medium text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
+      />
+    </div>
+    <div
+      class="grid content-center h-16 grid-cols-12 gap-4 px-6 py-0 bg-white border-b border-slate-75 dark:border-slate-800/50 dark:bg-slate-900"
+    >
+      <div
+        class="flex items-center capitalize py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-2"
+      >
+        Premium SLA
+      </div>
+      <div
+        class="flex items-center col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        #198 with John Doe
+      </div>
+      <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"
+      >
+        Elijah
+      </div>
+      <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"
+      >
+        <woot-button color-scheme="secondary" variant="link">
+          View details
+        </woot-button>
+      </div>
+    </div>
+  </div>
+</template>

From d4d5734a045b52bb080379800a5e4b5f8d40f87e Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Wed, 27 Mar 2024 22:06:59 +0530
Subject: [PATCH 3/6] SLAMetrics.vue

---
 .../dashboard/i18n/locale/en/report.json      | 12 ++++-
 .../dashboard/settings/reports/SLAMetrics.vue | 54 -------------------
 .../dashboard/settings/reports/SLAReports.vue |  8 +--
 .../reports/components/SLA/SLAMetricCard.vue  | 38 +++++++++++++
 .../reports/components/SLA/SLAMetrics.vue     | 31 +++++++++++
 .../reports/{ => components/SLA}/SLATable.vue |  0
 6 files changed, 84 insertions(+), 59 deletions(-)
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/SLAMetrics.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
 rename app/javascript/dashboard/routes/dashboard/settings/reports/{ => components/SLA}/SLATable.vue (100%)

diff --git a/app/javascript/dashboard/i18n/locale/en/report.json b/app/javascript/dashboard/i18n/locale/en/report.json
index b74fdb8f2..6afd5cddd 100644
--- a/app/javascript/dashboard/i18n/locale/en/report.json
+++ b/app/javascript/dashboard/i18n/locale/en/report.json
@@ -507,6 +507,16 @@
     "SATURDAY": "Saturday"
   },
   "SLA_REPORTS": {
-    "HEADER": "SLA Reports"
+    "HEADER": "SLA Reports",
+    "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."
+      }
+    }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAMetrics.vue
deleted file mode 100644
index 90a4bbb6f..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAMetrics.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup>
-// defineProps({
-//   keepAlive: {
-//     type: Boolean,
-//     default: true,
-//   },
-// });
-</script>
-
-<template>
-  <div
-    class="flex w-full gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4 max-h-[92px] h-full"
-  >
-    <div class="flex flex-col items-start justify-center min-w-[160px] gap-2">
-      <span
-        class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm text-slate-700 dark:text-slate-200 font-medium"
-      >
-        Hit rate
-        <fluent-icon
-          v-tooltip.right="`Hit rate`"
-          size="14"
-          icon="information"
-          type="outline"
-          class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-slate-500 dark:text-slate-500"
-        />
-      </span>
-      <span
-        class="text-2xl font-medium text-slate-900 dark:text-slate-25 tracking-[-1.5%]"
-      >
-        12%
-      </span>
-    </div>
-    <div class="border border-slate-75 dark:border-slate-700/50 h-full w-px" />
-    <div class="flex flex-col gap-2 items-start justify-center min-w-[160px]">
-      <span
-        class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm text-slate-700 dark:text-slate-200 font-medium"
-      >
-        No. of breaches
-        <fluent-icon
-          v-tooltip.right="`No of breaches`"
-          size="14"
-          icon="information"
-          type="outline"
-          class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-slate-500 dark:text-slate-500"
-        />
-      </span>
-      <span
-        class="text-2xl font-medium text-slate-900 dark:text-slate-25 tracking-[-1.5%]"
-      >
-        5
-      </span>
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
index fa83baa53..f5dce84ed 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="flex flex-col flex-1 overflow-auto p-4 font-inter gap-6">
-    <SLAMetrics />
+  <div class="flex flex-col flex-1 gap-6 p-4 overflow-auto font-inter">
+    <SLAMetrics :hit-rate="`12%`" :no-of-breaches="5" />
     <SLATable />
   </div>
 </template>
 <script>
-import SLAMetrics from './SLAMetrics.vue';
-import SLATable from './SLATable.vue';
+import SLAMetrics from './components/SLA/SLAMetrics.vue';
+import SLATable from './components/SLA/SLATable.vue';
 export default {
   name: 'SLAReports',
   components: {
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
new file mode 100644
index 000000000..50d356d46
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
@@ -0,0 +1,38 @@
+<script setup>
+defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  value: {
+    type: [String, Number],
+    required: true,
+  },
+  toolTip: {
+    type: String,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 items-start justify-center min-w-[160px]">
+    <span
+      class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm text-slate-700 dark:text-slate-200 font-medium"
+    >
+      {{ label }}
+      <fluent-icon
+        v-tooltip.right="toolTip"
+        size="14"
+        icon="information"
+        type="outline"
+        class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-slate-500 dark:text-slate-500"
+      />
+    </span>
+    <span
+      class="text-2xl font-medium text-slate-900 dark:text-slate-25 tracking-[-1.5%]"
+    >
+      {{ value }}
+    </span>
+  </div>
+</template>
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
new file mode 100644
index 000000000..848ea081c
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetrics.vue
@@ -0,0 +1,31 @@
+<script setup>
+import SLAMetricCard from './SLAMetricCard.vue';
+defineProps({
+  hitRate: {
+    type: String,
+    required: true,
+  },
+  noOfBreaches: {
+    type: Number,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="flex w-full gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4 max-h-[92px] h-full"
+  >
+    <SLA-metric-card
+      :label="$t('SLA_REPORTS.METRICS.HIT_RATE.LABEL')"
+      :value="hitRate"
+      :tool-tip="$t('SLA_REPORTS.METRICS.HIT_RATE.TOOLTIP')"
+    />
+    <div class="w-px h-full border border-slate-75 dark:border-slate-700/50" />
+    <SLAMetricCard
+      label="No of Breaches"
+      :value="noOfBreaches"
+      :tool-tip="$t('SLA_REPORTS.METRICS.NO_OF_BREACHES.TOOLTIP')"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLATable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
similarity index 100%
rename from app/javascript/dashboard/routes/dashboard/settings/reports/SLATable.vue
rename to app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue

From e243eb619a5f9256a9ac06cdf6869a71cc68cfe0 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Wed, 27 Mar 2024 22:41:03 +0530
Subject: [PATCH 4/6] Update SLATable.vue

---
 .../dashboard/settings/reports/components/SLA/SLATable.vue   | 5 +++++
 1 file changed, 5 insertions(+)

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
index b930037cf..8fb5df3dd 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLATable.vue
@@ -37,6 +37,7 @@
         class="flex items-center col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
       >
         #198 with John Doe
+        <card-labels :conversation-id="148" />
       </div>
       <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"
@@ -53,3 +54,7 @@
     </div>
   </div>
 </template>
+
+<script setup>
+import CardLabels from 'dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue';
+</script>

From 5a9a9e3b5387e10bbbfa31bbe63d874ca6cc0a09 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Thu, 28 Mar 2024 15:12:45 +0530
Subject: [PATCH 5/6] Update SLAMetricCard.vue

---
 .../dashboard/settings/reports/components/SLA/SLAMetricCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
index 50d356d46..ff808622a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
@@ -16,7 +16,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="flex flex-col gap-2 items-start justify-center min-w-[160px]">
+  <div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
     <span
       class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm text-slate-700 dark:text-slate-200 font-medium"
     >

From 49b2815e96e5cad33b2a1b6b48be8ca9c3052325 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Fri, 29 Mar 2024 10:00:47 +0530
Subject: [PATCH 6/6] update component

---
 .../settings/reports/components/SLA/SLAMetricCard.vue     | 8 +++-----
 .../settings/reports/components/SLA/SLAMetrics.vue        | 6 ++++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
index ff808622a..ae96790f9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAMetricCard.vue
@@ -18,7 +18,7 @@ defineProps({
 <template>
   <div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
     <span
-      class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm text-slate-700 dark:text-slate-200 font-medium"
+      class="inline-flex items-center gap-1 text-sm text-slate-700 dark:text-slate-200 font-medium"
     >
       {{ label }}
       <fluent-icon
@@ -26,12 +26,10 @@ defineProps({
         size="14"
         icon="information"
         type="outline"
-        class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-slate-500 dark:text-slate-500"
+        class="flex-shrink-0 text-sm font-normal flex sm:font-medium text-slate-500 dark:text-slate-500"
       />
     </span>
-    <span
-      class="text-2xl font-medium text-slate-900 dark:text-slate-25 tracking-[-1.5%]"
-    >
+    <span class="text-2xl font-medium text-slate-900 dark:text-slate-25">
       {{ value }}
     </span>
   </div>
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 848ea081c..b2d89ad04 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
@@ -14,14 +14,16 @@ defineProps({
 
 <template>
   <div
-    class="flex w-full gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4 max-h-[92px] h-full"
+    class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4"
   >
     <SLA-metric-card
       :label="$t('SLA_REPORTS.METRICS.HIT_RATE.LABEL')"
       :value="hitRate"
       :tool-tip="$t('SLA_REPORTS.METRICS.HIT_RATE.TOOLTIP')"
     />
-    <div class="w-px h-full border border-slate-75 dark:border-slate-700/50" />
+    <div
+      class="w-full sm:w-px h-full border border-slate-75 dark:border-slate-700/50"
+    />
     <SLAMetricCard
       label="No of Breaches"
       :value="noOfBreaches"