From 3d7d68c1bd24c5d65fca43d69bf7547945ac52e9 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Mon, 1 Apr 2024 11:25:51 +0530
Subject: [PATCH] feat: Add assignee name

---
 .../dashboard/i18n/locale/en/report.json      | 10 ++++++++-
 .../dashboard/settings/reports/SLAReports.vue |  6 +++---
 .../reports/components/SLA/SLAReportItem.vue  |  9 +++++---
 .../reports/components/SLA/SLATable.vue       | 21 ++++++++++++-------
 4 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/app/javascript/dashboard/i18n/locale/en/report.json b/app/javascript/dashboard/i18n/locale/en/report.json
index 6afd5cddd..2c967a091 100644
--- a/app/javascript/dashboard/i18n/locale/en/report.json
+++ b/app/javascript/dashboard/i18n/locale/en/report.json
@@ -508,7 +508,8 @@
   },
   "SLA_REPORTS": {
     "HEADER": "SLA Reports",
-    "METRICS":{
+    "NO_RECORDS": "There are no SLA reports available.",
+    "METRICS": {
       "HIT_RATE": {
         "LABEL": "Hit Rate",
         "TOOLTIP": "Percentage of SLAs created were completed successfully"
@@ -517,6 +518,13 @@
         "LABEL": "Number of Breaches",
         "TOOLTIP": "The total SLA breaches in a certain period."
       }
+    },
+    "TABLE": {
+      "HEADER": {
+        "POLICY_BREACHED": "Policy breached",
+        "CONVERSATION": "Conversation",
+        "AGENT": "Agent"
+      }
     }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
index 1271d4e63..5437181b6 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col flex-1 gap-6 p-4 overflow-auto font-inter">
-    <SLA-filters />
+    <!-- <SLA-filters /> -->
     <SLAMetrics
       :hit-rate="slaMetrics.hitRate"
       :no-of-breaches="slaMetrics.numberOfSLABreaches"
@@ -17,13 +17,13 @@
 import { mapGetters } from 'vuex';
 import SLAMetrics from './components/SLA/SLAMetrics.vue';
 import SLATable from './components/SLA/SLATable.vue';
-import SLAFilters from './components/SLA/SLAFilters.vue';
+// import SLAFilters from './components/SLA/SLAFilters.vue';
 export default {
   name: 'SLAReports',
   components: {
     SLAMetrics,
     SLATable,
-    SLAFilters,
+    // SLAFilters,
   },
   data() {
     return {
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
index 195ff587d..76c939830 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportItem.vue
@@ -1,7 +1,8 @@
 <script setup>
+import { computed } from 'vue';
 import CardLabels from 'dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue';
 import UserAvatar from './UserAvatar.vue';
-defineProps({
+const props = defineProps({
   slaName: {
     type: String,
     required: true,
@@ -15,6 +16,8 @@ defineProps({
     required: true,
   },
 });
+
+const assigneeName = computed(() => props.conversation.assignee?.name);
 </script>
 
 <template>
@@ -43,9 +46,9 @@ defineProps({
       />
     </div>
     <div class="flex items-center gap-2 col-span-2">
-      <user-avatar user-name="Muhsin" src="" />
+      <user-avatar :user-name="assigneeName" src="" />
       <span class="text-slate-600 dark:text-slate-200 capitalize truncate">
-        Muhsin Keloth
+        {{ assigneeName }}
       </span>
     </div>
 
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 a0651dd03..cf2ae565f 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
@@ -8,24 +8,30 @@
         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"
+          class="flex items-center font-medium text-xs py-2 px-0 tracking-[10%] text-slate-700 dark:text-slate-100 text-left rtl:text-right uppercase col-span-2"
         >
-          POLICY BREACHED
+          {{ $t('SLA_REPORTS.TABLE.HEADER.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"
+          class="flex items-center col-span-6 px-0 py-2 text-xs font-medium text-left uppercase text-slate-700 dark:text-slate-100 rtl:text-right"
         >
-          CONVERSATION
+          {{ $t('SLA_REPORTS.TABLE.HEADER.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"
+          class="flex items-center px-0 text-xs font-medium text-left uppercase col-span-2py-2 text-slate-700 dark:text-slate-100 rtl:text-right"
         >
-          AGENT
+          {{ $t('SLA_REPORTS.TABLE.HEADER.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"
+          class="col-span-2 px-0 py-2 text-xs font-medium text-left uppercase text-slate-700 dark:text-slate-100 rtl:text-right"
         />
       </div>
+      <div
+        v-show="!slaReports.length"
+        class="flex items-center justify-center h-32 bg-white dark:bg-slate-900"
+      >
+        {{ $t('SLA_REPORTS.NO_RECORDS') }}
+      </div>
       <SLA-report-item
         v-for="sla in slaReports"
         :key="sla.id"
@@ -35,6 +41,7 @@
       />
     </div>
     <table-footer
+      v-if="shouldShowFooter"
       :current-page="currentPage"
       :total-count="totalCount"
       :page-size="pageSize"