From 461ae3cf2298e85b6bfaf43aecc67554da72056c Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinavrautcs@gmail.com>
Date: Fri, 28 Feb 2025 21:32:08 +0530
Subject: [PATCH] fix: sla badge not visible in conversation info sidebar.

---
 frontend/src/composables/useSla.js            |  2 +-
 .../list/ConversationListItem.vue             |  6 +-
 .../conversation/sidebar/ConversationInfo.vue |  9 ++-
 frontend/src/features/sla/SlaBadge.vue        | 61 +++++++++++--------
 4 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/frontend/src/composables/useSla.js b/frontend/src/composables/useSla.js
index 439d2e9..7fdad77 100644
--- a/frontend/src/composables/useSla.js
+++ b/frontend/src/composables/useSla.js
@@ -18,5 +18,5 @@ export function useSla (dueAt, actualAt) {
             clearInterval(intervalId)
         })
     })
-    return { sla, updateSla }
+    return sla
 }
diff --git a/frontend/src/features/conversation/list/ConversationListItem.vue b/frontend/src/features/conversation/list/ConversationListItem.vue
index fe34b6c..36ef3cb 100644
--- a/frontend/src/features/conversation/list/ConversationListItem.vue
+++ b/frontend/src/features/conversation/list/ConversationListItem.vue
@@ -57,16 +57,18 @@
 
         <div class="flex items-center mt-2 space-x-2">
           <SlaBadge
+            v-if="conversation.first_response_due_at"
             :dueAt="conversation.first_response_due_at"
             :actualAt="conversation.first_reply_at"
             :label="'FRD'"
-            :showSLAMet="false"
+            :showExtra="false"
           />
           <SlaBadge
+            v-if="conversation.resolution_due_at"
             :dueAt="conversation.resolution_due_at"
             :actualAt="conversation.resolved_at"
             :label="'RD'"
-            :showSLAMet="false"
+            :showExtra="false"
           />
         </div>
       </div>
diff --git a/frontend/src/features/conversation/sidebar/ConversationInfo.vue b/frontend/src/features/conversation/sidebar/ConversationInfo.vue
index 09c558f..05aa203 100644
--- a/frontend/src/features/conversation/sidebar/ConversationInfo.vue
+++ b/frontend/src/features/conversation/sidebar/ConversationInfo.vue
@@ -27,8 +27,10 @@
     <div class="flex justify-start items-center space-x-2">
       <p class="font-medium">First reply at</p>
       <SlaBadge
+        v-if="conversation.first_response_due_at"
         :dueAt="conversation.first_response_due_at"
         :actualAt="conversation.first_reply_at"
+        :key="conversation.uuid"
       />
     </div>
     <Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" />
@@ -43,7 +45,12 @@
   <div class="flex flex-col gap-1 mb-5">
     <div class="flex justify-start items-center space-x-2">
       <p class="font-medium">Resolved at</p>
-      <SlaBadge :dueAt="conversation.resolution_due_at" :actualAt="conversation.resolved_at" />
+      <SlaBadge 
+        v-if="conversation.resolution_due_at"
+        :dueAt="conversation.resolution_due_at"
+        :actualAt="conversation.resolved_at"
+        :key="conversation.uuid"
+      />
     </div>
     <Skeleton v-if="conversationStore.conversation.loading" class="w-32 h-4" />
     <div v-else>
diff --git a/frontend/src/features/sla/SlaBadge.vue b/frontend/src/features/sla/SlaBadge.vue
index 247c7d6..6ea584d 100644
--- a/frontend/src/features/sla/SlaBadge.vue
+++ b/frontend/src/features/sla/SlaBadge.vue
@@ -1,32 +1,33 @@
 <template>
   <div v-if="dueAt" class="flex justify-start items-center space-x-2">
-    <TransitionGroup name="fade">
-      <!-- Overdue-->
-      <span v-if="sla?.status === 'overdue'" key="overdue" class="sla-badge box sla-overdue">
-        <AlertCircle size="10" class="text-red-800" />
-        <span class="text-xs text-red-800">{{ label }} Overdue</span>
+    <!-- Overdue-->
+    <span v-if="sla?.status === 'overdue'" key="overdue" class="sla-badge box sla-overdue">
+      <AlertCircle size="12" class="text-red-800" />
+      <span class="sla-text text-red-800"
+        >{{ label }} Overdue
+        <span v-if="showExtra">by {{ sla.value }}</span>
       </span>
+    </span>
 
-      <!-- SLA Hit -->
-      <span
-        v-else-if="sla?.status === 'hit' && showSLAMet"
-        key="sla-hit"
-        class="sla-badge box sla-hit"
-      >
-        <CheckCircle size="10" />
-        <span class="sla-text">{{ label }} SLA met</span>
-      </span>
+    <!-- SLA Hit -->
+    <span
+      v-else-if="sla?.status === 'hit' && showExtra"
+      key="sla-hit"
+      class="sla-badge box sla-hit"
+    >
+      <CheckCircle size="12" />
+      <span class="sla-text">{{ label }} SLA met</span>
+    </span>
 
-      <!-- Remaining -->
-      <span
-        v-else-if="sla?.status === 'remaining'"
-        key="remaining"
-        class="sla-badge box sla-remaining"
-      >
-        <Clock size="10" />
-        <span class="sla-text">{{ label }} {{ sla.value }}</span>
-      </span>
-    </TransitionGroup>
+    <!-- Remaining -->
+    <span
+      v-else-if="sla?.status === 'remaining'"
+      key="remaining"
+      class="sla-badge box sla-remaining"
+    >
+      <Clock size="12" />
+      <span class="sla-text">{{ label }} {{ sla.value }}</span>
+    </span>
   </div>
 </template>
 
@@ -38,12 +39,16 @@ const props = defineProps({
   dueAt: String,
   actualAt: String,
   label: String,
-  showSLAMet: {
+  showExtra: {
     type: Boolean,
     default: true
   }
 })
-const { sla } = useSla(ref(props.dueAt), ref(props.actualAt))
+
+let sla = null
+if (props.dueAt) {
+  sla = useSla(ref(props.dueAt), ref(props.actualAt))
+}
 </script>
 
 <style scoped>
@@ -62,4 +67,8 @@ const { sla } = useSla(ref(props.dueAt), ref(props.actualAt))
 .sla-remaining {
   @apply bg-yellow-100 text-yellow-800;
 }
+
+.sla-text {
+  @apply text-[0.65rem];
+}
 </style>