feat: Better SLA missed events popover (#9215)

* feat: SLA events component

* feat: Add SLA event item component

* Update SLAPopoverCard.vue

* Update SLAPopoverCard.vue

* fix: Translation

* Update SLAEventItem.vue

* feat: complete sticky nrt

* chore: code cleanup

* Update SLACardLabel.vue

* chore: code cleanup

* chore: away click fixes

* feat: use tabular nums

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue

@@ -5,10 +5,10 @@
     :class="showExtendedInfo ? 'h-[26px] rounded-lg' : 'rounded h-5'"
   >
     <div
+      v-on-clickaway="closeSlaPopover"
       class="flex items-center w-full truncate"
       :class="showExtendedInfo ? 'px-1.5' : 'px-2 gap-1'"
       @mouseover="openSlaPopover()"
-      @mouseleave="closeSlaPopover()"
     >
       <div
         class="flex items-center gap-1"
@@ -42,7 +42,7 @@
     </div>
     <SLA-popover-card
       v-if="showSlaPopoverCard"
-      :all-missed-slas="slaEvents"
+      :sla-missed-events="slaEvents"
       class="right-0 top-7"
     />
   </div>
@@ -51,6 +51,7 @@
 <script>
 import { evaluateSLAStatus } from '../helpers/SLAHelper';
 import SLAPopoverCard from './SLAPopoverCard.vue';
+import { mixin as clickaway } from 'vue-clickaway';
 
 const REFRESH_INTERVAL = 60000;
 
@@ -58,6 +59,7 @@ export default {
   components: {
     SLAPopoverCard,
   },
+  mixins: [clickaway],
   props: {
     chat: {
       type: Object,