fix: sla badge not visible in conversation info sidebar.

frontend/src/composables/useSla.js

@@ -18,5 +18,5 @@ export function useSla (dueAt, actualAt) {
             clearInterval(intervalId)
         })
     })
-    return { sla, updateSla }
+    return sla
 }

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>

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>

frontend/src/features/sla/SlaBadge.vue

@@ -1,19 +1,21 @@
 <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" />
+      <AlertCircle size="12" class="text-red-800" />
-        <span class="text-xs text-red-800">{{ label }} Overdue</span>
+      <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"
+      v-else-if="sla?.status === 'hit' && showExtra"
       key="sla-hit"
       class="sla-badge box sla-hit"
     >
-        <CheckCircle size="10" />
+      <CheckCircle size="12" />
       <span class="sla-text">{{ label }} SLA met</span>
     </span>
 
@@ -23,10 +25,9 @@
       key="remaining"
       class="sla-badge box sla-remaining"
     >
-        <Clock size="10" />
+      <Clock size="12" />
       <span class="sla-text">{{ label }} {{ sla.value }}</span>
     </span>
-    </TransitionGroup>
   </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>