feat: Add assignee name

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"
+      }
     }
   }
 }

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 {

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>
 

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"